ui: add logo and favicon

This commit is contained in:
2025-12-30 13:40:11 +01:00
parent 725b67d734
commit 044203e332
8 changed files with 54 additions and 2 deletions

View File

@ -1,4 +1,4 @@
ID: DOC_000001 | Version: 0.1.3 | Status: Final
ID: DOC_000001 | Version: 0.1.4 | Status: Final
By: Codex (GPT-5)
# Projekt-Logbuch (Changelog)
@ -45,6 +45,7 @@ By: Codex (GPT-5)
| 30.12.2025 | 🎨 UI | ID: TASK_000035 Login-Landing und Versionsanzeige im Header der Web-UI. By: Codex (GPT-5) |
| 30.12.2025 | 🎨 UI | ID: TASK_000036 Login-/Dashboard-URLs und Redirect nach Login. By: Codex (GPT-5) |
| 30.12.2025 | 🎨 UI | ID: TASK_000037 OIDC-Button neben Anmelden und nur aktiv bei erreichbarem Server. By: Codex (GPT-5) |
| 30.12.2025 | 🎨 UI | ID: TASK_000038 Logo im Header und Favicon eingebunden. By: Codex (GPT-5) |
---
## Legende

View File

@ -1 +1 @@
0.1.3
0.1.4

View File

@ -0,0 +1,7 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" rx="12" fill="#1F2A37"/>
<rect x="12" y="16" width="12" height="32" rx="2" fill="#FFFFFF" fill-opacity="0.9"/>
<rect x="40" y="16" width="12" height="32" rx="2" fill="#FFFFFF" fill-opacity="0.9"/>
<!-- Teal Keystone -->
<rect x="26" y="29" width="12" height="19" rx="2" fill="#0EA5A4"/>
</svg>

After

Width:  |  Height:  |  Size: 428 B

15
assets/branding/logo.svg Normal file
View File

@ -0,0 +1,15 @@
<svg width="250" height="60" viewBox="0 0 250 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Monolithic Symbol (V2 Optimized - Teal) -->
<g transform="translate(10, 10)">
<rect x="0" y="4" width="10" height="32" rx="1.5" fill="#1F2A37"/>
<rect x="24" y="4" width="10" height="32" rx="1.5" fill="#1F2A37"/>
<!-- Middle Block: Teal, 19px Height -->
<rect x="12" y="17" width="10" height="19" rx="1.5" fill="#0EA5A4"/>
</g>
<!-- Wordmark -->
<text x="55" y="42" fill="#1F2A37" font-family="'Inter', sans-serif" font-weight="800" font-size="32" letter-spacing="-0.04em" text-anchor="start">WLKNS</text>
<!-- The Underline: Teal, aligned like V8 -->
<rect x="56" y="48" width="121" height="4" rx="1" fill="#0EA5A4"/>
</svg>

After

Width:  |  Height:  |  Size: 764 B

View File

@ -39,6 +39,7 @@ logger = logging.getLogger("skd")
app = FastAPI(title="Safe Kiddo Daemon", version="1.0.0")
app.mount("/static", StaticFiles(directory="backend/static"), name="static")
app.mount("/assets", StaticFiles(directory="assets"), name="assets")
templates = Jinja2Templates(directory="backend/templates")

View File

@ -177,6 +177,8 @@ header p {
display: flex;
align-items: center;
gap: 12px;
flex-direction: column;
align-items: flex-start;
}
.header-main i {
@ -184,6 +186,12 @@ header p {
height: 32px;
}
.header-logo {
height: 34px;
width: auto;
display: block;
}
.header-meta {
display: flex;
flex-direction: column;

View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Safe Kiddo Control</title>
<link rel="stylesheet" href="/static/styles.css" />
<link rel="icon" type="image/svg+xml" href="/assets/branding/favicon.svg" />
<script src="https://unpkg.com/lucide@latest"></script>
</head>
<body>
@ -70,6 +71,7 @@
<i data-lucide="shield-check"></i>
Safe Kiddo Control
</h1>
<img class="header-logo" src="/assets/branding/logo.svg" alt="Safe Kiddo Logo" />
</div>
<div class="header-meta">
<div class="header-version" id="headerVersion">v-</div>

View File

@ -0,0 +1,18 @@
ID: TASK_000038 | Version: 0.1.4 | Status: Done
By: Codex (GPT-5)
# TASK_000038: Logo und Favicon einbinden
## Outcome
Header zeigt das Safe-Kiddo-Logo unter dem Schriftzug und ein Favicon ist gesetzt.
## Story-Bezug
US_000022
## Beschreibung
- Logo (`assets/branding/logo.svg`) im Header unter der Titelzeile platzieren.
- Favicon (`assets/branding/favicon.svg`) einbinden.
## Definition of Done (DoD)
- Logo ist im Header sichtbar.
- Favicon wird im Browser-Tab angezeigt.