Compare commits
No commits in common. "main" and "adresse-fix" have entirely different histories.
main
...
adresse-fi
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 18 KiB |
40
assets/icon_eating-svgrepo-com.svg
Normal file
40
assets/icon_eating-svgrepo-com.svg
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 298.748 298.748" xml:space="preserve">
|
||||||
|
<g id="XMLID_1429_">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M89.486,99.966l5.118,2.999l10.451-6.427c1.463-0.9,2.999-1.573,4.57-2.038l-12.606-7.387
|
||||||
|
c-3.552-2.081-8.113-0.889-10.193,2.661C84.746,93.323,85.937,97.887,89.486,99.966z"/>
|
||||||
|
<path d="M194.008,187.239c5.392,0,9.764-4.372,9.764-9.764c0-5.393-4.372-9.764-9.764-9.764H99.344
|
||||||
|
c-5.393,0-9.764,4.372-9.764,9.764c0,5.393,4.372,9.764,9.764,9.764h39.885v46.522h-7.948c-4.113,0-7.447,3.334-7.447,7.447
|
||||||
|
c0,4.113,3.334,7.447,7.447,7.447h30.791c4.113,0,7.447-3.334,7.447-7.447c0-4.113-3.334-7.447-7.447-7.447h-7.949v-46.522
|
||||||
|
H194.008z"/>
|
||||||
|
<path d="M80.72,177.226c-1.169-3.279-3.799-5.825-7.112-6.888l-10.951-3.51l7.194-25.11l-18.93-16.393l30.517,14.102
|
||||||
|
c2.778,1.283,6.078,1.142,8.782-0.521l29.67-18.248c4.379-2.694,5.746-8.427,3.052-12.806c-2.694-4.379-8.427-5.746-12.806-3.052
|
||||||
|
l-25.418,15.634l-25.987-12.009l13.749,2.106c-1.581-1.776-3.658-3.147-6.112-3.851l-21.263-6.092
|
||||||
|
c-3.485-0.998-7.227-0.497-10.326,1.384c-3.099,1.881-5.271,4.97-5.993,8.522l-12.821,63.063
|
||||||
|
c-0.664,3.266,0.174,6.657,2.283,9.237c0.327,0.4,0.686,0.764,1.06,1.11H7.621c-0.541,0-1.067,0.061-1.576,0.17
|
||||||
|
C2.603,184.73,0,187.751,0,191.384v49.815c0,4.113,3.334,7.447,7.447,7.447s7.447-3.334,7.447-7.447v-42.401H49.29v42.401
|
||||||
|
c0,4.113,3.334,7.447,7.447,7.447s7.447-3.334,7.447-7.447v-43.818l15.626,43.848c2.072,5.815,8.466,8.843,14.272,6.772
|
||||||
|
c5.812-2.071,8.844-8.461,6.773-14.273L80.72,177.226z"/>
|
||||||
|
<circle cx="66.103" cy="76.449" r="19.243"/>
|
||||||
|
<circle cx="252.446" cy="69.335" r="19.243"/>
|
||||||
|
<path d="M291.129,183.905h-14.077c0.415-0.256,0.819-0.532,1.201-0.844c2.579-2.111,4.073-5.268,4.07-8.6l-0.054-64.353
|
||||||
|
c-0.006-7.573-6.471-13.548-14.029-12.947l-22.049,1.752c-7.156,0.569-12.498,6.831-11.929,13.988l0.922,11.603l1.781-0.025
|
||||||
|
l16.473-14.381l-15.502,24.067l-29.838,0.426c-5.14,0.073-9.248,4.3-9.175,9.441c0.073,5.095,4.226,9.176,9.305,9.176
|
||||||
|
c0.045,0,0.091,0,0.136-0.001l34.828-0.498c3.117-0.044,6.005-1.646,7.693-4.267l18.205-28.263l-10.052,33.515
|
||||||
|
c-1.559,5.197-6.287,8.576-11.439,8.655c-5.26,0.071-3.13,0.042-9.398,0.131l0.362,4.555l-12.661,3.092
|
||||||
|
c-3.652,0.892-6.611,3.561-7.872,7.102l-20.136,56.505c-2.072,5.812,0.961,12.201,6.773,14.273
|
||||||
|
c5.812,2.072,12.202-0.963,14.272-6.772l15.626-43.85v43.82c0,4.113,3.335,7.447,7.447,7.447c4.113,0,7.447-3.334,7.447-7.447
|
||||||
|
v-42.401h34.395v42.401c0,4.113,3.335,7.447,7.447,7.447s7.447-3.334,7.447-7.447v-49.815
|
||||||
|
C298.748,187.265,295.406,183.905,291.129,183.905z"/>
|
||||||
|
<path d="M104.088,144.815c-0.057,0.25-0.09,0.502-0.09,0.757c0,4.239,6.881,7.896,16.812,9.586v1.397
|
||||||
|
c0,2.202,1.786,3.988,3.988,3.988h16.795c2.203,0,3.988-1.786,3.988-3.988v-1.396c9.931-1.69,16.812-5.346,16.812-9.586
|
||||||
|
c0-0.255-0.032-0.506-0.088-0.755c-0.11-0.487-0.933-0.854-1.915-0.854h-54.387C105.024,143.963,104.2,144.33,104.088,144.815z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 313 KiB After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 145 KiB |
@ -29,15 +29,14 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
.submission-success {
|
.submission-success {
|
||||||
padding: var(--space-24) 0 var(--space-48);
|
padding: var(--space-4) 0 var(--space-7);
|
||||||
}*/
|
}
|
||||||
|
|
||||||
.submission-success-title-row {
|
.submission-success-title-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-32);
|
gap: var(--space-5);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -77,16 +76,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.startseite {
|
.startseite {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 80px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-layout--intro {
|
.step-layout--intro {
|
||||||
min-height: 60vh;
|
min-height: 60vh;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: var(--space-48);
|
gap: var(--space-7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-copy,
|
.step-copy,
|
||||||
@ -94,15 +91,16 @@
|
|||||||
.form-field,
|
.form-field,
|
||||||
fieldset {
|
fieldset {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
gap: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-copy {
|
.step-copy {
|
||||||
gap: var(--space-24);
|
gap: var(--space-4);
|
||||||
align-content: start;
|
align-content: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-fields {
|
.step-fields {
|
||||||
gap: var(--space-32);
|
gap: var(--space-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-field,
|
.form-field,
|
||||||
@ -110,6 +108,7 @@ fieldset {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
gap: var(--space-16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -131,18 +130,29 @@ fieldset {
|
|||||||
background: linear-gradient(135deg, var(--color-surface), var(--color-surface-soft));
|
background: linear-gradient(135deg, var(--color-surface), var(--color-surface-soft));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.intro-card--image {
|
||||||
|
width: 60%;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
.intro-image {
|
.intro-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.field-hint {
|
.field-hint {
|
||||||
color: var(--olive);
|
margin: -0.25rem 0 0;
|
||||||
font-size: 1rem;
|
color: var(--color-muted);
|
||||||
margin-bottom: var(--space-8);
|
font-size: 0.95rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
@ -152,8 +162,8 @@ input[type="number"],
|
|||||||
textarea {
|
textarea {
|
||||||
font-family: var(--font-main);
|
font-family: var(--font-main);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1.125rem;
|
font-size: 1.25rem;;
|
||||||
padding: var(--space-16) var(--space-20);
|
padding: 1rem 1.25rem;
|
||||||
border: 1.5px solid var(--olive-light);
|
border: 1.5px solid var(--olive-light);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
background: var(--butter-light);
|
background: var(--butter-light);
|
||||||
@ -183,7 +193,7 @@ input[type="date"]:hover,
|
|||||||
input[type="time"]:hover,
|
input[type="time"]:hover,
|
||||||
input[type="number"]:hover,
|
input[type="number"]:hover,
|
||||||
textarea:hover {
|
textarea:hover {
|
||||||
border: 2px solid var(--olive);
|
border-color: rgba(102, 52, 13, 0.28);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"]:focus,
|
input[type="text"]:focus,
|
||||||
@ -191,7 +201,7 @@ input[type="date"]:focus,
|
|||||||
input[type="time"]:focus,
|
input[type="time"]:focus,
|
||||||
input[type="number"]:focus,
|
input[type="number"]:focus,
|
||||||
textarea:focus {
|
textarea:focus {
|
||||||
border: 2px solid var(--olive);
|
border-color: var(--olive-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-invalid {
|
.field-invalid {
|
||||||
@ -201,7 +211,7 @@ textarea:focus {
|
|||||||
|
|
||||||
.field-row {
|
.field-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--space-24);
|
gap: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-grid {
|
.option-grid {
|
||||||
@ -222,13 +232,14 @@ textarea:focus {
|
|||||||
.option-card--with-icon {
|
.option-card--with-icon {
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
gap: var(--space-12);
|
gap: var(--space-2);
|
||||||
color: var(--black);
|
color: var(--brown);
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-card__icon {
|
.option-card__icon {
|
||||||
color: var(--black);
|
color: var(--brown);
|
||||||
font-size: 1.25rem;
|
font-size: 1.35rem;
|
||||||
|
line-height: 1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -244,25 +255,38 @@ textarea:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.option-grid--tomato-choices .option-card:hover,
|
.option-grid--tomato-choices .option-card:hover,
|
||||||
.option-grid--tomato-choices .option-card:has(input:focus-visible),
|
.option-grid--tomato-choices .option-card:has(input:focus-visible) {
|
||||||
|
border-color: var(--tomato);
|
||||||
|
background: var(--tomato);
|
||||||
|
color: var(--butter-light);
|
||||||
|
}
|
||||||
|
|
||||||
.option-grid--tomato-choices .option-card:has(input:checked) {
|
.option-grid--tomato-choices .option-card:has(input:checked) {
|
||||||
background: var(--olive-light);
|
border-color: var(--tomato);
|
||||||
|
background: var(--tomato);
|
||||||
|
color: var(--butter-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-grid--icon-choices .option-card--with-icon:hover .option-card__icon,
|
||||||
|
.option-grid--icon-choices .option-card--with-icon:has(input:focus-visible) .option-card__icon,
|
||||||
|
.option-grid--icon-choices .option-card--with-icon:has(input:checked) .option-card__icon {
|
||||||
|
color: var(--butter-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-grid--icon-choices .option-card--with-icon:has(input:disabled) {
|
.option-grid--icon-choices .option-card--with-icon:has(input:disabled) {
|
||||||
opacity: 0.6;
|
opacity: 0.45;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover {
|
.option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover {
|
||||||
border-color: var(--olive-light);
|
border-color: var(--olive-light);
|
||||||
background: var(--butter-light);
|
background: var(--butter-light);
|
||||||
color: var(--black);
|
color: var(--brown);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover .option-card__icon {
|
.option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover .option-card__icon {
|
||||||
color: var(--black);
|
color: var(--brown);
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-card input {
|
.option-card input {
|
||||||
@ -279,18 +303,23 @@ textarea:focus {
|
|||||||
|
|
||||||
.option-card--invalid {
|
.option-card--invalid {
|
||||||
border-color: var(--error) !important;
|
border-color: var(--error) !important;
|
||||||
box-shadow: var(--shadow-error);
|
box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14);
|
||||||
}
|
}
|
||||||
|
|
||||||
.guest-count-icon {
|
.guest-count-icon {
|
||||||
display: block;
|
display: flex;
|
||||||
text-align: center;
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: var(--black);
|
color: var(--brown);
|
||||||
font-size: 1.5rem;
|
font-size: 3rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.guest-count-icon::before {
|
||||||
|
display: block;
|
||||||
|
transform: translateX(1.1rem);
|
||||||
|
}
|
||||||
|
|
||||||
.counter {
|
.counter {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -299,8 +328,8 @@ textarea:focus {
|
|||||||
|
|
||||||
.counter-value-group {
|
.counter-value-group {
|
||||||
display: grid;
|
display: grid;
|
||||||
justify-items: center;
|
justify-items: stretch;
|
||||||
row-gap: var(--space-8);
|
row-gap: var(--space-1);
|
||||||
width: 6rem;
|
width: 6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -313,7 +342,7 @@ textarea:focus {
|
|||||||
|
|
||||||
.review-card {
|
.review-card {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--space-24);
|
gap: var(--space-4);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
@ -323,7 +352,7 @@ textarea:focus {
|
|||||||
|
|
||||||
.review-card--success {
|
.review-card--success {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--space-32);
|
gap: var(--space-5);
|
||||||
padding: var(--space-16) 0 0;
|
padding: var(--space-16) 0 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
@ -333,39 +362,51 @@ textarea:focus {
|
|||||||
|
|
||||||
.review-list {
|
.review-list {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--space-12);
|
gap: var(--space-4);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-item {
|
.review-item {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
gap: var(--space-2);
|
||||||
padding: 1rem 1.1rem;
|
padding: 1rem 1.1rem;
|
||||||
border: 1.5px solid var(--olive-light);
|
border: 1px solid var(--input-border-soft);
|
||||||
border-radius: 1.125rem;
|
border-radius: 1.125rem;
|
||||||
background: var(--butter-light);
|
background: var(--butter-light);
|
||||||
|
box-shadow: 0 1px 2px rgba(102, 52, 13, 0.04);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
|
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-item:hover,
|
.review-item:last-child {
|
||||||
.review-item:focus-visible {
|
border-bottom: 1px solid var(--input-border-soft);
|
||||||
border: 2px solid var(--olive);
|
}
|
||||||
box-shadow: var(--shadow-interaction);
|
|
||||||
transform: translateY(-3px);
|
.review-item:hover {
|
||||||
|
border-color: rgba(102, 52, 13, 0.28);
|
||||||
|
background: rgba(247, 246, 230, 0.92);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-item:focus-visible {
|
||||||
|
outline: 3px solid rgba(107, 107, 5, 0.2);
|
||||||
|
outline-offset: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-item dt {
|
.review-item dt {
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-item dd {
|
.review-item dd {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-gallery {
|
.review-gallery {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: var(--space-8);
|
gap: var(--space-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-gallery__thumb {
|
.review-gallery__thumb {
|
||||||
@ -383,8 +424,9 @@ textarea:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.flow-footer {
|
.flow-footer {
|
||||||
padding-top: var(--space-80);
|
bottom: 0;
|
||||||
backdrop-filter: none;
|
backdrop-filter: none;
|
||||||
|
padding-top: var(--space-4);
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -437,7 +479,8 @@ textarea:focus {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: var(--space-24);
|
gap: var(--space-4);
|
||||||
|
padding: var(--space-4) 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -461,7 +504,14 @@ textarea:focus {
|
|||||||
|
|
||||||
.button--intro {
|
.button--intro {
|
||||||
justify-self: start;
|
justify-self: start;
|
||||||
margin-top: var(--space-12);
|
margin-top: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-upload {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-preview {
|
.gallery-preview {
|
||||||
@ -469,22 +519,25 @@ textarea:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gallery-add-button {
|
.gallery-add-button {
|
||||||
|
width: 7rem;
|
||||||
|
height: 7rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
gap: var(--space-8);
|
gap: var(--space-1);
|
||||||
padding: var(--space-20);
|
padding: var(--space-1);
|
||||||
border: 1.5px solid var(--olive-light);
|
border: 1.5px solid var(--olive-light);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
background: var(--butter-light);
|
background: var(--butter-light);
|
||||||
|
color: var(--olive);
|
||||||
font-family: var(--font-main);
|
font-family: var(--font-main);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-add-button__icon {
|
.gallery-add-button__icon {
|
||||||
color: var(--black);
|
color: var(--brown);
|
||||||
font-size: 1.5rem;
|
font-size: 2rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -540,7 +593,7 @@ textarea:focus {
|
|||||||
.site-footer {
|
.site-footer {
|
||||||
width: min(100% - 2rem, var(--max-width));
|
width: min(100% - 2rem, var(--max-width));
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: var(--space-32) 0 var(--space-40);
|
padding: var(--space-5) 0 var(--space-40);
|
||||||
color: var(--color-muted);
|
color: var(--color-muted);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -573,7 +626,7 @@ textarea:focus-visible {
|
|||||||
position: static;
|
position: static;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin-bottom: var(--space-12);
|
margin-bottom: var(--space-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-wrap {
|
.progress-wrap {
|
||||||
|
|||||||
@ -12,19 +12,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Heading hierarchy: page title > detail title > card title > section title */
|
/* Heading hierarchy: page title > detail title > card title > section title */
|
||||||
|
.overview-title {
|
||||||
|
margin: 0 0 var(--space-4);
|
||||||
|
color: var(--olive);
|
||||||
|
font-family: "Bagel Fat One", cursive;
|
||||||
|
font-size: clamp(38px, 5vw, 44px);
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.15;
|
||||||
|
}
|
||||||
|
|
||||||
.overview-title-row {
|
.overview-title-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: var(--space-24);
|
gap: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-title-row .overview-title {
|
.overview-title-row .overview-title {
|
||||||
margin-bottom: var(--space-24);
|
margin-bottom: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-title {
|
.detail-title {
|
||||||
margin-bottom: var(--space-24);
|
margin-bottom: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-section-title {
|
.detail-section-title {
|
||||||
@ -39,15 +48,26 @@
|
|||||||
/* ---------------------------------------------------------
|
/* ---------------------------------------------------------
|
||||||
Overview Header + Filters
|
Overview Header + Filters
|
||||||
--------------------------------------------------------- */
|
--------------------------------------------------------- */
|
||||||
|
.filter-label {
|
||||||
|
font-family: var(--font-main);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: var(--ls-sm);
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: var(--space-1);
|
||||||
|
}
|
||||||
|
|
||||||
.filter-row {
|
.filter-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-16);
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-group {
|
.category-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--space-6);
|
gap: var(--space-1);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -61,13 +81,13 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
padding: var(--space-8) var(--space-20);
|
padding: var(--space-1) var(--space-20);
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-filter-group {
|
.meta-filter-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
gap: var(--space-12);
|
gap: var(--space-2);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -85,7 +105,7 @@
|
|||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
background: var(--butter-light);
|
background: var(--butter-light);
|
||||||
height: 37px;
|
height: 37px;
|
||||||
padding: 0 var(--space-24);
|
padding: 0 var(--space-4);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -107,8 +127,8 @@
|
|||||||
transition: background-color 0.2s ease;
|
transition: background-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-filter input[type="date"]:hover::-webkit-calendar-picker-indicator {
|
.meta-filter input[type="date"]::-webkit-calendar-picker-indicator:hover {
|
||||||
filter: brightness(0.8);
|
filter: brightness(0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-filter select {
|
.meta-filter select {
|
||||||
@ -118,7 +138,7 @@
|
|||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
background-position: right var(--space-24) center;
|
background-position: right var(--space-4) center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------------------------------------------------------
|
/* ---------------------------------------------------------
|
||||||
@ -135,7 +155,7 @@
|
|||||||
background: var(--butter-light);
|
background: var(--butter-light);
|
||||||
border: 1.5px solid var(--olive-light);
|
border: 1.5px solid var(--olive-light);
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
padding: var(--space-32) var(--space-40);
|
padding: var(--space-5) var(--space-40);
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--space-40);
|
gap: var(--space-40);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -163,7 +183,7 @@
|
|||||||
/* Primary metadata line: location + date/time/guest counters. */
|
/* Primary metadata line: location + date/time/guest counters. */
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-24);
|
gap: var(--space-4);
|
||||||
margin-bottom: var(--space-0);
|
margin-bottom: var(--space-0);
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
@ -183,7 +203,7 @@
|
|||||||
.event-meta-row {
|
.event-meta-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-8);
|
gap: var(--space-1);
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -195,7 +215,7 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
padding: var(--space-8) var(--space-20);
|
padding: var(--space-1) var(--space-20);
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-spec-chip {
|
.event-spec-chip {
|
||||||
@ -227,7 +247,7 @@
|
|||||||
|
|
||||||
.button-plaetze {
|
.button-plaetze {
|
||||||
border: none;
|
border: none;
|
||||||
padding: var(--space-8) var(--space-24);
|
padding: var(--space-01) var(--space-4);
|
||||||
font-family: var(--font-main);
|
font-family: var(--font-main);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
@ -243,7 +263,7 @@
|
|||||||
.event-spots-full, .detail-spots-pill-full {
|
.event-spots-full, .detail-spots-pill-full {
|
||||||
/* Sold-out visual state, intentionally high-contrast and always filled. */
|
/* Sold-out visual state, intentionally high-contrast and always filled. */
|
||||||
border: 1.5px solid var(--tomato-light);
|
border: 1.5px solid var(--tomato-light);
|
||||||
padding: var(--space-8) var(--space-24);
|
padding: var(--space-01) var(--space-4);
|
||||||
border-radius: var(--radius-pill);
|
border-radius: var(--radius-pill);
|
||||||
color: var(--butter-light);
|
color: var(--butter-light);
|
||||||
background: var(--tomato-light);
|
background: var(--tomato-light);
|
||||||
@ -265,6 +285,47 @@
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------
|
||||||
|
Overview Empty State
|
||||||
|
--------------------------------------------------------- */
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 42px var(--space-5);
|
||||||
|
border: 2px solid var(--olive-light);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
background: var(--butter-light);
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-kicker {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
color: var(--olive);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: var(--ls-la);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Jost", sans-serif;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--brown);
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state p {
|
||||||
|
margin: 12px 0 0;
|
||||||
|
font-size: 18px;
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------------------------------
|
/* ---------------------------------------------------------
|
||||||
Detail Page
|
Detail Page
|
||||||
@ -282,7 +343,7 @@
|
|||||||
.detail-top-row {
|
.detail-top-row {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-32);
|
gap: var(--space-5);
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -337,8 +398,8 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: var(--ls-lg);
|
letter-spacing: var(--ls-la);
|
||||||
padding: var(--space-8) var(--space-20);
|
padding: var(--space-1) var(--space-20);
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
.detail-gallery {
|
.detail-gallery {
|
||||||
@ -442,16 +503,16 @@
|
|||||||
.detail-lightbox-image {
|
.detail-lightbox-image {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 80vh;
|
max-height: 90vh;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
background: var(--black);
|
background: #111;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-lightbox-close {
|
.detail-lightbox-close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -40px;
|
top: -42px;
|
||||||
right: -40px;
|
right: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--butter-light);
|
color: var(--butter-light);
|
||||||
@ -463,7 +524,7 @@
|
|||||||
.detail-panel {
|
.detail-panel {
|
||||||
background: var(--butter-light);
|
background: var(--butter-light);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
padding: var(--space-24) var(--space-32);
|
padding: var(--space-4) var(--space-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-panel-compact {
|
.detail-panel-compact {
|
||||||
@ -474,7 +535,7 @@
|
|||||||
margin: 20px;
|
margin: 20px;
|
||||||
list-style: disc;
|
list-style: disc;
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
line-height: 1.45;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-participants-head {
|
.detail-participants-head {
|
||||||
@ -484,6 +545,14 @@
|
|||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.detail-participants-link {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--tomato);
|
||||||
|
letter-spacing: var(--ls-la);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.detail-avatar-row {
|
.detail-avatar-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -511,26 +580,27 @@
|
|||||||
.detail-participants-full {
|
.detail-participants-full {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-participant-item {
|
.detail-participant-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.participant-name {
|
.participant-name {
|
||||||
font-size: 1.125rem;
|
font-size: 0.95rem;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-participants-link {
|
.detail-participants-link {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
font-family: var(--font-main);
|
|
||||||
color: var(--olive);
|
color: var(--olive);
|
||||||
font-size: 1rem;
|
font-size: 0.85rem;
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
@ -547,13 +617,13 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-16);
|
gap: var(--space-2);
|
||||||
background: var(--white);
|
background: var(--white);
|
||||||
border: 1.5px solid var(--olive-light);
|
border: 1.5px solid var(--olive-light);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
box-shadow: var(--shadow-interaction);
|
box-shadow: var(--shadow-interaction);
|
||||||
|
|
||||||
padding: var(--space-24) var(--space-32);
|
padding: var(--space-4) var(--space-5);
|
||||||
margin-top: var(--space-40);
|
margin-top: var(--space-40);
|
||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: var(--space-40);
|
bottom: var(--space-40);
|
||||||
@ -601,13 +671,13 @@
|
|||||||
.detail-action-buttons {
|
.detail-action-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-8);
|
gap: var(--space-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.detail-spots-pill {
|
.detail-spots-pill {
|
||||||
border: none;
|
border: none;
|
||||||
padding: var(--space-8) var(--space-24);
|
padding: var(--space-01) var(--space-4);
|
||||||
font-family: var(--font-main);
|
font-family: var(--font-main);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
@ -626,50 +696,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail-action-btn-wrap {
|
.detail-action-btn-wrap {
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-action-row {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-dereg-column {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-end;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-action-btn-wrap .button-plaetze,
|
|
||||||
.detail-action-btn-wrap .event-spots-full,
|
|
||||||
.detail-action-btn-wrap .button-primary,
|
|
||||||
.detail-action-btn-wrap .button-primary-abmelden,
|
|
||||||
.detail-action-btn-wrap .button-primary-eigener-event {
|
|
||||||
/* Force identical sizing and vertical alignment for action buttons in detail bar */
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
gap: 4px;
|
||||||
height: 52px;
|
|
||||||
padding: 0 22px;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
border-radius: var(--radius-pill);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-dereg-hint {
|
.detail-dereg-hint {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 14px;
|
font-size: 11px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: var(--olive);
|
color: var(--olive);
|
||||||
|
opacity: 0.75;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-dereg-hint--placeholder {
|
.detail-dereg-hint--closed {
|
||||||
visibility: hidden;
|
color: var(--tomato);
|
||||||
|
font-weight: 500;
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-primary-btn {
|
.detail-primary-btn {
|
||||||
@ -836,6 +880,11 @@
|
|||||||
padding: 12px;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.detail-lightbox-close {
|
||||||
|
top: -36px;
|
||||||
|
font-size: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
.detail-section-title {
|
.detail-section-title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
@ -918,21 +967,11 @@
|
|||||||
.meta-filter-group {
|
.meta-filter-group {
|
||||||
width: auto;
|
width: auto;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-filter {
|
.meta-filter {
|
||||||
flex: 1 1 160px;
|
flex: 1 1 160px;
|
||||||
min-width: 140px;
|
min-width: 140px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.filter-section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.filter-box summary {
|
|
||||||
cursor: pointer;
|
|
||||||
margin-bottom: var(--space-8);
|
|
||||||
}
|
}
|
||||||
@ -152,7 +152,7 @@
|
|||||||
.how-step_icon {
|
.how-step_icon {
|
||||||
font-size: 3.5rem;
|
font-size: 3.5rem;
|
||||||
color: var(--brown);
|
color: var(--brown);
|
||||||
margin: var(--space-24) 0;
|
margin: var(--space-4) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.how-step__png {
|
.how-step__png {
|
||||||
@ -166,7 +166,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.how-step_text {
|
.how-step_text {
|
||||||
margin-bottom: var(--space-24);
|
margin-bottom: var(--space-4);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -179,7 +179,7 @@
|
|||||||
|
|
||||||
.how-step__footer-badges {
|
.how-step__footer-badges {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--space-16);
|
gap: var(--space-2);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -204,10 +204,6 @@
|
|||||||
|
|
||||||
/* --- Carousel gallery --- */
|
/* --- Carousel gallery --- */
|
||||||
|
|
||||||
.gallery {
|
|
||||||
margin-bottom: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery__carousel {
|
.gallery__carousel {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -312,11 +308,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gallery__arrow--prev {
|
.gallery__arrow--prev {
|
||||||
left: var(--space-24);
|
left: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery__arrow--next {
|
.gallery__arrow--next {
|
||||||
right: var(--space-24);
|
right: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -437,27 +433,35 @@
|
|||||||
/* --- FAQ Section: Akkordion --- */
|
/* --- FAQ Section: Akkordion --- */
|
||||||
|
|
||||||
.faq-section {
|
.faq-section {
|
||||||
margin-bottom: 0px;
|
padding: var(--space-8) var(--space-4);
|
||||||
|
margin: var(--space-8) 0 var(--space-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-section h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--space-5);
|
||||||
|
color: var(--brown);
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-accordion {
|
.faq-accordion {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
max-width: 56rem;
|
||||||
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-8);
|
gap: var(--space-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-item {
|
.faq-item {
|
||||||
border: 1.5px solid var(--olive-light);
|
border: 1.5px solid var(--olive-light);
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--butter-light);
|
background: var(--white);
|
||||||
padding: var(--space-12) var(--space-24) ;
|
transition: background-color 0.2s ease, box-shadow var(--shadow-interaction);
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-item:hover {
|
.faq-item:hover {
|
||||||
background: var(--olive-light);
|
box-shadow: var(--shadow-interaction);
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-trigger {
|
.faq-trigger {
|
||||||
@ -465,32 +469,41 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: var(--font-main);
|
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 400;;
|
font-weight: 400;
|
||||||
|
color: var(--olive);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
transition: background-color 0.2s ease;
|
transition: background-color 0.2s ease;
|
||||||
|
font-family: var(--font-main);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.faq-trigger:hover {
|
||||||
|
background-color: var(--butter-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-trigger:focus-visible {
|
||||||
|
outline: 2px solid var(--olive);
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
.faq-title {
|
.faq-title {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-icon {
|
.faq-icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 24px;
|
width: 28px;
|
||||||
height: 24px;
|
height: 28px;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 400;
|
font-weight: 300;
|
||||||
color: var(--black);
|
color: var(--olive);
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
@ -500,32 +513,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.faq-content {
|
.faq-content {
|
||||||
padding: 0;
|
padding: 0 var(--space-4);
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: max-height 0.3s ease;
|
transition: max-height 0.3s ease, padding 0.3s ease;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: var(--black);
|
||||||
|
font-family: var(--font-main);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.faq-content p {
|
.faq-content p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: var(--space-12) var(--space-40) var(--space-12) 0;
|
padding: var(--space-3) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-trigger[aria-expanded="true"] + .faq-content {
|
.faq-trigger[aria-expanded="true"] + .faq-content {
|
||||||
display: block;
|
display: block;
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
padding: var(--space-3) var(--space-24);
|
padding: var(--space-3) var(--space-4);
|
||||||
}
|
|
||||||
|
|
||||||
.faq-list {
|
|
||||||
padding-left: var(--space-24);
|
|
||||||
margin: var(--space-12) var(--space-24) var(--space-12) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-list li {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
margin-bottom: var(--space-12)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -533,8 +539,8 @@
|
|||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.faq-section {
|
.faq-section {
|
||||||
padding: var(--space-40) var(--space-24);
|
padding: var(--space-40) var(--space-4);
|
||||||
margin: var(--space-40) 0 var(--space-32);
|
margin: var(--space-40) 0 var(--space-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-trigger {
|
.faq-trigger {
|
||||||
|
|||||||
@ -4,76 +4,139 @@
|
|||||||
typography) are in stylesheet_global.css
|
typography) are in stylesheet_global.css
|
||||||
=========================================== */
|
=========================================== */
|
||||||
|
|
||||||
.container-login {
|
|
||||||
background-color: var(--butter-light);
|
/* --- Page layout --- */
|
||||||
border: 1.5px solid var(--olive-light);
|
|
||||||
border-radius: var(--radius-lg);
|
.container {
|
||||||
padding: var(--space-40) var(--space-80) var(--space-80) var(--space-80);
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
padding: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-registration {
|
.container {
|
||||||
display: grid;
|
background-color: var(--white);
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: var(--space-64);
|
|
||||||
|
|
||||||
background-color: var(--butter-light);
|
|
||||||
border: 1.5px solid var(--olive-light);
|
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
max-width: 1000px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-4);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-section {
|
|
||||||
padding: var(--space-40) var(--space-80) var(--space-80) var(--space-80);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* --- Image section --- */
|
/* --- Image section --- */
|
||||||
|
|
||||||
.image-section {
|
.image-section {
|
||||||
height: 100%;
|
flex: 1;
|
||||||
|
background-color: var(--butter-light);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-section img {
|
.image-section img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --- Form section --- */
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
flex: 1;
|
||||||
|
padding: 40px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: var(--black);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --- Form elements --- */
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
.form-group.has-error {
|
.form-group.has-error {
|
||||||
margin-bottom: 0;
|
margin-bottom: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--space-1);
|
||||||
|
color: var(--black);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
input[type="email"],
|
input[type="email"],
|
||||||
input[type="password"] {
|
input[type="password"] {
|
||||||
font-size: 1.125rem;
|
|
||||||
font-family: var(--font-main);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: var(--space-8) var(--space-16);
|
padding: var(--space-2);
|
||||||
border: 1.5px solid var(--olive-light);
|
border: 2px solid var(--olive-light);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
background: transparent;
|
font-size: 0.9rem;
|
||||||
|
font-family: var(--font-main);
|
||||||
transition: border-color 0.3s ease;
|
transition: border-color 0.3s ease;
|
||||||
|
background: var(--white);
|
||||||
|
color: var(--black);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:focus {
|
input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border: 2px solid var(--olive);
|
border-color: var(--olive);
|
||||||
|
box-shadow: 0 0 5px rgba(107, 107, 5, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
button[type="submit"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-2);
|
||||||
|
background-color: var(--olive);
|
||||||
|
color: var(--white);
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-pill);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: var(--font-main);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||||
|
margin-top: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
button[type="submit"]:hover {
|
||||||
|
background-color: var(--olive-dark);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
button[type="submit"]:active {
|
||||||
|
background-color: var(--olive-dark);
|
||||||
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* --- Info box --- */
|
/* --- Info box --- */
|
||||||
|
|
||||||
.info-box {
|
.info-box {
|
||||||
background-color: var(--olive-light);
|
background-color: var(--butter-light);
|
||||||
|
border-left: 4px solid var(--olive);
|
||||||
padding: var(--space-16);
|
padding: var(--space-16);
|
||||||
margin-bottom: var(--space-40);
|
margin-bottom: var(--space-40);
|
||||||
border-radius: var(--radius-md);
|
border-radius: 4px;
|
||||||
font-size: 1rem;
|
font-size: 0.9rem;
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
line-height: 1.4;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -87,13 +150,13 @@ input:focus {
|
|||||||
|
|
||||||
.form-group.has-error input {
|
.form-group.has-error input {
|
||||||
border-color: var(--error);
|
border-color: var(--error);
|
||||||
box-shadow: var(--shadow-error);
|
box-shadow: 0 0 5px rgba(212, 75, 36, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group.has-error .error-message--field-callout {
|
.form-group.has-error .error-message--field-callout {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
|
|
||||||
/* --- Modal / Popup --- */
|
/* --- Modal / Popup --- */
|
||||||
|
|
||||||
@ -143,8 +206,14 @@ input:focus {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
padding: var(--space-2) var(--space-32);
|
padding: var(--space-2) var(--space-5);
|
||||||
background-color: var(--olive);
|
background-color: var(--olive);
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
border: none;
|
border: none;
|
||||||
@ -163,11 +232,12 @@ input:focus {
|
|||||||
|
|
||||||
/* --- Footer --- */
|
/* --- Footer --- */
|
||||||
|
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr auto 1fr;
|
grid-template-columns: 1fr auto 1fr;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: var(--space-16) var(--space-32);
|
padding: var(--space-16) var(--space-5);
|
||||||
border: none;
|
border: none;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
}
|
}
|
||||||
@ -193,7 +263,7 @@ input:focus {
|
|||||||
.footer-right {
|
.footer-right {
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--space-24);
|
gap: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -218,3 +288,30 @@ input:focus {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --- Snackbar --- */
|
||||||
|
|
||||||
|
.snackbar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 30px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(100px);
|
||||||
|
background: var(--olive);
|
||||||
|
color: var(--white);
|
||||||
|
padding: var(--space-16) var(--space-40);
|
||||||
|
border-radius: var(--radius-pill);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-family: var(--font-main);
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||||
|
opacity: 0;
|
||||||
|
transition: transform 0.4s ease, opacity 0.4s ease;
|
||||||
|
z-index: 9999;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.snackbar--visible {
|
||||||
|
transform: translateX(-50%) translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|||||||
@ -5,8 +5,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: var(--space-24);
|
gap: var(--space-4);
|
||||||
margin-bottom: var(--space-32);
|
margin-bottom: var(--space-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-kicker {
|
.profile-kicker {
|
||||||
@ -14,11 +14,13 @@
|
|||||||
color: var(--olive);
|
color: var(--olive);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: var(--ls-lg);
|
letter-spacing: var(--ls-la);
|
||||||
}
|
}
|
||||||
|
|
||||||
#headline {
|
#headline {
|
||||||
|
margin: 0.4rem 0;
|
||||||
color: var(--brown);
|
color: var(--brown);
|
||||||
|
font-size: clamp(2rem, 4.4vw, 2.8rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-subline {
|
.profile-subline {
|
||||||
@ -34,7 +36,7 @@
|
|||||||
.profile-grid {
|
.profile-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: var(--space-24);
|
gap: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-count {
|
.btn-count {
|
||||||
@ -49,11 +51,16 @@
|
|||||||
border-radius: var(--radius-pill);
|
border-radius: var(--radius-pill);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.category-item.is-active .btn-count {
|
||||||
|
background: var(--butter-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Konsistentes Karten-Layout für alle Profilsektionen. */
|
/* Konsistentes Karten-Layout für alle Profilsektionen. */
|
||||||
.profile-panel {
|
.profile-panel {
|
||||||
background: var(--butter-light);
|
background: var(--butter-light);
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
padding: var(--space-32);
|
padding: var(--space-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-head {
|
.panel-head {
|
||||||
@ -65,7 +72,7 @@
|
|||||||
|
|
||||||
.profile-card-list {
|
.profile-card-list {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--space-16);
|
gap: var(--space-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Einzelne Eventkarte für "Meine Events" und "Meine Anmeldungen". */
|
/* Einzelne Eventkarte für "Meine Events" und "Meine Anmeldungen". */
|
||||||
@ -74,7 +81,7 @@
|
|||||||
border: 1.5px solid var(--olive-light);
|
border: 1.5px solid var(--olive-light);
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
box-shadow: var(--shadow-interaction);
|
box-shadow: var(--shadow-interaction);
|
||||||
padding: var(--space-32) var(--space-40);
|
padding: var(--space-5) var(--space-40);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: var(--space-40);
|
gap: var(--space-40);
|
||||||
@ -100,26 +107,27 @@
|
|||||||
}*/
|
}*/
|
||||||
|
|
||||||
.profile-event-address-block {
|
.profile-event-address-block {
|
||||||
margin-top: var(--space-24);
|
margin-top: 0.55rem;
|
||||||
background-color: var(--olive-light);
|
padding: 0.6rem 0.75rem;
|
||||||
padding: var(--space-16);
|
border-radius: var(--radius-sm);
|
||||||
border-radius: var(--radius-md);
|
border-left: 4px solid var(--tomato);
|
||||||
color: var(--black);
|
background: rgba(232, 237, 209, 0.65);
|
||||||
line-height: 1.4;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.profile-event-address-label {
|
.profile-event-address-label {
|
||||||
font-size: 1rem;
|
margin: 0;
|
||||||
font-weight: 400;
|
color: var(--olive);
|
||||||
color: var(--olive-dark);
|
font-size: 0.72rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: var(--ls-la);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-event-address {
|
.profile-event-address {
|
||||||
font-size: 1.125rem;
|
margin: 0.2rem 0 0;
|
||||||
font-weight: 400;
|
font-size: 0.95rem;
|
||||||
line-height: 1.4;
|
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.35;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-event-link {
|
.profile-event-link {
|
||||||
@ -138,6 +146,40 @@
|
|||||||
.profile-event-actions {
|
.profile-event-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-empty {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2.4rem 1.3rem;
|
||||||
|
border: 2px solid var(--olive-light);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
background: rgba(255, 255, 255, 0.92);
|
||||||
|
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-empty-kicker {
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
color: var(--olive);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: var(--ls-la);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-empty-state h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--brown);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-empty-state p {
|
||||||
|
margin: 0.65rem auto 1rem;
|
||||||
|
max-width: 36rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-grid {
|
.form-grid {
|
||||||
@ -146,14 +188,16 @@
|
|||||||
gap: var(--space-16);
|
gap: var(--space-16);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
.form-group {
|
||||||
|
margin-bottom: var(--space-16);
|
||||||
|
}
|
||||||
|
|
||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 0.35rem;
|
margin-bottom: 0.35rem;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}*/
|
}
|
||||||
|
|
||||||
.form-group input {
|
.form-group input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -188,17 +232,8 @@
|
|||||||
|
|
||||||
.form-group.has-error input {
|
.form-group.has-error input {
|
||||||
border-color: var(--error);
|
border-color: var(--error);
|
||||||
box-shadow: var(--shadow-error);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-abmeldung {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--olive);
|
|
||||||
margin-bottom: 16px;
|
|
||||||
display: flex; align-items:
|
|
||||||
flex-start;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.profile-feedback {
|
.profile-feedback {
|
||||||
margin: 0.75rem 0 0;
|
margin: 0.75rem 0 0;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
@ -208,7 +243,7 @@
|
|||||||
|
|
||||||
.profile-cta-row {
|
.profile-cta-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var();
|
gap: var(--space-2);
|
||||||
margin-top: var(--space-16);
|
margin-top: var(--space-16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -42,17 +42,16 @@
|
|||||||
|
|
||||||
/* Spacing Scale > 1rem = 16px*/
|
/* Spacing Scale > 1rem = 16px*/
|
||||||
--space-0: 0.25rem; /* 4px */
|
--space-0: 0.25rem; /* 4px */
|
||||||
--space-6: 0.375rem; /* 6px */
|
--space-01: 0.375rem; /* 6px */
|
||||||
--space-8: 0.5rem; /* 8px */
|
--space-1: 0.5rem; /* 8px */
|
||||||
--space-12: 0.75rem; /* 12px */
|
--space-2: 0.75rem; /* 12px */
|
||||||
--space-16: 1rem; /* 16px */
|
--space-16: 1rem; /* 16px */
|
||||||
--space-20: 1.25rem; /* 20px */
|
--space-20: 1.25rem; /* 20px */
|
||||||
--space-24: 1.5rem; /* 24px */
|
--space-4: 1.5rem; /* 24px */
|
||||||
--space-32: 2rem; /* 32px */
|
--space-5: 2rem; /* 32px */
|
||||||
--space-40: 2.5rem; /* 40px */
|
--space-40: 2.5rem; /* 40px */
|
||||||
--space-48: 3rem; /* 48px */
|
--space-7: 3rem; /* 48px */
|
||||||
--space-64: 4rem; /* 64px */
|
--space-8: 4rem; /* 64px */
|
||||||
--space-80: 5rem; /* 80px */
|
|
||||||
|
|
||||||
|
|
||||||
/* Radius Scale */
|
/* Radius Scale */
|
||||||
@ -64,7 +63,7 @@
|
|||||||
/* Letter Spacing */
|
/* Letter Spacing */
|
||||||
--ls-none: 0;
|
--ls-none: 0;
|
||||||
--ls-sm: 2.5%;
|
--ls-sm: 2.5%;
|
||||||
--ls-lg: 5%;
|
--ls-la: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Base Styles */
|
/* Base Styles */
|
||||||
@ -82,59 +81,66 @@ img {
|
|||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-family: 'Bagel Fat One';
|
font-family: 'Bagel Fat One';
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: var(--ls-sm);
|
|
||||||
line-height: 120%;
|
|
||||||
color: var(--brown);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: clamp(2.25rem, 5vw, 3rem);
|
font-size: clamp(2.25rem, 5vw, 3rem);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 120%;
|
||||||
letter-spacing: var(--ls-sm);
|
letter-spacing: var(--ls-sm);
|
||||||
margin-bottom: var(--space-32);
|
color: var(--brown);
|
||||||
|
margin-bottom: var(--space-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
margin-bottom: var(--space-24);
|
font-weight: 600;
|
||||||
|
line-height: 120%;
|
||||||
|
letter-spacing: var(--ls-sm);
|
||||||
|
color: var(--brown);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 120%;
|
||||||
|
letter-spacing: var(--ls-sm);
|
||||||
|
color: var(--brown);
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-family: var(--font-main);
|
font-family: var(--font-main);
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
line-height: 1.45;
|
line-height: 1.5;
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-small {
|
.p-small {
|
||||||
font-family: var(--font-main);
|
font-family: var(--font-main);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 400;
|
line-height: 1.5;
|
||||||
line-height: 1.4;
|
margin-bottom: 0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-input-field,
|
.label-input-field {
|
||||||
.filter-label {
|
|
||||||
font-family: var(--font-main);
|
font-family: var(--font-main);
|
||||||
font-size: 1rem;
|
font-size: 1.125rem;
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
|
letter-spacing: var(--ls-sm);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin-bottom: var(--space-8);
|
margin-bottom: var(--space-16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-family: var(--font-main);
|
font-family: var(--font-main);
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: var(--ls-lg);
|
letter-spacing: var(--ls-sm);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin-bottom: var(--space-16);
|
margin-bottom: var(--space-0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.option {
|
.option {
|
||||||
@ -143,12 +149,12 @@ label {
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: var(--ls-sm);
|
letter-spacing: var(--ls-sm);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin-bottom: var(--space-8);
|
margin-bottom: var(--space-16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-text a{
|
.link-text a{
|
||||||
color: var(--blue);
|
color: var(--blue);
|
||||||
margin-top: var(--space-24);
|
margin-top: var(--space-4);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: color 0.3s ease;
|
transition: color 0.3s ease;
|
||||||
}
|
}
|
||||||
@ -182,13 +188,14 @@ label {
|
|||||||
display: none;
|
display: none;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
max-width: min(100%, 20rem);
|
max-width: min(100%, 20rem);
|
||||||
padding: var(--space-6) var(--space-16);
|
padding: 0.35rem 0.8rem;
|
||||||
/*margin-bottom: -32px;*/
|
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
|
|
||||||
background: var(--error);
|
background: var(--error);
|
||||||
color: var(--butter-light);
|
color: var(--white);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
white-space: normal;
|
||||||
overflow-wrap: anywhere;
|
overflow-wrap: anywhere;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@ -209,13 +216,16 @@ label {
|
|||||||
display: none;
|
display: none;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
max-width: 15rem;
|
max-width: 15rem;
|
||||||
padding: var(--space-6) var(--space-16);
|
padding: 0.7rem 1.15rem;
|
||||||
border-radius: var(--radius-md);
|
border-radius: 1rem;
|
||||||
background: var(--error);
|
background: var(--error);
|
||||||
color: var(--butter-light);
|
color: #ffffff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
white-space: normal;
|
||||||
overflow-wrap: anywhere;
|
overflow-wrap: anywhere;
|
||||||
|
box-shadow: var(--shadow-interaction);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -237,12 +247,8 @@ label {
|
|||||||
|
|
||||||
/* Margins */
|
/* Margins */
|
||||||
|
|
||||||
.margin-bottom-16 {
|
|
||||||
margin-bottom: var(--space-16);
|
|
||||||
}
|
|
||||||
|
|
||||||
.margin-bottom-24 {
|
.margin-bottom-24 {
|
||||||
margin-bottom: var(--space-24);
|
margin-bottom: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.margin-bottom-40 {
|
.margin-bottom-40 {
|
||||||
@ -337,7 +343,7 @@ label {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 3rem;
|
min-height: 3rem;
|
||||||
padding: 0.1875rem 0.75rem 0.1875rem var(--space-32);
|
padding: 0.1875rem 0.75rem 0.1875rem var(--space-5);
|
||||||
max-width: none;
|
max-width: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -383,7 +389,7 @@ label {
|
|||||||
.nav-tab-links {
|
.nav-tab-links {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-32);
|
gap: var(--space-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -397,7 +403,7 @@ label {
|
|||||||
font-family: var(--font-main);
|
font-family: var(--font-main);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: var(--ls-lg);
|
letter-spacing: var(--ls-la);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -422,7 +428,7 @@ label {
|
|||||||
/* Buttons */
|
/* Buttons */
|
||||||
.button-primary {
|
.button-primary {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: var(--space-6) var(--space-24);
|
padding: var(--space-01) var(--space-4);
|
||||||
background-color: var(--olive);
|
background-color: var(--olive);
|
||||||
border: 1.5px solid var(--olive);
|
border: 1.5px solid var(--olive);
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
@ -445,7 +451,7 @@ label {
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--olive-dark);
|
color: var(--olive-dark);
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
padding: var(--space-6) 0 var(--space-6) var(--space-24);
|
padding: var(--space-01) 0 var(--space-01) var(--space-4);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -536,8 +542,7 @@ label {
|
|||||||
|
|
||||||
.button--outline:hover {
|
.button--outline:hover {
|
||||||
background-color: var(--olive-light);
|
background-color: var(--olive-light);
|
||||||
color: var(--olive-dark);
|
color: var(--black);
|
||||||
border: 1.5px solid var(--olive-dark);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.counter-button {
|
.counter-button {
|
||||||
@ -571,7 +576,7 @@ label {
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
padding: var(--space-8) var(--space-20);
|
padding: var(--space-1) var(--space-20);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.2s ease, color 0.2s ease;
|
transition: background-color 0.2s ease, color 0.2s ease;
|
||||||
}
|
}
|
||||||
@ -584,17 +589,11 @@ label {
|
|||||||
color: var(--butter-light);
|
color: var(--butter-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-item.disabled {
|
|
||||||
opacity: 0.6;
|
|
||||||
pointer-events: none;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.category-items {
|
.category-items {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: var(--space-8);
|
gap: var(--space-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-item-profile {
|
.category-item-profile {
|
||||||
@ -603,26 +602,12 @@ label {
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
padding: 0 var(--space-24);
|
padding: 0 var(--space-4);
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-16);
|
gap: var(--space-16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-delete {
|
|
||||||
border: 1.5px solid var(--olive);
|
|
||||||
color: var(--olive);
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-delete:hover {
|
|
||||||
border: 1.5px solid var(--olive-dark);
|
|
||||||
color: var(--olive-dark);
|
|
||||||
background: var(--olive-light);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-small {
|
.button-small {
|
||||||
background: var(--olive);
|
background: var(--olive);
|
||||||
color: var(--butter-light);
|
color: var(--butter-light);
|
||||||
@ -719,7 +704,7 @@ label {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 1em; /* keeps it aligned with text size */
|
height: 1em; /* keeps it aligned with text size */
|
||||||
margin-top: var(--space-48);
|
margin-top: var(--space-7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.instagram-invite__link {
|
.instagram-invite__link {
|
||||||
@ -734,6 +719,7 @@ label {
|
|||||||
width: 32px;
|
width: 32px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-invite_logo {
|
.footer-invite_logo {
|
||||||
@ -775,34 +761,40 @@ label {
|
|||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
padding: var(--space-40);
|
padding: var(--space-20) var(--space-20) var(--space-40) var(--space-20);
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
box-shadow: var(--shadow-interaction);
|
box-shadow: var(--shadow-interaction);
|
||||||
max-width: 460px;
|
max-width: 500px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
animation: modalSlideIn 0.5s ease;
|
animation: modalSlideIn 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-info {
|
.btn-info {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
flex: 0 0 48px;
|
flex: 0 0 48px;
|
||||||
border: 1.5px solid var(--olive-light);
|
border: 1.5px solid var(--olive);
|
||||||
border-radius: var(--radius-pill);
|
border-radius: 999px;
|
||||||
color: var(--black);
|
|
||||||
background: var(--butter-light);
|
background: var(--butter-light);
|
||||||
font-family: "Bagel Fat One";
|
color: var(--olive);
|
||||||
font-size: 1.75rem;
|
font-family: "Bagel Fat One", cursive;
|
||||||
font-weight: 500;
|
font-size: 1.7rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.2s ease;
|
box-shadow: var(--shadow-interaction);
|
||||||
|
transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-info:hover,
|
.btn-info:hover,
|
||||||
.btn-info:focus-visible {
|
.btn-info:focus-visible {
|
||||||
background: var(--olive-light);
|
background: var(--butter);
|
||||||
|
border-color: var(--olive-dark);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info:focus-visible {
|
||||||
|
outline: 2px solid var(--olive-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes modalSlideIn {
|
@keyframes modalSlideIn {
|
||||||
@ -814,7 +806,7 @@ label {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: var(--space-24);
|
gap: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header h2 {
|
.modal-header h2 {
|
||||||
@ -831,7 +823,7 @@ label {
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: transparent;
|
color: var(--olive);
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -839,14 +831,20 @@ label {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
transition: transform 0.2s ease;
|
transition: color 0.2s ease, transform 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-close:hover,
|
.modal-close:hover,
|
||||||
.modal-close:focus-visible {
|
.modal-close:focus-visible {
|
||||||
|
color: var(--olive-dark);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal-close:focus-visible {
|
||||||
|
outline: 2px solid var(--olive-dark);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
@ -861,36 +859,33 @@ label {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal-body {
|
.modal-body {
|
||||||
font-family: var(--font-main);
|
padding: var(--space-4) 0 0;
|
||||||
font-size: 1.125rem;
|
|
||||||
padding: var(--space-24) 0 var(--space-40) 0;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 1.45;
|
line-height: 1.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-footer {
|
.modal-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--space-12);
|
gap: var(--space-2);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Snackbar */
|
/* Snackbar */
|
||||||
.snackbar,
|
.snackbar {
|
||||||
.snackbar--danger {
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 40px;
|
bottom: 30px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%) translateY(100px);
|
transform: translateX(-50%) translateY(100px);
|
||||||
color: var(--butter-light);
|
background: var(--olive);
|
||||||
background: var(--tomato);
|
color: var(--white);
|
||||||
padding: var(--space-16) var(--space-40);
|
padding: var(--space-16) var(--space-40);
|
||||||
border-radius: var(--radius-pill);
|
border-radius: var(--radius-pill);
|
||||||
font-size: 1.125rem;
|
font-size: 1rem;
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
font-family: var(--font-main);
|
font-family: var(--font-main);
|
||||||
box-shadow: var(--shadow-interaction);
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: transform 0.5s ease, opacity 0.4s ease;
|
transition: transform 0.4s ease, opacity 0.4s ease;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@ -900,6 +895,10 @@ label {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.snackbar--danger {
|
||||||
|
background: var(--tomato);
|
||||||
|
}
|
||||||
|
|
||||||
/* Lightbox */
|
/* Lightbox */
|
||||||
.lightbox {
|
.lightbox {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -940,59 +939,16 @@ label {
|
|||||||
|
|
||||||
.lightbox__close {
|
.lightbox__close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -40px;
|
top: -42px;
|
||||||
right: -40px;
|
right: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--butter-light);
|
color: var(--white);
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Formulare */
|
|
||||||
|
|
||||||
input[type="text"],
|
|
||||||
input[type="email"],
|
|
||||||
input[type="password"] {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
font-family: var(--font-main);
|
|
||||||
width: 100%;
|
|
||||||
padding: var(--space-12) var(--space-16);
|
|
||||||
border: 1.5px solid var(--olive-light);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
background: var(--butter-light);
|
|
||||||
transition: border-color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:focus {
|
|
||||||
outline: none;
|
|
||||||
border: 2px solid var(--olive);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------------------------------------------------------
|
|
||||||
Overview Empty State
|
|
||||||
--------------------------------------------------------- */
|
|
||||||
.empty-state {
|
|
||||||
text-align: center;
|
|
||||||
padding: var(--space-32) var(--space-40);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
background: var(--butter-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state-kicker {
|
|
||||||
color: var(--olive);
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state-link {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 20px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
@ -1000,12 +956,12 @@ input:focus {
|
|||||||
grid-template-columns: 1fr auto 1fr;
|
grid-template-columns: 1fr auto 1fr;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 120px;
|
margin-top: 120px;
|
||||||
padding: var(--space-16) var(--space-48);
|
padding: var(--space-16) var(--space-7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-links {
|
.footer-links {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--space-24);
|
gap: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Left aligned */
|
/* Left aligned */
|
||||||
@ -1022,6 +978,6 @@ input:focus {
|
|||||||
.footer-right {
|
.footer-right {
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--space-24);
|
gap: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
117
data/events.json
117
data/events.json
@ -4,7 +4,7 @@
|
|||||||
"title": "Italienische Tavolata",
|
"title": "Italienische Tavolata",
|
||||||
"location": "Luzern",
|
"location": "Luzern",
|
||||||
"address": "Pilatusstrasse 18, 6003 Luzern",
|
"address": "Pilatusstrasse 18, 6003 Luzern",
|
||||||
"date": "17. Mai. 2026",
|
"date": "23. APR. 2026",
|
||||||
"time": "15:30 UHR",
|
"time": "15:30 UHR",
|
||||||
"category": "Dinner",
|
"category": "Dinner",
|
||||||
"diet": "Vegetarisch",
|
"diet": "Vegetarisch",
|
||||||
@ -15,8 +15,7 @@
|
|||||||
},
|
},
|
||||||
"hostMessage": [
|
"hostMessage": [
|
||||||
"Ciao zusammen! Ich liebe die italienische Küche, nicht nur wegen des Essens, sondern wegen des Gefühls: Alle sitzen an einem langen Tisch, teilen sich grosse Platten und geniessen die Zeit.",
|
"Ciao zusammen! Ich liebe die italienische Küche, nicht nur wegen des Essens, sondern wegen des Gefühls: Alle sitzen an einem langen Tisch, teilen sich grosse Platten und geniessen die Zeit.",
|
||||||
"Genau das möchte ich mit euch teilen. Ich bereite dafür eine klassische Tavolata vor, bei der verschiedene Gerichte in die Mitte des Tisches kommen und sich jeder bedient.",
|
"Genau das möchte ich mit euch teilen. Ich bereite dafür eine klassische Tavolata vor, bei der verschiedene Gerichte in die Mitte des Tisches kommen und sich jeder bedient."
|
||||||
"Wenn es das Wetter erlaubt sind wir draussen."
|
|
||||||
],
|
],
|
||||||
"menu": [
|
"menu": [
|
||||||
"Bruschetta-Variationen und Antipasti",
|
"Bruschetta-Variationen und Antipasti",
|
||||||
@ -46,10 +45,10 @@
|
|||||||
"title": "Noche Peruana",
|
"title": "Noche Peruana",
|
||||||
"location": "Chur",
|
"location": "Chur",
|
||||||
"address": "Obere Gasse 41, 7000 Chur",
|
"address": "Obere Gasse 41, 7000 Chur",
|
||||||
"date": "8. Mai 2026",
|
"date": "12. April 2026",
|
||||||
"time": "19:00 UHR",
|
"time": "19:00 UHR",
|
||||||
"category": "Dinner",
|
"category": "Dinner",
|
||||||
"diet": "Fleisch, Fisch",
|
"diet": "Omnivore",
|
||||||
"spots": 4,
|
"spots": 4,
|
||||||
"host": {
|
"host": {
|
||||||
"name": "Camila",
|
"name": "Camila",
|
||||||
@ -88,7 +87,7 @@
|
|||||||
"title": "Japanese Delight",
|
"title": "Japanese Delight",
|
||||||
"location": "Zürich",
|
"location": "Zürich",
|
||||||
"address": "Limmatquai 92, 8001 Zürich",
|
"address": "Limmatquai 92, 8001 Zürich",
|
||||||
"date": "12. Mai 2026",
|
"date": "24. April. 2026",
|
||||||
"time": "12:30 UHR",
|
"time": "12:30 UHR",
|
||||||
"category": "Lunch",
|
"category": "Lunch",
|
||||||
"diet": "Fisch",
|
"diet": "Fisch",
|
||||||
@ -125,46 +124,6 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 4,
|
"id": 4,
|
||||||
"title": "Cucina Brasileira",
|
|
||||||
"location": "Basel",
|
|
||||||
"address": "Fredy Kübler Weg 5, 8134 Adliswil",
|
|
||||||
"date": "15. Mai. 2026",
|
|
||||||
"time": "19:00 UHR",
|
|
||||||
"category": "Dinner",
|
|
||||||
"diet": "Fleisch",
|
|
||||||
"spots": 8,
|
|
||||||
"host": {
|
|
||||||
"name": "Mia",
|
|
||||||
"initial": "M"
|
|
||||||
},
|
|
||||||
"hostMessage": [
|
|
||||||
"Ihr seit herzlich eingeladen zu meinem Brasilianischen Abendessen! Lasst euch überraschen."
|
|
||||||
],
|
|
||||||
"menu": [
|
|
||||||
"Feijoada Brasileira com Farofa",
|
|
||||||
"Arroz",
|
|
||||||
"Vinagrette",
|
|
||||||
"Salada de Couve",
|
|
||||||
"Salada de batata",
|
|
||||||
"Bolo de Mandioca"
|
|
||||||
|
|
||||||
],
|
|
||||||
"specifications": [],
|
|
||||||
"participants": [
|
|
||||||
"Carlos",
|
|
||||||
"Vivien",
|
|
||||||
"Estelle",
|
|
||||||
"Simona",
|
|
||||||
"Ysabelle"
|
|
||||||
],
|
|
||||||
"gallery": [
|
|
||||||
"https://i.pinimg.com/736x/62/39/4b/62394bb73b986dfb89f41e809e2c8dd4.jpg",
|
|
||||||
"https://i.pinimg.com/1200x/68/fe/bd/68febdd512a00f0a345e51ebed7ddd63.jpg",
|
|
||||||
"https://i.pinimg.com/1200x/0a/8d/67/0a8d674a7923c6e9bfe3665bc63522d0.jpg"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 5,
|
|
||||||
"title": "Mexican Fiesta",
|
"title": "Mexican Fiesta",
|
||||||
"location": "Basel",
|
"location": "Basel",
|
||||||
"address": "Münsterplatz 10, 4051 Basel",
|
"address": "Münsterplatz 10, 4051 Basel",
|
||||||
@ -173,72 +132,6 @@
|
|||||||
"category": "Dinner",
|
"category": "Dinner",
|
||||||
"diet": "Omnivore",
|
"diet": "Omnivore",
|
||||||
"spots": 6,
|
"spots": 6,
|
||||||
"host": {
|
|
||||||
"name": "Carlos",
|
|
||||||
"initial": "C"
|
|
||||||
},
|
|
||||||
"hostMessage": [
|
|
||||||
"Hallo zusammen! Leider muss ich dieses Event absagen, da mir etwas Wichtiges dazwischengekommen ist.",
|
|
||||||
"Ich hoffe, wir können das bald nachholen!"
|
|
||||||
],
|
|
||||||
"menu": [
|
|
||||||
"Guacamole & Nachos",
|
|
||||||
"Tacos al Pastor",
|
|
||||||
"Churros"
|
|
||||||
],
|
|
||||||
"specifications": [],
|
|
||||||
"participants": [
|
|
||||||
"Carlos",
|
|
||||||
"Vanessa",
|
|
||||||
"Christina",
|
|
||||||
"Julian"
|
|
||||||
],
|
|
||||||
"gallery": [
|
|
||||||
"https://i.pinimg.com/736x/7d/5c/29/7d5c29117ef6f974b1a6f77b22408ae7.jpg",
|
|
||||||
"https://i.pinimg.com/1200x/4e/4e/5d/4e4e5d57576d475316f25f84e5afb38f.jpg",
|
|
||||||
"https://i.pinimg.com/webp/1200x/d6/c2/4c/d6c24c1582d944229d271d8948b53dbb.webp",
|
|
||||||
"https://i.pinimg.com/webp/1200x/24/51/8e/24518e6e7bd9a68befcd9a98bba72a23.webp"
|
|
||||||
]
|
|
||||||
}, {
|
|
||||||
"id": 6,
|
|
||||||
"title": "Schwedentorte Schlemmern",
|
|
||||||
"location": "Zürich",
|
|
||||||
"address": "Münsterplatz 10, 8009 Zürich",
|
|
||||||
"date": "9. Mai 2026",
|
|
||||||
"time": "14:00 UHR",
|
|
||||||
"category": "Kaffee + Kuchen",
|
|
||||||
"diet": "Vegan",
|
|
||||||
"spots": 5,
|
|
||||||
"host": {
|
|
||||||
"name": "Annalea",
|
|
||||||
"initial": "A"
|
|
||||||
},
|
|
||||||
"hostMessage": [
|
|
||||||
"Hallo :) Ich suche Personen die Lust haben meine Vegane Schwedentorten Kreation zu probieren. Es ist eine Schwedentorte, die ich mit einer veganen Buttercreme und frischen Früchten zubereite. Es wird ein süsser Genuss, den ihr nicht verpassen solltet!"
|
|
||||||
],
|
|
||||||
"menu": [
|
|
||||||
"Schwedentorte",
|
|
||||||
"Diverse Teesorten"
|
|
||||||
],
|
|
||||||
"specifications": [],
|
|
||||||
"participants": [
|
|
||||||
"Annalea",
|
|
||||||
"Andi",
|
|
||||||
"Leah"
|
|
||||||
],
|
|
||||||
"gallery": [
|
|
||||||
"https://i.pinimg.com/736x/0e/44/78/0e4478e4e3389c77e3e859b2663e6d47.jpg"
|
|
||||||
]
|
|
||||||
}, {
|
|
||||||
"id": 7,
|
|
||||||
"title": "Mexican Fiesta",
|
|
||||||
"location": "Basel",
|
|
||||||
"address": "Münsterplatz 10, 4051 Basel",
|
|
||||||
"date": "29. Mai. 2026",
|
|
||||||
"time": "18:00 UHR",
|
|
||||||
"category": "Dinner",
|
|
||||||
"diet": "Omnivore",
|
|
||||||
"spots": 6,
|
|
||||||
"status": "canceled",
|
"status": "canceled",
|
||||||
"host": {
|
"host": {
|
||||||
"name": "Carlos",
|
"name": "Carlos",
|
||||||
|
|||||||
@ -32,30 +32,30 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
<main class="event-create-page layout-narrow">
|
<main class="event-create-page">
|
||||||
<section class="event-flow-header" aria-label="Event erstellen Aktionen">
|
<section class="event-flow-header" aria-label="Event erstellen Aktionen">
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<form id="eventForm" class="event-form" novalidate>
|
<form id="eventForm" class="event-form" novalidate>
|
||||||
<section
|
<section
|
||||||
class="step step--active step--intro"
|
class="step step--active step--intro layout-wide"
|
||||||
data-step="0"
|
data-step="0"
|
||||||
aria-labelledby="intro-title"
|
aria-labelledby="intro-title"
|
||||||
>
|
>
|
||||||
<div class="step-layout hero startseite">
|
<div class="step-layout hero startseite">
|
||||||
<div>
|
<div class="step-copy">
|
||||||
<p class="badge margin-bottom-40">Event erstellen</p>
|
<p class="badge">Event erstellen</p>
|
||||||
<h1 id="intro-title">Hey <span id="username">{{username}}</span>, was hast du vor?</h1>
|
<h1 id="intro-title">Hey <span id="username">{{username}}</span>, was hast du vor?</h1>
|
||||||
<p class="step-text margin-bottom-40">
|
<p class="step-text">
|
||||||
Erzähl uns von deiner Idee, vom Essen bis zur Stimmung. Ob Dinner, Brunch
|
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.
|
oder etwas ganz Eigenes wir helfen dir dabei, dein Event in sieben Schritten aufzubauen.
|
||||||
</p>
|
</p>
|
||||||
<button type="button" class="button-primary" data-start-flow>
|
<button type="button" class="button-primary button--intro" data-start-flow>
|
||||||
Los geht’s!
|
Los geht’s!
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hero__right" aria-label="Stimmungsbild zur Event-Erstellung">
|
<div class="intro-card intro-card--image hero__right" aria-label="Stimmungsbild zur Event-Erstellung">
|
||||||
<img
|
<img
|
||||||
class="intro-image"
|
class="intro-image"
|
||||||
src="assets/eventcreate_foodtable-new.jpg"
|
src="assets/eventcreate_foodtable-new.jpg"
|
||||||
@ -65,12 +65,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="step" data-step="1" aria-labelledby="step1-title">
|
<section class="step layout-narrow" data-step="1" aria-labelledby="step1-title">
|
||||||
<div class="step-layout">
|
<div class="step-layout">
|
||||||
<div class="step-copy">
|
<div class="step-copy">
|
||||||
<p class="badge">Schritt 1</p>
|
<p class="badge">Schritt 1</p>
|
||||||
<h2 id="step1-title">Was hast du vor?</h2>
|
<h2 id="step1-title">Was hast du vor?</h2>
|
||||||
<p class="step-text margin-bottom-40">
|
<p class="step-text">
|
||||||
Erzähl uns, was für ein Event du planst. Ist es ein gemütlicher Brunch,
|
Erzähl uns, was für ein Event du planst. Ist es ein gemütlicher Brunch,
|
||||||
ein Dinner mit Wow-Effekt oder einfach ein entspanntes Mittagessen mit gutem Essen?
|
ein Dinner mit Wow-Effekt oder einfach ein entspanntes Mittagessen mit gutem Essen?
|
||||||
</p>
|
</p>
|
||||||
@ -145,12 +145,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="step" data-step="2" aria-labelledby="step2-title">
|
<section class="step layout-narrow" data-step="2" aria-labelledby="step2-title">
|
||||||
<div class="step-layout">
|
<div class="step-layout">
|
||||||
<div class="step-copy">
|
<div class="step-copy">
|
||||||
<p class="badge">Schritt 2</p>
|
<p class="badge">Schritt 2</p>
|
||||||
<h2 id="step2-title">Was kommt auf den Tisch?</h2>
|
<h2 id="step2-title">Was kommt auf den Tisch?</h2>
|
||||||
<p class="step-text margin-bottom-40">
|
<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.
|
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.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -194,12 +194,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="step" data-step="3" aria-labelledby="step3-title">
|
<section class="step layout-narrow" data-step="3" aria-labelledby="step3-title">
|
||||||
<div class="step-layout">
|
<div class="step-layout">
|
||||||
<div class="step-copy">
|
<div class="step-copy">
|
||||||
<p class="badge">Schritt 3</p>
|
<p class="badge">Schritt 3</p>
|
||||||
<h2 id="step3-title">Gibt es etwas zu beachten?</h2>
|
<h2 id="step3-title">Gibt es etwas zu beachten?</h2>
|
||||||
<p class="step-text margin-bottom-40">
|
<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.
|
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.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -228,20 +228,19 @@
|
|||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<div class="form-field">
|
<div class="form-field">
|
||||||
<label for="allergiesOther">Weitere Unverträglichkeiten oder Hinweise</label>
|
<label for="allergiesOther">Weitere Unverträglichkeiten oder Hinweise (optional)</label>
|
||||||
<p class="field-hint">Optional – nur auswählen, wenn es für dein Event relevant ist.</p>
|
|
||||||
<textarea id="allergiesOther" name="allergiesOther" rows="3"></textarea>
|
<textarea id="allergiesOther" name="allergiesOther" rows="3"></textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="step" data-step="4" aria-labelledby="step4-title">
|
<section class="step layout-narrow" data-step="4" aria-labelledby="step4-title">
|
||||||
<div class="step-layout">
|
<div class="step-layout">
|
||||||
<div class="step-copy">
|
<div class="step-copy">
|
||||||
<p class="badge">Schritt 4</p>
|
<p class="badge">Schritt 4</p>
|
||||||
<h2 id="step4-title">Wann findet dein Event statt?</h2>
|
<h2 id="step4-title">Wann findet dein Event statt?</h2>
|
||||||
<p class="step-text margin-bottom-40">
|
<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.
|
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.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -262,12 +261,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="step" data-step="5" aria-labelledby="step5-title">
|
<section class="step layout-narrow" data-step="5" aria-labelledby="step5-title">
|
||||||
<div class="step-layout">
|
<div class="step-layout">
|
||||||
<div class="step-copy">
|
<div class="step-copy">
|
||||||
<p class="badge">Schritt 5</p>
|
<p class="badge">Schritt 5</p>
|
||||||
<h2 id="step5-title">Wo findet dein Event statt?</h2>
|
<h2 id="step5-title">Wo findet dein Event statt?</h2>
|
||||||
<p class="step-text margin-bottom-40">
|
<p class="step-text">
|
||||||
Sag uns, wo dein Event stattfindet. Keine Sorge: Die genaue Adresse sehen Gäste erst nach der Buchung.
|
Sag uns, wo dein Event stattfindet. Keine Sorge: Die genaue Adresse sehen Gäste erst nach der Buchung.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -286,12 +285,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="step" data-step="6" aria-labelledby="step6-title">
|
<section class="step layout-narrow" data-step="6" aria-labelledby="step6-title">
|
||||||
<div class="step-layout">
|
<div class="step-layout">
|
||||||
<div class="step-copy">
|
<div class="step-copy">
|
||||||
<p class="badge">Schritt 6</p>
|
<p class="badge">Schritt 6</p>
|
||||||
<h2 id="step6-title">Gib deinem Event den letzten Schliff.</h2>
|
<h2 id="step6-title">Gib deinem Event den letzten Schliff.</h2>
|
||||||
<p class="step-text margin-bottom-40">
|
<p class="step-text">
|
||||||
Jetzt bekommt dein Event seinen Namen und die Atmosphäre, die Lust aufs Dabeisein macht.
|
Jetzt bekommt dein Event seinen Namen und die Atmosphäre, die Lust aufs Dabeisein macht.
|
||||||
Ein klarer Titel (z.B. "Italienische Tavolata") und ein guter Beschreibungstext (Ablauf etc.) machen den Unterschied.
|
Ein klarer Titel (z.B. "Italienische Tavolata") und ein guter Beschreibungstext (Ablauf etc.) machen den Unterschied.
|
||||||
</p>
|
</p>
|
||||||
@ -309,13 +308,12 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-field">
|
<div class="form-field">
|
||||||
<label>Wie wird dein Event aussehen?</label>
|
<label>Wie wird dein Event aussehen? <span class="field-hint-inline">(optional)</span></label>
|
||||||
<p class="field-hint">Optional – füge Bilder zu deinem Event hinzu.</p>
|
<div class="gallery-upload">
|
||||||
<div class= "option-grid option-grid--4">
|
|
||||||
<div class="gallery-preview" id="galleryPreview"></div>
|
<div class="gallery-preview" id="galleryPreview"></div>
|
||||||
<button type="button" class="gallery-add-button" id="galleryAddBtn" aria-label="Foto hinzufügen">
|
<button type="button" class="gallery-add-button" id="galleryAddBtn" aria-label="Foto hinzufügen">
|
||||||
<i class="fa-solid fa-plus gallery-add-button__icon" aria-hidden="true"></i>
|
<i class="fa-solid fa-plus gallery-add-button__icon" aria-hidden="true"></i>
|
||||||
<span class="option">Foto hinzufügen</span>
|
<span class="gallery-add-button__text">Foto<br>hinzufügen</span>
|
||||||
</button>
|
</button>
|
||||||
<input type="file" id="galleryFileInput" accept="image/*" multiple hidden />
|
<input type="file" id="galleryFileInput" accept="image/*" multiple hidden />
|
||||||
</div>
|
</div>
|
||||||
@ -324,12 +322,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="step" data-step="7" aria-labelledby="step7-title">
|
<section class="step layout-narrow" data-step="7" aria-labelledby="step7-title">
|
||||||
<div class="step-layout">
|
<div class="step-layout">
|
||||||
<div class="step-copy">
|
<div class="step-copy">
|
||||||
<p class="badge">Schritt 7</p>
|
<p class="badge">Schritt 7</p>
|
||||||
<h2 id="step7-title">Dein Event auf einen Blick</h2>
|
<h2 id="step7-title">Dein Event auf einen Blick.</h2>
|
||||||
<p class="step-text margin-bottom-40">
|
<p class="step-text">
|
||||||
Schau dir alle Details nochmal in Ruhe an. Wenn alles passt,
|
Schau dir alle Details nochmal in Ruhe an. Wenn alles passt,
|
||||||
kannst du dein Event jetzt veröffentlichen und Gäste einladen.
|
kannst du dein Event jetzt veröffentlichen und Gäste einladen.
|
||||||
</p>
|
</p>
|
||||||
@ -406,7 +404,7 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<div class="flow-footer" id="flowFooter" hidden>
|
<div class="flow-footer layout-narrow" id="flowFooter" hidden>
|
||||||
<div class="flow-actions">
|
<div class="flow-actions">
|
||||||
<button type="button" id="backButton" class="button-secondary">
|
<button type="button" id="backButton" class="button-secondary">
|
||||||
Zurück
|
Zurück
|
||||||
@ -437,20 +435,21 @@
|
|||||||
|
|
||||||
<section
|
<section
|
||||||
id="submissionSuccess"
|
id="submissionSuccess"
|
||||||
class="submission-success"
|
class="submission-success layout-wide"
|
||||||
aria-labelledby="success-title"
|
aria-labelledby="success-title"
|
||||||
aria-live="polite"
|
aria-live="polite"
|
||||||
hidden
|
hidden
|
||||||
>
|
>
|
||||||
<div class="step-layout hero startseite">
|
<div class="step-layout step-layout--intro hero startseite">
|
||||||
<div class="step-copy">
|
<div class="step-copy">
|
||||||
|
<p class="badge">Event erstellt</p>
|
||||||
<div class="submission-success-title-row">
|
<div class="submission-success-title-row">
|
||||||
<h2 id="success-title">Dein Event ist ready </h2>
|
<h2 id="success-title">Dein Event ist ready</h2>
|
||||||
<span class="submission-success-icon" aria-hidden="true">
|
<span class="submission-success-icon" aria-hidden="true">
|
||||||
<!-- <i class="fa-solid fa-champagne-glasses"></i>-->
|
<i class="fa-solid fa-champagne-glasses"></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="step-text margin-bottom-40">
|
<p class="step-text">
|
||||||
Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste.
|
Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste.
|
||||||
Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.
|
Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.
|
||||||
</p>
|
</p>
|
||||||
@ -459,12 +458,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hero__right" aria-label="Stimmungsbild zur Event-Erstellung">
|
<div class="intro-card intro-card--image hero__right" aria-label="Stimmungsbild zum erstellten Event">
|
||||||
<img
|
<img
|
||||||
class="intro-image"
|
class="intro-image submission-success-image"
|
||||||
src="assets/eventcreate_foodtable with friends.jpg"
|
src="assets/eventcreate_foodtable with friends.jpg"
|
||||||
alt="Gemeinsames Essen an einem gedeckten Tisch"
|
alt="Gemeinsames Essen an einem gedeckten Tisch"
|
||||||
/>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -42,13 +42,12 @@
|
|||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2>Ein Platz für dich am Tisch!</h2>
|
<h2>Ein Platz für dich am Tisch!</h2>
|
||||||
<button type="button" class="modal-close" aria-label="Popup schließen">×</button>
|
<button type="button" class="modal-close" id="register-modal-close" aria-label="Popup schließen">×</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>Schön, dass du dich dazu gesellen möchtest! Da dein:e Gastgeber:in extra für dich einkauft und mit viel Liebe kocht, ist deine Anmeldung ein festes Versprechen. Bitte sag nur zu, wenn du an dem Tag wirklich Zeit hast. So zeigst du echte Wertschätzung für die Mühe und wir lassen niemanden auf vollen Töpfen sitzen.</p>
|
<p>Schön, dass du dich dazu gesellen möchtest! Da dein:e Gastgeber:in extra für dich einkauft und mit viel Liebe kocht, ist deine Anmeldung ein festes Versprechen. Bitte sag nur zu, wenn du an dem Tag wirklich Zeit hast. So zeigst du echte Wertschätzung für die Mühe und wir lassen niemanden auf vollen Töpfen sitzen.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
|
||||||
<button class="button-primary button--outline" type="button" id="register-modal-cancel">Abbrechen</button>
|
<button class="button-primary button--outline" type="button" id="register-modal-cancel">Abbrechen</button>
|
||||||
<button class="button-primary" type="button" id="confirm-register-btn">Ja, ich bin dabei</button>
|
<button class="button-primary" type="button" id="confirm-register-btn">Ja, ich bin dabei</button>
|
||||||
</div>
|
</div>
|
||||||
@ -59,12 +58,12 @@
|
|||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2>Pläne haben sich geändert?</h2>
|
<h2>Pläne haben sich geändert?</h2>
|
||||||
<button type="button" class="modal-close" aria-label="Popup schließen">×</button>
|
<button type="button" class="modal-close" id="unregister-modal-close" aria-label="Popup schließen">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>
|
<p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
|
||||||
<button class="button-primary button--outline" type="button" id="unregister-modal-cancel">Abbrechen</button>
|
<button class="button-primary button--outline" type="button" id="unregister-modal-cancel">Abbrechen</button>
|
||||||
<button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
|
<button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -36,9 +36,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Filter section: category chips + location/date filters -->
|
<!-- Filter section: category chips + location/date filters -->
|
||||||
<section class="filter-section margin-bottom-24">
|
<section class="filter-section">
|
||||||
<p class="filter-label">Art des Essens / Eventtyp</p>
|
<p class="filter-label">Art des Essens / Eventtyp</p>
|
||||||
<div class="filter-row margin-bottom-24">
|
<div class="filter-row">
|
||||||
<!-- Primary category filter buttons -->
|
<!-- Primary category filter buttons -->
|
||||||
<div class="category-group">
|
<div class="category-group">
|
||||||
<button class="category-item active" type="button" data-cat="ALLE">Alle</button>
|
<button class="category-item active" type="button" data-cat="ALLE">Alle</button>
|
||||||
@ -50,45 +50,45 @@
|
|||||||
|
|
||||||
<!-- Secondary filters populated/handled by JavaScript -->
|
<!-- Secondary filters populated/handled by JavaScript -->
|
||||||
<div class="meta-filter-group" aria-label="Weitere Filter">
|
<div class="meta-filter-group" aria-label="Weitere Filter">
|
||||||
<div class="meta-filter" for="location-filter">
|
<label class="meta-filter" for="location-filter">
|
||||||
<span>Ort</span>
|
<span>Ort</span>
|
||||||
<select id="location-filter">
|
<select id="location-filter">
|
||||||
<option value="ALLE_ORTE">Alle Orte</option>
|
<option value="ALLE_ORTE">Alle Orte</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</label>
|
||||||
|
|
||||||
<div class="meta-filter" for="date-filter">
|
<label class="meta-filter" for="date-filter">
|
||||||
<span>Datum</span>
|
<span>Datum</span>
|
||||||
<div class="date-input-wrapper">
|
<div class="date-input-wrapper">
|
||||||
<input id="date-filter" type="date">
|
<input id="date-filter" type="date">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<details class="filter-box">
|
|
||||||
<summary>Nach Ernährungform filtern</summary>
|
|
||||||
<div class="filter-row margin-bottom-16">
|
|
||||||
<div class="category-group">
|
|
||||||
<button class="category-item" type="button" data-diet="Fleisch">Fleisch</button>
|
|
||||||
<button class="category-item" type="button" data-diet="Fisch">Fisch</button>
|
|
||||||
<button class="category-item" type="button" data-diet="Vegetarisch">Vegetarisch</button>
|
|
||||||
<button class="category-item" type="button" data-diet="Vegan">Vegan</button>
|
|
||||||
<button class="category-item filter-delete" type="button" id="clear-all-filters">Alle Filter löschen</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="filter-box margin-bottom-24">
|
<p class="filter-label">Ernährungsform</p>
|
||||||
<summary>Nach Allergenen filtern</summary>
|
<div class="filter-row">
|
||||||
<div class="filter-row margin-bottom-16">
|
<!-- Primary category filter buttons -->
|
||||||
<div class="category-group">
|
<div class="category-group">
|
||||||
<button class="category-item" type="button" data-allergie="Glutenfrei">Glutenfrei</button>
|
<button class="category-item" type="button" data-diet="Fleisch">Fleisch</button>
|
||||||
<button class="category-item" type="button" data-allergie="Laktosefrei">Laktosefrei</button>
|
<button class="category-item" type="button" data-diet="Fisch">Fisch</button>
|
||||||
<button class="category-item" type="button" data-allergie="Ohne Nüsse">Ohne Nüsse</button>
|
<button class="category-item" type="button" data-diet="Vegetarisch">Vegetarisch</button>
|
||||||
|
<button class="category-item" type="button" data-diet="Vegan">Vegan</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</details>
|
<p class="filter-label">Allergene</p>
|
||||||
|
<div class="filter-row">
|
||||||
|
<!-- Allergen filter buttons -->
|
||||||
|
<div class="category-group">
|
||||||
|
<button class="category-item" type="button" data-allergie="glutenfrei">glutenfrei</button>
|
||||||
|
<button class="category-item" type="button" data-allergie="laktosefrei">laktosefrei</button>
|
||||||
|
<button class="category-item" type="button" data-allergie="ohne Nüsse">ohne Nüsse</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Render target: event cards or empty state -->
|
<!-- Render target: event cards or empty state -->
|
||||||
<section id="event-grid" class="event-list"></section>
|
<section id="event-grid" class="event-list"></section>
|
||||||
@ -114,12 +114,12 @@
|
|||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2>Ein Platz für dich am Tisch!</h2>
|
<h2>Ein Platz für dich am Tisch!</h2>
|
||||||
<button type="button" class="modal-close" aria-label="Popup schließen">×</button>
|
<button type="button" class="modal-close" onclick="closeRegisterModal()" aria-label="Popup schließen">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>Schön, dass du dich dazu gesellen möchtest! Da dein:e Gastgeber:in extra für dich einkauft und mit viel Liebe kocht, ist deine Anmeldung ein festes Versprechen. Bitte sag nur zu, wenn du an dem Tag wirklich Zeit hast. So zeigst du echte Wertschätzung für die Mühe und wir lassen niemanden auf vollen Töpfen sitzen.</p>
|
<p>Schön, dass du dich dazu gesellen möchtest! Da dein:e Gastgeber:in extra für dich einkauft und mit viel Liebe kocht, ist deine Anmeldung ein festes Versprechen. Bitte sag nur zu, wenn du an dem Tag wirklich Zeit hast. So zeigst du echte Wertschätzung für die Mühe und wir lassen niemanden auf vollen Töpfen sitzen.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
|
||||||
<button class="button-primary button--outline" type="button" onclick="closeRegisterModal()">Abbrechen</button>
|
<button class="button-primary button--outline" type="button" onclick="closeRegisterModal()">Abbrechen</button>
|
||||||
<button class="button-primary" type="button" id="confirm-register-btn">Ja, ich bin dabei</button>
|
<button class="button-primary" type="button" id="confirm-register-btn">Ja, ich bin dabei</button>
|
||||||
</div>
|
</div>
|
||||||
@ -130,12 +130,12 @@
|
|||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2>Pläne haben sich geändert?</h2>
|
<h2>Pläne haben sich geändert?</h2>
|
||||||
<button type="button" class="modal-close" aria-label="Popup schließen">×</button>
|
<button type="button" class="modal-close" onclick="closeUnregisterModal()" aria-label="Popup schließen">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>
|
<p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
|
||||||
<button class="button-primary button--outline" type="button" onclick="closeUnregisterModal()">Abbrechen</button>
|
<button class="button-primary button--outline" type="button" onclick="closeUnregisterModal()">Abbrechen</button>
|
||||||
<button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
|
<button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
34
index.html
34
index.html
@ -35,13 +35,13 @@
|
|||||||
<div class="hero__left">
|
<div class="hero__left">
|
||||||
<span class="badge margin-bottom-40">einfach. lecker. gemeinsam.</span>
|
<span class="badge margin-bottom-40">einfach. lecker. gemeinsam.</span>
|
||||||
<h1>Teile deine Leidenschaft, geniesse gemeinsam.</h1>
|
<h1>Teile deine Leidenschaft, geniesse gemeinsam.</h1>
|
||||||
<p class="margin-bottom-40">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>
|
<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-primary" href="signup.html">Registrieren</a>
|
<a class="button-primary" href="signup.html">Registrieren</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hero__right">
|
<div class="hero__right">
|
||||||
<div class="image-card">
|
<div class="image-card">
|
||||||
<img class="hero-image" src="assets/index_round table friends.jpeg" alt="Round table friends" />
|
<img class="hero-image" src="assets/index_ingredients.jpg" alt="Startpage Ingredients" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -82,8 +82,8 @@
|
|||||||
|
|
||||||
<!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content -->
|
<!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content -->
|
||||||
<section class="gallery" aria-label="Bildergalerie" aria-roledescription="Karussell">
|
<section class="gallery" aria-label="Bildergalerie" aria-roledescription="Karussell">
|
||||||
</div><h2>Einblick in Cooking-Erlebnisse</h2>
|
<div class="gallery__header"> </div><h2>Einblick in Cooking-Erlebnisse</h2>
|
||||||
<p class="margin-bottom-16">#gemeinsam_invité auf Instagram</p>
|
<p>#gemeinsam_invité auf Instagram</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="gallery__carousel">
|
<div class="gallery__carousel">
|
||||||
<button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild">
|
<button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild">
|
||||||
@ -104,7 +104,7 @@
|
|||||||
|
|
||||||
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 2 von 12">
|
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 2 von 12">
|
||||||
<div class="ig-post-wrapper">
|
<div class="ig-post-wrapper">
|
||||||
<img src="assets/index_Sharing food table.jpg" alt="Sharing food table">
|
<img src="assets/index_Pasta and many forks.jpg" alt="Pasta and many forks">
|
||||||
<div class="ig-overlay">
|
<div class="ig-overlay">
|
||||||
<span><i class="fa-solid fa-heart"></i> 89</span>
|
<span><i class="fa-solid fa-heart"></i> 89</span>
|
||||||
<span><i class="fa-solid fa-comment"></i> 5</span>
|
<span><i class="fa-solid fa-comment"></i> 5</span>
|
||||||
@ -184,7 +184,7 @@
|
|||||||
|
|
||||||
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 10 von 12">
|
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 10 von 12">
|
||||||
<div class="ig-post-wrapper">
|
<div class="ig-post-wrapper">
|
||||||
<img src="assets/index_Pasta and many forks.jpg" alt="Pasta and many forks">
|
<img src="assets/index_Sharing food table.jpg" alt="Sharing food table">
|
||||||
<div class="ig-overlay">
|
<div class="ig-overlay">
|
||||||
<span><i class="fa-solid fa-heart"></i> 389</span>
|
<span><i class="fa-solid fa-heart"></i> 389</span>
|
||||||
<span><i class="fa-solid fa-comment"></i> 47</span>
|
<span><i class="fa-solid fa-comment"></i> 47</span>
|
||||||
@ -221,6 +221,7 @@
|
|||||||
|
|
||||||
<div class="gallery_dots" role="tablist" aria-label="Seite auswählen"></div>
|
<div class="gallery_dots" role="tablist" aria-label="Seite auswählen"></div>
|
||||||
</section>
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
<!-- Lightbox: Bildansicht vergrössert -->
|
<!-- Lightbox: Bildansicht vergrössert -->
|
||||||
<div class="lightbox" id="gallery-lightbox" aria-hidden="true">
|
<div class="lightbox" id="gallery-lightbox" aria-hidden="true">
|
||||||
@ -235,6 +236,7 @@
|
|||||||
|
|
||||||
<!-- FAQ Section: Akkordion mit häufig gestellten Fragen -->
|
<!-- FAQ Section: Akkordion mit häufig gestellten Fragen -->
|
||||||
<section class="faq-section">
|
<section class="faq-section">
|
||||||
|
<div class="container">
|
||||||
<h2>Häufig gestellte Fragen</h2>
|
<h2>Häufig gestellte Fragen</h2>
|
||||||
<div class="faq-accordion">
|
<div class="faq-accordion">
|
||||||
<div class="faq-item">
|
<div class="faq-item">
|
||||||
@ -243,20 +245,10 @@
|
|||||||
<span class="faq-icon">+</span>
|
<span class="faq-icon">+</span>
|
||||||
</button>
|
</button>
|
||||||
<div class="faq-content">
|
<div class="faq-content">
|
||||||
<ol class="faq-list">
|
<p><strong>Schritt 1: Kostenloses Konto erstellen</strong><br>Gehe auf Invité, klicke auf "Jetzt beitreten" und fülle das Anmeldeformular aus. Du benötigst nur deine E-Mail und ein Passwort.</p>
|
||||||
<li>
|
<p><strong>Schritt 2: Dein Profil ausfüllen</strong><br>Lade ein Profilfoto hoch, schreib ein bisschen über dich und gib deine Allergien/Ernährungspräferenzen an. Das hilft anderen, dich besser kennenzulernen.</p>
|
||||||
<strong>Kostenloses Konto erstellen</strong><br>
|
<p><strong>Schritt 3: Erkunde Events</strong><br>Browsing durch unsere Events, filtere nach Diät oder Allergie-Einstellungen, und melde dich zu den Events an, die dich interessieren!</p>
|
||||||
Gehe auf Invité, klicke auf «Jetzt beitreten» und fülle das Anmeldeformular aus. Du benötigst nur deine E-Mail und ein Passwort.
|
<p><strong>Schritt 4: Erstelle dein eigenes Event</strong><br>Du kannst auch selbst ein Kochevent hosten! Klick auf "Event erstellen", beschreib dein Menü, und lade Gäste ein.</p>
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Finde passende Events</strong><br>
|
|
||||||
Erkunde unsere Events, filtere nach Diät- oder Allergie-Einstellungen und melde dich zu den Events an, die dich interessieren!
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Erstelle dein eigenes Event</strong><br>
|
|
||||||
Du kannst auch selbst ein Kochevent hosten! Klick auf «Event erstellen», beschreib dein Menü und lade Gäste ein.
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -309,9 +301,9 @@
|
|||||||
<p>Ja, dein Profil hilft anderen, dich besser kennenzulernen. Wir ermutigen zu Offenheit und gegenseitigem Vertrauen. Allerdings bleibt es deine Entscheidung, wem du deine Adresse mitteilst – die erfolgt nur 12 Stunden vor dem Event.</p>
|
<p>Ja, dein Profil hilft anderen, dich besser kennenzulernen. Wir ermutigen zu Offenheit und gegenseitigem Vertrauen. Allerdings bleibt es deine Entscheidung, wem du deine Adresse mitteilst – die erfolgt nur 12 Stunden vor dem Event.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
|
||||||
|
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<div class="footer-left">
|
<div class="footer-left">
|
||||||
|
|||||||
@ -447,29 +447,20 @@
|
|||||||
<strong>${event.title}</strong>
|
<strong>${event.title}</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-action-btn-wrap">
|
<div class="detail-action-btn-wrap">
|
||||||
<div class="detail-action-row" style="margin-left:auto; display:flex; gap:12px; align-items:center;">
|
${isFull ? `
|
||||||
${isFull ? `
|
<button class="detail-primary-btn detail-spots-pill-full" type="button" disabled>Ausgebucht</button>
|
||||||
<div class="detail-dereg-column">
|
` : `
|
||||||
<button class="button-plaetze event-spots-full" type="button" disabled>Ausgebucht</button>
|
<button class="detail-primary-btn${actionButtonVariantClass}" type="button" data-register-button ${actionButtonDisabled ? 'disabled' : ''}>
|
||||||
<small class="detail-dereg-hint detail-dereg-hint--placeholder"> </small>
|
${actionButtonLabel}
|
||||||
</div>
|
</button>
|
||||||
` : ''}
|
`}
|
||||||
|
${isRegistered && deregInfo.daysLeft !== null ? `
|
||||||
${(!isFull || isRegistered) ? `
|
<small class="detail-dereg-hint${deregInfo.isClosed ? ' detail-dereg-hint--closed' : ''}">
|
||||||
<div class="detail-dereg-column">
|
${deregInfo.isClosed ? 'Abmeldefrist abgelaufen'
|
||||||
<button class="${actionButtonVariantClass.trim()}" type="button" data-register-button ${actionButtonDisabled ? 'disabled' : ''}>
|
: deregInfo.daysLeft === 1 ? 'Noch 1 Tag zur Abmeldung'
|
||||||
${actionButtonLabel}
|
: `Noch ${deregInfo.daysLeft} Tage zur Abmeldung`}
|
||||||
</button>
|
</small>
|
||||||
${isRegistered && deregInfo.daysLeft !== null ? `
|
` : ''}
|
||||||
<small class="detail-dereg-hint${deregInfo.isClosed ? ' detail-dereg-hint--closed' : ''}">
|
|
||||||
${deregInfo.isClosed ? 'Abmeldefrist abgelaufen'
|
|
||||||
: deregInfo.daysLeft === 1 ? 'Noch 1 Tag zur Abmeldung'
|
|
||||||
: `Noch ${deregInfo.daysLeft} Tage zur Abmeldung`}
|
|
||||||
</small>
|
|
||||||
` : ''}
|
|
||||||
</div>
|
|
||||||
` : ''}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -531,15 +522,14 @@
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
snackbar.classList.remove('snackbar--visible');
|
snackbar.classList.remove('snackbar--visible');
|
||||||
setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
|
setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
|
||||||
}, 4000);
|
}, 3000);
|
||||||
}
|
}
|
||||||
renderDetailPage(event);
|
renderDetailPage(event);
|
||||||
};
|
};
|
||||||
|
|
||||||
const closeUnregister = () => modal.classList.remove('show');
|
document.getElementById('unregister-modal-close').onclick = () => modal.classList.remove('show');
|
||||||
document.getElementById('unregister-modal-close')?.addEventListener('click', closeUnregister);
|
document.getElementById('unregister-modal-cancel').onclick = () => modal.classList.remove('show');
|
||||||
document.getElementById('unregister-modal-cancel')?.addEventListener('click', closeUnregister);
|
modal.addEventListener('click', e => { if (e.target === modal) modal.classList.remove('show'); });
|
||||||
modal.addEventListener('click', e => { if (e.target === modal) closeUnregister(); });
|
|
||||||
|
|
||||||
} else if (!isFull && !isRegistrationClosed) {
|
} else if (!isFull && !isRegistrationClosed) {
|
||||||
const modal = document.getElementById('register-confirm-modal');
|
const modal = document.getElementById('register-confirm-modal');
|
||||||
@ -556,15 +546,14 @@
|
|||||||
if (snackbar) {
|
if (snackbar) {
|
||||||
snackbar.textContent = 'Du wurdest erfolgreich angemeldet.';
|
snackbar.textContent = 'Du wurdest erfolgreich angemeldet.';
|
||||||
snackbar.classList.add('snackbar--visible');
|
snackbar.classList.add('snackbar--visible');
|
||||||
setTimeout(() => snackbar.classList.remove('snackbar--visible'), 4000);
|
setTimeout(() => snackbar.classList.remove('snackbar--visible'), 3000);
|
||||||
}
|
}
|
||||||
renderDetailPage(event);
|
renderDetailPage(event);
|
||||||
};
|
};
|
||||||
|
|
||||||
const closeRegister = () => modal.classList.remove('show');
|
document.getElementById('register-modal-close').onclick = () => modal.classList.remove('show');
|
||||||
document.getElementById('register-modal-close')?.addEventListener('click', closeRegister);
|
document.getElementById('register-modal-cancel').onclick = () => modal.classList.remove('show');
|
||||||
document.getElementById('register-modal-cancel')?.addEventListener('click', closeRegister);
|
modal.addEventListener('click', e => { if (e.target === modal) modal.classList.remove('show'); });
|
||||||
modal.addEventListener('click', e => { if (e.target === modal) closeRegister(); });
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -167,7 +167,6 @@
|
|||||||
dateFilter.value = savedDate;
|
dateFilter.value = savedDate;
|
||||||
}
|
}
|
||||||
|
|
||||||
updateDietAvailability();
|
|
||||||
applyFilters();
|
applyFilters();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Fehler:', error);
|
console.error('Fehler:', error);
|
||||||
@ -536,8 +535,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="event-side${isFull ? ' event-side-full' : ''}">
|
<div class="event-side${isFull ? ' event-side-full' : ''}">
|
||||||
${actionMarkup}
|
|
||||||
${sideInfoMarkup}
|
${sideInfoMarkup}
|
||||||
|
${actionMarkup}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -632,59 +631,6 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Verhindert widersprüchliche Ernährungsformen:
|
|
||||||
// Fleisch/Fisch schliessen Vegetarisch/Vegan aus.
|
|
||||||
// Vegan schliesst alles andere (Fleisch, Fisch, Vegetarisch) aus.
|
|
||||||
// Vegetarisch schliesst Fleisch/Fisch aus, aber nicht Vegan.
|
|
||||||
function updateDietAvailability() {
|
|
||||||
const dietButtons = Array.from(filterButtons).filter(btn => btn.getAttribute('data-diet') !== null);
|
|
||||||
const meatFishButtons = dietButtons.filter(btn => ['Fleisch', 'Fisch'].includes(btn.getAttribute('data-diet')));
|
|
||||||
const plantButtons = dietButtons.filter(btn => ['Vegetarisch', 'Vegan'].includes(btn.getAttribute('data-diet')));
|
|
||||||
const vegetarischBtn = dietButtons.find(btn => btn.getAttribute('data-diet') === 'Vegetarisch');
|
|
||||||
const veganBtn = dietButtons.find(btn => btn.getAttribute('data-diet') === 'Vegan');
|
|
||||||
|
|
||||||
const hasVegan = activeDiets.has('Vegan');
|
|
||||||
const hasVegetarisch = activeDiets.has('Vegetarisch');
|
|
||||||
const hasMeatOrFish = meatFishButtons.some(btn => activeDiets.has(btn.getAttribute('data-diet')));
|
|
||||||
|
|
||||||
// If Vegan is selected, disable everything else
|
|
||||||
if (hasVegan) {
|
|
||||||
meatFishButtons.forEach(btn => {
|
|
||||||
btn.classList.add('disabled');
|
|
||||||
});
|
|
||||||
if (vegetarischBtn) {
|
|
||||||
vegetarischBtn.classList.add('disabled');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// If Vegetarisch is selected, disable only Fleisch/Fisch
|
|
||||||
else if (hasVegetarisch) {
|
|
||||||
meatFishButtons.forEach(btn => {
|
|
||||||
btn.classList.add('disabled');
|
|
||||||
});
|
|
||||||
if (veganBtn) {
|
|
||||||
veganBtn.classList.remove('disabled');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// If Fleisch/Fisch is selected, disable both Vegetarisch and Vegan
|
|
||||||
else if (hasMeatOrFish) {
|
|
||||||
if (vegetarischBtn) {
|
|
||||||
vegetarischBtn.classList.add('disabled');
|
|
||||||
}
|
|
||||||
if (veganBtn) {
|
|
||||||
veganBtn.classList.add('disabled');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// No conflicts, enable everything
|
|
||||||
else {
|
|
||||||
plantButtons.forEach(btn => {
|
|
||||||
btn.classList.remove('disabled');
|
|
||||||
});
|
|
||||||
meatFishButtons.forEach(btn => {
|
|
||||||
btn.classList.remove('disabled');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Category filter interactions: mutually exclusive (radio button behavior).
|
// Category filter interactions: mutually exclusive (radio button behavior).
|
||||||
filterButtons.forEach(button => {
|
filterButtons.forEach(button => {
|
||||||
button.addEventListener('click', () => {
|
button.addEventListener('click', () => {
|
||||||
@ -696,34 +642,12 @@
|
|||||||
// Category filter: exclusive selection
|
// Category filter: exclusive selection
|
||||||
activeCategory = categoryValue;
|
activeCategory = categoryValue;
|
||||||
} else if (dietValue !== null) {
|
} else if (dietValue !== null) {
|
||||||
// Diet filter: toggle selection with conflict handling
|
// Diet filter: toggle selection
|
||||||
const isCurrentlySelected = activeDiets.has(dietValue);
|
if (activeDiets.has(dietValue)) {
|
||||||
|
|
||||||
if (!isCurrentlySelected) {
|
|
||||||
// Adding a diet - handle conflicts
|
|
||||||
if (dietValue === 'Vegetarisch') {
|
|
||||||
// Vegetarisch removes Fleisch/Fisch but not Vegan
|
|
||||||
activeDiets.delete('Fleisch');
|
|
||||||
activeDiets.delete('Fisch');
|
|
||||||
activeDiets.add('Vegetarisch');
|
|
||||||
} else if (dietValue === 'Vegan') {
|
|
||||||
// Vegan removes all other options
|
|
||||||
activeDiets.delete('Vegetarisch');
|
|
||||||
activeDiets.delete('Fleisch');
|
|
||||||
activeDiets.delete('Fisch');
|
|
||||||
activeDiets.add('Vegan');
|
|
||||||
} else if (dietValue === 'Fleisch' || dietValue === 'Fisch') {
|
|
||||||
// Fleisch/Fisch remove Vegetarisch/Vegan
|
|
||||||
activeDiets.delete('Vegetarisch');
|
|
||||||
activeDiets.delete('Vegan');
|
|
||||||
activeDiets.add(dietValue);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Removing a diet
|
|
||||||
activeDiets.delete(dietValue);
|
activeDiets.delete(dietValue);
|
||||||
|
} else {
|
||||||
|
activeDiets.add(dietValue);
|
||||||
}
|
}
|
||||||
|
|
||||||
updateDietAvailability();
|
|
||||||
} else if (allergieValue !== null) {
|
} else if (allergieValue !== null) {
|
||||||
// Allergie filter: toggle selection
|
// Allergie filter: toggle selection
|
||||||
if (activeAllergies.has(allergieValue)) {
|
if (activeAllergies.has(allergieValue)) {
|
||||||
@ -755,30 +679,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear all filters button
|
|
||||||
const clearAllFiltersBtn = document.getElementById('clear-all-filters');
|
|
||||||
if (clearAllFiltersBtn) {
|
|
||||||
clearAllFiltersBtn.addEventListener('click', () => {
|
|
||||||
activeCategory = 'ALLE';
|
|
||||||
activeDiets.clear();
|
|
||||||
activeAllergies.clear();
|
|
||||||
|
|
||||||
if (locationFilter) {
|
|
||||||
locationFilter.value = 'ALLE_ORTE';
|
|
||||||
}
|
|
||||||
if (dateFilter) {
|
|
||||||
dateFilter.value = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
updateDietAvailability();
|
|
||||||
applyFilters();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Info button modal behavior
|
// Info button modal behavior
|
||||||
const infoButton = document.getElementById('info-button');
|
const infoButton = document.getElementById('info-button');
|
||||||
const infoModal = document.getElementById('info-modal');
|
const infoModal = document.getElementById('info-modal');
|
||||||
const modalClose = infoModal?.querySelector('modal-close');
|
const modalClose = infoModal?.querySelector('.modal-close');
|
||||||
|
|
||||||
if (infoButton && infoModal) {
|
if (infoButton && infoModal) {
|
||||||
infoButton.addEventListener('click', () => {
|
infoButton.addEventListener('click', () => {
|
||||||
@ -813,18 +717,3 @@
|
|||||||
// Kick off initial load/render cycle.
|
// Kick off initial load/render cycle.
|
||||||
fetchEvents();
|
fetchEvents();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Modal closing helper functions
|
|
||||||
function closeRegisterModal() {
|
|
||||||
const modal = document.getElementById('register-confirm-modal');
|
|
||||||
if (modal) {
|
|
||||||
modal.classList.remove('show');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeUnregisterModal() {
|
|
||||||
const modal = document.getElementById('unregister-confirm-modal');
|
|
||||||
if (modal) {
|
|
||||||
modal.classList.remove('show');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -227,37 +227,32 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const unregisterButton = target.closest('[data-unregister-id]');
|
const unregisterButton = target.closest('[data-unregister-id]');
|
||||||
if (unregisterButton) {
|
if (unregisterButton) {
|
||||||
if (!currentUser?.email) return;
|
if (!currentUser?.email) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const eventId = Number(unregisterButton.getAttribute('data-unregister-id'));
|
const eventId = Number(unregisterButton.getAttribute('data-unregister-id'));
|
||||||
if (!Number.isFinite(eventId)) return;
|
if (!Number.isFinite(eventId)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const modal = document.getElementById('unregister-confirm-modal');
|
unregisterFromEvent(eventId, currentUser.email);
|
||||||
if (modal) modal.classList.add('show');
|
|
||||||
|
|
||||||
document.getElementById('confirm-unregister-btn').onclick = () => {
|
// Snackbar: Feedback bei erfolgreicher Abmeldung.
|
||||||
modal.classList.remove('show');
|
const snackbar = document.getElementById('snackbar');
|
||||||
unregisterFromEvent(eventId, currentUser.email);
|
if (snackbar) {
|
||||||
const snackbar = document.getElementById('snackbar');
|
snackbar.textContent = 'Du wurdest erfolgreich abgemeldet.';
|
||||||
if (snackbar) {
|
snackbar.classList.add('snackbar--danger', 'snackbar--visible');
|
||||||
snackbar.textContent = 'Du wurdest erfolgreich abgemeldet.';
|
setTimeout(() => {
|
||||||
snackbar.classList.add('snackbar--danger', 'snackbar--visible');
|
snackbar.classList.remove('snackbar--visible');
|
||||||
setTimeout(() => {
|
setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
|
||||||
snackbar.classList.remove('snackbar--visible');
|
}, 3000);
|
||||||
setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
|
}
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
document.getElementById('unregister-modal-close').onclick = () => modal.classList.remove('show');
|
|
||||||
document.getElementById('unregister-modal-cancel').onclick = () => modal.classList.remove('show');
|
|
||||||
modal.addEventListener('click', e => { if (e.target === modal) modal.classList.remove('show'); });
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if (target.closest('a, button')) {
|
if (target.closest('a, button')) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -291,20 +286,11 @@
|
|||||||
modal.classList.remove('show');
|
modal.classList.remove('show');
|
||||||
};
|
};
|
||||||
|
|
||||||
document.getElementById('confirmCancelEventBtn').addEventListener('click', function() {
|
document.getElementById('confirmCancelEventBtn').addEventListener('click', function() {
|
||||||
if (pendingCancelEventId !== null && currentUser?.email) {
|
if (pendingCancelEventId !== null && currentUser?.email) {
|
||||||
cancelHostedEvent(pendingCancelEventId, currentUser.email);
|
cancelHostedEvent(pendingCancelEventId, currentUser.email);
|
||||||
}
|
}
|
||||||
closeCancelEventModal();
|
closeCancelEventModal();
|
||||||
const snackbar = document.getElementById('snackbar');
|
|
||||||
if (snackbar) {
|
|
||||||
snackbar.textContent = 'Dein Event wurde erfolgreich abgesagt.';
|
|
||||||
snackbar.classList.add('snackbar--danger', 'snackbar--visible');
|
|
||||||
setTimeout(() => {
|
|
||||||
snackbar.classList.remove('snackbar--visible');
|
|
||||||
setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Schliesst das Modal bei Klick ausserhalb des Inhalts.
|
// Schliesst das Modal bei Klick ausserhalb des Inhalts.
|
||||||
@ -341,10 +327,10 @@
|
|||||||
|
|
||||||
renderMyEvents(allEvents, currentUser);
|
renderMyEvents(allEvents, currentUser);
|
||||||
renderMyRegistrations(allEvents, currentUser);
|
renderMyRegistrations(allEvents, currentUser);
|
||||||
|
profileFeedback.textContent = 'Event wurde abgesagt und aus deinem Hosting entfernt.';
|
||||||
}
|
}
|
||||||
// Entfernt eine Event-ID aus der Benutzerliste und aktualisiert die UI sofort.
|
// Entfernt eine Event-ID aus der Benutzerliste und aktualisiert die UI sofort.
|
||||||
function unregisterFromEvent(eventId, userEmail) {
|
function unregisterFromEvent(eventId, userEmail) {
|
||||||
const registrationMap = getRegistrationMap();
|
const registrationMap = getRegistrationMap();
|
||||||
const currentIds = Array.isArray(registrationMap[userEmail]) ? registrationMap[userEmail] : [];
|
const currentIds = Array.isArray(registrationMap[userEmail]) ? registrationMap[userEmail] : [];
|
||||||
const nextIds = currentIds
|
const nextIds = currentIds
|
||||||
@ -355,10 +341,12 @@
|
|||||||
setRegistrationMap(registrationMap);
|
setRegistrationMap(registrationMap);
|
||||||
|
|
||||||
renderMyRegistrations(allEvents, currentUser);
|
renderMyRegistrations(allEvents, currentUser);
|
||||||
|
profileFeedback.textContent = 'Du wurdest von dem Event abgemeldet.';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Validiert Profildaten konsistent und liefert true/false zur Submit-Steuerung.
|
// Validiert Profildaten konsistent und liefert true/false zur Submit-Steuerung.
|
||||||
function validateProfileForm() {
|
function validateProfileForm() {
|
||||||
|
let isValid = true;
|
||||||
|
|
||||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
|
||||||
@ -595,12 +583,12 @@
|
|||||||
|
|
||||||
if (events.length === 0) {
|
if (events.length === 0) {
|
||||||
const emptyElement = document.createElement('div');
|
const emptyElement = document.createElement('div');
|
||||||
emptyElement.className = 'empty-state';
|
emptyElement.className = 'profile-empty-state';
|
||||||
emptyElement.innerHTML = `
|
emptyElement.innerHTML = `
|
||||||
<div class="empty-state-kicker">Keine Treffer</div>
|
<p class="profile-empty-kicker">Keine Treffer</p>
|
||||||
<h3>${emptyStateConfig.title}</h3>
|
<h3>${emptyStateConfig.title}</h3>
|
||||||
<p>${emptyStateConfig.text}</p>
|
<p>${emptyStateConfig.text}</p>
|
||||||
<a class="empty-state-link button-primary" href="${emptyStateConfig.href}">${emptyStateConfig.buttonLabel}</a>
|
<a class="button-primary" href="${emptyStateConfig.href}">${emptyStateConfig.buttonLabel}</a>
|
||||||
`;
|
`;
|
||||||
container.appendChild(emptyElement);
|
container.appendChild(emptyElement);
|
||||||
return;
|
return;
|
||||||
|
|||||||
35
login.html
35
login.html
@ -5,11 +5,10 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Invité | Login</title>
|
<title>Invité | Login</title>
|
||||||
|
|
||||||
<!-- Stylesheet für diese Seite -->
|
|
||||||
<link rel="stylesheet" href="css/login_signup.css">
|
|
||||||
|
|
||||||
<!-- Globales Stylesheet -->
|
<!-- Globales Stylesheet -->
|
||||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||||
|
<!-- Stylesheet für diese Seite -->
|
||||||
|
<link rel="stylesheet" href="css/login_signup.css">
|
||||||
<script src="js/navigation.js" defer></script>
|
<script src="js/navigation.js" defer></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
@ -27,34 +26,36 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<div class="container-login layout-narrow">
|
<div class="container">
|
||||||
|
<div class="container">
|
||||||
|
<div class="image-section">
|
||||||
|
<img src="assets/index_cooking.jpg" alt="Social Cooking">
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="form-section">
|
||||||
<h1>Login</h1>
|
<h1>Login</h1>
|
||||||
|
|
||||||
<form id="loginForm" novalidate >
|
<form id="loginForm" novalidate>
|
||||||
<div class="form-group margin-bottom-16">
|
<div class="form-group">
|
||||||
<p class= "label-input-field" for="email">E-Mail</p>
|
<label for="email">E-Mail</label>
|
||||||
<input type="email" id="email" name="email" required placeholder="Deine E-mail-Adresse">
|
<input type="email" id="email" name="email" required placeholder="deine.email@example.com">
|
||||||
<div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail-Adresse ein.</div>
|
<div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail Adresse ein.</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group margin-bottom-40">
|
<div class="form-group">
|
||||||
<p class= "label-input-field" for="passwort">Passwort</p>
|
<label for="passwort">Passwort</label>
|
||||||
<input type="password" id="passwort" name="passwort" required placeholder="Dein Passwort">
|
<input type="password" id="passwort" name="passwort" required placeholder="Gib dein Passwort ein">
|
||||||
<div class="error-message error-message--field-callout" id="passwortError">Bitte gib dein Passwort ein.</div>
|
<div class="error-message error-message--field-callout" id="passwortError">Bitte gib dein Passwort ein.</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="button-primary margin-bottom-24">Login</button>
|
<button type="submit" class="button-primary">Login</button>
|
||||||
|
|
||||||
<div class="link-text">
|
<div class="link-text">
|
||||||
Du hast noch keinen Account? <a href="signup.html">Hier geht es zur Registration.</a>
|
Du hast noch keinen Account? <a href="signup.html">Hier geht es zur Anmeldung.</a>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div> <!-- Schliesst container -->
|
</div> <!-- Schliesst container -->
|
||||||
<div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div>
|
<div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div>
|
||||||
<script src="js/login.js"></script>
|
<script src="js/login.js"></script>
|
||||||
|
|||||||
@ -32,7 +32,7 @@
|
|||||||
<main class="layout-wide">
|
<main class="layout-wide">
|
||||||
<section class="profile-hero" aria-label="Profilübersicht">
|
<section class="profile-hero" aria-label="Profilübersicht">
|
||||||
<div>
|
<div>
|
||||||
<p class="badge margin-bottom-40">Mein Bereich</p>
|
<p class="badge">Mein Bereich</p>
|
||||||
<h1 id="headline">Mein Profil</h1>
|
<h1 id="headline">Mein Profil</h1>
|
||||||
<p id="profile-subline" class="profile-subline">Hier findest du deine Events, deine Anmeldungen und kannst deine Profildaten verwalten.</p>
|
<p id="profile-subline" class="profile-subline">Hier findest du deine Events, deine Anmeldungen und kannst deine Profildaten verwalten.</p>
|
||||||
</div>
|
</div>
|
||||||
@ -70,8 +70,8 @@
|
|||||||
<div class="panel-head">
|
<div class="panel-head">
|
||||||
<span id="my-registrations-count" class="panel-count">0</span>
|
<span id="my-registrations-count" class="panel-count">0</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="info-abmeldung">
|
<p style="font-size: 0.9rem; color: var(--olive); margin-bottom: 16px; display: flex; align-items: flex-start; gap: 8px;">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--olive)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 1px;">
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--olive)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 1px;">
|
||||||
<circle cx="12" cy="12" r="10"/>
|
<circle cx="12" cy="12" r="10"/>
|
||||||
<line x1="12" y1="8" x2="12" y2="8"/>
|
<line x1="12" y1="8" x2="12" y2="8"/>
|
||||||
<line x1="12" y1="12" x2="12" y2="16"/>
|
<line x1="12" y1="12" x2="12" y2="16"/>
|
||||||
@ -85,27 +85,27 @@
|
|||||||
<h2 class="panel-title">Profil verwalten</h2>
|
<h2 class="panel-title">Profil verwalten</h2>
|
||||||
<form id="profile-form" novalidate>
|
<form id="profile-form" novalidate>
|
||||||
<div class="form-grid">
|
<div class="form-grid">
|
||||||
<div class="margin-bottom-16">
|
<div class="form-group">
|
||||||
<label class="label-input-field" for="vorname">Vorname</label>
|
<label for="vorname">Vorname</label>
|
||||||
<input type="text" id="vorname" name="vorname" required>
|
<input type="text" id="vorname" name="vorname" required>
|
||||||
<p class="input-error" id="vorname-error">Bitte gib deinen Vornamen ein.</p>
|
<p class="input-error" id="vorname-error">Bitte gib deinen Vornamen ein.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="margin-bottom-16">
|
<div class="form-group">
|
||||||
<label class="label-input-field" for="nachname">Nachname</label>
|
<label for="nachname">Nachname</label>
|
||||||
<input type="text" id="nachname" name="nachname" required>
|
<input type="text" id="nachname" name="nachname" required>
|
||||||
<p class="input-error" id="nachname-error">Bitte gib deinen Nachnamen ein.</p>
|
<p class="input-error" id="nachname-error">Bitte gib deinen Nachnamen ein.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="margin-bottom-16">
|
<div class="form-group">
|
||||||
<label class="label-input-field" for="email">E-Mail</label>
|
<label for="email">E-Mail</label>
|
||||||
<input type="email" id="email" name="email" required>
|
<input type="email" id="email" name="email" required>
|
||||||
<p class="input-error" id="email-error">Bitte gib eine gültige E-Mail-Adresse ein.</p>
|
<p class="input-error" id="email-error">Bitte gib eine gültige E-Mail-Adresse ein.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="margin-bottom-40">
|
<div class="form-group">
|
||||||
<label class="label-input-field" for="passwort">Passwort</label>
|
<label for="passwort">Passwort</label>
|
||||||
<input type="password" id="passwort" name="passwort" minlength="6" placeholder="Mindestens 6 Zeichen">
|
<input type="password" id="passwort" name="passwort" minlength="6" placeholder="Mindestens 6 Zeichen">
|
||||||
<p class="input-hint">Nur ausfüllen, wenn du dein Passwort ändern möchtest.</p>
|
<p class="input-hint">Nur ausfüllen, wenn du dein Passwort ändern möchtest.</p>
|
||||||
<p class="input-error" id="passwort-error">Das Passwort muss mindestens 6 Zeichen lang sein.</p>
|
<p class="input-error" id="passwort-error">Das Passwort muss mindestens 6 Zeichen lang sein.</p>
|
||||||
@ -122,11 +122,11 @@
|
|||||||
<div id="logoutModal" class="modal">
|
<div id="logoutModal" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
|
<button class="close-btn" onclick="closeLogoutModal()">×</button>
|
||||||
<h2>Abmelden?</h2>
|
<h2>Abmelden?</h2>
|
||||||
</div>
|
</div>
|
||||||
<p class="modal-body">
|
<p class="modal-body">
|
||||||
Bist du sicher, dass du dich abmelden möchtest?
|
Bist du sicher, dass du dich abmelden möchtest?
|
||||||
<button type="button" class="modal-close" aria-label="Popup schließen">×</button>
|
|
||||||
</p>
|
</p>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="button-primary button--outline" type="button" onclick="closeLogoutModal()">Abbrechen</button>
|
<button class="button-primary button--outline" type="button" onclick="closeLogoutModal()">Abbrechen</button>
|
||||||
@ -135,21 +135,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="unregister-confirm-modal" class="modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2>Pläne haben sich geändert?</h2>
|
|
||||||
<button type="button" class="modal-close" id="unregister-modal-close" aria-label="Popup schließen">×</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
|
|
||||||
<button class="button-primary button--outline" type="button" id="unregister-modal-cancel">Abbrechen</button>
|
|
||||||
<button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Snackbar: Feedback bei Abmeldung von Events -->
|
<!-- Snackbar: Feedback bei Abmeldung von Events -->
|
||||||
<div class="snackbar" id="snackbar"></div>
|
<div class="snackbar" id="snackbar"></div>
|
||||||
|
|
||||||
@ -157,11 +142,11 @@
|
|||||||
<div id="cancelEventModal" class="modal">
|
<div id="cancelEventModal" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
|
<button class="close-btn" onclick="closeCancelEventModal()">×</button>
|
||||||
<h2>Event absagen?</h2>
|
<h2>Event absagen?</h2>
|
||||||
</div>
|
</div>
|
||||||
<p class="modal-body">
|
<p class="modal-body">
|
||||||
Bist du sicher, dass du dieses Event absagen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.
|
Bist du sicher, dass du dieses Event absagen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.
|
||||||
<button type="button" class="modal-close" aria-label="Popup schließen">×</button>
|
|
||||||
</p>
|
</p>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="button-secondary" type="button" onclick="closeCancelEventModal()">Abbrechen</button>
|
<button class="button-secondary" type="button" onclick="closeCancelEventModal()">Abbrechen</button>
|
||||||
|
|||||||
41
signup.html
41
signup.html
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Invité | Registration</title>
|
<title>Kontaktseite - Invité</title>
|
||||||
|
|
||||||
<!-- Globales Stylesheet -->
|
<!-- Globales Stylesheet -->
|
||||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||||
@ -26,8 +26,12 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<div class="container-registration layout-wide">
|
<div class="container">
|
||||||
<div class="text-section">
|
<div class="container">
|
||||||
|
<div class="image-section">
|
||||||
|
<img src="assets/index_cooking.jpg" alt="Social Cooking">
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="form-section">
|
<div class="form-section">
|
||||||
<h1>Erstelle deinen Account</h1>
|
<h1>Erstelle deinen Account</h1>
|
||||||
|
|
||||||
@ -36,31 +40,31 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form id="signupForm" novalidate>
|
<form id="signupForm" novalidate>
|
||||||
<div class="form-group margin-bottom-16">
|
<div class="form-group">
|
||||||
<p class= "label-input-field" for="vorname">Vorname*</p>
|
<label for="vorname">Vorname *</label>
|
||||||
<input type="text" id="vorname" name="vorname" required placeholder="Dein Vorname">
|
<input type="text" id="vorname" name="vorname" required placeholder="Dein Vorname">
|
||||||
<div class="error-message error-message--field-callout" id="vornameError">Bitte gib deinen Vornamen ein.</div>
|
<div class="error-message error-message--field-callout" id="vornameError">Bitte gib deinen Vornamen ein.</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group margin-bottom-16">
|
<div class="form-group">
|
||||||
<p class= "label-input-field" for="nachname">Nachname*</p>
|
<label for="nachname">Nachname *</label>
|
||||||
<input type="text" id="nachname" name="nachname" required placeholder="Dein Nachname">
|
<input type="text" id="nachname" name="nachname" required placeholder="Dein Nachname">
|
||||||
<div class="error-message error-message--field-callout" id="nachnameError">Bitte gib deinen Nachnamen ein.</div>
|
<div class="error-message error-message--field-callout" id="nachnameError">Bitte gib deinen Nachnamen ein.</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group margin-bottom-16">
|
<div class="form-group">
|
||||||
<p class= "label-input-field" for="email">E-Mail*</p>
|
<label for="email">E-Mail *</label>
|
||||||
<input type="email" id="email" name="email" required placeholder="Deine E-mail-Adresse">
|
<input type="email" id="email" name="email" required placeholder="deine.email@example.com">
|
||||||
<div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail-Adresse ein.</div>
|
<div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail Adresse ein.</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group margin-bottom-40">
|
<div class="form-group">
|
||||||
<p class= "label-input-field" for="passwort">Passwort*</p>
|
<label for="passwort">Passwort *</label>
|
||||||
<input type="password" id="passwort" name="passwort" required placeholder="Mindestens 8 Zeichen">
|
<input type="password" id="passwort" name="passwort" required placeholder="Mindestens 8 Zeichen">
|
||||||
<div class="error-message error-message--field-callout" id="passwortError">Dein Passwort muss mindestens 8 Zeichen lang sein.</div>
|
<div class="error-message error-message--field-callout" id="passwortError">Dein Passwort muss mindestens 8 Zeichen lang sein.</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="submit" class="button-primary margin-bottom-24">Konto erstellen</button>
|
<button type="submit" class="button-primary">Konto erstellen</button>
|
||||||
|
|
||||||
|
|
||||||
<div class="link-text">
|
<div class="link-text">
|
||||||
@ -68,13 +72,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="image-section">
|
|
||||||
<img src="assets/index_cooking.jpg" alt="Social Cooking">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- Schliesst container -->
|
</div> <!-- Schliesst container -->
|
||||||
|
|
||||||
@ -82,8 +79,8 @@
|
|||||||
<div id="welcomeModal" class="modal">
|
<div id="welcomeModal" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2>Konto erfolgreich erstellt!</h2>
|
|
||||||
<button class="close-btn" onclick="closeWelcomeModal()">×</button>
|
<button class="close-btn" onclick="closeWelcomeModal()">×</button>
|
||||||
|
<h2>Konto erfolgreich erstellt!</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
Willkommen bei Invité! Dein Account wurde erfolgreich erstellt. Entdecke jetzt die neuesten Events in deiner Nähe.
|
Willkommen bei Invité! Dein Account wurde erfolgreich erstellt. Entdecke jetzt die neuesten Events in deiner Nähe.
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user