Hugging Face's logo

Spaces:
JAYASWAROOP
/
music1
Running

App Files Community
2
JAYASWAROOP commited on
Commit
6e997bf
·
1 Parent(s): 6fa45d6

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +112 -97
index.html CHANGED
@@ -184,10 +184,13 @@
184
  </style>
185
  </head>
186
  <body>
187
-
 
188
  <video autoplay muted loop id="myVideo">
189
  <source src="neon1.mp4.mp4" type="video/mp4">
190
  </video>
 
 
191
 
192
  <div>
193
  <nav class="navbar navbar-expand-lg navbar-light bg-primary">
@@ -212,101 +215,110 @@
212
  </nav>
213
  </div>
214
 
215
- <!-- Modal -->
216
- <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
217
- <div class="modal-dialog">
218
- <div class="modal-content container1">
219
- <div class="">
220
- <div class="m-auto">
221
- <button type="button" class="close mb-auto" data-dismiss="modal" aria-label="Close">
222
- <span aria-hidden="true">&times;</span>
223
- </button>
224
- </div>
225
- <div class="m-4">
226
- <h2>Login</h2>
227
- </div>
228
- <form action="" method="POST" onsubmit="return validateLogin();" name="loginForm">
229
- <div class="card1">
230
- <div>
231
- <input type="text" name="username" placeholder="Username" required>
232
- <input type="password" name="password" placeholder="Password" required>
233
- <input type="submit" value="Login">
234
- </div>
235
- </div>
236
- </form>
237
- </div>
238
- </div>
239
- </div>
240
- </div>
241
- <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
242
- <div class="modal-dialog">
243
-
244
- <div class="modal-content container1">
245
- <div class="">
246
- <div class="m-auto">
247
- <button type="button" class="close mb-auto" data-dismiss="modal" aria-label="Close">
248
- <span aria-hidden="true">&times;</span>
249
- </button>
250
- </div>
251
- <div class="m-4">
252
- <h2>Signup</h2>
253
- </div>
254
- <form action="" method="POST" onsubmit="return validateSignup();" name="signupForm">
255
- <div class="card1">
256
- <input type="text" name="username" placeholder="Username" required>
257
- <input type="password" name="password" placeholder="Password" required>
258
- <input type="email" name="email" placeholder="Email" required>
259
- <input type="tel" pattern="[+]91 [0-9]{10}" placeholder="Enter your mobile number" required>
260
- <input type="submit" value="Signup">
261
- </div>
262
- </form>
263
- </div>
264
  </div>
265
- </div>
266
- </div>
267
- <div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
268
- <div class="modal-dialog">
269
-
270
- <div class="modal-content">
271
- <div class="container playlist">
272
- <div class="m-auto">
273
- <button type="button" class="close mb-auto" data-dismiss="modal" aria-label="Close">
274
- <span aria-hidden="true">&times;</span>
275
- </button>
276
- </div>
277
- <div class="m-4">
278
- <h2>Play List</h2>
279
- </div>
280
- <div class="py-4">
281
- <ul class="list-unstyled song-list">
282
- <li class="song-item row">
283
- <img src="song1.jpg" alt="Song 1" class="col-2 col-md-1">
284
- <div class="song-details col-10 col-md-11">
285
- <p class="song-title">Song Title 1</p>
286
- <p class="song-artist">Artist 1</p>
287
- </div>
288
- </li>
289
- <li class="song-item row">
290
- <img src="song2.jpg" alt="Song 2" class="col-2 col-md-1">
291
- <div class="song-details col-10 col-md-11">
292
- <p class="song-title">Song Title 2</p>
293
- <p class="song-artist">Artist 2</p>
294
- </div>
295
- </li>
296
- <li class="song-item row">
297
- <img src="song3.jpg" alt="Song 3" class="col-2 col-md-1">
298
- <div class="song-details col-10 col-md-11">
299
- <p class="song-title">Song Title 3</p>
300
- <p class="song-artist">Artist 3</p>
301
- </div>
302
- </li>
303
- </ul>
304
- </div>
305
- </div>
306
  </div>
307
- </div>
308
- </div>
309
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
310
  <div>
311
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
312
  <ol class="carousel-indicators">
@@ -361,6 +373,8 @@
361
  <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAi0RCj8aLdKFX-cvYkW6kDveuaUlMnpes&libraries=places&callback=initMap"></script>
362
  </div>
363
 
 
 
364
  <div class="fluid-container m-5">
365
 
366
  <div class="row p-3">
@@ -370,7 +384,7 @@
370
  </h1>
371
  </div>
372
  <div class="col-sm-12 col-md-3">
373
- <div class="shadow-lg bg-light movie">
374
  <div>
375
  <img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
376
  </div>
@@ -646,12 +660,13 @@
646
 
647
  </div>
648
  </div>
649
- <div>
 
650
  <footer class="footer mt-auto py-3">
651
  <div class="container">
652
  <span class="text-muted">Place sticky footer content here.</span>
653
  </div>
654
- </footer>
655
  </div>
656
 
657
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 
184
  </style>
185
  </head>
186
  <body>
