From 49f584016ef62ccea7734ac59317ae3b2b2b67e7 Mon Sep 17 00:00:00 2001
From: Ole-Morten Duesund <olemd@glemt.net>
Date: Mon, 1 Sep 2025 17:39:42 +0200
Subject: [PATCH] feat: Add SkyView logo, favicon, and branding assets -
 resolves #38
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Created comprehensive branding package for SkyView including:

Assets Created:
- SVG logo with animated radar theme for header
- Multi-size favicon set (16px, 32px, 48px)
- High-resolution app icon (512x512) for mobile/desktop
- Aviation-themed radar design with animated aircraft blips

UI Updates:
- Updated HTML with proper favicon links and theme color
- Enhanced header layout to include logo alongside version info
- Added responsive CSS styling for new branding elements
- Logo features animated radar sweep and aircraft tracking theme

Technical Details:
- All assets use SVG format for scalability and crisp display
- Radar theme with cyan/blue color scheme matching app design
- Logo includes animated elements (radar sweep, blinking aircraft)
- Favicons optimized for different display sizes
- Added proper meta tags for mobile app integration

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 assets/static/css/style.css               |  24 +++++
 assets/static/images/favicon-16.svg       |  11 +++
 assets/static/images/favicon-32.svg       |  32 +++++++
 assets/static/images/favicon-48.svg       |  43 +++++++++
 assets/static/images/skyview-app-icon.svg | 101 ++++++++++++++++++++++
 assets/static/images/skyview-favicon.svg  |  32 +++++++
 assets/static/images/skyview-logo.svg     |  58 +++++++++++++
 assets/static/index.html                  |  23 +++--
 8 files changed, 319 insertions(+), 5 deletions(-)
 create mode 100644 assets/static/images/favicon-16.svg
 create mode 100644 assets/static/images/favicon-32.svg
 create mode 100644 assets/static/images/favicon-48.svg
 create mode 100644 assets/static/images/skyview-app-icon.svg
 create mode 100644 assets/static/images/skyview-favicon.svg
 create mode 100644 assets/static/images/skyview-logo.svg

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
index 77623e8..cd2c719 100644
--- a/assets/static/css/style.css
+++ b/assets/static/css/style.css
@@ -101,6 +101,30 @@ body {
     color: #00a8ff;
 }
 
