167 lines
5.1 KiB
HTML
167 lines
5.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>North Shore Recovery Map — Abel Hall</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--dome-black: #000000;
|
||
|
|
--sensor-teal: #00f7ff;
|
||
|
|
--granite: #2a2a4a;
|
||
|
|
--ridge-line: rgba(0, 247, 255, 0.15);
|
||
|
|
--breath-white: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
|
||
|
|
html, body {
|
||
|
|
height: 100%;
|
||
|
|
background: radial-gradient(circle at center, var(--dome-black), var(--granite));
|
||
|
|
color: var(--sensor-teal);
|
||
|
|
font-family: 'IBM Plex Mono', monospace;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shore-line {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: 95vw;
|
||
|
|
height: 95vw;
|
||
|
|
border: 1px solid var(--ridge-line);
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: coast 14s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes coast {
|
||
|
|
0% { rotate: 0deg; opacity: 0; }
|
||
|
|
100% { rotate: 360deg; opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.waypoint-beacon {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
width: 4px;
|
||
|
|
height: 4px;
|
||
|
|
background: var(--breath-white);
|
||
|
|
transform-origin: center;
|
||
|
|
transform: translate(-50%, -50%) rotate(var(--bearing)) scale(var(--zoom));
|
||
|
|
box-shadow: 0 0 20px var(--sensor-teal);
|
||
|
|
}
|
||
|
|
|
||
|
|
.recovery-sequence {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 6vh;
|
||
|
|
left: 8vw;
|
||
|
|
right: 8vw;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
font-size: 0.65rem;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sequence-node {
|
||
|
|
border: 1px solid var(--ridge-line);
|
||
|
|
padding: 1.2rem;
|
||
|
|
background: rgba(0, 247, 255, 0.03);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.node-header {
|
||
|
|
border-bottom: 1px solid var(--ridge-line);
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
letter-spacing: 0.15em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mistake-vector {
|
||
|
|
position: absolute;
|
||
|
|
top: 15vh;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
font-size: 1.2rem;
|
||
|
|
letter-spacing: 0.2em;
|
||
|
|
text-align: center;
|
||
|
|
animation: anchor 4s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes anchor {
|
||
|
|
0%, 100% { opacity: 0.2; }
|
||
|
|
50% { opacity: 1; text-shadow: 0 0 30px var(--sensor-teal); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.calibration-rhythm {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 10vw;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
font-size: 0.55rem;
|
||
|
|
writing-mode: vertical-lr;
|
||
|
|
text-orientation: mixed;
|
||
|
|
letter-spacing: 0.3em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- The Coastline: 14 Weeks in Granite Orbit -->
|
||
|
|
<div class="shore-line"></div>
|
||
|
|
|
||
|
|
<!-- Fourteen Beacons: Each a Waypoint on the Ridge -->
|
||
|
|
<script>
|
||
|
|
const beacons = document.createElement('template');
|
||
|
|
for(let w=0;w<14;w++) {
|
||
|
|
const beacon = document.createElement('div');
|
||
|
|
beacon.className = 'waypoint-beacon';
|
||
|
|
beacon.style.setProperty('--bearing', `${w*360/14}deg`);
|
||
|
|
beacon.style.setProperty('--zoom', `${1+w*0.07}`);
|
||
|
|
beacons.appendChild(beacon);
|
||
|
|
}
|
||
|
|
document.body.appendChild(beacons.content);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- The Vector: Where the Mistake Becomes the Path -->
|
||
|
|
<div class="mistake-vector">
|
||
|
|
FROM GRANITE TO HABITAT<br/>
|
||
|
|
EVERY DRIFT IS A WAYPOINT
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- The Rhythm: Breathing Between the Nodes -->
|
||
|
|
<div class="calibration-rhythm">
|
||
|
|
NORTH-SHORE-BREATH-NORTH-SHORE-BREATH-NORTH-SHORE-BREATH
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- The Sequence: Where Time Becomes Space -->
|
||
|
|
<div class="recovery-sequence">
|
||
|
|
<div class="sequence-node">
|
||
|
|
<div class="node-header">T+0:00:00</div>
|
||
|
|
Sensor Node Alpha:<br/>
|
||
|
|
Humidity Baseline Locked<br/>
|
||
|
|
North Shore Anchor Engaged
|
||
|
|
</div>
|
||
|
|
<div class="sequence-node">
|
||
|
|
<div class="node-header">T+0:14:00</div>
|
||
|
|
Drift Detected: 0.003µm<br/>
|
||
|
|
Correction Applied:<br/>
|
||
|
|
Dome Hatch Sequence Gamma
|
||
|
|
</div>
|
||
|
|
<div class="sequence-node">
|
||
|
|
<div class="node-header">T+0:28:00</div>
|
||
|
|
Mistake Logged:<br/>
|
||
|
|
Circuit Trace Fracture<br/>
|
||
|
|
Recovery Clock Started
|
||
|
|
</div>
|
||
|
|
<div class="sequence-node">
|
||
|
|
<div class="node-header">T+1:00:00</div>
|
||
|
|
Full Calibration:<br/>
|
||
|
|
Fourteen Weeks in Orbit<br/>
|
||
|
|
Every Beacon Lit
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
</body>
|
||
|
|
</html>
|