This repository has been archived by the owner on Nov 29, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
81 lines (76 loc) · 2.98 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dancefloor</title>
<!-- Bootstrap File -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<link rel="stylesheet" href="./assets/css/style.css">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/4.8.0/firebase.js"></script>
<script src="./assets/script/main.js"></script>
</head>
<body>
<div class="jumbotron" id="header">
<h1 class="text-center bounce-animation">
<strong>WELCOME TO THE DANCE FLOOR</strong>
</h1>
</div>
<div id="intro" class="container">
<div class="row">
<div class="col-lg-6">
<div class="jumbotron" id="instructions">
<h1>INSTRUCTIONS</h1>
<p>Pick a GIF below, then click on the velvet rope to the right to enter the club! Once inside, click anywhere on
the dance floor to move. If you ever feel like changing your avatar simply click on a different GIF</p>
</div>
</div>
<div class="col-lg-6">
<img id="start" class="rounded" src="./assets/img/velvetRope.jpg" width="100%">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div id="dancefloorContainer" style="display:none;">
<img src="./assets/img/dancefloor.jpg" id="danceFloorImg">
</div>
</div>
<div class="row card text-white bg-dark mb-3" id="gifSelectPanel">
<div class="card-header">Select your avatar, click on the dance floor to move!</div>
<div class="card-body">
<div class="row">
<form class="form-inline" id="searchForm">
<div class="col-auto">
<input type="text" class="form-control mb-2 mb-sm-0" id="filterInput" placeholder="Filter gifs by name...">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</form>
<div class="col-auto">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary active numResults">20</button>
<button type="button" class="btn btn-outline-secondary numResults">40</button>
</div>
</div>
</div>
<div class="text-center" id="prevNextBtnGroup">
<div class="btn-group">
<button class="btn btn-outline-light" id="prevBtn">Previous</button>
<button class="btn btn-outline-light" id="nextBtn">Next</button>
</div>
</div>
<div id="gifSelect"></div>
</div>
</div>
<div class="row">
<iframe width="560" height="315" src="https://www.youtube.com/embed/GVC5adzPpiE?rel=0" frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen></iframe>
</div>
</div>
</body>
</html>