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

Compare commits

base: Aaron:master
Branches Tags
Aaron:master Aaron:dev_aaron Aaron:dev_jannis Jannis:dev_jannis Jannis:master
..
compare: Jannis:801dbcea97835c84cc0c65c6e43ca7dce1b1bada
Branches Tags
Jannis:dev_jannis Jannis:master Aaron:master Aaron:dev_aaron Aaron:dev_jannis

11 Commits
master ... 801dbcea97

Author SHA1 Message Date
Jannis Heydemann
801dbcea97 delete useless files started component building 2026-04-30 14:40:39 +02:00
Jannis Heydemann
7a07dd8c70 Merge branch 'master' into dev_jannis 2026-04-30 12:40:23 +02:00
Jannis Heydemann
d6905da5c5 added .claude to the gitignore 2026-04-30 12:31:58 +02:00
Jannis Heydemann
e72f8a4f1f Added assets, started actual work on making this a proper multi file webapp. gonna continue tonight 2026-04-30 12:30:54 +02:00
houston[bot]
23d5a75891 "Initial commit from Astro" 2026-04-30 08:39:10 +02:00
Jannis Heydemann
e143d8360a finished updates 2026-04-30 08:22:46 +02:00
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
113 changed files with 12157 additions and 1176 deletions
Expand all files Collapse all files

2
.env.example Normal file
View File

@@ -0,0 +1,2 @@
TMDB_API_TOKEN=yourapitoken
TMDB_API_KEY=yourapikey

4
.gitattributes vendored
View File

