176 lines
7.1 KiB
HTML
Executable File
176 lines
7.1 KiB
HTML
Executable File
<!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>
|