d4rkbot/docs/redesign/README.md

Handoff: D4RKBOT Webseiten-Redesign („Graphit + Orange")

Stand: umgesetzt (18.08.2026, Commit „Webseiten-Redesign: Graphit + Orange, abgeschrägte Ecken"). Dieses Dokument bleibt als Beleg liegen — es beschreibt den Soll-Zustand, nicht mehr eine offene Aufgabe.

Drei Stellen weichen bewusst ab, die Gründe stehen in der Commit-Nachricht: die Statuszeile im Hero zeigt nur „ONLINE" (Antwortzeit und Erreichbarkeit des Bots gibt es öffentlich nicht), der Hauptknopf hat keine Aura (clip-path schneidet den eigenen Schatten weg — auch in den Referenzen unten), und die Config-Bereiche bleiben scharfkantig statt abgeschrägt (dort klappen Auswahllisten aus dem Panel heraus).

Überblick

Redesign der beiden Seiten des d4rkbot-Webinterfaces (Bot-Produktseite bot.d4rkst3r.de und Community-Hub hub.d4rkst3r.de) plus Dashboard. Neuer Look: Graphit-Grau mit dem Orange-Verlauf aus dem D4RKST3R-Logo, Esports-Charakter über abgeschrägte Ecken (clip-path), Chakra Petch als Display-Schrift, IBM Plex Mono für Labels.

Zu den Design-Dateien

Die .dc.html-Dateien in diesem Ordner sind Design-Referenzen in HTML — Prototypen, die Aussehen und Verhalten zeigen, kein Produktionscode. Aufgabe ist, diese Designs im bestehenden Frontend nachzubauen (React 19 + Vite, ein zentrales frontend/src/style.css mit semantischen Klassen — kein Tailwind nötig). Die bestehende Klassenstruktur (.nav, .page-header, .card, .home-tiles, .settings-layout …) kann größtenteils bleiben; im Wesentlichen wird style.css neu geschrieben und an wenigen Stellen JSX angepasst.

Fidelity

High-fidelity. Farben, Typografie, Abstände und Zustände sind final und sollen pixelgenau übernommen werden.

Design-Tokens (neue :root-Werte für style.css)

:root {
    --bg: #131316;          /* Seiten-Hintergrund (statt #0a0a0a) */
    --bg2: #1b1b20;         /* Karten/Panels (statt #111) */
    --bg3: #1f1f25;         /* Hover-Fläche / erhöht */
    --text: #ececee;        /* Haupttext (statt #e8e0d0 — kein Warmton mehr) */
    --text2: #c9c9cf;       /* Sekundärtext */
    --muted: #9a9aa3;       /* gedämpft */
    --muted2: #66666e;      /* stark gedämpft */
    --border: rgba(255,255,255,.08);
    --accent: #ff9a1f;      /* Orange, Einzelakzent */
    --accent-hi: #ffb340;   /* helles Orange (Verlauf oben) */
    --accent-lo: #f07800;   /* dunkles Orange (Verlauf unten) */
    --grad: linear-gradient(135deg, #ffb340, #f07800);  /* Marken-Verlauf, wie Logo-Wortmarke */
    --success: #3ba55d;
    --danger: #f23f43;
    --display: 'Chakra Petch', sans-serif;   /* 400/500/600/700 */
    --body: 'Chakra Petch', sans-serif;      /* Body 400, 16px, line-height 1.55 */
    --mono: 'IBM Plex Mono', monospace;      /* 400/500 */
}

Google Fonts: Chakra+Petch:wght@400;500;600;700 und IBM+Plex+Mono:wght@400;500. Die alten Fonts (Bebas Neue, Barlow Condensed, Share Tech Mono) entfallen; ebenso Noise-/Scanline-Overlays (body::before/::after) und die Partikel-Komponente.

Wiederkehrende Muster

• Abgeschrägte Ecken statt border-radius (Kern des neuen Looks): clip-path: polygon(Npx 0, 100% 0, 100% calc(100% - Npx), calc(100% - Npx) 100%, 0 100%, 0 Npx) N = 6–8px (Badges/Buttons klein), 10px (Buttons/Zeilen), 12–14px (Karten), 16–18px (große Panels).
• Primär-Button: background: var(--grad); color: #131316; font: 500 .78rem var(--mono); letter-spacing:.12em; text-transform:uppercase; padding:.8rem 1.6rem; clip-path 10px; box-shadow:0 0 30px rgba(240,120,0,.3).
• Ghost-Button: transparent, border:1px solid rgba(255,255,255,.18), Text --text2, Hover: background:rgba(255,255,255,.06); color:#ffb340.
• Badge/Tag (ersetzt .page-tag): Mono .68rem, uppercase, color:#ffb340, border:1px solid rgba(255,154,31,.4), clip-path 6px, optional pulsierender Punkt (@keyframes pulseGlow, 2s).
• Gradient-Text für betonte Wörter in Headlines: background:var(--grad); -webkit-background-clip:text; color:transparent, dazu filter:drop-shadow(0 0 22px rgba(240,120,0,.35)).
• Section-Header: 22×3px Verlaufs-Strich + Titel (Chakra Petch 700, uppercase) + auslaufende 1px-Linie + rechts Mono-Meta in --muted2.
• Icon-Kachel: 32–36px, background:rgba(255,154,31,.1); border:1px solid rgba(255,154,31,.3); color:#ffb340, clip-path 6–7px; Icons weiterhin Lucide (18px, stroke 1.75) — icons.jsx bleibt unverändert.
• Hintergrund-Glow statt Grid/BG-Text: radial-gradient(900px 500px at 78% -10%, rgba(240,120,0,.14), transparent 60%) als fixed Layer.

Screens

Referenzdateien (Reihenfolge = Priorität):

1. Bot-Landing — D4RKBOT-Landing-neu.dc.html (ersetzt pages/BotLanding.jsx)

• Hero: 2-Spalten-Grid (1.15fr / .85fr), max-width 1160px, padding 5rem 2.5rem. Links: Badge „Selbst gebaut · keine Paywall" → H1 4.1rem, 700, uppercase, 3 Zeilen-Stile: normal / Outline (-webkit-text-stroke:1.5px #9a9aa3, Füllung transparent) / Gradient-Text → Subtitle (1.05rem, --muted, max 520px) → CTA-Reihe (Primär „Alle Funktionen →", Ghost „/befehle"). Rechts: „Bot-Karte": äußerer versetzter Rahmen (inset -1.2rem, border --border, clip-path 24px), innen Panel --bg2 clip-path 18px mit: Logo-Lockup (200px, zentriert, drop-shadow), Statuszeile (grüner Punkt + „ONLINE · 38 MS · UPTIME 99,2 %" — live aus /api), 2×2 Stat-Kacheln (Zahl 1.7rem Gradient-Text; Labels Mono .6rem uppercase): Funktionen / Slash-Befehle / Spiele im Monitor / 0 € — Werte wie bisher aus /api/features etc.
• „Was er kann": Section-Header + rechts „40 MODULE · EINZELN SCHALTBAR"; 3-spaltiges Grid, 9 Kacheln (.home-tile-Ersatz): Icon-Kachel + Titel (600, 1.02rem) in einer Zeile, Beschreibung .88rem --muted. Hover: Border rgba(255,154,31,.5), bg --bg3, translateY(-3px).
• Zwei Feature-Panels (Für Entwickler / Hosting): 2 Spalten; links neutraler Glas-Verlauf linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015)), rechts Orange-Verlauf linear-gradient(135deg,rgba(240,120,0,.16),rgba(240,120,0,.04)) + Border rgba(255,154,31,.35).
• Hub-Hinweis: Mono .74rem --muted2 mit unterstrichenem Link.

2. Funktionen — D4RKBOT-Funktionen-neu.dc.html (ersetzt pages/BotFeatures.jsx)

Kompakter Seitenkopf (Badge, H1 3.6rem mit Gradient-Silbe, Subtitle) statt großem page-header. Je Modul-Gruppe (aus /api/features) ein Section-Header mit Modul-Zähler rechts, 3-spaltiges Kachel-Grid (Icon via module-icons.jsx). Abschluss: Outro-Absatz + CTA-Reihe.

3. Befehle — D4RKBOT-Befehle-neu.dc.html (ersetzt pages/BotCommands.jsx)

Gleicher Seitenkopf. Je Gruppe Section-Header (Schloss-Icon in Orange bei eingeschränkten Gruppen), Befehle als Zeilen (clip-path 10px): code in Mono .82rem #ffb340, min-width 16rem; Beschreibung --muted.

4. Hub-Start — Hub-Start-neu.dc.html (ersetzt pages/Home.jsx)

Hero 2-spaltig: links Badge „Community-Hub", H1 „Willkommen bei D4RKST3R" (Name als Gradient-Text), CTAs (Zum Discord → primär, Devlogs lesen ghost), darunter Stat-Reihe (Member / Server online / Spieler — Zahlen 1.9rem Gradient-Text) aus /api/serverstats + /api/servers. Rechts: Logo-Lockup 300px mit drop-shadow + Orange-Glow. Darunter: 6 Bereichs-Kacheln (Devlog, Roadmap, Server, Galerie, Level, Events — gleiche Kachel wie Landing) und „Neuestes Devlog"-Panel (Teaser + „Weiterlesen →" in Orange-Mono). Hub-Logo in der Nav: Mark + „D4RKST3R" (Suffix „3R" in --accent).

