2215 lines
No EOL
99 KiB
HTML
2215 lines
No EOL
99 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de" data-theme="light">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Framework Docs — Komponenten & Tokens</title>
|
||
|
||
<!-- Theme vor dem ersten Rendern setzen, ohne Inline-Skript -->
|
||
<script src="theme.min.js"></script>
|
||
|
||
<!-- In deinen Projekten: nur main.css einbinden -->
|
||
<link rel="stylesheet" href="main.min.css">
|
||
|
||
<!-- Demo-spezifische Styles (nicht Teil des Frameworks) -->
|
||
<link rel="stylesheet" href="demo.css">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="docs-layout">
|
||
|
||
<!-- NAV -->
|
||
<nav class="nav docs-nav">
|
||
<a href="#" class="nav-brand">⬡ CSS-Framework</a>
|
||
<ul class="nav-links">
|
||
<li><a href="#tokens" class="active">Tokens</a></li>
|
||
<li><a href="#base">Base</a></li>
|
||
<li><a href="#components">Komponenten</a></li>
|
||
</ul>
|
||
<div class="nav-end">
|
||
<span class="text-sm text-muted">v1.0</span>
|
||
<!-- Dark Mode Toggle -->
|
||
<button class="btn btn-ghost btn-icon" id="theme-toggle" data-action="theme-toggle" aria-label="Dark Mode umschalten"
|
||
title="Dark Mode umschalten">
|
||
<svg id="icon-sun" class="icon-theme-dark" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<circle cx="12" cy="12" r="5" />
|
||
<line x1="12" y1="1" x2="12" y2="3" />
|
||
<line x1="12" y1="21" x2="12" y2="23" />
|
||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
||
<line x1="1" y1="12" x2="3" y2="12" />
|
||
<line x1="21" y1="12" x2="23" y2="12" />
|
||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
||
</svg>
|
||
<svg id="icon-moon" class="icon-theme-light" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- SIDEBAR -->
|
||
<aside class="docs-sidebar">
|
||
<nav class="sidebar-nav">
|
||
<div class="sidebar-nav-section">Design Tokens</div>
|
||
<a href="#colors">Farben</a>
|
||
<a href="#spacing">Abstände</a>
|
||
<a href="#typography-tokens">Typografie</a>
|
||
<a href="#shadows">Schatten</a>
|
||
|
||
<div class="sidebar-nav-section">Base</div>
|
||
<a href="#typography">Typografie</a>
|
||
<a href="#forms-base">Formulare</a>
|
||
<a href="#tables-base">Tabellen</a>
|
||
|
||
<div class="sidebar-nav-section">Komponenten</div>
|
||
<a href="#buttons">Buttons</a>
|
||
<a href="#badges">Badges</a>
|
||
<a href="#cards">Cards</a>
|
||
<a href="#forms">Formulare</a>
|
||
<a href="#tables">Tabellen</a>
|
||
<a href="#alerts">Alerts</a>
|
||
<a href="#modal">Modal</a>
|
||
<a href="#tabs">Tabs</a>
|
||
<a href="#accordion">Accordion</a>
|
||
<a href="#navigation">Navigation</a>
|
||
<a href="#sidebar-demo">Sidebar</a>
|
||
<a href="#footer-demo">Footer</a>
|
||
<a href="#dropdowns">Dropdowns</a>
|
||
<a href="#feedback">Feedback</a>
|
||
<a href="#meta-list">Meta List</a>
|
||
<a href="#chips">Filter Chips</a>
|
||
<a href="#timeline">Timeline</a>
|
||
<a href="#stepper">Stepper</a>
|
||
<a href="#list-group">List Group</a>
|
||
<a href="#responsive-tables">Responsive Tables</a>
|
||
<a href="#dismissible-alert">Dismissible Alert</a>
|
||
<a href="#sortable-table">Sortierbare Tabellen</a>
|
||
<a href="#tooltip">Tooltip</a>
|
||
<a href="#toast">Toast</a>
|
||
|
||
<div class="sidebar-nav-section">Utilities</div>
|
||
<a href="#alignment">Alignment</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- CONTENT -->
|
||
<main class="docs-content">
|
||
<div class="stack stack-lg">
|
||
|
||
<!-- INTRO -->
|
||
<div>
|
||
<p class="section-label">Dokumentation</p>
|
||
<h1>CSS-Framework</h1>
|
||
<p class="text-muted demo-s1">
|
||
Ein schlankes, klassenloses CSS-Framework für konsistente Jinja2/HTMX-Webapps.
|
||
Alle Werte zentral in <code>tokens.css</code> anpassbar.
|
||
</p>
|
||
<div class="cluster demo-s2">
|
||
<code class="text-sm">tokens.css</code>
|
||
<code class="text-sm">base.css</code>
|
||
<code class="text-sm">components.css</code>
|
||
<code class="text-sm">utilities.css</code>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FARBEN -->
|
||
<section class="section" id="colors">
|
||
<div class="section-header">
|
||
<p class="section-label">Tokens</p>
|
||
<h2>Farben</h2>
|
||
<p class="text-muted">Alle semantischen Aliases aus <code>tokens.css</code>. Diese anpassen, nicht die
|
||
Rohpalette.</p>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Semantische Farben (Backgrounds)</p>
|
||
<div class="token-grid">
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s3"></div><span
|
||
class="token-name">--bg</span>
|
||
</div>
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s4"></div><span
|
||
class="token-name">--bg-subtle</span>
|
||
</div>
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s5"></div><span
|
||
class="token-name">--bg-muted</span>
|
||
</div>
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s6"></div><span
|
||
class="token-name">--surface</span>
|
||
</div>
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s7"></div><span
|
||
class="token-name">--surface-raised</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Accent Palette</p>
|
||
<div class="token-grid">
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s8"></div><span
|
||
class="token-name">--accent-subtle</span>
|
||
</div>
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s9"></div><span
|
||
class="token-name">--accent-muted</span>
|
||
</div>
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s10"></div><span class="token-name">--accent</span>
|
||
</div>
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s11"></div><span
|
||
class="token-name">--accent-hover</span>
|
||
</div>
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s12"></div><span
|
||
class="token-name">--accent-active</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Semantisch (Status)</p>
|
||
<div class="token-grid">
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s13"></div><span
|
||
class="token-name">--color-success</span>
|
||
</div>
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s14"></div><span
|
||
class="token-name">--color-warning</span>
|
||
</div>
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s15"></div><span
|
||
class="token-name">--color-danger</span>
|
||
</div>
|
||
<div class="token-swatch">
|
||
<div class="swatch demo-s16"></div><span
|
||
class="token-name">--color-info</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ABSTÄNDE -->
|
||
<section class="section" id="spacing">
|
||
<div class="section-header">
|
||
<p class="section-label">Tokens</p>
|
||
<h2>Abstände</h2>
|
||
<p class="text-muted">4px-Grid. 12 Stufen von <code>--space-1</code> (4px) bis <code>--space-24</code>
|
||
(96px).</p>
|
||
</div>
|
||
<div class="demo-preview">
|
||
<div class="space-demo">
|
||
<div class="space-block">
|
||
<div class="space-vis demo-s17"></div><span class="token-name">1</span>
|
||
</div>
|
||
<div class="space-block">
|
||
<div class="space-vis demo-s18"></div><span class="token-name">2</span>
|
||
</div>
|
||
<div class="space-block">
|
||
<div class="space-vis demo-s19"></div><span class="token-name">3</span>
|
||
</div>
|
||
<div class="space-block">
|
||
<div class="space-vis demo-s20"></div><span class="token-name">4</span>
|
||
</div>
|
||
<div class="space-block">
|
||
<div class="space-vis demo-s21"></div><span class="token-name">5</span>
|
||
</div>
|
||
<div class="space-block">
|
||
<div class="space-vis demo-s22"></div><span class="token-name">6</span>
|
||
</div>
|
||
<div class="space-block">
|
||
<div class="space-vis demo-s23"></div><span class="token-name">8</span>
|
||
</div>
|
||
<div class="space-block">
|
||
<div class="space-vis demo-s24"></div><span class="token-name">10</span>
|
||
</div>
|
||
<div class="space-block">
|
||
<div class="space-vis demo-s25"></div><span class="token-name">12</span>
|
||
</div>
|
||
<div class="space-block">
|
||
<div class="space-vis demo-s26"></div><span class="token-name">16</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TYPOGRAFIE -->
|
||
<section class="section" id="typography">
|
||
<div class="section-header">
|
||
<p class="section-label">Base</p>
|
||
<h2>Typografie</h2>
|
||
<p class="text-muted">Classless — kein Markup nötig.</p>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Headings</p>
|
||
<div class="demo-preview demo-col demo-s27">
|
||
<h1>H1 — Seitenüberschrift (3rem)</h1>
|
||
<h2>H2 — Abschnittsüberschrift (2.25rem)</h2>
|
||
<h3>H3 — Unterabschnitt (1.875rem)</h3>
|
||
<h4>H4 — Kartenüberschrift (1.5rem)</h4>
|
||
<h5>H5 — Gruppenheader (1.25rem)</h5>
|
||
<h6>H6 — Label-Header (1rem)</h6>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Body & Inline</p>
|
||
<div class="demo-preview demo-col">
|
||
<p>Normaler Absatztext mit <strong>fettem</strong>, <em>kursivem</em> Text und einem <a href="#">Link</a>.
|
||
<code>inline code</code> und <mark>markierter Text</mark> sind ebenfalls enthalten.
|
||
</p>
|
||
<p>Zweiter Absatz. <small>Kleiner Hilfstext darunter.</small></p>
|
||
<blockquote>
|
||
Ein Zitat als Blockquote, ideal für wichtige Aussagen oder Kundenstimmen.
|
||
<cite>— Max Mustermann, CEO</cite>
|
||
</blockquote>
|
||
<p>Keyboard Shortcut: <kbd>⌘</kbd> + <kbd>K</kbd></p>
|
||
<pre><code>// Code Block
|
||
const greet = (name) => `Hallo, ${name}!`;</code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FORMS BASE -->
|
||
<section class="section" id="forms-base">
|
||
<div class="section-header">
|
||
<p class="section-label">Base</p>
|
||
<h2>Formulare (classless)</h2>
|
||
<p class="text-muted">Standard-HTML-Elemente ohne Klassen gestylt.</p>
|
||
</div>
|
||
<div class="demo-preview demo-col demo-s28">
|
||
<label for="demo-text">Textfeld</label>
|
||
<input type="text" id="demo-text" placeholder="Placeholder…">
|
||
|
||
<label for="demo-select">Select</label>
|
||
<select id="demo-select">
|
||
<option>Option 1</option>
|
||
<option>Option 2</option>
|
||
<option>Option 3</option>
|
||
</select>
|
||
|
||
<label for="demo-textarea">Textarea</label>
|
||
<textarea id="demo-textarea" rows="3" placeholder="Mehrzeiliger Text…"></textarea>
|
||
|
||
<fieldset>
|
||
<legend>Optionen</legend>
|
||
<div class="cluster">
|
||
<label class="demo-s29"
|
||
>
|
||
<input type="checkbox" checked> Checkbox
|
||
</label>
|
||
<label class="demo-s29"
|
||
>
|
||
<input type="radio" name="r"> Radio A
|
||
</label>
|
||
<label class="demo-s29"
|
||
>
|
||
<input type="radio" name="r"> Radio B
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TABLES BASE -->
|
||
<section class="section" id="tables-base">
|
||
<div class="section-header">
|
||
<p class="section-label">Base</p>
|
||
<h2>Tabellen (classless)</h2>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Status</th>
|
||
<th>Rolle</th>
|
||
<th>Erstellt</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Anna Müller</td>
|
||
<td>Aktiv</td>
|
||
<td>Admin</td>
|
||
<td>12. Jan 2025</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Ben Schmidt</td>
|
||
<td>Inaktiv</td>
|
||
<td>Nutzer</td>
|
||
<td>3. Feb 2025</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Clara Weber</td>
|
||
<td>Ausstehend</td>
|
||
<td>Editor</td>
|
||
<td>21. Mär 2025</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td colspan="3">Gesamt</td>
|
||
<td>3 Nutzer</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- BUTTONS -->
|
||
<section class="section" id="buttons">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Buttons</h2>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Varianten</p>
|
||
<div class="demo-preview">
|
||
<button class="btn btn-primary">Primary</button>
|
||
<button class="btn btn-secondary">Secondary</button>
|
||
<button class="btn btn-ghost">Ghost</button>
|
||
<button class="btn btn-danger">Danger</button>
|
||
<button class="btn btn-success">Success</button>
|
||
<button class="btn btn-secondary" disabled>Disabled</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Größen</p>
|
||
<div class="demo-preview demo-s30">
|
||
<button class="btn btn-primary btn-xs">XSmall</button>
|
||
<button class="btn btn-primary btn-sm">Small</button>
|
||
<button class="btn btn-primary">Default</button>
|
||
<button class="btn btn-primary btn-lg">Large</button>
|
||
<button class="btn btn-primary btn-xl">XLarge</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Mit Icon</p>
|
||
<div class="demo-preview">
|
||
<button class="btn btn-primary">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
Neu erstellen
|
||
</button>
|
||
<button class="btn btn-secondary">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||
<polyline points="7 10 12 15 17 10" />
|
||
<line x1="12" y1="15" x2="12" y2="3" />
|
||
</svg>
|
||
Export
|
||
</button>
|
||
<button class="btn btn-ghost btn-icon" title="Einstellungen">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="3" />
|
||
<path
|
||
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Button Group & Segmented Control</p>
|
||
<div class="demo-preview demo-col">
|
||
<div class="button-group" role="group" aria-label="Ansicht wechseln">
|
||
<button class="btn btn-secondary">Liste</button>
|
||
<button class="btn btn-secondary">Board</button>
|
||
<button class="btn btn-secondary">Kalender</button>
|
||
</div>
|
||
|
||
<fieldset class="form-group demo-s31">
|
||
<legend>Zeitraum</legend>
|
||
<div class="segmented" role="radiogroup" aria-label="Zeitraum wählen">
|
||
<label class="segmented-option" for="range-day">
|
||
<input class="segmented-input" type="radio" name="range" id="range-day">
|
||
<span class="segmented-button">Tag</span>
|
||
</label>
|
||
<label class="segmented-option" for="range-week">
|
||
<input class="segmented-input" type="radio" name="range" id="range-week" checked>
|
||
<span class="segmented-button">Woche</span>
|
||
</label>
|
||
<label class="segmented-option" for="range-month">
|
||
<input class="segmented-input" type="radio" name="range" id="range-month">
|
||
<span class="segmented-button">Monat</span>
|
||
</label>
|
||
<label class="segmented-option" for="range-quarter">
|
||
<input class="segmented-input" type="radio" name="range" id="range-quarter" disabled>
|
||
<span class="segmented-button">Quartal</span>
|
||
</label>
|
||
</div>
|
||
<span class="form-hint">Für serverseitige Filter oder Ansichtsauswahl ohne zusätzliche
|
||
JavaScript-Logik.</span>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- BADGES -->
|
||
<section class="section" id="badges">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Badges</h2>
|
||
</div>
|
||
<div class="demo-preview">
|
||
<span class="badge badge-default">Default</span>
|
||
<span class="badge badge-primary">Primary</span>
|
||
<span class="badge badge-success">Erfolg</span>
|
||
<span class="badge badge-warning">Warnung</span>
|
||
<span class="badge badge-danger">Fehler</span>
|
||
<span class="badge badge-info">Info</span>
|
||
<span class="badge badge-outline">Outline</span>
|
||
<span class="badge badge-success badge-dot">Live</span>
|
||
<span class="badge badge-danger badge-dot">Offline</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CARDS -->
|
||
<section class="section" id="cards">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Cards</h2>
|
||
</div>
|
||
|
||
<div class="grid-2 grid demo-s27">
|
||
<!-- Standard Card -->
|
||
<div class="card card-hover">
|
||
<div class="card-header">
|
||
<h3>Projekt Alpha</h3>
|
||
<span class="badge badge-success badge-dot">Aktiv</span>
|
||
</div>
|
||
<div class="card-body stack-sm stack">
|
||
<p class="text-muted text-sm">Vollständige Card mit Header, Body und Footer. Hover für Shadow-Effekt.
|
||
</p>
|
||
<div class="cluster">
|
||
<div class="avatar">AM</div>
|
||
<div class="avatar demo-s32">BS</div>
|
||
<span class="text-sm text-muted">+ 3 weitere</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<button class="btn btn-ghost btn-sm">Details</button>
|
||
<button class="btn btn-primary btn-sm ml-auto">Öffnen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ghost Card -->
|
||
<div class="card card-ghost">
|
||
<div class="card-body">
|
||
<div class="stat">
|
||
<span class="stat-label">Gesamtumsatz</span>
|
||
<span class="stat-value">€ 48.291</span>
|
||
<span class="stat-change up">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2.5">
|
||
<polyline points="18 15 12 9 6 15" />
|
||
</svg>
|
||
+12.4% diesen Monat
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Raised Card -->
|
||
<div class="card card-raised">
|
||
<div class="card-body stack-sm stack">
|
||
<h4>Fortschritt</h4>
|
||
<div class="stack-sm stack">
|
||
<div class="flex-between flex">
|
||
<span class="text-sm text-muted">Onboarding</span>
|
||
<span class="text-sm font-medium">80%</span>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar" data-progress="80"></div>
|
||
</div>
|
||
</div>
|
||
<div class="stack-sm stack">
|
||
<div class="flex-between flex">
|
||
<span class="text-sm text-muted">Tests</span>
|
||
<span class="text-sm font-medium">45%</span>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar warning" data-progress="45"></div>
|
||
</div>
|
||
</div>
|
||
<div class="stack-sm stack">
|
||
<div class="flex-between flex">
|
||
<span class="text-sm text-muted">Deployment</span>
|
||
<span class="text-sm font-medium">12%</span>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar danger" data-progress="12"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Image Card -->
|
||
<div class="card card-hover">
|
||
<div class="demo-s36"
|
||
>
|
||
<svg class="demo-s37" viewBox="0 0 400 225"
|
||
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
|
||
<circle cx="100" cy="60" r="80" fill="var(--accent)" />
|
||
<circle cx="320" cy="180" r="120" fill="var(--accent)" />
|
||
<rect x="150" y="30" width="200" height="140" rx="16" fill="var(--accent)" opacity="0.5" />
|
||
</svg>
|
||
<div class="demo-s38">
|
||
<span class="demo-s39">🖼</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-body stack-sm stack">
|
||
<div class="flex-between flex">
|
||
<span class="badge badge-primary">Tutorial</span>
|
||
<span class="text-xs text-muted">5 Min. Lesezeit</span>
|
||
</div>
|
||
<h4 class="demo-s40">CSS Custom Properties richtig einsetzen</h4>
|
||
<p class="text-muted text-sm">Wie du mit einem einzigen Token-System konsistente Designs über mehrere
|
||
Projekte hinweg erreichst.</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="avatar avatar-sm">MW</div>
|
||
<span class="text-sm text-muted">Max Weber</span>
|
||
<button class="btn btn-ghost btn-sm ml-auto">Lesen →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Empty State Card -->
|
||
<div class="card">
|
||
<div class="empty">
|
||
<svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M3 7l9-4 9 4v10l-9 4-9-4V7z" />
|
||
<path d="M12 3v18" />
|
||
<path d="M3 7l9 4 9-4" />
|
||
</svg>
|
||
<p class="empty-title">Keine Einträge</p>
|
||
<p class="empty-description">Erstelle deinen ersten Eintrag, um hier Daten zu sehen.</p>
|
||
<button class="btn btn-primary btn-sm">Erstellen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FORMS COMPONENTS -->
|
||
<section class="section" id="forms">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Formulare (Opt-in Klassen)</h2>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>Nutzerdaten bearbeiten</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="stack">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="fn">Vorname</label>
|
||
<input type="text" id="fn" placeholder="Max">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="ln">Nachname</label>
|
||
<input type="text" id="ln" placeholder="Mustermann">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="email">E-Mail</label>
|
||
<div class="input-group">
|
||
<span class="input-group-prefix">@</span>
|
||
<input type="email" id="email" placeholder="max@beispiel.de">
|
||
</div>
|
||
<span class="form-hint">Wird für Login und Benachrichtigungen verwendet.</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="url-input">Website</label>
|
||
<div class="input-group">
|
||
<input type="text" id="url-input" placeholder="meineseite">
|
||
<span class="input-group-suffix">.de</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="pwd-err">Passwort (Fehler)</label>
|
||
<input type="password" id="pwd-err" class="error" value="123">
|
||
<span class="form-error">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2.5">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<line x1="12" y1="8" x2="12" y2="12" />
|
||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||
</svg>
|
||
Mindestens 8 Zeichen erforderlich.
|
||
</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="role">Rolle</label>
|
||
<select id="role">
|
||
<option>Administrator</option>
|
||
<option>Editor</option>
|
||
<option>Nutzer</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="contract-upload">Vertragsdokument</label>
|
||
<label class="file-upload" for="contract-upload">
|
||
<input class="file-upload-input" type="file" id="contract-upload">
|
||
<span class="file-upload-head">
|
||
<span class="file-upload-body">
|
||
<span class="file-upload-title">PDF oder DOCX hochladen</span>
|
||
<span class="file-upload-description">Für Angebote, Verträge oder Briefings ohne weitere
|
||
Upload-Logik.</span>
|
||
</span>
|
||
<span class="file-upload-button">Datei wählen</span>
|
||
</span>
|
||
<span class="file-upload-meta" aria-hidden="true">
|
||
<span>Max. 10 MB</span>
|
||
<span>PDF, DOCX</span>
|
||
</span>
|
||
</label>
|
||
<span class="form-hint">Die Datei wird beim Absenden des Formulars normal übertragen.</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="asset-upload">Brand Assets</label>
|
||
<label class="file-upload file-upload-dropzone is-error" for="asset-upload">
|
||
<input class="file-upload-input" type="file" id="asset-upload">
|
||
<span class="file-upload-head">
|
||
<span class="file-upload-body">
|
||
<span class="file-upload-title">Datei hier ablegen oder auswählen</span>
|
||
<span class="file-upload-description">Optionaler Dropzone-Look ohne Preview oder
|
||
Drag-and-drop-Logik.</span>
|
||
</span>
|
||
<span class="file-upload-button">Asset auswählen</span>
|
||
</span>
|
||
<span class="file-upload-meta" aria-hidden="true">
|
||
<span>SVG, PNG</span>
|
||
<span>Empfohlen: 2048 px</span>
|
||
</span>
|
||
</label>
|
||
<span class="form-error">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2.5">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<line x1="12" y1="8" x2="12" y2="12" />
|
||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||
</svg>
|
||
Bitte nur Logos im SVG- oder PNG-Format verwenden.
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<span class="demo-label">Benachrichtigungen</span>
|
||
<label class="switch" for="notify-comments">
|
||
<input class="switch-input" type="checkbox" id="notify-comments" checked>
|
||
<span class="switch-control" aria-hidden="true"></span>
|
||
<span class="switch-body">
|
||
<span class="switch-label">Kommentar-Benachrichtigungen</span>
|
||
<span class="switch-description">Informiert bei Antworten und Erwähnungen in Projekten.</span>
|
||
</span>
|
||
</label>
|
||
<label class="switch" for="notify-digest">
|
||
<input class="switch-input" type="checkbox" id="notify-digest">
|
||
<span class="switch-control" aria-hidden="true"></span>
|
||
<span class="switch-body">
|
||
<span class="switch-label">Tägliche Zusammenfassung</span>
|
||
<span class="switch-description">Sendet einmal täglich einen kompakten Statusbericht per
|
||
E-Mail.</span>
|
||
</span>
|
||
</label>
|
||
<label class="switch" for="notify-security">
|
||
<input class="switch-input" type="checkbox" id="notify-security" checked disabled>
|
||
<span class="switch-control" aria-hidden="true"></span>
|
||
<span class="switch-body">
|
||
<span class="switch-label">Sicherheitswarnungen</span>
|
||
<span class="switch-description">Bleibt aktiv, solange Zwei-Faktor-Anmeldung erzwungen ist.</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<button class="btn btn-ghost btn-sm">Abbrechen</button>
|
||
<button class="btn btn-primary btn-sm ml-auto">Speichern</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TABLES COMPONENT -->
|
||
<section class="section" id="tables">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Tabellen (table-wrap)</h2>
|
||
</div>
|
||
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Nutzer</th>
|
||
<th>Status</th>
|
||
<th>Rolle</th>
|
||
<th>Letzter Login</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<div class="flex-start flex gap-3">
|
||
<div class="avatar avatar-sm">AM</div>
|
||
<div>
|
||
<div class="font-medium">Anna Müller</div>
|
||
<div class="text-xs text-muted">anna@beispiel.de</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span class="badge badge-success badge-dot">Aktiv</span></td>
|
||
<td><span class="badge badge-default">Admin</span></td>
|
||
<td class="text-muted text-sm">Vor 2 Stunden</td>
|
||
<td>
|
||
<div class="dropdown" id="dd1">
|
||
<button class="btn btn-ghost btn-icon btn-sm" data-action="dropdown" data-target="dd1">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<circle cx="12" cy="5" r="1" />
|
||
<circle cx="12" cy="12" r="1" />
|
||
<circle cx="12" cy="19" r="1" />
|
||
</svg>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<div class="dropdown-label">Aktionen</div>
|
||
<button class="dropdown-item">Bearbeiten</button>
|
||
<button class="dropdown-item">Passwort zurücksetzen</button>
|
||
<div class="dropdown-divider"></div>
|
||
<button class="dropdown-item danger">Deaktivieren</button>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="flex-start flex gap-3">
|
||
<div class="avatar avatar-sm demo-s32">
|
||
BS</div>
|
||
<div>
|
||
<div class="font-medium">Ben Schmidt</div>
|
||
<div class="text-xs text-muted">ben@beispiel.de</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span class="badge badge-warning badge-dot">Ausstehend</span></td>
|
||
<td><span class="badge badge-default">Editor</span></td>
|
||
<td class="text-muted text-sm">Vor 3 Tagen</td>
|
||
<td>
|
||
<button class="btn btn-ghost btn-icon btn-sm">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<circle cx="12" cy="5" r="1" />
|
||
<circle cx="12" cy="12" r="1" />
|
||
<circle cx="12" cy="19" r="1" />
|
||
</svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="flex-start flex gap-3">
|
||
<div class="avatar avatar-sm demo-s41"
|
||
>CW</div>
|
||
<div>
|
||
<div class="font-medium">Clara Weber</div>
|
||
<div class="text-xs text-muted">clara@beispiel.de</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span class="badge badge-danger badge-dot">Inaktiv</span></td>
|
||
<td><span class="badge badge-default">Nutzer</span></td>
|
||
<td class="text-muted text-sm">Vor 2 Wochen</td>
|
||
<td>
|
||
<button class="btn btn-ghost btn-icon btn-sm">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<circle cx="12" cy="5" r="1" />
|
||
<circle cx="12" cy="12" r="1" />
|
||
<circle cx="12" cy="19" r="1" />
|
||
</svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="flex-between flex">
|
||
<span class="text-sm text-muted">1–3 von 24 Einträgen</span>
|
||
<ul class="pagination">
|
||
<li><a class="disabled" href="#">←</a></li>
|
||
<li><a class="active" href="#">1</a></li>
|
||
<li><a href="#">2</a></li>
|
||
<li><a href="#">3</a></li>
|
||
<li><a href="#">…</a></li>
|
||
<li><a href="#">8</a></li>
|
||
<li><a href="#">→</a></li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ALERTS -->
|
||
<section class="section" id="alerts">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Alerts</h2>
|
||
</div>
|
||
<div class="stack">
|
||
<div class="alert alert-info">
|
||
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<line x1="12" y1="16" x2="12" y2="12" />
|
||
<line x1="12" y1="8" x2="12.01" y2="8" />
|
||
</svg>
|
||
<div class="alert-content">
|
||
<p class="alert-title">Information</p>
|
||
<p>Deine Daten werden automatisch gespeichert. Du kannst jederzeit fortfahren.</p>
|
||
</div>
|
||
</div>
|
||
<div class="alert alert-success">
|
||
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
||
<polyline points="22 4 12 14.01 9 11.01" />
|
||
</svg>
|
||
<div class="alert-content">
|
||
<p class="alert-title">Erfolgreich gespeichert</p>
|
||
<p>Alle Änderungen wurden übernommen.</p>
|
||
</div>
|
||
</div>
|
||
<div class="alert alert-warning">
|
||
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
|
||
<line x1="12" y1="9" x2="12" y2="13" />
|
||
<line x1="12" y1="17" x2="12.01" y2="17" />
|
||
</svg>
|
||
<div class="alert-content">
|
||
<p class="alert-title">Abo läuft ab</p>
|
||
<p>Dein Abonnement endet in 7 Tagen. Bitte verlängere es rechtzeitig.</p>
|
||
</div>
|
||
</div>
|
||
<div class="alert alert-danger">
|
||
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<line x1="15" y1="9" x2="9" y2="15" />
|
||
<line x1="9" y1="9" x2="15" y2="15" />
|
||
</svg>
|
||
<div class="alert-content">
|
||
<p class="alert-title">Fehler aufgetreten</p>
|
||
<p>Die Anfrage konnte nicht verarbeitet werden. Bitte versuche es erneut.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- MODAL -->
|
||
<section class="section" id="modal">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Modal</h2>
|
||
</div>
|
||
<div class="demo-preview">
|
||
<button class="btn btn-primary" data-action="modal-open" data-target="demo-modal">Modal öffnen</button>
|
||
<button class="btn btn-secondary" data-action="modal-open" data-target="confirm-modal">Bestätigen-Dialog</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TABS -->
|
||
<section class="section" id="tabs">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Tabs</h2>
|
||
</div>
|
||
<div class="tabs">
|
||
<ul class="tab-list" role="tablist">
|
||
<li><button class="active" role="tab" data-action="tab" data-target="tab-overview">Übersicht</button></li>
|
||
<li><button role="tab" data-action="tab" data-target="tab-settings">Einstellungen</button></li>
|
||
<li><button role="tab" data-action="tab" data-target="tab-logs">Logs</button></li>
|
||
</ul>
|
||
<div id="tab-overview" class="tab-panel active">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<p class="text-muted">Inhalt des ersten Tab-Panels. Hier können beliebige Inhalte stehen.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="tab-settings" class="tab-panel">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<p class="text-muted">Einstellungen und Konfigurationsoptionen.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="tab-logs" class="tab-panel">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<pre><code>[2025-01-15 09:12:03] INFO Server gestartet
|
||
[2025-01-15 09:12:04] INFO Datenbank verbunden
|
||
[2025-01-15 09:15:22] WARN Hohe Speichernutzung</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ACCORDION -->
|
||
<section class="section" id="accordion">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Accordion</h2>
|
||
<p class="text-muted">Opt-in Pattern für gruppierte details-Elemente mit klaren Abständen und Varianten.</p>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Standard</p>
|
||
<div class="demo-preview demo-col">
|
||
<div class="accordion demo-s42">
|
||
<details class="accordion-item" open>
|
||
<summary>Was ist ein classless Framework?</summary>
|
||
<div class="accordion-body">
|
||
<p class="text-muted text-sm">Ein classless Framework stylt HTML-Elemente direkt, ohne dass
|
||
zusätzliche Klassen für jede Kleinigkeit nötig sind.</p>
|
||
<p class="text-muted text-sm">Für komplexere Muster wie gruppierte FAQs oder Einstellungsblöcke
|
||
kommen opt-in Komponentenklassen gezielt darüber.</p>
|
||
</div>
|
||
</details>
|
||
<details class="accordion-item">
|
||
<summary>Wie passe ich Farben an?</summary>
|
||
<div class="accordion-body">
|
||
<p class="text-muted text-sm">Alle Farben liegen in <code>tokens.css</code> als semantische Custom
|
||
Properties vor.</p>
|
||
<p class="text-muted text-sm">Typische Einstiegspunkte sind <code>--accent</code>,
|
||
<code>--bg</code>, <code>--surface</code> und <code>--text</code>.
|
||
</p>
|
||
</div>
|
||
</details>
|
||
<details class="accordion-item">
|
||
<summary>Wann nutze ich eine Accordion-Variante?</summary>
|
||
<div class="accordion-body">
|
||
<p class="text-muted text-sm">Für FAQ-Bereiche, Einstellungsgruppen oder kompakte
|
||
Informationslisten, die ohne JavaScript auskommen sollen.</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Flush & Muted</p>
|
||
<div class="demo-preview demo-col">
|
||
<div class="accordion accordion-flush demo-s42">
|
||
<details class="accordion-item" open>
|
||
<summary>API-Zugriff</summary>
|
||
<div class="accordion-body">
|
||
<p class="text-muted text-sm">Flush eignet sich für Listen mit durchgehender Kante, etwa in
|
||
Sidepanels oder Settings-Cards.</p>
|
||
</div>
|
||
</details>
|
||
<details class="accordion-item">
|
||
<summary>Webhooks</summary>
|
||
<div class="accordion-body">
|
||
<p class="text-muted text-sm">Die Einträge schließen nahtlos aneinander an, bleiben aber technisch
|
||
eigenständige details-Elemente.</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<div class="accordion accordion-muted demo-s42">
|
||
<details class="accordion-item">
|
||
<summary>Hinweise für Teams</summary>
|
||
<div class="accordion-body">
|
||
<p class="text-muted text-sm">Muted hebt den Container subtil gegen sehr helle Oberflächen ab und
|
||
passt gut zu Hilfstexten oder begleitenden FAQs.</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FEEDBACK -->
|
||
<section class="section" id="feedback">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Feedback & Status</h2>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Spinner</p>
|
||
<div class="demo-preview demo-s30">
|
||
<div class="spinner spinner-sm"></div>
|
||
<div class="spinner"></div>
|
||
<div class="spinner spinner-lg"></div>
|
||
<button class="btn btn-primary" disabled>
|
||
<div class="spinner spinner-sm demo-s43">
|
||
</div>
|
||
Laden…
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Skeleton</p>
|
||
<div class="demo-preview demo-col demo-s44">
|
||
<div class="skeleton demo-s45"></div>
|
||
<div class="skeleton demo-s46"></div>
|
||
<div class="skeleton demo-s47"></div>
|
||
<div class="skeleton demo-s48"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Toast (simuliert)</p>
|
||
<div class="demo-preview">
|
||
<button class="btn btn-secondary" data-action="demo-toast">Toast anzeigen</button>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- TOP NAVIGATION -->
|
||
<section class="section" id="navigation">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Navigation</h2>
|
||
<p class="text-muted">Top Navigation und Breadcrumbs für hierarchische Seitenpfade.</p>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Breadcrumbs</p>
|
||
<div class="demo-preview demo-col">
|
||
<nav class="breadcrumbs" aria-label="Breadcrumb">
|
||
<ol>
|
||
<li><a href="#">Dashboard</a></li>
|
||
<li><a href="#">Projekte</a></li>
|
||
<li><a href="#">Kundenportal</a></li>
|
||
<li><span aria-current="page">Einstellungen</span></li>
|
||
</ol>
|
||
</nav>
|
||
<p class="text-sm text-muted">Semantisch als <code>nav</code> mit <code>ol</code>, mobil horizontal
|
||
scrollbar und ohne JavaScript nutzbar.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Standard Topnav</p>
|
||
<div class="demo-s49"
|
||
>
|
||
<nav class="topnav topnav-static">
|
||
<div class="topnav-inner">
|
||
<a class="topnav-brand" href="#">
|
||
<svg class="topnav-brand-logo" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<rect width="28" height="28" rx="8" fill="var(--accent)" />
|
||
<path d="M8 14 L14 8 L20 14 L14 20 Z" fill="white" />
|
||
</svg>
|
||
Acme
|
||
</a>
|
||
<ul class="topnav-links">
|
||
<li><a href="#" class="active">Dashboard</a></li>
|
||
<li><a href="#">Projekte</a></li>
|
||
<li>
|
||
<button data-action="nav-dropdown">
|
||
Mehr
|
||
<svg class="nav-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2.5">
|
||
<polyline points="6 9 12 15 18 9" />
|
||
</svg>
|
||
</button>
|
||
<div class="topnav-dropdown">
|
||
<div class="dropdown-label">Weitere Seiten</div>
|
||
<a href="#">Einstellungen</a>
|
||
<a href="#">Team</a>
|
||
<a href="#">Dokumentation</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a href="#">API</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div class="topnav-end">
|
||
<button class="btn btn-ghost btn-sm">Anmelden</button>
|
||
<button class="btn btn-primary btn-sm">Registrieren</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<div class="demo-s50"
|
||
>
|
||
Seiteninhalt</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Mit Avatar & User-Dropdown (App-Nav)</p>
|
||
<div class="demo-s49"
|
||
>
|
||
<nav class="topnav topnav-static">
|
||
<div class="topnav-inner">
|
||
<a class="topnav-brand" href="#">⬡ MyApp</a>
|
||
<ul class="topnav-links">
|
||
<li><a href="#" class="active">Übersicht</a></li>
|
||
<li><a href="#">Daten</a></li>
|
||
<li><a href="#">Berichte</a></li>
|
||
</ul>
|
||
<div class="topnav-end">
|
||
<span class="topnav-sep"></span>
|
||
<!-- User-Dropdown -->
|
||
<div class="dropdown" id="user-dd">
|
||
<button class="btn btn-ghost btn-sm demo-s51"
|
||
data-action="dropdown" data-target="user-dd">
|
||
<div class="avatar avatar-sm">AM</div>
|
||
<span class="hide-mobile">Anna M.</span>
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2.5">
|
||
<polyline points="6 9 12 15 18 9" />
|
||
</svg>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<div class="dropdown-header">
|
||
<div class="avatar">AM</div>
|
||
<div>
|
||
<div class="dropdown-header-name">Anna Müller</div>
|
||
<div class="dropdown-header-sub">anna@beispiel.de</div>
|
||
</div>
|
||
</div>
|
||
<button class="dropdown-item">Profil</button>
|
||
<button class="dropdown-item">Einstellungen</button>
|
||
<div class="dropdown-divider"></div>
|
||
<button class="dropdown-item danger">Abmelden</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<div class="demo-s50"
|
||
>
|
||
App-Inhalt</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SIDEBAR -->
|
||
<section class="section" id="sidebar-demo">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Sidebar</h2>
|
||
<p class="text-muted">Mit Header, kollapsiblen Gruppen, Badges und User-Footer.</p>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Vollständige App-Sidebar</p>
|
||
<div class="demo-s52"
|
||
>
|
||
<aside class="sidebar demo-s53">
|
||
<div class="sidebar-header">
|
||
<div class="demo-s54">
|
||
<div class="demo-s55"
|
||
>
|
||
<svg width="12" height="12" viewBox="0 0 28 28" fill="none">
|
||
<path d="M4 14 L14 4 L24 14 L14 24 Z" fill="white" />
|
||
</svg>
|
||
</div>
|
||
<span class="demo-s56">Acme Inc.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="sidebar-nav">
|
||
<div class="sidebar-section">Haupt</div>
|
||
<a href="#" class="active">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="3" y="3" width="7" height="7" />
|
||
<rect x="14" y="3" width="7" height="7" />
|
||
<rect x="3" y="14" width="7" height="7" />
|
||
<rect x="14" y="14" width="7" height="7" />
|
||
</svg>
|
||
Dashboard
|
||
</a>
|
||
<a href="#">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
||
<polyline points="14 2 14 8 20 8" />
|
||
</svg>
|
||
Projekte
|
||
<span class="nav-count">4</span>
|
||
</a>
|
||
<a href="#">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||
<circle cx="9" cy="7" r="4" />
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||
</svg>
|
||
Team
|
||
</a>
|
||
|
||
<div class="sidebar-section">Analyse</div>
|
||
<details class="sidebar-group" open>
|
||
<summary>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<line x1="18" y1="20" x2="18" y2="10" />
|
||
<line x1="12" y1="20" x2="12" y2="4" />
|
||
<line x1="6" y1="20" x2="6" y2="14" />
|
||
</svg>
|
||
Berichte
|
||
</summary>
|
||
<div class="sidebar-group-items">
|
||
<a href="#">Umsatz</a>
|
||
<a href="#">Nutzer</a>
|
||
<a href="#">Traffic</a>
|
||
</div>
|
||
</details>
|
||
<a href="#">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<line x1="12" y1="8" x2="12" y2="12" />
|
||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||
</svg>
|
||
Logs
|
||
<span class="nav-count">12</span>
|
||
</a>
|
||
</nav>
|
||
|
||
<div class="sidebar-footer">
|
||
<a href="#" class="sidebar-user">
|
||
<div class="avatar avatar-sm">AM</div>
|
||
<div class="sidebar-user-info">
|
||
<div class="sidebar-user-name">Anna Müller</div>
|
||
<div class="sidebar-user-role">Administrator</div>
|
||
</div>
|
||
<svg class="demo-s57" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
>
|
||
<circle cx="12" cy="12" r="1" />
|
||
<circle cx="19" cy="12" r="1" />
|
||
<circle cx="5" cy="12" r="1" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</aside>
|
||
<div class="demo-s58"
|
||
>
|
||
Hauptinhalt
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<section class="section" id="footer-demo">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Footer</h2>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Einfacher Footer (eine Zeile)</p>
|
||
<div class="demo-s59">
|
||
<footer class="footer">
|
||
<div class="footer-inner">
|
||
<a class="footer-brand" href="#">⬡ CSS-Framework</a>
|
||
<ul class="footer-links">
|
||
<li><a href="#">Impressum</a></li>
|
||
<li><a href="#">Datenschutz</a></li>
|
||
<li><a href="#">AGB</a></li>
|
||
<li><a href="#">Kontakt</a></li>
|
||
</ul>
|
||
<p class="footer-copy">© 2025 Acme GmbH</p>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<p class="demo-label">Mehrspaltig mit Footer-Bottom</p>
|
||
<div class="demo-s59">
|
||
<footer class="footer footer-full">
|
||
<div class="footer-inner">
|
||
<div class="footer-col demo-s60">
|
||
<a class="footer-brand demo-s61" href="#">⬡ CSS-Framework</a>
|
||
<p class="demo-s62">Ein schlankes
|
||
CSS-Framework für konsistente Jinja2/HTMX-Webapps.</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<p class="footer-col-title">Produkt</p>
|
||
<a href="#">Features</a>
|
||
<a href="#">Changelog</a>
|
||
<a href="#">Roadmap</a>
|
||
<a href="#">Preise</a>
|
||
</div>
|
||
<div class="footer-col">
|
||
<p class="footer-col-title">Ressourcen</p>
|
||
<a href="#">Dokumentation</a>
|
||
<a href="#">Beispiele</a>
|
||
<a href="#">Blog</a>
|
||
<a href="#">GitHub</a>
|
||
</div>
|
||
<div class="footer-col">
|
||
<p class="footer-col-title">Unternehmen</p>
|
||
<a href="#">Über uns</a>
|
||
<a href="#">Team</a>
|
||
<a href="#">Kontakt</a>
|
||
<a href="#">Impressum</a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom demo-s63">
|
||
<span>© 2025 Acme GmbH — Alle Rechte vorbehalten</span>
|
||
<ul class="footer-social">
|
||
<li>
|
||
<a href="#" title="GitHub">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path
|
||
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" title="Twitter / X">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path
|
||
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" title="LinkedIn">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
|
||
<rect x="2" y="9" width="4" height="12" />
|
||
<circle cx="4" cy="4" r="2" />
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DROPDOWNS ERWEITERT -->
|
||
<section class="section" id="dropdowns">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Dropdowns</h2>
|
||
<p class="text-muted">Verschiedene Varianten: Standard, User, Filter mit Checkmarks, Rich Items.</p>
|
||
</div>
|
||
|
||
<div class="demo-preview demo-s64"
|
||
>
|
||
|
||
<!-- Standard -->
|
||
<div>
|
||
<p class="text-xs text-muted demo-s61">Standard</p>
|
||
<div class="dropdown" id="dd-std">
|
||
<button class="btn btn-secondary" data-action="dropdown" data-target="dd-std">
|
||
Aktionen
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||
<polyline points="6 9 12 15 18 9" />
|
||
</svg>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<button class="dropdown-item">Bearbeiten</button>
|
||
<button class="dropdown-item">Duplizieren</button>
|
||
<button class="dropdown-item">Exportieren</button>
|
||
<div class="dropdown-divider"></div>
|
||
<button class="dropdown-item danger">Löschen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Filter mit Checkmarks -->
|
||
<div>
|
||
<p class="text-xs text-muted demo-s61">Filter</p>
|
||
<div class="dropdown" id="dd-filter">
|
||
<button class="btn btn-secondary" data-action="dropdown" data-target="dd-filter">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
|
||
</svg>
|
||
Filter
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<div class="dropdown-label">Status</div>
|
||
<button class="dropdown-item dropdown-item-check checked"
|
||
data-action="toggle-class" data-class="checked">Aktiv</button>
|
||
<button class="dropdown-item dropdown-item-check"
|
||
data-action="toggle-class" data-class="checked">Inaktiv</button>
|
||
<button class="dropdown-item dropdown-item-check checked"
|
||
data-action="toggle-class" data-class="checked">Ausstehend</button>
|
||
<div class="dropdown-divider"></div>
|
||
<div class="dropdown-label">Rolle</div>
|
||
<button class="dropdown-item dropdown-item-check"
|
||
data-action="toggle-class" data-class="checked">Admin</button>
|
||
<button class="dropdown-item dropdown-item-check checked"
|
||
data-action="toggle-class" data-class="checked">Nutzer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rich Items -->
|
||
<div>
|
||
<p class="text-xs text-muted demo-s61">Rich Items</p>
|
||
<div class="dropdown" id="dd-rich">
|
||
<button class="btn btn-secondary" data-action="dropdown" data-target="dd-rich">
|
||
Neu erstellen
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||
<polyline points="6 9 12 15 18 9" />
|
||
</svg>
|
||
</button>
|
||
<div class="dropdown-menu dropdown-wide">
|
||
<div class="dropdown-label">Typ wählen</div>
|
||
<button class="dropdown-item dropdown-item-rich">
|
||
<div class="dropdown-item-title">Projekt</div>
|
||
<div class="dropdown-item-desc">Neue Projektmappe mit Team und Aufgaben</div>
|
||
</button>
|
||
<button class="dropdown-item dropdown-item-rich">
|
||
<div class="dropdown-item-title">Dokument</div>
|
||
<div class="dropdown-item-desc">Leeres Dokument im Editor öffnen</div>
|
||
</button>
|
||
<button class="dropdown-item dropdown-item-rich">
|
||
<div class="dropdown-item-title">Report</div>
|
||
<div class="dropdown-item-desc">Automatisch generierter Bericht</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Nach oben öffnend -->
|
||
<div class="demo-s65">
|
||
<p class="text-xs text-muted demo-s61">Nach oben</p>
|
||
<div class="dropdown" id="dd-top">
|
||
<button class="btn btn-ghost btn-sm" data-action="dropdown" data-target="dd-top">↑ Öffnet oben</button>
|
||
<div class="dropdown-menu dropdown-menu-top">
|
||
<button class="dropdown-item">Option A</button>
|
||
<button class="dropdown-item">Option B</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ALIGNMENT UTILITIES -->
|
||
<section class="section" id="alignment">
|
||
<div class="section-header">
|
||
<p class="section-label">Utilities</p>
|
||
<h2>Alignment</h2>
|
||
<p class="text-muted">Standalone <code>align-items</code>, <code>justify-content</code> und <code>align-self</code> — kombinierbar mit <code>.flex</code> und <code>.grid-u</code>.</p>
|
||
</div>
|
||
|
||
<div class="stack">
|
||
|
||
<!-- items-* -->
|
||
<div>
|
||
<p class="text-sm font-semibold mb-2">align-items — <code>.items-*</code></p>
|
||
<div class="stack stack-sm">
|
||
<div class="flex items-start gap-2 bg-subtle rounded-lg p-4 demo-s66">
|
||
<div class="bg-surface border rounded p-2 text-sm">.items-start</div>
|
||
<div class="bg-surface border rounded p-2 text-sm demo-s67">höher</div>
|
||
<div class="bg-surface border rounded p-2 text-sm">kurz</div>
|
||
</div>
|
||
<div class="flex items-center gap-2 bg-subtle rounded-lg p-4 demo-s66">
|
||
<div class="bg-surface border rounded p-2 text-sm">.items-center</div>
|
||
<div class="bg-surface border rounded p-2 text-sm demo-s67">höher</div>
|
||
<div class="bg-surface border rounded p-2 text-sm">kurz</div>
|
||
</div>
|
||
<div class="flex items-end gap-2 bg-subtle rounded-lg p-4 demo-s66">
|
||
<div class="bg-surface border rounded p-2 text-sm">.items-end</div>
|
||
<div class="bg-surface border rounded p-2 text-sm demo-s67">höher</div>
|
||
<div class="bg-surface border rounded p-2 text-sm">kurz</div>
|
||
</div>
|
||
<div class="flex items-stretch gap-2 bg-subtle rounded-lg p-4 demo-s66">
|
||
<div class="bg-surface border rounded p-2 text-sm">.items-stretch</div>
|
||
<div class="bg-surface border rounded p-2 text-sm">füllt Höhe</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- justify-* -->
|
||
<div>
|
||
<p class="text-sm font-semibold mb-2">justify-content — <code>.justify-*</code></p>
|
||
<div class="stack stack-sm">
|
||
<div class="flex justify-start gap-2 bg-subtle rounded-lg p-4">
|
||
<div class="bg-surface border rounded p-2 text-sm">.justify-start</div>
|
||
<div class="bg-surface border rounded p-2 text-sm">B</div>
|
||
</div>
|
||
<div class="flex justify-center gap-2 bg-subtle rounded-lg p-4">
|
||
<div class="bg-surface border rounded p-2 text-sm">.justify-center</div>
|
||
<div class="bg-surface border rounded p-2 text-sm">B</div>
|
||
</div>
|
||
<div class="flex justify-end gap-2 bg-subtle rounded-lg p-4">
|
||
<div class="bg-surface border rounded p-2 text-sm">.justify-end</div>
|
||
<div class="bg-surface border rounded p-2 text-sm">B</div>
|
||
</div>
|
||
<div class="flex justify-between bg-subtle rounded-lg p-4">
|
||
<div class="bg-surface border rounded p-2 text-sm">.justify-between</div>
|
||
<div class="bg-surface border rounded p-2 text-sm">rechts</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- self-* -->
|
||
<div>
|
||
<p class="text-sm font-semibold mb-2">align-self auf Kind-Elementen — <code>.self-*</code></p>
|
||
<div class="flex items-stretch gap-2 bg-subtle rounded-lg p-4 demo-s68">
|
||
<div class="bg-surface border rounded p-2 text-sm self-start">.self-start</div>
|
||
<div class="bg-surface border rounded p-2 text-sm self-center">.self-center</div>
|
||
<div class="bg-surface border rounded p-2 text-sm self-end">.self-end</div>
|
||
<div class="bg-surface border rounded p-2 text-sm self-stretch">.self-stretch</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Kombinations-Beispiel -->
|
||
<div>
|
||
<p class="text-sm font-semibold mb-2">Typisches Kompositions-Beispiel</p>
|
||
<div class="card">
|
||
<div class="card-body flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<div class="avatar avatar-sm">AM</div>
|
||
<div>
|
||
<p class="font-semibold">Anna Müller</p>
|
||
<p class="text-sm text-muted">anna@beispiel.de</p>
|
||
</div>
|
||
</div>
|
||
<span class="badge badge-success">Aktiv</span>
|
||
</div>
|
||
</div>
|
||
<pre class="mt-2"><code class="text-xs"><div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3">...</div>
|
||
<span class="badge badge-success">Aktiv</span>
|
||
</div></code></pre>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- META LIST -->
|
||
<section class="section" id="meta-list">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Meta List / Definition List</h2>
|
||
<p class="text-muted">Label-Wert-Paare für Detailseiten, Profile und Systeminfos.</p>
|
||
</div>
|
||
<div class="demo-preview demo-s69">
|
||
|
||
<div>
|
||
<p class="text-xs text-muted mb-2">Standard (zweispaltig)</p>
|
||
<dl class="meta-list">
|
||
<div class="meta-item">
|
||
<dt class="meta-label">Status</dt>
|
||
<dd class="meta-value"><span class="badge badge-success badge-dot">Aktiv</span></dd>
|
||
</div>
|
||
<div class="meta-item">
|
||
<dt class="meta-label">Erstellt am</dt>
|
||
<dd class="meta-value">12. Januar 2025</dd>
|
||
</div>
|
||
<div class="meta-item">
|
||
<dt class="meta-label">Verantwortlich</dt>
|
||
<dd class="meta-value">
|
||
<div class="flex items-center gap-2">
|
||
<div class="avatar avatar-sm">AM</div>
|
||
Anna Müller
|
||
</div>
|
||
</dd>
|
||
</div>
|
||
<div class="meta-item">
|
||
<dt class="meta-label">Abteilung</dt>
|
||
<dd class="meta-value">Design</dd>
|
||
</div>
|
||
<div class="meta-item">
|
||
<dt class="meta-label">Letzter Login</dt>
|
||
<dd class="meta-value text-muted">vor 2 Stunden</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
|
||
<div class="grid grid-2">
|
||
<div>
|
||
<p class="text-xs text-muted mb-2">Gestapelt (.meta-list-stacked)</p>
|
||
<dl class="meta-list meta-list-stacked meta-list-flush">
|
||
<div class="meta-item">
|
||
<dt class="meta-label">Projektname</dt>
|
||
<dd class="meta-value">Acme Redesign</dd>
|
||
</div>
|
||
<div class="meta-item">
|
||
<dt class="meta-label">Deadline</dt>
|
||
<dd class="meta-value">30. Juni 2025</dd>
|
||
</div>
|
||
<div class="meta-item">
|
||
<dt class="meta-label">Budget</dt>
|
||
<dd class="meta-value">€ 24.000</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
<div>
|
||
<p class="text-xs text-muted mb-2">Kompakt (.meta-list-compact)</p>
|
||
<dl class="meta-list meta-list-compact">
|
||
<div class="meta-item">
|
||
<dt class="meta-label">Version</dt>
|
||
<dd class="meta-value">2.4.1</dd>
|
||
</div>
|
||
<div class="meta-item">
|
||
<dt class="meta-label">Node</dt>
|
||
<dd class="meta-value font-mono">20.11.0</dd>
|
||
</div>
|
||
<div class="meta-item">
|
||
<dt class="meta-label">Umgebung</dt>
|
||
<dd class="meta-value"><span class="badge badge-info">Staging</span></dd>
|
||
</div>
|
||
<div class="meta-item">
|
||
<dt class="meta-label">Region</dt>
|
||
<dd class="meta-value">eu-central-1</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FILTER CHIPS -->
|
||
<section class="section" id="chips">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Filter Chips</h2>
|
||
<p class="text-muted">Checkbox- oder Radio-Basis. Kein JavaScript nötig.</p>
|
||
</div>
|
||
<div class="demo-preview demo-s70">
|
||
|
||
<div>
|
||
<p class="text-xs text-muted mb-2">Mehrfachauswahl (Checkboxen)</p>
|
||
<div class="chip-group">
|
||
<label class="chip">
|
||
<input class="chip-input" type="checkbox" checked>
|
||
<span class="chip-label">Design</span>
|
||
</label>
|
||
<label class="chip">
|
||
<input class="chip-input" type="checkbox" checked>
|
||
<span class="chip-label">Entwicklung</span>
|
||
</label>
|
||
<label class="chip">
|
||
<input class="chip-input" type="checkbox">
|
||
<span class="chip-label">Marketing</span>
|
||
</label>
|
||
<label class="chip">
|
||
<input class="chip-input" type="checkbox">
|
||
<span class="chip-label">Vertrieb</span>
|
||
</label>
|
||
<label class="chip">
|
||
<input class="chip-input" type="checkbox" disabled>
|
||
<span class="chip-label">Gesperrt</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="text-xs text-muted mb-2">Einzelauswahl (Radio)</p>
|
||
<div class="chip-group">
|
||
<label class="chip">
|
||
<input class="chip-input" type="radio" name="status" checked>
|
||
<span class="chip-label">Alle</span>
|
||
</label>
|
||
<label class="chip">
|
||
<input class="chip-input" type="radio" name="status">
|
||
<span class="chip-label">Aktiv</span>
|
||
</label>
|
||
<label class="chip">
|
||
<input class="chip-input" type="radio" name="status">
|
||
<span class="chip-label">Inaktiv</span>
|
||
</label>
|
||
<label class="chip">
|
||
<input class="chip-input" type="radio" name="status">
|
||
<span class="chip-label">Ausstehend</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="text-xs text-muted mb-2">Klein (.chip-sm)</p>
|
||
<div class="chip-group chip-sm">
|
||
<label class="chip">
|
||
<input class="chip-input" type="checkbox" checked>
|
||
<span class="chip-label">Q1</span>
|
||
</label>
|
||
<label class="chip">
|
||
<input class="chip-input" type="checkbox">
|
||
<span class="chip-label">Q2</span>
|
||
</label>
|
||
<label class="chip">
|
||
<input class="chip-input" type="checkbox">
|
||
<span class="chip-label">Q3</span>
|
||
</label>
|
||
<label class="chip">
|
||
<input class="chip-input" type="checkbox">
|
||
<span class="chip-label">Q4</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TIMELINE -->
|
||
<section class="section" id="timeline">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Timeline / Activity Feed</h2>
|
||
<p class="text-muted">Vertikales Muster für Logs, Status-Historien und Prozessschritte.</p>
|
||
</div>
|
||
<div class="demo-preview demo-s71">
|
||
|
||
<div class="demo-s72">
|
||
<p class="text-xs text-muted mb-4">Standard mit Farbvarianten</p>
|
||
<div class="timeline">
|
||
<div class="timeline-item timeline-success">
|
||
<div class="timeline-marker">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-connector"></div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<p class="timeline-title">Deployment abgeschlossen</p>
|
||
<p class="timeline-meta">vor 2 Stunden</p>
|
||
<p class="timeline-body">Version 2.4.1 ist live auf Produktion.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item timeline-warning">
|
||
<div class="timeline-marker">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-connector"></div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<p class="timeline-title">Review ausstehend</p>
|
||
<p class="timeline-meta">vor 5 Stunden</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item timeline-accent">
|
||
<div class="timeline-marker">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-connector"></div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<p class="timeline-title">Branch erstellt</p>
|
||
<p class="timeline-meta">gestern</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-connector"></div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<p class="timeline-title">Ticket eröffnet</p>
|
||
<p class="timeline-meta">vor 3 Tagen</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- STEPPER -->
|
||
<section class="section" id="stepper">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Stepper / Progress Steps</h2>
|
||
<p class="text-muted">Rein visuelle Schrittanzeige. Kein JavaScript nötig.</p>
|
||
</div>
|
||
<div class="demo-preview demo-s69">
|
||
|
||
<div>
|
||
<p class="text-xs text-muted mb-4">Horizontal</p>
|
||
<div class="stepper">
|
||
<div class="step step-done">
|
||
<div class="step-indicator">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</div>
|
||
<span class="step-label">Konto</span>
|
||
</div>
|
||
<div class="step step-done">
|
||
<div class="step-indicator">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</div>
|
||
<span class="step-label">Profil</span>
|
||
</div>
|
||
<div class="step step-active">
|
||
<div class="step-indicator">3</div>
|
||
<span class="step-label">Zahlung</span>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-indicator">4</div>
|
||
<span class="step-label">Fertig</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="text-xs text-muted mb-4">Vertikal</p>
|
||
<div class="stepper stepper-vertical demo-s44">
|
||
<div class="step step-done">
|
||
<div class="step-indicator">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</div>
|
||
<div class="step-body">
|
||
<p class="step-title">Konto anlegen</p>
|
||
<p class="step-desc">E-Mail und Passwort festlegen.</p>
|
||
</div>
|
||
</div>
|
||
<div class="step step-active">
|
||
<div class="step-indicator">2</div>
|
||
<div class="step-body">
|
||
<p class="step-title">Profil ausfüllen</p>
|
||
<p class="step-desc">Name, Rolle und Profilbild.</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-indicator">3</div>
|
||
<div class="step-body">
|
||
<p class="step-title">Abschließen</p>
|
||
<p class="step-desc">Einstellungen bestätigen.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- LIST GROUP / ACTION LIST -->
|
||
<section class="section" id="list-group">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>List Group / Action List</h2>
|
||
<p class="text-muted">Kompaktes Pattern für Einstellungslisten, Menüs und Inbox-artige Ansichten.</p>
|
||
</div>
|
||
<div class="demo-preview demo-s73">
|
||
|
||
<div class="demo-s74">
|
||
<p class="text-xs text-muted mb-2">List Group</p>
|
||
<ul class="list-group">
|
||
<li class="list-item list-item-active">Dashboard</li>
|
||
<li class="list-item">Projekte</li>
|
||
<li class="list-item">Team</li>
|
||
<li class="list-item list-item-muted">Archiv</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="demo-s75">
|
||
<p class="text-xs text-muted mb-2">Action List</p>
|
||
<div class="action-list">
|
||
<a href="#" class="action-item">
|
||
<svg class="action-item-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
|
||
<div class="action-item-content">
|
||
<p class="action-item-title">Profil bearbeiten</p>
|
||
<p class="action-item-desc">Name, Avatar und Kontakt</p>
|
||
</div>
|
||
<svg class="action-item-end" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</a>
|
||
<a href="#" class="action-item">
|
||
<svg class="action-item-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||
<div class="action-item-content">
|
||
<p class="action-item-title">Sicherheit</p>
|
||
<p class="action-item-desc">Passwort und 2FA</p>
|
||
</div>
|
||
<svg class="action-item-end" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</a>
|
||
<button class="action-item action-item-danger">
|
||
<svg class="action-item-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/></svg>
|
||
<div class="action-item-content">
|
||
<p class="action-item-title">Konto löschen</p>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-s74">
|
||
<p class="text-xs text-muted mb-2">Kompakt + Flush</p>
|
||
<div class="action-list action-list-compact action-list-flush">
|
||
<a href="#" class="action-item">Übersicht</a>
|
||
<a href="#" class="action-item">Rechnungen</a>
|
||
<a href="#" class="action-item">Integrationen</a>
|
||
<a href="#" class="action-item">API-Schlüssel</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- RESPONSIVE TABLES -->
|
||
<section class="section" id="responsive-tables">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Responsive Table Patterns</h2>
|
||
<p class="text-muted">Sticky Header, Sticky erste Spalte, Mobile Key-Value-Stacking (<code>data-label</code> auf <code>td</code> erforderlich).</p>
|
||
</div>
|
||
<div class="stack">
|
||
|
||
<div>
|
||
<p class="text-xs text-muted mb-2">Sticky Header + Sticky erste Spalte (<code>.table-sticky .table-sticky-col</code>)</p>
|
||
<div class="table-wrap demo-s76">
|
||
<table class="table-sticky table-sticky-col">
|
||
<thead>
|
||
<tr><th>Name</th><th>Rolle</th><th>Status</th><th>Abteilung</th><th>Datum</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>Anna Müller</td><td>Admin</td><td><span class="badge badge-success badge-dot">Aktiv</span></td><td>Design</td><td>12.01.2025</td></tr>
|
||
<tr><td>Ben Schmidt</td><td>Editor</td><td><span class="badge badge-warning badge-dot">Ausstehend</span></td><td>Entwicklung</td><td>08.03.2025</td></tr>
|
||
<tr><td>Clara Hoffmann</td><td>Nutzer</td><td><span class="badge badge-success badge-dot">Aktiv</span></td><td>Marketing</td><td>22.02.2025</td></tr>
|
||
<tr><td>David Braun</td><td>Nutzer</td><td><span class="badge badge-danger badge-dot">Gesperrt</span></td><td>Vertrieb</td><td>05.04.2025</td></tr>
|
||
<tr><td>Eva Fischer</td><td>Admin</td><td><span class="badge badge-success badge-dot">Aktiv</span></td><td>Design</td><td>17.05.2025</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="text-xs text-muted mb-2">Mobile Key-Value-Stacking (<code>.table-stack</code>) — auf schmalen Viewports als Karten</p>
|
||
<div class="table-wrap">
|
||
<table class="table-stack">
|
||
<thead>
|
||
<tr><th>Name</th><th>Rolle</th><th>Status</th><th>Datum</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td data-label="Name">Anna Müller</td>
|
||
<td data-label="Rolle">Admin</td>
|
||
<td data-label="Status"><span class="badge badge-success badge-dot">Aktiv</span></td>
|
||
<td data-label="Datum">12.01.2025</td>
|
||
</tr>
|
||
<tr>
|
||
<td data-label="Name">Ben Schmidt</td>
|
||
<td data-label="Rolle">Editor</td>
|
||
<td data-label="Status"><span class="badge badge-warning badge-dot">Ausstehend</span></td>
|
||
<td data-label="Datum">08.03.2025</td>
|
||
</tr>
|
||
<tr>
|
||
<td data-label="Name">Clara Hoffmann</td>
|
||
<td data-label="Rolle">Nutzer</td>
|
||
<td data-label="Status"><span class="badge badge-success badge-dot">Aktiv</span></td>
|
||
<td data-label="Datum">22.02.2025</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DISMISSIBLE ALERT -->
|
||
<section class="section" id="dismissible-alert">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Dismissible Alert</h2>
|
||
<p class="text-muted">Alert mit Close-Button. Minimales JavaScript — <code>dismissAlert(btn)</code>.</p>
|
||
</div>
|
||
<div class="demo-preview demo-s77">
|
||
|
||
<div class="alert alert-success">
|
||
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||
<div class="alert-content">
|
||
<p class="alert-title">Erfolgreich gespeichert</p>
|
||
<p>Deine Änderungen wurden übernommen.</p>
|
||
</div>
|
||
<button class="alert-dismiss" data-action="alert-dismiss" aria-label="Schließen">✕</button>
|
||
</div>
|
||
|
||
<div class="alert alert-warning">
|
||
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||
<div class="alert-content">
|
||
<p class="alert-title">Abo läuft bald ab</p>
|
||
<p>Dein Plan endet in 7 Tagen.</p>
|
||
</div>
|
||
<button class="alert-dismiss" data-action="alert-dismiss" aria-label="Schließen">✕</button>
|
||
</div>
|
||
|
||
<div class="alert alert-danger">
|
||
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
|
||
<div class="alert-content">
|
||
<p class="alert-title">Fehler aufgetreten</p>
|
||
<p>Die Verbindung konnte nicht hergestellt werden.</p>
|
||
</div>
|
||
<button class="alert-dismiss" data-action="alert-dismiss" aria-label="Schließen">✕</button>
|
||
</div>
|
||
|
||
<div class="alert alert-info">
|
||
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||
<div class="alert-content">
|
||
<p>Neue Funktionen verfügbar — sieh dir die Versionshinweise an.</p>
|
||
</div>
|
||
<button class="alert-dismiss" data-action="alert-dismiss" aria-label="Schließen">✕</button>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SORTIERBARE TABELLEN -->
|
||
<section class="section" id="sortable-table">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Sortierbare Tabellen</h2>
|
||
<p class="text-muted"><code>.table-sortable</code> auf <code><table></code>, <code>data-action="sort"</code> und <code>data-sort=""</code> auf sortierbaren <code><th></code>.</p>
|
||
</div>
|
||
<div class="demo-preview">
|
||
<div class="table-wrap demo-s78">
|
||
<table class="table-sortable">
|
||
<thead>
|
||
<tr>
|
||
<th data-action="sort" data-sort="">Name</th>
|
||
<th data-action="sort" data-sort="">Abteilung</th>
|
||
<th>Status</th>
|
||
<th data-action="sort" data-sort="">Datum</th>
|
||
<th data-action="sort" data-sort="">Betrag</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>Anna Müller</td><td>Design</td><td><span class="badge badge-success badge-dot">Aktiv</span></td><td>12.01.2025</td><td>€ 4.200</td></tr>
|
||
<tr><td>Ben Schmidt</td><td>Entwicklung</td><td><span class="badge badge-warning badge-dot">Ausstehend</span></td><td>08.03.2025</td><td>€ 6.800</td></tr>
|
||
<tr><td>Clara Hoffmann</td><td>Marketing</td><td><span class="badge badge-success badge-dot">Aktiv</span></td><td>22.02.2025</td><td>€ 3.100</td></tr>
|
||
<tr><td>David Braun</td><td>Vertrieb</td><td><span class="badge badge-danger badge-dot">Gesperrt</span></td><td>05.04.2025</td><td>€ 5.500</td></tr>
|
||
<tr><td>Eva Fischer</td><td>Design</td><td><span class="badge badge-success badge-dot">Aktiv</span></td><td>17.05.2025</td><td>€ 2.900</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TOOLTIP -->
|
||
<section class="section" id="tooltip">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Tooltip</h2>
|
||
<p class="text-muted">CSS-only via <code>data-tooltip="..."</code>. Position über <code>data-tooltip-pos="top|bottom|left|right"</code> (Standard: top).</p>
|
||
</div>
|
||
<div class="demo-preview demo-s79">
|
||
|
||
<button class="btn btn-secondary" data-tooltip="Standardposition oben">
|
||
Hover mich (oben)
|
||
</button>
|
||
|
||
<button class="btn btn-secondary" data-tooltip="Position unten" data-tooltip-pos="bottom">
|
||
Hover mich (unten)
|
||
</button>
|
||
|
||
<button class="btn btn-secondary" data-tooltip="Position links" data-tooltip-pos="left">
|
||
Hover mich (links)
|
||
</button>
|
||
|
||
<button class="btn btn-secondary" data-tooltip="Position rechts" data-tooltip-pos="right">
|
||
Hover mich (rechts)
|
||
</button>
|
||
|
||
<span data-tooltip="Funktioniert auf jedem Element" class="badge badge-info demo-s80">
|
||
Badge mit Tooltip
|
||
</span>
|
||
|
||
<button class="btn btn-ghost btn-icon" data-tooltip="Einstellungen öffnen" aria-label="Einstellungen">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
|
||
</button>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TOAST -->
|
||
<section class="section" id="toast">
|
||
<div class="section-header">
|
||
<p class="section-label">Komponenten</p>
|
||
<h2>Toast</h2>
|
||
<p class="text-muted"><code>showToast(message, type)</code> — automatisch nach 4s entfernt, manuell über ✕ schließbar.</p>
|
||
</div>
|
||
<div class="demo-preview">
|
||
<button class="btn btn-secondary" data-action="demo-toast">Toast auslösen</button>
|
||
</div>
|
||
</section>
|
||
|
||
</div><!-- /stack -->
|
||
</main>
|
||
|
||
</div><!-- /docs-layout -->
|
||
|
||
<!-- MODALS -->
|
||
<div class="modal-backdrop" id="demo-modal" data-action="modal-backdrop">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3>Modal Titel</h3>
|
||
<button class="btn btn-ghost btn-icon btn-sm" data-action="modal-close" data-target="demo-modal">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<line x1="18" y1="6" x2="6" y2="18" />
|
||
<line x1="6" y1="6" x2="18" y2="18" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body stack">
|
||
<p class="text-muted">Modal-Inhalt hier. Formulare, Informationen oder komplexe Inhalte können hier platziert
|
||
werden.</p>
|
||
<div class="form-group">
|
||
<label>Beispielfeld</label>
|
||
<input type="text" placeholder="Eingabe…">
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-ghost" data-action="modal-close" data-target="demo-modal">Abbrechen</button>
|
||
<button class="btn btn-primary">Bestätigen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-backdrop" id="confirm-modal" data-action="modal-backdrop">
|
||
<div class="modal modal-sm">
|
||
<div class="modal-header">
|
||
<h3>Eintrag löschen?</h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p class="text-muted">Diese Aktion kann nicht rückgängig gemacht werden. Der Eintrag wird permanent gelöscht.
|
||
</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-ghost" data-action="modal-close" data-target="confirm-modal">Abbrechen</button>
|
||
<button class="btn btn-danger" data-action="modal-close" data-target="confirm-modal">Löschen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TOAST CONTAINER -->
|
||
<div class="toast-container" id="toast-container"></div>
|
||
|
||
<script src="framework.min.js"></script>
|
||
<script src="demo.js"></script>
|
||
|
||
</body>
|
||
|
||
</html> |