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

Compare commits

base: Aaron:dev_aaron
Branches Tags
Aaron:master Aaron:dev_aaron Aaron:dev_jannis
..
compare: Aaron:c8052212088c54631f6ce4140002ccf96570b6a5
Branches Tags
Aaron:dev_aaron Aaron:dev_jannis Aaron:master

5 Commits
dev_aaron ... c805221208

Author SHA1 Message Date
Jannis
c805221208 Merge pull request 'fix/console-errors' (#8) from fix/console-errors into dev_jannis 
Reviewed-on: #8
 2026-04-29 13:06:04 +00:00
Jannis Heydemann
40ee49aff5 Closed #1 #2 #3 #4 #5 by converting all files to typescript. cant confirm everything working rn 2026-04-29 15:04:52 +02:00
Jannis Heydemann
c88242b2be fix: console errors - null crash, 404s und fehlende Bilder 
- account.ts: null-Guard vor normalizeUser() wenn kein User im LocalStorage
- index.html: plain-JS Dateien (cart, booking, checkout, main) von dist/ auf src/ umgestellt
- index.html: dolby.png -> Dolby.png und dbox.png -> dbox.jpg (falsche Dateinamen)
- style.css: placeholder-Bilder auf vorhandene Dateien umgestellt (shelter.jpg, dbox.jpg, popcorn.jpg)
- Projekt-Setup (package.json, tsconfig.json, src/) initial commitet

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-04-29 12:36:01 +02:00
Jannis Heydemann
425c5d1900 Added html hints to enable syntax highliting 2026-04-29 11:25:04 +02:00
Jannis Heydemann
e2b4852e0d added password hashing 2026-04-29 10:56:09 +02:00
26 changed files with 3666 additions and 1683 deletions
Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
node_modules
dist/

BIN
img/astronaut-rockypopcorn.jpg LFS
View File

Binary file not shown.

BIN
img/cashtruck.jpg LFS
View File

Binary file not shown.

BIN
img/fsk-0.png LFS
View File

Binary file not shown.

BIN
img/fsk-12.png LFS
View File

Binary file not shown.

BIN
img/fsk-16.png LFS
View File

Binary file not shown.

BIN
img/fsk-18.png LFS
View File

Binary file not shown.

BIN
img/fsk-6.png LFS
View File

Binary file not shown.

BIN
img/nachokombigross.png LFS
View File

Binary file not shown.

BIN
img/nachokombimittel.png LFS
View File

Binary file not shown.

BIN
img/popcornkombigross.png LFS
View File

Binary file not shown.

BIN
img/popcornkombiklein.png LFS
View File

Binary file not shown.

BIN
img/popcornkombimittel.png LFS
View File

Binary file not shown.

BIN
img/screammetalpopcorn.png LFS
View File

Binary file not shown.

BIN
img/zoomania-2-logo.png LFS
View File

Binary file not shown.

482
index.html
View File

@@ -51,14 +51,7 @@
<h3>Jetzt läuft</h3>
<span>Heute im Fokus</span>
</div>
<div id="now-running-shell" class="now-running-shell is-collapsed">
<div id="now-running-row" class="now-running-row"></div>
<div class="now-running-fade">
<button id="now-running-toggle" class="now-running-toggle" type="button" aria-expanded="false" aria-label="Weitere Filme anzeigen">
<span>&gt;</span>
</button>
</div>
</div>
</div>
<div class="home-inline-showcase reveal-on-scroll">
@@ -274,238 +267,15 @@
<h1 class="list-title">Snacks & Getränke</h1>
<div class="category-tabs">
<button class="tab-btn active" data-target="cat-limited">Limitierte Specials</button>
<button class="tab-btn" data-target="cat-getraenke">Getränke</button>
<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-limited" class="snack-category active limited-specials-category">
<div class="limited-specials-hero">
<div>
<span class="limited-kicker">Nur für kurze Zeit</span>
<h2>Limitierte Specials</h2>
<p>Filmbecher, Sammler-Eimer und Kids-Menüs als kleine Vitrine für besondere Aktionen.</p>
</div>
</div>
<div class="limited-special-block">
<div class="special-film-heading">
<img src="img/Zoomania-2.jpg" alt="Zoomania 2 Logo">
<div>
<span>Zoomania 2</span>
<h2>Tiereische Collection</h2>
</div>
</div>
<div class="limited-special-grid">
<div class="snack-card limited-special-card">
<div class="snack-img"><img src="img/zoomania-popcorn.jpg" alt="Zoomania 2 Metallbecher"></div>
<div class="snack-info">
<span class="badge">Metallbecher</span>
<h3>Limitierter Metallbecher - Zoomania 2</h3>
<p class="snack-card-note">Sammlerbecher mit Popcornfüllung, wahlweise süß oder salzig.</p>
<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">Special <span>12,00€</span></button>
</div>
</div>
</div>
<div class="snack-card limited-special-card wide-special">
<div class="snack-img"><img src="img/zoomaniakidsmenu.jpg" alt="Zoomania Kids Menu"></div>
<div class="snack-info">
<span class="badge">Kids Special</span>
<h3>Zoomania Kids Menü</h3>
<p class="snack-card-note">0,5L Getränk im Zoomania Becher + Zoomania Popcorn Schale + 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 class="limited-special-block">
<div class="special-film-heading">
<img src="img/screamvii.jpg" alt="Scream VII Logo">
<div>
<span>Scream VII</span>
<h2>Horror Collection</h2>
</div>
</div>
<div class="limited-special-grid">
<div class="snack-card limited-special-card">
<div class="snack-img"><img src="img/screamdoorpopcorn.jpg" alt="Scream VII Sammelbecher"></div>
<div class="snack-info">
<span class="badge">Collector</span>
<h3>Limitierter Sammelbecher - Scream VII</h3>
<p class="snack-card-note">Hallo Sydney! Ghostface in der Tür.</p>
<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">Special <span>29,00€</span></button>
</div>
</div>
</div>
<div class="snack-card limited-special-card">
<div class="snack-img"><img src="img/screammetalpopcorn.png" alt="Scream VII Sammelbecher"></div>
<div class="snack-info">
<span class="badge">Collector</span>
<h3>Limitierter Metallbecher - Scream VII</h3>
<p class="snack-card-note">Metall Sammelbecher im SCREAM VII Design</p>
<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">Special <span>12,00€</span></button>
</div>
</div>
</div>
</div>
</div>
<div class="limited-special-block">
<div class="special-film-heading">
<img src="img/derAustronaut.jpg" alt="Der Austronaut Logo">
<div>
<span>Project Hail Mary</span>
<h2>Space Collection</h2>
</div>
</div>
<div class="limited-special-grid">
<div class="snack-card limited-special-card">
<div class="snack-img"><img src="img/astronautpopcorn.jpg" alt="Der Austronaut Sammelbecher"></div>
<div class="snack-info">
<span class="badge">Space Cup</span>
<h3>Limitierter Sammelbecher - Der Austronaut</h3>
<p class="snack-card-note">Der Helm von Ryland Grace aus "Der Austronaut"</p>
<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">Special <span>34,00€</span></button>
</div>
</div>
</div>
<div class="snack-card limited-special-card">
<div class="snack-img"><img src="img/astronaut-rockypopcorn.jpg" alt="Der Austronaut - Rocky"></div>
<div class="snack-info">
<span class="badge">Collector</span>
<h3>Limitierter Sammelbecher - Der Austronaut</h3>
<p class="snack-card-note">Die Kapsel von Rocky - Mit abnehmbarer Rocky Figur</p>
<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">Special <span>22,00€</span></button>
</div>
</div>
</div>
</div>
</div>
<div class="limited-special-block">
<div class="special-film-heading">
<img src="img/hoppers.jpg" alt="Hoppers Logo">
<div>
<span>Hoppers</span>
<h2>Biber Specials (Ist das eine Eidechse?)</h2>
</div>
</div>
<div class="limited-special-grid">
<div class="snack-card limited-special-card">
<div class="snack-img"><img src="img/hopperspopcornmetall.jpg" alt="Hoppers Metallbecher"></div>
<div class="snack-info">
<span class="badge">Metallbecher</span>
<h3>Limitierter Metallbecher - Hoppers</h3>
<p class="snack-card-note">Stabiler Becher mit Popcornfüllung.</p>
<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">Special <span>12,00€</span></button>
</div>
</div>
</div>
<div class="snack-card limited-special-card">
<div class="snack-img"><img src="img/hopperspopcornwood.png" alt="Hoppers Sammelbecher"></div>
<div class="snack-info">
<span class="badge">Collector</span>
<h3>Limitierter Sammelbecher - Hoppers</h3>
<p class="snack-card-note">Sammlerbecher mit warmem Popcornmoment.</p>
<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">Special <span>21,00€</span></button>
</div>
</div>
</div>
<div class="snack-card limited-special-card wide-special">
<div class="snack-img"><img src="img/hopperskidsmenu.jpg" alt="Hoppers Kids Menu"></div>
<div class="snack-info">
<span class="badge">Kids Special</span>
<h3>Hoppers Kids Menü</h3>
<p class="snack-card-note">0,5L Getränk im Hoppers Becher + Hoppers Popcorn Schale + Hoppers Figur.</p>
<div class="size-selector">
<button class="size-chip">Menü-Preis <span>10,00€</span></button>
</div>
</div>
</div>
</div>
</div>
<div class="limited-special-block">
<div class="special-film-heading">
<img src="img/mariogalaxy.jpg" alt="Mario Galaxy Logo">
<div>
<span>Super Mario Galaxy</span>
<h2>Galaxy Collection</h2>
</div>
</div>
<div class="limited-special-grid">
<div class="snack-card limited-special-card">
<div class="snack-img"><img src="img/marioyoshipopcorn.png" alt="Yoshi Sammelbecher"></div>
<div class="snack-info">
<span class="badge">Yoshi Cup</span>
<h3>Limitierter Sammelbecher - Yoshi Becher</h3>
<p class="snack-card-note">Verspielter Sammlerbecher für Mario-Fans.</p>
<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">Special <span>35,90€</span></button>
</div>
</div>
</div>
<div class="snack-card limited-special-card wide-special">
<div class="snack-img"><img src="img/mariokidsmenu.png" alt="Mario Kids Menu"></div>
<div class="snack-info">
<span class="badge">Kids Special</span>
<h3>Mario Galaxy Kids Menü</h3>
<p class="snack-card-note">0,5L Getränk im Mario Galaxy 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>
</div>
</div>
<div id="cat-getraenke" class="snack-category hidden">
<div id="cat-getraenke" class="snack-category active">
<div class="snack-grid">
<div class="snack-card">
@@ -622,11 +392,6 @@
</div> </div>
<div id="cat-popcorn" class="snack-category hidden">
<div class="snack-subsection">
<div class="snack-section-heading">
<span>Frisch gepoppt</span>
<h2>Einzelprodukte</h2>
</div>
<div class="snack-grid">
<div class="snack-card">
<div class="snack-img"><img src="img/popcorn-klein.png" alt="Popcorn klein"></div>
@@ -637,7 +402,7 @@
<button class="opt-btn">Salzig</button>
</div>
<div class="size-selector">
<button class="size-chip">Klein <span>3,50€</span></button>
<button class="size-chip">3,50€</button>
</div>
</div>
</div>
@@ -650,7 +415,7 @@
<button class="opt-btn">Salzig</button>
</div>
<div class="size-selector">
<button class="size-chip">Mittel <span>4,50€</span></button>
<button class="size-chip">4,50€</button>
</div>
</div>
</div>
@@ -663,59 +428,91 @@
<button class="opt-btn">Salzig</button>
</div>
<div class="size-selector">
<button class="size-chip">Groß <span>6,00€</span></button>
<button class="size-chip">6,00€</button>
</div>
</div>
</div>
</div>
</div>
<div class="snack-subsection">
<div class="snack-section-heading popcorn-combo-heading">
<span>Für Filmabende</span>
<h2>Kombi Menü</h2>
</div>
<div class="snack-grid">
<div class="snack-card highlight">
<div class="snack-img"><img src="img/popcornkombiklein.png" alt="Popcorn klein - Kombi-Menü"></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>Kleines Menü</h3>
<p class="snack-card-note">0,33L Getränk + Popcorn klein</p>
<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">Menü-Preis <span>5,00€</span></button>
<button class="size-chip">12,00€</button>
</div>
</div>
</div>
<div class="snack-card highlight">
<div class="snack-img"><img src="img/popcornkombimittel.png" alt="Popcorn mittel - Kombi-Menü"></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>Mittleres Menü</h3>
<p class="snack-card-note">0,5L Getränk + Popcorn mittel</p>
<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">Menü-Preis <span>6,50€</span></button>
<button class="size-chip">29,00€</button>
</div>
</div>
</div>
<div class="snack-card highlight">
<div class="snack-img"><img src="img/popcornkombigross.png" alt="Popcorn groß - Kombi-Menü"></div>
<div class="snack-card">
<div class="snack-img"><img src="img/astronautpopcorn.jpg" alt="Popcorn limited - Der Austronaut"></div>
<div class="snack-info">
<span class="badge">Bestseller</span>
<h3>Großes Menü</h3>
<p class="snack-card-note">1L Getränk + Popcorn groß</p>
<div class="size-selector">
<button class="size-chip">Menü-Preis <span>8,00€</span></button>
<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-subsection">
<div class="snack-section-heading">
<span>Nachos</span>
<h2>Einzelprodukte</h2>
</div>
<div class="snack-grid">
<div class="snack-card">
<div class="snack-img"><img src="img/nachosnormal.png" alt="Nachos"></div>
@@ -757,15 +554,12 @@
</div>
</div>
</div>
</div>
</div>
<div class="snack-subsection">
<div class="snack-section-heading">
<span>Extra dazu</span>
<h2>Dips</h2>
</div>
<div class="snack-grid">
<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">
@@ -803,20 +597,16 @@
</div>
</div>
</div>
<h2 class="list-title">Nacho Kombi-Menüs</h2>
<br>
<br>
</div>
</div>
<div class="snack-subsection">
<div class="snack-section-heading">
<span>Alles drin</span>
<h2>Kombi Menü</h2>
</div>
<div class="snack-grid">
<div class="snack-card highlight">
<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</h3>
<p class="snack-card-note">Nachos klein + 1 Dip + 1x 0,33L Getränk</p>
<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>
@@ -825,35 +615,6 @@
</div>
</div>
</div>
<div class="snack-card highlight">
<div class="snack-img"><img src="img/nachokombimittel.png" alt="Nacho Kombi Mittel"></div>
<div class="snack-info">
<h3>Nacho Menü Mittel</h3>
<p class="snack-card-note">Nachos mittel + 1 Dip + 1x 0,33L Getränk</p>
<div class="option-group">
<button class="opt-btn active">Mittel</button>
</div>
<div class="size-selector">
<button class="size-chip">Kombi <span>6,90€</span></button>
</div>
</div>
</div>
<div class="snack-card highlight">
<div class="snack-img"><img src="img/nachokombigross.png" alt="Nacho Kombi Groß"></div>
<div class="snack-info">
<h3>Nacho Menü Groß</h3>
<p class="snack-card-note">Nachos groß + 1 Dip + 1x 0,33L Getränk</p>
<div class="option-group">
<button class="opt-btn active">Groß</button>
</div>
<div class="size-selector">
<button class="size-chip">Kombi <span>6,90€</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="cat-snacks" class="snack-category hidden">
<div class="snack-grid">
<div class="snack-card">
@@ -886,6 +647,75 @@
</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>
@@ -905,8 +735,8 @@
<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.png" alt="D-Box" class="tech-badge">
<img src="img/Dolby.png" alt="Dolby" class="tech-badge">
<img src="img/dbox.jpg" alt="D-Box" class="tech-badge">
</div>
</div>
</div>
@@ -1118,11 +948,11 @@
</div>
</div>
<script src="account.js"></script>
<script src="cart.js"></script>
<script src="booking.js"></script>
<script src="checkout.js"></script>
<script src="main.js"></script>
<script src="src/main.js"></script>
<script src="src/cart.js"></script>
<script src="src/booking.js"></script>
<script src="src/checkout.js"></script>
<script type="module" src="dist/account.js"></script>
</body>
</html>

3093
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

25
package.json Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "p1---kino",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"build": "tsc",
"watch": "tsc --watch",
"serve": "serve .",
"run": "npm-run-all --parallel watch serve"
},
"repository": {
"type": "git",
"url": "ssh://git@gitea.starfour.de:2222/Aaron/Kino-Website.git"
},
"keywords": [],
"author": "Aaron und Jannis",
"license": "ISC",
"type": "commonjs",
"devDependencies": {
"npm-run-all": "^4.1.5",
"serve": "^14.2.6",
"typescript": "^6.0.3"
}
}