5. Dashboard — Dashboard-neu.dc.html (Status-Tab von pages/Settings.jsx)

Kompakter Kopf: H1 „Dashboard" + Meta + rechts Status-Pill (grün, „Bot online · 38 ms"). Layout wie bisher settings-layout: Sidebar 13rem (Suche, Gruppen-Labels Mono .56rem, Items Mono .7rem; aktiv: Orange + border-left:2px solid var(--accent) + bg rgba(255,154,31,.08)). Inhalt: Bot-Panel (Mark 46px, Name+Tag, Online-Pill, rechts Laufzeit) → Erreichbarkeits-Balken (168 Striche, 32px hoch: grün --success, Ausfall --danger, teilweise --accent, leer rgba(255,255,255,.08)) → 4 KPI-Karten (Wert 1.6rem 700, Label Mono, Nebenzeile farbcodiert). Darunter 2 Spalten (1.2fr/.8fr): Aktivitäts-Balkenchart (Balken linear-gradient(180deg,#ffb340,rgba(240,120,0,.2))) und „Module nach Bereich" (Fortschrittsbalken im Marken-Verlauf). Alle übrigen Settings-Tabs übernehmen nur die Token (Panels --bg2, Inputs auf #131316, Fokus-Border --accent, Toggles: an = --grad).

Interaktionen & Verhalten

• Nav bleibt sticky mit backdrop-filter: blur(12px); Zustand „scrolled" kann entfallen (Leiste ist immer kompakt, padding .85rem 2.5rem).
• Aktiver Nav-Link: color:#ffb340; border-bottom:2px solid var(--accent) (ersetzt den animierten Gradient-Unterstrich).
• Karten-Hover überall: Border → rgba(255,154,31,.5), bg → --bg3, transform: translateY(-3px), transition ~.2s.
• Einblendung riseIn (.4–.5s, translateY 12px) bleibt wie bisher; prefers-reduced-motion respektieren (Regel aus alter style.css übernehmen).
• Alle Datenquellen/Routen unverändert (/api/features, /api/serverstats, /api/me …). i18n-Keys unverändert.

Assets

• Wolf-Mark (Nav 34px, Footer 20px, Dashboard 46px) und Logo mit Wortmarke (Landing-Hero 200px, Hub-Hero 300px) liegen als frontend/public/brand/ im Auslieferungsstand — verkleinert auf die Größen, in denen sie wirklich dargestellt werden. Originale: ../brand/.
• Icons: Lucide (bereits als Dependency vorhanden).

Dateien in diesem Paket

• D4RKBOT-Landing-neu.dc.html, D4RKBOT-Funktionen-neu.dc.html, D4RKBOT-Befehle-neu.dc.html, Hub-Start-neu.dc.html, Dashboard-neu.dc.html — Design-Referenzen (im Browser zu öffnen; alle Maße/Farben stehen inline im style-Attribut)

Der mitgelieferte assets/-Ordner ist beim Einsortieren entfallen — er enthielt Kopien von docs/brand/mark.png und docs/brand/lockup.png. Die .dc.html-Dateien zeigen jetzt auf ../brand/ und stellen das Logo im Browser weiterhin dar.

Empfohlene Umsetzungs-Reihenfolge

1. Tokens + Fonts in frontend/src/style.css tauschen, Noise/Scanlines/Partikel entfernen
2. Nav + Footer (BotApp.jsx / App.jsx: Logo-<img> ergänzen)
3. BotLanding.jsx (neues Hero-Layout mit Bot-Karte)
4. BotFeatures / BotCommands / Home (Seitenkopf-Komponente statt page-header)
5. Settings (Status-Tab, dann nur Token-Durchstich für die restlichen Tabs)