85 lines
3.3 KiB
Plaintext
85 lines
3.3 KiB
Plaintext
<header class="hero">
|
|
<div id="hero-slider" class="hero-slider"></div>
|
|
<div class="hero-overlay">
|
|
<span class="badge">Neu im Kino</span>
|
|
<h1 id="hero-title">Jetzt im Kino</h1>
|
|
<p id="hero-text">Erlebe die neuesten Highlights auf der großen Leinwand.</p>
|
|
<button class="btn-primary" id="hero-booking-btn">Jetzt Tickets kaufen</button>
|
|
<div id="hero-dots" class="hero-dots"></div>
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
import { movieCatalog } from "../scripts/bigConstants";
|
|
|
|
const ui = {
|
|
heroSlider: document.getElementById("hero-slider"),
|
|
heroDots: document.getElementById("hero-dots"),
|
|
heroTitle: document.getElementById("hero-title"),
|
|
heroText: document.getElementById("hero-text"),
|
|
heroBookingBtn: document.getElementById("hero-booking-btn"),
|
|
};
|
|
|
|
let heroItems = movieCatalog.slice(0, 5);
|
|
let heroIndex = 0;
|
|
let heroTimer: any = null;
|
|
|
|
const escapeHtml = (value: string) => String(value || "")
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll('"', """)
|
|
.replaceAll("'", "'");
|
|
|
|
const setHeroSlide = (index: number) => {
|
|
if (!heroItems.length || !ui.heroSlider) return;
|
|
heroIndex = (index + heroItems.length) % heroItems.length;
|
|
|
|
ui.heroSlider.querySelectorAll(".hero-slide").forEach((slide, slideIndex) => {
|
|
slide.classList.toggle("active", slideIndex === heroIndex);
|
|
});
|
|
|
|
ui.heroDots?.querySelectorAll(".hero-dot").forEach((dot, dotIndex) => {
|
|
dot.classList.toggle("active", dotIndex === heroIndex);
|
|
});
|
|
|
|
const activeMovie = heroItems[heroIndex];
|
|
if (ui.heroTitle) ui.heroTitle.textContent = activeMovie.title;
|
|
if (ui.heroText) ui.heroText.textContent = `${activeMovie.genre} • ${activeMovie.duration} Min. • Heute erste Vorstellung um 13:00 Uhr.`;
|
|
};
|
|
|
|
const renderHero = () => {
|
|
if (!ui.heroSlider || !heroItems.length) return;
|
|
|
|
ui.heroSlider.innerHTML = heroItems.map((movie: any, index: number) => `
|
|
<div class="hero-slide ${index === 0 ? "active" : ""}" style="background-image: linear-gradient(118deg, rgba(0,0,0,0.34), rgba(0,0,0,0.04)), url('${escapeHtml(movie.backdrop || movie.poster)}');"></div>
|
|
`).join("");
|
|
|
|
if (ui.heroDots) {
|
|
ui.heroDots.innerHTML = heroItems.map((_: any, index: number) => `
|
|
<button type="button" class="hero-dot ${index === 0 ? "active" : ""}" data-hero-index="${index}"></button>
|
|
`).join("");
|
|
|
|
ui.heroDots.addEventListener("click", (event: any) => {
|
|
const dot = (event.target as HTMLElement).closest(".hero-dot") as HTMLElement;
|
|
if (!dot) return;
|
|
setHeroSlide(Number(dot.dataset.heroIndex || 0));
|
|
if (heroTimer) {
|
|
clearInterval(heroTimer);
|
|
heroTimer = setInterval(() => setHeroSlide(heroIndex + 1), 6500);
|
|
}
|
|
});
|
|
}
|
|
|
|
setHeroSlide(0);
|
|
if (heroTimer) clearInterval(heroTimer);
|
|
heroTimer = setInterval(() => setHeroSlide(heroIndex + 1), 6500);
|
|
};
|
|
|
|
ui.heroBookingBtn?.addEventListener("click", () => {
|
|
window.location.href = "/movies";
|
|
});
|
|
|
|
renderHero();
|
|
</script>
|