Spaces:
Running
Running
Commit
•
66e83fd
1
Parent(s):
d4c0000
Update index.html
Browse files- 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 |
-
|
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 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 -->
|