diff --git a/.webklar-preview.json b/.webklar-preview.json index 1b12f36..259f65b 100644 --- a/.webklar-preview.json +++ b/.webklar-preview.json @@ -2,6 +2,7 @@ "enabled": true, "type": "static", "branch": "main", - "displayName": "Webklar Preview Vorlage", - "subdomain": "webklar-preview-template" + "displayName": "Beyt Beytak Abu Ali", + "subdomain": "Beyt-Beytak-Abu-Ali", + "index": "www" } diff --git a/README.md b/README.md index 38ed6ce..30cde6f 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ -# webklar-preview-template +# Beyt Beytak Abu Ali -Vorlage fuer Kunden-Websites mit automatischer Preview unter `*.project.webklar.com`. +Kunden-Website mit automatischer Preview unter `*.project.webklar.com`. ## Preview aktivieren Dieses Repo enthaelt [`.webklar-preview.json`](.webklar-preview.json). Beim Push auf den konfigurierten Branch startet der Deploy: - URL: `https://project.webklar.com/webhook/gitea` -- Vorschau: `https://.project.webklar.com` +- Vorschau: `https://Beyt-Beytak-Abu-Ali.project.webklar.com` ## Konfiguration (`.webklar-preview.json`) @@ -18,40 +18,14 @@ Dieses Repo enthaelt [`.webklar-preview.json`](.webklar-preview.json). Beim Push | `branch` | Branch fuer Deploy, z. B. `main` | | `displayName` | Anzeigename im Kundenportal | | `subdomain` | Optional; Default = Repo-Name | +| `index` | Optional; Unterordner mit `index.html` als Webroot (z. B. `www`) — Default = Repo-Root | **Keine Passwoerter** in dieser Datei. -### Beispiel fuer statische Seite +### Dieses Projekt -```json -{ - "enabled": true, - "type": "static", - "branch": "main", - "displayName": "Friseur Mueller", - "subdomain": "friseur-mueller" -} -``` - -### Beispiel fuer Vite/React (Build) - -```json -{ - "enabled": true, - "type": "node_build", - "branch": "main", - "displayName": "Restaurant Demo", - "subdomain": "restaurant-demo" -} -``` - -## Neues Projekt aus dieser Vorlage - -1. In Gitea: **Use this template** / Repository aus Template erstellen -2. `displayName` und `subdomain` in `.webklar-preview.json` anpassen -3. Website-Inhalt ersetzen (`index.html` oder eigenes Frontend) -4. Push auf `main` – Webhook deployt automatisch -5. Im Admin-Portal (`project.webklar.com`) Kunde dem Projekt zuweisen +- **Typ:** `static` (reine HTML/CSS/JS-Seite, kein npm-Build) +- **Webroot:** [`www/`](www/) — Einstieg `www/index.html` ## Gitea-Webhook (einmalig pro Org/Repo) diff --git a/index.html b/index.html deleted file mode 100644 index 7ca53cc..0000000 --- a/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - Webklar Preview Vorlage - - - -
-

Webklar Preview Vorlage

-

Dieses Repository ist als Preview-Projekt konfiguriert.

-

Nach dem Push wird die Vorschau unter
- webklar-preview-template.project.webklar.com
- bereitgestellt (Login über project.webklar.com).

-

Passe .webklar-preview.json und diese Seite fuer dein Kundenprojekt an.

