From e805abbf12d69e7edb31e0975a391f3e30c1017b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estelle=20K=C3=B6hler?= Date: Sun, 12 Apr 2026 15:18:40 +0200 Subject: [PATCH] feat: lightbox gallery, event create UX improvements, cancel modal, footer consistency, Swiss German fixes --- css/event_create.css | 72 ++++++++++++++++----------------------- css/event_overview.css | 37 +++++++++++++++++++- css/index.css | 1 + css/stylesheet_global.css | 50 +++++++++++++++++++++++++++ data/events.json | 2 +- event_create.html | 16 ++++----- event_detail.html | 5 +++ index.html | 9 +++++ js/event_create.js | 31 +++++++++++------ js/event_detail.js | 49 +++++++++++++++++++++++--- js/event_overview.js | 5 --- js/index-carousel.js | 43 +++++++++++++++++++++++ js/my_profil.js | 30 +++++++++++++++- js/signup.js | 4 +-- my_profil.html | 28 +++++++++++++++ signup.html | 2 +- 16 files changed, 307 insertions(+), 77 deletions(-) diff --git a/css/event_create.css b/css/event_create.css index a58da91..6ebf2f4 100644 --- a/css/event_create.css +++ b/css/event_create.css @@ -187,6 +187,7 @@ h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.03; letter-spacing: -0.03em; + color: var(--brown); } .step-text { @@ -204,7 +205,6 @@ h2 { } .intro-card { - max-width: 24rem; padding: var(--space-6); border-radius: 1.75rem; background: linear-gradient(135deg, var(--color-surface), var(--color-surface-soft)); @@ -221,7 +221,7 @@ h2 { .intro-image { width: 100%; - aspect-ratio: 16 / 10; + height: 100%; display: block; object-fit: cover; border-radius: 1.875rem; @@ -457,57 +457,36 @@ textarea:focus { } .progress-wrap { - position: relative; width: min(100%, var(--content-width)); margin: 0 auto; - padding-top: 4.35rem; + display: flex; + align-items: center; + gap: 0.75rem; +} + +.progress-label { + flex-shrink: 0; + font-size: 0.8rem; + font-weight: 600; + color: var(--color-muted); + white-space: nowrap; } .progress { - width: 100%; - height: 0.375rem; + flex: 1; + height: 0.3rem; background: var(--color-progress-bg); + border-radius: 999px; + overflow: hidden; } .progress-bar { display: block; width: 0; height: 100%; - background: var(--tomato); - transition: width 0.25s ease; -} - -.progress-marker { - position: absolute; - top: 0; - transform: translateX(-50%); - display: grid; - justify-items: center; - gap: 0.2rem; - pointer-events: none; -} - -.progress-marker::after { - content: ""; - width: 0.125rem; - height: 1rem; - background: var(--tomato); + background: var(--olive); border-radius: 999px; -} - -.progress-marker__circle { - width: 2.9rem; - height: 2.9rem; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 50%; - background: var(--tomato); - color: var(--butter-light); - font-size: 1.35rem; - font-weight: 600; - line-height: 1; - box-shadow: 0 10px 24px rgba(212, 75, 36, 0.18); + transition: width 0.25s ease; } .flow-actions { @@ -550,8 +529,15 @@ textarea:focus { } .button--text { - border: 0; - padding-left: 0; + border: 2px solid var(--olive); + color: var(--olive); + background: transparent; + padding-left: 1.35rem; +} + +.button--text:hover { + background: var(--olive-light); + color: var(--black); } .button--primary { @@ -625,7 +611,7 @@ textarea:focus-visible { .step-layout--intro { width: min(100%, 56rem); grid-template-columns: 1fr 1fr; - align-items: center; + align-items: stretch; gap: var(--space-8); } diff --git a/css/event_overview.css b/css/event_overview.css index 883ccda..cbe87b6 100644 --- a/css/event_overview.css +++ b/css/event_overview.css @@ -492,6 +492,7 @@ color: var(--white); display: inline-flex; align-items: center; + justify-content: center; font-size: 13px; } @@ -668,6 +669,40 @@ opacity: 0.7; } +.detail-participants-full { + display: flex; + flex-direction: column; + gap: 10px; +} + +.detail-participant-item { + display: flex; + align-items: center; + gap: 10px; +} + +.participant-name { + font-size: 0.95rem; + font-weight: 500; + color: var(--black); +} + +.detail-participants-link { + background: none; + border: none; + color: var(--olive); + font-size: 0.85rem; + font-weight: 600; + cursor: pointer; + padding: 0; + text-decoration: underline; + text-underline-offset: 3px; +} + +.detail-participants-link:hover { + color: var(--olive-dark); +} + .detail-action-bar { /* Sticky bottom CTA bar with summary and booking controls. */ display: flex; @@ -733,8 +768,8 @@ .detail-spots-pill { border: 2px solid var(--olive-light); border-radius: var(--radius-pill); - opacity: 0.5; font-size: 14px; + font-weight: 500; letter-spacing: var(--ls-ui); padding: 7px 14px; color: var(--olive); diff --git a/css/index.css b/css/index.css index 91f06d0..d16b05a 100644 --- a/css/index.css +++ b/css/index.css @@ -247,6 +247,7 @@ background: var(--white); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06); aspect-ratio: 2 / 3; + cursor: pointer; } .gallery__item img { diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css index 5cab012..f3d8ded 100644 --- a/css/stylesheet_global.css +++ b/css/stylesheet_global.css @@ -435,6 +435,56 @@ p { background: var(--tomato); } +/* Lightbox */ +.lightbox { + position: fixed; + inset: 0; + z-index: 200; + display: none; + align-items: center; + justify-content: center; + padding: 24px; +} + +.lightbox.is-open { + display: flex; +} + +.lightbox__backdrop { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.75); +} + +.lightbox__content { + position: relative; + margin: 0; + max-width: min(96vw, 1100px); + max-height: 90vh; + z-index: 1; +} + +.lightbox__image { + display: block; + width: 100%; + max-height: 90vh; + object-fit: contain; + border-radius: 16px; + background: #111; +} + +.lightbox__close { + position: absolute; + top: -42px; + right: 0; + border: 0; + background: transparent; + color: var(--white); + font-size: 40px; + line-height: 1; + cursor: pointer; +} + /* Footer */ .footer { display: flex; diff --git a/data/events.json b/data/events.json index 7f84219..8019ea7 100644 --- a/data/events.json +++ b/data/events.json @@ -57,7 +57,7 @@ "hostMessage": [ "¡Hola a todos! Ich lade euch ein auf eine kulinarische Reise nach Peru.", "Ich koche für euch ein authentisches peruanisches Sharing-Menü, das vor Lebensfreude nur so sprüht. Freut euch auf eine Explosion aus leuchtenden Farben, fein abgestimmter Schärfe und der unverwechselbaren Frische verschiedenster Kräuter.", - "Wir genießen den Abend gemeinsam in mehreren kleinen Gängen, ganz nach dem Sharing-Prinzip. Dabei entdecken wir die klassischen Aromen meiner Heimatstadt Lima – von traditionell bis modern interpretiert.", + "Wir geniessen den Abend gemeinsam in mehreren kleinen Gängen, ganz nach dem Sharing-Prinzip. Dabei entdecken wir die klassischen Aromen meiner Heimatstadt Lima – von traditionell bis modern interpretiert.", "Es wird gesellig, aromatisch und ein echtes Erlebnis für alle Sinne. ¡Buen provecho!" ], "menu": [ diff --git a/event_create.html b/event_create.html index 27c3604..39acc1c 100644 --- a/event_create.html +++ b/event_create.html @@ -41,8 +41,8 @@

Event erstellen

Hey {{username}}, was hast du vor?

- Erzähl uns von deiner Idee – vom Essen bis zur Stimmung. Ob Dinner, Brunch - oder etwas ganz Eigenes – wir helfen dir dabei, dein Event in sieben Schritten aufzubauen. + Erzähl uns von deiner Idee, vom Essen bis zur Stimmung. Ob Dinner, Brunch + oder etwas ganz Eigenes wir helfen dir dabei, dein Event in sieben Schritten aufzubauen.

+ Grossansicht + + +