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

adasd
All checks were successful
Deploy / deploy (push) Successful in 46s
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-07-17 00:19:05 +02:00
parent dca3ce93e6
commit 429258156a
4 changed files with 117 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,19 +45,29 @@ try {
<section class="hero"> <section class="hero">
<div class="container hero__grid"> <div class="container hero__grid">
<div class="hero__text"> <div class="hero__text">
<p class="eyebrow">Gemeinsam stark</p> <h1>Finde passende Treffen, knüpfe Kontakte und organisiere gemeinsame Zeit mit anderen Vätern.</h1>
<h1>Treffen für Väter – mit und ohne Kinder. Lokal organisiert.</h1> <p class="lede">Papa-Kind-Treff zeigt dir auf einen Blick, welche Termine es in deiner Umgebung gibt, welche Themen gerade gefragt sind und wie du selbst unkompliziert Teil einer verlässlichen Community wirst.</p>
<p class="lede">Finde andere Väter in deiner Nähe, plane Events oder tritt bestehenden Treffen bei. Alles an einem Ort – unkompliziert und community-nah.</p> <p class="hero__copy">Wenn du mehr als nur stöbern möchtest, begleitet dich der Mitgliederbereich durch alles Weitere: Profil anlegen, Kinder optional ergänzen, Termine merken, eigene Treffen einstellen und deine Angaben jederzeit wieder anpassen.</p>
<div class="hero__actions"> <div class="hero__actions">
<button class="btn">Kostenlos registrieren</button> <a class="btn" href="/register">Kostenlos registrieren</a>
<button class="btn ghost" id="scrollToEvents">Events in deiner Nähe</button> <button class="btn ghost" id="scrollToEvents">Events in deiner Nähe</button>
</div> </div>
<div class="hero__meta"> <div class="hero__meta">
<div class="chip inline">Events nur für Mitglieder</div> <div class="chip inline">Lokale Treffen entdecken</div>
<div class="chip inline">Kinder optional mitbringen</div> <div class="chip inline">Kinder optional angeben</div>
<div class="chip inline">Echt lokale Gruppen</div> <div class="chip inline">Eigene Termine einstellen</div>
</div> </div>
</div> </div>
<aside class="hero__card">
<h2>Im Mitgliederbereich steuerst du alles an einem Ort.</h2>
<p class="muted">Dort pflegst du dein Profil, hinterlegst auf Wunsch Kinderinfos, findest passende Veranstaltungen schneller wieder und stellst eigene Termine mit wenigen Schritten online.</p>
<ul class="list">
<li>Profil mit Region, Interessen und kurzen Infos zu dir ausfüllen</li>
<li>Kinder optional ergänzen, damit Treffen besser zu deinem Alltag passen</li>
<li>Neue Termine anlegen, aktualisieren und mit anderen Vätern teilen</li>
<li>Angaben jederzeit anpassen, ergänzen oder wieder entfernen</li>
</ul>
</aside>
</div> </div>
</section> </section>
@@ -68,27 +78,12 @@ try {
.slider__track .event-card-small {min-width:240px; max-width:260px;} .slider__track .event-card-small {min-width:240px; max-width:260px;}
.slider__nav {min-width:44px;} .slider__nav {min-width:44px;}
</style> </style>
<section class="container section" id="events">
<div class="section__head">
<div>
<p class="eyebrow">Termine entdecken</p>
<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="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"> <section class="section alt" id="quicksearch">
<div class="container"> <div class="container">
<p class="eyebrow">Schnellsuche</p> <div class="section__intro">
<h3>Passende Events finden</h3> <h2>Starte direkt mit der Suche nach passenden Treffen.</h2>
<p class="muted">Suche nach Themen, Orten und Umkreis, um schnell herauszufinden, welche Termine in deine Nähe und zu deinem Alltag passen. So bekommst du sofort ein Gefühl dafür, was auf der Plattform möglich ist.</p>
</div>
<form id="quickSearchForm" class="grid grid-3" style="gap: 12px; align-items:flex-end;" action="/search" method="get"> <form id="quickSearchForm" class="grid grid-3" style="gap: 12px; align-items:flex-end;" action="/search" method="get">
<div class="stack gap-6"> <div class="stack gap-6">
<label class="label" for="qsQuery">Suchbegriff</label> <label class="label" for="qsQuery">Suchbegriff</label>
@@ -115,107 +110,108 @@ try {
<button class="btn block" type="submit" style="width:100%;">Suchen</button> <button class="btn block" type="submit" style="width:100%;">Suchen</button>
</div> </div>
</form> </form>
<p class="muted small" style="margin-top:8px;">Optional Standort ermitteln oder Ort eingeben; Umkreis bestimmt die Treffer in der Suche.</p> <p class="muted small" style="margin-top:8px;">Du kannst deinen Standort verwenden oder einen Ort eingeben und den Umkreis selbst festlegen.</p>
</div> </div>
</section> </section>
<section class="section alt" id="profil"> <section class="container section" id="events">
<div class="section__intro">
<h2>Die neuesten Termine liegen direkt darunter für dich bereit.</h2>
<p class="muted">Hier siehst du die aktuellsten veröffentlichten Treffen kompakt zum Durchscrollen. So erkennst du schnell, wie vielfältig die Plattform genutzt werden kann und welche Ideen andere Väter bereits eingestellt haben.</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="mitgliederbereich">
<div class="container split"> <div class="container split">
<div> <div>
<p class="eyebrow">Mitgliederbereich</p> <h2>Der Mitgliederbereich ist der Ort, an dem du aus dem Überblick eine echte Nutzung machst.</h2>
<h2>Alles für Väter – Profile, Kinderinfos, Events.</h2> <p class="muted">Dort trägst du nicht einfach nur Daten ein, sondern richtest dir die Plattform so ein, dass sie zu dir passt. Du entscheidest selbst, welche Infos du hinterlegst, welche Termine du im Blick behalten willst und wie ausführlich du dein Profil aufbaust.</p>
<p class="muted">Lege dein Profil an, erfasse deine Kids (optional) und finde passende Treffen. Später kannst du jedes Detail im Mitgliederbereich steuern.</p> <p class="muted">Gerade dieser Bereich soll zeigen, dass Papa-Kind-Treff mehr ist als eine reine Terminliste: Du kannst dich vorstellen, passende Treffen leichter finden und eigene Ideen für gemeinsame Aktivitäten sichtbar machen.</p>
<div class="grid grid-2 mt-2"> <div class="grid grid-2 mt-2">
<div class="surface border rounded p-4"> <div class="surface border rounded p-4">
<h3 class="mt-0">Profil</h3> <h3 class="mt-0">Dein Profil</h3>
<ul class="list"> <ul class="list">
<li>Anzeigename, Region, Beruf, Sprachen</li> <li>Anzeigename, Region, Sprachen, Interessen und ein kurzer Steckbrief</li>
<li>Kontaktinfos im Mitgliederbereich hinterlegen</li> <li>Kontaktinfos dort hinterlegen, wo du sie für dich sinnvoll findest</li>
<li>Kurzer Steckbrief für andere Väter</li> <li>Dein Profil nach und nach ausbauen, statt alles sofort vollständig anlegen zu müssen</li>
</ul> </ul>
</div> </div>
<div class="surface border rounded p-4"> <div class="surface border rounded p-4">
<h3 class="mt-0">Kinder (optional)</h3> <h3 class="mt-0">Kinder (optional)</h3>
<ul class="list"> <ul class="list">
<li>Vorname, Geschlecht, Alter oder Geburtsdatum</li> <li>Alter, Geburtsdatum oder kurze Hinweise hinterlegen, wenn es dir bei der Planung hilft</li>
<li>Hilft bei passenden Event-Empfehlungen</li> <li>Treffen besser einschätzen, wenn Aktivitäten zum Alter deiner Kinder passen sollen</li>
<li>Du entscheidest später im Profil, was gezeigt wird</li> <li>Infos jederzeit ergänzen, ändern oder wieder entfernen, wenn sich etwas verändert</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="pill-row mt-2"> <div class="grid grid-2 mt-2">
<span class="pill">Profil und Kids getrennt verwalten</span> <div class="surface border rounded p-4">
<span class="pill">Flexibel änderbar</span> <h3 class="mt-0">Deine Termine</h3>
<span class="pill">Mitgliederbereich-first</span> <ul class="list">
<li>Veranstaltungen finden, speichern und schneller wieder aufrufen</li>
<li>Eigene Treffen veröffentlichen und bei Bedarf später aktualisieren</li>
<li>Mit wenigen Angaben aus einer Idee einen konkreten Termin machen</li>
</ul>
</div>
<div class="surface border rounded p-4">
<h3 class="mt-0">Alles bleibt anpassbar</h3>
<ul class="list">
<li>Angaben schrittweise pflegen, statt dich zu Beginn festzulegen</li>
<li>Profil, Kinderinfos und Termine unabhängig voneinander verwalten</li>
<li>Die Plattform so nutzen, wie sie zu deinem Familienalltag passt</li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="card privacy-card"> <div class="card privacy-card">
<div class="badge">Community</div> <h3>So fühlt sich der Einstieg an</h3>
<h3>Einfach starten</h3> <p class="muted">Du kannst dich ohne Umwege orientieren und danach genau die nächsten Schritte gehen, die für dich sinnvoll sind. Dadurch bleibt die Plattform verständlich, auch wenn du erst einmal nur schauen möchtest, was dich erwartet.</p>
<ul class="list"> <ul class="list">
<li>Registriere dich kostenfrei</li> <li>Registrieren und in Ruhe dein Profil aufbauen</li>
<li>Profil ausfüllen, Kinder optional hinzufügen</li> <li>Kinder optional ergänzen, wenn du deine Suche präziser machen willst</li>
<li>Events finden oder eigene Termine einstellen</li> <li>Termine entdecken, merken oder selbst neue Treffen einstellen</li>
<li>Alles später wieder öffnen und weiterpflegen, ohne neu anfangen zu müssen</li>
</ul> </ul>
<p class="muted small">Alle Einstellungen nimmst du im Mitgliederbereich vor.</p> <p class="muted small">Der Mitgliederbereich bleibt damit das Zentrum für alles, was über das reine Anschauen hinausgeht.</p>
</div> </div>
</div> </div>
</section> </section>
<section class="container section" id="sicherheit"> <section class="container section">
<div class="section__head"> <div class="info-band">
<div> <div class="info-band__main">
<p class="eyebrow">Ablauf</p> <h2>Was du auf der Startseite erkennst und was danach weitergeht</h2>
<h2>So funktioniert’s</h2> <p class="muted">Die Startseite gibt dir den Überblick: suchen, stöbern, aktuelle Termine entdecken und verstehen, wie Papa-Kind-Treff aufgebaut ist. Sobald du tiefer einsteigen willst, übernimmt der Mitgliederbereich den praktischen Teil und macht aus Interesse eine echte Nutzung.</p>
</div> </div>
</div> <div class="capability-grid">
<div class="grid grid-3"> <div class="capability-card">
<div class="card step"> <h3>Hier bekommst du Orientierung</h3>
<div class="step__icon">1</div> <ul class="list">
<h3>Profil anlegen</h3> <li>Was aktuell stattfindet</li>
<p class="muted small">Papa-Daten ausfüllen, Kinder optional. Sichtbarkeit pro Bereich einstellen.</p> <li>Welche Themen und Orte vertreten sind</li>
</div> <li>Wie die Plattform grundsätzlich funktioniert</li>
<div class="card step"> </ul>
<div class="step__icon">2</div> </div>
<h3>Events finden</h3> <div class="capability-card">
<p class="muted small">Suche nach Thema, Alter oder Region. Gäste sehen nur Basisinfos.</p> <h3>Dort setzt du es für dich um</h3>
</div> <ul class="list">
<div class="card step"> <li>Profil pflegen und ergänzen</li>
<div class="step__icon">3</div> <li>Kinderinfos optional hinterlegen</li>
<h3>Treffen planen</h3> <li>Eigene Treffen veröffentlichen und verwalten</li>
<p class="muted small">Als Mitglied neue Events anlegen, andere einladen, Teilnahme verwalten.</p> </ul>
</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>Wie starte ich?</summary>
<p>Registrieren, Profil ausfüllen, optional Kinder anlegen, dann Events entdecken oder eigene Treffen einstellen.</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>Kann ich Kinderinfos später ändern?</summary>
<p>Ja, du kannst jederzeit Daten ergänzen oder entfernen und eigene Angaben anpassen.</p>
</details>
</div> </div>
</div> </div>
<div class="card cta-card"> <div class="hero__actions">
<div class="badge">Bereit?</div> <a class="btn" href="/register">Jetzt starten</a>
<h3>Jetzt loslegen</h3> <a class="btn ghost" href="/search">Zur Suche</a>
<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>
</div> </div>
</section> </section>

14
partials/structure/nav.php
View File

@@ -13,12 +13,11 @@ $isDebug = defined('APP_DEBUG') && APP_DEBUG === true;
</div> </div>
</div> </div>
<nav class="nav-links" aria-label="Hauptmenü"> <nav class="nav-links" aria-label="Hauptmenü">
<a href="/">Start</a>
<a href="/#events">Events</a>
<a href="/search">Suche</a> <a href="/search">Suche</a>
<a href="/#events">Termine</a>
<a href="/community">Community</a> <a href="/community">Community</a>
<a href="/#profil">Profil</a> <a href="/#mitgliederbereich">Mitgliederbereich</a>
<a href="/#faq">FAQ</a> <a href="/">Start</a>
</nav> </nav>
<div class="nav-actions"> <div class="nav-actions">
<?php if ($isLoggedIn): ?> <?php if ($isLoggedIn): ?>
@@ -35,12 +34,11 @@ $isDebug = defined('APP_DEBUG') && APP_DEBUG === true;
</div> </div>
</div> </div>
<div class="mobile-menu" id="mobileMenu"> <div class="mobile-menu" id="mobileMenu">
<a href="/">Start</a>
<a href="/#events">Events</a>
<a href="/search">Suche</a> <a href="/search">Suche</a>
<a href="/#events">Termine</a>
<a href="/community">Community</a> <a href="/community">Community</a>
<a href="/#profil">Profil</a> <a href="/#mitgliederbereich">Mitgliederbereich</a>
<a href="/#faq">FAQ</a> <a href="/">Start</a>
<?php if ($isLoggedIn): ?> <?php if ($isLoggedIn): ?>
<a class="btn ghost" href="/dashboard">Dashboard</a> <a class="btn ghost" href="/dashboard">Dashboard</a>
<a class="btn block" href="/logout">Logout</a> <a class="btn block" href="/logout">Logout</a>

12
public/assets/css/app.css
View File

@@ -68,17 +68,18 @@ body {
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: center; } .hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: center; }
.hero__text h1 { margin: 12px 0 10px 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; } .hero__text h1 { margin: 12px 0 10px 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; }
.hero__text .lede { color: var(--color-muted); font-size: 17px; } .hero__text .lede { color: var(--color-muted); font-size: 17px; }
.hero__copy { margin: 14px 0 0; max-width: 64ch; color: var(--color-text); }
.hero__actions { display:flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; } .hero__actions { display:flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.hero__meta { display:flex; gap:8px; flex-wrap: wrap; } .hero__meta { display:flex; gap:8px; flex-wrap: wrap; }
.hero__card { padding: 20px; background: #fff; border:1px solid var(--color-border); box-shadow: var(--shadow-card); } .hero__card { padding: 20px; background: #fff; border:1px solid var(--color-border); box-shadow: var(--shadow-card); }
.eyebrow { text-transform: uppercase; letter-spacing: 1px; font-size: 12px; color: var(--color-muted); margin: 0; }
.lede { margin: 0; } .lede { margin: 0; }
.muted.small { font-size: 13px; } .muted.small { font-size: 13px; }
.section { padding: 64px 0; } .section { padding: 64px 0; }
.section.alt { background: #ffffff; border-block: 1px solid var(--color-border); } .section.alt { background: #ffffff; border-block: 1px solid var(--color-border); }
.section__head { display:flex; justify-content:space-between; align-items:flex-start; gap: 16px; flex-wrap: wrap; } .section__head { display:flex; justify-content:space-between; align-items:flex-start; gap: 16px; flex-wrap: wrap; }
.section__intro { max-width: 72ch; margin-bottom: 22px; }
.section__intro h2 { margin: 0 0 10px; }
.split { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: start; } .split { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: start; }
@media (max-width: 960px){ .split, .hero__grid { grid-template-columns: 1fr; } } @media (max-width: 960px){ .split, .hero__grid { grid-template-columns: 1fr; } }
@@ -126,6 +127,12 @@ body {
.input:focus, .select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(52,72,90,0.14); } .input:focus, .select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(52,72,90,0.14); }
.cta-card { background: linear-gradient(135deg, #fdf4e0, #ffffff); } .cta-card { background: linear-gradient(135deg, #fdf4e0, #ffffff); }
.info-band { display: grid; gap: 22px; padding: 28px; background: linear-gradient(135deg, #fffaf1, #ffffff); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.info-band__main { max-width: 72ch; }
.info-band__main h2 { margin: 0 0 10px; }
.capability-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.capability-card { padding: 18px; background: #fff; border:1px solid var(--color-border); border-radius: var(--radius-md); }
.capability-card h3 { margin-top: 0; }
.flex { display:flex; } .flex { display:flex; }
.between { justify-content: space-between; } .between { justify-content: space-between; }
@@ -137,6 +144,7 @@ body {
.nav-row { padding: 12px 0; } .nav-row { padding: 12px 0; }
.hero { padding: 40px 0; } .hero { padding: 40px 0; }
.section { padding: 48px 0; } .section { padding: 48px 0; }
.capability-grid { grid-template-columns: 1fr; }
} }
/* Auth & Dashboard */ /* Auth & Dashboard */

7
public/index.php
View File

@@ -12,9 +12,14 @@ $isRetoolPath = ($uriPath === 'retool' || str_starts_with($uriPath, 'retool/'));
if (defined('APP_ENV') && APP_ENV === 'staging' && !$isRetoolPath) { if (defined('APP_ENV') && APP_ENV === 'staging' && !$isRetoolPath) {
$authUser = getenv('STAGING_AUTH_USER') ?: 'staging'; $authUser = getenv('STAGING_AUTH_USER') ?: 'staging';
$authPass = getenv('STAGING_AUTH_PASS') ?: 'staging123'; $authPass = getenv('STAGING_AUTH_PASS') ?: 'staging123';
$remoteUser = $_SERVER['REMOTE_USER'] ?? null;
$user = $_SERVER['PHP_AUTH_USER'] ?? null; $user = $_SERVER['PHP_AUTH_USER'] ?? null;
$pass = $_SERVER['PHP_AUTH_PW'] ?? null; $pass = $_SERVER['PHP_AUTH_PW'] ?? null;
if ($user !== $authUser || $pass !== $authPass) {
// If Apache already authenticated the request via .htaccess, trust that layer.
$hasUpstreamBasicAuth = is_string($remoteUser) && $remoteUser !== '';
if (!$hasUpstreamBasicAuth && ($user !== $authUser || $pass !== $authPass)) {
header('WWW-Authenticate: Basic realm="Staging"'); header('WWW-Authenticate: Basic realm="Staging"');
header('HTTP/1.0 401 Unauthorized'); header('HTTP/1.0 401 Unauthorized');
echo 'Unauthorized'; echo 'Unauthorized';