diff --git a/css/event_overview_stylesheet.css b/css/event_overview_stylesheet.css new file mode 100644 index 0000000..91d6cce --- /dev/null +++ b/css/event_overview_stylesheet.css @@ -0,0 +1,54 @@ +:root { + --black: #000; + --white: #fff; + --gray-bg: #f4f4f4; + --border: 1px solid #000; +} + +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; +} +.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 */ +.empty-state { + text-align: center; + padding: 50px 20px; + border: 2px dashed #ccc; + background: var(--gray-bg); + margin-top: 20px; +} +.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 */ +@media (max-width: 850px) { + .event-card { grid-template-columns: 1fr; } + .event-image { border-right: none; border-bottom: var(--border); width: 100%; } +} \ No newline at end of file diff --git a/stylesheet.css b/css/stylesheet.css similarity index 100% rename from stylesheet.css rename to css/stylesheet.css diff --git a/data/events.json b/data/events.json new file mode 100644 index 0000000..5ea7e98 --- /dev/null +++ b/data/events.json @@ -0,0 +1,38 @@ +[ + { + "id": 1, + "title": "Italienische Tavolata", + "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" + }, + { + "id": 2, + "title": "Noche Peruana", + "location": "LUZERN", + "date": "11. APR. 2026", + "time": "19:00 UHR", + "category": "DINNER", + "cuisine": "PERUANISCH", + "diet": "FLEISCH", + "spots": 2, + "image": "https://via.placeholder.com/300x200" + }, + { + "id": 3, + "title": "Japanese Delight", + "location": "ZÜRICH", + "date": "02. MAI. 2026", + "time": "12:30 UHR", + "category": "LUNCH", + "cuisine": "JAPANISCH", + "diet": "FISCH", + "spots": 8, + "image": "https://via.placeholder.com/300x200" + } +] \ No newline at end of file diff --git a/event_overview.html b/event_overview.html new file mode 100644 index 0000000..89242fe --- /dev/null +++ b/event_overview.html @@ -0,0 +1,36 @@ + + + + + + Event_Overview + + + +
+ + +
+ +
+

Invité Events

+ +
+

WORAUF HAST DU LUST

+
+
BRUNCH
+
LUNCH
+
DINNER
+
COFFEE
+
ALLE
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/js/event_overview_script.js b/js/event_overview_script.js new file mode 100644 index 0000000..fe01ec7 --- /dev/null +++ b/js/event_overview_script.js @@ -0,0 +1,81 @@ +document.addEventListener('DOMContentLoaded', () => { + const eventGrid = document.getElementById('event-grid'); + const filterButtons = document.querySelectorAll('.category-item'); + let allEvents = []; + + // 1. Daten laden + async function fetchEvents() { + try { + // Pfad an deine Ordnerstruktur angepasst + const response = await fetch('data/events.json'); + allEvents = await response.json(); + renderEvents(allEvents); + } catch (error) { + console.error("Fehler:", error); + eventGrid.innerHTML = "

Events konnten nicht geladen werden.

"; + } + } + + // 2. Events rendern + "Empty State" Logik + function renderEvents(events) { + eventGrid.innerHTML = ''; + + // PRÜFUNG: Wenn keine Events vorhanden sind + if (events.length === 0) { + eventGrid.innerHTML = ` +
+

Schade! Aktuell gibt es hier keine Events.

+

Möchtest du vielleicht selbst Gastgeber sein?

+ +
+ `; + return; + } + + // Wenn Events da sind, Karten bauen + events.forEach(event => { + const card = document.createElement('article'); + card.className = 'event-card'; + card.innerHTML = ` +
+
+ 📍 ${event.location} +

${event.title}

+
+ ${event.cuisine} + ${event.category} +
+
+
+ ${event.date}
+ 🕒 ${event.time} +
+
+
🥗 ${event.diet}
+ +

${event.spots} PLÄTZE FREI

+
+
❤️
+ `; + eventGrid.appendChild(card); + }); + } + + // 3. Filter-Logik + filterButtons.forEach(button => { + button.addEventListener('click', () => { + filterButtons.forEach(btn => btn.classList.remove('active')); + button.classList.add('active'); + + const selectedCat = button.getAttribute('data-cat'); + + const filtered = selectedCat === 'ALLE' + ? allEvents + : allEvents.filter(e => e.category === selectedCat); + + renderEvents(filtered); + }); + }); + + fetchEvents(); +}); \ No newline at end of file diff --git a/javascript.js b/js/javascript.js similarity index 100% rename from javascript.js rename to js/javascript.js