mirror of
https://github.com/planetrenox/time.planetrenox.com.git
synced 2026-10-29 04:34:52 +00:00
Live PRT dot map of Earth with every ortus unit
Static page: day/night lit dot map, PRT in ms/s/m/h/d/w, PRT day and week progress, milestones, next equinox/solstice, Date <-> PRT converter. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,121 @@
|
||||
:root {
|
||||
--bg: #030815; --ink: #e4eeff; --mute: #7b8fb8; --dim: #3d5180;
|
||||
--cyan: #7fd6ff; --blue: #3d8bff; --line: rgba(110, 160, 255, .13);
|
||||
--card: linear-gradient(160deg, rgba(30, 60, 140, .22), rgba(10, 22, 55, .35));
|
||||
--mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||
--sans: 'Space Grotesk', system-ui, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0 }
|
||||
html { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased }
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(40, 100, 255, .18), transparent 70%),
|
||||
radial-gradient(rgba(120, 170, 255, .07) 1px, transparent 1.5px) 0 0 / 22px 22px;
|
||||
}
|
||||
a { color: inherit; text-decoration: none }
|
||||
button, input, select { font: inherit; color: inherit }
|
||||
.wrap { width: min(1240px, 100% - 40px); margin-inline: auto }
|
||||
|
||||
.top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 }
|
||||
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .14em }
|
||||
.orb { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9efff, var(--blue) 55%, #0b2a7a); box-shadow: 0 0 14px var(--blue) }
|
||||
nav { display: flex; gap: 22px; color: var(--mute); font-size: 14px }
|
||||
nav a:hover { color: var(--cyan) }
|
||||
|
||||
.hero { text-align: center; padding-top: 18px }
|
||||
h1 { font-weight: 500; font-size: clamp(28px, 4.4vw, 48px); letter-spacing: -.02em; background: linear-gradient(90deg, #cfe9ff, #7fb6ff 60%, #5d8cff); -webkit-background-clip: text; background-clip: text; color: transparent }
|
||||
.sub { color: var(--mute); margin-top: 6px }
|
||||
.sub b { color: var(--ink); font-weight: 500; font-family: var(--mono); font-size: .92em }
|
||||
|
||||
.map {
|
||||
position: relative; margin: 34px 0 0;
|
||||
--fy: linear-gradient(transparent, #000 6%, #000 88%, transparent);
|
||||
--fx: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
|
||||
-webkit-mask: var(--fy), var(--fx); -webkit-mask-composite: source-in;
|
||||
mask: var(--fy), var(--fx); mask-composite: intersect;
|
||||
}
|
||||
#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::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 }
|
||||
#tip.l { transform: translate(calc(-100% - 14px), -50%) }
|
||||
#tip b { display: block; color: var(--ink); font-weight: 500 }
|
||||
|
||||
.now { margin-top: -6px; cursor: copy }
|
||||
.big { font: 300 clamp(30px, 8.4vw, 104px)/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #e3f3ff; text-shadow: 0 0 22px rgba(80, 160, 255, .55), 0 0 60px rgba(40, 110, 255, .35) }
|
||||
.big i, .uv i, .mv i, dd i { font-style: normal; opacity: .38 }
|
||||
.big i { opacity: 1; color: #2f63d6; text-shadow: none; margin: 0 -.12em }
|
||||
.big-u { margin-top: 12px; font: 500 14px var(--mono); color: var(--cyan); letter-spacing: .2em; text-transform: uppercase }
|
||||
.big-u span { color: var(--dim); letter-spacing: .1em; margin-left: 8px }
|
||||
|
||||
.units { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 54px }
|
||||
.unit, .card { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--card); backdrop-filter: blur(6px) }
|
||||
.unit { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; text-align: left; cursor: copy; transition: border-color .2s, transform .2s }
|
||||
.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 }
|
||||
.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 }
|
||||
.bar i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #2f6bff, var(--cyan)); box-shadow: 0 0 10px var(--cyan) }
|
||||
|
||||
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0 }
|
||||
.card { padding: 18px 20px 20px }
|
||||
.wide { grid-column: span 3 }
|
||||
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 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) }
|
||||
|
||||
#miles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 26px }
|
||||
#miles li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 10px 14px; border-left: 2px solid rgba(110, 160, 255, .25) }
|
||||
#miles li:first-child { border-color: var(--cyan) }
|
||||
.mv { font: 15px var(--mono); font-variant-numeric: tabular-nums }
|
||||
.mv em, dd em { font-style: normal; color: var(--cyan) }
|
||||
.mv s { text-decoration: none; color: var(--dim) }
|
||||
.mt { font-size: 13px; color: var(--mute) }
|
||||
.mc { font: 12px var(--mono); color: var(--dim) }
|
||||
|
||||
.cv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px }
|
||||
.cv label { display: flex; justify-content: space-between; font-size: 13px; color: var(--mute); margin-bottom: 8px }
|
||||
.tz { display: flex; align-items: center; gap: 6px; cursor: pointer }
|
||||
.tz input { accent-color: var(--blue) }
|
||||
.row { display: flex; gap: 8px }
|
||||
.row input, .row select, .row button { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(4, 12, 32, .7); font: 14px var(--mono); outline: none; color-scheme: dark }
|
||||
.row input { flex: 1; min-width: 0 }
|
||||
.row input:focus, .row select:focus { border-color: rgba(127, 214, 255, .5) }
|
||||
.row button { cursor: pointer; color: var(--cyan) }
|
||||
.row button:hover { border-color: rgba(127, 214, 255, .5) }
|
||||
dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin-top: 14px; font: 14px var(--mono); font-variant-numeric: tabular-nums }
|
||||
dt { color: var(--cyan); text-align: right }
|
||||
dd { overflow-wrap: anywhere }
|
||||
.err { color: #ff9db0 }
|
||||
|
||||
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 34px 0 44px; color: var(--dim); font-size: 13px }
|
||||
.npm { flex-shrink: 0; white-space: nowrap; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(4, 12, 32, .6); font: 13px var(--mono); color: var(--cyan); cursor: copy }
|
||||
#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 9px 16px; border-radius: 10px; background: rgba(10, 30, 80, .92); border: 1px solid rgba(127, 214, 255, .35); font: 13px var(--mono); box-shadow: 0 10px 40px rgba(0, 0, 0, .5) }
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.units { grid-template-columns: repeat(6, minmax(0, 1fr)) }
|
||||
.unit { grid-column: span 2 }
|
||||
.unit:nth-child(n+4) { grid-column: span 3 }
|
||||
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
|
||||
.wide { grid-column: span 2 }
|
||||
#miles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.units { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px }
|
||||
.unit, .unit:nth-child(n+4) { grid-column: auto }
|
||||
.unit:last-child { grid-column: span 2 }
|
||||
.grid, .cv, #miles { grid-template-columns: minmax(0, 1fr) }
|
||||
.wide { grid-column: auto }
|
||||
.map { margin: 22px -20px 0 }
|
||||
footer { flex-direction: column; align-items: flex-start }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { #sun::after { animation: none } .unit { transition: none } }
|
||||
Reference in New Issue
Block a user