102 lines
4.1 KiB
HTML
102 lines
4.1 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="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>
|
||
|
|
|
||
|
|
<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.min.js"></script>
|
||
|
|
<script src="/static/js/app.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|