Spaces:
Running
Running
The design is very intentional, with each section's layout tailored to its specific purpose.
45755db verified | // Mock data for demonstration | |
| const mockData = { | |
| trending: [ | |
| { id: 1, title: "One Piece", category: "Manga", image: "http://static.photos/anime/320x200/101" }, | |
| { id: 2, title: "Attack on Titan", category: "Manga", image: "http://static.photos/anime/320x200/102" }, | |
| { id: 3, title: "Demon Slayer", category: "Manga", image: "http://static.photos/anime/320x200/103" }, | |
| { id: 4, title: "My Hero Academia", category: "C贸mic", image: "http://static.photos/anime/320x200/104" }, | |
| { id: 5, title: "Jujutsu Kaisen", category: "Manga", image: "http://static.photos/anime/320x200/105" }, | |
| { id: 6, title: "Chainsaw Man", category: "C贸mic", image: "http://static.photos/anime/320x200/106" }, | |
| { id: 7, title: "Tokyo Revengers", category: "Manga", image: "http://static.photos/anime/320x200/107" }, | |
| { id: 8, title: "Black Clover", category: "C贸mic", image: "http://static.photos/anime/320x200/108" }, | |
| { id: 9, title: "Spy x Family", category: "Manga", image: "http://static.photos/anime/320x200/109" }, | |
| { id: 10, title: "Bleach", category: "C贸mic", image: "http://static.photos/anime/320x200/110" }, | |
| { id: 11, title: "Naruto", category: "Manga", image: "http://static.photos/anime/320x200/111" }, | |
| { id: 12, title: "Dragon Ball", category: "C贸mic", image: "http://static.photos/anime/320x200/112" } | |
| ], | |
| popular: [ | |
| { id: 1, title: "Solo Leveling", chapters: 200, views: "500k", likes: "25k", genre: ["Acci贸n", "Fantas铆a"], image: "http://static.photos/anime/200x300/201" }, | |
| { id: 2, title: "Tower of God", chapters: 543, views: "350k", likes: "18k", genre: ["Aventura", "Drama"], image: "http://static.photos/anime/200x300/202" }, | |
| { id: 3, title: "The Beginning After The End", chapters: 175, views: "280k", likes: "15k", genre: ["Fantas铆a", "Reencarnaci贸n"], image: "http://static.photos/anime/200x300/203" }, | |
| { id: 4, title: "Omniscient Reader", chapters: 125, views: "200k", likes: "12k", genre: ["Acci贸n", "Fantas铆a"], image: "http://static.photos/anime/200x300/204" }, | |
| { id: 5, title: "Martial Peak", chapters: 3800, views: "450k", likes: "22k", genre: ["Artes Marciales", "Cultivaci贸n"], image: "http://static.photos/anime/200x300/205" }, | |
| { id: 6, title: "Apotheosis", chapters: 1200, views: "180k", likes: "9k", genre: ["Acci贸n", "Fantas铆a"], image: "http://static.photos/anime/200x300/206" }, | |
| { id: 7, title: "Star Martial God", chapters: 450, views: "150k", likes: "8k", genre: ["Artes Marciales", "Romance"], image: "http://static.photos/anime/200x300/207" }, | |
| { id: 8, title: "Tales of Demons and Gods", chapters: 450, views: "220k", likes: "11k", genre: ["Fantas铆a", "Reencarnaci贸n"], image: "http://static.photos/anime/200x300/208" } | |
| ], | |
| chapters: [ | |
| { id: 1, title: "One Piece", chapter: "Cap铆tulo 1095", scan: "MangoScan", time: "Hace 15 min", image: "http://static.photos/anime/80x120/301" }, | |
| { id: 2, title: "Jujutsu Kaisen", chapter: "Cap铆tulo 240", scan: "ScanManga", time: "Hace 30 min", image: "http://static.photos/anime/80x120/302" }, | |
| { id: 3, title: "My Hero Academia", chapter: "Cap铆tulo 406", scan: "HeroScan", time: "Hace 1 hora", image: "http://static.photos/anime/80x120/303" }, | |
| { id: 4, title: "Chainsaw Man", chapter: "Cap铆tulo 150", scan: "DemonScan", time: "Hace 2 horas", image: "http://static.photos/anime/80x120/304" }, | |
| { id: 5, title: "Black Clover", chapter: "Cap铆tulo 370", scan: "CloverScan", time: "Hace 3 horas", image: "http://static.photos/anime/80x120/305" }, | |
| { id: 6, title: "Spy x Family", chapter: "Cap铆tulo 89", scan: "SpyScan", time: "Hace 4 horas", image: "http://static.photos/anime/80x120/306" }, | |
| { id: 7, title: "Demon Slayer", chapter: "Cap铆tulo 205", scan: "DemonScan", time: "Hace 5 horas", image: "http://static.photos/anime/80x120/307" }, | |
| { id: 8, title: "Bleach", chapter: "Cap铆tulo 686", scan: "BleachScan", time: "Hace 6 horas", image: "http://static.photos/anime/80x120/308" }, | |
| { id: 9, title: "Naruto", chapter: "Ep铆logo", scan: "NinjaScan", time: "Hace 8 horas", image: "http://static.photos/anime/80x120/309" }, | |
| { id: 10, title: "Dragon Ball Super", chapter: "Cap铆tulo 103", scan: "DBScan", time: "Hace 10 horas", image: "http://static.photos/anime/80x120/310" } | |
| ], | |
| lists: [ | |
| { id: 1, title: "Fantas铆a 脡pica", count: 45, description: "Las mejores historias de fantas铆a", image: "http://static.photos/fantasy/200x300/401" }, | |
| { id: 2, title: "Romance Shojo", count: 32, description: "Historias de amor tiernas", image: "http://static.photos/pink/200x300/402" }, | |
| { id: 3, title: "Acci贸n Shonen", count: 67, description: "Batallas 茅picas y superpoderes", image: "http://static/photos/red/200x300/403" }, | |
| { id: 4, title: "Psicol贸gico", count: 28, description: "Mentes complejas y giros inesperados", image: "http://static/photos/monochrome/200x300/404" }, | |
| { id: 5, title: "Ciencia Ficci贸n", count: 41, description: "Futuro, tecnolog铆a y espacio", image: "http://static/photos/technology/200x300/405" }, | |
| { id: 6, title: "Comedia Diaria", count: 55, description: "Risas garantizadas", image: "http://static.photos/yellow/200x300/406" } | |
| ], | |
| blog: [ | |
| { id: 1, title: "Top 10 Mangas de 2024", excerpt: "Descubre los mangas m谩s populares y aclamados de este a帽o...", tag: "Ranking", image: "http://static.photos/anime/640x360/501" }, | |
| { id: 2, title: "Gu铆a para Principiantes", excerpt: "Todo lo que necesitas saber para empezar en el mundo del manga...", tag: "Tutorial", image: "http://static.photos/anime/640x360/502" }, | |
| { id: 3, title: "Arte del Mangaka", excerpt: "Explora las t茅cnicas y estilos de los artistas m谩s influyentes...", tag: "Arte", image: "http://static.photos/anime/640x360/503" }, | |
| { id: 4, title: "Manga vs Anime", excerpt: "Comparativa entre versiones y cu谩l elegir primero...", tag: "An谩lisis", image: "http://static.photos/anime/640x360/504" }, | |
| { id: 5, title: "Historia del Manga", excerpt: "Desde sus or铆genes hasta la actualidad: una cronolog铆a completa...", tag: "Historia", image: "http://static.photos/anime/640x360/505" }, | |
| { id: 6, title: "Cultura Otaku", excerpt: "Sum茅rgete en el fascinante mundo de la cultura japonesa...", tag: "Cultura", image: "http://static.photos/anime/640x360/506" } | |
| ] | |
| }; | |
| // Load trending items | |
| function loadTrending() { | |
| const grid = document.getElementById('trending-grid'); | |
| grid.innerHTML = mockData.trending.map(item => ` | |
| <div class="relative group cursor-pointer card-hover"> | |
| <div class="rounded-lg overflow-hidden h-40 relative"> | |
| <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-3"> | |
| <h3 class="font-semibold text-sm text-white group-hover:text-purple-300 transition-colors">${item.title}</h3> | |
| <span class="inline-block px-2 py-1 bg-purple-600/80 text-xs rounded-full mt-1">${item.category}</span> | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| // Load popular items | |
| function loadPopular() { | |
| const container = document.getElementById('popular-container'); | |
| container.innerHTML = mockData.popular.map(item => ` | |
| <div class="flex-shrink-0 w-48 cursor-pointer card-hover"> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-750 transition-colors"> | |
| <div class="h-64 relative"> | |
| <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 left-2 flex gap-1"> | |
| ${item.genre.map(g => `<span class="px-2 py-1 bg-black/60 text-xs rounded">${g}</span>`).join('')} | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold mb-2 text-white group-hover:text-purple-300 transition-colors">${item.title}</h3> | |
| <div class="flex items-center gap-3 text-xs text-gray-400"> | |
| <span class="flex items-center gap-1"> | |
| <i data-feather="book" class="w-3 h-3"></i> | |
| ${item.chapters} | |
| </span> | |
| <span class="flex items-center gap-1"> | |
| <i data-feather="eye" class="w-3 h-3"></i> | |
| ${item.views} | |
| </span> | |
| <span class="flex items-center gap-1"> | |
| <i data-feather="heart" class="w-3 h-3"></i> | |
| ${item.likes} | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| feather.replace(); | |
| } | |
| // Load chapters | |
| function loadChapters() { | |
| const list = document.getElementById('chapters-list'); | |
| list.innerHTML = mockData.chapters.map(item => ` | |
| <div class="bg-gray-800 rounded-lg p-4 hover:bg-gray-750 transition-colors cursor-pointer flex gap-4"> | |
| <div class="flex-shrink-0"> | |
| <img src="${item.image}" alt="${item.title}" class="w-16 h-20 object-cover rounded"> | |
| </div> | |
| <div class="flex-grow"> | |
| <h3 class="font-semibold text-lg mb-1">${item.title}</h3> | |
| <p class="text-purple-400 text-sm mb-1">${item.chapter}</p> | |
| <div class="flex items-center gap-4 text-xs text-gray-400"> | |
| <span class="flex items-center gap-1"> | |
| <i data-feather="users" class="w-3 h-3"></i> | |
| ${item.scan} | |
| </span> | |
| <span class="flex items-center gap-1"> | |
| <i data-feather="clock" class="w-3 h-3"></i> | |
| ${item.time} | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| feather.replace(); | |
| } | |
| // Load lists | |
| function loadLists() { | |
| const container = document.getElementById('lists-container'); | |
| container.innerHTML = mockData.lists.map(item => ` | |
| <div class="flex-shrink-0 w-48 cursor-pointer card-hover"> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-750 transition-colors"> | |
| <div class="h-64 relative"> | |
| <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-3"> | |
| <h3 class="font-semibold text-white">${item.title}</h3> | |
| <p class="text-xs text-gray-300 mb-2">${item.description}</p> | |
| <span class="text-xs text-blue-400">${item.count} obras</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| // Load blog | |
| function loadBlog() { | |
| const grid = document.getElementById('blog-grid'); | |
| grid.innerHTML = mockData.blog.map(item => ` | |
| <article class="bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-750 transition-colors cursor-pointer"> | |
| <div class="h-48 relative"> | |
| <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <span class="inline-block px-2 py-1 bg-indigo-600/80 text-xs rounded-full mb-2">${item.tag}</span> | |
| <h3 class="font-semibold text-lg mb-2 text-white hover:text-indigo-300 transition-colors">${item.title}</h3> | |
| <p class="text-sm text-gray-400 mb-3">${item.excerpt}</p> | |
| <button class="text-indigo-400 text-sm font-semibold hover:text-indigo-300 transition-colors flex items-center gap-1"> | |
| Leer art铆culo <i data-feather="arrow-right" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </article> | |
| `).join(''); | |
| feather.replace(); | |
| } | |
| // Initialize carousels | |
| function initCarousels() { | |
| const popularCarousel = document.getElementById('popular-carousel'); | |
| const listsCarousel = document.getElementById('lists-carousel'); | |
| // Popular carousel controls | |
| document.getElementById('scroll-left').addEventListener('click', () => { | |
| popularCarousel.scrollBy({ left: -200, behavior: 'smooth' }); | |
| }); | |
| document.getElementById('scroll-right').addEventListener('click', () => { | |
| popularCarousel.scrollBy({ left: 200, behavior: 'smooth' }); | |
| }); | |
| } | |
| // Initialize everything when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', () => { | |
| loadTrending(); | |
| loadPopular(); | |
| loadChapters(); | |
| loadLists(); | |
| loadBlog(); | |
| initCarousels(); | |
| // Add smooth scroll behavior | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Add intersection observer for fade-in animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('fade-in-up'); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all sections | |
| document.addEventListener('DOMContentLoaded', () => { | |
| document.querySelectorAll('section').forEach(section => { | |
| observer.observe(section); | |
| }); | |
| }); |