Загрузка...
UI-компонент "Карточка музыкального плеера" с управлением, прогресс-баром и треклистом. Интерактивный, современный, адаптивный дизайн.
<div class="w-full max-w-sm ring-1 ring-transparent hover:ring-blue-500/30 focus-within:ring-blue-500/40 shadow-[0_20px_60px_-15px_rgba(0,0,0,.8)] overflow-hidden transition-all duration-700 bg-gray-900/30 border-white/10 border rounded-3xl backdrop-blur-md">
<style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');</style>
<div class="flex gap-2 bg-white/5 border-white/5 border-b pt-3 pr-5 pb-3 pl-5 items-center">
<span class="text-xl tracking-tight font-inter text-white">Now Playing</span>
<span class="text-xs text-white/60 ml-auto font-inter">Playlist · 7 Tracks</span>
</div>
<div class="flex items-center px-5 py-4 bg-gradient-to-b from-white/10 to-transparent">
<div class="flex items-center gap-6">
<button aria-label="Shuffle" class="hover:text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 rounded transition text-white">
<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" class="w-5 h-5">
<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>
</button>
<button aria-label="Repeat" class="hover:text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 rounded transition text-white">
<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" class="w-5 h-5">
<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>
</svg>
</button>
<button disabled="" aria-label="Previous Track" class="opacity-40 cursor-not-allowed text-white">
<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" class="w-5 h-5">
<polygon points="19 20 9 12 19 4 19 20"></polygon>
<line x1="5" x2="5" y1="19" y2="5"></line>
</svg>
</button>
<button id="playToggle" aria-label="Pause" class="p-2 rounded-full bg-white/10 hover:bg-white/20 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-500/30 transition text-white">
<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" class="w-6 h-6">
<rect x="14" y="4" width="4" height="16" rx="1"></rect>
<rect x="6" y="4" width="4" height="16" rx="1"></rect>
</svg>
</button>
<button aria-label="Next Track" class="hover:text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 rounded transition text-white">
<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" class="w-5 h-5">
<polygon points="5 4 15 12 5 20 5 4"></polygon>
<line x1="19" x2="19" y1="5" y2="19"></line>
</svg>
</button>
</div>
<div class="flex items-center gap-2 ml-auto">
<span id="volumeLabel" class="text-sm font-inter text-white">72%</span>
<button id="muteToggle" aria-label="Mute" class="hover:text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 rounded transition text-white">
<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" class="w-5 h-5">
<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>
</button>
</div>
</div>
<ul role="list" class="divide-y divide-white/5">
<li role="listitem" class="group flex items-start gap-4 p-5 relative bg-white/5 backdrop-blur-sm">
<div class="relative">
<img src="https://images.unsplash.com/photo-1710319586590-89a5652c4c94?w=800&q=80" alt="Album art for Starlight Echo" class="w-16 h-16 rounded-lg object-cover transition-transform duration-300 group-hover:rotate-3">
<span class="absolute -inset-1 rounded-lg border border-blue-400/0 group-hover:border-blue-400/30 group-hover:shadow-[0_0_15px_4px_rgba(99,102,241,.3)] transition"></span>
</div>
<div class="flex-1">
<h3 class="leading-tight tracking-tight font-inter text-white">Starlight Echo</h3>
<p class="text-sm text-white/60 leading-tight font-inter">Nova Lane – Midnight Blueprints</p>
<div class="flex items-center gap-2 mt-3">
<span class="text-xs font-inter text-white">2:07</span>
<input aria-label="Seek through track" type="range" min="0" max="207" value="94" class="w-full h-1 accent-blue-500/90 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60">
<span class="text-xs text-white/60 font-inter">-1:13</span>
</div>
</div>
<button aria-label="Save to Library" class="hover:text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 rounded transition text-white">
<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" class="w-6 h-6">
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
<line x1="12" x2="12" y1="7" y2="13"></line>
<line x1="15" x2="9" y1="10" y2="10"></line>
</svg>
</button>
</li>
<li role="listitem" class="group flex items-center gap-4 p-5 hover:bg-white/5 focus-within:bg-white/5 transition-colors">
<img src="https://images.unsplash.com/photo-1625014618427-fbc980b974f5?w=320&q=80" alt="Album art for Neon Skies" class="w-12 h-12 rounded-lg object-cover flex-shrink-0">
<div class="flex-1">
<h3 class="leading-tight tracking-tight font-inter text-white">Neon Skies</h3>
<p class="text-sm text-white/60 leading-tight font-inter">Atlas Waves – Chromatic Flux</p>
</div>
<span class="text-sm font-inter text-white">3:18</span>
<button aria-label="Options for Neon Skies" class="ml-2 opacity-0 group-hover:opacity-100 focus:opacity-100 hover:text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 rounded transition text-white">
<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" class="w-5 h-5">
<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>
</li>
<li role="listitem" class="group flex items-center gap-4 p-5 hover:bg-white/5 focus-within:bg-white/5 transition-colors">
<img src="https://images.unsplash.com/photo-1650473395434-8674d953ef2f?w=320&q=80" alt="Album art for Crystal Voyage" class="w-12 h-12 rounded-lg object-cover flex-shrink-0">
<div class="flex-1">
<h3 class="leading-tight tracking-tight font-inter text-white">Crystal Voyage</h3>
<p class="text-sm text-white/60 leading-tight font-inter">Gemini Pulse – Single</p>
</div>
<span class="text-sm font-inter text-white">4:02</span>
<button aria-label="Options for Crystal Voyage" class="ml-2 opacity-0 group-hover:opacity-100 focus:opacity-100 hover:text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 rounded transition text-white">
<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" class="w-5 h-5">
<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>
</li>
<li role="listitem" class="group flex items-center gap-4 p-5 hover:bg-white/5 focus-within:bg-white/5 transition-colors">
<img src="https://images.unsplash.com/photo-1722269160081-5bce2d5fdde2?w=320&q=80" alt="Album art for Gravity Bloom" class="w-12 h-12 rounded-lg object-cover flex-shrink-0">
<div class="flex-1">
<h3 class="leading-tight tracking-tight font-inter text-white">Gravity Bloom</h3>
<p class="text-sm text-white/60 leading-tight font-inter">Echo Signal – Event Horizons</p>
</div>
<span class="text-sm font-inter text-white">3:56</span>
<button aria-label="Options for Gravity Bloom" class="ml-2 opacity-0 group-hover:opacity-100 focus:opacity-100 hover:text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 rounded transition text-white">
<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" class="w-5 h-5">
<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>
</li>
<li role="listitem" class="group flex items-center gap-4 p-5 hover:bg-white/5 focus-within:bg-white/5 transition-colors">
<img src="https://images.unsplash.com/photo-1618397746666-63405ce5d015?w=320&q=80" alt="Album art for Lunar Heartbeat" class="w-12 h-12 rounded-lg object-cover flex-shrink-0">
<div class="flex-1">
<h3 class="leading-tight tracking-tight font-inter text-white">Lunar Heartbeat</h3>
<p class="text-sm text-white/60 leading-tight font-inter">Orbit Lights – Far Side EP</p>
</div>
<span class="text-sm font-inter text-white">4:27</span>
<button aria-label="Options for Lunar Heartbeat" class="ml-2 opacity-0 group-hover:opacity-100 focus:opacity-100 hover:text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 rounded transition text-white">
<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" class="w-5 h-5">
<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>
</li>
</ul>
<script>
const playToggle = document.getElementById('playToggle'); const muteToggle = document.getElementById('muteToggle'); const volumeLabel = document.getElementById('volumeLabel'); let playing = true; let muted = false; playToggle.addEventListener('click', () => { playing = !playing; if (playing) { playToggle.innerHTML = '<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" class="w-6 h-6"><rect x="14" y="4" width="4" height="16" rx="1"></rect><rect x="6" y="4" width="4" height="16" rx="1"></rect></svg>'; playToggle.setAttribute('aria-label', 'Pause'); } else { playToggle.innerHTML = '<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" class="w-6 h-6"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>'; playToggle.setAttribute('aria-label', 'Play'); } }); muteToggle.addEventListener('click', () => { muted = !muted; if (muted) { muteToggle.innerHTML = '<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" class="w-5 h-5"><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="M22 9 16 15"></path><path d="M16 9l6 6"></path></svg>'; muteToggle.setAttribute('aria-label', 'Unmute'); volumeLabel.textContent = '0%'; } else { muteToggle.innerHTML = '<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" class="w-5 h-5"><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>'; muteToggle.setAttribute('aria-label', 'Mute'); volumeLabel.textContent = '72%'; } });
</script>
</div>