Загрузка...
Стильная карточка музыкального плеера с анимацией: вращающаяся обложка, волны звука, ползунки громкости/прогресса, элементы управления. Glassmorphism UI.
<div
class="group relative overflow-hidden ring-1 ring-black/5 shadow-black/25 hover:shadow-indigo-500/10 transition-all duration-500 bg-black/20 border-white/10 border rounded-3xl shadow-2xl backdrop-blur-xl">
<!-- Dynamic gradient overlay with pulse effect -->
<div
class="pointer-events-none absolute -inset-40 opacity-30 blur-3xl transition-all duration-1000 group-[.is-playing]:opacity-50 group-[.is-playing]:animate-pulse-glow"
aria-hidden="true"
style="background: radial-gradient(60% 60% at 30% 30%, rgba(99,102,241,0.35) 0%, rgba(168,85,247,0.25) 35%, rgba(236,72,153,0.15) 70%, transparent 100%);">
</div>
<!-- Enhanced glassmorphism overlay -->
<div class="absolute inset-0 bg-gradient-to-br from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none">
</div>
<!-- Animated border glow -->
<div
class="absolute inset-0 rounded-3xl opacity-0 group-[.is-playing]:opacity-100 transition-opacity duration-1000 border-glow">
</div>
<!-- Top section with enhanced album art -->
<div class="relative z-20 pt-6 pr-6 pb-6 pl-6">
<div class="flex items-start gap-5">
<!-- Album Art with enhanced styling and rotation effect -->
<div class="relative shrink-0 group/art cursor-pointer" id="albumArtContainer">
<div
class="h-32 w-32 overflow-hidden rounded-2xl ring-2 ring-white/20 shadow-2xl shadow-black/40 relative group-[.is-playing]:animate-slow-spin">
<img id="albumArt" src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=400&h=400&fit=crop&crop=faces&auto=format" alt="Midnight Synthwave album art" class="h-full w-full object-cover transition-all duration-500 group-hover/art:scale-110 group-[.is-playing]:brightness-110" style="">
<!-- Vinyl overlay effect -->
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black/20"></div>
<!-- Enhanced shine effect -->
<div
class="absolute inset-0 opacity-0 group-hover/art:opacity-100 group-[.is-playing]:opacity-60 transition-opacity duration-500 bg-gradient-to-r from-transparent via-white/30 to-transparent transform -skew-x-12 animate-shine">
</div>
<!-- Click indicator with pulse -->
<div
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover/art:opacity-100 transition-opacity duration-300 bg-black/30">
<div class="rounded-full bg-white/20 backdrop-blur-sm p-3 animate-pulse-slow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="music" class="lucide lucide-music h-6 w-6 stroke-[1.5] text-white">
<path d="M9 18V5l12-2v13"></path>
<circle cx="6" cy="18" r="3"></circle>
<circle cx="18" cy="16" r="3"></circle>
</svg>
</div>
</div>
</div>
<!-- Enhanced floating badges with animations -->
<div class="absolute -bottom-2 -right-2 flex flex-col gap-1">
<div
class="flex items-center gap-1.5 rounded-xl bg-black/40 backdrop-blur-md px-2.5 py-1.5 ring-1 ring-white/20 shadow-lg animate-float"
style="animation-delay: 0s;">
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse-fast"></div>
<span class="text-[10px] font-medium text-white/90">LIVE</span>
</div>
<div
class="flex items-center gap-1 rounded-xl bg-black/40 backdrop-blur-md px-2.5 py-1.5 ring-1 ring-white/20 shadow-lg animate-float"
style="animation-delay: 1s;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="headphones"
class="lucide lucide-headphones h-3 w-3 text-indigo-300 stroke-[1.5] animate-wiggle">
<path
d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3">
</path>
</svg>
<span class="text-[10px] font-medium text-white/70">Spatial</span>
</div>
</div>
<!-- Enhanced pulse ring with rainbow effect -->
<div
class="absolute inset-0 ring-2 ring-indigo-400/0 group-[.is-playing]:ring-indigo-400/30 transition-all duration-500 group-[.is-playing]:animate-pulse-rainbow bg-cover rounded-2xl bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/199b7f0b-63c0-4f20-921a-05c62d6e5827_800w.jpg)] bg-center">
</div>
</div>
<!-- Enhanced title and metadata section -->
<div class="min-w-0 flex-1">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-2">
<span class="text-[10px] uppercase tracking-[0.1em] text-white/50 font-medium animate-fade-in">Now playing</span>
<div class="w-1 h-1 rounded-full bg-indigo-400 animate-bounce group-[.is-playing]:animate-ping-slow"></div>
</div>
<div class="flex items-center gap-1">
<button id="btnLike" class="rounded-xl p-2 text-white/60 hover:text-rose-400 hover:bg-white/10 hover:ring-1 hover:ring-rose-400/20 transition-all duration-200 group/like hover:scale-110" aria-label="Like">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="heart" class="lucide lucide-heart h-4 w-4 stroke-[1.5] group-hover/like:animate-heartbeat transition-transform"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg>
</button>
<button class="rounded-xl p-2 text-white/60 hover:text-white hover:bg-white/10 hover:ring-1 hover:ring-white/10 transition-all duration-200 group/more hover:scale-110" aria-label="More">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal h-4 w-4 stroke-[1.5] group-hover/more:animate-wiggle transition-transform"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</button>
</div>
</div>
<h1 id="trackTitle"
class="text-[26px] leading-tight tracking-tight font-semibold text-white mb-1 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text animate-slide-up">
Midnight Synthwave</h1>
<div class="flex items-center gap-2 text-[13px] text-white/70 mb-3 animate-slide-up"
style="animation-delay: 0.1s;">
<div class="flex items-center gap-1.5">
<div id="artistAvatar"
class="w-5 h-5 rounded-full bg-gradient-to-r from-indigo-400 to-purple-400 flex items-center justify-center text-[10px] font-bold text-white animate-spin-slow">
AX</div>
<span id="trackArtist" class="font-medium">AURORA x Lumen</span>
</div>
<span class="w-1 h-1 rounded-full bg-white/30 animate-pulse"></span>
<span id="trackAlbum">Neon Dreams</span>
<span class="w-1 h-1 rounded-full bg-white/30 animate-pulse" style="animation-delay: 0.5s;"></span>
<span id="trackYear" class="">2025</span>
</div>
<!-- Enhanced genre and mood tags with stagger animation -->
<div id="trackTags" class="flex flex-wrap gap-1 sm:gap-1.5 items-center animate-slide-up"
style="animation-delay: 0.2s;">
<span class="px-2.5 py-1 text-[10px] font-medium bg-indigo-500/20 text-indigo-300 rounded-lg ring-1 ring-indigo-500/30 hover:bg-indigo-500/30 hover:scale-105 transition-all duration-200 animate-tag-pop" style="animation-delay: 0s;">Synthwave</span><span class="px-2.5 py-1 text-[10px] font-medium bg-purple-500/20 text-purple-300 rounded-lg ring-1 ring-purple-500/30 hover:bg-purple-500/30 hover:scale-105 transition-all duration-200 animate-tag-pop" style="animation-delay: 0.1s;">Chill</span><span class="px-2.5 py-1 text-[10px] font-medium bg-emerald-500/20 text-emerald-300 rounded-lg ring-1 ring-emerald-500/30 hover:bg-emerald-500/30 hover:scale-105 transition-all duration-200 animate-tag-pop" style="animation-delay: 0.2s;">4.9★</span>
</div>
</div>
</div>
</div>
<!-- Enhanced waveform visualization with reactive effects -->
<div class="relative z-20 px-6 mb-4">
<div
class="rounded-2xl border border-white/10 bg-black/20 backdrop-blur-sm p-4 shadow-inner hover:bg-black/30 transition-all duration-300">
<div class="flex items-center justify-between mb-3 text-[11px] text-white/60">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="activity"
class="lucide lucide-activity h-3.5 w-3.5 stroke-[1.5] group-[.is-playing]:animate-pulse">
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2">
</path>
</svg>
<span>Waveform</span>
</div>
<div class="flex items-center gap-1">
<span class="text-indigo-300 font-mono animate-flicker">192kHz</span>
<span>/</span>
<span class="text-emerald-300 font-mono animate-flicker" style="animation-delay: 0.5s;">24bit</span>
</div>
</div>
<div id="waveContainer"
class="relative h-16 w-full flex items-end justify-between cursor-pointer gap-px group/wave">
<!-- Enhanced waveform bars with reactive animations -->
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-indigo-400/60 to-indigo-300/80 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 12px; animation-delay: 0ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-indigo-400/65 to-indigo-300/85 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 16px; animation-delay: 40ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-indigo-400/70 to-purple-300/80 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 22px; animation-delay: 80ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-indigo-400/75 to-purple-300/85 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 28px; animation-delay: 120ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-purple-400/70 to-purple-300/90 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 35px; animation-delay: 160ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-purple-400/75 to-fuchsia-300/80 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 42px; animation-delay: 200ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-purple-400/80 to-fuchsia-300/85 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 48px; animation-delay: 240ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-fuchsia-400/75 to-fuchsia-300/90 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 54px; animation-delay: 280ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-fuchsia-400/80 to-pink-300/85 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 59px; animation-delay: 320ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-fuchsia-400/85 to-pink-300/90 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 62px; animation-delay: 360ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-pink-400/80 to-rose-300/90 group-[.is-playing]:animate-wave-dance shadow-lg shadow-pink-500/20 transition-all duration-200 hover:scale-110"
style="height: 64px; animation-delay: 400ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-pink-400/85 to-rose-300/95 group-[.is-playing]:animate-wave-dance shadow-lg shadow-pink-500/20 transition-all duration-200 hover:scale-110"
style="height: 63px; animation-delay: 440ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-rose-400/80 to-rose-300/90 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 60px; animation-delay: 480ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-rose-400/75 to-pink-300/85 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 56px; animation-delay: 520ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-pink-400/70 to-fuchsia-300/80 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 51px; animation-delay: 560ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-fuchsia-400/65 to-purple-300/75 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 44px; animation-delay: 600ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-purple-400/60 to-indigo-300/70 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 38px; animation-delay: 640ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-indigo-400/55 to-indigo-300/65 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 31px; animation-delay: 680ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-indigo-400/50 to-indigo-300/60 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 24px; animation-delay: 720ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-indigo-400/45 to-indigo-300/55 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 19px; animation-delay: 760ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-indigo-400/40 to-indigo-300/50 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 15px; animation-delay: 800ms;"></div>
<div
class="wave-bar w-2 rounded-full bg-gradient-to-t from-indigo-400/35 to-indigo-300/45 group-[.is-playing]:animate-wave-dance shadow-sm transition-all duration-200 hover:scale-110"
style="height: 11px; animation-delay: 840ms;"></div>
<!-- Wave interaction ripple effect -->
<div id="waveRipple" class="absolute inset-0 pointer-events-none opacity-0 transition-opacity duration-300">
</div>
</div>
</div>
</div>
<!-- Enhanced progress section -->
<div class="relative z-20 px-6 mb-4">
<div class="flex items-center justify-between text-[11px] text-white/60 mb-3">
<div class="flex items-center gap-2 font-mono">
<span id="currentTime" class="text-indigo-300 animate-digital-flicker">0:00</span>
</div>
<div class="flex items-center gap-2 font-mono">
<span id="totalDuration" class="text-white/50">6:12</span>
</div>
</div>
<div id="seekArea"
class="group/seek relative h-2 rounded-full bg-white/10 hover:bg-white/15 transition-all duration-200 cursor-pointer ring-1 ring-inset ring-white/5 overflow-hidden">
<div id="progressBar"
class="absolute left-0 top-0 h-full rounded-full bg-gradient-to-r from-indigo-400 via-purple-400 to-fuchsia-400 shadow-sm shadow-indigo-500/25 transition-all duration-200 group-[.is-playing]:animate-progress-glow"
style="width: 0%;"></div>
<div id="progressThumb"
class="absolute -top-2 h-6 w-6 rounded-full bg-white shadow-xl ring-4 ring-indigo-500/20 opacity-0 group-[.is-playing]:opacity-100 group-hover/seek:opacity-100 transition-all duration-200 group-hover/seek:scale-110 animate-bounce-subtle"
style="left: calc(0% - 12px);"></div>
<!-- Enhanced glow effect -->
<div
class="absolute inset-0 rounded-full bg-gradient-to-r from-indigo-400/0 via-purple-400/20 to-fuchsia-400/0 opacity-0 group-hover/seek:opacity-100 transition-opacity duration-300 animate-pulse-slow">
</div>
</div>
</div>
<!-- Enhanced main controls -->
<div class="relative z-20 px-6 mb-4">
<div class="flex items-center justify-center">
<!-- Main playback controls centered -->
<div class="flex items-center gap-4">
<button id="btnPrev" class="group/prev rounded-full p-3 text-white/70 hover:text-white hover:bg-white/10 hover:ring-2 hover:ring-white/20 transition-all duration-200 hover:scale-105 hover:rotate-12" aria-label="Previous">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="skip-back" class="lucide lucide-skip-back h-5 w-5 stroke-[1.5] group-hover/prev:animate-wiggle transition-transform"><path d="M17.971 4.285A2 2 0 0 1 21 6v12a2 2 0 0 1-3.029 1.715l-9.997-5.998a2 2 0 0 1-.003-3.432z"></path><path d="M3 20V4"></path></svg>
</button>
<button id="btnPlay" class="group/play relative inline-flex items-center justify-center rounded-full h-16 w-16 bg-gradient-to-r from-indigo-500 to-purple-600 text-white hover:from-indigo-400 hover:to-purple-500 hover:ring-4 ring-indigo-500/25 focus:outline-none transition-all duration-300 hover:scale-105 shadow-xl shadow-indigo-500/25 group-[.is-playing]:animate-pulse-button" aria-label="Play">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play h-7 w-7 stroke-[1.5] translate-x-[1px] group-hover/play:scale-110 transition-transform"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="pause" class="lucide lucide-pause hidden h-7 w-7 stroke-[1.5] group-hover/play:scale-110 transition-transform"><rect x="14" y="3" width="5" height="18" rx="1"></rect><rect x="5" y="3" width="5" height="18" rx="1"></rect></svg>
<!-- Enhanced pulse ring for playing state -->
<div class="absolute inset-0 rounded-full ring-2 ring-indigo-400/0 group-[.is-playing]:ring-indigo-400/50 group-[.is-playing]:animate-ping-rainbow"></div>
<!-- Additional ripple effect -->
<div class="absolute inset-0 rounded-full ring-4 ring-purple-400/0 group-[.is-playing]:ring-purple-400/30 group-[.is-playing]:animate-ping" style="animation-delay: 0.5s;"></div>
</button>
<button id="btnNext" class="group/next rounded-full p-3 text-white/70 hover:text-white hover:bg-white/10 hover:ring-2 hover:ring-white/20 transition-all duration-200 hover:scale-105 hover:-rotate-12" aria-label="Next">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="skip-forward" class="lucide lucide-skip-forward h-5 w-5 stroke-[1.5] group-hover/next:animate-wiggle transition-transform"><path d="M21 4v16"></path><path d="M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z"></path></svg>
</button>
</div>
</div>
<!-- Secondary controls row -->
<div class="flex items-center justify-between mt-6">
<!-- Left utilities -->
<div class="flex items-center gap-1">
<button id="btnShuffle" class="group/shuffle rounded-xl px-3 py-2 text-[12px] font-medium text-white/70 hover:text-white hover:bg-white/10 hover:ring-1 hover:ring-white/20 transition-all duration-200 flex items-center gap-2 hover:scale-105" aria-pressed="false" aria-label="Shuffle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shuffle" class="lucide lucide-shuffle h-4 w-4 stroke-[1.5] group-hover/shuffle:animate-shake transition-transform"><path d="m18 14 4 4-4 4"></path><path d="m18 2 4 4-4 4"></path><path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22"></path><path d="M2 6h1.972a4 4 0 0 1 3.6 2.2"></path><path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45"></path></svg>
<span class="hidden sm:inline">Shuffle</span>
</button>
<button id="btnRepeat" class="group/repeat rounded-xl px-3 py-2 text-[12px] font-medium text-white/70 hover:text-white hover:bg-white/10 hover:ring-1 hover:ring-white/20 transition-all duration-200 flex items-center gap-2 hover:scale-105" aria-pressed="false" aria-label="Repeat">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="repeat-1" class="lucide lucide-repeat-1 h-4 w-4 stroke-[1.5] group-hover/repeat:animate-spin transition-transform"><path d="m17 2 4 4-4 4"></path><path d="M3 11v-1a4 4 0 0 1 4-4h14"></path><path d="m7 22-4-4 4-4"></path><path d="M21 13v1a4 4 0 0 1-4 4H3"></path><path d="M11 10h1v4"></path></svg>
<span class="hidden sm:inline">Repeat</span>
</button>
</div>
<!-- Right volume controls -->
<div class="flex items-center gap-1">
<button id="btnMute" class="group/volume rounded-xl px-3 py-2 text-[12px] font-medium text-white/70 hover:text-white hover:bg-white/10 hover:ring-1 hover:ring-white/20 transition-all duration-200 flex items-center gap-2 hover:scale-105" aria-label="Mute">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="volume-2" class="lucide lucide-volume-2 h-4 w-4 stroke-[1.5] group-hover/volume:animate-bounce transition-transform"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"></path><path d="M16 9a5 5 0 0 1 0 6"></path><path d="M19.364 18.364a9 9 0 0 0 0-12.728"></path></svg>
<span class="hidden sm:inline">Vol</span>
</button>
</div>
</div>
</div>
<!-- Enhanced divider with gradient -->
<div class="relative z-20 px-6 mb-4">
<div class="h-px w-full bg-gradient-to-r from-transparent via-white/20 to-transparent relative">
<div
class="absolute inset-0 bg-gradient-to-r from-transparent via-indigo-400/30 to-transparent blur-sm animate-pulse-slow">
</div>
</div>
</div>
<!-- Enhanced bottom controls and metadata -->
<div class="relative z-20 px-6 pb-6">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2">
<!-- Audio quality indicators with enhanced animations -->
<div
class="flex items-center gap-1 rounded-xl bg-emerald-500/10 px-3 py-2 ring-1 ring-emerald-500/20 hover:bg-emerald-500/20 hover:scale-105 transition-all duration-300 animate-float"
style="animation-delay: 0s;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="badge-check"
class="lucide lucide-badge-check h-3.5 w-3.5 stroke-[1.5] text-emerald-400 animate-pulse">
<path
d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z">
</path>
<path d="m9 12 2 2 4-4"></path>
</svg>
<span class="text-[11px] font-medium text-emerald-300">Lossless</span>
</div>
<div
class="flex items-center gap-1 rounded-xl bg-blue-500/10 px-3 py-2 ring-1 ring-blue-500/20 hover:bg-blue-500/20 hover:scale-105 transition-all duration-300 animate-float"
style="animation-delay: 0.5s;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="headphones"
class="lucide lucide-headphones h-3.5 w-3.5 stroke-[1.5] text-blue-400 animate-wiggle">
<path
d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3">
</path>
</svg>
<span class="text-[11px] font-medium text-blue-300">Spatial</span>
</div>
</div>
<div class="flex items-center gap-1">
<button id="btnQueue" class="group/queue rounded-xl p-2.5 text-white/60 hover:text-white hover:bg-white/10 hover:ring-1 hover:ring-white/20 transition-all duration-200 hover:scale-110" aria-label="Queue">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="list-music" class="lucide lucide-list-music h-4.5 w-4.5 stroke-[1.5] group-hover/queue:animate-bounce transition-transform"><path d="M21 15V6"></path><path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"></path><path d="M12 12H3"></path><path d="M16 6H3"></path><path d="M12 18H3"></path></svg>
</button>
<button class="group/cast rounded-xl p-2.5 text-white/60 hover:text-white hover:bg-white/10 hover:ring-1 hover:ring-white/20 transition-all duration-200 hover:scale-110" aria-label="Cast">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="cast" class="lucide lucide-cast h-4.5 w-4.5 stroke-[1.5] group-hover/cast:animate-pulse transition-transform"><path d="M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"></path><path d="M2 12a9 9 0 0 1 8 8"></path><path d="M2 16a5 5 0 0 1 4 4"></path><line x1="2" x2="2.01" y1="20" y2="20"></line></svg>
</button>
<button class="group/share rounded-xl p-2.5 text-white/60 hover:text-white hover:bg-white/10 hover:ring-1 hover:ring-white/20 transition-all duration-200 hover:scale-110" aria-label="Share">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="share-2" class="lucide lucide-share-2 h-4.5 w-4.5 stroke-[1.5] group-hover/share:animate-spin transition-transform"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line></svg>
</button>
<button class="group/settings rounded-xl p-2.5 text-white/60 hover:text-white hover:bg-white/10 hover:ring-1 hover:ring-white/20 transition-all duration-200 hover:scale-110" aria-label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings" class="lucide lucide-settings h-4.5 w-4.5 stroke-[1.5] group-hover/settings:animate-spin transition-transform"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg>
</button>
</div>
</div>
<!-- Additional metadata row centered with enhanced animations -->
<div class="flex flex-col items-center gap-3 text-[10px] text-white/50">
<div class="flex items-center gap-3 animate-fade-in" style="animation-delay: 0.3s;">
<span id="trackPlays" class="animate-number-count">🎵 32.1M plays</span>
<span class="animate-number-count" style="animation-delay: 0.1s;">👥 Added by 12.3K users</span>
<span id="trackReleaseDate" class="animate-fade-in" style="animation-delay: 0.2s;">Released Jan 15, 2025</span>
</div>
<div class="flex items-center gap-3 animate-slide-up" style="animation-delay: 0.4s;">
<span class="px-2 py-1 bg-white/5 rounded-md hover:bg-white/10 transition-colors duration-200 animate-glow">320kbps</span>
<span id="miniTime" class="font-mono animate-digital-flicker">0:00 / 6:12</span>
</div>
</div>
</div>
<!-- Hidden audio element -->
<audio id="audio" preload="metadata" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
</div>