Server Admin UI: Postapokalyptisches Rost/Stahl/Beton-Theme #88

New issue

Closed

opened 2026-05-17 09:05:41 +00:00 by jreinemann-euris · 0 comments

jreinemann-euris commented

2026-05-17 09:05:41 +00:00

(Migrated from github.com)

Kontext

Die Admin-Webseite des Servers (server/src/main/resources/static/admin/index.html) ist eine einzelne, selbst-contained HTML-Datei (~750 Zeilen). Das aktuelle Styling ist ein nüchternes Corporate-Blau/Weiß-Theme. Sie soll ein modernes, postapokalyptisches Rost/Stahl/Beton-Design erhalten – ohne dabei Funktionalität zu verändern.

Kein Backend-Code, keine JS-Logik, keine API-Änderungen – rein visuelles Restyling innerhalb derselben Datei.

Design-Vorgaben

Thema: „Postapokalyptisches Rost – alter Stahl, Beton, Marsfarben"

Atmosphäre: Industriell, verwittert, überlebenswichtig. Nicht verspielt – klar lesbar, professionell. Erinnert an einen Bunkerrechner oder ein Lagerverwaltungssystem nach dem Zusammenbruch der Zivilisation.

Farbpalette

Rolle	Farbe	Hex
Hintergrund (body)	Dunkler Asphalt/Beton	`#16140F`
Oberfläche (cards)	Verwitterter Stahl dunkel	`#242119`
Oberfläche erhöht (hover, thead)	Stahl mittel	`#2E2B22`
Rand/Divider	Rostiger Stahl	`#4A3F2F`
Text primär	Sand/Off-white	`#E8D5B0`
Text sekundär	Verblasstes Messing	`#A89070`
Akzent primär (Buttons, Links)	Eisenoxid-Rost	`#C1440E`
Akzent hover	Heller Rost	`#D95A20`
Akzent sekundär (Badges, Info)	Marsstaub/Ocker	`#8B6914`
Erfolg/Positiv	Oxidiertes Moos	`#4A6741`
Gefahr (danger)	Tiefes Blutrot	`#8B1A1A`
Gefahr hover		`#A52020`
Fokus-Ring	Rost-Orange	`#C1440E` mit 40% Alpha

Typografie

Schriftart: 'Share Tech Mono', 'Courier New', monospace für Überschriften und Labels → Bunker-Terminal-Feeling
Fließtext/Inputs: system-ui, sans-serif bleibt für Lesbarkeit
Google Fonts: <link> für Share Tech Mono im <head> einbinden (von fonts.googleapis.com)
Buchstabenabstand bei h1/h2: leicht erhöht (letter-spacing: 0.05em)

Layout & Komponenten