-
- - diff --git a/www/favicon.ico b/www/favicon.ico new file mode 100644 index 0000000..3b00308 Binary files /dev/null and b/www/favicon.ico differ diff --git a/www/fonts/CenturyOldStyleStd-Bold.woff2.woff2 b/www/fonts/CenturyOldStyleStd-Bold.woff2.woff2 new file mode 100644 index 0000000..5a00299 Binary files /dev/null and b/www/fonts/CenturyOldStyleStd-Bold.woff2.woff2 differ diff --git a/www/fonts/TTNorms-Bold.woff2.woff2 b/www/fonts/TTNorms-Bold.woff2.woff2 new file mode 100644 index 0000000..6db98fe Binary files /dev/null and b/www/fonts/TTNorms-Bold.woff2.woff2 differ diff --git a/www/fonts/TTNorms-BoldItalic.woff2.woff2 b/www/fonts/TTNorms-BoldItalic.woff2.woff2 new file mode 100644 index 0000000..2599e8b Binary files /dev/null and b/www/fonts/TTNorms-BoldItalic.woff2.woff2 differ diff --git a/www/fonts/TTNorms-Medium.woff2.woff2 b/www/fonts/TTNorms-Medium.woff2.woff2 new file mode 100644 index 0000000..3888e11 Binary files /dev/null and b/www/fonts/TTNorms-Medium.woff2.woff2 differ diff --git a/www/fonts/TTNorms-Regular.woff2.woff2 b/www/fonts/TTNorms-Regular.woff2.woff2 new file mode 100644 index 0000000..a228194 Binary files /dev/null and b/www/fonts/TTNorms-Regular.woff2.woff2 differ diff --git a/www/garten_breitformat_2x.jpg b/www/garten_breitformat_2x.jpg new file mode 100644 index 0000000..055e4c8 Binary files /dev/null and b/www/garten_breitformat_2x.jpg differ diff --git a/www/garten_breitformat_normal_verbessert.jpg b/www/garten_breitformat_normal_verbessert.jpg new file mode 100644 index 0000000..68e2948 Binary files /dev/null and b/www/garten_breitformat_normal_verbessert.jpg differ diff --git a/www/garten_hochskaliert_4k.jpg b/www/garten_hochskaliert_4k.jpg new file mode 100644 index 0000000..d243e13 Binary files /dev/null and b/www/garten_hochskaliert_4k.jpg differ diff --git a/www/images/apple-touch-icon.png b/www/images/apple-touch-icon.png new file mode 100644 index 0000000..b47caa3 Binary files /dev/null and b/www/images/apple-touch-icon.png differ diff --git a/www/images/assiette-pancakes.png b/www/images/assiette-pancakes.png new file mode 100644 index 0000000..9874ce8 Binary files /dev/null and b/www/images/assiette-pancakes.png differ diff --git a/www/images/assiette-poulet-beurre.png b/www/images/assiette-poulet-beurre.png new file mode 100644 index 0000000..04d8e8f Binary files /dev/null and b/www/images/assiette-poulet-beurre.png differ diff --git a/www/images/assiette-poulet-cari.png b/www/images/assiette-poulet-cari.png new file mode 100644 index 0000000..5dab937 Binary files /dev/null and b/www/images/assiette-poulet-cari.png differ diff --git a/www/images/assiette-poulet-pesto.png b/www/images/assiette-poulet-pesto.png new file mode 100644 index 0000000..729ad65 Binary files /dev/null and b/www/images/assiette-poulet-pesto.png differ diff --git a/www/images/assiette-poulet-zaatar.png b/www/images/assiette-poulet-zaatar.png new file mode 100644 index 0000000..660cce2 Binary files /dev/null and b/www/images/assiette-poulet-zaatar.png differ diff --git a/www/images/assiette-quinoa-falafel.png b/www/images/assiette-quinoa-falafel.png new file mode 100644 index 0000000..a5ddaa3 Binary files /dev/null and b/www/images/assiette-quinoa-falafel.png differ diff --git a/www/images/boite-a-lunch.png b/www/images/boite-a-lunch.png new file mode 100644 index 0000000..c8522cb Binary files /dev/null and b/www/images/boite-a-lunch.png differ diff --git a/www/images/boule-energie-matcha.png b/www/images/boule-energie-matcha.png new file mode 100644 index 0000000..0a14d87 Binary files /dev/null and b/www/images/boule-energie-matcha.png differ diff --git a/www/images/boule-energie.png b/www/images/boule-energie.png new file mode 100644 index 0000000..89c4ff3 Binary files /dev/null and b/www/images/boule-energie.png differ diff --git a/www/images/brownie.png b/www/images/brownie.png new file mode 100644 index 0000000..c2748ea Binary files /dev/null and b/www/images/brownie.png differ diff --git a/www/images/cafe-filtre.png b/www/images/cafe-filtre.png new file mode 100644 index 0000000..8d9d4da Binary files /dev/null and b/www/images/cafe-filtre.png differ diff --git a/www/images/cafelimo-orange.png b/www/images/cafelimo-orange.png new file mode 100644 index 0000000..136f954 Binary files /dev/null and b/www/images/cafelimo-orange.png differ diff --git a/www/images/cafelimo.png b/www/images/cafelimo.png new file mode 100644 index 0000000..9d2df83 Binary files /dev/null and b/www/images/cafelimo.png differ diff --git a/www/images/carlsberg.png b/www/images/carlsberg.png new file mode 100644 index 0000000..e302b1c Binary files /dev/null and b/www/images/carlsberg.png differ diff --git a/www/images/changua.png b/www/images/changua.png new file mode 100644 index 0000000..953da1a Binary files /dev/null and b/www/images/changua.png differ diff --git a/www/images/chocolat-chaud.png b/www/images/chocolat-chaud.png new file mode 100644 index 0000000..2b92041 Binary files /dev/null and b/www/images/chocolat-chaud.png differ diff --git a/www/images/colibri_logo.png b/www/images/colibri_logo.png new file mode 100644 index 0000000..9a4d0b5 Binary files /dev/null and b/www/images/colibri_logo.png differ diff --git a/www/images/creme-tomate-poivron.png b/www/images/creme-tomate-poivron.png new file mode 100644 index 0000000..c7c8a2d Binary files /dev/null and b/www/images/creme-tomate-poivron.png differ diff --git a/www/images/dejeuner-classique-1.png b/www/images/dejeuner-classique-1.png new file mode 100644 index 0000000..f0d37f1 Binary files /dev/null and b/www/images/dejeuner-classique-1.png differ diff --git a/www/images/dejeuner-classique-2.png b/www/images/dejeuner-classique-2.png new file mode 100644 index 0000000..7bce393 Binary files /dev/null and b/www/images/dejeuner-classique-2.png differ diff --git a/www/images/double-espresso.png b/www/images/double-espresso.png new file mode 100644 index 0000000..97ae57a Binary files /dev/null and b/www/images/double-espresso.png differ diff --git a/www/images/equipe-colibri.jpg b/www/images/equipe-colibri.jpg new file mode 100644 index 0000000..5ff0ec0 Binary files /dev/null and b/www/images/equipe-colibri.jpg differ diff --git a/www/images/falafel-4.png b/www/images/falafel-4.png new file mode 100644 index 0000000..15cd36c Binary files /dev/null and b/www/images/falafel-4.png differ diff --git a/www/images/favicon-192.png b/www/images/favicon-192.png new file mode 100644 index 0000000..401de8c Binary files /dev/null and b/www/images/favicon-192.png differ diff --git a/www/images/gerichte/abu-ali-salat.png b/www/images/gerichte/abu-ali-salat.png new file mode 100644 index 0000000..c9a4029 Binary files /dev/null and b/www/images/gerichte/abu-ali-salat.png differ diff --git a/www/images/gerichte/baba-ghanoush.png b/www/images/gerichte/baba-ghanoush.png new file mode 100644 index 0000000..778ca52 Binary files /dev/null and b/www/images/gerichte/baba-ghanoush.png differ diff --git a/www/images/gerichte/falafel-teller.png b/www/images/gerichte/falafel-teller.png new file mode 100644 index 0000000..431f3db Binary files /dev/null and b/www/images/gerichte/falafel-teller.png differ diff --git a/www/images/gerichte/fattoush.png b/www/images/gerichte/fattoush.png new file mode 100644 index 0000000..1a49654 Binary files /dev/null and b/www/images/gerichte/fattoush.png differ diff --git a/www/images/gerichte/hackfleisch-boerek.png b/www/images/gerichte/hackfleisch-boerek.png new file mode 100644 index 0000000..52c8301 Binary files /dev/null and b/www/images/gerichte/hackfleisch-boerek.png differ diff --git a/www/images/gerichte/hackfleisch-pide.png b/www/images/gerichte/hackfleisch-pide.png new file mode 100644 index 0000000..d39c885 Binary files /dev/null and b/www/images/gerichte/hackfleisch-pide.png differ diff --git a/www/images/gerichte/haehnchen-pide.png b/www/images/gerichte/haehnchen-pide.png new file mode 100644 index 0000000..d285fe9 Binary files /dev/null and b/www/images/gerichte/haehnchen-pide.png differ diff --git a/www/images/gerichte/haehnchenleber-pide.png b/www/images/gerichte/haehnchenleber-pide.png new file mode 100644 index 0000000..b938980 Binary files /dev/null and b/www/images/gerichte/haehnchenleber-pide.png differ diff --git a/www/images/gerichte/hummus.png b/www/images/gerichte/hummus.png new file mode 100644 index 0000000..a231642 Binary files /dev/null and b/www/images/gerichte/hummus.png differ diff --git a/www/images/gerichte/kaese-boerek.png b/www/images/gerichte/kaese-boerek.png new file mode 100644 index 0000000..b04bf31 Binary files /dev/null and b/www/images/gerichte/kaese-boerek.png differ diff --git a/www/images/gerichte/kaese-manaesch.png b/www/images/gerichte/kaese-manaesch.png new file mode 100644 index 0000000..a7cad19 Binary files /dev/null and b/www/images/gerichte/kaese-manaesch.png differ diff --git a/www/images/gerichte/kaesetasche.png b/www/images/gerichte/kaesetasche.png new file mode 100644 index 0000000..a7cad19 Binary files /dev/null and b/www/images/gerichte/kaesetasche.png differ diff --git a/www/images/gerichte/kibbe-frittiert.png b/www/images/gerichte/kibbe-frittiert.png new file mode 100644 index 0000000..8be9b87 Binary files /dev/null and b/www/images/gerichte/kibbe-frittiert.png differ diff --git a/www/images/gerichte/lahmacun.png b/www/images/gerichte/lahmacun.png new file mode 100644 index 0000000..55bc93f Binary files /dev/null and b/www/images/gerichte/lahmacun.png differ diff --git a/www/images/gerichte/linsensuppe.png b/www/images/gerichte/linsensuppe.png new file mode 100644 index 0000000..0930dd6 Binary files /dev/null and b/www/images/gerichte/linsensuppe.png differ diff --git a/www/images/gerichte/menue-broasted.png b/www/images/gerichte/menue-broasted.png new file mode 100644 index 0000000..8b75816 Binary files /dev/null and b/www/images/gerichte/menue-broasted.png differ diff --git a/www/images/gerichte/menue-crispy.png b/www/images/gerichte/menue-crispy.png new file mode 100644 index 0000000..df76a37 Binary files /dev/null and b/www/images/gerichte/menue-crispy.png differ diff --git a/www/images/gerichte/menue-faijta.png b/www/images/gerichte/menue-faijta.png new file mode 100644 index 0000000..ffbee95 Binary files /dev/null and b/www/images/gerichte/menue-faijta.png differ diff --git a/www/images/gerichte/menue-francisco.png b/www/images/gerichte/menue-francisco.png new file mode 100644 index 0000000..9f3b02e Binary files /dev/null and b/www/images/gerichte/menue-francisco.png differ diff --git a/www/images/gerichte/menue-haehnchenleber.png b/www/images/gerichte/menue-haehnchenleber.png new file mode 100644 index 0000000..b5b6ca9 Binary files /dev/null and b/www/images/gerichte/menue-haehnchenleber.png differ diff --git a/www/images/gerichte/menue-haehnchenspiess.png b/www/images/gerichte/menue-haehnchenspiess.png new file mode 100644 index 0000000..481b15a Binary files /dev/null and b/www/images/gerichte/menue-haehnchenspiess.png differ diff --git a/www/images/gerichte/menue-kebsi.png b/www/images/gerichte/menue-kebsi.png new file mode 100644 index 0000000..1a2e47b Binary files /dev/null and b/www/images/gerichte/menue-kebsi.png differ diff --git a/www/images/gerichte/menue-mendi-lamm.png b/www/images/gerichte/menue-mendi-lamm.png new file mode 100644 index 0000000..160c834 Binary files /dev/null and b/www/images/gerichte/menue-mendi-lamm.png differ diff --git a/www/images/gerichte/menue-mexicano.png b/www/images/gerichte/menue-mexicano.png new file mode 100644 index 0000000..4009022 Binary files /dev/null and b/www/images/gerichte/menue-mexicano.png differ diff --git a/www/images/gerichte/menue-nuggets.png b/www/images/gerichte/menue-nuggets.png new file mode 100644 index 0000000..bc5c0e2 Binary files /dev/null and b/www/images/gerichte/menue-nuggets.png differ diff --git a/www/images/gerichte/menue-philadelphia.png b/www/images/gerichte/menue-philadelphia.png new file mode 100644 index 0000000..267c1fe Binary files /dev/null and b/www/images/gerichte/menue-philadelphia.png differ diff --git a/www/images/gerichte/menue-shawarma.png b/www/images/gerichte/menue-shawarma.png new file mode 100644 index 0000000..0c8e5ef Binary files /dev/null and b/www/images/gerichte/menue-shawarma.png differ diff --git a/www/images/gerichte/mini-pide.png b/www/images/gerichte/mini-pide.png new file mode 100644 index 0000000..a7027f0 Binary files /dev/null and b/www/images/gerichte/mini-pide.png differ diff --git a/www/images/gerichte/paprika-manaesch.png b/www/images/gerichte/paprika-manaesch.png new file mode 100644 index 0000000..3d7595a Binary files /dev/null and b/www/images/gerichte/paprika-manaesch.png differ diff --git a/www/images/gerichte/pizza-abu-ali.png b/www/images/gerichte/pizza-abu-ali.png new file mode 100644 index 0000000..2b4c992 Binary files /dev/null and b/www/images/gerichte/pizza-abu-ali.png differ diff --git a/www/images/gerichte/pizza-champignon.png b/www/images/gerichte/pizza-champignon.png new file mode 100644 index 0000000..5c86969 Binary files /dev/null and b/www/images/gerichte/pizza-champignon.png differ diff --git a/www/images/gerichte/pizza-familie.png b/www/images/gerichte/pizza-familie.png new file mode 100644 index 0000000..ef63833 Binary files /dev/null and b/www/images/gerichte/pizza-familie.png differ diff --git a/www/images/gerichte/pizza-hackfleisch.png b/www/images/gerichte/pizza-hackfleisch.png new file mode 100644 index 0000000..5136fda Binary files /dev/null and b/www/images/gerichte/pizza-hackfleisch.png differ diff --git a/www/images/gerichte/pizza-margherita.png b/www/images/gerichte/pizza-margherita.png new file mode 100644 index 0000000..99576b4 Binary files /dev/null and b/www/images/gerichte/pizza-margherita.png differ diff --git a/www/images/gerichte/pizza-salami.png b/www/images/gerichte/pizza-salami.png new file mode 100644 index 0000000..08f5d69 Binary files /dev/null and b/www/images/gerichte/pizza-salami.png differ diff --git a/www/images/gerichte/pizza-sucuk.png b/www/images/gerichte/pizza-sucuk.png new file mode 100644 index 0000000..3a0d71e Binary files /dev/null and b/www/images/gerichte/pizza-sucuk.png differ diff --git a/www/images/gerichte/pizza-thunfisch.png b/www/images/gerichte/pizza-thunfisch.png new file mode 100644 index 0000000..cc1cefe Binary files /dev/null and b/www/images/gerichte/pizza-thunfisch.png differ diff --git a/www/images/gerichte/pizza-vegetariana.png b/www/images/gerichte/pizza-vegetariana.png new file mode 100644 index 0000000..08eb10f Binary files /dev/null and b/www/images/gerichte/pizza-vegetariana.png differ diff --git a/www/images/gerichte/salat-spezial.png b/www/images/gerichte/salat-spezial.png new file mode 100644 index 0000000..f6e6e0a Binary files /dev/null and b/www/images/gerichte/salat-spezial.png differ diff --git a/www/images/gerichte/sandwich-burger.png b/www/images/gerichte/sandwich-burger.png new file mode 100644 index 0000000..ac6f38d Binary files /dev/null and b/www/images/gerichte/sandwich-burger.png differ diff --git a/www/images/gerichte/sandwich-cheeseburger.png b/www/images/gerichte/sandwich-cheeseburger.png new file mode 100644 index 0000000..f6068ae Binary files /dev/null and b/www/images/gerichte/sandwich-cheeseburger.png differ diff --git a/www/images/gerichte/sandwich-chickencheeseburger.png b/www/images/gerichte/sandwich-chickencheeseburger.png new file mode 100644 index 0000000..e2d6b8a Binary files /dev/null and b/www/images/gerichte/sandwich-chickencheeseburger.png differ diff --git a/www/images/gerichte/sandwich-crispy.png b/www/images/gerichte/sandwich-crispy.png new file mode 100644 index 0000000..b0b8299 Binary files /dev/null and b/www/images/gerichte/sandwich-crispy.png differ diff --git a/www/images/gerichte/sandwich-faijta.png b/www/images/gerichte/sandwich-faijta.png new file mode 100644 index 0000000..ae71804 Binary files /dev/null and b/www/images/gerichte/sandwich-faijta.png differ diff --git a/www/images/gerichte/sandwich-falafel.png b/www/images/gerichte/sandwich-falafel.png new file mode 100644 index 0000000..450b0d4 Binary files /dev/null and b/www/images/gerichte/sandwich-falafel.png differ diff --git a/www/images/gerichte/sandwich-francisco.png b/www/images/gerichte/sandwich-francisco.png new file mode 100644 index 0000000..9f3b02e Binary files /dev/null and b/www/images/gerichte/sandwich-francisco.png differ diff --git a/www/images/gerichte/sandwich-haehnchenleber.png b/www/images/gerichte/sandwich-haehnchenleber.png new file mode 100644 index 0000000..b55a4e4 Binary files /dev/null and b/www/images/gerichte/sandwich-haehnchenleber.png differ diff --git a/www/images/gerichte/sandwich-haehnchenspiess.png b/www/images/gerichte/sandwich-haehnchenspiess.png new file mode 100644 index 0000000..82b26db Binary files /dev/null and b/www/images/gerichte/sandwich-haehnchenspiess.png differ diff --git a/www/images/gerichte/sandwich-kebab.png b/www/images/gerichte/sandwich-kebab.png new file mode 100644 index 0000000..32a469d Binary files /dev/null and b/www/images/gerichte/sandwich-kebab.png differ diff --git a/www/images/gerichte/sandwich-mexicano.png b/www/images/gerichte/sandwich-mexicano.png new file mode 100644 index 0000000..c045ec8 Binary files /dev/null and b/www/images/gerichte/sandwich-mexicano.png differ diff --git a/www/images/gerichte/sandwich-philadelphia.png b/www/images/gerichte/sandwich-philadelphia.png new file mode 100644 index 0000000..267c1fe Binary files /dev/null and b/www/images/gerichte/sandwich-philadelphia.png differ diff --git a/www/images/gerichte/sandwich-pommes.png b/www/images/gerichte/sandwich-pommes.png new file mode 100644 index 0000000..b672777 Binary files /dev/null and b/www/images/gerichte/sandwich-pommes.png differ diff --git a/www/images/gerichte/sandwich-shawarma.png b/www/images/gerichte/sandwich-shawarma.png new file mode 100644 index 0000000..7eea418 Binary files /dev/null and b/www/images/gerichte/sandwich-shawarma.png differ diff --git a/www/images/gerichte/sandwich-sucuk.png b/www/images/gerichte/sandwich-sucuk.png new file mode 100644 index 0000000..5e3fc13 Binary files /dev/null and b/www/images/gerichte/sandwich-sucuk.png differ diff --git a/www/images/gerichte/spinat-boerek.png b/www/images/gerichte/spinat-boerek.png new file mode 100644 index 0000000..dbe5bb8 Binary files /dev/null and b/www/images/gerichte/spinat-boerek.png differ diff --git a/www/images/gerichte/spinattasche.png b/www/images/gerichte/spinattasche.png new file mode 100644 index 0000000..0d20f86 Binary files /dev/null and b/www/images/gerichte/spinattasche.png differ diff --git a/www/images/gerichte/steak-manaesch.png b/www/images/gerichte/steak-manaesch.png new file mode 100644 index 0000000..25fb6f8 Binary files /dev/null and b/www/images/gerichte/steak-manaesch.png differ diff --git a/www/images/gerichte/sucuk-pide.png b/www/images/gerichte/sucuk-pide.png new file mode 100644 index 0000000..0073598 Binary files /dev/null and b/www/images/gerichte/sucuk-pide.png differ diff --git a/www/images/gerichte/taboulah.png b/www/images/gerichte/taboulah.png new file mode 100644 index 0000000..8306bb9 Binary files /dev/null and b/www/images/gerichte/taboulah.png differ diff --git a/www/images/gerichte/toshka.png b/www/images/gerichte/toshka.png new file mode 100644 index 0000000..c72945f Binary files /dev/null and b/www/images/gerichte/toshka.png differ diff --git a/www/images/gerichte/vorspeisen-teller.png b/www/images/gerichte/vorspeisen-teller.png new file mode 100644 index 0000000..f52b66f Binary files /dev/null and b/www/images/gerichte/vorspeisen-teller.png differ diff --git a/www/images/gerichte/weinblaetter.png b/www/images/gerichte/weinblaetter.png new file mode 100644 index 0000000..230cdf6 Binary files /dev/null and b/www/images/gerichte/weinblaetter.png differ diff --git a/www/images/gerichte/zaater-manaesch.png b/www/images/gerichte/zaater-manaesch.png new file mode 100644 index 0000000..b1d3588 Binary files /dev/null and b/www/images/gerichte/zaater-manaesch.png differ diff --git a/www/images/gldn-melon.png b/www/images/gldn-melon.png new file mode 100644 index 0000000..cb1635c Binary files /dev/null and b/www/images/gldn-melon.png differ diff --git a/www/images/gldn-pamplemousse.png b/www/images/gldn-pamplemousse.png new file mode 100644 index 0000000..784b592 Binary files /dev/null and b/www/images/gldn-pamplemousse.png differ diff --git a/www/images/hero-chocolat.jpg b/www/images/hero-chocolat.jpg new file mode 100644 index 0000000..93f6e64 Binary files /dev/null and b/www/images/hero-chocolat.jpg differ diff --git a/www/images/hero-pancakes.jpg b/www/images/hero-pancakes.jpg new file mode 100644 index 0000000..af62f3d Binary files /dev/null and b/www/images/hero-pancakes.jpg differ diff --git a/www/images/hero-salle-pro.png b/www/images/hero-salle-pro.png new file mode 100644 index 0000000..16f63e9 Binary files /dev/null and b/www/images/hero-salle-pro.png differ diff --git a/www/images/hollandaise.png b/www/images/hollandaise.png new file mode 100644 index 0000000..4021e17 Binary files /dev/null and b/www/images/hollandaise.png differ diff --git a/www/images/jus-de-pomme.png b/www/images/jus-de-pomme.png new file mode 100644 index 0000000..5f7bcc3 Binary files /dev/null and b/www/images/jus-de-pomme.png differ diff --git a/www/images/kronenbourg.png b/www/images/kronenbourg.png new file mode 100644 index 0000000..ec2da43 Binary files /dev/null and b/www/images/kronenbourg.png differ diff --git a/www/images/latte.png b/www/images/latte.png new file mode 100644 index 0000000..b75b1bf Binary files /dev/null and b/www/images/latte.png differ diff --git a/www/images/limonade.png b/www/images/limonade.png new file mode 100644 index 0000000..2ed845c Binary files /dev/null and b/www/images/limonade.png differ diff --git a/www/images/logo.png b/www/images/logo.png new file mode 100644 index 0000000..55f11da Binary files /dev/null and b/www/images/logo.png differ diff --git a/www/images/loop-morning-glory.png b/www/images/loop-morning-glory.png new file mode 100644 index 0000000..4412f0f Binary files /dev/null and b/www/images/loop-morning-glory.png differ diff --git a/www/images/mate-libre-gingembre.png b/www/images/mate-libre-gingembre.png new file mode 100644 index 0000000..384c8f9 Binary files /dev/null and b/www/images/mate-libre-gingembre.png differ diff --git a/www/images/mate-libre-original.png b/www/images/mate-libre-original.png new file mode 100644 index 0000000..fa0f856 Binary files /dev/null and b/www/images/mate-libre-original.png differ diff --git a/www/images/montellier.png b/www/images/montellier.png new file mode 100644 index 0000000..5a5a901 Binary files /dev/null and b/www/images/montellier.png differ diff --git a/www/images/muffin-aux-bleuets.png b/www/images/muffin-aux-bleuets.png new file mode 100644 index 0000000..fa253fe Binary files /dev/null and b/www/images/muffin-aux-bleuets.png differ diff --git a/www/images/parfait-au-yogourt-format-collation.png b/www/images/parfait-au-yogourt-format-collation.png new file mode 100644 index 0000000..c0fbe91 Binary files /dev/null and b/www/images/parfait-au-yogourt-format-collation.png differ diff --git a/www/images/patate-dejeuner.png b/www/images/patate-dejeuner.png new file mode 100644 index 0000000..0e94913 Binary files /dev/null and b/www/images/patate-dejeuner.png differ diff --git a/www/images/patate-douce-rotie.png b/www/images/patate-douce-rotie.png new file mode 100644 index 0000000..17a7355 Binary files /dev/null and b/www/images/patate-douce-rotie.png differ diff --git a/www/images/pide-fleisch.png b/www/images/pide-fleisch.png new file mode 100644 index 0000000..c72945f Binary files /dev/null and b/www/images/pide-fleisch.png differ diff --git a/www/images/pide-hackfleisch.png b/www/images/pide-hackfleisch.png new file mode 100644 index 0000000..d39c885 Binary files /dev/null and b/www/images/pide-hackfleisch.png differ diff --git a/www/images/pide-haehnchen-kaese.png b/www/images/pide-haehnchen-kaese.png new file mode 100644 index 0000000..d285fe9 Binary files /dev/null and b/www/images/pide-haehnchen-kaese.png differ diff --git a/www/images/pide-kaese.png b/www/images/pide-kaese.png new file mode 100644 index 0000000..a7cad19 Binary files /dev/null and b/www/images/pide-kaese.png differ diff --git a/www/images/pide-sucuk-kaese.png b/www/images/pide-sucuk-kaese.png new file mode 100644 index 0000000..0073598 Binary files /dev/null and b/www/images/pide-sucuk-kaese.png differ diff --git a/www/images/potage-courge.png b/www/images/potage-courge.png new file mode 100644 index 0000000..6d82587 Binary files /dev/null and b/www/images/potage-courge.png differ diff --git a/www/images/pouding-de-chia-format-collation.png b/www/images/pouding-de-chia-format-collation.png new file mode 100644 index 0000000..d86f08d Binary files /dev/null and b/www/images/pouding-de-chia-format-collation.png differ diff --git a/www/images/quiche.png b/www/images/quiche.png new file mode 100644 index 0000000..f4e1656 Binary files /dev/null and b/www/images/quiche.png differ diff --git a/www/images/rabaska-cidre.png b/www/images/rabaska-cidre.png new file mode 100644 index 0000000..2b87e89 Binary files /dev/null and b/www/images/rabaska-cidre.png differ diff --git a/www/images/rooibos.png b/www/images/rooibos.png new file mode 100644 index 0000000..56dae7a Binary files /dev/null and b/www/images/rooibos.png differ diff --git a/www/images/saison-libre.png b/www/images/saison-libre.png new file mode 100644 index 0000000..21bbe25 Binary files /dev/null and b/www/images/saison-libre.png differ diff --git a/www/images/salade-buffalo-bleu.png b/www/images/salade-buffalo-bleu.png new file mode 100644 index 0000000..f98966b Binary files /dev/null and b/www/images/salade-buffalo-bleu.png differ diff --git a/www/images/salade-cobb.png b/www/images/salade-cobb.png new file mode 100644 index 0000000..cafbb2b Binary files /dev/null and b/www/images/salade-cobb.png differ diff --git a/www/images/salade-de-chou.png b/www/images/salade-de-chou.png new file mode 100644 index 0000000..32a7070 Binary files /dev/null and b/www/images/salade-de-chou.png differ diff --git a/www/images/salade-falafel-chevre.png b/www/images/salade-falafel-chevre.png new file mode 100644 index 0000000..ab2823e Binary files /dev/null and b/www/images/salade-falafel-chevre.png differ diff --git a/www/images/salade-kale-cesar.png b/www/images/salade-kale-cesar.png new file mode 100644 index 0000000..66e273e Binary files /dev/null and b/www/images/salade-kale-cesar.png differ diff --git a/www/images/salade-nicoise.png b/www/images/salade-nicoise.png new file mode 100644 index 0000000..1f454d7 Binary files /dev/null and b/www/images/salade-nicoise.png differ diff --git a/www/images/salade-pomme-ranch.png b/www/images/salade-pomme-ranch.png new file mode 100644 index 0000000..f4c33c0 Binary files /dev/null and b/www/images/salade-pomme-ranch.png differ diff --git a/www/images/salade-teriyaki.png b/www/images/salade-teriyaki.png new file mode 100644 index 0000000..1277958 Binary files /dev/null and b/www/images/salade-teriyaki.png differ diff --git a/www/images/salade-tex-mex.png b/www/images/salade-tex-mex.png new file mode 100644 index 0000000..ca3297e Binary files /dev/null and b/www/images/salade-tex-mex.png differ diff --git a/www/images/sandwich-bacon.png b/www/images/sandwich-bacon.png new file mode 100644 index 0000000..9726dae Binary files /dev/null and b/www/images/sandwich-bacon.png differ diff --git a/www/images/sandwich-blt.png b/www/images/sandwich-blt.png new file mode 100644 index 0000000..937f749 Binary files /dev/null and b/www/images/sandwich-blt.png differ diff --git a/www/images/sandwich-ranch.png b/www/images/sandwich-ranch.png new file mode 100644 index 0000000..9d08ece Binary files /dev/null and b/www/images/sandwich-ranch.png differ diff --git a/www/images/sandwich-tofu.png b/www/images/sandwich-tofu.png new file mode 100644 index 0000000..761de3d Binary files /dev/null and b/www/images/sandwich-tofu.png differ diff --git a/www/images/sencha.png b/www/images/sencha.png new file mode 100644 index 0000000..585f505 Binary files /dev/null and b/www/images/sencha.png differ diff --git a/www/images/shakshuka.png b/www/images/shakshuka.png new file mode 100644 index 0000000..9a49286 Binary files /dev/null and b/www/images/shakshuka.png differ diff --git a/www/images/sleeman.png b/www/images/sleeman.png new file mode 100644 index 0000000..1d8636a Binary files /dev/null and b/www/images/sleeman.png differ diff --git a/www/images/smoothie-fraise-banane.png b/www/images/smoothie-fraise-banane.png new file mode 100644 index 0000000..45cc2fc Binary files /dev/null and b/www/images/smoothie-fraise-banane.png differ diff --git a/www/images/smoothie-framboise-bleuet.png b/www/images/smoothie-framboise-bleuet.png new file mode 100644 index 0000000..781c2e5 Binary files /dev/null and b/www/images/smoothie-framboise-bleuet.png differ diff --git a/www/images/smoothie-mangue-passion.png b/www/images/smoothie-mangue-passion.png new file mode 100644 index 0000000..208204c Binary files /dev/null and b/www/images/smoothie-mangue-passion.png differ diff --git a/www/images/speisekarte/Beyt-Beytak-Abu-Ali-Restaurant-menu-li7.jpg b/www/images/speisekarte/Beyt-Beytak-Abu-Ali-Restaurant-menu-li7.jpg new file mode 100644 index 0000000..8bab42f Binary files /dev/null and b/www/images/speisekarte/Beyt-Beytak-Abu-Ali-Restaurant-menu-li7.jpg differ diff --git a/www/images/speisekarte/Landshut-Beyt-Beytak-Abu-Ali-menu-es7.jpg b/www/images/speisekarte/Landshut-Beyt-Beytak-Abu-Ali-menu-es7.jpg new file mode 100644 index 0000000..3f2092b Binary files /dev/null and b/www/images/speisekarte/Landshut-Beyt-Beytak-Abu-Ali-menu-es7.jpg differ diff --git a/www/images/speisekarte/Restaurant-Beyt-Beytak-Abu-Ali-menu-cdn.jpg b/www/images/speisekarte/Restaurant-Beyt-Beytak-Abu-Ali-menu-cdn.jpg new file mode 100644 index 0000000..a40dc7d Binary files /dev/null and b/www/images/speisekarte/Restaurant-Beyt-Beytak-Abu-Ali-menu-cdn.jpg differ diff --git a/www/images/speisekarte/menu-Beyt-Beytak-Abu-Ali-Landshut-xzu.jpg b/www/images/speisekarte/menu-Beyt-Beytak-Abu-Ali-Landshut-xzu.jpg new file mode 100644 index 0000000..42a7826 Binary files /dev/null and b/www/images/speisekarte/menu-Beyt-Beytak-Abu-Ali-Landshut-xzu.jpg differ diff --git a/www/images/speisekarte/menu-Beyt-Beytak-Abu-Ali-Restaurant-o4l.jpg b/www/images/speisekarte/menu-Beyt-Beytak-Abu-Ali-Restaurant-o4l.jpg new file mode 100644 index 0000000..aaa6601 Binary files /dev/null and b/www/images/speisekarte/menu-Beyt-Beytak-Abu-Ali-Restaurant-o4l.jpg differ diff --git a/www/images/speisekarte/menu-Beyt-Beytak-Abu-Ali-od6.jpg b/www/images/speisekarte/menu-Beyt-Beytak-Abu-Ali-od6.jpg new file mode 100644 index 0000000..a4126c8 Binary files /dev/null and b/www/images/speisekarte/menu-Beyt-Beytak-Abu-Ali-od6.jpg differ diff --git a/www/images/the-chai.png b/www/images/the-chai.png new file mode 100644 index 0000000..488c3bf Binary files /dev/null and b/www/images/the-chai.png differ diff --git a/www/images/the-earl-grey.png b/www/images/the-earl-grey.png new file mode 100644 index 0000000..f2262e4 Binary files /dev/null and b/www/images/the-earl-grey.png differ diff --git a/www/images/tisane-menthe.png b/www/images/tisane-menthe.png new file mode 100644 index 0000000..1f8c7a3 Binary files /dev/null and b/www/images/tisane-menthe.png differ diff --git a/www/images/toast-avocat-oeuf.png b/www/images/toast-avocat-oeuf.png new file mode 100644 index 0000000..749297f Binary files /dev/null and b/www/images/toast-avocat-oeuf.png differ diff --git a/www/images/toast-avocat-tofu.png b/www/images/toast-avocat-tofu.png new file mode 100644 index 0000000..0858ae1 Binary files /dev/null and b/www/images/toast-avocat-tofu.png differ diff --git a/www/images/traiteur-service.jpg b/www/images/traiteur-service.jpg new file mode 100644 index 0000000..fd08ae7 Binary files /dev/null and b/www/images/traiteur-service.jpg differ diff --git a/www/images/wrap-cesar.png b/www/images/wrap-cesar.png new file mode 100644 index 0000000..2bc1660 Binary files /dev/null and b/www/images/wrap-cesar.png differ diff --git a/www/images/wrap-club.png b/www/images/wrap-club.png new file mode 100644 index 0000000..0efdc82 Binary files /dev/null and b/www/images/wrap-club.png differ diff --git a/www/images/wrap-falafel.png b/www/images/wrap-falafel.png new file mode 100644 index 0000000..e983f15 Binary files /dev/null and b/www/images/wrap-falafel.png differ diff --git a/www/images/wrap-oeufs.png b/www/images/wrap-oeufs.png new file mode 100644 index 0000000..7e59ab3 Binary files /dev/null and b/www/images/wrap-oeufs.png differ diff --git a/www/images/wrap-tex-mex.png b/www/images/wrap-tex-mex.png new file mode 100644 index 0000000..7fab0aa Binary files /dev/null and b/www/images/wrap-tex-mex.png differ diff --git a/www/images/wrap-thon.png b/www/images/wrap-thon.png new file mode 100644 index 0000000..a9cdf55 Binary files /dev/null and b/www/images/wrap-thon.png differ diff --git a/www/index.html b/www/index.html new file mode 100644 index 0000000..6cc59fd --- /dev/null +++ b/www/index.html @@ -0,0 +1,1418 @@ + + + + + + + BEYT BEYTAK — Arabische Küche in Landshut + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+ +
+
+ Frischer Döner vom Spieß bei Beyt Beytak Abu Ali +
+
+ GemĂĽtlicher Imbiss Beyt Beytak Abu Ali +
+
+ Frische Zutaten bei Beyt Beytak Abu Ali +
+
+
+ + + + + + +
+ + + +
+ +
+

