From 044203e332f35ecd00cdcbbcb1162e43e1446de2 Mon Sep 17 00:00:00 2001
From: stephan <s.wilkens@gmx.net>
Date: Tue, 30 Dec 2025 13:40:11 +0100
Subject: [PATCH] ui: add logo and favicon

---
 CHANGELOG.md                                   |  3 ++-
 VERSION                                        |  2 +-
 assets/branding/favicon.svg                    |  7 +++++++
 assets/branding/logo.svg                       | 15 +++++++++++++++
 backend/app.py                                 |  1 +
 backend/static/styles.css                      |  8 ++++++++
 backend/templates/index.html                   |  2 ++
 .../requirements/tasks/TASK_000038.md          | 18 ++++++++++++++++++
 8 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 assets/branding/favicon.svg
 create mode 100644 assets/branding/logo.svg
 create mode 100644 project-management/requirements/tasks/TASK_000038.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 996a17e..60f260f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -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
diff --git a/VERSION b/VERSION
index b1e80bb..845639e 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.1.3
+0.1.4
diff --git a/assets/branding/favicon.svg b/assets/branding/favicon.svg
new file mode 100644
index 0000000..1bf5b24
--- /dev/null
+++ b/assets/branding/favicon.svg
@@ -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>
\ No newline at end of file
diff --git a/assets/branding/logo.svg b/assets/branding/logo.svg
new file mode 100644
index 0000000..37aa412
--- /dev/null
+++ b/assets/branding/logo.svg
@@ -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>
\ No newline at end of file
diff --git a/backend/app.py b/backend/app.py
index ad2c197..4cf6f33 100644
--- a/backend/app.py
+++ b/backend/app.py
@@ -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")
 
 
diff --git a/backend/static/styles.css b/backend/static/styles.css
index 5ff1a79..9cc4a3e 100755
--- a/backend/static/styles.css
+++ b/backend/static/styles.css
@@ -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;
diff --git a/backend/templates/index.html b/backend/templates/index.html
index 2867c7a..e400e08 100644
--- a/backend/templates/index.html
+++ b/backend/templates/index.html
@@ -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>
diff --git a/project-management/requirements/tasks/TASK_000038.md b/project-management/requirements/tasks/TASK_000038.md
new file mode 100644
index 0000000..a4a24da
--- /dev/null
+++ b/project-management/requirements/tasks/TASK_000038.md
@@ -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.