Header: Volle Breite, dunkler Stahlhintergrund (#1A1815), schmale Rost-Linie am unteren Rand (border-bottom: 2px solid #C1440E). H1 in Share Tech Mono, uppercase.
Cards: Hintergrund #242119, Rand 1px solid #4A3F2F, kein weißer Box-shadow → stattdessen subtiler box-shadow: 0 2px 8px rgba(0,0,0,0.6) und ein leichter Rost-Border-Left als Akzent: border-left: 3px solid #8B3A0F.
Buttons primary: Rost-Orange-Hintergrund, kein Border-Radius > 3px, Share Tech Mono font, uppercase, leichter Text-shadow.
Buttons secondary: Transparent mit border: 1px solid #4A3F2F, Text in #A89070.
Buttons danger: Tiefes Blutrot, gleiche Typografie.
Inputs/Selects: Hintergrund #1C1A14, Border 1px solid #4A3F2F, Text #E8D5B0, Fokus-Border #C1440E.
Tabellen: Thead #2E2B22, Zeilen alternierend #242119 / #1E1C17, Hover #2E2B22. Rost-Akzent beim Sortier-Hover.
Stat-Cards: Dunkler Stahl, Wert in Rost-Orange (#C1440E), Label uppercase Share Tech Mono.
Badges (inv-badge): Ocker-Hintergrund #3A2E10, Border Messing #8B6914, Text #C8A840.
Inv-Group-Boxen: Border #4A3F2F, Hintergrund #1E1C17.
Modals: Hintergrund #242119, Border 2px solid #C1440E.
Footer: Rost-Trennlinie oben, Text in #6B5B3E.

Dekorative Details

Ein sehr subtiles Noise-/Körnung-Overlay auf body via CSS background-image (base64-kodiertes 64×64-px Rauschen oder SVG-Filter feTurbulence) für Beton-Textur. Wenn base64-PNG zu groß wäre, alternativ SVG-Filter direkt im <style>:

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,..."); /* feTurbulence noise */
}

Scrollbar-Styling (WebKit): Track #1A1815, Thumb #4A3F2F, Hover #C1440E
Rost-Symbol ⚠ oder ▣ als dekoratives Prefix vor h2-Überschriften (optional via CSS ::before)

Akzeptanzkriterien

Alle Farben lt. Palette angewendet – kein #f5f5f5, kein #1a1a2e, kein #2980b9 mehr in den Styles
Share Tech Mono für h1, h2, h3, Labels, Stat-Labels eingebunden und aktiv
Buttons (primary, secondary, danger, info) im neuen Stil
Inputs, Selects, Tabellen im neuen Stil
Stat-Cards im neuen Stil (Wert in Rost-Orange)
Modals (Passwort-Modal, Löschen-Modal) im neuen Stil
Noise-Overlay (Beton-Textur) vorhanden
Scrollbar-Styling gesetzt
Seite läuft vollständig offline (kein externer Asset-Ladeausfall bricht Layout) → Google Font per @import oder <link> mit font-display: swap; falls Font nicht lädt, Fallback 'Courier New' funktioniert
Keine JS-Logik, kein API-Endpoint, keine Funktionalität verändert
Build (./gradlew assembleDebug bzw. Server-Build) weiterhin erfolgreich
Manuelle Sichtkontrolle: Seite im Browser geöffnet, alle Sektionen sehen stimmig aus

Technische Hinweise

Nur eine Datei: server/src/main/resources/static/admin/index.html
Die Datei enthält ~750 Zeilen; alles CSS befindet sich im <style>-Block im <head> (Zeilen 7–66 ca.)
Alle bestehenden CSS-Klassennamen behalten (.card, .primary, .danger, .stat-card etc.) – nur deren Deklarationen ändern
Keine Tailwind, kein Bootstrap – alles bleibt inline/plain CSS
Google Fonts nur über <link rel="preconnect"> + <link href="https://fonts.googleapis.com/..."> im <head> einbinden

Referenz: Aktuelle Seiten-Struktur

Die Seite besteht aus:

Header – Titel + Logout-Button
Login-Card – Username/Passwort-Felder
Admin-Bereich (nach Login sichtbar):
- Statistik-Dashboard (5 Stat-Cards) + klappbare Inventar-Statistik-Tabelle
- Benutzerverwaltung + Anlegen-Formular + Benutzer-Tabelle
- Inventar-Übersicht mit Such-/Filter-Controls + paginierter Tabelle
Modals – Passwort ändern, Benutzer löschen
Footer

## Kontext Die Admin-Webseite des Servers (`server/src/main/resources/static/admin/index.html`) ist eine einzelne, selbst-contained HTML-Datei (~750 Zeilen). Das aktuelle Styling ist ein nüchternes Corporate-Blau/Weiß-Theme. Sie soll ein **modernes, postapokalyptisches Rost/Stahl/Beton-Design** erhalten – ohne dabei Funktionalität zu verändern. **Kein Backend-Code, keine JS-Logik, keine API-Änderungen** – rein visuelles Restyling innerhalb derselben Datei. --- ## Design-Vorgaben ### Thema: „Postapokalyptisches Rost – alter Stahl, Beton, Marsfarben" Atmosphäre: Industriell, verwittert, überlebenswichtig. Nicht verspielt – klar lesbar, professionell. Erinnert an einen Bunkerrechner oder ein Lagerverwaltungssystem nach dem Zusammenbruch der Zivilisation. ### Farbpalette | Rolle | Farbe | Hex | |---|---|---| | Hintergrund (body) | Dunkler Asphalt/Beton | `#16140F` | | Oberfläche (cards) | Verwitterter Stahl dunkel | `#242119` | | Oberfläche erhöht (hover, thead) | Stahl mittel | `#2E2B22` | | Rand/Divider | Rostiger Stahl | `#4A3F2F` | | Text primär | Sand/Off-white | `#E8D5B0` | | Text sekundär | Verblasstes Messing | `#A89070` | | Akzent primär (Buttons, Links) | Eisenoxid-Rost | `#C1440E` | | Akzent hover | Heller Rost | `#D95A20` | | Akzent sekundär (Badges, Info) | Marsstaub/Ocker | `#8B6914` | | Erfolg/Positiv | Oxidiertes Moos | `#4A6741` | | Gefahr (danger) | Tiefes Blutrot | `#8B1A1A` | | Gefahr hover | | `#A52020` | | Fokus-Ring | Rost-Orange | `#C1440E` mit 40% Alpha | ### Typografie - **Schriftart:** `'Share Tech Mono', 'Courier New', monospace` für Überschriften und Labels → Bunker-Terminal-Feeling - **Fließtext/Inputs:** `system-ui, sans-serif` bleibt für Lesbarkeit - **Google Fonts:** `<link>` für `Share Tech Mono` im `<head>` einbinden (von `fonts.googleapis.com`) - Buchstabenabstand bei h1/h2: leicht erhöht (`letter-spacing: 0.05em`) ### Layout & Komponenten - **Header:** Volle Breite, dunkler Stahlhintergrund (`#1A1815`), schmale Rost-Linie am unteren Rand (`border-bottom: 2px solid #C1440E`). H1 in `Share Tech Mono`, uppercase. - **Cards:** Hintergrund `#242119`, Rand `1px solid #4A3F2F`, kein weißer Box-shadow → stattdessen subtiler `box-shadow: 0 2px 8px rgba(0,0,0,0.6)` und ein leichter Rost-Border-Left als Akzent: `border-left: 3px solid #8B3A0F`. - **Buttons primary:** Rost-Orange-Hintergrund, kein Border-Radius > 3px, `Share Tech Mono` font, uppercase, leichter Text-shadow. - **Buttons secondary:** Transparent mit `border: 1px solid #4A3F2F`, Text in `#A89070`. - **Buttons danger:** Tiefes Blutrot, gleiche Typografie. - **Inputs/Selects:** Hintergrund `#1C1A14`, Border `1px solid #4A3F2F`, Text `#E8D5B0`, Fokus-Border `#C1440E`. - **Tabellen:** Thead `#2E2B22`, Zeilen alternierend `#242119` / `#1E1C17`, Hover `#2E2B22`. Rost-Akzent beim Sortier-Hover. - **Stat-Cards:** Dunkler Stahl, Wert in Rost-Orange (`#C1440E`), Label uppercase `Share Tech Mono`. - **Badges (inv-badge):** Ocker-Hintergrund `#3A2E10`, Border Messing `#8B6914`, Text `#C8A840`. - **Inv-Group-Boxen:** Border `#4A3F2F`, Hintergrund `#1E1C17`. - **Modals:** Hintergrund `#242119`, Border `2px solid #C1440E`. - **Footer:** Rost-Trennlinie oben, Text in `#6B5B3E`. ### Dekorative Details - Ein sehr subtiles **Noise-/Körnung-Overlay** auf `body` via CSS `background-image` (base64-kodiertes 64×64-px Rauschen oder SVG-Filter `feTurbulence`) für Beton-Textur. Wenn base64-PNG zu groß wäre, alternativ SVG-Filter direkt im `<style>`: ```css body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.04; background-image: url("data:image/svg+xml,..."); /* feTurbulence noise */ } ``` - **Scrollbar-Styling** (WebKit): Track `#1A1815`, Thumb `#4A3F2F`, Hover `#C1440E` - Rost-Symbol `⚠` oder `▣` als dekoratives Prefix vor `h2`-Überschriften (optional via CSS `::before`) --- ## Akzeptanzkriterien - [ ] Alle Farben lt. Palette angewendet – kein `#f5f5f5`, kein `#1a1a2e`, kein `#2980b9` mehr in den Styles - [ ] `Share Tech Mono` für h1, h2, h3, Labels, Stat-Labels eingebunden und aktiv - [ ] Buttons (`primary`, `secondary`, `danger`, `info`) im neuen Stil - [ ] Inputs, Selects, Tabellen im neuen Stil - [ ] Stat-Cards im neuen Stil (Wert in Rost-Orange) - [ ] Modals (Passwort-Modal, Löschen-Modal) im neuen Stil - [ ] Noise-Overlay (Beton-Textur) vorhanden - [ ] Scrollbar-Styling gesetzt - [ ] Seite läuft vollständig **offline** (kein externer Asset-Ladeausfall bricht Layout) → Google Font per `@import` oder `<link>` mit `font-display: swap`; falls Font nicht lädt, Fallback `'Courier New'` funktioniert - [ ] Keine JS-Logik, kein API-Endpoint, keine Funktionalität verändert - [ ] Build (`./gradlew assembleDebug` bzw. Server-Build) weiterhin erfolgreich - [ ] Manuelle Sichtkontrolle: Seite im Browser geöffnet, alle Sektionen sehen stimmig aus --- ## Technische Hinweise - **Nur eine Datei:** `server/src/main/resources/static/admin/index.html` - Die Datei enthält ~750 Zeilen; alles CSS befindet sich im `<style>`-Block im `<head>` (Zeilen 7–66 ca.) - Alle bestehenden CSS-Klassennamen behalten (`.card`, `.primary`, `.danger`, `.stat-card` etc.) – nur deren Deklarationen ändern - Keine Tailwind, kein Bootstrap – alles bleibt inline/plain CSS - Google Fonts nur über `<link rel="preconnect">` + `<link href="https://fonts.googleapis.com/...">` im `<head>` einbinden --- ## Referenz: Aktuelle Seiten-Struktur Die Seite besteht aus: 1. **Header** – Titel + Logout-Button 2. **Login-Card** – Username/Passwort-Felder 3. **Admin-Bereich** (nach Login sichtbar): - Statistik-Dashboard (5 Stat-Cards) + klappbare Inventar-Statistik-Tabelle - Benutzerverwaltung + Anlegen-Formular + Benutzer-Tabelle - Inventar-Übersicht mit Such-/Filter-Controls + paginierter Tabelle 4. **Modals** – Passwort ändern, Benutzer löschen 5. **Footer**

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: bollwerkadmin/bollwerk#88

No description provided.