olemd/skyview
1
0
Fork 0
Code Issues 12 Pull requests Projects Releases 11 Packages Wiki Activity Actions
skyview/assets/static/images/skyview-logo.svg

67 lines
3 KiB
XML
Raw Permalink Normal View History

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>
2025-09-01 17:39:42 +02:00
<?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>
fix: Improve logo text visibility with outlines and brighter colors Enhanced the SkyView logo text visibility against dark backgrounds: - Changed text gradient from dark gray to bright white/light gray - Added dark stroke outlines (3px) around text for better contrast - Used stroke-linejoin="round" for smoother outline appearance - Text now has white fill with dark outline for maximum visibility This ensures the logo text is clearly readable on both light and dark backgrounds commonly used in web applications. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-01 17:42:19 +02:00
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#e0e0e0;stop-opacity:1" />
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>
2025-09-01 17:39:42 +02:00
</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">
fix: Improve logo text visibility with outlines and brighter colors Enhanced the SkyView logo text visibility against dark backgrounds: - Changed text gradient from dark gray to bright white/light gray - Added dark stroke outlines (3px) around text for better contrast - Used stroke-linejoin="round" for smoother outline appearance - Text now has white fill with dark outline for maximum visibility This ensures the logo text is clearly readable on both light and dark backgrounds commonly used in web applications. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-01 17:42:19 +02:00
<!-- Text outlines for better visibility -->
<text x="70" y="25" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="none" stroke="#003d52" stroke-width="3" stroke-linejoin="round">
Sky
</text>
<text x="70" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="none" stroke="#003d52" stroke-width="3" stroke-linejoin="round">
View
</text>
<!-- Main text -->
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>
2025-09-01 17:39:42 +02:00
<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>
Reference in a new issue Copy permalink