+/* New header branding styles */
+.header-brand {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.header-logo {
+    height: 50px;
+    width: auto;
+    filter: drop-shadow(0 2px 4px rgba(0, 212, 255, 0.3));
+}
+
+.header-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.header-links {
+    display: flex;
+    gap: 0.5rem;
+}
+
 .stats-summary {
     display: flex;
     gap: 1rem;
diff --git a/assets/static/images/favicon-16.svg b/assets/static/images/favicon-16.svg
new file mode 100644
index 0000000..8fe2cdd
--- /dev/null
+++ b/assets/static/images/favicon-16.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <!-- Simplified favicon for 16x16 -->
+  <circle cx="8" cy="8" r="7" fill="#003d52" stroke="#00d4ff" stroke-width="1"/>
+  <circle cx="8" cy="8" r="5" stroke="#00d4ff" stroke-width="0.5" fill="none" opacity="0.6"/>
+  <circle cx="8" cy="8" r="3" stroke="#00d4ff" stroke-width="0.5" fill="none" opacity="0.4"/>
+  <line x1="8" y1="8" x2="13" y2="5" stroke="#00d4ff" stroke-width="1" opacity="0.8"/>
+  <circle cx="11" cy="6" r="0.8" fill="#00ff00"/>
+  <circle cx="6" cy="10" r="0.8" fill="#00ff00"/>
+  <circle cx="8" cy="8" r="1" fill="#00d4ff"/>
+</svg>
\ No newline at end of file
diff --git a/assets/static/images/favicon-32.svg b/assets/static/images/favicon-32.svg
new file mode 100644
index 0000000..615e876
--- /dev/null
+++ b/assets/static/images/favicon-32.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="bgGradient" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" style="stop-color:#004d66;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#001a26;stop-opacity:1" />
+    </radialGradient>
+  </defs>
+  
+  <!-- Background -->
+  <circle cx="16" cy="16" r="15" fill="url(#bgGradient)" stroke="#00d4ff" stroke-width="1"/>
+  
+  <!-- Radar circles -->
+  <circle cx="16" cy="16" r="12" stroke="#00d4ff" stroke-width="1" fill="none" opacity="0.5"/>
+  <circle cx="16" cy="16" r="8" stroke="#00d4ff" stroke-width="0.8" fill="none" opacity="0.6"/>
+  <circle cx="16" cy="16" r="4" stroke="#00d4ff" stroke-width="0.6" fill="none" opacity="0.7"/>
+  
+  <!-- Radar sweep -->
+  <line x1="16" y1="16" x2="26" y2="10" stroke="#00d4ff" stroke-width="1.5" opacity="0.9"/>
+  
+  <!-- Cross hairs -->
+  <line x1="16" y1="3" x2="16" y2="29" stroke="#00d4ff" stroke-width="0.5" opacity="0.3"/>
+  <line x1="3" y1="16" x2="29" y2="16" stroke="#00d4ff" stroke-width="0.5" opacity="0.3"/>
+  
+  <!-- Aircraft blips -->
+  <circle cx="22" cy="12" r="1.2" fill="#00ff00"/>
+  <circle cx="12" cy="20" r="1.2" fill="#00ff00" opacity="0.8"/>
+  <circle cx="20" cy="22" r="1.2" fill="#00ff00" opacity="0.9"/>
+  
+  <!-- Center -->
+  <circle cx="16" cy="16" r="1.5" fill="#00d4ff"/>
+</svg>
\ No newline at end of file
diff --git a/assets/static/images/favicon-48.svg b/assets/static/images/favicon-48.svg
new file mode 100644
index 0000000..287c971
--- /dev/null
+++ b/assets/static/images/favicon-48.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="bgGrad" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" style="stop-color:#004d66;stop-opacity:1" />
+      <stop offset="80%" style="stop-color:#002633;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#001a26;stop-opacity:1" />
+    </radialGradient>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
+      <feMerge> 
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  
+  <!-- Background circle -->
+  <circle cx="24" cy="24" r="22" fill="url(#bgGrad)" stroke="#00d4ff" stroke-width="2"/>
+  
+  <!-- Radar circles with subtle glow -->
+  <circle cx="24" cy="24" r="18" stroke="#00d4ff" stroke-width="1.5" fill="none" opacity="0.4" filter="url(#glow)"/>
+  <circle cx="24" cy="24" r="14" stroke="#00d4ff" stroke-width="1.2" fill="none" opacity="0.5"/>
+  <circle cx="24" cy="24" r="10" stroke="#00d4ff" stroke-width="1" fill="none" opacity="0.6"/>
+  <circle cx="24" cy="24" r="6" stroke="#00d4ff" stroke-width="0.8" fill="none" opacity="0.7"/>
+  
+  <!-- Radar sweep with animation -->
+  <line x1="24" y1="24" x2="38" y2="14" stroke="#00d4ff" stroke-width="2" opacity="0.9" filter="url(#glow)"/>
+  
+  <!-- Cross hairs -->
+  <line x1="24" y1="4" x2="24" y2="44" stroke="#00d4ff" stroke-width="0.8" opacity="0.3"/>
+  <line x1="4" y1="24" x2="44" y2="24" stroke="#00d4ff" stroke-width="0.8" opacity="0.3"/>
+  
+  <!-- Aircraft blips -->
+  <circle cx="34" cy="16" r="1.8" fill="#00ff00" filter="url(#glow)"/>
+  <circle cx="16" cy="32" r="1.8" fill="#00ff00" opacity="0.8"/>
+  <circle cx="32" cy="34" r="1.8" fill="#00ff00" opacity="0.9"/>
+  <circle cx="14" cy="18" r="1.8" fill="#ffff00" opacity="0.7"/>
+  
+  <!-- Center beacon -->
+  <circle cx="24" cy="24" r="2.5" fill="#00d4ff" filter="url(#glow)"/>
+  <circle cx="24" cy="24" r="1.5" fill="#ffffff" opacity="0.8"/>
+</svg>
\ No newline at end of file
diff --git a/assets/static/images/skyview-app-icon.svg b/assets/static/images/skyview-app-icon.svg
new file mode 100644
index 0000000..391689e
--- /dev/null
+++ b/assets/static/images/skyview-app-icon.svg
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- Background gradient -->
+    <radialGradient id="bgGradient" cx="50%" cy="50%" r="70%">
+      <stop offset="0%" style="stop-color:#0066cc;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#003d66;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#001a26;stop-opacity:1" />
+    </radialGradient>
+    
+    <!-- Radar sweep gradient -->
+    <linearGradient id="sweepGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#00d4ff;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#00aadd;stop-opacity:0.8" />
+      <stop offset="100%" style="stop-color:#0088bb;stop-opacity:0.3" />
+    </linearGradient>
+    
+    <!-- Glow filter -->
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+      <feMerge> 
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    
+    <!-- Strong glow for center -->
+    <filter id="strongGlow" x="-100%" y="-100%" width="300%" height="300%">
+      <feGaussianBlur stdDeviation="6" result="coloredBlur"/>
+      <feMerge> 
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  
+  <!-- Background circle with border -->
+  <circle cx="256" cy="256" r="240" fill="url(#bgGradient)" stroke="#00d4ff" stroke-width="6"/>
+  
+  <!-- Outer radar grid circles -->
+  <circle cx="256" cy="256" r="200" stroke="#00d4ff" stroke-width="4" fill="none" opacity="0.3" filter="url(#glow)"/>
+  <circle cx="256" cy="256" r="160" stroke="#00d4ff" stroke-width="3.5" fill="none" opacity="0.4"/>
+  <circle cx="256" cy="256" r="120" stroke="#00d4ff" stroke-width="3" fill="none" opacity="0.5"/>
+  <circle cx="256" cy="256" r="80" stroke="#00d4ff" stroke-width="2.5" fill="none" opacity="0.6"/>
+  <circle cx="256" cy="256" r="40" stroke="#00d4ff" stroke-width="2" fill="none" opacity="0.7"/>
+  
+  <!-- Radar sweep line -->
+  <line x1="256" y1="256" x2="416" y2="140" stroke="url(#sweepGradient)" stroke-width="8" opacity="0.9" filter="url(#glow)">
+    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 256 256" to="360 256 256" dur="4s" repeatCount="indefinite"/>
+  </line>
+  
+  <!-- Cross hairs -->
+  <line x1="256" y1="40" x2="256" y2="472" stroke="#00d4ff" stroke-width="2" opacity="0.3"/>
+  <line x1="40" y1="256" x2="472" y2="256" stroke="#00d4ff" stroke-width="2" opacity="0.3"/>
+  
+  <!-- Diagonal cross hairs -->
+  <line x1="120" y1="120" x2="392" y2="392" stroke="#00d4ff" stroke-width="1.5" opacity="0.2"/>
+  <line x1="392" y1="120" x2="120" y2="392" stroke="#00d4ff" stroke-width="1.5" opacity="0.2"/>
+  
+  <!-- Aircraft blips of various types -->
+  <!-- Commercial aircraft -->
+  <circle cx="350" cy="180" r="8" fill="#00ff00" filter="url(#glow)">
+    <animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="180" cy="350" r="8" fill="#00ff00" opacity="0.8">
+    <animate attributeName="opacity" values="0.8;0.4;0.8" dur="2.5s" repeatCount="indefinite"/>
+  </circle>
+  
+  <!-- Military aircraft -->
+  <circle cx="320" cy="320" r="8" fill="#ffff00" opacity="0.9">
+    <animate attributeName="opacity" values="0.9;0.5;0.9" dur="1.8s" repeatCount="indefinite"/>
+  </circle>
+  
+  <!-- General aviation -->
+  <circle cx="160" cy="200" r="6" fill="#00ff88" opacity="0.7">
+    <animate attributeName="opacity" values="0.7;0.3;0.7" dur="3s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="300" cy="120" r="6" fill="#00ff88" opacity="0.6">
+    <animate attributeName="opacity" values="0.6;0.2;0.6" dur="2.8s" repeatCount="indefinite"/>
+  </circle>
+  
+  <!-- Helicopter -->
+  <circle cx="140" cy="300" r="6" fill="#ff8800" opacity="0.8">
+    <animate attributeName="opacity" values="0.8;0.4;0.8" dur="1.5s" repeatCount="indefinite"/>
+  </circle>
+  
+  <!-- Emergency aircraft -->
+  <circle cx="380" cy="280" r="8" fill="#ff0000" opacity="1" filter="url(#glow)">
+    <animate attributeName="opacity" values="1;0.6;1" dur="1s" repeatCount="indefinite"/>
+  </circle>
+  
+  <!-- Center beacon with strong glow -->
+  <circle cx="256" cy="256" r="12" fill="#00d4ff" filter="url(#strongGlow)"/>
+  <circle cx="256" cy="256" r="8" fill="#ffffff" opacity="0.9"/>
+  <circle cx="256" cy="256" r="4" fill="#00d4ff"/>
+  
+  <!-- Range rings with labels -->
+  <text x="256" y="90" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#00d4ff" opacity="0.6">200 km</text>
+  <text x="256" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#00d4ff" opacity="0.5">160 km</text>
+  <text x="256" y="170" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#00d4ff" opacity="0.4">120 km</text>
+</svg>
\ No newline at end of file
diff --git a/assets/static/images/skyview-favicon.svg b/assets/static/images/skyview-favicon.svg
new file mode 100644
index 0000000..87df6da
--- /dev/null
+++ b/assets/static/images/skyview-favicon.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="radarBg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#001a26;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#003d52;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background circle -->
+  <circle cx="16" cy="16" r="15" fill="url(#radarBg)" stroke="#00d4ff" stroke-width="1"/>
+  
+  <!-- Radar circles -->
+  <circle cx="16" cy="16" r="12" stroke="#00d4ff" stroke-width="1" fill="none" opacity="0.4"/>
+  <circle cx="16" cy="16" r="8" stroke="#00d4ff" stroke-width="0.8" fill="none" opacity="0.5"/>
+  <circle cx="16" cy="16" r="4" stroke="#00d4ff" stroke-width="0.6" fill="none" opacity="0.6"/>
+  
+  <!-- Radar sweep line -->
+  <line x1="16" y1="16" x2="26" y2="10" stroke="#00d4ff" stroke-width="1.5" opacity="0.8"/>
+  
+  <!-- Cross hairs -->
+  <line x1="16" y1="4" x2="16" y2="28" stroke="#00d4ff" stroke-width="0.5" opacity="0.3"/>
+  <line x1="4" y1="16" x2="28" y2="16" stroke="#00d4ff" stroke-width="0.5" opacity="0.3"/>
+  
+  <!-- Aircraft blips -->
+  <circle cx="22" cy="12" r="1" fill="#00ff00" opacity="0.9"/>
+  <circle cx="12" cy="20" r="1" fill="#00ff00" opacity="0.7"/>
+  <circle cx="20" cy="22" r="1" fill="#00ff00" opacity="0.8"/>
+  
+  <!-- Center dot -->
+  <circle cx="16" cy="16" r="1.5" fill="#00d4ff"/>
+</svg>
\ No newline at end of file
diff --git a/assets/static/images/skyview-logo.svg b/assets/static/images/skyview-logo.svg
new file mode 100644
index 0000000..1ec1377
--- /dev/null
+++ b/assets/static/images/skyview-logo.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200" height="60" viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="radarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#00d4ff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#0099cc;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#333333;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#555555;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Radar circle with sweep -->
+  <g id="radar">
+    <!-- Outer radar circle -->
+    <circle cx="30" cy="30" r="25" stroke="#00d4ff" stroke-width="2" fill="none" opacity="0.3"/>
+    
+    <!-- Inner radar circles -->
+    <circle cx="30" cy="30" r="18" stroke="#00d4ff" stroke-width="1.5" fill="none" opacity="0.4"/>
+    <circle cx="30" cy="30" r="12" stroke="#00d4ff" stroke-width="1" fill="none" opacity="0.5"/>
+    <circle cx="30" cy="30" r="6" stroke="#00d4ff" stroke-width="1" fill="none" opacity="0.6"/>
+    
+    <!-- Radar sweep line -->
+    <line x1="30" y1="30" x2="52" y2="18" stroke="url(#radarGradient)" stroke-width="2" opacity="0.8"/>
+    
+    <!-- Cross hairs -->
+    <line x1="30" y1="5" x2="30" y2="55" stroke="#00d4ff" stroke-width="1" opacity="0.3"/>
+    <line x1="5" y1="30" x2="55" y2="30" stroke="#00d4ff" stroke-width="1" opacity="0.3"/>
+    
+    <!-- Aircraft blips -->
+    <circle cx="42" cy="22" r="1.5" fill="#00ff00" opacity="0.8">
+      <animate attributeName="opacity" values="0.8;0.3;0.8" dur="2s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="20" cy="38" r="1.5" fill="#00ff00" opacity="0.6">
+      <animate attributeName="opacity" values="0.6;0.2;0.6" dur="2.5s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="38" cy="42" r="1.5" fill="#00ff00" opacity="0.7">
+      <animate attributeName="opacity" values="0.7;0.25;0.7" dur="3s" repeatCount="indefinite"/>
+    </circle>
+    
+    <!-- Center dot -->
+    <circle cx="30" cy="30" r="2" fill="#00d4ff"/>
+  </g>
+  
+  <!-- Text -->
+  <g id="text">
+    <text x="70" y="25" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="url(#textGradient)">
+      Sky
+    </text>
+    <text x="70" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="url(#textGradient)">
+      View
+    </text>
+    
+    <!-- Subtle accent line -->
+    <line x1="70" y1="28" x2="130" y2="28" stroke="#00d4ff" stroke-width="1" opacity="0.4"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/assets/static/index.html b/assets/static/index.html
index efc66fe..eb6ebee 100644
--- a/assets/static/index.html
+++ b/assets/static/index.html
@@ -4,7 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SkyView - Multi-Source ADS-B Aircraft Tracker</title>
-    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    
+    <!-- Favicon and app icons -->
+    <link rel="icon" type="image/svg+xml" href="/static/images/favicon-16.svg" sizes="16x16">
+    <link rel="icon" type="image/svg+xml" href="/static/images/favicon-32.svg" sizes="32x32">
+    <link rel="icon" type="image/svg+xml" href="/static/images/favicon-48.svg" sizes="48x48">
+    <link rel="icon" type="image/svg+xml" href="/static/images/skyview-favicon.svg">
+    <link rel="apple-touch-icon" href="/static/images/skyview-app-icon.svg" sizes="512x512">
+    <meta name="theme-color" content="#003d52">
     
     <!-- Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
@@ -28,10 +35,16 @@
 <body>
     <div id="app">
         <header class="header">
-            <h1>SkyView <span class="version-info">v0.0.11</span> 
-                <a href="https://kode.naiv.no/olemd/skyview" target="_blank" class="repo-link" title="Project Repository">⚙</a>
-                <a href="/database" class="repo-link" title="Database Status">📊</a>
-            </h1>
+            <div class="header-brand">
+                <img src="/static/images/skyview-logo.svg" alt="SkyView Logo" class="header-logo">
+                <div class="header-text">
+                    <span class="version-info">v0.0.11</span>
+                    <div class="header-links">
+                        <a href="https://kode.naiv.no/olemd/skyview" target="_blank" class="repo-link" title="Project Repository">⚙</a>
+                        <a href="/database" class="repo-link" title="Database Status">📊</a>
+                    </div>
+                </div>
+            </div>
             
             <!-- Status indicators -->
             <div class="status-section">