VORLAGEN / PHASE 9
Ein System. Ein gemeinsamer Arbeitsbereich.
HTML-/PHP-Beispielpaket herunterladen ↧
Dashboard, Datenverwaltung und Einstellungen verwenden denselben lokalen Demo-Datenstand. Du kannst Projekte anlegen, bearbeiten und löschen, die letzte Löschung rückgängig machen und Einstellungen speichern.
Übersicht ↗
Kennzahlen, Statusfilter und Chart reagieren auf deine Projekte.
Projekte ↗
Anlegen, Bearbeiten, Suchen, Filtern und Wiederherstellen.
Einstellungen ↗
Speichern, Änderungsanzeige und Umgang mit parallelen Änderungen.
Lokale Demo-Daten
Verwende fiktive Angaben. Der Browser speichert die Demo unter rittek-workspace-demo-v1. Die Ansicht hat einen eigenen Schlüssel rittek-template-preferences. Es werden keine Daten an einen Server gesendet. Ohne Browserablage gilt der Datenstand nur für die geöffnete Seite und kann beim Seitenwechsel verloren gehen.
Gemeinsame Daten verwenden
Die Beispiel-API ist Zubehör der Workspace-Vorlage. Sie ist keine automatische Datenhaltung des CSS-Frameworks. Kopiere den assets-Ordner auf deinen Server oder verwende absolute Asset-URLs aus dieser Entwicklungsumgebung.
<link rel="stylesheet" href="/assets/rittek.css">
<main class="r-container py-8">
<h1 id="title" class="text-3xl">Mein Arbeitsbereich</h1>
<ul id="projects"></ul>
</main>
<script type="module">
import {getDemoState} from '/assets/modules/template-store.js';
const state = getDemoState();
document.getElementById('title').textContent = state.settings.workspace;
for (const project of state.projects) {
const item = document.createElement('li');
item.textContent = project.name;
document.getElementById('projects').append(item);
}
</script>import {
getDemoState, updateDemoSettings, upsertDemoProject,
removeDemoProject, subscribeDemoState, getDemoStorageStatus
} from '/assets/modules/template-store.js';
const saved = getDemoState().settings;
updateDemoSettings({...saved, workspace: 'Mein Demo-Team'});
const project = upsertDemoProject({name:'Demo-Website', status:'planned', pages:12});
removeDemoProject(project.id);
upsertDemoProject(project); // dieselbe ID wiederherstellen
const unsubscribe = subscribeDemoState(state => console.log(state.projects.length));
console.log(getDemoStorageStatus().persistent);
unsubscribe();Dateien und Einbindung
- Dashboard-Quellcode und Projektverwaltung
- Einstellungsformular
- Browserablage und Datenregeln
- Vorlagen-CSS und optionale Demo-Ansicht
Die Formulare stehen im HTML der jeweils verlinkten Vorlage. Nutze die Browserfunktion „Seitenquelltext anzeigen“, um eine vollständige Ansicht zu übernehmen. Die Vorlagen-Navigation wird beim Entwicklungsbuild aus einer gemeinsamen Vorlage erzeugt; sie gehört ausschließlich zu diesem Beispiel.
Datenvertrag und Grenzen
Version 1 enthält Einstellungen und bis zu 100 Projekte. Ein Projekt hat eine eindeutige ID, einen Namen mit 2–100 Zeichen, einen Status active/planned/paused und eine Seitenzahl von 0–10.000. Einstellungen enthalten Arbeitsbereich (2–80 Zeichen), Kontakt-E-Mail und eine boolesche Benachrichtigungswahl. Die Auswahl steuert hier nur die Vorlage; sie versendet keine Nachrichten.
Alle APIs liefern Kopien. Ungültige Änderungen werden verworfen. Browserfehler beim Speichern führen zu einer gekennzeichneten Sitzungsversion. Andere Tabs können gespeicherte Änderungen übernehmen; gleichzeitige Schreibvorgänge sind keine Datenbanktransaktion. Der zuletzt geschriebene vollständige Datenstand gewinnt. Offene Einstellungen werden bei externen Änderungen nicht still überschrieben.
Für echte Anwendungen bleiben Anmeldung, Rechte, Datenbank, Serverprüfung und Konfliktauflösung separat umzusetzen. Ein eigenständiges PHP-Beispiel zeigt serverseitige Validierung und CSRF-Schutz.
Dashboard: Vorschau und vollständiges HTML
Die Vorschau verwendet denselben lokalen Demo-Datenstand wie die geöffnete Vorlage. Darunter steht der vollständige HTML-Quellcode; die geladenen CSS-/JavaScript-Dateien sind im Beispielpaket enthalten.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Workspace · Rittek UI</title>
<link rel="stylesheet" href="/assets/rittek.css">
<link rel="stylesheet" href="/assets/template-shell.css">
<script src="/assets/theme-init.js">
</script>
</head>
<body data-r-template>
<!-- template-shell:start -->
<script src="/assets/template-preferences.js">
</script>
<a class="docs-skip" href="#template-content">Zum Inhalt</a>
<header class="template-header">
<div class="template-header-row">
<a class="template-brand" href="/templates/dashboard.html">r/ <strong>Workspace</strong>
<span>VORLAGE · LOKALE DEMO</span>
</a>
<a href="/docs/templates.html">Quellcode & Einbindung ↗</a>
</div>
<nav aria-label="Workspace">
<a href="/templates/dashboard.html" aria-current="page">Übersicht</a>
<a href="/templates/projects.html">Projekte</a>
<a href="/templates/settings.html">Einstellungen</a>
</nav>
<details class="template-appearance">
<summary>Ansicht anpassen</summary>
<div>
<label>Farbschema<select data-r-scheme-control>
<option value="lime">Rittek Lime</option>
<option value="orchid">Orchid · Lila-Pink</option>
<option value="ocean">Ocean · Blau</option>
<option value="graphite">Graphite · Dunkelgrau</option>
<option value="porcelain">Porcelain · Hell-Neutral</option>
<option value="rose">Rose · Warmes Pink</option>
<option value="teal">Lagoon · Petrol</option>
<option value="amber">Amber · Gold</option>
<option value="terracotta">Terra · Terrakotta</option>
<option value="indigo">Indigo · Violettblau</option>
<option value="executive">Executive</option>
<option value="slate">Slate</option>
<option value="forest">Forest</option>
<option value="carbon">Carbon</option>
</select>
</label>
<label>Darstellung<select data-r-mode-control>
<option value="system">System</option>
<option value="light">Hell</option>
<option value="dark">Dunkel</option>
</select>
</label>
<label>Seitendichte<select data-r-size-control>
<option value="xs">XS</option>
<option value="small">Small</option>
<option value="standard">Standard</option>
<option value="big">Big</option>
<option value="xxl">XXL</option>
</select>
</label>
<label>Schriftgröße<select data-r-font-control>
<option value="xs">XS</option>
<option value="small">Small</option>
<option value="standard">Normal</option>
<option value="big">Big</option>
<option value="xxl">XXL</option>
</select>
</label>
</div>
</details>
</header>
<!-- template-shell:end -->
<main class="r-container template-main" id="template-content">
<p class="template-kicker">Workspace / Übersicht</p>
<div class="flex flex-wrap justify-between gap-4 items-end">
<div>
<h1 id="workspace-title">Dein Arbeitsbereich.</h1>
<p class="text-muted mt-4">Ein gemeinsamer Datenstand für Projekte, Diagramm und Einstellungen.</p>
</div>
<a href="/templates/projects.html" class="r-button r-button-primary">Projekt anlegen ↗</a>
</div>
<p class="template-storage mt-4" id="dashboard-storage" role="status">
</p>
<noscript>
<p class="r-alert mt-6">Diese lokale Dashboard-Demo benötigt JavaScript.</p>
</noscript>
<div class="grid md:grid-cols-3 gap-4 mt-8">
<section class="r-card template-metric">
<h2 class="text-sm font-normal text-muted">Projekte insgesamt</h2>
<strong id="metric-total">—</strong>
</section>
<section class="r-card template-metric">
<h2 class="text-sm font-normal text-muted">Aktive Projekte</h2>
<strong id="metric-active">—</strong>
</section>
<section class="r-card template-metric">
<h2 class="text-sm font-normal text-muted">Geplante Seiten</h2>
<strong id="metric-pages">—</strong>
</section>
</div>
<div class="template-grid mt-8">
<section class="r-card">
<h2 class="text-xl font-bold">Projektportfolio</h2>
<label class="r-label mt-4" for="dashboard-filter">Ansicht filtern</label>
<select class="r-input" id="dashboard-filter">
<option value="">Alle Status</option>
<option value="active">Aktiv</option>
<option value="planned">Geplant</option>
<option value="paused">Pausiert</option>
</select>
<p class="r-help mt-2">Der Filter steuert Diagramm und Liste. Die Kennzahlen oben zeigen den gesamten Arbeitsbereich.</p>
<div id="dashboard-chart" class="mt-6">
</div>
</section>
<section class="r-card">
<div class="flex justify-between items-center gap-3">
<h2 class="text-xl font-bold">Projekte im Blick</h2>
<a href="/templates/projects.html" class="text-sm">Verwalten ↗</a>
</div>
<ul class="template-list mt-4" id="dashboard-projects">
</ul>
<p id="dashboard-empty" class="r-help mt-4" hidden>Für diesen Filter sind keine Projekte vorhanden.</p>
<div class="border-t mt-6 pt-6">
<h3 class="text-sm font-semibold">Kontakt zum Arbeitsbereich</h3>
<p id="dashboard-contact" class="text-muted mt-2">
</p>
<a href="/templates/settings.html" class="r-button mt-4">Einstellungen öffnen</a>
</div>
</section>
</div>
<section class="r-alert mt-8">
<h2 class="font-semibold">Eine Vorlage. Drei zusammenhängende Ansichten.</h2>
<p class="mt-2">Lege fiktive Projekte an, ändere den Arbeitsbereich und kehre hierher zurück. Die Demo speichert ausschließlich in diesem Browser. Sie enthält keine Anmeldung, Datenbank oder serverseitige Synchronisierung.</p>
<div class="flex flex-wrap gap-3 mt-4">
<a href="/docs/templates.html">Quellcode & Aufbau</a>
<a href="/docs/php.html">PHP-Beispiel</a>
</div>
</section>
</main>
<script src="/assets/rittek.js">
</script>
<script src="/assets/template-shell.js">
</script>
<script type="module" src="/assets/template-dashboard.js">
</script>
</body>
</html>
Projektverwaltung: Vorschau und vollständiges HTML
Die Vorschau verwendet denselben lokalen Demo-Datenstand wie die geöffnete Vorlage. Darunter steht der vollständige HTML-Quellcode; die geladenen CSS-/JavaScript-Dateien sind im Beispielpaket enthalten.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Projekte · Rittek Workspace</title>
<link rel="stylesheet" href="/assets/rittek.css">
<link rel="stylesheet" href="/assets/template-shell.css">
<script src="/assets/theme-init.js">
</script>
</head>
<body data-r-template>
<!-- template-shell:start -->
<script src="/assets/template-preferences.js">
</script>
<a class="docs-skip" href="#template-content">Zum Inhalt</a>
<header class="template-header">
<div class="template-header-row">
<a class="template-brand" href="/templates/dashboard.html">r/ <strong>Workspace</strong>
<span>VORLAGE · LOKALE DEMO</span>
</a>
<a href="/docs/templates.html">Quellcode & Einbindung ↗</a>
</div>
<nav aria-label="Workspace">
<a href="/templates/dashboard.html">Übersicht</a>
<a href="/templates/projects.html" aria-current="page">Projekte</a>
<a href="/templates/settings.html">Einstellungen</a>
</nav>
<details class="template-appearance">
<summary>Ansicht anpassen</summary>
<div>
<label>Farbschema<select data-r-scheme-control>
<option value="lime">Rittek Lime</option>
<option value="orchid">Orchid · Lila-Pink</option>
<option value="ocean">Ocean · Blau</option>
<option value="graphite">Graphite · Dunkelgrau</option>
<option value="porcelain">Porcelain · Hell-Neutral</option>
<option value="rose">Rose · Warmes Pink</option>
<option value="teal">Lagoon · Petrol</option>
<option value="amber">Amber · Gold</option>
<option value="terracotta">Terra · Terrakotta</option>
<option value="indigo">Indigo · Violettblau</option>
<option value="executive">Executive</option>
<option value="slate">Slate</option>
<option value="forest">Forest</option>
<option value="carbon">Carbon</option>
</select>
</label>
<label>Darstellung<select data-r-mode-control>
<option value="system">System</option>
<option value="light">Hell</option>
<option value="dark">Dunkel</option>
</select>
</label>
<label>Seitendichte<select data-r-size-control>
<option value="xs">XS</option>
<option value="small">Small</option>
<option value="standard">Standard</option>
<option value="big">Big</option>
<option value="xxl">XXL</option>
</select>
</label>
<label>Schriftgröße<select data-r-font-control>
<option value="xs">XS</option>
<option value="small">Small</option>
<option value="standard">Normal</option>
<option value="big">Big</option>
<option value="xxl">XXL</option>
</select>
</label>
</div>
</details>
</header>
<!-- template-shell:end -->
<main class="r-container template-main py-12" id="template-content">
<p class="text-muted text-sm">WORKSPACE / PROJEKTE</p>
<h1 class="text-4xl mt-4">Aus Ideen werden Projekte.</h1>
<p class="text-muted mt-4">Fiktive Projekte anlegen und organisieren. Die Angaben bleiben als Demo in diesem Browser; es werden keine Daten an einen Server gesendet.</p>
<p id="project-storage" class="r-help mt-4" role="status">
</p>
<noscript>
<p class="r-alert mt-4">Die Projektverwaltung benötigt JavaScript.</p>
</noscript>
<section class="r-card mt-8" aria-labelledby="project-form-title">
<h2 class="text-2xl font-bold" id="project-form-title">Projekt anlegen</h2>
<form id="project-form" method="dialog" class="mt-6">
<label for="project-name">Projektname</label>
<input id="project-name" name="name" class="r-input mt-2" required maxlength="100" placeholder="Zum Beispiel: Kundenportal Demo" autocomplete="off">
<div class="grid md:grid-cols-2 gap-4 mt-4">
<div>
<label for="project-status">Status</label>
<select id="project-status" name="status" class="r-input mt-2">
<option value="planned">Geplant</option>
<option value="active">Aktiv</option>
<option value="paused">Pausiert</option>
</select>
</div>
<div>
<label for="project-pages">Seiten</label>
<input id="project-pages" name="pages" type="number" min="0" max="10000" step="1" required value="0" class="r-input mt-2">
</div>
</div>
<div class="flex gap-4 flex-wrap mt-6">
<button class="r-button r-button-primary" id="project-save" type="submit">Projekt anlegen</button>
<button class="r-button" id="project-cancel" type="button" hidden>Bearbeitung abbrechen</button>
</div>
<p id="project-form-error" class="r-error mt-4" role="alert" hidden>
</p>
</form>
</section>
<section class="r-card mt-8" aria-labelledby="project-list-title">
<h2 class="text-2xl font-bold" id="project-list-title">Deine Projekte</h2>
<div class="grid md:grid-cols-2 gap-4 mt-6">
<div>
<label for="project-search">Projekte durchsuchen</label>
<input id="project-search" class="r-input mt-2" type="search" placeholder="Nach Projektnamen filtern">
</div>
<div>
<label for="project-filter">Status filtern</label>
<select id="project-filter" class="r-input mt-2">
<option value="">Alle Status</option>
<option value="planned">Geplant</option>
<option value="active">Aktiv</option>
<option value="paused">Pausiert</option>
</select>
</div>
</div>
<button id="project-clear-filter" class="r-button mt-4" type="button">Filter zurücksetzen</button>
<p id="project-count" class="r-help mt-4" aria-live="polite">
</p>
<div class="overflow-auto mt-4">
<table class="r-table w-full">
<caption class="text-left font-bold">Lokale Demo-Projekte</caption>
<thead>
<tr>
<th scope="col">Projekt</th>
<th scope="col">Status</th>
<th scope="col">Seiten</th>
<th scope="col">Aktionen</th>
</tr>
</thead>
<tbody id="project-rows">
</tbody>
</table>
</div>
<p id="project-empty" class="r-alert mt-4" hidden>
</p>
</section>
<section class="r-alert mt-6" aria-label="Letzte Aktion">
<p id="project-message" role="status" aria-live="polite">Bereit. Du kannst ein fiktives Projekt anlegen.</p>
<button id="project-undo" class="r-button mt-4" type="button" hidden>Letztes Löschen rückgängig machen</button>
</section>
<p class="r-help mt-6">Die Wiederherstellung gilt für das zuletzt hier gelöschte Projekt und bleibt bis zum Neuladen verfügbar. Weitere Vorlagen: <a href="dashboard.html">Dashboard</a> · <a href="settings.html">Einstellungen</a>.</p>
</main>
<script src="/assets/rittek.js">
</script>
<script src="/assets/template-shell.js">
</script>
<script type="module" src="/assets/template-projects.js">
</script>
</body>
</html>
Einstellungen: Vorschau und vollständiges HTML
Die Vorschau verwendet denselben lokalen Demo-Datenstand wie die geöffnete Vorlage. Darunter steht der vollständige HTML-Quellcode; die geladenen CSS-/JavaScript-Dateien sind im Beispielpaket enthalten.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Workspace-Einstellungen · Rittek UI</title>
<script src="/assets/theme-init.js">
</script>
<link rel="stylesheet" href="/assets/rittek.css">
<link rel="stylesheet" href="/assets/template-shell.css">
</head>
<body data-r-template>
<!-- template-shell:start -->
<script src="/assets/template-preferences.js">
</script>
<a class="docs-skip" href="#template-content">Zum Inhalt</a>
<header class="template-header">
<div class="template-header-row">
<a class="template-brand" href="/templates/dashboard.html">r/ <strong>Workspace</strong>
<span>VORLAGE · LOKALE DEMO</span>
</a>
<a href="/docs/templates.html">Quellcode & Einbindung ↗</a>
</div>
<nav aria-label="Workspace">
<a href="/templates/dashboard.html">Übersicht</a>
<a href="/templates/projects.html">Projekte</a>
<a href="/templates/settings.html" aria-current="page">Einstellungen</a>
</nav>
<details class="template-appearance">
<summary>Ansicht anpassen</summary>
<div>
<label>Farbschema<select data-r-scheme-control>
<option value="lime">Rittek Lime</option>
<option value="orchid">Orchid · Lila-Pink</option>
<option value="ocean">Ocean · Blau</option>
<option value="graphite">Graphite · Dunkelgrau</option>
<option value="porcelain">Porcelain · Hell-Neutral</option>
<option value="rose">Rose · Warmes Pink</option>
<option value="teal">Lagoon · Petrol</option>
<option value="amber">Amber · Gold</option>
<option value="terracotta">Terra · Terrakotta</option>
<option value="indigo">Indigo · Violettblau</option>
<option value="executive">Executive</option>
<option value="slate">Slate</option>
<option value="forest">Forest</option>
<option value="carbon">Carbon</option>
</select>
</label>
<label>Darstellung<select data-r-mode-control>
<option value="system">System</option>
<option value="light">Hell</option>
<option value="dark">Dunkel</option>
</select>
</label>
<label>Seitendichte<select data-r-size-control>
<option value="xs">XS</option>
<option value="small">Small</option>
<option value="standard">Standard</option>
<option value="big">Big</option>
<option value="xxl">XXL</option>
</select>
</label>
<label>Schriftgröße<select data-r-font-control>
<option value="xs">XS</option>
<option value="small">Small</option>
<option value="standard">Normal</option>
<option value="big">Big</option>
<option value="xxl">XXL</option>
</select>
</label>
</div>
</details>
</header>
<!-- template-shell:end -->
<main class="r-container template-main" id="template-content">
<header class="mb-8">
<p class="r-badge mb-3">WORKSPACE / EINSTELLUNGEN</p>
<h1 class="text-4xl font-bold mb-3">Ein klarer Rahmen für Ihr Team.</h1>
<p class="text-lg text-muted">Name, Kontakt und Präferenzen an einem Ort. Diese Vorlage speichert ausschließlich in Ihrem Browser.</p>
</header>
<div class="grid gap-6 lg:grid-cols-3">
<section class="r-card p-6 lg:col-span-2" aria-labelledby="settings-heading">
<div class="flex flex-wrap items-center justify-between gap-3 mb-6">
<div>
<p class="text-sm text-muted mb-1">ALLGEMEIN</p>
<h2 class="text-2xl font-semibold" id="settings-heading">Workspace-Profil</h2>
</div>
<span class="r-badge" id="settings-dirty">Wird geladen</span>
</div>
<form id="settings-form">
<div class="mb-6">
<label class="r-label" for="settings-workspace">Workspace-Name <span aria-hidden="true">*</span>
</label>
<input class="r-input w-full" id="settings-workspace" name="workspace" type="text" required minlength="2" maxlength="80" autocomplete="organization" aria-describedby="workspace-help">
<p class="text-sm text-muted mt-2" id="workspace-help">2 bis 80 Zeichen. Verwenden Sie den Namen Ihres Teams oder Unternehmens.</p>
</div>
<div class="mb-6">
<label class="r-label" for="settings-contact">Kontakt-E-Mail <span aria-hidden="true">*</span>
</label>
<input class="r-input w-full" id="settings-contact" name="contact" type="email" required maxlength="120" autocomplete="email" aria-describedby="contact-help">
<p class="text-sm text-muted mt-2" id="contact-help">Eine gültige E-Mail-Adresse mit höchstens 120 Zeichen. Die Demo verschickt keine E-Mails.</p>
</div>
<div class="r-card p-4 mb-6">
<label class="flex items-center gap-3 font-semibold" for="settings-notifications">
<input id="settings-notifications" name="notifications" type="checkbox" aria-describedby="notifications-help"> Benachrichtigungen bevorzugen</label>
<p class="text-sm text-muted mt-2" id="notifications-help">Gespeicherte Demo-Präferenz. Es werden keine Browser-Berechtigungen angefragt und keine Mitteilungen versendet.</p>
</div>
<div class="r-card p-4 mb-6" id="settings-conflict" hidden>
<h3 class="font-semibold mb-2">Neuere Einstellungen verfügbar</h3>
<p class="text-sm mb-3">Die gespeicherten Werte wurden an anderer Stelle geändert. Ihre Eingaben bleiben erhalten. „Neueste Werte laden“ verwirft Ihre offenen Änderungen; „Änderungen speichern“ übernimmt Ihre Eingaben als neue Einstellungen.</p>
<button class="r-button" type="button" id="settings-reload">Neueste Werte laden</button>
</div>
<div class="flex flex-wrap gap-3">
<button class="r-button r-button-primary" type="submit" id="settings-save" disabled>Änderungen speichern</button>
<button class="r-button" type="reset" id="settings-reset" disabled>Gespeicherte Werte laden</button>
</div>
<p class="text-sm text-muted mt-4" role="status" aria-live="polite" aria-atomic="true" id="settings-status">Einstellungen werden geladen.</p>
<noscript>
<p>JavaScript ist für diese lokale Demo erforderlich. Das Formular überträgt keine Daten.</p>
</noscript>
</form>
</section>
<aside class="flex flex-col gap-6">
<section class="r-card p-6" aria-labelledby="settings-saved-heading">
<p class="text-sm text-muted mb-2">AKTUELL GESPEICHERT</p>
<h2 class="text-xl font-semibold mb-5" id="settings-saved-heading">Ihr Workspace im Überblick</h2>
<dl>
<dt class="text-sm text-muted">Workspace</dt>
<dd class="font-semibold mb-4 break-words" id="saved-workspace">—</dd>
<dt class="text-sm text-muted">Kontakt</dt>
<dd class="mb-4 break-words" id="saved-contact">—</dd>
<dt class="text-sm text-muted">Benachrichtigungen</dt>
<dd class="mb-4" id="saved-notifications">—</dd>
</dl>
<p class="text-sm text-muted" id="settings-storage" role="status">
</p>
</section>
<section class="r-card p-6" aria-labelledby="settings-local-heading">
<h2 class="font-semibold mb-3" id="settings-local-heading">Ihre Daten bleiben hier.</h2>
<p class="text-sm text-muted mb-3">Kein Konto, kein Server und keine Übertragung. Die Browserablage ist für Demo-Daten gedacht. Bitte verwenden Sie keine vertraulichen Informationen.</p>
<p class="text-sm text-muted">Diese Einstellungen teilen sich den lokalen Demo-Zustand mit den anderen Vorlagen. Vorhandene Projekte bleiben beim Speichern erhalten.</p>
</section>
</aside>
</div>
</main>
<script type="module" src="/assets/rittek.js">
</script>
<script type="module" src="/assets/template-shell.js">
</script>
<script type="module" src="/assets/template-settings.js">
</script>
</body>
</html>