129 lines
3.8 KiB
HTML
129 lines
3.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>The Recovery Clock — Abel Hall</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--dome-black: #000000;
|
||
|
|
--sensor-teal: #00f7ff;
|
||
|
|
--north-shore: #1a1a2e;
|
||
|
|
--grid-line: rgba(0, 247, 255, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
|
||
|
|
html, body {
|
||
|
|
height: 100%;
|
||
|
|
background: var(--dome-black);
|
||
|
|
color: var(--sensor-teal);
|
||
|
|
font-family: 'IBM Plex Mono', monospace;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.clock-ring {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: 90vw;
|
||
|
|
height: 90vw;
|
||
|
|
border: 1px solid var(--grid-line);
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: orbit 14s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes orbit {
|
||
|
|
0% { rotate: 0deg; opacity: 0; }
|
||
|
|
100% { rotate: 360deg; opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.tick-marker {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
width: 2px;
|
||
|
|
height: 10vh;
|
||
|
|
background: linear-gradient(to bottom, transparent, var(--sensor-teal));
|
||
|
|
transform-origin: center;
|
||
|
|
transform: translate(-50%, -50%) rotate(var(--angle));
|
||
|
|
}
|
||
|
|
|
||
|
|
.calibration-log {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 8vh;
|
||
|
|
left: 8vw;
|
||
|
|
right: 8vw;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
|
|
gap: 1rem;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-entry {
|
||
|
|
border: 1px solid var(--grid-line);
|
||
|
|
padding: 1rem;
|
||
|
|
background: rgba(0, 247, 255, 0.02);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mistake-trace {
|
||
|
|
position: absolute;
|
||
|
|
top: 20vh;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
font-size: 1rem;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
text-align: center;
|
||
|
|
animation: pulse 3s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse {
|
||
|
|
0%, 100% { opacity: 0.3; }
|
||
|
|
50% { opacity: 1; text-shadow: 0 0 20px var(--sensor-teal); }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- The Ring: 14 Weeks in Orbit -->
|
||
|
|
<div class="clock-ring"></div>
|
||
|
|
|
||
|
|
<!-- Twelve Markers: Each Tick a Calibration Point -->
|
||
|
|
<script>
|
||
|
|
const markers = document.createElement('template');
|
||
|
|
for(let i=0;i<14;i++) {
|
||
|
|
const marker = document.createElement('div');
|
||
|
|
marker.className = 'tick-marker';
|
||
|
|
marker.style.setProperty('--angle', `${i*360/14}deg`);
|
||
|
|
markers.appendChild(marker);
|
||
|
|
}
|
||
|
|
document.body.appendChild(markers.content);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- The Declaration: Where We Turn the Fall Into a Stitch -->
|
||
|
|
<div class="mistake-trace">
|
||
|
|
FROM THE FIRST SIGN OF A MISTAKE TO THE MOMENT IT'S FIXED<br/>
|
||
|
|
WE TRACK IT ALL
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- The Log: Every Drift, Every Correction, Every Breath Against the Granite -->
|
||
|
|
<div class="calibration-log">
|
||
|
|
<div class="log-entry">
|
||
|
|
T+0:00:00<br/>
|
||
|
|
Sensor Node Alpha: Humidity Baseline Locked<br/>
|
||
|
|
North Shore Anchor Engaged
|
||
|
|
</div>
|
||
|
|
<div class="log-entry">
|
||
|
|
T+0:14:00<br/>
|
||
|
|
Drift Detected: 0.003µm<br/>
|
||
|
|
Correction Applied: Dome Hatch Sequence Gamma
|
||
|
|
</div>
|
||
|
|
<div class="log-entry">
|
||
|
|
T+0:28:00<br/>
|
||
|
|
Mistake Logged: Circuit Trace Fracture<br/>
|
||
|
|
Recovery Clock Started
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|