xpulse-web – Concept & Strategy

1
/{slug}                              ← platform-wide (general & legal)
2
/doc/tool/{tool-slug}/               ← tool documentation (via @xpulse/doc)
3
/doc/component/{component-slug}/     ← component documentation (via @xpulse/doc)

1
── Platform ───────────────────────────────────────────
2
xpulse.one/                          ← Platform landing
3
xpulse.one/status/                   ← Services & version status
4
 
5
── Documentation (via @xpulse/doc) ───────────────────
6
xpulse.one/doc/                      ← Documentation overview
7
xpulse.one/doc/tool/chat/            ← Chat tool (guide, security, changelog, ...)
8
xpulse.one/doc/component/*/          ← All @xpulse/* components
9
 
10
── Legal ──────────────────────────────────────────────
11
xpulse.one/privacy/                  ← Privacy policy (incl. chat-specific section)
12
xpulse.one/terms/                    ← Terms of service (incl. chat-specific section)
13
xpulse.one/disclaimer/               ← Disclaimer (incl. chat-specific section)
14
xpulse.one/imprint/                  ← Imprint
15
xpulse.one/contact/                  ← Contact
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-managed
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 (requires .env.stage)
2
make prod     # xpulse.one + www.xpulse.one

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            │  /doc/tool/chat/current/guide/
11
│  → Security & Anonymity       │  /doc/tool/chat/current/security/
12
│  → Changelog                  │  /doc/tool/chat/current/changelog/
13
│                               │
14
│  ─────────────────────────    │
15
│                               │
16
│  Privacy Policy               │  /privacy/
17
│  Terms of Service             │  /terms/
18
│  Disclaimer                   │  /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