xpulse-web – Konzept & Strategie

1
/{slug}                              ← Plattform-weit (allgemein & rechtlich)
2
/tool/{tool-slug}/                   ← Tool Landing & Tool-spezifische Inhalte
3
/tool/{tool-slug}/{sub-slug}/        ← Tool-Unterseiten
4
/component/{component-slug}/         ← Shared Components Übersicht
5
/component/{component-slug}/{sub}/   ← Component-Unterseiten

1
── Plattform ──────────────────────────────────────────
2
xpulse.one/                          ← Plattform Landing
3
xpulse.one/about/                    ← Was ist xPulse (die Plattform)
4
 
5
── Tools ──────────────────────────────────────────────
6
xpulse.one/tool/chat/                ← Chat Tool Landing
7
xpulse.one/tool/chat/guide/          ← Erste Schritte (Chat-spezifisch)
8
xpulse.one/tool/chat/security/       ← Sicherheit & Anonymität (Chat-spezifisch)
9
xpulse.one/tool/chat/changelog/      ← Chat Changelog ← Version-Pill im Chat
10
 
11
── Components ─────────────────────────────────────────
12
xpulse.one/component/ui/             ← Shared UI Komponenten (TBD)
13
xpulse.one/component/ui/examples/    ← Beispiele / Showcase (TBD)
14
 
15
── Rechtlich (Plattform-Basis) ────────────────────────
16
xpulse.one/privacy/                  ← Datenschutz Plattform-Basis
17
xpulse.one/terms/                    ← Nutzungsbedingungen Plattform-Basis
18
xpulse.one/disclaimer/               ← Haftungsausschluss Plattform-Basis
19
xpulse.one/imprint/                  ← Impressum
20
 
21
── Rechtlich (Tool-spezifisch) ────────────────────────
22
xpulse.one/tool/chat/privacy/        ← Datenschutz-Ergänzung Chat
23
xpulse.one/tool/chat/terms/          ← Nutzungsbedingungen-Ergänzung Chat
24
xpulse.one/tool/chat/disclaimer/     ← Haftungsausschluss-Ergänzung Chat
25
 
26
── App ────────────────────────────────────────────────
27
chat.xpulse.one/                     ← xPulse Chat App (p2p-chat Repo)

1
xpulse.one/privacy/                  ← gilt immer, für alle Tools
2
xpulse.one/tool/chat/privacy/        ← gilt zusätzlich, nur für Chat

1
xpulse-web/
2
  docs/
3
    CONCEPT_xpulse-web.md
4
    CONTENT_xpulse-web.md
5
  public/
6
    index.html                        ← Plattform Landing
7
    about/
8
      index.html
9
    tool/
10
      chat/
11
        index.html                    ← Chat Tool Landing
12
        guide/
13
          index.html
14
        security/
15
          index.html
16
        changelog/
17
          index.html
18
        status/
19
          index.html                  ← TBD
20
        privacy/
21
          index.html
22
        terms/
23
          index.html
24
        disclaimer/
25
          index.html
26
    component/
27
      ui/
28
        index.html                    ← TBD
29
        examples/
30
          index.html                  ← TBD
31
    privacy/
32
      index.html                      ← Plattform-Basis
33
    terms/
34
      index.html
35
    disclaimer/
36
      index.html
37
    imprint/
38
      index.html
39
    assets/
40
      favicon.svg
41
      icons/
42
        icon-192.png
43
        icon-512.png
44
  nginx.conf
45
  Dockerfile
46
  docker-compose.yml

1
# docker-compose.yml (xpulse-web)
2
services:
3
  web:
4
    build: .
5
    restart: always
6
    networks:
7
      - webproxy
8
      - internal
9
    labels:
10
      - traefik.enable=true
11
      - traefik.docker.network=webproxy
12
 
13
      # HTTP → HTTPS redirect
14
      - traefik.http.routers.xpulseweb.rule=Host(`xpulse.one`) || Host(`www.xpulse.one`)
15
      - traefik.http.routers.xpulseweb.entrypoints=http
16
      - traefik.http.routers.xpulseweb.middlewares=https-redirect
17
 
18
      # HTTPS
19
      - traefik.http.routers.xpulseweb-secured.rule=Host(`xpulse.one`) || Host(`www.xpulse.one`)
20
      - traefik.http.routers.xpulseweb-secured.entrypoints=https
21
      - traefik.http.routers.xpulseweb-secured.tls=true
22
      - traefik.http.routers.xpulseweb-secured.tls.certresolver=le
23
 
24
      - traefik.http.services.xpulseweb.loadbalancer.server.port=80
25
 
26
networks:
27
  webproxy:
28
    external: true
29
  internal:
30
    external: true

1
server {
2
    listen 80;
3
    root /usr/share/nginx/html;
4
    index index.html;
5
 
6
    location / {
7
        try_files $uri $uri/ $uri/index.html =404;
8
    }
9
}

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             │  /tool/chat/guide/
11
│  → Sicherheit & Anonymität    │  /tool/chat/security/
12
│  → Changelog                  │  /tool/chat/changelog/
13
│                               │
14
│  ─────────────────────────    │
15
│                               │
16
│  Datenschutz                  │  /tool/chat/privacy/
17
│  Nutzungsbedingungen          │  /tool/chat/terms/
18
│  Haftungsausschluss           │  /tool/chat/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 + Tool Chat (Guide, Security, Changelog)
2
                      + alle Rechtsseiten (Plattform-Basis + Chat-Ergänzungen)
3
       ↓
4
chat v1.1.1         → Rechtliche Links auf xpulse.one/tool/chat/* in /info
5
       ↓
6
chat v1.2.0         → v1.1.1 bereits gemergt
7
       ↓
8
chat v1.3.0         → /info als reiner About-Screen, alle Links → xpulse.one
9
                      Version-Pill → xpulse.one/tool/chat/changelog/
10
                      Sidebar Footer → xpulse.one/tool/chat/* Rechtliches