feat: implement Watchtower theme for web UI

Replace Pico CSS with custom Watchtower theme (Sci-Fi Dark Mode):
- Add backend/static/ directory with Watchtower CSS files
- tokens_watchtower.css: Design tokens (colors, typography, spacing)
- theme_watchtower.css: Theme overrides for components

Features:
- High-contrast dark mode (#0b0f14 background)
- Neon accent color (#00e08f teal/cyan)
- Glow effects on buttons and inputs
- Radial gradient background
- SVG noise texture overlay (bg-noise class)
- Pill-shaped buttons (border-radius: 999px)
- Uppercase labels with letter-spacing
- Monospace font for logs

UI Enhancements:
- FastAPI static files mount added
- Custom styling for all components (sections, buttons, inputs, forms)
- Accent border-left on header and update status
- Improved visual hierarchy with color coding
- OIDC button gets secondary style (outline)

Complete US_000024 and TASK_000024.
Based on minecraft-watchtower UI design.
All Pico CSS dependencies removed.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-30 11:59:24 +01:00
parent f7b1a7987d
commit efd006276d
7 changed files with 233 additions and 7 deletions

View File

@ -54,8 +54,8 @@ Sicheres, remote steuerbares System zum Sperren/Entsperren lokaler Nutzerkonten.
- [x] TASK_000010: Serve UI template
- [x] US_000022: Web-UI Aktionen ausfuehren
- [x] TASK_000022: UI login and actions
- [ ] US_000024: Watchtower Theme fuer Web-UI (zurueckgestellt)
- [ ] TASK_000024: Apply Watchtower theme (zurueckgestellt)
- [x] US_000024: Watchtower Theme fuer Web-UI
- [x] TASK_000024: Apply Watchtower theme
### EPIC_000005: Automation Scripts
- [x] US_000011: Virtualenv und Abhaengigkeiten erstellen

View File

@ -1,9 +1,9 @@
ID: US_000024 | Version: 0.1.0 | Status: Draft
ID: US_000024 | Version: 0.1.0 | Status: Done
By: Codex (GPT-5)
# US_000024: Watchtower Theme fuer Web-UI
Status: Zurueckgestellt
Status: Done
Als Admin moechte ich das Watchtower-Design verwenden, damit die Web-UI dem vereinbarten Dark-Mode-Branding entspricht.