PetPals/Swipe.html at development · alikasper/PetPals · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-177834305-1"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "UA-177834305-1");
    </script>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Find Your PetPal</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
    />
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="Swipe.css" />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="index.html">
        <img
          src="images/paw.png"
          width="30"
          height="30"
          class="d-inline-block align-top"
          alt=""
          loading="lazy"
        />
        PetPals
      </a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
        aria-controls="navbarNav"
        aria-haspopup="true"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="Swipe.html">Meet</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="matched-list.html">Matches</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="map.html">Map</a>
          </li>
        </ul>
      </div>
    </nav>

    <div id="page-container">
      <div id="content-wrap">
        <div id="swipe-header">
          <div class="col-12 header text-center">
            <img
              class="mx-auto custom-logo"
              src="images/meet_logo_paw.png"
              height="200"
            />
            <h5>
              If you are interested in the pet below, swipe the picture to the
              right or click the green button and it will be added to your match
              list. <br />If not, swipe the picture to the left or click the red
              button to see a new pet.
            </h5>
          </div>
        </div>

        <div class="container swipe-cont">
          <div class="no-container">
            <input
              type="image"
              img
              src="images/red_ex.png"
              id="submit_no"
              class="submit_button"
              name="red_ex"
            />
          </div>

          <div id="draggable" class="ui-widget-content">
            <p>Fetching your potential forever friend...</p>
          </div>

          <div class="yes-container">
            <input
              type="image"
              src="images/green_check.png"
              id="submit_yes"
              class="submit_button"
              name="green_check"
            />
          </div>
        </div>

        <div id="footer">
          <img class="footer-logo" src="images/paw.png" width="35px" />
          <p id="copyright">
            Copyright &copy;
            <script>
              document.write(new Date().getFullYear());
            </script>
            PetPals
          </p>
        </div>
      </div>
    </div>

    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
      integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
      crossorigin="anonymous"
    ></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="preview.js"></script>
    <script src="auth.js"></script>
    <script src="image-source.js"></script>
    <script src="Swipe.js"></script>
  </body>
</html>