Hugging Face's logo

Spaces:
Crambit
/
lgm
Running

App Files Community
lgm / index.html
Crambit's picture
Crambit
undefined - Initial Deployment
ee9ea75 verified
raw
history blame contribute delete
41 kB
<!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">
 <!-- Main Content -->
 <div class="container mx-auto px-4 py-6">
 <!-- Header -->
 <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>
<!-- Tab Navigation -->
 <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>
<!-- Home Content -->
 <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">
 <!-- Song Cards -->
 <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">
 <!-- Trending Playlists -->
 <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">
 <!-- Song List with Waveforms -->
 <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>
<!-- Upload Section -->
 <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>
<!-- Search Content (Hidden) -->
 <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>
<!-- Library Content (Hidden) -->
 <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>
<!-- Playlist Content (Hidden) -->
 <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>
<!-- Mini Player -->
 <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>
<!-- Full Player (Hidden) -->
 <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>
 // Tab switching functionality
 const tabButtons = document.querySelectorAll('.tab-btn');
 const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
 button.addEventListener('click', () => {
 // Remove active class from all buttons and contents
 tabButtons.forEach(btn => btn.classList.remove('active-tab'));
 tabContents.forEach(content => {
 content.classList.remove('active');
 content.classList.add('hidden');
 });
// Add active class to clicked button
 button.classList.add('active-tab');
// Show corresponding content
 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');
 });
 });
// Mini player expand to full player
 const miniPlayer = document.querySelector('.fixed.bottom-0');
 const fullPlayer = document.getElementById('full-player');
 const closePlayer = document.getElementById('close-player');
miniPlayer.addEventListener('click', (e) => {
 // Only trigger if clicking on the player background, not controls
 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 = '';
 });
// Play/pause toggle
 const playButtons = document.querySelectorAll('.play-btn');
playButtons.forEach(button => {
 button.addEventListener('click', (e) => {
 e.stopPropagation(); // Prevent triggering mini player expand
 const icon = button.querySelector('i');
 if (icon.classList.contains('fa-play')) {
 icon.classList.remove('fa-play');
 icon.classList.add('fa-pause');
 // Add actual play functionality here
 } else {
 icon.classList.remove('fa-pause');
 icon.classList.add('fa-play');
 // Add actual pause functionality here
 }
 });
 });
// Song card play functionality
 const songCards = document.querySelectorAll('.song-card');
 songCards.forEach(card => {
 card.addEventListener('click', (e) => {
 if (!e.target.closest('.play-icon')) {
 // Navigate to song details or play the song
 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');
 }
 });
 }
 });
 // Ripple effect for buttons
 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);
 }
 });
// Upload zone hover effect
 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');
 // Handle file upload here
 });
 </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>