Seiten

Inhalt

xpulse-web – Konzept & Strategie

Status: v2.0.0 · Repo: xpulse-web Begleitdokument: CONTENT_xpulse-web.md (Seiteninhalte) Aktualisiert April 2026

Ziel & Prinzip

xpulse.one ist die Plattform. Nicht nur eine Landing Page für den Chat, sondern der gemeinsame Heimatort für alle xPulse Tools, Komponenten und plattformweite Inhalte.

chat.xpulse.one ist das erste Tool. Weitere können folgen.

Single Responsibility:

chat.xpulse.one → App, UI, Kommunikation
xpulse.one → Plattform, Information, Dokumentation, Rechtliches

Die /info-Seite im Chat wird zu einem minimalen About-Screen (Version, One-Liner, Links nach xpulse.one) – keine eigenen Inhalte mehr.

URL-Struktur

1 /{slug}                              ← Plattform-weit (allgemein & rechtlich)
2 /doc/tool/{tool-slug}/               ← Tool-Dokumentation (via @xpulse/doc)
3 /doc/component/{component-slug}/     ← Component-Dokumentation (via @xpulse/doc)

Domain-Struktur

1 ── Plattform ──────────────────────────────────────────
2 xpulse.one/                          ← Plattform Landing
3 xpulse.one/status/                   ← Dienste & Versionsstatus
4  
5 ── Dokumentation (via @xpulse/doc) ───────────────────
6 xpulse.one/doc/                      ← Dokumentations-Übersicht
7 xpulse.one/doc/tool/chat/            ← Chat Tool (Guide, Security, Changelog, ...)
8 xpulse.one/doc/component/*/          ← Alle @xpulse/* Components
9  
10 ── Rechtlich ──────────────────────────────────────────
11 xpulse.one/privacy/                  ← Datenschutz (inkl. Chat-spezifischem Abschnitt)
12 xpulse.one/terms/                    ← Nutzungsbedingungen (inkl. Chat-spezifischem Abschnitt)
13 xpulse.one/disclaimer/               ← Haftungsausschluss (inkl. Chat-spezifischem Abschnitt)
14 xpulse.one/imprint/                  ← Impressum
15 xpulse.one/contact/                  ← Kontakt
16  
17 ── App ────────────────────────────────────────────────
18 chat.xpulse.one/                     ← xPulse Chat App

Rechtliches

Die Plattform-Rechtsseiten (/privacy/, /terms/, /disclaimer/) enthalten jeweils einen visuell abgesetzten Abschnitt mit den Chat-spezifischen Ergänzungen — keine separaten Tool-URLs nötig.

Verlinkung aus der Chat-App:

Ort	Ziel
`/info` – Datenschutz	`xpulse.one/privacy/`
`/info` – Nutzungsbedingungen	`xpulse.one/terms/`
`/info` – Haftungsausschluss	`xpulse.one/disclaimer/`
`/info` – Impressum	`xpulse.one/imprint/`

Seiten-Übersicht

Route	Titel	Typ	Status
`/`	xPulse	Plattform Landing	v2.0.0
`/status/`	Status & Versionen	Plattform	v2.0.0
`/doc/`	Dokumentation	Plattform	v2.0.0
`/privacy/`	Datenschutz (Plattform)	Rechtlich	v2.0.0
`/terms/`	Nutzungsbedingungen (Plattform)	Rechtlich	v2.0.0
`/disclaimer/`	Haftungsausschluss (Plattform)	Rechtlich	v2.0.0
`/contact/`	Kontakt	Plattform	v2.0.0
`/imprint/`	Impressum	Rechtlich	v2.0.0
`/doc/tool/chat/`	Chat-Dokumentation	Docs	v2.0.0
`/doc/component/*/`	Component-Dokumentation	Docs	v2.0.0

Repo-Struktur

1 xpulse-web/
2   src/
3     index.js
4     controllers/
5       index.js
6       privacy.js
7       terms.js
8       disclaimer.js
9       contact.js
10       imprint.js
11       status.js
12     templates/
13       shared/base.tpl.html
14       platform.tpl.html
15       privacy.tpl.html
16       terms.tpl.html
17       disclaimer.tpl.html
18       contact.tpl.html
19       imprint.tpl.html
20       status.tpl.html
21     translations/
22       de/  platform.*.json
23       en/  platform.*.json
24     themes/
25       web.css
26   public/
27     assets/
28       favicon.svg
29     status/
30       status.json          ← gitignored, server-seitig
31       status.json.example
32   docs/
33   Dockerfile
34   docker-compose.yml
35   docker-compose.stage.yml
36   Makefile
37   package.json
38   xpulse.json

Infrastruktur

Docker / Traefik

Node.js 22 Alpine hinter Traefik, Port 3000. status.json wird als read-only Volume gemountet.

1 make stage    # rc-2-0-0.stage.web.xpulse.one (.env.stage erforderlich)
2 make prod     # xpulse.one + www.xpulse.one

Stage-URL: ${RC_VERSION}.stage.web.xpulse.one

Landingpage Layout

1 ┌─────────────────────────────────┐
2 │                                 │
3 │   xPulse                        │  ← Logo (Serif, accent)
4 │   ─────────────────────         │
5 │   P2P Chat. Privat. Verschlüsselt│  ← Tagline (aktuell Chat-fokussiert,
6 │                                 │    später platform-weiter)
7 │   [→ Chat öffnen]               │  ← CTA → chat.xpulse.one
8 │                                 │
9 │   ─────────────────────         │
10 │                                 │
11 │   🔒 Ende-zu-Ende verschlüsselt │  ← Feature Pills
12 │   ⬡  Peer-to-Peer, kein Server  │
13 │   📵  Keine Datenspeicherung    │
14 │   📦  Installierbar als PWA     │
15 │                                 │
16 │   ─────────────────────         │
17 │                                 │
18 │   Guide · Security · Changelog  │  ← Navigation Tool-Infos
19 │                                 │
20 │   ─────────────────────         │
21 │                                 │
22 │   Datenschutz · Nutzungsbeding. │  ← Footer (Plattform-Basis, rechtlich)
23 │   Haftungsausschluss · Impressum│
24 │                                 │
25 └─────────────────────────────────┘

Chat-App `/info` – neue Rolle ab v1.3.0

1 ┌───────────────────────────────┐
2 │  xPulse Chat                  │
3 │  Version 1.3.0                │
4 │                               │
5 │  P2P Chat. Privat.            │
6 │  Ende-zu-Ende verschlüsselt.  │
7 │                               │
8 │  ─────────────────────────    │
9 │                               │
10 │  → Erste Schritte             │  /doc/tool/chat/current/guide/
11 │  → Sicherheit & Anonymität    │  /doc/tool/chat/current/security/
12 │  → Changelog                  │  /doc/tool/chat/current/changelog/
13 │                               │
14 │  ─────────────────────────    │
15 │                               │
16 │  Datenschutz                  │  /privacy/
17 │  Nutzungsbedingungen          │  /terms/
18 │  Haftungsausschluss           │  /disclaimer/
19 │  Impressum                    │  /imprint/
20 │                               │
21 └───────────────────────────────┘

Verlinkung Chat ↔ xpulse.one

Ort im Chat	Ziel	Ab Version
`/info` – Guide	`xpulse.one/doc/tool/chat/current/guide/`	v1.3.0
`/info` – Security	`xpulse.one/doc/tool/chat/current/security/`	v1.3.0
`/info` – Changelog	`xpulse.one/doc/tool/chat/current/changelog/`	v1.3.0
`/info` – Datenschutz	`xpulse.one/privacy/`	v1.1.1
`/info` – Nutzungsbedingungen	`xpulse.one/terms/`	v1.1.1
`/info` – Haftungsausschluss	`xpulse.one/disclaimer/`	v1.1.1
`/info` – Impressum	`xpulse.one/imprint/`	v1.1.1
Sidebar Version-Pill	`xpulse.one/doc/tool/chat/current/changelog/`	v1.3.0
Sidebar Footer	`xpulse.one/privacy/` etc.	v1.3.0

Styleguide

Identisch mit der Chat-App und den Feedback-Forms – ein einheitliches Design über alle xPulse-Präsenzen.

CSS Custom Properties

1 :root {
2   --bg:       #0d0d0d;
3   --surface:  #141414;
4   --border:   #222;
5   --muted:    #444;
6   --text:     #c8c8c8;
7   --text-dim: #555;
8   --accent:   #8703b0;
9   --accent2:  #7eb8a4;
10   --danger:   #c0606a;
11   --mono:  'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace;
12   --serif: 'Fraunces', Georgia, ui-serif, serif;
13 }

Typografie

Element	Font	Größe	Gewicht	Besonderheit
Logo / Brand	`--serif`	2.4rem	300	`color: var(--accent)`
Fließtext	`--mono`	13px	400	`line-height: 1.6`
Labels / Badges	`--mono`	10–11px	400	`letter-spacing: 0.08–0.12em; text-transform: uppercase`
Section Titles	`--mono`	10px	400	`color: var(--accent2); letter-spacing: 0.12em`
Code	`--mono`	11px	400	`background: var(--surface); border: 1px solid var(--border)`

Abstände & Formen

1 border-radius: 2px;
2 border: 1px solid var(--border);
3 padding (Karten): 1rem 1.2rem;
4 max-width (Content): 640px;
5 margin: 0 auto;

Noise-Overlay

1 body::before {
2   content: '';
3   position: fixed;
4   inset: 0;
5   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
6   pointer-events: none;
7   z-index: 9999;
8   opacity: 0.4;
9 }

Buttons

1 .btn-primary {
2   background: var(--accent);
3   color: #fff;
4   border: none;
5   font-family: var(--mono);
6   font-size: 12px;
7   font-weight: 600;
8   letter-spacing: 0.1em;
9   text-transform: uppercase;
10   padding: 0.75rem 1.5rem;
11   border-radius: 2px;
12   cursor: pointer;
13   transition: opacity 0.15s, transform 0.1s;
14 }
15 .btn-primary:hover  { opacity: 0.85; }
16 .btn-primary:active { transform: scale(0.98); }
17  
18 .btn-secondary {
19   background: none;
20   color: var(--text);
21   border: 1px solid var(--border);
22 }
23 .btn-secondary:hover { border-color: var(--accent2); color: var(--accent2); }

Links

1 a {
2   color: var(--text-dim);
3   text-decoration: none;
4   letter-spacing: 0.08em;
5   text-transform: uppercase;
6   font-size: 11px;
7   transition: color 0.15s;
8 }
9 a:hover { color: var(--accent); }

Animations

1 @keyframes fadeIn {
2   from { opacity: 0; transform: translateY(8px); }
3   to   { opacity: 1; transform: translateY(0); }
4 }
5 animation: fadeIn 0.3s ease both;

i18n – Internationalisierung

Strategie

Keine URL-Slugs für Sprachen (/de/, /en/ entfällt). Die Sprache ist eine Nutzer-Präferenz, keine Route.

Default: de
Wechsel: ohne Page Reload, per JS
Speicherung: localStorage → Key xpulse_lang
<html lang="xx"> wird bei jedem Sprachwechsel aktualisiert

Screenreader-Kompatibilität

Texte stehen immer als echter Inhalt im DOM – nie leer. Der Default-Text (Deutsch) ist direkt im HTML eingebettet. Beim Sprachwechsel ersetzt JS den textContent / innerHTML der Elemente. Data-Attribute dienen nur als Hook, nicht als Textquelle.

1 <!-- Korrekt: echter Text im HTML, data-i18n nur als Hook -->
2 <p data-i18n="chat.guide.pairing.intro">
3   Um mit jemandem zu chatten, müsst ihr euch einmalig pairen...
4 </p>
5  
6 <!-- Falsch: leeres Element, Text nur via JS -->
7 <p data-i18n="chat.guide.pairing.intro"></p>

Dateistruktur

1 locales/
2   de/
3     platform.about.json
4     platform.privacy.json
5     platform.terms.json
6     platform.disclaimer.json
7     tool.chat.guide.json
8     tool.chat.security.json
9     tool.chat.changelog.json
10     tool.chat.privacy.json
11     tool.chat.terms.json
12     tool.chat.disclaimer.json
13   en/
14     platform.about.json
15     platform.privacy.json
16     ...

Dateinamen spiegeln die URL-Struktur wider: {scope}.{tool?}.{page}.json. Der locales/-Ordner wird beim Start vollständig geparst – neue Dateien werden automatisch erkannt, kein manuelles Registrieren.

JSON-Format

1 {
2   "chat.guide.pairing.intro": "Um mit jemandem zu chatten...",
3   "chat.guide.pairing.step1": "Eine Person öffnet „Peer hinzufügen"...",
4   "chat.guide.faq.storage":   "Ausschließlich lokal in deinem Browser..."
5 }

Flache Key-Value-Struktur. Keys folgen dem Schema {scope}.{page}.{block}.{element}. Kein tief verschachteltes JSON – einfacher zu durchsuchen und zu pflegen.

JavaScript – i18n.js

1 // Verantwortlichkeiten von i18n.js:
2 // 1. Sprache aus localStorage lesen (Fallback: 'de')
3 // 2. Passendes JSON für die aktuelle Seite laden
4 // 3. Alle [data-i18n] Elemente mit textContent/innerHTML befüllen
5 // 4. <html lang="xx"> setzen
6 // 5. Lang-Switch: neue Sprache laden, DOM aktualisieren, localStorage schreiben
7  
8 const STORAGE_KEY = 'xpulse_lang';
9 const DEFAULT_LANG = 'de';

Jede Seite bindet nur das JSON ein das sie braucht – kein monolithisches Translations-Bundle.

HTML-Integration

1 <html lang="de">
2 ...
3 <!-- Sprachwechsel-Button -->
4 <button data-lang-switch="en">EN</button>
5 <button data-lang-switch="de">DE</button>
6  
7 <!-- Übersetzbarer Inhalt -->
8 <h1 data-i18n="chat.guide.title">Erste Schritte</h1>
9 <p  data-i18n="chat.guide.pairing.intro">Um mit jemandem...</p>

Offene Punkte

Thema	Status
i18n – Implementierung	Deployed (xpulse-web v2.0.0)
Changelog-Format in Chat-Docs (manuell vs. auto-build)	TBD
TURN-only Modus im Chat	Geplant, Version offen

Release-Reihenfolge

1 xpulse-web v1.0.0   → Plattform Landing, alle Rechtsseiten           [RELEASED]
2        ↓
3 xpulse-web v2.0.0   → Node.js SSR, @xpulse/* Stack, Docs-Integration [RELEASED 2026-04-24]
4        ↓
5 chat v1.3.0         → /info als reiner About-Screen, alle Links → xpulse.one
6                       Version-Pill → xpulse.one/tool/chat/changelog/  [Geplant]

1	/{slug} ← Plattform-weit (allgemein & rechtlich)
2	/doc/tool/{tool-slug}/ ← Tool-Dokumentation (via @xpulse/doc)
3	/doc/component/{component-slug}/ ← Component-Dokumentation (via @xpulse/doc)

1	── Plattform ──────────────────────────────────────────
2	xpulse.one/ ← Plattform Landing
3	xpulse.one/status/ ← Dienste & Versionsstatus
4
5	── Dokumentation (via @xpulse/doc) ───────────────────
6	xpulse.one/doc/ ← Dokumentations-Übersicht
7	xpulse.one/doc/tool/chat/ ← Chat Tool (Guide, Security, Changelog, ...)
8	xpulse.one/doc/component// ← Alle @xpulse/ Components
9
10	── Rechtlich ──────────────────────────────────────────
11	xpulse.one/privacy/ ← Datenschutz (inkl. Chat-spezifischem Abschnitt)
12	xpulse.one/terms/ ← Nutzungsbedingungen (inkl. Chat-spezifischem Abschnitt)
13	xpulse.one/disclaimer/ ← Haftungsausschluss (inkl. Chat-spezifischem Abschnitt)
14	xpulse.one/imprint/ ← Impressum
15	xpulse.one/contact/ ← Kontakt
16
17	── App ────────────────────────────────────────────────
18	chat.xpulse.one/ ← xPulse Chat App

1	xpulse-web/
2	src/
3	index.js
4	controllers/
5	index.js
6	privacy.js
7	terms.js
8	disclaimer.js
9	contact.js
10	imprint.js
11	status.js
12	templates/
13	shared/base.tpl.html
14	platform.tpl.html
15	privacy.tpl.html
16	terms.tpl.html
17	disclaimer.tpl.html
18	contact.tpl.html
19	imprint.tpl.html
20	status.tpl.html
21	translations/
22	de/ platform.*.json
23	en/ platform.*.json
24	themes/
25	web.css
26	public/
27	assets/
28	favicon.svg
29	status/
30	status.json ← gitignored, server-seitig
31	status.json.example
32	docs/
33	Dockerfile
34	docker-compose.yml
35	docker-compose.stage.yml
36	Makefile
37	package.json
38	xpulse.json

1	make stage # rc-2-0-0.stage.web.xpulse.one (.env.stage erforderlich)
2	make prod # xpulse.one + www.xpulse.one

1	┌─────────────────────────────────┐
2	│ │
3	│ xPulse │ ← Logo (Serif, accent)
4	│ ───────────────────── │
5	│ P2P Chat. Privat. Verschlüsselt│ ← Tagline (aktuell Chat-fokussiert,
6	│ │ später platform-weiter)
7	│ [→ Chat öffnen] │ ← CTA → chat.xpulse.one
8	│ │
9	│ ───────────────────── │
10	│ │
11	│ 🔒 Ende-zu-Ende verschlüsselt │ ← Feature Pills
12	│ ⬡ Peer-to-Peer, kein Server │
13	│ 📵 Keine Datenspeicherung │
14	│ 📦 Installierbar als PWA │
15	│ │
16	│ ───────────────────── │
17	│ │
18	│ Guide · Security · Changelog │ ← Navigation Tool-Infos
19	│ │
20	│ ───────────────────── │
21	│ │
22	│ Datenschutz · Nutzungsbeding. │ ← Footer (Plattform-Basis, rechtlich)
23	│ Haftungsausschluss · Impressum│
24	│ │
25	└─────────────────────────────────┘

1	┌───────────────────────────────┐
2	│ xPulse Chat │
3	│ Version 1.3.0 │
4	│ │
5	│ P2P Chat. Privat. │
6	│ Ende-zu-Ende verschlüsselt. │
7	│ │
8	│ ───────────────────────── │
9	│ │
10	│ → Erste Schritte │ /doc/tool/chat/current/guide/
11	│ → Sicherheit & Anonymität │ /doc/tool/chat/current/security/
12	│ → Changelog │ /doc/tool/chat/current/changelog/
13	│ │
14	│ ───────────────────────── │
15	│ │
16	│ Datenschutz │ /privacy/
17	│ Nutzungsbedingungen │ /terms/
18	│ Haftungsausschluss │ /disclaimer/
19	│ Impressum │ /imprint/
20	│ │
21	└───────────────────────────────┘

1	:root {
2	--bg: #0d0d0d;
3	--surface: #141414;
4	--border: #222;
5	--muted: #444;
6	--text: #c8c8c8;
7	--text-dim: #555;
8	--accent: #8703b0;
9	--accent2: #7eb8a4;
10	--danger: #c0606a;
11	--mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace;
12	--serif: 'Fraunces', Georgia, ui-serif, serif;
13	}

1	border-radius: 2px;
2	border: 1px solid var(--border);
3	padding (Karten): 1rem 1.2rem;
4	max-width (Content): 640px;
5	margin: 0 auto;

1	body::before {
2	content: '';
3	position: fixed;
4	inset: 0;
5	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
6	pointer-events: none;
7	z-index: 9999;
8	opacity: 0.4;
9	}

1	.btn-primary {
2	background: var(--accent);
3	color: #fff;
4	border: none;
5	font-family: var(--mono);
6	font-size: 12px;
7	font-weight: 600;
8	letter-spacing: 0.1em;
9	text-transform: uppercase;
10	padding: 0.75rem 1.5rem;
11	border-radius: 2px;
12	cursor: pointer;
13	transition: opacity 0.15s, transform 0.1s;
14	}
15	.btn-primary:hover { opacity: 0.85; }
16	.btn-primary:active { transform: scale(0.98); }
17
18	.btn-secondary {
19	background: none;
20	color: var(--text);
21	border: 1px solid var(--border);
22	}
23	.btn-secondary:hover { border-color: var(--accent2); color: var(--accent2); }

1	a {
2	color: var(--text-dim);
3	text-decoration: none;
4	letter-spacing: 0.08em;
5	text-transform: uppercase;
6	font-size: 11px;
7	transition: color 0.15s;
8	}
9	a:hover { color: var(--accent); }

1	@keyframes fadeIn {
2	from { opacity: 0; transform: translateY(8px); }
3	to { opacity: 1; transform: translateY(0); }
4	}
5	animation: fadeIn 0.3s ease both;

1	<!-- Korrekt: echter Text im HTML, data-i18n nur als Hook -->
2	<p data-i18n="chat.guide.pairing.intro">
3	Um mit jemandem zu chatten, müsst ihr euch einmalig pairen...
4	</p>
5
6	<!-- Falsch: leeres Element, Text nur via JS -->
7	<p data-i18n="chat.guide.pairing.intro"></p>

1	locales/
2	de/
3	platform.about.json
4	platform.privacy.json
5	platform.terms.json
6	platform.disclaimer.json
7	tool.chat.guide.json
8	tool.chat.security.json
9	tool.chat.changelog.json
10	tool.chat.privacy.json
11	tool.chat.terms.json
12	tool.chat.disclaimer.json
13	en/
14	platform.about.json
15	platform.privacy.json
16	...

1	{
2	"chat.guide.pairing.intro": "Um mit jemandem zu chatten...",
3	"chat.guide.pairing.step1": "Eine Person öffnet „Peer hinzufügen"...",
4	"chat.guide.faq.storage": "Ausschließlich lokal in deinem Browser..."
5	}

1	// Verantwortlichkeiten von i18n.js:
2	// 1. Sprache aus localStorage lesen (Fallback: 'de')
3	// 2. Passendes JSON für die aktuelle Seite laden
4	// 3. Alle [data-i18n] Elemente mit textContent/innerHTML befüllen
5	// 4. <html lang="xx"> setzen
6	// 5. Lang-Switch: neue Sprache laden, DOM aktualisieren, localStorage schreiben
7
8	const STORAGE_KEY = 'xpulse_lang';
9	const DEFAULT_LANG = 'de';

1	<html lang="de">
2	...
3	<!-- Sprachwechsel-Button -->
4	<button data-lang-switch="en">EN</button>
5	<button data-lang-switch="de">DE</button>
6
7	<!-- Übersetzbarer Inhalt -->
8	<h1 data-i18n="chat.guide.title">Erste Schritte</h1>
9	<p data-i18n="chat.guide.pairing.intro">Um mit jemandem...</p>

1	xpulse-web v1.0.0 → Plattform Landing, alle Rechtsseiten [RELEASED]
2	↓
3	xpulse-web v2.0.0 → Node.js SSR, @xpulse/* Stack, Docs-Integration [RELEASED 2026-04-24]
4	↓
5	chat v1.3.0 → /info als reiner About-Screen, alle Links → xpulse.one
6	Version-Pill → xpulse.one/tool/chat/changelog/ [Geplant]