From efd006276d7b113997b5254ecd227ded3b7853ac Mon Sep 17 00:00:00 2001 From: stephan Date: Tue, 30 Dec 2025 11:59:24 +0100 Subject: [PATCH] feat: implement Watchtower theme for web UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- CHANGELOG.md | 1 + backend/app.py | 2 + backend/static/theme_watchtower.css | 135 ++++++++++++++++++ backend/static/tokens_watchtower.css | 69 +++++++++ backend/templates/index.html | 25 +++- project-management/PROJECT_STATUS.md | 4 +- .../requirements/stories/US_000024.md | 4 +- 7 files changed, 233 insertions(+), 7 deletions(-) create mode 100644 backend/static/theme_watchtower.css create mode 100644 backend/static/tokens_watchtower.css diff --git a/CHANGELOG.md b/CHANGELOG.md index c593dac..ef617d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ By: Codex (GPT-5) | 29.12.2025 | ⚙️ Code | ID: Rollback-Script hinzugefuegt (scripts/rollback_client.sh). By: Codex (GPT-5) | | 30.12.2025 | ⚙️ Code | ID: Update-API Endpunkte implementiert (GET /update/status, POST /update/check, POST /update/apply, POST /update/rollback, GET /update/logs). By: Claude Sonnet 4.5 | | 30.12.2025 | ⚙️ Code | ID: Update-UI im Web-Frontend implementiert (Status-Anzeige, Check/Apply/Rollback Buttons, Logs-Viewer). By: Claude Sonnet 4.5 | +| 30.12.2025 | 🎨 UI | ID: Watchtower Theme implementiert (Sci-Fi Dark Mode mit Neon-Glow, bg-noise, CSS-Variables). By: Claude Sonnet 4.5 | --- ## Legende diff --git a/backend/app.py b/backend/app.py index 6dc1fa9..893c39f 100644 --- a/backend/app.py +++ b/backend/app.py @@ -3,6 +3,7 @@ from typing import List from fastapi import Body, Depends, FastAPI, HTTPException, Request, Response, status from fastapi.responses import HTMLResponse, RedirectResponse +from fastapi.staticfiles import StaticFiles from fastapi.templating import Jinja2Templates from backend import actions @@ -37,6 +38,7 @@ logging.basicConfig( logger = logging.getLogger("skd") app = FastAPI(title="Safe Kiddo Daemon", version="1.0.0") +app.mount("/static", StaticFiles(directory="backend/static"), name="static") templates = Jinja2Templates(directory="backend/templates") diff --git a/backend/static/theme_watchtower.css b/backend/static/theme_watchtower.css new file mode 100644 index 0000000..6e92698 --- /dev/null +++ b/backend/static/theme_watchtower.css @@ -0,0 +1,135 @@ +/* + wlkns-dev-standards + Component Theme: Watchtower + Adapts standard components to the Sci-Fi/Dark aesthetic. +*/ + +/* ========================= + Inputs & Forms + ========================= */ +input, select, textarea { + background: rgba(10, 14, 20, 0.6) !important; + border-color: rgba(255, 255, 255, 0.15) !important; + color: var(--color-text) !important; + transition: all 0.2s ease; +} + +input:focus, select:focus, textarea:focus { + border-color: var(--color-accent) !important; + box-shadow: 0 0 15px var(--wt-glow); +} + +/* ========================= + Buttons + ========================= */ +.button { + text-transform: uppercase; + letter-spacing: 0.05em; + font-weight: 600; + border-radius: 999px !important; /* Pill shape */ +} + +.button.primary { + box-shadow: 0 0 15px var(--wt-glow); + color: #081015; /* Dark text on bright accent */ +} + +.button.secondary { + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.2); + color: var(--color-text); +} + +.button.secondary:hover { + border-color: var(--color-text); + background: rgba(255,255,255,0.05); +} + +.button.danger { + box-shadow: 0 0 10px rgba(255, 94, 94, 0.4); + color: #1b0d0d; +} + +/* ========================= + Tables + ========================= */ +table { + border-collapse: separate; + border-spacing: 0 4px; /* Space between rows */ +} + +thead th { + border-bottom: 1px solid var(--color-accent); + text-transform: uppercase; + letter-spacing: 0.1em; + font-size: 0.75rem; + color: var(--color-accent); + background: transparent; +} + +tbody tr { + background: rgba(255, 255, 255, 0.03); + transition: transform 0.2s; +} + +tbody tr:hover { + background: rgba(255, 255, 255, 0.06); + transform: scale(1.01); +} + +tbody td { + border: none; +} + +tbody td:first-child { + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; +} + +tbody td:last-child { + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; +} + +/* ========================= + Alerts & Toasts + ========================= */ +.alert, .toast { + background: rgba(10, 14, 20, 0.95); + backdrop-filter: blur(4px); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 10px 30px rgba(0,0,0,0.5); +} + +.alert.success, .toast.success { + border-color: var(--color-success); + box-shadow: 0 0 10px rgba(0, 224, 143, 0.2); + color: var(--color-text); +} + +.alert.warning, .toast.warning { + border-color: var(--color-warning); + color: var(--color-text); +} + +.alert.error, .toast.error { + border-color: var(--color-error); + box-shadow: 0 0 10px rgba(255, 94, 94, 0.2); + color: var(--color-text); +} + +/* ========================= + Pagination + ========================= */ +.pagination .page { + background: transparent; + border: 1px solid rgba(255,255,255,0.1); + color: var(--color-text-muted); +} + +.pagination .page.active { + background: var(--color-accent); + color: #081015; + border-color: var(--color-accent); + box-shadow: 0 0 10px var(--wt-glow); +} diff --git a/backend/static/tokens_watchtower.css b/backend/static/tokens_watchtower.css new file mode 100644 index 0000000..a672d06 --- /dev/null +++ b/backend/static/tokens_watchtower.css @@ -0,0 +1,69 @@ +/* + wlkns-dev-standards + Theme: Watchtower (Dark Glow) + Version: v1.0 + Based on: minecraft-watchtower UI +*/ + +:root { + /* ========================= + Core Palette (Watchtower) + ========================= */ + --wt-bg-dark: #0b0f14; + --wt-bg-panel: #10151d; + --wt-accent: #00e08f; + --wt-warning: #ffb454; + --wt-danger: #ff5e5e; + --wt-text: #e6edf5; + --wt-text-dim: #9aa7b8; + --wt-glow: rgba(0, 224, 143, 0.35); + + /* ========================= + Mapping -> Standard Tokens + ========================= */ + + /* Farben – Identity & Status */ + --color-primary: #1a2230; /* Deep Blue/Grey from Gradient */ + --color-accent: var(--wt-accent); + + --color-success: var(--wt-accent); /* Watchtower uses accent as success */ + --color-warning: var(--wt-warning); + --color-error: var(--wt-danger); + + /* Farben – Neutrals (Dark Mode Override) */ + --color-bg: var(--wt-bg-dark); + --color-surface: var(--wt-bg-panel); + --color-border: rgba(255, 255, 255, 0.08); /* Subtle white border */ + + --color-text: var(--wt-text); + --color-text-muted: var(--wt-text-dim); + + /* Typografie (Optional: Falls Space Grotesk geladen wird) */ + --font-ui: 'Space Grotesk', 'Inter', system-ui, sans-serif; + --font-mono: 'JetBrains Mono', monospace; + + /* Radius & Spacing */ + --radius-sm: 4px; + --radius-md: 12px; /* Watchtower uses larger radii */ + --radius-lg: 16px; + + /* Shadows becomes Glows in this theme */ + --shadow-sm: 0 0 10px rgba(0,0,0,0.5); + --shadow-glow: 0 0 15px var(--wt-glow); +} + +/* Global Theme Overrides */ +body { + background: radial-gradient(circle at top, #1a2230 0%, #0b0f14 55%), linear-gradient(135deg, #0b0f14, #101623 60%); + min-height: 100vh; +} + +/* Noise Texture helper class */ +.bg-noise { + position: fixed; + inset: 0; + pointer-events: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); + mix-blend-mode: soft-light; + z-index: -1; +} diff --git a/backend/templates/index.html b/backend/templates/index.html index 1bd3bdd..b46450c 100644 --- a/backend/templates/index.html +++ b/backend/templates/index.html @@ -4,14 +4,33 @@ Safe Kiddo Control - + + +

Safe Kiddo Control

Steuere Nutzerkonten über die lokale API. Stelle sicher, dass der API-Token gesetzt ist.

diff --git a/project-management/PROJECT_STATUS.md b/project-management/PROJECT_STATUS.md index 0d88290..076fca0 100644 --- a/project-management/PROJECT_STATUS.md +++ b/project-management/PROJECT_STATUS.md @@ -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 diff --git a/project-management/requirements/stories/US_000024.md b/project-management/requirements/stories/US_000024.md index dfa2baf..dad9e17 100644 --- a/project-management/requirements/stories/US_000024.md +++ b/project-management/requirements/stories/US_000024.md @@ -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.