diff --git a/assets/icon_Plate.png b/assets/icon_Plate.png deleted file mode 100644 index 7152cc5..0000000 Binary files a/assets/icon_Plate.png and /dev/null differ diff --git a/assets/icon_add-event.png b/assets/icon_add-event.png deleted file mode 100644 index cb06b43..0000000 Binary files a/assets/icon_add-event.png and /dev/null differ diff --git a/assets/icon_register.png b/assets/icon_register.png deleted file mode 100644 index 513e376..0000000 Binary files a/assets/icon_register.png and /dev/null differ diff --git a/assets/icon_table-dinner-svgrepo-com.svg b/assets/icon_table-dinner-svgrepo-com.svg deleted file mode 100644 index dc9565d..0000000 --- a/assets/icon_table-dinner-svgrepo-com.svg +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - - - - - - - \ No newline at end of file diff --git a/css/event_create.css b/css/event_create.css index ea1fd10..7fb1c05 100644 --- a/css/event_create.css +++ b/css/event_create.css @@ -49,7 +49,7 @@ width: min(100%, var(--content-width)); margin: 0 auto; display: grid; - gap: var(--space-6); + gap: var(--space-40); } .step-layout--intro { @@ -97,7 +97,7 @@ fieldset { } .intro-card { - padding: var(--space-6); + padding: var(--space-40); border-radius: 1.75rem; background: linear-gradient(135deg, var(--color-surface), var(--color-surface-soft)); } @@ -209,7 +209,7 @@ textarea:focus { .option-card { position: relative; display: grid; - padding: var(--space-31); + padding: var(--space-20); border: 1.5px solid var(--olive-light); border-radius: var(--radius-md); background: var(--butter-light); @@ -444,28 +444,11 @@ textarea:focus { justify-content: center; } -.gallery-add-btn { - width: 5.5rem; - height: 5.5rem; - border: 2px dashed var(--color-border-strong); - border-radius: var(--radius-sm, 0.5rem); - background: transparent; - font-size: 2rem; - color: var(--color-muted); - cursor: pointer; - flex-shrink: 0; - transition: border-color 0.15s, color 0.15s; -} - -.gallery-add-btn:hover { - border-color: var(--olive); - color: var(--olive); -} .site-footer { width: min(100% - 2rem, var(--max-width)); margin: 0 auto; - padding: var(--space-5) 0 var(--space-6); + padding: var(--space-5) 0 var(--space-40); color: var(--color-muted); text-align: center; } diff --git a/css/event_overview.css b/css/event_overview.css index 196a1a6..4c70889 100644 --- a/css/event_overview.css +++ b/css/event_overview.css @@ -4,26 +4,15 @@ Shared Typography Tokens Reuse common text styles across nav, controls and buttons --------------------------------------------------------- */ -.nav-link, -.login-pill, -.category-item, + + .meta-filter select, .meta-filter input[type="date"], -.btn-primary, -.empty-state-btn, .detail-primary-btn { - font-family: "Jost", sans-serif; - font-size: 17px; - font-weight: 500; - letter-spacing: var(--ls-ui); -} - -.event-date-time, -.event-location { - color: var(--olive); - font-size: 18px; - font-weight: 400; - line-height: 1.3; + font-family: var(--font-main); + font-size: 1.125rem; + line-height: 1; + color: var(--black); } /* Heading hierarchy: page title > detail title > card title > section title */ @@ -54,17 +43,15 @@ --------------------------------------------------------- */ .filter-label { margin: 0 0 var(--space-1); - color: var(--olive); - font-size: 18px; letter-spacing: var(--ls-la); } .filter-row { display: flex; - align-items: flex-end; + align-items: center; justify-content: space-between; gap: var(--space-3); - margin-bottom: var(--space-6); + margin-bottom: var(--space-2); } .category-group { @@ -75,26 +62,15 @@ flex: 1; } -.category-item { +.event-tag { border: 1.5px solid var(--tomato); - border-radius: var(--radius-pill); - background: var(--butter-light); color: var(--tomato); - line-height: 1.3; - padding: var(--space-1) var(--space-31); - min-height: 40px; - cursor: pointer; - transition: background-color 0.2s ease, color 0.2s ease; -} - -.category-item:hover { - background: var(--tomato); - color: var(--butter-light); -} - -.category-item.active { - background: var(--tomato); - color: var(--butter-light); + border-radius: var(--radius-pill); + font-family: var(--font-main); + font-weight: 400; + font-size: 1rem; + line-height: 1; + padding: var(--space-1) var(--space-20); } .meta-filter-group { @@ -114,48 +90,43 @@ .meta-filter select, .meta-filter input[type="date"] { - border: 1.5px solid var(--tomato); + border: 1.5px solid var(--olive); border-radius: var(--radius-sm); background: var(--butter-light); - color: var(--black); - padding: var(--space-1) var(--space-4); - min-height: 40px; - height: 40px; + height: 37px; + padding: 0 var(--space-4); box-sizing: border-box; } -/* + .meta-filter select:focus, .meta-filter input[type="date"]:focus { - outline: 2px solid rgba(107, 107, 5, 0.35); - outline-offset: 1px; -}*/ + border: 1.5px solid var(--olive-dark); + outline: 2px solid var(--butter); +} .meta-filter input[type="date"] { color-scheme: light; - accent-color: var(--tomato); + accent-color: var(--olive-dark); } .meta-filter input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; - border-radius: 4px; - padding: 4px; - filter: invert(35%) sepia(60%) saturate(600%) hue-rotate(22deg) brightness(90%) contrast(95%); + filter: invert(8%) sepia(5%) saturate(300%) hue-rotate(10deg) brightness(10%) contrast(95%); transition: background-color 0.2s ease; } .meta-filter input[type="date"]::-webkit-calendar-picker-indicator:hover { - background-color: var(--olive-light); + filter: brightness(0.8); } .meta-filter select { cursor: pointer; - appearance: none; -webkit-appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B05' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E"); background-repeat: no-repeat; - background-position: right 12px center; - padding-right: 36px; + color: var(--black); + background-position: right var(--space-4) center; } /* --------------------------------------------------------- @@ -164,7 +135,7 @@ .event-list { display: flex; flex-direction: column; - gap: 18px; + gap: var(--space-3); } .event-card { @@ -172,11 +143,9 @@ background: var(--butter-light); border: 1.5px solid var(--olive-light); border-radius: var(--radius-lg); - padding: var(--space-5) var(--space-6); + padding: var(--space-5) var(--space-40); display: flex; - /*justify-content: space-between; - align-items: flex-start;*/ - gap: var(--space-6); + gap: var(--space-40); cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; } @@ -232,7 +201,7 @@ font-weight: 400; font-size: 1rem; line-height: 1; - padding: var(--space-1) var(--space-31); + padding: var(--space-1) var(--space-20); } .event-spec-chip { @@ -311,9 +280,8 @@ padding: 42px var(--space-5); border: 2px solid var(--olive-light); border-radius: var(--radius-lg); - background: rgba(255, 255, 255, 0.92); + background: var(--butter-light); margin-top: 8px; - box-shadow: 0 3px 12px rgba(102, 52, 13, 0.08); } .empty-state-kicker { @@ -345,19 +313,6 @@ text-decoration: none; } -.empty-state-btn { - border: 0; - border-radius: var(--radius-pill); - background: var(--olive); - color: var(--butter-light); - font-weight: 600; - padding: 10px 22px; - cursor: pointer; -} - -.empty-state-btn:hover { - filter: brightness(0.95); -} /* --------------------------------------------------------- Detail Page @@ -367,29 +322,9 @@ gap: 14px; } -.detail-back { - display: inline-flex; - align-items: center; - justify-content: flex-start; - gap: var(--space-1); - width: fit-content; - color: var(--tomato); - text-decoration: none; - font-family: "Jost", sans-serif; - font-size: 17px; - font-weight: 500; - letter-spacing: var(--ls-none); - line-height: 1.2; -} - -.detail-back span { - font-size: 24px; - line-height: 1; -} - .detail-hero { display: grid; - margin-bottom: var(--space-6); + margin-bottom: var(--space-40); } .detail-top-row { @@ -414,7 +349,7 @@ display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "side gallery"; - gap: var(--space-6); + gap: var(--space-40); align-items: stretch; } @@ -460,7 +395,7 @@ font-size: 1rem; line-height: 1; letter-spacing: var(--ls-la); - padding: var(--space-1) var(--space-31); + padding: var(--space-1) var(--space-20); } .detail-gallery { @@ -661,9 +596,9 @@ box-shadow: var(--shadow-interaction); padding: var(--space-4) var(--space-5); - margin-top: var(--space-6); + margin-top: var(--space-40); position: sticky; - bottom: var(--space-6); + bottom: var(--space-40); z-index: 100; } @@ -844,10 +779,6 @@ font-size: 15px; } - .category-item { - font-size: 15px; - padding: 8px 14px; - } .meta-filter { min-width: 155px; @@ -861,23 +792,6 @@ height: 38px; } - .event-card { - flex-direction: column; - align-items: stretch; - gap: 16px; - padding: 22px 20px 20px; - } - - .event-date-time, - .event-location, - .event-spots { - font-size: 18px; - } - - .event-side { - padding-top: 0; - justify-content: space-between; - } .event-side-full { justify-content: flex-end; diff --git a/css/index.css b/css/index.css index 3fd3f51..aec4272 100644 --- a/css/index.css +++ b/css/index.css @@ -127,33 +127,43 @@ display: flex; flex-direction: column; align-items: center; - gap: 12px; - padding: 28px 20px; - background: var(--white); - border-radius: 28px; - box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06); + padding: var(--space-40); + background: var(--butter-light); + border-radius: var(--radius-lg); } -.how-step--numbered { +.how-step-number-numbered { position: relative; } -.how-step__corner-number { +.how-step_corner-number { position: absolute; - top: 12px; - left: 16px; - font-size: 2.2rem; - font-weight: 700; + color: var(--butter-light); + background: var(--tomato); + border-radius: var(--radius-lg); + top: var(--space-20); + left: var(--space-20); + width: 44px; + height: 44px; + + display: flex; + align-items: center; + justify-content: center; + + font-family: 'Bagel Fat One'; + font-size: 1.5rem; + font-weight: 400; + color: var(--butter-light); } -.how-step__corner-number--brown { +.how-step_corner-number--brown { color: var(--brown); } -.how-step__icon { - font-size: 2.4rem; +.how-step_icon { + font-size: 3.5rem; color: var(--brown); - margin-top: 12px; + margin: var(--space-4) 0; } .how-step__png { @@ -166,24 +176,14 @@ filter: brightness(0) saturate(100%) invert(18%) sepia(56%) saturate(2800%) hue-rotate(16deg) brightness(92%) contrast(95%); } -.how-step__label { - margin: 0; - font-size: 0.95rem; - line-height: 1.6; - font-weight: 400; - color: var(--black); +.how-step_text { + margin-bottom: var(--space-4); text-align: center; } -.how-step__label--brown { - color: var(--brown); +.text-left{ + text-align: left; } - -.how-step__label--big { - font-size: 1.25rem; - font-weight: 700; -} - .how-step__footer-pill { margin-bottom: 4px; } @@ -246,77 +246,71 @@ .gallery__arrow { position: absolute; - top: 50%; - transform: translateY(-50%); + display: grid; + top: 45%; width: 44px; height: 44px; - display: grid; + border: 1.5px solid var(--butter-light); + background: var(--butter-light); + border-radius: var(--radius-lg); + font-family: var(--font-main); + font-weight: 400; + font-size: 1.25rem; place-items: center; - border-radius: 50%; - background: rgba(0, 0, 0, 0.35); - backdrop-filter: blur(4px); - border: 2px solid rgba(255, 255, 255, 0.4); - color: var(--white); - cursor: pointer; - font-size: 1.2rem; - text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); - transition: background 0.2s ease, transform 0.2s ease; z-index: 2; + color: var(--olive); + cursor: pointer; + text-decoration: none; + transition: background-color 0.2s ease, border-color 0.2s ease; } -.gallery__arrow:hover { - background: rgba(0, 0, 0, 0.55); - transform: translateY(-50%) scale(1.1); -} +.gallery__arrow:hover, .gallery__arrow:focus-visible { - outline: 2px solid var(--brown); - outline-offset: 3px; + border: 1.5px solid var(--butter); + background: var(--butter); } .gallery__arrow--prev { - left: 12px; + left: var(--space-4); } .gallery__arrow--next { - right: 12px; + right: var(--space-4); } /* --- Carousel dot indicators --- */ -.gallery__dots { +.gallery_dots { display: flex; justify-content: center; gap: 10px; padding: 12px 0 8px; } -.gallery__dot { +.gallery_dot { width: 12px; height: 12px; border-radius: 50%; - border: 2px solid var(--brown); + border: 2px solid var(--olive); background: transparent; cursor: pointer; padding: 0; transition: background 0.25s ease, transform 0.2s ease; } -.gallery__dot:hover { - background: rgba(102, 52, 13, 0.3); +.gallery_dot:hover, +.gallery_dot--active { + background: var(--olive);; transform: scale(1.2); } -.gallery__dot:focus-visible { - outline: 2px solid var(--brown); +.gallery_dot:focus-visible { + outline: 2px solid var(--olive); outline-offset: 3px; } -.gallery__dot--active { - background: var(--brown); -} - @media (max-width: 900px) { .gallery__track { gap: 16px; diff --git a/css/login_signup.css b/css/login_signup.css index 3b204d7..f2131db 100644 --- a/css/login_signup.css +++ b/css/login_signup.css @@ -128,7 +128,7 @@ button[type="submit"]:active { background-color: var(--butter-light); border-left: 4px solid var(--olive); padding: var(--space-3); - margin-bottom: var(--space-6); + margin-bottom: var(--space-40); border-radius: 4px; font-size: 0.9rem; color: var(--black); @@ -178,31 +178,12 @@ button[type="submit"]:active { align-items: center; } -.modal-content { - background-color: var(--white); - padding: 40px; - border-radius: var(--radius-lg); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); - max-width: 500px; - width: 90%; - text-align: center; - animation: slideIn 0.3s ease; -} @keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } -.modal-header { - position: relative; - margin-bottom: var(--space-4); -} - -.modal-header h2 { - color: var(--olive); - font-size: 1.5rem; -} .close-btn { position: absolute; @@ -220,13 +201,6 @@ button[type="submit"]:active { justify-content: center; } -.modal-body { - color: var(--black); - font-size: 1rem; - line-height: 1.6; - margin-bottom: var(--space-6); -} - .modal-footer { display: flex; gap: var(--space-2); @@ -253,13 +227,14 @@ button[type="submit"]:active { /* --- Footer --- */ + .footer { - display: flex; - justify-content: center; - align-items: center; - padding: var(--space-3) var(--space-5); - border: none; - margin-top: 40px; + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + padding: var(--space-3) var(--space-5); + border: none; + margin-top: 40px; } .footer_link { @@ -269,6 +244,23 @@ button[type="submit"]:active { font-weight: 400; } +/* Left aligned */ +.footer-left { + justify-self: start; +} + +/* Center aligned */ +.footer-center { + justify-self: center; +} + +/* Right aligned */ +.footer-right { + justify-self: end; + display: flex; + gap: var(--space-4); +} + /* --- Responsive --- */ @@ -292,7 +284,7 @@ button[type="submit"]:active { transform: translateX(-50%) translateY(100px); background: var(--olive); color: var(--white); - padding: var(--space-3) var(--space-6); + padding: var(--space-3) var(--space-40); border-radius: var(--radius-pill); font-size: 1rem; font-weight: 600; diff --git a/css/my_profil.css b/css/my_profil.css index 94ea2f0..0e1403b 100644 --- a/css/my_profil.css +++ b/css/my_profil.css @@ -22,7 +22,7 @@ letter-spacing: var(--ls-la); } -#profile-headline { +#headline { margin: 0.4rem 0; color: var(--brown); font-size: clamp(2rem, 4.4vw, 2.8rem); @@ -44,43 +44,11 @@ gap: var(--space-4); } -.profile-tabs { - display: inline-flex; - flex-wrap: wrap; - gap: var(--space-2); -} - -.profile-tab { - border: 2px solid var(--olive); - border-radius: var(--radius-md); - background: var(--butter); - color: var(--black); - padding: 0.45rem 1rem; - min-height: 2.5rem; - font-family: "Jost", sans-serif; - font-size: 1rem; - font-weight: 500; - letter-spacing: var(--ls-ui); - cursor: pointer; - transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; -} - -.profile-tab:hover, -.profile-tab:focus-visible { - background: #faf8e8; -} - -.profile-tab.is-active { - border-color: transparent; - background: var(--olive); - color: var(--white); -} /* Konsistentes Karten-Layout für alle Profilsektionen. */ .profile-panel { - background: rgba(255, 255, 255, 0.88); + background: var(--butter-light); border-radius: var(--radius-lg); - box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1); padding: var(--space-5); } @@ -115,38 +83,34 @@ /* Einzelne Eventkarte für "Meine Events" und "Meine Anmeldungen". */ .profile-event-card { - border: 1px solid rgba(107, 107, 5, 0.25); - border-radius: var(--radius-md); - padding: var(--space-3); + background: var(--butter-light); + border: 1.5px solid var(--olive-light); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-interaction); + padding: var(--space-5) var(--space-40); display: flex; justify-content: space-between; - align-items: center; - gap: var(--space-3); -} - -.profile-event-card-clickable { + gap: var(--space-40); cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; } +.profile-event-card-clickable { + cursor: pointer; +} + .profile-event-card-clickable:hover { - box-shadow: 0 6px 16px rgba(102, 52, 13, 0.14); transform: translateY(-1px); } -.profile-event-title { +.profile-event-title h3{ margin: 0; - color: var(--black); - font-family: "Jost", sans-serif; - font-size: 1.25rem; - font-weight: 600; } +/* .profile-event-meta { - margin: 0.3rem 0 0; - font-size: 0.95rem; - color: var(--olive); -} + +}*/ .profile-event-address-block { margin-top: 0.55rem; @@ -191,56 +155,6 @@ gap: var(--space-2); } -.profile-unregister-btn { - border: none; - border-radius: var(--radius-md); - background: var(--tomato); - color: var(--butter-light); - padding: 0.45rem 0.95rem; - font-family: "Jost", sans-serif; - font-size: 0.95rem; - font-weight: 500; - cursor: pointer; - transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; -} - -.profile-cancel-btn { - border: none; - border-radius: var(--radius-md); - background: var(--tomato); - color: var(--butter-light); - padding: 0.45rem 0.95rem; - font-family: "Jost", sans-serif; - font-size: 0.95rem; - font-weight: 500; - cursor: pointer; - transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; -} - -.profile-cancel-btn:hover, -.profile-cancel-btn:focus-visible { - background: var(--tomato-dark); - transform: translateY(-1px); - box-shadow: 0 4px 10px rgba(188, 74, 52, 0.28); -} - -.profile-cancel-btn:active { - transform: translateY(0); - box-shadow: 0 2px 6px rgba(188, 74, 52, 0.25); -} - -.profile-unregister-btn:hover, -.profile-unregister-btn:focus-visible { - background: var(--tomato-dark); - transform: translateY(-1px); - box-shadow: 0 4px 10px rgba(188, 74, 52, 0.28); -} - -.profile-unregister-btn:active { - transform: translateY(0); - box-shadow: 0 2px 6px rgba(188, 74, 52, 0.25); -} - .profile-empty { margin: 0; color: var(--black); diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css index e61ddb4..4a3b0ef 100644 --- a/css/stylesheet_global.css +++ b/css/stylesheet_global.css @@ -45,10 +45,10 @@ --space-1: 0.5rem; /* 8px */ --space-2: 0.75rem; /* 12px */ --space-3: 1rem; /* 16px */ - --space-31: 1.25rem; /* 20px */ + --space-20: 1.25rem; /* 20px */ --space-4: 1.5rem; /* 24px */ --space-5: 2rem; /* 32px */ - --space-6: 2.5rem; /* 40px */ + --space-40: 2.5rem; /* 40px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ @@ -151,6 +151,41 @@ p { font-size: 1rem; } +/* Margins */ + +.margin-bottom-24 { + margin-bottom: var(--space-4); +} + +.margin-bottom-40 { + margin-bottom: var(--space-40); +} + +.event-side { + /* Right-side action area: availability status and optional signup button. */ + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; + gap: var(--space-3); + padding-top: 36px; + flex-shrink: 0; +} + +/* Event-Beschrieb oberhalb von Eventtitel */ +.event-date-time, +.event-location, +.profile-event-meta { + color: var(--olive); + font-family: var(--font-main); + font-size: 1.125rem; + font-weight: 400; + line-height: 1; + + display: inline-flex; + gap: var(--space-0); +} + /* Layout */ .main-content { margin-top: var(--space-8); @@ -251,7 +286,6 @@ p { font-size: 1rem; font-weight: 600; letter-spacing: var(--ls-la); - margin-bottom: var(--space-6); z-index: 0; } @@ -324,10 +358,37 @@ p { border-color: var(--blue-dark); } +.button-primary-eigener-event{ + display: inline-block; + padding: 0.375rem 1.5rem; + background-color: var(--blue); + border: 1.5px solid var(--blue); + border-radius: var(--radius-lg); + font-family: var(--font-main); + font-weight: 400; + font-size: 1.25rem; + color: var(--butter-light); + cursor: pointer; + text-decoration: none; + transition: background-color 0.2s ease, border-color 0.2s ease; +} + +.button-primary-eigener-event:hover { + background: var(--blue-dark); + border-color: var(--blue-dark); +} + +.button-primary-eigener-event:disabled { + border-color: transparent; + background-color: var(--olive-light); + color: var(--olive-dark); + cursor: not-allowed; +} + .button-secondary { display: inline-block; padding: 0.375rem 1.5rem; - background-color: var(--butter); + background-color: transparent; border: 1.5px solid var(--olive); border-radius: var(--radius-lg); font-family: var(--font-main); @@ -366,7 +427,7 @@ p { font-family: var(--font-main); font-weight: 400; font-size: 1.25rem; - color: var(--butter); + color: var(--butter-light); cursor: pointer; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease; @@ -377,6 +438,45 @@ p { border-color: var(--olive-dark); } + +.category-item { + border: 1.5px solid var(--tomato); + color: var(--tomato); + border-radius: var(--radius-pill); + background: var(--butter-light); + font-family: var(--font-main); + font-weight: 400; + font-size: 1.125rem; + line-height: 1; + padding: var(--space-1) var(--space-20); + cursor: pointer; + transition: background-color 0.2s ease, color 0.2s ease; +} + +.category-item:hover, .category-item:focus-visible { + background: var(--tomato); + color: var(--butter-light); +} + +.category-item.is-active, .category-item.active { + background: var(--tomato); + color: var(--butter-light); +} + +.category-item-profile { + font-size: 1.25rem; + font-weight: 400; + line-height: 1; + padding: var(--space-1) var(--space-4); + +} + +.category-items { + display: inline-flex; + flex-wrap: wrap; + gap: var(--space-1); +} + .button-small { background: var(--olive); color: var(--butter-light); @@ -438,19 +538,13 @@ p { /* Utilities */ .text-center { - text-align: left; + text-align: center; } .hidden { display: none !important; } -/* Card Footer */ -.card-footer { - margin-top: auto; - padding-top: var(--space-3); - width: 100%; -} /* Text Muted */ .text-muted { @@ -465,7 +559,7 @@ p { display: flex; align-items: center; justify-content: center; - gap: 10px; + height: 1em; /* keeps it aligned with text size */ margin-top: var(--space-7); } @@ -476,7 +570,7 @@ p { text-decoration: none; } -.instagram-invite__icon { +.instagram-invite_icon { height: 32px; width: 32px; object-fit: contain; @@ -484,12 +578,19 @@ p { filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%); } -.instagram-invite__logo { +.footer-invite_logo { height: 56px; width: 56px; object-fit: contain; } +.inline { + color: var(--tomato); + display: flex; + align-items: center; + gap: 8px; +} + /* Modal / Popup */ .modal { display: none; @@ -516,9 +617,9 @@ p { .modal-content { background-color: var(--white); - padding: 40px; + padding: var(--space-20) var(--space-20) var(--space-40) var(--space-20); border-radius: var(--radius-lg); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + box-shadow: var(--shadow-interaction); max-width: 500px; width: 90%; text-align: center; @@ -532,12 +633,10 @@ p { .modal-header { position: relative; - margin-bottom: var(--space-4); } .modal-header h2 { - color: var(--olive); - font-size: 1.5rem; + padding: var(--space-20)var(--space-20) 0 var(--space-20); } .close-btn { @@ -557,10 +656,7 @@ p { } .modal-body { - color: var(--black); - font-size: 1rem; - line-height: 1.6; - margin-bottom: var(--space-6); + padding: var(--space-20) var(--space-20) var(--space-4) var(--space-20); } .modal-footer { @@ -577,7 +673,7 @@ p { transform: translateX(-50%) translateY(100px); background: var(--olive); color: var(--white); - padding: var(--space-3) var(--space-6); + padding: var(--space-3) var(--space-40); border-radius: var(--radius-pill); font-size: 1rem; font-weight: 600; @@ -649,12 +745,34 @@ p { } /* Footer */ + .footer { - display: flex; - /*justify-content: space-between;*/ - align-items: center; - gap: 1.5rem; - padding: var(--space-3) var(--space-7); + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + padding: var(--space-3) var(--space-7); +} + +.footer-links { + display: flex; + gap: var(--space-4); +} + +/* Left aligned */ +.footer-left { + justify-self: start; +} + +/* Centered */ +.footer-center { + justify-self: center; +} + +/* Right aligned */ +.footer-right { + justify-self: end; + display: flex; + gap: var(--space-4); } /* Media Queries (Responsive) */ diff --git a/data/events.json b/data/events.json index 8134836..c09641e 100644 --- a/data/events.json +++ b/data/events.json @@ -90,7 +90,7 @@ "date": "02. MAI. 2026", "time": "12:30 UHR", "category": "Lunch", - "diet": "Pescetarisch", + "diet": "Fisch", "spots": 8, "host": { "name": "Akiko", diff --git a/datenschutz.html b/datenschutz.html index 1e08a59..505bd1d 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -22,7 +22,7 @@

Datenschutzerklärung

-

1. Verantwortliche Stelle

+

1. Verantwortliche Stelle

Invité GmbH
Musterstrasse 12
@@ -31,7 +31,7 @@ E-Mail: datenschutz@invite-cooking.ch

-

2. Erhebung und Verarbeitung personenbezogener Daten

+

2. Erhebung und Verarbeitung personenbezogener Daten

Beim Besuch unserer Website werden automatisch Informationen allgemeiner Natur erfasst. Diese Informationen (Server-Logfiles) beinhalten die Art des Webbrowsers, das verwendete @@ -40,14 +40,14 @@ unserer Website verwendet.

-

3. Registrierung und Nutzerkonto

+

3. Registrierung und Nutzerkonto

Bei der Erstellung eines Nutzerkontos erheben wir folgende Daten: Name, E-Mail-Adresse und Passwort. Diese Daten werden ausschliesslich zur Bereitstellung unserer Dienste verwendet und nicht an Dritte weitergegeben.

-

4. Cookies

+

4. Cookies

Unsere Website verwendet Cookies, um die Nutzererfahrung zu verbessern. Cookies sind kleine Textdateien, die auf Ihrem Endgerät gespeichert werden. Sie können die Verwendung @@ -55,14 +55,14 @@ die Funktionalität der Website eingeschränkt sein kann.

-

5. Datenweitergabe an Dritte

+

5. Datenweitergabe an Dritte

Eine Übermittlung Ihrer persönlichen Daten an Dritte findet nicht statt, es sei denn, wir sind gesetzlich dazu verpflichtet oder Sie haben Ihre ausdrückliche Einwilligung erteilt.

-

6. Datensicherheit

+

6. Datensicherheit

Wir setzen technische und organisatorische Sicherheitsmassnahmen ein, um Ihre Daten gegen zufällige oder vorsätzliche Manipulation, Verlust, Zerstörung oder den Zugriff @@ -70,7 +70,7 @@ der technologischen Entwicklung fortlaufend verbessert.

-

7. Ihre Rechte

+

7. Ihre Rechte

Sie haben jederzeit das Recht auf Auskunft über die bei uns gespeicherten personenbezogenen Daten. Ebenso haben Sie das Recht auf Berichtigung, Löschung @@ -78,7 +78,7 @@ datenschutz@invite-cooking.ch

-

8. Änderungen dieser Datenschutzerklärung

+

8. Änderungen dieser Datenschutzerklärung

Wir behalten uns vor, diese Datenschutzerklärung gelegentlich anzupassen, damit sie stets den aktuellen rechtlichen Anforderungen entspricht oder um Änderungen unserer @@ -86,16 +86,22 @@

-
- - Instagram - - + + diff --git a/event_create.html b/event_create.html index 28d4556..e542925 100644 --- a/event_create.html +++ b/event_create.html @@ -149,20 +149,24 @@
Ernährungsform -
+
+ +
@@ -293,7 +297,7 @@
@@ -430,16 +434,22 @@ -
- - Instagram - - + diff --git a/event_detail.html b/event_detail.html index 4930d30..17751dc 100644 --- a/event_detail.html +++ b/event_detail.html @@ -3,13 +3,15 @@ - Event-Detail + Invité | Event-Detail - - + + + + @@ -39,17 +41,22 @@
- -
- - Instagram - - + - \ No newline at end of file diff --git a/event_overview.html b/event_overview.html index a466054..7c7efde 100644 --- a/event_overview.html +++ b/event_overview.html @@ -3,7 +3,7 @@ - Event-Overview + Invité | Event-Übersicht @@ -39,10 +39,10 @@
- - - - + + + +
@@ -56,10 +56,33 @@
+ +
+ +
+ + + + +
+
+ +
+ +
+ + + +
+
+ + @@ -72,16 +95,22 @@
- -
- - Instagram - - + - + \ No newline at end of file diff --git a/impressum.html b/impressum.html index 3528066..9c4c964 100644 --- a/impressum.html +++ b/impressum.html @@ -22,7 +22,7 @@

Impressum

-

Angaben gemäss § 5 TMG

+

Angaben gemäss § 5 TMG

Invité GmbH
Musterstrasse 12
@@ -30,28 +30,28 @@ Schweiz

-

Kontakt

+

Kontakt

Telefon: +41 81 123 45 67
E-Mail: info@invite-cooking.ch

-

Vertretungsberechtigte Person

+

Vertretungsberechtigte Person

Max Mustermann, Geschäftsführer

-

Handelsregistereintrag

+

Handelsregistereintrag

Eingetragen im Handelsregister des Kantons Graubünden
Firmennummer: CHE-123.456.789

-

Haftungsausschluss

+

Haftungsausschluss

Die Inhalte dieser Website wurden mit grösster Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen.

-

Urheberrecht

+

Urheberrecht

Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem schweizerischen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede @@ -60,15 +60,21 @@

-
- - Instagram - - + diff --git a/index.html b/index.html index a5c9da7..e456ed7 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,7 @@
- einfach. lecker. gemeinsam. + einfach. lecker. gemeinsam.

Teile deine Leidenschaft, geniesse gemeinsam.

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

Anmelden @@ -47,41 +47,34 @@
-

So funktioniert's

-
-
- 1 - -

Anmelden & Dabeisein

-

Erstelle kurz dein Profil und zeig uns deinen Geschmack. Bei uns zählt der Mensch am Tisch, nicht der Lebenslauf.

-
-
- 2 - -

Tisch finden oder decken

-

Entdecke spontane Events in deiner Nähe oder öffne deine eigene Küche. Du entscheidest, ob du Gast oder Gastgeber bist

-
-
- 3 - -

Teile den Tisch

-

Triff neue Leute in entspannter Atmosphäre. Geniesse gutes Essen in Gesellschaft und mach aus einer Mahlzeit eine echte Begegnung.

- @@ -89,6 +82,9 @@
- - - - +
@@ -160,9 +148,22 @@
- + + \ No newline at end of file diff --git a/js/event_create.js b/js/event_create.js index 0139208..2f53f1e 100644 --- a/js/event_create.js +++ b/js/event_create.js @@ -304,7 +304,7 @@ function getReviewValues() { menuDescription: getFieldValue("menuDescription"), eventDescription: getFieldValue("eventDescription"), maxGuests: getFieldValue("maxGuests"), - dietType: getFieldValue("dietType"), + dietType: getCheckboxValues("dietType"), allergies: buildAllergiesReviewValue(), eventDate: formatDate(getFieldValue("eventDate")), eventTime: getFieldValue("eventTime"), @@ -389,7 +389,7 @@ function mapEventTypeToCategory(value) { Brunch: "Brunch", Lunch: "Lunch", Dinner: "Dinner", - "Kaffee + Kuchen": "COFFEE" + "Kaffee + Kuchen": "Kaffee + Kuchen" }; return categoryMap[value] || value.toUpperCase(); @@ -400,7 +400,7 @@ function mapEventTypeToCategory(value) { */ function buildStoredEvent() { const eventType = getFieldValue("eventType"); - const dietType = getFieldValue("dietType"); + const dietType = getCheckboxValues("dietType"); const menuDescription = form.elements.menuDescription.value.trim(); const eventDescription = form.elements.eventDescription.value.trim(); const eventDate = form.elements.eventDate.value; @@ -472,6 +472,15 @@ function validateCurrentStep() { return false; } + // Speziell für Schritt 2: Ernährungsform prüfen + if (currentStep === 2) { + const dietCheck = validateDietType(); + if (!dietCheck.isValid) { + setErrorMessage(dietCheck.message); + return false; + } + } + // Danach normale Pflichtfelder prüfen const requiredCheck = validateRequiredFields(fields); if (!requiredCheck.isValid) { @@ -509,6 +518,22 @@ function validateRadioGroups(fields) { return { isValid: true }; } +/** + * Prüft die Ernährungsform-Checkboxen (mindestens eine muss ausgewählt sein). + */ +function validateDietType() { + const checked = form.querySelectorAll('input[name="dietType"]:checked'); + if (checked.length === 0) { + // Mark all as invalid + form.querySelectorAll('input[name="dietType"]').forEach(input => { + const card = input.closest('.option-card'); + if (card) card.classList.add('option-card--invalid'); + }); + return { isValid: false, message: "Bitte wähle mindestens eine Ernährungsform aus." }; + } + return { isValid: true }; +} + /** * Prüft alle Pflichtfelder ausser Radios und Checkboxen. * Rückgabe: diff --git a/js/event_detail.js b/js/event_detail.js index 76c7dd1..906442f 100644 --- a/js/event_detail.js +++ b/js/event_detail.js @@ -113,9 +113,9 @@ } const msUntilStart = eventDateTime.getTime() - Date.now(); - const twelveHoursInMs = 12 * 60 * 60 * 1000; + const twentyfourHoursInMs = 12 * 60 * 60 * 1000; - return msUntilStart <= twelveHoursInMs; + return msUntilStart <= twentyfourHoursInMs; } // Abmeldefrist: 1 Tag (24 h) vor Eventstart. @@ -145,9 +145,9 @@ } const msUntilStart = eventDateTime.getTime() - Date.now(); - const twelveHoursInMs = 12 * 60 * 60 * 1000; + const twentyfourHoursInMs = 12 * 60 * 60 * 1000; - return msUntilStart >= 0 && msUntilStart <= twelveHoursInMs; + return msUntilStart >= 0 && msUntilStart <= twentyfourHoursInMs; } function countRegistrationsForEvent(registrationMap, eventId) { @@ -255,10 +255,10 @@ // Map diet keys to readable labels while keeping unknown values untouched. function getDietLabel(diet) { const labels = { - VEGGIE: 'Vegetarisch', - VEGAN: 'Vegan', FLEISCH: 'Fleisch', - FISCH: 'Fisch' + FISCH: 'Fisch', + VEGGIE: 'Vegetarisch', + VEGAN: 'Vegan' }; return labels[diet] || diet; @@ -316,12 +316,12 @@ || (!isRegistered && (isFull || isRegistrationClosed)) || (isRegistered && deregInfo.isClosed); const actionButtonVariantClass = isOwnEvent - ? ' detail-primary-btn-own' + ? ' button-primary' : isRegistered - ? ' detail-primary-btn-danger' + ? ' button-primary-abmelden ' : isRegistrationClosed - ? ' detail-primary-btn-danger' - : ' detail-primary-btn-register'; + ? ' button-primary-abmelden ' + : ' button-primary '; const shouldRevealAddress = Boolean(event.address) && isAddressVisibleWindow(event) && hasAddressAccess; const addressPanelMarkup = shouldRevealAddress ? ` @@ -333,18 +333,13 @@ : ''; const detailChips = [ `${eventCategory}`, - `${dietLabel}`, + ...event.diet.split(', ').filter(d => d.trim() && d !== 'Keine Angabe').map(d => `${getDietLabel(d.trim())}`), ...specifications.map(item => `${item}`) ].join(''); // Render complete detail page layout including: // hero metadata, host card, menu, participants, gallery and sticky action bar. detailContainer.innerHTML = ` -
- - - Alle Events -
diff --git a/js/event_overview.js b/js/event_overview.js index 447f101..10eba9e 100644 --- a/js/event_overview.js +++ b/js/event_overview.js @@ -263,7 +263,7 @@ }, 0); } - // Schliesst neue Anmeldungen ab 12h vor Start (inkl. bereits gestarteter Events). + // Schliesst neue Anmeldungen ab 24h vor Start (inkl. bereits gestarteter Events). function isRegistrationClosedForEvent(event) { const eventDateTime = parseEventDateTime(event); if (!eventDateTime || Number.isNaN(eventDateTime.getTime())) { @@ -271,9 +271,9 @@ } const msUntilStart = eventDateTime.getTime() - Date.now(); - const twelveHoursInMs = 12 * 60 * 60 * 1000; + const twentyfourHoursInMs = 24 * 60 * 60 * 1000; - return msUntilStart <= twelveHoursInMs; + return msUntilStart <= twentyfourHoursInMs; } // Safely verify whether a value exists in the given select element. @@ -327,7 +327,7 @@

Schade, aktuell gibt es hier keine Events.

Starte dein eigenes Event und bringe die Community an deinen Tisch.

- +
`; @@ -367,8 +367,13 @@ ? event.specifications.map(spec => `${spec}`).join('') : ''; + // Build diet tags: split by comma and create individual tags + const dietTags = event.diet && event.diet !== 'Keine Angabe' && event.diet !== '–' + ? event.diet.split(', ').map(d => `${d.trim()}`).join('') + : ''; + const actionMarkup = isOwnEvent - ? '' + ? '' : isRegistered ? '' : isRegistrationClosed @@ -393,12 +398,12 @@

${event.title}

${event.category} - ${event.diet} + ${dietTags} ${specsChips}
- ${isFull ? 'Ausgebucht' : `${freePlaces} Plätze frei`} + ${isRegistrationClosed ? '' : `${isFull ? 'Ausgebucht' : `${freePlaces} Plätze frei`}`} ${actionMarkup}
`; @@ -483,6 +488,15 @@ if (dateFilter) { dateFilter.addEventListener('change', applyFilters); + + // Make calendar icon clickable to focus the date input + const calendarIcon = document.querySelector('.calendar-icon'); + if (calendarIcon) { + calendarIcon.addEventListener('click', () => { + dateFilter.focus(); + dateFilter.click(); + }); + } } // Kick off initial load/render cycle. diff --git a/js/index-carousel.js b/js/index-carousel.js index 68699c8..3a64804 100644 --- a/js/index-carousel.js +++ b/js/index-carousel.js @@ -7,7 +7,7 @@ const carouselTrack = document.querySelector('.gallery__track'); const prevArrow = document.querySelector('.gallery__arrow--prev'); const nextArrow = document.querySelector('.gallery__arrow--next'); -const dotsContainer = document.querySelector('.gallery__dots'); +const dotsContainer = document.querySelector('.gallery_dots'); // Nur ausführen, wenn die Galerie auf der Seite vorhanden ist. if (carouselTrack) { @@ -28,7 +28,7 @@ if (carouselTrack) { for (var i = 0; i < pageCount; i++) { var dot = document.createElement('button'); dot.type = 'button'; - dot.className = 'gallery__dot' + (i === activePage ? ' gallery__dot--active' : ''); + dot.className = 'gallery_dot' + (i === activePage ? ' gallery_dot--active' : ''); dot.setAttribute('role', 'tab'); dot.setAttribute('aria-selected', i === activePage ? 'true' : 'false'); dot.setAttribute('aria-label', 'Seite ' + (i + 1) + ' von ' + pageCount); @@ -43,7 +43,7 @@ if (carouselTrack) { function updateDots() { dots.forEach(function(dot, i) { - dot.classList.toggle('gallery__dot--active', i === activePage); + dot.classList.toggle('gallery_dot--active', i === activePage); dot.setAttribute('aria-selected', i === activePage ? 'true' : 'false'); }); } diff --git a/js/my_profil.js b/js/my_profil.js index 1692ee9..0874f61 100644 --- a/js/my_profil.js +++ b/js/my_profil.js @@ -7,10 +7,10 @@ // Zentrale DOM-Referenzen für klare, testbare Funktionen. const loggedOutState = document.getElementById('logged-out-state'); const loggedInContent = document.getElementById('logged-in-content'); - const profileHeadline = document.getElementById('profile-headline'); + const profileHeadline = document.getElementById('headline'); const profileSubline = document.getElementById('profile-subline'); const logoutButton = document.getElementById('logout-button'); - const profileTabButtons = Array.from(document.querySelectorAll('[data-profile-tab]')); + const profileTabButtons = Array.from(document.querySelectorAll('[data-category-item]')); const profileTabPanels = Array.from(document.querySelectorAll('[data-profile-panel]')); const myEventsCount = document.getElementById('my-events-count'); @@ -131,7 +131,7 @@ profileTabButtons.forEach(button => { button.addEventListener('click', () => { - const tabName = button.getAttribute('data-profile-tab'); + const tabName = button.getAttribute('data-category-item'); if (!tabName) { return; } @@ -202,7 +202,7 @@ // Schaltet den sichtbaren Profilbereich per Tabname um. function activateProfileTab(tabName) { profileTabButtons.forEach(button => { - const isActive = button.getAttribute('data-profile-tab') === tabName; + const isActive = button.getAttribute('data-category-item') === tabName; button.classList.toggle('is-active', isActive); button.setAttribute('aria-selected', isActive ? 'true' : 'false'); }); @@ -515,13 +515,13 @@ const actionMarkup = mode === 'registrations' ? ` -
- +
+
` : ` -
- +
+
`; @@ -546,9 +546,9 @@ } const msUntilStart = eventDateTime.getTime() - Date.now(); - const twelveHoursInMs = 12 * 60 * 60 * 1000; + const twentyfourHoursInMs = 12 * 60 * 60 * 1000; - return msUntilStart >= 0 && msUntilStart <= twelveHoursInMs; + return msUntilStart >= 0 && msUntilStart <= twentyfourHoursInMs; } // Parse für ISO- und lokalisierte Datumsformate aus den Eventdaten. @@ -607,19 +607,48 @@ // Formatiert ein Eventdatum konsistent für die Profilkarten. function formatEventDate(dateString) { - if (!dateString) { - return 'Kein Datum'; - } - - if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) { - const [year, month, day] = dateString.split('-'); - const monthLabel = ['Januar', 'Februar', 'Maerz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'][Number(month) - 1]; - return `${Number(day)}. ${monthLabel} ${year}`; - } - - return dateString; + if (!dateString) { + return 'Kein Datum'; } + // ISO Format: 2026-02-12 + if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) { + const [year, month, day] = dateString.split('-'); + + const monthLabel = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'][Number(month) - 1]; + + return `${Number(day)}. ${monthLabel} ${year}`; + } + + // Format: 12. FEB. 2026 + const match = dateString.match(/^(\d{1,2})\.\s*([A-ZÄÖÜ]{3})\.\s*(\d{4})$/); + + if (match) { + const day = match[1]; + const month = match[2]; + + const shortMonthMap = { + JAN: 'Januar', + FEB: 'Februar', + MÄR: 'März', + MRZ: 'März', + APR: 'April', + MAI: 'Mai', + JUN: 'Juni', + JUL: 'Juli', + AUG: 'August', + SEP: 'September', + OKT: 'Oktober', + NOV: 'November', + DEZ: 'Dezember' + }; + + return `${day}. ${shortMonthMap[month] || month} ${match[3]}`; + } + + return dateString; +} + // Vereinheitlicht die Zeitanzeige für die Profilseite. function formatEventTime(timeString) { if (!timeString) { diff --git a/js/navigation.js b/js/navigation.js index 8844a9c..61fc013 100644 --- a/js/navigation.js +++ b/js/navigation.js @@ -77,13 +77,6 @@ document.addEventListener('DOMContentLoaded', () => { const isEventCreate = currentPage === 'event_create.html'; return ` - - Event finden - { > Event erstellen + + Event finden + - - + -
+
-

Meine Events

0
-
- +

- +

-
- - Instagram - - + - diff --git a/signup.html b/signup.html index c6a8a47..d674013 100644 --- a/signup.html +++ b/signup.html @@ -91,15 +91,21 @@
-
- - Instagram - + + + +
\ No newline at end of file