D4rkst3randClaude Opus 5
0d7628f14e
Drei Dateien lagen unversioniert im Wurzelverzeichnis herum. Alle drei gehoeren ins Repo, nur nicht dorthin: logo.png -> docs/brand/logo.png ChatGPT Image 23. Juni 2025 ... -> docs/brand/studie-kopf-2025-06.png design_handoff_redesign/ -> docs/redesign/ logo.png ist NICHT irgendein Logo, sondern das Original, von dem docs/brand/README.md die ganze Zeit spricht: "ein einziges Original, 2048x2048 mit Transparenz". Nachgerechnet statt geraten -- auf den Inhalt beschnitten ergibt es 1986x1963, exakt die Masse von lockup.png. Es lag also die Quelle der Marke unversioniert daneben. Dabei aufgefallen und in der README vermerkt, nicht repariert: build.py liest das Original ueber einen festen Pfad ausserhalb des Repos (QUELLE = A:/Users/DAR/logo.png). Jetzt sind das zwei Kopien, die auseinanderlaufen koennen. Umstellen kann nur, wer weiss, welche der beiden gepflegt wird. Das zweite Bild ist eine frueherere Kopf-Studie und nicht die Vorlage der heutigen Marke -- andere Zeichnung, flacher, ohne Fell und Schulter. Sie wird nirgends benutzt und liegt als Herkunft. Vom Entwurfs-Paket ist der assets/-Ordner entfallen: er enthielt Kopien von mark.png und lockup.png, die zwei Verzeichnisse weiter im Original liegen. Die .dc.html-Referenzen zeigen jetzt auf ../brand/ und stellen das Logo weiter dar, statt mit kaputten Bildern zurueckzubleiben. Der Kopf der README sagt ausserdem, dass der Entwurf umgesetzt ist und wo bewusst abgewichen wurde -- sonst liest sich das Dokument in einem Jahr wie eine offene Aufgabe. Dazu eine Zeile, die seit dem Redesign nicht mehr stimmte: build.py bezeichnet (10, 10, 10) als "--bg der Marke". Das ist seit gestern #131316. Wirkt erst, wenn jemand build.py laufen laesst -- die erzeugten Icons in frontend/public/ tragen bis dahin den alten Grund. Neu bauen konnte ich sie hier nicht, es gibt weder Python noch Pillow auf dieser Maschine. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
117 lines
10 KiB
Markdown
117 lines
10 KiB
Markdown
# 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)
|
||
```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/`](../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)
|