Anpassung primary-button, badge und Event erstellen
This commit is contained in:
parent
9d763b3680
commit
9a2c66e026
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -3,16 +3,19 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Event erstellen | Invité</title>
|
||||
<title>Invité | Event erstellen</title>
|
||||
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||
<!-- Stylesheet für diese Seite-->
|
||||
<link rel="stylesheet" href="css/event_create.css" />
|
||||
<script src="js/navigation.js" defer></script>
|
||||
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Top Navigation mit Seitenlinks -->
|
||||
<header class="top-nav-wrap">
|
||||
<div class="top-nav">
|
||||
@ -38,13 +41,13 @@
|
||||
>
|
||||
<div class="step-layout step-layout--intro">
|
||||
<div class="step-copy">
|
||||
<p class="step-kicker">Event erstellen</p>
|
||||
<p class="badge">Event erstellen</p>
|
||||
<h1 id="intro-title">Hey <span id="username">{{username}}</span>, was hast du vor?</h1>
|
||||
<p class="step-text">
|
||||
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.
|
||||
</p>
|
||||
<button type="button" class="button button--primary button--intro" data-start-flow>
|
||||
<button type="button" class="button-primary button--intro" data-start-flow>
|
||||
Los geht’s!
|
||||
</button>
|
||||
</div>
|
||||
@ -62,7 +65,7 @@
|
||||
<section class="step" data-step="1" aria-labelledby="step1-title">
|
||||
<div class="step-layout">
|
||||
<div class="step-copy">
|
||||
<p class="step-kicker">Schritt 1</p>
|
||||
<p class="badge">Schritt 1</p>
|
||||
<h2 id="step1-title">Was hast du vor?</h2>
|
||||
<p class="step-text">
|
||||
Erzähl uns, was für ein Event du planst. Ist es ein gemütlicher Brunch,
|
||||
@ -135,7 +138,7 @@
|
||||
<section class="step" data-step="2" aria-labelledby="step2-title">
|
||||
<div class="step-layout">
|
||||
<div class="step-copy">
|
||||
<p class="step-kicker">Schritt 2</p>
|
||||
<p class="badge">Schritt 2</p>
|
||||
<h2 id="step2-title">Was kommt auf den Tisch?</h2>
|
||||
<p class="step-text">
|
||||
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 @@
|
||||
<section class="step" data-step="3" aria-labelledby="step3-title">
|
||||
<div class="step-layout">
|
||||
<div class="step-copy">
|
||||
<p class="step-kicker">Schritt 3</p>
|
||||
<p class="badge">Schritt 3</p>
|
||||
<h2 id="step3-title">Gibt es etwas zu beachten?</h2>
|
||||
<p class="step-text">
|
||||
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 @@
|
||||
<section class="step" data-step="4" aria-labelledby="step4-title">
|
||||
<div class="step-layout">
|
||||
<div class="step-copy">
|
||||
<p class="step-kicker">Schritt 4</p>
|
||||
<p class="badge">Schritt 4</p>
|
||||
<h2 id="step4-title">Wann findet dein Event statt?</h2>
|
||||
<p class="step-text">
|
||||
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 @@
|
||||
<section class="step" data-step="5" aria-labelledby="step5-title">
|
||||
<div class="step-layout">
|
||||
<div class="step-copy">
|
||||
<p class="step-kicker">Schritt 5</p>
|
||||
<p class="badge">Schritt 5</p>
|
||||
<h2 id="step5-title">Wo findet dein Event statt?</h2>
|
||||
<p class="step-text">
|
||||
Sag uns, wo dein Event stattfindet. Keine Sorge: Die genaue Adresse sehen Gäste erst nach der Buchung.
|
||||
@ -267,7 +270,7 @@
|
||||
<section class="step" data-step="6" aria-labelledby="step6-title">
|
||||
<div class="step-layout">
|
||||
<div class="step-copy">
|
||||
<p class="step-kicker">Schritt 6</p>
|
||||
<p class="badge">Schritt 6</p>
|
||||
<h2 id="step6-title">Gib deinem Event den letzten Schliff.</h2>
|
||||
<p class="step-text">
|
||||
Jetzt bekommt dein Event seinen Namen und die Atmosphäre, die Lust aufs Dabeisein macht.
|
||||
@ -301,7 +304,7 @@
|
||||
<section class="step" data-step="7" aria-labelledby="step7-title">
|
||||
<div class="step-layout">
|
||||
<div class="step-copy">
|
||||
<p class="step-kicker">Schritt 7</p>
|
||||
<p class="badge">Schritt 7</p>
|
||||
<h2 id="step7-title">Dein Event auf einen Blick.</h2>
|
||||
<p class="step-text">
|
||||
Schau dir alle Details nochmal in Ruhe an. Wenn alles passt,
|
||||
@ -379,11 +382,11 @@
|
||||
</div>
|
||||
|
||||
<div class="flow-actions">
|
||||
<button type="button" id="backButton" class="button button--text">Zurück</button>
|
||||
<button type="button" id="backButton" class="button-primary">Zurück</button>
|
||||
|
||||
<div class="flow-actions-right">
|
||||
<p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p>
|
||||
<button type="button" id="nextButton" class="button button--primary">Weiter</button>
|
||||
<button type="button" id="nextButton" class="button-primary button--primary">Weiter</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -397,7 +400,7 @@
|
||||
>
|
||||
<div class="step-layout">
|
||||
<div class="step-copy">
|
||||
<p class="step-kicker">Event erstellt</p>
|
||||
<p class="badge">Event erstellt</p>
|
||||
<h2 id="success-title">Dein Event ist ready.</h2>
|
||||
<p class="step-text">
|
||||
Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste.
|
||||
@ -407,7 +410,7 @@
|
||||
|
||||
<div class="review-card review-card--success">
|
||||
<div class="submission-success-actions">
|
||||
<a class="button button--primary" href="my_profil.html">Weiter zu deinem Profil</a>
|
||||
<a class="button-primary button--primary" href="my_profil.html">Weiter zu deinem Profil</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
12
index.html
12
index.html
@ -3,12 +3,14 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Invité | Events entdecken</title>
|
||||
<title>Invité</title>
|
||||
|
||||
<!-- Stylesheet für diese Seite-->
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||
<!-- Stylesheet für diese Seite-->
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
|
||||
<!-- Font Awesome Icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<script src="js/navigation.js" defer></script>
|
||||
@ -31,10 +33,10 @@
|
||||
<!-- Hero: uses .hero, .btn, .image-card, and .hero-image for a polished first impression -->
|
||||
<section class="hero">
|
||||
<div class="hero__left">
|
||||
<span class="badge">Einfach. Lecker. Gemeinsam.</span>
|
||||
<span class="badge">einfach. lecker. gemeinsam.</span>
|
||||
<h1>Teile deine Leidenschaft, geniesse gemeinsam.</h1>
|
||||
<p>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.</p>
|
||||
<a class="button" href="signup.html">Anmelden</a>
|
||||
<a class="button-primary" href="signup.html">Anmelden</a>
|
||||
</div>
|
||||
|
||||
<div class="hero__right">
|
||||
|
||||
@ -494,7 +494,7 @@
|
||||
<p class="profile-empty-kicker">Keine Treffer</p>
|
||||
<h3>${emptyStateConfig.title}</h3>
|
||||
<p>${emptyStateConfig.text}</p>
|
||||
<a class="button" href="${emptyStateConfig.href}">${emptyStateConfig.buttonLabel}</a>
|
||||
<a class="button-primary" href="${emptyStateConfig.href}">${emptyStateConfig.buttonLabel}</a>
|
||||
`;
|
||||
container.appendChild(emptyElement);
|
||||
return;
|
||||
|
||||
@ -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 ? '' : '<a class="nav-tab" href="event_overview.html">Event finden</a>'}
|
||||
<a class="button-small" href="event_create.html">Event erstellen</a>
|
||||
<a class="profile-pill" href="my_profil.html" aria-label="Mein Profil" title="${user.vorname || 'Profil'}">${initial}</a>
|
||||
<a
|
||||
class="nav-tab${isEventOverview ? ' nav-tab--active' : ''}"
|
||||
href="event_overview.html"
|
||||
${isEventOverview ? 'aria-current="page"' : ''}
|
||||
>
|
||||
Event finden
|
||||
</a>
|
||||
<a
|
||||
class="nav-tab${isEventCreate ? ' nav-tab--active' : ''}"
|
||||
href="event_create.html"
|
||||
${isEventCreate ? 'aria-current="page"' : ''}
|
||||
>
|
||||
Event erstellen
|
||||
</a>
|
||||
<a
|
||||
class="profile-pill"
|
||||
href="my_profil.html"
|
||||
aria-label="Mein Profil"
|
||||
title="${user.vorname || 'Profil'}"
|
||||
>
|
||||
${initial}
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
<div class="error-message" id="passwortError">Bitte gib dein Passwort ein.</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button">Login</button>
|
||||
<button type="submit" class="button-primary">Login</button>
|
||||
|
||||
<div class="signup-hint">
|
||||
Du hast noch keinen Account? <a href="signup.html">Hier geht es zur Anmeldung.</a>
|
||||
|
||||
@ -38,8 +38,8 @@
|
||||
<h2 class="panel-title">Du bist noch nicht eingeloggt</h2>
|
||||
<p>Melde dich an, damit wir deine Events und Anmeldungen anzeigen können.</p>
|
||||
<div class="profile-cta-row">
|
||||
<a class="button" href="login.html">Zum Login</a>
|
||||
<a class="button profile-button-secondary" href="signup.html">Konto erstellen</a>
|
||||
<a class="button-primary" href="login.html">Zum Login</a>
|
||||
<a class="button-primary profile-button-secondary" href="signup.html">Konto erstellen</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
<p class="input-error" id="passwort-error">Das Passwort muss mindestens 6 Zeichen lang sein.</p>
|
||||
</div>
|
||||
|
||||
<button class="button" type="submit">Profil speichern</button>
|
||||
<button class="button-primary" type="submit">Profil speichern</button>
|
||||
<p id="profile-feedback" class="profile-feedback" aria-live="polite"></p>
|
||||
</form>
|
||||
</article>
|
||||
@ -114,8 +114,8 @@
|
||||
Bist du sicher, dass du dich abmelden möchtest?
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="button button--outline" type="button" onclick="closeLogoutModal()">Abbrechen</button>
|
||||
<button class="button" type="button" onclick="confirmLogout()">Abmelden</button>
|
||||
<button class="button-primary button--outline" type="button" onclick="closeLogoutModal()">Abbrechen</button>
|
||||
<button class="button-primary" type="button" onclick="confirmLogout()">Abmelden</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -134,8 +134,8 @@
|
||||
Bist du sicher, dass du dieses Event absagen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="button button--outline" type="button" onclick="closeCancelEventModal()">Abbrechen</button>
|
||||
<button class="button" type="button" id="confirmCancelEventBtn" style="background-color: var(--tomato); border-color: var(--tomato);">Event absagen</button>
|
||||
<button class="button-primary button--outline" type="button" onclick="closeCancelEventModal()">Abbrechen</button>
|
||||
<button class="button-primary" type="button" id="confirmCancelEventBtn" style="background-color: var(--tomato); border-color: var(--tomato);">Event absagen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
<div class="error-message" id="passwortError">Dein Passwort muss mindestens 8 Zeichen lang sein.</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button">Konto erstellen</button>
|
||||
<button type="submit" class="button-primary">Konto erstellen</button>
|
||||
|
||||
|
||||
<div class="login-hint">
|
||||
@ -86,7 +86,7 @@
|
||||
Willkommen bei Invité! Dein Account wurde erfolgreich erstellt. Entdecke jetzt die neuesten Events in deiner Nähe.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="button" onclick="closeWelcomeModal()">Weiter zu den Events</button>
|
||||
<button class="button-primary" onclick="closeWelcomeModal()">Weiter zu den Events</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user