From edd601d330cec29ee50168dfd8705ec331abf5b1 Mon Sep 17 00:00:00 2001 From: viiivo <«vivien.vonburg@outlook.com»> Date: Fri, 27 Mar 2026 17:48:03 +0100 Subject: [PATCH 1/5] feat: enhance event detail and overview pages with improved UI and functionality - Refactored event_detail.js to include better date formatting, time normalization, and diet label mapping. - Improved the event detail rendering logic with a more structured layout, including a lightbox for gallery images. - Updated event_overview.js to support dynamic filtering by location and date, with improved session storage handling. - Added new SVG assets for location pin and invite logo to enhance visual elements. --- assets/invite-logo.svg | 13 + assets/location-pin.svg | 6 + css/event_overview.css | 1061 +++++++++++++++++++++++++++++++++++++-- data/events.json | 108 +++- event_detail.html | 37 +- event_overview.html | 65 ++- js/event_detail.js | 243 ++++++++- js/event_overview.js | 250 +++++++-- 8 files changed, 1633 insertions(+), 150 deletions(-) create mode 100644 assets/invite-logo.svg create mode 100644 assets/location-pin.svg diff --git a/assets/invite-logo.svg b/assets/invite-logo.svg new file mode 100644 index 0000000..ff16a2c --- /dev/null +++ b/assets/invite-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/location-pin.svg b/assets/location-pin.svg new file mode 100644 index 0000000..ea57946 --- /dev/null +++ b/assets/location-pin.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/css/event_overview.css b/css/event_overview.css index 91d6cce..89b022d 100644 --- a/css/event_overview.css +++ b/css/event_overview.css @@ -1,54 +1,1037 @@ :root { - --black: #000; + --black: #221c1a; --white: #fff; --gray-bg: #f4f4f4; - --border: 1px solid #000; + --border: 1px solid #221c1a; + --olive: #6b6b05; + --tomato: #d44b24; + --olive-light: #e5e1b7; + --cream: #f3efcf; + --butter: #fffde3; + --brown: #66340D; + + /* Spacing Scale */ + --space-1: 8px; + --space-2: 12px; + --space-3: 16px; + --space-4: 20px; + --space-5: 24px; + --space-6: 32px; + + /* Radius Scale */ + --radius-pill: 999px; + --radius-md: 20px; + --radius-lg: 30px; + + /* Letter Spacing Scale */ + --ls-none: 0; + --ls-ui: 0.03em; + --ls-label: 0.045em; +} + +body { + font-family: "Jost", sans-serif; + margin: 0; + padding: 0; + background: var(--butter); } -body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .container { max-width: 1100px; margin: 0 auto; padding: 20px; } -/* Navbar & Filter */ -.navbar { display: flex; justify-content: space-between; padding: 20px 5%; border-bottom: var(--border); } -.category-group { display: flex; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; } -.category-item { cursor: pointer; text-align: center; font-size: 11px; font-weight: bold; } -.square { width: 50px; height: 50px; border: var(--border); margin-bottom: 5px; } -.category-item.active .square { background: var(--black); } - -/* Event Cards */ -.event-list { display: flex; flex-direction: column; gap: 20px; } -.event-card { - display: grid; - grid-template-columns: 200px 1fr 150px 150px 50px; - border: var(--border); - align-items: center; +/* --------------------------------------------------------- + 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-image { height: 150px; background-size: cover; background-position: center; border-right: var(--border); } -.event-content, .event-info, .event-cta { padding: 15px; } -.tag { border: var(--border); padding: 3px 10px; border-radius: 15px; font-size: 10px; margin-right: 5px; } -.btn-primary { background: var(--black); color: var(--white); border: none; padding: 10px; width: 100%; cursor: pointer; font-weight: bold; } -/* Empty State Style */ +.event-date-time, +.event-location { + color: var(--olive); + font-size: 18px; + font-weight: 400; + line-height: 1.3; +} + +/* 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; +} + +.detail-title { + margin: 0; + color: var(--brown); + font-family: "Bagel Fat One", cursive; + font-size: clamp(44px, 6vw, 52px); + line-height: 1.15; + font-weight: 400; +} + +.event-title { + margin: 0 0 var(--space-3); + color: var(--brown); + font-family: "Bagel Fat One", cursive; + font-size: clamp(32px, 4.2vw, 44px); + font-weight: 400; + line-height: 1.15; +} + +.detail-section-title { + margin: 0 0 10px; + color: var(--brown); + font-family: "Bagel Fat One", cursive; + font-size: 28px; + font-weight: 400; + line-height: 1.15; +} + +/* --------------------------------------------------------- + Top Navigation +--------------------------------------------------------- */ +.top-nav-wrap { + background: var(--butter); + padding: 6px 12px; +} + +.top-nav { + background: rgba(255, 255, 255, 0.95); + border-radius: var(--radius-lg); + box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1); + display: flex; + justify-content: space-between; + align-items: center; + min-height: 58px; + padding: 3px 9px 3px var(--space-5); + max-width: none; + width: 100%; + box-sizing: border-box; + margin: 0 auto; +} + +.brand { + display: inline-flex; + align-items: center; + height: 50px; + text-decoration: none; +} + +.brand img { + width: auto; + height: 100%; + max-width: 104px; + display: block; +} + +.top-nav-links { + display: flex; + align-items: center; + gap: 16px; + +} + +.nav-link { + color: var(--black); + line-height: 1.3; + text-decoration: none; + padding: var(--space-1) var(--space-4); + border-radius: var(--radius-md); + border-width: 2px; + border-color: var(--olive-light); + border-style: solid; + border-radius: 20px +} + +.nav-link:hover, +.nav-link.active, +.nav-link:focus-visible { + background: var(--olive); + color: var(--white); + border-color: var(--olive); +} + +.login-pill { + background: var(--olive); + border-radius: var(--radius-md); + color: var(--butter); + line-height: 1.3; + padding: var(--space-1) var(--space-4); + text-decoration: none; +} + +.profile-pill { + width: 38px; + height: 38px; + border-radius: 19px; + background: var(--tomato); + color: var(--butter); + font-size: 17px; + font-weight: 500; + letter-spacing: var(--ls-ui); + line-height: 1.3; + display: inline-flex; + align-items: center; + justify-content: center; + text-decoration: none; +} + +/* --------------------------------------------------------- + Overview Header + Filters +--------------------------------------------------------- */ +.filter-label { + margin: 0 0 var(--space-1); + color: var(--olive); + font-size: 18px; + letter-spacing: var(--ls-label); + font-weight: 500; +} + +.filter-row { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: var(--space-3); + margin-bottom: var(--space-6); +} + +.category-group { + display: flex; + gap: var(--space-2); + margin-bottom: 0; + flex-wrap: wrap; + flex: 1; +} + +.category-item { + border: 2px solid var(--olive); + border-radius: var(--radius-md); + background: var(--butter); + color: var(--black); + line-height: 1.3; + padding: var(--space-1) var(--space-4); + min-height: 40px; + cursor: pointer; + transition: background-color 0.2s ease, border-color 0.2s ease; +} + +.category-item:hover { + background: #faf8e8; +} + +.category-item.active { + border-color: transparent; + background: var(--olive); + color: var(--white); +} + +.meta-filter-group { + display: flex; + flex-wrap: nowrap; + gap: var(--space-2); + margin-bottom: 0; +} + +.meta-filter { + display: block; + min-width: 220px; +} + +.meta-filter span { + display: none; +} + +.meta-filter select, +.meta-filter input[type="date"] { + border: 2px solid var(--olive); + border-radius: var(--radius-md); + background: var(--butter); + color: var(--black); + line-height: 1.3; + padding: var(--space-1) var(--space-4); + min-height: 40px; + height: 40px; + 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; +} + +/* --------------------------------------------------------- + Overview Event Cards +--------------------------------------------------------- */ +.event-list { + display: flex; + flex-direction: column; + gap: 18px; +} + +.event-card { + /* Core card container for every overview event entry. */ + background: rgba(255, 255, 255, 0.9); + border-radius: var(--radius-lg); + padding: var(--space-5) 40px var(--space-4); + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: var(--space-6); + cursor: pointer; + box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1); +} + +.event-main { + min-width: 0; + flex: 1; +} + +.event-date-time { + margin: 0; +} + +.event-top-row { + /* Primary metadata line: location + date/time/guest counters. */ + display: flex; + align-items: center; + gap: var(--space-5); + margin-bottom: var(--space-1); + flex-wrap: wrap; +} + +.event-location { + display: inline-flex; + align-items: center; + gap: 6px; +} + +.event-location img { + width: 18px; + height: 18px; + display: block; + filter: brightness(0) saturate(100%) invert(35%) sepia(95%) saturate(501%) hue-rotate(22deg) brightness(96%) contrast(96%); +} + +.event-meta-row { + display: flex; + align-items: center; + gap: var(--space-1); + flex-wrap: wrap; + margin-bottom: 12px; +} + +.event-tag { + border: 1px solid var(--tomato); + color: var(--tomato); + border-radius: var(--radius-pill); + padding: 7px 14px; + font-size: 14px; + font-weight: 500; + letter-spacing: var(--ls-ui); + line-height: 1; + text-transform: uppercase; +} + +.event-spec-chip { + display: none; +} + +.event-specs { + display: none; +} + +.event-capacity { + display: none; +} + +.event-hints { + display: none; +} + +.event-side { + /* Right-side action area: availability status and optional signup button. */ + display: flex; + align-items: center; + gap: var(--space-3); + padding-top: 36px; + flex-shrink: 0; +} + +.event-spots { + color: var(--olive); + font-size: 18px; + font-weight: 500; + white-space: nowrap; +} + +.event-spots-full { + /* Sold-out visual state, intentionally high-contrast and always filled. */ + border: 2px solid var(--tomato); + border-radius: var(--radius-pill); + color: var(--white); + background: var(--tomato); + opacity: 1; + font-weight: 600; + font-size: 14px; + padding: 7px 14px; + line-height: 1; +} + +.btn-primary { + background: var(--olive); + color: #fffde8; + border: none; + border-radius: var(--radius-pill); + padding: 10px 22px; + font-size: 16px; + line-height: 1.3; + cursor: pointer; + white-space: nowrap; +} + +.btn-primary:hover { + filter: brightness(0.95); +} + +/* --------------------------------------------------------- + Overview Empty State +--------------------------------------------------------- */ .empty-state { text-align: center; - padding: 50px 20px; - border: 2px dashed #ccc; - background: var(--gray-bg); - margin-top: 20px; + padding: 42px var(--space-5); + border: 2px solid var(--olive-light); + border-radius: var(--radius-lg); + background: rgba(255, 255, 255, 0.92); + margin-top: 8px; + box-shadow: 0 3px 12px rgba(102, 52, 13, 0.08); } -.btn-outline { - background: transparent; - border: 2px solid var(--black); - padding: 12px 25px; - font-weight: bold; - cursor: pointer; - margin-top: 15px; - transition: 0.3s; -} -.btn-outline:hover { background: var(--black); color: var(--white); } -/* Responsive */ +.empty-state-kicker { + margin: 0 0 8px; + color: var(--olive); + font-size: 13px; + font-weight: 600; + letter-spacing: var(--ls-label); + text-transform: uppercase; +} + +.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; +} + +.empty-state-btn { + border: 0; + border-radius: var(--radius-pill); + background: var(--olive); + color: var(--white); + font-weight: 600; + padding: 10px 22px; + cursor: pointer; +} + +.empty-state-btn:hover { + filter: brightness(0.95); +} + +/* --------------------------------------------------------- + Detail Page +--------------------------------------------------------- */ +.detail-page { + display: grid; + 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; + gap: var(--space-1); +} + +.detail-top-row { + display: flex; + align-items: center; + gap: var(--space-5); + flex-wrap: wrap; +} + +.detail-meta { + margin: 0; + font-size: 26px; + color: var(--brown); +} + +.detail-chip-row { + margin-bottom: 0; +} + +.detail-content-grid { + /* Two-column detail layout: content stack (left) + gallery (right). */ + display: grid; + grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr); + grid-template-areas: "side gallery"; + gap: var(--space-3); + align-items: stretch; +} + +.detail-side-stack { + grid-area: side; + display: grid; + gap: var(--space-2); + align-content: start; +} + +.host-card { + border: 2px solid var(--butter); + box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1); +} + +.host-header { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 30px; +} + +.host-avatar { + width: 32px; + height: 32px; + border-radius: 999px; + background: var(--olive); + color: var(--white); + display: inline-flex; + align-items: center; + font-size: 13px; +} + +.host-name { + font-weight: 500; +} + +.host-role { + padding: 4px 10px; + border: 1px solid var(--olive-light); + border-radius: var(--radius-pill); + background: rgba(107, 107, 5, 0.08); + color: var(--olive); + font-size: 12px; + font-weight: 600; + letter-spacing: var(--ls-label); + text-transform: uppercase; +} + +.host-card p { + margin: 0 0 10px; + font-size: 20px; + line-height: 1.3; + color: var(--black); +} + +.detail-gallery { + grid-area: gallery; + display: grid; +} + +.detail-gallery-large { + /* Editorial mosaic: first image spans two rows, side images stack vertically. */ + grid-template-columns: 1.4fr 1fr; + grid-template-rows: repeat(2, minmax(220px, 1fr)); + gap: 12px; + min-height: 520px; +} + +.detail-gallery-large img { + width: 100%; + height: 100%; + min-height: 220px; + object-fit: cover; + border: 2px solid var(--black); + border-radius: 20px; + box-shadow: 0 4px 12px rgba(34, 28, 26, 0.14); +} + +.detail-gallery-item { + display: block; + border: 0; + background: transparent; + padding: 0; + cursor: zoom-in; +} + +.detail-gallery-image { + transition: transform 0.2s ease; +} + +.detail-gallery-item:hover .detail-gallery-image, +.detail-gallery-item:focus-visible .detail-gallery-image { + transform: scale(1.015); +} + +.detail-gallery-large img:first-child { + grid-row: 1 / 3; +} + +.detail-lightbox { + /* Full-screen overlay for enlarged gallery image view. */ + position: fixed; + inset: 0; + z-index: 200; + display: none; + align-items: center; + justify-content: center; + padding: 24px; +} + +.detail-lightbox.is-open { + display: flex; +} + +.detail-lightbox-backdrop { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.75); +} + +.detail-lightbox-content { + position: relative; + margin: 0; + max-width: min(96vw, 1100px); + max-height: 90vh; + z-index: 1; +} + +.detail-lightbox-image { + display: block; + width: 100%; + max-height: 90vh; + object-fit: contain; + border-radius: 16px; + background: #111; +} + +.detail-lightbox-close { + position: absolute; + top: -42px; + right: 0; + border: 0; + background: transparent; + color: var(--white); + font-size: 40px; + line-height: 1; + cursor: pointer; +} + +.detail-panel { + background: rgba(255, 255, 255, 0.86); + border-radius: var(--radius-md); + padding: 14px 16px; +} + +.detail-panel-compact { + padding: 12px 14px; +} + +.detail-menu-list { + margin: 20px; + list-style: disc; + font-size: 20px; + line-height: 1.35; +} + +.detail-participants-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; +} + +.detail-participants-link { + font-size: 12px; + font-weight: 600; + color: var(--tomato); + letter-spacing: var(--ls-label); + text-decoration: none; +} + +.detail-avatar-row { + display: flex; + align-items: center; + gap: 10px; +} + +.participant-avatar { + width: 34px; + height: 34px; + border-radius: 50%; + background: var(--tomato); + color: var(--white); + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 13px; + font-weight: 500; +} + +.participant-more { + font-size: 12px; + opacity: 0.7; +} + +.detail-action-bar { + /* Sticky bottom CTA bar with summary and booking controls. */ + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--space-2); + background: rgba(255, 255, 255, 0.95); + border: 1px solid var(--olive-light); + border-radius: var(--radius-md); + padding: 10px 14px; + position: sticky; + bottom: 18px; + z-index: 12; + box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1); +} + +.detail-action-summary { + display: grid; + gap: 2px; +} + +.detail-action-summary small { + font-size: 17px; + opacity: 0.75; + color: var(--brown); +} + +.detail-action-meta { + display: inline-flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; +} + +.detail-action-location { + color: var(--olive); + font-size: 17px; +} + +.detail-action-location img { + width: 16px; + height: 16px; +} + +.detail-action-meta-text { + color: var(--brown); +} + +.detail-action-summary strong { + font-size: 40px; + font-family: "Bagel Fat One", cursive; + line-height: 1.2; + font-weight: 400; + color: var(--brown); +} + +.detail-action-buttons { + display: flex; + align-items: center; + gap: var(--space-1); +} + +.detail-spots-pill { + border: 2px solid var(--olive-light); + border-radius: var(--radius-pill); + opacity: 0.5; + font-size: 14px; + letter-spacing: var(--ls-ui); + padding: 7px 14px; + color: var(--olive); +} + +.detail-spots-pill-full { + border-color: var(--tomato); + color: var(--tomato); + opacity: 1; + font-weight: 600; +} + +.detail-primary-btn { + border: 2px solid var(--tomato); + border-radius: var(--radius-pill); + background: var(--tomato); + color: var(--white); + padding: 10px 22px; + cursor: pointer; +} + +.detail-primary-btn:disabled { + opacity: 0.45; + cursor: not-allowed; +} + + +/* --------------------------------------------------------- + Responsive: Tablet (<= 850px) +--------------------------------------------------------- */ @media (max-width: 850px) { - .event-card { grid-template-columns: 1fr; } - .event-image { border-right: none; border-bottom: var(--border); width: 100%; } + .top-nav { + padding-left: 16px; + min-height: 64px; + } + + .brand { + height: 40px; + } + + .brand img { + width: auto; + height: 100%; + max-width: 84px; + } + + .overview-title { + font-size: 34px; + } + + .top-nav-links { + gap: 8px; + } + + .nav-link, + .login-pill { + font-size: 15px; + padding: 8px 14px; + } + + .profile-pill { + width: 34px; + height: 34px; + border-radius: 17px; + font-size: 15px; + } + + .category-group { + gap: 10px; + } + + .category-item { + font-size: 15px; + padding: 8px 14px; + } + + .meta-filter { + min-width: 155px; + } + + .meta-filter select, + .meta-filter input[type="date"] { + font-size: 15px; + padding: 8px 14px; + min-height: 38px; + height: 38px; + } + + .event-card { + flex-direction: column; + align-items: stretch; + gap: 16px; + padding: 22px 20px 20px; + } + + .event-title { + font-size: 34px; + } + + .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; + } + + .btn-primary { + font-size: 17px; + padding: 8px 18px; + } + + .detail-title { + font-size: 40px; + } + + .detail-meta { + font-size: 18px; + } + + .detail-top-row { + gap: 12px; + } + + .detail-content-grid { + grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.2fr); + grid-template-areas: "side gallery"; + gap: 12px; + } + + .detail-side-stack { + gap: 10px; + } + + .detail-gallery-large { + grid-template-columns: 1fr; + grid-template-rows: repeat(3, minmax(180px, auto)); + min-height: auto; + } + + .detail-gallery-large img { + min-height: 180px; + } + + .detail-gallery-large img:first-child { + grid-row: auto; + } + + .detail-lightbox { + padding: 12px; + } + + .detail-lightbox-close { + top: -36px; + font-size: 34px; + } + + .detail-section-title { + font-size: 24px; + } + + .detail-action-bar { + flex-direction: column; + align-items: stretch; + bottom: 10px; + } + + .detail-action-summary strong { + font-size: 32px; + } + + .detail-action-buttons { + flex-wrap: wrap; + } + +} + +/* --------------------------------------------------------- + Responsive: Mobile (<= 640px) +--------------------------------------------------------- */ +@media (max-width: 640px) { + .top-nav { + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 10px; + padding-top: 8px; + padding-bottom: 8px; + } + + .top-nav-wrap { + padding: 6px 12px; + } + + .overview-title { + font-size: 30px; + } + + .top-nav-links { + width: auto; + justify-content: flex-end; + gap: 8px; + flex-wrap: nowrap; + } + + .top-nav-links .nav-link.active { + display: none; + } + + .filter-row { + flex-direction: row; + align-items: flex-end; + flex-wrap: wrap; + gap: 12px; + } + + .detail-content-grid { + grid-template-columns: 1fr; + grid-template-areas: + "side" + "gallery"; + } + + .meta-filter-group { + width: auto; + flex-wrap: wrap; + gap: 10px; + } + + .meta-filter { + flex: 1 1 160px; + min-width: 140px; + } } \ No newline at end of file diff --git a/data/events.json b/data/events.json index 5ea7e98..12a2389 100644 --- a/data/events.json +++ b/data/events.json @@ -2,26 +2,83 @@ { "id": 1, "title": "Italienische Tavolata", - "location": "LUZERN", + "location": "Luzern", "date": "19. MÄR. 2026", "time": "18:30 UHR", "category": "DINNER", - "cuisine": "ITALIENISCH", "diet": "VEGGIE", - "spots": 4, - "image": "https://via.placeholder.com/300x200" + "spots": 6, + "host": { + "name": "Ferdinando", + "initial": "F" + }, + "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 dafuer eine klassische Tavolata vor, bei der verschiedene Gerichte in die Mitte des Tisches kommen und sich jeder bedient." + ], + "menu": [ + "Bruschetta-Variationen und Antipasti", + "Hausgemachte Pasta mit saisonalem Gemüse", + "Optional mit Salsiccia-Ragu", + "Tiramisu als Dolce" + ], + "specifications": [ + "Glutenfrei" + ], + "participants": [ + "Ferdinando", + "Alina", + "Ramon", + "Franca" + + ], + "gallery": [ + "https://i.pinimg.com/736x/f8/48/e2/f848e218a5bd6702c9fbb225c8eebb3e.jpg", + "https://i.pinimg.com/736x/b1/3a/00/b13a00d5ee7a93b0e14f757d27043370.jpg", + "https://i.pinimg.com/1200x/78/5b/05/785b052394a8337c9a3b152a9745a580.jpg", + "" + ] }, { "id": 2, "title": "Noche Peruana", - "location": "LUZERN", + "location": "Chur", "date": "11. APR. 2026", "time": "19:00 UHR", "category": "DINNER", - "cuisine": "PERUANISCH", - "diet": "FLEISCH", - "spots": 2, - "image": "https://via.placeholder.com/300x200" + "diet": "Omnivore", + "spots": 4, + "host": { + "name": "Camila", + "initial": "C" + }, + "hostMessage": [ + "¡Hola a todos! Ich lade euch ein auf eine kulinarische Reise nach Peru.", + "Ich koche für euch ein authentisches peruanisches Sharing-Menü, das vor Lebensfreude nur so sprüht. Freut euch auf eine Explosion aus leuchtenden Farben, fein abgestimmter Schärfe und der unverwechselbaren Frische verschiedenster Kräuter.", + "Wir genießen den Abend gemeinsam in mehreren kleinen Gängen, ganz nach dem Sharing-Prinzip. Dabei entdecken wir die klassischen Aromen meiner Heimatstadt Lima – von traditionell bis modern interpretiert.", + "Es wird gesellig, aromatisch und ein echtes Erlebnis für alle Sinne. ¡Buen provecho!" + ], + "menu": [ + "Ceviche mit Limette und Koriander", + "Aji de Gallina", + "Lomo Saltado", + "Suspiro a la Limena" + ], + "specifications": [ + + ], + "participants": [ + "Camila", + "Mara", + "Luis", + "Tobias" + ], + "gallery": [ + "https://i.pinimg.com/736x/f4/4c/59/f44c597ce62067eef2b03091f30d2279.jpg", + "https://i.pinimg.com/736x/1d/41/eb/1d41ebe23ce4dde7853ab93fce1cfdb2.jpg", + "https://i.pinimg.com/736x/8d/9e/2e/8d9e2e13651f11ef64f661cb1d959738.jpg", + "https://i.pinimg.com/1200x/ee/bf/f0/eebff08d0d4d20e1b4505495925fb1d8.jpg" + ] }, { "id": 3, @@ -30,9 +87,36 @@ "date": "02. MAI. 2026", "time": "12:30 UHR", "category": "LUNCH", - "cuisine": "JAPANISCH", - "diet": "FISCH", + "diet": "Pescetarisch", "spots": 8, - "image": "https://via.placeholder.com/300x200" + "host": { + "name": "Akiko", + "initial": "A" + }, + "hostMessage": [ + "Willkommen zu einem entspannten Lunch mit japanischen Klassikern und hausgemachten Beilagen.", + "Ich zeige euch, wie wir verschiedene kleine Teller kombinieren, damit jeder probieren kann." + ], + "menu": [ + "Miso Suppe", + "Sashimi Variation", + "Matcha Mochi" + ], + "specifications": [ + "Glutenfrei", + "Laktosefrei" + + ], + "participants": [ + "Akiko", + "Jan", + "Mina" + ], + "gallery": [ + "https://i.pinimg.com/1200x/e2/6a/f5/e26af5c24b805081a3f304d240818302.jpg", + "https://i.pinimg.com/736x/21/77/4a/21774adee4ae0e4f7a1494e33ab3856b.jpg", + "https://i.pinimg.com/1200x/b1/fb/3a/b1fb3a7809f4046843904ac8800daacc.jpg", + "https://i.pinimg.com/1200x/c6/93/42/c69342ec621333e853c35bda891d8bc6.jpg" + ] } ] \ No newline at end of file diff --git a/event_detail.html b/event_detail.html index 1b63324..cf73b50 100644 --- a/event_detail.html +++ b/event_detail.html @@ -4,25 +4,36 @@ Event-Detail - + + + + -
- -
-
-
-

Lädt Event-Details...

-
-
+ +
+ +
+

Lädt Event-Details...

+
+
- + diff --git a/event_overview.html b/event_overview.html index 15e5c48..b328b90 100644 --- a/event_overview.html +++ b/event_overview.html @@ -4,33 +4,66 @@ Event-Overview - + + + + -
- - + +
+
+ + Invite Logo + + +
+
-

Invité Events

+ +

Events

+
-

WORAUF HAST DU LUST

-
-
BRUNCH
-
LUNCH
-
DINNER
-
COFFEE
-
ALLE
+

Was darf es sein?

+
+ +
+ + + + + +
+ + +
+ + + +
+
- + + + \ No newline at end of file diff --git a/js/event_detail.js b/js/event_detail.js index e34ebc6..ecabc45 100644 --- a/js/event_detail.js +++ b/js/event_detail.js @@ -1,7 +1,11 @@ document.addEventListener('DOMContentLoaded', async () => { + // ------------------------------------------------------------- + // DOM entry point and shared asset path. + // ------------------------------------------------------------- const detailContainer = document.getElementById('detail-view'); + const locationIconPath = 'assets/location-pin.svg'; - // 1. ID aus der URL lesen (z.B. detail.html?id=1) + // Read event id from query string (detail page deep-link support). const params = new URLSearchParams(window.location.search); const eventId = parseInt(params.get('id')); @@ -10,7 +14,7 @@ document.addEventListener('DOMContentLoaded', async () => { return; } - // 2. Daten laden und das richtige Event suchen + // Fetch data source and resolve the matching event record. try { const response = await fetch('data/events.json'); const allEvents = await response.json(); @@ -25,23 +29,232 @@ document.addEventListener('DOMContentLoaded', async () => { console.error("Fehler beim Laden der Details:", error); } + // Format localized date token into full readable date. + function formatEventDate(dateString) { + const labels = { + 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' + }; + + const match = dateString.match(/^(\d{1,2})\.\s*([A-ZÄÖÜ]{3})\.\s*(\d{4})$/); + if (!match) { + return dateString; + } + + const day = Number(match[1]); + const monthLabel = labels[match[2]]; + const year = match[3]; + + return monthLabel ? `${day}. ${monthLabel} ${year}` : dateString; + } + + // Normalize time casing for UI consistency. + function formatEventTime(timeString) { + return timeString.replace('UHR', 'Uhr').trim(); + } + + // Map diet keys to readable labels while keeping unknown values untouched. + function getDietLabel(diet) { + const labels = { + VEGGIE: 'Vegetarisch', + VEGAN: 'Vegan', + FLEISCH: 'Fleisch', + FISCH: 'Fisch' + }; + + return labels[diet] || diet; + } + + // Compose and inject the full detail UI for a single event. function renderDetailPage(event) { - //Layout Deatilseite der Events mit Rücklink zur Übersicht, Eventtitel, Infos und Bild + // Core display values and resilient fallbacks for optional data fields. + const displayDate = formatEventDate(event.date); + const displayTime = formatEventTime(event.time); + const dietLabel = getDietLabel(event.diet); + const eventCategory = event.category || 'EVENT'; + const hostName = event.host?.name || 'Host'; + const hostInitial = (event.host?.initial || hostName.charAt(0) || 'H').charAt(0).toUpperCase(); + const hostMessage = Array.isArray(event.hostMessage) && event.hostMessage.length > 0 + ? event.hostMessage + : ['Der Host hat für dieses Event noch keine Nachricht hinterlegt.']; + const menuItems = Array.isArray(event.menu) && event.menu.length > 0 + ? event.menu + : ['Menü wird in Kuerze bekannt gegeben.']; + const specifications = Array.isArray(event.specifications) && event.specifications.length > 0 + ? event.specifications + : []; + const participants = Array.isArray(event.participants) ? event.participants : []; + const galleryImages = Array.isArray(event.gallery) && event.gallery.length > 0 + ? event.gallery + : [event.image, event.image, event.image]; + const visibleParticipants = participants.slice(0, 6); + const remainingParticipants = Math.max(0, participants.length - visibleParticipants.length); + const totalGuests = Number.isFinite(event.spots) ? event.spots : 0; + const confirmedGuests = participants.length; + const freePlaces = Math.max(0, totalGuests - confirmedGuests); + const isFull = freePlaces === 0; + const detailChips = [ + `${eventCategory}`, + `${dietLabel}`, + ...specifications.map(item => `${item}`) + ].join(''); + + // Render complete detail page layout including: + // hero metadata, host card, menu, participants, gallery and sticky action bar. detailContainer.innerHTML = ` -
- ← -

${event.title}

-
-
-
-

📍 ${event.location} | 📅 ${event.date} | 👤 Max. ${event.spots} Personen

-
-

Hier kommen die detaillierten Infos zu ${event.title} hin...

-
-
- ${event.title} +
+ + + Alle Events + + +
+
+ + + ${event.location} + +

${displayDate} | ${displayTime} | ${confirmedGuests}/${totalGuests} Gaeste

+
+

${event.title}

+
+ ${detailChips} +
+
+ +
+
+
+
+ ${hostInitial} + ${hostName} + Host +
+ ${hostMessage.map(paragraph => `

${paragraph}

`).join('')} +
+ +
+

Menue

+
    + ${menuItems.map(item => `
  • ${item}
    • `).join('')} +
+
+ +
+
+

Teilnehmer

+ Alle ansehen +
+
+ ${visibleParticipants.map(name => `${name.charAt(0).toUpperCase()}`).join('')} + ${remainingParticipants > 0 ? `+${remainingParticipants}` : ''} +
+
+
+ +
+ ${galleryImages.slice(0, 9).map((img, index) => ` + + `).join('')} +
+
+ +
+
+ + + + ${event.location} + + | ${displayDate} | ${displayTime} | ${confirmedGuests}/${totalGuests} Gaeste + + ${event.title} +
+ +
+ + ${isFull ? 'AUSGEBUCHT' : `${freePlaces} Plaetze frei`} + + +
+
+ +
`; + + // --------------------------------------------------------- + // Lightbox behavior for gallery images: + // open on image click, close via backdrop, close button or ESC. + // --------------------------------------------------------- + const lightbox = detailContainer.querySelector('.detail-lightbox'); + const lightboxImage = detailContainer.querySelector('.detail-lightbox-image'); + const lightboxClose = detailContainer.querySelector('.detail-lightbox-close'); + const galleryButtons = detailContainer.querySelectorAll('.detail-gallery-item'); + + // Central close helper to keep all close paths consistent. + function closeLightbox() { + if (!lightbox) { + return; + } + + lightbox.classList.remove('is-open'); + lightbox.setAttribute('aria-hidden', 'true'); + } + + if (lightbox && lightboxImage) { + // Open with selected image source. + galleryButtons.forEach(button => { + button.addEventListener('click', () => { + const imageSrc = button.getAttribute('data-fullsrc'); + if (!imageSrc) { + return; + } + + lightboxImage.src = imageSrc; + lightbox.classList.add('is-open'); + lightbox.setAttribute('aria-hidden', 'false'); + }); + }); + + // Close when user clicks on backdrop. + lightbox.addEventListener('click', event => { + const target = event.target; + if (target instanceof HTMLElement && target.hasAttribute('data-close-lightbox')) { + closeLightbox(); + } + }); + + // Close via dedicated icon/button. + lightboxClose?.addEventListener('click', closeLightbox); + + // Close with keyboard for accessibility. + document.addEventListener('keydown', event => { + if (event.key === 'Escape') { + closeLightbox(); + } + }); + } } }); \ No newline at end of file diff --git a/js/event_overview.js b/js/event_overview.js index 2c199cc..2559a0f 100644 --- a/js/event_overview.js +++ b/js/event_overview.js @@ -1,111 +1,251 @@ document.addEventListener('DOMContentLoaded', () => { + // ------------------------------------------------------------- + // DOM references used throughout the page lifecycle. + // ------------------------------------------------------------- const eventGrid = document.getElementById('event-grid'); const filterButtons = document.querySelectorAll('.category-item'); - let allEvents = []; + const locationFilter = document.getElementById('location-filter'); + const dateFilter = document.getElementById('date-filter'); + const locationIconPath = 'assets/location-pin.svg'; - // 1. Daten laden aus JSOn file + // ------------------------------------------------------------- + // In-memory state for fetched events and currently active category. + // ------------------------------------------------------------- + let allEvents = []; + let activeCategory = 'ALLE'; + + // ------------------------------------------------------------- + // Initial data bootstrap: + // 1) fetch JSON, + // 2) populate select options, + // 3) restore filter state from sessionStorage, + // 4) render filtered list. + // ------------------------------------------------------------- async function fetchEvents() { try { - // Pfad zu JSON File angepasst an lokale Ordnerstruktur const response = await fetch('data/events.json'); allEvents = await response.json(); - renderEvents(allEvents); + populateMetaFilters(); - // Beim Laden prüfen, ob ein Filter gespeichert war - const savedFilter = sessionStorage.getItem('activeFilter') || 'ALLE'; - applyFilter(savedFilter); + const savedCategory = sessionStorage.getItem('activeFilter') || 'ALLE'; + const savedLocation = sessionStorage.getItem('activeLocation') || 'ALLE_ORTE'; + const savedDate = sessionStorage.getItem('activeDate') || ''; - //checked ob Fehler beim Laden oder Parsen der Daten auftreten + activeCategory = savedCategory; + if (locationFilter) { + locationFilter.value = hasOption(locationFilter, savedLocation) ? savedLocation : 'ALLE_ORTE'; + } + if (dateFilter) { + dateFilter.value = savedDate; + } + + applyFilters(); } catch (error) { - console.error("Fehler:", error); - eventGrid.innerHTML = "

Events konnten nicht geladen werden.

"; + console.error('Fehler:', error); + eventGrid.innerHTML = '

Events konnten nicht geladen werden.

'; } } - // Funktion um Filter anzuwenden und gleichzeitig UI zu aktualisieren - function applyFilter(category) { - // UI: Aktiven Button stylen + // Build location options dynamically from loaded events. + function populateMetaFilters() { + const locations = [...new Set(allEvents.map(event => event.location))].sort(); + + if (locationFilter) { + locations.forEach(location => { + const option = document.createElement('option'); + option.value = location; + option.textContent = location; + locationFilter.appendChild(option); + }); + } + } + + // Convert localized event date (e.g. 19. MÄR. 2026) into ISO format for date input comparison. + function parseEventDateToIso(dateString) { + const months = { + JAN: '01', + FEB: '02', + 'MÄR': '03', + MRZ: '03', + APR: '04', + MAI: '05', + JUN: '06', + JUL: '07', + AUG: '08', + SEP: '09', + OKT: '10', + NOV: '11', + DEZ: '12' + }; + + const match = dateString.match(/^(\d{1,2})\.\s*([A-ZÄÖÜ]{3})\.\s*(\d{4})$/); + if (!match) { + return ''; + } + + const day = String(match[1]).padStart(2, '0'); + const month = months[match[2]]; + const year = match[3]; + + return month ? `${year}-${month}-${day}` : ''; + } + + // Convert short month notation into full German month label for UI display. + function formatEventDate(dateString) { + const labels = { + 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' + }; + + const match = dateString.match(/^(\d{1,2})\.\s*([A-ZÄÖÜ]{3})\.\s*(\d{4})$/); + if (!match) { + return dateString; + } + + const day = Number(match[1]); + const monthLabel = labels[match[2]]; + const year = match[3]; + + return monthLabel ? `${day}. ${monthLabel} ${year}` : dateString; + } + + // Normalize time label from UHR to Uhr for consistent typography. + function formatEventTime(timeString) { + return timeString.replace('UHR', 'Uhr').trim(); + } + + // Safely verify whether a value exists in the given select element. + function hasOption(selectElement, value) { + return Array.from(selectElement.options).some(option => option.value === value); + } + + // Apply all filters together (category, location, date), update button state, render and persist. + function applyFilters() { + const selectedLocation = locationFilter ? locationFilter.value : 'ALLE_ORTE'; + const selectedDate = dateFilter ? dateFilter.value : ''; + filterButtons.forEach(btn => { - if (btn.getAttribute('data-cat') === category) { + if (btn.getAttribute('data-cat') === activeCategory) { btn.classList.add('active'); } else { btn.classList.remove('active'); } }); - // Daten filtern - const filtered = category === 'ALLE' - ? allEvents - : allEvents.filter(e => e.category === category); - + const filtered = allEvents.filter(event => { + const categoryMatch = activeCategory === 'ALLE' || event.category === activeCategory; + const locationMatch = selectedLocation === 'ALLE_ORTE' || event.location === selectedLocation; + const eventDateIso = parseEventDateToIso(event.date); + const dateMatch = !selectedDate || eventDateIso === selectedDate; + + return categoryMatch && locationMatch && dateMatch; + }); + renderEvents(filtered); - - //Filter im Browser merken - sessionStorage.setItem('activeFilter', category); + sessionStorage.setItem('activeFilter', activeCategory); + sessionStorage.setItem('activeLocation', selectedLocation); + sessionStorage.setItem('activeDate', selectedDate); } - // 2. Events rendern + "Empty State" Logik - function renderEvents(events) { - eventGrid.innerHTML = ''; - // PRÜFUNG: Wenn keine Events vorhanden sind zeigt folgende Nachricht + // Render either: + // - empty state call-to-action when no results match, + // - or event cards with status and metadata. + function renderEvents(events) { + eventGrid.innerHTML = ''; + if (events.length === 0) { eventGrid.innerHTML = `
-

Schade! Aktuell gibt es hier keine Events.

-

Möchtest du vielleicht selbst Gastgeber sein?

- - +

Keine Treffer

+

Schade, aktuell gibt es hier keine Events.

+

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

+ +
`; return; } - // Wenn Events da sind, Karten bauen events.forEach(event => { + // Card shell and click-through navigation to detail page. const card = document.createElement('article'); card.className = 'event-card'; - - //Klick auf die gesamte Karte leitet zur Detailseite weiter - card.style.cursor = "pointer"; + card.style.cursor = 'pointer'; card.onclick = () => { window.location.href = `event_detail.html?id=${event.id}`; }; - //internes HTML im Js zur Styling der Event-Karte (HIER CHECKEN OB SO OK NACH CLEAN CODE) + const displayDate = formatEventDate(event.date); + const displayTime = formatEventTime(event.time); + + // Capacity logic: + // spots = total capacity, participants.length = booked seats. + const bookedSeats = event.participants ? event.participants.length : 0; + const totalCapacity = event.spots; + const freePlaces = Math.max(0, totalCapacity - bookedSeats); + const isFull = freePlaces === 0; + + // Build optional specification chips only when data exists. + const specsChips = event.specifications && event.specifications.length > 0 + ? event.specifications.map(spec => `${spec}`).join('') + : ''; + card.innerHTML = ` -
-
- 📍 ${event.location} -

${event.title}

-
- ${event.cuisine} - ${event.category} +
+
+ + + ${event.location} + +

${displayDate} | ${displayTime} | ${bookedSeats}/${totalCapacity} Gaeste

+
+

${event.title}

+
+ ${event.category} + ${event.diet} + ${specsChips}
-
- ${event.date}
- 🕒 ${event.time} +
+ ${isFull ? 'AUSGEBUCHT' : `${freePlaces} Plätze FREI`} + ${isFull ? '' : ''}
-
-
🥗 ${event.diet}
- -

${event.spots} PLÄTZE FREI

-
-
❤️
`; + eventGrid.appendChild(card); }); } - // 3. Filter-Logik basic anhand der Kategorien im JSON File + // Category filter interactions. filterButtons.forEach(button => { button.addEventListener('click', () => { - const selectedCat = button.getAttribute('data-cat'); - applyFilter(selectedCat); + activeCategory = button.getAttribute('data-cat'); + applyFilters(); }); }); + // Secondary filter interactions. + if (locationFilter) { + locationFilter.addEventListener('change', applyFilters); + } + + if (dateFilter) { + dateFilter.addEventListener('change', applyFilters); + } + + // Kick off initial load/render cycle. fetchEvents(); -}); \ No newline at end of file +}); From b42dec562d9d9c1c8ffe8dcde4929b0a49b20957 Mon Sep 17 00:00:00 2001 From: viiivo <«vivien.vonburg@outlook.com»> Date: Fri, 27 Mar 2026 17:49:20 +0100 Subject: [PATCH 2/5] fixed missing pic in italienische tavolata --- data/events.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/data/events.json b/data/events.json index 12a2389..c5d1502 100644 --- a/data/events.json +++ b/data/events.json @@ -36,7 +36,7 @@ "https://i.pinimg.com/736x/f8/48/e2/f848e218a5bd6702c9fbb225c8eebb3e.jpg", "https://i.pinimg.com/736x/b1/3a/00/b13a00d5ee7a93b0e14f757d27043370.jpg", "https://i.pinimg.com/1200x/78/5b/05/785b052394a8337c9a3b152a9745a580.jpg", - "" + "https://i.pinimg.com/1200x/82/5e/9c/825e9c735e6fccdf6e7a4ac5dc2b2b7b.jpg" ] }, { From 7662e2db262d7521c4eca2c56c098c326b09bebd Mon Sep 17 00:00:00 2001 From: viiivo <«vivien.vonburg@outlook.com»> Date: Fri, 27 Mar 2026 17:59:55 +0100 Subject: [PATCH 3/5] Fixed broken link between index and signup / login --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 1a1d2af..a78b069 100644 --- a/index.html +++ b/index.html @@ -13,9 +13,9 @@
- + Login
@@ -24,7 +24,7 @@

Zu Tisch mit Fremden – bereit für die nächste kulinarische Begegnung?

Dein Ort um neue Leute kennen zu lernen! Erstelle eigene Events und lade Gäste zu dir nach Hause ein.

- + Anmelden
From 9c6cf7ace55929fec83bd2c6cbdc9d995b97c8f8 Mon Sep 17 00:00:00 2001 From: viiivo <«vivien.vonburg@outlook.com»> Date: Fri, 27 Mar 2026 18:02:16 +0100 Subject: [PATCH 4/5] Un fixed broken link between event create and back to event overview --- event_create.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/event_create.html b/event_create.html index b011885..0730088 100644 --- a/event_create.html +++ b/event_create.html @@ -20,7 +20,7 @@
- Abbrechen + Abbrechen
From 434d0f34b927873523861ef29092aabcd3573ade Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=ABschmona=C2=BB?= <«simona.oswald@proton.me»> Date: Sat, 28 Mar 2026 15:53:35 +0100 Subject: [PATCH 5/5] =?UTF-8?q?Stylesheet=20hinzugef=C3=BCgt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/stylesheet.css | 105 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 css/stylesheet.css diff --git a/css/stylesheet.css b/css/stylesheet.css new file mode 100644 index 0000000..42df5d5 --- /dev/null +++ b/css/stylesheet.css @@ -0,0 +1,105 @@ +/* Font Import */ + +@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600&display=swap'); + + +/* Reset / Normalize */ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Colors + Main Font */ +:root { + --primary-color: #D44B24; + --primary-color-dark: #D44B24; + --secondary-color: #6B6B05; + --secondary-color-dark: #5C5C05; + --white: #ffffff; + --black: #221C1A; + --brown: #66340d; + + --font-main: 'Jost', sans-serif; + --font-size-base: 16px; +} + +/* Base Styles */ +body { + font-family: var(--font-main); + font-size: 1.125em; + line-height: 1.5; + color: var(--black); + background-color: #FFFDE3; +} + +img { + max-width: 100%; + display: block; +} + +/* Typography */ + +h1, h2 { + font-family: 'Bagel Fat One'; + margin-bottom: 0.5em; +} + +p { + font-family: 'Jost', sans-serif; + margin-bottom: 1em; +} + +/* Layout */ +.container { + width: 90%; + max-width: 1200px; + margin: 0 auto; +} + +/* Components */ +.button { + display: inline-block; + padding: 0.5em 1.25em; + background-color: var(--secondary-color); + font-family: 'Jost', sans-serif; + font-size: 1em; + color: #FFFDE3; + border: none; + border-radius: 2em; + cursor: pointer; + +} + +.button:hover { + background-color: var(--secondary-color-dark); +} + +/* Navigation */ +.nav { + display: flex; + gap: 1rem; +} + +/* Utilities */ +.text-center { + text-align: left; +} + +.hidden { + display: none; +} + +/* Media Queries (Responsive) */ +@media (max-width: 768px) { + .container { + width: 95%; + } + + .nav { + flex-direction: column; + } +} \ No newline at end of file