From 9a2c66e026c1c5556328ca8f23ac2edfd097803f Mon Sep 17 00:00:00 2001 From: oswaldsimona Date: Wed, 15 Apr 2026 10:35:35 +0200 Subject: [PATCH] Anpassung primary-button, badge und Event erstellen --- css/event_create.css | 234 +++++++------------------------------- css/event_overview.css | 8 +- css/index.css | 21 +--- css/my_profil.css | 6 +- css/stylesheet_global.css | 124 ++++++++++++++------ event_create.html | 35 +++--- index.html | 12 +- js/my_profil.js | 2 +- js/navigation.js | 26 ++++- login.html | 2 +- my_profil.html | 14 +-- signup.html | 4 +- 12 files changed, 198 insertions(+), 290 deletions(-) diff --git a/css/event_create.css b/css/event_create.css index 6180ba1..5810d07 100644 --- a/css/event_create.css +++ b/css/event_create.css @@ -6,25 +6,6 @@ --control-min-height: 3rem; --input-min-height: 3.5rem; --card-min-height: 6rem; - - --color-bg: var(--butter); - --color-surface: var(--white); - --color-surface-soft: var(--butter-light); - --color-text: var(--black); - --color-text-secondary: rgba(34, 33, 26, 0.8); - --color-muted: rgba(34, 33, 26, 0.68); - --color-border: rgba(102, 52, 13, 0.16); - --color-border-strong: var(--brown); - --color-divider: rgba(102, 52, 13, 0.14); - --color-primary: var(--olive); - --color-primary-hover: var(--olive-dark); - --color-progress-bg: rgba(212, 75, 36, 0.18); - --color-focus: var(--blue); - --color-error: var(--error); - --shadow-soft: 0 12px 30px rgba(102, 52, 13, 0.1); - --input-border-soft: rgba(102, 52, 13, 0.2); - --input-border-focus: rgba(107, 107, 5, 0.45); - --input-shadow-focus: 0 0 0 4px rgba(107, 107, 5, 0.12); } *, @@ -33,77 +14,12 @@ box-sizing: border-box; } -html { - font-size: 100%; -} - -body { - margin: 0; - font-family: var(--font-main); - background: var(--color-bg); - color: var(--color-text); - line-height: 1.5; -} - -a, -button, -input, -textarea { - font: inherit; -} - -a { - color: inherit; - text-decoration: none; -} - .site-header { background: var(--color-bg); border-top: 2px solid #232323; border-bottom: 1px solid var(--color-border); } -.site-nav { - width: min(100% - 2rem, var(--max-width)); - margin: 0 auto; - min-height: var(--header-height); - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-4); -} - -.site-logo { - font-size: 2rem; - font-weight: 800; - letter-spacing: 0.02em; -} - -.site-nav-links { - display: flex; - align-items: center; - gap: var(--space-5); - margin: 0; - padding: 0; - list-style: none; -} - -.site-nav-links a { - font-weight: 500; -} - -.site-nav-links li:last-child a { - width: 2.25rem; - height: 2.25rem; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 50%; - background: #231f20; - color: #ffffff; - font-weight: 700; -} - .event-create-page { width: min(100% - 2rem, var(--max-width)); margin: 0 auto; @@ -173,35 +89,17 @@ fieldset { gap: var(--space-3); } -.step-kicker { - margin: 0; - font-weight: 700; - color: var(--color-muted); - letter-spacing: 0.02em; -} - -h1, -h2 { - margin: 0; - font-family: "Bagel Fat One", cursive; - font-size: clamp(2rem, 4vw, 4rem); - line-height: 1.03; - letter-spacing: -0.03em; - color: var(--brown); -} .step-text { - margin: 0; - max-width: 42rem; - color: var(--color-text-secondary); - font-size: clamp(1rem, 1.4vw, 1.2rem); + /* definiert Breite des Beschriebtexts der einzelnen Schritte*/ + max-width: 600px; } .intro-card, .review-card { border: 1px solid var(--color-border); background: var(--color-surface); - box-shadow: var(--shadow-soft); + box-shadow: var(--shadow-interaction); } .intro-card { @@ -224,13 +122,17 @@ h2 { height: 100%; display: block; object-fit: cover; - border-radius: 1.875rem; + border-radius: var(--radius-lg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); } label, legend { - font-weight: 700; + font-size: 1rem; + font-weight: 600; + letter-spacing: var(--ls-sm); + line-height: 1; + margin-bottom: var(--space-3); } .field-hint { @@ -244,15 +146,23 @@ input[type="date"], input[type="time"], input[type="number"], textarea { - width: 100%; - min-height: var(--input-min-height); - padding: 1rem 1.1rem; - border: 1px solid var(--input-border-soft); - border-radius: 1.125rem; + padding: 1rem 1.25rem; + border: 1.5px solid var(--olive-light); + border-radius: var(--radius-md); background: var(--butter-light); - color: var(--color-text); - box-shadow: 0 1px 2px rgba(102, 52, 13, 0.04); - transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; + transition: border-color 0.2s ease; +} + +/* Blendet die Standard-Buttons für number inputs aus */ +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox */ +input[type="number"] { + -moz-appearance: textfield; } textarea { @@ -273,15 +183,12 @@ input[type="date"]:focus, input[type="time"]:focus, input[type="number"]:focus, textarea:focus { - border-color: var(--input-border-focus); - box-shadow: var(--input-shadow-focus); - background: var(--butter-light); - outline: none; + border-color: var(--olive-dark); } .field-invalid { - border-color: var(--tomato) !important; - box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14); + border-color: var(--error) !important; + box-shadow: var(--shadow-error); } .field-row { @@ -297,23 +204,18 @@ textarea:focus { .option-card { position: relative; display: grid; - gap: 0.15rem; - min-height: var(--card-min-height); - padding: 1rem 1rem 1rem 1.05rem; - border: 1px solid var(--color-border); - border-radius: 1rem; + padding: 1.25rem; + border: 1.5px solid var(--olive-light); + border-radius: var(--radius-md); background: var(--butter-light); - transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease; + transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } -.option-card small { - color: var(--color-muted); -} .option-card:hover { background: var(--olive-light); - transform: translateY(-1px); - box-shadow: var(--shadow-soft); + box-shadow: var(--shadow-interaction); + transform: translateY(-3px); } .option-card input { @@ -324,14 +226,14 @@ textarea:focus { } .option-card:has(input:checked) { - border: 1px solid var(--color-primary); - background: var(--color-primary); - color: var(--white); + border: 1.5px solid var(--olive-light); + background: var(--olive-light); } +/* .option-card:has(input:checked) small { color: rgba(247, 246, 230, 0.88); -} +}*/ .option-card--invalid { border-color: var(--tomato) !important; @@ -349,34 +251,6 @@ textarea:focus { text-align: center; } -.counter-button, -.button { - min-height: var(--control-min-height); -} - -.counter-button { - width: var(--control-min-height); - height: var(--control-min-height); - border: 1px solid var(--color-primary); - border-radius: 50%; - background: var(--color-primary); - color: var(--white); - font-size: 1.5rem; - line-height: 1; - box-shadow: 0 6px 16px rgba(107, 107, 5, 0.18); - transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; -} - -.counter-button:hover { - background: var(--color-primary-hover); - transform: translateY(-1px); -} - -.counter-button:focus-visible { - outline: 3px solid rgba(107, 107, 5, 0.22); - outline-offset: 3px; -} - .review-card { display: grid; gap: var(--space-4); @@ -512,7 +386,7 @@ textarea:focus { font-size: 0.95rem; } -.button { +/*.button { display: inline-flex; align-items: center; justify-content: center; @@ -522,40 +396,12 @@ textarea:focus { background: transparent; color: var(--color-text); cursor: pointer; -} +}*/ .button--ghost:hover { background: rgba(0, 0, 0, 0.03); } -.button--text { - 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 { - min-width: 10rem; - border-color: var(--color-primary); - background: var(--color-primary); - color: #ffffff; - font-weight: 700; -} - -.button--primary:hover { - background: var(--color-primary-hover); -} - -.button--primary:disabled { - opacity: 0.45; - cursor: not-allowed; -} .button--intro { justify-self: start; diff --git a/css/event_overview.css b/css/event_overview.css index e437782..11c1ea7 100644 --- a/css/event_overview.css +++ b/css/event_overview.css @@ -70,7 +70,7 @@ margin: 0 0 var(--space-1); color: var(--olive); font-size: 18px; - letter-spacing: var(--ls-label); + letter-spacing: var(--ls-la); font-weight: 500; } @@ -367,7 +367,7 @@ color: var(--olive); font-size: 13px; font-weight: 600; - letter-spacing: var(--ls-label); + letter-spacing: var(--ls-la); text-transform: uppercase; } @@ -508,7 +508,7 @@ color: var(--olive); font-size: 12px; font-weight: 600; - letter-spacing: var(--ls-label); + letter-spacing: var(--ls-la); text-transform: uppercase; } @@ -641,7 +641,7 @@ font-size: 12px; font-weight: 600; color: var(--tomato); - letter-spacing: var(--ls-label); + letter-spacing: var(--ls-la); text-decoration: none; } diff --git a/css/index.css b/css/index.css index d16b05a..f130ba3 100644 --- a/css/index.css +++ b/css/index.css @@ -54,25 +54,12 @@ padding: 44px 0; } -.hero__left .badge { - margin-bottom: var(--space-3); -} - -.hero__left h1 { - font-size: 2.64rem; - color: var(--black); -} - -.hero__left p { - margin: 24px 0 32px; - line-height: 1.8; -} - -.hero__buttons { +/* +.hero__button-primarys { display: flex; gap: var(--space-3); flex-wrap: wrap; -} +}*/ .hero__right { display: flex; @@ -369,7 +356,7 @@ } -/* --- CTA button --- */ +/* --- CTA button-primary --- */ .btn { border: none; diff --git a/css/my_profil.css b/css/my_profil.css index 3e7095f..c378347 100644 --- a/css/my_profil.css +++ b/css/my_profil.css @@ -19,7 +19,7 @@ color: var(--olive); font-size: 1rem; font-weight: 500; - letter-spacing: var(--ls-label); + letter-spacing: var(--ls-la); } #profile-headline { @@ -161,7 +161,7 @@ color: var(--olive); font-size: 0.72rem; font-weight: 700; - letter-spacing: var(--ls-label); + letter-spacing: var(--ls-la); text-transform: uppercase; } @@ -261,7 +261,7 @@ color: var(--olive); font-size: 0.8rem; font-weight: 600; - letter-spacing: var(--ls-label); + letter-spacing: var(--ls-la); text-transform: uppercase; } diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css index ab73b3c..2cb741f 100644 --- a/css/stylesheet_global.css +++ b/css/stylesheet_global.css @@ -20,12 +20,12 @@ --tomato: #D44B24; --tomato-dark: #D44B24; --olive: #6B6B05; - --olive-dark: #5C5C05; + --olive-dark: #545404; --olive-light: #C8CC7A; --butter: #F5F1BC; --butter-light: #F7F6E6; --white: #ffffff; - --black: #22211A; + --black: #141411; --brown: #66340d; --blue: #3489DA; --blue-dark: #1D70BF; @@ -34,35 +34,36 @@ --font-main: 'Jost', sans-serif; --font-size-base: 1rem; - /* Spacing Scale */ - --space-1: 0.5rem; - --space-2: 0.75rem; - --space-3: 1rem; - --space-4: 1.25rem; - --space-5: 1.5rem; - --space-6: 2rem; - --space-7: 3rem; - --space-8: 4rem; + /* Shadows */ + --shadow-interaction: 0 0.1875rem 0.75rem rgba(102, 52, 13, 0.1); + --shadow-error: 0 0 0 2px rgba(255, 59, 48, 0.1); + + /* Spacing Scale > 1rem = 16px*/ + --space-1: 0.5rem; /* 8px */ + --space-2: 0.75rem; /* 12px */ + --space-3: 1rem; /* 16px */ + --space-4: 1.5rem; /* 24px */ + --space-5: 2rem; /* 32px */ + --space-6: 2.5rem; /* 40px */ + --space-7: 3rem; /* 48px */ + --space-8: 4rem; /* 64px */ /* Radius Scale */ - --radius-pill: 62.4375rem; + --radius-pill: 100rem; --radius-sm: 0.5rem; - --radius-md: 1.5rem; - --radius-lg: 1.875rem; + --radius-md: 1rem; + --radius-lg: 2rem; /* Letter Spacing */ --ls-none: 0; --ls-sm: 2.5%; - --ls-label: 0.045rem; + --ls-la: 5%; } /* Base Styles */ body { font-family: var(--font-main); - font-size: 1.125rem; - line-height: 1.5; - color: var(--black); background-color: var(--butter); } @@ -78,15 +79,28 @@ h1, h2, h3, h4, h5, h6 { } h1 { - font-size: 2em; + font-size: 2.5rem; font-weight: 600; line-height: 120%; letter-spacing: var(--ls-sm); color: var(--brown); + margin-bottom: 2rem; +} + +h2 { + font-size: 2rem; + font-weight: 600; + line-height: 120%; + letter-spacing: var(--ls-sm); + color: var(--brown); + margin-bottom: 1.5rem; } p { font-family: 'Jost', sans-serif; + font-size: 1.125rem; + line-height: 1.5; + color: var(--black); margin-bottom: 1rem; } @@ -119,7 +133,7 @@ p { -webkit-backdrop-filter: blur(3px) saturate(140%);*/ border-radius: var(--radius-lg); - box-shadow: 0 0.1875rem 0.75rem rgba(102, 52, 13, 0.1); + box-shadow: var(--shadow-interaction); display: flex; justify-content: space-between; align-items: center; @@ -151,18 +165,20 @@ p { letter-spacing: var(--ls-sm); line-height: 1; text-decoration: none; + padding-bottom: 4px; } .nav-tab:hover, .nav-tab:active, .nav-tab:focus-visible { text-decoration: underline; - text-underline-offset: 4px; + text-underline-offset: 6px; + text-decoration-thickness: 1.5px; } -.button-small:hover, .button-small:active, -.button-small:focus-visible { - background: var(--olive-dark); - color: var(--black); +.nav-tab--active { + text-decoration: underline; + text-underline-offset: 6px; + text-decoration-thickness: 1.5px; } .nav-tab-links { @@ -174,24 +190,39 @@ p { /* Badge */ .badge { + position: relative; display: inline-block; - padding: 0.25rem 0.75rem; - background-color: var(--olive-light); + width: fit-content; color: var(--olive-dark); - font-family: 'Jost', sans-serif; - font-size: 0.75rem; + font-family: var(--font-main); + font-size: 1rem; font-weight: 600; - letter-spacing: 0.08rem; - text-transform: uppercase; - border-radius: var(--radius-pill); - line-height: 1.4; + letter-spacing: var(--ls-la); + margin-bottom: var(--space-6); + z-index: 0; +} + +.badge::before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--olive-light); + margin: -0.25rem -0.75rem; + z-index: -1; + + clip-path: polygon( + 1.5% 0%, + 100% 0%, + 98.5% 100%, + 0% 100% + ); } /* Buttons */ -.button { +.button-primary { display: inline-block; - padding: 0.5rem 1.25rem; + padding: 0.5rem 1.5rem; background-color: var(--olive); border: none; border-radius: var(--radius-lg); @@ -201,9 +232,10 @@ p { color: var(--butter-light); cursor: pointer; text-decoration: none; + transition: background-color 0.2s ease; } -.button:hover { +.button-primary:hover { background-color: var(--olive-dark); } @@ -218,6 +250,24 @@ p { color: var(--black); } +.counter-button { + padding: 0.5rem 1rem; + width: 46px; + background-color: var(--olive); + border: none; + border-radius: var(--radius-lg); + font-family: 'Jost', sans-serif; + font-weight: 400; + font-size: 1.25rem; + color: var(--butter-light); + cursor: pointer; + text-decoration: none; + transition: background-color 0.2s ease; +} + +.counter-button:hover, .counter-button:focus-visible { + background-color: var(--olive-dark); +} .button-small { background: var(--olive); @@ -262,7 +312,7 @@ p { height: 2.375rem; border-radius: 1.1875rem; background: var(--tomato); - color: var(--butter); + color: var(--white); font-size: 1.0625rem; font-weight: 500; letter-spacing: var(--ls-ui); diff --git a/event_create.html b/event_create.html index 4b2aeba..51bcd3c 100644 --- a/event_create.html +++ b/event_create.html @@ -3,16 +3,19 @@ - Event erstellen | Invité + Invité | Event erstellen - - + + + + +
@@ -38,13 +41,13 @@ >
-

Event erstellen

+

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.

-
@@ -62,7 +65,7 @@
-

Schritt 1

+

Schritt 1

Was hast du vor?

Erzähl uns, was für ein Event du planst. Ist es ein gemütlicher Brunch, @@ -135,7 +138,7 @@

-

Schritt 2

+

Schritt 2

Was kommt auf den Tisch?

Mach uns neugierig. Was gibt es zu essen? Gibt es eine bestimmte Ernährungsform oder ein Motto? Je mehr du verrätst, desto besser können sich deine Gäste auf dein Event freuen. @@ -176,7 +179,7 @@

-

Schritt 3

+

Schritt 3

Gibt es etwas zu beachten?

Gibt es Allergien, Unverträglichkeiten oder andere Hinweise, die für dein Event wichtig sind? So wissen deine Gäste gleich, worauf sie sich einstellen können. @@ -217,7 +220,7 @@

-

Schritt 4

+

Schritt 4

Wann findet dein Event statt?

Wähle Datum und Uhrzeit für dein Event. So können deine Gäste direkt einschätzen, ob der Termin für sie passt. @@ -243,7 +246,7 @@

-

Schritt 5

+

Schritt 5

Wo findet dein Event statt?

Sag uns, wo dein Event stattfindet. Keine Sorge: Die genaue Adresse sehen Gäste erst nach der Buchung. @@ -267,7 +270,7 @@

-

Schritt 6

+

Schritt 6

Gib deinem Event den letzten Schliff.

Jetzt bekommt dein Event seinen Namen und die Atmosphäre, die Lust aufs Dabeisein macht. @@ -301,7 +304,7 @@

-

Schritt 7

+

Schritt 7

Dein Event auf einen Blick.

Schau dir alle Details nochmal in Ruhe an. Wenn alles passt, @@ -379,11 +382,11 @@

- +
- +
@@ -397,7 +400,7 @@ >
-

Event erstellt

+

Event erstellt

Dein Event ist ready.

Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste. @@ -407,7 +410,7 @@

- Weiter zu deinem Profil + Weiter zu deinem Profil
diff --git a/index.html b/index.html index 731e7e9..a2f986e 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,14 @@ - Invité | Events entdecken + Invité + + + - - + @@ -31,10 +33,10 @@
- Einfach. Lecker. Gemeinsam. + einfach. lecker. gemeinsam.

Teile deine Leidenschaft, geniesse gemeinsam.

Ob du als leidenschaftlicher Hobbykoch Gastgeber sein möchtest oder als Feinschmecker einen Platz an einem lokalen Tisch suchst Invité verbindet Menschen durch die Kraft einer gemeinsamen Mahlzeit.

- Anmelden + Anmelden
diff --git a/js/my_profil.js b/js/my_profil.js index 5ad8c9d..1692ee9 100644 --- a/js/my_profil.js +++ b/js/my_profil.js @@ -494,7 +494,7 @@

Keine Treffer

${emptyStateConfig.title}

${emptyStateConfig.text}

- ${emptyStateConfig.buttonLabel} + ${emptyStateConfig.buttonLabel} `; container.appendChild(emptyElement); return; diff --git a/js/navigation.js b/js/navigation.js index 0b7f8c5..31f943a 100644 --- a/js/navigation.js +++ b/js/navigation.js @@ -68,11 +68,31 @@ document.addEventListener('DOMContentLoaded', () => { function buildLoggedInNavigation(user) { const initial = (user.vorname || 'U').charAt(0).toUpperCase(); const isEventOverview = currentPage === 'event_overview.html'; + const isEventCreate = currentPage === 'event_create.html'; return ` - ${isEventOverview ? '' : 'Event finden'} - Event erstellen - ${initial} + + Event finden + + + Event erstellen + + + ${initial} + `; } diff --git a/login.html b/login.html index 5cdded3..5dda876 100644 --- a/login.html +++ b/login.html @@ -48,7 +48,7 @@
Bitte gib dein Passwort ein.
- +
@@ -96,7 +96,7 @@

Das Passwort muss mindestens 6 Zeichen lang sein.

- +

@@ -114,8 +114,8 @@ Bist du sicher, dass du dich abmelden möchtest?
- - + +
@@ -134,8 +134,8 @@ Bist du sicher, dass du dieses Event absagen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.
- - + +
diff --git a/signup.html b/signup.html index 5c18feb..1e86667 100644 --- a/signup.html +++ b/signup.html @@ -64,7 +64,7 @@
Dein Passwort muss mindestens 8 Zeichen lang sein.
- +
- +