← back to Hormuzy
mockups/003-brutalist-spreadsheet.html
260 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>brutalist-spreadsheet — Four Horsemen Studio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; height:100%; background:#ffffff; color:#000000;
font-family:'Inter', system-ui, sans-serif; font-size:13px; line-height:1.4; font-weight:400; }
.mono { font-family:'JetBrains Mono', monospace; }
header {
border-bottom:3px solid #000; padding:0;
display:grid; grid-template-columns: auto 1fr auto auto auto;
}
header > * { padding:14px 18px; border-right:2px solid #000; display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono', monospace; font-weight:500; font-size:12px; }
header > *:last-child { border-right:none; }
header .brand { font-family:'Inter', sans-serif; font-weight:900; font-size:20px; letter-spacing:-0.04em; }
header .brand::after { content:"."; color:#ff3b30; }
header select { background:#fff; color:#000; border:none; font:inherit; font-family:'JetBrains Mono', monospace; font-weight:500; padding:0; }
header .pill { background:#000; color:#fff; padding:4px 10px; }
header .pill.alert { background:#ff3b30; color:#fff; }
main { display:grid; grid-template-columns: 38% 62%; min-height: calc(100vh - 50px); }
.left { border-right:3px solid #000; display:flex; flex-direction:column; }
.col-head {
display:grid; grid-template-columns: 60px 90px 1fr 90px; align-items:center;
border-bottom:2px solid #000; background:#000; color:#fff;
font-family:'JetBrains Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.06em;
}
.col-head > div { padding:10px 12px; border-right:1px solid #ffffff44; text-transform:uppercase; }
.col-head > div:last-child { border-right:none; }
.row {
display:grid; grid-template-columns: 60px 90px 1fr 90px; align-items:flex-start;
border-bottom:1px solid #cccccc; min-height:62px;
}
.row:hover { background:#f5f5f5; }
.row > div { padding:10px 12px; border-right:1px solid #cccccc; font-size:12px; }
.row > div:last-child { border-right:none; }
.row .id { font-family:'JetBrains Mono', monospace; font-weight:700; }
.row .who { font-family:'JetBrains Mono', monospace; font-weight:500; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; }
.row .who.you { color:#ff3b30; }
.row .body { font-family:'Inter', sans-serif; font-weight:400; font-size:13px; line-height:1.5; word-break:break-word; }
.row .body .cmd { font-family:'JetBrains Mono', monospace; font-weight:700; background:#000; color:#fff; padding:1px 6px; }
.row .ts { font-family:'JetBrains Mono', monospace; font-size:11px; color:#666; }
.compose-area {
border-top:3px solid #000; display:grid; grid-template-columns: 1fr 140px;
background:#fff;
}
.compose-area textarea {
border:none; padding:14px 18px; font:inherit; font-family:'Inter', sans-serif; font-size:14px;
background:#fff; color:#000; resize:none; min-height:78px;
}
.compose-area button {
border:none; border-left:2px solid #000; background:#000; color:#fff;
font-family:'Inter', sans-serif; font-weight:900; font-size:14px; letter-spacing:0.06em; cursor:pointer;
}
.compose-area button:hover { background:#ff3b30; }
.right { display:flex; flex-direction:column; }
.right-head {
border-bottom:2px solid #000; background:#000; color:#fff;
display:grid; grid-template-columns: repeat(4, 1fr);
font-family:'JetBrains Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.08em;
}
.right-head > div { padding:10px 14px; text-transform:uppercase; border-right:1px solid #ffffff33; display:flex; justify-content:space-between; align-items:center; }
.right-head > div:last-child { border-right:none; }
.right-head .ok { color:#0aef70; }
.right-head .pending { color:#ffd23f; }
.right-head .err { color:#ff3b30; }
.horseman-grid { flex:1; display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.horseman {
border-right:2px solid #000; border-bottom:2px solid #000; padding:18px 22px; display:flex; flex-direction:column;
}
.horseman:nth-child(2n) { border-right:none; }
.horseman:nth-last-child(-n+2) { border-bottom:none; }
.horseman .h-label {
display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:10px; margin-bottom:14px;
border-bottom:2px solid #000;
}
.horseman .h-label .name { font-family:'Inter', sans-serif; font-weight:900; font-size:28px; letter-spacing:-0.04em; }
.horseman .h-label .ix { font-family:'JetBrains Mono', monospace; font-weight:700; font-size:11px; }
.horseman .h-label .stat { font-family:'JetBrains Mono', monospace; font-weight:500; font-size:10px; padding:3px 8px; background:#000; color:#fff; }
.horseman .h-label .stat.ok { background:#0aef70; color:#000; }
.horseman .h-label .stat.pend { background:#ffd23f; color:#000; }
.horseman .h-label .stat.err { background:#ff3b30; color:#fff; }
.kv { display:grid; grid-template-columns: 110px 1fr; gap:6px 14px; font-size:12px; }
.kv .k { font-family:'JetBrains Mono', monospace; font-weight:500; font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:#666; padding-top:2px; }
.kv .v { font-family:'Inter', sans-serif; font-weight:400; word-break:break-word; }
.kv .v.bold { font-weight:700; }
.kv .v.red { color:#ff3b30; }
.horseman .preview-box {
margin-top:auto; padding:14px; background:#000; color:#fff; font-family:'JetBrains Mono', monospace; font-size:10px; line-height:1.5; white-space:pre;
}
footer {
border-top:3px solid #000; background:#fff; display:flex;
font-family:'JetBrains Mono', monospace; font-weight:500; font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
}
footer > * { padding:8px 16px; border-right:1px solid #000; }
footer > *:last-child { border-right:none; margin-left:auto; }
footer .red { color:#ff3b30; font-weight:700; }
</style>
</head>
<body>
<header>
<div class="brand">HORMUZ</div>
<div><select><option>PROJECT · philipperomano · PDP</option><option>PROJECT · wholivedthere · flagship</option></select></div>
<div><span class="pill">SESSION 25</span></div>
<div><span class="pill">QUEUE 6</span></div>
<div><span class="pill alert">RATE 1/4</span></div>
</header>
<main>
<section class="left">
<div class="col-head">
<div>#</div>
<div>WHO</div>
<div>MESSAGE</div>
<div>TS</div>
</div>
<div class="row">
<div class="id mono">001</div>
<div class="who">SYS</div>
<div class="body">Station ready. Four horsemen reporting in. Queue empty. Awaiting brief.</div>
<div class="ts">09:33:00</div>
</div>
<div class="row">
<div class="id mono">002</div>
<div class="who you">YOU</div>
<div class="body"><span class="cmd">/run-topic</span> Metallic wallcovering PDP for architects with strong sample CTA</div>
<div class="ts">09:34:18</div>
</div>
<div class="row">
<div class="id mono">003</div>
<div class="who">CLD</div>
<div class="body">Brief compiled. Dispatched to all four horsemen. Paper for spec. Figma for layout. Canva for hero. 21st for live preview. ETA 90s.</div>
<div class="ts">09:34:21</div>
</div>
<div class="row">
<div class="id mono">004</div>
<div class="who you">YOU</div>
<div class="body"><span class="cmd">/stampede</span> 3 wild · maximalist · refined · brutalist</div>
<div class="ts">09:36:02</div>
</div>
<div class="row">
<div class="id mono">005</div>
<div class="who">CLD</div>
<div class="body">Stampede armed. Session 25 created. Variants firing. Persisting to PG fh_stampede_versions.</div>
<div class="ts">09:36:04</div>
</div>
<div class="row" style="background:#fff5f4;">
<div class="id mono" style="color:#ff3b30;">006</div>
<div class="who" style="color:#ff3b30;">ALERT</div>
<div class="body">21st-dev component_builder rate-limited. Retry in 30s. Continuing on 3 horsemen.</div>
<div class="ts">09:36:38</div>
</div>
<div class="compose-area">
<textarea placeholder="Type a brief. Or /run-topic. Or /stampede 3."></textarea>
<button>FIRE</button>
</div>
</section>
<section class="right">
<div class="right-head">
<div>▣ 01 PAPER · BRIEF <span class="ok">● OK</span></div>
<div>▣ 02 FIGMA · LAYOUT <span class="pending">● DIFF 4</span></div>
<div>▣ 03 CANVA · HERO <span class="pending">● 38%</span></div>
<div>▣ 04 21ST · PREVIEW <span class="err">● RATE</span></div>
</div>
<div class="horseman-grid">
<div class="horseman">
<div class="h-label">
<span class="name">PAPER.</span>
<span class="ix">/01</span>
<span class="stat ok">OK</span>
</div>
<div class="kv">
<div class="k">artboard</div><div class="v bold">1440 × 900 · light</div>
<div class="k">mood</div><div class="v">bookish · plaster + ink</div>
<div class="k">type</div><div class="v">cormorant + inter</div>
<div class="k">nodes</div><div class="v">12</div>
<div class="k">last write</div><div class="v">14s</div>
<div class="k">drift</div><div class="v">none</div>
</div>
</div>
<div class="horseman">
<div class="h-label">
<span class="name">FIGMA.</span>
<span class="ix">/02</span>
<span class="stat pend">DIFF</span>
</div>
<div class="kv">
<div class="k">node 12</div><div class="v">+ hero-headline</div>
<div class="k">node 13</div><div class="v">+ hero-sub</div>
<div class="k">node 18</div><div class="v">~ cta-button (color)</div>
<div class="k">node 22</div><div class="v">~ image-grid (4→3 cols)</div>
<div class="k">staged</div><div class="v bold">4 nodes</div>
<div class="k">action</div><div class="v red">CLICK TO SYNC</div>
</div>
</div>
<div class="horseman">
<div class="h-label">
<span class="name">CANVA.</span>
<span class="ix">/03</span>
<span class="stat pend">38%</span>
</div>
<div class="kv">
<div class="k">variant</div><div class="v bold">MAXIMALIST</div>
<div class="k">progress</div><div class="v">38%</div>
<div class="k">eta</div><div class="v">22s</div>
<div class="k">queued</div><div class="v">REFINED · BRUTALIST</div>
</div>
<div class="preview-box">[ canva render in flight ]
hero · max-density · 12 layers
type · display 96px · body 18px
state · 38% · 22s remaining</div>
</div>
<div class="horseman">
<div class="h-label">
<span class="name">21ST.</span>
<span class="ix">/04</span>
<span class="stat err">RATE</span>
</div>
<div class="kv">
<div class="k">status</div><div class="v red bold">RATE LIMITED</div>
<div class="k">reason</div><div class="v">component_builder 1/4 in window</div>
<div class="k">reset</div><div class="v">18s</div>
<div class="k">queued</div><div class="v">3 variants pending</div>
<div class="k">fallback</div><div class="v">queue continues, no degradation</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<span>HORMUZ · STATION-01</span>
<span>SESSION #25</span>
<span class="red">● 1 OF 4 RATE-LIMITED</span>
<span>OPS-LOG /var/log/horsemen.log</span>
<span>UPTIME 34h 12m · LAST FIRE 09:36:02 · 09:43:14 NOW</span>
</footer>
</body>
</html>