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, підтримують кирилицю).

Важливо знати

Це шаблон інтерфейсу. Плеєр демонстраційний - до нього потрібно підключити власне відео; форма зворотного зв'язку не надсилає дані - підключіть свій обробник; дані користувачів зберігаються лише в браузері. Місця для підключення позначені коментарями в коді.