Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Bookflix</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet"> | |
| <style> | |
| @keyframes fadeIn { | |
| to { opacity: 1; } | |
| } | |
| @keyframes fadeOut { | |
| from { opacity: 1; } | |
| to { opacity: 0; } | |
| } | |
| .oculto { | |
| display: none; | |
| } | |
| .libro:hover { | |
| transform: scale(1.05); | |
| } | |
| .capitulo:hover { | |
| transform: scale(1.02); | |
| } | |
| .profile-icon { | |
| border: 2px solid transparent; | |
| } | |
| .profile:hover .profile-icon { | |
| border: 2px solid white; | |
| } | |
| .profile:hover .profile-name { | |
| color: white; | |
| } | |
| .banner-gradient { | |
| background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%); | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .serie-header { | |
| background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.5) 100%); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #e50914; | |
| color: white; | |
| } | |
| /* Estilos para las imágenes de libros */ | |
| .libro img { | |
| width: 150px; | |
| height: 225px; | |
| object-fit: cover; | |
| } | |
| /* Estilos para las imágenes en la sección de similares */ | |
| #similares-tab .libro img { | |
| width: 150px; | |
| height: 225px; | |
| object-fit: cover; | |
| } | |
| /* Estilos para las imágenes de capítulos */ | |
| .capitulo img { | |
| width: 160px; | |
| height: 96px; | |
| object-fit: cover; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white font-sans"> | |
| <!-- Pantalla de selección de perfil --> | |
| <div id="profile-selection" class="fixed inset-0 bg-black z-50 flex flex-col items-center justify-center"> | |
| <div class="text-red-600 text-6xl font-extrabold mb-16">BOOKFLIX</div> | |
| <h1 class="text-white text-4xl mb-12">¿Quién está leyendo?</h1> | |
| <div class="flex justify-center gap-8 max-w-4xl flex-wrap"> | |
| <div class="profile cursor-pointer group" data-profile-id="1"> | |
| <div class="profile-icon w-32 h-32 bg-red-600 rounded mb-2 mx-auto group-hover:border-white"></div> | |
| <span class="profile-name text-gray-400 group-hover:text-white">Lector 1</span> | |
| </div> | |
| <div class="profile cursor-pointer group" data-profile-id="2"> | |
| <div class="profile-icon w-32 h-32 bg-green-500 rounded mb-2 mx-auto group-hover:border-white"></div> | |
| <span class="profile-name text-gray-400 group-hover:text-white">Lector 2</span> | |
| </div> | |
| <div class="profile cursor-pointer group" data-profile-id="3"> | |
| <div class="profile-icon w-32 h-32 bg-yellow-400 rounded mb-2 mx-auto group-hover:border-white"></div> | |
| <span class="profile-name text-gray-400 group-hover:text-white">Lector 3</span> | |
| </div> | |
| <div class="profile cursor-pointer group" data-profile-id="4"> | |
| <div class="profile-icon w-32 h-32 bg-indigo-800 rounded mb-2 mx-auto group-hover:border-white"></div> | |
| <span class="profile-name text-gray-400 group-hover:text-white">Lector 4</span> | |
| </div> | |
| <div class="profile cursor-pointer group" data-profile-id="5"> | |
| <div class="profile-icon w-32 h-32 bg-blue-400 rounded mb-2 mx-auto group-hover:border-white"></div> | |
| <span class="profile-name text-gray-400 group-hover:text-white">Niños</span> | |
| </div> | |
| </div> | |
| <button class="mt-16 px-8 py-2 text-gray-400 border border-gray-400 hover:text-white hover:border-white"> | |
| Administrar perfiles | |
| </button> | |
| </div> | |
| <!-- Header --> | |
| <header id="main-header" class="oculto bg-black px-10 py-5 flex justify-between items-center border-b-2 border-red-600"> | |
| <h1 class="text-red-600 text-3xl font-extrabold">Bookflix</h1> | |
| <p id="profile-display" class="text-gray-300">Nuevo usuario</p> | |
| </header> | |
| <!-- Página principal --> | |
| <main id="pagina-inicio" class="oculto container mx-auto px-10 py-5"> | |
| <!-- Sección destacada con La chica del tren --> | |
| <section class="mb-16"> | |
| <div class="relative h-96 w-full rounded-xl overflow-hidden mb-6"> | |
| <img src="https://i.pinimg.com/736x/b5/42/41/b542414ae867d6414278869b93170287.jpg" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-black via-transparent to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 p-8 w-1/2"> | |
| <h1 class="text-4xl font-bold mb-2">La chica del tren</h1> | |
| <p class="text-sm text-gray-400 mb-4">Por Paula Hawkins</p> | |
| <p class="text-lg mb-6">Una mujer con una vida rota cree haber visto algo sospechoso desde el tren que toma todos los días.</p> | |
| <div class="flex gap-4"> | |
| <button class="bg-white text-black px-6 py-2 rounded flex items-center font-semibold hover:bg-opacity-80"> | |
| <i class="bi bi-play-fill mr-2"></i> Reproducir | |
| </button> | |
| <button class="bg-gray-600 bg-opacity-70 text-white px-6 py-2 rounded flex items-center font-semibold hover:bg-opacity-50" onclick="mostrarChicaDelTren()"> | |
| <i class="bi bi-info-circle mr-2"></i> Más información | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Secciones de libros --> | |
| <section class="mb-10"> | |
| <h2 class="text-2xl font-semibold border-l-4 border-red-600 pl-3 mb-4">Tendencias</h2> | |
| <div class="flex gap-4 overflow-x-auto scrollbar-hide pb-4"> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer" onclick="mostrarChicaDelTren()"> | |
| <img src="https://i.pinimg.com/736x/b5/42/41/b542414ae867d6414278869b93170287.jpg" alt="La chica del tren" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">La chica del tren</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpA2-cTS5D0TEb4IB3QzNbdKK1Si6bK-r24bRFntvAL3rzLG3CXy9zmISXUwjbZb_bfMk&usqp=CAU" alt="1984" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">1984</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://images.cdn2.buscalibre.com/fit-in/360x360/73/b6/73b6fd96c31d26e2b6a3531808c1188c.jpg" alt="Don Quijote" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Don Quijote</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://images.cdn3.buscalibre.com/fit-in/360x360/61/8d/618d227e8967274cd9589a549adff52d.jpg" alt="Cien años de soledad" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Cien años de soledad</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://contrapunto.cl/cdn/shop/files/27522.jpg?v=1725308995" alt="El principito" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">El principito</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mb-10"> | |
| <h2 class="text-2xl font-semibold border-l-4 border-red-600 pl-3 mb-4">Libros más leídos</h2> | |
| <div class="flex gap-4 overflow-x-auto scrollbar-hide pb-4"> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpA2-cTS5D0TEb4IB3QzNbdKK1Si6bK-r24bRFntvAL3rzLG3CXy9zmISXUwjbZb_bfMk&usqp=CAU" alt="1984" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">1984</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://images.cdn2.buscalibre.com/fit-in/360x360/73/b6/73b6fd96c31d26e2b6a3531808c1188c.jpg" alt="Don Quijote" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Don Quijote</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://i.pinimg.com/736x/b5/42/41/b542414ae867d6414278869b93170287.jpg" alt="La chica del tren" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">La chica del tren</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://images.cdn3.buscalibre.com/fit-in/360x360/61/8d/618d227e8967274cd9589a549adff52d.jpg" alt="Cien años de soledad" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Cien años de soledad</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://images.cdn1.buscalibre.com/fit-in/360x360/ea/1f/ea1fc691874fa49ce341d876a981e2c1.jpg" alt="Crimen y castigo" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Crimen y castigo</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mb-10"> | |
| <h2 class="text-2xl font-semibold border-l-4 border-red-600 pl-3 mb-4">Novedades</h2> | |
| <div class="flex gap-4 overflow-x-auto scrollbar-hide pb-4"> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://images.cdn2.buscalibre.com/fit-in/360x360/49/54/4954e233ad1e1a43e3f8187cd91c6997.jpg" alt="El código Da Vinci" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">El código Da Vinci</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://images.cdn2.buscalibre.com/fit-in/360x360/e6/5f/e65f54742ad7bbc41903d17f75b77d78.jpg" alt="Harry Potter" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Harry Potter</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://contrapunto.cl/cdn/shop/files/26300.jpg?v=1725988835" alt="El señor de los anillos" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">El señor de los anillos</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjykXuoU-pVtZYP4C91G9YNTdOKIf6_KapOg&s" alt="Orgullo y prejuicio" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Orgullo y prejuicio</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://images.cdn1.buscalibre.com/fit-in/360x360/ea/1f/ea1fc691874fa49ce341d876a981e2c1.jpg" alt="Crimen y castigo" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Crimen y castigo</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mb-10"> | |
| <h2 class="text-2xl font-semibold border-l-4 border-red-600 pl-3 mb-4">Clásicos</h2> | |
| <div class="flex gap-4 overflow-x-auto scrollbar-hide pb-4"> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3VipQKdybueFVVKcC5ElrFodLVIManGkJvA&s" alt="Moby Dick" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Moby Dick</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://contrapunto.cl/cdn/shop/files/27522.jpg?v=1725308995" alt="El principito" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">El principito</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://contrapunto.cl/cdn/shop/files/30794.jpg?v=1725998801" alt="Ulises" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Ulises</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://images.cdn3.buscalibre.com/fit-in/360x360/61/8d/618d227e8967274cd9589a549adff52d.jpg" alt="Cien años de soledad" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Cien años de soledad</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://contrapunto.cl/cdn/shop/files/26300.jpg?v=1725988835" alt="El señor de los anillos" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">El señor de los anillos</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Página de detalle del libro --> | |
| <div id="pagina-serie" class="oculto relative"> | |
| <!-- Header de la serie --> | |
| <div class="serie-header pt-32 pb-16 px-10"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="relative w-full h-96 rounded-xl overflow-hidden mb-4"> | |
| <img src="https://i.pinimg.com/736x/b5/42/41/b542414ae867d6414278869b93170287.jpg" alt="La chica del tren" class="w-full h-full object-cover"> | |
| </div> | |
| <h1 class="text-red-600 text-5xl font-extrabold mb-2">La chica del tren</h1> | |
| <p class="text-sm text-gray-400 mb-4">Por Paula Hawkins</p> | |
| <div class="flex gap-4 mb-6"> | |
| <span class="text-green-500 font-semibold">95% de coincidencia</span> | |
| <span class="text-gray-300">2015</span> | |
| <span class="border border-gray-400 px-2 text-sm">+16</span> | |
| <span class="text-gray-300">3 Partes</span> | |
| <span class="text-gray-300">HD</span> | |
| </div> | |
| <p class="text-gray-300 text-lg mb-6 max-w-3xl"> | |
| Una mujer con una vida rota cree haber visto algo sospechoso desde el tren que toma todos los días. | |
| Su obsesión la arrastra a un misterio más profundo de lo que imaginaba. | |
| </p> | |
| <div class="flex gap-4"> | |
| <button class="bg-white text-black px-6 py-2 rounded flex items-center font-semibold hover:bg-opacity-80"> | |
| <i class="bi bi-play-fill mr-2"></i> Reproducir | |
| </button> | |
| <button class="bg-gray-600 bg-opacity-70 text-white px-6 py-2 rounded flex items-center font-semibold hover:bg-opacity-50"> | |
| <i class="bi bi-plus-lg mr-2"></i> Mi lista | |
| </button> | |
| <button class="bg-gray-600 bg-opacity-70 text-white px-6 py-2 rounded flex items-center font-semibold hover:bg-opacity-50"> | |
| <i class="bi bi-hand-thumbs-up mr-2"></i> Me gusta | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tabs de navegación --> | |
| <div class="bg-black bg-opacity-90 border-b border-gray-800"> | |
| <div class="max-w-6xl mx-auto flex gap-8 px-10"> | |
| <button class="tab py-4 text-gray-400 hover:text-white tab-active" onclick="changeTab('episodios')">Episodios</button> | |
| <button class="tab py-4 text-gray-400 hover:text-white" onclick="changeTab('detalles')">Detalles</button> | |
| <button class="tab py-4 text-gray-400 hover:text-white" onclick="changeTab('similares')">Similares</button> | |
| </div> | |
| </div> | |
| <!-- Contenido de los tabs --> | |
| <div class="max-w-6xl mx-auto px-10 py-8"> | |
| <!-- Tab de episodios --> | |
| <div id="episodios-tab"> | |
| <h2 class="text-2xl font-semibold mb-6">Temporada 1</h2> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold mb-4 text-red-500">Perspectiva de Rachel</h3> | |
| <div class="space-y-4"> | |
| <div class="capitulo flex bg-gray-900 rounded-xl overflow-hidden transition-transform cursor-pointer"> | |
| <img src="https://i.pinimg.com/736x/06/57/b2/0657b239f13a9ac84eab4b6ea189a78f.jpg" alt="Episodio 1" class="w-40 h-24 object-cover"> | |
| <div class="p-4 flex-1"> | |
| <h3 class="text-lg font-semibold">1. La mujer en la ventana</h3> | |
| <p class="text-gray-400 text-sm">Todos los días, Rachel mira a una mujer desde el tren, creyendo que lleva una vida ideal. Un gesto mínimo, un momento, transformará todo y la conducirá hacia un enigma más profundo de lo que nunca imaginó.</p> | |
| </div> | |
| <div class="p-4 flex items-center"> | |
| <span class="text-gray-400">45 min</span> | |
| </div> | |
| </div> | |
| <div class="capitulo flex bg-gray-900 rounded-xl overflow-hidden transition-transform cursor-pointer"> | |
| <img src="https://i.pinimg.com/736x/73/31/98/733198e319c477d34fb6a2851484c483.jpg" alt="Episodio 2" class="w-40 h-24 object-cover"> | |
| <div class="p-4 flex-1"> | |
| <h3 class="text-lg font-semibold">2. Soy un caos</h3> | |
| <p class="text-gray-400 text-sm">Rachel despierta herida y sin memoria nítida de la noche pasada. Lo único que tiene claro es que algo no salió correctamente. Algo sombrío y peligroso ha empezado, y ella se encuentra prisionera sin tener idea de cómo.</p> | |
| </div> | |
| <div class="p-4 flex items-center"> | |
| <span class="text-gray-400">48 min</span> | |
| </div> | |
| </div> | |
| <div class="capitulo flex bg-gray-900 rounded-xl overflow-hidden transition-transform cursor-pointer"> | |
| <img src="https://i.pinimg.com/736x/39/79/dc/3979dc163507a21140f47a7dbb96ac78.jpg" alt="Episodio 3" class="w-40 h-24 object-cover"> | |
| <div class="p-4 flex-1"> | |
| <h3 class="text-lg font-semibold">3. El túnel</h3> | |
| <p class="text-gray-400 text-sm">Rachel trata de explicar lo sucedido en esa noche de desamparo. Sin embargo, existe un hueco en su memoria, un túnel del cual no puede huir. ¿Qué sucedió en realidad? ¿Está desperdiciando la cordura o existe algo más que está escondiendo?</p> | |
| </div> | |
| <div class="p-4 flex items-center"> | |
| <span class="text-gray-400">52 min</span> | |
| </div> | |
| </div> | |
| <div class="capitulo flex bg-gray-900 rounded-xl overflow-hidden transition-transform cursor-pointer"> | |
| <img src="https://i.pinimg.com/736x/8c/6c/26/8c6c26a7fb86b63e117d75f5e270b68b.jpg" alt="Episodio 4" class="w-40 h-24 object-cover"> | |
| <div class="p-4 flex-1"> | |
| <h3 class="text-lg font-semibold">4. No está loca</h3> | |
| <p class="text-gray-400 text-sm">Rachel vuelve a la vida de Anna y Tom, sin embargo, sus interrogantes acerca de lo que ocurrió no se detienen. Entre tanto, Anna comienza a cuestionarse por qué Rachel continúa apareciendo y qué secretos porta consigo.</p> | |
| </div> | |
| <div class="p-4 flex items-center"> | |
| <span class="text-gray-400">47 min</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold mb-4 text-red-500">Perspectiva de Megan</h3> | |
| <div class="space-y-4"> | |
| <div class="capitulo flex bg-gray-900 rounded-xl overflow-hidden transition-transform cursor-pointer"> | |
| <img src="https://i.pinimg.com/736x/64/86/2f/64862f5fbe4a479c316a29d773393c9f.jpg" alt="Episodio 5" class="w-40 h-24 object-cover"> | |
| <div class="p-4 flex-1"> | |
| <h3 class="text-lg font-semibold">5. No soy quien creen</h3> | |
| <p class="text-gray-400 text-sm">Megan vive una vida doble, una que nadie comprende. Las falsedades que ha estado experimentando la están capturando, y su universo empieza a derrumbarse cuando se topa con las repercusiones de sus secretos.</p> | |
| </div> | |
| <div class="p-4 flex items-center"> | |
| <span class="text-gray-400">50 min</span> | |
| </div> | |
| </div> | |
| <div class="capitulo flex bg-gray-900 rounded-xl overflow-hidden transition-transform cursor-pointer"> | |
| <img src="https://i.pinimg.com/736x/6e/d4/9a/6ed49a2e871e7275114e18487cea7ad0.jpg" alt="Episodio 6" class="w-40 h-24 object-cover"> | |
| <div class="p-4 flex-1"> | |
| <h3 class="text-lg font-semibold">6. Demasiado sola</h3> | |
| <p class="text-gray-400 text-sm">Megan confiesa su dolor y sus miedos a su terapeuta, pero incluso en su sinceridad, sigue ocultando la verdad. La soledad la consume, mientras algo oscuro del pasado amenaza con salir a la luz.</p> | |
| </div> | |
| <div class="p-4 flex items-center"> | |
| <span class="text-gray-400">49 min</span> | |
| </div> | |
| </div> | |
| <div class="capitulo flex bg-gray-900 rounded-xl overflow-hidden transition-transform cursor-pointer"> | |
| <img src="https://i.pinimg.com/736x/8d/91/a3/8d91a33fb5d4ec92c62547bf54f208ba.jpg" alt="Episodio 7" class="w-40 h-24 object-cover"> | |
| <div class="p-4 flex-1"> | |
| <h3 class="text-lg font-semibold">7. El secreto</h3> | |
| <p class="text-gray-400 text-sm">Megan recibe una visita inesperada que podría destruir su vida. El secreto que ha estado guardando durante tanto tiempo está a punto de ser revelado, y no hay vuelta atrás.</p> | |
| </div> | |
| <div class="p-4 flex items-center"> | |
| <span class="text-gray-400">53 min</span> | |
| </div> | |
| </div> | |
| <div class="capitulo flex bg-gray-900 rounded-xl overflow-hidden transition-transform cursor-pointer"> | |
| <img src="https://i.pinimg.com/736x/f9/c2/44/f9c244aa15cfbcabceef837332455322.jpg" alt="Episodio 8" class="w-40 h-24 object-cover"> | |
| <div class="p-4 flex-1"> | |
| <h3 class="text-lg font-semibold">8. Quise desaparecer</h3> | |
| <p class="text-gray-400 text-sm">Megan recuerda la noche que cambió su vida para siempre. La decisión que la llevó a un camino de no retorno. La verdad detrás de sus elecciones se revela, y las consecuencias son inevitables.</p> | |
| </div> | |
| <div class="p-4 flex items-center"> | |
| <span class="text-gray-400">51 min</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold mb-4 text-red-500">Perspectiva de Anna</h3> | |
| <div class="space-y-4"> | |
| <div class="capitulo flex bg-gray-900 rounded-xl overflow-hidden transition-transform cursor-pointer"> | |
| <img src="https://i.pinimg.com/736x/0c/e2/18/0ce218bbff323cc3a67d2b434b647b18.jpg" alt="Episodio 9" class="w-40 h-24 object-cover"> | |
| <div class="p-4 flex-1"> | |
| <h3 class="text-lg font-semibold">9. Algo me mira</h3> | |
| <p class="text-gray-400 text-sm">La vida de Anna se desmorona mientras su relación con Tom se vuelve cada vez más tensa. Ya no puede confiar en nadie, ni siquiera en sí misma. La paranoia y el miedo comienzan a consumirla.</p> | |
| </div> | |
| <div class="p-4 flex items-center"> | |
| <span class="text-gray-400">48 min</span> | |
| </div> | |
| </div> | |
| <div class="capitulo flex bg-gray-900 rounded-xl overflow-hidden transition-transform cursor-pointer"> | |
| <img src="https://i.pinimg.com/736x/e7/57/0c/e7570c4ec84290512d592bff090220f7.jpg" alt="Episodio 10" class="w-40 h-24 object-cover"> | |
| <div class="p-4 flex-1"> | |
| <h3 class="text-lg font-semibold">10. Demasiado cerca</h3> | |
| <p class="text-gray-400 text-sm">Anna se ve atrapada entre sus inseguridades y las acciones de Tom. Sus mentiras se acumulan, pero la verdad sigue siendo inalcanzable. Mientras tanto, el dolor de todos parece acercarse demasiado.</p> | |
| </div> | |
| <div class="p-4 flex items-center"> | |
| <span class="text-gray-400">52 min</span> | |
| </div> | |
| </div> | |
| <div class="capitulo flex bg-gray-900 rounded-xl overflow-hidden transition-transform cursor-pointer"> | |
| <img src="https://i.pinimg.com/736x/57/a7/31/57a731a70d7d44238e4b7d63f1dd610e.jpg" alt="Episodio 11" class="w-40 h-24 object-cover"> | |
| <div class="p-4 flex-1"> | |
| <h3 class="text-lg font-semibold">11. No vi el túnel</h3> | |
| <p class="text-gray-400 text-sm">La confusión y la desesperación llenan la mente de Anna cuando comienza a recordar detalles oscuros. Los fragmentos de su memoria la aterrorizan, mientras la realidad que enfrenta se vuelve más difícil de ignorar.</p> | |
| </div> | |
| <div class="p-4 flex items-center"> | |
| <span class="text-gray-400">49 min</span> | |
| </div> | |
| </div> | |
| <div class="capitulo flex bg-gray-900 rounded-xl overflow-hidden transition-transform cursor-pointer"> | |
| <img src="https://i.pinimg.com/736x/d3/6b/4e/d36b4e193eb5dc298e00a8100b738ce1.jpg" alt="Episodio 12" class="w-40 h-24 object-cover"> | |
| <div class="p-4 flex-1"> | |
| <h3 class="text-lg font-semibold">12. La verdad</h3> | |
| <p class="text-gray-400 text-sm">La verdad sale a la luz, desmoronando la vida de Anna. Las piezas encajan de una manera inesperada, revelando secretos que jamás imaginó. La angustia y la traición la envuelven mientras busca respuestas.</p> | |
| </div> | |
| <div class="p-4 flex items-center"> | |
| <span class="text-gray-400">55 min</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tab de detalles (oculto inicialmente) --> | |
| <div id="detalles-tab" class="hidden"> | |
| <h2 class="text-2xl font-semibold mb-6">Detalles</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Sobre La chica del tren</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Adaptación de la exitosa novela de Paula Hawkins que sigue a Rachel, una mujer que se obsesiona con una pareja aparentemente perfecta que ve desde el tren, hasta que presencia algo impactante. | |
| </p> | |
| <p class="text-gray-400"> | |
| Género: Thriller psicológico, Drama, Misterio | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Reparto</h3> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li>Sofia Belmar</li> | |
| <li>Amanda Luna</li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Contenido: </h3> | |
| <p class="text-gray-400">Violencia, Lenguaje Fuerte, Temas de Abuso, Drogas, Alcoholismo</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Detalles técnicos</h3> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li>Basado en: La chica del tren de Paula Hawkins</li> | |
| <li>Idioma: Inglés</li> | |
| <li>Subtítulos: Español</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tab de similares (oculto inicialmente) --> | |
| <div id="similares-tab" class="hidden"> | |
| <h2 class="text-2xl font-semibold mb-6">Series similares</h2> | |
| <div class="flex gap-4 overflow-x-auto scrollbar-hide pb-4"> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://images.cdn1.buscalibre.com/fit-in/360x360/01/b5/01b500597d555ef79a1b6e443ca3a0de.jpg" alt="Perdida" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Perdida</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTq8fRXJXjJeAYkM7upb9PJG8srLjYSjREsaQ&s" alt="La mujer en la ventana" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">La mujer en la ventana</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://images.cdn2.buscalibre.com/fit-in/360x360/15/3d/153dc117086de9018cb7c72c5f14ccf1.jpg" alt="Big Little Lies" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Big Little Lies</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://images.cdn1.buscalibre.com/fit-in/360x360/bb/d8/bbd8cd5ae7224654d31191ac95ac1220.jpg" alt="Sharp Objects" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">Sharp Objects</p> | |
| </div> | |
| <div class="libro min-w-[150px] bg-gray-800 rounded-lg p-3 text-center transition-transform cursor-pointer"> | |
| <img src="https://images.cdn3.buscalibre.com/fit-in/360x360/46/6b/466b61298129d120cc99189338a50c18.jpg" alt="El silencio de los corderos" class="w-full rounded mb-2"> | |
| <p class="text-gray-200">El silencio de los corderos</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Botón volver --> | |
| <button id="btnVolver" class="oculto fixed top-24 left-8 z-50 bg-gray-900 hover:bg-red-600 rounded-full px-5 py-3 text-white font-semibold shadow-lg transition-all flex items-center" onclick="presionarVolver()"> | |
| <i class="bi bi-arrow-left mr-2"></i> Volver | |
| </button> | |
| </div> | |
| <script> | |
| // Profile selection functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const profiles = document.querySelectorAll('.profile'); | |
| profiles.forEach(profile => { | |
| profile.addEventListener('click', function() { | |
| const profileName = this.querySelector('.profile-name').textContent; | |
| selectProfile(profileName); | |
| }); | |
| }); | |
| function selectProfile(profileName) { | |
| const profileScreen = document.getElementById('profile-selection'); | |
| profileScreen.style.animation = 'fadeOut 0.4s ease-in-out forwards'; | |
| setTimeout(() => { | |
| profileScreen.style.display = 'none'; | |
| document.getElementById('profile-display').textContent = profileName; | |
| document.getElementById('main-header').classList.remove('oculto'); | |
| document.getElementById('pagina-inicio').classList.remove('oculto'); | |
| document.getElementById('main-header').style.animation = 'fadeIn 0.4s ease-in-out forwards'; | |
| document.getElementById('pagina-inicio').style.animation = 'fadeIn 0.4s ease-in-out forwards'; | |
| }, 400); | |
| } | |
| }); | |
| // Book detail page functions | |
| function mostrarChicaDelTren() { | |
| document.getElementById('pagina-inicio').classList.add('oculto'); | |
| document.getElementById('pagina-serie').classList.remove('oculto'); | |
| const btnVolver = document.getElementById('btnVolver'); | |
| btnVolver.classList.remove('oculto'); | |
| btnVolver.style.animation = 'none'; | |
| void btnVolver.offsetWidth; | |
| btnVolver.style.animation = 'fadeIn 0.4s ease-in-out forwards'; | |
| } | |
| function volverAlInicio() { | |
| document.getElementById('pagina-serie').classList.add('oculto'); | |
| document.getElementById('pagina-inicio').classList.remove('oculto'); | |
| document.getElementById('btnVolver').classList.add('oculto'); | |
| document.getElementById('btnVolver').style.animation = 'none'; | |
| } | |
| function presionarVolver() { | |
| const btn = document.getElementById('btnVolver'); | |
| btn.classList.add('bg-red-600'); | |
| setTimeout(() => { | |
| volverAlInicio(); | |
| btn.classList.remove('bg-red-600'); | |
| }, 300); | |
| } | |
| // Function to change tabs | |
| function changeTab(tabName) { | |
| // Hide all tabs | |
| document.getElementById('episodios-tab').classList.add('hidden'); | |
| document.getElementById('detalles-tab').classList.add('hidden'); | |
| document.getElementById('similares-tab').classList.add('hidden'); | |
| // Show selected tab | |
| document.getElementById(tabName + '-tab').classList.remove('hidden'); | |
| // Update active tab style | |
| const tabs = document.querySelectorAll('.tab'); | |
| tabs.forEach(tab => { | |
| tab.classList.remove('tab-active'); | |
| }); | |
| event.target.classList.add('tab-active'); | |
| } | |
| </script> | |
| </body> | |
| </html> |