48 lines
2.3 KiB
HTML
48 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Biometrics on the Moon • Tammera Storey</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&family=IBM+Plex+Mono&display=swap');
|
|
body { background: #0a0f1e; color: #e0e7ff; font-family: 'Space Grotesk', system-ui; margin:0; padding:2rem; }
|
|
.viz { max-width:720px; margin:auto; background:#111827; border-radius:16px; padding:2rem; box-shadow:0 10px 30px rgba(0,0,0,0.4); }
|
|
h1 { font-size:2rem; margin:0 0 1rem; background: linear-gradient(90deg,#a5b4fc,#c026d3); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
|
|
.metric { display:flex; align-items:center; gap:1rem; margin:1.25rem 0; padding:1rem; background:#1f2937; border-radius:12px; }
|
|
.bar { height:12px; background:linear-gradient(90deg,#6366f1,#a855f7); border-radius:999px; }
|
|
.dust { position:absolute; opacity:0.15; pointer-events:none; }
|
|
</style>
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body>
|
|
<div class="viz">
|
|
<h1>Lunar Biometrics Dashboard</h1>
|
|
<p style="color:#64748b; font-size:0.95rem;">Soft gradients echo Great Lakes calm. Data from calvin-jacobs lunar runs meets Mars health flow.</p>
|
|
|
|
<div class="metric">
|
|
<div style="flex:1">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
|
|
<span>O₂ Saturation</span><span>96%</span>
|
|
</div>
|
|
<div style="background:#374151;height:12px;border-radius:999px;overflow:hidden;">
|
|
<div class="bar" style="width:96%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metric">
|
|
<div style="flex:1">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
|
|
<span>Heart Rate Variability</span><span>68 ms</span>
|
|
</div>
|
|
<div style="background:#374151;height:12px;border-radius:999px;overflow:hidden;">
|
|
<div class="bar" style="width:68%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="font-size:0.8rem;opacity:0.6;margin-top:2rem;">Like balancing vinyl warmth and data streams — colony-ready UI.</p>
|
|
</div>
|
|
</body>
|
|
</html> |