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;
|
||||
}
|
||||
|
||||
/*
|
||||
.submission-success {
|
||||
padding: var(--space-24) 0 var(--space-48);
|
||||
}*/
|
||||
padding: var(--space-4) 0 var(--space-7);
|
||||
}
|
||||
|
||||
.submission-success-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-32);
|
||||
gap: var(--space-5);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -77,16 +76,14 @@
|
||||
}
|
||||
|
||||
.startseite {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 80px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.step-layout--intro {
|
||||
min-height: 60vh;
|
||||
align-content: center;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-48);
|
||||
gap: var(--space-7);
|
||||
}
|
||||
|
||||
.step-copy,
|
||||
@ -94,15 +91,16 @@
|
||||
.form-field,
|
||||
fieldset {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.step-copy {
|
||||
gap: var(--space-24);
|
||||
gap: var(--space-4);
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.step-fields {
|
||||
gap: var(--space-32);
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.form-field,
|
||||
@ -110,6 +108,7 @@ fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
gap: var(--space-16);
|
||||
}
|
||||
|
||||
|
||||
@ -131,18 +130,29 @@ fieldset {
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
|
||||
.field-hint {
|
||||
color: var(--olive);
|
||||
font-size: 1rem;
|
||||
margin-bottom: var(--space-8);
|
||||
margin: -0.25rem 0 0;
|
||||
color: var(--color-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
@ -152,8 +162,8 @@ input[type="number"],
|
||||
textarea {
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.125rem;
|
||||
padding: var(--space-16) var(--space-20);
|
||||
font-size: 1.25rem;;
|
||||
padding: 1rem 1.25rem;
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--butter-light);
|
||||
@ -183,7 +193,7 @@ input[type="date"]:hover,
|
||||
input[type="time"]:hover,
|
||||
input[type="number"]:hover,
|
||||
textarea:hover {
|
||||
border: 2px solid var(--olive);
|
||||
border-color: rgba(102, 52, 13, 0.28);
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
@ -191,7 +201,7 @@ input[type="date"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="number"]:focus,
|
||||
textarea:focus {
|
||||
border: 2px solid var(--olive);
|
||||
border-color: var(--olive-dark);
|
||||
}
|
||||
|
||||
.field-invalid {
|
||||
@ -201,7 +211,7 @@ textarea:focus {
|
||||
|
||||
.field-row {
|
||||
display: grid;
|
||||
gap: var(--space-24);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.option-grid {
|
||||
@ -222,13 +232,14 @@ textarea:focus {
|
||||
.option-card--with-icon {
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
gap: var(--space-12);
|
||||
color: var(--black);
|
||||
gap: var(--space-2);
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
.option-card__icon {
|
||||
color: var(--black);
|
||||
font-size: 1.25rem;
|
||||
color: var(--brown);
|
||||
font-size: 1.35rem;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -244,25 +255,38 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.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) {
|
||||
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) {
|
||||
opacity: 0.6;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover {
|
||||
border-color: var(--olive-light);
|
||||
background: var(--butter-light);
|
||||
color: var(--black);
|
||||
color: var(--brown);
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover .option-card__icon {
|
||||
color: var(--black);
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
.option-card input {
|
||||
@ -279,18 +303,23 @@ textarea:focus {
|
||||
|
||||
.option-card--invalid {
|
||||
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 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
color: var(--black);
|
||||
font-size: 1.5rem;
|
||||
color: var(--brown);
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.guest-count-icon::before {
|
||||
display: block;
|
||||
transform: translateX(1.1rem);
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -299,8 +328,8 @@ textarea:focus {
|
||||
|
||||
.counter-value-group {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
row-gap: var(--space-8);
|
||||
justify-items: stretch;
|
||||
row-gap: var(--space-1);
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
@ -313,7 +342,7 @@ textarea:focus {
|
||||
|
||||
.review-card {
|
||||
display: grid;
|
||||
gap: var(--space-24);
|
||||
gap: var(--space-4);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
@ -323,7 +352,7 @@ textarea:focus {
|
||||
|
||||
.review-card--success {
|
||||
display: grid;
|
||||
gap: var(--space-32);
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-16) 0 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
@ -333,39 +362,51 @@ textarea:focus {
|
||||
|
||||
.review-list {
|
||||
display: grid;
|
||||
gap: var(--space-12);
|
||||
gap: var(--space-4);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.review-item {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
padding: 1rem 1.1rem;
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border: 1px solid var(--input-border-soft);
|
||||
border-radius: 1.125rem;
|
||||
background: var(--butter-light);
|
||||
box-shadow: 0 1px 2px rgba(102, 52, 13, 0.04);
|
||||
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:last-child {
|
||||
border-bottom: 1px solid var(--input-border-soft);
|
||||
}
|
||||
|
||||
.review-item:hover {
|
||||
border-color: rgba(102, 52, 13, 0.28);
|
||||
background: rgba(247, 246, 230, 0.92);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.review-item:hover,
|
||||
.review-item:focus-visible {
|
||||
border: 2px solid var(--olive);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
transform: translateY(-3px);
|
||||
outline: 3px solid rgba(107, 107, 5, 0.2);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.review-item dt {
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.review-item dd {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.review-gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-8);
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.review-gallery__thumb {
|
||||
@ -383,8 +424,9 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.flow-footer {
|
||||
padding-top: var(--space-80);
|
||||
bottom: 0;
|
||||
backdrop-filter: none;
|
||||
padding-top: var(--space-4);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
@ -437,7 +479,8 @@ textarea:focus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-24);
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4) 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -461,7 +504,14 @@ textarea:focus {
|
||||
|
||||
.button--intro {
|
||||
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 {
|
||||
@ -469,22 +519,25 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.gallery-add-button {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: var(--space-8);
|
||||
padding: var(--space-20);
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--butter-light);
|
||||
color: var(--olive);
|
||||
font-family: var(--font-main);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.gallery-add-button__icon {
|
||||
color: var(--black);
|
||||
font-size: 1.5rem;
|
||||
color: var(--brown);
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@ -540,7 +593,7 @@ textarea:focus {
|
||||
.site-footer {
|
||||
width: min(100% - 2rem, var(--max-width));
|
||||
margin: 0 auto;
|
||||
padding: var(--space-32) 0 var(--space-40);
|
||||
padding: var(--space-5) 0 var(--space-40);
|
||||
color: var(--color-muted);
|
||||
text-align: center;
|
||||
}
|
||||
@ -573,7 +626,7 @@ textarea:focus-visible {
|
||||
position: static;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: var(--space-12);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
|
||||
@ -12,19 +12,28 @@
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-24);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.overview-title-row .overview-title {
|
||||
margin-bottom: var(--space-24);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
margin-bottom: var(--space-24);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.detail-section-title {
|
||||
@ -39,15 +48,26 @@
|
||||
/* ---------------------------------------------------------
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-16);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.category-group {
|
||||
display: flex;
|
||||
gap: var(--space-6);
|
||||
gap: var(--space-1);
|
||||
margin-bottom: 0;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
@ -61,13 +81,13 @@
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
padding: var(--space-8) var(--space-20);
|
||||
padding: var(--space-1) var(--space-20);
|
||||
}
|
||||
|
||||
.meta-filter-group {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: var(--space-12);
|
||||
gap: var(--space-2);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -85,7 +105,7 @@
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--butter-light);
|
||||
height: 37px;
|
||||
padding: 0 var(--space-24);
|
||||
padding: 0 var(--space-4);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -107,7 +127,7 @@
|
||||
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);
|
||||
}
|
||||
|
||||
@ -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-repeat: no-repeat;
|
||||
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);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-32) var(--space-40);
|
||||
padding: var(--space-5) var(--space-40);
|
||||
display: flex;
|
||||
gap: var(--space-40);
|
||||
cursor: pointer;
|
||||
@ -163,7 +183,7 @@
|
||||
/* Primary metadata line: location + date/time/guest counters. */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-24);
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-0);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@ -183,7 +203,7 @@
|
||||
.event-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-8);
|
||||
gap: var(--space-1);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@ -195,7 +215,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
padding: var(--space-8) var(--space-20);
|
||||
padding: var(--space-1) var(--space-20);
|
||||
}
|
||||
|
||||
.event-spec-chip {
|
||||
@ -227,7 +247,7 @@
|
||||
|
||||
.button-plaetze {
|
||||
border: none;
|
||||
padding: var(--space-8) var(--space-24);
|
||||
padding: var(--space-01) var(--space-4);
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.125rem;
|
||||
@ -243,7 +263,7 @@
|
||||
.event-spots-full, .detail-spots-pill-full {
|
||||
/* Sold-out visual state, intentionally high-contrast and always filled. */
|
||||
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);
|
||||
color: var(--butter-light);
|
||||
background: var(--tomato-light);
|
||||
@ -265,6 +285,47 @@
|
||||
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
|
||||
@ -282,7 +343,7 @@
|
||||
.detail-top-row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-32);
|
||||
gap: var(--space-5);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@ -337,8 +398,8 @@
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
letter-spacing: var(--ls-lg);
|
||||
padding: var(--space-8) var(--space-20);
|
||||
letter-spacing: var(--ls-la);
|
||||
padding: var(--space-1) var(--space-20);
|
||||
}*/
|
||||
|
||||
.detail-gallery {
|
||||
@ -442,16 +503,16 @@
|
||||
.detail-lightbox-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
max-height: 90vh;
|
||||
object-fit: contain;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--black);
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.detail-lightbox-close {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
right: -40px;
|
||||
top: -42px;
|
||||
right: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--butter-light);
|
||||
@ -463,7 +524,7 @@
|
||||
.detail-panel {
|
||||
background: var(--butter-light);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-24) var(--space-32);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
}
|
||||
|
||||
.detail-panel-compact {
|
||||
@ -474,7 +535,7 @@
|
||||
margin: 20px;
|
||||
list-style: disc;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.45;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.detail-participants-head {
|
||||
@ -484,6 +545,14 @@
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -511,26 +580,27 @@
|
||||
.detail-participants-full {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.detail-participant-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 400;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.detail-participants-link {
|
||||
background: none;
|
||||
border: none;
|
||||
font-family: var(--font-main);
|
||||
color: var(--olive);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
text-decoration: underline;
|
||||
@ -547,13 +617,13 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-16);
|
||||
gap: var(--space-2);
|
||||
background: var(--white);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
|
||||
padding: var(--space-24) var(--space-32);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
margin-top: var(--space-40);
|
||||
position: sticky;
|
||||
bottom: var(--space-40);
|
||||
@ -601,13 +671,13 @@
|
||||
.detail-action-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-8);
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
|
||||
.detail-spots-pill {
|
||||
border: none;
|
||||
padding: var(--space-8) var(--space-24);
|
||||
padding: var(--space-01) var(--space-4);
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
@ -626,50 +696,24 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
justify-content: center;
|
||||
height: 52px;
|
||||
padding: 0 22px;
|
||||
font-size: 1.25rem;
|
||||
border-radius: var(--radius-pill);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.detail-dereg-hint {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: var(--olive);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.detail-dereg-hint--placeholder {
|
||||
visibility: hidden;
|
||||
.detail-dereg-hint--closed {
|
||||
color: var(--tomato);
|
||||
font-weight: 500;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.detail-primary-btn {
|
||||
@ -836,6 +880,11 @@
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.detail-lightbox-close {
|
||||
top: -36px;
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.detail-section-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
@ -918,6 +967,7 @@
|
||||
.meta-filter-group {
|
||||
width: auto;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.meta-filter {
|
||||
@ -925,14 +975,3 @@
|
||||
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 {
|
||||
font-size: 3.5rem;
|
||||
color: var(--brown);
|
||||
margin: var(--space-24) 0;
|
||||
margin: var(--space-4) 0;
|
||||
}
|
||||
|
||||
.how-step__png {
|
||||
@ -166,7 +166,7 @@
|
||||
}
|
||||
|
||||
.how-step_text {
|
||||
margin-bottom: var(--space-24);
|
||||
margin-bottom: var(--space-4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -179,7 +179,7 @@
|
||||
|
||||
.how-step__footer-badges {
|
||||
display: flex;
|
||||
gap: var(--space-16);
|
||||
gap: var(--space-2);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@ -204,10 +204,6 @@
|
||||
|
||||
/* --- Carousel gallery --- */
|
||||
|
||||
.gallery {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.gallery__carousel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -312,11 +308,11 @@
|
||||
}
|
||||
|
||||
.gallery__arrow--prev {
|
||||
left: var(--space-24);
|
||||
left: var(--space-4);
|
||||
}
|
||||
|
||||
.gallery__arrow--next {
|
||||
right: var(--space-24);
|
||||
right: var(--space-4);
|
||||
}
|
||||
|
||||
|
||||
@ -437,27 +433,35 @@
|
||||
/* --- FAQ Section: Akkordion --- */
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
max-width: 56rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-8);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
background: var(--butter-light);
|
||||
padding: var(--space-12) var(--space-24) ;
|
||||
transition: background-color 0.2s ease;
|
||||
background: var(--white);
|
||||
transition: background-color 0.2s ease, box-shadow var(--shadow-interaction);
|
||||
}
|
||||
|
||||
.faq-item:hover {
|
||||
background: var(--olive-light);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
}
|
||||
|
||||
.faq-trigger {
|
||||
@ -465,32 +469,41 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-main);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;;
|
||||
font-weight: 400;
|
||||
color: var(--olive);
|
||||
text-align: left;
|
||||
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 {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.faq-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
color: var(--black);
|
||||
font-weight: 300;
|
||||
color: var(--olive);
|
||||
transition: transform 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -500,32 +513,25 @@
|
||||
}
|
||||
|
||||
.faq-content {
|
||||
padding: 0;
|
||||
padding: 0 var(--space-4);
|
||||
max-height: 0;
|
||||
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 {
|
||||
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 {
|
||||
display: block;
|
||||
max-height: 500px;
|
||||
padding: var(--space-3) var(--space-24);
|
||||
}
|
||||
|
||||
.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)
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
|
||||
@ -533,8 +539,8 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.faq-section {
|
||||
padding: var(--space-40) var(--space-24);
|
||||
margin: var(--space-40) 0 var(--space-32);
|
||||
padding: var(--space-40) var(--space-4);
|
||||
margin: var(--space-40) 0 var(--space-5);
|
||||
}
|
||||
|
||||
.faq-trigger {
|
||||
|
||||
@ -4,76 +4,139 @@
|
||||
typography) are in stylesheet_global.css
|
||||
=========================================== */
|
||||
|
||||
.container-login {
|
||||
background-color: var(--butter-light);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-40) var(--space-80) var(--space-80) var(--space-80);
|
||||
|
||||
/* --- Page layout --- */
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.container-registration {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-64);
|
||||
|
||||
background-color: var(--butter-light);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
.container {
|
||||
background-color: var(--white);
|
||||
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;
|
||||
}
|
||||
|
||||
.text-section {
|
||||
padding: var(--space-40) var(--space-80) var(--space-80) var(--space-80);
|
||||
}
|
||||
|
||||
|
||||
/* --- Image section --- */
|
||||
|
||||
.image-section {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
background-color: var(--butter-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.image-section img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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 {
|
||||
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="email"],
|
||||
input[type="password"] {
|
||||
font-size: 1.125rem;
|
||||
font-family: var(--font-main);
|
||||
width: 100%;
|
||||
padding: var(--space-8) var(--space-16);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
padding: var(--space-2);
|
||||
border: 2px solid var(--olive-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: transparent;
|
||||
font-size: 0.9rem;
|
||||
font-family: var(--font-main);
|
||||
transition: border-color 0.3s ease;
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
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 {
|
||||
background-color: var(--olive-light);
|
||||
background-color: var(--butter-light);
|
||||
border-left: 4px solid var(--olive);
|
||||
padding: var(--space-16);
|
||||
margin-bottom: var(--space-40);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--black);
|
||||
line-height: 1.4;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
@ -87,13 +150,13 @@ input:focus {
|
||||
|
||||
.form-group.has-error input {
|
||||
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 {
|
||||
display: block;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
/* --- Modal / Popup --- */
|
||||
|
||||
@ -143,8 +206,14 @@ input:focus {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: var(--space-2) var(--space-32);
|
||||
padding: var(--space-2) var(--space-5);
|
||||
background-color: var(--olive);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
@ -163,11 +232,12 @@ input:focus {
|
||||
|
||||
/* --- Footer --- */
|
||||
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
padding: var(--space-16) var(--space-32);
|
||||
padding: var(--space-16) var(--space-5);
|
||||
border: none;
|
||||
margin-top: 40px;
|
||||
}
|
||||
@ -193,7 +263,7 @@ input:focus {
|
||||
.footer-right {
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
gap: var(--space-24);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
|
||||
@ -218,3 +288,30 @@ input:focus {
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-24);
|
||||
margin-bottom: var(--space-32);
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.profile-kicker {
|
||||
@ -14,11 +14,13 @@
|
||||
color: var(--olive);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-lg);
|
||||
letter-spacing: var(--ls-la);
|
||||
}
|
||||
|
||||
#headline {
|
||||
margin: 0.4rem 0;
|
||||
color: var(--brown);
|
||||
font-size: clamp(2rem, 4.4vw, 2.8rem);
|
||||
}
|
||||
|
||||
.profile-subline {
|
||||
@ -34,7 +36,7 @@
|
||||
.profile-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-24);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.btn-count {
|
||||
@ -49,11 +51,16 @@
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.category-item.is-active .btn-count {
|
||||
background: var(--butter-light);
|
||||
}
|
||||
|
||||
|
||||
/* Konsistentes Karten-Layout für alle Profilsektionen. */
|
||||
.profile-panel {
|
||||
background: var(--butter-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-32);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
@ -65,7 +72,7 @@
|
||||
|
||||
.profile-card-list {
|
||||
display: grid;
|
||||
gap: var(--space-16);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
/* Einzelne Eventkarte für "Meine Events" und "Meine Anmeldungen". */
|
||||
@ -74,7 +81,7 @@
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
padding: var(--space-32) var(--space-40);
|
||||
padding: var(--space-5) var(--space-40);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-40);
|
||||
@ -100,26 +107,27 @@
|
||||
}*/
|
||||
|
||||
.profile-event-address-block {
|
||||
margin-top: var(--space-24);
|
||||
background-color: var(--olive-light);
|
||||
padding: var(--space-16);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--black);
|
||||
line-height: 1.4;
|
||||
margin-top: 0.55rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border-left: 4px solid var(--tomato);
|
||||
background: rgba(232, 237, 209, 0.65);
|
||||
}
|
||||
|
||||
|
||||
.profile-event-address-label {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: var(--olive-dark);
|
||||
margin: 0;
|
||||
color: var(--olive);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: var(--ls-la);
|
||||
}
|
||||
|
||||
.profile-event-address {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
margin: 0.2rem 0 0;
|
||||
font-size: 0.95rem;
|
||||
color: var(--black);
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.profile-event-link {
|
||||
@ -138,6 +146,40 @@
|
||||
.profile-event-actions {
|
||||
display: flex;
|
||||
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 {
|
||||
@ -146,14 +188,16 @@
|
||||
gap: var(--space-16);
|
||||
}
|
||||
|
||||
/*
|
||||
.form-group {
|
||||
margin-bottom: var(--space-16);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}*/
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
@ -188,17 +232,8 @@
|
||||
|
||||
.form-group.has-error input {
|
||||
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 {
|
||||
margin: 0.75rem 0 0;
|
||||
font-size: 0.95rem;
|
||||
@ -208,7 +243,7 @@
|
||||
|
||||
.profile-cta-row {
|
||||
display: flex;
|
||||
gap: var();
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-16);
|
||||
}
|
||||
|
||||
|
||||
@ -42,17 +42,16 @@
|
||||
|
||||
/* Spacing Scale > 1rem = 16px*/
|
||||
--space-0: 0.25rem; /* 4px */
|
||||
--space-6: 0.375rem; /* 6px */
|
||||
--space-8: 0.5rem; /* 8px */
|
||||
--space-12: 0.75rem; /* 12px */
|
||||
--space-01: 0.375rem; /* 6px */
|
||||
--space-1: 0.5rem; /* 8px */
|
||||
--space-2: 0.75rem; /* 12px */
|
||||
--space-16: 1rem; /* 16px */
|
||||
--space-20: 1.25rem; /* 20px */
|
||||
--space-24: 1.5rem; /* 24px */
|
||||
--space-32: 2rem; /* 32px */
|
||||
--space-4: 1.5rem; /* 24px */
|
||||
--space-5: 2rem; /* 32px */
|
||||
--space-40: 2.5rem; /* 40px */
|
||||
--space-48: 3rem; /* 48px */
|
||||
--space-64: 4rem; /* 64px */
|
||||
--space-80: 5rem; /* 80px */
|
||||
--space-7: 3rem; /* 48px */
|
||||
--space-8: 4rem; /* 64px */
|
||||
|
||||
|
||||
/* Radius Scale */
|
||||
@ -64,7 +63,7 @@
|
||||
/* Letter Spacing */
|
||||
--ls-none: 0;
|
||||
--ls-sm: 2.5%;
|
||||
--ls-lg: 5%;
|
||||
--ls-la: 5%;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
@ -82,59 +81,66 @@ img {
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Bagel Fat One';
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-sm);
|
||||
line-height: 120%;
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.25rem, 5vw, 3rem);
|
||||
font-weight: 600;
|
||||
line-height: 120%;
|
||||
letter-spacing: var(--ls-sm);
|
||||
margin-bottom: var(--space-32);
|
||||
color: var(--brown);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
h2 {
|
||||
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 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
line-height: 120%;
|
||||
letter-spacing: var(--ls-sm);
|
||||
color: var(--brown);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.45;
|
||||
line-height: 1.5;
|
||||
color: var(--black);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.p-small {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.label-input-field,
|
||||
.filter-label {
|
||||
.label-input-field {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--ls-sm);
|
||||
line-height: 1;
|
||||
margin-bottom: var(--space-8);
|
||||
margin-bottom: var(--space-16);
|
||||
}
|
||||
|
||||
|
||||
label {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--ls-lg);
|
||||
letter-spacing: var(--ls-sm);
|
||||
line-height: 1;
|
||||
margin-bottom: var(--space-16);
|
||||
margin-bottom: var(--space-0);
|
||||
}
|
||||
|
||||
.option {
|
||||
@ -143,12 +149,12 @@ label {
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--ls-sm);
|
||||
line-height: 1;
|
||||
margin-bottom: var(--space-8);
|
||||
margin-bottom: var(--space-16);
|
||||
}
|
||||
|
||||
.link-text a{
|
||||
color: var(--blue);
|
||||
margin-top: var(--space-24);
|
||||
margin-top: var(--space-4);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
@ -182,13 +188,14 @@ label {
|
||||
display: none;
|
||||
width: fit-content;
|
||||
max-width: min(100%, 20rem);
|
||||
padding: var(--space-6) var(--space-16);
|
||||
/*margin-bottom: -32px;*/
|
||||
padding: 0.35rem 0.8rem;
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
background: var(--error);
|
||||
color: var(--butter-light);
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.2;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
position: relative;
|
||||
}
|
||||
@ -209,13 +216,16 @@ label {
|
||||
display: none;
|
||||
width: max-content;
|
||||
max-width: 15rem;
|
||||
padding: var(--space-6) var(--space-16);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.7rem 1.15rem;
|
||||
border-radius: 1rem;
|
||||
background: var(--error);
|
||||
color: var(--butter-light);
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.25;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
box-shadow: var(--shadow-interaction);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -237,12 +247,8 @@ label {
|
||||
|
||||
/* Margins */
|
||||
|
||||
.margin-bottom-16 {
|
||||
margin-bottom: var(--space-16);
|
||||
}
|
||||
|
||||
.margin-bottom-24 {
|
||||
margin-bottom: var(--space-24);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.margin-bottom-40 {
|
||||
@ -337,7 +343,7 @@ label {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
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;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@ -383,7 +389,7 @@ label {
|
||||
.nav-tab-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-32);
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
|
||||
@ -397,7 +403,7 @@ label {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--ls-lg);
|
||||
letter-spacing: var(--ls-la);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@ -422,7 +428,7 @@ label {
|
||||
/* Buttons */
|
||||
.button-primary {
|
||||
display: inline-block;
|
||||
padding: var(--space-6) var(--space-24);
|
||||
padding: var(--space-01) var(--space-4);
|
||||
background-color: var(--olive);
|
||||
border: 1.5px solid var(--olive);
|
||||
border-radius: var(--radius-lg);
|
||||
@ -445,7 +451,7 @@ label {
|
||||
background: transparent;
|
||||
color: var(--olive-dark);
|
||||
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;
|
||||
}
|
||||
|
||||
@ -536,8 +542,7 @@ label {
|
||||
|
||||
.button--outline:hover {
|
||||
background-color: var(--olive-light);
|
||||
color: var(--olive-dark);
|
||||
border: 1.5px solid var(--olive-dark);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.counter-button {
|
||||
@ -571,7 +576,7 @@ label {
|
||||
font-weight: 400;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1;
|
||||
padding: var(--space-8) var(--space-20);
|
||||
padding: var(--space-1) var(--space-20);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
@ -584,17 +589,11 @@ label {
|
||||
color: var(--butter-light);
|
||||
}
|
||||
|
||||
.category-item.disabled {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
.category-items {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-8);
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.category-item-profile {
|
||||
@ -603,26 +602,12 @@ label {
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
height: 44px;
|
||||
padding: 0 var(--space-24);
|
||||
padding: 0 var(--space-4);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
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 {
|
||||
background: var(--olive);
|
||||
color: var(--butter-light);
|
||||
@ -719,7 +704,7 @@ label {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 1em; /* keeps it aligned with text size */
|
||||
margin-top: var(--space-48);
|
||||
margin-top: var(--space-7);
|
||||
}
|
||||
|
||||
.instagram-invite__link {
|
||||
@ -734,6 +719,7 @@ label {
|
||||
width: 32px;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
|
||||
}
|
||||
|
||||
.footer-invite_logo {
|
||||
@ -775,34 +761,40 @@ label {
|
||||
|
||||
.modal-content {
|
||||
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);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
max-width: 460px;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
animation: modalSlideIn 0.5s ease;
|
||||
animation: modalSlideIn 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex: 0 0 48px;
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-pill);
|
||||
color: var(--black);
|
||||
border: 1.5px solid var(--olive);
|
||||
border-radius: 999px;
|
||||
background: var(--butter-light);
|
||||
font-family: "Bagel Fat One";
|
||||
font-size: 1.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--olive);
|
||||
font-family: "Bagel Fat One", cursive;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1;
|
||||
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: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 {
|
||||
@ -814,7 +806,7 @@ label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-24);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
@ -831,7 +823,7 @@ label {
|
||||
margin-left: auto;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
color: var(--olive);
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
@ -839,14 +831,20 @@ label {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
transition: transform 0.2s ease;
|
||||
transition: color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-close:hover,
|
||||
.modal-close:focus-visible {
|
||||
color: var(--olive-dark);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.modal-close:focus-visible {
|
||||
outline: 2px solid var(--olive-dark);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 28px;
|
||||
color: var(--black);
|
||||
@ -861,36 +859,33 @@ label {
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1.125rem;
|
||||
padding: var(--space-24) 0 var(--space-40) 0;
|
||||
padding: var(--space-4) 0 0;
|
||||
text-align: left;
|
||||
line-height: 1.45;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
gap: var(--space-12);
|
||||
gap: var(--space-2);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Snackbar */
|
||||
.snackbar,
|
||||
.snackbar--danger {
|
||||
.snackbar {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(100px);
|
||||
color: var(--butter-light);
|
||||
background: var(--tomato);
|
||||
background: var(--olive);
|
||||
color: var(--white);
|
||||
padding: var(--space-16) var(--space-40);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-main);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
opacity: 0;
|
||||
transition: transform 0.5s ease, opacity 0.4s ease;
|
||||
transition: transform 0.4s ease, opacity 0.4s ease;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -900,6 +895,10 @@ label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.snackbar--danger {
|
||||
background: var(--tomato);
|
||||
}
|
||||
|
||||
/* Lightbox */
|
||||
.lightbox {
|
||||
position: fixed;
|
||||
@ -940,59 +939,16 @@ label {
|
||||
|
||||
.lightbox__close {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
right: -40px;
|
||||
top: -42px;
|
||||
right: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--butter-light);
|
||||
color: var(--white);
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
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 {
|
||||
@ -1000,12 +956,12 @@ input:focus {
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
margin-top: 120px;
|
||||
padding: var(--space-16) var(--space-48);
|
||||
padding: var(--space-16) var(--space-7);
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: var(--space-24);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* Left aligned */
|
||||
@ -1022,6 +978,6 @@ input:focus {
|
||||
.footer-right {
|
||||
justify-self: end;
|
||||
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",
|
||||
"location": "Luzern",
|
||||
"address": "Pilatusstrasse 18, 6003 Luzern",
|
||||
"date": "17. Mai. 2026",
|
||||
"date": "23. APR. 2026",
|
||||
"time": "15:30 UHR",
|
||||
"category": "Dinner",
|
||||
"diet": "Vegetarisch",
|
||||
@ -15,8 +15,7 @@
|
||||
},
|
||||
"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.",
|
||||
"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."
|
||||
"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."
|
||||
],
|
||||
"menu": [
|
||||
"Bruschetta-Variationen und Antipasti",
|
||||
@ -46,10 +45,10 @@
|
||||
"title": "Noche Peruana",
|
||||
"location": "Chur",
|
||||
"address": "Obere Gasse 41, 7000 Chur",
|
||||
"date": "8. Mai 2026",
|
||||
"date": "12. April 2026",
|
||||
"time": "19:00 UHR",
|
||||
"category": "Dinner",
|
||||
"diet": "Fleisch, Fisch",
|
||||
"diet": "Omnivore",
|
||||
"spots": 4,
|
||||
"host": {
|
||||
"name": "Camila",
|
||||
@ -88,7 +87,7 @@
|
||||
"title": "Japanese Delight",
|
||||
"location": "Zürich",
|
||||
"address": "Limmatquai 92, 8001 Zürich",
|
||||
"date": "12. Mai 2026",
|
||||
"date": "24. April. 2026",
|
||||
"time": "12:30 UHR",
|
||||
"category": "Lunch",
|
||||
"diet": "Fisch",
|
||||
@ -125,46 +124,6 @@
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"location": "Basel",
|
||||
"address": "Münsterplatz 10, 4051 Basel",
|
||||
@ -173,72 +132,6 @@
|
||||
"category": "Dinner",
|
||||
"diet": "Omnivore",
|
||||
"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",
|
||||
"host": {
|
||||
"name": "Carlos",
|
||||
|
||||
@ -32,30 +32,30 @@
|
||||
</header>
|
||||
|
||||
|
||||
<main class="event-create-page layout-narrow">
|
||||
<main class="event-create-page">
|
||||
<section class="event-flow-header" aria-label="Event erstellen Aktionen">
|
||||
</section>
|
||||
|
||||
<form id="eventForm" class="event-form" novalidate>
|
||||
<section
|
||||
class="step step--active step--intro"
|
||||
class="step step--active step--intro layout-wide"
|
||||
data-step="0"
|
||||
aria-labelledby="intro-title"
|
||||
>
|
||||
<div class="step-layout hero startseite">
|
||||
<div>
|
||||
<p class="badge margin-bottom-40">Event erstellen</p>
|
||||
<div class="step-copy">
|
||||
<p class="badge">Event erstellen</p>
|
||||
<h1 id="intro-title">Hey <span id="username">{{username}}</span>, was hast du vor?</h1>
|
||||
<p class="step-text margin-bottom-40">
|
||||
<p class="step-text">
|
||||
Erzähl uns von deiner Idee, vom Essen bis zur Stimmung. Ob Dinner, Brunch
|
||||
oder etwas ganz Eigenes wir helfen dir dabei, dein Event in sieben Schritten aufzubauen.
|
||||
</p>
|
||||
<button type="button" class="button-primary" data-start-flow>
|
||||
<button type="button" class="button-primary button--intro" data-start-flow>
|
||||
Los geht’s!
|
||||
</button>
|
||||
</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
|
||||
class="intro-image"
|
||||
src="assets/eventcreate_foodtable-new.jpg"
|
||||
@ -65,12 +65,12 @@
|
||||
</div>
|
||||
</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-copy">
|
||||
<p class="badge">Schritt 1</p>
|
||||
<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,
|
||||
ein Dinner mit Wow-Effekt oder einfach ein entspanntes Mittagessen mit gutem Essen?
|
||||
</p>
|
||||
@ -145,12 +145,12 @@
|
||||
</div>
|
||||
</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-copy">
|
||||
<p class="badge">Schritt 2</p>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
@ -194,12 +194,12 @@
|
||||
</div>
|
||||
</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-copy">
|
||||
<p class="badge">Schritt 3</p>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
@ -228,20 +228,19 @@
|
||||
</fieldset>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="allergiesOther">Weitere Unverträglichkeiten oder Hinweise</label>
|
||||
<p class="field-hint">Optional – nur auswählen, wenn es für dein Event relevant ist.</p>
|
||||
<label for="allergiesOther">Weitere Unverträglichkeiten oder Hinweise (optional)</label>
|
||||
<textarea id="allergiesOther" name="allergiesOther" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-copy">
|
||||
<p class="badge">Schritt 4</p>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
@ -262,12 +261,12 @@
|
||||
</div>
|
||||
</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-copy">
|
||||
<p class="badge">Schritt 5</p>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
@ -286,12 +285,12 @@
|
||||
</div>
|
||||
</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-copy">
|
||||
<p class="badge">Schritt 6</p>
|
||||
<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.
|
||||
Ein klarer Titel (z.B. "Italienische Tavolata") und ein guter Beschreibungstext (Ablauf etc.) machen den Unterschied.
|
||||
</p>
|
||||
@ -309,13 +308,12 @@
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label>Wie wird dein Event aussehen?</label>
|
||||
<p class="field-hint">Optional – füge Bilder zu deinem Event hinzu.</p>
|
||||
<div class= "option-grid option-grid--4">
|
||||
<label>Wie wird dein Event aussehen? <span class="field-hint-inline">(optional)</span></label>
|
||||
<div class="gallery-upload">
|
||||
<div class="gallery-preview" id="galleryPreview"></div>
|
||||
<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>
|
||||
<span class="option">Foto hinzufügen</span>
|
||||
<span class="gallery-add-button__text">Foto<br>hinzufügen</span>
|
||||
</button>
|
||||
<input type="file" id="galleryFileInput" accept="image/*" multiple hidden />
|
||||
</div>
|
||||
@ -324,12 +322,12 @@
|
||||
</div>
|
||||
</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-copy">
|
||||
<p class="badge">Schritt 7</p>
|
||||
<h2 id="step7-title">Dein Event auf einen Blick</h2>
|
||||
<p class="step-text margin-bottom-40">
|
||||
<h2 id="step7-title">Dein Event auf einen Blick.</h2>
|
||||
<p class="step-text">
|
||||
Schau dir alle Details nochmal in Ruhe an. Wenn alles passt,
|
||||
kannst du dein Event jetzt veröffentlichen und Gäste einladen.
|
||||
</p>
|
||||
@ -406,7 +404,7 @@
|
||||
</section>
|
||||
|
||||
|
||||
<div class="flow-footer" id="flowFooter" hidden>
|
||||
<div class="flow-footer layout-narrow" id="flowFooter" hidden>
|
||||
<div class="flow-actions">
|
||||
<button type="button" id="backButton" class="button-secondary">
|
||||
Zurück
|
||||
@ -437,20 +435,21 @@
|
||||
|
||||
<section
|
||||
id="submissionSuccess"
|
||||
class="submission-success"
|
||||
class="submission-success layout-wide"
|
||||
aria-labelledby="success-title"
|
||||
aria-live="polite"
|
||||
hidden
|
||||
>
|
||||
<div class="step-layout hero startseite">
|
||||
<div class="step-layout step-layout--intro hero startseite">
|
||||
<div class="step-copy">
|
||||
<p class="badge">Event erstellt</p>
|
||||
<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">
|
||||
<!-- <i class="fa-solid fa-champagne-glasses"></i>-->
|
||||
<i class="fa-solid fa-champagne-glasses"></i>
|
||||
</span>
|
||||
</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.
|
||||
Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.
|
||||
</p>
|
||||
@ -459,12 +458,12 @@
|
||||
</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
|
||||
class="intro-image"
|
||||
class="intro-image submission-success-image"
|
||||
src="assets/eventcreate_foodtable with friends.jpg"
|
||||
alt="Gemeinsames Essen an einem gedeckten Tisch"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -42,13 +42,12 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<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 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>
|
||||
</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" type="button" id="confirm-register-btn">Ja, ich bin dabei</button>
|
||||
</div>
|
||||
@ -59,12 +58,12 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<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 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">
|
||||
<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>
|
||||
|
||||
@ -36,9 +36,9 @@
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<div class="filter-row margin-bottom-24">
|
||||
<div class="filter-row">
|
||||
<!-- Primary category filter buttons -->
|
||||
<div class="category-group">
|
||||
<button class="category-item active" type="button" data-cat="ALLE">Alle</button>
|
||||
@ -50,45 +50,45 @@
|
||||
|
||||
<!-- Secondary filters populated/handled by JavaScript -->
|
||||
<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>
|
||||
<select id="location-filter">
|
||||
<option value="ALLE_ORTE">Alle Orte</option>
|
||||
</select>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="meta-filter" for="date-filter">
|
||||
<label class="meta-filter" for="date-filter">
|
||||
<span>Datum</span>
|
||||
<div class="date-input-wrapper">
|
||||
<input id="date-filter" type="date">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<details class="filter-box">
|
||||
<summary>Nach Ernährungform filtern</summary>
|
||||
<div class="filter-row margin-bottom-16">
|
||||
|
||||
<p class="filter-label">Ernährungsform</p>
|
||||
<div class="filter-row">
|
||||
<!-- Primary category filter buttons -->
|
||||
<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">
|
||||
<summary>Nach Allergenen filtern</summary>
|
||||
<div class="filter-row margin-bottom-16">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
</details>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- Render target: event cards or empty state -->
|
||||
<section id="event-grid" class="event-list"></section>
|
||||
@ -114,12 +114,12 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<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 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>
|
||||
</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" type="button" id="confirm-register-btn">Ja, ich bin dabei</button>
|
||||
</div>
|
||||
@ -130,12 +130,12 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<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 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">
|
||||
<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-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
|
||||
</div>
|
||||
|
||||
34
index.html
34
index.html
@ -35,13 +35,13 @@
|
||||
<div class="hero__left">
|
||||
<span class="badge margin-bottom-40">einfach. lecker. gemeinsam.</span>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="hero__right">
|
||||
<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>
|
||||
</section>
|
||||
@ -82,8 +82,8 @@
|
||||
|
||||
<!-- 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">
|
||||
</div><h2>Einblick in Cooking-Erlebnisse</h2>
|
||||
<p class="margin-bottom-16">#gemeinsam_invité auf Instagram</p>
|
||||
<div class="gallery__header"> </div><h2>Einblick in Cooking-Erlebnisse</h2>
|
||||
<p>#gemeinsam_invité auf Instagram</p>
|
||||
</div>
|
||||
<div class="gallery__carousel">
|
||||
<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">
|
||||
<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">
|
||||
<span><i class="fa-solid fa-heart"></i> 89</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">
|
||||
<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">
|
||||
<span><i class="fa-solid fa-heart"></i> 389</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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Lightbox: Bildansicht vergrössert -->
|
||||
<div class="lightbox" id="gallery-lightbox" aria-hidden="true">
|
||||
@ -235,6 +236,7 @@
|
||||
|
||||
<!-- FAQ Section: Akkordion mit häufig gestellten Fragen -->
|
||||
<section class="faq-section">
|
||||
<div class="container">
|
||||
<h2>Häufig gestellte Fragen</h2>
|
||||
<div class="faq-accordion">
|
||||
<div class="faq-item">
|
||||
@ -243,20 +245,10 @@
|
||||
<span class="faq-icon">+</span>
|
||||
</button>
|
||||
<div class="faq-content">
|
||||
<ol class="faq-list">
|
||||
<li>
|
||||
<strong>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.
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -310,8 +302,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
|
||||
@ -447,19 +447,13 @@
|
||||
<strong>${event.title}</strong>
|
||||
</div>
|
||||
<div class="detail-action-btn-wrap">
|
||||
<div class="detail-action-row" style="margin-left:auto; display:flex; gap:12px; align-items:center;">
|
||||
${isFull ? `
|
||||
<div class="detail-dereg-column">
|
||||
<button class="button-plaetze event-spots-full" type="button" disabled>Ausgebucht</button>
|
||||
<small class="detail-dereg-hint detail-dereg-hint--placeholder"> </small>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${(!isFull || isRegistered) ? `
|
||||
<div class="detail-dereg-column">
|
||||
<button class="${actionButtonVariantClass.trim()}" type="button" data-register-button ${actionButtonDisabled ? 'disabled' : ''}>
|
||||
<button class="detail-primary-btn detail-spots-pill-full" type="button" disabled>Ausgebucht</button>
|
||||
` : `
|
||||
<button class="detail-primary-btn${actionButtonVariantClass}" type="button" data-register-button ${actionButtonDisabled ? 'disabled' : ''}>
|
||||
${actionButtonLabel}
|
||||
</button>
|
||||
`}
|
||||
${isRegistered && deregInfo.daysLeft !== null ? `
|
||||
<small class="detail-dereg-hint${deregInfo.isClosed ? ' detail-dereg-hint--closed' : ''}">
|
||||
${deregInfo.isClosed ? 'Abmeldefrist abgelaufen'
|
||||
@ -468,9 +462,6 @@
|
||||
</small>
|
||||
` : ''}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="detail-lightbox" aria-hidden="true">
|
||||
@ -531,15 +522,14 @@
|
||||
setTimeout(() => {
|
||||
snackbar.classList.remove('snackbar--visible');
|
||||
setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
|
||||
}, 4000);
|
||||
}, 3000);
|
||||
}
|
||||
renderDetailPage(event);
|
||||
};
|
||||
|
||||
const closeUnregister = () => modal.classList.remove('show');
|
||||
document.getElementById('unregister-modal-close')?.addEventListener('click', closeUnregister);
|
||||
document.getElementById('unregister-modal-cancel')?.addEventListener('click', closeUnregister);
|
||||
modal.addEventListener('click', e => { if (e.target === modal) closeUnregister(); });
|
||||
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'); });
|
||||
|
||||
} else if (!isFull && !isRegistrationClosed) {
|
||||
const modal = document.getElementById('register-confirm-modal');
|
||||
@ -556,15 +546,14 @@
|
||||
if (snackbar) {
|
||||
snackbar.textContent = 'Du wurdest erfolgreich angemeldet.';
|
||||
snackbar.classList.add('snackbar--visible');
|
||||
setTimeout(() => snackbar.classList.remove('snackbar--visible'), 4000);
|
||||
setTimeout(() => snackbar.classList.remove('snackbar--visible'), 3000);
|
||||
}
|
||||
renderDetailPage(event);
|
||||
};
|
||||
|
||||
const closeRegister = () => modal.classList.remove('show');
|
||||
document.getElementById('register-modal-close')?.addEventListener('click', closeRegister);
|
||||
document.getElementById('register-modal-cancel')?.addEventListener('click', closeRegister);
|
||||
modal.addEventListener('click', e => { if (e.target === modal) closeRegister(); });
|
||||
document.getElementById('register-modal-close').onclick = () => modal.classList.remove('show');
|
||||
document.getElementById('register-modal-cancel').onclick = () => modal.classList.remove('show');
|
||||
modal.addEventListener('click', e => { if (e.target === modal) modal.classList.remove('show'); });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -167,7 +167,6 @@
|
||||
dateFilter.value = savedDate;
|
||||
}
|
||||
|
||||
updateDietAvailability();
|
||||
applyFilters();
|
||||
} catch (error) {
|
||||
console.error('Fehler:', error);
|
||||
@ -536,8 +535,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-side${isFull ? ' event-side-full' : ''}">
|
||||
${actionMarkup}
|
||||
${sideInfoMarkup}
|
||||
${actionMarkup}
|
||||
</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).
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
@ -696,34 +642,12 @@
|
||||
// Category filter: exclusive selection
|
||||
activeCategory = categoryValue;
|
||||
} else if (dietValue !== null) {
|
||||
// Diet filter: toggle selection with conflict handling
|
||||
const isCurrentlySelected = 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');
|
||||
// Diet filter: toggle selection
|
||||
if (activeDiets.has(dietValue)) {
|
||||
activeDiets.delete(dietValue);
|
||||
} else {
|
||||
activeDiets.add(dietValue);
|
||||
}
|
||||
} else {
|
||||
// Removing a diet
|
||||
activeDiets.delete(dietValue);
|
||||
}
|
||||
|
||||
updateDietAvailability();
|
||||
} else if (allergieValue !== null) {
|
||||
// Allergie filter: toggle selection
|
||||
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
|
||||
const infoButton = document.getElementById('info-button');
|
||||
const infoModal = document.getElementById('info-modal');
|
||||
const modalClose = infoModal?.querySelector('modal-close');
|
||||
const modalClose = infoModal?.querySelector('.modal-close');
|
||||
|
||||
if (infoButton && infoModal) {
|
||||
infoButton.addEventListener('click', () => {
|
||||
@ -813,18 +717,3 @@
|
||||
// Kick off initial load/render cycle.
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
@ -229,17 +229,18 @@
|
||||
|
||||
const unregisterButton = target.closest('[data-unregister-id]');
|
||||
if (unregisterButton) {
|
||||
if (!currentUser?.email) return;
|
||||
if (!currentUser?.email) {
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
if (modal) modal.classList.add('show');
|
||||
|
||||
document.getElementById('confirm-unregister-btn').onclick = () => {
|
||||
modal.classList.remove('show');
|
||||
unregisterFromEvent(eventId, currentUser.email);
|
||||
|
||||
// Snackbar: Feedback bei erfolgreicher Abmeldung.
|
||||
const snackbar = document.getElementById('snackbar');
|
||||
if (snackbar) {
|
||||
snackbar.textContent = 'Du wurdest erfolgreich abgemeldet.';
|
||||
@ -249,15 +250,9 @@
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
if (target.closest('a, button')) {
|
||||
return;
|
||||
}
|
||||
@ -296,15 +291,6 @@
|
||||
cancelHostedEvent(pendingCancelEventId, currentUser.email);
|
||||
}
|
||||
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.
|
||||
@ -341,7 +327,7 @@
|
||||
|
||||
renderMyEvents(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.
|
||||
function unregisterFromEvent(eventId, userEmail) {
|
||||
@ -355,10 +341,12 @@
|
||||
setRegistrationMap(registrationMap);
|
||||
|
||||
renderMyRegistrations(allEvents, currentUser);
|
||||
profileFeedback.textContent = 'Du wurdest von dem Event abgemeldet.';
|
||||
}
|
||||
|
||||
// Validiert Profildaten konsistent und liefert true/false zur Submit-Steuerung.
|
||||
function validateProfileForm() {
|
||||
let isValid = true;
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
@ -595,12 +583,12 @@
|
||||
|
||||
if (events.length === 0) {
|
||||
const emptyElement = document.createElement('div');
|
||||
emptyElement.className = 'empty-state';
|
||||
emptyElement.className = 'profile-empty-state';
|
||||
emptyElement.innerHTML = `
|
||||
<div class="empty-state-kicker">Keine Treffer</div>
|
||||
<p class="profile-empty-kicker">Keine Treffer</p>
|
||||
<h3>${emptyStateConfig.title}</h3>
|
||||
<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);
|
||||
return;
|
||||
|
||||
41
login.html
41
login.html
@ -5,11 +5,10 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Invité | Login</title>
|
||||
|
||||
<!-- Stylesheet für diese Seite -->
|
||||
<link rel="stylesheet" href="css/login_signup.css">
|
||||
|
||||
<!-- Globales Stylesheet -->
|
||||
<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>
|
||||
|
||||
</head>
|
||||
@ -27,34 +26,36 @@
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container-login layout-narrow">
|
||||
|
||||
<div>
|
||||
<h1>Login</h1>
|
||||
|
||||
<form id="loginForm" novalidate >
|
||||
<div class="form-group margin-bottom-16">
|
||||
<p class= "label-input-field" for="email">E-Mail</p>
|
||||
<input type="email" id="email" name="email" required placeholder="Deine E-mail-Adresse">
|
||||
<div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail-Adresse ein.</div>
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
<div class="image-section">
|
||||
<img src="assets/index_cooking.jpg" alt="Social Cooking">
|
||||
</div>
|
||||
|
||||
<div class="form-group margin-bottom-40">
|
||||
<p class= "label-input-field" for="passwort">Passwort</p>
|
||||
<input type="password" id="passwort" name="passwort" required placeholder="Dein Passwort">
|
||||
<div class="form-section">
|
||||
<h1>Login</h1>
|
||||
|
||||
<form id="loginForm" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="email">E-Mail</label>
|
||||
<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>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="passwort">Passwort</label>
|
||||
<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>
|
||||
|
||||
<button class="button-primary margin-bottom-24">Login</button>
|
||||
<button type="submit" class="button-primary">Login</button>
|
||||
|
||||
<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>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- Schliesst container -->
|
||||
<div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div>
|
||||
<script src="js/login.js"></script>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<main class="layout-wide">
|
||||
<section class="profile-hero" aria-label="Profilübersicht">
|
||||
<div>
|
||||
<p class="badge margin-bottom-40">Mein Bereich</p>
|
||||
<p class="badge">Mein Bereich</p>
|
||||
<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>
|
||||
</div>
|
||||
@ -70,8 +70,8 @@
|
||||
<div class="panel-head">
|
||||
<span id="my-registrations-count" class="panel-count">0</span>
|
||||
</div>
|
||||
<p class="info-abmeldung">
|
||||
<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;">
|
||||
<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="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"/>
|
||||
<line x1="12" y1="8" x2="12" y2="8"/>
|
||||
<line x1="12" y1="12" x2="12" y2="16"/>
|
||||
@ -85,27 +85,27 @@
|
||||
<h2 class="panel-title">Profil verwalten</h2>
|
||||
<form id="profile-form" novalidate>
|
||||
<div class="form-grid">
|
||||
<div class="margin-bottom-16">
|
||||
<label class="label-input-field" for="vorname">Vorname</label>
|
||||
<div class="form-group">
|
||||
<label for="vorname">Vorname</label>
|
||||
<input type="text" id="vorname" name="vorname" required>
|
||||
<p class="input-error" id="vorname-error">Bitte gib deinen Vornamen ein.</p>
|
||||
</div>
|
||||
|
||||
<div class="margin-bottom-16">
|
||||
<label class="label-input-field" for="nachname">Nachname</label>
|
||||
<div class="form-group">
|
||||
<label for="nachname">Nachname</label>
|
||||
<input type="text" id="nachname" name="nachname" required>
|
||||
<p class="input-error" id="nachname-error">Bitte gib deinen Nachnamen ein.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="margin-bottom-16">
|
||||
<label class="label-input-field" for="email">E-Mail</label>
|
||||
<div class="form-group">
|
||||
<label for="email">E-Mail</label>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="margin-bottom-40">
|
||||
<label class="label-input-field" for="passwort">Passwort</label>
|
||||
<div class="form-group">
|
||||
<label for="passwort">Passwort</label>
|
||||
<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-error" id="passwort-error">Das Passwort muss mindestens 6 Zeichen lang sein.</p>
|
||||
@ -122,11 +122,11 @@
|
||||
<div id="logoutModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button class="close-btn" onclick="closeLogoutModal()">×</button>
|
||||
<h2>Abmelden?</h2>
|
||||
</div>
|
||||
<p class="modal-body">
|
||||
Bist du sicher, dass du dich abmelden möchtest?
|
||||
<button type="button" class="modal-close" aria-label="Popup schließen">×</button>
|
||||
</p>
|
||||
<div class="modal-footer">
|
||||
<button class="button-primary button--outline" type="button" onclick="closeLogoutModal()">Abbrechen</button>
|
||||
@ -135,21 +135,6 @@
|
||||
</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 -->
|
||||
<div class="snackbar" id="snackbar"></div>
|
||||
|
||||
@ -157,11 +142,11 @@
|
||||
<div id="cancelEventModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button class="close-btn" onclick="closeCancelEventModal()">×</button>
|
||||
<h2>Event absagen?</h2>
|
||||
</div>
|
||||
<p class="modal-body">
|
||||
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>
|
||||
<div class="modal-footer">
|
||||
<button class="button-secondary" type="button" onclick="closeCancelEventModal()">Abbrechen</button>
|
||||
|
||||
41
signup.html
41
signup.html
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Invité | Registration</title>
|
||||
<title>Kontaktseite - Invité</title>
|
||||
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||
@ -26,8 +26,12 @@
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container-registration layout-wide">
|
||||
<div class="text-section">
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
<div class="image-section">
|
||||
<img src="assets/index_cooking.jpg" alt="Social Cooking">
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<h1>Erstelle deinen Account</h1>
|
||||
|
||||
@ -36,31 +40,31 @@
|
||||
</div>
|
||||
|
||||
<form id="signupForm" novalidate>
|
||||
<div class="form-group margin-bottom-16">
|
||||
<p class= "label-input-field" for="vorname">Vorname*</p>
|
||||
<div class="form-group">
|
||||
<label for="vorname">Vorname *</label>
|
||||
<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>
|
||||
|
||||
<div class="form-group margin-bottom-16">
|
||||
<p class= "label-input-field" for="nachname">Nachname*</p>
|
||||
<div class="form-group">
|
||||
<label for="nachname">Nachname *</label>
|
||||
<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>
|
||||
|
||||
<div class="form-group margin-bottom-16">
|
||||
<p class= "label-input-field" for="email">E-Mail*</p>
|
||||
<input type="email" id="email" name="email" required placeholder="Deine E-mail-Adresse">
|
||||
<div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail-Adresse ein.</div>
|
||||
<div class="form-group">
|
||||
<label for="email">E-Mail *</label>
|
||||
<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>
|
||||
|
||||
<div class="form-group margin-bottom-40">
|
||||
<p class= "label-input-field" for="passwort">Passwort*</p>
|
||||
<div class="form-group">
|
||||
<label for="passwort">Passwort *</label>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
@ -68,13 +72,6 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="image-section">
|
||||
<img src="assets/index_cooking.jpg" alt="Social Cooking">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> <!-- Schliesst container -->
|
||||
|
||||
@ -82,8 +79,8 @@
|
||||
<div id="welcomeModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Konto erfolgreich erstellt!</h2>
|
||||
<button class="close-btn" onclick="closeWelcomeModal()">×</button>
|
||||
<h2>Konto erfolgreich erstellt!</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
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