From 9e599e496cca55f959242e5b2420440d084d0c75 Mon Sep 17 00:00:00 2001 From: Jannis Heydemann Date: Wed, 29 Apr 2026 09:35:10 +0200 Subject: [PATCH 01/18] Aarons Erster Commit --- .gitattributes | 1 + account.js | 450 ++++ booking.js | 352 +++ cart.js | 199 ++ checkout.js | 232 ++ img/Apfelschorle.png | 3 + img/Dolby.png | 3 + img/Schorle.png | 3 + img/Zoomania-2.jpg | 3 + img/applepay.png | 3 + img/astronautpopcorn.jpg | 3 + img/bladerunner2049.jpg | 3 + img/cola-light.png | 3 + img/cola-zero.png | 3 + img/cola.png | 3 + img/dbox.jpg | 3 + img/derAustronaut.jpg | 3 + img/fallguy.jpg | 3 + img/fanta.png | 3 + img/fuze-tea.png | 3 + img/gangstergang.jpg | 3 + img/gangstergang2.png | 3 + img/glennkill.jpg | 3 + img/goat.jpg | 3 + img/googlepay.png | 3 + img/haribo.png | 3 + img/homefront.jpg | 3 + img/hoppers.jpg | 3 + img/hopperskidsmenu.jpg | 3 + img/hopperspopcornmetall.jpg | 3 + img/hopperspopcornwood.png | 3 + img/klarna.png | 3 + img/käsedip.png | 3 + img/mandalorian.jpeg | 3 + img/mariogalaxy.jpg | 3 + img/mariokidsmenu.png | 3 + img/marioyoshipopcorn.png | 3 + img/mastercard.png | 3 + img/masteruniverse.jpg | 3 + img/meg.JPG | 3 + img/meg2.jpg | 3 + img/menu-big.png | 3 + img/minionsmonsters.jpg | 3 + img/mms.png | 3 + img/monsterag.png | 3 + img/monsteruni.jpg | 3 + img/mutiny.jpg | 3 + img/nachokombiklein.png | 3 + img/nachos.jpg | 3 + img/nachosnormal.png | 3 + img/paypal.png | 3 + img/popcorn-big.png | 3 + img/popcorn-klein.png | 3 + img/popcorn-mittel.png | 3 + img/popcorn.jpg | 3 + img/riegel.png | 3 + img/salsadip.png | 3 + img/screamdoorpopcorn.jpg | 3 + img/screamvii.jpg | 3 + img/shelter.jpg | 3 + img/solomio.png | 3 + img/sourdip.png | 3 + img/spezi.png | 3 + img/spidermannewday.jpg | 3 + img/sprite.png | 3 + img/super-mario-galaxy-banner.jpg | 3 + img/toystory1.jpg | 3 + img/toystory2.jpg | 3 + img/toystory3.jpg | 3 + img/toystory4.jpg | 3 + img/toystory5.png | 3 + img/visa.png | 3 + img/wasser.png | 3 + img/zoomania-popcorn.jpg | 3 + img/zoomaniakidsmenu.jpg | 3 + index.html | 959 +++++++ main.js | 1092 ++++++++ style.css | 3867 +++++++++++++++++++++++++++++ 78 files changed, 7362 insertions(+) create mode 100644 .gitattributes create mode 100644 account.js create mode 100644 booking.js create mode 100644 cart.js create mode 100644 checkout.js create mode 100644 img/Apfelschorle.png create mode 100644 img/Dolby.png create mode 100644 img/Schorle.png create mode 100644 img/Zoomania-2.jpg create mode 100644 img/applepay.png create mode 100644 img/astronautpopcorn.jpg create mode 100644 img/bladerunner2049.jpg create mode 100644 img/cola-light.png create mode 100644 img/cola-zero.png create mode 100644 img/cola.png create mode 100644 img/dbox.jpg create mode 100644 img/derAustronaut.jpg create mode 100644 img/fallguy.jpg create mode 100644 img/fanta.png create mode 100644 img/fuze-tea.png create mode 100644 img/gangstergang.jpg create mode 100644 img/gangstergang2.png create mode 100644 img/glennkill.jpg create mode 100644 img/goat.jpg create mode 100644 img/googlepay.png create mode 100644 img/haribo.png create mode 100644 img/homefront.jpg create mode 100644 img/hoppers.jpg create mode 100644 img/hopperskidsmenu.jpg create mode 100644 img/hopperspopcornmetall.jpg create mode 100644 img/hopperspopcornwood.png create mode 100644 img/klarna.png create mode 100644 img/käsedip.png create mode 100644 img/mandalorian.jpeg create mode 100644 img/mariogalaxy.jpg create mode 100644 img/mariokidsmenu.png create mode 100644 img/marioyoshipopcorn.png create mode 100644 img/mastercard.png create mode 100644 img/masteruniverse.jpg create mode 100644 img/meg.JPG create mode 100644 img/meg2.jpg create mode 100644 img/menu-big.png create mode 100644 img/minionsmonsters.jpg create mode 100644 img/mms.png create mode 100644 img/monsterag.png create mode 100644 img/monsteruni.jpg create mode 100644 img/mutiny.jpg create mode 100644 img/nachokombiklein.png create mode 100644 img/nachos.jpg create mode 100644 img/nachosnormal.png create mode 100644 img/paypal.png create mode 100644 img/popcorn-big.png create mode 100644 img/popcorn-klein.png create mode 100644 img/popcorn-mittel.png create mode 100644 img/popcorn.jpg create mode 100644 img/riegel.png create mode 100644 img/salsadip.png create mode 100644 img/screamdoorpopcorn.jpg create mode 100644 img/screamvii.jpg create mode 100644 img/shelter.jpg create mode 100644 img/solomio.png create mode 100644 img/sourdip.png create mode 100644 img/spezi.png create mode 100644 img/spidermannewday.jpg create mode 100644 img/sprite.png create mode 100644 img/super-mario-galaxy-banner.jpg create mode 100644 img/toystory1.jpg create mode 100644 img/toystory2.jpg create mode 100644 img/toystory3.jpg create mode 100644 img/toystory4.jpg create mode 100644 img/toystory5.png create mode 100644 img/visa.png create mode 100644 img/wasser.png create mode 100644 img/zoomania-popcorn.jpg create mode 100644 img/zoomaniakidsmenu.jpg create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..20c5e04 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +img/** filter=lfs diff=lfs merge=lfs -text diff --git a/account.js b/account.js new file mode 100644 index 0000000..2b7781a --- /dev/null +++ b/account.js @@ -0,0 +1,450 @@ +function readStorageJson(key, fallbackValue) { + const raw = localStorage.getItem(key); + + if (!raw || raw === "undefined" || raw === "null") { + return fallbackValue; + } + + try { + return JSON.parse(raw); + } catch (error) { + console.warn(`Konnte LocalStorage-Wert fuer ${key} nicht lesen.`, error); + return fallbackValue; + } +} + +function normalizeUser(user) { + if (!user || typeof user !== "object") { + return null; + } + + return { + firstName: user.firstName || "", + lastName: user.lastName || "", + email: user.email || "", + password: user.password || "", + orders: Array.isArray(user.orders) ? user.orders : [], + paymentMethods: Array.isArray(user.paymentMethods) ? user.paymentMethods : [] + }; +} + +function escapeHtml(value) { + return String(value || "") + .replaceAll("&", "&") + .replaceAll("<", "<") + .replaceAll(">", ">") + .replaceAll('"', """) + .replaceAll("'", "'"); +} + +function formatEuro(value) { + return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`; +} + +function persistUsers() { + localStorage.setItem("eagleUsers", JSON.stringify(users)); +} + +function persistCurrentUser() { + if (currentUser) { + localStorage.setItem("currentUser", JSON.stringify(currentUser)); + } else { + localStorage.removeItem("currentUser"); + } +} + +let users = readStorageJson("eagleUsers", []); +if (!Array.isArray(users)) { + users = []; +} +users = users.map(normalizeUser).filter(Boolean); + +let currentUser = normalizeUser(readStorageJson("currentUser", null)); +if (currentUser && currentUser.email) { + const storedMatch = users.find((user) => user.email === currentUser.email); + if (storedMatch) { + currentUser = storedMatch; + } else { + users.push(currentUser); + persistUsers(); + } +} + +function registerUser() { + const firstName = document.getElementById("reg-firstname")?.value.trim() || ""; + const lastName = document.getElementById("reg-lastname")?.value.trim() || ""; + const email = (document.getElementById("reg-email")?.value.trim() || "").toLowerCase(); + const password = document.getElementById("reg-password")?.value || ""; + + if (!firstName || !lastName || !email || !password) { + alert("Bitte fuelle alle Felder aus."); + return; + } + + if (!email.includes("@")) { + alert("Bitte gib eine gueltige E-Mail-Adresse ein."); + return; + } + + const existingUser = users.find((user) => user.email.toLowerCase() === email); + if (existingUser) { + alert("E-Mail bereits registriert"); + return; + } + + const newUser = { + firstName, + lastName, + email, + password, + orders: [], + paymentMethods: [] + }; + + users.push(newUser); + currentUser = newUser; + + persistUsers(); + persistCurrentUser(); + + alert("Registrierung erfolgreich"); + document.getElementById("register-modal")?.classList.add("hidden"); + + openAccountDashboard(); +} + +function loginUser() { + const email = (document.getElementById("login-email")?.value.trim() || "").toLowerCase(); + const password = document.getElementById("login-password")?.value || ""; + + const user = users.find( + (entry) => entry.email.toLowerCase() === email && entry.password === password + ); + + if (!user) { + document.getElementById("login-error")?.classList.remove("hidden"); + return; + } + + currentUser = user; + persistCurrentUser(); + openAccountDashboard(); +} + +function openAccountDashboard() { + const accountView = document.getElementById("account-view"); + if (!accountView) { + return; + } + + if (!currentUser) { + accountView.innerHTML = "

Mein Konto

Bitte melde dich an oder registriere dich.

"; + return; + } + + accountView.innerHTML = ` +
+ + + + +
+
+ `; + + renderPersonalInfo(); +} + +function renderPersonalInfo() { + const target = document.getElementById("account-tab-content"); + if (!target || !currentUser) { + return; + } + + target.innerHTML = ` +
+

Vorname: ${currentUser.firstName || "-"}

+

Nachname: ${currentUser.lastName || "-"}

+

E-Mail: ${currentUser.email || "-"}

+
+ `; +} + +function renderOrders() { + const target = document.getElementById("account-tab-content"); + if (!target || !currentUser) { + return; + } + + const orders = Array.isArray(currentUser.orders) ? currentUser.orders : []; + + if (!orders.length) { + target.innerHTML = ` +
+

Meine Bestellungen

+

Noch keine Bestellungen vorhanden.

+
+ `; + return; + } + + const orderHtml = orders + .map((order, index) => { + const movieItems = Array.isArray(order.items) + ? order.items.filter((item) => item.category === "movie") + : []; + const previewItem = movieItems[0] || (Array.isArray(order.items) ? order.items[0] : null); + const previewTitle = previewItem?.title || "Bestellung"; + const ticketsCount = movieItems.length || (Array.isArray(order.items) ? order.items.length : 0); + + return ` + + `; + }) + .join(""); + + target.innerHTML = ` +
+

Meine Bestellungen

+ + + +
+ `; + + const detailTarget = document.getElementById("order-ticket-details"); + const orderButtons = Array.from(target.querySelectorAll(".order-item-btn")); + + const renderOrderTicket = (orderIndex) => { + const order = orders[orderIndex]; + if (!order || !detailTarget) { + return; + } + + const movieItems = Array.isArray(order.items) + ? order.items.filter((item) => item.category === "movie") + : []; + const primaryMovie = movieItems[0] || (Array.isArray(order.items) ? order.items[0] : null); + const poster = primaryMovie?.img || ""; + const seats = movieItems.map((item) => item.seatId).filter(Boolean).join(", ") || "-"; + const ticketCount = movieItems.length || (Array.isArray(order.items) ? order.items.length : 0); + const hall = primaryMovie?.hall || "-"; + const time = primaryMovie?.time ? `${primaryMovie.time} Uhr` : "-"; + + detailTarget.innerHTML = ` +
+
+ ${poster + ? `${escapeHtml(primaryMovie?.title || ` + : `
Kein Poster
`} +
+
+
EAGLE'S IMAX | Bestell-Details
+

${escapeHtml(primaryMovie?.title || "Bestellung")}

+
+

Datum${escapeHtml(order.date || "-")}

+

Saal${escapeHtml(hall)}

+

Uhrzeit${escapeHtml(time)}

+

Tickets${ticketCount}x

+

Sitze${escapeHtml(seats)}

+

Gesamt${formatEuro(order.total || 0)}

+
+
+
+ `; + + detailTarget.classList.remove("hidden"); + orderButtons.forEach((button) => { + button.classList.toggle("active", Number(button.dataset.orderIndex) === orderIndex); + }); + }; + + orderButtons.forEach((button) => { + button.addEventListener("click", () => { + const orderIndex = Number(button.dataset.orderIndex || -1); + if (orderIndex >= 0) { + renderOrderTicket(orderIndex); + } + }); + }); + +} + +function renderPayments() { + const target = document.getElementById("account-tab-content"); + if (!target || !currentUser) { + return; + } + + target.innerHTML = ` +
+

Zahlungsmethoden

+ + +
+ + + + + + + + + `; + + const modals = Array.from(target.querySelectorAll(".pay-modal-overlay")); + const triggers = Array.from(target.querySelectorAll(".account-pay-trigger")); + const closeButtons = Array.from(target.querySelectorAll("[data-pay-close]")); + + const closeAllPaymentModals = () => { + modals.forEach((modal) => modal.classList.add("hidden")); + document.body.style.overflow = "auto"; + }; + + triggers.forEach((trigger) => { + trigger.addEventListener("click", () => { + closeAllPaymentModals(); + const targetId = trigger.getAttribute("data-pay-modal"); + const modal = targetId ? target.querySelector(`#${targetId}`) : null; + + if (modal) { + modal.classList.remove("hidden"); + document.body.style.overflow = "hidden"; + } + }); + }); + + closeButtons.forEach((button) => { + button.addEventListener("click", closeAllPaymentModals); + }); + + modals.forEach((modal) => { + modal.addEventListener("click", (event) => { + if (event.target === modal) { + closeAllPaymentModals(); + } + }); + }); +} + +function logoutUser() { + currentUser = null; + persistCurrentUser(); + window.location.reload(); +} diff --git a/booking.js b/booking.js new file mode 100644 index 0000000..52aa109 --- /dev/null +++ b/booking.js @@ -0,0 +1,352 @@ +let currentBookingContext = null; +let currentHallLayout = null; + +function openBooking(movie, hall, time) { + const titleEl = document.getElementById("modal-movie-title"); + const infoEl = document.getElementById("modal-info-text"); + + if (titleEl) { + titleEl.innerText = movie; + } + + if (infoEl) { + infoEl.innerText = `${hall} • ${time} Uhr`; + } + + currentBookingContext = { movie, hall, time }; + + createSeats(hall, time); + renderBookingLegend(); + updateBookingSummary(); + + document.getElementById("booking-modal")?.classList.remove("hidden"); +} + +function getRowLabel(rowIndex) { + return String(rowIndex + 1); +} + +function buildHallLayout(hallName, baseConfig) { + const rows = Number(baseConfig.rows || 0); + const totalCols = Number(baseConfig.left || 0) + Number(baseConfig.right || 0); + const isDeluxe = /deluxe/i.test(hallName); + + const left = isDeluxe + ? Math.max(3, Number(baseConfig.left || 0) - 1) + : Number(baseConfig.left || 0); + const right = Math.max(0, totalCols - left); + + const vipRows = rows > 0 ? [rows] : []; + + const dboxMap = new Set(); + const markDboxRange = (rowNumber, startCol, width) => { + if (!rowNumber || width <= 0) { + return; + } + + const maxCol = Math.min(totalCols, startCol + width - 1); + for (let col = startCol; col <= maxCol; col++) { + dboxMap.add(`${rowNumber}-${col}`); + } + }; + + if (isDeluxe) { + const configuredDboxSeats = Array.isArray(baseConfig.dbox) + ? baseConfig.dbox.reduce((sum, section) => sum + Number(section.w || 0), 0) + : 0; + + const totalDboxSeats = Math.max(4, configuredDboxSeats || 0); + + const firstRow = Math.max(1, rows - 2); + const secondRow = Math.max(1, rows - 1); + const targetRows = [firstRow, secondRow] + .filter((rowNumber, index, arr) => arr.indexOf(rowNumber) === index) + .filter((rowNumber) => !vipRows.includes(rowNumber)); + + const rowCount = Math.max(1, targetRows.length); + const seatsPerFirstRows = Math.ceil(totalDboxSeats / rowCount); + let remaining = totalDboxSeats; + + targetRows.forEach((rowNumber, index) => { + const seatsForRow = index === targetRows.length - 1 + ? remaining + : Math.min(seatsPerFirstRows, remaining); + remaining -= seatsForRow; + + const startCol = left + Math.max(1, Math.floor((right - seatsForRow) / 2) + 1); + markDboxRange(rowNumber, startCol, seatsForRow); + }); + } else if (Array.isArray(baseConfig.dbox)) { + baseConfig.dbox.forEach((section) => { + const rowNumber = Number(section.r || 0); + const width = Number(section.w || 0); + const startCol = Number(section.c || 0); + markDboxRange(rowNumber, startCol, width); + }); + } + + return { + rows, + left, + right, + totalCols, + vipRows, + dboxMap, + isImax: Boolean(baseConfig.isImax) + }; +} + +function getSeatType(layout, rowNumber, colNumber) { + if (layout.dboxMap.has(`${rowNumber}-${colNumber}`)) { + return "dbox"; + } + + if (layout.vipRows.includes(rowNumber)) { + return "vip"; + } + + if (layout.isImax) { + return "imax"; + } + + return "normal"; +} + +function createSeatElement({ seatId, seatType, occupiedSeats }) { + const seat = document.createElement("button"); + seat.type = "button"; + seat.classList.add("seat", seatType); + seat.dataset.seatId = seatId; + seat.dataset.type = seatType; + seat.title = `${seatId} (${seatType.toUpperCase()})`; + + if (occupiedSeats.has(seatId)) { + seat.classList.add("occupied"); + seat.disabled = true; + seat.setAttribute("aria-label", `${seatId} belegt`); + return seat; + } + + seat.setAttribute("aria-label", `${seatId} frei`); + seat.addEventListener("click", () => { + seat.classList.toggle("selected"); + updateBookingSummary(); + }); + + return seat; +} + +function createSeats(hallName, time) { + const seatGrid = document.getElementById("seat-grid"); + if (!seatGrid) { + return; + } + + seatGrid.innerHTML = ""; + + const baseConfig = seatLayouts[hallName]; + if (!baseConfig) { + currentHallLayout = null; + return; + } + + currentHallLayout = buildHallLayout(hallName, baseConfig); + + const occupiedKey = `${hallName}-${time}`; + const occupiedSeats = new Set(Array.isArray(occupiedSeatsData?.[occupiedKey]) ? occupiedSeatsData[occupiedKey] : []); + + for (let rowIndex = 0; rowIndex < currentHallLayout.rows; rowIndex++) { + const rowNumber = rowIndex + 1; + const rowLabel = getRowLabel(rowIndex); + + const perspectiveFactor = (currentHallLayout.rows - rowNumber) / Math.max(currentHallLayout.rows - 1, 1); + const rowIndent = Math.round(18 * perspectiveFactor); + + const row = document.createElement("div"); + row.className = "seat-row cinema-row"; + row.style.setProperty("--row-indent", `${rowIndent}px`); + + const leftLabel = document.createElement("div"); + leftLabel.className = "row-label"; + leftLabel.textContent = rowLabel; + + const rightLabel = document.createElement("div"); + rightLabel.className = "row-label row-label-right"; + rightLabel.textContent = rowLabel; + + const leftBlock = document.createElement("div"); + leftBlock.className = "row-seat-block left-block"; + + const rightBlock = document.createElement("div"); + rightBlock.className = "row-seat-block right-block"; + + for (let col = 1; col <= currentHallLayout.totalCols; col++) { + const seatId = `R${rowNumber}-P${col}`; + const seatType = getSeatType(currentHallLayout, rowNumber, col); + const seat = createSeatElement({ seatId, seatType, occupiedSeats }); + + if (col <= currentHallLayout.left) { + leftBlock.appendChild(seat); + } else { + rightBlock.appendChild(seat); + } + } + + const aisle = document.createElement("div"); + aisle.className = "aisle-gap"; + + row.append(leftLabel, leftBlock, aisle, rightBlock, rightLabel); + seatGrid.appendChild(row); + } +} + +function renderBookingLegend() { + const legend = document.getElementById("dynamic-legend"); + if (!legend || !currentHallLayout) { + return; + } + + const legendItems = [ + { type: "normal", label: "Standard" }, + { type: "selected", label: "Ausgewählt" }, + { type: "occupied", label: "Belegt" } + ]; + + if (currentHallLayout.isImax) { + legendItems.unshift({ type: "imax", label: "IMAX" }); + } + + if (currentHallLayout.vipRows.length > 0) { + legendItems.unshift({ type: "vip", label: "VIP" }); + } + + if (currentHallLayout.dboxMap.size > 0) { + legendItems.unshift({ type: "dbox", label: "D-BOX" }); + } + + legend.innerHTML = legendItems + .map((item) => ` +
+ + ${item.label} +
+ `) + .join(""); +} + +function updateBookingSummary() { + const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected")); + const summaryPanel = document.getElementById("booking-summary"); + const summaryItems = document.getElementById("summary-items"); + const totalEl = document.getElementById("total-price"); + + let total = 0; + + if (summaryItems) { + summaryItems.innerHTML = selectedSeats + .map((seat) => { + const type = seat.dataset.type || "normal"; + const seatPrice = Number(prices?.[type] ?? prices?.normal ?? 11); + total += seatPrice; + + return ` +
+ ${seat.dataset.seatId} + ${seatPrice.toFixed(2).replace(".", ",")} EUR +
+ `; + }) + .join(""); + } else { + selectedSeats.forEach((seat) => { + const type = seat.dataset.type || "normal"; + const seatPrice = Number(prices?.[type] ?? prices?.normal ?? 11); + total += seatPrice; + }); + } + + if (totalEl) { + totalEl.innerText = `${total.toFixed(2).replace(".", ",")} EUR`; + } + + summaryPanel?.classList.toggle("hidden", selectedSeats.length === 0); +} + +function findMoviePoster(movieTitle) { + const cards = Array.from(document.querySelectorAll(".movie-card, .detailed-card")); + const normalizedTarget = String(movieTitle || "").trim().toLowerCase(); + + for (const card of cards) { + const title = card.querySelector("h2, h3")?.innerText?.trim().toLowerCase(); + if (title === normalizedTarget) { + const imageSrc = card.querySelector("img")?.src; + if (imageSrc) { + return imageSrc; + } + } + } + + return ""; +} + +function confirmSelectedSeats() { + const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected")); + + if (!currentBookingContext || selectedSeats.length === 0) { + alert("Bitte waehle mindestens einen Platz aus."); + return; + } + + const moviePoster = findMoviePoster(currentBookingContext.movie); + const addedSeats = []; + + selectedSeats.forEach((seat) => { + const seatId = seat.dataset.seatId; + const seatType = seat.dataset.type || "normal"; + + const alreadyInCart = cart.some((item) => + item.category === "movie" && + item.title === currentBookingContext.movie && + item.hall === currentBookingContext.hall && + item.time === currentBookingContext.time && + item.seatId === seatId + ); + + if (alreadyInCart) { + return; + } + + cart.push({ + id: Date.now() + Math.random(), + category: "movie", + title: currentBookingContext.movie, + hall: currentBookingContext.hall, + time: currentBookingContext.time, + seatId, + type: seatType.toUpperCase(), + price: Number(prices?.[seatType] ?? prices?.normal ?? 11), + img: moviePoster + }); + + addedSeats.push(seatId); + }); + + if (!addedSeats.length) { + alert("Diese Plaetze sind bereits im Warenkorb."); + return; + } + + saveCart?.(); + renderCart?.(); + renderCheckout?.(); + + document.getElementById("booking-modal")?.classList.add("hidden"); + + const snackOverlay = document.getElementById("snack-prompt-overlay"); + snackOverlay?.classList.remove("hidden"); + document.body.style.overflow = "hidden"; +} + +document.addEventListener("DOMContentLoaded", () => { + document.getElementById("btn-confirm-seats")?.addEventListener("click", confirmSelectedSeats); +}); diff --git a/cart.js b/cart.js new file mode 100644 index 0000000..befa6a1 --- /dev/null +++ b/cart.js @@ -0,0 +1,199 @@ +function formatEuro(value) { + return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`; +} + +function escapeHtml(value) { + return String(value || "") + .replaceAll("&", "&") + .replaceAll("<", "<") + .replaceAll(">", ">") + .replaceAll('"', """) + .replaceAll("'", "'"); +} + +function buildCartKey(item) { + const infoText = item.category === "movie" + ? `Sitz: ${item.seatId} (${item.hall})` + : item.time; + return `${item.title}-${item.hall}-${infoText}`; +} + +function isDrinkItem(item) { + if (item.category !== "snack") { + return false; + } + + const title = String(item.title || "").toLowerCase(); + const size = String(item.hall || "").toLowerCase(); + const drinkKeywords = [ + "cola", + "sprite", + "fanta", + "mezzo", + "fuze", + "wasser", + "getraenk", + "drink" + ]; + + return drinkKeywords.some((word) => title.includes(word)) || size.includes("l"); +} + +function buildItemInfo(item) { + if (item.category === "movie") { + return ` +
Sitzplatz: ${escapeHtml(item.seatId || "-")}
+
Saal: ${escapeHtml(item.hall || "-")}
+
Uhrzeit: ${escapeHtml(item.time || "-")} Uhr
+ `; + } + + if (isDrinkItem(item)) { + return ` +
Variante: ${escapeHtml(item.time || "-")}
+
Groesse: ${escapeHtml(item.hall || "-")}
+ `; + } + + return ` +
Kategorie: Snack
+
Variante: ${escapeHtml(item.time || "-")}
+
Groesse: ${escapeHtml(item.hall || "-")}
+ `; +} + +function groupCartItems() { + const groups = new Map(); + + cart.forEach((item) => { + const key = buildCartKey(item); + + if (!groups.has(key)) { + groups.set(key, { + key, + quantity: 0, + total: 0, + item + }); + } + + const group = groups.get(key); + group.quantity += 1; + group.total += Number(item.price || 0); + }); + + return Array.from(groups.values()); +} + +function saveCart() { + localStorage.setItem("eagleCart", JSON.stringify(cart)); + updateCartBadge(); +} + +function updateCartBadge() { + const cartBadge = document.getElementById("cart-badge"); + + if (!cartBadge) { + return; + } + + cartBadge.innerText = cart.length; + cartBadge.classList.toggle("hidden", cart.length === 0); +} + +function renderCart() { + const cartList = document.getElementById("cart-items-list"); + const totalEl = document.getElementById("cart-total-right"); + const vatEl = document.getElementById("cart-vat-right"); + + if (!cartList || !totalEl || !vatEl) { + return; + } + + if (!Array.isArray(cart) || cart.length === 0) { + cartList.innerHTML = '

Dein Warenkorb ist leer.

'; + totalEl.innerText = formatEuro(0); + vatEl.innerText = `inkl. 19% MwSt: ${formatEuro(0)}`; + return; + } + + const groupedItems = groupCartItems(); + + const header = ` +
+
MENGE
+
VORSCHAU
+
NAME
+
INFO
+
PREIS
+
AKTION
+
+ `; + + const rows = groupedItems + .map((group) => { + const imageHtml = group.item.img + ? `${escapeHtml(group.item.title)}` + : `
Kein Bild
`; + const quantityHtml = group.item.category === "movie" + ? `
${group.quantity}x
` + : ` +
+ + ${group.quantity} + +
+ `; + + return ` +
+
+ ${quantityHtml} +
+
${imageHtml}
+
${escapeHtml(group.item.title)}
+
${buildItemInfo(group.item)}
+
${formatEuro(group.total)}
+
+ +
+
+ `; + }) + .join(""); + + cartList.innerHTML = header + rows; + + const total = cart.reduce((sum, item) => sum + Number(item.price || 0), 0); + const vat = total - total / 1.19; + + totalEl.innerText = formatEuro(total); + vatEl.innerText = `inkl. 19% MwSt: ${formatEuro(vat)}`; + + saveCart(); +} + +window.removeItem = function removeItem(id) { + cart = cart.filter((item) => item.id !== id); + saveCart(); + renderCart(); +}; + +window.changeQty = function changeQty(title, delta) { + if (delta > 0) { + const item = cart.find((entry) => entry.title === title); + if (item) { + cart.push({ ...item, id: Date.now() + Math.random() }); + } + } else { + const index = cart + .map((entry) => entry.title) + .lastIndexOf(title); + if (index !== -1) { + cart.splice(index, 1); + } + } + + saveCart(); + renderCart(); +}; diff --git a/checkout.js b/checkout.js new file mode 100644 index 0000000..b351e6e --- /dev/null +++ b/checkout.js @@ -0,0 +1,232 @@ +function formatCheckoutEuro(value) { + return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`; +} + +let selectedPaymentMethod = ""; +let checkoutEventsBound = false; + +function setCheckoutStep(step) { + const step1 = document.getElementById("checkout-step-1"); + const step2 = document.getElementById("checkout-step-2"); + const step3 = document.getElementById("checkout-step-3"); + + step1?.classList.toggle("hidden", step !== 1); + step2?.classList.toggle("hidden", step !== 2); + step3?.classList.toggle("hidden", step !== 3); + + const line1 = document.getElementById("line-1"); + const line2 = document.getElementById("line-2"); + const indicator1 = document.getElementById("step-1-indicator"); + const indicator2 = document.getElementById("step-2-indicator"); + const indicator3 = document.getElementById("step-3-indicator"); + + indicator1?.classList.add("active"); + indicator2?.classList.toggle("active", step >= 2); + indicator3?.classList.toggle("active", step >= 3); + line1?.classList.toggle("active", step >= 2); + line2?.classList.toggle("active", step >= 3); +} + +function renderCheckout() { + const summaryList = document.getElementById("checkout-summary-list"); + const totalDisplay = document.getElementById("checkout-total-display"); + const vatDisplay = document.getElementById("checkout-vat-display"); + const nextButton = document.getElementById("btn-next-step-2"); + + if (!summaryList) { + return; + } + + summaryList.innerHTML = ""; + + const safeCart = Array.isArray(cart) ? cart : []; + const total = safeCart.reduce((sum, item) => sum + Number(item.price || 0), 0); + const vat = total - total / 1.19; + + safeCart.forEach((item) => { + const row = document.createElement("div"); + row.style.cssText = "display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; font-size:0.95rem;"; + + const infoText = item.category === "movie" + ? `Sitz ${item.seatId || "-"} | ${item.hall || "-"} | ${item.time || "-"} Uhr` + : `${item.time || "Standard"} | ${item.hall || "-"}`; + + row.innerHTML = `${item.title} (${infoText})${formatCheckoutEuro(item.price)}`; + summaryList.appendChild(row); + }); + + if (totalDisplay) { + totalDisplay.innerText = `Gesamtbetrag: ${formatCheckoutEuro(total)}`; + } + + if (vatDisplay) { + vatDisplay.innerText = `inkl. 19% MwSt: ${formatCheckoutEuro(vat)}`; + } + + selectedPaymentMethod = ""; + document.querySelectorAll(".payment-method").forEach((method) => { + method.classList.remove("selected"); + }); + + nextButton?.classList.add("hidden"); + setCheckoutStep(1); +} + +function generateTicket() { + const ticketContainer = document.getElementById("ticket-container"); + if (!ticketContainer) { + return; + } + + const moviesInCart = (Array.isArray(cart) ? cart : []).filter((item) => item.category === "movie"); + if (!moviesInCart.length) { + ticketContainer.innerHTML = "

Danke fuer deinen Einkauf!

"; + return; + } + + const mainMovie = moviesInCart[0]; + const matchingMovieSeats = moviesInCart + .filter((item) => item.title === mainMovie.title && item.time === mainMovie.time) + .map((item) => item.seatId) + .join(", "); + + const qrData = encodeURIComponent(`EAGLE-IMAX|${mainMovie.title}|${mainMovie.hall}|${matchingMovieSeats}`); + const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${qrData}&bgcolor=ffffff`; + + ticketContainer.innerHTML = ` +
+
+ ${mainMovie.title} +
+
+
EAGLE'S IMAX PREMIUM
+

${mainMovie.title}

+
+

SAAL ${mainMovie.hall}

+

ZEIT ${mainMovie.time} Uhr

+

SITZE ${matchingMovieSeats || "-"}

+
+
+ QR Code +
#${Math.floor(Math.random() * 90000) + 10000}
+
+
+
+ `; +} + +function saveOrderForCurrentUser(orderItems, orderTotal) { + if (typeof currentUser === "undefined" || !currentUser) { + return; + } + + if (typeof users === "undefined" || !Array.isArray(users)) { + return; + } + + const order = { + date: new Date().toLocaleString("de-DE"), + items: orderItems, + total: orderTotal, + paymentMethod: selectedPaymentMethod || "-" + }; + + const userIndex = users.findIndex((entry) => entry.email === currentUser.email); + if (userIndex === -1) { + return; + } + + if (!Array.isArray(users[userIndex].orders)) { + users[userIndex].orders = []; + } + + users[userIndex].orders.push(order); + localStorage.setItem("eagleUsers", JSON.stringify(users)); +} + +function reserveSeatsAfterPayment(orderItems) { + const movieItems = orderItems.filter((item) => item.category === "movie"); + + movieItems.forEach((item) => { + const key = `${item.hall}-${item.time}`; + if (!occupiedSeatsData[key]) { + occupiedSeatsData[key] = []; + } + + occupiedSeatsData[key].push(item.seatId); + }); + + localStorage.setItem("eagleOccupied", JSON.stringify(occupiedSeatsData)); +} + +function completeCheckout() { + const orderItems = Array.isArray(cart) ? [...cart] : []; + const orderTotal = orderItems.reduce((sum, item) => sum + Number(item.price || 0), 0); + + saveOrderForCurrentUser(orderItems, orderTotal); + reserveSeatsAfterPayment(orderItems); + + cart = []; + saveCart?.(); + renderCart?.(); +} + +function bindCheckoutEvents() { + if (checkoutEventsBound) { + return; + } + + checkoutEventsBound = true; + + const nextButton = document.getElementById("btn-next-step-2"); + const backButton = document.getElementById("btn-back-to-step1"); + const payNowButton = document.getElementById("btn-pay-now"); + + document.querySelectorAll(".payment-method").forEach((method) => { + method.addEventListener("click", () => { + document.querySelectorAll(".payment-method").forEach((entry) => { + entry.classList.remove("selected"); + }); + + method.classList.add("selected"); + selectedPaymentMethod = method.dataset.method || ""; + nextButton?.classList.remove("hidden"); + }); + }); + + nextButton?.addEventListener("click", () => { + if (!selectedPaymentMethod) { + alert("Bitte waehle zuerst eine Zahlungsmethode aus."); + return; + } + + setCheckoutStep(2); + }); + + backButton?.addEventListener("click", () => { + setCheckoutStep(1); + }); + + payNowButton?.addEventListener("click", () => { + if (!Array.isArray(cart) || !cart.length) { + alert("Dein Warenkorb ist leer."); + return; + } + + payNowButton.disabled = true; + payNowButton.innerText = "Verarbeite..."; + payNowButton.style.opacity = "0.7"; + + setTimeout(() => { + setCheckoutStep(3); + generateTicket(); + completeCheckout(); + + payNowButton.disabled = false; + payNowButton.innerText = "Jetzt Bezahlen"; + payNowButton.style.opacity = "1"; + }, 1200); + }); +} + +document.addEventListener("DOMContentLoaded", bindCheckoutEvents); diff --git a/img/Apfelschorle.png b/img/Apfelschorle.png new file mode 100644 index 0000000..4f8c1c3 --- /dev/null +++ b/img/Apfelschorle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:725b9e3b03062fffb54ff1ac0cdc1c095a41b000ff241cc2f0ee973b0a0c2342 +size 148003 diff --git a/img/Dolby.png b/img/Dolby.png new file mode 100644 index 0000000..1ca3142 --- /dev/null +++ b/img/Dolby.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c90d994267fb989d537fc62656b40a053d37d28406b795780a49369e141ad514 +size 28533 diff --git a/img/Schorle.png b/img/Schorle.png new file mode 100644 index 0000000..cc97a3a --- /dev/null +++ b/img/Schorle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3fbac99477fdba6b3cd8e07c303dd4c5887afe830c9c80c84f3609b497959c3d +size 197467 diff --git a/img/Zoomania-2.jpg b/img/Zoomania-2.jpg new file mode 100644 index 0000000..9f8a8af --- /dev/null +++ b/img/Zoomania-2.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7b45fd4ecb3203cdff2df014f2914742dfdbaf2aaaec19cf3082a9bcf05e69ef +size 148556 diff --git a/img/applepay.png b/img/applepay.png new file mode 100644 index 0000000..97de500 --- /dev/null +++ b/img/applepay.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b5fa79b37917a79508afeffa8d3c1bf05e98b2b737b7f3da0d89082ab38328a6 +size 29772 diff --git a/img/astronautpopcorn.jpg b/img/astronautpopcorn.jpg new file mode 100644 index 0000000..a188eb1 --- /dev/null +++ b/img/astronautpopcorn.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7555b82e554a173d39b182015bd2760c32191558b9d6a642b913a77e7c76d1dc +size 59868 diff --git a/img/bladerunner2049.jpg b/img/bladerunner2049.jpg new file mode 100644 index 0000000..aabc97c --- /dev/null +++ b/img/bladerunner2049.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e1ad7e3bce4f67f711ba48f8e3820dcabdfaa2e1a4781576dbf06d259ee75d40 +size 215708 diff --git a/img/cola-light.png b/img/cola-light.png new file mode 100644 index 0000000..7077b08 --- /dev/null +++ b/img/cola-light.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5c772d560d8ed20cc2b21487f9478ba1495b4d45dcf73f2cae077ee97e0f98e9 +size 141511 diff --git a/img/cola-zero.png b/img/cola-zero.png new file mode 100644 index 0000000..22a5f75 --- /dev/null +++ b/img/cola-zero.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c2a747d3b5f0b3e03ef8ef63e718887e66cf2fb172db61a3fbe7dc6f0cd08911 +size 63201 diff --git a/img/cola.png b/img/cola.png new file mode 100644 index 0000000..5b257c2 --- /dev/null +++ b/img/cola.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0ff1b53049fe646b18205545ea3ce14b233f21300ed2b38162d3cf8fef013b76 +size 63839 diff --git a/img/dbox.jpg b/img/dbox.jpg new file mode 100644 index 0000000..5cc2245 --- /dev/null +++ b/img/dbox.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d8e352c062dd1acc7f357ea2d10b9ab3a69855743f96a1192a64eea80fcfd765 +size 27875 diff --git a/img/derAustronaut.jpg b/img/derAustronaut.jpg new file mode 100644 index 0000000..57870a4 --- /dev/null +++ b/img/derAustronaut.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9b0cf479920be74bf20ef2b3f611086880f7ea627329cdd7793eec28bdbfdb2c +size 898835 diff --git a/img/fallguy.jpg b/img/fallguy.jpg new file mode 100644 index 0000000..b679b9a --- /dev/null +++ b/img/fallguy.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b578124770872fa1a43b20a7af797c4d93a63c84089306520cfb43672d327732 +size 207773 diff --git a/img/fanta.png b/img/fanta.png new file mode 100644 index 0000000..dac2c48 --- /dev/null +++ b/img/fanta.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:82266102664f844ac36ffea5467331402177701d738b6d48de39b30518492306 +size 57908 diff --git a/img/fuze-tea.png b/img/fuze-tea.png new file mode 100644 index 0000000..667e6ad --- /dev/null +++ b/img/fuze-tea.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7e8411edd86a3fccd26496cc05f6865c9b13979550c77c2889b2b6b151ebf518 +size 62848 diff --git a/img/gangstergang.jpg b/img/gangstergang.jpg new file mode 100644 index 0000000..a208bcb --- /dev/null +++ b/img/gangstergang.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:98a0f0504e6558bfa3b2c0962488b96a47c1ef2358688c0c34d09fbf3409fa36 +size 371103 diff --git a/img/gangstergang2.png b/img/gangstergang2.png new file mode 100644 index 0000000..305ac4e --- /dev/null +++ b/img/gangstergang2.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:22dad2597fa8a7152450a9eb5084cee413e869c7df53aeda69919ba9cb544a9d +size 123744 diff --git a/img/glennkill.jpg b/img/glennkill.jpg new file mode 100644 index 0000000..15ee6e5 --- /dev/null +++ b/img/glennkill.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a7accbaa48e45b2e99562bc267b2950227a598b3ff65027347eb60fccd579152 +size 174298 diff --git a/img/goat.jpg b/img/goat.jpg new file mode 100644 index 0000000..d2451ea --- /dev/null +++ b/img/goat.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:592871da4a67ac08515acb975ec94f31218e2b6e957416bddcd508b0d82d4e6f +size 238519 diff --git a/img/googlepay.png b/img/googlepay.png new file mode 100644 index 0000000..3983d67 --- /dev/null +++ b/img/googlepay.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:19037916e535f156a49344102358647fd2af08a7af596a4b67b218c4c7ded5bf +size 18306 diff --git a/img/haribo.png b/img/haribo.png new file mode 100644 index 0000000..3842a26 --- /dev/null +++ b/img/haribo.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f5b9102ff6ec16bbc345776a9e303d2d9f10207c9d0bce54605737912cc2f3b8 +size 207234 diff --git a/img/homefront.jpg b/img/homefront.jpg new file mode 100644 index 0000000..0ba2da7 --- /dev/null +++ b/img/homefront.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c7a63a1b8d766b6d68aa3cfc024a079fd5727ff560b27d7f62ba6c78f5b83328 +size 94555 diff --git a/img/hoppers.jpg b/img/hoppers.jpg new file mode 100644 index 0000000..d7d4070 --- /dev/null +++ b/img/hoppers.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a53aa0c3f610618d0f2b5de0516d7256cefd604f137be33a423b1401bf89d029 +size 205633 diff --git a/img/hopperskidsmenu.jpg b/img/hopperskidsmenu.jpg new file mode 100644 index 0000000..6440a87 --- /dev/null +++ b/img/hopperskidsmenu.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b3210725cfecddf43b7a26b859772700c87521d8ccd1cd6c4a2c5211b7408e4c +size 72246 diff --git a/img/hopperspopcornmetall.jpg b/img/hopperspopcornmetall.jpg new file mode 100644 index 0000000..9c5432e --- /dev/null +++ b/img/hopperspopcornmetall.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9d783f8fa19be7b41c2d0b782858cb312438546b09598128955585e76b010a6e +size 92142 diff --git a/img/hopperspopcornwood.png b/img/hopperspopcornwood.png new file mode 100644 index 0000000..08e7b47 --- /dev/null +++ b/img/hopperspopcornwood.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a353ad8cc51f803f21ebaf9dc0e1654ee6457e1c918be21e985fc85d515c5a1e +size 100114 diff --git a/img/klarna.png b/img/klarna.png new file mode 100644 index 0000000..67c05bb --- /dev/null +++ b/img/klarna.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d991d083415fa48f5047ef6273c431085f3d352216bc30e51d28f06860a57fb6 +size 28781 diff --git a/img/käsedip.png b/img/käsedip.png new file mode 100644 index 0000000..355c74f --- /dev/null +++ b/img/käsedip.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7bf46eaa63f4218da6f013b5df6a509fedcea2e925bb36810d60d8ea15dbce1c +size 112848 diff --git a/img/mandalorian.jpeg b/img/mandalorian.jpeg new file mode 100644 index 0000000..b6750e7 --- /dev/null +++ b/img/mandalorian.jpeg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d574713f4278a0d05a9967a61aed8e62bbd5ec211eaa047b15a3ec5b64c09bf4 +size 2291485 diff --git a/img/mariogalaxy.jpg b/img/mariogalaxy.jpg new file mode 100644 index 0000000..410d5e0 --- /dev/null +++ b/img/mariogalaxy.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5b0f0b1c5b908db28fcb4dc05cbbe40b76fe45bbb04feee451c6e2323a013aef +size 1584165 diff --git a/img/mariokidsmenu.png b/img/mariokidsmenu.png new file mode 100644 index 0000000..198fcf0 --- /dev/null +++ b/img/mariokidsmenu.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9181370a51a47d6d8d9e4ca763f710c885a238295fdf6508d71d4b537f65509e +size 314772 diff --git a/img/marioyoshipopcorn.png b/img/marioyoshipopcorn.png new file mode 100644 index 0000000..99e706f --- /dev/null +++ b/img/marioyoshipopcorn.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4b4bc793b8eb7111ebe50e58f2698573284c8ce995c4dfa3dffccb82473caf2c +size 100133 diff --git a/img/mastercard.png b/img/mastercard.png new file mode 100644 index 0000000..d2491c9 --- /dev/null +++ b/img/mastercard.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a1afe730bd247098d2ee4ee18108356ba8010d015860420049b2dbe20a319aec +size 189351 diff --git a/img/masteruniverse.jpg b/img/masteruniverse.jpg new file mode 100644 index 0000000..2b2aa9e --- /dev/null +++ b/img/masteruniverse.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7eded20169a977e2b86df13022de7e2cef9b2b34e28e85ef0b4c0bf0403dd645 +size 931547 diff --git a/img/meg.JPG b/img/meg.JPG new file mode 100644 index 0000000..0e13e50 --- /dev/null +++ b/img/meg.JPG @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:26c89eb7c801856ccbaa6edbc5acf0b4c438083ab410e3a056090a112fec72c3 +size 600518 diff --git a/img/meg2.jpg b/img/meg2.jpg new file mode 100644 index 0000000..7d7a45d --- /dev/null +++ b/img/meg2.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9ce2f0444962877d038b7482d8da80ffb582943eb62341d43da3e67160d29faa +size 1423081 diff --git a/img/menu-big.png b/img/menu-big.png new file mode 100644 index 0000000..896eee5 --- /dev/null +++ b/img/menu-big.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:56fc6dff0edfd10824926e83994aa10b347c325f37e529410c1d2e33a516e429 +size 98152 diff --git a/img/minionsmonsters.jpg b/img/minionsmonsters.jpg new file mode 100644 index 0000000..d738f6e --- /dev/null +++ b/img/minionsmonsters.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6a5c4a31d222d49372cfc9c3749e7dca9164e836dd9f53404c7ab7ee3e44aa27 +size 158162 diff --git a/img/mms.png b/img/mms.png new file mode 100644 index 0000000..000c9c5 --- /dev/null +++ b/img/mms.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ea1af40bc25d5bfea9ce7fb57ba296aa4166804ffd166216f277692e04d89b1d +size 157457 diff --git a/img/monsterag.png b/img/monsterag.png new file mode 100644 index 0000000..2f61cd0 --- /dev/null +++ b/img/monsterag.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c21e06fd6cb6a7c7cd8158804e7dd7b43378d85655f4f1cd2833a20d365ef59f +size 3159069 diff --git a/img/monsteruni.jpg b/img/monsteruni.jpg new file mode 100644 index 0000000..2306bbd --- /dev/null +++ b/img/monsteruni.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ad6ecca5dec7e05ea95ea39ac5a9f70bf243507415698c379670ea599b209c48 +size 131398 diff --git a/img/mutiny.jpg b/img/mutiny.jpg new file mode 100644 index 0000000..3c909a5 --- /dev/null +++ b/img/mutiny.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cb6b6275f047f6d8018b4a934e8a136b48f9ad383d7a3b06b785f62c4cbd8125 +size 1049186 diff --git a/img/nachokombiklein.png b/img/nachokombiklein.png new file mode 100644 index 0000000..b16d41c --- /dev/null +++ b/img/nachokombiklein.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0d6b2c7ce72f7fef66bb7d7a2f866a9314887224250844c7e7dfb14971301f5b +size 186145 diff --git a/img/nachos.jpg b/img/nachos.jpg new file mode 100644 index 0000000..fe3e44c --- /dev/null +++ b/img/nachos.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b8894667ad385701048c0de7581e1b0b89f9ef70f5ec8e1d6960459ee0b385ec +size 138226 diff --git a/img/nachosnormal.png b/img/nachosnormal.png new file mode 100644 index 0000000..91f7fb0 --- /dev/null +++ b/img/nachosnormal.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4084c3bee10cffee331d1b59408ef83f506669a8dad1ebb9674f6476ff3855e5 +size 138998 diff --git a/img/paypal.png b/img/paypal.png new file mode 100644 index 0000000..98414ee --- /dev/null +++ b/img/paypal.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:eac849a575bba68da30d4b31a194c20b16425e3c1b99eee7a54a1ba1e61f5431 +size 7817 diff --git a/img/popcorn-big.png b/img/popcorn-big.png new file mode 100644 index 0000000..d4bb902 --- /dev/null +++ b/img/popcorn-big.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:65004614bad061d3b7513419111f5014ee43f6a3a94e4ea061023ef9801b1e2d +size 54598 diff --git a/img/popcorn-klein.png b/img/popcorn-klein.png new file mode 100644 index 0000000..87e8253 --- /dev/null +++ b/img/popcorn-klein.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0c3d813ef90241997121ac6080877aa8191f455894b3b92fecefef8429c8fb0f +size 36347 diff --git a/img/popcorn-mittel.png b/img/popcorn-mittel.png new file mode 100644 index 0000000..0e5e2f5 --- /dev/null +++ b/img/popcorn-mittel.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:df5ed24d4ccb174daf4c40acac912216502976e8cabd5f679a4dfd9b985b544c +size 46072 diff --git a/img/popcorn.jpg b/img/popcorn.jpg new file mode 100644 index 0000000..19fdf28 --- /dev/null +++ b/img/popcorn.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ec45c87ea01bb1304a4d52b9a4ee37508f4b60a40e4a7ad44e1c1efc14816a45 +size 18328 diff --git a/img/riegel.png b/img/riegel.png new file mode 100644 index 0000000..6b4ee37 --- /dev/null +++ b/img/riegel.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:62d127f35b62bbbf438e84cb93b1a1e1cd348bbf45d9958644d84095f4ea0698 +size 190784 diff --git a/img/salsadip.png b/img/salsadip.png new file mode 100644 index 0000000..f940260 --- /dev/null +++ b/img/salsadip.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:21dde4e828a346eee96a17b6980cc515b7ef3b1d0ecd31d435a643c0f0a61cfa +size 110935 diff --git a/img/screamdoorpopcorn.jpg b/img/screamdoorpopcorn.jpg new file mode 100644 index 0000000..7091cdb --- /dev/null +++ b/img/screamdoorpopcorn.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:62631b630f1eb20a8ca55abe2ff8d4b537596d15ae51e68b9947d8e304989a4d +size 46028 diff --git a/img/screamvii.jpg b/img/screamvii.jpg new file mode 100644 index 0000000..b729aec --- /dev/null +++ b/img/screamvii.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:89e6eae9662cbac62b2cbb1a95d147322dd02312e8b16137625f23f1fb4e56bd +size 270851 diff --git a/img/shelter.jpg b/img/shelter.jpg new file mode 100644 index 0000000..47a4172 --- /dev/null +++ b/img/shelter.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:208014ce52b2993beb1464fd3aff245040e7e3ffc9dab48d81967b2306163035 +size 269459 diff --git a/img/solomio.png b/img/solomio.png new file mode 100644 index 0000000..e993037 --- /dev/null +++ b/img/solomio.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ae5ef4013588a5795cfa45e7951fc063b5d5f918e1200c8007439aa438ebe1ae +size 215822 diff --git a/img/sourdip.png b/img/sourdip.png new file mode 100644 index 0000000..e6f4b4e --- /dev/null +++ b/img/sourdip.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1708efe8d2e6f36c69fad37b17ed3771c4c3442c35eb5224433679f1db03e9ee +size 107082 diff --git a/img/spezi.png b/img/spezi.png new file mode 100644 index 0000000..afa0196 --- /dev/null +++ b/img/spezi.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d24b78c4639616cbfc75bddf688132349363deec1dbd318ba64c7164b0343961 +size 61617 diff --git a/img/spidermannewday.jpg b/img/spidermannewday.jpg new file mode 100644 index 0000000..6d4137a --- /dev/null +++ b/img/spidermannewday.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a997fc306d649322dead0f1cff982d91bdfa47113929e282ebb0b031e716e82a +size 270025 diff --git a/img/sprite.png b/img/sprite.png new file mode 100644 index 0000000..52e7c83 --- /dev/null +++ b/img/sprite.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0c583e76b1164c6a291bccb5667d20d00ab54b53ae4c2a31bf977c0229fdfa0b +size 60219 diff --git a/img/super-mario-galaxy-banner.jpg b/img/super-mario-galaxy-banner.jpg new file mode 100644 index 0000000..0181697 --- /dev/null +++ b/img/super-mario-galaxy-banner.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a1afa181e03db87c8f546dd17c068698c0d5eb81b5efd88916842688354e8922 +size 189311 diff --git a/img/toystory1.jpg b/img/toystory1.jpg new file mode 100644 index 0000000..51861c5 --- /dev/null +++ b/img/toystory1.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d3a10869d08affe8e852a4672433f5bd51ac966caba9775e58286aa6dbcc9038 +size 116740 diff --git a/img/toystory2.jpg b/img/toystory2.jpg new file mode 100644 index 0000000..01c7765 --- /dev/null +++ b/img/toystory2.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:733f22bf04103afa8db32c647c7176eec724477e1f90955d19fa4b6a5e6a4d30 +size 658398 diff --git a/img/toystory3.jpg b/img/toystory3.jpg new file mode 100644 index 0000000..c5c9f1b --- /dev/null +++ b/img/toystory3.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5a0f94f1f2c16be0197cc7f3d185a0f19785399ed7ff70d3dc777d36dce219e7 +size 492201 diff --git a/img/toystory4.jpg b/img/toystory4.jpg new file mode 100644 index 0000000..3fd0f9b --- /dev/null +++ b/img/toystory4.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f23f99945a4937720b4215826ba8374a1cb0611f19a4b2d9c173b20662d23964 +size 103920 diff --git a/img/toystory5.png b/img/toystory5.png new file mode 100644 index 0000000..f2d69fa --- /dev/null +++ b/img/toystory5.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:41e8e0a7a938e99debfff2ea8ce95f303b054bf10dae3dba73972e367ed69045 +size 543084 diff --git a/img/visa.png b/img/visa.png new file mode 100644 index 0000000..0e3567e --- /dev/null +++ b/img/visa.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1049e94ca6bb7192c93d18190742bf5c620c738aa608a1868a6d46cfb4f21bec +size 25970 diff --git a/img/wasser.png b/img/wasser.png new file mode 100644 index 0000000..4d1d68e --- /dev/null +++ b/img/wasser.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:62762f582269ed018626e217740824d8a0d9a3343c73a7deda8fbc9f14a9cdcc +size 149620 diff --git a/img/zoomania-popcorn.jpg b/img/zoomania-popcorn.jpg new file mode 100644 index 0000000..367147d --- /dev/null +++ b/img/zoomania-popcorn.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f69ddc878c130a0b28265d2b699a3545fa145639c0078e4439b09a23897267fe +size 557077 diff --git a/img/zoomaniakidsmenu.jpg b/img/zoomaniakidsmenu.jpg new file mode 100644 index 0000000..8c25252 --- /dev/null +++ b/img/zoomaniakidsmenu.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bb7b6676c880d61d7bd41b6acc06229041a65c0b00b4d2ecd763c1f6a2b0794c +size 536867 diff --git a/index.html b/index.html new file mode 100644 index 0000000..e7df18a --- /dev/null +++ b/index.html @@ -0,0 +1,959 @@ + + + + + + EAGLE's IMAX | Deluxe Experience + + + + +
+
+
+ Neu im Kino +

Jetzt im Kino

+

Erlebe die neuesten Highlights auf der großen Leinwand.

+ +
+
+
+ +
+
+

Dein Kinoabend beginnt hier

+

Premieren, Lieblingsfilme und flexible Spielzeiten in allen Sälen.

+
+ +
+
+

Jetzt läuft

+ Heute im Fokus +
+
+
+ +
+
+
+
+

Unsere Säle im Überblick

+

Jeder Saal hat ein eigenes Profil: von klassischem Kinofeeling bis High-End-Erlebnis mit Premiumtechnik und mehr Komfort.

+
+ IMAX + Deluxe 1 + Kino 1 + Kino 2 +
+ +
+
+ +
+
+
+

D-BOX & Technik

+

Spüre Bewegungen synchron zum Film und kombiniere das Erlebnis mit modernem Raumklang und Premium-Bestuhlung.

+
+

Aktuell in D-BOX

+
+
Zoomania 2
+
Shelter
+
Hoppers
+
Spider Man
+
+
+ +
+
+ +
+
+
+

Collectors Popcorn Specials

+

Präsentiere Sonderbecher und Eimer filmbezogen mit Bild, Logo und kurzem Text in einer lebendigen Timeline.

+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..680fe55 --- /dev/null +++ b/main.js @@ -0,0 +1,1092 @@ +// Shared app state for legacy script files (account.js, booking.js, cart.js, checkout.js) +var prices = { normal: 11.0, imax: 15.0, vip: 12.0, dbox: 16.0 }; +var seatLayouts = { + "Kino 1": { rows: 6, left: 3, right: 7, vipRows: [5], dbox: [] }, + "Kino 2": { rows: 7, left: 5, right: 5, vipRows: [6], dbox: [] }, + "Deluxe 1": { rows: 10, left: 7, right: 8, vipRows: [9], dbox: [{ r: 4, c: 5, w: 4 }] }, + IMAX: { rows: 15, left: 10, right: 10, vipRows: [], dbox: [], isImax: true } +}; +var cart = JSON.parse(localStorage.getItem("eagleCart")) || []; +var occupiedSeatsData = JSON.parse(localStorage.getItem("eagleOccupied")) || {}; + +document.addEventListener("DOMContentLoaded", () => { + const views = { + hero: document.querySelector(".hero"), + moviesGrid: document.getElementById("movies-grid-section"), + list: document.getElementById("movie-list-view"), + halls: document.getElementById("halls-view"), + dbox: document.getElementById("dbox-view"), + collectors: document.getElementById("collectors-view"), + about: document.getElementById("about-view"), + snacks: document.getElementById("snacks-view"), + cart: document.getElementById("cart-view"), + checkout: document.getElementById("checkout-view"), + account: document.getElementById("account-view") + }; + + const ui = { + logo: document.getElementById("logo-home"), + linkFilme: document.getElementById("link-filme"), + linkSnacks: document.getElementById("link-snacks"), + linkAbout: document.getElementById("link-about"), + linkCart: document.getElementById("link-cart"), + linkAccount: document.getElementById("link-account"), + themeToggle: document.getElementById("theme-toggle"), + heroBookingBtn: document.getElementById("hero-booking-btn"), + heroSlider: document.getElementById("hero-slider"), + heroDots: document.getElementById("hero-dots"), + heroTitle: document.getElementById("hero-title"), + heroText: document.getElementById("hero-text"), + nowRunningRow: document.getElementById("now-running-row"), + movieProgramList: document.getElementById("movie-program-list"), + checkoutBtn: document.getElementById("btn-checkout-final"), + backHomeBtn: document.getElementById("btn-back-home"), + snacksView: document.getElementById("snacks-view"), + snackOverlay: document.getElementById("snack-prompt-overlay"), + btnYesSnacks: document.getElementById("btn-yes-snacks"), + btnNoCart: document.getElementById("btn-no-cart"), + bookingModal: document.getElementById("booking-modal"), + closeBookingModalBtn: document.querySelector(".close-btn") + }; + + const checkoutSteps = { + one: document.getElementById("checkout-step-1"), + two: document.getElementById("checkout-step-2"), + three: document.getElementById("checkout-step-3") + }; + + const movieCatalog = [ + { + title: "Zoomania 2", + genre: "Animation", + 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" + }, + { + title: "Shelter", + genre: "Action, Abenteuer", + duration: 147, + fsk: "16", + description: "Michael Mason, ein untergetauchter Elite-Agent, lebt auf einer abgelegenen Insel in Schottland. Als er in einem schweren Sturm ein Mädchen vor dem Ertrinken rettet, setzt er damit eine Kette von Ereignissen in Gang, die sein Versteck enttarnen und ihn zurück in die Welt zwingen. Dort muss er nicht nur um das Überleben der Teenagerin kämpfen, sondern sich auch den Dämonen seiner Vergangenheit stellen…", + poster: "img/shelter.jpg", + backdrop: "img/shelter.jpg" + }, + { + title: "Mutiny", + genre: "Action, Abenteuer", + duration: "tba", + fsk: "?", + description: "Als sein milliardenschwerer Boss vor seinen Augen einem Mordkomplott zum Opfer fällt, wird Cole Reed (Jason Statham) für das Verbrechen verantwortlich gemacht. Im Bestreben dessen Tod zu rächen und die Täter zu überführen, gelangt Reed an Bord eines Frachters und stößt dabei auf eine internationale Verschwörung. Im Alleingang startet Cole eine gnadenlose Racheaktion auf hoher See…", + poster: "img/mutiny.jpg", + backdrop: "img/mutiny.jpg" + }, + { + title: "Der Austronaut - Project Hail Mary", + genre: "Sci-Fi", + duration: 156, + fsk: "12", + description: "Der Naturwissenschaftslehrer Ryland Grace wacht eines Tages auf einem Raumschiff auf - Lichtjahre von zu Hause entfernt und ohne Erinnerung daran, wer er ist oder wie er dorthin gekommen ist.", + poster: "img/derAustronaut.jpg", + backdrop: "img/derAustronaut.jpg" + }, + { + title: "Der Super Mario Galaxy Film", + genre: "Animation", + duration: 98, + fsk: "6", + description: "''Der Super Mario Galaxy Film'' ist der neue Animationsfilm, basierend auf der Welt von „Super Mario Bros.“!", + poster: "img/mariogalaxy.jpg", + backdrop: "img/mariogalaxy.jpg" + }, + { + title: "Hoppers", + genre: "Animation", + duration: 105, + fsk: "6", + description: "In Disney Pixars ''Hoppers'' hoppt Tierfreundin Mabel mithilfe neuester Technologie in einen Roboterbiber und macht die Tierwelt (un)sicher! ", + poster: "img/hoppers.jpg", + backdrop: "img/hoppers.jpg" + }, + { + title: "Solo Mio", + genre: "Lovestory, Komödie", + duration: 96, + fsk: "12", + description: "Nachdem er in Rom am Altar stehen gelassen wurde, beschließt ein Mann, allein in die Flitterwochen zu fahren.", + poster: "img/solomio.png", + backdrop: "img/solomio.png" + }, + { + title: "The Mandalorian and Grogu", + genre: "Action, Abenteuer", + duration: 'tba', + fsk: "?", + description: "Während die Neue Republik daran arbeitet, alles zu schützen, wofür die Rebellion gekämpft hat, sichern sie sich die Unterstützung des legendären mandalorianischen Kopfgeldjägers Din Djarin und seines jungen Lehrlings Grogu. ", + poster: "img/mandalorian.jpeg", + backdrop: "img/mandalorian.jpeg" + }, + { + title: "Glennkill - Ein Schafskrimi", + genre: "Krimi, Komödie", + duration: 'tba', + fsk: "?", + description: "Schäfer George liest seinen geliebten Schafen jeden Abend Krimis vor und nimmt an, dass sie kein Wort davon verstehen. Doch als ein mysteriöser Vorfall das friedliche Leben auf der Farm durchbricht, wird den Schafen bewusst, dass sie selbst nun die Ermittlungen übernehmen müssen. Also folgen sie der Spur der Beweise und machen menschliche Verdächtige ausfindig.", + poster: "img/glennkill.jpg", + backdrop: "img/glennkill.jpg" + }, + { + title: "Masters of the Universe", + genre: "Action, Science-Fiction", + duration: 'tba', + fsk: "?", + description: "Nach 15 Jahren der Trennung führt das Schwert der Macht Prinz Adam zurück nach Eternia und er entdeckt, dass seine Heimat unter der Herrschaft von Skeletor in Trümmern liegt.", + poster: "img/masteruniverse.jpg", + backdrop: "img/masteruniverse.jpg" + }, + { + title: "Minions and Monsters", + genre: "Animation, Familie", + duration: 'tba', + fsk: "?", + description: "MINIONS & MONSTER erzählt die abgefahrene, aberwitzige und natürlich absolut wahre Geschichte von den Minions und wie sie Hollywood erobern, Filmstars werden, alles verlieren, Monster auf die Welt loslassen und sich dann heldenhaft daranmachen, den Planeten vor genau dem Chaos zu retten, das sie selbst angerichtet haben. ", + poster: "img/minionsmonsters.jpg", + backdrop: "img/minionsmonsters.jpg" + }, + { + title: "Spider Man - Brand New Day", + genre: "Action", + duration: 'tba', + fsk: "?", + description: "Spider-Man: Brand New Day erzählt die Geschichte von Peter Parker, der sich mit den Herausforderungen eines neuen Lebens auseinandersetzt.", + poster: "img/spidermannewday.jpg", + backdrop: "img/spidermannewday.jpg" + }, + { + title: "Scream VII", + genre: "Horror", + duration: 'tba', + fsk: "18", + description: "Als in der ruhigen Stadt, in der Sidney Prescott sich ein neues Leben aufgebaut hat, ein neuer Ghostface-Killer auftaucht, werden ihre schlimmsten Befürchtungen wahr, denn ihre Tochter ist sein nächstes Ziel.", + poster: "img/screamvii.jpg", + backdrop: "img/screamvii.jpg" + }, + { + title: "Blade Runner 2049", + genre: "Science-Fiction, Action", + duration: "163", + fsk: "16", + description: "30 Jahre nach den Ereignissen des ersten Films fördert ein neuer Blade Runner, der LAPD Polizeibeamte K (Ryan Gosling), ein lange unter Verschluss gehaltenes Geheimnis zu Tage, welches das Potential hat, die noch vorhandenen gesellschaftlichen Strukturen in Chaos zu stürzen. Die Entdeckungen von K führen ihn auf die Suche nach Rick Deckard (Harrison Ford), einem seit 30 Jahren verschwundenen, ehemaligen LAPD Blade Runner.", + poster: "img/bladerunner2049.jpg", + backdrop: "img/bladerunner2049.jpg" + }, + { + title: "THE FALL GUY", + genre: "Action, Thriller", + duration: 126, + fsk: "16", + description: "Ein angeschlagener Stuntman, der seine besten Zeiten hinter sich hat, findet sich in einem Film mit dem Star wieder, für den er vor langer Zeit gedoubelt hat und der ihn ersetzt hat. Der Haken an der Sache ist jedoch, dass der Star verschwunden ist.", + poster: "img/fallguy.jpg", + backdrop: "img/fallguy.jpg" + }, + { + title: "THE MEG", + genre: "Action, Science-Fiction", + duration: 113, + fsk: "12", + description: "Jonas Taylor ist Tiefseetaucher im geheimen Auftrag der US Navy. Als er mit seiner Crew auf Erkundungstour im Marianengraben unterwegs ist, treffen sie auf einen urzeitlichen, überdimensionierten Hai, einen sogenannten Megalodon. Jonas überlebt die Begegnung als einziger und widmet sich von nun an dem Studium der Paläobiologie. Ein Freund aus der Vergangenheit, Masao Tanaka, bittet Jonas darum mit seiner Hilfe ein U-Boot im Marianengraben zu bergen. Jonas willigt ein, obwohl er noch immer um seine verstorbenen Teammitglieder trauert. Als sich Jonas und Masao dort befinden, sichten sie erneut den Megalodon.", + poster: "img/meg.jpg", + backdrop: "img/meg.jpg" + }, + { + title: "THE MEG 2: Die Tiefe", + genre: "Action, Science-Fiction", + duration: 116, + fsk: "12", + description: "Was ist besser als ein Riesenhai? Ganz einfach: viele Riesenhaie! In diesem spannenden Abenteuer tauchen die Zuschauer gemeinsam mit den weltbekannten Action-Ikonen Jason Statham und Wu Jing in unerforschte Gewässer ein. Als Leiter eines Forschungsteams machen sich die beiden Helden auf einen waghalsigen Erkundungstauchgang in die tiefsten Tiefen des Ozeans. Doch ihre Reise wird jäh unterbrochen, als ein skrupelloser Minenkonzern ihre Mission durchkreuzt und sie sich plötzlich in einem Kampf ums Überleben wiederfinden.", + poster: "img/meg2.jpg", + backdrop: "img/meg2.jpg" + }, + { + title: "Homefront", + genre: "Action, Thriller", + duration: 100, + fsk: "16", + description: "Ex-Drogencop Phil Broker will mit seiner Tochter Maddy in Louisiana ein neues Leben beginnen. Aber dann gerät Maddy auf dem Schulhof in eine Prügelei mit einem Jungen. Dessen Onkel ist ausgerechnet der Crystal-Meth-Dealer Gator Bodine. Als sich Broker nicht einschüchtern lässt und Bodine Hinweise auf seine wahre Identität entdeckt, zögert er nicht, die Feinde aus Brokers Vergangenheit auf seine Spur zu bringen.", + poster: "img/homefront.jpg", + backdrop: "img/homefront.jpg" + }, + { + title: "Cash Truck", + genre: "Action", + duration: 118, + fsk: "16", + description: "" + }, + { + title: "Die Gangster Gang", + genre: "Animation, Komödie", + duration: 100, + fsk: "6", + description: "Mastermind Mr. Wolf, Safeknacker Mr. Snake, Mr. Shark, der Meister der Verwandlung, Mr. Piranha, der Mann fürs Grobe, und die geniale Hackerin Ms. Tarantula sind die „Gangster Gang“, die meistgesuchten Verbrecher von allen. Als die fünf Bösewichte nach einem spektakulären Raub gefasst werden, geloben sie inständig Besserung, um dem Gefängnis zu entgehen, und merken bald, dass Gutes tun gar nicht so schlecht ist. Doch dann bedroht ein neuer Schurke die Stadt ...", + poster: "img/gangstergang.jpg", + backdrop: "img/gangstergang.jpg" + }, + { + title: "Die Gangster Gang 2", + genre: "Animation, Komödie", + duration: 104, + fsk: "6", + description: "Unsere Lieblings-Gangster sind zurück: Im brandneuen, actiongeladenen Abenteuer der gefeierten Antihelden von DreamWorks Animation steht die chaotische, nun geläuterte Gangster Gang endlich auf der guten Seite – wirklich, sie versuchen es! ", + poster: "img/gangstergang2.png", + backdrop: "img/gangstergang2.png" + }, + { + title: "GOAT - Bock auf große Sprünge", + genre: "Animation", + duration: 100, + fsk: "6", + description: "Will, eine kleine Ziege mit großen Träumen, bekommt die einmalige Chance, bei den Profis mitzumachen und Rarball zu spielen - ein hochintensiver, gemischter Vollkontaktsport, der von den schnellsten und wildesten Tieren der Welt dominiert wird. Wills neue Teamkollegen sind nicht begeistert, eine kleine Ziege in ihrem Team zu haben, aber Will ist entschlossen, den Sport zu revolutionieren und ein für alle Mal zu beweisen, dass \"Smalls can ball!\"", + poster: "img/goat.jpg", + backdrop: "img/goat.jpg" + }, + { + title: "TOY STORY", + genre: "Animation", + duration: 81, + fsk: "6", + description: "Als Andys Lieblingspuppe hat Woody im Kinderzimmer das Sagen. Kaum ist der Junge nicht da, erwacht die Cowboy-Figur zum Leben, und mit ihm auch all das andere Spielzeug um ihn herum. Aufgeregt debattiert man über Andys bevorstehenden Geburtstag. Es wird befürchtet, daß ihr Besitzer ein neues Geschenk bevorzugen wird. Und tatsächlich: Der Neuankömmling Buzz Lightyear, ein stolzer Space Ranger, avanciert zu Andys Favoriten. Diese Herabstufung will Woody nicht hinnehmen.", + poster: "img/toystory1.jpg", + backdrop: "img/toystory1.jpg" + }, + { + title: "TOY STORY 2", + genre: "Animation", + duration: 92, + fsk: "6", + description: "Als Woody von einem fiesen Sammler entführt wird macht sich die Puppen-Clique auf, ihren Freund zu befreien - aber schon auf die andere Straßenseite zu gelangen, gestaltet sich schwierig, ganz zu schweigen von den lauernden Gefahren im Spielzeugladen gegenüber: Doppelgänger stellen sich Buzz Lightyear in den Weg, durchgeknallte Barbie-Sirenen drohen die edlen Ritter vom rechten Weg abzubringen, und obendrein entkommt Zurg, der böse Imperator, aus seiner Plastikbox", + poster: "img/toystory2.jpg", + backdrop: "img/toystory2.jpg" + }, + { + title: "TOY STORY 3", + genre: "Animation", + duration: 103, + fsk: "6", + description: "Der Moment des Abschieds ist gekommen: Andy ist den Kinderschuhen entwachsen und macht sich bereit, aufs College zu gehen. Für sein stets getreues Spielzeug hat er keine Verwendung mehr. Andys Mutter spendet die Spielsachen der Kindertagesstätte Sunnyside. Doch dieses angebliche Paradies entpuppt sich nach zuerst freundlicher Aufnahme durch die alteingesessenen Spielzeuge bald zum Gefängnis für die Freunde. Ein ausgeklügelter Ausbruchsplan wird ausgearbeitet - die Zeit drängt, denn hier geht nicht alles mit rechten Dingen zu.", + poster: "img/toystory3.jpg", + backdrop: "img/toystory3.jpg" + }, + { + title: "TOY STORY 4 - Alles hört auf kein Kommando", + genre: "Animation", + duration: 99, + fsk: "6", + description: "Woody wusste immer um seinen Platz im (Spielzeug-)Universum, seine Priorität war es, sich um „sein“ Kind zu kümmern, sei es sein alter Kindheits-Freund Andy oder die süße Bonnie. Aber als Bonnie ein äußerst widerspenstiges neues Spielzeug in ihre Sammlung aufnimmt, hat Woodys ruhiger gewordenes Kinderzimmerleben ein Ende. Denn Forky hat eine schwere Identitätskrise und ist davon überzeugt, kein Spielzeug zu sein. Zusammen mit alten und neuen Freunden erleben Forky und Woody den Roadtrip ihres Lebens und lernen dabei, dass die Welt für ein Spielzeug viel größer ist als jemals gedacht.", + poster: "img/toystory4.jpg", + backdrop: "img/toystory4.jpg" + + }, + { + title: "TOY STORY 5", + genre: "Animation", + duration: 'tba', + fsk: "6", + description: "Die Spielzeuge sind zurück und dieses Mal werden die Aufgaben von Buzz Lightyear, Woody, Jessie und dem Rest der Bande herausgefordert, als sie mit Lilypad (Stimme von Greta Lee) konfrontiert werden, einem brandneuen Tablet-Gerät, das mit seinen eigenen störenden Ideen darüber kommt, was das Beste für ihr Kind Bonnie ist. Wird die Spielzeit jemals wieder dieselbe sein?", + poster: "img/toystory5.png", + backdrop: "img/toystory5.png" + }, + { + title: "Die Monster AG - Monsters Inc.", + genre: "Animation, Familie", + duration: 92, + fsk: "6", + description: "In der Monster-AG-Fabrik gehen die Bösewichte eifrig ihrer Arbeit nach: Über Schranktüren schleichen sie sich in Kinderzimmer ein und sammeln die Angstschreie ihrer Bewohner, die den Strom für Monstropolis liefern. Ungekrönter Star unter den einfallsreichen \"Schreckeinjagern\" ist Sully. Dem passiert eines Tages ein folgenschweres Missgeschick: Das kleine Mädchen Boo, dem er wie gewohnt einen kräftigen Schock versetzen will, verkrallt sich in sein Fell. Als er dann mit dem Kind in die Fabrik zurückkehrt, bricht das totale Chaos aus...", + poster: "img/monsterag.png", + backdrop: "img/monsterag.png" + }, + { + title: "Die Monster Uni - Monsters University", + genre: "Animation, Familie", + duration: 104, + fsk: "6", + description: "Auch Monster müssen lernen, wie man andere wirkungsvoll erschreckt. Genau hierfür gibt es die Monster-Universität, einen Ort an dem aus harmlosen kleinen Monstern die ganz großen Schrecken gemacht werden. Exakt davon träumt Mike schon die ganze Zeit, deshalb schreibt er sich direkt für die Scheckwissenschaften ein. Nun ist er ein Student und lernt viele neue Monster kennen, die wie er den Studiengang schaffen wollen. Doch das ist nicht so einfach wie anfangs erst gedacht, denn neben guten Noten geht es auch um das Ansehen an der Uni. So bricht zwischen Mike und seinem neuen Bekannten Sulley ein wahrer Kampf um die besseren Schrecker aus.", + poster: "img/monsteruni.jpg", + backdrop: "img/monsteruni.jpg" + } + ]; + + const hallRotation = ["IMAX", "Deluxe 1", "Kino 1", "Kino 2"]; + const timePatterns = [ + ["13:00", "15:20", "17:40", "20:00", "22:20"], + ["13:00", "14:50", "17:10", "19:30", "21:50"], + ["13:00", "15:10", "17:30", "19:50", "22:10"], + ["13:00", "16:00", "18:20", "20:40"] + ]; + + let movieProgram = []; + let heroItems = []; + let heroIndex = 0; + let heroTimer = null; + + const weekdayShort = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]; + + const hideAllViews = () => { + Object.values(views).forEach((view) => view?.classList.add("hidden")); + document.getElementById("about-tech-modal")?.classList.add("hidden"); + document.body.style.overflow = "auto"; + }; + + const showHome = () => { + hideAllViews(); + views.hero?.classList.remove("hidden"); + views.moviesGrid?.classList.remove("hidden"); + document.getElementById("about-tech-modal")?.classList.add("hidden"); + document.body.style.overflow = "auto"; + window.scrollTo({ top: 0, behavior: "smooth" }); + }; + + const showMovieList = (programIndexToFocus = null) => { + hideAllViews(); + views.list?.classList.remove("hidden"); + + if (programIndexToFocus === null) { + window.scrollTo({ top: 0, behavior: "smooth" }); + return; + } + + const target = views.list?.querySelector(`[data-program-index="${programIndexToFocus}"]`); + if (target) { + target.scrollIntoView({ behavior: "smooth", block: "start" }); + target.classList.add("flash-focus"); + setTimeout(() => target.classList.remove("flash-focus"), 1200); + } + }; + + const showStaticView = (viewElement) => { + if (!viewElement) { + return; + } + + hideAllViews(); + viewElement.classList.remove("hidden"); + window.scrollTo({ top: 0, behavior: "smooth" }); + }; + + const showCheckoutStart = () => { + if (!cart.length) { + alert("Dein Warenkorb ist leer."); + return; + } + + hideAllViews(); + views.checkout?.classList.remove("hidden"); + checkoutSteps.one?.classList.remove("hidden"); + checkoutSteps.two?.classList.add("hidden"); + checkoutSteps.three?.classList.add("hidden"); + renderCheckout?.(); + window.scrollTo(0, 0); + }; + + const closeBookingModal = () => { + ui.bookingModal?.classList.add("hidden"); + }; + + const escapeHtml = (value) => String(value || "") + .replaceAll("&", "&") + .replaceAll("<", "<") + .replaceAll(">", ">") + .replaceAll('"', """) + .replaceAll("'", "'"); + + const formatDateShort = (dateObj) => { + const day = String(dateObj.getDate()).padStart(2, "0"); + const month = String(dateObj.getMonth() + 1).padStart(2, "0"); + return `${day}.${month}.`; + }; + + const buildDayMeta = (offset) => { + const date = new Date(); + date.setHours(0, 0, 0, 0); + date.setDate(date.getDate() + offset); + + const weekday = weekdayShort[date.getDay()]; + const formattedDate = formatDateShort(date); + + if (offset === 0) { + return { + offset, + date, + short: "Heute", + long: `Heute, ${formattedDate}` + }; + } + + if (offset === 1) { + return { + offset, + date, + short: "Morgen", + long: `Morgen, ${formattedDate}` + }; + } + + return { + offset, + date, + short: weekday, + long: `${weekday}, ${formattedDate}` + }; + }; + + const buildScheduleForMovie = (movieIndex) => { + return Array.from({ length: 7 }, (_, dayOffset) => { + const dayMeta = buildDayMeta(dayOffset); + const pattern = timePatterns[(movieIndex + dayOffset) % timePatterns.length]; + const desiredCount = 4 + ((movieIndex + dayOffset) % 2); + const showCount = Math.min(pattern.length, desiredCount); + + const showings = pattern.slice(0, showCount).map((time, slotIndex) => { + const hall = hallRotation[(movieIndex + dayOffset + slotIndex) % hallRotation.length]; + return { time, hall }; + }); + + return { + ...dayMeta, + showings + }; + }); + }; + + const buildMovieProgram = () => { + movieProgram = movieCatalog.map((movie, movieIndex) => ({ + ...movie, + schedule: buildScheduleForMovie(movieIndex) + })); + heroItems = movieProgram.slice(0, 5); + }; + + const setHeroSlide = (index) => { + 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, index) => ` +
+ `).join(""); + + if (ui.heroDots) { + ui.heroDots.innerHTML = heroItems.map((_, index) => ` + + `).join(""); + + ui.heroDots.addEventListener("click", (event) => { + const dot = event.target.closest(".hero-dot"); + if (!dot) { + return; + } + + const nextIndex = Number(dot.dataset.heroIndex || 0); + setHeroSlide(nextIndex); + + if (heroTimer) { + clearInterval(heroTimer); + heroTimer = setInterval(() => setHeroSlide(heroIndex + 1), 6500); + } + }); + } + + setHeroSlide(0); + + if (heroTimer) { + clearInterval(heroTimer); + } + + heroTimer = setInterval(() => { + setHeroSlide(heroIndex + 1); + }, 6500); + }; + + const renderNowRunningRow = () => { + if (!ui.nowRunningRow) { + return; + } + + ui.nowRunningRow.innerHTML = movieProgram.map((movie, index) => ` +
+ ${escapeHtml(movie.title)} +
+

${escapeHtml(movie.title)}

+

${escapeHtml(movie.genre)}

+ +
+
+ `).join(""); + }; + + const renderScheduleRows = (programIndex, dayIndex) => { + const movie = movieProgram[programIndex]; + if (!movie) { + return; + } + + const day = movie.schedule[dayIndex]; + const body = document.getElementById(`schedule-body-${programIndex}`); + if (!body || !day) { + return; + } + + body.innerHTML = day.showings.map((showing) => ` + + `).join(""); + }; + + const renderMovieProgramList = () => { + if (!ui.movieProgramList) { + return; + } + + ui.movieProgramList.innerHTML = movieProgram.map((movie, programIndex) => { + const dayTabs = movie.schedule.map((day, dayIndex) => ` + + `).join(""); + + return ` +
+
+ ${escapeHtml(movie.title)} + ${escapeHtml(movie.fsk)} +
+
+
+

${escapeHtml(movie.title)}

+ ${movie.duration} Min. | ${escapeHtml(movie.genre)} | FSK: ${escapeHtml(movie.fsk)} +
+

${escapeHtml(movie.description)}

+ +
${dayTabs}
+ +
+
+ TagKinosaalUhrzeit +
+
+
+
+
+ `; + }).join(""); + + movieProgram.forEach((_, programIndex) => { + renderScheduleRows(programIndex, 0); + }); + }; + + const initRevealAnimations = () => { + const revealElements = Array.from(document.querySelectorAll(".reveal-on-scroll")); + if (!revealElements.length) { + return; + } + + if (!("IntersectionObserver" in window)) { + revealElements.forEach((element) => element.classList.add("is-visible")); + return; + } + + const observer = new IntersectionObserver((entries, obs) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) { + return; + } + + entry.target.classList.add("is-visible"); + obs.unobserve(entry.target); + }); + }, { threshold: 0.2 }); + + revealElements.forEach((element) => observer.observe(element)); + }; + + const renderMovieExperience = () => { + buildMovieProgram(); + renderHero(); + renderNowRunningRow(); + renderMovieProgramList(); + initRevealAnimations(); + }; + + const bindNavigation = () => { + ui.logo?.addEventListener("click", showHome); + + ui.linkFilme?.addEventListener("click", (event) => { + event.preventDefault(); + showMovieList(); + }); + + ui.linkSnacks?.addEventListener("click", (event) => { + event.preventDefault(); + showStaticView(views.snacks); + }); + + ui.linkAbout?.addEventListener("click", (event) => { + event.preventDefault(); + showStaticView(views.about); + }); + + ui.linkCart?.addEventListener("click", (event) => { + event.preventDefault(); + hideAllViews(); + views.cart?.classList.remove("hidden"); + renderCart?.(); + }); + + ui.linkAccount?.addEventListener("click", (event) => { + event.preventDefault(); + hideAllViews(); + views.account?.classList.remove("hidden"); + + const isUserLoggedIn = typeof currentUser !== "undefined" && currentUser; + if (isUserLoggedIn && typeof openAccountDashboard === "function") { + openAccountDashboard(); + } + }); + + ui.heroBookingBtn?.addEventListener("click", () => { + showMovieList(); + }); + + ui.checkoutBtn?.addEventListener("click", showCheckoutStart); + ui.backHomeBtn?.addEventListener("click", showHome); + }; + + const bindProgramActions = () => { + views.moviesGrid?.addEventListener("click", (event) => { + const trigger = event.target.closest(".open-program-btn"); + if (!trigger) { + return; + } + + const programIndex = Number(trigger.dataset.programIndex || 0); + showMovieList(programIndex); + }); + + ui.movieProgramList?.addEventListener("click", (event) => { + const dayButton = event.target.closest(".program-day-tab"); + if (!dayButton) { + return; + } + + const programIndex = Number(dayButton.dataset.programIndex || 0); + const dayIndex = Number(dayButton.dataset.dayIndex || 0); + + const tabRow = dayButton.closest(".program-day-tabs"); + tabRow?.querySelectorAll(".program-day-tab").forEach((tab) => tab.classList.remove("active")); + dayButton.classList.add("active"); + + renderScheduleRows(programIndex, dayIndex); + }); + }; + + const bindHomeInfoNavigation = () => { + const openButtons = Array.from(document.querySelectorAll("[data-home-view-open]")); + const backButtons = Array.from(document.querySelectorAll("[data-go-home]")); + const aboutOpenButtons = Array.from(document.querySelectorAll("[data-about-modal-open]")); + const aboutCloseButtons = Array.from(document.querySelectorAll("[data-about-modal-close]")); + const aboutModal = document.getElementById("about-tech-modal"); + + if (!openButtons.length) { + return; + } + + const targetMap = { + "halls-view": views.halls, + "dbox-view": views.dbox, + "collectors-view": views.collectors + }; + + openButtons.forEach((button) => { + button.addEventListener("click", () => { + const targetId = button.getAttribute("data-home-view-open"); + const target = targetId ? targetMap[targetId] : null; + if (target) { + showStaticView(target); + } + }); + }); + + backButtons.forEach((button) => { + button.addEventListener("click", () => { + showHome(); + }); + }); + + aboutOpenButtons.forEach((button) => { + button.addEventListener("click", () => { + const targetId = button.getAttribute("data-about-modal-open"); + if (targetId === "about-tech-modal" && aboutModal) { + aboutModal.classList.remove("hidden"); + document.body.style.overflow = "hidden"; + } + }); + }); + + aboutCloseButtons.forEach((button) => { + button.addEventListener("click", () => { + aboutModal?.classList.add("hidden"); + document.body.style.overflow = "auto"; + }); + }); + + aboutModal?.addEventListener("click", (event) => { + if (event.target === aboutModal) { + aboutModal.classList.add("hidden"); + document.body.style.overflow = "auto"; + } + }); + + document.addEventListener("keydown", (event) => { + if (event.key === "Escape" && aboutModal && !aboutModal.classList.contains("hidden")) { + aboutModal.classList.add("hidden"); + document.body.style.overflow = "auto"; + } + }); + }; + + const initThemeToggle = () => { + if (!ui.themeToggle) { + return; + } + + const THEME_KEY = "eagleTheme"; + + const applyTheme = (theme) => { + const isLight = theme === "light"; + document.body.classList.toggle("theme-light", isLight); + document.body.classList.toggle("theme-dark", !isLight); + ui.themeToggle.classList.toggle("is-light", isLight); + localStorage.setItem(THEME_KEY, isLight ? "light" : "dark"); + }; + + const storedTheme = localStorage.getItem(THEME_KEY); + applyTheme(storedTheme === "light" ? "light" : "dark"); + + ui.themeToggle.addEventListener("click", () => { + const nextTheme = document.body.classList.contains("theme-light") ? "dark" : "light"; + applyTheme(nextTheme); + }); + }; + + const bindAccountActions = () => { + const registerModal = document.getElementById("register-modal"); + const forgotModal = document.getElementById("forgot-modal"); + const forgotEmailInput = document.getElementById("forgot-email"); + const resetMessage = document.getElementById("reset-message"); + const loginError = document.getElementById("login-error"); + const loginEmailInput = document.getElementById("login-email"); + const loginPasswordInput = document.getElementById("login-password"); + + const openModal = (modal) => modal?.classList.remove("hidden"); + const closeModal = (modal) => modal?.classList.add("hidden"); + const triggerLogin = () => { + loginError?.classList.add("hidden"); + if (typeof loginUser === "function") { + loginUser(); + } + }; + + document.getElementById("btn-open-register")?.addEventListener("click", () => { + openModal(registerModal); + }); + + document.getElementById("btn-close-register")?.addEventListener("click", () => { + closeModal(registerModal); + }); + + document.getElementById("btn-register-save")?.addEventListener("click", () => { + if (typeof registerUser === "function") { + registerUser(); + } + }); + + document.getElementById("btn-login-account")?.addEventListener("click", triggerLogin); + + [loginEmailInput, loginPasswordInput].forEach((input) => { + input?.addEventListener("keydown", (event) => { + if (event.key !== "Enter") { + return; + } + + event.preventDefault(); + triggerLogin(); + }); + }); + + document.getElementById("btn-forgot-password")?.addEventListener("click", () => { + if (forgotEmailInput) { + forgotEmailInput.value = ""; + } + resetMessage?.classList.add("hidden"); + openModal(forgotModal); + }); + + document.getElementById("btn-close-forgot")?.addEventListener("click", () => { + closeModal(forgotModal); + }); + + document.getElementById("btn-send-reset")?.addEventListener("click", () => { + const email = forgotEmailInput?.value.trim() || ""; + if (!email || !email.includes("@")) { + alert("Bitte gib eine gueltige E-Mail-Adresse ein."); + return; + } + + if (resetMessage) { + resetMessage.textContent = "Wenn ein Konto existiert, wurde ein Reset-Code simuliert versendet."; + resetMessage.classList.remove("hidden"); + } + }); + + registerModal?.addEventListener("click", (event) => { + if (event.target === registerModal) { + closeModal(registerModal); + } + }); + + forgotModal?.addEventListener("click", (event) => { + if (event.target === forgotModal) { + closeModal(forgotModal); + } + }); + + document.addEventListener("keydown", (event) => { + if (event.key === "Escape") { + closeModal(registerModal); + closeModal(forgotModal); + } + }); + }; + + const bindGlobalDocumentClicks = () => { + document.addEventListener("click", (event) => { + if (event.target.classList.contains("opt-btn")) { + const optionGroup = event.target.parentElement; + optionGroup?.querySelectorAll(".opt-btn").forEach((button) => button.classList.remove("active")); + event.target.classList.add("active"); + } + + const deleteBtn = event.target.closest(".btn-delete-item"); + if (deleteBtn?.dataset.key) { + const row = deleteBtn.closest(".cart-item-row"); + if (row) { + row.classList.add("slide-out-left"); + row.querySelectorAll("button").forEach((button) => { + button.disabled = true; + }); + + setTimeout(() => { + removeFromCartByKey(deleteBtn.dataset.key); + }, 380); + } else { + removeFromCartByKey(deleteBtn.dataset.key); + } + return; + } + + const chip = event.target.closest(".time-chip"); + if (chip) { + const movieFromData = chip.getAttribute("data-movie"); + const movieCard = chip.closest(".movie-card, .detailed-card, .program-card"); + const movie = movieFromData || movieCard?.querySelector("h2, h3")?.innerText || "Film"; + const hall = chip.getAttribute("data-hall"); + const time = chip.getAttribute("data-time"); + + if (hall && time && typeof openBooking === "function") { + openBooking(movie, hall, time); + } + } + + const qtyBtn = event.target.closest(".btn-qty"); + if (!qtyBtn) { + return; + } + + const action = qtyBtn.dataset.action; + const key = qtyBtn.dataset.key; + if (!action || !key) { + return; + } + + const relatedItem = cart.find((item) => { + const infoText = item.category === "movie" + ? `Sitz: ${item.seatId} (${item.hall})` + : item.time; + return `${item.title}-${item.hall}-${infoText}` === key; + }); + + if (!relatedItem || relatedItem.category === "movie") { + return; + } + + if (action === "plus") { + cart.push({ ...relatedItem, id: Date.now() + Math.random() }); + } else { + const keyList = cart.map((item) => { + const infoText = item.category === "movie" + ? `Sitz: ${item.seatId} (${item.hall})` + : item.time; + return `${item.title}-${item.hall}-${infoText}`; + }); + const lastMatch = keyList.lastIndexOf(key); + + if (lastMatch !== -1) { + cart.splice(lastMatch, 1); + } + } + + saveCart?.(); + renderCart?.(); + }); + }; + + const bindSnacksActions = () => { + ui.snacksView?.addEventListener("click", (event) => { + const sizeChip = event.target.closest(".size-chip"); + if (!sizeChip) { + return; + } + + const snackCard = sizeChip.closest(".snack-card"); + if (!snackCard) { + return; + } + + const snackTitle = snackCard.querySelector("h3, h2")?.innerText || "Snack"; + const snackImg = snackCard.querySelector("img")?.src || ""; + const priceSpan = sizeChip.querySelector("span"); + const rawPriceText = (priceSpan ? priceSpan.innerText : sizeChip.innerText) + .replace("EUR", "") + .replace("€", "") + .replace(",", ".") + .trim(); + const priceVal = parseFloat(rawPriceText) || 0; + const sizeVal = sizeChip.innerText.replace(priceSpan?.innerText || "", "").trim() || "Standard"; + const activeOption = snackCard.querySelector(".opt-btn.active"); + const variantVal = activeOption ? activeOption.innerText : "Normal"; + + cart.push({ + id: Date.now() + Math.random(), + category: "snack", + title: snackTitle, + hall: sizeVal, + time: variantVal, + type: "SNACK", + price: priceVal, + img: snackImg + }); + + saveCart?.(); + + const originalHtml = sizeChip.innerHTML; + sizeChip.innerHTML = "Hinzugefügt!"; + setTimeout(() => { + sizeChip.innerHTML = originalHtml; + }, 800); + }); + + document.querySelectorAll(".tab-btn").forEach((button) => { + button.addEventListener("click", () => { + document.querySelectorAll(".tab-btn").forEach((tab) => tab.classList.remove("active")); + button.classList.add("active"); + + document.querySelectorAll(".snack-category").forEach((category) => category.classList.add("hidden")); + document.getElementById(button.dataset.target)?.classList.remove("hidden"); + }); + }); + }; + + const bindOverlayActions = () => { + ui.btnYesSnacks?.addEventListener("click", () => { + ui.snackOverlay?.classList.add("hidden"); + hideAllViews(); + views.snacks?.classList.remove("hidden"); + document.body.style.overflow = "auto"; + }); + + ui.btnNoCart?.addEventListener("click", () => { + ui.snackOverlay?.classList.add("hidden"); + hideAllViews(); + views.cart?.classList.remove("hidden"); + renderCart?.(); + document.body.style.overflow = "auto"; + }); + }; + + const bindBookingModalClose = () => { + ui.closeBookingModalBtn?.addEventListener("click", closeBookingModal); + + ui.bookingModal?.addEventListener("click", (event) => { + if (event.target === ui.bookingModal) { + closeBookingModal(); + } + }); + }; + + window.removeFromCartByKey = function removeFromCartByKey(key) { + cart = cart.filter((item) => { + const infoText = item.category === "movie" + ? `Sitz: ${item.seatId} (${item.hall})` + : item.time; + return `${item.title}-${item.hall}-${infoText}` !== key; + }); + + saveCart?.(); + renderCart?.(); + }; + + renderMovieExperience(); + initThemeToggle(); + bindNavigation(); + bindProgramActions(); + bindHomeInfoNavigation(); + bindAccountActions(); + bindGlobalDocumentClicks(); + bindSnacksActions(); + bindOverlayActions(); + bindBookingModalClose(); + + updateCartBadge?.(); + renderCheckout?.(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..2fe1182 --- /dev/null +++ b/style.css @@ -0,0 +1,3867 @@ +:root { + --bg-black: #000000; + --card-bg: #1c1c1e; + --text-white: #f5f5f7; + --accent-blue: #0071e3; + --glass: rgba(29, 29, 31, 0.75); +} + +/* Global Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Segoe UI', sans-serif; +} + +body { + background: var(--bg-black); + color: var(--text-white); + overflow-x: hidden; +} + +.hidden { display: none !important; } + +/* --- Navigation --- */ +.navbar { + position: fixed; + top: 0; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.2rem 10%; + background: var(--glass); + backdrop-filter: blur(20px); + z-index: 1000; +} + +.nav-links { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-links a { + color: white; + text-decoration: none; + opacity: 0.8; + font-size: 0.9rem; +} + +/* --- Hero Section --- */ +.hero { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background: linear-gradient(rgba(0,0,0,0.4), #000), url('https://images.unsplash.com/photo-1485846234645-a62644f84728?q=80&w=2000') center/cover; +} + +.badge { + background: var(--accent-blue); + padding: 4px 12px; + border-radius: 20px; + font-size: 0.7rem; + font-weight: bold; +} + +.hero h1 { + font-size: 4.5rem; + margin: 10px 0; +} + +/* --- Movie Grid & Sections --- */ +.movie-section { padding: 80px 10%; } + +.movie-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 30px; +} + +.movie-card { + background: var(--card-bg); + border-radius: 20px; + overflow: hidden; +} + +.movie-poster img { + width: 100%; + aspect-ratio: 2/3; + object-fit: cover; +} + +.movie-info { padding: 20px; } + +.showtimes { + display: flex; + gap: 10px; + margin-top: 15px; +} + +/* --- UI Elements (Chips & Buttons) --- */ +.time-chip { + background: rgba(255,255,255,0.1); + border: none; + color: white; + padding: 8px 15px; + border-radius: 10px; + cursor: pointer; + transition: 0.3s; +} + +.time-chip:hover { background: var(--accent-blue); } + +.btn-primary { + background: var(--accent-blue); + color: white; + border: none; + padding: 12px 25px; + border-radius: 20px; + cursor: pointer; +} + +/* --- Detailed List View --- */ +.detailed-card { + display: flex; + background: var(--card-bg); + border-radius: 24px; + margin-bottom: 30px; + overflow: hidden; +} + +.card-left { + width: 250px; + position: relative; +} + +.card-left img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.card-right { + flex: 1; + padding: 30px; +} + +.fsk { + position: absolute; + bottom: 10px; + left: 10px; + width: 35px; + height: 35px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; +} + +.fsk-0 { background: #d6d6d6; } +.fsk-6 { background: #e3c500; } +.fsk-12 { background: #008d39; } +.fsk-16 { background: #0095ff; } +.fsk-18 { background: #ff3730; } + +.schedule-container { + background: rgba(0,0,0,0.2); + padding: 15px; + border-radius: 15px; + margin-top: 20px; +} + +.schedule-header { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + color: #86868b; + font-size: 0.7rem; + margin-bottom: 10px; +} + +.schedule-row { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + align-items: center; + padding: 10px; + border-radius: 10px; +} + +.time-btn { + background: var(--accent-blue); + padding: 5px 10px; + border-radius: 5px; + width: fit-content; +} + +/* --- Booking Modal --- */ +.modal { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background: rgba(0,0,0,0.85); + backdrop-filter: blur(20px); + display: flex; + justify-content: center; + align-items: center; + z-index: 2000; +} + +.modal-content { + background: #1c1c1e; + padding: 40px; + border-radius: 32px; + width: 90%; + max-width: 1000px; + border: 1px solid rgba(255,255,255,0.1); + position: relative; +} + +.close-btn { + position: absolute; + top: 20px; + right: 25px; + font-size: 2rem; + cursor: pointer; + color: #86868b; +} + +.modal-close-btn { + position: absolute; + top: 16px; + right: 16px; + width: 36px; + height: 36px; + border: 0; + border-radius: 50%; + background: #2b2b2d; + color: #fff; + font-size: 1.4rem; + line-height: 1; + cursor: pointer; + transition: background 0.2s ease; +} + +.modal-close-btn:hover { + background: #3a3a3d; +} + +.screen { + height: 5px; + background: white; + width: 80%; + margin: 20px auto; + box-shadow: 0 0 15px white; +} + +.screen-text { + text-align: center; + font-size: 0.7rem; + color: #86868b; + letter-spacing: 5px; +} + +/* --- MODAL & SITZPLAN UPDATE --- */ +.modal-large { + max-width: 95vw !important; /* Fast die ganze Breite nutzen */ + max-height: 90vh; + overflow-y: auto; /* Vertikales Scrollen erlauben */ + width: 1000px !important; +} + +#deluxe-logos { + display: flex; + gap: 10px; + justify-content: center; + margin-top: 15px; +} + +.logo-placeholder { + background: rgba(255,255,255,0.1); + padding: 6px 12px; + border-radius: 8px; + font-size: 0.75rem; + color: #86868b; + border: 1px dashed rgba(255,255,255,0.3); +} + +.seat-map-container { + width: 100%; + overflow-x: auto; /* Horizontales Scrollen für IMAX */ + padding: 10px 0 20px 0; +} + +.seat-grid-custom { + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + margin: 20px auto; + width: fit-content; +} + +.seat-row { + display: flex; + gap: 8px; + justify-content: center; +} + +.aisle { + width: 25px; /* Breite des Durchgangs */ +} + +/* Sitzplatz Design */ +/* --- SITZPLATZ DESIGN UPDATE --- */ +.seat { + width: 26px; + height: 26px; + background: #3a3a3c; /* Standard Grau */ + border-radius: 6px; + cursor: pointer; + transition: all 0.2s ease-in-out; + display: flex; + align-items: center; + justify-content: center; + position: relative; + border: 1px solid rgba(255,255,255,0.1); +} + +/* Hover-Effekt (Hervorhebung) */ +.seat:hover:not(.occupied) { + transform: scale(1.25); + z-index: 10; + border-color: rgba(255,255,255,0.5); +} + +/* Farben der Typen */ +.seat.normal, .seat.imax { background: #3a3a3c; } +.seat.vip { background: #ff9500; } /* Orange */ +.seat.dbox { + background: #ffca28; /* Gold */ + box-shadow: inset 0 0 5px rgba(0,0,0,0.2); +} + +/* Ausgewählter Zustand (Grün + Glow) */ +.seat.selected { + background: #34c759 !important; /* iOS Grün */ + box-shadow: 0 0 15px #34c759; + transform: scale(1.1); + border-color: white; +} + +/* Belegter Zustand (Rot mit X) */ +.seat.occupied { + background: #ff3b30 !important; /* Rot */ + cursor: not-allowed; + opacity: 1; + transform: none; +} + +.seat.occupied::after { + content: '×'; + color: white; + font-size: 18px; + font-weight: bold; + line-height: 1; +} + +/* Legende Styling */ +.legend .seat { cursor: default; pointer-events: none; width: 20px; height: 20px; } +.legend .item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #86868b; } + +#dynamic-legend { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 15px; + margin-top: 20px; + padding: 15px; + background: rgba(255,255,255,0.05); + border-radius: 12px; +} + +/* --- Snack Tabs Navigation --- */ +.category-tabs { + display: flex; + justify-content: center; + gap: 15px; + margin-bottom: 50px; +} + +.tab-btn { + background: #1c1c1e; + border: 1px solid rgba(255,255,255,0.1); + color: white; + padding: 12px 25px; + border-radius: 30px; + cursor: pointer; + transition: 0.3s; +} +.tab-btn:hover { background: rgba(255,255,255,0.1); } +.tab-btn.active { background: var(--accent-blue); border-color: var(--accent-blue); } + +.snack-category { + animation: fadeIn 0.4s ease-in-out; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +/* --- Snack Grid & Cards --- */ +.snack-section { padding: 100px 10%; } +.snack-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 25px; +} + +.snack-card { + background: var(--card-bg); + border-radius: 20px; + overflow: hidden; + transition: 0.3s; + border: 1px solid rgba(255,255,255,0.05); +} + +.snack-card:hover { + transform: translateY(-8px); border-color: var(--accent-blue); +} + +.snack-card.highlight { + border: 1px solid var(--accent-blue); + background: linear-gradient(145deg, #1c1c1e, #0a2540); +} + +.snack-img { + width: 100%; + height: 150px; + background: #111; +} + +.snack-img img { + width: 100%; + height: 100%; + object-fit: contain; /* Ideal für Produktfotos auf dunklem Grund */ + padding: 10px; +} + +/* --- SNACK INFO ZENTRIERUNG --- */ + +.snack-info { + padding: 20px; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; +} + +.snack-info h3 { + font-size: 1rem; + margin-bottom: 15px; + width: 100%; +} + +.size-selector { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; +} + +.size-chip { + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.1); + color: white; + padding: 6px 12px; + border-radius: 8px; + font-size: 0.75rem; + cursor: pointer; + transition: 0.2s; +} + +.size-chip span { + display: block; + color: var(--accent-blue); + font-weight: bold; +} + +.size-chip:hover { + background: var(--accent-blue); + border-color: var(--accent-blue); +} + +.size-chip:hover span { + color: white; +} + +.size-chip.special { + background: rgba(229, 160, 13, 0.1); + border: 1px solid #e5a00d; +} + +.size-chip.special span { + color: #e5a00d; +} + +/* Snack Options (Sweet/Salty & Dips) */ +.option-group { + display: flex; + gap: 5px; + margin-bottom: 15px; + background: rgba(0, 0, 0, 0.3); + padding: 4px; + border-radius: 10px; +} + +.opt-btn { + flex: 1; + background: transparent; + border: none; + color: #86868b; + padding: 6px; + font-size: 0.75rem; + font-weight: bold; + cursor: pointer; + border-radius: 7px; + transition: 0.2s; +} + +.opt-btn.active { + background: #3a3a3c; + color: white; +} + +/* --- Coming Soon Banner --- */ +.coming-soon-banner { + background: linear-gradient(45deg, #1c1c1e, #2a2a2d); + border: 2px dashed rgba(255,255,255,0.2); + border-radius: 20px; + padding: 80px 20px; + text-align: center; + color: var(--text-white); +} + +.coming-soon-banner h2 { + font-size: 2.5rem; + margin-bottom: 10px; + color: var(--accent-blue); +} + +.coming-soon-banner p { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 10px; +} + +.coming-soon-banner span { color: #86868b; } + +/* Layout breiter machen */ +.booking-layout { + display: flex; + gap: 40px; /* Mehr Abstand zwischen Plan und Preis */ + align-items: flex-start; + justify-content: center; + max-width: 1200px; /* Erlaubt dem Fenster mehr Platz */ + margin: 0 auto; + transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); +} + +/* Das rechte Panel optimiert */ +.summary-panel { + width: 300px; /* Etwas breiter für bessere Lesbarkeit */ + background: rgba(255, 255, 255, 0.03); + backdrop-filter: blur(10px); + border-radius: 24px; + padding: 25px; + border: 1px solid rgba(255, 255, 255, 0.08); + + /* Langsamere, sanftere Animation */ + animation: slideInSoft 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; +} + +@keyframes slideInSoft { + from { + opacity: 0; + transform: translateX(40px) scale(0.98); + } + to { + opacity: 1; + transform: translateX(0) scale(1); + } +} + +.summary-row { + display: flex; + justify-content: space-between; + font-size: 0.95rem; + margin-bottom: 12px; + color: #a1a1a6; + /* Die einzelnen Zeilen faden auch sanft ein */ + animation: fadeInRow 0.5s ease forwards; +} + +@keyframes fadeInRow { + from { opacity: 0; } + to { opacity: 1; } +} + +.summary-row .type { color: #f5f5f7; } +.summary-row .price { font-weight: bold; color: var(--accent-blue); } + +.divider { + height: 1px; + background: rgba(255, 255, 255, 0.1); + margin: 15px 0; +} + +.total-row { + display: flex; + justify-content: space-between; + font-weight: 600; + font-size: 1.2rem; + color: #ffffff; + letter-spacing: -0.02em; +} + +/* Verstecken mit sanftem Übergang */ +.hidden { display: none !important; } + +.header-sub-info { + display: flex; + align-items: center; + gap: 15px; + margin-top: 5px; +} + +.tech-badges-container { + display: flex; + gap: 10px; + align-items: center; + /* Sanfter Übergang beim Einblenden */ + animation: fadeIn 0.5s ease; +} + +.tech-badge { + height: 14px; /* Schön klein und dezent */ + width: auto; + opacity: 0.7; /* Leicht transparent für den edlen Look */ + filter: brightness(0) invert(1); /* Macht schwarze Logos weiß, passend zum Dark Mode */ +} + +.tech-badges-container.hidden { + display: none; +} + +.tech-badges-container { + display: flex; + gap: 10px; + align-items: center; + margin-left: 10px; +} + +.tech-badge { + height: 18px; /* Oder die gewünschte Höhe */ + width: auto; + opacity: 0.8; +} + +/* --- Warenkorb Badge --- */ +.cart-badge { + background-color: #e50914; /* Kino-Rot */ + color: white; + font-size: 0.75rem; + font-weight: bold; + border-radius: 50%; + padding: 2px 6px; + position: absolute; + top: -8px; + right: -15px; + transition: transform 0.3s ease; +} +.cart-badge.hidden { display: none; } +.cart-badge.pop { transform: scale(1.3); } /* Für eine kleine Animation beim Hinzufügen */ + +/* --- WARENKORB SPALTEN-LAYOUT & HINTERGRÜNDE --- */ +/* --- WARENKORB DESIGN (SPALTEN-LAYOUT) --- */ +.cart-container { + display: flex; + gap: 50px; + align-items: flex-start; + margin-top: 40px; +} + +/* Linke Seite (Artikelliste) mit Panel-Hintergrund */ +.cart-left { + flex: 2; + background-color: #1c1c1e !important; /* !important stellt sicher, dass es grau bleibt */ + padding: 35px; + border-radius: 28px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* Rechte Seite (Zusammenfassung) */ +.cart-right { + flex: 1; + min-width: 380px; +} + +.cart-items { + flex: 2; + background: #1c1c1e; + border-radius: 12px; + padding: 20px; +} +.cart-summary-box { + flex: 1; + background: #1c1c1e; + border-radius: 12px; + padding: 25px; + position: sticky; + top: 100px; +} +.cart-total-row { + display: flex; + justify-content: space-between; + font-size: 1.3rem; + font-weight: bold; + margin-top: 15px; + padding-top: 15px; + border-top: 1px solid #333; +} +.payment-methods-panel { + background: #2c2c2e !important; /* Ein helleres Grau als die Boxen oben */ + padding: 20px; + border-radius: 18px; + margin-top: 30px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* Die Logos selbst */ +.payment-methods-panel div { + display: flex; + justify-content: center; + gap: 15px; + opacity: 0.95; /* Fast volle Sichtbarkeit (vorher 0.6) */ +} + +.payment-methods-panel img { + height: 22px; /* Etwas größer für bessere Sichtbarkeit */ + filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); /* Kleiner Schatten für Tiefe */ + transition: transform 0.2s; +} + +.payment-methods-panel img:hover { + transform: scale(1.1); /* Kleiner Effekt beim Drüberfahren */ +} + +/* --- Snack Prompt Overlay --- */ +.snack-overlay { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background: rgba(0,0,0,0.8); + backdrop-filter: blur(5px); + display: flex; + justify-content: center; + align-items: center; + z-index: 2000; + opacity: 1; + transition: opacity 0.4s ease; +} +.snack-overlay.hidden { + opacity: 0; + pointer-events: none; +} +.snack-prompt-box { + background: #1c1c1e; + padding: 40px; + border-radius: 16px; + text-align: center; + max-width: 500px; + transform: translateY(0); + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} +.snack-overlay.hidden .snack-prompt-box { + transform: translateY(50px); +} +.snack-prompt-box h2 { margin-bottom: 15px; color: #fff; } +.snack-prompt-box p { color: #aaa; margin-bottom: 25px; } +.prompt-buttons { display: flex; gap: 15px; justify-content: center; } +.btn-secondary { + background: transparent; + border: 1px solid #fff; + color: #fff; + padding: 12px 24px; + border-radius: 8px; + cursor: pointer; + transition: 0.3s; +} +.btn-secondary:hover { background: rgba(255,255,255,0.1); } + +/* --- WARENKORB TABELLEN-LAYOUT --- */ +.cart-item-row, +.cart-header { + display: grid; + grid-template-columns: 100px 80px 1.5fr 1fr 100px 50px; + align-items: center; + gap: 0; /* Wir nutzen kein gap, um volle Kontrolle über die Spalten zu haben */ +} + +.cart-header { + font-size: 0.75rem; + color: #86868b; + font-weight: bold; + letter-spacing: 1.2px; + border-bottom: 1px solid #333; + padding: 15px 0; + margin-bottom: 10px; +} + +.cart-item-row { + padding: 20px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +/* 1. Spalte: Menge (Zentriert den Stepper/Text etwas) */ +.cart-item-row > div:nth-child(1), +.cart-header > div:nth-child(1) { + padding-left: 5px; +} + +/* 2. Spalte: Das Bild (Bekommt links Platz zum Stepper) */ +.cart-item-row > div:nth-child(2) { + padding-left: 15px; /* Abstand zwischen +/- Button und Bild */ +} + +/* 3. Spalte: ARTIKEL (Titel) - Hier schieben wir die Schrift nach rechts */ +.cart-header > div:nth-child(3), +.cart-item-row > div:nth-child(3) { + padding-left: 30px; /* Dieser Wert sorgt für die Ordnung */ +} + +/* 4. Spalte: INFO - Auch hier schieben wir für die vertikale Linie nach rechts */ +.cart-header > div:nth-child(4), +.cart-item-row > div:nth-child(4) { + padding-left: 30px; +} + +/* 5. Spalte: PREIS (Rechtsbündig für Tabellen-Look) */ +.cart-header > div:nth-child(5), +.cart-item-row > div:nth-child(5) { + text-align: right; + padding-right: 15px; +} + +/* 6. Spalte: LÖSCHEN (Zentriert am Ende) */ +.cart-header > div:nth-child(6), +.cart-item-row > div:nth-child(6) { + text-align: right; +} + +/* Bild-Styling innerhalb der Spalte */ +.cart-item-row img { + width: 45px; + height: 60px; + object-fit: cover; + border-radius: 8px; + display: block; +} +/* Plus-Minus Buttons */ +.qty-stepper { + display: flex; + align-items: center; + gap: 10px; + background: rgba(0,0,0,0.3); + padding: 5px 10px; + border-radius: 20px; + width: fit-content; +} + +.btn-qty { + background: none; + border: 1px solid var(--accent-blue); + color: var(--accent-blue); + width: 22px; + height: 22px; + border-radius: 50%; + cursor: pointer; + font-weight: bold; +} +.btn-delete-item { + transition: background 0.2s ease, transform 0.1s ease, opacity 0.2s ease; + cursor: pointer; +} + +.btn-qty:hover, +.btn-delete-item:hover { + background: #0071e3 !important; /* Das Apple-Blau */ + border-radius: 6px; /* Schön abgerundet */ + transform: scale(1.1); /* Minimal vergrößern */ +} +/* Animationen */ +@keyframes popIn { + 0% { transform: scale(0.9); opacity: 0; } + 100% { transform: scale(1); opacity: 1; } +} + +.animate-pop-in { + animation: popIn 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67); +} + +.btn-delete-item { + background: none; + border: none; + font-size: 1.2rem; + cursor: pointer; + opacity: 0.5; + transition: 0.3s; +} + +.btn-delete-item:hover { + opacity: 1; transform: scale(1.2); +} + +/* Checkout Container */ +.checkout-container { + max-width: 600px; + margin: 0 auto; + padding: 30px; + background: #1a1a1a; + border-radius: 12px; + box-shadow: 0 10px 30px rgba(0,0,0,0.5); +} + +/* Fortschrittsleiste */ +.progress-bar { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 40px; +} + +.progress-bar .step { + width: 35px; + height: 35px; + border-radius: 50%; + background: #333; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + color: #e5e5e7; /* Zahlen deutlich heller gemacht */ + transition: 0.3s; +} + +.progress-bar .step.active { + background: #4caf50 !important; /* Grün statt Rot/Blau */ + color: white; + border-color: #4caf50 !important; +} + +.progress-bar .line { + height: 4px; + width: 80px; + background: #333; + margin: 0 15px; + transition: all 0.5s ease; +} + +.progress-bar .line.active { + background: #4caf50 !important; +} +/* Zahlungsarten */ +.payment-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 15px; +} + +.payment-method { + background: #1c1c1e; + padding: 20px; + border-radius: 12px; + cursor: pointer; + border: 2px solid transparent; + display: flex; + flex-direction: row; /* Nebeneinander statt untereinander */ + align-items: center; /* Vertikal zentriert */ + justify-content: center; + gap: 15px; + transition: 0.3s; +} + +.payment-method img { + height: 22px; /* Einheitliche Größe */ + width: auto; + margin-top: 2px; /* Schiebt das Bild dezent nach unten für optische Symmetrie zum Text */ +} + +.payment-method:hover { + border-color: #888; +} + +.payment-method.selected { + border-color: #e50914; + background: rgba(229, 9, 20, 0.1); + transform: scale(1.02); +} + +/* Hover-Effekt für den Zurück-Pfeil */ +#btn-back-to-step1:hover { + opacity: 1; + transform: translateX(-3px); +} + +.cart-header-row, +.cart-item-row { + display: grid; + /* Spalten: Menge(100px) | Bild(100px) | Produkt(1.5fr) | Details(2fr) | Preis(100px) | Aktion(80px) */ + grid-template-columns: 100px 100px 1.5fr 2fr 100px 80px; + gap: 15px; + align-items: center; + padding: 15px 20px; +} + +.cart-header-row, +.cart-item-row { + display: grid; + /* Menge | Bild | Produkt | Details | Preis | Aktion */ + grid-template-columns: 110px 100px 1.3fr 1.7fr 100px 60px; + gap: 10px; + align-items: center; + padding: 15px 20px; +} + +.col-amount { text-align: center; } +.col-img { text-align: center; } + +/* Produkt & Details nach rechts schieben */ +.col-product { + text-align: left; + padding-left: 25px; /* Minimal mehr nach rechts */ +} + +.col-details { + text-align: left; + padding-left: 35px; /* Minimal mehr nach rechts */ +} + +/* Preis weiter links ausrichten */ +.col-price { + text-align: left; + padding-left: 10px; +} + +.col-action { text-align: right; } + +/* Menge-Stepper im Warenkorb */ +.qty-stepper { + display: flex; + align-items: center; + gap: 10px; + background: #2c2c2e; + padding: 5px 10px; + border-radius: 8px; + width: fit-content; +} + +.btn-qty { + cursor: pointer; + width: 28px; + height: 28px; + border: none; + background: #3a3a3c; + color: white; + border-radius: 6px; + font-weight: bold; + transition: 0.2s; +} +/* Klick-Zustand: Leicht eindrücken */ +.btn-qty:active, +.btn-delete-item:active { + transform: scale(0.95); +} + +/* Spezifisches Styling für den Mülleimer (damit der Hover-Hintergrund passt) */ +.btn-delete-item { + background: none; + border: none; + font-size: 1.2rem; + padding: 5px 8px; /* Etwas Platz für den blauen Hintergrund */ + display: flex; + align-items: center; + justify-content: center; +} + +.cart-img-small { + width: 60px; + height: 85px; + object-fit: cover; + border-radius: 6px; + box-shadow: 0 4px 10px rgba(0,0,0,0.3); +} + +.cart-item-info { + color: #0071e3; + font-size: 0.9rem; + line-height: 1.4; +} + +/* --- Luxury Dark Ticket --- */ +.luxury-ticket { + background: #111; /* Dunkel statt Weiß */ + color: #f5f5f7; + display: flex; + max-width: 600px; + margin: 20px auto; + border-radius: 15px; + overflow: hidden; + border: 1px solid #333; + box-shadow: 0 20px 40px rgba(0,0,0,0.8); +} + +.ticket-left { + width: 35%; +} + +.ticket-poster { + width: 100%; + height: 100%; + object-fit: cover; +} + +.ticket-right { + width: 65%; + padding: 25px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.ticket-brand { + font-size: 0.7rem; + letter-spacing: 3px; + color: #0071e3; + margin-bottom: 10px; +} + +.ticket-title { + font-size: 1.8rem; + margin-bottom: 20px; + border-bottom: 1px solid #333; + padding-bottom: 10px; +} + +.ticket-details p { + display: flex; + justify-content: space-between; + margin-bottom: 8px; + font-size: 0.9rem; +} + +.ticket-details span { + color: #86868b; +} + +.ticket-footer { + display: flex; + justify-content: space-between; + align-items: flex-end; + margin-top: 20px; +} + +.ticket-qr { + width: 100px; + height: 100px; + border: 5px solid white; /* Weißer Rand für Scanbarkeit auf dunklem Grund */ + border-radius: 5px; +} + +.ticket-code { + font-family: 'Courier New', Courier, monospace; + color: #444; + font-size: 1.2rem; +} + +/* Kinoticket */ +.kinoticket { + background: #fff; + color: #000; + padding: 20px; + border-radius: 15px; + max-width: 300px; /* Begrenzt die Breite des Tickets */ + margin: 20px auto; + text-align: center; + box-shadow: 0 10px 30px rgba(0,0,0,0.5); +} + +.kinoticket .poster { + width: 100%; + max-height: 180px; /* Macht das Bild deutlich kleiner */ + object-fit: cover; /* Verhindert Verzerrung */ + border-radius: 10px; + margin-bottom: 15px; +} + +.kinoticket h3 { + margin: 10px 0 5px; + font-size: 1.2rem; +} +.kinoticket p { color: #ccc; margin-bottom: 5px; font-size: 0.9rem; } +.kinoticket .seats { font-weight: bold; color: #e50914; margin-top: 10px; font-size: 1.1rem; } + +.kinoticket .qr-code { + background: white; + padding: 10px; + display: inline-block; + margin-top: 15px; + border: 1px solid #ddd; +} + +.kinoticket .qr-code img { + width: 130px; /* Feste Größe für den QR-Code */ + height: 130px; + display: block; +} + +/* Fix für Screenshot 1: Modal-Info Zeile */ +#modal-info-text { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 15px; +} + +/* --- Lösch-Animation nach Links --- */ +.cart-item-row.slide-out-left { + animation: slideOutLeft 0.4s ease forwards; + pointer-events: none; /* Verhindert Klicks während der Animation */ +} + +@keyframes slideOutLeft { + 0% { + transform: translateX(0); + opacity: 1; + } + 100% { + transform: translateX(-100%); /* Vollständig nach links raus */ + opacity: 0; + /* Verhindert, dass die Lücke abrupt kollabiert */ + height: 0; + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; + border: none; + } +} +.summary-box-black { + background-color: #1c1c1e !important; + padding: 35px; + border-radius: 28px; + border: 1px solid rgba(255, 255, 255, 0.1); + position: sticky; + top: 120px; +} + +.summary-row-large { + display: flex; + justify-content: space-between; + font-size: 1.6rem; + font-weight: 600; + margin-top: 25px; +} + +.blue-button { + width: 100%; + background: var(--accent-blue); + color: white; + border: none; + padding: 18px; + border-radius: 14px; + font-weight: bold; + font-size: 1.1rem; + margin-top: 30px; + cursor: pointer; + transition: all 0.3s ease; +} + +.blue-button:hover { + background: #0077ed; + transform: scale(1.02); +} + +.summary-content { + width: 100%; + max-width: 350px; + text-align: right; +} + +.total-row { + font-size: 1.5rem; + font-weight: bold; + display: flex; + justify-content: space-between; + margin-bottom: 5px; +} + +.vat-row { + color: #86868b; + font-size: 0.9rem; + margin-bottom: 20px; +} + +.checkout-main-btn { + width: 100%; + padding: 16px; + background: #e50914; + color: white; + border: none; + border-radius: 8px; + font-weight: bold; + font-size: 1.1rem; + cursor: pointer; + transition: transform 0.2s, background 0.2s; +} + +.checkout-main-btn:hover { + background: #f40a16; + transform: translateY(-2px); +} + +#modal-info-text { + display: block; /* Verhindert das Nebeneinanderquetschen */ + margin-top: 5px; + color: #ccc; +} + +.modal-header-container { + padding-bottom: 15px; + border-bottom: 1px solid #333; + margin-bottom: 20px; +} + +#snacks-view, #movie-list-view, #cart-view { + padding-bottom: 100px; /* Platz unten lassen */ + min-height: 100vh; + overflow-y: auto; /* Sicherstellen, dass gescrollt werden kann */ +} + +/* --- Account View (stabil & sichtbar) --- */ +#account-view { + padding: 130px 8% 60px; + min-height: 100vh; +} + +.account-login-box, +.account-panel { + width: min(820px, 100%); + margin: 0 auto; + background: #1c1c1e; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 24px; + padding: 28px; +} + +.account-login-box { + display: flex; + flex-direction: column; + align-items: stretch; +} + +.account-login-box h2, +.account-panel h2 { + margin-bottom: 16px; +} + +.account-login-box input { + width: 100%; + margin-bottom: 12px; + padding: 12px 14px; + background: #111214; + border: 1px solid #3a3a3a; + border-radius: 10px; + color: #fff; +} + +.account-login-box button { + width: 100%; + margin-top: 10px; + padding: 12px 14px; + border: 0; + border-radius: 10px; + background: #0071e3; + color: #fff; + cursor: pointer; +} + +#btn-forgot-password { + width: auto !important; + align-self: flex-start; + margin-top: 2px; + margin-bottom: 12px; + padding: 0; + background: transparent !important; + border: none !important; + color: #95bce9; + font-size: 0.82rem; + text-decoration: underline; +} + +#btn-open-register { + width: auto !important; + align-self: flex-start; + margin-top: 6px; + padding: 8px 14px !important; + font-size: 0.82rem; + background: #2a2d31 !important; + border: 1px solid #4d4f54 !important; +} + +#account-register-hint { + margin-top: 18px; + margin-bottom: 2px; + font-size: 0.82rem; + color: #9ca0a8; + align-self: flex-start; +} + +/* --- Auth Modals (Register + Forgot) --- */ +.account-auth-modal { + width: min(460px, 92vw); + max-width: 460px; + padding: 30px 24px 22px; + border-radius: 22px; + background: linear-gradient(180deg, #1f2125 0%, #181a1e 100%); + border: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); +} + +.account-auth-modal h2 { + font-size: 1.45rem; + margin-bottom: 8px; +} + +.auth-modal-subtitle { + color: #9da3ad; + font-size: 0.9rem; + margin-bottom: 16px; + line-height: 1.4; +} + +.account-auth-modal input { + width: 100%; + margin-bottom: 11px; + padding: 12px 13px; + border-radius: 10px; + border: 1px solid #3a3f46; + background: #111317; + color: #f5f5f7; + outline: none; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.account-auth-modal input:focus { + border-color: #0071e3; + box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18); +} + +.auth-submit-btn { + width: 100%; + margin-top: 6px; + padding: 12px 14px; + border: 0; + border-radius: 11px; + background: #0071e3; + color: #fff; + font-weight: 600; + cursor: pointer; + transition: background 0.2s ease, transform 0.15s ease; +} + +.auth-submit-btn:hover { + background: #0a7cf0; + transform: translateY(-1px); +} + +#reset-message { + margin-top: 12px; + padding: 10px 12px; + border-radius: 10px; + background: rgba(17, 101, 42, 0.22); + border: 1px solid rgba(74, 199, 123, 0.32); + color: #84e5aa; + font-size: 0.88rem; +} + +.account-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; +} + +.account-logout-btn { + border: 1px solid #4a4a4a; + background: transparent; + color: #fff; + border-radius: 10px; + padding: 8px 12px; + cursor: pointer; +} + +.account-tabs { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin: 20px 0 16px; +} + +.account-tab-btn { + border: 1px solid #3f3f3f; + background: #151618; + color: #fff; + border-radius: 999px; + padding: 8px 14px; + cursor: pointer; +} + +#account-tab-content { + margin-top: 8px; +} + +.account-card, +.order-box { + background: #111214; + border: 1px solid #2f2f2f; + border-radius: 12px; + padding: 14px 16px; + margin-bottom: 10px; +} + +/* --- Cart Columns (final override) --- */ +#cart-items-list .cart-header-row, +#cart-items-list .cart-item-row { + display: grid; + grid-template-columns: 120px 90px 1.2fr 1.5fr 130px 70px; + gap: 12px; + align-items: center; +} + +#cart-items-list .cart-header-row { + padding: 12px 8px; + margin-bottom: 6px; + border-bottom: 1px solid rgba(255, 255, 255, 0.15); + color: #9ca0a8; + font-size: 0.74rem; + font-weight: 700; + letter-spacing: 1px; +} + +#cart-items-list .cart-item-row { + padding: 16px 8px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +#cart-items-list .col-amount { + display: flex; + justify-content: center; +} + +#cart-items-list .col-img { + display: flex; + justify-content: center; +} + +#cart-items-list .col-product { + font-weight: 600; +} + +#cart-items-list .col-details { + color: #8fbef6; + font-size: 0.9rem; + line-height: 1.35; +} + +#cart-items-list .col-price { + font-weight: 700; + text-align: right; + padding-right: 18px; +} + +#cart-items-list .cart-header-row .col-price { + text-align: left; + padding-left: 8px; + padding-right: 0; +} + +#cart-items-list .col-action { + display: flex; + justify-content: flex-end; + text-align: right; + padding-right: 0; +} + +#cart-items-list .btn-delete-item { + display: inline-flex; + align-items: center; + justify-content: center; + width: 34px; + height: 34px; + border-radius: 8px; + border: 1px solid #7a3a45; + background: #2b1116; + color: #ff7a90; + font-size: 1.05rem; + opacity: 1; + transform: translateX(6px); +} + +#cart-items-list .btn-delete-item:hover { + background: #3a161d; + color: #ff95a7; + border-color: #97505d; + transform: translateX(6px) scale(1.06); +} + +#cart-items-list .btn-delete-item:active { + transform: translateX(6px) scale(0.96); +} + +.cart-img-fallback { + width: 60px; + height: 85px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.7rem; + text-align: center; + background: #2b2d31; + color: #aeb3bb; + padding: 6px; +} + +@media (max-width: 980px) { + .cart-container { + flex-direction: column; + gap: 24px; + } + + .cart-right { + width: 100%; + min-width: 0; + } + + #cart-items-list .cart-header-row { + display: none; + } + + #cart-items-list .cart-item-row { + grid-template-columns: 1fr; + gap: 10px; + padding: 14px 0; + } + + #cart-items-list .col-amount, + #cart-items-list .col-img, + #cart-items-list .col-action { + justify-content: flex-start; + text-align: left; + } + + #cart-items-list .col-price { + text-align: left; + } +} + +/* --- Seat Map Refresh (Cinema-Like Layout) --- */ +.seat-map-container { + perspective: 900px; +} + +#seat-grid.seat-grid-custom { + display: flex; + flex-direction: column; + gap: 9px; + align-items: center; + min-width: max-content; + padding: 16px 8px 6px; + transform: rotateX(4deg); + transform-origin: top center; +} + +#seat-grid .seat-row.cinema-row { + display: grid; + grid-template-columns: 28px auto 40px auto 28px; + align-items: center; + gap: 9px; + width: max-content; + margin-left: var(--row-indent, 0); + margin-right: var(--row-indent, 0); +} + +#seat-grid .row-seat-block { + display: flex; + gap: 7px; +} + +#seat-grid .row-label { + font-size: 0.72rem; + letter-spacing: 1px; + color: #8f949c; + font-weight: 700; + text-align: center; +} + +#seat-grid .row-label-right { + opacity: 0.65; +} + +#seat-grid .aisle-gap { + width: 40px; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); +} + +#seat-grid .seat { + width: 24px; + height: 20px; + border-radius: 8px 8px 5px 5px; + border: 1px solid rgba(255, 255, 255, 0.18); + position: relative; + appearance: none; + padding: 0; + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; +} + +#seat-grid .seat::before { + content: ""; + position: absolute; + left: 2px; + right: 2px; + top: -4px; + height: 5px; + border-radius: 5px 5px 0 0; + background: inherit; + opacity: 0.92; +} + +#seat-grid .seat:hover:not(.occupied) { + transform: translateY(-2px) scale(1.08); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45); +} + +#seat-grid .seat.normal, +#seat-grid .seat.imax { + background: linear-gradient(180deg, #45484f 0%, #2f3238 100%); +} + +#seat-grid .seat.vip { + background: linear-gradient(180deg, #ffb74d 0%, #ff8f00 100%); +} + +#seat-grid .seat.dbox { + background: linear-gradient(180deg, #ffeb3b 0%, #f9a825 100%); +} + +#seat-grid .seat.selected { + background: linear-gradient(180deg, #56f189 0%, #28a745 100%) !important; + box-shadow: 0 0 14px rgba(69, 233, 120, 0.72); + border-color: #d6ffe4; +} + +#seat-grid .seat.occupied { + background: linear-gradient(180deg, #ef5350 0%, #c62828 100%) !important; + opacity: 1; + cursor: not-allowed; +} + +#seat-grid .seat:disabled { + opacity: 1; +} + +#seat-grid .seat.occupied::after { + content: "×"; + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 14px; + font-weight: 700; +} + +#dynamic-legend { + margin-top: 14px; +} + +#summary-items .summary-row { + display: flex; + justify-content: space-between; + gap: 14px; + padding: 7px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + font-size: 0.9rem; +} + +/* --- April 2026 Refresh --- */ +.hero-overlay { + max-width: 860px; + border-radius: 24px; + background: linear-gradient(90deg, rgba(6, 9, 14, 0.7), rgba(6, 9, 14, 0.25)); + backdrop-filter: blur(2px); +} + +.running-poster { + display: flex; + flex-direction: column; +} + +.running-poster img { + height: 240px; + object-position: center 18%; +} + +.running-meta { + display: flex; + flex-direction: column; + min-height: 150px; +} + +.running-meta p { + margin-bottom: 14px; +} + +.open-program-btn { + margin-top: auto; +} + +/* --- Latest home/account refinement --- */ +.hero { + min-height: 94vh; +} + +.hero::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, rgba(3, 5, 8, 0.05) 0%, rgba(3, 5, 8, 0.62) 80%, rgba(3, 5, 8, 0.88) 100%); + pointer-events: none; + z-index: 1; +} + +.hero-overlay { + z-index: 2; + max-width: 980px; + padding: 180px 8% 118px; + background: transparent; + backdrop-filter: none; + border-radius: 0; + text-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); +} + +.hero-slide { + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + background-color: #06080d; + transform: none; +} + +.hero-slide.active { + transform: none; +} + +.home-experience { + margin-top: 34px; + display: grid; + grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); + gap: 16px; +} + +.experience-main-card, +.experience-side-card { + background: linear-gradient(158deg, #151820 0%, #0f1219 100%); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 18px; + padding: 20px 20px 22px; +} + +.experience-main-head { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 12px; + margin-bottom: 10px; +} + +.experience-main-head h3 { + font-size: 1.25rem; +} + +.experience-main-head span { + color: #9aa4b2; + font-size: 0.78rem; +} + +.experience-main-card p, +.experience-side-card p { + color: #b4becb; + line-height: 1.5; + font-size: 0.92rem; +} + +.experience-tags, +.experience-chip-row { + margin-top: 14px; + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.experience-tags span, +.experience-chip-row span { + border-radius: 999px; + border: 1px solid rgba(0, 113, 227, 0.45); + background: rgba(0, 113, 227, 0.16); + color: #c4dffe; + padding: 4px 11px; + font-size: 0.76rem; +} + +.experience-side-stack { + display: grid; + gap: 16px; +} + +.collector-card .collector-placeholder-grid { + margin-top: 12px; + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.collector-card .collector-slot { + min-height: 100px; +} + +.account-orders-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 10px; + margin-top: 8px; +} + +.order-item-btn { + width: 100%; + text-align: left; + cursor: pointer; + transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; +} + +.order-item-btn:hover { + border-color: rgba(0, 113, 227, 0.58); + transform: translateY(-2px); +} + +.order-item-btn.active { + border-color: #0071e3; + background: linear-gradient(150deg, #162334 0%, #111720 100%); +} + +.order-item-head { + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px; + margin-bottom: 8px; +} + +.order-item-head h4 { + font-size: 0.98rem; +} + +.order-item-head span { + color: #9ed0ff; + font-weight: 700; + font-size: 0.86rem; +} + +.order-ticket-details { + margin-top: 14px; +} + +.order-ticket-card { + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 16px; + background: linear-gradient(155deg, #12161f 0%, #0c1017 100%); + padding: 14px; + display: grid; + grid-template-columns: 120px minmax(0, 1fr); + gap: 14px; +} + +.order-ticket-poster img { + width: 100%; + height: 100%; + max-height: 180px; + object-fit: cover; + border-radius: 10px; +} + +.order-ticket-poster-fallback { + height: 100%; + min-height: 150px; + border-radius: 10px; + background: #202632; + color: #9aa4b2; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8rem; +} + +.order-ticket-brand { + color: #9ec3ee; + font-size: 0.73rem; + letter-spacing: 0.8px; + margin-bottom: 6px; +} + +.order-ticket-content h4 { + margin-bottom: 10px; +} + +.order-ticket-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px 14px; +} + +.order-ticket-grid p { + display: flex; + flex-direction: column; + gap: 3px; + margin: 0; +} + +.order-ticket-grid span { + font-size: 0.74rem; + color: #8c98a9; +} + +.order-ticket-grid strong { + font-size: 0.9rem; +} + +.payment-logo-slot img { + max-width: 72%; + max-height: 30px; + object-fit: contain; + filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)); +} + +@media (max-width: 1000px) { + .home-experience { + grid-template-columns: 1fr; + } +} + +@media (max-width: 720px) { + .hero-overlay { + padding: 145px 6% 92px; + } + + .order-ticket-card { + grid-template-columns: 1fr; + } + + .order-ticket-grid { + grid-template-columns: 1fr; + } + + .collector-card .collector-placeholder-grid { + grid-template-columns: 1fr; + } +} + +.home-feature-grid { + margin-top: 34px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 14px; +} + +.feature-card { + background: linear-gradient(155deg, #17191f 0%, #101218 100%); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + padding: 16px 16px 18px; +} + +.feature-card h4 { + margin-bottom: 8px; + font-size: 0.95rem; +} + +.feature-card p { + color: #a7afbb; + font-size: 0.86rem; + line-height: 1.45; +} + +.feature-card-wide { + grid-column: span 2; +} + +.hall-tags { + margin-top: 12px; + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.hall-tags span { + border: 1px solid rgba(0, 113, 227, 0.5); + background: rgba(0, 113, 227, 0.18); + color: #c6e1ff; + border-radius: 999px; + padding: 4px 10px; + font-size: 0.75rem; +} + +.feature-highlight { + margin-top: 12px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 10px; + color: #d8dee8; + padding: 8px 10px; + font-size: 0.8rem; +} + +.feature-card-collector { + grid-column: span 2; +} + +.collector-placeholder-grid { + margin-top: 12px; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; +} + +.collector-slot { + min-height: 90px; + border-radius: 12px; + border: 1px dashed rgba(255, 255, 255, 0.25); + background: linear-gradient(140deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)); + color: #9ca6b3; + font-size: 0.78rem; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 6px; +} + +#cart-items-list .qty-static { + min-width: 68px; + text-align: center; + padding: 7px 10px; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.05); + color: #d8dce3; + font-weight: 600; +} + +.account-payments-note { + color: #9aa1ad; + font-size: 0.9rem; + margin-bottom: 12px; +} + +.account-payment-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); + gap: 10px; +} + +.account-payment-card { + background: #141518; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 12px; +} + +.account-payment-card h4 { + font-size: 0.9rem; + margin-bottom: 4px; +} + +.account-payment-card p { + color: #9aa1ad; + font-size: 0.8rem; +} + +.payment-logo-slot { + height: 52px; + border-radius: 10px; + border: 1px dashed rgba(255, 255, 255, 0.28); + margin-bottom: 10px; + display: flex; + align-items: center; + justify-content: center; + color: #9aa1ad; + font-size: 0.8rem; +} + +@media (max-width: 900px) { + .feature-card-wide, + .feature-card-collector { + grid-column: span 1; + } + + .collector-placeholder-grid { + grid-template-columns: 1fr; + } +} +/* ========================================================= + Cinecity-Inspired Home + Program Refresh + ========================================================= */ + +.hero { + position: relative; + min-height: 92vh; + height: auto; + display: block; + overflow: hidden; + isolation: isolate; +} + +.hero-slider { + position: absolute; + inset: 0; +} + +.hero-slide { + position: absolute; + inset: 0; + background-size: cover; + background-position: center; + opacity: 0; + transform: scale(1.03); + transition: opacity 0.8s ease, transform 1.4s ease; +} + +.hero-slide.active { + opacity: 1; + transform: scale(1); +} + +.hero-overlay { + position: relative; + z-index: 2; + max-width: 760px; + margin: 0 auto; + padding: 190px 10% 130px; + text-align: left; +} + +.hero-overlay h1 { + font-size: clamp(2.2rem, 5vw, 4.7rem); + letter-spacing: 0.4px; + margin: 12px 0; +} + +.hero-overlay p { + color: #d1d4da; + font-size: 1.05rem; + max-width: 620px; + margin-bottom: 22px; +} + +.hero-dots { + margin-top: 22px; + display: flex; + gap: 10px; + align-items: center; +} + +.hero-dot { + width: 30px; + height: 6px; + border-radius: 99px; + border: 0; + background: rgba(255, 255, 255, 0.3); + cursor: pointer; +} + +.hero-dot.active { + background: #0071e3; +} + +.cinema-home { + background: + radial-gradient(circle at 20% -10%, rgba(0, 113, 227, 0.15), transparent 45%), + radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.08), transparent 38%), + #07080b; + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.home-poster-band { + margin-top: 18px; + padding: 18px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 18px; +} + +.home-band-header { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: 14px; +} + +.home-band-header h3 { + font-size: 1.2rem; +} + +.home-band-header span { + color: #8f95a0; + font-size: 0.85rem; +} + +.now-running-row { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 14px; +} + +.running-poster { + background: #121317; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 14px; + overflow: hidden; +} + +.running-poster img { + width: 100%; + height: 210px; + object-fit: cover; + display: block; +} + +.running-meta { + padding: 12px; +} + +.running-meta h4 { + font-size: 0.95rem; + margin-bottom: 4px; +} + +.running-meta p { + color: #94a0af; + font-size: 0.78rem; + margin-bottom: 10px; +} + +.open-program-btn { + width: 100%; + border: 1px solid rgba(255, 255, 255, 0.25); + background: transparent; + color: #e7ebf0; + border-radius: 8px; + font-size: 0.78rem; + padding: 7px 10px; + cursor: pointer; +} + +.open-program-btn:hover { + background: rgba(255, 255, 255, 0.08); +} + +.home-program-head { + margin-top: 36px; +} + +.home-program-grid { + margin-top: 10px; +} + +.home-movie-card { + box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3); +} + +.home-info-grid { + margin-top: 34px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 14px; +} + +.info-card { + background: linear-gradient(155deg, #17191f 0%, #101218 100%); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + padding: 16px 16px 18px; +} + +.info-card h4 { + margin-bottom: 8px; + font-size: 0.95rem; +} + +.info-card p { + color: #a7afbb; + font-size: 0.86rem; + line-height: 1.45; +} + +.movie-list-shell { + padding: 120px 8% 60px; +} + +.list-subtitle { + margin-top: 8px; + color: #9aa1ac; + margin-bottom: 22px; +} + +.movie-program-list { + display: flex; + flex-direction: column; + gap: 28px; +} + +.program-card { + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 22px 40px rgba(0, 0, 0, 0.33); +} + +.program-card .card-header { + margin-bottom: 12px; +} + +.program-card .description { + color: #c2c8d1; + margin-bottom: 16px; + line-height: 1.55; +} + +.program-day-tabs { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 14px; +} + +.program-day-tab { + min-width: 78px; + border: 1px solid rgba(255, 255, 255, 0.16); + background: rgba(255, 255, 255, 0.03); + color: #f2f5f9; + border-radius: 12px; + padding: 7px 10px; + cursor: pointer; + display: inline-flex; + flex-direction: column; + align-items: flex-start; + gap: 3px; +} + +.program-day-tab small { + font-size: 0.72rem; + color: #94a0ad; +} + +.program-day-tab.active { + border-color: #0071e3; + background: rgba(0, 113, 227, 0.2); +} + +.program-schedule-shell { + margin-top: 0; +} + +.program-schedule-body { + display: flex; + flex-direction: column; + gap: 8px; +} + +.program-time-row { + width: 100%; + text-align: left; + padding: 12px 14px; + display: grid; + grid-template-columns: 1fr 130px 90px; + align-items: center; + gap: 10px; + border: 1px solid rgba(255, 255, 255, 0.09); + background: rgba(0, 0, 0, 0.2); +} + +.program-time-row:hover { + border-color: #0071e3; + transform: translateX(3px); +} + +.hall-pill { + justify-self: center; + font-size: 0.78rem; + color: #bcd6f6; + border: 1px solid rgba(0, 113, 227, 0.4); + background: rgba(0, 113, 227, 0.15); + border-radius: 999px; + padding: 4px 10px; +} + +.flash-focus { + animation: cardFlash 1.1s ease; +} + +@keyframes cardFlash { + 0% { + box-shadow: 0 0 0 rgba(0, 113, 227, 0); + transform: translateY(0); + } + 40% { + box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.35); + transform: translateY(-2px); + } + 100% { + box-shadow: 0 0 0 rgba(0, 113, 227, 0); + transform: translateY(0); + } +} + +.reveal-on-scroll { + opacity: 0; + transform: translateY(28px); + transition: opacity 0.7s ease, transform 0.7s ease; +} + +.reveal-on-scroll.is-visible { + opacity: 1; + transform: translateY(0); +} + +@media (max-width: 900px) { + .hero-overlay { + padding: 150px 8% 90px; + } + + .program-time-row { + grid-template-columns: 1fr; + align-items: flex-start; + } + + .hall-pill { + justify-self: flex-start; + } + + .movie-list-shell { + padding-left: 5%; + padding-right: 5%; + } +} + +/* --- Final visual overrides --- */ +.hero-overlay { + max-width: 860px; + border-radius: 24px; + background: linear-gradient(90deg, rgba(6, 9, 14, 0.7), rgba(6, 9, 14, 0.25)); + backdrop-filter: blur(2px); +} + +.running-poster { + display: flex; + flex-direction: column; +} + +.running-poster img { + height: 240px; + object-position: center 18%; +} + +.running-meta { + display: flex; + flex-direction: column; + min-height: 150px; +} + +.running-meta p { + margin-bottom: 14px; +} + +.open-program-btn { + margin-top: auto; +} + +/* --- 2026-04 final overrides (keep at file end) --- */ +.hero { + min-height: 94vh; +} + +.hero::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, rgba(3, 5, 8, 0.05) 0%, rgba(3, 5, 8, 0.62) 80%, rgba(3, 5, 8, 0.88) 100%); + pointer-events: none; + z-index: 1; +} + +.hero-overlay { + z-index: 2; + max-width: 980px; + padding: 180px 8% 118px; + background: transparent; + backdrop-filter: none; + border-radius: 0; + text-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); +} + +.home-experience { + margin-top: 34px; + display: grid; + grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); + gap: 16px; +} + +.experience-main-card, +.experience-side-card { + background: linear-gradient(158deg, #151820 0%, #0f1219 100%); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 18px; + padding: 20px 20px 22px; +} + +.experience-main-head { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 12px; + margin-bottom: 10px; +} + +.experience-main-head h3 { + font-size: 1.25rem; +} + +.experience-main-head span { + color: #9aa4b2; + font-size: 0.78rem; +} + +.experience-main-card p, +.experience-side-card p { + color: #b4becb; + line-height: 1.5; + font-size: 0.92rem; +} + +.experience-tags, +.experience-chip-row { + margin-top: 14px; + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.experience-tags span, +.experience-chip-row span { + border-radius: 999px; + border: 1px solid rgba(0, 113, 227, 0.45); + background: rgba(0, 113, 227, 0.16); + color: #c4dffe; + padding: 4px 11px; + font-size: 0.76rem; +} + +.experience-side-stack { + display: grid; + gap: 16px; +} + +.collector-card .collector-placeholder-grid { + margin-top: 12px; + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.collector-card .collector-slot { + min-height: 100px; +} + +.account-orders-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 10px; + margin-top: 8px; +} + +.order-item-btn { + width: 100%; + text-align: left; + cursor: pointer; + transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; +} + +.order-item-btn:hover { + border-color: rgba(0, 113, 227, 0.58); + transform: translateY(-2px); +} + +.order-item-btn.active { + border-color: #0071e3; + background: linear-gradient(150deg, #162334 0%, #111720 100%); +} + +.order-item-head { + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px; + margin-bottom: 8px; +} + +.order-item-head h4 { + font-size: 0.98rem; +} + +.order-item-head span { + color: #9ed0ff; + font-weight: 700; + font-size: 0.86rem; +} + +.order-ticket-details { + margin-top: 14px; +} + +.order-ticket-card { + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 16px; + background: linear-gradient(155deg, #12161f 0%, #0c1017 100%); + padding: 14px; + display: grid; + grid-template-columns: 120px minmax(0, 1fr); + gap: 14px; +} + +.order-ticket-poster img { + width: 100%; + height: 100%; + max-height: 180px; + object-fit: cover; + border-radius: 10px; +} + +.order-ticket-poster-fallback { + height: 100%; + min-height: 150px; + border-radius: 10px; + background: #202632; + color: #9aa4b2; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8rem; +} + +.order-ticket-brand { + color: #9ec3ee; + font-size: 0.73rem; + letter-spacing: 0.8px; + margin-bottom: 6px; +} + +.order-ticket-content h4 { + margin-bottom: 10px; +} + +.order-ticket-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px 14px; +} + +.order-ticket-grid p { + display: flex; + flex-direction: column; + gap: 3px; + margin: 0; +} + +.order-ticket-grid span { + font-size: 0.74rem; + color: #8c98a9; +} + +.order-ticket-grid strong { + font-size: 0.9rem; +} + +.payment-logo-slot img { + max-width: 72%; + max-height: 30px; + object-fit: contain; + filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)); +} + +@media (max-width: 1000px) { + .home-experience { + grid-template-columns: 1fr; + } +} + +@media (max-width: 720px) { + .hero-overlay { + padding: 145px 6% 92px; + } + + .order-ticket-card { + grid-template-columns: 1fr; + } + + .order-ticket-grid { + grid-template-columns: 1fr; + } + + .collector-card .collector-placeholder-grid { + grid-template-columns: 1fr; + } +} + +/* hero slide clarity final */ +.hero-slide { + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + background-color: #06080d; + transform: none; +} + +.hero-slide.active { + transform: none; +} + +/* --- 2026-04-21 final UX overrides --- */ +.hero-overlay { + padding: 230px 8% 74px; +} + +.hero-slide { + background-size: cover; + background-repeat: no-repeat; + background-position: center 34%; + transform: scale(1.09); +} + +.hero-slide.active { + transform: scale(1.02); +} + +.home-inline-showcase { + margin-top: 36px; + display: flex; + flex-direction: column; + gap: 28px; +} + +.inline-section { + display: grid; + grid-template-columns: 1.15fr 1fr; + border-radius: 26px; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.11); + background: #0d1118; + min-height: 290px; + box-shadow: 0 26px 50px rgba(0, 0, 0, 0.34); +} + +.inline-media { + position: relative; + background-size: cover; + background-position: center; +} + +.inline-media::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(110deg, rgba(4, 6, 10, 0.08), rgba(4, 6, 10, 0.58)); +} + +.inline-halls .inline-media { + background-image: linear-gradient(120deg, rgba(0, 113, 227, 0.3), rgba(7, 10, 16, 0.55)), url('img/placeholder-hall.jpg'); +} + +.inline-dbox .inline-media { + background-image: linear-gradient(120deg, rgba(255, 176, 0, 0.2), rgba(8, 12, 18, 0.62)), url('img/placeholder-dbox.jpg'); +} + +.inline-collectors .inline-media { + background-image: linear-gradient(120deg, rgba(185, 124, 255, 0.15), rgba(8, 12, 18, 0.62)), url('img/placeholder-collector.jpg'); +} + +.inline-content { + padding: 28px 26px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.inline-content h3 { + font-size: clamp(1.3rem, 2.3vw, 1.9rem); + margin-bottom: 12px; +} + +.inline-content p { + color: #b4bfcc; + line-height: 1.58; + margin-bottom: 16px; +} + +.inline-tags { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 16px; +} + +.inline-tags span { + border-radius: 999px; + border: 1px solid rgba(0, 113, 227, 0.5); + background: rgba(0, 113, 227, 0.16); + color: #cae3ff; + padding: 5px 11px; + font-size: 0.76rem; +} + +.story-more-btn { + align-self: flex-start; + border: 1px solid rgba(255, 255, 255, 0.24); + background: rgba(255, 255, 255, 0.04); + color: #e8edf3; + border-radius: 999px; + padding: 10px 16px; + font-size: 0.82rem; + cursor: pointer; + transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; +} + +.story-more-btn:hover { + transform: translateY(-2px) scale(1.03); + background: rgba(0, 113, 227, 0.16); + border-color: rgba(0, 113, 227, 0.72); + box-shadow: 0 10px 24px rgba(0, 113, 227, 0.22); +} + +.dbox-now-highlight { + border: 1px solid rgba(255, 181, 59, 0.5); + background: linear-gradient(160deg, rgba(255, 164, 27, 0.2), rgba(255, 213, 128, 0.08)); + border-radius: 14px; + padding: 12px; + margin-bottom: 16px; +} + +.dbox-now-highlight h4 { + font-size: 0.88rem; + margin-bottom: 8px; + color: #ffe2b5; +} + +.dbox-mini-cards { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px; +} + +.dbox-mini-cards div { + border-radius: 10px; + border: 1px solid rgba(255, 228, 168, 0.35); + background: rgba(23, 16, 8, 0.42); + padding: 7px 10px; + font-size: 0.78rem; + color: #f7dfb6; + text-align: center; +} + +.home-modal-overlay { + position: fixed; + inset: 0; + background: rgba(2, 5, 10, 0.74); + backdrop-filter: blur(8px); + z-index: 2500; + display: flex; + align-items: center; + justify-content: center; + padding: 24px; +} + +.home-modal-panel { + width: min(980px, 100%); + max-height: 90vh; + overflow-y: auto; + border-radius: 22px; + border: 1px solid rgba(255, 255, 255, 0.14); + background: linear-gradient(165deg, #171b24 0%, #10141c 100%); + padding: 22px; + position: relative; +} + +.home-modal-wide { + width: min(1120px, 100%); +} + +.home-modal-close { + position: absolute; + top: 14px; + right: 14px; + width: 34px; + height: 34px; + border-radius: 50%; + border: 0; + background: #2a2f3a; + color: #fff; + font-size: 1.2rem; + cursor: pointer; +} + +.home-modal-sub { + color: #96a1b2; + margin-top: 4px; + margin-bottom: 14px; +} + +.hall-modal-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; +} + +.hall-modal-item { + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 14px; + padding: 12px; + background: rgba(255, 255, 255, 0.02); +} + +.hall-modal-item h4 { + margin-bottom: 10px; +} + +.hall-modal-item textarea, +.hall-modal-item input, +.dbox-modal-section input, +.collector-entry-content input { + width: 100%; + border-radius: 10px; + border: 1px solid #3e4658; + background: #111621; + color: #f3f6fb; + padding: 10px 11px; +} + +.hall-modal-item textarea { + min-height: 100px; + resize: vertical; + margin-bottom: 8px; +} + +.dbox-modal-section { + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 14px; + padding: 14px; + margin-top: 12px; +} + +.dbox-image-grid { + margin-top: 12px; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 10px; +} + +.dbox-image-slot { + min-height: 98px; + border: 1px dashed rgba(255, 255, 255, 0.3); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #9aa8ba; + font-size: 0.78rem; +} + +.modal-highlight { + margin-top: 14px; +} + +.collector-zigzag { + margin-top: 14px; + display: flex; + flex-direction: column; + gap: 14px; +} + +.collector-entry { + width: 82%; + display: grid; + grid-template-columns: 90px 1fr; + gap: 10px; + border-radius: 14px; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.03); + padding: 12px; +} + +.collector-entry.left { + align-self: flex-start; +} + +.collector-entry.right { + align-self: flex-end; +} + +.collector-film-logo { + border-radius: 10px; + border: 1px dashed rgba(255, 255, 255, 0.35); + min-height: 72px; + display: flex; + align-items: center; + justify-content: center; + color: #9ba7b9; + font-size: 0.74rem; +} + +.collector-entry-content h4 { + margin-bottom: 6px; +} + +.collector-entry-content p { + color: #b3becc; + margin-bottom: 8px; + font-size: 0.9rem; +} + +.account-payment-card { + text-align: left; + cursor: pointer; +} + +.account-payment-card:hover { + border-color: rgba(0, 113, 227, 0.6); + transform: translateY(-2px); +} + +.payment-logo-slot { + border: 1px solid rgba(255, 255, 255, 0.16); + background: rgba(255, 255, 255, 0.04); +} + +.pay-modal-overlay { + position: fixed; + inset: 0; + z-index: 2600; + background: rgba(2, 4, 9, 0.72); + backdrop-filter: blur(8px); + display: flex; + align-items: center; + justify-content: center; + padding: 20px; +} + +.pay-modal-panel { + width: min(460px, 100%); + border-radius: 18px; + border: 1px solid rgba(255, 255, 255, 0.16); + background: #12151d; + padding: 18px; + position: relative; +} + +.pay-modal-head { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 12px; +} + +.pay-modal-head img { + height: 26px; + width: auto; +} + +.pay-close-btn { + position: absolute; + top: 11px; + right: 11px; + width: 32px; + height: 32px; + border-radius: 50%; + border: 0; + background: rgba(255, 255, 255, 0.08); + color: #fff; + cursor: pointer; + font-size: 1.1rem; +} + +.pay-form-grid label, +.pay-modal-panel label { + display: flex; + flex-direction: column; + gap: 6px; + font-size: 0.84rem; + color: #b2bece; + margin-top: 8px; +} + +.pay-form-grid input, +.pay-modal-panel input { + border-radius: 10px; + border: 1px solid #3b4255; + background: #10141f; + color: #f2f6fd; + padding: 10px; +} + +.pay-form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} + +.pay-submit-btn { + width: 100%; + margin-top: 14px; + border: 0; + border-radius: 11px; + padding: 11px 12px; + font-weight: 600; + cursor: pointer; + background: #0071e3; + color: #fff; +} + +.paypal-btn { + background: linear-gradient(90deg, #005ea6, #0b84e3); +} + +.apple-btn { + background: linear-gradient(90deg, #e9edf5, #cfd7e5); + color: #0c1016; +} + +.google-btn { + background: linear-gradient(90deg, #1967d2, #34a853); +} + +.pay-modal-paypal-style { + background: linear-gradient(160deg, #112544 0%, #0f1e34 100%); +} + +.pay-modal-apple-style { + background: linear-gradient(160deg, #1d212b 0%, #131722 100%); +} + +.pay-modal-google-style { + background: linear-gradient(160deg, #122033 0%, #141925 100%); +} + +@media (max-width: 980px) { + .inline-section { + grid-template-columns: 1fr; + } + + .inline-media { + min-height: 210px; + } + + .hall-modal-grid { + grid-template-columns: 1fr; + } + + .dbox-image-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .collector-entry { + width: 100%; + } +} + +/* --- 2026-04-21 nav/theme/info pages --- */ +#link-cart { + transform: translateY(2px); +} + +.theme-toggle-item { + display: flex; + align-items: center; +} + +.theme-toggle-btn { + width: 44px; + height: 44px; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.24); + background: linear-gradient(140deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)); + color: #fff; + position: relative; + cursor: pointer; + transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; +} + +.theme-toggle-btn:hover { + transform: translateY(-1px) scale(1.03); + box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28); +} + +.theme-icon { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.05rem; + transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); +} + +.theme-icon-sun { + opacity: 0; + transform: rotate(-35deg) scale(0.5); +} + +.theme-icon-moon { + opacity: 1; + transform: rotate(0deg) scale(1); +} + +.theme-toggle-btn.is-light .theme-icon-sun { + opacity: 1; + transform: rotate(0deg) scale(1); +} + +.theme-toggle-btn.is-light .theme-icon-moon { + opacity: 0; + transform: rotate(35deg) scale(0.55); +} + +.info-view { + min-height: 100vh; + padding-top: 120px; + padding-bottom: 70px; +} + +.info-view-shell { + padding: 0 8%; +} + +.info-view-shell h1 { + font-size: clamp(2rem, 4vw, 3rem); +} + +.info-view-subtitle { + color: #98a3b3; + margin-top: 8px; + margin-bottom: 22px; +} + +.full-page-grid { + margin-top: 16px; +} + +.subpage-back-btn { + border: 1px solid rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.04); + color: #ebf1f9; + border-radius: 999px; + padding: 10px 14px; + margin-bottom: 18px; + cursor: pointer; + transition: transform 0.2s ease, border-color 0.2s ease; +} + +.subpage-back-btn:hover { + transform: translateX(-2px); + border-color: rgba(0, 113, 227, 0.65); +} + +.about-intro { + margin-top: 12px; + color: #b2bcc9; + line-height: 1.65; + max-width: 900px; +} + +.about-cards { + margin-top: 24px; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; +} + +.about-card { + border: 1px solid rgba(255, 255, 255, 0.11); + border-radius: 16px; + background: linear-gradient(155deg, #151922 0%, #10141c 100%); + padding: 16px; +} + +.about-card h3 { + margin-bottom: 8px; +} + +.about-card p { + color: #aeb8c6; + margin-bottom: 14px; + line-height: 1.5; +} + +body.theme-dark .program-card .description, +body.theme-dark .inline-content p, +body.theme-dark .about-intro { + color: #d1d7e0; +} + +body.theme-dark #checkout-summary-list, +body.theme-dark .hall-modal-item, +body.theme-dark .dbox-modal-section { + color: #eaf1fc; +} + +body.theme-light { + background: #eef2f8; + color: #121620; +} + +body.theme-light .navbar { + background: rgba(244, 248, 255, 0.85); + border-bottom: 1px solid rgba(11, 22, 42, 0.08); +} + +body.theme-light .nav-links a, +body.theme-light .logo { + color: #1a2435; + opacity: 0.95; +} + +body.theme-light .hero::after { + background: linear-gradient(180deg, rgba(240, 246, 255, 0.04) 0%, rgba(240, 246, 255, 0.26) 100%); +} + +body.theme-light .hero-overlay h1, +body.theme-light .hero-overlay p { + color: #131a26; + text-shadow: none; +} + +body.theme-light .home-poster-band, +body.theme-light .inline-section, +body.theme-light .detailed-card, +body.theme-light .program-card, +body.theme-light .hall-modal-item, +body.theme-light .dbox-modal-section, +body.theme-light .about-card, +body.theme-light .account-panel, +body.theme-light .account-login-box, +body.theme-light .account-card, +body.theme-light .order-box, +body.theme-light .summary-box-black, +body.theme-light .cart-left, +body.theme-light .pay-modal-panel, +body.theme-light .home-modal-panel, +body.theme-light .snack-card, +body.theme-light .snack-card.highlight { + background: #ffffff !important; + color: #1a2435; + border-color: rgba(21, 35, 58, 0.14) !important; + box-shadow: 0 10px 30px rgba(21, 35, 58, 0.08); +} + +body.theme-light .inline-content p, +body.theme-light .program-card .description, +body.theme-light .list-subtitle, +body.theme-light .info-view-subtitle, +body.theme-light .about-intro, +body.theme-light .about-card p, +body.theme-light .account-payments-note, +body.theme-light .running-meta p { + color: #45556f !important; +} + +body.theme-light .running-poster, +body.theme-light .order-ticket-card, +body.theme-light .order-item-btn.active, +body.theme-light .dbox-now-highlight, +body.theme-light .modal-highlight, +body.theme-light .collector-entry { + background: #f7f9fd !important; + border-color: rgba(28, 56, 94, 0.16) !important; +} + +body.theme-light .story-more-btn, +body.theme-light .subpage-back-btn, +body.theme-light .open-program-btn, +body.theme-light .account-tab-btn, +body.theme-light .account-logout-btn, +body.theme-light .theme-toggle-btn { + color: #1c2b44; + background: #f3f7ff; + border-color: rgba(28, 56, 94, 0.22); +} + +body.theme-light .btn-primary, +body.theme-light .blue-button, +body.theme-light .auth-submit-btn, +body.theme-light .pay-submit-btn { + color: #fff; +} + +body.theme-light #checkout-summary-list, +body.theme-light .hall-modal-item textarea, +body.theme-light .hall-modal-item input, +body.theme-light .pay-modal-panel input, +body.theme-light .collector-entry-content input, +body.theme-light .account-login-box input, +body.theme-light .account-auth-modal input { + background: #f5f8ff !important; + color: #1a2435 !important; + border-color: rgba(33, 55, 91, 0.22) !important; +} + +body.theme-light .pay-modal-overlay, +body.theme-light .home-modal-overlay, +body.theme-light .modal, +body.theme-light .snack-overlay { + background: rgba(203, 216, 236, 0.7); +} + +body.theme-light .theme-toggle-btn { + background: linear-gradient(140deg, #fff9d5, #ffe9b0); +} + +@media (max-width: 1000px) { + .about-cards { + grid-template-columns: 1fr; + } +} + +/* --- 2026-04-28 light-mode polish + new about design --- */ +.about-hero-block { + margin-top: 8px; + border-radius: 24px; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.12); + display: grid; + grid-template-columns: 1.2fr 1fr; + background: linear-gradient(130deg, #111722 0%, #0b111a 100%); + box-shadow: 0 24px 46px rgba(0, 0, 0, 0.3); +} + +.about-hero-content { + padding: 30px 28px; +} + +.about-hero-content h1 { + margin-bottom: 10px; +} + +.about-pill-row { + margin-top: 18px; + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.about-pill-row span { + border: 1px solid rgba(0, 113, 227, 0.45); + background: rgba(0, 113, 227, 0.15); + color: #c8e2ff; + border-radius: 999px; + padding: 6px 12px; + font-size: 0.76rem; +} + +.about-hero-media { + min-height: 300px; + background-image: + linear-gradient(150deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.58)), + url('img/derAustronaut.jpg'); + background-size: cover; + background-position: center; + position: relative; +} + +.about-hero-media::after { + content: ""; + position: absolute; + inset: 0; + background: + radial-gradient(circle at 25% 25%, rgba(0, 113, 227, 0.22), transparent 45%), + radial-gradient(circle at 70% 70%, rgba(255, 184, 92, 0.18), transparent 42%); +} + +.about-stats-grid { + margin-top: 18px; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 10px; +} + +.about-stats-grid article { + border-radius: 14px; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.03); + padding: 12px; +} + +.about-stats-grid h3 { + color: #8ec8ff; + margin-bottom: 4px; +} + +.about-stats-grid p { + color: #aab7c8; + font-size: 0.84rem; +} + +.about-cards { + margin-top: 20px; + gap: 16px; +} + +.about-card { + position: relative; + overflow: hidden; + border-radius: 18px; + min-height: 230px; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: 18px; + background-size: cover; + background-position: center; +} + +.about-card::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(175deg, rgba(7, 10, 15, 0.2), rgba(7, 10, 15, 0.82)); + z-index: 0; +} + +.about-card > * { + position: relative; + z-index: 1; +} + +.about-card-halls { + background-image: url('img/zoomania-2.jpg'); +} + +.about-card-dbox { + background-image: url('img/shelter.jpg'); +} + +.about-card-tech { + background-image: url('img/spidermannewday.jpg'); +} + +.about-card p { + color: #d7dfeb; +} + +/* Light mode readability improvements */ +body.theme-light .cinema-home { + background: + radial-gradient(circle at 12% -2%, rgba(0, 113, 227, 0.17), transparent 36%), + radial-gradient(circle at 88% 18%, rgba(123, 164, 218, 0.22), transparent 34%), + #edf2fb; +} + +body.theme-light .home-band-header h3, +body.theme-light .section-header h2, +body.theme-light .list-title, +body.theme-light .movie-info h3, +body.theme-light .duration, +body.theme-light .program-card h2, +body.theme-light .running-meta h4, +body.theme-light .snack-info h3, +body.theme-light #account-view h2, +body.theme-light #account-tab-content h3, +body.theme-light .order-item-head h4 { + color: #13233c !important; +} + +body.theme-light .home-band-header span, +body.theme-light .movie-info .genre, +body.theme-light .program-day-tab small, +body.theme-light .card-right .description, +body.theme-light .account-card p, +body.theme-light .order-box p, +body.theme-light .order-ticket-grid span, +body.theme-light .order-ticket-brand, +body.theme-light .summary-row, +body.theme-light .vat-row, +body.theme-light .snack-prompt-box p { + color: #4a5d79 !important; +} + +body.theme-light .program-day-tab { + border-color: rgba(22, 45, 74, 0.24); + background: #f4f8ff; + color: #13233c; +} + +body.theme-light .program-day-tab.active { + border-color: #0071e3; + background: rgba(0, 113, 227, 0.14); +} + +body.theme-light .program-time-row { + border-color: rgba(24, 52, 87, 0.2); + background: #f5f9ff; + color: #13233c; +} + +body.theme-light .program-time-row:hover { + background: #ebf3ff; +} + +body.theme-light .hall-pill { + color: #144274; + border-color: rgba(0, 113, 227, 0.32); + background: rgba(0, 113, 227, 0.11); +} + +body.theme-light .time-btn { + background: #0071e3; + color: #fff; +} + +body.theme-light .category-tabs { + background: rgba(255, 255, 255, 0.65); + border: 1px solid rgba(26, 51, 83, 0.12); + border-radius: 18px; + padding: 10px; +} + +body.theme-light .tab-btn { + background: #eef4ff; + color: #1b2f4d; + border-color: rgba(20, 45, 78, 0.2); +} + +body.theme-light .tab-btn.active { + background: #0071e3; + color: #fff; +} + +body.theme-light .option-group { + background: #edf3ff; +} + +body.theme-light .opt-btn { + color: #445976; +} + +body.theme-light .opt-btn.active { + background: #dbe9ff; + color: #11325b; +} + +body.theme-light .size-chip { + background: #f4f8ff; + color: #122741; + border-color: rgba(17, 41, 72, 0.2); +} + +body.theme-light .size-chip span { + color: #0057ae; +} + +body.theme-light .size-chip:hover { + background: #0071e3; + color: #fff; +} + +body.theme-light .size-chip:hover span { + color: #fff; +} + +body.theme-light .summary-row-large, +body.theme-light .total-row, +body.theme-light #cart-total-right, +body.theme-light #cart-vat-right, +body.theme-light #checkout-total-display, +body.theme-light #checkout-vat-display, +body.theme-light .col-price { + color: #10213a !important; +} + +body.theme-light .order-item-btn.active .order-item-head span { + color: #0053aa; +} + +body.theme-light .order-ticket-grid strong, +body.theme-light .order-item-head span, +body.theme-light .order-ticket-content h4 { + color: #112742; +} + +body.theme-light .about-hero-block { + background: linear-gradient(130deg, #f7fbff 0%, #ecf3ff 100%); + border-color: rgba(24, 48, 80, 0.14); +} + +body.theme-light .about-hero-content h1, +body.theme-light .about-stats-grid h3, +body.theme-light .about-card h3 { + color: #122440; +} + +body.theme-light .about-hero-content p, +body.theme-light .about-stats-grid p, +body.theme-light .about-card p { + color: #455a77; +} + +body.theme-light .about-stats-grid article { + background: #ffffff; + border-color: rgba(24, 49, 82, 0.14); +} + +body.theme-light .about-card::before { + background: linear-gradient(175deg, rgba(245, 250, 255, 0.2), rgba(245, 250, 255, 0.78)); +} + +body.theme-light .about-card { + border-color: rgba(22, 47, 80, 0.18); +} + +@media (max-width: 980px) { + .about-hero-block { + grid-template-columns: 1fr; + } + + .about-hero-media { + min-height: 230px; + } + + .about-stats-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} -- 2.49.1 From 1ec130c11ee6aad37a8d53f8a04083dfc3923c46 Mon Sep 17 00:00:00 2001 From: Jannis Heydemann Date: Wed, 29 Apr 2026 09:36:13 +0200 Subject: [PATCH 02/18] added lfs for img storage --- .gitattributes | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitattributes b/.gitattributes index 20c5e04..ba7261d 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1 +1,2 @@ +img/ filter=lfs diff=lfs merge=lfs -text img/** filter=lfs diff=lfs merge=lfs -text -- 2.49.1 From e2b4852e0ddaa91c704ef2a6ff7e317b05393c16 Mon Sep 17 00:00:00 2001 From: Jannis Heydemann Date: Wed, 29 Apr 2026 10:56:09 +0200 Subject: [PATCH 03/18] added password hashing --- account.js | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/account.js b/account.js index 2b7781a..b448104 100644 --- a/account.js +++ b/account.js @@ -22,7 +22,7 @@ function normalizeUser(user) { firstName: user.firstName || "", lastName: user.lastName || "", email: user.email || "", - password: user.password || "", + hashedPassword: user.hashedPassword || "", orders: Array.isArray(user.orders) ? user.orders : [], paymentMethods: Array.isArray(user.paymentMethods) ? user.paymentMethods : [] }; @@ -70,7 +70,14 @@ if (currentUser && currentUser.email) { } } -function registerUser() { +async function hashMessage(message) { + const msgBuffer = new TextEncoder().encode(message); // Encode as UTF-8 + const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer); // Hash + const hashArray = Array.from(new Uint8Array(hashBuffer)); // Convert to bytes + return hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // Hex string +} + +async function registerUser() { const firstName = document.getElementById("reg-firstname")?.value.trim() || ""; const lastName = document.getElementById("reg-lastname")?.value.trim() || ""; const email = (document.getElementById("reg-email")?.value.trim() || "").toLowerCase(); @@ -92,11 +99,13 @@ function registerUser() { return; } + const hashedPassword = await hashMessage(password); + const newUser = { firstName, lastName, email, - password, + hashedPassword, orders: [], paymentMethods: [] }; @@ -113,12 +122,13 @@ function registerUser() { openAccountDashboard(); } -function loginUser() { +async function loginUser() { const email = (document.getElementById("login-email")?.value.trim() || "").toLowerCase(); const password = document.getElementById("login-password")?.value || ""; + const hashedPassword = await hashMessage(password); const user = users.find( - (entry) => entry.email.toLowerCase() === email && entry.password === password + (entry) => entry.email.toLowerCase() === email && entry.hashedPassword === hashedPassword ); if (!user) { -- 2.49.1 From 425c5d1900d5329a8125c62243fd30054c67af70 Mon Sep 17 00:00:00 2001 From: Jannis Heydemann Date: Wed, 29 Apr 2026 11:25:04 +0200 Subject: [PATCH 04/18] Added html hints to enable syntax highliting --- .gitignore | 1 + account.js | 4 ++-- cart.js | 12 ++++++------ checkout.js | 2 +- main.js | 8 ++++---- 5 files changed, 14 insertions(+), 13 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a5c0072 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +img/* \ No newline at end of file diff --git a/account.js b/account.js index b448104..06f44a1 100644 --- a/account.js +++ b/account.js @@ -152,7 +152,7 @@ function openAccountDashboard() { return; } - accountView.innerHTML = ` + accountView.innerHTML = /*html*/` + + diff --git a/src/components/SnacksView.astro b/src/components/SnacksView.astro index 683e6e8..d52a0d5 100644 --- a/src/components/SnacksView.astro +++ b/src/components/SnacksView.astro @@ -1,4 +1,4 @@ -