-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
111 lines (100 loc) · 5.32 KB
/
Copy pathindex.html
File metadata and controls
111 lines (100 loc) · 5.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />
<title>SkyTrace — Live Flight Tracker</title>
<meta name="description" content="Real-time aircraft tracking on a live radar map. Free and open data, zero cost." />
<meta property="og:title" content="SkyTrace — Live Flight Tracker" />
<meta property="og:description" content="Watch thousands of aircraft fly across a live radar map in real time." />
<meta property="og:type" content="website" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2322d3ee' d='M2 16l20-7-9 20-2-8-9-5z'/%3E%3C/svg%3E" />
<link rel="preconnect" href="https://api.airplanes.live" crossorigin />
<link rel="preconnect" href="https://api.adsbdb.com" crossorigin />
<link rel="preconnect" href="https://basemaps.cartocdn.com" crossorigin />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="map"></div>
<!-- ✈ identity + live stats (draggable) -->
<header id="topbar" class="panel">
<div class="panel-head" id="topbar-head">
<span class="brand-mark">✈</span>
<span class="brand-name">SKY<b>TRACE</b></span>
<span class="live-pill"><span class="live-dot"></span>LIVE</span>
<span class="grip" title="Drag to move">⠿</span>
</div>
<div class="clock"><span id="clock">--:--:--</span> UTC</div>
<div class="stats">
<div class="chip" title="Aircraft currently loaded in view"><span class="chip-val" id="stat-count">—</span><span class="chip-key">in view</span></div>
<div class="chip" title="Airborne aircraft"><span class="chip-val" id="stat-air">—</span><span class="chip-key">airborne</span></div>
<div class="chip" title="Aircraft on the ground"><span class="chip-val" id="stat-ground">—</span><span class="chip-key">on ground</span></div>
<div class="chip" title="Highest altitude in view"><span class="chip-val" id="stat-maxalt">—</span><span class="chip-key">max alt</span></div>
<div class="chip" title="Fastest ground speed in view"><span class="chip-val" id="stat-fast">—</span><span class="chip-key">fastest</span></div>
</div>
</header>
<!-- selected flight detail (draggable) -->
<section id="detail" class="panel hidden" aria-live="polite">
<div class="panel-head" id="detail-head">
<span class="grip" title="Drag to move">⠿</span>
<span class="panel-title">Flight detail</span>
<button id="detail-close" title="Close (Esc)">✕</button>
</div>
<div id="detail-body"></div>
</section>
<!-- search / hubs / location / display (draggable) -->
<aside id="controls" class="panel">
<div class="panel-head" id="controls-head">
<span class="grip" title="Drag to move">⠿</span>
<span class="panel-title">Controls</span>
</div>
<div class="ctl-group">
<label class="ctl-label">🔎 Search flight / registration</label>
<div class="search-wrap">
<input id="search-input" type="text" placeholder="e.g. BAW123, EI-DYL, A6…" autocomplete="off" spellcheck="false" />
<span id="search-hint"></span>
</div>
</div>
<div class="ctl-group">
<label class="ctl-label">🌐 Jump to a busy sky</label>
<div id="hub-list" class="hub-list"></div>
<button id="btn-locate" class="btn-wide">📍 My location</button>
</div>
<div class="ctl-group">
<label class="ctl-label">🎛 Display</label>
<label class="toggle"><input type="checkbox" id="chk-trails" checked /> <span>Flight trails</span></label>
<label class="toggle"><input type="checkbox" id="chk-labels" /> <span>Always show callsigns</span></label>
</div>
<div class="ctl-group">
<label class="ctl-label">⬆ Minimum altitude: <b id="alt-slider-val">0 ft</b></label>
<input id="alt-slider" type="range" min="0" max="40" step="1" value="0" />
</div>
</aside>
<!-- altitude legend + attribution -->
<footer id="legend">
<div class="legend-title">Altitude</div>
<div class="legend-bar"></div>
<div class="legend-scale"><span>GND</span><span>10k</span><span>20k</span><span>30k</span><span>40k+ ft</span></div>
<div class="attribution">
Aircraft © <a href="https://airplanes.live" target="_blank" rel="noopener">airplanes.live</a>
· Routes © <a href="https://www.adsbdb.com" target="_blank" rel="noopener">adsbdb</a>
· Map © <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OSM</a>/<a href="https://carto.com/attributions" target="_blank" rel="noopener">CARTO</a>
</div>
</footer>
<!-- live status -->
<div id="status-pill">
<span id="status-dot" class="status-dot"></span>
<span id="status-text">connecting…</span>
<span id="status-sep">·</span>
<span id="status-age">—</span>
</div>
<noscript>
<div style="position:fixed;inset:0;display:grid;place-items:center;background:#0a0e1a;color:#cfe0f5;font:16px system-ui;text-align:center;padding:2rem;z-index:9999">
SkyTrace needs JavaScript enabled to show live aircraft.
</div>
</noscript>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<script src="app.js"></script>
</body>
</html>