Ole-Morten Duesund
b527f5a8ee
Major improvements to map theming and aircraft type display: Map Theme Changes: - Changed default map from dark to light theme (CartoDB Positron) - Added night mode toggle button with sun/moon icons - Both main map and coverage map now switch themes together - Light theme provides better daylight visibility Aircraft Type Display: - Now displays actual ADS-B category directly (e.g., "Medium 34000-136000kg") - Removed guessing/interpretation of aircraft types - Icons still use simplified categories for visual distinction - More accurate and standards-compliant display This provides a cleaner, more professional appearance with the light map and gives users accurate ADS-B category information instead of interpreted types. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
228 lines
No EOL
9.6 KiB
HTML
228 lines
No EOL
9.6 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 - Multi-Source ADS-B Aircraft Tracker</title>
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
|
|
|
|
<!-- Three.js for 3D radar (ES modules) -->
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js",
|
|
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header class="header">
|
|
<h1>SkyView</h1>
|
|
|
|
<!-- Status indicators -->
|
|
<div class="status-section">
|
|
<div class="clock-display">
|
|
<div class="clock" id="utc-clock">
|
|
<div class="clock-face">
|
|
<div class="clock-hand hour-hand" id="utc-hour"></div>
|
|
<div class="clock-hand minute-hand" id="utc-minute"></div>
|
|
</div>
|
|
<div class="clock-label">UTC</div>
|
|
</div>
|
|
<div class="clock" id="update-clock">
|
|
<div class="clock-face">
|
|
<div class="clock-hand hour-hand" id="update-hour"></div>
|
|
<div class="clock-hand minute-hand" id="update-minute"></div>
|
|
</div>
|
|
<div class="clock-label">Last Update</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Summary stats -->
|
|
<div class="stats-summary">
|
|
<span id="aircraft-count">0 aircraft</span>
|
|
<span id="sources-count">0 sources</span>
|
|
<span id="connection-status" class="connection-status disconnected">Connecting...</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main-content">
|
|
<!-- View selection tabs -->
|
|
<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">Statistics</button>
|
|
<button id="coverage-view-btn" class="view-btn">Coverage</button>
|
|
<button id="radar3d-view-btn" class="view-btn">3D Radar</button>
|
|
</div>
|
|
|
|
<!-- Map View -->
|
|
<div id="map-view" class="view active">
|
|
<div id="map"></div>
|
|
|
|
<!-- Map controls -->
|
|
<div class="map-controls">
|
|
<button id="center-map" title="Center on aircraft">Center Map</button>
|
|
<button id="reset-map" title="Reset to origin">Reset Map</button>
|
|
<button id="toggle-trails" title="Show/hide aircraft trails">Show Trails</button>
|
|
<button id="toggle-range" title="Show/hide range circles">Show Range</button>
|
|
<button id="toggle-sources" title="Show/hide source locations">Show Sources</button>
|
|
<button id="toggle-dark-mode" title="Toggle dark/light mode">🌙 Night Mode</button>
|
|
</div>
|
|
|
|
<!-- Legend -->
|
|
<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>
|
|
|
|
<h4>Sources</h4>
|
|
<div id="sources-legend"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table View -->
|
|
<div id="table-view" class="view">
|
|
<div class="table-controls">
|
|
<input type="text" id="search-input" placeholder="Search by flight, ICAO, or squawk...">
|
|
<select id="sort-select">
|
|
<option value="distance">Distance</option>
|
|
<option value="altitude">Altitude</option>
|
|
<option value="speed">Speed</option>
|
|
<option value="flight">Flight</option>
|
|
<option value="icao">ICAO</option>
|
|
<option value="squawk">Squawk</option>
|
|
<option value="signal">Signal</option>
|
|
<option value="age">Age</option>
|
|
</select>
|
|
<select id="source-filter">
|
|
<option value="">All Sources</option>
|
|
</select>
|
|
</div>
|
|
<div class="table-container">
|
|
<table id="aircraft-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ICAO</th>
|
|
<th>Flight</th>
|
|
<th>Squawk</th>
|
|
<th>Altitude</th>
|
|
<th>Speed</th>
|
|
<th>Distance</th>
|
|
<th>Track</th>
|
|
<th>Sources</th>
|
|
<th>Signal</th>
|
|
<th>Age</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="aircraft-tbody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics View -->
|
|
<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>Active Sources</h3>
|
|
<div class="stat-value" id="active-sources">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>Max Range</h3>
|
|
<div class="stat-value" id="max-range">0 km</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts -->
|
|
<div class="charts-container">
|
|
<div class="chart-card">
|
|
<h3>Aircraft Count Timeline</h3>
|
|
<canvas id="aircraft-chart"></canvas>
|
|
</div>
|
|
<div class="chart-card">
|
|
<h3>Message Rate by Source</h3>
|
|
<canvas id="message-chart"></canvas>
|
|
</div>
|
|
<div class="chart-card">
|
|
<h3>Signal Strength Distribution</h3>
|
|
<canvas id="signal-chart"></canvas>
|
|
</div>
|
|
<div class="chart-card">
|
|
<h3>Altitude Distribution</h3>
|
|
<canvas id="altitude-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Coverage View -->
|
|
<div id="coverage-view" class="view">
|
|
<div class="coverage-controls">
|
|
<select id="coverage-source">
|
|
<option value="">Select Source</option>
|
|
</select>
|
|
<button id="toggle-heatmap">Toggle Heatmap</button>
|
|
</div>
|
|
<div id="coverage-map"></div>
|
|
</div>
|
|
|
|
<!-- 3D Radar View -->
|
|
<div id="radar3d-view" class="view">
|
|
<div class="radar3d-controls">
|
|
<button id="radar3d-reset">Reset View</button>
|
|
<button id="radar3d-auto-rotate">Auto Rotate</button>
|
|
<label>
|
|
<input type="range" id="radar3d-range" min="10" max="500" value="100">
|
|
Range: <span id="radar3d-range-value">100</span> km
|
|
</label>
|
|
</div>
|
|
<div id="radar3d-container"></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Leaflet JS -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<!-- Custom JS -->
|
|
<script type="module" src="/static/js/app.js?v=4"></script>
|
|
</body>
|
|
</html> |