commit
This commit is contained in:
@@ -1,39 +1,190 @@
|
||||
<?php
|
||||
$app = app();
|
||||
|
||||
// Example: register assets from inside a landing template
|
||||
$app->assets()->addStyle('/assets/app.css', 'early');
|
||||
$app->assets()->addScript('/assets/app.js', 'footer', true);
|
||||
|
||||
$flash = $app->flash()->get();
|
||||
?>
|
||||
<div class="card">
|
||||
<div class="pill">env: <?= htmlspecialchars($app->config()->env, ENT_QUOTES) ?></div>
|
||||
<h1 style="margin-top: .75rem;"><?= htmlspecialchars(t('common.title'), ENT_QUOTES) ?></h1>
|
||||
|
||||
<p class="muted"><?= htmlspecialchars(t('common.intro'), ENT_QUOTES) ?></p>
|
||||
|
||||
<main>
|
||||
<?php if ($flash): ?>
|
||||
<div style="margin: 1rem 0; padding: .75rem 1rem; border: 1px solid #ddd; border-radius: 12px;">
|
||||
<div class="toast-bar">
|
||||
<strong><?= htmlspecialchars($flash['type'], ENT_QUOTES) ?>:</strong>
|
||||
<?= htmlspecialchars($flash['message'], ENT_QUOTES) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="grid" style="margin-top: 1rem;">
|
||||
<div>
|
||||
<h3 style="margin: 0 0 .5rem 0;">Runtime</h3>
|
||||
<div><strong>Current URL:</strong> <?= htmlspecialchars($app->request()->currentUrl(), ENT_QUOTES) ?></div>
|
||||
<div><strong>Client-ID:</strong> <code><?= htmlspecialchars($GLOBALS['client_id'] ?? '', ENT_QUOTES) ?></code></div>
|
||||
<section class="hero">
|
||||
<div class="container hero__grid">
|
||||
<div class="hero__text">
|
||||
<p class="eyebrow">Gemeinsam stark</p>
|
||||
<h1>Treffen für Väter – mit und ohne Kinder. Lokal, sicher, verschlüsselt.</h1>
|
||||
<p class="lede">Finde andere Väter in deiner Nähe, plane Events oder tritt bestehenden Treffen bei. Daten bleiben geschützt, du entscheidest die Sichtbarkeit.</p>
|
||||
<div class="hero__actions">
|
||||
<button class="btn">Kostenlos registrieren</button>
|
||||
<button class="btn ghost" id="scrollToEvents">Events in deiner Nähe</button>
|
||||
</div>
|
||||
<div class="hero__meta">
|
||||
<div class="chip inline">Verschlüsselte Profile</div>
|
||||
<div class="chip inline">Kinderinfos separat freigeben</div>
|
||||
<div class="chip inline">Events nur für Members erstellen</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>
|
||||
<div>
|
||||
<h3 style="margin: 0 0 .5rem 0;">Actions</h3>
|
||||
<form method="post" action="/action/flash">
|
||||
<button type="submit" style="padding:.6rem 1rem; border-radius: 12px; border: 1px solid #ddd; background: white; cursor:pointer;">
|
||||
Set flash message
|
||||
</button>
|
||||
</form>
|
||||
<p class="muted" style="margin-top:.5rem;">Flash uses SessionManager, no direct globals.</p>
|
||||
</section>
|
||||
|
||||
<section class="container section" id="events">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow">Termine entdecken</p>
|
||||
<h2>Upcoming Events in deiner Nähe</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>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section alt" id="profil">
|
||||
<div class="container split">
|
||||
<div>
|
||||
<p class="eyebrow">Profil & Datenschutz</p>
|
||||
<h2>Du entscheidest, was sichtbar ist.</h2>
|
||||
<p class="muted">Papa-Daten und Kinder-Daten sind getrennt. Sichtbarkeiten steuerst du per Schalter, sensible Felder werden verschlüsselt abgelegt.</p>
|
||||
<div class="grid grid-2 mt-2">
|
||||
<div class="surface border rounded p-4">
|
||||
<h3 class="mt-0">Papa-Sichtbarkeit</h3>
|
||||
<ul class="list">
|
||||
<li><strong>basic:</strong> Name, Region, Kinderanzahl</li>
|
||||
<li><strong>papa:</strong> + Beruf, Sprachen, About</li>
|
||||
<li><strong>papa_contact:</strong> + Telefon/Email</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="surface border rounded p-4">
|
||||
<h3 class="mt-0">Kinder separat</h3>
|
||||
<ul class="list">
|
||||
<li><strong>hidden:</strong> keine Details</li>
|
||||
<li><strong>age_only:</strong> nur Alter/Altersgruppe</li>
|
||||
<li><strong>details:</strong> Vorname, Geschlecht, Alter</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pill-row mt-2">
|
||||
<span class="pill">Verschlüsselung mit libsodium</span>
|
||||
<span class="pill">Nonce pro Feld</span>
|
||||
<span class="pill">Key aus ENV</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card privacy-card">
|
||||
<div class="badge">Sicherheit</div>
|
||||
<h3>Wie wird gespeichert?</h3>
|
||||
<ul class="list">
|
||||
<li>Symmetrische Verschlüsselung (XChaCha20-Poly1305)</li>
|
||||
<li>Key nur im Backend (ENV), nicht in der DB</li>
|
||||
<li>Felder: Kontakt, Beruf, Sprachen, About, Kinder</li>
|
||||
<li>Events unterscheiden Public vs. Members-Details</li>
|
||||
</ul>
|
||||
<p class="muted small">Bei Datenabzug bleiben Felder unlesbar. Zugriff nur mit Key.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container section" id="sicherheit">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow">Ablauf</p>
|
||||
<h2>So funktioniert’s</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-3">
|
||||
<div class="card step">
|
||||
<div class="step__icon">1</div>
|
||||
<h3>Profil anlegen</h3>
|
||||
<p class="muted small">Papa-Daten ausfüllen, Kinder optional. Sichtbarkeit pro Bereich einstellen.</p>
|
||||
</div>
|
||||
<div class="card step">
|
||||
<div class="step__icon">2</div>
|
||||
<h3>Events finden</h3>
|
||||
<p class="muted small">Suche nach Thema, Alter oder Region. Gäste sehen nur Basisinfos.</p>
|
||||
</div>
|
||||
<div class="card step">
|
||||
<div class="step__icon">3</div>
|
||||
<h3>Treffen planen</h3>
|
||||
<p class="muted small">Als Mitglied neue Events anlegen, andere einladen, Teilnahme verwalten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section alt" id="faq">
|
||||
<div class="container split">
|
||||
<div>
|
||||
<p class="eyebrow">Noch Fragen?</p>
|
||||
<h2>FAQ</h2>
|
||||
<div class="faq">
|
||||
<details open>
|
||||
<summary>Wer sieht meine Daten?</summary>
|
||||
<p>Du stellst die Sichtbarkeit: basic/papa/papa_contact für Papa-Daten, Kinder separat (hidden/age_only/details). Gäste sehen nur rudimentäre Event-Infos.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Wie funktionieren Events?</summary>
|
||||
<p>Eingeloggt kannst du Events erstellen. Andere Mitglieder melden sich an. Gäste sehen nur Teaser, Ort grob und Datum.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Welche Daten sind verschlüsselt?</summary>
|
||||
<p>Kontakt, Beruf, Sprachen, About, Kinder-Vornamen/Geschlecht/Notizen werden app-seitig verschlüsselt gespeichert.</p>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card cta-card">
|
||||
<div class="badge">Bereit?</div>
|
||||
<h3>Jetzt loslegen</h3>
|
||||
<p class="muted small">Registriere dich kostenlos, lege dein Profil an und vernetze dich mit anderen Vätern.</p>
|
||||
<div class="stack gap-12">
|
||||
<button class="btn block">Registrieren</button>
|
||||
<button class="btn ghost block">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -1,22 +1,26 @@
|
||||
<?php
|
||||
/** @var \App\App $app */
|
||||
$app = app();
|
||||
|
||||
// globale Assets (Brand-Styles & JS)
|
||||
$app->assets()->addStyle('/assets/css/styles.css', 'early');
|
||||
$app->assets()->addStyle('/assets/css/app.css', 'normal');
|
||||
$app->assets()->addScript('/assets/js/app.js', 'footer', true, false);
|
||||
|
||||
$childGender = $_SESSION['child_gender_summary'] ?? ''; // 'male' | 'female' | 'mixed' | ''
|
||||
if (!in_array($childGender, ['male', 'female', 'mixed'], true)) {
|
||||
$childGender = '';
|
||||
}
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title><?= htmlspecialchars(t('common.title'), ENT_QUOTES) ?></title>
|
||||
<meta name="description" content="Papa-Kind-Treff: Väter vernetzen sich für Treffen mit und ohne Kinder, Events in der Nähe entdecken und sicher Kontakte knüpfen.">
|
||||
<?php asset_styles(); ?>
|
||||
<?php asset_scripts('header'); ?>
|
||||
<style>
|
||||
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 2rem; }
|
||||
.card { border: 1px solid #ddd; border-radius: 12px; padding: 1.25rem; max-width: 820px; }
|
||||
.muted { color: #555; }
|
||||
.pill { display: inline-block; padding: .25rem .5rem; border-radius: 999px; border: 1px solid #ddd; font-size: .9rem; }
|
||||
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||||
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body data-auth="<?= isset($_SESSION['user_id']) ? '1' : '0' ?>" data-child-gender="<?= htmlspecialchars($childGender, ENT_QUOTES) ?>">
|
||||
<?php tpl('nav', 'structure'); ?>
|
||||
|
||||
44
partials/structure/nav.php
Normal file
44
partials/structure/nav.php
Normal file
@@ -0,0 +1,44 @@
|
||||
<?php
|
||||
$app = app();
|
||||
$isLoggedIn = isset($_SESSION['user_id']);
|
||||
?>
|
||||
<header class="site-header">
|
||||
<div class="container nav-row">
|
||||
<div class="brand">
|
||||
<img data-logo-img src="/assets/bilder/logo_male.png" alt="Papa-Kind-Treff Logo" class="brand__logo">
|
||||
<div class="brand__text">
|
||||
<span class="brand__name">Papa-Kind-Treff</span>
|
||||
<span class="brand__tag">Väter vernetzen</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="nav-links" aria-label="Hauptmenü">
|
||||
<a href="#events">Events</a>
|
||||
<a href="#profil">Profil</a>
|
||||
<a href="#sicherheit">Sicherheit</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
</nav>
|
||||
<div class="nav-actions">
|
||||
<?php if ($isLoggedIn): ?>
|
||||
<button class="btn ghost" type="button">Dashboard</button>
|
||||
<button class="btn" type="button">Neues Event</button>
|
||||
<?php else: ?>
|
||||
<button class="btn ghost" type="button">Anmelden</button>
|
||||
<button class="btn" type="button">Kostenlos registrieren</button>
|
||||
<?php endif; ?>
|
||||
<button class="menu-toggle" aria-label="Menü öffnen">☰</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" id="mobileMenu">
|
||||
<a href="#events">Events</a>
|
||||
<a href="#profil">Profil</a>
|
||||
<a href="#sicherheit">Sicherheit</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
<?php if ($isLoggedIn): ?>
|
||||
<button class="btn ghost" type="button">Dashboard</button>
|
||||
<button class="btn block" type="button">Neues Event</button>
|
||||
<?php else: ?>
|
||||
<button class="btn ghost" type="button">Anmelden</button>
|
||||
<button class="btn block" type="button">Kostenlos registrieren</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</header>
|
||||
Reference in New Issue
Block a user