Download index.html from hazael00/melodify2: direct link, hf CLI and curl.
- Browser
- Download file 53.4 kB
-
https://huggingface.co/spaces/hazael00/melodify2/resolve/main/index.html
- Command line
-
hf download hf://spaces/hazael00/melodify2/index.html
-
curl -L -o index.html https://huggingface.co/spaces/hazael00/melodify2/resolve/main/index.html
53.4 kB
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Melodify - Marketplace Musical</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| melodify: { | |
| pink: '#ff5c5c', | |
| darkpink: '#ff2d90', | |
| } | |
| }, | |
| backgroundImage: { | |
| 'gradient-melodify': 'linear-gradient(45deg, #ff5c5c, #ff2d90)', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .video-background { | |
| position: relative; | |
| width: 100%; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .video-background iframe { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 100vw; | |
| height: 100vh; | |
| transform: translate(-50%, -50%); | |
| pointer-events: none; | |
| } | |
| @media (min-aspect-ratio: 16/9) { | |
| .video-background iframe { | |
| height: 56.25vw; | |
| } | |
| } | |
| @media (max-aspect-ratio: 16/9) { | |
| .video-background iframe { | |
| width: 177.78vh; | |
| } | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(255, 45, 144, 0.3); | |
| } | |
| .chip-hover:hover { | |
| background: linear-gradient(45deg, #ff5c5c, #ff2d90); | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white font-sans"> | |
| <!-- Navbar --> | |
| <nav class="fixed w-full bg-black bg-opacity-90 z-50 border-b border-gray-800"> | |
| <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"> | |
| <span class="text-2xl font-bold bg-gradient-to-r from-melodify-pink to-melodify-darkpink bg-clip-text text-transparent">MELODIFY</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#home" class="px-3 py-2 rounded-md text-sm font-medium hover:text-melodify-pink transition">Home</a> | |
| <a href="#canciones" class="px-3 py-2 rounded-md text-sm font-medium hover:text-melodify-pink transition">Canciones</a> | |
| <a href="#autores" class="px-3 py-2 rounded-md text-sm font-medium hover:text-melodify-pink transition">Autores</a> | |
| <a href="#generos" class="px-3 py-2 rounded-md text-sm font-medium hover:text-melodify-pink transition">Géneros</a> | |
| <a href="#planes" class="px-3 py-2 rounded-md text-sm font-medium hover:text-melodify-pink transition">Planes</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <span class="sr-only">Search</span> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="ml-3 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <span class="sr-only">Notifications</span> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="ml-3 px-4 py-2 rounded-full bg-gradient-to-r from-melodify-pink to-melodify-darkpink text-white text-sm font-medium hover:opacity-90 transition"> | |
| Iniciar sesión | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium hover:text-melodify-pink">Home</a> | |
| <a href="#canciones" class="block px-3 py-2 rounded-md text-base font-medium hover:text-melodify-pink">Canciones</a> | |
| <a href="#autores" class="block px-3 py-2 rounded-md text-base font-medium hover:text-melodify-pink">Autores</a> | |
| <a href="#generos" class="block px-3 py-2 rounded-md text-base font-medium hover:text-melodify-pink">Géneros</a> | |
| <a href="#planes" class="block px-3 py-2 rounded-md text-base font-medium hover:text-melodify-pink">Planes</a> | |
| </div> | |
| <div class="pt-4 pb-3 border-t border-gray-700"> | |
| <div class="flex items-center px-5"> | |
| <button class="flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white"> | |
| <span class="sr-only">Search</span> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="ml-4 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white"> | |
| <span class="sr-only">Notifications</span> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="ml-auto px-4 py-2 rounded-full bg-gradient-to-r from-melodify-pink to-melodify-darkpink text-white text-sm font-medium"> | |
| Iniciar sesión | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="video-background"> | |
| <iframe src="https://www.youtube.com/embed/K3fFFiA5kfs?autoplay=1&mute=1&loop=1&controls=0&playlist=K3fFFiA5kfs" frameborder="0" allowfullscreen></iframe> | |
| <div class="absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center"> | |
| <div class="text-center px-4 max-w-4xl"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-melodify-pink to-melodify-darkpink bg-clip-text text-transparent"> | |
| Descubre, crea y comparte música sin límites | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 text-gray-300"> | |
| El marketplace definitivo para artistas y amantes de la música. Licencias, colaboraciones y herramientas todo en un solo lugar. | |
| </p> | |
| <a href="#canciones" class="px-8 py-4 rounded-full bg-gradient-to-r from-melodify-pink to-melodify-darkpink text-white text-lg font-bold hover:shadow-lg hover:shadow-pink-500/30 transition-all duration-300"> | |
| Explorar canciones | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Canciones Destacadas --> | |
| <section id="canciones" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Canciones destacadas</h2> | |
| <p class="text-lg text-gray-400 max-w-2xl mx-auto"> | |
| Las canciones más populares esta semana en nuestra plataforma | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Canción 1 --> | |
| <a href="cancion.html?id=1" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://source.unsplash.com/random/300x300/?music,1" alt="Canción 1" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-3 left-3"> | |
| <span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Pop</span> | |
| </div> | |
| <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <i class="fas fa-play text-white"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-1">Midnight Dreams</h3> | |
| <p class="text-gray-400 text-sm">Aria Vega</p> | |
| </a> | |
| <!-- Canción 2 --> | |
| <a href="cancion.html?id=2" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://source.unsplash.com/random/300x300/?music,2" alt="Canción 2" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-3 left-3"> | |
| <span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Trap</span> | |
| </div> | |
| <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <i class="fas fa-play text-white"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-1">Urban Legends</h3> | |
| <p class="text-gray-400 text-sm">DJ Kronos</p> | |
| </a> | |
| <!-- Canción 3 --> | |
| <a href="cancion.html?id=3" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://source.unsplash.com/random/300x300/?music,3" alt="Canción 3" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-3 left-3"> | |
| <span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Jazz</span> | |
| </div> | |
| <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <i class="fas fa-play text-white"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-1">Smooth Whisper</h3> | |
| <p class="text-gray-400 text-sm">The Jazz Collective</p> | |
| </a> | |
| <!-- Canción 4 --> | |
| <a href="cancion.html?id=4" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://source.unsplash.com/random/300x300/?music,4" alt="Canción 4" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-3 left-3"> | |
| <span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Balada</span> | |
| </div> | |
| <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <i class="fas fa-play text-white"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-1">Eternal Love</h3> | |
| <p class="text-gray-400 text-sm">Sophia Reyes</p> | |
| </a> | |
| <!-- Canción 5 --> | |
| <a href="cancion.html?id=5" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://source.unsplash.com/random/300x300/?music,5" alt="Canción 5" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-3 left-3"> | |
| <span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Cumbia</span> | |
| </div> | |
| <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <i class="fas fa-play text-white"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-1">Fiesta Tropical</h3> | |
| <p class="text-gray-400 text-sm">Los Ritmos</p> | |
| </a> | |
| <!-- Canción 6 --> | |
| <a href="cancion.html?id=6" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://source.unsplash.com/random/300x300/?music,6" alt="Canción 6" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-3 left-3"> | |
| <span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Regional</span> | |
| </div> | |
| <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <i class="fas fa-play text-white"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-1">Raíces</h3> | |
| <p class="text-gray-400 text-sm">El Norteño</p> | |
| </a> | |
| <!-- Canción 7 --> | |
| <a href="cancion.html?id=7" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://source.unsplash.com/random/300x300/?music,7" alt="Canción 7" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-3 left-3"> | |
| <span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Pop</span> | |
| </div> | |
| <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <i class="fas fa-play text-white"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-1">Electric Love</h3> | |
| <p class="text-gray-400 text-sm">Stella Nova</p> | |
| </a> | |
| <!-- Canción 8 --> | |
| <a href="cancion.html?id=8" class="bg-gray-900 rounded-xl p-4 transition-all duration-300 card-hover group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://source.unsplash.com/random/300x300/?music,8" alt="Canción 8" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-3 left-3"> | |
| <span class="bg-melodify-pink text-white text-xs px-2 py-1 rounded">Trap</span> | |
| </div> | |
| <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-melodify-pink rounded-full w-12 h-12 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <i class="fas fa-play text-white"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-1">Dark Alley</h3> | |
| <p class="text-gray-400 text-sm">Shadow Beats</p> | |
| </a> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block px-6 py-3 border border-melodify-pink text-melodify-pink rounded-full hover:bg-melodify-pink hover:text-white transition duration-300"> | |
| Ver todas las canciones | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Banner Informativo --> | |
| <section class="py-16 bg-gradient-to-r from-gray-900 to-black"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="bg-black bg-opacity-50 rounded-2xl p-8 md:p-12 border border-gray-800"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-melodify-pink to-melodify-darkpink bg-clip-text text-transparent"> | |
| Tu música, a tu manera | |
| </h2> | |
| <p class="text-lg text-gray-300 mb-6"> | |
| Sube maquetas instantáneas, termínalas con IA, genera videolyrics, promociona tu música en un solo lugar. | |
| </p> | |
| <div class="flex flex-wrap gap-3 mb-6"> | |
| <span class="px-3 py-1 bg-gray-800 rounded-full text-sm flex items-center"> | |
| <i class="fas fa-robot text-melodify-pink mr-2"></i> Producción con IA | |
| </span> | |
| <span class="px-3 py-1 bg-gray-800 rounded-full text-sm flex items-center"> | |
| <i class="fas fa-video text-melodify-pink mr-2"></i> Videolyrics automáticos | |
| </span> | |
| <span class="px-3 py-1 bg-gray-800 rounded-full text-sm flex items-center"> | |
| <i class="fas fa-chart-line text-melodify-pink mr-2"></i> Analítica avanzada | |
| </span> | |
| </div> | |
| <button class="px-6 py-3 rounded-full bg-gradient-to-r from-melodify-pink to-melodify-darkpink text-white font-medium hover:shadow-lg hover:shadow-pink-500/30 transition"> | |
| Comenzar ahora | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <div class="bg-gray-900 rounded-xl p-6 border border-gray-800"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-melodify-pink flex items-center justify-center mr-4"> | |
| <i class="fas fa-music text-white text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Proceso simplificado</h3> | |
| <p class="text-sm text-gray-400">De la idea al mercado en minutos</p> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-melodify-darkpink flex items-center justify-center"> | |
| <span class="text-white text-xs">1</span> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-300">Sube tu maqueta o idea musical</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-melodify-darkpink flex items-center justify-center"> | |
| <span class="text-white text-xs">2</span> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-300">Mejora y termina con herramientas de IA</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-melodify-darkpink flex items-center justify-center"> | |
| <span class="text-white text-xs">3</span> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-300">Genera contenido visual automático</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-melodify-darkpink flex items-center justify-center"> | |
| <span class="text-white text-xs">4</span> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-300">Publica y monetiza tu música</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Autores Destacados --> | |
| <section id="autores" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Autores destacados</h2> | |
| <p class="text-lg text-gray-400 max-w-2xl mx-auto"> | |
| Conoce a los talentosos creadores detrás de la música que amas | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> | |
| <!-- Autor 1 --> | |
| <a href="autor.html?id=1" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> | |
| <img src="https://source.unsplash.com/random/300x300/?artist,1" alt="Autor 1" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold mb-1">Aria Vega</h3> | |
| <p class="text-melodify-pink mb-3">Compositora • Productora</p> | |
| <p class="text-gray-400 text-sm mb-4">Especializada en pop y baladas con más de 50 canciones publicadas</p> | |
| <div class="flex justify-center space-x-2"> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Pop</span> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Balada</span> | |
| </div> | |
| </a> | |
| <!-- Autor 2 --> | |
| <a href="autor.html?id=2" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> | |
| <img src="https://source.unsplash.com/random/300x300/?artist,2" alt="Autor 2" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold mb-1">DJ Kronos</h3> | |
| <p class="text-melodify-pink mb-3">Productor • DJ</p> | |
| <p class="text-gray-400 text-sm mb-4">Creador de beats urbanos con más de 10 millones de streams</p> | |
| <div class="flex justify-center space-x-2"> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Trap</span> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Hip Hop</span> | |
| </div> | |
| </a> | |
| <!-- Autor 3 --> | |
| <a href="autor.html?id=3" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> | |
| <img src="https://source.unsplash.com/random/300x300/?artist,3" alt="Autor 3" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold mb-1">The Jazz Collective</h3> | |
| <p class="text-melodify-pink mb-3">Banda • Compositores</p> | |
| <p class="text-gray-400 text-sm mb-4">Grupo de jazz fusión con influencias modernas y clásicas</p> | |
| <div class="flex justify-center space-x-2"> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Jazz</span> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Fusión</span> | |
| </div> | |
| </a> | |
| <!-- Autor 4 --> | |
| <a href="autor.html?id=4" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> | |
| <img src="https://source.unsplash.com/random/300x300/?artist,4" alt="Autor 4" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold mb-1">Sophia Reyes</h3> | |
| <p class="text-melodify-pink mb-3">Cantautora</p> | |
| <p class="text-gray-400 text-sm mb-4">Voz emotiva y letras profundas que conectan con el corazón</p> | |
| <div class="flex justify-center space-x-2"> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Balada</span> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Pop</span> | |
| </div> | |
| </a> | |
| <!-- Autor 5 --> | |
| <a href="autor.html?id=5" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> | |
| <img src="https://source.unsplash.com/random/300x300/?artist,5" alt="Autor 5" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold mb-1">Los Ritmos</h3> | |
| <p class="text-melodify-pink mb-3">Grupo Musical</p> | |
| <p class="text-gray-400 text-sm mb-4">Especialistas en ritmos tropicales y fiesta con energía contagiosa</p> | |
| <div class="flex justify-center space-x-2"> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Cumbia</span> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Tropical</span> | |
| </div> | |
| </a> | |
| <!-- Autor 6 --> | |
| <a href="autor.html?id=6" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> | |
| <img src="https://source.unsplash.com/random/300x300/?artist,6" alt="Autor 6" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold mb-1">El Norteño</h3> | |
| <p class="text-melodify-pink mb-3">Cantautor</p> | |
| <p class="text-gray-400 text-sm mb-4">Voz auténtica de la música regional mexicana con raíces profundas</p> | |
| <div class="flex justify-center space-x-2"> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Regional</span> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Norteño</span> | |
| </div> | |
| </a> | |
| <!-- Autor 7 --> | |
| <a href="autor.html?id=7" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> | |
| <img src="https://source.unsplash.com/random/300x300/?artist,7" alt="Autor 7" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold mb-1">Stella Nova</h3> | |
| <p class="text-melodify-pink mb-3">Productora • DJ</p> | |
| <p class="text-gray-400 text-sm mb-4">Creadora de sonidos electrónicos con toque pop y mucha energía</p> | |
| <div class="flex justify-center space-x-2"> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Electro Pop</span> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Dance</span> | |
| </div> | |
| </a> | |
| <!-- Autor 8 --> | |
| <a href="autor.html?id=8" class="bg-gray-900 rounded-xl p-6 text-center transition-all duration-300 card-hover"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-melodify-pink"> | |
| <img src="https://source.unsplash.com/random/300x300/?artist,8" alt="Autor 8" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold mb-1">Shadow Beats</h3> | |
| <p class="text-melodify-pink mb-3">Productor</p> | |
| <p class="text-gray-400 text-sm mb-4">Especialista en beats oscuros y atmosféricos para rap y trap</p> | |
| <div class="flex justify-center space-x-2"> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Trap</span> | |
| <span class="px-2 py-1 bg-gray-800 rounded-full text-xs">Dark</span> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block px-6 py-3 border border-melodify-pink text-melodify-pink rounded-full hover:bg-melodify-pink hover:text-white transition duration-300"> | |
| Ver todos los autores | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Explora por Género --> | |
| <section id="generos" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gradient-to-b from-gray-900 to-black"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Explora por género</h2> | |
| <p class="text-lg text-gray-400 max-w-2xl mx-auto"> | |
| Descubre música organizada por géneros y estilos | |
| </p> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-4 mb-12"> | |
| <a href="#" class="px-6 py-3 bg-gray-800 rounded-full hover:bg-gradient-to-r from-melodify-pink to-melodify-darkpink transition duration-300 chip-hover"> | |
| <i class="fas fa-heart mr-2"></i> Balada | |
| </a> | |
| <a href="#" class="px-6 py-3 bg-gray-800 rounded-full hover:bg-gradient-to-r from-melodify-pink to-melodify-darkpink transition duration-300 chip-hover"> | |
| <i class="fas fa-guitar mr-2"></i> Regional | |
| </a> | |
| <a href="#" class="px-6 py-3 bg-gray-800 rounded-full hover:bg-gradient-to-r from-melodify-pink to-melodify-darkpink transition duration-300 chip-hover"> | |
| <i class="fas fa-drum mr-2"></i> Cumbia | |
| </a> | |
| <a href="#" class="px-6 py-3 bg-gray-800 rounded-full hover:bg-gradient-to-r from-melodify-pink to-melodify-darkpink transition duration-300 chip-hover"> | |
| <i class="fas fa-saxophone mr-2"></i> Jazz | |
| </a> | |
| <a href="#" class="px-6 py-3 bg-gray-800 rounded-full hover:bg-gradient-to-r from-melodify-pink to-melodify-darkpink transition duration-300 chip-hover"> | |
| <i class="fas fa-star mr-2"></i> Pop | |
| </a> | |
| <a href="#" class="px-6 py-3 bg-gray-800 rounded-full hover:bg-gradient-to-r from-melodify-pink to-melodify-darkpink transition duration-300 chip-hover"> | |
| <i class="fas fa-fire mr-2"></i> Trap | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Género 1 --> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800"> | |
| <div class="relative h-48"> | |
| <img src="https://source.unsplash.com/random/600x400/?ballad" alt="Balada" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-4 left-4"> | |
| <h3 class="text-2xl font-bold">Balada</h3> | |
| <p class="text-gray-300">Emociones profundas y letras con sentimiento</p> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="text-sm text-gray-400">+120 canciones</span> | |
| <a href="#" class="text-melodify-pink text-sm font-medium hover:underline">Ver todo</a> | |
| </div> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,11" alt="Artista 1"> | |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,12" alt="Artista 2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,13" alt="Artista 3"> | |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,14" alt="Artista 4"> | |
| <div class="w-8 h-8 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">+15</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Género 2 --> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800"> | |
| <div class="relative h-48"> | |
| <img src="https://source.unsplash.com/random/600x400/?trap" alt="Trap" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-4 left-4"> | |
| <h3 class="text-2xl font-bold">Trap</h3> | |
| <p class="text-gray-300">Beats potentes y flow urbano</p> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="text-sm text-gray-400">+85 canciones</span> | |
| <a href="#" class="text-melodify-pink text-sm font-medium hover:underline">Ver todo</a> | |
| </div> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,15" alt="Artista 1"> | |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,16" alt="Artista 2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,17" alt="Artista 3"> | |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,18" alt="Artista 4"> | |
| <div class="w-8 h-8 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">+8</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Género 3 --> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800"> | |
| <div class="relative h-48"> | |
| <img src="https://source.unsplash.com/random/600x400/?jazz" alt="Jazz" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-4 left-4"> | |
| <h3 class="text-2xl font-bold">Jazz</h3> | |
| <p class="text-gray-300">Improvisación y armonías sofisticadas</p> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="text-sm text-gray-400">+65 canciones</span> | |
| <a href="#" class="text-melodify-pink text-sm font-medium hover:underline">Ver todo</a> | |
| </div> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,19" alt="Artista 1"> | |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,20" alt="Artista 2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,21" alt="Artista 3"> | |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://source.unsplash.com/random/100x100/?artist,22" alt="Artista 4"> | |
| <div class="w-8 h-8 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">+12</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Planes --> | |
| <section id="planes" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Elige tu plan perfecto</h2> | |
| <p class="text-lg text-gray-400 max-w-2xl mx-auto"> | |
| Desde artistas independientes hasta sellos discográficos, tenemos una solución para ti | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Plan Free --> | |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800 transition-all duration-300 hover:border-melodify-pink"> | |
| <div class="mb-6"> | |
| <h3 class="text-2xl font-bold mb-2">Free</h3> | |
| <p class="text-gray-400">Perfecto para empezar</p> | |
| </div> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold">$0</span> | |
| <span class="text-gray-400">/mes</span> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-melodify-pink mr-3"></i> | |
| <span>5 subidas mensuales</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-melodify-pink mr-3"></i> | |
| <span>Estadísticas básicas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-melodify-pink mr-3"></i> | |
| <span>Acceso a marketplace</span> | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i class="fas fa-times text-gray-600 mr-3"></i> | |
| <span>Herramientas de IA</span> | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i class="fas fa-times text-gray-600 mr-3"></i> | |
| <span>Videolyrics automáticos</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 rounded-full border border-melodify-pink text-melodify-pink font-medium hover:bg-melodify-pink hover:text-white transition"> | |
| Comenzar gratis | |
| </button> | |
| </div> | |
| <!-- Plan Pro --> | |
| <div class="bg-gray-900 rounded-xl p-8 border-2 border-melodify-pink transform scale-105 relative"> | |
| <div class="absolute top-0 right-0 bg-melodify-pink text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg"> | |
| POPULAR | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-2xl font-bold mb-2">Pro</h3> | |
| <p class="text-gray-400">Para artistas serios</p> | |
| </div> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold">$19</span> | |
| <span class="text-gray-400">/mes</span> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-melodify-pink mr-3"></i> | |
| <span>30 subidas mensuales</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-melodify-pink mr-3"></i> | |
| <span>Estadísticas avanzadas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-melodify-pink mr-3"></i> | |
| <span>Herramientas básicas de IA</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-melodify-pink mr-3"></i> | |
| <span>5 videolyrics/mes</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-melodify-pink mr-3"></i> | |
| <span>Soporte prioritario</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 rounded-full bg-gradient-to-r from-melodify-pink to-melodify-darkpink text-white font-medium hover:shadow-lg hover:shadow-pink-500/30 transition"> | |
| Prueba 7 días gratis | |
| </button> | |
| </div> | |
| <!-- Plan Enterprise --> | |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800 transition-all duration-300 hover:border-melodify-pink"> | |
| <div class="mb-6"> | |
| <h3 class="text-2xl font-bold mb-2">Enterprise</h3> | |
| <p class="text-gray-400">Para sellos y estudios</p> | |
| </div> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold">$99</span> | |
| <span class="text-gray-400">/mes</span> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-melodify-pink mr-3"></i> | |
| <span>Subidas ilimitadas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-melodify-pink mr-3"></i> | |
| <span>Analítica completa</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-melodify-pink mr-3"></i> | |
| <span>IA avanzada</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-melodify-pink mr-3"></i> | |
| <span>Videolyrics ilimitados</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-melodify-pink mr-3"></i> | |
| <span>Soporte 24/7 y cuenta manager</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 rounded-full border border-melodify-pink text-melodify-pink font-medium hover:bg-melodify-pink hover:text-white transition"> | |
| Contactar ventas | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <p class="text-gray-400 mb-4">¿Necesitas algo personalizado?</p> | |
| <a href="#" class="inline-block px-6 py-3 text-melodify-pink font-medium hover:underline"> | |
| Habla con nuestro equipo | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800 py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 bg-gradient-to-r from-melodify-pink to-melodify-darkpink bg-clip-text text-transparent">MELODIFY</h3> | |
| <p class="text-gray-400 mb-4"> | |
| El marketplace musical donde artistas y compradores se encuentran para crear magia. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-melodify-pink transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-melodify-pink transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-melodify-pink transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-melodify-pink transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-melodify-pink transition"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Explorar</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-melodify-pink transition">Inicio</a></li> | |
| <li><a href="#canciones" class="text-gray-400 hover:text-melodify-pink transition">Canciones</a></li> | |
| <li><a href="#autores" class="text-gray-400 hover:text-melodify-pink transition">Autores</a></li> | |
| <li><a href="#generos" class="text-gray-400 hover:text-melodify-pink transition">Géneros</a></li> | |
| <li><a href="#planes" class="text-gray-400 hover:text-melodify-pink transition">Planes</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-melodify-pink transition">Términos de servicio</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-melodify-pink transition">Política de privacidad</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-melodify-pink transition">Licencias de música</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-melodify-pink transition">DMCA</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Contacto</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-melodify-pink mr-2"></i> | |
| <span class="text-gray-400">hola@melodify.com</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone text-melodify-pink mr-2"></i> | |
| <span class="text-gray-400">+1 (555) 123-4567</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-melodify-pink mr-2"></i> | |
| <span class="text-gray-400">Los Ángeles, California</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 text-center text-gray-500 text-sm"> | |
| <p>© Melodify 2025. Todos los derechos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 70, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://huggingface.co/proxy/enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://huggingface.co/proxy/enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://huggingface.co/proxy/enzostvs-deepsite.hf.space?remix=hazael00/melodify2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |