Interactive Glassmorphism Audio Music Player

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism Music Player</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
    </script>
    <style>
        body { margin: 0; }
        .bar { animation: bounce 1.2s infinite ease-in-out alternate; }
        @keyframes bounce { 0% { height: 8px; } 100% { height: 28px; } }
    </style>
</head>
<body class="h-full flex items-center justify-center p-6 bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 transition-colors duration-300">

    <div class="w-80 p-6 rounded-3xl bg-white/90 dark:bg-slate-900/80 border border-slate-200 dark:border-slate-800 backdrop-blur-xl shadow-2xl space-y-6">
        <!-- Album Art -->
        <div class="relative w-full h-48 rounded-2xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center shadow-lg shadow-purple-500/20 text-white">
            <span class="text-5xl">🎵</span>
            <!-- Equalizer Bars -->
            <div id="visualizer" class="absolute bottom-4 flex items-end gap-1.5 opacity-0 transition duration-300">
                <div class="bar w-1 bg-cyan-400 rounded-full" style="animation-delay: 0.1s;"></div>
                <div class="bar w-1 bg-cyan-400 rounded-full" style="animation-delay: 0.3s;"></div>
                <div class="bar w-1 bg-cyan-400 rounded-full" style="animation-delay: 0.2s;"></div>
                <div class="bar w-1 bg-cyan-400 rounded-full" style="animation-delay: 0.4s;"></div>
            </div>
        </div>

        <!-- Track Info -->
        <div>
            <h3 class="font-bold text-lg text-slate-900 dark:text-white">Cyberpunk Synthwave</h3>
            <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">Neon Nights - Chill Beats</p>
        </div>

        <!-- Scrubber -->
        <div class="space-y-1.5">
            <div class="w-full h-2 rounded-full bg-slate-200 dark:bg-slate-800 overflow-hidden cursor-pointer">
                <div id="progress" class="h-full bg-cyan-500 dark:bg-cyan-400 w-1/3 transition-all duration-300"></div>
            </div>
            <div class="flex justify-between text-[10px] font-mono text-slate-500 dark:text-slate-400">
                <span>01:12</span>
                <span>03:45</span>
            </div>
        </div>

        <!-- Controls -->
        <div class="flex items-center justify-center gap-6">
            <button class="text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition">⏮️</button>
            <button onclick="togglePlay()" id="playBtn" class="w-12 h-12 rounded-full bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-bold flex items-center justify-center text-xl shadow-lg shadow-cyan-500/30 transition transform active:scale-95">▶️</button>
            <button class="text-slate-400 hover:text-white transition">⏭️</button>
        </div>
    </div>

    <script>
        let isPlaying = false;
        function togglePlay() {
            isPlaying = !isPlaying;
            document.getElementById("playBtn").innerText = isPlaying ? "⏸️" : "▶️";
            document.getElementById("visualizer").style.opacity = isPlaying ? "1" : "0";
        }
    </script>
</body>
</html>

/* Supports both Dark and Light mode via Tailwind class variant */

// Interactive scripts included inside demo view file