KAGERO est un modèle HTML prêt à l'emploi pour un site où l'on regarde des films et des séries d'anime. Gamme sombre avec un accent corail, grande typographie expressive et beaucoup de mouvement : un slider avec des pétales qui volent, apparition en douceur des blocs au défilement, carrousels à faire glisser, roulette animée. Le modèle est écrit en HTML, CSS et JavaScript purs, sans framework, sans compilation ni dépendances : il suffit de téléverser les fichiers sur n'importe quel hébergement.

Pages

• Accueil - slider de recommandations, bandeau défilant de genres, carrousels « Reprendre la lecture », « Nouveaux épisodes », « Bientôt disponible » avec compte à rebours en direct, « Populaires » et « Films », programme par jour, top de la semaine, sélections thématiques et bloc d'anime aléatoire.

• Catalogue - recherche, filtres par type, statut, genres, année et note, quatre modes de tri, affichage en mosaïque ou en liste, chargement progressif « Afficher plus ». Sur mobile, les filtres s'ouvrent dans un panneau coulissant.

• Visionnage - lecteur avec avance et retour rapides, volume, vitesse, qualité, choix du doublage, bouton « Passer le générique », plein écran et raccourcis clavier. Grille d'épisodes avec marques des épisodes vus, description, note des spectateurs et note personnelle, titres similaires. Commentaires avec spoilers masqués, mentions « J'aime », réponses et tri.

• Anime aléatoire - un tambour d'affiches avec filtre par genre et type et historique des titres tirés.

• Programme - semaine avec dates, fil du jour avec la ligne « Maintenant », statuts « Sorti » et « dans N minutes », abonnement à un titre et prochaines sorties avec compte à rebours.

• Profil - reprise du visionnage avec progression, favoris, historique, statistiques des genres préférés, succès et réglages (nom, lecture automatique, passage du générique).

• Contact - formulaire avec choix du sujet, vérification des champs, envoi de capture d'écran et écran de remerciement, coordonnées et questions fréquentes.

• Page 404.

Caractéristiques

• Mise en page adaptative : de 375 px aux grands écrans.

• Carrousels avec boutons, défilement et glissement à la souris.

• Animations en CSS et JavaScript ; si le système est réglé sur « réduire les animations », les grands effets sont désactivés et les apparitions en douceur sont conservées.

• Favoris, progression, historique, notes et commentaires sont enregistrés dans le navigateur du visiteur : le modèle est « vivant » dès son téléversement.

• Mode démo : ajoutez ?demo à l'adresse de n'importe quelle page et le profil se remplira d'exemples.

• Les jaquettes sont générées par le code (paysages abstraits), le modèle ne contient donc aucune image tierce. Tous les titres, studios et utilisateurs sont fictifs.

• Accessibilité : balisage sémantique, libellés des boutons, focus visible, navigation au clavier.

• Prêt à publier : favicon, balises meta pour l'aperçu des liens, robots.txt, page 404, instructions README.

Contenu du pack

• 8 pages HTML ;

• css/style.css : tous les styles et les design tokens (couleurs, rayons, polices) au même endroit ;

• js/data.js : données de démonstration, faciles à remplacer par les vôtres ou par une requête API ;

• js/app.js : en-tête, pied de page, cartes, carrousels, stockage ;

• js/pages.js : logique des pages ;

• README.txt : comment le téléverser sur l'hébergement et que remplacer.

Polices : Unbounded et Manrope (Google Fonts, compatibles avec le cyrillique).

À savoir

Il s'agit d'un modèle d'interface. Le lecteur est une démonstration : vous devrez y connecter votre propre vidéo ; le formulaire de contact n'envoie pas de données, branchez votre propre gestionnaire ; les données des utilisateurs sont stockées uniquement dans le navigateur. Les points de connexion sont signalés par des commentaires dans le code.