initial commit

2026-06-25 21:36:46 +00:00
commit f3a9e905bc
14 changed files with 176379 additions and 0 deletions
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>sat.thedarkelite.com — Satellite Tracker</title>
+  <meta name="description" content="Live satellite tracking on a 3D globe using TLE → SGP4." />
+  <meta name="theme-color" content="#0b0f19" />
+
+  <!-- CesiumJS (CDNJS) -->
+  <script>
+    // Required so Cesium can find its Workers/Assets/Widgets when loaded from CDN.
+    window.CESIUM_BASE_URL = "https://cdnjs.cloudflare.com/ajax/libs/cesium/1.133.1/";
+  </script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.133.1/Widgets/widgets.min.css"> <!-- [1](https://cdnjs.com/libraries/cesium) -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.133.1/Cesium.min.js"></script> <!-- [1](https://cdnjs.com/libraries/cesium) -->
+
+  <!-- satellite.js (SGP4) -->
+  <script src="https://unpkg.com/satellite.js@6.0.2/dist/satellite.min.js"></script> <!-- [2](https://github.com/shashwatak/satellite-js) -->
+
+  <!-- App styles -->
+  <link rel="stylesheet" href="/assets/app.css" />
+</head>
+
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand">
+        <div class="logo">SAT</div>
+        <div class="brandText">
+          <div class="title">sat.thedarkelite.com</div>
+          <div class="subtitle">TLE → SGP4 → Globe</div>
+        </div>
+      </div>
+
+      <div class="panel">
+        <label class="label" for="groupSelect">Satellite group</label>
+        <select id="groupSelect" class="select"></select>
+
+        <div class="row">
+          <div class="col">
+            <label class="label" for="maxSats">Max displayed</label>
+            <input id="maxSats" class="input" type="number" min="50" max="5000" step="50" value="800" />
+            <div class="hint">Starlink is huge—cap it for performance.</div>
+          </div>
+        </div>
+
+        <label class="label" for="searchBox">Search (name / NORAD)</label>
+        <input id="searchBox" class="input" type="text" placeholder="e.g. STARLINK-3000 or 25544" />
+
+        <div class="toggles">
+          <label class="toggle">
+            <input id="toggleLabels" type="checkbox" />
+            <span>Show labels (selected)</span>
+          </label>
+          <label class="toggle">
+            <input id="toggleTracks" type="checkbox" checked />
+            <span>Show orbit arc (selected)</span>
+          </label>
+          <label class="toggle">
+            <input id="toggleLighting" type="checkbox" checked />
+            <span>Day/Night lighting</span>
+          </label>
+        </div>
+
+        <div class="row buttons">
+          <button id="btnReload" class="btn primary">Reload TLEs</button>
+          <button id="btnClear" class="btn">Clear selection</button>
+        </div>
+
+        <div class="stats">
+          <div><span class="k">Loaded</span> <span id="statLoaded" class="v">0</span></div>
+          <div><span class="k">Displayed</span> <span id="statShown" class="v">0</span></div>
+          <div><span class="k">Selected</span> <span id="statSelected" class="v">—</span></div>
+          <div class="small" id="statMeta">—</div>
+        </div>
+
+        <div class="footer">
+          <div class="small">
+            Positions are computed client-side from TLEs using SGP4, then plotted as Entities on a 3D globe. <!-- [4](https://cesium.com/learn/cesiumjs-learn/cesiumjs-creating-entities/)[2](https://github.com/shashwatak/satellite-js) -->
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <main class="main">
+      <div id="cesiumContainer" class="globe"></div>
+
+      <div class="topbar">
+        <div class="chip" id="chipTime">UTC —</div>
+        <div class="chip" id="chipRate">Update: 1s</div>
+        <div class="chip warn" id="chipWarn" style="display:none"></div>
+      </div>
+
+      <div class="detail" id="detail" style="display:none">
+        <div class="detailHeader">
+          <div class="detailTitle" id="detailTitle">—</div>
+          <button class="btn icon" id="detailClose" title="Close">✕</button>
+        </div>
+        <div class="detailGrid">
+          <div><span class="k">NORAD</span> <span class="v" id="detailNorad">—</span></div>
+          <div><span class="k">Lat</span> <span class="v" id="detailLat">—</span></div>
+          <div><span class="k">Lon</span> <span class="v" id="detailLon">—</span></div>
+          <div><span class="k">Alt (km)</span> <span class="v" id="detailAlt">—</span></div>
+          <div><span class="k">Speed (km/s)</span> <span class="v" id="detailSpeed">—</span></div>
+          <div><span class="k">Epoch</span> <span class="v mono" id="detailEpoch">—</span></div>
+        </div>
+        <div class="detailTle mono" id="detailTle">—</div>
+      </div>
+    </main>
+  </div>
+
+  <script src="/assets/app.js"></script>
+</body>
+</html>