@@ -1,2 +1,2 @@
img/ filter=lfs diff=lfs merge=lfs -text public/img/* filter=lfs diff=lfs merge=lfs -text
img/** filter=lfs diff=lfs merge=lfs -text

25
.gitignore vendored Normal file
View File

@@ -0,0 +1,25 @@
# build output
dist/
# generated types
.astro/
# dependencies
node_modules/
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# environment variables
.env
.env.production
# macOS-specific files
.DS_Store
# jetbrains setting folder
.idea/
.claude/

4
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,4 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}

11
.vscode/launch.json vendored Normal file
View File

@@ -0,0 +1,11 @@
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}

43
README.md Normal file
View File

@@ -0,0 +1,43 @@
# Astro Starter Kit: Minimal
```sh
npm create astro@latest -- --template minimal
```
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```text
/
├── public/
├── src/
│ └── pages/
│ └── index.astro
└── package.json
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

23
astro.config.mjs Normal file
View File

@@ -0,0 +1,23 @@
// @ts-check
import { defineConfig, envField } from 'astro/config';
import react from '@astrojs/react';
import tailwindcss from '@tailwindcss/vite';
// https://astro.build/config
export default defineConfig({
integrations: [react({
include: ['**/react/*']
})],
vite: {
// @ts-ignore
plugins: [tailwindcss({optimize:false})]
},
env: {
schema: {
TMDB_API_TOKEN: envField.string({ context: 'server', access: 'secret'}),
TMDB_API_KEY: envField.string({context: "server", access: "secret"})
}
}
});

416
index.html
View File

@@ -267,208 +267,15 @@
<h1 class="list-title">Snacks & Getränke</h1> <h1 class="list-title">Snacks & Getränke</h1>
<div class="category-tabs"> <div class="category-tabs">
<button class="tab-btn active" data-target="cat-limited">Limitierte Specials</button> <button class="tab-btn active" data-target="cat-getraenke">Getränke</button>
<button class="tab-btn" data-target="cat-getraenke">Getränke</button>
<button class="tab-btn" data-target="cat-popcorn">Popcorn</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-nachos">Nachos</button>
<button class="tab-btn" data-target="cat-snacks">Snacks</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> <button class="tab-btn" data-target="cat-eis">Eis</button>
</div> </div>
<div id="cat-limited" class="snack-category active limited-specials-category"> <div id="cat-getraenke" class="snack-category active">
<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>City Edition</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 Collectors</h2>
</div>
</div>
<div class="limited-special-grid compact-specials">
<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">Dunkler Sammlerbecher passend zum Horrorabend.</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>
</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 compact-specials">
<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">Großer Sammlerbecher im Sci-Fi-Look für deine Mission ins Kino.</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>
</div>
<div class="limited-special-block">
<div class="special-film-heading">
<img src="img/hoppers.jpg" alt="Hoppers Logo">
<div>
<span>Hoppers</span>
<h2>Family Specials</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 Specials</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 class="snack-grid"> <div class="snack-grid">
<div class="snack-card"> <div class="snack-card">
@@ -585,11 +392,6 @@
</div> </div> </div> </div>
<div id="cat-popcorn" class="snack-category hidden"> <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-grid">
<div class="snack-card"> <div class="snack-card">
<div class="snack-img"><img src="img/popcorn-klein.png" alt="Popcorn klein"></div> <div class="snack-img"><img src="img/popcorn-klein.png" alt="Popcorn klein"></div>
@@ -600,7 +402,7 @@
<button class="opt-btn">Salzig</button> <button class="opt-btn">Salzig</button>
</div> </div>
<div class="size-selector"> <div class="size-selector">
<button class="size-chip">Klein <span>3,50€</span></button> <button class="size-chip">3,50€</button>
</div> </div>
</div> </div>
</div> </div>
@@ -613,7 +415,7 @@
<button class="opt-btn">Salzig</button> <button class="opt-btn">Salzig</button>
</div> </div>
<div class="size-selector"> <div class="size-selector">
<button class="size-chip">Mittel <span>4,50€</span></button> <button class="size-chip">4,50€</button>
</div> </div>
</div> </div>
</div> </div>
@@ -626,56 +428,91 @@
<button class="opt-btn">Salzig</button> <button class="opt-btn">Salzig</button>
</div> </div>
<div class="size-selector"> <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>
</div> <div class="snack-card">
</div> <div class="snack-img"><img src="img/zoomania-popcorn.jpg" alt="Popcorn limited - zoomania 2"></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-info"> <div class="snack-info">
<h3>Kleines Menü</h3> <h3>Limitierter Metallbecher - Zoomania 2</h3>
<p class="snack-card-note">0,33L Getränk + Popcorn klein</p> <div class="option-group">
<button class="opt-btn active">Süß</button>
<button class="opt-btn">Salzig</button>
</div>
<div class="size-selector"> <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>
</div> </div>
<div class="snack-card highlight"> <div class="snack-card">
<div class="snack-img"><img src="img/screamdoorpopcorn.jpg" alt="Popcorn limited - Scream VII"></div>
<div class="snack-info"> <div class="snack-info">
<h3>Mittleres Menü</h3> <h3>Limitierter Sammelbecher - Scream VII</h3>
<p class="snack-card-note">0,5L Getränk + Popcorn mittel</p> <div class="option-group">
<button class="opt-btn active">Süß</button>
<button class="opt-btn">Salzig</button>
</div>
<div class="size-selector"> <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>
</div> </div>
<div class="snack-card highlight"> <div class="snack-card">
<div class="snack-img"><img src="img/astronautpopcorn.jpg" alt="Popcorn limited - Der Austronaut"></div>
<div class="snack-info"> <div class="snack-info">
<span class="badge">Bestseller</span> <h3>Limitierter Sammelbecher - Der Austronaut</h3>
<h3>Großes Menü</h3> <div class="option-group">
<p class="snack-card-note">1L Getränk + Popcorn groß</p> <button class="opt-btn active">Süß</button>
<div class="size-selector"> <button class="opt-btn">Salzig</button>
<button class="size-chip">Menü-Preis <span>8,00€</span></button>
</div> </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>
</div> </div>
</div> </div>
<div id="cat-nachos" class="snack-category hidden"> <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-grid">
<div class="snack-card"> <div class="snack-card">
<div class="snack-img"><img src="img/nachosnormal.png" alt="Nachos"></div> <div class="snack-img"><img src="img/nachosnormal.png" alt="Nachos"></div>
@@ -717,15 +554,12 @@
</div> </div>
</div> </div>
</div> </div>
</div> <h2 class="list-title"> </h2>
</div> <br>
<h2 class="list-title">Dips</h2>
<div class="snack-subsection"> <br>
<div class="snack-section-heading"> <br>
<span>Extra dazu</span> <br>
<h2>Dips</h2>
</div>
<div class="snack-grid">
<div class="snack-card"> <div class="snack-card">
<div class="snack-img"><img src="img/käsedip.png" alt="Käse-Dip"></div> <div class="snack-img"><img src="img/käsedip.png" alt="Käse-Dip"></div>
<div class="snack-info"> <div class="snack-info">
@@ -763,20 +597,16 @@
</div> </div>
</div> </div>
</div> </div>
<h2 class="list-title">Nacho Kombi-Menüs</h2>
<br>
<br>
</div> </div>
</div> </div>
<div class="snack-subsection">
<div class="snack-section-heading">
<span>Alles drin</span>
<h2>Kombi Menü</h2>
</div> </div>
<div class="snack-grid"> <div class="snack-card">
<div class="snack-card highlight">
<div class="snack-img"><img src="img/nachokombiklein.png" alt="Nacho Kombi Klein"></div> <div class="snack-img"><img src="img/nachokombiklein.png" alt="Nacho Kombi Klein"></div>
<div class="snack-info"> <div class="snack-info">
<h3>Nacho Menü Klein</h3> <h3>Nacho Menü Klein - Nachos klein + 1 Dip + 1 0,33L Getränk</h3>
<p class="snack-card-note">Nachos klein + 1 Dip + 1x 0,33L Getränk</p>
<div class="option-group"> <div class="option-group">
<button class="opt-btn active">Klein</button> <button class="opt-btn active">Klein</button>
</div> </div>
@@ -785,9 +615,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
<div id="cat-snacks" class="snack-category hidden"> <div id="cat-snacks" class="snack-category hidden">
<div class="snack-grid"> <div class="snack-grid">
<div class="snack-card"> <div class="snack-card">
@@ -820,6 +647,75 @@
</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 id="cat-eis" class="snack-category hidden">
<div class="coming-soon-banner"> <div class="coming-soon-banner">
<h2>Eiscreme & Shakes</h2> <h2>Eiscreme & Shakes</h2>
@@ -839,8 +735,8 @@
<div class="header-sub-info"> <div class="header-sub-info">
<p id="modal-info-text">Saal • Zeit</p> <p id="modal-info-text">Saal • Zeit</p>
<div id="tech-badges" class="tech-badges-container hidden"> <div id="tech-badges" class="tech-badges-container hidden">
<img src="img/dolby.png" alt="Dolby" class="tech-badge"> <img src="img/Dolby.png" alt="Dolby" class="tech-badge">
<img src="img/dbox.png" alt="D-Box" class="tech-badge"> <img src="img/dbox.jpg" alt="D-Box" class="tech-badge">
</div> </div>
</div> </div>
</div> </div>
@@ -1052,11 +948,11 @@
</div> </div>
</div> </div>
<script src="account.js"></script> <script type="module" src="dist/main.js"></script>
<script src="cart.js"></script> <script type="module" src="dist/cart.js"></script>
<script src="booking.js"></script> <script type="module" src="dist/booking.js"></script>
<script src="checkout.js"></script> <script type="module" src="dist/checkout.js"></script>
<script src="main.js"></script> <script type="module" src="dist/account.js"></script>
</body> </body>
</html> </html>

6543
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

29
package.json Normal file
View File

@@ -0,0 +1,29 @@
{
"name": "kino-astro",
"type": "module",
"version": "0.0.1",
"engines": {
"node": ">=22.12.0"
},
"scripts": {
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/react": "^5.0.4",
"@tailwindcss/vite": "^4.2.4",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"astro": "^6.2.0",
"dotenv": "^17.4.2",
"react": "^19.2.5",
"react-dom": "^19.2.5",
"tailwindcss": "^4.2.4",
"vite": "^6.4.2"
},
"devDependencies": {
"@types/node": "^25.6.0"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 655 B

9
public/favicon.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 749 B

BIN
public/img/Apfelschorle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

BIN
public/img/Dolby.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
public/img/Schorle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

BIN
public/img/Zoomania-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

BIN
public/img/applepay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
public/img/astronautpopcorn.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
public/img/bladerunner2049.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 211 KiB

BIN
public/img/cola-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

BIN
public/img/cola-zero.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
public/img/cola.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
public/img/dbox.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
public/img/derAustronaut.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 878 KiB

BIN
public/img/fallguy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 203 KiB

BIN
public/img/fanta.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
public/img/fuze-tea.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
public/img/gangstergang.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 362 KiB

BIN
public/img/gangstergang2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
public/img/glennkill.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
public/img/goat.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

BIN
public/img/googlepay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/img/haribo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

BIN
public/img/homefront.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
public/img/hoppers.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
public/img/hopperskidsmenu.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
public/img/hopperspopcornmetall.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
public/img/hopperspopcornwood.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
public/img/klarna.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
public/img/käsedip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
public/img/mandalorian.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
public/img/mariogalaxy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/img/mariokidsmenu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 307 KiB

BIN
public/img/marioyoshipopcorn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
public/img/mastercard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 185 KiB

BIN
public/img/masteruniverse.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 910 KiB

BIN
public/img/meg.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 586 KiB

BIN
public/img/meg2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
public/img/menu-big.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
public/img/minionsmonsters.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
public/img/mms.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
public/img/monsterag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
public/img/monsteruni.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
public/img/mutiny.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
public/img/nachokombiklein.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

BIN
public/img/nachos.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

BIN
public/img/nachosnormal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
public/img/paypal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
public/img/popcorn-big.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
public/img/popcorn-klein.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
public/img/popcorn-mittel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
public/img/popcorn.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/img/riegel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 KiB

BIN
public/img/salsadip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
public/img/screamdoorpopcorn.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
public/img/screamvii.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 KiB

BIN
public/img/shelter.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 263 KiB

BIN
public/img/solomio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 211 KiB

BIN
public/img/sourdip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
public/img/spezi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
public/img/spidermannewday.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 KiB

BIN
public/img/sprite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
public/img/super-mario-galaxy-banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 185 KiB

BIN
public/img/toystory1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
public/img/toystory2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 643 KiB

BIN
public/img/toystory3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 481 KiB

BIN
public/img/toystory4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
public/img/toystory5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 530 KiB

BIN
public/img/visa.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
public/img/wasser.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
public/img/zoomania-popcorn.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 544 KiB

BIN
public/img/zoomaniakidsmenu.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 524 KiB

58
src/components/AboutView.astro Normal file
View File

@@ -0,0 +1,58 @@
<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>

45
src/components/AccountView.astro Normal file
View File

@@ -0,0 +1,45 @@
<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">&times;</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">&times;</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>

43
src/components/BookingModal.astro Normal file
View File

@@ -0,0 +1,43 @@
<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">&times;</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>

37
src/components/CartView.astro Normal file
View File

@@ -0,0 +1,37 @@
<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>

52
src/components/CheckoutView.astro Normal file
View File

@@ -0,0 +1,52 @@
<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;">&larr;</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>

33
src/components/CollectorsView.astro Normal file
View File

@@ -0,0 +1,33 @@
<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>

31
src/components/DboxView.astro Normal file
View File

@@ -0,0 +1,31 @@
<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>

29
src/components/HallsView.astro Normal file
View File

@@ -0,0 +1,29 @@
<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>

10
src/components/Hero.astro Normal file
View File

@@ -0,0 +1,10 @@
<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>

58
src/components/HomeSection.astro Normal file
View File

@@ -0,0 +1,58 @@
<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>

14
src/components/Movie.astro Normal file
View File

@@ -0,0 +1,14 @@
---
import { getTopMovies } from "../scripts/fetchMovies";
import type { MovieCatalog } from "../scripts/interfaces";
const movieProgram = await getTopMovies();
---
<div>
{
movieProgram.map((movie: MovieCatalog, programIndex: any) => {
{<div>{movie.genre}</div>}
})
}
</div>

16
src/components/MovieListView.astro Normal file
View File

@@ -0,0 +1,16 @@
---
import { getTopMovies } from "../scripts/fetchMovies"
import Movie from "./Movie.astro"
console.log(await getTopMovies())
---
<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 täglich ab 13:00 Uhr.</p>
<!-- Movie List. -->
<!-- <div id="movie-program-list" class="movie-program-list"></div> -->
<Movie />
</div>
</section>

22
src/components/Navbar.astro Normal file
View File

@@ -0,0 +1,22 @@
<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>

10
src/components/SnackPrompt.astro Normal file
View File

@@ -0,0 +1,10 @@
<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>

449
src/components/SnacksView.astro Normal file
View File

@@ -0,0 +1,449 @@
<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 Wood"></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 groß"></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">Dips</h2>
<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 (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>
<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>
</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>
<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 + 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>
<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 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 class="snack-card highlight">
<div class="snack-info">
<div class="snack-img"><img src="/img/zoomaniakidsmenu.jpg" alt="Zoomania 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 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 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>

25
src/components/TechModal.astro Normal file
View File

@@ -0,0 +1,25 @@
<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">&times;</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>

8
src/components/react/topbar.tsx Normal file
View File

@@ -0,0 +1,8 @@
export default function topbar() {
return (
<div className="navbar bg-[rgba(29, 29, 31, 0.75)]">
<div className="leftButtonArray">Hallo</div>
<div className="rightButtonArray"></div>
</div>
)
}

14
src/components/topbar.astro Normal file
View File

@@ -0,0 +1,14 @@
---
import "../../src/styles/global.css";
---
<div class="bg-[#1d1d1fbf] text-white p-5 flex gap-5 justify-between">
<div id="leftButtons" class="flex gap-2">
<div>hi</div>
<div>hi</div>
</div>
<div id="rightButtons" class="flex gap-2">
<div>hi</div>
<div>hi</div>
</div>
</div>

Some files were not shown because too many files have changed in this diff Show More