RITTEK BLOCKS / Team & Arbeitsabläufe

Team & Arbeitsabläufe. Direkt einsetzbar.

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.

Team & Arbeitsabläufe

Ein Board, das mitarbeitet.

Aufgaben in drei echten Statusspalten. Verschieben per nativer Auswahl, ohne Drag-Zwang.

Vollständiges HTML herunterladen ↧

Planung / Kanban

Ein Board, das mitarbeitet.

Aufgaben in drei echten Statusspalten. Verschieben per nativer Auswahl, ohne Drag-Zwang.

Geplant 0

In Arbeit 0

Erledigt 0

Ändere den Status direkt an einer Karte. Sie wechselt tatsächlich die Spalte; der Fokus bleibt auf ihrer Auswahl. Die Suche prüft Titel und Person. Keine Drag-and-drop-Pflicht und keine Team-Synchronisierung.

Lokale Beispielansicht. Keine Speicherung oder Serververbindung.

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>Ein Board, das mitarbeitet. · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-workspace.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bw-block" data-bw-block="kanban" aria-labelledby="bw-kanban-title">
<header class="bw-header">
<p class="bw-eyebrow">Planung / Kanban</p>
<h3 id="bw-kanban-title">Ein Board, das mitarbeitet.</h3>
<p class="bw-intro">Aufgaben in drei echten Statusspalten. Verschieben per nativer Auswahl, ohne Drag-Zwang.</p>
</header>
<div class="bw-toolbar">
<label for="bw-task-search">Aufgaben oder Personen suchen<input class="r-input" id="bw-task-search" data-bw-search type="search">
</label>
<button class="r-button" type="button" data-bw-reset>Beispielboard zurücksetzen</button>
</div>
<div class="bw-board">
<section class="bw-column" aria-labelledby="bw-col-planned">
<h4 id="bw-col-planned">Geplant <span data-bw-count="planned">0</span>
</h4>
<div data-bw-column="planned">
</div>
</section>
<section class="bw-column" aria-labelledby="bw-col-active">
<h4 id="bw-col-active">In Arbeit <span data-bw-count="active">0</span>
</h4>
<div data-bw-column="active">
</div>
</section>
<section class="bw-column" aria-labelledby="bw-col-done">
<h4 id="bw-col-done">Erledigt <span data-bw-count="done">0</span>
</h4>
<div data-bw-column="done">
</div>
</section>
</div>
<p class="bw-help">Ändere den Status direkt an einer Karte. Sie wechselt tatsächlich die Spalte; der Fokus bleibt auf ihrer Auswahl. Die Suche prüft Titel und Person. Keine Drag-and-drop-Pflicht und keine Team-Synchronisierung.</p>
<p class="bw-status" data-bw-status role="status">Lokale Beispielansicht. Keine Speicherung oder Serververbindung.</p>
</section>
<script type="module">
import {initWorkspaceBlocks} from 'https://ui.rittek.de/assets/modules/blocks-workspace.js';
const workspaceBlocks = initWorkspaceBlocks(document);
// Beim Entfernen der Ansicht: workspaceBlocks.destroy();
</script>
</body>
</html>

Team & Arbeitsabläufe

Gespräche im richtigen Kontext.

Threads finden, Lesestatus ändern und Entwürfe pro Gespräch behalten. Alles bleibt lokal.

Vollständiges HTML herunterladen ↧

Kommunikation / Lokale Inbox

Gespräche im richtigen Kontext.

Threads finden, Lesestatus ändern und Entwürfe pro Gespräch behalten. Alles bleibt lokal.

Wähle links ein Gespräch aus.

Entwürfe bleiben pro Gespräch nur in dieser geöffneten Vorschau erhalten. Kein Senden, keine echte Inbox, kein Browser-Speicher. Beim Öffnen wird lokal als gelesen markiert; die geöffnete Detailansicht bleibt auch bei Filterwechsel erhalten.

Lokale Beispielansicht. Keine Speicherung oder Serververbindung.

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>Gespräche im richtigen Kontext. · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-workspace.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bw-block" data-bw-block="inbox" aria-labelledby="bw-inbox-title">
<header class="bw-header">
<p class="bw-eyebrow">Kommunikation / Lokale Inbox</p>
<h3 id="bw-inbox-title">Gespräche im richtigen Kontext.</h3>
<p class="bw-intro">Threads finden, Lesestatus ändern und Entwürfe pro Gespräch behalten. Alles bleibt lokal.</p>
</header>
<div class="bw-toolbar">
<label for="bw-thread-search">Gespräche durchsuchen<input class="r-input" id="bw-thread-search" data-bw-search type="search" placeholder="Betreff oder Person">
</label>
<label class="bw-check">
<input type="checkbox" id="bw-unread-only" data-bw-unread> Nur ungelesene <span data-bw-unread-count>2</span>
</label>
</div>
<div class="bw-inbox">
<nav class="bw-thread-list" aria-label="Demo-Gespräche">
<div data-bw-threads>
</div>
<p class="bw-empty" data-bw-inbox-empty hidden>Keine Gespräche passen zu deiner Suche.</p>
</nav>
<div class="bw-conversation">
<p data-bw-thread-placeholder>Wähle links ein Gespräch aus.</p>
<section data-bw-thread-detail hidden aria-labelledby="bw-thread-detail-title">
<h4 id="bw-thread-detail-title" data-bw-thread-title tabindex="-1">
</h4>
<ol class="bw-messages" data-bw-messages>
</ol>
<button class="r-button r-button-sm" type="button" data-bw-mark-unread>Als ungelesen markieren</button>
<label class="bw-label" for="bw-draft">Lokaler Entwurf<textarea class="r-input" id="bw-draft" data-bw-draft maxlength="1000" rows="4" placeholder="Fiktive Notiz für dieses Gespräch">
</textarea>
</label>
<p class="bw-help" data-bw-draft-length>0 / 1000 Zeichen</p>
<button class="r-button" type="button" data-bw-clear-draft>Entwurf löschen</button>
</section>
</div>
</div>
<p class="bw-help">Entwürfe bleiben pro Gespräch nur in dieser geöffneten Vorschau erhalten. Kein Senden, keine echte Inbox, kein Browser-Speicher. Beim Öffnen wird lokal als gelesen markiert; die geöffnete Detailansicht bleibt auch bei Filterwechsel erhalten.</p>
<p class="bw-status" data-bw-status role="status">Lokale Beispielansicht. Keine Speicherung oder Serververbindung.</p>
</section>
<script type="module">
import {initWorkspaceBlocks} from 'https://ui.rittek.de/assets/modules/blocks-workspace.js';
const workspaceBlocks = initWorkspaceBlocks(document);
// Beim Entfernen der Ansicht: workspaceBlocks.destroy();
</script>
</body>
</html>

Team & Arbeitsabläufe

Ein Profil mit klarem Stand.

Vorschau und Formular nebeneinander, mit Übernehmen, Verwerfen und sichtbaren Änderungen.

Vollständiges HTML herunterladen ↧

Kontakte / Bearbeiten

Ein Profil mit klarem Stand.

Vorschau und Formular nebeneinander, mit Übernehmen, Verwerfen und sichtbaren Änderungen.

Die Profilkarte zeigt den zuletzt übernommenen Stand. Änderungen verwerfen stellt genau diesen Stand her. HTML-Startwerte setzt auf die ursprünglichen Felder zurück und kann erneut ungespeicherte Änderungen erzeugen. Keine echte Identität oder Berechtigungsverwaltung.

Lokale Beispielansicht. Keine Speicherung oder Serververbindung.

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>Ein Profil mit klarem Stand. · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-workspace.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bw-block" data-bw-block="profile" aria-labelledby="bw-profile-title">
<header class="bw-header">
<p class="bw-eyebrow">Kontakte / Bearbeiten</p>
<h3 id="bw-profile-title">Ein Profil mit klarem Stand.</h3>
<p class="bw-intro">Vorschau und Formular nebeneinander, mit Übernehmen, Verwerfen und sichtbaren Änderungen.</p>
</header>
<div class="bw-profile">
<aside class="bw-profile-preview" aria-label="Zuletzt übernommenes Kontaktprofil">
<div class="bw-avatar" aria-hidden="true">AB</div>
<h4 data-bw-preview-name>Alex Beispiel</h4>
<p data-bw-preview-role>Projektkoordination</p>
<p data-bw-preview-mail>alex@example.invalid</p>
<p data-bw-preview-about>Fiktive Kontaktperson für diese lokale Vorschau.</p>
</aside>
<form method="dialog" class="bw-form">
<label class="bw-label" for="bw-profile-name">Name<input class="r-input" id="bw-profile-name" name="name" required maxlength="80" value="Alex Beispiel" autocomplete="off">
</label>
<label class="bw-label" for="bw-profile-role">Rolle<input class="r-input" id="bw-profile-role" name="role" maxlength="80" value="Projektkoordination" autocomplete="off">
</label>
<label class="bw-label" for="bw-profile-email">Demo-E-Mail<input class="r-input" id="bw-profile-email" name="email" type="email" required maxlength="160" value="alex@example.invalid" autocomplete="off">
</label>
<label class="bw-label" for="bw-profile-about">Kurzbeschreibung<textarea class="r-input" id="bw-profile-about" name="about" maxlength="500" rows="3">Fiktive Kontaktperson für diese lokale Vorschau.</textarea>
</label>
<p class="bw-help" data-bw-dirty>Lokal übernommener Stand</p>
<p class="bw-error" data-bw-error role="alert">
</p>
<div class="bw-actions">
<button class="r-button r-button-primary" type="submit">Profil lokal übernehmen</button>
<button class="r-button" type="button" data-bw-revert disabled>Änderungen verwerfen</button>
<button class="r-button" type="reset">HTML-Startwerte</button>
</div>
</form>
</div>
<p class="bw-help">Die Profilkarte zeigt den zuletzt übernommenen Stand. Änderungen verwerfen stellt genau diesen Stand her. HTML-Startwerte setzt auf die ursprünglichen Felder zurück und kann erneut ungespeicherte Änderungen erzeugen. Keine echte Identität oder Berechtigungsverwaltung.</p>
<p class="bw-status" data-bw-status role="status">Lokale Beispielansicht. Keine Speicherung oder Serververbindung.</p>
</section>
<script type="module">
import {initWorkspaceBlocks} from 'https://ui.rittek.de/assets/modules/blocks-workspace.js';
const workspaceBlocks = initWorkspaceBlocks(document);
// Beim Entfernen der Ansicht: workspaceBlocks.destroy();
</script>
</body>
</html>

Team & Arbeitsabläufe

Ein Tag mit Raum dazwischen.

Termine anlegen, bearbeiten, löschen und zurückholen. Die Uhrzeiten werden wirklich geprüft.

Vollständiges HTML herunterladen ↧

Planung / Tagesagenda

Ein Tag mit Raum dazwischen.

Termine anlegen, bearbeiten, löschen und zurückholen. Die Uhrzeiten werden wirklich geprüft.

Ende muss nach Beginn liegen. Überschneidungen werden abgewiesen; direkt angrenzende Termine sind erlaubt. Wiederherstellen scheitert nachvollziehbar, wenn der Zeitraum inzwischen belegt ist. Keine Termine über Mitternacht, keine Einladung oder Kalenderanbindung.

Lokale Beispielansicht. Keine Speicherung oder Serververbindung.

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>Ein Tag mit Raum dazwischen. · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-workspace.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bw-block" data-bw-block="agenda" aria-labelledby="bw-agenda-title">
<header class="bw-header">
<p class="bw-eyebrow">Planung / Tagesagenda</p>
<h3 id="bw-agenda-title">Ein Tag mit Raum dazwischen.</h3>
<p class="bw-intro">Termine anlegen, bearbeiten, löschen und zurückholen. Die Uhrzeiten werden wirklich geprüft.</p>
</header>
<div class="bw-toolbar">
<p>
<strong>24. Oktober 2026</strong>
<span class="bw-meta">Fiktiver Tag · lokale Uhrzeiten ohne Zeitzonen- oder Wiederholungsmodell</span>
</p>
<span data-bw-event-count>3 Termine</span>
</div>
<ol class="bw-agenda" data-bw-agenda>
</ol>
<p class="bw-empty" data-bw-agenda-empty hidden>Für diesen Beispieltag sind keine Termine geplant.</p>
<button class="r-button" type="button" data-bw-undo hidden>Letztes Löschen rückgängig</button>
<form method="dialog" class="bw-agenda-form">
<h4>Termin für diesen Tag</h4>
<label class="bw-label" for="bw-event-title">Titel<input class="r-input" id="bw-event-title" name="title" required maxlength="80" placeholder="Fiktiven Termin benennen">
</label>
<div class="bw-times">
<label class="bw-label" for="bw-event-start">Beginn<input class="r-input" type="time" id="bw-event-start" name="start" required value="13:00" step="60">
</label>
<label class="bw-label" for="bw-event-end">Ende<input class="r-input" type="time" id="bw-event-end" name="end" required value="14:00" step="60">
</label>
</div>
<p class="bw-error" data-bw-error role="alert">
</p>
<div class="bw-actions">
<button class="r-button r-button-primary" type="submit" data-bw-agenda-submit>Termin hinzufügen</button>
<button class="r-button" type="button" data-bw-cancel-edit hidden>Bearbeitung abbrechen</button>
</div>
</form>
<p class="bw-help">Ende muss nach Beginn liegen. Überschneidungen werden abgewiesen; direkt angrenzende Termine sind erlaubt. Wiederherstellen scheitert nachvollziehbar, wenn der Zeitraum inzwischen belegt ist. Keine Termine über Mitternacht, keine Einladung oder Kalenderanbindung.</p>
<p class="bw-status" data-bw-status role="status">Lokale Beispielansicht. Keine Speicherung oder Serververbindung.</p>
</section>
<script type="module">
import {initWorkspaceBlocks} from 'https://ui.rittek.de/assets/modules/blocks-workspace.js';
const workspaceBlocks = initWorkspaceBlocks(document);
// Beim Entfernen der Ansicht: workspaceBlocks.destroy();
</script>
</body>
</html>