Spaces:
Running
Running
Make everything actually work make different pages forward login of the movie player everything makes it actually work Make a dashboard where I can upload my own songs to the website
92e28a6 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Groovy Tunes Explorer | Discover Music</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #121212; | |
| color: #ffffff; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1DB954 0%, #191414 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .play-button { | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover .play-button { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-black bg-opacity-80 backdrop-blur-md fixed w-full z-10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="music" class="text-green-500 h-6 w-6"></i> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="index.html" class="text-white px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="browse.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Browse</a> | |
| <a href="dashboard.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Your Library</a> | |
| <a href="search.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Search</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <a href="login.html" class="bg-green-500 hover:bg-green-600 text-white px-4 py-1 rounded-full text-sm font-medium flex items-center"> | |
| <i data-feather="user" class="mr-2 h-4 w-4"></i> Sign In | |
| </a> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg pt-32 pb-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Discover Your Next Favorite Song</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Millions of tracks at your fingertips. Find what moves you.</p> | |
| <div class="max-w-md mx-auto relative"> | |
| <input type="text" placeholder="Search for artists, songs, or albums" class="w-full px-6 py-3 rounded-full bg-black bg-opacity-40 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-green-500 hover:bg-green-600 p-2 rounded-full"> | |
| <i data-feather="search" class="h-5 w-5 text-white"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Playlists --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <h2 class="text-2xl font-bold mb-6">Featured Playlists</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6"> | |
| <!-- Playlist Card 1 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 card-hover group"> | |
| <div class="relative"> | |
| <img src="http://static.photos/music/320x320/1" alt="Playlist cover" class="w-full aspect-square object-cover"> | |
| <button class="play-button absolute bottom-2 right-2 bg-green-500 rounded-full p-3 group-hover:opacity-100"> | |
| <i data-feather="play" class="h-5 w-5 text-white"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-white truncate">Today's Top Hits</h3> | |
| <p class="text-gray-400 text-sm mt-1">The most popular songs right now</p> | |
| </div> | |
| </div> | |
| <!-- Playlist Card 2 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 card-hover group"> | |
| <div class="relative"> | |
| <img src="http://static.photos/music/320x320/2" alt="Playlist cover" class="w-full aspect-square object-cover"> | |
| <button class="play-button absolute bottom-2 right-2 bg-green-500 rounded-full p-3 group-hover:opacity-100"> | |
| <i data-feather="play" class="h-5 w-5 text-white"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-white truncate">Chill Vibes</h3> | |
| <p class="text-gray-400 text-sm mt-1">Relaxing beats for your day</p> | |
| </div> | |
| </div> | |
| <!-- Playlist Card 3 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 card-hover group"> | |
| <div class="relative"> | |
| <img src="http://static.photos/music/320x320/3" alt="Playlist cover" class="w-full aspect-square object-cover"> | |
| <button class="play-button absolute bottom-2 right-2 bg-green-500 rounded-full p-3 group-hover:opacity-100"> | |
| <i data-feather="play" class="h-5 w-5 text-white"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-white truncate">Workout Mix</h3> | |
| <p class="text-gray-400 text-sm mt-1">High energy tracks to keep you going</p> | |
| </div> | |
| </div> | |
| <!-- Playlist Card 4 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 card-hover group"> | |
| <div class="relative"> | |
| <img src="http://static.photos/music/320x320/4" alt="Playlist cover" class="w-full aspect-square object-cover"> | |
| <button class="play-button absolute bottom-2 right-2 bg-green-500 rounded-full p-3 group-hover:opacity-100"> | |
| <i data-feather="play" class="h-5 w-5 text-white"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-white truncate">Indie Discoveries</h3> | |
| <p class="text-gray-400 text-sm mt-1">Fresh indie tracks you need to hear</p> | |
| </div> | |
| </div> | |
| <!-- Playlist Card 5 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 card-hover group"> | |
| <div class="relative"> | |
| <img src="http://static.photos/music/320x320/5" alt="Playlist cover" class="w-full aspect-square object-cover"> | |
| <button class="play-button absolute bottom-2 right-2 bg-green-500 rounded-full p-3 group-hover:opacity-100"> | |
| <i data-feather="play" class="h-5 w-5 text-white"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-white truncate">Throwback Hits</h3> | |
| <p class="text-gray-400 text-sm mt-1">The best from the past decades</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recently Played --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <h2 class="text-2xl font-bold mb-6">Recently Played</h2> | |
| <div class="bg-gray-800 bg-opacity-60 rounded-xl p-6"> | |
| <div class="space-y-4"> | |
| <!-- Track 1 --> | |
| <div class="flex items-center justify-between p-3 hover:bg-gray-700 rounded-lg transition-colors duration-200"> | |
| <div class="flex items-center"> | |
| <div class="relative w-12 h-12 mr-4"> | |
| <img src="http://static.photos/music/120x120/10" alt="Track cover" class="rounded-md w-full h-full object-cover"> | |
| <button class="play-button absolute inset-0 m-auto bg-green-500 bg-opacity-80 rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i data-feather="play" class="h-4 w-4 text-white"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-white">Blinding Lights</h3> | |
| <p class="text-sm text-gray-400">The Weeknd</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-gray-400 text-sm">3:20</span> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="more-vertical" class="h-5 w-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Track 2 --> | |
| <div class="flex items-center justify-between p-3 hover:bg-gray-700 rounded-lg transition-colors duration-200"> | |
| <div class="flex items-center"> | |
| <div class="relative w-12 h-12 mr-4"> | |
| <img src="http://static.photos/music/120x120/11" alt="Track cover" class="rounded-md w-full h-full object-cover"> | |
| <button class="play-button absolute inset-0 m-auto bg-green-500 bg-opacity-80 rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i data-feather="play" class="h-4 w-4 text-white"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-white">Levitating</h3> | |
| <p class="text-sm text-gray-400">Dua Lipa</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-gray-400 text-sm">3:45</span> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="more-vertical" class="h-5 w-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Track 3 --> | |
| <div class="flex items-center justify-between p-3 hover:bg-gray-700 rounded-lg transition-colors duration-200"> | |
| <div class="flex items-center"> | |
| <div class="relative w-12 h-12 mr-4"> | |
| <img src="http://static.photos/music/120x120/12" alt="Track cover" class="rounded-md w-full h-full object-cover"> | |
| <button class="play-button absolute inset-0 m-auto bg-green-500 bg-opacity-80 rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i data-feather="play" class="h-4 w-4 text-white"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-white">Stay</h3> | |
| <p class="text-sm text-gray-400">The Kid LAROI, Justin Bieber</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-gray-400 text-sm">2:21</span> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="more-vertical" class="h-5 w-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Bar --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-800 h-20 flex items-center px-4"> | |
| <div class="max-w-7xl mx-auto w-full flex items-center justify-between"> | |
| <div class="flex items-center w-1/4"> | |
| <img src="http://static.photos/music/60x60/15" alt="Now playing" class="w-14 h-14 rounded-md mr-4"> | |
| <div> | |
| <h4 class="text-sm font-medium text-white">Watermelon Sugar</h4> | |
| <p class="text-xs text-gray-400">Harry Styles</p> | |
| </div> | |
| <button class="ml-6 text-gray-400 hover:text-white"> | |
| <i data-feather="heart" class="h-5 w-5"></i> | |
| </button> | |
| </div> | |
| <div class="flex flex-col items-center w-2/4"> | |
| <div class="flex items-center space-x-4 mb-2"> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="shuffle" class="h-5 w-5"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="skip-back" class="h-5 w-5"></i> | |
| </button> | |
| <button class="bg-white rounded-full p-2 hover:scale-105 transition-transform"> | |
| <i data-feather="play" class="h-5 w-5 text-black"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="skip-forward" class="h-5 w-5"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="repeat" class="h-5 w-5"></i> | |
| </button> | |
| </div> | |
| <div class="w-full flex items-center space-x-2"> | |
| <span class="text-xs text-gray-400">1:23</span> | |
| <div class="h-1 w-full bg-gray-700 rounded-full overflow-hidden"> | |
| <div class="h-full bg-green-500 w-1/3 rounded-full"></div> | |
| </div> | |
| <span class="text-xs text-gray-400">3:45</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-end w-1/4"> | |
| <button class="text-gray-400 hover:text-white mr-4"> | |
| <i data-feather="mic" class="h-5 w-5"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white mr-4"> | |
| <i data-feather="list" class="h-5 w-5"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="volume-2" class="h-5 w-5"></i> | |
| </button> | |
| <div class="w-20 ml-2"> | |
| <div class="h-1 bg-gray-700 rounded-full overflow-hidden"> | |
| <div class="h-full bg-green-500 w-3/4 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/howler@2.2.3/dist/howler.min.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Initialize audio player | |
| let currentTrack = null; | |
| // Play track function | |
| function playTrack(trackUrl) { | |
| if (currentTrack) { | |
| currentTrack.stop(); | |
| } | |
| currentTrack = new Howl({ | |
| src: [trackUrl], | |
| html5: true, | |
| onplay: function() { | |
| console.log('Track started playing'); | |
| }, | |
| onend: function() { | |
| console.log('Track finished playing'); | |
| } | |
| }); | |
| currentTrack.play(); | |
| } | |
| // Add click handlers to all play buttons | |
| document.addEventListener('DOMContentLoaded', function() { | |
| document.querySelectorAll('.play-button').forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| // In a real app, you would get the actual track URL | |
| const demoUrl = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'; | |
| playTrack(demoUrl); | |
| }); | |
| }); | |
| }); | |
| // Hero section animation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const hero = document.querySelector('h1'); | |
| hero.style.opacity = '0'; | |
| hero.style.transform = 'translateY(20px)'; | |
| setTimeout(() => { | |
| hero.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; | |
| hero.style.opacity = '1'; | |
| hero.style.transform = 'translateY(0)'; | |
| }, 100); | |
| // Play button hover effects | |
| const cards = document.querySelectorAll('.card-hover'); | |
| cards.forEach(card => { | |
| const playButton = card.querySelector('.play-button'); | |
| card.addEventListener('mouseenter', () => { | |
| playButton.style.transform = 'scale(1.1)'; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| playButton.style.transform = 'scale(1)'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |