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

asd

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2025-12-25 01:02:26 +01:00
parent 8644e502df
commit 3aadef9392
2 changed files with 305 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
public/page/retool/styleguide.html Executable file
View File

@@ -0,0 +1,175 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>schwarzesbrett.online – Styleguide & Komponenten</title>
<link rel="stylesheet" href="./assets/styles.css" />
<style> .sg { padding-block: 24px; } .sg h2 { font-size: 20px; font-weight: 600; margin: 24px 0 12px; } .row{display:flex;gap:12px;flex-wrap:wrap;} </style>
</head>
<body>
<header class="header">
<div class="container" style="display:flex;align-items:center;justify-content:space-between;height:64px;">
<div class="brand"><span style="font-size:22px">🧾</span> schwarzesbrett<span style="color:#94a3b8">.online</span></div>
</div>
</header>
<main class="container sg">
<!-- Buttons -->
<h2>Buttons</h2>
<div class="row">
<button class="btn">Primär</button>
<button class="btn outline">Outline</button>
<button class="btn ghost">Ghost</button>
<button class="btn block" style="max-width:260px">Block Button</button>
</div>
<!-- Chips -->
<h2>Chips</h2>
<div class="chips">
<button class="chip">Alle</button>
<button class="chip active">Flohmarkt</button>
<button class="chip">Jobs</button>
<button class="chip">Nachbarschaftshilfe</button>
<button class="chip">Veranstaltungen</button>
</div>
<!-- Formulare -->
<h2>Formular-Elemente</h2>
<form class="grid" style="max-width:820px;">
<div class="form-row">
<div>
<label class="label" for="f-title">Titel</label>
<input id="f-title" class="input mt-1" placeholder="z. B. Fahrrad zu verkaufen" />
</div>
<div>
<label class="label" for="f-cat">Kategorie</label>
<select id="f-cat" class="select mt-1">
<option>Flohmarkt</option>
<option>Jobs</option>
<option>Nachbarschaftshilfe</option>
<option>Veranstaltungen</option>
<option>Immobilien</option>
<option>Sonstiges</option>
</select>
</div>
</div>
<div>
<label class="label" for="f-desc">Beschreibung</label>
<textarea id="f-desc" class="textarea mt-1" rows="4" placeholder="Kurze, klare Beschreibung…"></textarea>
</div>
<div class="form-row" style="grid-template-columns: 120px 1fr 1fr;">
<div>
<label class="label" for="f-zip">PLZ</label>
<input id="f-zip" class="input mt-1" maxlength="5" inputmode="numeric" />
</div>
<div>
<label class="label" for="f-city">Ort</label>
<input id="f-city" class="input mt-1" />
</div>
<div>
<label class="label" for="f-contact">Kontakt</label>
<input id="f-contact" class="input mt-1" placeholder="E‑Mail oder Telefon" />
</div>
</div>
<div>
<label class="label" for="f-img">Bild‑URL</label>
<input id="f-img" class="input mt-1" placeholder="https://…" />
</div>
<div class="row" style="justify-content:flex-end;">
<button type="button" class="btn outline">Abbrechen</button>
<button class="btn">Veröffentlichen</button>
</div>
</form>
<!-- Inserat-Karte -->
<h2>Inserat – Karte</h2>
<article class="card" style="max-width:720px;">
<img class="img" src="https://images.unsplash.com/photo-1520975693416-35e09df6f242?q=80&w=1200&auto=format&fit=crop" alt="Beispielbild">
<div class="body">
<div class="row"><span class="badge">Flohmarkt</span><span>12.08.2025</span></div>
<h3>Mountainbike zu verkaufen</h3>
<p class="clamp-3 mt-1">Gut gepflegtes 26'' MTB, neue Bremsen, Probefahrt möglich. Abholung in Berlin‑Mitte. Preis VB.</p>
<div class="row mt-2" style="font-size:14px;">
<div>📍 10115 Berlin</div>
<div>läuft ab: 11.09.2025</div>
</div>
<div class="row mt-2" style="justify-content:flex-start;gap:12px;">
<a href="mailto:demo@example.com" class="btn outline">Kontakt</a>
<button class="btn ghost" style="font-size:14px;">Merken</button>
</div>
</div>
</article>
<!-- Ergebnisliste (Grid aus Karten) -->
<h2>Ergebnisliste</h2>
<div class="results">
<article class="card">
<div class="body">
<div class="row"><span class="badge">Jobs</span><span>15.08.2025</span></div>
<h3>Babysitter gesucht</h3>
<p class="clamp-2 mt-1">Suche zuverlässige Betreuung für 2 Abende/Woche.</p>
<div class="row mt-2" style="font-size:14px;">
<div>📍 50667 Köln</div>
<div>läuft ab: 14.09.2025</div>
</div>
</div>
</article>
<article class="card">
<div class="body">
<div class="row"><span class="badge">Nachbarschaftshilfe</span><span>09.08.2025</span></div>
<h3>Bohrmaschine leihen</h3>
<p class="clamp-2 mt-1">Brauche am Wochenende eine Bohrmaschine – Gegen Kuchen 😀</p>
<div class="row mt-2" style="font-size:14px;">
<div>📍 22767 Hamburg</div>
<div>läuft ab: 08.09.2025</div>
</div>
</div>
</article>
<article class="card">
<div class="body">
<div class="row"><span class="badge">Immobilien</span><span>07.08.2025</span></div>
<h3>1‑Zimmer Wohnung</h3>
<p class="clamp-2 mt-1">Helle 35m², Nähe S‑Bahn, ab 01.10. frei.</p>
<div class="row mt-2" style="font-size:14px;">
<div>📍 80331 München</div>
<div>läuft ab: 06.09.2025</div>
</div>
</div>
</article>
</div>
<!-- Modal & Toast Vorschau -->
<h2>Modal & Toast</h2>
<div class="row">
<button id="openModalDemo" class="btn">Modal öffnen</button>
<button id="showToastDemo" class="btn outline">Toast zeigen</button>
</div>
</main>
<!-- Modal Demo -->
<div id="modalDemo" class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
<div class="panel">
<div class="head">
<h3 id="modalTitle" style="font-weight:600;">Beispiel-Modal</h3>
<button id="closeModalDemo" class="btn ghost" aria-label="Schließen">✕</button>
</div>
<p>Dies ist ein Beispiel-Modal. Es verwendet die gleichen Klassen wie der „Inserat erstellen“-Dialog.</p>
</div>
</div>
<div id="toastDemo" class="toast">Hallo! Ich bin ein Toast.</div>
<footer class="footer">
<div class="container" style="padding-block:24px;">© 2025 schwarzesbrett.online</div>
</footer>
<script>
const $ = s=> document.querySelector(s);
$('#openModalDemo').addEventListener('click', ()=> $('#modalDemo').classList.add('open'));
$('#closeModalDemo').addEventListener('click', ()=> $('#modalDemo').classList.remove('open'));
$('#modalDemo').addEventListener('click', (e)=>{ if(e.target===e.currentTarget) e.currentTarget.classList.remove('open'); });
$('#showToastDemo').addEventListener('click', ()=>{ const t=$('#toastDemo'); t.classList.add('show'); setTimeout(()=> t.classList.remove('show'), 2000); });
</script>
</body>
</html>