olemd/skyview
1
0
Fork 0
Code Issues 12 Pull requests Projects Releases 11 Packages Wiki Activity Actions

Improve aircraft icons and add weight-based color coding

Browse source 
- Replaced simple geometric shapes with detailed, realistic SVG icons for all aircraft types
- Implemented color differentiation based on aircraft weight categories:
  * Light (<7000kg): Sky blue
  * Medium (7000-34000kg): Green
  * Large (34000-136000kg): Orange
  * Heavy (>136000kg): Red
- Created new icons for: commercial airliner, helicopter, cargo aircraft, general aviation, military fighter, ground vehicle
- Updated legend to reflect new weight-based categories
- Modified getAircraftColor() to assign colors based on aircraft category/weight

Closes #17

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2025-08-24 20:16:25 +02:00
commit ed1e03382a
10 changed files with 175 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

14
assets/static/css/style.css
View file

@ -268,12 +268,14 @@ body {
border: 1px solid #ffffff;
}
.legend-icon.commercial { background: #00ff88; }
.legend-icon.cargo { background: #ff8c00; }
.legend-icon.helicopter { background: #00d4ff; }
.legend-icon.military { background: #ff4444; }
.legend-icon.ga { background: #ffff00; }
.legend-icon.ground { background: #888888; }
.legend-icon.light { background: #00bfff; } /* Sky blue for light aircraft */
.legend-icon.medium { background: #00ff88; } /* Green for medium aircraft */
.legend-icon.large { background: #ff8c00; } /* Orange for large aircraft */
.legend-icon.heavy { background: #ff0000; } /* Red for heavy aircraft */
.legend-icon.helicopter { background: #ff00ff; } /* Magenta for helicopters */
.legend-icon.military { background: #ff4444; } /* Red-orange for military */
.legend-icon.ga { background: #ffff00; } /* Yellow for general aviation */
.legend-icon.ground { background: #888888; } /* Gray for ground vehicles */
.table-controls {
display: flex;