The number of seconds elapsed since 1 January 1970, 00:00:00 UTC. The reference point agreed upon by engineers in 1970 to give every machine a shared definition of "now." Stored as a 32-bit integer until 2038, when it overflows. PostgreSQL uses 64-bit precision — it will keep counting until year 294,276.
| extract(epoch from now()) | 1,777,096,584 |
| to_char(now(), 'YYYY-"W"IW-ID') — ISO week date | 2026-W17-6 |
| now()::date - '1969-10-29'::date — days since first ARPANET packet | 20,632 days |
| now()::date - '1991-08-06'::date — days since first public web page | 12,681 days |
| '2038-01-19'::date - now()::date — days until 32-bit Unix overflow | 4287 days |
| current_setting('server_version') — PostgreSQL version | 15.16 (6056289) |
| pg_postmaster_start_time() — server started | 25 Apr 2026 05:48:46 GMT |
This page contains no JavaScript, no templates, no application logic. A single SQL query — calling NOW(), EXTRACT(), TO_CHAR(), and basic arithmetic — assembled every value you see at the exact moment your request arrived at the server.
Reload this page. The Unix epoch advances. The moon progresses fractionally. The seconds since midnight accumulate. Each load is a unique document.
-- ═══════════════════════════════════════════════════════════ -- CHRONOLITH — A typographic time installation -- Written entirely in PostgreSQL. One query. No JavaScript. -- Called live on every HTTP request by server.js -- ═══════════════════════════════════════════════════════════ WITH -- ─── STYLES ────────────────────────────────────────────────── styles AS ( SELECT $css$ @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Space+Mono:wght@400;700&display=swap'); :root { --bg: #0d0d10; --surface: #13131a; --fg: #f0ede6; --muted: #7a7870; --accent: #c8a96e; --border: rgba(200,169,110,0.18); } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--bg); color:var(--fg); font-family:'Space Mono',monospace; font-size:14px; line-height:1.6; } a { color:inherit; text-decoration:none; } /* ── NAV ── */ nav { display:flex; justify-content:space-between; align-items:center; padding:1.4rem 4rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(13,13,16,0.94); backdrop-filter:blur(12px); z-index:100; } .logo { font-size:.8rem; letter-spacing:.22em; color:var(--accent); } .nav-links a { font-size:.65rem; letter-spacing:.14em; margin-left:2rem; color:var(--muted); transition:color .2s; } .nav-links a:hover { color:var(--fg); } .nav-links a.hi { color:var(--accent); } /* ── TOWER (hero time display) ── */ .tower { padding:6rem 4rem 5rem; border-bottom:1px solid var(--border); } .tower-eye { display:block; font-size:.62rem; letter-spacing:.3em; color:var(--accent); text-transform:uppercase; margin-bottom:2.5rem; } .tower-time { font-family:'EB Garamond', serif; font-size:clamp(5rem,14vw,12rem); font-weight:400; line-height:1; letter-spacing:-.03em; color:var(--fg); margin-bottom:1.2rem; } .tower-date { font-family:'EB Garamond', serif; font-size:clamp(1.8rem,4vw,3.2rem); font-weight:400; letter-spacing:-.01em; color:var(--muted); margin-bottom:3rem; } .tower-coords { font-size:.65rem; letter-spacing:.22em; color:var(--muted); text-transform:uppercase; } .tower-coords span { color:var(--accent); } /* ── DATA GRID ── */ .data-grid { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--border); } .datum { padding:2.8rem 2rem; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:.5rem; } .datum:last-child { border-right:none; } .datum-val { font-size:2.6rem; line-height:1; letter-spacing:-.03em; color:var(--fg); font-family:'EB Garamond',serif; } .datum-lbl { font-size:.58rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; } /* ── EPOCH BLOCK ── */ .epoch { padding:5rem 4rem; border-bottom:1px solid var(--border); display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; } .epoch-val { font-family:'EB Garamond',serif; font-size:clamp(3rem,6vw,5.5rem); line-height:1; letter-spacing:-.03em; color:var(--accent); font-feature-settings:'tnum'; } .epoch-lbl { font-size:.65rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-bottom:1.2rem; } .epoch-desc { font-family:'EB Garamond',serif; font-size:1.15rem; color:var(--muted); line-height:1.85; } .epoch-desc em { color:var(--fg); font-style:normal; } /* ── MOON BLOCK ── */ .moon-block { padding:5rem 4rem; border-bottom:1px solid var(--border); display:grid; grid-template-columns:auto 1fr; gap:4rem; align-items:center; } .moon-glyph { font-size:6rem; line-height:1; opacity:.85; } .moon-name { font-family:'EB Garamond',serif; font-size:clamp(2.5rem,5vw,4.5rem); font-weight:400; letter-spacing:-.02em; margin-bottom:.8rem; } .moon-detail { font-size:.65rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; line-height:2; } .moon-detail span { color:var(--fg); } /* ── COMPUTATION TABLE ── */ .comp { padding:5rem 4rem; border-bottom:1px solid var(--border); } .comp-head { font-size:.62rem; letter-spacing:.28em; color:var(--accent); text-transform:uppercase; margin-bottom:3rem; } .comp-table { width:100%; border-collapse:collapse; } .comp-table tr { border-bottom:1px solid var(--border); } .comp-table tr:last-child { border-bottom:none; } .comp-table td { padding:1.1rem 0; font-size:.82rem; vertical-align:middle; } .comp-table td:first-child { color:var(--muted); width:60%; padding-right:2rem; } .comp-table td:last-child { color:var(--fg); letter-spacing:.04em; font-family:'Space Mono',monospace; } /* ── NOTE ── */ .note { padding:5rem 4rem; max-width:680px; } .note p { font-family:'EB Garamond',serif; font-size:1.25rem; color:var(--muted); line-height:1.9; margin-bottom:1.2rem; } .note p em { color:var(--fg); font-style:italic; } .note code { font-family:'Space Mono',monospace; font-size:.75em; color:var(--accent); background:var(--surface); padding:.1em .35em; } /* ── FOOTER ── */ footer { display:flex; justify-content:space-between; align-items:center; padding:1.8rem 4rem; border-top:1px solid var(--border); } footer span { font-size:.62rem; letter-spacing:.12em; color:var(--muted); } .pg-badge { color:var(--accent) !important; } /* ── SQL TOGGLE PANEL ── */ #sql-toggle-btn { font-family:'Space Mono',monospace; font-size:.65rem; letter-spacing:.14em; margin-left:1.8rem; color:var(--accent); background:none; border:none; cursor:pointer; padding:0; transition:opacity .2s; } #sql-toggle-btn:hover { opacity:.7; } #sql-panel { position:fixed; inset:0; z-index:999; background:var(--bg); display:flex; flex-direction:column; transform:translateY(100%); transition:transform .38s cubic-bezier(.4,0,.2,1); overflow:hidden; } #sql-panel.open { transform:translateY(0); } #sql-panel-header { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 4rem; border-bottom:1px solid var(--border); background:rgba(13,13,16,.96); backdrop-filter:blur(12px); flex-shrink:0; } #sql-panel-filename { font-family:'Space Mono',monospace; font-size:.65rem; letter-spacing:.22em; color:var(--accent); text-transform:uppercase; } #sql-panel-close { font-family:'Space Mono',monospace; font-size:.65rem; letter-spacing:.14em; color:var(--muted); background:none; border:none; cursor:pointer; transition:color .2s; } #sql-panel-close:hover { color:var(--fg); } #sql-panel-body { flex:1; overflow-y:auto; padding:2.5rem 4rem 4rem; } #sql-panel-pre { font-family:'Space Mono',monospace; font-size:.72rem; line-height:1.85; white-space:pre-wrap; word-break:break-word; color:#bbb; background:none; border:none; padding:0; margin:0; } .sk { color:#c8a96e; font-weight:700; } .ss { color:#a8c97f; } .sc { color:#4a5060; font-style:italic; } .sn { color:#79b8e0; } @media (max-width:768px) { nav { padding:1.2rem 1.5rem; } .nav-links a { margin-left:1rem; font-size:.58rem; } #sql-toggle-btn { margin-left:1rem; font-size:.58rem; } #sql-panel-header { padding:1rem 1.5rem; } #sql-panel-body { padding:1.5rem; } #sql-panel-pre { font-size:.6rem; } .tower { padding:3.5rem 1.5rem 3rem; } .tower-time { font-size:clamp(3.5rem,18vw,8rem); } .tower-date { font-size:clamp(1.2rem,5vw,2rem); } .data-grid { grid-template-columns:1fr 1fr; } .datum { padding:2rem 1.2rem; } .datum:nth-child(2) { border-right:none; } .datum:nth-child(3) { border-right:1px solid var(--border); border-top:1px solid var(--border); } .datum:nth-child(4) { border-right:none; border-top:1px solid var(--border); } .epoch { grid-template-columns:1fr; padding:3rem 1.5rem; gap:2rem; } .epoch-val { font-size:clamp(2rem,8vw,4rem); } .moon-block { grid-template-columns:auto 1fr; gap:1.5rem; padding:3rem 1.5rem; } .moon-glyph { font-size:4rem; } .comp { padding:3rem 1.5rem; } .comp-table td:first-child { width:45%; font-size:.72rem; padding-right:.8rem; } .comp-table td:last-child { font-size:.65rem; letter-spacing:0; } .note { padding:3rem 1.5rem; } footer { padding:1.5rem; flex-direction:column; gap:.6rem; text-align:center; } } $css$ AS css ), -- ─── THE MOMENT ────────────────────────────────────────────── -- One call to NOW() seeds every calculation on this page. moment AS ( SELECT now() AS ts, to_char(now() AT TIME ZONE 'UTC', 'HH24:MI:SS') AS hms, to_char(now() AT TIME ZONE 'UTC', 'TMDay') AS weekday, to_char(now() AT TIME ZONE 'UTC', 'DDth TMMonth YYYY') AS date_long, to_char(now() AT TIME ZONE 'UTC', 'DD TMMonth YYYY') AS date_med, extract(doy from now())::int AS day_of_year, extract(week from now())::int AS iso_week, extract(year from now())::int AS yr, -- leap year? CASE WHEN extract(year from now())::int % 400 = 0 THEN 366 WHEN extract(year from now())::int % 100 = 0 THEN 365 WHEN extract(year from now())::int % 4 = 0 THEN 366 ELSE 365 END AS days_in_year, -- days remaining in the year (date_trunc('year', now() + interval '1 year')::date - now()::date)::int AS days_to_ny, -- Unix epoch (seconds) extract(epoch from now())::bigint AS unix_epoch, -- seconds elapsed today (UTC midnight) extract(epoch from ( now() - date_trunc('day', now() AT TIME ZONE 'UTC') AT TIME ZONE 'UTC' ))::int AS secs_today, -- days since landmark events (now()::date - '2000-01-01'::date)::int AS days_since_y2k, (now()::date - '1969-10-29'::date)::int AS days_since_arpanet, (now()::date - '1991-08-06'::date)::int AS days_since_www, -- days until Y2K38 (32-bit Unix overflow: 2038-01-19T03:14:07Z) greatest(0, ('2038-01-19'::date - now()::date)::int) AS days_to_y2k38, -- moon phase (new moon ref: 2000-01-06T18:14Z · synodic period: 29.53058867d) ( extract(epoch from now()) - extract(epoch from '2000-01-06 18:14:00+00'::timestamptz) ) / (29.53058867 * 86400.0) AS moon_cycles ), -- ─── MOON PHASE ────────────────────────────────────────────── -- Computed entirely with epoch arithmetic — no lookup tables. moon AS ( SELECT round((moon_cycles - floor(moon_cycles))::numeric * 100, 1) AS illum_pct, round(((moon_cycles - floor(moon_cycles)) * 29.53058867)::numeric, 2) AS day_in_cycle, CASE WHEN (moon_cycles - floor(moon_cycles)) < 0.035 OR (moon_cycles - floor(moon_cycles)) >= 0.965 THEN 'New Moon' WHEN (moon_cycles - floor(moon_cycles)) < 0.250 THEN 'Waxing Crescent' WHEN (moon_cycles - floor(moon_cycles)) < 0.265 THEN 'First Quarter' WHEN (moon_cycles - floor(moon_cycles)) < 0.500 THEN 'Waxing Gibbous' WHEN (moon_cycles - floor(moon_cycles)) < 0.535 THEN 'Full Moon' WHEN (moon_cycles - floor(moon_cycles)) < 0.750 THEN 'Waning Gibbous' WHEN (moon_cycles - floor(moon_cycles)) < 0.765 THEN 'Last Quarter' ELSE 'Waning Crescent' END AS phase_name, CASE WHEN (moon_cycles - floor(moon_cycles)) < 0.035 OR (moon_cycles - floor(moon_cycles)) >= 0.965 THEN '🌑' WHEN (moon_cycles - floor(moon_cycles)) < 0.250 THEN '🌒' WHEN (moon_cycles - floor(moon_cycles)) < 0.265 THEN '🌓' WHEN (moon_cycles - floor(moon_cycles)) < 0.500 THEN '🌔' WHEN (moon_cycles - floor(moon_cycles)) < 0.535 THEN '🌕' WHEN (moon_cycles - floor(moon_cycles)) < 0.750 THEN '🌖' WHEN (moon_cycles - floor(moon_cycles)) < 0.765 THEN '🌗' ELSE '🌘' END AS glyph FROM moment ), -- ─── NAV ───────────────────────────────────────────────────── nav AS ( SELECT '<nav>' '<span class="logo">CHRONOLITH</span>' '<div class="nav-links">' '<a href="/">← Studio Null</a>' '<a href="/guestbook">Guestbook</a>' '<button id="sql-toggle-btn" onclick="toggleSQL()">[ sql ]</button>' '</div>' '</nav>' AS html ), -- ─── TOWER SECTION ─────────────────────────────────────────── tower AS ( SELECT format( '<div class="tower">' '<span class="tower-eye">Chronolith — A PostgreSQL Time Installation</span>' '<div class="tower-time">%s</div>' '<div class="tower-date">%s</div>' '<div class="tower-coords">' 'Day <span>%s</span> of <span>%s</span>' ' · ISO Week <span>%s</span>' ' · UTC' '</div>' '</div>', hms, weekday || ', ' || date_med, day_of_year, days_in_year, iso_week ) AS html FROM moment ), -- ─── DATA GRID ─────────────────────────────────────────────── data_grid AS ( SELECT format( '<div class="data-grid">' '<div class="datum">' '<span class="datum-val">%s</span>' '<span class="datum-lbl">Days Remaining This Year</span>' '</div>' '<div class="datum">' '<span class="datum-val">%s</span>' '<span class="datum-lbl">Seconds Elapsed Today</span>' '</div>' '<div class="datum">' '<span class="datum-val">%s</span>' '<span class="datum-lbl">Days Since Y2K</span>' '</div>' '<div class="datum">' '<span class="datum-val">%s</span>' '<span class="datum-lbl">Days Until Y2K38</span>' '</div>' '</div>', to_char(days_to_ny, 'FM999,999'), to_char(secs_today, 'FM999,999'), to_char(days_since_y2k,'FM999,999'), to_char(days_to_y2k38, 'FM999,999') ) AS html FROM moment ), -- ─── UNIX EPOCH BLOCK ──────────────────────────────────────── epoch_block AS ( SELECT format( '<div class="epoch">' '<div>' '<div class="epoch-lbl">Unix Timestamp</div>' '<div class="epoch-val">%s</div>' '</div>' '<div>' '<p class="epoch-desc">' 'The number of seconds elapsed since <em>1 January 1970, 00:00:00 UTC</em>. ' 'The reference point agreed upon by engineers in 1970 to give every ' 'machine a shared definition of "now." Stored as a 32-bit integer ' 'until 2038, when it overflows. PostgreSQL uses 64-bit precision — ' 'it will keep counting until <em>year 294,276.</em>' '</p>' '</div>' '</div>', to_char(unix_epoch, 'FM999,999,999,999') ) AS html FROM moment ), -- ─── MOON BLOCK ────────────────────────────────────────────── moon_block AS ( SELECT format( '<div class="moon-block">' '<div class="moon-glyph">%s</div>' '<div>' '<div class="moon-name">%s</div>' '<div class="moon-detail">' 'Day <span>%s</span> of 29.5 · ' 'Approx. <span>%s%%</span> illuminated' '<br>Computed via epoch arithmetic on a known new moon: ' '<span>2000-01-06 18:14 UTC</span>' '</div>' '</div>' '</div>', glyph, phase_name, day_in_cycle, illum_pct ) AS html FROM moon ), -- ─── COMPUTATION TABLE ─────────────────────────────────────── -- Every row is a SQL expression evaluated right now. comp_table AS ( SELECT format( '<div class="comp">' '<div class="comp-head">— Computed expressions</div>' '<table class="comp-table">' '<tr><td>extract(epoch from now())</td>' '<td>%s</td></tr>' '<tr><td>to_char(now(), ''YYYY-"W"IW-ID'') — ISO week date</td>' '<td>%s</td></tr>' '<tr><td>now()::date - ''1969-10-29''::date — days since first ARPANET packet</td>' '<td>%s days</td></tr>' '<tr><td>now()::date - ''1991-08-06''::date — days since first public web page</td>' '<td>%s days</td></tr>' '<tr><td>''2038-01-19''::date - now()::date — days until 32-bit Unix overflow</td>' '<td>%s days</td></tr>' '<tr><td>current_setting(''server_version'') — PostgreSQL version</td>' '<td>%s</td></tr>' '<tr><td>pg_postmaster_start_time() — server started</td>' '<td>%s</td></tr>' '</table>' '</div>', to_char(unix_epoch::numeric, 'FM999,999,999,999'), to_char(now() AT TIME ZONE 'UTC', 'IYYY-"W"IW-ID'), to_char(days_since_arpanet, 'FM999,999'), to_char(days_since_www, 'FM999,999'), greatest(0, days_to_y2k38), current_setting('server_version'), to_char(pg_postmaster_start_time(), 'DD Mon YYYY HH24:MI:SS TZ') ) AS html FROM moment ), -- ─── CLOSING NOTE ──────────────────────────────────────────── note AS ( SELECT '<div class="note">' '<p>' 'This page contains no JavaScript, no templates, no application logic. ' 'A single SQL query — calling <code>NOW()</code>, <code>EXTRACT()</code>, ' '<code>TO_CHAR()</code>, and basic arithmetic — assembled every value you see ' 'at the exact moment your request arrived at the server.' '</p>' '<p>' 'Reload this page. The Unix epoch advances. The moon progresses fractionally. ' 'The seconds since midnight accumulate. <em>Each load is a unique document.</em>' '</p>' '</div>' AS html ), -- ─── FOOTER ────────────────────────────────────────────────── footer AS ( SELECT format( '<footer>' '<span>Chronolith · Studio Null</span>' '<span class="pg-badge">⚡ Generated live by PostgreSQL %s in __QUERY_MS__ms</span>' '</footer>', current_setting('server_version') ) AS html ), -- ─── ASSEMBLE ──────────────────────────────────────────────── page AS ( SELECT '<!DOCTYPE html>' '<html lang="en">' '<head>' '<meta charset="UTF-8">' '<meta name="viewport" content="width=device-width,initial-scale=1.0">' '<title>Chronolith — Studio Null</title>' '<link rel="icon" type="image/svg+xml" href="/favicon.svg">' '<style>' || styles.css || '</style>' '</head>' '<body>' || nav.html || tower.html || data_grid.html || epoch_block.html || moon_block.html || comp_table.html || note.html || footer.html || '__SQL_PANEL__' || '</body></html>' AS html FROM styles, nav, tower, data_grid, epoch_block, moon_block, comp_table, note, footer ) SELECT html FROM page;