KAGERO — готовый HTML-шаблон для сайта, где смотрят аниме-фильмы и сериалы. Тёмная гамма с коралловым акцентом, крупная выразительная типографика и много живого движения: слайдер с летящими лепестками, плавное появление блоков при прокрутке, карусели с перетаскиванием, анимированная рулетка. Шаблон написан на чистом HTML, CSS и JavaScript — без фреймворков, сборки и зависимостей: достаточно загрузить файлы на любой хостинг.

Страницы

• Главная — слайдер с рекомендациями, бегущая строка жанров, карусели «Продолжить просмотр», «Новые серии», «Скоро выйдет» с живым обратным отсчётом, «Популярное» и «Фильмы», расписание по дням, топ недели, тематические подборки и блок случайного аниме.

• Каталог — поиск, фильтры по типу, статусу, жанрам, году и рейтингу, четыре вида сортировки, вид плиткой или списком, подгрузка «Показать ещё». На телефоне фильтры открываются выдвижной панелью.

• Просмотр — плеер с перемоткой, громкостью, скоростью, качеством, выбором озвучки, кнопкой «Пропустить опенинг», полноэкранным режимом и горячими клавишами. Сетка серий с отметками просмотренных, описание, рейтинг зрителей и собственная оценка, похожие тайтлы. Комментарии со скрытием спойлеров, лайками, ответами и сортировкой.

• Случайное аниме — барабан из постеров с фильтром по жанру и типу и историей выпавших тайтлов.

• Расписание — неделя с датами, лента дня с линией «Сейчас», статусы «Вышла» и «через N минут», подписка на тайтл и ближайшие премьеры с отсчётом.

• Профиль — продолжение просмотра с прогрессом, избранное, история, статистика любимых жанров, достижения и настройки (имя, автовоспроизведение, пропуск опенинга).

• Обратная связь — форма с выбором темы, проверкой полей, загрузкой скриншота и экраном благодарности, контакты и частые вопросы.

• Страница 404.

Особенности

• Адаптивная вёрстка: от 375 px до широких мониторов.

• Карусели с кнопками, прокруткой и перетаскиванием мышью.

• Анимации на CSS и JavaScript; при системной настройке «уменьшить движение» крупные эффекты отключаются, а плавные появления остаются.

• Избранное, прогресс просмотра, история, оценки и комментарии сохраняются в браузере посетителя — шаблон «живой» сразу после загрузки.

• Демо-режим: добавьте ?demo к адресу любой страницы, и профиль заполнится примерами.

• Обложки генерируются кодом (абстрактные пейзажи), поэтому шаблон не содержит чужих изображений. Все тайтлы, студии и пользователи вымышлены.

• Доступность: семантическая разметка, подписи для кнопок, видимый фокус, управление с клавиатуры.

• Готов к публикации: favicon, метатеги для превью ссылок, robots.txt, страница 404, инструкция README.

Что внутри

• 8 HTML-страниц;

• css/style.css — все стили и дизайн-токены (цвета, радиусы, шрифты) в одном месте;

• js/data.js — демо-данные, легко заменить своими или запросом к API;

• js/app.js — шапка, подвал, карточки, карусели, хранилище;

• js/pages.js — логика страниц;

• README.txt — как загрузить на хостинг и что заменить.

Шрифты: Unbounded и Manrope (Google Fonts, поддерживают кириллицу).

Важно знать

Это шаблон интерфейса. Плеер демонстрационный — к нему нужно подключить своё видео; форма обратной связи не отправляет данные — подключите свой обработчик; данные пользователей хранятся только в браузере. Места для подключения отмечены комментариями в коде.