200 lines
8.0 KiB
PHP
Executable File
200 lines
8.0 KiB
PHP
Executable File
<?php
|
||
$app = app();
|
||
$flash = $app->flash()->get();
|
||
|
||
$eventsForJs = [];
|
||
$threadsForJs = [];
|
||
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, created_at
|
||
FROM events
|
||
WHERE starts_at >= DATE_SUB(NOW(), INTERVAL 120 DAY)
|
||
AND status != "cancelled"
|
||
ORDER BY starts_at ASC
|
||
LIMIT 60
|
||
');
|
||
$stmt->execute();
|
||
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
|
||
foreach ($rows as $r) {
|
||
$eventsForJs[] = [
|
||
'id' => (int)$r['id'],
|
||
'title' => $r['title'],
|
||
'teaser' => $r['teaser_public'],
|
||
'description' => $r['description'],
|
||
'city' => $r['city'],
|
||
'zip' => $r['zip'],
|
||
'region' => $r['region'],
|
||
'topic' => 'general',
|
||
'startsAt' => $r['starts_at'],
|
||
'allowKids' => ((int)$r['allow_kids'] === 1),
|
||
'ageGroup' => '',
|
||
'visibility' => $r['visibility'],
|
||
'contact' => '',
|
||
'locationLabel' => $r['location_label'],
|
||
'lat' => $r['lat'] !== null ? (float)$r['lat'] : null,
|
||
'lng' => $r['lng'] !== null ? (float)$r['lng'] : null,
|
||
];
|
||
}
|
||
|
||
$communityCfg = require __DIR__ . '/../../../config/community.php';
|
||
$community = new \App\Community($pdo, $communityCfg);
|
||
$threads = $community->listThreads(8);
|
||
foreach ($threads as $thread) {
|
||
$threadsForJs[] = [
|
||
'id' => (int)$thread['id'],
|
||
'title' => (string)$thread['title'],
|
||
'body' => (string)$thread['body'],
|
||
'displayName' => (string)($thread['display_name'] ?: 'Mitglied'),
|
||
'createdAt' => (string)$thread['created_at'],
|
||
'answers' => (int)$thread['answers'],
|
||
];
|
||
}
|
||
}
|
||
} catch (Throwable $e) {
|
||
$eventsForJs = [];
|
||
$threadsForJs = [];
|
||
}
|
||
?>
|
||
<main>
|
||
<?php if ($flash): ?>
|
||
<div class="toast-bar">
|
||
<strong><?= htmlspecialchars($flash['type'], ENT_QUOTES) ?>:</strong>
|
||
<?= htmlspecialchars($flash['message'], ENT_QUOTES) ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<section class="hero">
|
||
<div class="container hero__single">
|
||
<div class="hero__text">
|
||
<h1>Knüpfe Kontakte und organisiere gemeinsame Zeit mit anderen Vätern.</h1>
|
||
<p class="lede">Finde auf einen Blick lokale Events, Termine und Treffen in deiner Umgebung, lerne andere Väter kennen, beteilige dich an Gesprächen in der Community und werde Schritt für Schritt ein fester Teil davon.</p>
|
||
<p class="hero__copy">Als registrierter Teil der Community kannst du dein Profil mit deinen Kinderinfos pflegen, eigene Events organisieren und dich unkompliziert zu bestehenden Treffen und Terminen dazugesellen.</p>
|
||
<div class="hero__actions hero__actions--center">
|
||
<a class="btn" href="/register">Gleich kostenlos registrieren</a>
|
||
</div>
|
||
</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="section alt" id="quicksearch">
|
||
<div class="container">
|
||
<div class="section__intro">
|
||
<h2>Events in deiner Nähe suchen</h2>
|
||
<p>Entdecke Vater-Kind-Events, lokale Termine und gemeinsame Treffen passend zu Ort, Thema und Entfernung.</p>
|
||
</div>
|
||
<form id="quickSearchForm" class="grid grid-3 quicksearch-form" 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 class="quicksearch-form__actions">
|
||
<button class="btn" type="submit">Suchen</button>
|
||
</div>
|
||
</form>
|
||
<p class="muted small" style="margin-top:8px;">Du kannst deinen Standort verwenden oder einen Ort eingeben und den Umkreis selbst festlegen.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="container section" id="events">
|
||
<div class="section__intro">
|
||
<h2>Die neuesten Events</h2>
|
||
<p>Neue Events, Termine und Treffen fuer Vaeter und Kinder in deiner Region.</p>
|
||
</div>
|
||
<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="community-preview">
|
||
<div class="container">
|
||
<div class="section__intro">
|
||
<h2>Tausch dich in der Community aus</h2>
|
||
</div>
|
||
<div class="slider">
|
||
<button class="btn ghost slider__nav" type="button" data-thread-slider-prev aria-label="Zurück">‹</button>
|
||
<div class="slider__viewport">
|
||
<div class="slider__track" id="threadSlider"></div>
|
||
</div>
|
||
<button class="btn ghost slider__nav" type="button" data-thread-slider-next aria-label="Weiter">›</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section alt" id="mitgliederbereich">
|
||
<div class="container">
|
||
<div class="section__intro">
|
||
<h2>Der Mitgliederbereich ist der Ort, an dem du aus dem Überblick eine echte Nutzung machst.</h2>
|
||
</div>
|
||
<div class="grid grid-3 mt-2">
|
||
<div class="surface border rounded p-4">
|
||
<h3 class="mt-0">Dein Profil</h3>
|
||
<ul class="list">
|
||
<li>Anzeigename, Sprachen, Interessen, kurzer Steckbrief.</li>
|
||
<li>Geschützte Kontaktdaten, du steuerst wer was sehen darf.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="surface border rounded p-4">
|
||
<h3 class="mt-0">Kinder (optional)</h3>
|
||
<ul class="list">
|
||
<li>Alter, Geburtsdatum oder kurze Hinweise hinterlegen, wenn es dir bei der Planung hilft.</li>
|
||
<li>Treffen besser einschätzen, wenn Aktivitäten zum Alter deiner Kinder passen sollen.</li>
|
||
<li>Nur für dich sichtbar.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="surface border rounded p-4">
|
||
<h3 class="mt-0">Deine Events</h3>
|
||
<ul class="list">
|
||
<li>Events finden, speichern und schneller wiederfinden.</li>
|
||
<li>Eigene Events veröffentlichen und jederzeit aktualisieren.</li>
|
||
<li>Mit wenigen Angaben aus einer Idee einen konkreten Termin oder ein Treffen machen.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
<script>
|
||
window.__events = <?= json_encode($eventsForJs, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>;
|
||
window.__threads = <?= json_encode($threadsForJs, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>;
|
||
</script>
|
||
<div class="modal" id="eventModal">
|
||
<div class="panel">
|
||
<div class="head flex between center-y">
|
||
<h3 id="eventModalTitle" style="margin:0;">Event</h3>
|
||
<button class="btn ghost" type="button" data-event-modal-close>✕</button>
|
||
</div>
|
||
<div id="eventModalBody" class="stack gap-8" style="margin-top:12px;"></div>
|
||
</div>
|
||
</div>
|