Ole-Morten Duesund
b6a699c24b
- Commercial aircraft: Green airplane icon (default) - Cargo aircraft: Orange box icon (UPS, FedEx, etc.) - Military aircraft: Red fighter-style icon (RCH, CNV, etc.) - General aviation: Yellow light aircraft icon - Ground aircraft: Gray circle with 'G' indicator - Add visual legend on map showing aircraft type colors - Aircraft type detection based on flight number patterns 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
127 lines
No EOL
5.2 KiB
HTML
127 lines
No EOL
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SkyView - ADS-B Aircraft Tracker</title>
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header class="header">
|
|
<h1>SkyView</h1>
|
|
<div class="stats-summary">
|
|
<span id="aircraft-count">0 aircraft</span>
|
|
<span id="connection-status" class="connected">Connected</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main-content">
|
|
<div class="view-toggle">
|
|
<button id="map-view-btn" class="view-btn active">Map</button>
|
|
<button id="table-view-btn" class="view-btn">Table</button>
|
|
<button id="stats-view-btn" class="view-btn">Stats</button>
|
|
</div>
|
|
|
|
<div id="map-view" class="view active">
|
|
<div id="map"></div>
|
|
<div class="map-controls">
|
|
<button id="center-map">Center Map</button>
|
|
<button id="toggle-trails">Toggle Trails</button>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<h4>Aircraft Types</h4>
|
|
<div class="legend-item">
|
|
<span class="legend-icon commercial"></span>
|
|
<span>Commercial</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="legend-icon cargo"></span>
|
|
<span>Cargo</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="legend-icon military"></span>
|
|
<span>Military</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="legend-icon ga"></span>
|
|
<span>General Aviation</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="legend-icon ground"></span>
|
|
<span>Ground</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="table-view" class="view">
|
|
<div class="table-controls">
|
|
<input type="text" id="search-input" placeholder="Search by flight, callsign, or hex...">
|
|
<select id="sort-select">
|
|
<option value="distance">Distance</option>
|
|
<option value="altitude">Altitude</option>
|
|
<option value="speed">Speed</option>
|
|
<option value="flight">Flight</option>
|
|
</select>
|
|
</div>
|
|
<div class="table-container">
|
|
<table id="aircraft-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Flight</th>
|
|
<th>Hex</th>
|
|
<th>Altitude</th>
|
|
<th>Speed</th>
|
|
<th>Track</th>
|
|
<th>Distance</th>
|
|
<th>Msgs</th>
|
|
<th>Seen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="aircraft-tbody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="stats-view" class="view">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<h3>Total Aircraft</h3>
|
|
<div class="stat-value" id="total-aircraft">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Messages/sec</h3>
|
|
<div class="stat-value" id="messages-sec">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Signal Strength</h3>
|
|
<div class="stat-value" id="signal-strength">0 dB</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Max Range</h3>
|
|
<div class="stat-value" id="max-range">0 nm</div>
|
|
</div>
|
|
</div>
|
|
<div class="charts-container">
|
|
<div class="chart-card">
|
|
<h3>Aircraft Count (24h)</h3>
|
|
<canvas id="aircraft-chart"></canvas>
|
|
</div>
|
|
<div class="chart-card">
|
|
<h3>Message Rate</h3>
|
|
<canvas id="message-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html> |