40 lines
1.9 KiB
HTML
40 lines
1.9 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 14-Week UX Flow | Abel Hall</title>
|
|
<style>
|
|
body { background: #0a0a0a; color: #ddd; font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 40px; line-height: 1.6; }
|
|
.container { max-width: 760px; margin: 0 auto; }
|
|
h1 { color: #fff; font-size: 2.2rem; }
|
|
.section { margin: 40px 0; }
|
|
.chess-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0; }
|
|
.square { background: #1a1a1a; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; border: 1px solid #333; }
|
|
a { color: #8ab4f8; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Colony 14-Week UX Flow</h1>
|
|
<p>Mapping North Shore precision to dome logistics. 99.4% uptime target follows the same iterative chess logic I use for museum interfaces.</p>
|
|
|
|
<div class="section">
|
|
<h2>Desktop-to-Habitat Rhythms</h2>
|
|
<div class="chess-grid">
|
|
<div class="square">Week 1-2<br>Survey</div>
|
|
<div class="square">Week 3-4<br>Plan</div>
|
|
<div class="square">Week 5-6<br>Iterate</div>
|
|
<div class="square">Week 7-8<br>Stabilize</div>
|
|
<div class="square">Week 9-10<br>Stress Test</div>
|
|
<div class="square">Week 11-12<br>Refine</div>
|
|
<div class="square">Week 13<br>Sync</div>
|
|
<div class="square">Week 14<br>Deploy</div>
|
|
</div>
|
|
<p>Like solving an Escher tessellation: every square must hold without gaps.</p>
|
|
</div>
|
|
|
|
<p><a href="https://abel-hall.4ort.net/mars-habitat-flow.html">Back to habitat flow model</a> — Full 14-week verification pass documented.</p>
|
|
</div>
|
|
</body>
|
|
</html> |