Spaces:
Running
Running
| <html lang="ang"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Groove Galaxy - Votre Univers Musical</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> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .music-card:hover .play-btn { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .wave-animation { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <div id="wave-bg" class="fixed top-0 left-0 w-full h-full z-0"></div> | |
| <!-- Navigation --> | |
| <nav class="relative z-10 bg-gray-900 bg-opacity-80 backdrop-blur-md"> | |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="music" class="text-purple-500"></i> | |
| <span class="text-xl font-bold bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-transparent">Groove Galaxy</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-purple-400 transition">Découvrir</a> | |
| <a href="#" class="hover:text-purple-400 transition">Genres</a> | |
| <a href="#" class="hover:text-purple-400 transition">Artistes</a> | |
| <a href="#" class="hover:text-purple-400 transition">Playlists</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-gray-700 transition"> | |
| <i data-feather="search"></i> | |
| </button> | |
| <button class="px-4 py-2 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full hover:opacity-90 transition"> | |
| Connexion | |
| </button> | |
| <button class="md:hidden p-2 rounded-full hover:bg-gray-700 transition"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative z-10 py-20 px-6"> | |
| <div class="container mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Explorez l'Univers <span class="bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-transparent">Musical</span></h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto">Découvrez des millions de titres, créez vos playlists et partagez vos émotions musicales.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="px-8 py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full text-lg font-semibold hover:opacity-90 transition transform hover:scale-105"> | |
| Commencer l'essai gratuit | |
| </button> | |
| <button class="px-8 py-3 border-2 border-purple-500 rounded-full text-lg font-semibold hover:bg-purple-500 hover:bg-opacity-10 transition transform hover:scale-105"> | |
| Voir les offres | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trending Now --> | |
| <section class="relative z-10 py-16 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="flex justify-between items-center mb-10"> | |
| <h2 class="text-2xl md:text-3xl font-bold">Tendances du moment</h2> | |
| <a href="#" class="flex items-center text-purple-400 hover:text-purple-300 transition"> | |
| Voir tout <i data-feather="chevron-right" class="ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> | |
| <!-- Music Card 1 --> | |
| <div class="music-card group relative rounded-xl overflow-hidden bg-gray-800 bg-opacity-50 backdrop-blur-sm transition hover:bg-opacity-70"> | |
| <div class="relative pt-[100%]"> | |
| <img src="http://static.photos/music/640x360/1" alt="Album Cover" class="absolute top-0 left-0 w-full h-full object-cover"> | |
| <button class="play-btn absolute bottom-4 right-4 w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all"> | |
| <i data-feather="play" class="ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold truncate">Nuits d'été</h3> | |
| <p class="text-gray-400 text-sm truncate">Clara Luna</p> | |
| </div> | |
| </div> | |
| <!-- Music Card 2 --> | |
| <div class="music-card group relative rounded-xl overflow-hidden bg-gray-800 bg-opacity-50 backdrop-blur-sm transition hover:bg-opacity-70"> | |
| <div class="relative pt-[100%]"> | |
| <img src="http://static.photos/music/640x360/2" alt="Album Cover" class="absolute top-0 left-0 w-full h-full object-cover"> | |
| <button class="play-btn absolute bottom-4 right-4 w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all"> | |
| <i data-feather="play" class="ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold truncate">Electric Dreams</h3> | |
| <p class="text-gray-400 text-sm truncate">Neon Wave</p> | |
| </div> | |
| </div> | |
| <!-- Music Card 3 --> | |
| <div class="music-card group relative rounded-xl overflow-hidden bg-gray-800 bg-opacity-50 backdrop-blur-sm transition hover:bg-opacity-70"> | |
| <div class="relative pt-[100%]"> | |
| <img src="http://static.photos/music/640x360/3" alt="Album Cover" class="absolute top-0 left-0 w-full h-full object-cover"> | |
| <button class="play-btn absolute bottom-4 right-4 w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all"> | |
| <i data-feather="play" class="ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold truncate">Soulful Journey</h3> | |
| <p class="text-gray-400 text-sm truncate">Marcus King</p> | |
| </div> | |
| </div> | |
| <!-- Music Card 4 --> | |
| <div class="music-card group relative rounded-xl overflow-hidden bg-gray-800 bg-opacity-50 backdrop-blur-sm transition hover:bg-opacity-70"> | |
| <div class="relative pt-[100%]"> | |
| <img src="http://static.photos/music/640x360/4" alt="Album Cover" class="absolute top-0 left-0 w-full h-full object-cover"> | |
| <button class="play-btn absolute bottom-4 right-4 w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all"> | |
| <i data-feather="play" class="ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold truncate">Midnight Drive</h3> | |
| <p class="text-gray-400 text-sm truncate">The Nightriders</p> | |
| </div> | |
| </div> | |
| <!-- Music Card 5 --> | |
| <div class="music-card group relative rounded-xl overflow-hidden bg-gray-800 bg-opacity-50 backdrop-blur-sm transition hover:bg-opacity-70"> | |
| <div class="relative pt-[100%]"> | |
| <img src="http://static.photos/music/640x360/5" alt="Album Cover" class="absolute top-0 left-0 w-full h-full object-cover"> | |
| <button class="play-btn absolute bottom-4 right-4 w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all"> | |
| <i data-feather="play" class="ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold truncate">Urban Echoes</h3> | |
| <p class="text-gray-400 text-sm truncate">Lena & The City</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Genres Section --> | |
| <section class="relative z-10 py-16 px-6"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-10">Parcourir les genres</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6"> | |
| <!-- Genre 1 --> | |
| <div class="genre-card relative rounded-xl overflow-hidden h-40 group"> | |
| <img src="http://static.photos/music/640x360/6" alt="Pop" class="w-full h-full object-cover brightness-75 group-hover:brightness-50 transition"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <h3 class="text-xl font-bold text-center">Pop</h3> | |
| </div> | |
| </div> | |
| <!-- Genre 2 --> | |
| <div class="genre-card relative rounded-xl overflow-hidden h-40 group"> | |
| <img src="http://static.photos/music/640x360/7" alt="Rock" class="w-full h-full object-cover brightness-75 group-hover:brightness-50 transition"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <h3 class="text-xl font-bold text-center">Rock</h3> | |
| </div> | |
| </div> | |
| <!-- Genre 3 --> | |
| <div class="genre-card relative rounded-xl overflow-hidden h-40 group"> | |
| <img src="http://static.photos/music/640x360/8" alt="Hip-Hop" class="w-full h-full object-cover brightness-75 group-hover:brightness-50 transition"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <h3 class="text-xl font-bold text-center">Hip-Hop</h3> | |
| </div> | |
| </div> | |
| <!-- Genre 4 --> | |
| <div class="genre-card relative rounded-xl overflow-hidden h-40 group"> | |
| <img src="http://static.photos/music/640x360/9" alt="Electro" class="w-full h-full object-cover brightness-75 group-hover:brightness-50 transition"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <h3 class="text-xl font-bold text-center">Electro</h3> | |
| </div> | |
| </div> | |
| <!-- Genre 5 --> | |
| <div class="genre-card relative rounded-xl overflow-hidden h-40 group"> | |
| <img src="http://static.photos/music/640x360/10" alt="Jazz" class="w-full h-full object-cover brightness-75 group-hover:brightness-50 transition"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <h3 class="text-xl font-bold text-center">Jazz</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Artists --> | |
| <section class="relative z-10 py-16 px-6"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-10">Artistes à découvrir</h2> | |
| <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-6"> | |
| <!-- Artist 1 --> | |
| <div class="text-center"> | |
| <div class="w-full aspect-square rounded-full overflow-hidden mb-3 mx-auto border-2 border-purple-500 p-1"> | |
| <img src="http://static.photos/people/640x360/11" alt="Artist" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <h3 class="font-semibold">Clara Luna</h3> | |
| <p class="text-gray-400 text-sm">Pop</p> | |
| </div> | |
| <!-- Artist 2 --> | |
| <div class="text-center"> | |
| <div class="w-full aspect-square rounded-full overflow-hidden mb-3 mx-auto border-2 border-purple-500 p-1"> | |
| <img src="http://static.photos/people/640x360/12" alt="Artist" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <h3 class="font-semibold">Neon Wave</h3> | |
| <p class="text-gray-400 text-sm">Electro</p> | |
| </div> | |
| <!-- Artist 3 --> | |
| <div class="text-center"> | |
| <div class="w-full aspect-square rounded-full overflow-hidden mb-3 mx-auto border-2 border-purple-500 p-1"> | |
| <img src="http://static.photos/people/640x360/13" alt="Artist" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <h3 class="font-semibold">Marcus King</h3> | |
| <p class="text-gray-400 text-sm">Soul</p> | |
| </div> | |
| <!-- Artist 4 --> | |
| <div class="text-center"> | |
| <div class="w-full aspect-square rounded-full overflow-hidden mb-3 mx-auto border-2 border-purple-500 p-1"> | |
| <img src="http://static.photos/people/640x360/14" alt="Artist" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <h3 class="font-semibold">The Nightriders</h3> | |
| <p class="text-gray-400 text-sm">Rock</p> | |
| </div> | |
| <!-- Artist 5 --> | |
| <div class="text-center"> | |
| <div class="w-full aspect-square rounded-full overflow-hidden mb-3 mx-auto border-2 border-purple-500 p-1"> | |
| <img src="http://static.photos/people/640x360/15" alt="Artist" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <h3 class="font-semibold">Lena & The City</h3> | |
| <p class="text-gray-400 text-sm">Hip-Hop</p> | |
| </div> | |
| <!-- Artist 6 --> | |
| <div class="text-center"> | |
| <div class="w-full aspect-square rounded-full overflow-hidden mb-3 mx-auto border-2 border-purple-500 p-1"> | |
| <img src="http://static.photos/people/640x360/16" alt="Artist" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <h3 class="font-semibold">DJ Krystal</h3> | |
| <p class="text-gray-400 text-sm">House</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- App Download --> | |
| <section class="relative z-10 py-20 px-6 bg-gray-800 bg-opacity-50 backdrop-blur-lg"> | |
| <div class="container mx-auto flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Téléchargez notre application</h2> | |
| <p class="text-xl text-gray-300 mb-8">Emportez votre musique partout avec vous. Disponible sur iOS et Android.</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <button class="flex items-center justify-center px-6 py-3 bg-black rounded-lg hover:bg-gray-900 transition"> | |
| <i data-feather="apple" class="mr-3"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Télécharger sur</div> | |
| <div class="font-semibold">App Store</div> | |
| </div> | |
| </button> | |
| <button class="flex items-center justify-center px-6 py-3 bg-black rounded-lg hover:bg-gray-900 transition"> | |
| <i data-feather="play" class="mr-3"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Disponible sur</div> | |
| <div class="font-semibold">Google Play</div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="http://static.photos/technology/640x360/17" alt="App Screenshot" class="max-w-md w-full rounded-xl shadow-2xl"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="relative z-10 bg-gray-900 bg-opacity-90 backdrop-blur-md py-12 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i data-feather="music" class="text-purple-500"></i> | |
| <span class="text-xl font-bold">Groove Galaxy</span> | |
| </div> | |
| <p class="text-gray-400 mb-4">Votre univers musical infini.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition"><i data-feather="facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition"><i data-feather="instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition"><i data-feather="youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Entreprise</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">À propos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Emplois</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">For the Record</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Communautés</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Pour les artistes</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Développeurs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Publicité</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Investisseurs</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Liens utiles</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Assistance</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Lecteur web</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">App mobile gratuite</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex space-x-6 mb-4 md:mb-0"> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-sm">Légal</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-sm">Centre de confidentialité</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-sm">Protection des données</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-sm">Paramètres des cookies</a> | |
| </div> | |
| <div class="text-gray-400 text-sm"> | |
| © 2023 Groove Galaxy | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Player Bar --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-gray-800 bg-opacity-90 backdrop-blur-md border-t border-gray-700 z-20"> | |
| <div class="container mx-auto px-4 py-3 flex items-center"> | |
| <!-- Song Info --> | |
| <div class="flex items-center w-1/4"> | |
| <img src="http://static.photos/music/200x200/18" alt="Now Playing" class="w-12 h-12 rounded-md mr-3"> | |
| <div> | |
| <div class="font-medium text-sm">Nuits d'été</div> | |
| <div class="text-gray-400 text-xs">Clara Luna</div> | |
| </div> | |
| <button class="ml-4 text-gray-400 hover:text-white transition"> | |
| <i data-feather="heart"></i> | |
| </button> | |
| </div> | |
| <!-- Player Controls --> | |
| <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 transition"> | |
| <i data-feather="shuffle"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="skip-back"></i> | |
| </button> | |
| <button class="bg-white text-black rounded-full p-2 hover:scale-105 transition"> | |
| <i data-feather="play"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="skip-forward"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="repeat"></i> | |
| </button> | |
| </div> | |
| <div class="w-full flex items-center"> | |
| <span class="text-xs text-gray-400 mr-2">1:23</span> | |
| <div class="flex-1 bg-gray-600 rounded-full h-1"> | |
| <div class="bg-purple-500 h-1 rounded-full w-1/3"></div> | |
| </div> | |
| <span class="text-xs text-gray-400 ml-2">3:45</span> | |
| </div> | |
| </div> | |
| <!-- Volume & Options --> | |
| <div class="flex items-center justify-end w-1/4 space-x-4"> | |
| <button class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="list"></i> | |
| </button> | |
| <div class="flex items-center"> | |
| <i data-feather="volume" class="text-gray-400 mr-2"></i> | |
| <div class="w-20 bg-gray-600 rounded-full h-1"> | |
| <div class="bg-gray-400 h-1 rounded-full w-3/4"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js waves background | |
| VANTA.WAVES({ | |
| el: "#wave-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x4f46e5, | |
| waveSpeed: 0.50, | |
| zoom: 0.65 | |
| }); | |
| </script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |