Zum Inhalt
r/ rittek uiDOCS
Admin-Demo ↗

RITTEK BLOCKS / Business & Anwendung

Business & Anwendung. 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.

Business & Anwendung

KPI- und Trendübersicht

Ruhige Business-Kennzahlen mit interaktivem Zeitraumwechsel und ergänzendem, dekorativem Balkendiagramm. Alle Werte sind fiktiv.

Vollständiges HTML herunterladen ↧

Workspace Analytics

Ein guter Überblick.

Fiktive Kennzahlen · Letzte 7 Tage

Umsatz
24.860 €
+8,2 % zum Vorzeitraum
Neue Kunden
148
+12,1 % zum Vorzeitraum
Abschlussquote
92 %
+3,0 % zum Vorzeitraum

Illustrativer Verlauf · die Kennzahlen stehen oben als Text.

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>KPI- und Trendübersicht · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-application.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="ba-block" data-ba-block="kpi" aria-labelledby="ba-performance-title">
<header class="ba-header">
<div>
<p class="ba-eyebrow">Workspace Analytics</p>
<h3 id="ba-performance-title" class="ba-title">Ein guter Überblick.</h3>
<p class="ba-subtitle">Fiktive Kennzahlen · <span data-ba-metric="label">Letzte 7 Tage</span>
</p>
</div>
<label for="ba-period">Zeitraum<select id="ba-period" class="r-input" data-ba-period>
<option value="week">Letzte 7 Tage</option>
<option value="month">Letzte 30 Tage</option>
</select>
</label>
</header>
<dl class="ba-metrics">
<div class="ba-metric">
<dt>Umsatz</dt>
<dd data-ba-metric="revenue">24.860 €</dd>
<dd class="ba-trend">
<span data-ba-metric="revenueTrend">+8,2 %</span> zum Vorzeitraum</dd>
</div>
<div class="ba-metric">
<dt>Neue Kunden</dt>
<dd data-ba-metric="customers">148</dd>
<dd class="ba-trend">
<span data-ba-metric="customerTrend">+12,1 %</span> zum Vorzeitraum</dd>
</div>
<div class="ba-metric">
<dt>Abschlussquote</dt>
<dd data-ba-metric="completion">92 %</dd>
<dd class="ba-trend">
<span data-ba-metric="completionTrend">+3,0 %</span> zum Vorzeitraum</dd>
</div>
</dl>
<div class="ba-chart">
<p class="ba-help">Illustrativer Verlauf · die Kennzahlen stehen oben als Text.</p>
<div class="ba-bars" aria-hidden="true">
<span data-ba-bar>
</span>
<span data-ba-bar>
</span>
<span data-ba-bar>
</span>
<span data-ba-bar>
</span>
<span data-ba-bar>
</span>
<span data-ba-bar>
</span>
<span data-ba-bar>
</span>
</div>
</div>
<p class="ba-status" data-ba-status role="status">
</p>
</section>
<script type="module">
import {initApplicationBlocks} from 'https://ui.rittek.de/assets/modules/blocks-application.js';
const applicationBlocks = initApplicationBlocks(document);
// Beim Entfernen der Ansicht: applicationBlocks.destroy();
</script>
</body>
</html>

Business & Anwendung

Aktivitätsfeed mit Lesestatus

Alle oder ungelesene Aktivitäten anzeigen und einzeln als gelesen markieren. Der Zustand bleibt nur in dieser Vorschau.

Vollständiges HTML herunterladen ↧

Team-Updates

Was sich bewegt.

