KAGERO ist ein fertiges HTML-Template für eine Website zum Ansehen von Anime-Filmen und -Serien. Dunkle Farben mit korallfarbenen Akzenten, große, ausdrucksstarke Typografie und lebendige Bewegung: ein Slider mit fliegenden Blütenblättern, sanftes Einblenden beim Scrollen, per Ziehen bedienbare Karussells und ein animiertes Zufallsrad. Das Template ist in reinem HTML, CSS und JavaScript geschrieben, ohne Frameworks, Build-Prozess oder Abhängigkeiten: Lade die Dateien einfach bei einem beliebigen Hosting-Anbieter hoch.

Seiten

• Startseite - Empfehlungs-Slider, Genre-Laufband, Karussells für „Weiterschauen“, „Neue Folgen“, „Demnächst“ mit laufendem Countdown, „Beliebt“ und „Filme“, Tagesprogramm, Wochen-Topliste, thematische Sammlungen und ein Bereich für zufällige Anime.

• Katalog - Suche, Filter nach Typ, Status, Genres, Jahr und Bewertung, vier Sortieroptionen, Kachel- oder Listenansicht und Nachladen über „Mehr anzeigen“. Auf dem Smartphone öffnen sich die Filter als ausziehbares Panel.

• Wiedergabe - Player mit Spulfunktion, Lautstärke, Geschwindigkeit, Qualität, Auswahl der Synchronfassung, Schaltfläche „Intro überspringen“, Vollbildmodus und Tastenkürzeln. Folgenraster mit Markierung bereits gesehener Folgen, Beschreibung, Zuschauerbewertung und eigener Bewertung sowie ähnlichen Titeln. Kommentare mit ausgeblendeten Spoilern, Likes, Antworten und Sortierung.

• Zufälliger Anime - Poster-Roulette mit Filtern nach Genre und Typ sowie Verlauf der ausgelosten Titel.

• Programmübersicht - Wochenansicht mit Datum, Tagesablauf mit „Jetzt“-Linie, Statusanzeigen „Veröffentlicht“ und „in N Minuten“, Abonnieren von Titeln und kommende Premieren mit Countdown.

• Profil - Weiterschauen mit Fortschrittsanzeige, Favoriten, Verlauf, Statistiken zu Lieblingsgenres, Erfolge und Einstellungen (Name, automatische Wiedergabe, Intro überspringen).

• Kontakt - Formular mit Themenauswahl, Feldvalidierung, Screenshot-Upload und Dankeseite sowie Kontaktdaten und häufige Fragen.

• 404-Seite.

Besonderheiten

• Responsives Layout: von 375 px bis zu breiten Monitoren.

• Karussells mit Schaltflächen, Scrollfunktion und Ziehen per Maus.

• Animationen mit CSS und JavaScript; bei aktivierter Systemeinstellung „Bewegung reduzieren“ werden große Effekte deaktiviert, sanfte Einblendungen bleiben erhalten.

• Favoriten, Wiedergabefortschritt, Verlauf, Bewertungen und Kommentare werden im Browser des Besuchers gespeichert. Das Template ist direkt nach dem Laden interaktiv.

• Demomodus: Ergänze die Adresse einer beliebigen Seite um ?demo, um das Profil mit Beispieldaten zu füllen.

• Cover werden per Code erzeugt (abstrakte Landschaften), daher enthält das Template keine fremden Bilder. Alle Titel, Studios und Nutzer sind frei erfunden.

• Barrierefreiheit: semantisches Markup, beschriftete Schaltflächen, sichtbarer Fokus und Tastaturbedienung.

• Bereit zur Veröffentlichung: Favicon, Metatags für Linkvorschauen, robots.txt, 404-Seite und README-Anleitung.

Inhalt

• 8 HTML-Seiten;

• css/style.css - alle Stile und Design-Tokens (Farben, Radien, Schriftarten) an einem Ort;

• js/data.js - Demodaten, einfach durch eigene Daten oder eine API-Abfrage ersetzbar;

• js/app.js - Kopf- und Fußbereich, Karten, Karussells, Datenspeicher;

• js/pages.js - Seitenlogik;

• README.txt - Anleitung zum Hochladen auf einen Webhost und zu den nötigen Anpassungen.

Schriftarten: Unbounded und Manrope (Google Fonts, unterstützen kyrillische Zeichen).

Wichtige Hinweise

Dies ist ein Oberflächen-Template. Der Player dient zur Demonstration und muss mit eigenen Videos verbunden werden. Das Kontaktformular sendet keine Daten, binde dafür deinen eigenen Handler ein. Nutzerdaten werden ausschließlich im Browser gespeichert. Die Integrationsstellen sind im Code durch Kommentare gekennzeichnet.