<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-900 to-indigo-900 min-h-screen font-sans dark:from-gray-900 dark:to-black text-gray-100">
<!-- Outer 3D Container -->
<div class="max-w-6xl mx-auto backdrop-blur-sm bg-purple-800/30 dark:bg-gray-800/30 rounded-3xl p-4 sm:p-6 lg:p-10 shadow-[0_20px_50px_rgba(0,0,0,0.8)] relative overflow-hidden ring-2 ring-purple-500/50 dark:ring-gray-600/50">
<!-- Decorative light aura -->
<div class="absolute top-0 left-0 w-full h-full pointer-events-none rounded-3xl" style="background: radial-gradient(circle at 10% 10%, rgba(139, 92, 246, 0.2) 0%, transparent 50%), radial-gradient(circle at 90% 90%, rgba(239, 68, 68, 0.1) 0%, transparent 50%);"></div>
<!-- Inner Content Area -->
<div class="relative z-10">
<header class="mb-8 text-center">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-2 text-white drop-shadow-[0_4px_3px_rgba(0,0,0,0.5)] leading-tight">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-300 via-pink-300 to-red-300">🎧 Playlists & Tracks 🎧</span>
</h1>
<p class="text-lg sm:text-xl text-purple-200 dark:text-gray-300 mb-6 drop-shadow-[0_2px_2px_rgba(0,0,0,0.4)]">
Dive into a universe of sound. Explore our curated collections.
</p>
<!-- Search Bar with 3D Effect -->
<div class="relative max-w-xl mx-auto group">
<input type="text" placeholder="Search playlists or songs..." class="w-full p-3 pl-12 rounded-full bg-purple-700/60 dark:bg-gray-700/60 text-white placeholder-purple-200 dark:placeholder-gray-300 focus:outline-none focus:ring-4 focus:ring-purple-400/70 dark:focus:ring-gray-500/70 shadow-lg transition-all duration-300 transform perspective-1000 rotateX-0 group-hover:rotateX-5 group-hover:shadow-[0_15px_30px_rgba(0,0,0,0.6)]">
<svg class="absolute left-4 top-1/2 -translate-y-1/2 w-6 h-6 text-purple-300 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Sidebar: Categories/Genres (3D Elevated) -->
<aside class="bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl p-6 shadow-[0_10px_30px_rgba(0,0,0,0.5)] overflow-hidden relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
<h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">Genres & Moods</h2>
<ul class="space-y-4">
<li class="relative">
<a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
<span><i class="fa-solid fa-compact-disc mr-3"></i>Pop Hits</span>
<span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">345</span>
</a>
</li>
<li>
<a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
<span><i class="fa-solid fa-guitar mr-3"></i>Rock Anthems</span>
<span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">210</span>
</a>
</li>
<li>
<a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
<span><i class="fa-solid fa-headphones mr-3"></i>Electronic Vibes</span>
<span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">188</span>
</a>
</li>
<li>
<a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
<span><i class="fa-solid fa-microphone-alt mr-3"></i>Soulful R&B</span>
<span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">120</span>
</a>
</li>
<li>
<a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
<span><i class="fa-solid fa-drum mr-3"></i>Hip-Hop Grooves</span>
<span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">98</span>
</a>
</li>
</ul>
<!-- Featured Artist (Mini-card) -->
<div class="mt-8 p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.02] relative z-10">
<h3 class="text-lg font-bold text-white mb-3 flex items-center justify-center"><i class="fa-solid fa-star mr-2 text-yellow-400"></i>Featured Artist</h3>
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Artist Avatar" class="w-20 h-20 rounded-full mx-auto mb-3 border-4 border-purple-400 dark:border-gray-500 shadow-md object-cover">
<p class="text-lg font-semibold text-purple-100 dark:text-gray-200">Lunar Tones</p>
<a href="#" class="mt-3 inline-block bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm font-bold shadow-md transition-all duration-200 transform active:scale-95">View Profile</a>
</div>
</aside>
<!-- Main Content: Playlist Sections (Layered 3D Cards) -->
<main class="lg:col-span-2 space-y-8">
<!-- Recently Played -->
<section class="p-6 bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
<h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">Recently Played <i class="fa-solid fa-history ml-2"></i></h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<!-- Playlist Card 1 -->
<div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://picsum.photos/id/1040/300/200" alt="Playlist Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
<h3 class="text-lg font-semibold text-white mb-1">Chill Lofi Jams</h3>
<p class="text-sm text-purple-200 dark:text-gray-300">45 tracks</p>
<button class="mt-3 bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-play mr-2"></i>Play</button>
</div>
<!-- Playlist Card 2 -->
<div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://picsum.photos/id/1043/300/200" alt="Playlist Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
<h3 class="text-lg font-semibold text-white mb-1">Workout Energy</h3>
<p class="text-sm text-purple-200 dark:text-gray-300">60 tracks</p>
<button class="mt-3 bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-play mr-2"></i>Play</button>
</div>
<!-- Playlist Card 3 -->
<div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://picsum.photos/id/1045/300/200" alt="Playlist Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
<h3 class="text-lg font-semibold text-white mb-1">Morning Acoustic</h3>
<p class="text-sm text-purple-200 dark:text-gray-300">30 tracks</p>
<button class="mt-3 bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-play mr-2"></i>Play</button>
</div>
</div>
</section>
<!-- New Releases -->
<section class="p-6 bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
<h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">New Releases <i class="fa-solid fa-fire ml-2 text-orange-400"></i></h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<!-- Album Card 1 -->
<div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://picsum.photos/id/1025/300/200" alt="Album Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
<h3 class="text-lg font-semibold text-white mb-1">City Lights</h3>
<p class="text-sm text-purple-200 dark:text-gray-300">By Starlight Echoes</p>
<button class="mt-3 bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-eye mr-2"></i>Listen</button>
</div>
<!-- Album Card 2 -->
<div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://picsum.photos/id/1029/300/200" alt="Album Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
<h3 class="text-lg font-semibold text-white mb-1">Oceanic Depths</h3>
<p class="text-sm text-purple-200 dark:text-gray-300">By Aqua Waves</p>
<button class="mt-3 bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-eye mr-2"></i>Listen</button>
</div>
<!-- Album Card 3 -->
<div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://picsum.photos/id/1031/300/200" alt="Album Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
<h3 class="text-lg font-semibold text-white mb-1">Forest Whispers</h3>
<p class="text-sm text-purple-200 dark:text-gray-300">By Green Groove</p>
<button class="mt-3 bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-eye mr-2"></i>Listen</button>
</div>
</div>
</section>
<!-- Popular Artists -->
<section class="p-6 bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
<h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">Popular Artists <i class="fa-solid fa-users ml-2"></i></h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<!-- Artist Card 1 -->
<a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
<p class="text-lg font-semibold text-white">Eleanor Ray</p>
<p class="text-sm text-purple-200 dark:text-gray-300">Pop/R&B</p>
</a>
<!-- Artist Card 2 -->
<a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
<p class="text-lg font-semibold text-white">Jaxson Cole</p>
<p class="text-sm text-purple-200 dark:text-gray-300">Hip-Hop</p>
</a>
<!-- Artist Card 3 -->
<a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
<p class="text-lg font-semibold text-white">Seraphina</p>
<p class="text-sm text-purple-200 dark:text-gray-300">Electronic</p>
</a>
<!-- Artist Card 4 -->
<a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
<p class="text-lg font-semibold text-white">Rhythmic Soul</p>
<p class="text-sm text-purple-200 dark:text-gray-300">Jazz/Funk</p>
</a>
</div>
</section>
</main>
</div>
<!-- Footer for additional navigation or info -->
<footer class="mt-12 text-center text-purple-200 dark:text-gray-400 border-t border-purple-500/50 dark:border-gray-600/50 pt-8">
<p class="text-sm mb-4">© 2023 AudioVerse. All rights reserved.</p>
<nav class="space-x-4">
<a href="#" class="hover:text-purple-100 dark:hover:text-white transition-colors duration-200 text-sm">About</a>
<a href="#" class="hover:text-purple-100 dark:hover:text-white transition-colors duration-200 text-sm">Contact</a>
<a href="#" class="hover:text-purple-100 dark:hover:text-white transition-colors duration-200 text-sm">Privacy</a>
</nav>
</footer>
</div>
</div>
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Custom Styles for 3D Transform Properties (Tailwind can't do arbitrary transforms directly) -->
<style>
.perspective-1000 {
perspective: 1000px;
}
.rotateX-0 {
transform: rotateX(0deg);
}
.rotateX-5 {
transform: rotateX(5deg);
}
/* Dark mode toggle - For demonstration only, typically handled by JS */
.dark-mode-toggle {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #6d28d9;
color: white;
padding: 10px 15px;
border-radius: 9999px;
cursor: pointer;
font-size: 0.875rem;
z-index: 1000;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
transition: background-color 0.2s ease-in-out;
}
.dark-mode-toggle.dark-mode {
background-color: #4b5563;
}
</style>
<script>
// This JavaScript is for dark mode toggle functionality demonstration only.
// In a real application, consider using localStorage and a more robust approach.
document.addEventListener('DOMContentLoaded', () => {
const toggleBtn = document.createElement('button');
toggleBtn.className = 'dark-mode-toggle';
toggleBtn.innerHTML = '<i class="fas fa-moon"></i> Dark Mode';
document.body.appendChild(toggleBtn);
function applyTheme(theme) {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
toggleBtn.innerHTML = '<i class="fas fa-sun"></i> Light Mode';
toggleBtn.classList.add('dark-mode');
} else {
document.documentElement.classList.remove('dark');
toggleBtn.innerHTML = '<i class="fas fa-moon"></i> Dark Mode';
toggleBtn.classList.remove('dark-mode');
}
}
// Check local storage for theme preference
const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
applyTheme(currentTheme);
toggleBtn.addEventListener('click', () => {
let theme = '';
if (document.documentElement.classList.contains('dark')) {
theme = 'light';
} else {
theme = 'dark';
}
localStorage.setItem('theme', theme);
applyTheme(theme);
});
});
</script>
</div>
