commit

public/assets/js/app.js

@@ -1 +1,206 @@
-console.log('mini example loaded');
+document.addEventListener('DOMContentLoaded', () => {
+  const body = document.body;
+  const isLoggedIn = body.dataset.auth === '1';
+  const childGender = body.dataset.childGender || '';
+
+  // Logo-Logik
+  const pickLogo = (gender) => {
+    if (gender === 'female') return 'logo_female.png';
+    if (gender === 'male') return 'logo_male.png';
+    return Math.random() < 0.5 ? 'logo_female.png' : 'logo_male.png';
+  };
+  const chosenLogo = pickLogo(childGender);
+  document.querySelectorAll('[data-logo-img]').forEach(img => {
+    img.src = `/assets/bilder/${chosenLogo}`;
+  });
+
+  // Mobile Menü
+  const mobileMenu = document.getElementById('mobileMenu');
+  document.querySelectorAll('.menu-toggle').forEach(btn => {
+    btn.addEventListener('click', () => {
+      mobileMenu?.classList.toggle('open');
+    });
+  });
+
+  // Scroll zu Events
+  const scrollBtn = document.getElementById('scrollToEvents');
+  if (scrollBtn) {
+    scrollBtn.addEventListener('click', () => {
+      document.getElementById('events')?.scrollIntoView({ behavior: 'smooth' });
+    });
+  }
+
+  // Demo-Events
+  const events = [
+    {
+      id: 1,
+      title: 'Spielplatzrunde im Park',
+      teaser: 'Lockeres Treffen mit Kaffee, Sandspielzeug und Picknick.',
+      description: 'Wir treffen uns am großen Spielplatz im Kiez. Bringt Snacks mit, wir teilen. Für alle Altersstufen offen.',
+      city: 'Berlin',
+      zip: '10437',
+      region: 'Prenzlauer Berg',
+      topic: 'outdoor',
+      startsAt: '2025-08-10T10:00:00',
+      allowKids: true,
+      ageGroup: 'kids',
+      visibility: 'public',
+      contact: 'papa-berlin@example.com',
+      locationLabel: 'Mauerpark',
+    },
+    {
+      id: 2,
+      title: 'Väter-Kaffee & Austausch',
+      teaser: 'Elternzeit, Job, Schlaf – wir reden über alles.',
+      description: 'Reservierter Tisch im Café. Fokus auf Austausch unter Vätern, Kinder optional.',
+      city: 'Hamburg',
+      zip: '22767',
+      region: 'Altona',
+      topic: 'kaffee',
+      startsAt: '2025-08-12T19:00:00',
+      allowKids: false,
+      ageGroup: '',
+      visibility: 'members',
+      contact: 'altona-dads@example.com',
+      locationLabel: 'Café Elbseite',
+    },
+    {
+      id: 3,
+      title: 'Sport & Spiel im Park',
+      teaser: 'Ballspiele und leichtes Workout, Kinder toben mit.',
+      description: 'Wir bringen Bälle und Slackline. Warm-up, danach freies Spiel. Bitte Wasser mitbringen.',
+      city: 'München',
+      zip: '80804',
+      region: 'Schwabing',
+      topic: 'sport',
+      startsAt: '2025-08-15T11:00:00',
+      allowKids: true,
+      ageGroup: 'school',
+      visibility: 'public',
+      contact: 'schwabing-sport@example.com',
+      locationLabel: 'Luitpoldpark',
+    },
+    {
+      id: 4,
+      title: 'Workshop: Erste Hilfe für Kids',
+      teaser: 'Erste Hilfe Basics speziell für Kinder-Unfälle.',
+      description: 'Zertifizierter Trainer, kleiner Materialbeitrag. Kinder können mitgebracht werden.',
+      city: 'Köln',
+      zip: '50667',
+      region: 'Innenstadt',
+      topic: 'workshop',
+      startsAt: '2025-08-20T18:30:00',
+      allowKids: true,
+      ageGroup: 'kids',
+      visibility: 'members',
+      contact: 'koeln-workshop@example.com',
+      locationLabel: 'Familienzentrum Mitte',
+    },
+  ];
+
+  const state = { topic: 'all', age: '', region: '', query: '' };
+  const el = {
+    list: document.getElementById('eventList'),
+    chips: document.querySelectorAll('[data-filter]'),
+    locInput: document.getElementById('locInput'),
+    topicSelect: document.getElementById('topicSelect'),
+    ageSelect: document.getElementById('ageSelect'),
+    btnSearch: document.getElementById('btnSearch'),
+    btnGeo: document.getElementById('btnGeo'),
+  };
+
+  const fmtDate = (iso) => {
+    const d = new Date(iso);
+    return d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
+  };
+
+  const tag = (label) => `<span class="badge">${label}</span>`;
+
+  const renderCard = (item) => {
+    const guest = !isLoggedIn;
+    const access = item.visibility === 'members' && guest ? '<div class="event__access">Nur für Mitglieder</div>' : '';
+    const desc = guest ? `<p class="muted">Melde dich an, um die volle Beschreibung zu sehen.</p>` : `<p>${item.description}</p>`;
+    const contact = !guest ? `<div class="muted small">Kontakt: ${item.contact}</div>` : '';
+    const kids = item.allowKids ? 'Mit Kindern' : 'Ohne Kinder';
+    const tags = [
+      tag(item.topic === 'kaffee' ? 'Kaffee & Austausch' : item.topic.charAt(0).toUpperCase() + item.topic.slice(1)),
+      tag(kids),
+      item.ageGroup ? tag(`Alter: ${item.ageGroup}`) : '',
+    ].filter(Boolean).join('');
+
+    return `
+    <article class="card">
+      <div class="event__body">
+        ${access}
+        <div class="event__meta">
+          <span>${fmtDate(item.startsAt)}</span>
+          <span>📍 ${item.region || item.city}</span>
+          <span>${item.visibility === 'public' ? 'Öffentlich' : 'Mitglieder'}</span>
+        </div>
+        <h3>${item.title}</h3>
+        <p class="muted">${guest ? item.teaser : item.description.slice(0, 140) + '...'}</p>
+        ${guest ? '' : desc}
+        <div class="event__tags">${tags}</div>
+        ${contact}
+        <div class="flex gap-12">
+          <button class="btn ghost">Details</button>
+          ${!guest ? '<button class="btn">Teilnehmen</button>' : '<button class="btn">Anmelden</button>'}
+        </div>
+      </div>
+    </article>`;
+  };
+
+  const matchesFilter = (ev) => {
+    const topicOk = state.topic === 'all' || state.topic === ev.topic;
+    const ageOk = !state.age || ev.ageGroup === state.age || (state.age === 'baby' && ev.ageGroup === 'kids'); // simple fallback
+    const regionOk = !state.region || ev.region.toLowerCase().includes(state.region) || ev.city.toLowerCase().includes(state.region) || ev.zip.startsWith(state.region);
+    const queryOk = !state.query || (ev.title + ev.teaser + ev.description + ev.city + ev.region).toLowerCase().includes(state.query);
+    return topicOk && ageOk && regionOk && queryOk;
+  };
+
+  const renderEvents = () => {
+    if (!el.list) return;
+    const filtered = events.filter(matchesFilter);
+    el.list.innerHTML = filtered.map(renderCard).join('') || '<p class="muted">Keine Events gefunden.</p>';
+  };
+
+  if (el.chips.length > 0) {
+    el.chips[0].classList.add('active');
+  }
+
+  el.chips.forEach(chip => {
+    chip.addEventListener('click', () => {
+      el.chips.forEach(c => c.classList.remove('active'));
+      chip.classList.add('active');
+      state.topic = chip.dataset.filter;
+      renderEvents();
+    });
+  });
+
+  if (el.btnSearch) {
+    el.btnSearch.addEventListener('click', () => {
+      state.region = (el.locInput?.value || '').trim().toLowerCase();
+      state.topic = el.topicSelect?.value || 'all';
+      state.age = el.ageSelect?.value || '';
+      renderEvents();
+    });
+  }
+
+  if (el.btnGeo) {
+    el.btnGeo.addEventListener('click', () => {
+      if (!navigator.geolocation) {
+        alert('Geolocation wird nicht unterstützt.');
+        return;
+      }
+      navigator.geolocation.getCurrentPosition(
+        () => {
+          state.region = 'nähe';
+          renderEvents();
+        },
+        () => alert('Standort konnte nicht ermittelt werden.')
+      );
+    });
+  }
+
+  renderEvents();
+});