diff --git a/docs/brand/README.md b/docs/brand/README.md index 960e9b2..1dfb4b4 100644 --- a/docs/brand/README.md +++ b/docs/brand/README.md @@ -7,9 +7,16 @@ mit Transparenz (Katzenkopf über dem Schriftzug-Banner). | Datei | Was | Wofür | |---|---|---| +| `logo.png` | **das Original**, 2048×2048 mit Transparenz | Quelle für alles Weitere | | `lockup.png` | volles Logo, auf den Inhalt beschnitten | Kopfzeilen, Discord-Banner, OG-Bilder | | `mark.png` | nur der Katzenkopf, 1024×1024 | alles Quadratische — Favicon, Avatar | | `build.py` | erzeugt beide plus die abgeleiteten Icons | Neubau nach Logo-Änderung | +| `studie-kopf-2025-06.png` | frühere Kopf-Studie, 636×636 | nirgends in Benutzung, liegt als Herkunft | + +**Achtung beim Neubau:** `build.py` liest das Original noch über einen festen +Pfad ausserhalb des Repos (`QUELLE = A:/Users/DAR/logo.png`). Seit das Original +hier neben der Datei liegt, sind das zwei Kopien, die auseinanderlaufen können — +wer das Logo ändert, muss beide anfassen oder `QUELLE` auf `logo.png` umstellen. ## Warum zwei Fassungen diff --git a/docs/brand/build.py b/docs/brand/build.py index 362e39c..1b91cf5 100644 --- a/docs/brand/build.py +++ b/docs/brand/build.py @@ -21,7 +21,9 @@ BOT_ASSETS = pathlib.Path('A:/eco/dc_devlog_bot/src/bot/assets') # Katzenkopf mit Ohrenspitzen und etwas Schulter, ohne Schriftzug # (Koordinaten im 2048er Original) KOPF = (330, 20, 1740, 1430) -DUNKEL = (10, 10, 10, 255) # --bg der Marke +# --bg der Marke. Seit dem Redesign „Graphit + Orange" #131316 statt #0a0a0a. +# Die bereits erzeugten Icons tragen noch den alten Grund, bis das hier laeuft. +DUNKEL = (19, 19, 22, 255) for d in (MARKE, GITEA, FRONTEND, BOT_ASSETS): d.mkdir(parents=True, exist_ok=True) diff --git a/docs/brand/logo.png b/docs/brand/logo.png new file mode 100644 index 0000000..6306329 Binary files /dev/null and b/docs/brand/logo.png differ diff --git a/docs/brand/studie-kopf-2025-06.png b/docs/brand/studie-kopf-2025-06.png new file mode 100644 index 0000000..188e422 Binary files /dev/null and b/docs/brand/studie-kopf-2025-06.png differ diff --git a/docs/redesign/D4RKBOT-Befehle-neu.dc.html b/docs/redesign/D4RKBOT-Befehle-neu.dc.html new file mode 100644 index 0000000..1b36ed7 --- /dev/null +++ b/docs/redesign/D4RKBOT-Befehle-neu.dc.html @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + +
+
+
+ + + D4RKBOT_ + + DE / EN + Anmelden +
+
+
+
Referenz
+

Befehle

+

Alle Slash-Befehle im Überblick. Vieles läuft zusätzlich über Knöpfe direkt in den Nachrichten.

+
+
+ +
+
+ +

{{ g.label }} + +

+ +
+
+ +
+ {{ c.name }} + {{ c.desc }} +
+ +
+
+ +

Moderations- und Einrichtungs-Befehle sind Mitgliedern mit den passenden Discord-Rechten vorbehalten.

+
+
+ +
+ + + + diff --git a/docs/redesign/D4RKBOT-Funktionen-neu.dc.html b/docs/redesign/D4RKBOT-Funktionen-neu.dc.html new file mode 100644 index 0000000..b26da1f --- /dev/null +++ b/docs/redesign/D4RKBOT-Funktionen-neu.dc.html @@ -0,0 +1,194 @@ + + + + + + + + + + + + + + +
+
+
+ + + D4RKBOT_ + + DE / EN + Anmelden +
+
+
+
Alles drin, nichts hinter einer Paywall
+

Funktionen

+

47 Funktionen — jede einzeln ein- und ausschaltbar, jede im Browser einstellbar.

+
+
+ +
+
+ +

{{ g.label }}

+ + {{ g.count }} +
+
+ +
+
+ + {{ f.name }} +
+

{{ f.desc }}

+
+ +
+
+ +
+

Gebaut, weil drei Bots mit je eigenem Abo für eine Community weder übersichtlich noch günstig sind. Der Quelltext liegt offen, der Betrieb kostet einen Container.

