mirror of
https://github.com/planetrenox/time.planetrenox.com.git
synced 2026-10-29 04:34:52 +00:00
Drop duplicated info, clarify sun marker and epoch
- Remove PRT day/week cards (same as days/weeks unit cards); weeks card gets the 7-day pips and day x/7 - Merge Elapsed into Epoch card, shown in local time with local weekday - Drop declination (same as subsolar latitude) and converter weekday row - Label the subsolar dot 'sun overhead' - Converter defaults to the Unix epoch instead of now Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -14,7 +14,7 @@ const dur = t => {
|
||||
return (d ? d + 'd ' : '') + [floor(s / 3600) % 24, floor(s / 60) % 60, s % 60].map(pad).join(':')
|
||||
}
|
||||
const SHORT = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }
|
||||
const LONG = { ...SHORT, second: '2-digit', timeZoneName: 'short' }
|
||||
const LONG = { weekday: 'short', ...SHORT, second: '2-digit', timeZoneName: 'short' }
|
||||
const loc = (t, o = SHORT) => new Date(t).toLocaleString(undefined, o)
|
||||
const iso = t => new Date(t).toISOString().replace('T', ' ').slice(0, 19) + ' UTC'
|
||||
const set = (id, h) => { const e = $(id); e.innerHTML != h && (e.innerHTML = h) }
|
||||
@@ -95,6 +95,7 @@ const draw = () => {
|
||||
}
|
||||
B.forEach((p, i) => (cx.fillStyle = COL[i], cx.fill(p)))
|
||||
sunEl.style.left = sx / W * 100 + '%', sunEl.style.top = sy / H * 100 + '%'
|
||||
sunEl.classList.toggle('r', sx / W > .85)
|
||||
}
|
||||
|
||||
cv.addEventListener('pointermove', e => {
|
||||
@@ -112,7 +113,7 @@ setInterval(draw, 5e3)
|
||||
|
||||
// Unit cards
|
||||
const KS = Object.keys(UNITS).slice(1)
|
||||
$('units').innerHTML = KS.map(u => `<button class="unit" data-u="${u}"><span class="ul">${UNITS[u]}<em>${u}</em></span><span class="uv" id="v${u}">–</span><span class="bar"><i id="b${u}"></i></span><span class="un" id="n${u}"></span></button>`).join('')
|
||||
$('units').innerHTML = KS.map(u => `<button class="unit" data-u="${u}"><span class="ul">${UNITS[u]}<em>${u == 'w' ? '<b id="wd"></b>' : ''}${u}</em></span><span class="uv" id="v${u}">–</span>${u == 'w' ? `<span class="pips">${'<i></i>'.repeat(7)}</span>` : `<span class="bar"><i id="b${u}"></i></span>`}<span class="un" id="n${u}"></span></button>`).join('')
|
||||
const last = {}
|
||||
const toast = m => { const t = $('toast'); t.textContent = m, t.hidden = false, clearTimeout(toast.t), toast.t = setTimeout(() => t.hidden = true, 1400) }
|
||||
const copy = v => navigator.clipboard?.writeText(String(v)).then(() => toast('Copied ' + nf.format(v)))
|
||||
@@ -124,9 +125,8 @@ $('ms').addEventListener('click', () => copy(PRT.now()))
|
||||
$('npm').addEventListener('click', () => navigator.clipboard?.writeText('npm i ortus').then(() => toast('Copied npm i ortus')))
|
||||
|
||||
// Static bits
|
||||
$('ep').textContent = `A Saturday · ${loc(E, LONG)} local`
|
||||
$('pips').innerHTML = '<i></i>'.repeat(7)
|
||||
const pips = [...$('pips').children]
|
||||
$('ep').textContent = loc(E, { weekday: 'short', ...SHORT, timeZoneName: 'short' })
|
||||
const pips = [...document.querySelectorAll('.pips i')]
|
||||
|
||||
// Milestones: next round number per unit (2 significant digits), plus the trillion
|
||||
const miles = now => {
|
||||
@@ -152,22 +152,12 @@ const age = now => {
|
||||
}
|
||||
|
||||
const slow = now => {
|
||||
set('utc', iso(now))
|
||||
set('loc', loc(now, LONG))
|
||||
set('age', age(now))
|
||||
set('unix', `Unix ${num(floor(now / 1e3))} s · epoch ${num(E)} ms`)
|
||||
const d = PRT.fromUnixMs(now, 'd'), d0 = PRT.toUnixMs(d, 'd'), d1 = PRT.toUnixMs(d + 1, 'd')
|
||||
set('day', `#${num(d)}`)
|
||||
$('dayb').style.transform = `scaleX(${(now - d0) / (d1 - d0)})`
|
||||
set('daym', `began ${loc(d0, { hour: '2-digit', minute: '2-digit' })} · ends in ${dur(d1 - now)}`)
|
||||
const w = PRT.fromUnixMs(now, 'w'), wd = ((d % 7) + 7) % 7
|
||||
set('wk', `#${num(w)} · day ${wd + 1}/7`)
|
||||
set('wkm', `Weeks start Saturday 03:00 UTC · next in ${dur(PRT.toUnixMs(w + 1, 'w') - now)}`)
|
||||
pips.forEach((p, i) => p.className = i < wd ? 'on' : i == wd ? 'cur' : '')
|
||||
const s = sun(now)
|
||||
set('loc', loc(now, { ...LONG, weekday: undefined }))
|
||||
set('utc', `${iso(now)} · Unix ${num(floor(now / 1e3))} s`)
|
||||
set('age', `${age(now)} ago · Unix ${num(E)} ms`)
|
||||
const s = sun(now), [sn, st] = season(now)
|
||||
set('ss', `${ll(s.dec / D, 'N', 'S')} ${ll(s.lon / D, 'E', 'W')}`)
|
||||
const [sn, st] = season(now)
|
||||
set('ssm', `Subsolar point · declination ${(s.dec / D).toFixed(2)}°<br>${sn} ≈ ${loc(st)} · in ${dur(st - now)}`)
|
||||
set('ssm', `${sn} in ${dur(st - now)}<br>≈ ${loc(st)}`)
|
||||
set('miles', miles(now).map(([t, l]) => `<li><span class="mv">${l.join(' <s>=</s> ')}</span><span class="mt">${loc(t)}</span><span class="mc">in ${dur(t - now)}</span></li>`).join(''))
|
||||
}
|
||||
|
||||
@@ -180,7 +170,9 @@ const tick = () => {
|
||||
for (const u of KS) {
|
||||
const v = PRT.fromUnixMs(now, u), a = PRT.toUnixMs(v, u), b = PRT.toUnixMs(v + 1, u)
|
||||
last[u] != v && ($('v' + u).innerHTML = num(last[u] = v))
|
||||
$('b' + u).style.transform = `scaleX(${(now - a) / (b - a)})`
|
||||
const wd = floor((now - a) / 864e5)
|
||||
u == 'w' ? (pips.forEach((p, i, c) => (c = i < wd ? 'on' : i == wd ? 'cur' : '', p.className != c && (p.className = c))), set('wd', `day ${wd + 1}/7`))
|
||||
: $('b' + u).style.transform = `scaleX(${(now - a) / (b - a)})`
|
||||
set('n' + u, u == 's' ? `next in ${((b - now) / 1e3).toFixed(1)}s` : `next in ${dur(b - now)}`)
|
||||
}
|
||||
floor(now / 1e3) != sec && slow(now, sec = floor(now / 1e3))
|
||||
@@ -204,12 +196,11 @@ const conv = () => {
|
||||
const pconv = () => {
|
||||
try {
|
||||
const n = Number($('pin').value.replace(/[\s,_]/g, '')), t = PRT.toUnixMs(n, $('pu').value)
|
||||
$('pout').innerHTML = dl([['UTC', iso(t)], ['local', loc(t, LONG)], ['day', new Date(t).toLocaleDateString(undefined, { weekday: 'long' })], ['unix', num(t) + ' ms']])
|
||||
$('pout').innerHTML = dl([['UTC', iso(t)], ['local', loc(t, LONG)], ['unix', num(t) + ' ms']])
|
||||
} catch (e) { $('pout').innerHTML = err(e) }
|
||||
}
|
||||
const fill = () => $('cin').value = $('cz').checked ? new Date().toISOString().slice(0, 23) : toLocalInput(Date.now())
|
||||
$('cnow').onclick = () => (fill(), conv())
|
||||
$('cz').onchange = () => (fill(), conv())
|
||||
$('cin').oninput = conv
|
||||
$('cnow').onclick = () => ($('cin').value = $('cz').checked ? new Date().toISOString().slice(0, 23) : toLocalInput(Date.now()), conv())
|
||||
$('cin').value = '1970-01-01T00:00:00.000' // Unix epoch, shows PRT going negative
|
||||
$('cin').oninput = $('cz').onchange = conv
|
||||
$('pin').oninput = $('pu').onchange = pconv
|
||||
fill(), conv(), pconv()
|
||||
conv(), pconv()
|
||||
|
||||
+6
-9
@@ -31,7 +31,7 @@
|
||||
<p class="sub">Milliseconds since <b>1998-03-14 03:00:00 UTC</b></p>
|
||||
<div class="map">
|
||||
<canvas id="map" aria-label="Dot map of Earth showing current daylight"></canvas>
|
||||
<div id="sun" title="Subsolar point"></div>
|
||||
<div id="sun" title="Sun directly overhead"><span>sun overhead</span></div>
|
||||
<div id="tip" hidden></div>
|
||||
</div>
|
||||
<div class="now">
|
||||
@@ -43,18 +43,15 @@
|
||||
<section class="units" id="units"></section>
|
||||
|
||||
<section class="grid">
|
||||
<article class="card"><h2>Epoch</h2><p class="v">1998-03-14 03:00:00 UTC</p><p class="m" id="ep"></p></article>
|
||||
<article class="card"><h2>Now</h2><p class="v" id="utc">–</p><p class="m" id="loc"></p></article>
|
||||
<article class="card"><h2>Elapsed</h2><p class="v" id="age">–</p><p class="m" id="unix"></p></article>
|
||||
<article class="card"><h2>PRT day</h2><p class="v" id="day">–</p><div class="bar"><i id="dayb"></i></div><p class="m" id="daym"></p></article>
|
||||
<article class="card"><h2>PRT week</h2><p class="v" id="wk">–</p><div class="pips" id="pips"></div><p class="m" id="wkm"></p></article>
|
||||
<article class="card"><h2>Sun</h2><p class="v" id="ss">–</p><p class="m" id="ssm"></p></article>
|
||||
<article class="card"><h2>Now</h2><p class="v" id="loc">–</p><p class="m" id="utc"></p></article>
|
||||
<article class="card"><h2>Epoch, your time</h2><p class="v" id="ep">–</p><p class="m" id="age"></p></article>
|
||||
<article class="card"><h2>Sun overhead</h2><p class="v" id="ss">–</p><p class="m" id="ssm"></p></article>
|
||||
<article class="card wide"><h2>Upcoming milestones</h2><ol id="miles"></ol></article>
|
||||
<article class="card wide conv">
|
||||
<h2>Convert</h2>
|
||||
<div class="cv">
|
||||
<div>
|
||||
<label>Date → PRT <span class="tz"><input type="checkbox" id="cz"> UTC</span></label>
|
||||
<label>Date → PRT <span class="tz"><input type="checkbox" id="cz" checked> UTC</span></label>
|
||||
<div class="row"><input type="datetime-local" id="cin" step="0.001"><button id="cnow">now</button></div>
|
||||
<dl id="cout"></dl>
|
||||
</div>
|
||||
@@ -69,7 +66,7 @@
|
||||
</main>
|
||||
|
||||
<footer class="wrap">
|
||||
<p>Integers, floored toward −∞ · negative before the epoch · 1 d = 86,400,000 ms · 1 w = 7 d · leap seconds ignored</p>
|
||||
<p>Integers, floored toward −∞ · negative before the epoch · days start 03:00 UTC, weeks on Saturdays · 1 d = 86,400,000 ms · leap seconds ignored</p>
|
||||
<button class="npm" id="npm">npm i ortus</button>
|
||||
</footer>
|
||||
<div id="toast" hidden></div>
|
||||
|
||||
@@ -37,6 +37,8 @@ h1 { font-weight: 500; font-size: clamp(28px, 4.4vw, 48px); letter-spacing: -.02
|
||||
}
|
||||
#map { display: block; width: 100%; aspect-ratio: 360 / 142; cursor: crosshair; touch-action: pan-y }
|
||||
#sun { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px #bfe8ff, 0 0 40px 12px rgba(80, 170, 255, .55); pointer-events: none }
|
||||
#sun span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #bfe3ff; white-space: nowrap; text-shadow: 0 0 8px #030815 }
|
||||
#sun.r span { left: auto; right: 18px }
|
||||
#sun::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(180, 225, 255, .8); animation: ping 2.6s ease-out infinite }
|
||||
@keyframes ping { to { inset: -26px; opacity: 0 } }
|
||||
#tip { position: absolute; transform: translate(14px, -50%); padding: 7px 10px; border-radius: 8px; background: rgba(6, 16, 42, .88); border: 1px solid var(--line); backdrop-filter: blur(8px); font: 12px/1.45 var(--mono); color: var(--mute); white-space: nowrap; pointer-events: none }
|
||||
@@ -56,6 +58,7 @@ h1 { font-weight: 500; font-size: clamp(28px, 4.4vw, 48px); letter-spacing: -.02
|
||||
.unit:hover { border-color: rgba(127, 214, 255, .45); transform: translateY(-2px) }
|
||||
.ul { display: flex; justify-content: space-between; color: var(--mute); font-size: 13px; letter-spacing: .06em; text-transform: uppercase }
|
||||
.ul em { font: 500 12px var(--mono); color: var(--cyan); text-transform: none }
|
||||
.ul b { font-weight: 400; color: var(--dim); margin-right: 10px }
|
||||
.uv { font: 400 clamp(18px, 1.9vw, 26px)/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap }
|
||||
.un { font: 12px var(--mono); color: var(--dim) }
|
||||
.bar { display: block; height: 3px; border-radius: 3px; background: rgba(90, 140, 255, .14); overflow: hidden }
|
||||
@@ -67,8 +70,7 @@ h1 { font-weight: 500; font-size: clamp(28px, 4.4vw, 48px); letter-spacing: -.02
|
||||
h2 { font: 500 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px }
|
||||
.v { font: 400 18px/1.35 var(--mono); font-variant-numeric: tabular-nums }
|
||||
.m { margin-top: 8px; font-size: 13px; color: var(--mute) }
|
||||
.card .bar { margin-top: 12px }
|
||||
.pips { display: flex; gap: 5px; margin-top: 12px }
|
||||
.pips { display: flex; gap: 5px }
|
||||
.pips i { flex: 1; height: 3px; border-radius: 3px; background: rgba(90, 140, 255, .14) }
|
||||
.pips .on { background: #2f6bff }
|
||||
.pips .cur { background: var(--cyan); box-shadow: 0 0 10px var(--cyan) }
|
||||
@@ -115,6 +117,7 @@ footer { display: flex; align-items: center; justify-content: space-between; gap
|
||||
.unit:last-child { grid-column: span 2 }
|
||||
.grid, .cv, #miles { grid-template-columns: minmax(0, 1fr) }
|
||||
.wide { grid-column: auto }
|
||||
.v { font-size: 16px }
|
||||
.map { margin: 22px -20px 0 }
|
||||
footer { flex-direction: column; align-items: flex-start }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user