BEYT BEYTAK

+

+ Ein Geschmack, der Tradition und Innovation vereint, mit Liebe zubereitet. +

+

+ Frische Aromen aus dem Herzen der arabischen KĂĽche, mit hausgemachter Note. +

+
+ Jetzt anrufen + Speisekarte ansehen +
+
+
+ + + + + +
+
+ Team vor Beyt Beytak Abu Ali +
+
+
+

+ BEYT BEYTAK +

+

+ Frische Aromen aus dem Herzen der arabischen Küche, mit hausgemachter Note — bei Abu Ali in Landshut. +

+ Kontakt & Anfahrt +
+
+ + +
+
+
+
+ Catering-Service +

Wir kĂĽmmern uns um
dein Event.

+

+ Meetings, Feiern, Firmenevents — wir bereiten frische, leckere Mahlzeiten für deine Gruppe zu. Lieferung oder Abholung möglich. +

+ +
+
+
+ +
+
+ Individuelles MenĂĽ +

Angepasst an Geschmack, Allergien und Budget

+
+
+
+
+ +
+
+ 10 bis 200 Personen +

Kleine Gruppen oder groĂźe Events

+
+
+
+
+ +
+
+ Lieferung oder Abholung +

Service fĂĽr deine Region

+
+
+
+ + Angebot anfragen +
+ +
+
+ Catering-Service Beyt Beytak Abu Ali +
+
+
+
+
+ + + +
+
+
+
+ Kontakt +

