|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ZEAL - Music Streaming</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #121212; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: #535353 transparent; |
|
|
} |
|
|
|
|
|
.sidebar::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
|
|
|
.sidebar::-webkit-scrollbar-thumb { |
|
|
background-color: #535353; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
-webkit-appearance: none; |
|
|
height: 4px; |
|
|
background: #535353; |
|
|
border-radius: 2px; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.progress-bar::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
background: white; |
|
|
border-radius: 50%; |
|
|
opacity: 0; |
|
|
transition: opacity 0.2s; |
|
|
} |
|
|
|
|
|
.progress-bar:hover::-webkit-slider-thumb { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.album-art { |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.song-card:hover { |
|
|
background-color: #282828; |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
|
|
|
.play-button { |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease, transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.song-card:hover .play-button { |
|
|
opacity: 1; |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar w-64 bg-black p-6 flex flex-col overflow-y-auto"> |
|
|
<div class="mb-8"> |
|
|
<h1 class="text-3xl font-bold text-white">ZEAL</h1> |
|
|
</div> |
|
|
|
|
|
<nav class="mb-8"> |
|
|
<ul class="space-y-4"> |
|
|
<li> |
|
|
<a href="#" class="flex items-center text-white font-medium hover:text-green-500 transition"> |
|
|
<i class="fas fa-home mr-4 text-lg"></i> |
|
|
<span>Home</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center text-gray-400 hover:text-white transition"> |
|
|
<i class="fas fa-search mr-4 text-lg"></i> |
|
|
<span>Search</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center text-gray-400 hover:text-white transition"> |
|
|
<i class="fas fa-book mr-4 text-lg"></i> |
|
|
<span>Your Library</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-gray-400 uppercase text-xs font-bold mb-4 tracking-wider">Playlists</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Recently Played</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Liked Songs</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Workout Mix</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Chill Vibes</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Study Focus</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="mt-auto"> |
|
|
<button class="flex items-center justify-center w-full py-2 px-4 bg-gray-800 rounded-full text-white hover:bg-gray-700 transition"> |
|
|
<i class="fas fa-plus mr-2"></i> |
|
|
<span>New Playlist</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-gradient-to-r from-gray-900 to-gray-800 p-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="w-8 h-8 bg-black bg-opacity-40 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</button> |
|
|
<button class="w-8 h-8 bg-black bg-opacity-40 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="px-4 py-1 bg-white text-black rounded-full font-bold hover:scale-105 transition">Upgrade</button> |
|
|
<div class="flex items-center space-x-2 bg-black bg-opacity-70 rounded-full pl-2 pr-4 py-1 cursor-pointer hover:bg-opacity-80 transition"> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<span>User</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6 bg-gradient-to-b from-gray-800 to-gray-900"> |
|
|
<section class="mb-10"> |
|
|
<h2 class="text-2xl font-bold mb-6">Good afternoon</h2> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4"> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-40 rounded flex items-center overflow-hidden hover:bg-gray-700 transition cursor-pointer"> |
|
|
<img src="https://source.unsplash.com/random/100x100/?music,album" alt="Playlist" class="w-16 h-16"> |
|
|
<span class="ml-4 font-medium">Liked Songs</span> |
|
|
</div> |
|
|
<div class="bg-gray-800 bg-opacity-40 rounded flex items-center overflow-hidden hover:bg-gray-700 transition cursor-pointer"> |
|
|
<img src="https://source.unsplash.com/random/100x100/?music,concert" alt="Playlist" class="w-16 h-16"> |
|
|
<span class="ml-4 font-medium">Chill Vibes</span> |
|
|
</div> |
|
|
<div class="bg-gray-800 bg-opacity-40 rounded flex items-center overflow-hidden hover:bg-gray-700 transition cursor-pointer"> |
|
|
<img src="https://source.unsplash.com/random/100x100/?music,band" alt="Playlist" class="w-16 h-16"> |
|
|
<span class="ml-4 font-medium">Workout Mix</span> |
|
|
</div> |
|
|
<div class="bg-gray-800 bg-opacity-40 rounded flex items-center overflow-hidden hover:bg-gray-700 transition cursor-pointer"> |
|
|
<img src="https://source.unsplash.com/random/100x100/?music,vinyl" alt="Playlist" class="w-16 h-16"> |
|
|
<span class="ml-4 font-medium">Study Focus</span> |
|
|
</div> |
|
|
<div class="bg-gray-800 bg-opacity-40 rounded flex items-center overflow-hidden hover:bg-gray-700 transition cursor-pointer"> |
|
|
<img src="https://source.unsplash.com/random/100x100/?music,piano" alt="Playlist" class="w-16 h-16"> |
|
|
<span class="ml-4 font-medium">Piano Relax</span> |
|
|
</div> |
|
|
<div class="bg-gray-800 bg-opacity-40 rounded flex items-center overflow-hidden hover:bg-gray-700 transition cursor-pointer"> |
|
|
<img src="https://source.unsplash.com/random/100x100/?music,guitar" alt="Playlist" class="w-16 h-16"> |
|
|
<span class="ml-4 font-medium">Acoustic Morning</span> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="mb-10"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">Made For You</h2> |
|
|
<a href="#" class="text-sm text-gray-400 hover:underline">Show all</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> |
|
|
|
|
|
<div class="bg-gray-800 p-4 rounded hover:bg-gray-700 transition cursor-pointer group"> |
|
|
<div class="relative mb-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?album1" alt="Album" class="w-full rounded shadow-lg album-art"> |
|
|
<button class="absolute bottom-2 right-2 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-lg hover:scale-105 transform play-button"> |
|
|
<i class="fas fa-play text-black"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="font-medium text-white">Daily Mix 1</h3> |
|
|
<p class="text-sm text-gray-400 mt-1">Discover weekly tunes picked just for you</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-4 rounded hover:bg-gray-700 transition cursor-pointer group"> |
|
|
<div class="relative mb-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?album2" alt="Album" class="w-full rounded shadow-lg album-art"> |
|
|
<button class="absolute bottom-2 right-2 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-lg hover:scale-105 transform play-button"> |
|
|
<i class="fas fa-play text-black"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="font-medium text-white">Discover Weekly</h3> |
|
|
<p class="text-sm text-gray-400 mt-1">Your weekly mixtape of fresh beats</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-4 rounded hover:bg-gray-700 transition cursor-pointer group"> |
|
|
<div class="relative mb-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?album3" alt="Album" class="w-full rounded shadow-lg album-art"> |
|
|
<button class="absolute bottom-2 right-2 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-lg hover:scale-105 transform play-button"> |
|
|
<i class="fas fa-play text-black"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="font-medium text-white">Chill Hits</h3> |
|
|
<p class="text-sm text-gray-400 mt-1">Kick back to the best new chill hits</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-4 rounded hover:bg-gray-700 transition cursor-pointer group"> |
|
|
<div class="relative mb-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?album4" alt="Album" class="w-full rounded shadow-lg album-art"> |
|
|
<button class="absolute bottom-2 right-2 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-lg hover:scale-105 transform play-button"> |
|
|
<i class="fas fa-play text-black"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="font-medium text-white">Rock Classics</h3> |
|
|
<p class="text-sm text-gray-400 mt-1">Rock legends & epic tracks</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-4 rounded hover:bg-gray-700 transition cursor-pointer group"> |
|
|
<div class="relative mb-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?album5" alt="Album" class="w-full rounded shadow-lg album-art"> |
|
|
<button class="absolute bottom-2 right-2 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-lg hover:scale-105 transform play-button"> |
|
|
<i class="fas fa-play text-black"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="font-medium text-white">Mood Booster</h3> |
|
|
<p class="text-sm text-gray-400 mt-1">Get happy with today's dose of feel-good songs</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">Recently Played</h2> |
|
|
<a href="#" class="text-sm text-gray-400 hover:underline">Show all</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-40 rounded-lg overflow-hidden"> |
|
|
<table class="w-full"> |
|
|
<thead> |
|
|
<tr class="border-b border-gray-700 text-gray-400 text-left text-sm"> |
|
|
<th class="p-4 w-12">#</th> |
|
|
<th class="p-4">Title</th> |
|
|
<th class="p-4">Album</th> |
|
|
<th class="p-4">Date Added</th> |
|
|
<th class="p-4 w-12"><i class="far fa-clock"></i></th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
|
|
|
<tr class="song-card border-b border-gray-700 hover:bg-gray-700 group"> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white relative"> |
|
|
<span class="group-hover:hidden">1</span> |
|
|
<button class="hidden group-hover:block absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</td> |
|
|
<td class="p-4"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://source.unsplash.com/random/50x50/?song1" alt="Song" class="w-10 h-10 mr-3 rounded"> |
|
|
<div> |
|
|
<div class="font-medium">Blinding Lights</div> |
|
|
<div class="text-sm text-gray-400">The Weeknd</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">After Hours</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">2 days ago</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">3:20</td> |
|
|
</tr> |
|
|
|
|
|
<tr class="song-card border-b border-gray-700 hover:bg-gray-700 group"> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white relative"> |
|
|
<span class="group-hover:hidden">2</span> |
|
|
<button class="hidden group-hover:block absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</td> |
|
|
<td class="p-4"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://source.unsplash.com/random/50x50/?song2" alt="Song" class="w-10 h-10 mr-3 rounded"> |
|
|
<div> |
|
|
<div class="font-medium">Levitating</div> |
|
|
<div class="text-sm text-gray-400">Dua Lipa</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">Future Nostalgia</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">1 week ago</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">3:23</td> |
|
|
</tr> |
|
|
|
|
|
<tr class="song-card border-b border-gray-700 hover:bg-gray-700 group"> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white relative"> |
|
|
<span class="group-hover:hidden">3</span> |
|
|
<button class="hidden group-hover:block absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</td> |
|
|
<td class="p-4"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://source.unsplash.com/random/50x50/?song3" alt="Song" class="w-10 h-10 mr-3 rounded"> |
|
|
<div> |
|
|
<div class="font-medium">Stay</div> |
|
|
<div class="text-sm text-gray-400">The Kid LAROI, Justin Bieber</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">F*CK LOVE 3: OVER YOU</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">3 days ago</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">2:21</td> |
|
|
</tr> |
|
|
|
|
|
<tr class="song-card border-b border-gray-700 hover:bg-gray-700 group"> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white relative"> |
|
|
<span class="group-hover:hidden">4</span> |
|
|
<button class="hidden group-hover:block absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</td> |
|
|
<td class="p-4"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://source.unsplash.com/random/50x50/?song4" alt="Song" class="w-10 h-10 mr-3 rounded"> |
|
|
<div> |
|
|
<div class="font-medium">good 4 u</div> |
|
|
<div class="text-sm text-gray-400">Olivia Rodrigo</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">SOUR</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">5 days ago</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">2:58</td> |
|
|
</tr> |
|
|
|
|
|
<tr class="song-card hover:bg-gray-700 group"> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white relative"> |
|
|
<span class="group-hover:hidden">5</span> |
|
|
<button class="hidden group-hover:block absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</td> |
|
|
<td class="p-4"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://source.unsplash.com/random/50x50/?song5" alt="Song" class="w-10 h-10 mr-3 rounded"> |
|
|
<div> |
|
|
<div class="font-medium">Montero</div> |
|
|
<div class="text-sm text-gray-400">Lil Nas X</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">MONTERO</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">2 weeks ago</td> |
|
|
<td class="p-4 text-gray-400 group-hover:text-white">2:17</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-800 h-20 flex items-center px-4 z-10"> |
|
|
<div class="w-1/4 flex items-center"> |
|
|
<img src="https://source.unsplash.com/random/60x60/?album" alt="Now Playing" class="w-14 h-14 rounded mr-3"> |
|
|
<div> |
|
|
<div class="text-sm font-medium">Blinding Lights</div> |
|
|
<div class="text-xs text-gray-400">The Weeknd</div> |
|
|
</div> |
|
|
<button class="ml-4 text-gray-400 hover:text-white"> |
|
|
<i class="far fa-heart"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="w-2/4 flex flex-col items-center"> |
|
|
<div class="flex items-center space-x-6 mb-2"> |
|
|
<button class="text-gray-400 hover:text-white text-lg"> |
|
|
<i class="fas fa-random"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-white text-2xl"> |
|
|
<i class="fas fa-step-backward"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 bg-white rounded-full flex items-center justify-center hover:scale-105 transform"> |
|
|
<i class="fas fa-play text-black"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-white text-2xl"> |
|
|
<i class="fas fa-step-forward"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-white text-lg"> |
|
|
<i class="fas fa-redo"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="w-full flex items-center space-x-3"> |
|
|
<span class="text-xs text-gray-400">0:45</span> |
|
|
<input type="range" min="0" max="100" value="30" class="progress-bar flex-1"> |
|
|
<span class="text-xs text-gray-400">3:20</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="w-1/4 flex items-center justify-end space-x-3"> |
|
|
<button class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-list"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-laptop"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-volume-up"></i> |
|
|
</button> |
|
|
<div class="w-24"> |
|
|
<input type="range" min="0" max="100" value="70" class="progress-bar w-full"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const playButtons = document.querySelectorAll('.play-button, .song-card button'); |
|
|
const mainPlayButton = document.querySelector('.player-play-button'); |
|
|
let isPlaying = false; |
|
|
|
|
|
playButtons.forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const icon = this.querySelector('i'); |
|
|
|
|
|
if (icon.classList.contains('fa-play')) { |
|
|
icon.classList.remove('fa-play'); |
|
|
icon.classList.add('fa-pause'); |
|
|
isPlaying = true; |
|
|
} else { |
|
|
icon.classList.remove('fa-pause'); |
|
|
icon.classList.add('fa-play'); |
|
|
isPlaying = false; |
|
|
} |
|
|
|
|
|
|
|
|
if (this.closest('.song-card') && mainPlayButton) { |
|
|
const mainIcon = mainPlayButton.querySelector('i'); |
|
|
mainIcon.classList.toggle('fa-play', !isPlaying); |
|
|
mainIcon.classList.toggle('fa-pause', isPlaying); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const volumeSlider = document.querySelector('.volume-slider'); |
|
|
if (volumeSlider) { |
|
|
volumeSlider.addEventListener('input', function() { |
|
|
|
|
|
console.log('Volume set to:', this.value); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const progressBar = document.querySelector('.progress-bar'); |
|
|
if (progressBar) { |
|
|
progressBar.addEventListener('input', function() { |
|
|
|
|
|
console.log('Seek to:', this.value + '%'); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Tomic-009/zeal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
