|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Liquid Glass Music</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=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); |
|
|
color: white; |
|
|
min-height: 100vh; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.glass-card { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
backdrop-filter: blur(20px); |
|
|
-webkit-backdrop-filter: blur(20px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); |
|
|
} |
|
|
|
|
|
.waveform { |
|
|
height: 60px; |
|
|
width: 100%; |
|
|
background: linear-gradient(90deg, rgba(99, 102, 241, 0.8) 0%, rgba(168, 85, 247, 0.8) 100%); |
|
|
border-radius: 10px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.waveform::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: repeating-linear-gradient( |
|
|
90deg, |
|
|
transparent, |
|
|
transparent 2px, |
|
|
rgba(255, 255, 255, 0.2) 2px, |
|
|
rgba(255, 255, 255, 0.2) 4px |
|
|
); |
|
|
animation: wave 2s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes wave { |
|
|
0% { transform: translateX(0); } |
|
|
100% { transform: translateX(-4px); } |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
height: 100%; |
|
|
width: 30%; |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.player-controls button { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.player-controls button:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.play-btn { |
|
|
box-shadow: 0 0 20px rgba(99, 102, 241, 0.5); |
|
|
} |
|
|
|
|
|
.song-card:hover .play-icon { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.play-icon { |
|
|
opacity: 0; |
|
|
transform: translateY(10px); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.tab-indicator { |
|
|
height: 3px; |
|
|
width: 30px; |
|
|
background: white; |
|
|
border-radius: 3px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.active-tab .tab-indicator { |
|
|
width: 50px; |
|
|
background: #6366f1; |
|
|
} |
|
|
|
|
|
.ripple { |
|
|
position: absolute; |
|
|
border-radius: 50%; |
|
|
background-color: rgba(255, 255, 255, 0.3); |
|
|
transform: scale(0); |
|
|
animation: ripple 0.6s linear; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
@keyframes ripple { |
|
|
to { |
|
|
transform: scale(4); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.upload-zone { |
|
|
border: 2px dashed rgba(255, 255, 255, 0.3); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.upload-zone.active { |
|
|
border-color: #6366f1; |
|
|
background: rgba(99, 102, 241, 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="relative pb-32"> |
|
|
|
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
|
|
|
<header class="flex justify-between items-center mb-8"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full glass-card flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-music text-purple-500"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold">Liquid Glass</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="glass-card w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
<button class="glass-card w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-user"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex justify-around mb-8"> |
|
|
<button class="tab-btn active-tab flex flex-col items-center pb-2"> |
|
|
<i class="fas fa-home text-xl mb-1"></i> |
|
|
<div class="tab-indicator"></div> |
|
|
</button> |
|
|
<button class="tab-btn flex flex-col items-center pb-2"> |
|
|
<i class="fas fa-search text-xl mb-1"></i> |
|
|
<div class="tab-indicator"></div> |
|
|
</button> |
|
|
<button class="tab-btn flex flex-col items-center pb-2"> |
|
|
<i class="fas fa-heart text-xl mb-1"></i> |
|
|
<div class="tab-indicator"></div> |
|
|
</button> |
|
|
<button class="tab-btn flex flex-col items-center pb-2"> |
|
|
<i class="fas fa-list text-xl mb-1"></i> |
|
|
<div class="tab-indicator"></div> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="home-content" class="tab-content active"> |
|
|
<h2 class="text-xl font-semibold mb-4">Recently Played</h2> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-8"> |
|
|
|
|
|
<div class="song-card glass-card rounded-xl p-4 relative overflow-hidden"> |
|
|
<div class="relative mb-3"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music" alt="Album Cover" class="w-full rounded-lg aspect-square object-cover"> |
|
|
<button class="play-icon absolute bottom-2 right-2 w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="font-medium truncate">Liquid Dreams</h3> |
|
|
<p class="text-sm text-gray-300 truncate">Waveform Collective</p> |
|
|
</div> |
|
|
|
|
|
<div class="song-card glass-card rounded-xl p-4 relative overflow-hidden"> |
|
|
<div class="relative mb-3"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?album" alt="Album Cover" class="w-full rounded-lg aspect-square object-cover"> |
|
|
<button class="play-icon absolute bottom-2 right-2 w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="font-medium truncate">Glass Beats</h3> |
|
|
<p class="text-sm text-gray-300 truncate">Transparent Sounds</p> |
|
|
</div> |
|
|
|
|
|
<div class="song-card glass-card rounded-xl p-4 relative overflow-hidden"> |
|
|
<div class="relative mb-3"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?vinyl" alt="Album Cover" class="w-full rounded-lg aspect-square object-cover"> |
|
|
<button class="play-icon absolute bottom-2 right-2 w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="font-medium truncate">Fluid Motion</h3> |
|
|
<p class="text-sm text-gray-300 truncate">Liquid Harmony</p> |
|
|
</div> |
|
|
|
|
|
<div class="song-card glass-card rounded-xl p-4 relative overflow-hidden"> |
|
|
<div class="relative mb-3"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?concert" alt="Album Cover" class="w-full rounded-lg aspect-square object-cover"> |
|
|
<button class="play-icon absolute bottom-2 right-2 w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="font-medium truncate">Crystal Clear</h3> |
|
|
<p class="text-sm text-gray-300 truncate">Pure Audio</p> |
|
|
</div> |
|
|
|
|
|
<div class="song-card glass-card rounded-xl p-4 relative overflow-hidden"> |
|
|
<div class="relative mb-3"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?dj" alt="Album Cover" class="w-full rounded-lg aspect-square object-cover"> |
|
|
<button class="play-icon absolute bottom-2 right-2 w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="font-medium truncate">Reflections</h3> |
|
|
<p class="text-sm text-gray-300 truncate">Mirror Sounds</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h2 class="text-xl font-semibold mb-4">Trending Now</h2> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8"> |
|
|
|
|
|
<div class="glass-card rounded-xl p-4 flex items-center"> |
|
|
<div class="w-16 h-16 rounded-lg overflow-hidden mr-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?playlist" alt="Playlist Cover" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Liquid Vibes</h3> |
|
|
<p class="text-sm text-gray-300">Chill beats for your glass world</p> |
|
|
</div> |
|
|
<button class="ml-auto w-10 h-10 rounded-full glass-card flex items-center justify-center"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card rounded-xl p-4 flex items-center"> |
|
|
<div class="w-16 h-16 rounded-lg overflow-hidden mr-4"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,night" alt="Playlist Cover" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Night Waves</h3> |
|
|
<p class="text-sm text-gray-300">Smooth nocturnal frequencies</p> |
|
|
</div> |
|
|
<button class="ml-auto w-10 h-10 rounded-full glass-card flex items-center justify-center"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h2 class="text-xl font-semibold mb-4">New Releases</h2> |
|
|
<div class="mb-8"> |
|
|
|
|
|
<div class="glass-card rounded-xl overflow-hidden"> |
|
|
<div class="flex items-center p-4 border-b border-white/10 hover:bg-white/5 transition-colors cursor-pointer"> |
|
|
<div class="w-10 h-10 rounded mr-4 flex-shrink-0"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,cover" alt="Album Cover" class="w-full h-full object-cover rounded"> |
|
|
</div> |
|
|
<div class="flex-grow min-w-0"> |
|
|
<h3 class="font-medium truncate">Liquid Dreams</h3> |
|
|
<p class="text-sm text-gray-300 truncate">Waveform Collective</p> |
|
|
</div> |
|
|
<div class="w-24 md:w-32 ml-4"> |
|
|
<div class="waveform"> |
|
|
<div class="progress-bar"></div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="ml-4 w-8 h-8 rounded-full flex items-center justify-center text-gray-300 hover:text-white"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center p-4 border-b border-white/10 hover:bg-white/5 transition-colors cursor-pointer"> |
|
|
<div class="w-10 h-10 rounded mr-4 flex-shrink-0"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?album,art" alt="Album Cover" class="w-full h-full object-cover rounded"> |
|
|
</div> |
|
|
<div class="flex-grow min-w-0"> |
|
|
<h3 class="font-medium truncate">Glass Beats</h3> |
|
|
<p class="text-sm text-gray-300 truncate">Transparent Sounds</p> |
|
|
</div> |
|
|
<div class="w-24 md:w-32 ml-4"> |
|
|
<div class="waveform"> |
|
|
<div class="progress-bar" style="width: 45%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="ml-4 w-8 h-8 rounded-full flex items-center justify-center text-gray-300 hover:text-white"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center p-4 hover:bg-white/5 transition-colors cursor-pointer"> |
|
|
<div class="w-10 h-10 rounded mr-4 flex-shrink-0"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?vinyl,record" alt="Album Cover" class="w-full h-full object-cover rounded"> |
|
|
</div> |
|
|
<div class="flex-grow min-w-0"> |
|
|
<h3 class="font-medium truncate">Fluid Motion</h3> |
|
|
<p class="text-sm text-gray-300 truncate">Liquid Harmony</p> |
|
|
</div> |
|
|
<div class="w-24 md:w-32 ml-4"> |
|
|
<div class="waveform"> |
|
|
<div class="progress-bar" style="width: 15%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="ml-4 w-8 h-8 rounded-full flex items-center justify-center text-gray-300 hover:text-white"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card rounded-xl p-6 mb-8"> |
|
|
<h2 class="text-xl font-semibold mb-4">Upload Your Music</h2> |
|
|
<div class="upload-zone rounded-xl p-8 text-center cursor-pointer"> |
|
|
<i class="fas fa-cloud-upload-alt text-4xl mb-3 text-purple-500"></i> |
|
|
<p class="mb-2 font-medium">Drag & drop your audio files here</p> |
|
|
<p class="text-sm text-gray-300 mb-4">or click to browse files</p> |
|
|
<button class="px-6 py-2 rounded-full bg-purple-600 hover:bg-purple-700 transition-colors"> |
|
|
Select Files |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h3 class="font-medium mb-3">Upload Queue</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center glass-card rounded-lg p-3"> |
|
|
<div class="w-12 h-12 rounded mr-3 bg-purple-500/10 flex items-center justify-center"> |
|
|
<i class="fas fa-music text-purple-500"></i> |
|
|
</div> |
|
|
<div class="flex-grow"> |
|
|
<h4 class="font-medium">My New Track.mp3</h4> |
|
|
<div class="w-full bg-gray-700 rounded-full h-1.5 mt-1"> |
|
|
<div class="bg-purple-500 h-1.5 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="ml-3 text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center glass-card rounded-lg p-3"> |
|
|
<div class="w-12 h-12 rounded mr-3 bg-purple-500/10 flex items-center justify-center"> |
|
|
<i class="fas fa-music text-purple-500"></i> |
|
|
</div> |
|
|
<div class="flex-grow"> |
|
|
<h4 class="font-medium">Liquid Dreams.wav</h4> |
|
|
<div class="w-full bg-gray-700 rounded-full h-1.5 mt-1"> |
|
|
<div class="bg-purple-500 h-1.5 rounded-full" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="ml-3 text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="search-content" class="tab-content hidden"> |
|
|
<div class="glass-card rounded-xl p-4 mb-6"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search for songs, artists, or albums" class="w-full bg-transparent border-0 focus:ring-0 pl-10 pr-4 py-3"> |
|
|
<i class="fas fa-search absolute left-3 top-3.5 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h2 class="text-xl font-semibold mb-4">Browse All</h2> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> |
|
|
<div class="glass-card rounded-xl aspect-square flex flex-col items-center justify-center p-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-purple-500/10 flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-compact-disc text-purple-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="font-medium">Albums</span> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card rounded-xl aspect-square flex flex-col items-center justify-center p-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-pink-500/10 flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-music text-pink-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="font-medium">Songs</span> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card rounded-xl aspect-square flex flex-col items-center justify-center p-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-blue-500/10 flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-users text-blue-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="font-medium">Artists</span> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card rounded-xl aspect-square flex flex-col items-center justify-center p-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-green-500/10 flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-list text-green-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="font-medium">Playlists</span> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card rounded-xl aspect-square flex flex-col items-center justify-center p-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-yellow-500/10 flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-tags text-yellow-500 text-2xl"></i> |
|
|
</div> |
|
|
<span class="font-medium">Genres</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="library-content" class="tab-content hidden"> |
|
|
<h2 class="text-xl font-semibold mb-4">Your Library</h2> |
|
|
|
|
|
<div class="flex space-x-2 mb-6 overflow-x-auto pb-2"> |
|
|
<button class="px-4 py-1 rounded-full glass-card text-sm whitespace-nowrap">Playlists</button> |
|
|
<button class="px-4 py-1 rounded-full glass-card text-sm whitespace-nowrap">Liked Songs</button> |
|
|
<button class="px-4 py-1 rounded-full glass-card text-sm whitespace-nowrap">Albums</button> |
|
|
<button class="px-4 py-1 rounded-full glass-card text-sm whitespace-nowrap">Artists</button> |
|
|
<button class="px-4 py-1 rounded-full glass-card text-sm whitespace-nowrap">Downloads</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> |
|
|
<div class="glass-card rounded-xl p-4 aspect-square flex flex-col"> |
|
|
<div class="w-full h-3/4 rounded-lg mb-3 bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center"> |
|
|
<i class="fas fa-heart text-white text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="font-medium truncate">Liked Songs</h3> |
|
|
<p class="text-sm text-gray-300">24 songs</p> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card rounded-xl p-4 aspect-square flex flex-col"> |
|
|
<div class="w-full h-3/4 rounded-lg mb-3 bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center"> |
|
|
<i class="fas fa-headphones text-white text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="font-medium truncate">Chill Vibes</h3> |
|
|
<p class="text-sm text-gray-300">12 songs</p> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card rounded-xl p-4 aspect-square flex flex-col"> |
|
|
<div class="w-full h-3/4 rounded-lg mb-3 bg-gradient-to-br from-green-500 to-emerald-500 flex items-center justify-center"> |
|
|
<i class="fas fa-running text-white text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="font-medium truncate">Workout Mix</h3> |
|
|
<p class="text-sm text-gray-300">18 songs</p> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card rounded-xl p-4 aspect-square flex flex-col"> |
|
|
<div class="w-full h-3/4 rounded-lg mb-3 bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center"> |
|
|
<i class="fas fa-moon text-white text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="font-medium truncate">Sleep Sounds</h3> |
|
|
<p class="text-sm text-gray-300">8 songs</p> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card rounded-xl p-4 aspect-square flex flex-col"> |
|
|
<div class="w-full h-3/4 rounded-lg mb-3 bg-gradient-to-br from-yellow-500 to-amber-500 flex items-center justify-center"> |
|
|
<i class="fas fa-plus text-white text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="font-medium truncate">New Playlist</h3> |
|
|
<p class="text-sm text-gray-300">Create</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="playlist-content" class="tab-content hidden"> |
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="w-24 h-24 sm:w-32 sm:h-32 md:w-48 md:h-48 rounded-xl glass-card overflow-hidden mr-4 md:mr-6 flex-shrink-0"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?playlist" alt="Playlist Cover" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-grow"> |
|
|
<p class="text-sm text-gray-300 mb-1">PLAYLIST</p> |
|
|
<h1 class="text-2xl md:text-4xl font-bold mb-3">Liquid Dreams</h1> |
|
|
<p class="text-gray-300 mb-4">A collection of smooth liquid glass tracks to relax and unwind</p> |
|
|
<div class="flex items-center text-sm text-gray-300"> |
|
|
<span class="font-medium text-white">Waveform Collective</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>12 songs</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>45 min</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card rounded-xl overflow-hidden"> |
|
|
<div class="p-4 border-b border-white/10 flex items-center"> |
|
|
<div class="w-10 flex-shrink-0 text-center text-gray-400">#</div> |
|
|
<div class="flex-grow">TITLE</div> |
|
|
<div class="w-24 md:w-32">WAVEFORM</div> |
|
|
<div class="w-10 flex-shrink-0 text-right text-gray-400"> |
|
|
<i class="far fa-clock"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center p-4 border-b border-white/10 hover:bg-white/5 transition-colors cursor-pointer"> |
|
|
<div class="w-10 flex-shrink-0 text-center text-gray-400">1</div> |
|
|
<div class="flex items-center flex-grow min-w-0"> |
|
|
<div class="w-10 h-10 rounded mr-3 flex-shrink-0"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,cover" alt="Album Cover" class="w-full h-full object-cover rounded"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium truncate">Liquid Dreams</h3> |
|
|
<p class="text-sm text-gray-300 truncate">Waveform Collective</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-24 md:w-32"> |
|
|
<div class="waveform"> |
|
|
<div class="progress-bar"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-10 flex-shrink-0 text-right text-gray-400">3:42</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center p-4 border-b border-white/10 hover:bg-white/5 transition-colors cursor-pointer"> |
|
|
<div class="w-10 flex-shrink-0 text-center text-gray-400">2</div> |
|
|
<div class="flex items-center flex-grow min-w-0"> |
|
|
<div class="w-10 h-10 rounded mr-3 flex-shrink-0"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?album,art" alt="Album Cover" class="w-full h-full object-cover rounded"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium truncate">Glass Beats</h3> |
|
|
<p class="text-sm text-gray-300 truncate">Transparent Sounds</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-24 md:w-32"> |
|
|
<div class="waveform"> |
|
|
<div class="progress-bar" style="width: 45%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-10 flex-shrink-0 text-right text-gray-400">4:15</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center p-4 hover:bg-white/5 transition-colors cursor-pointer"> |
|
|
<div class="w-10 flex-shrink-0 text-center text-gray-400">3</div> |
|
|
<div class="flex items-center flex-grow min-w-0"> |
|
|
<div class="w-10 h-10 rounded mr-3 flex-shrink-0"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?vinyl,record" alt="Album Cover" class="w-full h-full object-cover rounded"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium truncate">Fluid Motion</h3> |
|
|
<p class="text-sm text-gray-300 truncate">Liquid Harmony</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-24 md:w-32"> |
|
|
<div class="waveform"> |
|
|
<div class="progress-bar" style="width: 15%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-10 flex-shrink-0 text-right text-gray-400">3:28</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-0 left-0 right-0 glass-card backdrop-blur-xl border-t border-white/10"> |
|
|
<div class="container mx-auto px-4 py-3"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded mr-3 flex-shrink-0"> |
|
|
<img src="https://source.unsplash.com/random/300x300/?music,cover" alt="Album Cover" class="w-full h-full object-cover rounded"> |
|
|
</div> |
|
|
<div class="flex-grow min-w-0"> |
|
|
<h3 class="font-medium truncate">Liquid Dreams</h3> |
|
|
<p class="text-sm text-gray-300 truncate">Waveform Collective</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4 ml-4"> |
|
|
<button class="player-controls"> |
|
|
<i class="fas fa-step-backward text-lg"></i> |
|
|
</button> |
|
|
<button class="player-controls play-btn w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</button> |
|
|
<button class="player-controls"> |
|
|
<i class="fas fa-step-forward text-lg"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-2 flex items-center"> |
|
|
<span class="text-xs text-gray-400 w-10">1:23</span> |
|
|
<div class="flex-grow mx-2"> |
|
|
<div class="waveform"> |
|
|
<div class="progress-bar" style="width: 30%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-xs text-gray-400 w-10">3:42</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="full-player" class="fixed inset-0 bg-gradient-to-b from-purple-900/80 to-indigo-900/80 backdrop-blur-3xl z-50 hidden flex flex-col items-center justify-center p-6"> |
|
|
<button id="close-player" class="absolute top-6 right-6 w-10 h-10 rounded-full glass-card flex items-center justify-center"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
|
|
|
<div class="w-full max-w-md mb-8"> |
|
|
<div class="w-full aspect-square rounded-2xl overflow-hidden mb-6 glass-card"> |
|
|
<img src="https://source.unsplash.com/random/600x600/?music,cover" alt="Album Cover" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mb-8"> |
|
|
<h1 class="text-2xl font-bold mb-1">Liquid Dreams</h1> |
|
|
<p class="text-gray-300">Waveform Collective</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="waveform h-16 rounded-xl mb-2"> |
|
|
<div class="progress-bar" style="width: 30%"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm text-gray-300"> |
|
|
<span>1:23</span> |
|
|
<span>3:42</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-center space-x-8 mb-8"> |
|
|
<button class="w-10 h-10 rounded-full glass-card flex items-center justify-center"> |
|
|
<i class="fas fa-random"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full glass-card flex items-center justify-center"> |
|
|
<i class="fas fa-step-backward"></i> |
|
|
</button> |
|
|
<button class="play-btn w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-play text-white text-2xl"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full glass-card flex items-center justify-center"> |
|
|
<i class="fas fa-step-forward"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full glass-card flex items-center justify-center"> |
|
|
<i class="fas fa-redo"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between"> |
|
|
<button class="w-10 h-10 rounded-full glass-card flex items-center justify-center"> |
|
|
<i class="fas fa-heart"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full glass-card flex items-center justify-center"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full glass-card flex items-center justify-center"> |
|
|
<i class="fas fa-share-alt"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full glass-card flex items-center justify-center"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const tabButtons = document.querySelectorAll('.tab-btn'); |
|
|
const tabContents = document.querySelectorAll('.tab-content'); |
|
|
|
|
|
tabButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
|
|
|
tabButtons.forEach(btn => btn.classList.remove('active-tab')); |
|
|
tabContents.forEach(content => { |
|
|
content.classList.remove('active'); |
|
|
content.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
button.classList.add('active-tab'); |
|
|
|
|
|
|
|
|
const tabName = button.querySelector('i').className.split(' ')[1]; |
|
|
let contentId; |
|
|
|
|
|
if (tabName === 'fa-home') contentId = 'home-content'; |
|
|
else if (tabName === 'fa-search') contentId = 'search-content'; |
|
|
else if (tabName === 'fa-heart') contentId = 'library-content'; |
|
|
else if (tabName === 'fa-list') contentId = 'playlist-content'; |
|
|
|
|
|
const content = document.getElementById(contentId); |
|
|
content.classList.remove('hidden'); |
|
|
content.classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const miniPlayer = document.querySelector('.fixed.bottom-0'); |
|
|
const fullPlayer = document.getElementById('full-player'); |
|
|
const closePlayer = document.getElementById('close-player'); |
|
|
|
|
|
miniPlayer.addEventListener('click', (e) => { |
|
|
|
|
|
if (e.target === miniPlayer || e.target.classList.contains('flex-grow')) { |
|
|
fullPlayer.classList.remove('hidden'); |
|
|
fullPlayer.classList.add('flex'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
}); |
|
|
|
|
|
closePlayer.addEventListener('click', () => { |
|
|
fullPlayer.classList.add('hidden'); |
|
|
fullPlayer.classList.remove('flex'); |
|
|
document.body.style.overflow = ''; |
|
|
}); |
|
|
|
|
|
|
|
|
const playButtons = document.querySelectorAll('.play-btn'); |
|
|
|
|
|
playButtons.forEach(button => { |
|
|
button.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
const icon = button.querySelector('i'); |
|
|
if (icon.classList.contains('fa-play')) { |
|
|
icon.classList.remove('fa-play'); |
|
|
icon.classList.add('fa-pause'); |
|
|
|
|
|
} else { |
|
|
icon.classList.remove('fa-pause'); |
|
|
icon.classList.add('fa-play'); |
|
|
|
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const songCards = document.querySelectorAll('.song-card'); |
|
|
songCards.forEach(card => { |
|
|
card.addEventListener('click', (e) => { |
|
|
if (!e.target.closest('.play-icon')) { |
|
|
|
|
|
const title = card.querySelector('h3').textContent; |
|
|
const artist = card.querySelector('p').textContent; |
|
|
console.log(`Playing: ${title} by ${artist}`); |
|
|
} |
|
|
}); |
|
|
|
|
|
const playBtn = card.querySelector('.play-icon'); |
|
|
if (playBtn) { |
|
|
playBtn.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
const icon = playBtn.querySelector('i'); |
|
|
if (icon.classList.contains('fa-play')) { |
|
|
icon.classList.remove('fa-play'); |
|
|
icon.classList.add('fa-pause'); |
|
|
} else { |
|
|
icon.classList.remove('fa-pause'); |
|
|
icon.classList.add('fa-play'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (e.target.closest('.glass-card, .play-btn')) { |
|
|
const button = e.target.closest('.glass-card, .play-btn'); |
|
|
const rect = button.getBoundingClientRect(); |
|
|
const x = e.clientX - rect.left; |
|
|
const y = e.clientY - rect.top; |
|
|
|
|
|
const ripple = document.createElement('span'); |
|
|
ripple.className = 'ripple'; |
|
|
ripple.style.left = `${x}px`; |
|
|
ripple.style.top = `${y}px`; |
|
|
|
|
|
button.appendChild(ripple); |
|
|
|
|
|
setTimeout(() => { |
|
|
ripple.remove(); |
|
|
}, 600); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const uploadZone = document.querySelector('.upload-zone'); |
|
|
|
|
|
uploadZone.addEventListener('dragover', (e) => { |
|
|
e.preventDefault(); |
|
|
uploadZone.classList.add('active'); |
|
|
}); |
|
|
|
|
|
uploadZone.addEventListener('dragleave', () => { |
|
|
uploadZone.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
uploadZone.addEventListener('drop', (e) => { |
|
|
e.preventDefault(); |
|
|
uploadZone.classList.remove('active'); |
|
|
|
|
|
}); |
|
|
</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=Crambit/lgm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