Schreib uns

+

BEYT BEYTAK — Arabische Küche mit Herz. Reservierung, Catering oder Fragen? Melde dich gerne.

+ +
+
+
+ +
+ +
+
+
+ +
+
+ Ă–ffnungszeiten +

Montag – Sonntag: 11:00 – 22:00 Uhr
Ruhetag: Mittwoch

+
+
+
+
+ +
+
+ Telefon +

0871 / 970 03 889

+
+
+
+
+ +
+
+ Website +

www.beyt-beytak.de

+
+
+
+
+ +
+
+ Instagram +

@beyt-beytak

+
+
+
+
+ +
+ + + + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ + + + + +
+ Jetzt anrufen +
+ + + + diff --git a/www/script.js b/www/script.js new file mode 100644 index 0000000..017af36 --- /dev/null +++ b/www/script.js @@ -0,0 +1,430 @@ +/* ============================================ + RESTAURANT COLIBRI — JavaScript + ============================================ */ + +document.addEventListener('DOMContentLoaded', () => { + + // ===== NAVIGATION — Scroll Effect ===== + const nav = document.getElementById('nav'); + + const handleNavScroll = () => { + if (window.scrollY > 50) { + nav.classList.add('nav--scrolled'); + } else { + nav.classList.remove('nav--scrolled'); + } + }; + + window.addEventListener('scroll', handleNavScroll, { passive: true }); + handleNavScroll(); + + // ===== HERO CAROUSEL ===== + const heroSlides = document.querySelectorAll('.hero__slide'); + const heroDots = document.querySelectorAll('.hero__dot'); + const heroPrev = document.getElementById('heroPrev'); + const heroNext = document.getElementById('heroNext'); + let currentSlide = 0; + let heroInterval = null; + + const goToSlide = (index) => { + heroSlides[currentSlide].classList.remove('active'); + heroDots[currentSlide].classList.remove('active'); + currentSlide = (index + heroSlides.length) % heroSlides.length; + heroSlides[currentSlide].classList.add('active'); + heroDots[currentSlide].classList.add('active'); + }; + + const startHeroAutoplay = () => { + heroInterval = setInterval(() => goToSlide(currentSlide + 1), 6000); + }; + + const resetHeroAutoplay = () => { + clearInterval(heroInterval); + startHeroAutoplay(); + }; + + if (heroSlides.length > 1) { + heroPrev.addEventListener('click', () => { + goToSlide(currentSlide - 1); + resetHeroAutoplay(); + }); + + heroNext.addEventListener('click', () => { + goToSlide(currentSlide + 1); + resetHeroAutoplay(); + }); + + heroDots.forEach(dot => { + dot.addEventListener('click', () => { + goToSlide(parseInt(dot.dataset.slide)); + resetHeroAutoplay(); + }); + }); + + startHeroAutoplay(); + + // Touch swipe support + const heroEl = document.querySelector('.hero'); + let touchStartX = 0; + let touchEndX = 0; + + heroEl.addEventListener('touchstart', (e) => { + touchStartX = e.changedTouches[0].screenX; + }, { passive: true }); + + heroEl.addEventListener('touchend', (e) => { + touchEndX = e.changedTouches[0].screenX; + const diff = touchStartX - touchEndX; + if (Math.abs(diff) > 50) { + if (diff > 0) { + goToSlide(currentSlide + 1); + } else { + goToSlide(currentSlide - 1); + } + resetHeroAutoplay(); + } + }, { passive: true }); + } + + // ===== MOBILE MENU ===== + const burger = document.getElementById('navBurger'); + const mobileMenu = document.getElementById('mobileMenu'); + const mobileLinks = document.querySelectorAll('.mobile-menu__link, .mobile-menu__cta'); + + if (burger && mobileMenu) { + burger.addEventListener('click', () => { + burger.classList.toggle('active'); + mobileMenu.classList.toggle('active'); + document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : ''; + }); + + mobileLinks.forEach(link => { + link.addEventListener('click', () => { + burger.classList.remove('active'); + mobileMenu.classList.remove('active'); + document.body.style.overflow = ''; + }); + }); + } + + // ===== MENU TABS (with ARIA) ===== + const tabs = document.querySelectorAll('.menu__tab'); + const contents = document.querySelectorAll('.menu__content'); + + // Set ARIA roles + const tabList = document.querySelector('.menu__tabs'); + if (tabList) tabList.setAttribute('role', 'tablist'); + + tabs.forEach((tab, i) => { + const target = tab.dataset.tab; + tab.setAttribute('role', 'tab'); + tab.setAttribute('aria-controls', `tab-${target}`); + tab.setAttribute('aria-selected', tab.classList.contains('active') ? 'true' : 'false'); + tab.id = `tab-btn-${target}`; + }); + + contents.forEach(content => { + content.setAttribute('role', 'tabpanel'); + const id = content.id.replace('tab-', ''); + content.setAttribute('aria-labelledby', `tab-btn-${id}`); + }); + + tabs.forEach(tab => { + tab.addEventListener('click', () => { + const target = tab.dataset.tab; + + // Update active tab + ARIA + tabs.forEach(t => { + t.classList.remove('active'); + t.setAttribute('aria-selected', 'false'); + }); + tab.classList.add('active'); + tab.setAttribute('aria-selected', 'true'); + + // Show target content + contents.forEach(content => { + content.classList.remove('active'); + content.classList.remove('scrolled-end'); + if (content.id === `tab-${target}`) { + content.classList.add('active'); + // Reset scroll position & check scroll indicator + const grid = content.querySelector('.menu__grid'); + if (grid) { + grid.scrollLeft = 0; + checkScrollEnd(content, grid); + } + } + }); + }); + }); + + // ===== SCROLL INDICATOR — fade gradient at end ===== + const checkScrollEnd = (contentEl, gridEl) => { + const atEnd = gridEl.scrollLeft + gridEl.clientWidth >= gridEl.scrollWidth - 10; + if (atEnd) { + contentEl.classList.add('scrolled-end'); + } else { + contentEl.classList.remove('scrolled-end'); + } + }; + + document.querySelectorAll('.menu__grid').forEach(grid => { + grid.addEventListener('scroll', () => { + const contentEl = grid.closest('.menu__content'); + if (contentEl) checkScrollEnd(contentEl, grid); + }, { passive: true }); + }); + + // Initial check for active tab + const activeContent = document.querySelector('.menu__content.active'); + if (activeContent) { + const activeGrid = activeContent.querySelector('.menu__grid'); + if (activeGrid) checkScrollEnd(activeContent, activeGrid); + } + + // ===== DIETARY FILTERS (multi-select) ===== + const filterBtns = document.querySelectorAll('.menu__filter'); + const filterReset = document.getElementById('filterReset'); + const allCards = document.querySelectorAll('.menu-card'); + + const applyFilters = () => { + // Gather all active filters + const activeFilters = []; + filterBtns.forEach(b => { + if (b.classList.contains('active')) activeFilters.push(b.dataset.filter); + }); + + // Show/hide reset button + if (filterReset) { + filterReset.classList.toggle('visible', activeFilters.length > 0); + } + + // No filters active = show everything + if (activeFilters.length === 0) { + allCards.forEach(card => card.classList.remove('filtered-out')); + } else { + allCards.forEach(card => { + const diet = (card.dataset.diet || '').split(' ').filter(Boolean); + const hasNuts = card.dataset.noix === 'true'; + + // Card must match ALL active filters (AND logic) + const pass = activeFilters.every(f => { + if (f === 'sg') return diet.includes('sg'); + if (f === 'v') return diet.includes('v') || diet.includes('vg'); + if (f === 'vg') return diet.includes('vg'); + if (f === 'noix') return !hasNuts; + return true; + }); + + card.classList.toggle('filtered-out', !pass); + }); + } + + // Empty-state per tab panel + document.querySelectorAll('.menu__content').forEach(panel => { + const grids = panel.querySelectorAll('.menu__grid'); + let allHidden = true; + grids.forEach(grid => { + if (grid.querySelectorAll('.menu-card:not(.filtered-out)').length > 0) allHidden = false; + }); + + let emptyMsg = panel.querySelector('.menu__empty-msg'); + if (allHidden && activeFilters.length > 0) { + if (!emptyMsg) { + emptyMsg = document.createElement('p'); + emptyMsg.className = 'menu__empty-msg visible'; + emptyMsg.textContent = 'Aucun item ne correspond à ces filtres dans cette catégorie.'; + panel.appendChild(emptyMsg); + } else { + emptyMsg.classList.add('visible'); + } + } else if (emptyMsg) { + emptyMsg.classList.remove('visible'); + } + }); + }; + + // Toggle individual filter chips + filterBtns.forEach(btn => { + btn.addEventListener('click', () => { + btn.classList.toggle('active'); + applyFilters(); + }); + }); + + // Reset all filters + if (filterReset) { + filterReset.addEventListener('click', () => { + filterBtns.forEach(b => b.classList.remove('active')); + applyFilters(); + }); + } + + // ===== SMOOTH SCROLL for anchor links ===== + document.querySelectorAll('a[href^="#"]').forEach(link => { + link.addEventListener('click', (e) => { + const targetId = link.getAttribute('href'); + if (targetId === '#') return; + + const target = document.querySelector(targetId); + if (target) { + e.preventDefault(); + const navHeight = window.innerWidth < 768 ? 64 : 80; + const top = target.getBoundingClientRect().top + window.scrollY - navHeight; + + window.scrollTo({ + top, + behavior: 'smooth' + }); + } + }); + }); + + // ===== SCROLL REVEAL ANIMATION ===== + const revealElements = document.querySelectorAll( + '.section__header, .menu-card, .value-card, ' + + '.traiteur__visual, .traiteur__content, ' + + '.contact__info, .contact__form, .traiteur__feature' + ); + + revealElements.forEach(el => { + el.classList.add('reveal'); + }); + + const revealOnScroll = () => { + const windowHeight = window.innerHeight; + + document.querySelectorAll('.reveal').forEach(el => { + const elementTop = el.getBoundingClientRect().top; + const revealPoint = windowHeight - 80; + + if (elementTop < revealPoint) { + el.classList.add('visible'); + } + }); + }; + + window.addEventListener('scroll', revealOnScroll, { passive: true }); + revealOnScroll(); // trigger on load + + // ===== ACTIVE NAV LINK on scroll ===== + const sections = document.querySelectorAll('section[id]'); + const navLinks = document.querySelectorAll('.nav__link'); + + const highlightNav = () => { + const scrollY = window.scrollY + 100; + + sections.forEach(section => { + const top = section.offsetTop - 100; + const height = section.offsetHeight; + const id = section.getAttribute('id'); + + if (scrollY >= top && scrollY < top + height) { + navLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href') === `#${id}`) { + link.classList.add('active'); + } + }); + } + }); + }; + + window.addEventListener('scroll', highlightNav, { passive: true }); + + // ===== CONTACT FORM — FormSubmit.co (AJAX) ===== + const contactForm = document.getElementById('contactForm'); + if (contactForm) { + const btn = contactForm.querySelector('button[type="submit"]'); + const btnOriginalText = btn.textContent; + + contactForm.addEventListener('submit', (e) => { + e.preventDefault(); + btn.textContent = 'Envoi en cours...'; + btn.disabled = true; + + const formData = new FormData(contactForm); + + fetch(contactForm.action, { + method: 'POST', + body: formData, + headers: { 'Accept': 'application/json' } + }) + .then(response => { + if (response.ok) { + // Success + contactForm.reset(); + btn.textContent = 'Message envoyé ✓'; + btn.style.background = 'var(--color-vert)'; + setTimeout(() => { + btn.textContent = btnOriginalText; + btn.disabled = false; + btn.style.background = ''; + }, 4000); + } else { + throw new Error('Erreur serveur'); + } + }) + .catch(() => { + btn.textContent = 'Erreur — Réessayer'; + btn.style.background = '#c0392b'; + btn.disabled = false; + setTimeout(() => { + btn.textContent = btnOriginalText; + btn.style.background = ''; + }, 4000); + }); + }); + } + + // ===== MOBILE STICKY CTA ===== + const mobileCta = document.getElementById('mobileCta'); + if (mobileCta) { + const heroSection = document.getElementById('hero'); + const footerEl = document.querySelector('.footer'); + + const toggleMobileCta = () => { + if (window.innerWidth > 768) { + mobileCta.classList.remove('visible'); + return; + } + + const heroBottom = heroSection ? heroSection.offsetTop + heroSection.offsetHeight : 600; + const footerTop = footerEl ? footerEl.offsetTop : Infinity; + const scrollBottom = window.scrollY + window.innerHeight; + + // Hide when a section CTA button is visible on screen + const sectionBtns = document.querySelectorAll('.menu__footer .btn, .contact__form .btn'); + let sectionCtaVisible = false; + sectionBtns.forEach(btn => { + const rect = btn.getBoundingClientRect(); + if (rect.top < window.innerHeight && rect.bottom > 0) { + sectionCtaVisible = true; + } + }); + + if (window.scrollY > heroBottom && scrollBottom < footerTop + 40 && !sectionCtaVisible) { + mobileCta.classList.add('visible'); + } else { + mobileCta.classList.remove('visible'); + } + }; + + window.addEventListener('scroll', toggleMobileCta, { passive: true }); + toggleMobileCta(); + } + + // ===== PARALLAX subtle on hero ===== + const heroContent = document.querySelector('.hero__content'); + + if (heroContent && window.innerWidth > 768) { + window.addEventListener('scroll', () => { + const scrollY = window.scrollY; + if (scrollY < window.innerHeight) { + heroContent.style.transform = `translateY(${scrollY * 0.15}px)`; + heroContent.style.opacity = 1 - (scrollY / (window.innerHeight * 0.8)); + } + }, { passive: true }); + } + +}); diff --git a/www/speisekarte/Beyt-Beytak-Abu-Ali-Restaurant-menu-li7.jpg b/www/speisekarte/Beyt-Beytak-Abu-Ali-Restaurant-menu-li7.jpg new file mode 100644 index 0000000..8bab42f Binary files /dev/null and b/www/speisekarte/Beyt-Beytak-Abu-Ali-Restaurant-menu-li7.jpg differ diff --git a/www/speisekarte/Landshut-Beyt-Beytak-Abu-Ali-menu-es7.jpg b/www/speisekarte/Landshut-Beyt-Beytak-Abu-Ali-menu-es7.jpg new file mode 100644 index 0000000..3f2092b Binary files /dev/null and b/www/speisekarte/Landshut-Beyt-Beytak-Abu-Ali-menu-es7.jpg differ diff --git a/www/speisekarte/Restaurant-Beyt-Beytak-Abu-Ali-menu-cdn.jpg b/www/speisekarte/Restaurant-Beyt-Beytak-Abu-Ali-menu-cdn.jpg new file mode 100644 index 0000000..a40dc7d Binary files /dev/null and b/www/speisekarte/Restaurant-Beyt-Beytak-Abu-Ali-menu-cdn.jpg differ diff --git a/www/speisekarte/menu-Beyt-Beytak-Abu-Ali-Landshut-xzu.jpg b/www/speisekarte/menu-Beyt-Beytak-Abu-Ali-Landshut-xzu.jpg new file mode 100644 index 0000000..42a7826 Binary files /dev/null and b/www/speisekarte/menu-Beyt-Beytak-Abu-Ali-Landshut-xzu.jpg differ diff --git a/www/speisekarte/menu-Beyt-Beytak-Abu-Ali-Restaurant-o4l.jpg b/www/speisekarte/menu-Beyt-Beytak-Abu-Ali-Restaurant-o4l.jpg new file mode 100644 index 0000000..aaa6601 Binary files /dev/null and b/www/speisekarte/menu-Beyt-Beytak-Abu-Ali-Restaurant-o4l.jpg differ diff --git a/www/speisekarte/menu-Beyt-Beytak-Abu-Ali-od6.jpg b/www/speisekarte/menu-Beyt-Beytak-Abu-Ali-od6.jpg new file mode 100644 index 0000000..a4126c8 Binary files /dev/null and b/www/speisekarte/menu-Beyt-Beytak-Abu-Ali-od6.jpg differ diff --git a/www/styles.css b/www/styles.css new file mode 100644 index 0000000..779c1cb --- /dev/null +++ b/www/styles.css @@ -0,0 +1,1847 @@ +/* ============================================ + RESTAURANT COLIBRI — Stylesheet + Cuisine verte et transparente + ============================================ */ + +/* === SELF-HOSTED BRAND FONTS === */ +@font-face { + font-family: 'TT Norms'; + src: url('fonts/TTNorms-Regular.woff2.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'TT Norms'; + src: url('fonts/TTNorms-Medium.woff2.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'TT Norms'; + src: url('fonts/TTNorms-Bold.woff2.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'TT Norms'; + src: url('fonts/TTNorms-BoldItalic.woff2.woff2') format('woff2'); + font-weight: 700; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Century Old Style'; + src: url('fonts/CenturyOldStyleStd-Bold.woff2.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* === DESIGN TOKENS (Brand Guideline) === */ +:root { + /* Primary */ + --color-vert: #FF8C00; + --color-cta: #E60000; + --color-red-soft: #FF6B6B; + --color-beige: #FFF8F0; + --color-white: #FFFFFF; + --color-black: #000000; + + /* Text */ + --color-heading: #FF8C00; + --color-body: #3a3a3a; + --color-muted: #777; + + /* Secondary */ + --color-abricot: #e98c45; + --color-aubergine: #a31e59; + --color-citron: #f6c33b; + --color-saumon: #f9b2a8; + --color-lichen: #75ac88; + --color-orange: #e85a25; + --color-mer: #779cb8; + --color-bleuet: #4e62a6; + + /* Typography */ + --font-primary: 'TT Norms', 'Inter', 'Helvetica Neue', Arial, sans-serif; + --font-secondary: 'Century Old Style', Georgia, serif; + + /* Spacing */ + --space-2xs: 4px; + --space-xs: 8px; + --space-s: 16px; + --space-m: 24px; + --space-l: 32px; + --space-xl: 48px; + --space-2xl: 64px; + --space-3xl: 96px; + --space-4xl: 128px; + + /* Radius */ + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 16px; + --radius-pill: 999px; + + /* Shadows */ + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); + --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); + --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12); + + /* Animation */ + --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1); + --ease-out: cubic-bezier(0, 0, 0.2, 1); + --duration-fast: 150ms; + --duration-normal: 250ms; + --duration-slow: 400ms; + + /* Layout */ + --container-max: 1280px; + --nav-height: 80px; + --nav-height-mobile: 64px; +} + +/* === RESET & BASE === */ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: geometricPrecision; +} + +body { + font-family: var(--font-primary); + font-size: 16px; + line-height: 1.6; + color: var(--color-body); + background: var(--color-beige); + overflow-x: hidden; +} + +img { + max-width: 100%; + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +ul, ol { list-style: none; } + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-primary); + font-weight: 700; + line-height: 1.15; + color: var(--color-heading); +} + +em { + font-family: var(--font-secondary); + font-style: normal; + font-weight: 400; +} + +/* === UTILITIES === */ +.container { + width: 100%; + max-width: var(--container-max); + margin: 0 auto; + padding: 0 var(--space-m); +} + +.section { + padding: var(--space-4xl) 0; +} + +/* === SECTION HEADERS === */ +.section__header { + text-align: center; + margin-bottom: var(--space-2xl); +} + +.section__tag { + display: inline-block; + font-size: 0.8rem; + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-vert); + background: rgba(255, 140, 0, 0.08); + padding: var(--space-xs) var(--space-s); + border-radius: var(--radius-pill); + margin-bottom: var(--space-s); +} + +.section__tag--light { + color: var(--color-white); + background: rgba(255, 255, 255, 0.15); +} + +.section__title { + font-size: clamp(2rem, 4vw, 3rem); + color: var(--color-heading); + margin-bottom: var(--space-s); +} + +.section__title em { + color: var(--color-vert); +} + +.section__desc { + font-size: 1.1rem; + color: #666; + max-width: 600px; + margin: 0 auto; + line-height: 1.7; +} + +/* === BUTTONS === */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-xs); + font-family: var(--font-primary); + font-size: 0.95rem; + font-weight: 600; + padding: 12px 28px; + border-radius: var(--radius-pill); + border: 2px solid transparent; + cursor: pointer; + transition: all var(--duration-normal) var(--ease-out); + white-space: nowrap; +} + +.btn--primary { + background: var(--color-cta); + color: var(--color-white); + border-color: var(--color-cta); +} + +.btn--primary:hover { + background: #CC0000; + border-color: #CC0000; + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.btn--outline { + background: transparent; + color: var(--color-vert); + border-color: var(--color-vert); +} + +.btn--outline:hover { + background: var(--color-vert); + color: var(--color-white); + transform: translateY(-2px); +} + +.btn--white { + background: var(--color-white); + color: var(--color-vert); + border-color: var(--color-white); +} + +.btn--white:hover { + background: var(--color-beige); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.btn--outline-light { + background: transparent; + color: var(--color-white); + border-color: rgba(255,255,255,0.4); +} + +.btn--outline-light:hover { + background: rgba(255,255,255,0.1); + border-color: var(--color-white); +} + +.btn--lg { + padding: 16px 36px; + font-size: 1rem; +} + +.btn--sm { + padding: 10px 20px; + font-size: 0.85rem; +} + +.btn--full { + width: 100%; +} + +/* === TAGS === */ +.tag { + display: inline-block; + font-size: 0.75rem; + font-weight: 600; + padding: 4px 10px; + border-radius: var(--radius-pill); +} + +.tag--green { + background: rgba(255, 140, 0, 0.15); + color: #CC7000; +} + +.tag--blue { + background: rgba(119, 156, 184, 0.15); + color: var(--color-bleuet); +} + +.tag--orange { + background: rgba(233, 140, 69, 0.15); + color: var(--color-orange); +} + +.tag--yellow { + background: rgba(180, 140, 20, 0.12); + color: #8a6d10; +} + +/* ============================================ + NAVIGATION — Centered logo layout + ============================================ */ +.nav { + position: fixed; + top: 0; + left: 0; + right: 0; + height: var(--nav-height); + z-index: 1000; + transition: all var(--duration-normal) var(--ease-out); +} + +.nav--scrolled { + background: rgba(238, 231, 220, 0.95); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + box-shadow: var(--shadow-sm); +} + +.nav--scrolled .nav__link { + color: var(--color-body); +} + +.nav--scrolled .nav__logo-img { + /* Au scroll : logo plus petit, vert naturel sur fond beige */ + height: 55px; + filter: none; + opacity: 1; + mix-blend-mode: multiply; +} + +.nav__container { + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; +} + +.nav__left, +.nav__right { + display: flex; + align-items: center; + gap: var(--space-l); + flex: 1; +} + +.nav__left { + justify-content: flex-start; +} + +.nav__right { + justify-content: flex-end; +} + +.nav__logo { + display: flex; + align-items: center; + z-index: 10; + padding: 0 var(--space-xl); +} + +.nav__logo-img { + height: 110px; + width: auto; + transition: all var(--duration-normal) var(--ease-default); + /* Par défaut (en haut) : logo blanc/pâle sur hero sombre */ + filter: brightness(0) invert(1); + opacity: 0.9; +} + +.nav__link { + font-size: 0.9rem; + font-weight: 500; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--color-white); + padding: var(--space-xs) 0; + position: relative; + transition: color var(--duration-fast); +} + +.nav__link::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 2px; + background: var(--color-white); + transition: width var(--duration-normal) var(--ease-out); +} + +.nav--scrolled .nav__link::after { + background: var(--color-vert); +} + +.nav__link:hover::after { + width: 100%; +} + +.nav__cta { + font-size: 0.85rem; + padding: 10px 24px; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +/* Burger */ +.nav__burger { + display: none; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 32px; + height: 32px; + background: none; + border: none; + cursor: pointer; + z-index: 10; +} + +.nav__burger span { + display: block; + width: 100%; + height: 2px; + background: var(--color-white); + border-radius: 2px; + transition: all var(--duration-normal) var(--ease-out); +} + +.nav--scrolled .nav__burger span { + background: var(--color-black); +} + +.nav__burger.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); +} +.nav__burger.active span:nth-child(2) { + opacity: 0; +} +.nav__burger.active span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); +} + +/* Mobile Menu */ +.mobile-menu { + position: fixed; + inset: 0; + background: var(--color-beige); + z-index: 999; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + pointer-events: none; + transition: opacity var(--duration-slow) var(--ease-out); +} + +.mobile-menu.active { + opacity: 1; + pointer-events: all; +} + +/* Hide nav logo when mobile menu is open */ +.mobile-menu.active ~ .nav .nav__logo, +body:has(.mobile-menu.active) .nav__logo { + opacity: 0; +} + +.mobile-menu__nav { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-l); +} + +.mobile-menu__logo { + height: 70px; + width: auto; + margin-bottom: var(--space-s); + mix-blend-mode: multiply; + opacity: 0; + transform: translateY(-15px); + transition: all 0.4s var(--ease-out); +} + +.mobile-menu.active .mobile-menu__logo { + opacity: 1; + transform: translateY(0); +} + +.mobile-menu__link { + font-size: 1.8rem; + font-weight: 700; + color: var(--color-heading); + transition: color var(--duration-fast); + /* Stagger animation */ + opacity: 0; + transform: translateY(20px); + transition: color var(--duration-fast), opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); +} + +.mobile-menu.active .mobile-menu__link { + opacity: 1; + transform: translateY(0); +} + +.mobile-menu.active .mobile-menu__link:nth-child(2) { transition-delay: 0.08s; } +.mobile-menu.active .mobile-menu__link:nth-child(3) { transition-delay: 0.16s; } +.mobile-menu.active .mobile-menu__link:nth-child(4) { transition-delay: 0.24s; } +.mobile-menu.active .mobile-menu__link:nth-child(5) { transition-delay: 0.32s; } + +.mobile-menu__link:hover { + color: var(--color-vert); +} + +.mobile-menu__cta { + margin-top: var(--space-m); + font-size: 1.1rem; + padding: 16px 40px; + /* Stagger animation */ + opacity: 0; + transform: translateY(20px); + transition: all 0.4s var(--ease-out); +} + +.mobile-menu.active .mobile-menu__cta { + opacity: 1; + transform: translateY(0); + transition-delay: 0.4s; +} + +/* ============================================ + HERO — Full-width photo background + ============================================ */ +.hero { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + background: var(--color-black); +} + + +/* Hero Slides */ +.hero__slides { + position: absolute; + inset: 0; + z-index: 0; +} + +.hero__slide { + position: absolute; + inset: 0; + opacity: 0; + transition: opacity 1.2s ease-in-out; +} + +.hero__slide.active { + opacity: 1; +} + +.hero__bg-img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + animation: kenBurns 18s ease-in-out infinite alternate; + transform: scale(1.02); +} + +@keyframes kenBurns { + 0% { transform: scale(1.02) translate(0, 0); } + 100% { transform: scale(1.1) translate(-1%, -0.5%); } +} + +.hero__overlay { + position: absolute; + inset: 0; + z-index: 1; + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0.35) 0%, + rgba(0, 0, 0, 0.2) 40%, + rgba(0, 0, 0, 0.5) 100% + ); +} + +/* Hero Arrows */ +.hero__arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 3; + width: 48px; + height: 48px; + border-radius: 50%; + border: 1.5px solid rgba(255,255,255,0.35); + background: rgba(0,0,0,0.15); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + color: var(--color-white); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all var(--duration-normal) var(--ease-out); +} + +.hero__arrow:hover { + background: rgba(255,255,255,0.15); + border-color: rgba(255,255,255,0.6); + transform: translateY(-50%) scale(1.08); +} + +.hero__arrow--prev { + left: var(--space-m); +} + +.hero__arrow--next { + right: var(--space-m); +} + +/* Hero Dots */ +.hero__dots { + position: absolute; + bottom: var(--space-xl); + left: 50%; + transform: translateX(-50%); + z-index: 3; + display: flex; + gap: var(--space-xs); +} + +.hero__dot { + width: 10px; + height: 10px; + border-radius: 50%; + border: 1.5px solid rgba(255,255,255,0.6); + background: transparent; + cursor: pointer; + transition: all var(--duration-normal) var(--ease-out); + padding: 0; +} + +.hero__dot.active { + background: var(--color-white); + border-color: var(--color-white); + transform: scale(1.2); +} + +.hero__dot:hover { + background: rgba(255,255,255,0.5); +} + +.hero__content { + z-index: 2; + text-align: center; + padding: var(--space-4xl) var(--space-m); + max-width: 800px; +} + + +.hero__brand { + font-family: var(--font-display); + font-size: clamp(0.85rem, 2vw, 1rem); + font-weight: 700; + letter-spacing: 0.28em; + text-transform: uppercase; + color: var(--color-orange); + margin-bottom: var(--space-m); + text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); +} + +.hero__title { + font-size: clamp(1.35rem, 3.5vw, 2.1rem); + font-weight: 600; + color: var(--color-white); + margin-bottom: var(--space-m); + line-height: 1.45; + text-shadow: 0 2px 20px rgba(0,0,0,0.2); + max-width: 42rem; + margin-left: auto; + margin-right: auto; +} + +.hero__slogan { + font-size: clamp(1rem, 2vw, 1.15rem); + color: rgba(255, 255, 255, 0.9); + max-width: 36rem; + margin: 0 auto var(--space-xl); + line-height: 1.65; + font-style: italic; +} + +.hero__title em { + color: var(--color-beige); + font-size: 1.05em; +} + +.hero__subtitle { + font-size: clamp(1rem, 2vw, 1.2rem); + color: rgba(255,255,255,0.85); + max-width: 550px; + margin: 0 auto var(--space-xl); + line-height: 1.7; +} + +.hero__actions { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-s); + flex-wrap: wrap; +} + + + +/* ============================================ + MENU SECTION + ============================================ */ +.menu { + position: relative; + z-index: 2; + background: var(--color-beige); +} + +.menu__tabs { + display: flex; + justify-content: center; + gap: var(--space-xs); + margin-bottom: var(--space-m); + flex-wrap: wrap; +} + +/* ---- Dietary Filters (multi-select chips) ---- */ +.menu__filters { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + margin-bottom: var(--space-l); + flex-wrap: wrap; +} + +.menu__filter { + font-family: var(--font-primary); + font-size: 0.78rem; + font-weight: 500; + letter-spacing: 0.02em; + padding: 6px 16px; + border-radius: var(--radius-pill); + border: 1.5px solid rgba(0, 0, 0, 0.12); + background: transparent; + color: #777; + cursor: pointer; + transition: all 0.2s var(--ease-out); + white-space: nowrap; +} + +.menu__filter:hover { + border-color: var(--color-vert); + color: var(--color-vert); +} + +.menu__filter.active { + border-color: var(--color-vert); + background: rgba(255, 140, 0, 0.08); + color: var(--color-vert); + font-weight: 600; +} + +.menu__filter-reset { + font-family: var(--font-secondary); + font-size: 0.75rem; + color: #aaa; + background: none; + border: none; + cursor: pointer; + padding: 6px 8px; + transition: all 0.2s var(--ease-out); + opacity: 0; + pointer-events: none; + transform: translateX(-4px); +} + +.menu__filter-reset.visible { + opacity: 1; + pointer-events: auto; + transform: translateX(0); +} + +.menu__filter-reset:hover { + color: var(--color-vert); +} + +/* Filtered-out card state — hidden entirely */ +.menu-card.filtered-out { + display: none; +} + +/* Empty state message when all items filtered out */ +.menu__empty-msg { + text-align: center; + padding: var(--space-xl) var(--space-m); + color: #999; + font-family: var(--font-secondary); + font-size: 0.95rem; + display: none; + width: 100%; +} + +.menu__empty-msg.visible { + display: block; +} + +.menu__tab { + font-family: var(--font-primary); + font-size: 0.9rem; + font-weight: 600; + padding: 10px 24px; + border-radius: var(--radius-pill); + border: 2px solid transparent; + background: var(--color-white); + color: #666; + cursor: pointer; + transition: all var(--duration-normal) var(--ease-out); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.menu__tab:hover { + border-color: var(--color-vert); + color: var(--color-vert); +} + +.menu__tab.active { + background: var(--color-vert); + color: var(--color-white); + border-color: var(--color-vert); +} + +.menu__content { + display: none; + position: relative; +} + +.menu__content.active { + display: block; + animation: fadeIn var(--duration-slow) var(--ease-out); +} + +/* Scroll fade indicator — right edge */ +.menu__content.active::after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 60px; + height: calc(100% - var(--space-s)); + background: linear-gradient(to left, var(--color-beige) 0%, transparent 100%); + pointer-events: none; + z-index: 5; + opacity: 1; + transition: opacity 0.3s ease; +} + +.menu__content.scrolled-end::after { + opacity: 0; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +.menu__grid { + display: flex; + gap: var(--space-m); + overflow-x: auto; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + padding-bottom: var(--space-s); + scrollbar-width: none; + -ms-overflow-style: none; +} + +.menu__grid::-webkit-scrollbar { + display: none; +} + +/* Menu Card — Floating bowl style */ +.menu-card { + display: flex; + flex-direction: column; + border-radius: var(--radius-xl); + transition: all var(--duration-normal) var(--ease-out); + text-align: left; + position: relative; + overflow: visible; + min-width: calc((100% - var(--space-m) * 2) / 3); + max-width: calc((100% - var(--space-m) * 2) / 3); + flex-shrink: 0; + scroll-snap-align: start; +} + +.menu-card:hover { + transform: translateY(-4px); + z-index: 10; +} + +.menu-card__img { + display: flex; + align-items: center; + justify-content: center; + position: relative; + margin-bottom: var(--space-xs); + height: 300px; + background: var(--color-beige); + border-radius: var(--radius-lg); + overflow: visible; +} + +.menu-card__img--empty { + background: linear-gradient(135deg, var(--color-beige) 0%, #e2dbd0 100%); + height: 180px; +} + +.menu-card__img--empty::after { + content: '🍽'; + font-size: 2.5rem; + opacity: 0.2; +} + +.menu-card__img img { + width: 100%; + height: 100%; + object-fit: contain; + transition: transform 0.5s var(--ease-out), filter 0.5s var(--ease-out); + padding: var(--space-s); +} + +@media (hover: hover) { + .menu-card:hover .menu-card__img img { + transform: scale(1.08) rotate(-2deg); + z-index: 10; + } +} + +.menu-card__emoji { + font-size: 3rem; +} + +.menu-card__badge { + position: absolute; + top: var(--space-s); + right: var(--space-m); + background: var(--color-abricot); + color: var(--color-white); + font-size: 0.75rem; + font-weight: 700; + padding: 6px 14px; + border-radius: var(--radius-pill); + z-index: 3; +} + +.menu-card__body { + display: flex; + flex-direction: column; + flex: 1; + padding: var(--space-m); + background: var(--color-white); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); +} + +.menu-card__top { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: var(--space-xs); + gap: var(--space-s); +} + +.menu-card__top h3 { + font-size: 1.05rem; + font-weight: 700; +} + +.menu-card__price { + font-family: var(--font-primary); + font-size: 1.05rem; + font-weight: 700; + color: var(--color-vert); + white-space: nowrap; +} + +.menu-card__body > p { + font-size: 0.88rem; + color: #777; + line-height: 1.5; + margin-bottom: var(--space-s); + flex: 1; +} + +.menu-card__tags { + display: flex; + gap: var(--space-xs); + flex-wrap: wrap; + margin-top: auto; +} + +/* All cards uniform — text-only gets empty img placeholder */ +.menu-card--text-only .menu-card__body { + border-radius: var(--radius-lg); +} + +/* Idle float animation — all menu items with images */ +@keyframes bowlFloat { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } +} + +.menu-card__img img { + animation: bowlFloat 3.5s ease-in-out infinite; +} + +.menu-card:hover .menu-card__img img { + animation: none; +} + +/* Staggered reveal for cards */ +.menu-card:nth-child(1) { transition-delay: 0s; } +.menu-card:nth-child(2) { transition-delay: 0.1s; } +.menu-card:nth-child(3) { transition-delay: 0.2s; } + +/* Staggered float animation — each card floats slightly offset */ +.menu-card:nth-child(2) .menu-card__img img { animation-delay: -0.6s; } +.menu-card:nth-child(3) .menu-card__img img { animation-delay: -1.2s; } +.menu-card:nth-child(4) .menu-card__img img { animation-delay: -0.3s; } +.menu-card:nth-child(5) .menu-card__img img { animation-delay: -0.9s; } +.menu-card:nth-child(6) .menu-card__img img { animation-delay: -1.5s; } +.menu-card:nth-child(7) .menu-card__img img { animation-delay: -0.45s; } +.menu-card:nth-child(8) .menu-card__img img { animation-delay: -1.05s; } +.menu-card:nth-child(9) .menu-card__img img { animation-delay: -1.65s; } +.menu-card:nth-child(10) .menu-card__img img { animation-delay: -0.75s; } +.menu-card:nth-child(11) .menu-card__img img { animation-delay: -1.35s; } +.menu-card:nth-child(12) .menu-card__img img { animation-delay: -2.0s; } +.menu-card:nth-child(13) .menu-card__img img { animation-delay: -0.5s; } + +.menu__note { + font-family: var(--font-secondary); + font-size: 0.95rem; + color: #888; + margin-bottom: var(--space-m); + padding-left: var(--space-2xs); +} + +.menu__subtitle { + font-family: var(--font-secondary); + font-size: 1.2rem; + font-weight: 700; + color: var(--color-vert); + margin-top: var(--space-xl); + margin-bottom: var(--space-m); + padding-bottom: var(--space-xs); + border-bottom: 2px solid var(--color-lichen); + display: inline-block; +} + +.menu__allergen-note, +.menu__allergen-hinweis { + font-size: 0.85rem; + color: #999; + margin-bottom: var(--space-m); + text-align: center; + line-height: 1.5; +} + +.menu__footer { + text-align: center; + margin-top: var(--space-2xl); +} + +/* ============================================ + MISSION BANNER — Full-width photo section + ============================================ */ +.mission-banner { + position: relative; + min-height: 500px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.mission-banner__bg { + position: absolute; + inset: 0; + z-index: 0; +} + +.mission-banner__img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center right; +} + +.mission-banner__overlay { + position: absolute; + inset: 0; + background: rgba(255, 140, 0, 0.7); +} + +.mission-banner__content { + position: relative; + z-index: 1; + max-width: 650px; + padding: var(--space-3xl) var(--space-m); + text-align: center; +} + +.mission-banner__title { + font-size: clamp(2rem, 4vw, 2.8rem); + color: var(--color-white); + margin-bottom: var(--space-m); + line-height: 1.15; +} + +.mission-banner__title em { + color: var(--color-beige); +} + +.mission-banner__desc { + font-size: 1.1rem; + color: rgba(255,255,255,0.85); + line-height: 1.8; + margin-bottom: var(--space-xl); +} + +/* ============================================ + TRAITEUR — with real photo + ============================================ */ +.traiteur { + background: var(--color-white); +} + +.traiteur__layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-3xl); + align-items: center; +} + +.traiteur__visual { + position: relative; +} + +.traiteur__img-main { + width: 100%; + border-radius: var(--radius-xl); + overflow: hidden; +} + +.traiteur__img-main img { + width: 100%; + height: 100%; + object-fit: cover; + aspect-ratio: 4/5; +} + +.traiteur__badge-float { + position: absolute; + top: var(--space-m); + right: -20px; + background: var(--color-white); + padding: var(--space-s) var(--space-m); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); + text-align: center; +} + +.traiteur__badge-float strong { + display: block; + font-size: 1.6rem; + color: var(--color-vert); +} + +.traiteur__badge-float span { + font-size: 0.8rem; + color: #888; +} + +.traiteur__content .section__title { + text-align: left; +} + +.traiteur__desc { + font-size: 1.1rem; + color: #555; + line-height: 1.7; + margin-bottom: var(--space-xl); +} + +.traiteur__features { + display: flex; + flex-direction: column; + gap: var(--space-m); + margin-bottom: var(--space-xl); +} + +.traiteur__feature { + display: flex; + gap: var(--space-s); + align-items: flex-start; +} + +.traiteur__feature-icon { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-beige); + border-radius: var(--radius-lg); + flex-shrink: 0; + color: var(--color-vert); +} + +.traiteur__feature strong { + display: block; + font-size: 0.95rem; + margin-bottom: 2px; +} + +.traiteur__feature p { + font-size: 0.85rem; + color: #888; +} + + +/* ============================================ + CONTACT + ============================================ */ +.contact { + background: var(--color-white); +} + +.contact__layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-3xl); + align-items: start; +} + +.contact__desc { + font-size: 1.05rem; + color: #555; + line-height: 1.7; + margin-bottom: var(--space-xl); +} + +.contact__details { + display: flex; + flex-direction: column; + gap: var(--space-m); +} + +.contact__detail { + display: flex; + gap: var(--space-s); + align-items: flex-start; +} + +.contact__detail-icon { + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-beige); + border-radius: var(--radius-lg); + flex-shrink: 0; + color: var(--color-vert); +} + +.contact__detail strong { + font-size: 0.9rem; + display: block; + margin-bottom: 2px; +} + +.contact__detail p { + font-size: 0.88rem; + color: #777; +} + +.contact__detail a { + color: var(--color-vert); + transition: color var(--duration-fast); +} + +.contact__detail a:hover { + color: #CC7000; +} + +.contact__closed, +.footer__closed { + color: var(--color-cta); + font-weight: 600; +} + +.footer__tagline { + font-style: italic; + line-height: 1.6; + opacity: 0.9; +} + +/* Contact Form */ +.contact__form { + background: var(--color-beige); + padding: var(--space-xl); + border-radius: var(--radius-xl); +} + +.form-group { + margin-bottom: var(--space-m); +} + +.form-group label { + display: block; + font-size: 0.88rem; + font-weight: 600; + margin-bottom: var(--space-xs); + color: var(--color-body); +} + +.form-group input, +.form-group select, +.form-group textarea { + width: 100%; + padding: 14px var(--space-s); + font-family: var(--font-primary); + font-size: 0.95rem; + border: 2px solid rgba(0,0,0,0.08); + border-radius: var(--radius-md); + background: var(--color-white); + transition: border-color var(--duration-fast); + outline: none; +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + border-color: var(--color-vert); +} + +.form-group textarea { + resize: vertical; + min-height: 120px; +} + +.form-group select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 16px center; + padding-right: 40px; +} + +/* ============================================ + FOOTER — with newsletter + ============================================ */ +.footer { + background: var(--color-vert); + color: var(--color-white); + padding: var(--space-3xl) 0 var(--space-xl); +} + +.footer__grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-2xl); + padding-bottom: var(--space-2xl); + border-bottom: 1px solid rgba(255,255,255,0.25); +} + +.footer__logo { + display: flex; + align-items: center; + margin-bottom: var(--space-s); +} + +.footer__logo-img { + height: 48px; + width: auto; + border-radius: 50%; +} + +.footer__brand p { + font-size: 0.9rem; + color: rgba(255,255,255,0.6); + line-height: 1.6; +} + +.footer__social { + display: flex; + flex-direction: column; + gap: var(--space-xs); +} + +.footer__social-link { + font-size: 0.88rem; + color: rgba(255,255,255,0.85); + transition: color var(--duration-fast); +} + +.footer__social-link:hover { + color: var(--color-white); +} + +.footer__col h4 { + font-size: 0.85rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + margin-bottom: var(--space-m); + color: var(--color-white); +} + +.footer__col a, +.footer__col p { + display: block; + font-size: 0.88rem; + color: rgba(255,255,255,0.85); + margin-bottom: var(--space-xs); + transition: color var(--duration-fast); +} + +.footer__col a:hover { + color: var(--color-white); +} + +.footer__address { + margin-top: var(--space-s); +} + +/* Newsletter */ +.footer__newsletter { + margin-top: var(--space-xl); +} + +.footer__newsletter h4 { + margin-bottom: var(--space-xs); +} + +.footer__newsletter-desc { + font-size: 0.85rem; + color: rgba(255,255,255,0.5); + margin-bottom: var(--space-s); +} + +.footer__newsletter-form { + display: flex; + gap: var(--space-xs); +} + +.footer__newsletter-form input { + flex: 1; + padding: 10px var(--space-s); + font-family: var(--font-primary); + font-size: 0.88rem; + border: 1px solid rgba(255,255,255,0.2); + border-radius: var(--radius-md); + background: rgba(255,255,255,0.08); + color: var(--color-white); + outline: none; + transition: border-color var(--duration-fast); +} + +.footer__newsletter-form input::placeholder { + color: rgba(255,255,255,0.4); +} + +.footer__newsletter-form input:focus { + border-color: var(--color-white); + background: rgba(255,255,255,0.15); +} + +.footer__bottom { + padding-top: var(--space-xl); + text-align: center; +} + +.footer__bottom p { + font-size: 0.82rem; + color: rgba(255,255,255,0.7); +} + +/* ============================================ + MOBILE STICKY CTA + ============================================ */ +.mobile-cta { + display: none; +} + +@media (max-width: 768px) { + .mobile-cta { + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 998; + padding: var(--space-s) var(--space-m); + padding-bottom: calc(var(--space-s) + env(safe-area-inset-bottom, 0px)); + background: linear-gradient(to top, rgba(238, 231, 220, 0.98) 70%, rgba(238, 231, 220, 0) 100%); + display: block; + transform: translateY(100%); + opacity: 0; + transition: all 0.4s var(--ease-out); + } + + .mobile-cta.visible { + transform: translateY(0); + opacity: 1; + } + + .mobile-cta__btn { + width: 100%; + font-size: 1rem; + padding: 16px 32px; + box-shadow: var(--shadow-lg); + } + + /* Add bottom padding to footer to avoid CTA overlap */ + .footer { + padding-bottom: calc(var(--space-xl) + 80px); + } +} + +/* ============================================ + ANIMATIONS + ============================================ */ +.animate-fade-up { + opacity: 0; + transform: translateY(30px); + animation: fadeUp 0.8s var(--ease-out) forwards; + animation-delay: var(--delay, 0s); +} + +@keyframes fadeUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Scroll reveal */ +.reveal { + opacity: 0; + transform: translateY(40px); + transition: all 0.7s var(--ease-out); +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +/* ============================================ + RESPONSIVE + ============================================ */ +@media (max-width: 1024px) { + .traiteur__layout { + gap: var(--space-2xl); + } + + .menu-card { + min-width: calc((100% - var(--space-m)) / 2.3); + max-width: calc((100% - var(--space-m)) / 2.3); + } +} + +@media (max-width: 768px) { + .nav__left, + .nav__right { + display: none; + } + + .nav__burger { + display: flex; + } + + .nav__container { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + } + + .nav__logo { + margin: 0; + grid-column: 2; + justify-self: center; + } + + .nav__burger { + grid-column: 3; + justify-self: end; + } + + .nav__logo-img { + height: 60px; + } + + .nav--scrolled .nav__logo-img { + height: 40px; + } + + .nav { + height: var(--nav-height-mobile); + } + + .menu__tabs { + flex-wrap: nowrap; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + justify-content: flex-start; + padding-bottom: var(--space-xs); + scrollbar-width: none; + -ms-overflow-style: none; + } + + .menu__tabs::-webkit-scrollbar { + display: none; + } + + .menu__tab { + flex-shrink: 0; + } + + .menu__filters { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + justify-content: flex-start; + flex-wrap: nowrap; + scrollbar-width: none; + -ms-overflow-style: none; + padding: 0 var(--space-s) var(--space-xs); + margin-bottom: var(--space-l); + } + + .menu__filters::-webkit-scrollbar { + display: none; + } + + .menu__filter { + flex-shrink: 0; + font-size: 0.72rem; + padding: 5px 12px; + } + + .menu__filter-reset { + flex-shrink: 0; + font-size: 0.7rem; + } + + .menu-card { + min-width: 82%; + max-width: 82%; + } + + .menu__grid { + scroll-padding-left: var(--space-s); + padding-left: var(--space-s); + gap: var(--space-s); + } + + .traiteur__layout { + grid-template-columns: 1fr; + gap: var(--space-xl); + } + + .traiteur__visual { + max-width: 500px; + margin: 0 auto; + order: -1; + } + + .mission-banner { + min-height: 400px; + } + + .mission-banner__overlay { + background: rgba(255, 140, 0, 0.78); + } + + .mission-banner__content { + max-width: 100%; + padding: calc(var(--nav-height-mobile) + var(--space-xl)) var(--space-m) var(--space-2xl); + } + + .mission-banner__title { + font-size: clamp(1.6rem, 5vw, 2.2rem); + } + + .mission-banner__desc { + font-size: 0.95rem; + } + + .section__title { + font-size: clamp(1.6rem, 5vw, 2.2rem); + } + + .contact__layout { + grid-template-columns: 1fr; + gap: var(--space-xl); + } + + .footer__grid { + grid-template-columns: 1fr 1fr; + gap: var(--space-xl); + } + + .section { + padding: var(--space-2xl) 0; + } + + .hero__content { + padding: var(--space-2xl) var(--space-m) var(--space-3xl); + } + + /* Hide arrows on mobile — swipe is enough */ + .hero__arrow { + display: none; + } + + /* Dots above the fold, not overlapping tabs */ + .hero__dots { + bottom: var(--space-m); + } + + .hero__bg-img { + object-position: center 40%; + } + + .hero { + min-height: 75vh; + } + + /* Compact hero buttons */ + .hero__actions { + flex-direction: column; + width: 100%; + gap: var(--space-xs); + } + + .hero__actions .btn { + width: 100%; + padding: 14px 24px; + font-size: 0.9rem; + } +} + +@media (max-width: 480px) { + .footer__grid { + grid-template-columns: 1fr; + } + + .menu__tabs { + gap: var(--space-xs); + flex-wrap: nowrap; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + justify-content: flex-start; + padding-bottom: var(--space-xs); + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE/Edge */ + } + + .menu__tabs::-webkit-scrollbar { + display: none; /* Chrome/Safari */ + } + + .menu__tab { + font-size: 0.78rem; + padding: 8px 16px; + letter-spacing: 0.02em; + flex-shrink: 0; + } + + .menu-card__img { + height: 220px; + } + + .footer__newsletter-form { + flex-direction: column; + } +} + +/* ============================================ + BEYT BEYTAK — Logo & Marken-Anpassungen + (farbiges Logo: kein Invert-Filter wie Colibri) + ============================================ */ +.nav__logo-img { + filter: none; + opacity: 1; + mix-blend-mode: normal; +} + +.nav--scrolled .nav__logo-img { + filter: none; + opacity: 1; + mix-blend-mode: normal; +} + +.mobile-menu__logo { + mix-blend-mode: normal; +}