198 lines
7.8 KiB
PHP
Executable File
198 lines
7.8 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 Termine 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 Treffen organisieren und dich unkompliziert zu bestehenden 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>Suche nach Treffen in deiner Nähe</h2>
|
||
</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 Treffen</h2>
|
||
</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 Termine</h3>
|
||
<ul class="list">
|
||
<li>Veranstaltungen finden, speichern und schneller wiederfinden.</li>
|
||
<li>Eigene Treffen veröffentlichen und jederzeit aktualisieren.</li>
|
||
<li>Mit wenigen Angaben aus einer Idee einen konkreten Termin 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>
|