-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
268 lines (226 loc) · 9.91 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
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Dope Title -->
<title>Oh, What's That Song?</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Reset CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/reset.css" />
<!-- Linking JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Linking Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<!-- css links -->
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/songStyle.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/animate.css" />
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase.js"></script>
<!-- linking anime.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"> </script>
<!-- Font Links -->
<link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Voltaire" rel="stylesheet">
</head>
<body>
<!-- Comment here -->
<div class="container">
<div class= "row justify-content-end" id="log-con">
<div class="text-center col-3">
<a href="" class="btn btn-default btn-rounded mb-1 sign-up-btn" data-toggle="modal" data-target="#modalRegisterForm">Sign Up</a>
</div>
<div class="text-center col-3">
<a href="" class="btn btn-default btn-rounded mb-1 login-btn" data-toggle="modal" data-target="#modalLoginForm">Log In</a>
</div>
</div>
<div class= "row justify-content-end welcome" id="logged-con">
<div class= "col-6">
<span id="logged-name">Welcome </span><span id = logout class="logout"> (logout) </span>
</div>
</div>
</div>
<!-- header -->
<div class="header-container">
<div class="row">
<div class="col justify-content-end">
<p>What's That Song?!</p>
</div>
</div>
</div>
<!-- Animation space for record player -->
<div class="container record-container">
<div class="row" id="spinning-record">
<div class="col-4">
<img src="assets/images/snow-patrol-run-remixes.png" alt="spinning record" class="recordOne img-fluid">
</div>
<div class="col-4">
<img src="assets/images/snow-patrol-run-remixes.png" alt="spinning record" class="recordTwo img-fluid">
</div>
<div class="col-4">
<img src="assets/images/snow-patrol-run-remixes.png" alt="spinning record" class="recordThree img-fluid">
</div>
</div>
</div>
<!-- Container for input text -->
<div class="container mb-5 search-container rounded inputclass">
<div class="row">
<div class="col-sm-9 col-lg-9">
<h3>Search Lyics Here!</h3>
</div>
<div class="col-sm-3">
<button id="view-saved" type="button" class="btn btn-dark" style="display: none;">Saved Songs</button>
</div>
<div class="col-sm-3">
<button id="back-to-search" type="button" class="btn btn-dark" style="display: none;">Return to Search</button>
</div>
</div>
<div class="row p-2">
<div class="col-12">
<!-- Search Text Box & Saved songs-->
<input id="inputLyrics" class="form-control" type="text" placeholder="Oops I did it again" aria-label="Search"
style="display: visible">
</div>
<div id="search-and-saved" class="col-12" style="display: none">
<!-- Saved songs-->
<table class="table table-sm table-hover saved-songs-table" id='saved-table'>
<thead>
<tr>
<th scope="col">Artist</th>
<th scope="col">Song</th>
<th scope="col">Spotify</th>
<th scope="col">Youtube</th>
<th scope="col">Remove Song</th>
</tr>
</thead>
<tbody class="table-con">
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-12">
<!-- Search Button -->
<input id="submit" type="submit" class="mt-3 btn btn-dark btn-lg btn-block" value="GIVE IT TO ME!" style="display: visible">
</div>
</div>
</div>
<!-- container for search results -->
<div class="container results-container rounded infoclass">
<div class="row">
<div class="col-lg-7 col-sm-12">
Search Results!
</div>
<div class="col-sm-3">
<button id="back-to-results" type="button" class="btn btn-dark" style="display: none;">Back to results</button>
</div>
<div class="col-sm-2">
<button id="save-song" type="button" class="btn btn-dark" style="display: none;">Save Song</button>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12">
<div id="songresults">Results show up here!
</div>
</div>
<div id="loading-songs" class="col-4">
<img src="assets/images/snow-patrol-run-remixes.png" alt="spinning record" class="recordFour img-fluid">
</div>
</div>
</div>
<!-- Login in HTML -->
<!-- =========================================================================== -->
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="login-email" class="form-control validate">
<!-- E-mail text box -->
<label id="emaillogin" data-error="wrong" data-success="right" for="defaultForm-email">Email</label>
</div>
<div class="md-form mb-0">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="login-pass" class="form-control validate">
<!-- Password Text Box -->
<label id="passwordlogin" data-error="wrong" data-success="right" for="defaultForm-pass">Password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<!-- Login Button -->
<button id="loginbutton" class="btn btn-default">Login</button>
</div>
</div>
</div>
</div>
<!-- Sign up HTML -->
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-2">
<div class="md-form mb-2">
<i class="fas fa-user prefix grey-text"></i>
<span id="signup-err" class="signup-err"></span>
</div>
<div class="md-form mb-2">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="signup-user" class="form-control validate">
<!-- Name Text Box -->
<label id="namesignup" data-error="wrong" data-success="right" for="orangeForm-name">Username</label>
</div>
<div class="md-form mb-2">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="signup-email" class="form-control validate">
<!-- E-mail text box -->
<label id="emailsignup" data-error="wrong" data-success="right" for="orangeForm-email">Email</label>
</div>
<div class="md-form mb-2">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="signup-pass" class="form-control validate">
<!-- Password Text Box -->
<label id="passlogin" data-error="wrong" data-success="right" for="orangeForm-pass">Password (Min 6 Characters)</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<!-- Sign up Button -->
<button id="signupbutton" class="btn btn-deep-orange">Sign Up!</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer workspace -->
<footer class="footer mt-5 py-3">
<div class="container">
<div class="row text-center">
<div class="col-12 col-sm-12">
Let Name = Dope Productions 2019 © Powered by <a href= https://audd.io target="blank"> audd.io</a>
</div>
</div>
</div>
</footer>
<!-- Javascript file -->
<script src="assets/javascript/songIndex.js"></script>
<!-- animate.js file-->
<script src="assets/javascript/animate.js"> </script>
</body>
</html>