newHEADmain

1 files changed, 134 insertions, 0 deletions

diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..f4d8ec8
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>GPS Clock</title>
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='none' stroke='%232a78d6' stroke-width='3'/%3E%3Cpath d='M16 8v8l5 4' stroke='%232a78d6' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E">
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<header class="top">
+  <div class="brand"><span id="host">—</span> <span class="muted">GPS + PPS time server</span></div>
+  <div class="conn" title="Live data stream from the server. If it stops, the page reconnects automatically."><span id="conn-dot" class="dot"></span><span id="conn-text">connecting…</span>
+    <button id="theme" type="button" title="Toggle theme" aria-label="Toggle theme">◐</button></div>
+</header>
+
+<main>
+  <!-- Clock banner -->
+  <section class="card clock">
+    <div class="clock-main">
+      <div class="label">UTC</div>
+      <div class="utc"><span id="utc-hms">--:--:--</span></div>
+      <div id="utc-date" class="date">—</div>
+    </div>
+    <div class="clock-side">
+      <dl class="kv compact">
+        <dt>Local</dt><dd id="local-time">—</dd>
+        <dt>Day of year</dt><dd id="doy">—</dd>
+        <dt>MJD</dt><dd id="mjd">—</dd>
+        <dt>Unix</dt><dd id="unix">—</dd>
+        <dt>GPS week / TOW</dt><dd id="gpswk">—</dd>
+        <dt>Leap status</dt><dd id="leap">—</dd>
+        <dt>Browser clock</dt><dd id="browser-off">—</dd>
+      </dl>
+    </div>
+  </section>
+
+  <div class="grid two">
+    <!-- Time quality -->
+    <section class="card">
+      <h2>Time quality <span class="sub">chronyc tracking</span></h2>
+      <div class="tiles">
+        <div class="tile"><div class="tile-label">System offset</div><div id="t-sys" class="tile-value">—</div><div id="t-sys-dir" class="tile-sub">&nbsp;</div></div>
+        <div class="tile"><div class="tile-label">RMS offset</div><div id="t-rms" class="tile-value">—</div><div class="tile-sub">long-term avg</div></div>
+        <div class="tile"><div class="tile-label">Reference</div><div id="t-ref" class="tile-value">—</div><div id="t-stratum" class="tile-sub">&nbsp;</div>
+          <div id="status" class="status unknown"><span class="status-icon" aria-hidden="true">●</span><span id="status-text">Waiting for data</span></div></div>
+      </div>
+      <ul id="status-reasons" class="reasons"></ul>
+      <dl class="kv">
+        <dt>Last offset</dt><dd id="t-last">—</dd>
+        <dt>Frequency</dt><dd id="t-freq">—</dd>
+        <dt>Residual freq</dt><dd id="t-resid">—</dd>
+        <dt>Skew</dt><dd id="t-skew">—</dd>
+        <dt>Root delay</dt><dd id="t-rdelay">—</dd>
+        <dt>Root dispersion</dt><dd id="t-rdisp">—</dd>
+        <dt>Update interval</dt><dd id="t-upd">—</dd>
+        <dt>Ref time</dt><dd id="t-reftime">—</dd>
+        <dt class="srv">NTP requests</dt><dd class="srv" id="t-srv">—</dd>
+      </dl>
+      <p id="chrony-err" class="err" hidden></p>
+    </section>
+
+    <!-- Sources -->
+    <section class="card">
+      <h2>Sources <span class="sub">chronyc sources / sourcestats</span></h2>
+      <div class="table-wrap">
+        <table class="sources">
+          <thead><tr><th title="Selection state: how chronyd is using this source (see legend below). * is the source the clock is steered to.">S</th><th title="Source name: a reference clock driver (e.g. GPS/PPS) or an NTP server hostname/address.">Name</th><th title="refclock = hardware attached to this machine; NTP sN = network server at stratum N (lower is closer to a reference clock).">Type</th><th class="num" title="Polling interval: how often chronyd takes a sample from this source.">Poll</th><th title="Reachability of the last 8 polls, oldest to newest. Filled = sample received. Gaps mean missed samples; all empty means the source is unreachable.">Reach</th><th class="num" title="How long ago the last good sample from this source arrived.">Last</th><th class="num" title="Offset of this source relative to the local clock in its last sample (+ = local clock is slow). ± is the error bound of that measurement; σ is the standard deviation of recent samples. Smaller and steadier is better.">Offset</th></tr></thead>
+          <tbody id="sources"></tbody>
+        </table>
+      </div>
+      <p class="legend-note"><b>*</b> selected · <b>+</b> combined · <b>−</b> not combined · <b>x</b> falseticker · <b>~</b> too variable · <b>?</b> unusable</p>
+    </section>
+  </div>
+
+  <!-- History -->
+  <section class="card">
+    <h2>History
+      <span class="range" role="group" aria-label="Time range">
+        <button type="button" data-range="600" class="on">10 min</button><button type="button" data-range="1800">30 min</button><button type="button" data-range="3600">60 min</button>
+      </span>
+    </h2>
+    <div class="grid three charts">
+      <figure class="chart" id="ch-offset"><figcaption title="System offset is how far chronyd estimates the system clock is from true time; PPS sample is the raw offset measured on each pulse-per-second edge. Both should hover near zero. Spikes or drift point to PPS trouble or heavy system load.">Offset</figcaption></figure>
+      <figure class="chart" id="ch-freq"><figcaption title="The correction chronyd applies to the crystal oscillator's rate, in parts per million. It drifts slowly with temperature; sudden jumps suggest a problem.">Frequency (ppm)</figcaption></figure>
+      <figure class="chart" id="ch-sats"><figcaption title="Satellites in view and used in the fix over time. A drop to zero means the antenna has lost sky view and PPS may become unreliable.">Satellites</figcaption></figure>
+    </div>
+  </section>
+
+  <div class="grid two">
+    <!-- GPS -->
+    <section class="card">
+      <h2>GPS receiver <span class="sub">gpsd</span></h2>
+      <div class="tiles">
+        <div class="tile"><div class="tile-label">Fix</div><div id="g-fix" class="tile-value">—</div><div id="g-status" class="tile-sub">&nbsp;</div></div>
+        <div class="tile"><div class="tile-label">Satellites</div><div class="tile-value"><span id="g-used">—</span><span class="of"> / <span id="g-seen">—</span></span></div><div class="tile-sub">used / in view</div></div>
+        <div class="tile"><div class="tile-label">Time error (est.)</div><div id="g-ept" class="tile-value">—</div><div class="tile-sub">NMEA, before PPS</div></div>
+      </div>
+      <dl class="kv">
+        <dt>Latitude</dt><dd id="g-lat">—</dd>
+        <dt>Longitude</dt><dd id="g-lon">—</dd>
+        <dt>Altitude (MSL)</dt><dd id="g-alt">—</dd>
+        <dt>Position error</dt><dd id="g-eph">—</dd>
+        <dt>DOP (P / H / V / T)</dt><dd id="g-dop">—</dd>
+        <dt>Serial latency</dt><dd id="g-toff">—</dd>
+        <dt>GPS fix time</dt><dd id="g-time">—</dd>
+        <dt>Receiver</dt><dd id="g-dev">—</dd>
+      </dl>
+      <p id="gps-err" class="err" hidden></p>
+    </section>
+
+    <!-- Satellites -->
+    <section class="card">
+      <h2>Satellites <span class="sub">sky view &amp; signal</span></h2>
+      <div class="sky-wrap">
+        <svg id="sky" viewBox="-110 -110 220 220" role="img" aria-label="Sky plot of satellites by azimuth and elevation"></svg>
+        <div class="sky-side">
+          <table class="const">
+            <thead><tr><th title="Satellite system: GPS (USA), GLONASS (Russia), Galileo (EU), BeiDou (China), QZSS (Japan), SBAS (augmentation).">Constellation</th><th class="num" title="Satellites from this system used in the current fix.">Used</th><th class="num" title="Satellites from this system the receiver is tracking.">Seen</th></tr></thead>
+            <tbody id="const"></tbody>
+          </table>
+          <p class="legend-note"><span class="sw filled"></span> used in fix &nbsp; <span class="sw hollow"></span> tracked only</p>
+        </div>
+      </div>
+      <div class="snr-head"><span title="Carrier-to-noise density per satellite. Above about 35 dB-Hz is good, 25–35 is usable, below 25 is weak. Consistently low values suggest antenna, cable or placement problems.">Signal strength (dB-Hz)</span></div>
+      <div id="snr" class="snr" role="img" aria-label="Signal strength per satellite"></div>
+    </section>
+  </div>
+</main>
+<div id="tip" class="tip" hidden></div>
+<footer class="foot muted">gps-clock-dash <span id="ver"></span> · updates every second</footer>
+<script src="app.js"></script>
+</body>
+</html>