xpulse-web – Concept & Strategy

1
/{slug}                              ← platform-wide (general & legal)
2
/tool/{tool-slug}/                   ← tool landing & tool-specific content
3
/tool/{tool-slug}/{sub-slug}/        ← tool sub-pages
4
/component/{component-slug}/         ← shared components overview
5
/component/{component-slug}/{sub}/   ← component sub-pages

1
── Platform ───────────────────────────────────────────
2
xpulse.one/                          ← Platform landing
3
xpulse.one/about/                    ← What is xPulse (the platform)
4
 
5
── Tools ──────────────────────────────────────────────
6
xpulse.one/tool/chat/                ← Chat tool landing
7
xpulse.one/tool/chat/guide/          ← Getting started (chat-specific)
8
xpulse.one/tool/chat/security/       ← Security & anonymity (chat-specific)
9
xpulse.one/tool/chat/changelog/      ← Chat changelog ← version pill in chat
10
 
11
── Components ─────────────────────────────────────────
12
xpulse.one/component/ui/             ← Shared UI components (TBD)
13
xpulse.one/component/ui/examples/    ← Examples / showcase (TBD)
14
 
15
── Legal (Platform Base) ──────────────────────────────
16
xpulse.one/privacy/                  ← Privacy policy platform base
17
xpulse.one/terms/                    ← Terms of service platform base
18
xpulse.one/disclaimer/               ← Disclaimer platform base
19
xpulse.one/imprint/                  ← Imprint
20
 
21
── Legal (Tool-specific) ──────────────────────────────
22
xpulse.one/tool/chat/privacy/        ← Privacy supplement chat
23
xpulse.one/tool/chat/terms/          ← Terms supplement chat
24
xpulse.one/tool/chat/disclaimer/     ← Disclaimer supplement chat
25
 
26
── App ────────────────────────────────────────────────
27
chat.xpulse.one/                     ← xPulse Chat app (p2p-chat repo)

1
xpulse.one/privacy/                  ← always applies, for all tools
2
xpulse.one/tool/chat/privacy/        ← applies additionally, for chat only

1
xpulse-web/
2
  docs/
3
    CONCEPT_xpulse-web.md
4
    CONTENT_xpulse-web.md
5
  public/
6
    index.html                        ← Platform 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                      ← Platform base
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. Private. Encrypted. │  ← Tagline (currently chat-focused,
6
│                                 │    later platform-wider)
7
│   [→ Open Chat]                 │  ← CTA → chat.xpulse.one
8
│                                 │
9
│   ─────────────────────         │
10
│                                 │
11
│   🔒 End-to-end encrypted       │  ← Feature pills
12
│   ⬡  Peer-to-peer, no server   │
13
│   📵  No data storage           │
14
│   📦  Installable as PWA        │
15
│                                 │
16
│   ─────────────────────         │
17
│                                 │
18
│   Guide · Security · Changelog  │  ← Navigation tool info
19
│                                 │
20
│   ─────────────────────         │
21
│                                 │
22
│   Privacy · Terms of Service    │  ← Footer (platform base, legal)
23
│   Disclaimer · Imprint          │
24
│                                 │
25
└─────────────────────────────────┘

1
┌───────────────────────────────┐
2
│  xPulse Chat                  │
3
│  Version 1.3.0                │
4
│                               │
5
│  P2P Chat. Private.           │
6
│  End-to-end encrypted.        │
7
│                               │
8
│  ─────────────────────────    │
9
│                               │
10
│  → Getting Started            │  /tool/chat/guide/
11
│  → Security & Anonymity       │  /tool/chat/security/
12
│  → Changelog                  │  /tool/chat/changelog/
13
│                               │
14
│  ─────────────────────────    │
15
│                               │
16
│  Privacy Policy               │  /tool/chat/privacy/
17
│  Terms of Service             │  /tool/chat/terms/
18
│  Disclaimer                   │  /tool/chat/disclaimer/
19
│  Imprint                      │  /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 (cards): 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
<!-- Correct: real text in HTML, data-i18n only as 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
<!-- Wrong: empty element, text only 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
// Responsibilities of i18n.js:
2
// 1. Read language from localStorage (fallback: 'de')
3
// 2. Load matching JSON for the current page
4
// 3. Populate all [data-i18n] elements with textContent/innerHTML
5
// 4. Set <html lang="xx">
6
// 5. Lang switch: load new language, update DOM, write to localStorage
7
 
8
const STORAGE_KEY = 'xpulse_lang';
9
const DEFAULT_LANG = 'de';

1
<html lang="de">
2
...
3
<!-- Language switch button -->
4
<button data-lang-switch="en">EN</button>
5
<button data-lang-switch="de">DE</button>
6
 
7
<!-- Translatable content -->
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   → Platform landing + tool chat (guide, security, changelog)
2
                      + all legal pages (platform base + chat supplements)
3
       ↓
4
chat v1.1.1         → Legal links to xpulse.one/tool/chat/* in /info
5
       ↓
6
chat v1.2.0         → v1.1.1 already merged
7
       ↓
8
chat v1.3.0         → /info as pure about screen, all links → xpulse.one
9
                      version pill → xpulse.one/tool/chat/changelog/
10
                      sidebar footer → xpulse.one/tool/chat/* legal