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

commit

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2025-12-25 01:50:07 +01:00
parent 5d7dcfd950
commit 3b4b5cad3e
11 changed files with 743 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1 +1,130 @@
/* minimal css placeholder */
body {
margin: 0;
font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
background: var(--color-bg);
color: var(--color-text);
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid var(--color-border);
backdrop-filter: blur(8px);
}
.nav-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
}
.brand__logo { width: 46px; height: 46px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 700; letter-spacing: -0.3px; }
.brand__tag { color: var(--color-muted); font-size: 13px; }
.nav-links {
display: flex;
align-items: center;
gap: 18px;
font-weight: 600;
}
.nav-links a { color: var(--color-text); }
.nav-links a:hover { color: var(--color-primary); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; background: transparent; border: 1px solid var(--color-border); padding: 8px 10px; border-radius: var(--radius-sm); }
.mobile-menu { display: none; padding: 12px 16px; border-top: 1px solid var(--color-border); background: #fff; }
.mobile-menu a, .mobile-menu button { display: block; width: 100%; text-align: left; margin-bottom: 10px; }
@media (max-width: 900px){
.nav-links { display: none; }
.menu-toggle { display: inline-flex; }
.nav-actions .btn { display: none; }
.mobile-menu.open { display: block; }
}
.hero {
padding: 64px 0;
background: linear-gradient(135deg, #fdf6e6, #f1e8de);
border-bottom: 1px solid var(--color-border);
}
.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 .lede { color: var(--color-muted); font-size: 17px; }
.hero__actions { display:flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.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); }
.eyebrow { text-transform: uppercase; letter-spacing: 1px; font-size: 12px; color: var(--color-muted); margin: 0; }
.lede { margin: 0; }
.muted.small { font-size: 13px; }
.section { padding: 64px 0; }
.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; }
.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; } }
.card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-card); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--color-accent-soft); color: var(--color-highlight); border-radius: 999px; font-weight: 700; font-size: 12px; letter-spacing: .3px; }
.hero__card .form-row { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pill-row { display:flex; flex-wrap: wrap; gap: 8px; }
.pill { display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--color-border); background:#fff; font-size: 13px; }
.list { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.list li { color: var(--color-text); }
.privacy-card { background: linear-gradient(145deg, #ffffff, #f7f0e6); }
.step { text-align: left; }
.step__icon { width: 34px; height:34px; border-radius: 10px; background: var(--color-accent); color: #fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom: 8px; }
.faq details { border:1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; background: #fff; }
.faq summary { cursor:pointer; font-weight: 600; }
.faq p { margin: 8px 0 0 0; color: var(--color-muted); }
.toast-bar { max-width: var(--maxw); margin: 16px auto; background: #fff; border:1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 16px; box-shadow: var(--shadow-card); }
.btn { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn:hover { transform: translateY(-1px); transition: transform 120ms ease; }
.btn.ghost { border:1px solid var(--color-border); color: var(--color-text); background: #fff; }
.chip.inline { padding: 6px 10px; }
.results .card { padding: 0; }
.event__body { padding: 16px; display:grid; gap:8px; }
.event__meta { display:flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--color-muted); }
.event__tags { display:flex; gap: 6px; flex-wrap: wrap; }
.event__access { font-size: 12px; color: var(--color-highlight); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.label { font-size: 13px; color: var(--color-muted); }
.input, .select { border-radius: var(--radius-sm); border-color: var(--color-border); background: #fff; }
.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); }
.flex { display:flex; }
.between { justify-content: space-between; }
.center-y { align-items: center; }
.gap-12 { gap: 12px; }
.stack { display:flex; flex-direction: column; }
@media (max-width: 720px){
.nav-row { padding: 12px 0; }
.hero { padding: 40px 0; }
.section { padding: 48px 0; }
}

21
public/assets/css/styles.css
View File

@@ -21,20 +21,21 @@ input, textarea, select { font: inherit; color: inherit; }
/* 2) Tokens */
:root {
--color-bg: #f8fafc; /* primary soft */
--color-bg: #f7f2ea;
--color-surface: #ffffff;
--color-border: #e5e7eb; /* slate-200 */
--color-muted: #64748b; /* slate-500 */
--color-text: #0f172a; /* slate-900 */
--color-primary: #111827; /* neutral-900 */
--color-border: #e5d8c1;
--color-muted: #5f6b7a;
--color-text: #26323f;
--color-primary: #34485a; /* Basisfarbe */
--color-primary-contrast: #ffffff;
--color-accent: #f59e0b; /* amber-500 */
--color-accent-soft: #fff7ed; /* amber-50 */
--color-accent: #e9b049; /* warmes Highlight */
--color-accent-soft: #fdf4e0;
--color-highlight: #99433f; /* Akzent 2 */
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 18px;
--shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.06);
--maxw: 1100px;
--shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 10px 32px rgba(0,0,0,0.08);
--maxw: 1180px;
}
/******************** 3) Utilities ********************/
@@ -58,7 +59,7 @@ input, textarea, select { font: inherit; color: inherit; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/******************** 4) Layout ********************/
.header { position: sticky; top:0; z-index: 40; backdrop-filter: blur(4px); background: rgba(255,255,255,0.85); border-bottom:1px solid var(--color-border); }
.header { position: sticky; top:0; z-index: 40; backdrop-filter: blur(4px); background: rgba(255,255,255,0.9); border-bottom:1px solid var(--color-border); }
.header .nav { display:flex; gap:24px; align-items:center; }
.header .brand { display:flex; align-items:center; gap:8px; font-weight:600; font-size:18px; letter-spacing: -0.2px; }
.header .menu-btn { display:none; border-radius: 10px; padding:8px; }

207
public/assets/js/app.js
View File

@@ -1 +1,206 @@
console.log('mini example loaded');
document.addEventListener('DOMContentLoaded', () => {
const body = document.body;
const isLoggedIn = body.dataset.auth === '1';
const childGender = body.dataset.childGender || '';
// Logo-Logik
const pickLogo = (gender) => {
if (gender === 'female') return 'logo_female.png';
if (gender === 'male') return 'logo_male.png';
return Math.random() < 0.5 ? 'logo_female.png' : 'logo_male.png';
};
const chosenLogo = pickLogo(childGender);
document.querySelectorAll('[data-logo-img]').forEach(img => {
img.src = `/assets/bilder/${chosenLogo}`;
});
// Mobile Menü
const mobileMenu = document.getElementById('mobileMenu');
document.querySelectorAll('.menu-toggle').forEach(btn => {
btn.addEventListener('click', () => {
mobileMenu?.classList.toggle('open');
});
});
// Scroll zu Events
const scrollBtn = document.getElementById('scrollToEvents');
if (scrollBtn) {
scrollBtn.addEventListener('click', () => {
document.getElementById('events')?.scrollIntoView({ behavior: 'smooth' });
});
}
// Demo-Events
const events = [
{
id: 1,
title: 'Spielplatzrunde im Park',
teaser: 'Lockeres Treffen mit Kaffee, Sandspielzeug und Picknick.',
description: 'Wir treffen uns am großen Spielplatz im Kiez. Bringt Snacks mit, wir teilen. Für alle Altersstufen offen.',
city: 'Berlin',
zip: '10437',
region: 'Prenzlauer Berg',
topic: 'outdoor',
startsAt: '2025-08-10T10:00:00',
allowKids: true,
ageGroup: 'kids',
visibility: 'public',
contact: 'papa-berlin@example.com',
locationLabel: 'Mauerpark',
},
{
id: 2,
title: 'Väter-Kaffee & Austausch',
teaser: 'Elternzeit, Job, Schlaf – wir reden über alles.',
description: 'Reservierter Tisch im Café. Fokus auf Austausch unter Vätern, Kinder optional.',
city: 'Hamburg',
zip: '22767',
region: 'Altona',
topic: 'kaffee',
startsAt: '2025-08-12T19:00:00',
allowKids: false,
ageGroup: '',
visibility: 'members',
contact: 'altona-dads@example.com',
locationLabel: 'Café Elbseite',
},
{
id: 3,
title: 'Sport & Spiel im Park',
teaser: 'Ballspiele und leichtes Workout, Kinder toben mit.',
description: 'Wir bringen Bälle und Slackline. Warm-up, danach freies Spiel. Bitte Wasser mitbringen.',
city: 'München',
zip: '80804',
region: 'Schwabing',
topic: 'sport',
startsAt: '2025-08-15T11:00:00',
allowKids: true,
ageGroup: 'school',
visibility: 'public',
contact: 'schwabing-sport@example.com',
locationLabel: 'Luitpoldpark',
},
{
id: 4,
title: 'Workshop: Erste Hilfe für Kids',
teaser: 'Erste Hilfe Basics speziell für Kinder-Unfälle.',
description: 'Zertifizierter Trainer, kleiner Materialbeitrag. Kinder können mitgebracht werden.',
city: 'Köln',
zip: '50667',
region: 'Innenstadt',
topic: 'workshop',
startsAt: '2025-08-20T18:30:00',
allowKids: true,
ageGroup: 'kids',
visibility: 'members',
contact: 'koeln-workshop@example.com',
locationLabel: 'Familienzentrum Mitte',
},
];
const state = { topic: 'all', age: '', region: '', query: '' };
const el = {
list: document.getElementById('eventList'),
chips: document.querySelectorAll('[data-filter]'),
locInput: document.getElementById('locInput'),
topicSelect: document.getElementById('topicSelect'),
ageSelect: document.getElementById('ageSelect'),
btnSearch: document.getElementById('btnSearch'),
btnGeo: document.getElementById('btnGeo'),
};
const fmtDate = (iso) => {
const d = new Date(iso);
return d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
};
const tag = (label) => `<span class="badge">${label}</span>`;
const renderCard = (item) => {
const guest = !isLoggedIn;
const access = item.visibility === 'members' && guest ? '<div class="event__access">Nur für Mitglieder</div>' : '';
const desc = guest ? `<p class="muted">Melde dich an, um die volle Beschreibung zu sehen.</p>` : `<p>${item.description}</p>`;
const contact = !guest ? `<div class="muted small">Kontakt: ${item.contact}</div>` : '';
const kids = item.allowKids ? 'Mit Kindern' : 'Ohne Kinder';
const tags = [
tag(item.topic === 'kaffee' ? 'Kaffee & Austausch' : item.topic.charAt(0).toUpperCase() + item.topic.slice(1)),
tag(kids),
item.ageGroup ? tag(`Alter: ${item.ageGroup}`) : '',
].filter(Boolean).join('');
return `
<article class="card">
<div class="event__body">
${access}
<div class="event__meta">
<span>${fmtDate(item.startsAt)}</span>
<span>📍 ${item.region || item.city}</span>
<span>${item.visibility === 'public' ? 'Öffentlich' : 'Mitglieder'}</span>
</div>
<h3>${item.title}</h3>
<p class="muted">${guest ? item.teaser : item.description.slice(0, 140) + '...'}</p>
${guest ? '' : desc}
<div class="event__tags">${tags}</div>
${contact}
<div class="flex gap-12">
<button class="btn ghost">Details</button>
${!guest ? '<button class="btn">Teilnehmen</button>' : '<button class="btn">Anmelden</button>'}
</div>
</div>
</article>`;
};
const matchesFilter = (ev) => {
const topicOk = state.topic === 'all' || state.topic === ev.topic;
const ageOk = !state.age || ev.ageGroup === state.age || (state.age === 'baby' && ev.ageGroup === 'kids'); // simple fallback
const regionOk = !state.region || ev.region.toLowerCase().includes(state.region) || ev.city.toLowerCase().includes(state.region) || ev.zip.startsWith(state.region);
const queryOk = !state.query || (ev.title + ev.teaser + ev.description + ev.city + ev.region).toLowerCase().includes(state.query);
return topicOk && ageOk && regionOk && queryOk;
};
const renderEvents = () => {
if (!el.list) return;
const filtered = events.filter(matchesFilter);
el.list.innerHTML = filtered.map(renderCard).join('') || '<p class="muted">Keine Events gefunden.</p>';
};
if (el.chips.length > 0) {
el.chips[0].classList.add('active');
}
el.chips.forEach(chip => {
chip.addEventListener('click', () => {
el.chips.forEach(c => c.classList.remove('active'));
chip.classList.add('active');
state.topic = chip.dataset.filter;
renderEvents();
});
});
if (el.btnSearch) {
el.btnSearch.addEventListener('click', () => {
state.region = (el.locInput?.value || '').trim().toLowerCase();
state.topic = el.topicSelect?.value || 'all';
state.age = el.ageSelect?.value || '';
renderEvents();
});
}
if (el.btnGeo) {
el.btnGeo.addEventListener('click', () => {
if (!navigator.geolocation) {
alert('Geolocation wird nicht unterstützt.');
return;
}
navigator.geolocation.getCurrentPosition(
() => {
state.region = 'nähe';
renderEvents();
},
() => alert('Standort konnte nicht ermittelt werden.')
);
});
}
renderEvents();
});

313
public/page/index.php Executable file → Normal file
View File

@@ -1,310 +1,5 @@
<!doctype html>
<html lang="de" class="scroll-smooth">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>schwarzesbrett.online – Digitales Schwarzes Brett</title>
<meta name="description" content="Kostenlose Aushänge & Nachbarschaftshilfe – lokal, einfach, ohne Schnickschnack." />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='2' y='18' font-size='16'%3E%F0%9F%93%8C%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="./assets/styles.css" />
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container" style="display:flex;align-items:center;justify-content:space-between;height:64px;">
<a href="#" class="brand" aria-label="Startseite">
<span style="font-size:22px;">📌</span>
<span>schwarzesbrett<span style="color:#94a3b8">.online</span></span>
</a>
<nav class="nav">
<a href="#kategorien">Kategorien</a>
<a href="#neu">Neueste</a>
<a href="#sofunktionierts">So funktioniert’s</a>
<button id="openCreate" class="btn">➕ Inserat erstellen</button>
<a href="#" class="text-muted">Login</a>
</nav>
<button id="openMenu" class="menu-btn" aria-label="Menü öffnen">☰</button>
</div>
<div id="mobileMenu" class="mobile-menu">
<div class="container" style="display:flex;flex-direction:column;gap:12px;padding-block:12px;">
<a href="#kategorien">Kategorien</a>
<a href="#neu">Neueste</a>
<a href="#sofunktionierts">So funktioniert’s</a>
<button id="openCreateMobile" class="btn" style="width:fit-content;">➕ Inserat erstellen</button>
</div>
</div>
</header>
<?php
declare(strict_types=1);
<!-- Hero -->
<section class="hero">
<div class="container" style="padding-block:48px;display:grid;gap:24px;grid-template-columns: 1.2fr .8fr;">
<div>
<h1>Dein digitales Schwarzes Brett für <span id="heroOrt" style="text-decoration: underline wavy #f59e0b;">deine Nachbarschaft</span></h1>
<p class="sub mt-2">Inserate, Nachbarschaftshilfe & Veranstaltungen – lokal, übersichtlich und frei von Spam.</p>
<form id="searchForm" class="search mt-3" aria-label="Suche">
<label class="sr-only" for="q">Stichwort</label>
<input id="q" class="input" type="search" placeholder="Suche nach Stichwort (z. B. Fahrrad, Babysitter)" />
<label class="sr-only" for="zip">PLZ</label>
<input id="zip" class="input" type="text" inputmode="numeric" maxlength="5" placeholder="PLZ" />
<button class="btn" type="submit">Suchen</button>
</form>
<div class="mt-2 text-muted" style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
<button id="detectLocation" class="btn ghost">PLZ automatisch erkennen</button>
<button id="openCreateHero" class="btn ghost">Jetzt kostenlos Aushang erstellen</button>
</div>
</div>
<div>
<div class="card p-4">
<div class="grid grid-3">
<button data-cat="Flohmarkt" class="note pin p-3 rounded">
<div style="font-weight:600;">🛒 Flohmarkt</div>
<div class="text-muted" style="font-size:12px;">Verkaufen & Finden</div>
</button>
<button data-cat="Jobs" class="note pin p-3 rounded">
<div style="font-weight:600;">💼 Jobs</div>
<div class="text-muted" style="font-size:12px;">Mini- & Nebenjobs</div>
</button>
<button data-cat="Nachbarschaftshilfe" class="note pin p-3 rounded">
<div style="font-weight:600;">🤝 Hilfe</div>
<div class="text-muted" style="font-size:12px;">Leihen, Mitnehmen</div>
</button>
<button data-cat="Veranstaltungen" class="note pin p-3 rounded">
<div style="font-weight:600;">🎉 Veranstaltungen</div>
<div class="text-muted" style="font-size:12px;">Heute & bald</div>
</button>
<button data-cat="Immobilien" class="note pin p-3 rounded">
<div style="font-weight:600;">🏡 Immobilien</div>
<div class="text-muted" style="font-size:12px;">Miete & WG</div>
</button>
<button data-cat="Sonstiges" class="note pin p-3 rounded">
<div style="font-weight:600;">📌 Sonstiges</div>
<div class="text-muted" style="font-size:12px;">Alles andere</div>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Kategorien -->
<section id="kategorien" class="container" style="padding-block:24px;">
<h2 style="font-size:20px;font-weight:600;" class="mb-2">Entdecke Kategorien</h2>
<div class="chips">
<button class="chip" data-filter="">Alle</button>
<button class="chip" data-filter="Flohmarkt">🛒 Flohmarkt</button>
<button class="chip" data-filter="Jobs">💼 Jobs</button>
<button class="chip" data-filter="Nachbarschaftshilfe">🤝 Hilfe</button>
<button class="chip" data-filter="Veranstaltungen">🎉 Veranstaltungen</button>
<button class="chip" data-filter="Immobilien">🏡 Immobilien</button>
<button class="chip" data-filter="Sonstiges">📌 Sonstiges</button>
</div>
</section>
<!-- Neueste Einträge -->
<section id="neu" class="container" style="padding-block:8px 48px;">
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;">
<h2 style="font-size:20px;font-weight:600;">Neueste Einträge</h2>
<button id="loadMore" class="btn ghost" style="font-size:14px;">Mehr anzeigen</button>
</div>
<div id="cards" class="results"></div>
</section>
<!-- CTA -->
<section class="cta">
<div class="container" style="padding-block:40px;display:grid;gap:16px;grid-template-columns: 1fr auto; align-items:center;">
<div>
<h3 style="font-size:24px;font-weight:600;">Mach dein Anliegen sichtbar</h3>
<p class="text-muted mt-1">Erstelle jetzt kostenlos einen Aushang. Optional mit Bild – läuft automatisch nach 30 Tagen aus.</p>
</div>
<button id="openCreateCta" class="btn">Jetzt Aushang erstellen</button>
</div>
</section>
<!-- So funktioniert’s -->
<section id="sofunktionierts" class="container" style="padding-block:40px;">
<h2 style="font-size:20px;font-weight:600;" class="mb-4">So funktioniert’s</h2>
<div class="grid grid-3">
<div class="surface border rounded p-4">
<div style="font-size:24px;">1️⃣</div>
<h3 class="mt-2" style="font-weight:600;">Inserat erstellen</h3>
<p class="text-muted mt-1" style="font-size:14px;">Titel, Beschreibung, Kategorie, Ort – optional ein Bild. Fertig.</p>
</div>
<div class="surface border rounded p-4">
<div style="font-size:24px;">2️⃣</div>
<h3 class="mt-2" style="font-weight:600;">Lokal sichtbar</h3>
<p class="text-muted mt-1" style="font-size:14px;">Dein Aushang erscheint bei Leuten in der Nähe – ohne Algorithmus‑Chaos.</p>
</div>
<div class="surface border rounded p-4">
<div style="font-size:24px;">3️⃣</div>
<h3 class="mt-2" style="font-weight:600;">Kontakt aufnehmen</h3>
<p class="text-muted mt-1" style="font-size:14px;">Direkt per E‑Mail oder Telefon – ohne Zwischenhändler.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container" style="padding-block:24px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;">
<p>© 2025 schwarzesbrett.online</p>
<nav style="display:flex;gap:16px;">
<a href="#">Impressum</a>
<a href="#">Datenschutz</a>
<a href="#">Kontakt</a>
</nav>
</div>
</footer>
<!-- Modal: Inserat erstellen -->
<div id="createModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="createTitle">
<div class="panel">
<div class="head">
<h3 id="createTitle" style="font-weight:600;">Inserat erstellen</h3>
<button id="closeCreate" class="btn ghost" aria-label="Schließen">✕</button>
</div>
<form id="createForm" class="grid">
<div class="form-row">
<div>
<label class="label" for="title">Titel</label>
<input required id="title" name="title" class="input mt-1" />
</div>
<div>
<label class="label" for="category">Kategorie</label>
<select required id="category" name="category" class="select mt-1">
<option value="Flohmarkt">Flohmarkt</option>
<option value="Jobs">Jobs</option>
<option value="Nachbarschaftshilfe">Nachbarschaftshilfe</option>
<option value="Veranstaltungen">Veranstaltungen</option>
<option value="Immobilien">Immobilien</option>
<option value="Sonstiges">Sonstiges</option>
</select>
</div>
</div>
<div>
<label class="label" for="desc">Beschreibung</label>
<textarea required id="desc" name="desc" class="textarea mt-1" rows="4"></textarea>
</div>
<div class="form-row" style="grid-template-columns: 120px 1fr 1fr;">
<div>
<label class="label" for="zip2">PLZ</label>
<input required id="zip2" name="zip" class="input mt-1" maxlength="5" inputmode="numeric" />
</div>
<div>
<label class="label" for="city">Ort</label>
<input required id="city" name="city" class="input mt-1" />
</div>
<div>
<label class="label" for="contact">Kontakt (E‑Mail o. Tel.)</label>
<input required id="contact" name="contact" class="input mt-1" />
</div>
</div>
<div>
<label class="label" for="img">Bild‑URL (optional)</label>
<input id="img" name="img" class="input mt-1" placeholder="https://…" />
</div>
<div style="display:flex;justify-content:flex-end;gap:12px;">
<button type="button" id="cancelCreate" class="btn outline">Abbrechen</button>
<button class="btn" type="submit">Veröffentlichen</button>
</div>
</form>
</div>
</div>
<!-- Toast -->
<div id="toast" class="toast">Aushang veröffentlicht</div>
<script>
// Demo-State (ohne Backend) – kann später durch API ersetzt werden
const seed = [
{id:1, title:"Mountainbike zu verkaufen", desc:"Gut gepflegtes 26'' MTB, neue Bremsen, Probefahrt möglich.", category:"Flohmarkt", zip:"10115", city:"Berlin", contact:"maria@example.com", img:"https://images.unsplash.com/photo-1520975693416-35e09df6f242?q=80&w=1200&auto=format&fit=crop", date:"2025-08-10"},
{id:2, title:"Babysitter gesucht", desc:"Suche zuverlässige Betreuung für 2 Abende/Woche.", category:"Jobs", zip:"50667", city:"Köln", contact:"0176 123456", img:"", date:"2025-08-12"},
{id:3, title:"Bohrmaschine leihen", desc:"Brauche am Wochenende eine Bohrmaschine – Gegen Kuchen 😀", category:"Nachbarschaftshilfe", zip:"22767", city:"Hamburg", contact:"timo@example.com", img:"", date:"2025-08-09"}
];
const state = { ads: seed, perPage: 6, currentCategory: "", search: "", zip: "" };
const $ = (s, r=document)=> r.querySelector(s);
const $$ = (s, r=document)=> Array.from(r.querySelectorAll(s));
const el = {
cards: $('#cards'), q: $('#q'), zip: $('#zip'), loadMore: $('#loadMore'),
chips: $$('.chip'), noteCats: $$('[data-cat]'),
createModal: $('#createModal'), openCreate: $('#openCreate'), openCreateMobile: $('#openCreateMobile'), openCreateHero: $('#openCreateHero'), openCreateCta: $('#openCreateCta'),
closeCreate: $('#closeCreate'), cancelCreate: $('#cancelCreate'), createForm: $('#createForm'),
openMenu: $('#openMenu'), mobileMenu: $('#mobileMenu'), detectLocation: $('#detectLocation'),
toast: $('#toast')
};
function fmtDate(d){ const date = new Date(d); return date.toLocaleDateString('de-DE'); }
function expiry(d){ const dt = new Date(d); dt.setDate(dt.getDate()+30); return dt.toLocaleDateString('de-DE'); }
function card(item){
const img = item.img && item.img.startsWith('http') ? `<img class="img" src="${item.img}" alt="Bild zu ${item.title}" loading="lazy">` : '';
return `<article class="card">
${img}
<div class="body">
<div class="row"><span class="badge">${item.category}</span><span>${fmtDate(item.date)}</span></div>
<h3>${item.title}</h3>
<p class="clamp-3 mt-1">${item.desc}</p>
<div class="row mt-2" style="font-size:14px;">
<div>📍 ${item.zip} ${item.city}</div>
<div>läuft ab: ${expiry(item.date)}</div>
</div>
<div class="mt-2" style="display:flex;gap:12px;align-items:center;">
<a class="btn outline" href="mailto:${encodeURIComponent(item.contact)}">Kontakt</a>
<button class="btn ghost" style="font-size:14px;">Merken</button>
</div>
</div>
</article>`;
}
function render(append=false){
const start = append ? el.cards.children.length : 0;
if(!append) el.cards.innerHTML = '';
const filtered = state.ads.filter(a=>{
const byCat = state.currentCategory ? a.category===state.currentCategory : true;
const byQ = state.search ? (a.title+" "+a.desc).toLowerCase().includes(state.search.toLowerCase()) : true;
const byZip = state.zip ? a.zip.startsWith(state.zip) : true;
return byCat && byQ && byZip;
});
const slice = filtered.slice(start, start + state.perPage);
slice.forEach(item=> el.cards.insertAdjacentHTML('beforeend', card(item)) );
$('#loadMore').classList.toggle('hide', (start + state.perPage) >= filtered.length);
}
// Events
$('#searchForm').addEventListener('submit', e=>{ e.preventDefault(); state.search = el.q.value.trim(); state.zip = el.zip.value.trim(); render(false); });
$('#loadMore').addEventListener('click', ()=> render(true));
el.chips.forEach(c=> c.addEventListener('click', ()=>{ state.currentCategory = c.dataset.filter; el.chips.forEach(x=>x.classList.toggle('active', x===c)); render(false); }));
el.noteCats.forEach(n=> n.addEventListener('click', ()=>{ state.currentCategory = n.dataset.cat; document.getElementById('kategorien').scrollIntoView({behavior:'smooth'}); el.chips.forEach(x=> x.classList.toggle('active', x.dataset.filter===state.currentCategory)); render(false); }));
// Modal
function openCreate(){ el.createModal.classList.add('open'); $('#title').focus(); }
function closeCreate(){ el.createModal.classList.remove('open'); }
[el.openCreate, el.openCreateMobile, el.openCreateHero, el.openCreateCta].forEach(b=> b&&b.addEventListener('click', openCreate));
el.closeCreate.addEventListener('click', closeCreate);
el.cancelCreate.addEventListener('click', closeCreate);
el.createModal.addEventListener('click', (e)=>{ if(e.target===el.createModal) closeCreate(); });
el.createForm.addEventListener('submit', e=>{
e.preventDefault();
const fd = new FormData(e.target); const ad = Object.fromEntries(fd.entries());
const id = Math.max(0, ...state.ads.map(a=>a.id))+1; const today = new Date();
state.ads.unshift({ id, title: ad.title.trim(), desc: ad.desc.trim(), category: ad.category, zip: ad.zip.trim(), city: ad.city.trim(), contact: ad.contact.trim(), img: ad.img?.trim()||"", date: today.toISOString().slice(0,10) });
closeCreate(); e.target.reset(); state.currentCategory = ""; render(false);
el.toast.textContent = 'Aushang veröffentlicht'; el.toast.classList.add('show'); setTimeout(()=> el.toast.classList.remove('show'), 2200);
window.scrollTo({top:0, behavior:'smooth'});
});
// Mobile Menu
el.openMenu.addEventListener('click', ()=> el.mobileMenu.classList.toggle('open'));
// Geolocation (Demo)
$('#detectLocation').addEventListener('click', ()=>{
if(!navigator.geolocation) return alert('Geolocation wird nicht unterstützt.');
navigator.geolocation.getCurrentPosition(()=>{ document.getElementById('heroOrt').textContent = 'deine Nähe'; alert('Für genaue Ergebnisse gib deine PLZ ein.'); }, ()=> alert('Standort konnte nicht ermittelt werden.'));
});
// Initial
render(false);
</script>
</body>
</html>
// Landing-Page über Partials laden
tpl('home', 'landing', 'main');