187
+ <!-- vedio tag for background animation -->
188
+
189
  <video autoplay muted loop id="myVideo">
190
  <source src="neon1.mp4.mp4" type="video/mp4">
191
  </video>
192
+
193
+ <!-- Navbar which containes logo and features -->
194
 
195
  <div>
196
  <nav class="navbar navbar-expand-lg navbar-light bg-primary">
 
215
  </nav>
216
  </div>
217
 
218
+ <!-- Login Page appears when click on the login text -->
219
+ <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
220
+ <div class="modal-dialog">
221
+ <div class="modal-content container1">
222
+ <div class="">
223
+ <div class="m-auto">
224
+ <button type="button" class="close mb-auto" data-dismiss="modal" aria-label="Close">
225
+ <span aria-hidden="true">&times;</span>
226
+ </button>
227
+ </div>
228
+ <div class="m-4">
229
+ <h2>Login</h2>
230
+ </div>
231
+ <form action="" method="POST" onsubmit="return validateLogin();" name="loginForm">
232
+ <div class="card1">
233
+ <div>
234
+ <input type="text" name="username" placeholder="Username" required>
235
+ <input type="password" name="password" placeholder="Password" required>
236
+ <input type="submit" value="Login">
237
+ </div>
238
+ </div>
239
+ </form>
240
+ </div>
241
+ </div>
242
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
243
  </div>
244
+
245
+
246
+ <!-- SignUp Page appears when click on the signup text -->
247
+ <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
248
+ <div class="modal-dialog">
249
+
250
+ <div class="modal-content container1">
251
+ <div class="">
252
+ <div class="m-auto">
253
+ <button type="button" class="close mb-auto" data-dismiss="modal" aria-label="Close">
254
+ <span aria-hidden="true">&times;</span>
255
+ </button>
256
+ </div>
257
+ <div class="m-4">
258
+ <h2>Signup</h2>
259
+ </div>
260
+ <form action="" method="POST" onsubmit="return validateSignup();" name="signupForm">
261
+ <div class="card1">
262
+ <input type="text" name="username" placeholder="Username" required>
263
+ <input type="password" name="password" placeholder="Password" required>
264
+ <input type="email" name="email" placeholder="Email" required>
265
+ <input type="tel" pattern="[+]91 [0-9]{10}" placeholder="Enter your mobile number" required>
266
+ <input type="submit" value="Signup">
267
+ </div>
268
+ </form>
269
+ </div>
270
+ </div>
271
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
272
  </div>
273
+
274
+
275
+ <!-- Playlist Page appears when click on the playlist text -->
276
+ <!-- still in progress -->
277
+ <div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
278
+ <div class="modal-dialog">
279
+
280
+ <div class="modal-content">
281
+ <div class="container playlist">
282
+ <div class="m-auto">
283
+ <button type="button" class="close mb-auto" data-dismiss="modal" aria-label="Close">
284
+ <span aria-hidden="true">&times;</span>
285
+ </button>
286
+ </div>
287
+ <div class="m-4">
288
+ <h2>Play List</h2>
289
+ </div>
290
+ <div class="py-4">
291
+ <ul class="list-unstyled song-list">
292
+ <li class="song-item row">
293
+ <img src="song1.jpg" alt="Song 1" class="col-2 col-md-1">
294
+ <div class="song-details col-10 col-md-11">
295
+ <p class="song-title">Song Title 1</p>
296
+ <p class="song-artist">Artist 1</p>
297
+ </div>
298
+ </li>
299
+ <li class="song-item row">
300
+ <img src="song2.jpg" alt="Song 2" class="col-2 col-md-1">
301
+ <div class="song-details col-10 col-md-11">
302
+ <p class="song-title">Song Title 2</p>
303
+ <p class="song-artist">Artist 2</p>
304
+ </div>
305
+ </li>
306
+ <li class="song-item row">
307
+ <img src="song3.jpg" alt="Song 3" class="col-2 col-md-1">
308
+ <div class="song-details col-10 col-md-11">
309
+ <p class="song-title">Song Title 3</p>
310
+ <p class="song-artist">Artist 3</p>
311
+ </div>
312
+ </li>
313
+ </ul>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+
321
+ <!-- Carousel for image automate sliding -->
322
  <div>
323
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
324
  <ol class="carousel-indicators">
 
373
  <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAi0RCj8aLdKFX-cvYkW6kDveuaUlMnpes&libraries=places&callback=initMap"></script>
374
  </div>
375
 
376
+ <!-- Container page which containes songs -->
377
+
378
  <div class="fluid-container m-5">
379
 
380
  <div class="row p-3">
 
384
  </h1>
385
  </div>
386
  <div class="col-sm-12 col-md-3">
387
+ <div class="shadow-lg bg-light movie">
388
  <div>
389
  <img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
390
  </div>
 
660
 
661
  </div>
662
  </div>
663
+
664
+ <div>
665
  <footer class="footer mt-auto py-3">
666
  <div class="container">
667
  <span class="text-muted">Place sticky footer content here.</span>
668
  </div>
669
+ </footer>
670
  </div>
671
 
672
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>