Files
kiddo/project-management/requirements/stories/US_000024.md
stephan efd006276d 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>
2025-12-30 11:59:24 +01:00

851 B

ID: US_000024 | Version: 0.1.0 | Status: Done By: Codex (GPT-5)

US_000024: Watchtower Theme fuer Web-UI

Status: Done

Als Admin moechte ich das Watchtower-Design verwenden, damit die Web-UI dem vereinbarten Dark-Mode-Branding entspricht.

Akzeptanzkriterien

  • Given die Web-UI wird aus dem Template ausgeliefert
  • When das UI geladen wird
  • Then das Watchtower-Theme praegt Farben, Typografie und Kontraste der UI
  • And die Theme-Assets liegen unter assets/ in einer klaren Design-Struktur (z.B. assets/design/)
  • And das Theme nutzt die bereitgestellten Dateien tokens_watchtower.css und theme_watchtower.css
  • And ein Hintergrundrauschen (bg-noise) ist sichtbar

Notizen

  • Assets sind unter assets/design/ abgelegt (noch nicht eingebunden).

Task-Platzhalter

  • TASK_000024: Apply Watchtower theme (Details bei Story-Start)