168 lines
7.6 KiB
HTML
168 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Invité | Event-Übersicht</title>
|
||
|
||
<!-- Stylesheet für diese Seite-->
|
||
<link rel="stylesheet" href="css/event_overview.css">
|
||
<script src="js/navigation.js" defer></script>
|
||
|
||
<!-- Globales Stylesheet -->
|
||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Top Navigation mit Seitenlinks -->
|
||
<header class="top-nav-wrap">
|
||
<div class="top-nav">
|
||
<a class="brand" href="index.html" aria-label="Zur Startseite">
|
||
<img src="assets/logo_invite.svg" alt="Invite Logo">
|
||
</a>
|
||
<nav class="nav-tab-links" aria-label="Hauptnavigation">
|
||
<a class="button-small" href="login.html" aria-label="Login">Login</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main content: page headline, filter controls and dynamic event list -->
|
||
<main class="container layout-wide">
|
||
<!-- Page headline -->
|
||
<p class="badge margin-bottom-40">Event finden</p>
|
||
<div class="overview-title-row">
|
||
<h1 class="overview-title">Was darf es sein?</h1>
|
||
<button type="button" id="info-button" class="btn-info" aria-label="Informationen zu kostenlosen Events">?</button>
|
||
</div>
|
||
|
||
<!-- Filter section: category chips + location/date filters -->
|
||
<section class="filter-section">
|
||
<p class="filter-label">Art des Essens / Eventtyp</p>
|
||
<div class="filter-row">
|
||
<!-- Primary category filter buttons -->
|
||
<div class="category-group">
|
||
<button class="category-item active" type="button" data-cat="ALLE">Alle</button>
|
||
<button class="category-item" type="button" data-cat="Brunch">Brunch</button>
|
||
<button class="category-item" type="button" data-cat="Lunch">Lunch</button>
|
||
<button class="category-item" type="button" data-cat="Kaffee + Kuchen">Kaffee + Kuchen</button>
|
||
<button class="category-item" type="button" data-cat="Dinner">Dinner</button>
|
||
</div>
|
||
|
||
<!-- Secondary filters populated/handled by JavaScript -->
|
||
<div class="meta-filter-group" aria-label="Weitere Filter">
|
||
<label class="meta-filter" for="location-filter">
|
||
<span>Ort</span>
|
||
<select id="location-filter">
|
||
<option value="ALLE_ORTE">Alle Orte</option>
|
||
</select>
|
||
</label>
|
||
|
||
<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>
|
||
<details class="filter-box">
|
||
<summary>Nach Ernährungform filtern</summary>
|
||
<div class="filter-row">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="filter-box">
|
||
<summary>Nach Allergenen filtern</summary>
|
||
<div class="filter-row">
|
||
<div class="category-group">
|
||
<button class="category-item" type="button" data-allergie="glutenfrei">glutenfrei</button>
|
||
<button class="category-item" type="button" data-allergie="laktosefrei">laktosefrei</button>
|
||
<button class="category-item" type="button" data-allergie="ohne Nüsse">ohne Nüsse</button>
|
||
</div>
|
||
</div>
|
||
|
||
</details>
|
||
|
||
|
||
</section>
|
||
|
||
<!-- Render target: event cards or empty state -->
|
||
<section id="event-grid" class="event-list"></section>
|
||
</main>
|
||
|
||
<!-- Seitenlogik: Daten laden, filtern und Event-Karten rendern -->
|
||
<script src="js/event_overview.js"></script>
|
||
|
||
<!-- Info Modal: Kostenlose Events Info -->
|
||
<div id="info-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Warum Invité kostenlos ist</h2>
|
||
<button type="button" class="modal-close" aria-label="Popup schließen">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>Alle Events bei uns sind komplett kostenlos. Invité basiert rein auf Freiwilligkeit und der Freude am Teilen. Kein Geldfluss, keine versteckten Kosten – nur die pure Absicht, die Community zu stärken und den sozialen Zusammenhalt in unserer Nachbarschaft zu fördern. Egal ob du den Kochlöffel schwingst oder dich als Gast dazu gesellst: Bei uns zählt nur die menschliche Begegnung.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="register-confirm-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Ein Platz für dich am Tisch!</h2>
|
||
<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" 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>
|
||
</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" 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" 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>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Snackbar: Feedback bei An-/Abmeldung -->
|
||
<div class="snackbar" id="snackbar"></div>
|
||
|
||
<div class="footer">
|
||
<div class="footer-left">
|
||
<p class="p-small inline">© <img src="assets/logo_invite.svg" alt="Invité Logo" class="footer-invite_logo" /></p>
|
||
</div>
|
||
|
||
<div class="footer-center">
|
||
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite_icon" />
|
||
</a>
|
||
</div>
|
||
|
||
<div class="footer-right footer-links">
|
||
<a href="impressum.html" class="link-text-footer">Impressum</a>
|
||
<a href="datenschutz.html" class="link-text-footer">Datenschutz</a>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html> |