feat: Add SkyView logo, favicon, and branding assets - resolves #38

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>
This commit is contained in:
Ole-Morten Duesund 2025-09-01 17:39:42 +02:00
commit 49f584016e
8 changed files with 319 additions and 5 deletions

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB