Hugging Face's logo

Spaces:
JAYASWAROOP
/
music1
Running

App Files Community
2
JAYASWAROOP commited on
Commit
d450781
•
1 Parent(s): 710766b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +450 -18
index.html CHANGED
@@ -1,19 +1,451 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
9
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
10
+ <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>
11
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
12
+ <script src="https://kit.fontawesome.com/20c5629a29.js" crossorigin="anonymous"></script>
13
+ <script src="audio.js"></script>
14
+
15
+ <style>
16
+ * {
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ #myVideo {
21
+ position: fixed;
22
+ right: 0;
23
+ bottom: 0;
24
+ min-width: 100%;
25
+ min-height: 100%;
26
+ }
27
+
28
+ .slide{
29
+ height: 60vh;
30
+ width: 100%;
31
+ }
32
+ input{
33
+ border-radius: 9px;
34
+ border-width: 0px;
35
+ width: 170px;
36
+ }
37
+ .movie {
38
+ border-radius: 11px;
39
+ margin-bottom: 20px;
40
+ transition: transform 0.2s ease-in-out;
41
+ }
42
+
43
+ .movie:hover {
44
+ transform: scale(1.07);
45
+ }
46
+ .song{
47
+ border-top-left-radius: 11px;
48
+ border-top-right-radius: 11px;
49
+ }
50
+ #audioPlayer {
51
+
52
+ width: 1000px;
53
+ margin-top: 20px;
54
+ }
55
+
56
+ #audioPlayer {
57
+ border-radius: 8px;
58
+ padding: 10px;
59
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
60
+ }
61
+
62
+ #audioPlayer audio {
63
+ border-radius: 8px;
64
+ width: 1000px;
65
+ outline: none;
66
+ }
67
+
68
+ #audioPlayer audio::-webkit-media-controls-panel {
69
+ border-radius: 8px;
70
+ background-color: transparent;
71
+ border-radius: 6px;
72
+ }
73
+
74
+ #audioPlayer audio::-webkit-media-controls {
75
+ display: none !important;
76
+ }
77
+
78
+ #audioPlayer audio::-webkit-media-controls-play-button,Tum Kya Mile Rocky Aur Rani Kii Prem Kahaani 320 Kbps.mp3
79
+ #audioPlayer audio::-webkit-media-controls-volume-slider {
80
+ display: none !important;
81
+ }
82
+
83
+ #audioPlayer audio::--webkit-media-controls-current-time-display,
84
+ #audioPlayer audio::--webkit-media-controls-time-remaining-display {
85
+ font-family: Arial, sans-serif;
86
+ font-size: 14px;
87
+ color: rgb(174, 228, 253);
88
+ }
89
+
90
+
91
+ </style>
92
+ </head>
93
+ <body>
94
+ <div>
95
+ <video autoplay muted loop id="myVideo">
96
+ <source src="neon1.mp4.mp4" type="video/mp4">
97
+ </video>
98
+
99
+ <div>
100
+ <nav class="navbar navbar-expand-lg navbar-light bg-primary">
101
+ <a class="navbar-brand" href="#"><img src="https://cdn.dribbble.com/users/3547568/screenshots/14395014/media/0b94c75b97182946d495f34c16eab987.jpg?resize=400x300&vertical=center" style="height: 65px; width: 65px; border-radius: 100px;"/></a>
102
+ <div>
103
+ <input type="search" id="searchBar" placeholder="Search for a song" class="mr-2 ml-2 p-2 mt-2">
104
+ </div>
105
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
106
+ <span class="navbar-toggler-icon"></span>
107
+ </button>
108
+ <div class="collapse navbar-collapse ml-auto" id="navbarNavAltMarkup">
109
+ <div class="navbar-nav ml-auto">
110
+ <a class="nav-link active text-white" href="#">Home <span class="sr-only">(current)</span></a>
111
+ <a class="nav-link text-white" href="#">LogIn</a>
112
+ <a class="nav-link text-white" href="#">SignUp</a>
113
+ <a class="nav-link text-white" href="#">PlayList</a>
114
+ <a class="nav-link text-white" href="#">About</a>
115
+ <a class="nav-link text-white" href="#">Settings</a>
116
+ <a class="nav-link text-white" href="#">Downloads</a>
117
+ </div>
118
+ </div>
119
+ </nav>
120
+ </div>
121
+ <div>
122
+ <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
123
+ <ol class="carousel-indicators">
124
+ <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
125
+ <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
126
+ <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
127
+ </ol>
128
+ <div class="carousel-inner">
129
+ <div class="carousel-item active">
130
+ <img src="https://img.freepik.com/free-vector/young-people-jumping-having-fun_23-2148313536.jpg?t=st=1700131011~exp=1700131611~hmac=d9864498c06aa235de278720d8abbca1263c0904b9afd1675cb489a559d65732" class="d-block slide" alt="...">
131
+ <div class="carousel-caption d-none d-md-block">
132
+ <h5>First slide label</h5>
133
+ <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
134
+ </div>
135
+ </div>
136
+ <link rel="stylesheet" href="style.css">
137
+ <div class="carousel-item">
138
+ <img src="https://img.freepik.com/free-vector/flat-design-nostalgic-90-s-background_52683-72484.jpg?w=1380&t=st=1700130425~exp=1700131025~hmac=b93fc935100be45a915bc63d0ac7d6fa485afebe63e5aeba683502868b65a013" class="d-block slide" alt="...">
139
+ <div class="carousel-caption d-none d-md-block">
140
+ <h5>Second slide label</h5>
141
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
142
+ </div>
143
+ </div>
144
+ <div class="carousel-item">
145
+ <img src="https://img.freepik.com/free-vector/hand-drawn-flat-design-metaverse-background_23-2149257282.jpg?w=900&t=st=1700130483~exp=1700131083~hmac=e47fa0774a51bbf2170c2ee0333f93a846156dedf3fd5408b69274f423a7e4d8" class="d-block slide" alt="...">
146
+ <div class="carousel-caption d-none d-md-block">
147
+ <h5>Third slide label</h5>
148
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
149
+ </div>
150
+ </div>
151
+ <div class="carousel-item">
152
+ <img src="https://img.freepik.com/free-vector/hand-drawn-flat-design-metaverse-background_23-2149257282.jpg?w=900&t=st=1700130483~exp=1700131083~hmac=e47fa0774a51bbf2170c2ee0333f93a846156dedf3fd5408b69274f423a7e4d8" class="d-block slide" alt="...">
153
+ <div class="carousel-caption d-none d-md-block">
154
+ <h5>Third slide label</h5>
155
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
160
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
161
+ <span class="sr-only">Previous</span>
162
+ </a>
163
+ <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
164
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
165
+ <span class="sr-only">Next</span>
166
+ </a>
167
+ </div><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
168
+ <link rel="stylesheet" href="search.css" />
169
+ <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAi0RCj8aLdKFX-cvYkW6kDveuaUlMnpes&libraries=places&callback=initMap"></script>
170
+ </div>
171
+
172
+ <div class="fluid-container m-5">
173
+
174
+ <div class="row p-3">
175
+ <div class="col-12 mt-4">
176
+ <h1 class="text-white">
177
+ Trending Songs
178
+ </h1>
179
+ </div>
180
+ <div class="col-6 col-md-3">
181
+ <div class="shadow-lg bg-light movie">
182
+ <div>
183
+ <img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
184
+ </div>
185
+ <div class="p-3">
186
+ <h1 style="font-size: 28px;">Heeriye</h1>
187
+ <p style="font-size: 20px;">Description</p>
188
+ <audio controls autoplay class="d-none" id="audio">
189
+ <source src="ranjha.mp3" type="audio/mp3" />
190
+ </audio>
191
+ </div>
192
+
193
+ </div>
194
+ </div>
195
+ <div class="col-6 col-md-3">
196
+ <div class="shadow-lg bg-light movie">
197
+ <div>
198
+ <img src="https://i.pinimg.com/originals/24/ea/ea/24eaea94a992b462b99f64aec083bd7e.png" style="width: 100%;" alt="" class="song">
199
+ </div>
200
+ <div class="p-3">
201
+ <h1 style="font-size: 28px;"><a href="Chaleya Jawan 320 Kbps(1).mp3" download>
202
+ Chaleya
203
+ </a></h1>
204
+ <p style="font-size: 20px;">
205
+ Description
206
+ </p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <div class="col-6 col-md-3">
211
+ <div class="shadow-lg bg-light movie">
212
+ <div>
213
+ <img src="https://m.timesofindia.com/photo/96027287/size-75010/96027287.jpg" style="width: 100%;" alt="" class="song">
214
+ </div>
215
+ <div class="p-3">
216
+ <h1 style="font-size: 28px;"><a href="Apna Bana Le Bhediya 320 Kbps.mp3" download>
217
+ Apna Bana le
218
+ </a></h1>
219
+ <p style="font-size: 20px;">
220
+ Description
221
+ </p>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ <div class="col-6 col-md-3">
226
+ <div class="shadow-lg bg-light movie">
227
+ <div>
228
+ <img src="https://images.fwdlife.in/2023/07/Feature-Image.jpg" style="width: 100%;" alt="" class="song">
229
+ </div>
230
+ <div class="p-3">
231
+ <h1 style="font-size: 28px;"><a href="Tum Kya Mile Rocky Aur Rani Kii Prem Kahaani 320 Kbps.mp3" download>
232
+ Tum Kya Mile
233
+ </a></h1>
234
+ <p style="font-size: 20px;">
235
+ Description
236
+ </p>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ <div class="col-12 mt-3">
241
+ <h1 class="text-white">
242
+ Popular Songs
243
+ </h1>
244
+ </div>
245
+ <div class="col-6 col-md-3">
246
+ <div class="shadow-lg bg-light movie">
247
+ <div>
248
+ <img src="https://naasongsmix.com/wp-content/uploads/2022/06/rj.jpg" style="width: 100%;" alt="" class="song">
249
+ </div>
250
+ <div class="p-3">
251
+ <h1 style="font-size: 28px;"><a href="ranjha.mp3" download>
252
+ Ranjha</a>
253
+ </h1>
254
+ <p style="font-size: 20px;">
255
+ Description
256
+ </p>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ <div class="col-6 col-md-3">
261
+ <div class="shadow-lg bg-light movie">
262
+ <div>
263
+ <img src="https://img.theweek.in/content/dam/week/news/entertainment/images/2022/8/4/sita-ramam.jpg" style="width: 100%;" alt="" class="song">
264
+ </div>
265
+ <div class="p-3">
266
+ <h1 style="font-size: 28px;">
267
+ Song Name6
268
+ </h1>
269
+ <p style="font-size: 20px;">
270
+ Description
271
+ </p>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ <div class="col-6 col-md-3">
276
+ <div class="shadow-lg bg-light movie">
277
+ <div>
278
+ <img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
279
+ </div>
280
+ <div class="p-3">
281
+ <h1 style="font-size: 28px;">
282
+ Song Name7
283
+ </h1>
284
+ <p style="font-size: 20px;">
285
+ Description
286
+ </p>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ <div class="col-6 col-md-3">
291
+ <div class="shadow-lg bg-light movie">
292
+ <div>
293
+ <img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
294
+ </div>
295
+ <div class="p-3">
296
+ <h1 style="font-size: 28px;">
297
+ Song Name8
298
+ </h1>
299
+ <p style="font-size: 20px;">
300
+ Description
301
+ </p>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ <div class="col-12 mt-3">
306
+ <h1 class="text-white">
307
+ Best of 90's
308
+ </h1>
309
+ </div>
310
+ <div class="col-6 col-md-3">
311
+ <div class="shadow-lg bg-light movie">
312
+ <div>
313
+ <img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
314
+ </div>
315
+ <div class="p-3">
316
+ <h1 style="font-size: 28px;">
317
+ Song Name9
318
+ </h1>
319
+ <p style="font-size: 20px;">
320
+ Description
321
+ </p>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ <div class="col-6 col-md-3">
326
+ <div class="shadow-lg bg-light movie">
327
+ <div>
328
+ <img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
329
+ </div>
330
+ <div class="p-3">
331
+ <h1 style="font-size: 28px;">
332
+ Song Name10
333
+ </h1>
334
+ <p style="font-size: 20px;">
335
+ Description
336
+ </p>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ <div class="col-6 col-md-3">
341
+ <div class="shadow-lg bg-light movie">
342
+ <div>
343
+ <img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
344
+ </div>
345
+ <div class="p-3">
346
+ <h1 style="font-size: 28px;">
347
+ Song Name11
348
+ </h1>
349
+ <p style="font-size: 20px;">
350
+ Description
351
+ </p>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ <div class="col-6 col-md-3">
356
+ <div class="shadow-lg bg-light movie">
357
+ <div>
358
+ <img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
359
+ </div>
360
+ <div class="p-3">
361
+ <h1 style="font-size: 28px;">
362
+ Song Name12
363
+ </h1>
364
+ <p style="font-size: 20px;">
365
+ Description
366
+ </p>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ <div class="col-12 mt-3">
371
+ <h1 class="text-white">
372
+ Artists
373
+ </h1>
374
+ </div>
375
+ <div class="col-6 col-md-3">
376
+ <div class="shadow-lg bg-light movie">
377
+ <div>
378
+ <img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
379
+ </div>
380
+ <div class="p-3">
381
+ <h1 style="font-size: 28px;">
382
+ Song Name13
383
+ </h1>
384
+ <p style="font-size: 20px;">
385
+ Description
386
+ </p>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ <div class="col-6 col-md-3">
391
+ <div class="shadow-lg bg-light movie">
392
+ <div>
393
+ <img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
394
+ </div>
395
+ <div class="p-3">
396
+ <h1 style="font-size: 28px;">
397
+ Song Name14
398
+ </h1>
399
+ <p style="font-size: 20px;">
400
+ Description
401
+ </p>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ <div class="col-6 col-md-3">
406
+ <div class="shadow-lg bg-light movie">
407
+ <div>
408
+ <img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
409
+ </div>
410
+ <div class="p-3">
411
+ <h1 style="font-size: 28px;">
412
+ Song Name15
413
+ </h1>
414
+ <p style="font-size: 20px;">
415
+ Description
416
+ </p>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ <div class="col-6 col-md-3">
421
+ <div class="shadow-lg bg-light movie">
422
+ <div>
423
+ <img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
424
+ </div>
425
+ <div class="p-3">
426
+ <h1 style="font-size: 28px;">
427
+ Song Name16
428
+ </h1>
429
+ <p style="font-size: 20px;">
430
+ Description
431
+ </p>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ <div>
439
+ <footer class="footer mt-auto py-3">
440
+ <div class="container">
441
+ <span class="text-muted">Place sticky footer content here.</span>
442
+ </div>
443
+ </footer>
444
+ </div>
445
+
446
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
447
+ <script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
448
+ <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
449
+ <script src="script.js"></script>
450
+ </body>
451
+ </html>