51 lines
2.8 KiB
HTML
51 lines
2.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>Colony Resource Harmony • Catan Turns in Dome Biometrics</title>
|
||
|
|
<style>
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Space+Grotesk:wght@500;600&display=swap');
|
||
|
|
body { background: #0a0a0f; color: #e0e0ff; font-family: 'Inter', system_ui, sans-serif; margin: 0; padding: 0; }
|
||
|
|
.header { background: linear-gradient(#1a2a3a, #0a0a0f); padding: 2rem; text-align: center; border-bottom: 1px solid #334455; }
|
||
|
|
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.5rem; margin: 0; }
|
||
|
|
.viz { max-width: 960px; margin: 3rem auto; padding: 2rem; background: #111118; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
|
||
|
|
.metric { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
|
||
|
|
.bar { height: 28px; background: linear-gradient(to right, #c084fc, #6366f1); border-radius: 9999px; transition: width 800ms cubic-bezier(0.23, 1, 0.32, 1); }
|
||
|
|
.label { width: 160px; font-weight: 600; }
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="header">
|
||
|
|
<h1>Colony Resource Harmony</h1>
|
||
|
|
<p style="opacity:0.7; margin-top:0.5rem;">Catan settlement turns mapped to dome biometrics • 14-week cycles</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="viz">
|
||
|
|
<h2 style="margin-top:0;">Resource Pulses Over Great Lakes Teal + Mars Dust</h2>
|
||
|
|
<div class="metric">
|
||
|
|
<div class="label">O₂ Stability</div>
|
||
|
|
<div style="flex:1; background:#222233; border-radius:9999px; padding:4px;">
|
||
|
|
<div class="bar" style="width:92%;"></div>
|
||
|
|
</div>
|
||
|
|
<div style="width:52px; text-align:right; font-weight:600;">92%</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric">
|
||
|
|
<div class="label">Water Trade</div>
|
||
|
|
<div style="flex:1; background:#222233; border-radius:9999px; padding:4px;">
|
||
|
|
<div class="bar" style="width:88%;"></div>
|
||
|
|
</div>
|
||
|
|
<div style="width:52px; text-align:right; font-weight:600;">88%</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric">
|
||
|
|
<div class="label">Biomass Yield</div>
|
||
|
|
<div style="flex:1; background:#222233; border-radius:9999px; padding:4px;">
|
||
|
|
<div class="bar" style="width:95%;"></div>
|
||
|
|
</div>
|
||
|
|
<div style="width:52px; text-align:right; font-weight:600;">95%</div>
|
||
|
|
</div>
|
||
|
|
<p style="font-size:0.9rem; opacity:0.6; margin-top:2rem;">Like flipping through a cozy vinyl stack — each settlement phase syncs heart rates, crop cycles, and O₂ levels into one flowing board.</p>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|