+ +
+
+
+ +
+ + + + diff --git a/docs/redesign/D4RKBOT-Landing-neu.dc.html b/docs/redesign/D4RKBOT-Landing-neu.dc.html new file mode 100644 index 0000000..7fe0c5f --- /dev/null +++ b/docs/redesign/D4RKBOT-Landing-neu.dc.html @@ -0,0 +1,149 @@ + + + + + + + + + + + + + + +
+
+
+ + + D4RKBOT_ + + DE / EN + Anmelden +
+
+
+
+
Selbst gebaut · keine Paywall
+

Ein Discord-Bot,
der alles macht

+

Devlogs, Level, Moderation, Server-Monitoring, Verlosungen, Tickets — was sonst drei Bots mit Abo-Modell erledigen, läuft hier in einem, mit eigenem Webinterface.

+ +
+
+
+
+
+ D4RKST3R +
+
+ + ONLINE · 38 MS · UPTIME 99,2 % +
+
+ +
+
{{ st.n }}
+
{{ st.label }}
+
+ +
+
+
+
+
+
+ +

Was er kann

+ + 40 MODULE · EINZELN SCHALTBAR +
+
+ +
+
+ + {{ tl.title }} +
+

{{ tl.desc }}

+
+ +
+
+
+ Für Entwickler +

API & Single Sign-On

+

Eigene Skripte posten über die API v1 mit Bearer-Schlüsseln und Bereichs-Rechten. Andere Dienste nutzen den Discord-Login des Bots mit.

+
+
+ Hosting +

Läuft überall

+

Node und SQLite in einem Container, ein Volume für die Daten. Nächtliche Sicherungen inklusive — von der Datenbank und allen Repositories.

+
+
+

Der Bot läuft für die D4RKST3R-Community — zum Community-Hub.

+
+
+ +
+ + + + diff --git a/docs/redesign/Dashboard-neu.dc.html b/docs/redesign/Dashboard-neu.dc.html new file mode 100644 index 0000000..9aad179 --- /dev/null +++ b/docs/redesign/Dashboard-neu.dc.html @@ -0,0 +1,187 @@ + + + + + + + + + + + + + + +
+
+
+ + + D4RKBOT_ + + +
+
+
+
+

Dashboard

+ Alles an einem Ort — Änderungen greifen sofort + Bot online · 38 ms +
+
+
+ +
+
+
+ +
+ D4RKBOTd4rkbot#4471 + online +
+ SEIT 6 T 14 STD · 1 SERVER +
+
+ + + +
+
+ VOR 7 TAGEN99,2 % ERREICHBAR · JETZT +
+
+ +
+
{{ k.v }}{{ k.of }}
+
{{ k.label }}
+
{{ k.note }}
+
+ +
+
+
+
+
+ +

Aktivität

+ 4.812 NACHRICHTEN / 30 TAGE +
+
+ + + +
+
+
+
+ +

Module

+ 33/41 AN +
+
+ +
+ {{ mg.name }} + + {{ mg.count }} +
+ +
+
+
+
+
+
+ +
+ + + + diff --git a/docs/redesign/Hub-Start-neu.dc.html b/docs/redesign/Hub-Start-neu.dc.html new file mode 100644 index 0000000..2757bc5 --- /dev/null +++ b/docs/redesign/Hub-Start-neu.dc.html @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + +
+
+
+ + + D4RKST3R + + DE / EN + + + Login +
+
+
+
+
Community-Hub
+

Willkommen bei
D4RKST3R

+

Devlogs, Roadmap, Server-Status und alles aus der Community — an einem Ort, direkt aus dem Discord.

+ +
+
214
Member im Discord
+
3 / 4
Server online
+
7
Spieler gerade drauf
+
+
+
+ D4RKST3R +
+
+
+
+ + +
+ + {{ tl.title }} +
+

{{ tl.desc }}

+ + +
+
+
+ +

Neuestes Devlog

+ + VOR 2 TAGEN +
+ +
+

Diese Woche stand ganz im Zeichen des Traktors: Das neue Getriebemodell schaltet jetzt hörbar, und die Anhänger-Physik kippt nicht mehr bei jeder Bodenwelle. Nebenbei ist der Ladebildschirm um zwei Sekunden schneller geworden.

+

Außerdem gibt es erste Screenshots der überarbeiteten Hofkarte — mehr dazu im vollständigen Devlog.

+
+ Weiterlesen → + +
+
+
+ +
+ + + + diff --git a/docs/redesign/README.md b/docs/redesign/README.md new file mode 100644 index 0000000..1f8196d --- /dev/null +++ b/docs/redesign/README.md @@ -0,0 +1,116 @@ +# 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-`` 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)