Spaces:
Running
Running
The design is very intentional, with each section's layout tailored to its specific purpose.
45755db verified | <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MangaFlow Nexus - Tu Portal de Manga y Cómic</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></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="bg-gray-900 text-white"> | |
| <!-- Navigation Component --> | |
| <app-header></app-header> | |
| <main class="container mx-auto px-4 py-8 max-w-7xl"> | |
| <!-- Hero Section --> | |
| <section class="mb-12 relative rounded-2xl overflow-hidden bg-gradient-to-r from-purple-900/50 to-blue-900/50 backdrop-blur-sm"> | |
| <div class="absolute inset-0 bg-black/40"></div> | |
| <div class="relative z-10 p-12 flex items-center justify-between"> | |
| <div class="max-w-2xl"> | |
| <h1 class="text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"> | |
| Descubre el Mejor Manga | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-6">Explora miles de títulos, lee nuevos capítulos diariamente y únete a la comunidad más grande de manga en español</p> | |
| <div class="flex gap-4"> | |
| <button class="bg-gradient-to-r from-purple-600 to-pink-600 px-6 py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all transform hover:scale-105"> | |
| Explorar Ahora | |
| </button> | |
| <button class="bg-gray-800/80 backdrop-blur px-6 py-3 rounded-lg font-semibold hover:bg-gray-700/80 transition-all border border-gray-700"> | |
| Ver Popular | |
| </button> | |
| </div> | |
| </div> | |
| <div class="hidden lg:block"> | |
| <img src="http://static.photos/anime/640x360/1" alt="Hero" class="rounded-xl shadow-2xl"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tendencias Section --> | |
| <section class="mb-12"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-3xl font-bold flex items-center gap-3"> | |
| <i data-feather="trending-up" class="text-purple-400"></i> | |
| Tendencias | |
| </h2> | |
| <button class="text-purple-400 hover:text-purple-300 transition-colors">Ver todo →</button> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4" id="trending-grid"> | |
| <!-- Trending items will be loaded here --> | |
| </div> | |
| </section> | |
| <!-- Últimos añadidos populares Section --> | |
| <section class="mb-12"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-3xl font-bold flex items-center gap-3"> | |
| <i data-feather="star" class="text-yellow-400"></i> | |
| Últimos añadidos populares | |
| </h2> | |
| <div class="flex gap-2"> | |
| <button class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors" id="scroll-left"> | |
| <i data-feather="chevron-left"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors" id="scroll-right"> | |
| <i data-feather="chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto scrollbar-hide" id="popular-carousel"> | |
| <div class="flex gap-4 pb-4" id="popular-container"> | |
| <!-- Popular items will be loaded here --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Nuevos capítulos Section --> | |
| <section class="mb-12"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-3xl font-bold flex items-center gap-3"> | |
| <i data-feather="book-open" class="text-green-400"></i> | |
| Nuevos capítulos | |
| </h2> | |
| <div class="flex items-center gap-4"> | |
| <select class="bg-gray-800 px-4 py-2 rounded-lg border border-gray-700 focus:border-purple-500 outline-none"> | |
| <option>Todos los géneros</option> | |
| <option>Shonen</option> | |
| <option>Shojo</option> | |
| <option>Seinen</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="chapters-list"> | |
| <!-- Chapter items will be loaded here --> | |
| </div> | |
| <div class="flex justify-center mt-6 gap-2"> | |
| <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">Anterior</button> | |
| <button class="px-4 py-2 bg-purple-600 rounded-lg">1</button> | |
| <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">2</button> | |
| <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">3</button> | |
| <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">Siguiente</button> | |
| </div> | |
| </section> | |
| <!-- Listas recomendadas Section --> | |
| <section class="mb-12"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-3xl font-bold flex items-center gap-3"> | |
| <i data-feather="bookmark" class="text-blue-400"></i> | |
| Listas recomendadas | |
| </h2> | |
| <button class="text-blue-400 hover:text-blue-300 transition-colors">Explorar listas →</button> | |
| </div> | |
| <div class="overflow-x-auto scrollbar-hide" id="lists-carousel"> | |
| <div class="flex gap-4 pb-4" id="lists-container"> | |
| <!-- Lists items will be loaded here --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section class="mb-12"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-3xl font-bold flex items-center gap-3"> | |
| <i data-feather="file-text" class="text-indigo-400"></i> | |
| Blog | |
| </h2> | |
| <button class="text-indigo-400 hover:text-indigo-300 transition-colors">Ver todos los artículos →</button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="blog-grid"> | |
| <!-- Blog items will be loaded here --> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer Component --> | |
| <app-footer></app-footer> | |
| <script src="components/header.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |