Hugging Face's logo

Spaces:
JAYASWAROOP
/
music1
Running

App Files Community
2
JAYASWAROOP commited on
Commit
66e83fd
•
1 Parent(s): d4c0000

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +174 -3
index.html CHANGED
@@ -252,6 +252,105 @@ audio {
252
  border-radius: 5px;
253
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
254
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
255
  </style>
256
  </head>
257
  <body>
@@ -281,8 +380,7 @@ audio {
281
  <a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal4" href="#">About</a>
282
  <a class="nav-link text-white" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Settings</a>
283
  <a class="nav-link text-white" href="#">Downloads</a>
284
- <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
285
- </div>
286
  </div>
287
  </nav>
288
  </div>
@@ -294,7 +392,80 @@ audio {
294
  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
295
  </div>
296
  <div class="offcanvas-body">
297
- <p>Try scrolling the rest of the page to see this option in action.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
298
  </div>
299
  </div>
300
  <!-- Login Page appears when click on the login text -->
 
252
  border-radius: 5px;
253
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
254
  }
255
+
256
+ .settings {
257
+
258
+ margin: 0 auto;
259
+ padding: 20px;
260
+ background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);
261
+ border-radius: 8px;
262
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
263
+ }
264
+
265
+ .settings h2 {
266
+ font-size: 28px;
267
+ margin-bottom: 20px;
268
+ color: #333;
269
+ }
270
+
271
+ .form-group {
272
+ margin-bottom: 25px;
273
+ }
274
+
275
+ label {
276
+ display: block;
277
+ margin-bottom: 8px;
278
+ font-weight: bold;
279
+ color: #444;
280
+ }
281
+
282
+ select,
283
+ input[type="checkbox"] {
284
+ width: calc(100% - 16px);
285
+ padding: 10px;
286
+ font-size: 16px;
287
+ border-radius: 5px;
288
+ border: 1px solid #ddd;
289
+ outline: none;
290
+ }
291
+
292
+ button {
293
+ padding: 12px 24px;
294
+ background-color: #3498db;
295
+ color: #fff;
296
+ border: none;
297
+ border-radius: 5px;
298
+ cursor: pointer;
299
+ font-size: 18px;
300
+ transition: background-color 0.3s ease;
301
+ }
302
+
303
+ button:hover {
304
+ background-color: #2980b9;
305
+ }
306
+
307
+ /* Toggle Switch Styles */
308
+
309
+ .toggle-switch {
310
+ position: relative;
311
+ display: inline-block;
312
+ width: 60px;
313
+ height: 30px;
314
+ }
315
+
316
+ .toggle-switch input {
317
+ opacity: 0;
318
+ width: 0;
319
+ height: 0;
320
+ }
321
+
322
+ .toggle-switch label {
323
+ position: absolute;
324
+ cursor: pointer;
325
+ width: 100%;
326
+ height: 100%;
327
+ background-color: #ccc;
328
+ border-radius: 15px;
329
+ transition: background-color 0.3s ease;
330
+ }
331
+
332
+ .toggle-switch input:checked + label {
333
+ background-color: #3498db;
334
+ }
335
+
336
+ .toggle-switch label:before {
337
+ position: absolute;
338
+ content: '';
339
+ height: 26px;
340
+ width: 26px;
341
+ left: 2px;
342
+ bottom: 2px;
343
+ background-color: #fff;
344
+ border-radius: 50%;
345
+ transition: transform 0.3s ease;
346
+ }
347
+
348
+ .toggle-switch input:checked + label:before {
349
+ transform: translateX(30px);
350
+ }
351
+
352
+
353
+
354
  </style>
355
  </head>
356
  <body>
 
380
  <a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal4" href="#">About</a>
381
  <a class="nav-link text-white" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Settings</a>
382
  <a class="nav-link text-white" href="#">Downloads</a>
383
+ </div>
 
384
  </div>
385
  </nav>
386
  </div>
 
392
  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
393
  </div>
394
  <div class="offcanvas-body">
395
+ <div class="settings">
396
+ <h2>Settings</h2>
397
+ <form>
398
+ <div class="form-group">
399
+ <label for="theme">Theme:</label>
400
+ <select id="theme" name="theme">
401
+ <option value="light">Light</option>
402
+ <option value="dark">Dark</option>
403
+ <option value="custom">Custom</option>
404
+ </select>
405
+ </div>
406
+ <div class="form-group">
407
+ <label for="autoplay">Autoplay:</label>
408
+ <div class="toggle-switch">
409
+ <input type="checkbox" id="autoplay" name="autoplay">
410
+ <label for="autoplay"></label>
411
+ </div>
412
+ </div>
413
+ <div class="form-group">
414
+ <label for="notifications">Notifications:</label>
415
+ <div class="toggle-switch">
416
+ <input type="checkbox" id="notifications" name="notifications">
417
+ <label for="notifications"></label>
418
+ </div>
419
+ </div>
420
+ <div class="form-group">
421
+ <label for="language">Language:</label>
422
+ <select id="language" name="language">
423
+ <option value="english">English</option>
424
+ <option value="spanish">Spanish</option>
425
+ <option value="french">French</option>
426
+ <option value="german">German</option>
427
+ </select>
428
+ </div>
429
+ <div class="form-group">
430
+ <label for="volume">Volume:</label>
431
+ <input type="range" id="volume" name="volume" min="0" max="100">
432
+ </div>
433
+ <div class="form-group">
434
+ <label for="email">Email Notifications:</label>
435
+ <div class="toggle-switch">
436
+ <input type="checkbox" id="email" name="email">
437
+ <label for="email"></label>
438
+ </div>
439
+ </div>
440
+ <div class="form-group">
441
+ <label for="currency">Currency:</label>
442
+ <select id="currency" name="currency">
443
+ <option value="usd">USD</option>
444
+ <option value="eur">EUR</option>
445
+ <option value="gbp">GBP</option>
446
+ <option value="jpy">JPY</option>
447
+ </select>
448
+ </div>
449
+ <div class="form-group">
450
+ <label for="timezone">Timezone:</label>
451
+ <select id="timezone" name="timezone">
452
+ <option value="gmt-8">GMT-8</option>
453
+ <option value="gmt-5">GMT-5</option>
454
+ <option value="gmt">GMT</option>
455
+ <option value="gmt+5">GMT+5</option>
456
+ </select>
457
+ </div>
458
+ <div class="form-group">
459
+ <label for="display-mode">Display Mode:</label>
460
+ <select id="display-mode" name="display-mode">
461
+ <option value="normal">Normal</option>
462
+ <option value="compact">Compact</option>
463
+ <option value="full-screen">Full Screen</option>
464
+ </select>
465
+ </div>
466
+ <button type="submit">Save Changes</button>
467
+ </form>
468
+ </div>
469
  </div>
470
  </div>
471
  <!-- Login Page appears when click on the login text -->