← back to Hormuzy
mockups/001-operations-room.html
222 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>operations-room — Four Horsemen Studio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg:#0b0f1a; --grid:#11192a; --panel:#0f1525; --line:#1c2237;
--ink:#f0f0f5; --mute:#9aa0b5; --pri:#10b981; --sec:#f59e0b; --alert:#ff6b6b;
--mono: 'IBM Plex Mono', ui-monospace, monospace;
--sans: 'IBM Plex Sans', system-ui, sans-serif;
}
*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; padding:0; height:100%; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:13px; line-height:1.45; }
body {
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: 32px 32px;
}
header {
display:flex; align-items:center; gap:12px; padding:10px 16px;
background:rgba(11,15,26,0.92); border-bottom:1px solid var(--line);
font-family: var(--mono); font-size: 11px;
}
.station { color:var(--pri); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; }
.station::before { content:"●"; margin-right:6px; }
.pill { padding:3px 8px; border:1px solid var(--line); border-radius:2px; color:var(--mute); }
.pill.active { color:var(--pri); border-color:var(--pri); }
header select { background:#0a0f1c; color:var(--ink); border:1px solid var(--line); border-radius:2px; padding:4px 8px; font:inherit; font-family:var(--mono); }
header .clock { margin-left:auto; color:var(--mute); }
header .uptime { color:var(--sec); }
main { display:grid; grid-template-columns: 40% 60%; height: calc(100vh - 38px); }
.left { display:flex; flex-direction:column; border-right:1px solid var(--line); background:rgba(15,21,37,0.85); }
.left-head {
padding:8px 12px; font-family:var(--mono); font-size:10px; letter-spacing:0.16em;
color:var(--mute); text-transform:uppercase; border-bottom:1px solid var(--line);
display:flex; gap:14px; align-items:center;
}
.left-head .row-num { color:var(--pri); }
.chatlog { flex:1; overflow:auto; padding:12px; font-family:var(--mono); font-size:12px; }
.msg { margin-bottom:14px; padding-left:14px; border-left:2px solid var(--line); }
.msg.op { border-color:var(--pri); }
.msg.system { border-color:var(--sec); color:var(--mute); }
.msg.alert { border-color:var(--alert); }
.msg .head { color:var(--mute); font-size:10px; letter-spacing:0.1em; margin-bottom:4px; text-transform:uppercase; }
.msg .head .who { color:var(--ink); }
.msg .body { color:var(--ink); white-space:pre-wrap; }
.msg.op .body { color:var(--pri); }
.msg.alert .body { color:var(--alert); }
.cmd { color:var(--sec); }
.chatbar { border-top:1px solid var(--line); padding:10px 12px; display:flex; gap:8px; background:#0a0f1c; }
.chatbar .prompt-prefix { color:var(--pri); font-family:var(--mono); font-size:13px; padding-top:8px; }
.chatbar textarea { flex:1; background:#06090f; color:var(--ink); border:1px solid var(--line); border-radius:2px; padding:8px 10px; font:inherit; font-family:var(--mono); font-size:12px; resize:none; min-height:46px; }
.chatbar button { background:var(--pri); color:#041810; border:none; border-radius:2px; padding:0 18px; font-family:var(--mono); font-weight:600; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; }
.right { display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.15fr 1fr; gap:6px; padding:6px; min-width:0; }
.right > .pane:nth-child(1) { grid-column: 1 / 3; }
.pane { background:rgba(15,21,37,0.85); border:1px solid var(--line); display:flex; flex-direction:column; min-width:0; min-height:0; }
.pane-head {
padding:6px 12px; font-family:var(--mono); font-size:10px; letter-spacing:0.18em;
color:var(--mute); text-transform:uppercase;
background:#0a0f1c; border-bottom:1px solid var(--line);
display:flex; gap:10px; align-items:center;
}
.pane-head .ix { color:var(--pri); }
.pane-head .status { margin-left:auto; }
.pane-head .status.green { color:var(--pri); }
.pane-head .status.amber { color:var(--sec); }
.pane-body { flex:1; padding:14px; font-family:var(--mono); font-size:11px; color:var(--mute); overflow:auto; }
.ascii-grid { color:var(--pri); font-size:10px; line-height:1.1; opacity:0.55; white-space:pre; }
.blinker { display:inline-block; width:8px; height:14px; background:var(--pri); animation: blink 1s steps(2) infinite; vertical-align:-2px; }
@keyframes blink { 50% { opacity:0; } }
.table { width:100%; border-collapse:collapse; font-size:11px; }
.table td { padding:4px 0; border-bottom:1px dashed var(--line); }
.table .k { color:var(--mute); width:42%; }
.table .v { color:var(--ink); }
.table .v.amber { color:var(--sec); }
footer {
position:fixed; bottom:0; left:0; right:0; padding:4px 16px;
background:rgba(11,15,26,0.92); border-top:1px solid var(--line);
font-family:var(--mono); font-size:10px; color:var(--mute); letter-spacing:0.12em; text-transform:uppercase;
display:flex; gap:24px;
}
footer .alarm { color:var(--sec); }
footer .ok { color:var(--pri); }
</style>
</head>
<body>
<header>
<span class="station">STATION HORMUZ-01</span>
<span class="pill">DESK · S.A.</span>
<select aria-label="project">
<option>PROJ : philipperomano-pdp</option>
<option>PROJ : wholivedthere-flagship</option>
<option>PROJ : laceats-hero</option>
</select>
<span class="pill active">RUN</span>
<span class="pill">QUEUE 3</span>
<span class="clock">SHIFT 14 · 09:42:11 PT · UPTIME <span class="uptime">34h 12m</span></span>
</header>
<main>
<section class="left">
<div class="left-head">
<span class="row-num">CHANNEL · ALPHA</span>
<span>OPERATOR · STEVE</span>
<span style="margin-left:auto;">FRAME 0214</span>
</div>
<div class="chatlog">
<div class="msg system">
<div class="head">SYSTEM · 09:33:00</div>
<div class="body">station ready. four horsemen reporting in: paper-ack figma-ack canva-ack 21st-ack. queue empty. awaiting orders.</div>
</div>
<div class="msg op">
<div class="head"><span class="who">OPERATOR</span> · 09:34:18</div>
<div class="body"><span class="cmd">/run-topic</span> metallic wallcovering pdp for architects with strong sample CTA</div>
</div>
<div class="msg">
<div class="head">CLAUDETTE · 09:34:21</div>
<div class="body">brief compiled. dispatching to all four horsemen. paper=spec figma=layout canva=hero-card 21st=live-preview. eta 90s.</div>
</div>
<div class="msg op">
<div class="head"><span class="who">OPERATOR</span> · 09:36:02</div>
<div class="body"><span class="cmd">/stampede</span> 3 wild · 1 maximalist · 1 refined · 1 brutalist</div>
</div>
<div class="msg">
<div class="head">CLAUDETTE · 09:36:04</div>
<div class="body">stampede armed. session id #25 created. variants firing in parallel. monitoring.</div>
</div>
<div class="msg alert">
<div class="head">ALERT · 09:36:38</div>
<div class="body">21st-dev component_builder rate-limited. retry in 30s. continuing on 3 horsemen.</div>
</div>
</div>
<div class="chatbar">
<span class="prompt-prefix">></span>
<textarea placeholder="/run-topic … or chat with claudette"></textarea>
<button>FIRE</button>
</div>
</section>
<div class="right">
<div class="pane">
<div class="pane-head"><span class="ix">▣ 01</span> PREVIEW · live render <span class="status green">OK · 2.1s</span></div>
<div class="pane-body">
<div class="ascii-grid">┌─────────────────────────────────────────────────────────────────┐
│ PHILIPPE ROMANO INDEX │
│ ───────────── │
│ │
│ METALLIC WALLCOVERING │
│ for the long-form architect │
│ │
│ [ ORDER A SAMPLE ] ← strong-cta verified │
│ │
│ ───── catalog · trade · contact │
└─────────────────────────────────────────────────────────────────┘</div>
</div>
</div>
<div class="pane">
<div class="pane-head"><span class="ix">▣ 02</span> PAPER · brief <span class="status green">SYNC</span></div>
<div class="pane-body">
<table class="table">
<tr><td class="k">artboard</td><td class="v">1440 × 900 · light</td></tr>
<tr><td class="k">mood</td><td class="v amber">bookish · plaster + ink</td></tr>
<tr><td class="k">palette</td><td class="v">#f3ebd9 · #1b1814 · #7b1f1a</td></tr>
<tr><td class="k">type pair</td><td class="v">cormorant · inter</td></tr>
<tr><td class="k">last write</td><td class="v">14s ago</td></tr>
</table>
</div>
</div>
<div class="pane">
<div class="pane-head"><span class="ix">▣ 03</span> FIGMA · layout <span class="status amber">DIFF · 4 nodes</span></div>
<div class="pane-body">
<div style="font-size:10px; line-height:1.5;">
node 12 + hero-headline ▲ added<br>
node 13 + hero-sub ▲ added<br>
node 18 ~ cta-button (color) ◆ changed<br>
node 22 ~ image-grid (cols 4→3) ◆ changed<br>
<br>
<span style="color:var(--pri)">staged for sync · 1 click</span><span class="blinker"></span>
</div>
</div>
</div>
<div class="pane" style="grid-column: 1 / 3;">
<div class="pane-head"><span class="ix">▣ 04</span> CANVA + 21ST · pending stampede <span class="status amber">QUEUE 2</span></div>
<div class="pane-body">
<table class="table">
<tr><td class="k">canva · MAXIMALIST</td><td class="v amber">rendering · 38% · est. 22s</td></tr>
<tr><td class="k">canva · REFINED</td><td class="v">queued · pos 1</td></tr>
<tr><td class="k">canva · BRUTALIST</td><td class="v">queued · pos 2</td></tr>
<tr><td class="k">21st · MAXIMALIST</td><td class="v amber">awaiting rate-limit reset · 18s</td></tr>
<tr><td class="k">21st · REFINED</td><td class="v">queued · pos 1</td></tr>
<tr><td class="k">21st · BRUTALIST</td><td class="v">queued · pos 2</td></tr>
</table>
</div>
</div>
</div>
</main>
<footer>
<span>STN HORMUZ-01</span>
<span>OPS-LOG /var/log/horsemen.log</span>
<span class="ok">● ALL HORSEMEN ACK</span>
<span class="alarm">● 21ST RATE-LIMIT 0/60</span>
<span style="margin-left:auto;">PG-SESS #25 · 6 VARIANTS · 0 STUB</span>
</footer>
</body>
</html>