Eigenständige Bausteine für HTML und PHP. Jedes Beispiel hat seinen vollständigen Quellcode direkt darunter. Farben, Hell/Dunkel, Dichte und Schrift folgen deiner Docs-Ansicht.
Interaktionen bleiben lokale Demos. Formulare senden keine Nachrichten; es gibt keine Zahlung oder Server-Synchronisation. Beim mehrfachen Einfügen IDs eindeutig vergeben und den jeweiligen Initialisierer einmal nach dem Markup aufrufen.
Zugang & Einrichtung
Kompakte Anmeldekarte
Lokale Eingabeprüfung mit nativer E-Mail-Validierung, Passwortanzeige und Reset. Kein Login, keine Sitzungsverwaltung und keine Übertragung.
Diese Oberfläche zeigt einen möglichen Einstieg zur Wiederherstellung. Die Demo bewertet nur die Syntax einer fiktiven Adresse, nicht deren Existenz.
Nur fiktive Angaben verwenden. Lokale Demo ohne Server, Speicherung oder echte Zugangsfunktion. Keine echten Passwörter eingeben.
Noch keine lokale Prüfung ausgefüehrt.
HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Wiederherstellung ohne Versandbehauptung · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-access.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bax-block" data-bax-block="recovery" aria-labelledby="bax-recovery-title">
<div class="bax-shell">
<p class="bax-eyebrow">03 / WIEDERHERSTELLUNG</p>
<h3 class="bax-title" id="bax-recovery-title">Ein ruhiger Weg zurück.</h3>
<p class="bax-description">Diese Oberfläche zeigt einen möglichen Einstieg zur Wiederherstellung. Die Demo bewertet nur die Syntax einer fiktiven Adresse, nicht deren Existenz.</p>
<p class="bax-note">
<strong>Nur fiktive Angaben verwenden.</strong> Lokale Demo ohne Server, Speicherung oder echte Zugangsfunktion. Keine echten Passwörter eingeben.</p>
<form autocomplete="off">
<fieldset disabled data-bax-enable>
<legend>Fiktive Kennung</legend>
<div class="bax-field">
<label class="r-label" for="bax-recovery-email">Fiktive E-Mail-Adresse</label>
<input class="r-input" id="bax-recovery-email" type="email" required maxlength="120" value="alex@example.test" autocomplete="off">
</div>
<p class="bax-hint">Es wird keine E-Mail und kein Reset-Link versendet. Ein echtes Verfahren benötigt einen gesonderten Dienst mit Tokenprüfung.</p>
</fieldset>
<div class="bax-actions">
<button class="r-button r-button-primary" type="submit" disabled data-bax-enable>Adresssyntax lokal prüfen</button>
<button class="r-button" type="reset" disabled data-bax-enable>Zurücksetzen</button>
</div>
</form>
<p class="bax-status" data-bax-status role="status" aria-atomic="true">Noch keine lokale Prüfung ausgefüehrt.</p>
</div>
</section>
<script type="module">
import {initAccessBlocks} from 'https://ui.rittek.de/assets/modules/blocks-access.js';
const access = initAccessBlocks(document);
// access.destroy(); // Listener und ausstehende Reset-Aktualisierungen entfernen
</script>
</body>
</html>
Zugang & Einrichtung
Fiktiver Code mit Wiederholen
Ein logisches Codefeld mit Einfügen, Format- und Vergleichsfehlern. Wiederholen wechselt den sichtbaren lokalen Code; keinerlei Identitätsprüfung oder Versand.
Der sichtbare Code ist bewusst öffentlich. Er dient nur dazu, Eingabe, Fehler und Wiederholen einer Codeoberfläche auszuprobieren.
Nur fiktive Angaben verwenden. Lokale Demo ohne Server, Speicherung oder echte Zugangsfunktion. Keine echten Passwörter eingeben.
Aktueller fiktiver Democode, nicht per Nachricht versendet:
246810
Noch keine lokale Prüfung ausgefüehrt.
HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Fiktiver Code mit Wiederholen · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-access.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bax-block" data-bax-block="verification" aria-labelledby="bax-code-title">
<div class="bax-shell">
<p class="bax-eyebrow">04 / CODEVERGLEICH</p>
<h3 class="bax-title" id="bax-code-title">Sechs Ziffern. Ein Beispiel.</h3>
<p class="bax-description">Der sichtbare Code ist bewusst öffentlich. Er dient nur dazu, Eingabe, Fehler und Wiederholen einer Codeoberfläche auszuprobieren.</p>
<p class="bax-note">
<strong>Nur fiktive Angaben verwenden.</strong> Lokale Demo ohne Server, Speicherung oder echte Zugangsfunktion. Keine echten Passwörter eingeben.</p>
<p class="bax-hint" id="bax-code-explanation">Aktueller fiktiver Democode, nicht per Nachricht versendet:</p>
<p class="bax-code-example" data-bax-code-display aria-describedby="bax-code-explanation">246810</p>
<form autocomplete="off">
<fieldset disabled data-bax-enable>
<legend>Sechs sichtbare Beispielziffern eingeben</legend>
<div class="bax-field">
<label class="r-label" for="bax-code-input">Democode</label>
<input class="r-input bax-code-input" id="bax-code-input" type="text" inputmode="numeric" pattern="[0-9]{6}" maxlength="12" required autocomplete="off" data-bax-code aria-describedby="bax-code-help">
<small class="bax-hint" id="bax-code-help">Sechs Ziffern. Leerzeichen und Bindestriche werden beim Eingeben entfernt.</small>
</div>
</fieldset>
<div class="bax-actions">
<button class="r-button r-button-primary" type="submit" disabled data-bax-enable>Democode vergleichen</button>
<button class="r-button" type="reset" disabled data-bax-enable>Zurücksetzen</button>
</div>
</form>
<button class="r-button r-button-sm mt-4" type="button" data-bax-repeat disabled data-bax-enable>Neuen Democode anzeigen</button>
<p class="bax-status" data-bax-status role="status" aria-atomic="true">Noch keine lokale Prüfung ausgefüehrt.</p>
</div>
</section>
<script type="module">
import {initAccessBlocks} from 'https://ui.rittek.de/assets/modules/blocks-access.js';
const access = initAccessBlocks(document);
// access.destroy(); // Listener und ausstehende Reset-Aktualisierungen entfernen
</script>
</body>
</html>
Zugang & Einrichtung
Setup-Wizard mit optionaler Ansichtswahl
Drei klar getrennte Schritte mit nativer Validierung, Zurück, explizitem Ueberspringen, sicherer Zusammenfassung und lokalem Abschluss. Keine Workspaceanlage.
Nur fiktive Angaben verwenden. Lokale Demo ohne Server, Speicherung oder echte Zugangsfunktion. Keine echten Passwörter eingeben.
Workspace
Ansicht
Prüfen
Das Setup-Beispiel ist durchlaufen.
Keine Einstellungen gespeichert. Kein Team angelegt.
Schritt 1 von 3. Ohne JavaScript ist die Demo deaktiviert.
HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Setup-Wizard mit optionaler Ansichtswahl · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-access.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bax-block" data-bax-block="onboarding" aria-labelledby="bax-setup-title">
<div class="bax-shell">
<p class="bax-eyebrow">05 / GEFÜHRTES SETUP</p>
<h3 class="bax-title" id="bax-setup-title">Ihr Start, in kleinen Schritten.</h3>
<p class="bax-note">
<strong>Nur fiktive Angaben verwenden.</strong> Lokale Demo ohne Server, Speicherung oder echte Zugangsfunktion. Keine echten Passwörter eingeben.</p>
<ol class="bax-steps" aria-label="Einrichtungsschritte">
<li data-bax-step-label aria-current="step">Workspace</li>
<li data-bax-step-label>Ansicht</li>
<li data-bax-step-label>Prüfen</li>
</ol>
<form autocomplete="off">
<fieldset data-bax-stage disabled>
<legend>Schritt 1 von 3</legend>
<h4 class="bax-stage-title" tabindex="-1">Fiktiver Workspace</h4>
<div class="bax-field">
<label class="r-label" for="bax-team-name">Beispielname</label>
<input class="r-input" id="bax-team-name" name="bax-team" type="text" required minlength="2" maxlength="80" value="Rittek Beispielstudio" autocomplete="off">
</div>
</fieldset>
<fieldset data-bax-stage disabled hidden>
<legend>Schritt 2 von 3</legend>
<h4 class="bax-stage-title" tabindex="-1">Startansicht wählen</h4>
<label class="bax-option" for="bax-layout-standard">
<input id="bax-layout-standard" type="radio" name="bax-layout" value="standard" required checked>
<span>
<strong>Standard</strong>
<small>Mehr Raum für Inhalte.</small>
</span>
</label>
<label class="bax-option" for="bax-layout-compact">
<input id="bax-layout-compact" type="radio" name="bax-layout" value="compact">
<span>
<strong>Kompakt</strong>
<small>Dichtere Darstellung als gespeicherter Demowunsch, keine globale Einstellungsänderung.</small>
</span>
</label>
<button class="r-button r-button-sm mt-4" type="button" data-bax-skip>Standardeinstellungen verwenden</button>
</fieldset>
<fieldset data-bax-stage disabled hidden>
<legend>Schritt 3 von 3</legend>
<h4 class="bax-stage-title" tabindex="-1">Beispielangaben prüfen</h4>
<p class="bax-summary" data-bax-summary>Fiktiver Workspace: Rittek Beispielstudio · Startansicht: Standard.</p>
<p class="bax-hint">Der Abschluss zeigt nur den lokalen Endzustand. Es werden weder Team noch Workspace angelegt.</p>
</fieldset>
<div class="bax-actions" data-bax-actions>
<button class="r-button" type="button" data-bax-back hidden disabled data-bax-enable>Zurück</button>
<button class="r-button r-button-primary" type="submit" data-bax-next disabled data-bax-enable>Weiter</button>
</div>
</form>
<div class="bax-complete" data-bax-complete hidden>
<h4 tabindex="-1">Das Setup-Beispiel ist durchlaufen.</h4>
<p class="bax-description mt-3">Keine Einstellungen gespeichert. Kein Team angelegt.</p>
<button class="r-button mt-4" type="button" data-bax-restart disabled data-bax-enable>Beispiel neu starten</button>
</div>
<p class="bax-status" data-bax-status role="status" aria-atomic="true">Schritt 1 von 3. Ohne JavaScript ist die Demo deaktiviert.</p>
</div>
</section>
<script type="module">
import {initAccessBlocks} from 'https://ui.rittek.de/assets/modules/blocks-access.js';
const access = initAccessBlocks(document);
// access.destroy(); // Listener und ausstehende Reset-Aktualisierungen entfernen
</script>
</body>
</html>
Zugang & Einrichtung
Organisationszugang in zwei Schritten
Organisation und fiktive Kennung werden getrennt erfasst. Zurück, Fehlerfokus, Zusammenfassung und Neustart zeigen einen anderen Zugangspfad ohne vorgetäuschtes SSO.