update
This commit is contained in:
114
partials/landing/account/dashboard.php
Normal file
114
partials/landing/account/dashboard.php
Normal file
@@ -0,0 +1,114 @@
|
||||
<main class="section">
|
||||
<div class="container" style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;">
|
||||
<div>
|
||||
<p class="eyebrow">Mitgliederbereich</p>
|
||||
<h1>Hallo, <span style="color: var(--color-primary);">Papa</span>!</h1>
|
||||
<p class="muted">Verwalte dein Profil, Kinder, Events und Teilnahmen.</p>
|
||||
</div>
|
||||
<div class="pill-row">
|
||||
<span class="pill">Profil</span>
|
||||
<span class="pill">Kinder</span>
|
||||
<span class="pill">Events</span>
|
||||
<span class="pill">Teilnahmen</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container dash-section">
|
||||
<div class="dash-grid">
|
||||
<div class="card dash-card">
|
||||
<div class="badge">Profil</div>
|
||||
<h3>Deine Angaben</h3>
|
||||
<ul class="dash-list">
|
||||
<li>Anzeigename: Papa Alex</li>
|
||||
<li>Ort: Berlin, 10437</li>
|
||||
<li>Beruf: Entwickler</li>
|
||||
<li>Sprachen: Deutsch, Englisch</li>
|
||||
</ul>
|
||||
<div class="flex gap-12" style="margin-top:12px;">
|
||||
<button class="btn ghost">Bearbeiten</button>
|
||||
<button class="btn">Sichtbarkeit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card dash-card">
|
||||
<div class="badge">Kinder</div>
|
||||
<h3>Deine Kids</h3>
|
||||
<ul class="dash-list">
|
||||
<li>Emma, 4 Jahre (weiblich)</li>
|
||||
<li>Max, 7 Jahre (männlich)</li>
|
||||
</ul>
|
||||
<div class="flex gap-12" style="margin-top:12px;">
|
||||
<button class="btn ghost">Kind hinzufügen</button>
|
||||
<button class="btn">Kinder-Einstellungen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card dash-card">
|
||||
<div class="badge">Teilnahmen</div>
|
||||
<h3>Nächste Termine</h3>
|
||||
<ul class="dash-list">
|
||||
<li>Spielplatzrunde – 10.08., Prenzlauer Berg</li>
|
||||
<li>Erste Hilfe Kids – 20.08., Köln</li>
|
||||
</ul>
|
||||
<div class="flex gap-12" style="margin-top:12px;">
|
||||
<button class="btn ghost">Übersicht öffnen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container dash-section">
|
||||
<div class="card dash-card">
|
||||
<div class="badge">Eigenes Event</div>
|
||||
<h3>Neuen Termin erstellen</h3>
|
||||
<form class="stack gap-12" style="margin-top: 10px;">
|
||||
<div class="form-grid">
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="evTitle">Titel</label>
|
||||
<input id="evTitle" class="input" placeholder="z. B. Väter-Kaffee im Park">
|
||||
</div>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="evTopic">Thema</label>
|
||||
<select id="evTopic" class="select">
|
||||
<option>Outdoor</option>
|
||||
<option>Kaffee</option>
|
||||
<option>Sport</option>
|
||||
<option>Workshop</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="evDate">Datum & Uhrzeit</label>
|
||||
<input id="evDate" class="input" type="datetime-local">
|
||||
</div>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="evLocation">Ort/PLZ</label>
|
||||
<input id="evLocation" class="input" placeholder="10437 Berlin">
|
||||
</div>
|
||||
</div>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="evDesc">Beschreibung</label>
|
||||
<textarea id="evDesc" class="textarea" rows="3" placeholder="Was soll passieren, was mitbringen?"></textarea>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="evKids">Kinder</label>
|
||||
<select id="evKids" class="select">
|
||||
<option value="1">Mit Kindern</option>
|
||||
<option value="0">Ohne Kinder</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="evVisibility">Sichtbarkeit</label>
|
||||
<select id="evVisibility" class="select">
|
||||
<option value="public">Öffentlich</option>
|
||||
<option value="members">Nur Mitglieder</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn" type="submit">Event anlegen</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
37
partials/landing/account/login.php
Normal file
37
partials/landing/account/login.php
Normal file
@@ -0,0 +1,37 @@
|
||||
<main class="auth-wrap">
|
||||
<div class="container auth-grid">
|
||||
<section class="card auth-card">
|
||||
<div class="badge">Login</div>
|
||||
<h1 class="mt-1" style="margin: 12px 0;">Willkommen zurück</h1>
|
||||
<p class="muted">Melde dich an, um Events zu erstellen, teilzunehmen und dein Profil zu verwalten.</p>
|
||||
<form class="stack gap-12" style="margin-top: 14px;">
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="loginEmail">E-Mail</label>
|
||||
<input id="loginEmail" name="email" class="input" type="email" required placeholder="du@example.com">
|
||||
</div>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="loginPassword">Passwort</label>
|
||||
<input id="loginPassword" name="password" class="input" type="password" required placeholder="********">
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap; gap: 8px;">
|
||||
<label style="display:flex; gap:8px; align-items:center; font-size:14px; color: var(--color-muted);">
|
||||
<input type="checkbox" style="width:16px; height:16px;"> Angemeldet bleiben
|
||||
</label>
|
||||
<a class="text-muted" href="/reset">Passwort vergessen?</a>
|
||||
</div>
|
||||
<button class="btn block" type="submit">Anmelden</button>
|
||||
</form>
|
||||
<p class="muted small" style="margin-top: 12px;">Noch kein Konto? <a href="/register">Jetzt registrieren</a></p>
|
||||
</section>
|
||||
|
||||
<aside class="auth-aside">
|
||||
<img class="auth-logo" src="/assets/bilder/logo_male.png" alt="Papa-Kind-Treff Logo">
|
||||
<h3>Neu hier?</h3>
|
||||
<p class="auth-meta">Registriere dich kostenlos, lege dein Profil an und finde Treffen in deiner Nähe. Kinderinfos kannst du später hinzufügen.</p>
|
||||
<div class="stack gap-12" style="margin-top: 12px;">
|
||||
<a class="btn block" href="/register">Kostenlos registrieren</a>
|
||||
<a class="btn ghost block" href="/">Zur Startseite</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
71
partials/landing/account/register.php
Normal file
71
partials/landing/account/register.php
Normal file
@@ -0,0 +1,71 @@
|
||||
<main class="auth-wrap">
|
||||
<div class="container auth-grid">
|
||||
<section class="card auth-card">
|
||||
<div class="badge">Registrierung</div>
|
||||
<h1 class="mt-1" style="margin: 12px 0;">Jetzt Account anlegen</h1>
|
||||
<p class="muted">Profil anlegen, Kinder optional hinzufügen und Events planen.</p>
|
||||
<form class="stack gap-12" style="margin-top: 14px;">
|
||||
<div class="form-grid">
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="regName">Anzeigename</label>
|
||||
<input id="regName" name="display_name" class="input" required placeholder="z. B. Papa Alex">
|
||||
</div>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="regEmail">E-Mail</label>
|
||||
<input id="regEmail" name="email" class="input" type="email" required placeholder="du@example.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="regPassword">Passwort</label>
|
||||
<input id="regPassword" name="password" class="input" type="password" required placeholder="********">
|
||||
</div>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="regPassword2">Passwort bestätigen</label>
|
||||
<input id="regPassword2" name="password_confirm" class="input" type="password" required placeholder="********">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="regZip">PLZ</label>
|
||||
<input id="regZip" name="zip" class="input" maxlength="5" placeholder="10437">
|
||||
</div>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="regCity">Ort</label>
|
||||
<input id="regCity" name="city" class="input" placeholder="Berlin">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="regJob">Beruf</label>
|
||||
<input id="regJob" name="profession" class="input" placeholder="z. B. Entwickler">
|
||||
</div>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="regLangs">Sprachen</label>
|
||||
<input id="regLangs" name="languages" class="input" placeholder="Deutsch, Englisch">
|
||||
</div>
|
||||
</div>
|
||||
<div class="stack gap-6">
|
||||
<label class="label" for="regAbout">Kurzvorstellung</label>
|
||||
<textarea id="regAbout" name="about" class="textarea" rows="3" placeholder="Ein paar Sätze zu dir."></textarea>
|
||||
</div>
|
||||
<button class="btn block" type="submit">Account erstellen</button>
|
||||
</form>
|
||||
<p class="muted small" style="margin-top: 12px;">Schon registriert? <a href="/login">Zum Login</a></p>
|
||||
</section>
|
||||
|
||||
<aside class="auth-aside">
|
||||
<img class="auth-logo" src="/assets/bilder/logo_female.png" alt="Papa-Kind-Treff Logo">
|
||||
<h3>Tipps für den Start</h3>
|
||||
<ul class="list" style="margin-top: 8px;">
|
||||
<li>Anzeigename wählen, mit dem dich andere Väter ansprechen können.</li>
|
||||
<li>Ort/PLZ hilft, passende Events in deiner Nähe zu sehen.</li>
|
||||
<li>Kinderinfos kannst du später hinzufügen oder ändern.</li>
|
||||
</ul>
|
||||
<div class="stack gap-12" style="margin-top: 12px;">
|
||||
<a class="btn ghost block" href="/login">Ich habe schon ein Konto</a>
|
||||
<a class="btn block" href="/">Zur Startseite</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
@@ -12,33 +12,33 @@ $isLoggedIn = isset($_SESSION['user_id']);
|
||||
</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>
|
||||
<a href="/">Start</a>
|
||||
<a href="/#events">Events</a>
|
||||
<a href="/#profil">Profil</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>
|
||||
<a class="btn ghost" href="/dashboard">Dashboard</a>
|
||||
<a class="btn" href="/dashboard#events">Neues Event</a>
|
||||
<?php else: ?>
|
||||
<button class="btn ghost" type="button">Anmelden</button>
|
||||
<button class="btn" type="button">Kostenlos registrieren</button>
|
||||
<a class="btn ghost" href="/login">Anmelden</a>
|
||||
<a class="btn" href="/register">Kostenlos registrieren</a>
|
||||
<?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>
|
||||
<a href="/">Start</a>
|
||||
<a href="/#events">Events</a>
|
||||
<a href="/#profil">Profil</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>
|
||||
<a class="btn ghost" href="/dashboard">Dashboard</a>
|
||||
<a class="btn block" href="/dashboard#events">Neues Event</a>
|
||||
<?php else: ?>
|
||||
<button class="btn ghost" type="button">Anmelden</button>
|
||||
<button class="btn block" type="button">Kostenlos registrieren</button>
|
||||
<a class="btn ghost" href="/login">Anmelden</a>
|
||||
<a class="btn block" href="/register">Kostenlos registrieren</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -133,3 +133,22 @@ body {
|
||||
.hero { padding: 40px 0; }
|
||||
.section { padding: 48px 0; }
|
||||
}
|
||||
|
||||
/* Auth & Dashboard */
|
||||
.auth-wrap { padding: 48px 0; }
|
||||
.auth-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
|
||||
.auth-card { padding: 22px; }
|
||||
.auth-aside { background: linear-gradient(135deg, #fdf4e0, #ffffff); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-card); }
|
||||
.auth-logo { width: 140px; margin-bottom: 12px; }
|
||||
.auth-meta { color: var(--color-muted); font-size: 14px; }
|
||||
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
|
||||
.form-grid.single { grid-template-columns: 1fr; }
|
||||
@media (max-width: 900px){ .auth-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } }
|
||||
|
||||
.dash-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
|
||||
.dash-grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
|
||||
.dash-card { padding: 18px; }
|
||||
.dash-list { margin: 0; padding-left: 18px; color: var(--color-muted); display: grid; gap: 6px; }
|
||||
.dash-section { margin-top: 16px; }
|
||||
@media (max-width: 1020px){ .dash-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
|
||||
@media (max-width: 760px){ .dash-grid, .dash-grid-2 { grid-template-columns: 1fr; } }
|
||||
|
||||
@@ -16,10 +16,15 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
|
||||
// Header shrink on scroll
|
||||
let ticking = false;
|
||||
const onScroll = () => {
|
||||
if (!header) return;
|
||||
const shouldShrink = window.scrollY > 40;
|
||||
if (ticking || !header) return;
|
||||
ticking = true;
|
||||
window.requestAnimationFrame(() => {
|
||||
const shouldShrink = window.scrollY > 120;
|
||||
header.classList.toggle('is-scrolled', shouldShrink);
|
||||
ticking = false;
|
||||
});
|
||||
};
|
||||
onScroll();
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
4
public/page/dashboard.php
Normal file
4
public/page/dashboard.php
Normal file
@@ -0,0 +1,4 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
tpl('dashboard', 'landing', 'account');
|
||||
4
public/page/login.php
Normal file
4
public/page/login.php
Normal file
@@ -0,0 +1,4 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
tpl('login', 'landing', 'account');
|
||||
4
public/page/register.php
Normal file
4
public/page/register.php
Normal file
@@ -0,0 +1,4 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
tpl('register', 'landing', 'account');
|
||||
Reference in New Issue
Block a user