2 ungelesene Aktivitäten · fiktive Demo

  • Neue Version vorbereitet

    Das Team hat die Projektvorschau aktualisiert.

  • Feedback eingegangen

    Die erste Rückmeldung zum Kundenportal ist da.

  • Briefing abgeschlossen

    Ziele und Aufgaben stehen bereit.

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>Aktivitätsfeed mit Lesestatus · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-application.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="ba-block" data-ba-block="activity" aria-labelledby="ba-activity-title">
<header class="ba-header">
<div>
<p class="ba-eyebrow">Team-Updates</p>
<h3 id="ba-activity-title" class="ba-title">Was sich bewegt.</h3>
<p class="ba-subtitle">
<span data-ba-unread>2</span> ungelesene Aktivitäten · fiktive Demo</p>
</div>
<label for="ba-activity-filter">Ansicht<select id="ba-activity-filter" class="r-input" data-ba-filter>
<option value="all">Alle Aktivitäten</option>
<option value="unread">Nur ungelesene</option>
</select>
</label>
</header>
<ul class="ba-feed">
<li data-ba-activity="ba-release" data-ba-read="false">
<div>
<strong>Neue Version vorbereitet</strong>
<p class="ba-help">Das Team hat die Projektvorschau aktualisiert.</p>
<time datetime="2026-10-24T09:30:00">Heute, 09:30 Uhr</time>
</div>
<button class="r-button r-button-sm" type="button" data-ba-read="ba-release" aria-label="Neue Version vorbereitet: als gelesen markieren">Als gelesen markieren</button>
</li>
<li data-ba-activity="ba-review" data-ba-read="false">
<div>
<strong>Feedback eingegangen</strong>
<p class="ba-help">Die erste Rückmeldung zum Kundenportal ist da.</p>
<time datetime="2026-10-24T08:45:00">Heute, 08:45 Uhr</time>
</div>
<button class="r-button r-button-sm" type="button" data-ba-read="ba-review" aria-label="Feedback eingegangen: als gelesen markieren">Als gelesen markieren</button>
</li>
<li data-ba-activity="ba-brief" data-ba-read="true">
<div>
<strong>Briefing abgeschlossen</strong>
<p class="ba-help">Ziele und Aufgaben stehen bereit.</p>
<time datetime="2026-10-23T16:00:00">Gestern, 16:00 Uhr</time>
</div>
<button class="r-button r-button-sm" type="button" data-ba-read="ba-brief" disabled>Gelesen</button>
</li>
</ul>
<p class="ba-help" data-ba-empty hidden>Keine ungelesenen Aktivitäten mehr.</p>
<p class="ba-status" data-ba-status role="status">
</p>
</section>
<script type="module">
import {initApplicationBlocks} from 'https://ui.rittek.de/assets/modules/blocks-application.js';
const applicationBlocks = initApplicationBlocks(document);
// Beim Entfernen der Ansicht: applicationBlocks.destroy();
</script>
</body>
</html>

Business & Anwendung

Aufgabenboard mit Statuswechsel

Aufgaben über native Selects verschieben und die Statussummen sofort sehen. Funktioniert ohne Drag-and-drop mit Tastatur, Maus und Touch.

Vollständiges HTML herunterladen ↧

Projekt Kundenportal · Demo

Der nächste Schritt zählt.

Status direkt an jeder Aufgabe ändern.

1 Geplant

1 In Arbeit

1 Erledigt

  • Inhalte abstimmen

    Redaktion · Priorität normal

  • Dashboard gestalten

    Design · Priorität hoch

  • Briefing vorbereiten

    Organisation · Priorität normal

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>Aufgabenboard mit Statuswechsel · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-application.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="ba-block" data-ba-block="tasks" aria-labelledby="ba-tasks-title">
<header class="ba-header">
<div>
<p class="ba-eyebrow">Projekt Kundenportal · Demo</p>
<h3 id="ba-tasks-title" class="ba-title">Der nächste Schritt zählt.</h3>
<p class="ba-subtitle">Status direkt an jeder Aufgabe ändern.</p>
</div>
</header>
<div class="ba-task-counts">
<p>
<b data-ba-count="planned">1</b> Geplant</p>
<p>
<b data-ba-count="active">1</b> In Arbeit</p>
<p>
<b data-ba-count="done">1</b> Erledigt</p>
</div>
<ul class="ba-tasks">
<li data-ba-task="ba-content">
<div>
<strong>Inhalte abstimmen</strong>
<p class="ba-help">Redaktion · Priorität normal</p>
</div>
<label for="ba-task-content">Status: Inhalte<select class="r-input" id="ba-task-content">
<option value="planned" selected>Geplant</option>
<option value="active">In Arbeit</option>
<option value="done">Erledigt</option>
</select>
</label>
</li>
<li data-ba-task="ba-layout">
<div>
<strong>Dashboard gestalten</strong>
<p class="ba-help">Design · Priorität hoch</p>
</div>
<label for="ba-task-layout">Status: Dashboard<select class="r-input" id="ba-task-layout">
<option value="planned">Geplant</option>
<option value="active" selected>In Arbeit</option>
<option value="done">Erledigt</option>
</select>
</label>
</li>
<li data-ba-task="ba-briefing">
<div>
<strong>Briefing vorbereiten</strong>
<p class="ba-help">Organisation · Priorität normal</p>
</div>
<label for="ba-task-briefing">Status: Briefing<select class="r-input" id="ba-task-briefing">
<option value="planned">Geplant</option>
<option value="active">In Arbeit</option>
<option value="done" selected>Erledigt</option>
</select>
</label>
</li>
</ul>
<p class="ba-status" data-ba-status role="status">
</p>
</section>
<script type="module">
import {initApplicationBlocks} from 'https://ui.rittek.de/assets/modules/blocks-application.js';
const applicationBlocks = initApplicationBlocks(document);
// Beim Entfernen der Ansicht: applicationBlocks.destroy();
</script>
</body>
</html>

