projects/papa-kind-treff.info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hhhh

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2025-12-31 01:00:41 +01:00
parent 3110b48c33
commit cbcd09003e
5 changed files with 232 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
partials/landing/main/home.php
View File

@@ -6,7 +6,7 @@ $eventsForJs = [];
try {
$pdo = $app->pdo();
if ($pdo) {
$stmt = $pdo->prepare('SELECT id, title, teaser_public, description, city, region, zip, starts_at, allow_kids, visibility, location_label, lat, lng FROM events WHERE starts_at >= NOW() AND status != "cancelled" ORDER BY starts_at ASC LIMIT 50');
$stmt = $pdo->prepare('SELECT id, title, teaser_public, description, city, region, zip, starts_at, allow_kids, visibility, location_label, lat, lng, created_at FROM events WHERE starts_at >= NOW() AND status != "cancelled" ORDER BY created_at DESC, starts_at ASC LIMIT 10');
$stmt->execute();
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
foreach ($rows as $r) {
@@ -58,63 +58,64 @@ try {
<div class="chip inline">Echt lokale Gruppen</div>
</div>
</div>
<div class="hero__card card">
<div class="badge">Schnellsuche</div>
<h3>Events in deiner Region</h3>
<div class="form-row">
<label class="label" for="locInput">PLZ oder Ort</label>
<input id="locInput" class="input" placeholder="z. B. 10437 oder Berlin" />
</div>
<div class="form-row">
<label class="label" for="topicSelect">Thema</label>
<select id="topicSelect" class="select">
<option value="">Alle</option>
<option value="outdoor">Outdoor / Spielplatz</option>
<option value="kaffee">Kaffee & Austausch</option>
<option value="sport">Sport</option>
<option value="workshop">Workshop</option>
</select>
</div>
<div class="form-row">
<label class="label" for="ageSelect">Alter der Kinder</label>
<select id="ageSelect" class="select">
<option value="">Alle</option>
<option value="baby">0-2 Jahre</option>
<option value="kids">3-6 Jahre</option>
<option value="school">7-12 Jahre</option>
</select>
</div>
<button class="btn block" id="btnSearch">Events anzeigen</button>
<button class="btn ghost block" id="btnGeo">Standort automatisch ermitteln</button>
<p class="muted small">Geodaten werden nur zur Anzeige verwendet.</p>
</div>
</div>
</section>
<style>
.slider {display:flex; align-items:center; gap:12px;}
.slider__viewport {overflow-x:hidden; flex:1; scroll-behavior:smooth;}
.slider__track {display:flex; gap:12px; min-height:100%;}
.slider__track .event-card-small {min-width:240px; max-width:260px;}
.slider__nav {min-width:44px;}
</style>
<section class="container section" id="events">
<div class="section__head">
<div>
<p class="eyebrow">Termine entdecken</p>
<h2>Die nächsten anstehenden Events</h2>
<p class="muted">Gäste sehen nur Basisinfos. Als Mitglied siehst du vollständige Details, kannst zusagen und neue Treffen anlegen.</p>
</div>
<div class="chips">
<button class="chip" data-filter="all">Alle</button>
<button class="chip" data-filter="outdoor">Outdoor</button>
<button class="chip" data-filter="kaffee">Kaffee</button>
<button class="chip" data-filter="sport">Sport</button>
<button class="chip" data-filter="workshop">Workshops</button>
<h2>Neueste Termine</h2>
<p class="muted">Die zehn neuesten veröffentlichten Events – kompakt zum Durchscrollen. Gäste sehen Basisinfos, Mitglieder erhalten alle Details.</p>
</div>
</div>
<div class="results" id="eventList"></div>
<div class="surface border rounded p-4 mt-3">
<div class="flex between center-y gap-12">
<div>
<strong>Nur für eingeloggte Mitglieder</strong>
<p class="muted small">Volle Beschreibung, Kontakt, Kinder-Infos und Anmeldeoptionen.</p>
</div>
<button class="btn">Jetzt anmelden</button>
<div class="slider">
<button class="btn ghost slider__nav" type="button" data-slider-prev aria-label="Zurück">‹</button>
<div class="slider__viewport">
<div class="slider__track" id="eventSlider"></div>
</div>
<button class="btn ghost slider__nav" type="button" data-slider-next aria-label="Weiter">›</button>
</div>
</section>
<section class="section alt" id="quicksearch">
<div class="container">
<p class="eyebrow">Schnellsuche</p>
<h3>Passende Events finden</h3>
<form id="quickSearchForm" class="grid grid-3" style="gap: 12px; align-items:flex-end;" action="/search" method="get">
<div class="stack gap-6">
<label class="label" for="qsQuery">Suchbegriff</label>
<input id="qsQuery" name="q" class="input" placeholder="Titel, Thema, Beschreibung">
</div>
<div class="stack gap-6">
<label class="label" for="qsLoc">Ort oder PLZ</label>
<div class="flex gap-8">
<input id="qsLoc" name="loc" class="input" placeholder="z. B. 10437 oder Berlin" style="flex:1;">
<button class="btn ghost" type="button" id="quickGeo">📍</button>
</div>
<input type="hidden" name="lat" id="qsLat">
<input type="hidden" name="lng" id="qsLng">
</div>
<div class="stack gap-6">
<label class="label" for="qsRadius">Umkreis (km)</label>
<select id="qsRadius" name="radius" class="select">
<?php foreach ([1,2,5,10,15,25] as $r): ?>
<option value="<?= $r ?>"><?= $r ?></option>
<?php endforeach; ?>
</select>
</div>
<div>
<button class="btn block" type="submit" style="width:100%;">Suchen</button>
</div>
</form>
<p class="muted small" style="margin-top:8px;">Optional Standort ermitteln oder Ort eingeben; Umkreis bestimmt die Treffer in der Suche.</p>
</div>
</section>