Aaron/Kino-Website
2
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design bei "Limitierte Specials" angepasst ; FSK-Logo eingefügt ; Bei "Aktuelle Filme" Saalanzeige eingefügt ; Anzeige in Dark- und Lightmode bei "Aktuelle Filme" und bei "Zahlungsmethoden" in "Mein Konto" verbessert ; Auf der Startseite bei "Jetzt läuft" aufklappbares Menü emit Blur Effekt eingefügt

Browse Source
This commit is contained in:
the-eagle16
2026-05-05 12:59:07 +02:00
parent 10883aa381
commit 3653bb8078
16 changed files with 776 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
main.js
View File

@@ -37,7 +37,9 @@ document.addEventListener("DOMContentLoaded", () => {
heroDots: document.getElementById("hero-dots"),
heroTitle: document.getElementById("hero-title"),
heroText: document.getElementById("hero-text"),
nowRunningShell: document.getElementById("now-running-shell"),
nowRunningRow: document.getElementById("now-running-row"),
nowRunningToggle: document.getElementById("now-running-toggle"),
movieProgramList: document.getElementById("movie-program-list"),
checkoutBtn: document.getElementById("btn-checkout-final"),
backHomeBtn: document.getElementById("btn-back-home"),
@@ -62,8 +64,8 @@ document.addEventListener("DOMContentLoaded", () => {
duration: 148,
fsk: "6",
description: "In Walt Disney Animation Studios’ \"Zoomania 2\" geraten die tierischen Detektive Judy Hopps und Nick Wilde auf die rätselhafte Spur eines geheimnisvollen Reptils, das in Zoomania auftaucht und die Metropole völlig auf den Kopf stellt: Gary De’Snake! ",
poster: "img/zoomania-2.jpg",
backdrop: "img/zoomania-2.jpg"
poster: "img/Zoomania-2.jpg",
backdrop: "img/Zoomania-2.jpg"
},
{
title: "Shelter",
@@ -403,6 +405,38 @@ document.addEventListener("DOMContentLoaded", () => {
.replaceAll('"', """)
.replaceAll("'", "'");
const getMovieHalls = (movie) => {
const halls = new Set();
movie?.schedule?.forEach((day) => {
day.showings?.forEach((showing) => halls.add(showing.hall));
});
return Array.from(halls);
};
const getFskLogoPath = (movie) => {
if (movie?.fskLogo) {
return movie.fskLogo;
}
const fskValue = String(movie?.fsk || "").trim();
return fskValue && fskValue !== "?" ? `img/fsk-${fskValue}.png` : "";
};
const renderFskMetaLogo = (movie) => {
const fskValue = escapeHtml(movie.fsk || "?");
const logoPath = getFskLogoPath(movie);
const imageMarkup = logoPath
? `<img src="${escapeHtml(logoPath)}" alt="FSK ${fskValue}" onerror="this.parentElement.classList.add('missing-logo'); this.remove();">`
: "";
return `
<span class="fsk-meta-logo ${logoPath ? "has-logo" : "missing-logo"}" data-fsk="${fskValue}">
${imageMarkup}
<span>FSK ${fskValue}</span>
</span>
`;
};
const formatDateShort = (dateObj) => {
const day = String(dateObj.getDate()).padStart(2, "0");
const month = String(dateObj.getMonth() + 1).padStart(2, "0");
@@ -550,6 +584,12 @@ document.addEventListener("DOMContentLoaded", () => {
</div>
</article>
`).join("");
if (ui.nowRunningShell && ui.nowRunningToggle) {
ui.nowRunningShell.classList.add("is-collapsed");
ui.nowRunningToggle.setAttribute("aria-expanded", "false");
ui.nowRunningToggle.setAttribute("aria-label", "Weitere Filme anzeigen");
}
};
const renderScheduleRows = (programIndex, dayIndex) => {
@@ -585,17 +625,23 @@ document.addEventListener("DOMContentLoaded", () => {
<small>${escapeHtml(formatDateShort(day.date))}</small>
</button>
`).join("");
const hallPills = getMovieHalls(movie).map((hall) => `
<span>${escapeHtml(hall)}</span>
`).join("");
return `
<article class="detailed-card program-card reveal-on-scroll" data-program-index="${programIndex}">
<div class="card-left">
<img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}">
<span class="fsk fsk-${escapeHtml(movie.fsk)}">${escapeHtml(movie.fsk)}</span>
</div>
<div class="card-right">
<div class="card-header">
<h2>${escapeHtml(movie.title)}</h2>
<span class="duration">${movie.duration} Min. | ${escapeHtml(movie.genre)} | FSK: ${escapeHtml(movie.fsk)}</span>
<span class="duration movie-meta-line">${movie.duration} Min. | ${escapeHtml(movie.genre)} | FSK: ${renderFskMetaLogo(movie)}</span>
</div>
<div class="program-halls-summary">
<strong>Kinosaal</strong>
<div>${hallPills}</div>
</div>
<p class="description">${escapeHtml(movie.description)}</p>
@@ -690,6 +736,12 @@ document.addEventListener("DOMContentLoaded", () => {
showMovieList();
});
ui.nowRunningToggle?.addEventListener("click", () => {
const isCollapsed = ui.nowRunningShell?.classList.toggle("is-collapsed");
ui.nowRunningToggle.setAttribute("aria-expanded", String(!isCollapsed));
ui.nowRunningToggle.setAttribute("aria-label", isCollapsed ? "Weitere Filme anzeigen" : "Filme einklappen");
});
ui.checkoutBtn?.addEventListener("click", showCheckoutStart);
ui.backHomeBtn?.addEventListener("click", showHome);
};