83
account.js → src/account.ts
View File

@@ -1,4 +1,6 @@
function readStorageJson(key, fallbackValue) {
import type { User } from "./interfaces";
function readStorageJson(key: string, fallbackValue: any) {
const raw = localStorage.getItem(key);
if (!raw || raw === "undefined" || raw === "null") {
@@ -13,22 +15,18 @@
}
}
function normalizeUser(user) {
if (!user || typeof user !== "object") {
return null;
}
function normalizeUser(user: User): User {
return {
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 : []
};
}
function escapeHtml(value) {
function escapeHtml(value: string) {
return String(value || "")
.replaceAll("&", "&amp;")
.replaceAll("<", "&lt;")
@@ -37,7 +35,7 @@ function escapeHtml(value) {
.replaceAll("'", "&#39;");
}
function formatEuro(value) {
function formatEuro(value: string) {
return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
}
@@ -53,15 +51,21 @@ function persistCurrentUser() {
}
}
let users = readStorageJson("eagleUsers", []);
export let users = readStorageJson("eagleUsers", []);
if (!Array.isArray(users)) {
users = [];
}
users = users.map(normalizeUser).filter(Boolean);
let currentUser = normalizeUser(readStorageJson("currentUser", null));
const rawCurrentUser = readStorageJson("currentUser", null);
export var currentUser: User | null = rawCurrentUser ? normalizeUser(rawCurrentUser) : null;
if (currentUser && currentUser.email) {
const storedMatch = users.find((user) => user.email === currentUser.email);
const currentEmail = currentUser.email;
const storedMatch = users.find((user: { email: string; }) => {
return user.email === currentEmail;
});
if (storedMatch) {
currentUser = storedMatch;
} else {
@@ -70,11 +74,23 @@ if (currentUser && currentUser.email) {
}
}
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 || "";
async function hashMessage(message: string) {
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
}
function getInputValue(id: string): string {
const el = document.getElementById(id) as HTMLInputElement | null;
return el?.value.trim() ?? "";
}
export async function registerUser() {
const firstName = getInputValue("reg-firstname");
const lastName = getInputValue("reg-lastname");
const email = getInputValue("reg-email").toLowerCase();
const password = document.querySelector<HTMLInputElement>("#reg-password")?.value ?? "";
if (!firstName || !lastName || !email || !password) {
alert("Bitte fuelle alle Felder aus.");
@@ -86,17 +102,19 @@ function registerUser() {
return;
}
const existingUser = users.find((user) => user.email.toLowerCase() === email);
const existingUser = users.find((user: User) => user.email.toLowerCase() === email);
if (existingUser) {
alert("E-Mail bereits registriert");
return;
}
const hashedPassword = await hashMessage(password);
const newUser = {
firstName,
lastName,
email,
password,
hashedPassword,
orders: [],
paymentMethods: []
};
@@ -113,12 +131,13 @@ function registerUser() {
openAccountDashboard();
}
function loginUser() {
const email = (document.getElementById("login-email")?.value.trim() || "").toLowerCase();
const password = document.getElementById("login-password")?.value || "";
export async function loginUser() {
const email = (document.querySelector<HTMLInputElement>("#login-email")?.value.trim() || "").toLowerCase();
const password = document.querySelector<HTMLInputElement>("#login-password")?.value || "";
const hashedPassword = await hashMessage(password);
const user = users.find(
(entry) => entry.email.toLowerCase() === email && entry.password === password
(entry: User) => entry.email.toLowerCase() === email && entry.hashedPassword === hashedPassword
);
if (!user) {
@@ -131,7 +150,7 @@ function loginUser() {
openAccountDashboard();
}
function openAccountDashboard() {
export function openAccountDashboard() {
const accountView = document.getElementById("account-view");
if (!accountView) {
return;
@@ -142,7 +161,7 @@ function openAccountDashboard() {
return;
}
accountView.innerHTML = `
accountView.innerHTML = /*html*/`
<div class="account-panel">
<div class="account-panel-header">
<h2>Mein Konto</h2>
@@ -198,7 +217,7 @@ function renderOrders() {
const orderHtml = orders
.map((order, index) => {
const movieItems = Array.isArray(order.items)
? order.items.filter((item) => item.category === "movie")
? order.items.filter((item: any) => item.category === "movie")
: [];
const previewItem = movieItems[0] || (Array.isArray(order.items) ? order.items[0] : null);
const previewTitle = previewItem?.title || "Bestellung";
@@ -227,20 +246,20 @@ function renderOrders() {
`;
const detailTarget = document.getElementById("order-ticket-details");
const orderButtons = Array.from(target.querySelectorAll(".order-item-btn"));
const orderButtons = Array.from(target.querySelectorAll<HTMLButtonElement>(".order-item-btn"));
const renderOrderTicket = (orderIndex) => {
const renderOrderTicket = (orderIndex: number) => {
const order = orders[orderIndex];
if (!order || !detailTarget) {
return;
}
const movieItems = Array.isArray(order.items)
? order.items.filter((item) => item.category === "movie")
? order.items.filter((item: any) => 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 seats = movieItems.map((item: any) => 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` : "-";
@@ -290,7 +309,7 @@ function renderPayments() {
return;
}
target.innerHTML = `
target.innerHTML = /*html*/`
<div class="account-card">
<h3>Zahlungsmethoden</h3>
<p class="account-payments-note">Platzhalter zum Hinterlegen deiner Logos oder Anbieter-Informationen.</p>
@@ -444,7 +463,7 @@ function renderPayments() {
}
function logoutUser() {
currentUser = null;
persistCurrentUser();
window.location.reload();
}

42
booking.js → src/booking.ts
View File

@@ -1,7 +1,11 @@
let currentBookingContext = null;
let currentHallLayout = null;
import { seatLayouts, occupiedSeatsData, prices, cart } from "./main"
import { renderCart, saveCart } from "./cart";
import { renderCheckout } from "./checkout";
function openBooking(movie, hall, time) {
let currentBookingContext: any = null;
let currentHallLayout: any = null;
export function openBooking(movie: string, hall: string, time: any) {
const titleEl = document.getElementById("modal-movie-title");
const infoEl = document.getElementById("modal-info-text");
@@ -22,11 +26,11 @@ function openBooking(movie, hall, time) {
document.getElementById("booking-modal")?.classList.remove("hidden");
}
function getRowLabel(rowIndex) {
function getRowLabel(rowIndex: number) {
return String(rowIndex + 1);
}
function buildHallLayout(hallName, baseConfig) {
function buildHallLayout(hallName: string, baseConfig:any) {
const rows = Number(baseConfig.rows || 0);
const totalCols = Number(baseConfig.left || 0) + Number(baseConfig.right || 0);
const isDeluxe = /deluxe/i.test(hallName);
@@ -39,7 +43,7 @@ function buildHallLayout(hallName, baseConfig) {
const vipRows = rows > 0 ? [rows] : [];
const dboxMap = new Set();
const markDboxRange = (rowNumber, startCol, width) => {
const markDboxRange = (rowNumber: number, startCol: number, width: number) => {
if (!rowNumber || width <= 0) {
return;
}
@@ -52,7 +56,7 @@ function buildHallLayout(hallName, baseConfig) {
if (isDeluxe) {
const configuredDboxSeats = Array.isArray(baseConfig.dbox)
? baseConfig.dbox.reduce((sum, section) => sum + Number(section.w || 0), 0)
? baseConfig.dbox.reduce((sum: number, section: any) => sum + Number(section.w || 0), 0)
: 0;
const totalDboxSeats = Math.max(4, configuredDboxSeats || 0);
@@ -77,7 +81,7 @@ function buildHallLayout(hallName, baseConfig) {
markDboxRange(rowNumber, startCol, seatsForRow);
});
} else if (Array.isArray(baseConfig.dbox)) {
baseConfig.dbox.forEach((section) => {
baseConfig.dbox.forEach((section: any) => {
const rowNumber = Number(section.r || 0);
const width = Number(section.w || 0);
const startCol = Number(section.c || 0);
@@ -96,7 +100,7 @@ function buildHallLayout(hallName, baseConfig) {
};
}
function getSeatType(layout, rowNumber, colNumber) {
function getSeatType(layout: any, rowNumber: number, colNumber: number) {
if (layout.dboxMap.has(`${rowNumber}-${colNumber}`)) {
return "dbox";
}
@@ -112,7 +116,7 @@ function getSeatType(layout, rowNumber, colNumber) {
return "normal";
}
function createSeatElement({ seatId, seatType, occupiedSeats }) {
function createSeatElement({seatId, seatType, occupiedSeats }:any) {
const seat = document.createElement("button");
seat.type = "button";
seat.classList.add("seat", seatType);
@@ -136,7 +140,7 @@ function createSeatElement({ seatId, seatType, occupiedSeats }) {
return seat;
}
function createSeats(hallName, time) {
function createSeats(hallName: string, time: any) {
const seatGrid = document.getElementById("seat-grid");
if (!seatGrid) {
return;
@@ -144,7 +148,8 @@ function createSeats(hallName, time) {
seatGrid.innerHTML = "";
const baseConfig = seatLayouts[hallName];
const arrIndex = hallName as keyof typeof seatLayouts;
const baseConfig: any = seatLayouts[arrIndex];
if (!baseConfig) {
currentHallLayout = null;
return;
@@ -235,7 +240,7 @@ function renderBookingLegend() {
}
function updateBookingSummary() {
const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected"));
const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected")) as HTMLElement[];;
const summaryPanel = document.getElementById("booking-summary");
const summaryItems = document.getElementById("summary-items");
const totalEl = document.getElementById("total-price");
@@ -245,7 +250,7 @@ function updateBookingSummary() {
if (summaryItems) {
summaryItems.innerHTML = selectedSeats
.map((seat) => {
const type = seat.dataset.type || "normal";
const type = (seat.dataset.type || "normal") as keyof typeof prices;
const seatPrice = Number(prices?.[type] ?? prices?.normal ?? 11);
total += seatPrice;
@@ -272,12 +277,13 @@ function updateBookingSummary() {
summaryPanel?.classList.toggle("hidden", selectedSeats.length === 0);
}
function findMoviePoster(movieTitle) {
function findMoviePoster(movieTitle: string) {
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();
const currentCard = card.querySelector("h2, h3") as HTMLElement;
const title = currentCard.innerText?.trim().toLowerCase();
if (title === normalizedTarget) {
const imageSrc = card.querySelector("img")?.src;
if (imageSrc) {
@@ -290,7 +296,7 @@ function findMoviePoster(movieTitle) {
}
function confirmSelectedSeats() {
const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected"));
const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected")) as HTMLElement[];
if (!currentBookingContext || selectedSeats.length === 0) {
alert("Bitte waehle mindestens einen Platz aus.");
@@ -304,7 +310,7 @@ function confirmSelectedSeats() {
const seatId = seat.dataset.seatId;
const seatType = seat.dataset.type || "normal";
const alreadyInCart = cart.some((item) =>
const alreadyInCart = cart.some((item: any) =>
item.category === "movie" &&
item.title === currentBookingContext.movie &&
item.hall === currentBookingContext.hall &&

46
cart.js → src/cart.ts
View File

@@ -1,8 +1,10 @@
function formatEuro(value) {
import { cart } from "./main";
function formatEuro(value: number) {
return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
}
function escapeHtml(value) {
function escapeHtml(value: any) {
return String(value || "")
.replaceAll("&", "&amp;")
.replaceAll("<", "&lt;")
@@ -11,14 +13,14 @@ function escapeHtml(value) {
.replaceAll("'", "&#39;");
}
function buildCartKey(item) {
function buildCartKey(item: { category: string; seatId: any; hall: any; time: any; title: any; }) {
const infoText = item.category === "movie"
? `Sitz: ${item.seatId} (${item.hall})`
: item.time;
return `${item.title}-${item.hall}-${infoText}`;
}
function isDrinkItem(item) {
function isDrinkItem(item: { category: string; title: any; hall: any; }) {
if (item.category !== "snack") {
return false;
}
@@ -39,7 +41,7 @@ function isDrinkItem(item) {
return drinkKeywords.some((word) => title.includes(word)) || size.includes("l");
}
function buildItemInfo(item) {
function buildItemInfo(item: { category: any; seatId?: any; hall: any; time?: any; title: any; }) {
if (item.category === "movie") {
return `
<div>Sitzplatz: ${escapeHtml(item.seatId || "-")}</div>
@@ -65,7 +67,7 @@ function buildItemInfo(item) {
function groupCartItems() {
const groups = new Map();
cart.forEach((item) => {
cart.forEach((item: { price?: any; category: string; seatId: any; hall: any; time: any; title: any; }) => {
const key = buildCartKey(item);
if (!groups.has(key)) {
@@ -85,12 +87,12 @@ function groupCartItems() {
return Array.from(groups.values());
}
function saveCart() {
export function saveCart() {
localStorage.setItem("eagleCart", JSON.stringify(cart));
updateCartBadge();
}
function updateCartBadge() {
export function updateCartBadge() {
const cartBadge = document.getElementById("cart-badge");
if (!cartBadge) {
@@ -101,7 +103,7 @@ function updateCartBadge() {
cartBadge.classList.toggle("hidden", cart.length === 0);
}
function renderCart() {
export function renderCart() {
const cartList = document.getElementById("cart-items-list");
const totalEl = document.getElementById("cart-total-right");
const vatEl = document.getElementById("cart-vat-right");
@@ -119,7 +121,7 @@ function renderCart() {
const groupedItems = groupCartItems();
const header = `
const header = /*html*/`
<div class="cart-header-row">
<div class="col-amount">MENGE</div>
<div class="col-img">VORSCHAU</div>
@@ -133,11 +135,11 @@ function renderCart() {
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>`;
? /*html*/`<img class="cart-img-small" src="${escapeHtml(group.item.img)}" alt="${escapeHtml(group.item.title)}">`
: /*html*/`<div class="cart-img-fallback">Kein Bild</div>`;
const quantityHtml = group.item.category === "movie"
? `<div class="qty-static" aria-label="Feste Ticketanzahl">${group.quantity}x</div>`
: `
? /*html*/`<div class="qty-static" aria-label="Feste Ticketanzahl">${group.quantity}x</div>`
: /*html*/`
<div class="qty-stepper">
<button class="btn-qty" data-action="minus" data-key="${escapeHtml(group.key)}">-</button>
<span>${group.quantity}</span>
@@ -145,7 +147,7 @@ function renderCart() {
</div>
`;
return `
return /*html*/`
<div class="cart-item-row">
<div class="col-amount">
${quantityHtml}
@@ -172,22 +174,23 @@ function renderCart() {
saveCart();
}
window.removeItem = function removeItem(id) {
cart = cart.filter((item) => item.id !== id);
//@ts-ignore
window.removeItem = function removeItem(id: any) {
var localCart = cart.filter((item: { id: any; }) => item.id !== id);
saveCart();
renderCart();
};
window.changeQty = function changeQty(title, delta) {
//@ts-ignore
window.changeQty = function changeQty(title, delta): void {
if (delta > 0) {
const item = cart.find((entry) => entry.title === title);
const item = cart.find((entry: { title: any; }) => entry.title === title);
if (item) {
cart.push({ ...item, id: Date.now() + Math.random() });
}
} else {
const index = cart
.map((entry) => entry.title)
.map((entry: { title: any; }) => entry.title)
.lastIndexOf(title);
if (index !== -1) {
cart.splice(index, 1);
@@ -197,3 +200,4 @@ window.changeQty = function changeQty(title, delta) {
saveCart();
renderCart();
};

22
checkout.js → src/checkout.ts
View File

@@ -1,11 +1,15 @@
function formatCheckoutEuro(value) {
import { currentUser, users } from "./account";
import { renderCart, saveCart } from "./cart";
import { cart, emptyCart, occupiedSeatsData } from "./main";
function formatCheckoutEuro(value: number) {
return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
}
let selectedPaymentMethod = "";
let checkoutEventsBound = false;
function setCheckoutStep(step) {
function setCheckoutStep(step: number) {
const step1 = document.getElementById("checkout-step-1");
const step2 = document.getElementById("checkout-step-2");
const step3 = document.getElementById("checkout-step-3");
@@ -27,7 +31,7 @@ function setCheckoutStep(step) {
line2?.classList.toggle("active", step >= 3);
}
function renderCheckout() {
export function renderCheckout() {
const summaryList = document.getElementById("checkout-summary-list");
const totalDisplay = document.getElementById("checkout-total-display");
const vatDisplay = document.getElementById("checkout-vat-display");
@@ -93,7 +97,7 @@ function generateTicket() {
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 = `
ticketContainer.innerHTML = /*html*/`
<div class="luxury-ticket">
<div class="ticket-left">
<img src="${mainMovie.img}" class="ticket-poster" alt="${mainMovie.title}">
@@ -115,7 +119,7 @@ function generateTicket() {
`;
}
function saveOrderForCurrentUser(orderItems, orderTotal) {
function saveOrderForCurrentUser(orderItems: any[], orderTotal: any) {
if (typeof currentUser === "undefined" || !currentUser) {
return;
}
@@ -131,6 +135,7 @@ function saveOrderForCurrentUser(orderItems, orderTotal) {
paymentMethod: selectedPaymentMethod || "-"
};
//@ts-ignore
const userIndex = users.findIndex((entry) => entry.email === currentUser.email);
if (userIndex === -1) {
return;
@@ -144,7 +149,7 @@ function saveOrderForCurrentUser(orderItems, orderTotal) {
localStorage.setItem("eagleUsers", JSON.stringify(users));
}
function reserveSeatsAfterPayment(orderItems) {
function reserveSeatsAfterPayment(orderItems: any[]) {
const movieItems = orderItems.filter((item) => item.category === "movie");
movieItems.forEach((item) => {
@@ -166,7 +171,7 @@ function completeCheckout() {
saveOrderForCurrentUser(orderItems, orderTotal);
reserveSeatsAfterPayment(orderItems);
cart = [];
emptyCart?.()
saveCart?.();
renderCart?.();
}
@@ -180,7 +185,7 @@ function bindCheckoutEvents() {
const nextButton = document.getElementById("btn-next-step-2");
const backButton = document.getElementById("btn-back-to-step1");
const payNowButton = document.getElementById("btn-pay-now");
const payNowButton = document.getElementById("btn-pay-now") as HTMLButtonElement;
document.querySelectorAll(".payment-method").forEach((method) => {
method.addEventListener("click", () => {
@@ -189,6 +194,7 @@ function bindCheckoutEvents() {
});
method.classList.add("selected");
//@ts-ignore
selectedPaymentMethod = method.dataset.method || "";
nextButton?.classList.remove("hidden");
});

8
src/interfaces.ts Normal file
View File

@@ -0,0 +1,8 @@
export interface User {
firstName: string;
lastName: string;
email: string;
hashedPassword: string;
orders: any[]; // TODO: figure out proper array type of orders. Probably smartest do create an Order interface which this would be an array of
paymentMethods: any[]; // TODO: figure out proper array type of paymentMethods. create paymentMethod interface and make this an array of it
}

186
main.js → src/main.ts
View File

@@ -1,13 +1,18 @@
// 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 = {
import { currentUser, loginUser, openAccountDashboard, registerUser } from "./account";
import { openBooking } from "./booking";
import { renderCart, saveCart, updateCartBadge } from "./cart";
import { renderCheckout } from "./checkout";
// Shared app state for legacy script files (account.js, booking.js, cart.js, checkout.js)
export const prices: Record<string, number> = { normal: 11.0, imax: 15.0, vip: 12.0, dbox: 16.0 };
export 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")) || {};
export var cart = JSON.parse(localStorage.getItem("eagleCart") || '{}');
export var occupiedSeatsData = JSON.parse(localStorage.getItem("eagleOccupied") || '{}');
document.addEventListener("DOMContentLoaded", () => {
const views = {
@@ -37,9 +42,7 @@ document.addEventListener("DOMContentLoaded", () => {
heroDots: document.getElementById("hero-dots"),
heroTitle: document.getElementById("hero-title"),
heroText: document.getElementById("hero-text"),
nowRunningShell: document.getElementById("now-running-shell"),
nowRunningRow: document.getElementById("now-running-row"),
nowRunningToggle: document.getElementById("now-running-toggle"),
movieProgramList: document.getElementById("movie-program-list"),
checkoutBtn: document.getElementById("btn-checkout-final"),
backHomeBtn: document.getElementById("btn-back-home"),
@@ -64,8 +67,8 @@ document.addEventListener("DOMContentLoaded", () => {
duration: 148,
fsk: "6",
description: "In Walt Disney Animation Studios’ \"Zoomania 2\" geraten die tierischen Detektive Judy Hopps und Nick Wilde auf die rätselhafte Spur eines geheimnisvollen Reptils, das in Zoomania auftaucht und die Metropole völlig auf den Kopf stellt: Gary De’Snake! ",
poster: "img/Zoomania-2.jpg",
backdrop: "img/Zoomania-2.jpg"
poster: "img/zoomania-2.jpg",
backdrop: "img/zoomania-2.jpg"
},
{
title: "Shelter",
@@ -223,11 +226,9 @@ document.addEventListener("DOMContentLoaded", () => {
{
title: "Cash Truck",
genre: "Action",
duration: 98,
duration: 118,
fsk: "16",
description: "Der verschlossene Einzelgänger „H” nimmt einen Job bei einer Geldtransporter-Firma an, die jede Woche hunderte von Millionen Dollar durch Los Angeles fährt. Gleich bei seinem ersten Einsatz wird der Geldtransport überfallen und zur Überraschung seiner Kollegen setzt H die Gangster im Alleingang außer Gefecht und wartet mit ungeahnten Präzisionsfähigkeiten auf. Doch H’s Absichten sind nicht zu durchschauen und kommen nur schrittweise ans Licht. Wer ist der geheimnisvolle Neuzugang und auf wen hat er es wirklich abgesehen?",
poster: "img/cashtruck.jpg",
backdrop: "img/cashtruck.jpg"
description: ""
},
{
title: "Die Gangster Gang",
@@ -330,10 +331,10 @@ document.addEventListener("DOMContentLoaded", () => {
["13:00", "16:00", "18:20", "20:40"]
];
let movieProgram = [];
let heroItems = [];
let movieProgram: any = []; // TODO: Find type
let heroItems: any = []; // TODO: find Type
let heroIndex = 0;
let heroTimer = null;
let heroTimer:any = null; // TODO: find type
const weekdayShort = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
@@ -352,7 +353,7 @@ document.addEventListener("DOMContentLoaded", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
const showMovieList = (programIndexToFocus = null) => {
const showMovieList = (programIndexToFocus:number = NaN) => {
hideAllViews();
views.list?.classList.remove("hidden");
@@ -369,7 +370,7 @@ document.addEventListener("DOMContentLoaded", () => {
}
};
const showStaticView = (viewElement) => {
const showStaticView = (viewElement: HTMLElement) => {
if (!viewElement) {
return;
}
@@ -398,52 +399,20 @@ document.addEventListener("DOMContentLoaded", () => {
ui.bookingModal?.classList.add("hidden");
};
const escapeHtml = (value) => String(value || "")
const escapeHtml = (value: string) => String(value || "")
.replaceAll("&", "&amp;")
.replaceAll("<", "&lt;")
.replaceAll(">", "&gt;")
.replaceAll('"', "&quot;")
.replaceAll("'", "&#39;");
const getMovieHalls = (movie) => {
const halls = new Set();
movie?.schedule?.forEach((day) => {
day.showings?.forEach((showing) => halls.add(showing.hall));
});
return Array.from(halls);
};
const getFskLogoPath = (movie) => {
if (movie?.fskLogo) {
return movie.fskLogo;
}
const fskValue = String(movie?.fsk || "").trim();
return fskValue && fskValue !== "?" ? `img/fsk-${fskValue}.png` : "";
};
const renderFskMetaLogo = (movie) => {
const fskValue = escapeHtml(movie.fsk || "?");
const logoPath = getFskLogoPath(movie);
const imageMarkup = logoPath
? `<img src="${escapeHtml(logoPath)}" alt="FSK ${fskValue}" onerror="this.parentElement.classList.add('missing-logo'); this.remove();">`
: "";
return `
<span class="fsk-meta-logo ${logoPath ? "has-logo" : "missing-logo"}" data-fsk="${fskValue}">
${imageMarkup}
<span>FSK ${fskValue}</span>
</span>
`;
};
const formatDateShort = (dateObj) => {
const formatDateShort = (dateObj: any) => {
const day = String(dateObj.getDate()).padStart(2, "0");
const month = String(dateObj.getMonth() + 1).padStart(2, "0");
return `${day}.${month}.`;
};
const buildDayMeta = (offset) => {
const buildDayMeta = (offset: number) => {
const date = new Date();
date.setHours(0, 0, 0, 0);
date.setDate(date.getDate() + offset);
@@ -477,14 +446,15 @@ document.addEventListener("DOMContentLoaded", () => {
};
};
const buildScheduleForMovie = (movieIndex) => {
const buildScheduleForMovie = (movieIndex: number) => {
return Array.from({ length: 7 }, (_, dayOffset) => {
const dayMeta = buildDayMeta(dayOffset);
const pattern = timePatterns[(movieIndex + dayOffset) % timePatterns.length];
const pattern = timePatterns[(movieIndex + dayOffset) % timePatterns.length] || "Error reading";
const desiredCount = 4 + ((movieIndex + dayOffset) % 2);
const showCount = Math.min(pattern.length, desiredCount);
const showings = pattern.slice(0, showCount).map((time, slotIndex) => {
//@ts-ignore
const showings = pattern.slice(0, showCount).map((time: any, slotIndex: number) => { // TODO: fix map issue
const hall = hallRotation[(movieIndex + dayOffset + slotIndex) % hallRotation.length];
return { time, hall };
});
@@ -504,7 +474,7 @@ document.addEventListener("DOMContentLoaded", () => {
heroItems = movieProgram.slice(0, 5);
};
const setHeroSlide = (index) => {
const setHeroSlide = (index: number) => {
if (!heroItems.length || !ui.heroSlider) {
return;
}
@@ -533,17 +503,18 @@ document.addEventListener("DOMContentLoaded", () => {
return;
}
ui.heroSlider.innerHTML = heroItems.map((movie, index) => `
ui.heroSlider.innerHTML = heroItems.map((movie: any, index: number) => `
<div class="hero-slide ${index === 0 ? "active" : ""}" style="background-image: linear-gradient(118deg, rgba(0,0,0,0.34), rgba(0,0,0,0.04)), url('${escapeHtml(movie.backdrop || movie.poster)}');"></div>
`).join("");
if (ui.heroDots) {
ui.heroDots.innerHTML = heroItems.map((_, index) => `
ui.heroDots.innerHTML = heroItems.map((_:any, index: number) => `
<button type="button" class="hero-dot ${index === 0 ? "active" : ""}" data-hero-index="${index}"></button>
`).join("");
ui.heroDots.addEventListener("click", (event) => {
const dot = event.target.closest(".hero-dot");
ui.heroDots.addEventListener("click", (event: any) => {
const dotTarget = event.target || 0;
const dot = dotTarget.closest(".hero-dot");
if (!dot) {
return;
}
@@ -574,7 +545,8 @@ document.addEventListener("DOMContentLoaded", () => {
return;
}
ui.nowRunningRow.innerHTML = movieProgram.map((movie, index) => `
// TODO: implement movie interface
ui.nowRunningRow.innerHTML = movieProgram.map((movie: any, index: number) => /*html*/`
<article class="running-poster">
<img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}">
<div class="running-meta">
@@ -584,15 +556,9 @@ document.addEventListener("DOMContentLoaded", () => {
</div>
</article>
`).join("");
if (ui.nowRunningShell && ui.nowRunningToggle) {
ui.nowRunningShell.classList.add("is-collapsed");
ui.nowRunningToggle.setAttribute("aria-expanded", "false");
ui.nowRunningToggle.setAttribute("aria-label", "Weitere Filme anzeigen");
}
};
const renderScheduleRows = (programIndex, dayIndex) => {
const renderScheduleRows = (programIndex: number, dayIndex: number) => {
const movie = movieProgram[programIndex];
if (!movie) {
return;
@@ -604,7 +570,7 @@ document.addEventListener("DOMContentLoaded", () => {
return;
}
body.innerHTML = day.showings.map((showing) => `
body.innerHTML = day.showings.map((showing: { hall: string; time: string; }) => /*html*/`
<button class="schedule-row time-chip program-time-row" data-movie="${escapeHtml(movie.title)}" data-hall="${escapeHtml(showing.hall)}" data-time="${escapeHtml(showing.time)}">
<span>${escapeHtml(day.long)}</span>
<span class="hall-pill">${escapeHtml(showing.hall)}</span>
@@ -618,30 +584,24 @@ document.addEventListener("DOMContentLoaded", () => {
return;
}
ui.movieProgramList.innerHTML = movieProgram.map((movie, programIndex) => {
const dayTabs = movie.schedule.map((day, dayIndex) => `
ui.movieProgramList.innerHTML = movieProgram.map((movie: { schedule: any[]; poster: string; title: string; fsk: string; duration: any; genre: string; description: string; }, programIndex: any) => {
const dayTabs = movie.schedule.map((day, dayIndex) => /*html*/`
<button type="button" class="program-day-tab ${dayIndex === 0 ? "active" : ""}" data-program-index="${programIndex}" data-day-index="${dayIndex}">
<span>${escapeHtml(day.short)}</span>
<small>${escapeHtml(formatDateShort(day.date))}</small>
</button>
`).join("");
const hallPills = getMovieHalls(movie).map((hall) => `
<span>${escapeHtml(hall)}</span>
`).join("");
return `
return /*html*/`
<article class="detailed-card program-card reveal-on-scroll" data-program-index="${programIndex}">
<div class="card-left">
<img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}">
<span class="fsk fsk-${escapeHtml(movie.fsk)}">${escapeHtml(movie.fsk)}</span>
</div>
<div class="card-right">
<div class="card-header">
<h2>${escapeHtml(movie.title)}</h2>
<span class="duration movie-meta-line">${movie.duration} Min. | ${escapeHtml(movie.genre)} | FSK: ${renderFskMetaLogo(movie)}</span>
</div>
<div class="program-halls-summary">
<strong>Kinosaal</strong>
<div>${hallPills}</div>
<span class="duration">${movie.duration} Min. | ${escapeHtml(movie.genre)} | FSK: ${escapeHtml(movie.fsk)}</span>
</div>
<p class="description">${escapeHtml(movie.description)}</p>
@@ -658,7 +618,7 @@ document.addEventListener("DOMContentLoaded", () => {
`;
}).join("");
movieProgram.forEach((_, programIndex) => {
movieProgram.forEach((_: any, programIndex: number) => {
renderScheduleRows(programIndex, 0);
});
};
@@ -706,12 +666,16 @@ document.addEventListener("DOMContentLoaded", () => {
ui.linkSnacks?.addEventListener("click", (event) => {
event.preventDefault();
if (views.snacks) {
showStaticView(views.snacks);
}
});
ui.linkAbout?.addEventListener("click", (event) => {
event.preventDefault();
if (views.about) {
showStaticView(views.about);
}
});
ui.linkCart?.addEventListener("click", (event) => {
@@ -736,28 +700,22 @@ document.addEventListener("DOMContentLoaded", () => {
showMovieList();
});
ui.nowRunningToggle?.addEventListener("click", () => {
const isCollapsed = ui.nowRunningShell?.classList.toggle("is-collapsed");
ui.nowRunningToggle.setAttribute("aria-expanded", String(!isCollapsed));
ui.nowRunningToggle.setAttribute("aria-label", isCollapsed ? "Weitere Filme anzeigen" : "Filme einklappen");
});
ui.checkoutBtn?.addEventListener("click", showCheckoutStart);
ui.backHomeBtn?.addEventListener("click", showHome);
};
const bindProgramActions = () => {
views.moviesGrid?.addEventListener("click", (event) => {
views.moviesGrid?.addEventListener("click", (event:any) => {
const trigger = event.target.closest(".open-program-btn");
if (!trigger) {
return;
}
const programIndex = Number(trigger.dataset.programIndex || 0);
const programIndex = Number(trigger.dataset.programIndex) || 0;
showMovieList(programIndex);
});
ui.movieProgramList?.addEventListener("click", (event) => {
ui.movieProgramList?.addEventListener("click", (event:any) => {
const dayButton = event.target.closest(".program-day-tab");
if (!dayButton) {
return;
@@ -767,7 +725,7 @@ document.addEventListener("DOMContentLoaded", () => {
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"));
tabRow?.querySelectorAll(".program-day-tab").forEach((tab: { classList: { remove: (arg0: string) => any; }; }) => tab.classList.remove("active"));
dayButton.classList.add("active");
renderScheduleRows(programIndex, dayIndex);
@@ -793,7 +751,7 @@ document.addEventListener("DOMContentLoaded", () => {
openButtons.forEach((button) => {
button.addEventListener("click", () => {
const targetId = button.getAttribute("data-home-view-open");
const targetId = button.getAttribute("data-home-view-open") as keyof typeof targetMap;
const target = targetId ? targetMap[targetId] : null;
if (target) {
showStaticView(target);
@@ -846,10 +804,11 @@ document.addEventListener("DOMContentLoaded", () => {
const THEME_KEY = "eagleTheme";
const applyTheme = (theme) => {
const applyTheme = (theme: any) => {
const isLight = theme === "light";
document.body.classList.toggle("theme-light", isLight);
document.body.classList.toggle("theme-dark", !isLight);
//@ts-ignore
ui.themeToggle.classList.toggle("is-light", isLight);
localStorage.setItem(THEME_KEY, isLight ? "light" : "dark");
};
@@ -866,14 +825,14 @@ document.addEventListener("DOMContentLoaded", () => {
const bindAccountActions = () => {
const registerModal = document.getElementById("register-modal");
const forgotModal = document.getElementById("forgot-modal");
const forgotEmailInput = document.getElementById("forgot-email");
const forgotEmailInput = document.getElementById("forgot-email") as HTMLInputElement;
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 openModal = (modal: HTMLElement | null) => modal?.classList.remove("hidden");
const closeModal = (modal: HTMLElement | null) => modal?.classList.add("hidden");
const triggerLogin = () => {
loginError?.classList.add("hidden");
if (typeof loginUser === "function") {
@@ -909,7 +868,7 @@ document.addEventListener("DOMContentLoaded", () => {
});
document.getElementById("btn-forgot-password")?.addEventListener("click", () => {
if (forgotEmailInput) {
if (forgotEmailInput != null) {
forgotEmailInput.value = "";
}
resetMessage?.classList.add("hidden");
@@ -954,10 +913,10 @@ document.addEventListener("DOMContentLoaded", () => {
};
const bindGlobalDocumentClicks = () => {
document.addEventListener("click", (event) => {
document.addEventListener("click", (event: any) => {
if (event.target.classList.contains("opt-btn")) {
const optionGroup = event.target.parentElement;
optionGroup?.querySelectorAll(".opt-btn").forEach((button) => button.classList.remove("active"));
optionGroup?.querySelectorAll(".opt-btn").forEach((button: { classList: { remove: (arg0: string) => any; }; }) => button.classList.remove("active"));
event.target.classList.add("active");
}
@@ -966,15 +925,17 @@ document.addEventListener("DOMContentLoaded", () => {
const row = deleteBtn.closest(".cart-item-row");
if (row) {
row.classList.add("slide-out-left");
row.querySelectorAll("button").forEach((button) => {
row.querySelectorAll("button").forEach((button: { disabled: boolean; }) => {
button.disabled = true;
});
setTimeout(() => {
removeFromCartByKey(deleteBtn.dataset.key);
//@ts-ignore
removeFromCartByKey(deleteBtn.dataset.key); //TODO: removeFromCartByKey doesnt exist
}, 380);
} else {
removeFromCartByKey(deleteBtn.dataset.key);
//@ts-ignore
removeFromCartByKey(deleteBtn.dataset.key); //TODO: removeFromCartByKey doesnt exist
}
return;
}
@@ -1003,7 +964,7 @@ document.addEventListener("DOMContentLoaded", () => {
return;
}
const relatedItem = cart.find((item) => {
const relatedItem = cart.find((item: { category: string; seatId: any; hall: any; time: any; title: any; }) => {
const infoText = item.category === "movie"
? `Sitz: ${item.seatId} (${item.hall})`
: item.time;
@@ -1017,7 +978,7 @@ document.addEventListener("DOMContentLoaded", () => {
if (action === "plus") {
cart.push({ ...relatedItem, id: Date.now() + Math.random() });
} else {
const keyList = cart.map((item) => {
const keyList = cart.map((item: { category: string; seatId: any; hall: any; time: any; title: any; }) => {
const infoText = item.category === "movie"
? `Sitz: ${item.seatId} (${item.hall})`
: item.time;
@@ -1036,7 +997,7 @@ document.addEventListener("DOMContentLoaded", () => {
};
const bindSnacksActions = () => {
ui.snacksView?.addEventListener("click", (event) => {
ui.snacksView?.addEventListener("click", (event:any) => {
const sizeChip = event.target.closest(".size-chip");
if (!sizeChip) {
return;
@@ -1080,7 +1041,7 @@ document.addEventListener("DOMContentLoaded", () => {
}, 800);
});
document.querySelectorAll(".tab-btn").forEach((button) => {
document.querySelectorAll(".tab-btn").forEach((button: any) => {
button.addEventListener("click", () => {
document.querySelectorAll(".tab-btn").forEach((tab) => tab.classList.remove("active"));
button.classList.add("active");
@@ -1117,9 +1078,9 @@ document.addEventListener("DOMContentLoaded", () => {
}
});
};
window.removeFromCartByKey = function removeFromCartByKey(key) {
cart = cart.filter((item) => {
// @ts-ignore
window.removeFromCartByKey = function removeFromCartByKey(key: string) {
cart = cart.filter((item: { category: string; seatId: any; hall: any; time: any; title: any; }) => {
const infoText = item.category === "movie"
? `Sitz: ${item.seatId} (${item.hall})`
: item.time;
@@ -1144,3 +1105,8 @@ document.addEventListener("DOMContentLoaded", () => {
updateCartBadge?.();
renderCheckout?.();
});
export function emptyCart() {
cart = []
return
}

985
style.css
View File

File diff suppressed because it is too large Load Diff

45
tsconfig.json Normal file
View File

@@ -0,0 +1,45 @@
{
// Visit https://aka.ms/tsconfig to read more about this file
"compilerOptions": {
// File Layout
"rootDir": "./src",
"outDir": "./dist",
// Environment Settings
// See also https://aka.ms/tsconfig/module
"module": "ES2020",
"target": "ES2021",
"types": [],
// For nodejs:
// "lib": ["esnext"],
// "types": ["node"],
// and npm install -D @types/node
// Other Outputs
"sourceMap": true,
"declaration": true,
"declarationMap": true,
// Stricter Typechecking Options
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
// Style Options
// "noImplicitReturns": true,
// "noImplicitOverride": true,
// "noUnusedLocals": true,
// "noUnusedParameters": true,
// "noFallthroughCasesInSwitch": true,
// "noPropertyAccessFromIndexSignature": true,
// Recommended Options
"strict": true,
"jsx": "react-jsx",
"verbatimModuleSyntax": true,
"isolatedModules": true,
"noUncheckedSideEffectImports": true,
"moduleDetection": "force",
"skipLibCheck": true,
},
"include": ["src/*"]
}