KAGERO es una plantilla HTML lista para usar en un sitio donde se ven películas y series de anime. Gama oscura con acento coral, tipografía grande y expresiva y mucho movimiento: un slider con pétalos al vuelo, aparición suave de bloques al hacer scroll, carruseles que se arrastran y una ruleta animada. La plantilla está escrita en HTML, CSS y JavaScript puros, sin frameworks, compilación ni dependencias: basta con subir los archivos a cualquier hosting.

Páginas

• Inicio - slider con recomendaciones, cinta en movimiento de géneros, carruseles "Continuar viendo", "Nuevos episodios", "Próximamente" con cuenta atrás en vivo, "Popular" y "Películas", calendario por días, top de la semana, selecciones temáticas y un bloque de anime aleatorio.

• Catálogo - búsqueda, filtros por tipo, estado, géneros, año y valoración, cuatro tipos de ordenación, vista en mosaico o en lista y carga progresiva con "Mostrar más". En el móvil los filtros se abren en un panel deslizante.

• Reproducción - reproductor con avance y retroceso, volumen, velocidad, calidad, elección de doblaje, botón "Saltar intro", pantalla completa y atajos de teclado. Cuadrícula de episodios con marca de los vistos, descripción, valoración de los espectadores y puntuación propia, títulos similares. Comentarios con spoilers ocultos, me gusta, respuestas y ordenación.

• Anime aleatorio - un tambor de pósteres con filtro por género y tipo e historial de los títulos obtenidos.

• Calendario - semana con fechas, cinta del día con la línea "Ahora", estados "Emitido" y "en N minutos", suscripción a un título y próximos estrenos con cuenta atrás.

• Perfil - continuar viendo con progreso, favoritos, historial, estadísticas de géneros preferidos, logros y ajustes (nombre, reproducción automática, saltar intro).

• Contacto - formulario con selección de tema, validación de campos, subida de captura de pantalla y pantalla de agradecimiento, contactos y preguntas frecuentes.

• Página 404.

Características

• Maquetación adaptable: desde 375 px hasta monitores panorámicos.

• Carruseles con botones, desplazamiento y arrastre con el ratón.

• Animaciones en CSS y JavaScript; si el sistema tiene activada la opción "reducir movimiento", los efectos grandes se desactivan y se mantienen las apariciones suaves.

• Favoritos, progreso de visionado, historial, valoraciones y comentarios se guardan en el navegador del visitante, así que la plantilla cobra vida nada más subirla.

• Modo demo: añade ?demo a la dirección de cualquier página y el perfil se llenará de ejemplos.

• Las portadas se generan con código (paisajes abstractos), por lo que la plantilla no contiene imágenes ajenas. Todos los títulos, estudios y usuarios son ficticios.

• Accesibilidad: maquetación semántica, etiquetas en los botones, foco visible, control desde el teclado.

• Lista para publicar: favicon, metaetiquetas para la vista previa de enlaces, robots.txt, página 404 e instrucciones en README.

Qué incluye

• 8 páginas HTML;

• css/style.css: todos los estilos y los tokens de diseño (colores, radios, fuentes) en un solo lugar;

• js/data.js: datos de demostración, fáciles de sustituir por los tuyos o por una consulta a una API;

• js/app.js: cabecera, pie de página, tarjetas, carruseles, almacenamiento;

• js/pages.js: lógica de las páginas;

• README.txt: cómo subirlo al hosting y qué reemplazar.

Fuentes: Unbounded y Manrope (Google Fonts, compatibles con el cirílico).

Importante

Es una plantilla de interfaz. El reproductor es de demostración: tendrás que conectar tu propio vídeo; el formulario de contacto no envía datos, conecta tu propio gestor; los datos de los usuarios se guardan solo en el navegador. Los puntos de conexión están marcados con comentarios en el código.