Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BeatVault Legacy | DJ Sets Archive</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#fdf4ff', | |
| 100: '#fae8ff', | |
| 200: '#f5d0fe', | |
| 300: '#f0abfc', | |
| 400: '#e879f9', | |
| 500: '#d946ef', | |
| 600: '#c026d3', | |
| 700: '#a21caf', | |
| 800: '#86198f', | |
| 900: '#701a75', | |
| } | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'slide-up': 'slideUp 0.5s ease-out', | |
| 'gradient': 'gradient 8s ease infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0px)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| slideUp: { | |
| '0%': { transform: 'translateY(10px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' }, | |
| }, | |
| gradient: { | |
| '0%, 100%': { backgroundPosition: '0% 50%' }, | |
| '50%': { backgroundPosition: '100% 50%' }, | |
| }, | |
| }, | |
| backgroundImage: { | |
| 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="text-gray-100 min-h-screen font-sans overflow-x-hidden"> | |
| <div class="psychedelic-bg" id="psychedelic-bg"></div> | |
| <!-- Navigation Component --> | |
| <script src="components/navigation.js"></script> | |
| <custom-navigation></custom-navigation> | |
| <main class="container mx-auto px-4 py-8 max-w-7xl"> | |
| <!-- Hero Header --> | |
| <header class="text-center mb-12 animate-slide-up"> | |
| <div class="inline-block p-1 rounded-full bg-gradient-to-r from-primary-500/20 via-secondary-500/20 to-primary-500/20 mb-6"> | |
| <div class="bg-black/80 backdrop-blur-sm rounded-full px-6 py-3"> | |
| <h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-primary-400 via-white to-secondary-400 bg-clip-text text-transparent"> | |
| BeatVault Legacy | |
| </h1> | |
| </div> | |
| </div> | |
| <p class="text-lg text-gray-300 max-w-2xl mx-auto mb-8"> | |
| A curated archive of transcendent fLau & blauschig DJ sets. Dive into sonic journeys that defined nights of pure musical euphoria. | |
| </p> | |
| <a href="main.html" class="inline-flex items-center gap-2 bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white font-medium px-4 py-2 rounded-full transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-primary-500/30 text-sm"> | |
| <i data-feather="home" class="w-4 h-4"></i> | |
| Return to Main Hub | |
| </a> | |
| </header> | |
| <!-- Main Player & Content Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column - Now Playing & Player --> | |
| <div class="lg:col-span-2 space-y-8"> | |
| <!-- Now Playing Card --> | |
| <section class="glossy-card rounded-3xl p-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold flex items-center gap-3"> | |
| <i data-feather="play-circle" class="text-primary-400"></i> | |
| <span class="bg-gradient-to-r from-primary-300 to-primary-400 bg-clip-text text-transparent">Now Playing</span> | |
| </h2> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-primary-500 animate-pulse"></div> | |
| <span class="text-sm font-medium text-primary-300">LIVE</span> | |
| </div> | |
| </div> | |
| <!-- Track Info --> | |
| <div class="flex flex-col md:flex-row items-center gap-4 mb-6"> | |
| <div class="relative group"> | |
| <div class="w-32 h-32 rounded-xl overflow-hidden shadow-2xl"> | |
| <img src="http://static.photos/abstract/640x360/7" alt="Album Art" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-primary-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div> | |
| </div> | |
| <div class="flex-1 text-center md:text-left"> | |
| <h3 class="text-2xl font-bold mb-2">Neon Dreamscape</h3> | |
| <p class="text-gray-400 mb-3 text-sm">fLau & blauschig • Summer Solstice '23</p> | |
| <div class="flex flex-wrap gap-1.5 justify-center md:justify-start"> | |
| <span class="px-2 py-1 bg-primary-900/40 text-primary-300 rounded-full text-xs">Deep House</span> | |
| <span class="px-2 py-1 bg-secondary-900/40 text-secondary-300 rounded-full text-xs">Melodic</span> | |
| <span class="px-2 py-1 bg-gray-800 text-gray-300 rounded-full text-xs">128 BPM</span> | |
| </div> | |
| <div class="mt-4 text-2xl font-mono font-bold bg-gradient-to-r from-primary-400 to-secondary-400 bg-clip-text text-transparent"> | |
| 00:00 / 67:42 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Controls --> | |
| <div class="space-y-6"> | |
| <!-- Progress Bar --> | |
| <div class="space-y-2"> | |
| <div class="h-2 bg-gray-800 rounded-full overflow-hidden"> | |
| <div class="h-full w-1/3 bg-gradient-to-r from-primary-500 to-primary-600 rounded-full relative"> | |
| <div class="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow-lg"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>0:00</span> | |
| <span>67:42</span> | |
| </div> | |
| </div> | |
| <!-- Control Buttons --> | |
| <div class="flex items-center justify-center gap-4"> | |
| <button class="control-btn text-gray-400 hover:text-secondary-400"> | |
| <i data-feather="shuffle"></i> | |
| </button> | |
| <button class="control-btn text-gray-400 hover:text-primary-400"> | |
| <i data-feather="skip-back"></i> | |
| </button> | |
| <button class="control-btn bg-gradient-to-r from-primary-600 to-primary-700 text-white p-3 rounded-full hover:shadow-2xl hover:shadow-primary-500/50 hover:scale-105 transition-all duration-300 shadow-lg"> | |
| <i data-feather="play" class="w-5 h-5"></i> | |
| </button> | |
| <button class="control-btn text-gray-400 hover:text-primary-400"> | |
| <i data-feather="skip-forward"></i> | |
| </button> | |
| <button class="control-btn text-gray-400 hover:text-secondary-400"> | |
| <i data-feather="repeat"></i> | |
| </button> | |
| </div> | |
| <!-- Volume & Settings --> | |
| <div class="flex items-center justify-between pt-4 border-t border-gray-700/50"> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="volume-2" class="text-primary-400 w-4 h-4"></i> | |
| <div class="w-24 h-2 bg-gray-800 rounded-full overflow-hidden"> | |
| <div class="h-full w-3/4 bg-gradient-to-r from-primary-400 to-primary-600 rounded-full"></div> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button class="player-control-btn text-gray-400 hover:text-primary-400"> | |
| <i data-feather="heart" class="w-4 h-4"></i> | |
| </button> | |
| <button class="player-control-btn text-gray-400 hover:text-primary-400"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| </button> | |
| <button class="player-control-btn text-gray-400 hover:text-primary-400"> | |
| <i data-feather="share-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Right Column - Sets Archive --> | |
| <div class="space-y-8"> | |
| <!-- Archive Header --> | |
| <section class="glossy-card rounded-3xl p-8"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center gap-3"> | |
| <i data-feather="music" class="text-primary-400"></i> | |
| <span class="bg-gradient-to-r from-primary-300 to-primary-400 bg-clip-text text-transparent">The Vault</span> | |
| </h2> | |
| <p class="text-gray-400 mb-6"> | |
| Select a sonic journey from the archive below. Each set is a timestamped memory of pure vibration. | |
| </p> | |
| <!-- Search & Filter --> | |
| <div class="space-y-4"> | |
| <div class="relative"> | |
| <i data-feather="search" class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500"></i> | |
| <input type="text" placeholder="Search sets..." class="w-full pl-12 pr-4 py-3 bg-gray-900/50 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-transparent"> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="filter-btn active">All</button> | |
| <button class="filter-btn">2023</button> | |
| <button class="filter-btn">2022</button> | |
| <button class="filter-btn">Live</button> | |
| <button class="filter-btn">Special</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sets List Container --> | |
| <section class="glossy-card rounded-3xl p-6"> | |
| <div id="sets-container" class="space-y-4"> | |
| <!-- Sets will be loaded here by JavaScript --> | |
| <div class="text-center py-12"> | |
| <div class="inline-block p-4 rounded-2xl bg-gradient-to-r from-primary-900/20 to-secondary-900/20"> | |
| <i data-feather="loader" class="w-8 h-8 text-primary-400 animate-spin"></i> | |
| </div> | |
| <p class="text-gray-400 mt-4">Loading sonic archives...</p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer Component --> | |
| <script src="components/footer.js"></script> | |
| <custom-footer></custom-footer> | |
| <!-- Scripts --> | |
| <script src="components/navigation.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Initialize theme | |
| document.documentElement.classList.add('dark'); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |