<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-blue-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-xl p-6 md:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out
border border-pink-200 dark:border-gray-700
hover:shadow-2xl hover:scale-[1.01]
relative
before:content-[''] before:absolute before:inset-0 before:rounded-3xl before:bg-gradient-to-br before:from-pink-50 before:via-purple-50 before:to-blue-50 before:opacity-0 hover:before:opacity-100 dark:before:from-gray-800 dark:before:via-gray-700 dark:before:to-gray-600 dark:hover:before:opacity-5">
<!-- Background '3D' elements -->
<div class="absolute -top-10 -left-10 w-32 h-32 bg-pink-300 dark:bg-fuchsia-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div>
<div class="absolute -bottom-8 -right-8 w-40 h-40 bg-purple-300 dark:bg-violet-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div>
<div class="absolute top-1/4 right-5 w-24 h-24 bg-blue-300 dark:bg-cyan-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000"></div>
<div class="relative z-10 space-y-6">
<!-- Song Info & Album Art -->
<div class="flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-6">
<div class="relative w-32 h-32 sm:w-24 sm:h-24 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg transform transition-all duration-300 ease-in-out
bg-gradient-to-br from-pink-300 to-purple-300 dark:from-fuchsia-700 dark:to-violet-700
hover:scale-105 hover:rotate-3">
<!-- 3D effect border -->
<div class="absolute inset-0.5 rounded-2xl overflow-hidden">
<img src="https://picsum.photos/id/1043/300/300" alt="Album Art" class="w-full h-full object-cover" />
</div>
<div class="absolute inset-0.5 rounded-2xl border-4 border-white border-opacity-30 dark:border-gray-800 dark:border-opacity-30"></div>
</div>
<div class="text-center sm:text-left">
<h3 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white mb-1 leading-tight tracking-wider transform transition-colors duration-300">
Dreamy Synthwave
</h3>
<p class="text-md sm:text-lg text-gray-600 dark:text-gray-300 tracking-wide transform transition-colors duration-300">
<span class="font-semibold text-purple-600 dark:text-purple-400">Synthwave Artist</span> - Album Name
</p>
</div>
</div>
<!-- Progress Bar -->
<div class="relative py-4">
<div class="w-full h-4 relative rounded-full bg-pink-200 dark:bg-gray-700 shadow-inner overflow-hidden">
<!-- 3D 'track' -->
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-100 via-purple-100 to-blue-100 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
<div class="absolute bottom-0 left-0 right-0 h-2 bg-pink-300 dark:bg-gray-900 rounded-b-full opacity-30"></div>
<!-- Progress fill -->
<div class="absolute top-0 left-0 h-4 rounded-full bg-gradient-to-r from-pink-400 to-purple-400 dark:from-fuchsia-600 dark:to-violet-600 shadow-lg glow-pink-purple transition-all duration-500 ease-out"
style="width: 65%;">
<!-- Inner 3D sparkle -->
<div class="absolute inset-0 rounded-full bg-white opacity-20 dark:opacity-10 glow-white"></div>
<!-- 3D 'edge' -->
<div class="absolute bottom-0 left-0 right-0 h-2 bg-purple-500 dark:bg-violet-800 rounded-b-full opacity-50"></div>
</div>
<!-- Playhead 'knob' -->
<div class="absolute top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-gradient-to-tr from-pink-500 to-purple-500 dark:from-fuchsia-700 dark:to-violet-700 shadow-xl
flex items-center justify-center glow-pink-purple transition-all duration-500 ease-out"
style="left: 65%; transform: translateX(-50%) translateY(-50%);">
<div class="w-3 h-3 rounded-full bg-white dark:bg-gray-100 shadow-md"></div>
</div>
</div>
<div class="flex justify-between text-sm mt-2 text-gray-500 dark:text-gray-400">
<span class="font-medium">2:35</span>
<span class="font-medium">3:45</span>
</div>
</div>
<!-- Volume/Playback Speed Bars (mini-progress indicators) -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
<div>
<label for="volume-slider" class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">Volume</label>
<div class="w-full h-3 relative rounded-full bg-teal-100 dark:bg-gray-700 shadow-inner overflow-hidden">
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-teal-50 to-emerald-50 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
<div class="absolute bottom-0 left-0 right-0 h-1.5 bg-teal-200 dark:bg-gray-900 rounded-b-full opacity-30"></div>
<div class="absolute top-0 left-0 h-3 rounded-full bg-gradient-to-r from-teal-400 to-emerald-400 dark:from-emerald-600 dark:to-teal-600 shadow-md glow-teal-emerald"
style="width: 80%;"></div>
</div>
</div>
<div>
<label for="speed-slider" class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">Speed</label>
<div class="w-full h-3 relative rounded-full bg-orange-100 dark:bg-gray-700 shadow-inner overflow-hidden">
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-orange-50 to-amber-50 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
<div class="absolute bottom-0 left-0 right-0 h-1.5 bg-orange-200 dark:bg-gray-900 rounded-b-full opacity-30"></div>
<div class="absolute top-0 left-0 h-3 rounded-full bg-gradient-to-r from-orange-400 to-amber-400 dark:from-amber-600 dark:to-orange-600 shadow-md glow-orange-amber"
style="width: 50%;"></div>
</div>
</div>
</div>
<!-- Controls (example, not focus of progress) -->
<div class="flex justify-around items-center pt-6 text-gray-500 dark:text-gray-400">
<button class="p-3 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-sm dark:shadow-md">
<!-- < Previous Icon -->
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
</svg>
</button>
<button class="p-4 rounded-full bg-gradient-to-br from-pink-500 to-purple-500 dark:from-fuchsia-700 dark:to-violet-700 text-white shadow-xl glow-pink-purple
transition-all duration-300 ease-in-out transform hover:scale-105 hover:rotate-3 active:scale-95
relative overflow-hidden group"
aria-label="Play">
<div class="absolute inset-0 rounded-full bg-white opacity-10 dark:opacity-5 group-hover:opacity-20 transition-opacity duration-300"></div>
<!-- Play Icon -->
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<button class="p-3 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-sm dark:shadow-md">
<!-- Next Icon -->
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Custom Styles for 3D effect and animations -->
<style>
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.animate-blob {
animation: blob 7s infinite cubic-bezier(0.6, 0.4, 0.4, 0.8);
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
/* Glow effects */
.glow-pink-purple {
filter: drop-shadow(0 4px 8px rgba(236, 72, 153, 0.4)) drop-shadow(0 2px 4px rgba(168, 85, 247, 0.3));
}
.dark .glow-pink-purple {
filter: drop-shadow(0 4px 8px rgba(186, 104, 200, 0.3)) drop-shadow(0 2px 4px rgba(126, 75, 140, 0.2)); /* Darker glow for dark mode */
}
.glow-teal-emerald {
filter: drop-shadow(0 2px 4px rgba(20, 184, 166, 0.3)) drop-shadow(0 1px 2px rgba(16, 185, 129, 0.2));
}
.dark .glow-teal-emerald {
filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.2)) drop-shadow(0 1px 2px rgba(20, 184, 166, 0.1));
}
.glow-orange-amber {
filter: drop-shadow(0 2px 4px rgba(249, 115, 22, 0.3)) drop-shadow(0 1px 2px rgba(245, 158, 11, 0.2));
}
.dark .glow-orange-amber {
filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.2)) drop-shadow(0 1px 2px rgba(249, 115, 22, 0.1));
}
.glow-white {
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
}
</style>
