Spaces:
Running
Running
Manga reading website. The design is very intentional, with each section's layout tailored to its specific purpose.
6b53737 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MangaVerse Dark - Your Manga Universe</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"> | |
| <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> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| gridTemplateColumns: { | |
| 'trending': 'repeat(auto-fill, minmax(280px, 1fr))', | |
| 'blog': 'repeat(auto-fill, minmax(320px, 1fr))', | |
| }, | |
| aspectRatio: { | |
| 'manga-landscape': '16/9', | |
| 'manga-portrait': '2/3', | |
| }, | |
| colors: { | |
| gray: { | |
| 850: '#1a1d21', | |
| 950: '#0b0c0e', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-950 text-gray-100 antialiased"> | |
| <manga-navbar></manga-navbar> | |
| <main class="container mx-auto px-4 py-8 max-w-7xl"> | |
| <!-- Hero Section --> | |
| <section class="mb-12"> | |
| <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-gray-800 via-gray-900 to-gray-950 p-8 md:p-12"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <img src="http://static.photos/nature/1200x630/42" alt="Hero" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="relative z-10"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-gray-300 to-gray-500 bg-clip-text text-transparent"> | |
| Tu Universo Manga | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-400 mb-6 max-w-2xl"> | |
| Descubre, explora y sumérgete en los mejores mangas del momento con una experiencia diseñada para verdaderos aficionados. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#tendencias" class="inline-flex items-center px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105"> | |
| <i data-feather="trending-up" class="w-5 h-5 mr-2"></i> | |
| Explorar Tendencias | |
| </a> | |
| <a href="#nuevos" class="inline-flex items-center px-6 py-3 border border-gray-700 hover:bg-gray-800 rounded-lg font-semibold transition-all duration-300"> | |
| <i data-feather="clock" class="w-5 h-5 mr-2"></i> | |
| Últimos Capítulos | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tendencias Section --> | |
| <section id="tendencias" class="mb-16"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-3xl font-bold flex items-center"> | |
| <i data-feather="trending-up" class="w-8 h-8 mr-3 text-gray-400"></i> | |
| Tendencias | |
| </h2> | |
| <a href="#" class="text-gray-400 hover:text-gray-200 flex items-center transition-colors duration-300"> | |
| Ver todo | |
| <i data-feather="chevron-right" class="w-5 h-5 ml-1"></i> | |
| </a> | |
| </div> | |
| <div id="trending-grid" class="grid grid-cols-trending gap-4 max-h-[600px] overflow-hidden"> | |
| <!-- Dynamic content --> | |
| </div> | |
| </section> | |
| <!-- Últimos añadidos populares Section --> | |
| <section id="populares" class="mb-16"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-3xl font-bold flex items-center"> | |
| <i data-feather="star" class="w-8 h-8 mr-3 text-gray-400"></i> | |
| Últimos añadidos populares | |
| </h2> | |
| <div class="flex gap-2"> | |
| <button id="popular-prev" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300"> | |
| <i data-feather="chevron-left" class="w-5 h-5"></i> | |
| </button> | |
| <button id="popular-next" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300"> | |
| <i data-feather="chevron-right" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div id="popular-carousel" class="flex gap-4 overflow-x-hidden scroll-smooth pb-4"> | |
| <!-- Dynamic content --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Nuevos capítulos Section --> | |
| <section id="nuevos" class="mb-16"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-3xl font-bold flex items-center"> | |
| <i data-feather="clock" class="w-8 h-8 mr-3 text-gray-400"></i> | |
| Nuevos capítulos | |
| </h2> | |
| <div class="flex items-center gap-4"> | |
| <select id="chapter-filter" class="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-gray-300 focus:outline-none focus:border-gray-500"> | |
| <option value="all">Todos</option> | |
| <option value="today">Hoy</option> | |
| <option value="week">Esta semana</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="chapters-list" class="grid grid-cols-1 lg:grid-cols-2 gap-3"> | |
| <!-- Dynamic content --> | |
| </div> | |
| <div id="chapters-pagination" class="flex items-center justify-center gap-2 mt-8"> | |
| <!-- Pagination --> | |
| </div> | |
| </section> | |
| <!-- Listas recomendadas Section --> | |
| <section id="listas" class="mb-16"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-3xl font-bold flex items-center"> | |
| <i data-feather="list" class="w-8 h-8 mr-3 text-gray-400"></i> | |
| Listas recomendadas | |
| </h2> | |
| <div class="flex gap-2"> | |
| <button id="lists-prev" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300"> | |
| <i data-feather="chevron-left" class="w-5 h-5"></i> | |
| </button> | |
| <button id="lists-next" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300"> | |
| <i data-feather="chevron-right" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div id="lists-carousel" class="flex gap-4 overflow-x-hidden scroll-smooth pb-4"> | |
| <!-- Dynamic content --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section id="blog" class="mb-16"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-3xl font-bold flex items-center"> | |
| <i data-feather="edit-3" class="w-8 h-8 mr-3 text-gray-400"></i> | |
| Blog | |
| </h2> | |
| <a href="#" class="text-gray-400 hover:text-gray-200 flex items-center transition-colors duration-300"> | |
| Ver todos los artículos | |
| <i data-feather="chevron-right" class="w-5 h-5 ml-1"></i> | |
| </a> | |
| </div> | |
| <div id="blog-grid" class="grid grid-cols-blog gap-6"> | |
| <!-- Dynamic content --> | |
| </div> | |
| </section> | |
| </main> | |
| <manga-footer></manga-footer> | |
| <script src="components/navbar.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> |