Business & Anwendung

Integrationseinstellungen

Native Schalter für Beispielintegrationen mit lokalem Übernehmen und Rücksetzen. Kein Server, kein Browser-Speicher, keine echten Verbindungen.

Vollständiges HTML herunterladen ↧

Workspace / Integrationen

Dein Ablauf. Deine Auswahl.

Beispielschalter ohne echte Verbindung zu Diensten.

  • Terminhinweise im fiktiven Workspace anzeigen.

  • Neue Aktivitäten in der Demo hervorheben.

  • Eine fiktive Zusammenfassung vormerken.

Änderungen gelten nur in dieser geöffneten Vorschau.

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>Integrationseinstellungen · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-application.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="ba-block" data-ba-block="settings" aria-labelledby="ba-integrations-title">
<header class="ba-header">
<div>
<p class="ba-eyebrow">Workspace / Integrationen</p>
<h3 id="ba-integrations-title" class="ba-title">Dein Ablauf. Deine Auswahl.</h3>
<p class="ba-subtitle">Beispielschalter ohne echte Verbindung zu Diensten.</p>
</div>
</header>
<ul class="ba-settings">
<li>
<div>
<label for="ba-calendar">
<strong>Kalenderhinweise</strong>
</label>
<p class="ba-help" id="ba-calendar-help">Terminhinweise im fiktiven Workspace anzeigen.</p>
</div>
<input class="ba-toggle" id="ba-calendar" type="checkbox" role="switch" aria-describedby="ba-calendar-help" data-ba-setting="calendar" checked>
</li>
<li>
<div>
<label for="ba-alerts">
<strong>Team-Benachrichtigungen</strong>
</label>
<p class="ba-help" id="ba-alerts-help">Neue Aktivitäten in der Demo hervorheben.</p>
</div>
<input class="ba-toggle" id="ba-alerts" type="checkbox" role="switch" aria-describedby="ba-alerts-help" data-ba-setting="alerts" checked>
</li>
<li>
<div>
<label for="ba-reports">
<strong>Wochenübersicht</strong>
</label>
<p class="ba-help" id="ba-reports-help">Eine fiktive Zusammenfassung vormerken.</p>
</div>
<input class="ba-toggle" id="ba-reports" type="checkbox" role="switch" aria-describedby="ba-reports-help" data-ba-setting="reports">
</li>
</ul>
<div class="ba-actions">
<button class="r-button r-button-primary" type="button" data-ba-save>Auswahl übernehmen</button>
<button class="r-button" type="button" data-ba-reset>Änderungen verwerfen</button>
</div>
<p class="ba-status" data-ba-status role="status">Änderungen gelten nur in dieser geöffneten Vorschau.</p>
</section>
<script type="module">
import {initApplicationBlocks} from 'https://ui.rittek.de/assets/modules/blocks-application.js';
const applicationBlocks = initApplicationBlocks(document);
// Beim Entfernen der Ansicht: applicationBlocks.destroy();
</script>
</body>
</html>