forked from Aaron/Kino-Website
Compare commits
1 Commits
dev_jannis
...
cac2c10a6d
| Author | SHA1 | Date | |
|---|---|---|---|
| cac2c10a6d |
959
index.html
Normal file
959
index.html
Normal file
@@ -0,0 +1,959 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EAGLE's IMAX | Deluxe Experience</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body> <nav class="navbar">
|
||||
<div class="logo" id="logo-home" style="cursor:pointer">EAGLE's IMAX</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#" id="link-filme">Aktuelle Filme</a></li>
|
||||
<li><a href="#" id="link-snacks">Snacks & Getränke</a></li>
|
||||
<li><a href="#" id="link-about">Über uns</a></li>
|
||||
<li><a href="#" id="link-account">Mein Konto</a></li>
|
||||
<li>
|
||||
<a href="#" id="link-cart" style="position: relative; display: flex; align-items: center; gap: 5px;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
|
||||
Warenkorb
|
||||
<span id="cart-badge" class="badge">0</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="theme-toggle-item">
|
||||
<button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Theme wechseln">
|
||||
<span class="theme-icon theme-icon-sun">☀</span>
|
||||
<span class="theme-icon theme-icon-moon">☾</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<header class="hero">
|
||||
<div id="hero-slider" class="hero-slider"></div>
|
||||
<div class="hero-overlay">
|
||||
<span class="badge">Neu im Kino</span>
|
||||
<h1 id="hero-title">Jetzt im Kino</h1>
|
||||
<p id="hero-text">Erlebe die neuesten Highlights auf der großen Leinwand.</p>
|
||||
<button class="btn-primary" id="hero-booking-btn">Jetzt Tickets kaufen</button>
|
||||
<div id="hero-dots" class="hero-dots"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="movies-grid-section" class="movie-section cinema-home">
|
||||
<div class="section-header reveal-on-scroll">
|
||||
<h2>Dein Kinoabend beginnt hier</h2>
|
||||
<p>Premieren, Lieblingsfilme und flexible Spielzeiten in allen Sälen.</p>
|
||||
</div>
|
||||
|
||||
<div class="home-poster-band reveal-on-scroll">
|
||||
<div class="home-band-header">
|
||||
<h3>Jetzt läuft</h3>
|
||||
<span>Heute im Fokus</span>
|
||||
</div>
|
||||
<div id="now-running-row" class="now-running-row"></div>
|
||||
</div>
|
||||
|
||||
<div class="home-inline-showcase reveal-on-scroll">
|
||||
<article class="inline-section inline-halls">
|
||||
<div class="inline-media"></div>
|
||||
<div class="inline-content">
|
||||
<h3>Unsere Säle im Überblick</h3>
|
||||
<p>Jeder Saal hat ein eigenes Profil: von klassischem Kinofeeling bis High-End-Erlebnis mit Premiumtechnik und mehr Komfort.</p>
|
||||
<div class="inline-tags">
|
||||
<span>IMAX</span>
|
||||
<span>Deluxe 1</span>
|
||||
<span>Kino 1</span>
|
||||
<span>Kino 2</span>
|
||||
</div>
|
||||
<button type="button" class="story-more-btn" data-home-view-open="halls-view">Mehr erfahren</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="inline-section inline-dbox">
|
||||
<div class="inline-media"></div>
|
||||
<div class="inline-content">
|
||||
<h3>D-BOX & Technik</h3>
|
||||
<p>Spüre Bewegungen synchron zum Film und kombiniere das Erlebnis mit modernem Raumklang und Premium-Bestuhlung.</p>
|
||||
<div class="dbox-now-highlight">
|
||||
<h4>Aktuell in D-BOX</h4>
|
||||
<div class="dbox-mini-cards">
|
||||
<div>Zoomania 2</div>
|
||||
<div>Shelter</div>
|
||||
<div>Hoppers</div>
|
||||
<div>Spider Man</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="story-more-btn" data-home-view-open="dbox-view">Mehr erfahren</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="inline-section inline-collectors">
|
||||
<div class="inline-media"></div>
|
||||
<div class="inline-content">
|
||||
<h3>Collectors Popcorn Specials</h3>
|
||||
<p>Präsentiere Sonderbecher und Eimer filmbezogen mit Bild, Logo und kurzem Text in einer lebendigen Timeline.</p>
|
||||
<button type="button" class="story-more-btn" data-home-view-open="collectors-view">Mehr erfahren</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="movie-list-view" class="hidden">
|
||||
<div class="container movie-list-shell">
|
||||
<h1 class="list-title">Aktuelle Filme & Spielzeiten</h1>
|
||||
<p class="list-subtitle">Alle Filme mit 7 Tagen Spielplan. Erste Vorstellung taeglich ab 13:00 Uhr.</p>
|
||||
<div id="movie-program-list" class="movie-program-list"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="halls-view" class="hidden info-view">
|
||||
<div class="container info-view-shell">
|
||||
<button class="subpage-back-btn" data-go-home type="button">← Zur Startseite</button>
|
||||
<h1>Unsere Säle</h1>
|
||||
<p class="info-view-subtitle">Pflegbare Infoseite zu allen Sälen inkl. Bild- und Textbereichen.</p>
|
||||
<div class="hall-modal-grid full-page-grid">
|
||||
<article class="hall-modal-item">
|
||||
<h4>Kino 1</h4>
|
||||
<textarea placeholder="Infos zu Kino 1 eintragen..."></textarea>
|
||||
<input type="text" placeholder="Bildpfad fuer den Hintergrund (z.B. img/saal1.jpg)">
|
||||
</article>
|
||||
<article class="hall-modal-item">
|
||||
<h4>Kino 2</h4>
|
||||
<textarea placeholder="Infos zu Kino 2 eintragen..."></textarea>
|
||||
<input type="text" placeholder="Bildpfad fuer den Hintergrund (z.B. img/saal2.jpg)">
|
||||
</article>
|
||||
<article class="hall-modal-item">
|
||||
<h4>Deluxe 1</h4>
|
||||
<textarea placeholder="Infos zu Deluxe 1 eintragen..."></textarea>
|
||||
<input type="text" placeholder="Bildpfad fuer den Hintergrund (z.B. img/deluxe.jpg)">
|
||||
</article>
|
||||
<article class="hall-modal-item">
|
||||
<h4>IMAX</h4>
|
||||
<textarea placeholder="Infos zu IMAX eintragen..."></textarea>
|
||||
<input type="text" placeholder="Bildpfad fuer den Hintergrund (z.B. img/imax.jpg)">
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="dbox-view" class="hidden info-view">
|
||||
<div class="container info-view-shell">
|
||||
<button class="subpage-back-btn" data-go-home type="button">← Zur Startseite</button>
|
||||
<h1>D-BOX & Technik</h1>
|
||||
<p class="info-view-subtitle">Inspiriert von Technikseiten moderner Kinos, aber in deinem Design.</p>
|
||||
<section class="dbox-modal-section">
|
||||
<h3>Wie D-BOX funktioniert</h3>
|
||||
<p>D-BOX Sitze reagieren synchron zum Film. Die Bewegungsintensität ist individuell steuerbar und kann bei Bedarf reduziert oder deaktiviert werden.</p>
|
||||
</section>
|
||||
<section class="dbox-modal-section">
|
||||
<h3>Technik im Saal</h3>
|
||||
<p>Ergänze hier deine Informationen zu Projektion, Soundsystem, Sitzkomfort und den Sälen mit D-BOX-Unterstützung.</p>
|
||||
<div class="dbox-image-grid">
|
||||
<div class="dbox-image-slot">Bildplatz Technik 1</div>
|
||||
<div class="dbox-image-slot">Bildplatz Technik 2</div>
|
||||
<div class="dbox-image-slot">Bildplatz Technik 3</div>
|
||||
<div class="dbox-image-slot">Bildplatz Technik 4</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="dbox-now-highlight modal-highlight">
|
||||
<h4>Filme in D-BOX</h4>
|
||||
<div class="dbox-mini-cards">
|
||||
<div>Zoomania 2</div>
|
||||
<div>Der Austronaut</div>
|
||||
<div>Spider Man</div>
|
||||
<div>Scream VII</div>
|
||||
<div>Gangster Gang 2</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="collectors-view" class="hidden info-view">
|
||||
<div class="container info-view-shell">
|
||||
<button class="subpage-back-btn" data-go-home type="button">← Zur Startseite</button>
|
||||
<h1>Collectors Popcorn Specials</h1>
|
||||
<p class="info-view-subtitle">Filmbezogene Specials in einer links/rechts versetzten Darstellung.</p>
|
||||
<div class="collector-zigzag">
|
||||
<article class="collector-entry left">
|
||||
<div class="collector-film-logo">Filmlogo</div>
|
||||
<div class="collector-entry-content">
|
||||
<h4>Special Becher 01</h4>
|
||||
<p>Kurzbeschreibung des Artikels und Bezug zum Film.</p>
|
||||
<input type="text" placeholder="Bildpfad (z.B. img/becher1.jpg)">
|
||||
</div>
|
||||
</article>
|
||||
<article class="collector-entry right">
|
||||
<div class="collector-film-logo">Filmlogo</div>
|
||||
<div class="collector-entry-content">
|
||||
<h4>Special Eimer 02</h4>
|
||||
<p>Weitere Edition mit eigenem Motiv und Text.</p>
|
||||
<input type="text" placeholder="Bildpfad (z.B. img/eimer2.jpg)">
|
||||
</div>
|
||||
</article>
|
||||
<article class="collector-entry left">
|
||||
<div class="collector-film-logo">Filmlogo</div>
|
||||
<div class="collector-entry-content">
|
||||
<h4>Special Box 03</h4>
|
||||
<p>Noch ein Eintrag fuer limitierte Collectors.</p>
|
||||
<input type="text" placeholder="Bildpfad (z.B. img/collector3.jpg)">
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about-view" class="hidden info-view">
|
||||
<div class="container info-view-shell">
|
||||
<div class="about-hero-block">
|
||||
<div class="about-hero-content">
|
||||
<h1>Über uns</h1>
|
||||
<p class="about-intro">
|
||||
EAGLE's IMAX vereint modernes Design, starke Technik und echtes Kinofeeling.
|
||||
Unser Anspruch: Jeder Besuch soll wie ein kleines Event wirken. Von entspannten Abenden
|
||||
bis zu großen Blockbuster-Premieren liefern wir Bild, Sound und Atmosphäre auf Top-Niveau.
|
||||
</p>
|
||||
<div class="about-pill-row">
|
||||
<span>4 Säle</span>
|
||||
<span>IMAX Experience</span>
|
||||
<span>D-BOX Motion Seats</span>
|
||||
<span>Premium Snacks</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-hero-media" aria-hidden="true"></div>
|
||||
</div>
|
||||
|
||||
<div class="about-stats-grid">
|
||||
<article>
|
||||
<h3>600+</h3>
|
||||
<p>Sitzplätze insgesamt</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>4K / Laser</h3>
|
||||
<p>Hochauflösende Projektion</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Dolby Atmos</h3>
|
||||
<p>Raumklang in ausgewählten Sälen</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>D-BOX</h3>
|
||||
<p>Bewegung synchron zum Film</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="about-cards">
|
||||
<article class="about-card about-card-halls">
|
||||
<h3>Säle</h3>
|
||||
<p>Vom klassischen Kinoraum bis zum IMAX-Erlebnis: Jeder Saal ist individuell abgestimmt auf Genre, Publikum und Stimmung.</p>
|
||||
<button type="button" class="story-more-btn" data-home-view-open="halls-view">Mehr erfahren</button>
|
||||
</article>
|
||||
<article class="about-card about-card-dbox">
|
||||
<h3>D-BOX Plätze</h3>
|
||||
<p>Synchronisierte Sitzbewegungen machen Action und Effekte physisch spürbar und verstärken die Immersion im Film.</p>
|
||||
<button type="button" class="story-more-btn" data-home-view-open="dbox-view">Mehr erfahren</button>
|
||||
</article>
|
||||
<article class="about-card about-card-tech">
|
||||
<h3>Technik</h3>
|
||||
<p>Leinwandgrößen, Projektoren, Soundsysteme und Kapazitäten in einem separaten Technikfenster zusammengefasst.</p>
|
||||
<button id="btn-open-tech-modal" type="button" class="story-more-btn" data-about-modal-open="about-tech-modal">Mehr erfahren</button>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="snacks-view" class="hidden">
|
||||
<div class="container" style="padding: 120px 8% 50px 8%;">
|
||||
<h1 class="list-title">Snacks & Getränke</h1>
|
||||
|
||||
<div class="category-tabs">
|
||||
<button class="tab-btn active" data-target="cat-getraenke">Getränke</button>
|
||||
<button class="tab-btn" data-target="cat-popcorn">Popcorn</button>
|
||||
<button class="tab-btn" data-target="cat-nachos">Nachos</button>
|
||||
<button class="tab-btn" data-target="cat-snacks">Snacks</button>
|
||||
<button class="tab-btn" data-target="cat-kombi">Kombi</button>
|
||||
<button class="tab-btn" data-target="cat-eis">Eis</button>
|
||||
</div>
|
||||
|
||||
<div id="cat-getraenke" class="snack-category active">
|
||||
<div class="snack-grid">
|
||||
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/cola.png" alt="Cola"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Coca Cola</h3>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||||
<button class="size-chip">0,75L <span>4,50€</span></button>
|
||||
<button class="size-chip">1L <span>5,50€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/cola-zero.png" alt="Cola Zero"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Coca Cola Zero</h3>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||||
<button class="size-chip">0,75L <span>4,50€</span></button>
|
||||
<button class="size-chip">1L <span>5,50€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/cola-light.png" alt="Cola Light"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Coca Cola Light</h3>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||||
<button class="size-chip">0,75L <span>4,50€</span></button>
|
||||
<button class="size-chip">1L <span>5,50€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/sprite.png" alt="Sprite"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Sprite</h3>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||||
<button class="size-chip">0,75L <span>4,50€</span></button>
|
||||
<button class="size-chip">1L <span>5,50€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/fanta.png" alt="Fanta"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Fanta</h3>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||||
<button class="size-chip">0,75L <span>4,50€</span></button>
|
||||
<button class="size-chip">1L <span>5,50€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/spezi.png" alt="Spezi"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Mezzo Mix</h3>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||||
<button class="size-chip">0,75L <span>4,50€</span></button>
|
||||
<button class="size-chip">1L <span>5,50€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/wasser.png" alt="Wasser"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Wasser</h3>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">0,33L <span>2,00€</span></button>
|
||||
<button class="size-chip">0,50L <span>3,00€</span></button>
|
||||
<button class="size-chip">0,75L <span>3,50€</span></button>
|
||||
<button class="size-chip">1L <span>4,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/Apfelschorle.png" alt="Apfelschorle"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Apfelschorle</h3>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">0,33L <span>2,00€</span></button>
|
||||
<button class="size-chip">0,50L <span>3,00€</span></button>
|
||||
<button class="size-chip">0,75L <span>3,50€</span></button>
|
||||
<button class="size-chip">1L <span>4,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/fuze-tea.png" alt="Fuze Tea"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Fuze Tea</h3>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> </div>
|
||||
|
||||
<div id="cat-popcorn" class="snack-category hidden">
|
||||
<div class="snack-grid">
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/popcorn-klein.png" alt="Popcorn klein"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Popcorn klein</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Süß</button>
|
||||
<button class="opt-btn">Salzig</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">3,50€</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/popcorn-mittel.png" alt="Popcorn mittel"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Popcorn Mittel</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Süß</button>
|
||||
<button class="opt-btn">Salzig</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">4,50€</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/popcorn-big.png" alt="Popcorn groß"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Popcorn Groß</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Süß</button>
|
||||
<button class="opt-btn">Salzig</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">6,00€</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/zoomania-popcorn.jpg" alt="Popcorn limited - zoomania 2"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Limitierter Metallbecher - Zoomania 2</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Süß</button>
|
||||
<button class="opt-btn">Salzig</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">12,00€</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/screamdoorpopcorn.jpg" alt="Popcorn limited - Scream VII"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Limitierter Sammelbecher - Scream VII</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Süß</button>
|
||||
<button class="opt-btn">Salzig</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">29,00€</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/astronautpopcorn.jpg" alt="Popcorn limited - Der Austronaut"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Limitierter Sammelbecher - Der Austronaut</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Süß</button>
|
||||
<button class="opt-btn">Salzig</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">34,00€</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/hopperspopcornmetall.jpg" alt="Popcorn limited - Hoppers"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Limitierter Metallbecher - Hoppers</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Süß</button>
|
||||
<button class="opt-btn">Salzig</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">12,00€</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/hopperspopcornwood.png" alt="Popcorn limited - Hoppers"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Limitierter Sammelbecher - Hoppers</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Süß</button>
|
||||
<button class="opt-btn">Salzig</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">21,00€</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/marioyoshipopcorn.png" alt="Popcorn limited - Yoshi"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Limitierter Sammelbecher - Yoshi Becher</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Süß</button>
|
||||
<button class="opt-btn">Salzig</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">35,90€</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cat-nachos" class="snack-category hidden">
|
||||
<div class="snack-grid">
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/nachosnormal.png" alt="Nachos"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Nachos Klein</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Käse-Dip</button>
|
||||
<button class="opt-btn">Salsa-Dip</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Klein<span>5,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/nachosnormal.png" alt="Nachos"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Nachos Normal</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Käse-Dip</button>
|
||||
<button class="opt-btn">Salsa-Dip</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Mittel<span>6,50€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/nachos.jpg" alt="Nachos"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Nachos Groß</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Käse-Dip</button>
|
||||
<button class="opt-btn">Sourcreme-Dip</button>
|
||||
<button class="opt-btn">Salsa-Dip</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Groß <span>8,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="list-title"> </h2>
|
||||
<br>
|
||||
<h2 class="list-title">Dips</h2>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/käsedip.png" alt="Käse-Dip"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Käse-Dip<br>(warm)</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Normal</button>
|
||||
<button class="opt-btn">Scharf</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Schale<span>2,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/sourdip.png" alt="Sourcreme-Dip"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Sourcreme-Dip</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Normal</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Schale<span>2,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/salsadip.png" alt="Salsa-Dip"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Salsa-Dip</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Normal</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Schale<span>2,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="list-title">Nacho Kombi-Menüs</h2>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/nachokombiklein.png" alt="Nacho Kombi Klein"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Nacho Menü Klein - Nachos klein + 1 Dip + 1 0,33L Getränk</h3>
|
||||
<div class="option-group">
|
||||
<button class="opt-btn active">Klein</button>
|
||||
</div>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Kombi<span>6,90€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cat-snacks" class="snack-category hidden">
|
||||
<div class="snack-grid">
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/mms.png" alt="M&Ms"></div>
|
||||
<div class="snack-info">
|
||||
<h3>M&M's (verschiedene Sorten)</h3>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Packung <span>4,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/haribo.png" alt="Haribo"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Haribo Goldbären (verschiedene Sorten)</h3>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Tüte <span>3,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card">
|
||||
<div class="snack-img"><img src="img/riegel.png" alt="Riegel"></div>
|
||||
<div class="snack-info">
|
||||
<h3>Schokoriegel (verschiedene Sorten)</h3>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Tüte <span>2,50€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cat-kombi" class="snack-category hidden">
|
||||
<div class="snack-grid">
|
||||
<div class="snack-card highlight">
|
||||
<div class="snack-info">
|
||||
<h3>Kleines Menü</h3>
|
||||
<p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,33L Getränk + Popcorn Klein</p>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Menü-Preis <span>5,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card highlight">
|
||||
<div class="snack-info">
|
||||
<h3>Mittleres Menü</h3>
|
||||
<p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,5L Getränk + Popcorn Mittel</p>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Menü-Preis <span>6,50€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card highlight">
|
||||
<div class="snack-info">
|
||||
<span class="badge">Bestseller</span>
|
||||
<h3>Großes Menü</h3>
|
||||
<p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">1L Getränk + Popcorn Groß</p>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Menü-Preis <span>8,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="snack-card highlight">
|
||||
<div class="snack-info">
|
||||
<div class="snack-img"><img src="img/hopperskidsmenu.jpg" alt="Hoppers Kids Menu"></div>
|
||||
<span class="badge">SPECIAL</span>
|
||||
<h3>Limitiertes Menü</h3>
|
||||
<p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,5L Getränk im HOPPERS Becher + HOPPERS Popcorn Schale<br>+HOPPERS Figur</p>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Menü-Preis <span>10,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card highlight">
|
||||
<div class="snack-info">
|
||||
<div class="snack-img"><img src="img/mariokidsmenu.png" alt="Mario Kids Menu"></div>
|
||||
<br>
|
||||
<span class="badge">SPECIAL</span>
|
||||
<h3>Limitiertes Menü</h3>
|
||||
<p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,5L Getränk im MARIO GALXY Becher + MARIO GALAXY Popcorn Schale</p>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Menü-Preis <span>10,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="snack-card highlight">
|
||||
<div class="snack-info">
|
||||
<div class="snack-img"><img src="img/zoomaniakidsmenu.jpg" alt="Zoomania Kids Menu"></div>
|
||||
<br>
|
||||
<span class="badge">SPECIAL</span>
|
||||
<h3>Limitiertes Menü</h3>
|
||||
<p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,5L Getränk im ZOOMANIA Becher + ZOOMANIA Popcorn Schale<br>+ Figur zum aussuchen</p>
|
||||
<div class="size-selector">
|
||||
<button class="size-chip">Menü-Preis <span>10,00€</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cat-eis" class="snack-category hidden">
|
||||
<div class="coming-soon-banner">
|
||||
<h2>Eiscreme & Shakes</h2>
|
||||
<p>Coming Soon...</p>
|
||||
<span>Wir bereiten etwas ganz Besonderes für dich vor! Coming this summer!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="booking-modal" class="modal hidden">
|
||||
<div class="modal-content modal-large">
|
||||
<div class="modal-header">
|
||||
<div class="header-text-container">
|
||||
<h2 id="modal-movie-title">Film Titel</h2>
|
||||
<div class="header-sub-info">
|
||||
<p id="modal-info-text">Saal • Zeit</p>
|
||||
<div id="tech-badges" class="tech-badges-container hidden">
|
||||
<img src="img/Dolby.png" alt="Dolby" class="tech-badge">
|
||||
<img src="img/dbox.jpg" alt="D-Box" class="tech-badge">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="close-btn">×</span>
|
||||
</div>
|
||||
|
||||
<div class="screen-container">
|
||||
<div class="screen"></div>
|
||||
<p class="screen-text">LEINWAND</p>
|
||||
</div>
|
||||
|
||||
<div class="booking-layout">
|
||||
<div class="seat-map-container">
|
||||
<div id="seat-grid" class="seat-grid-custom"></div>
|
||||
</div>
|
||||
|
||||
<div id="booking-summary" class="summary-panel hidden">
|
||||
<h3>Deine Auswahl</h3>
|
||||
<div id="summary-items"></div>
|
||||
<div class="summary-total">
|
||||
<div class="divider"></div>
|
||||
<div class="total-row">
|
||||
<span>Gesamtbetrag:</span>
|
||||
<span id="total-price">0,00€</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="legend" id="dynamic-legend"></div>
|
||||
|
||||
<button id="btn-confirm-seats" class="btn-primary" style="margin-top:20px">Plätze bestätigen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="cart-view" class="cart-section hidden">
|
||||
<div class="container" style="padding: 120px 8% 50px 8%;">
|
||||
<h1 class="list-title">Dein Warenkorb</h1>
|
||||
|
||||
<div class="cart-container">
|
||||
<div class="cart-left">
|
||||
<div id="cart-items-list">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cart-right">
|
||||
<div class="summary-box-black">
|
||||
<h2>Zusammenfassung</h2>
|
||||
<div class="summary-row-large">
|
||||
<span>Gesamtsumme:</span>
|
||||
<span id="cart-total-right">0,00€</span>
|
||||
</div>
|
||||
<p id="cart-vat-right" style="text-align:right; color:#86868b; font-size:0.8rem; margin-top:5px;">
|
||||
inkl. 19% MwSt: 0,00€
|
||||
</p>
|
||||
|
||||
<button id="btn-checkout-final" class="blue-button">Jetzt kostenpflichtig bestellen</button>
|
||||
|
||||
<div class="payment-methods" style="margin-top: 25px; text-align: center;">
|
||||
<p style="font-size: 0.75rem; color: #86868b; margin-bottom: 12px;">Sicher bezahlen mit</p>
|
||||
<div style="display: flex; justify-content: center; gap: 15px; opacity: 0.6;">
|
||||
<img src="img/paypal.png" alt="PayPal" style="height: 20px;">
|
||||
<img src="img/visa.png" alt="Visa" style="height: 20px;">
|
||||
<img src="img/mastercard.png" alt="Mastercard" style="height: 20px;">
|
||||
<img src="img/applepay.png" alt="Apple Pay" style="height: 20px;">
|
||||
<img src="img/googlepay.png" alt="Google Pay" style="height: 20px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="account-view" class="hidden">
|
||||
<div class="account-login-box">
|
||||
<h2>Mein Konto</h2>
|
||||
|
||||
<input type="email" id="login-email" placeholder="E-Mail">
|
||||
<input type="password" id="login-password" placeholder="Passwort">
|
||||
<button id="btn-forgot-password" type="button">Passwort vergessen?</button>
|
||||
|
||||
<div id="login-error" class="hidden">
|
||||
Falsche E-Mail oder Passwort
|
||||
</div>
|
||||
|
||||
<button id="btn-login-account" type="button">Anmelden</button>
|
||||
<p id="account-register-hint">Noch kein Konto?</p>
|
||||
<button id="btn-open-register" type="button">Registrieren</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="register-modal" class="modal hidden">
|
||||
<div class="modal-content account-auth-modal">
|
||||
<button id="btn-close-register" class="modal-close-btn" type="button" aria-label="Registrierung schliessen">×</button>
|
||||
<h2>Registrieren</h2>
|
||||
<p class="auth-modal-subtitle">Erstelle dein Konto für schnellere Buchungen.</p>
|
||||
<input type="text" id="reg-firstname" placeholder="Vorname">
|
||||
<input type="text" id="reg-lastname" placeholder="Nachname">
|
||||
<input type="email" id="reg-email" placeholder="E-Mail">
|
||||
<input type="password" id="reg-password" placeholder="Passwort">
|
||||
<button id="btn-register-save" class="auth-submit-btn" type="button">Konto erstellen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="forgot-modal" class="modal hidden">
|
||||
<div class="modal-content account-auth-modal">
|
||||
<button id="btn-close-forgot" class="modal-close-btn" type="button" aria-label="Passwort-Dialog schliessen">×</button>
|
||||
<h2>Passwort vergessen</h2>
|
||||
<p class="auth-modal-subtitle">Gib deine E-Mail ein und wir senden dir einen Reset-Code.</p>
|
||||
|
||||
<input type="email" id="forgot-email" placeholder="E-Mail">
|
||||
<button id="btn-send-reset" class="auth-submit-btn" type="button">Code senden</button>
|
||||
|
||||
<div id="reset-message" class="hidden">
|
||||
Ein Code wurde simuliert versendet.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="checkout-view" class="hidden" style="padding: 40px 20px;">
|
||||
<div class="checkout-container">
|
||||
<div class="progress-bar">
|
||||
<div class="step active" id="step-1-indicator">1</div>
|
||||
<div class="line" id="line-1"></div>
|
||||
<div class="step" id="step-2-indicator">2</div>
|
||||
<div class="line" id="line-2"></div>
|
||||
<div class="step" id="step-3-indicator">3</div>
|
||||
</div>
|
||||
|
||||
<div id="checkout-step-1" class="checkout-step">
|
||||
<h2 style="text-align: center; margin-bottom: 20px;">Zahlungsmethode wählen</h2>
|
||||
<div class="payment-grid">
|
||||
<div class="payment-method" data-method="Apple Pay">
|
||||
<img src="img/applepay.png" alt="Apple Pay" style="height: 20px;">
|
||||
<span>Apple Pay</span>
|
||||
</div>
|
||||
<div class="payment-method" data-method="PayPal">
|
||||
<img src="img/paypal.png" alt="PayPal" style="height: 20px;">
|
||||
<span>PayPal</span>
|
||||
</div>
|
||||
<div class="payment-method" data-method="Google Pay">
|
||||
<img src="img/googlepay.png" alt="Google Pay" style="height: 20px;">
|
||||
<span>Google Pay</span>
|
||||
</div>
|
||||
<div class="payment-method" data-method="Visa">
|
||||
<img src="img/visa.png" alt="Visa" style="height: 20px;">
|
||||
<span>Visa</span>
|
||||
</div>
|
||||
</div>
|
||||
<button id="btn-next-step-2" class="hidden" style="margin-top: 25px; width: 100%; padding: 15px; background: #0071e3; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;">Weiter zur Übersicht</button>
|
||||
</div>
|
||||
|
||||
<div id="checkout-step-2" class="checkout-step hidden">
|
||||
<div style="position: relative;">
|
||||
<button id="btn-back-to-step1" style="position: absolute; top: -15px; left: 0; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; opacity: 0.6; transition: 0.3s;">←</button>
|
||||
<h2 style="text-align: center; margin-bottom: 25px;">Persönliche Daten</h2>
|
||||
</div>
|
||||
<h2 style="text-align: center; margin-bottom: 20px;">Bestellübersicht</h2>
|
||||
<div id="checkout-summary-list" style="background: #222; padding: 15px; border-radius: 8px;"></div>
|
||||
<h3 id="checkout-total-display" style="text-align: right; margin-top: 15px;"></h3>
|
||||
<div id="checkout-vat-display" style="text-align: right; color: #86868b; font-size: 0.8rem;"></div>
|
||||
<button id="btn-pay-now" style="margin-top: 25px; width: 100%; padding: 15px; background: #4caf50; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;">Jetzt Bezahlen</button>
|
||||
</div>
|
||||
|
||||
<div id="checkout-step-3" class="checkout-step hidden">
|
||||
<h2 style="color: #4caf50; text-align: center;">Kauf erfolgreich!</h2>
|
||||
<div id="ticket-container" style="margin-top: 30px;"></div>
|
||||
<button id="btn-back-home" style="margin-top: 30px; width: 100%; padding: 15px; background: #333; color: white; border: none; border-radius: 8px; cursor: pointer;">Zurück zur Startseite</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="snack-prompt-overlay" class="snack-overlay hidden">
|
||||
<div class="snack-prompt-box">
|
||||
<h2>Popcorn gefällig? 🍿</h2>
|
||||
<p>Möchtest du noch Snacks oder Getränke hinzufügen?</p>
|
||||
<div class="prompt-buttons">
|
||||
<button id="btn-yes-snacks" class="btn-primary">Ja, Snacks wählen</button>
|
||||
<button id="btn-no-cart" class="btn-secondary">Weiter zum Warenkorb</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="about-tech-modal" class="home-modal-overlay hidden">
|
||||
<div class="home-modal-panel home-modal-wide">
|
||||
<button type="button" class="home-modal-close" data-about-modal-close="about-tech-modal">×</button>
|
||||
<h2>Technik</h2>
|
||||
<p class="home-modal-sub">Daten und Eckwerte zu Bild, Projektoren, Leinwandgrößen und Sitzkapazitäten.</p>
|
||||
<div class="hall-modal-grid full-page-grid">
|
||||
<article class="hall-modal-item">
|
||||
<h4>Projektoren</h4>
|
||||
<textarea placeholder="z.B. 4K Laserprojektion, Modellinfos, Lichtleistung..."></textarea>
|
||||
</article>
|
||||
<article class="hall-modal-item">
|
||||
<h4>Leinwandgrößen</h4>
|
||||
<textarea placeholder="z.B. IMAX: 22m x 12m, Deluxe: 14m x 7m ..."></textarea>
|
||||
</article>
|
||||
<article class="hall-modal-item">
|
||||
<h4>Sitzplätze pro Saal</h4>
|
||||
<textarea placeholder="z.B. Kino 1: 180, Kino 2: 150, Deluxe 1: 120, IMAX: 300"></textarea>
|
||||
</article>
|
||||
<article class="hall-modal-item">
|
||||
<h4>Bild & Audio</h4>
|
||||
<textarea placeholder="z.B. Dolby Atmos, 7.1, Frame Rates, HDR-Profile..."></textarea>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="dist/main.js"></script>
|
||||
<script type="module" src="dist/cart.js"></script>
|
||||
<script type="module" src="dist/booking.js"></script>
|
||||
<script type="module" src="dist/checkout.js"></script>
|
||||
<script type="module" src="dist/account.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -44,7 +44,6 @@
|
||||
|
||||
<script>
|
||||
import { seatLayouts, occupiedSeatsData, prices, cart, updateCart } from "../scripts/bigConstants";
|
||||
import type { MovieCartItem } from "../scripts/bigConstants";
|
||||
|
||||
let currentBookingContext: any = null;
|
||||
let currentHallLayout: any = null;
|
||||
@@ -121,16 +120,15 @@
|
||||
const selected = Array.from(document.querySelectorAll("#seat-grid .seat.selected")) as HTMLElement[];
|
||||
if (!selected.length) return alert("Bitte wähle Plätze aus.");
|
||||
selected.forEach(seat => {
|
||||
const ticket: MovieCartItem = {
|
||||
cart.push({
|
||||
id: Date.now() + Math.random(),
|
||||
category: "movie",
|
||||
title: currentBookingContext.movie,
|
||||
hall: currentBookingContext.hall,
|
||||
time: currentBookingContext.time,
|
||||
seatId: seat.dataset.seatId ?? "",
|
||||
price: prices[seat.dataset.type as keyof typeof prices] ?? prices.normal
|
||||
};
|
||||
cart.push(ticket);
|
||||
seatId: seat.dataset.seatId,
|
||||
price: prices[seat.dataset.type as keyof typeof prices] || prices.normal
|
||||
});
|
||||
});
|
||||
updateCart(cart);
|
||||
window.dispatchEvent(new CustomEvent("cart-updated"));
|
||||
|
||||
@@ -38,14 +38,13 @@
|
||||
|
||||
<script>
|
||||
import { cart, updateCart } from "../scripts/bigConstants";
|
||||
import type { CartItem, MovieCartItem, SnackCartItem } from "../scripts/bigConstants";
|
||||
|
||||
function formatEuro(value: number) {
|
||||
return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
|
||||
}
|
||||
|
||||
function escapeHtml(value: string | number | undefined | null) {
|
||||
return String(value ?? "")
|
||||
function escapeHtml(value: any) {
|
||||
return String(value || "")
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
@@ -53,60 +52,52 @@
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
function buildCartKey(item: CartItem) {
|
||||
function buildCartKey(item: any) {
|
||||
const infoText = item.category === "movie"
|
||||
? `Sitz: ${(item as MovieCartItem).seatId} (${item.hall})`
|
||||
? `Sitz: ${item.seatId} (${item.hall})`
|
||||
: item.time;
|
||||
return `${item.title}-${item.hall}-${infoText}`;
|
||||
}
|
||||
|
||||
function isDrinkItem(item: CartItem): item is SnackCartItem {
|
||||
function isDrinkItem(item: any) {
|
||||
if (item.category !== "snack") return false;
|
||||
const title = item.title.toLowerCase();
|
||||
const size = item.hall.toLowerCase();
|
||||
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: CartItem) {
|
||||
function buildItemInfo(item: any) {
|
||||
if (item.category === "movie") {
|
||||
const movie = item as MovieCartItem;
|
||||
return `
|
||||
<div>Sitzplatz: ${escapeHtml(movie.seatId)}</div>
|
||||
<div>Saal: ${escapeHtml(movie.hall)}</div>
|
||||
<div>Uhrzeit: ${escapeHtml(movie.time)} Uhr</div>
|
||||
<div>Sitzplatz: ${escapeHtml(item.seatId || "-")}</div>
|
||||
<div>Saal: ${escapeHtml(item.hall || "-")}</div>
|
||||
<div>Uhrzeit: ${escapeHtml(item.time || "-")} Uhr</div>
|
||||
`;
|
||||
}
|
||||
if (isDrinkItem(item)) {
|
||||
return `
|
||||
<div>Variante: ${escapeHtml(item.time)}</div>
|
||||
<div>Groesse: ${escapeHtml(item.hall)}</div>
|
||||
<div>Variante: ${escapeHtml(item.time || "-")}</div>
|
||||
<div>Groesse: ${escapeHtml(item.hall || "-")}</div>
|
||||
`;
|
||||
}
|
||||
return `
|
||||
<div>Kategorie: Snack</div>
|
||||
<div>Variante: ${escapeHtml(item.time)}</div>
|
||||
<div>Groesse: ${escapeHtml(item.hall)}</div>
|
||||
<div>Variante: ${escapeHtml(item.time || "-")}</div>
|
||||
<div>Groesse: ${escapeHtml(item.hall || "-")}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
interface CartGroup {
|
||||
key: string;
|
||||
quantity: number;
|
||||
total: number;
|
||||
item: CartItem;
|
||||
}
|
||||
|
||||
function groupCartItems(): CartGroup[] {
|
||||
const groups = new Map<string, CartGroup>();
|
||||
cart.forEach((item: CartItem) => {
|
||||
function groupCartItems() {
|
||||
const groups = new Map();
|
||||
cart.forEach((item: any) => {
|
||||
const key = buildCartKey(item);
|
||||
if (!groups.has(key)) {
|
||||
groups.set(key, { key, quantity: 0, total: 0, item });
|
||||
}
|
||||
const group = groups.get(key)!;
|
||||
const group = groups.get(key);
|
||||
group.quantity += 1;
|
||||
group.total += item.price;
|
||||
group.total += Number(item.price || 0);
|
||||
});
|
||||
return Array.from(groups.values());
|
||||
}
|
||||
@@ -137,7 +128,7 @@
|
||||
</div>
|
||||
`;
|
||||
|
||||
const rows = groupedItems.map((group: CartGroup) => {
|
||||
const rows = groupedItems.map((group) => {
|
||||
const imageHtml = group.item.img
|
||||
? `<img class="cart-img-small" src="${escapeHtml(group.item.img)}" alt="${escapeHtml(group.item.title)}">`
|
||||
: `<div class="cart-img-fallback">Kein Bild</div>`;
|
||||
@@ -167,7 +158,7 @@
|
||||
|
||||
cartList.innerHTML = header + rows;
|
||||
|
||||
const total = cart.reduce((sum: number, item: CartItem) => sum + item.price, 0);
|
||||
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)}`;
|
||||
@@ -176,26 +167,25 @@
|
||||
window.addEventListener("cart-updated", renderCart);
|
||||
renderCart();
|
||||
|
||||
document.getElementById("cart-view")?.addEventListener("click", (event: Event) => {
|
||||
const target = event.target as HTMLElement;
|
||||
const deleteBtn = target.closest(".btn-delete-item") as HTMLElement | null;
|
||||
document.getElementById("cart-view")?.addEventListener("click", (event: any) => {
|
||||
const deleteBtn = event.target.closest(".btn-delete-item");
|
||||
if (deleteBtn) {
|
||||
const key = deleteBtn.dataset.key;
|
||||
const newCart = cart.filter((item: CartItem) => buildCartKey(item) !== key);
|
||||
const newCart = cart.filter(item => buildCartKey(item) !== key);
|
||||
updateCart(newCart);
|
||||
window.dispatchEvent(new CustomEvent("cart-updated"));
|
||||
return;
|
||||
}
|
||||
|
||||
const qtyBtn = target.closest(".btn-qty") as HTMLElement | null;
|
||||
const qtyBtn = event.target.closest(".btn-qty");
|
||||
if (qtyBtn) {
|
||||
const action = qtyBtn.dataset.action;
|
||||
const key = qtyBtn.dataset.key;
|
||||
if (action === "plus") {
|
||||
const item = cart.find((i: CartItem) => buildCartKey(i) === key);
|
||||
if (item) cart.push({ ...item, id: Date.now() + Math.random() });
|
||||
const item = cart.find(i => buildCartKey(i) === key);
|
||||
if (item) cart.push({...item, id: Date.now() + Math.random()});
|
||||
} else {
|
||||
const idx = cart.findIndex((i: CartItem) => buildCartKey(i) === key);
|
||||
const idx = cart.findIndex(i => buildCartKey(i) === key);
|
||||
if (idx !== -1) cart.splice(idx, 1);
|
||||
}
|
||||
updateCart(cart);
|
||||
|
||||
@@ -53,7 +53,6 @@
|
||||
|
||||
<script>
|
||||
import { currentUser, users, cart, emptyCart, occupiedSeatsData, updateCart, updateOccupiedSeats } from "../scripts/bigConstants";
|
||||
import type { CartItem, MovieCartItem } from "../scripts/bigConstants";
|
||||
|
||||
function formatCheckoutEuro(value: number) {
|
||||
return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
|
||||
@@ -91,15 +90,15 @@
|
||||
if (!summaryList) return;
|
||||
summaryList.innerHTML = "";
|
||||
|
||||
const total = cart.reduce((sum: number, item: CartItem) => sum + item.price, 0);
|
||||
const total = cart.reduce((sum: number, item: any) => sum + Number(item.price || 0), 0);
|
||||
const vat = total - total / 1.19;
|
||||
|
||||
cart.forEach((item: CartItem) => {
|
||||
cart.forEach((item: any) => {
|
||||
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 as MovieCartItem).seatId} | ${item.hall} | ${item.time} Uhr`
|
||||
: `${item.time || "Standard"} | ${item.hall}`;
|
||||
? `Sitz ${item.seatId || "-"} | ${item.hall || "-"} | ${item.time || "-"} Uhr`
|
||||
: `${item.time || "Standard"} | ${item.hall || "-"}`;
|
||||
row.innerHTML = `<span>${item.title} (${infoText})</span><span>${formatCheckoutEuro(item.price)}</span>`;
|
||||
summaryList.appendChild(row);
|
||||
});
|
||||
@@ -117,16 +116,16 @@
|
||||
const ticketContainer = document.getElementById("ticket-container");
|
||||
if (!ticketContainer) return;
|
||||
|
||||
const moviesInCart = cart.filter((item: CartItem): item is MovieCartItem => item.category === "movie");
|
||||
const moviesInCart = cart.filter((item: any) => item.category === "movie");
|
||||
if (!moviesInCart.length) {
|
||||
ticketContainer.innerHTML = "<p>Danke für deinen Einkauf!</p>";
|
||||
return;
|
||||
}
|
||||
|
||||
const mainMovie: MovieCartItem = moviesInCart[0];
|
||||
const mainMovie = moviesInCart[0];
|
||||
const matchingMovieSeats = moviesInCart
|
||||
.filter((item: MovieCartItem) => item.title === mainMovie.title && item.time === mainMovie.time)
|
||||
.map((item: MovieCartItem) => item.seatId)
|
||||
.filter((item: any) => item.title === mainMovie.title && item.time === mainMovie.time)
|
||||
.map((item: any) => item.seatId)
|
||||
.join(", ");
|
||||
|
||||
const qrData = encodeURIComponent(`EAGLE-IMAX|${mainMovie.title}|${mainMovie.hall}|${matchingMovieSeats}`);
|
||||
@@ -155,11 +154,12 @@
|
||||
}
|
||||
|
||||
function completeCheckout() {
|
||||
const orderItems: CartItem[] = [...cart];
|
||||
const orderTotal = orderItems.reduce((sum: number, item: CartItem) => sum + item.price, 0);
|
||||
const orderItems = [...cart];
|
||||
const orderTotal = orderItems.reduce((sum, item) => sum + Number(item.price || 0), 0);
|
||||
|
||||
// Save order for current user
|
||||
if (currentUser && Array.isArray(users)) {
|
||||
const userIndex = users.findIndex((entry: any) => entry.email === (currentUser as any).email);
|
||||
const userIndex = users.findIndex((entry: any) => entry.email === currentUser.email);
|
||||
if (userIndex !== -1) {
|
||||
if (!Array.isArray(users[userIndex].orders)) users[userIndex].orders = [];
|
||||
users[userIndex].orders.push({
|
||||
@@ -172,13 +172,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
orderItems
|
||||
.filter((item: CartItem): item is MovieCartItem => item.category === "movie")
|
||||
.forEach((item: MovieCartItem) => {
|
||||
const key = `${item.hall}-${item.time}`;
|
||||
if (!occupiedSeatsData[key]) occupiedSeatsData[key] = [];
|
||||
occupiedSeatsData[key].push(item.seatId);
|
||||
});
|
||||
// Reserve seats
|
||||
orderItems.filter(item => item.category === "movie").forEach(item => {
|
||||
const key = `${item.hall}-${item.time}`;
|
||||
if (!occupiedSeatsData[key]) occupiedSeatsData[key] = [];
|
||||
occupiedSeatsData[key].push(item.seatId);
|
||||
});
|
||||
updateOccupiedSeats(occupiedSeatsData);
|
||||
|
||||
emptyCart();
|
||||
|
||||
@@ -199,22 +199,10 @@ const movieProgram = movieCatalog?.map((movie, movieIndex) => ({
|
||||
</section>
|
||||
|
||||
<script>
|
||||
import { length } from "astro:schema";
|
||||
|
||||
const movieProgramList = document.getElementById("movie-program-list");
|
||||
|
||||
movieProgramList?.addEventListener("click", (event: any) => {
|
||||
const dayButton = event.target.closest(".program-day-tab");
|
||||
let dayButtonsAll = document.getElementsByClassName("program-day-tab");
|
||||
let dayButtons: any[] = [];
|
||||
//only select the daybuttons for this movie
|
||||
|
||||
for (let i = 0; i < dayButtonsAll.length; i++) {
|
||||
if (dayButtonsAll[i].getAttribute("data-program-index") == dayButton.getAttribute("data-program-index")) {
|
||||
dayButtons.push(dayButtonsAll[i])
|
||||
}
|
||||
}
|
||||
|
||||
if (dayButton) {
|
||||
const programIndex = dayButton.getAttribute("data-program-index");
|
||||
const dayIndex = parseInt(dayButton.getAttribute("data-day-index"));
|
||||
@@ -237,14 +225,6 @@ import { length } from "astro:schema";
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
dayButton.setAttribute("class", dayButton.getAttribute("class") + " active")
|
||||
for (let i = 0; i < dayButtons.length; i++) {
|
||||
// check if current button is the one needed
|
||||
if (dayButtons[i].getAttribute("data-day-index") != dayIndex.toString()) {
|
||||
dayButtons[i].setAttribute("class", "program-day-tab");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -450,7 +450,6 @@
|
||||
|
||||
<script>
|
||||
import { cart, updateCart } from "../scripts/bigConstants";
|
||||
import type { SnackCartItem } from "../scripts/bigConstants";
|
||||
|
||||
const snacksView = document.getElementById("snacks-view");
|
||||
|
||||
@@ -472,7 +471,7 @@
|
||||
const activeOption = snackCard.querySelector(".opt-btn.active") as HTMLElement;
|
||||
const variantVal = activeOption ? activeOption.innerText : "Normal";
|
||||
|
||||
const snackItem: SnackCartItem = {
|
||||
cart.push({
|
||||
id: Date.now() + Math.random(),
|
||||
category: "snack",
|
||||
title: snackTitle,
|
||||
@@ -481,8 +480,7 @@
|
||||
type: "SNACK",
|
||||
price: priceVal,
|
||||
img: snackImg
|
||||
};
|
||||
cart.push(snackItem);
|
||||
});
|
||||
|
||||
updateCart(cart);
|
||||
window.dispatchEvent(new CustomEvent("cart-updated"));
|
||||
|
||||
@@ -27,12 +27,12 @@ export const timePatterns = [
|
||||
export const weekdayShort = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
|
||||
|
||||
// Shared State
|
||||
export const cart: CartItem[] = JSON.parse(typeof window !== 'undefined' ? (localStorage.getItem("eagleCart") || '[]') : '[]');
|
||||
export const cart: unknown[] = JSON.parse(typeof window !== 'undefined' ? (localStorage.getItem("eagleCart") || '[]') : '[]');
|
||||
export let occupiedSeatsData = JSON.parse(typeof window !== 'undefined' ? (localStorage.getItem("eagleOccupied") || '{}') : '{}');
|
||||
export const users: User[] = JSON.parse(typeof window !== 'undefined' ? (localStorage.getItem("eagleUsers") || '[]') : '[]');
|
||||
export let currentUser: User | null = JSON.parse(typeof window !== 'undefined' ? (localStorage.getItem("currentUser") || 'null') : 'null');
|
||||
export const users: unknown[] = JSON.parse(typeof window !== 'undefined' ? (localStorage.getItem("eagleUsers") || '[]') : '[]');
|
||||
export let currentUser: unknown = JSON.parse(typeof window !== 'undefined' ? (localStorage.getItem("currentUser") || 'null') : 'null');
|
||||
|
||||
export function updateCart(newCart: CartItem[]) {
|
||||
export function updateCart(newCart: unknown[]) {
|
||||
cart.splice(0, cart.length, ...newCart);
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem("eagleCart", JSON.stringify(cart));
|
||||
@@ -57,7 +57,7 @@ export function persistUsers() {
|
||||
if (typeof window !== 'undefined') localStorage.setItem("eagleUsers", JSON.stringify(users));
|
||||
}
|
||||
|
||||
export function persistCurrentUser(user: User | null) {
|
||||
export function persistCurrentUser(user: unknown) {
|
||||
currentUser = user;
|
||||
if (typeof window !== 'undefined') {
|
||||
if (currentUser) localStorage.setItem("currentUser", JSON.stringify(currentUser));
|
||||
@@ -65,31 +65,6 @@ export function persistCurrentUser(user: User | null) {
|
||||
}
|
||||
}
|
||||
|
||||
export interface BaseCartItem {
|
||||
id: number;
|
||||
category: "movie" | "snack";
|
||||
title: string;
|
||||
/** Hall name for movies; size label (e.g. "0,33L") for snacks */
|
||||
hall: string;
|
||||
/** Showtime for movies; flavour/variant for snacks */
|
||||
time: string;
|
||||
price: number;
|
||||
img?: string;
|
||||
}
|
||||
|
||||
export interface MovieCartItem extends BaseCartItem {
|
||||
category: "movie";
|
||||
seatId: string;
|
||||
poster?: string;
|
||||
}
|
||||
|
||||
export interface SnackCartItem extends BaseCartItem {
|
||||
category: "snack";
|
||||
type: "SNACK";
|
||||
}
|
||||
|
||||
export type CartItem = MovieCartItem | SnackCartItem;
|
||||
|
||||
export interface User {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
|
||||
Reference in New Issue
Block a user