diff options
Diffstat (limited to 'web/index.html')
| -rw-r--r-- | web/index.html | 134 |
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"> </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"> </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"> </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 & 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 <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> |