← back to Hormuzy
mockups/023-amber-cathode.html
113 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>amber-cathode-monitor — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&family=Space+Mono:wght@400;700&display=swap">
<style>
html, body {margin:0;padding:0;overflow-x:hidden;background:#1a0e00;color:#ffb000;font-family:'Space Mono', monospace;height:100%}
* {box-sizing:border-box}
body {display:flex;flex-direction:column;font-size:14px;line-height:1.4}
header {display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background:#000000;border-bottom:2px solid #664000}
header h1 {font-family:'VT323';font-size:24px;margin:0}
.project-picker {position:relative}
.project-picker select {background:#000000;border:1px solid #cc8400;padding:4px 8px;color:#ffb000;font-family:'Space Mono'}
.status-indicator {padding:4px 12px;border:2px solid #ffb000;border-radius:4px;background:#000000;color:#ffb000;font-size:12px}
.container {display:flex;flex:1;overflow:hidden}
.chat-pane {width:40%;border-right:2px solid #664000;display:flex;flex-direction:column}
.chat-log {flex:1;overflow-y:auto;padding:16px;background:#000000}
.chat-log pre {margin:0;padding:0;white-space:pre-wrap;color:#cc8400;font-family:'Space Mono'}
.chat-input {padding:8px;border-top:2px solid #664000}
.chat-input input {width:100%;background:#000000;border:1px solid #cc8400;color:#ffb000;padding:4px}
.panels {width:60%;display:flex;flex-wrap:wrap}
.panel {flex:1 1 48%;margin:8px;padding:16px;background:#000000;border:1px solid #664000}
.panel h2 {font-family:'VT323';margin:0 0 8px 0}
.panel-content {color:#cc8400}
.panel-content pre {margin:0}
.ascii-art {color:#ffb000}
</style>
</head>
<body>
<header>
<h1>FOUR HORSEMEN</h1>
<div>
<div class="project-picker">
<select>
<option>Project HADES</option>
<option>Project STORM</option>
<option>Project ECHO</option>
</select>
</div>
<div class="status-indicator">IDLE</div>
</div>
</header>
<div class="container">
<div class="chat-pane">
<div class="chat-log">
<pre>┌───────────────┐
│ AGENT LOG │
└───────────────┘
[09:47:23] USER: /run-topic "ancient data protocols"
[09:47:24] SYSTEM: INITIATING TOPIC: ANCIENT DATA PROTOCOLS
[09:47:25] SYSTEM: LOADING ASCII ART FROM 1983 IBM MAINFRAME CORE DUMP
[09:47:26] USER: /stampede "retrofitted neural net"
[09:47:27] SYSTEM: STAMPEDE MODE ENGAGED. NEURAL NET RECONFIGURING TO 1985 NEC PC-8801 SPECIFICATIONS
[09:47:28] SYSTEM: WARNING: 13% OF CONTEMPORARY CODEBASE INCOMPATIBLE WITH 1980S HARDWARE</pre>
</div>
<div class="chat-input">
<input type="text" placeholder="> ">
</div>
</div>
<div class="panels">
<div class="panel">
<h2>PREVIEW</h2>
<div class="panel-content">
<pre class="ascii-art">
_____ _ _ _ _ _ _ _ _ _ _ _
/ \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \
| || 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| ||___|___|___|___|___|___|___|___|___|___|___|
\_____/\_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/
</pre>
</div>
</div>
<div class="panel">
<h2>PAPER</h2>
<div class="panel-content">
<pre class="ascii-art">
┌───────────────┐
│ DRAFT OUTPUT │
└───────────────┘
[09:47:28] WARNING: 13% OF CONTEMPORARY CODEBASE INCOMPATIBLE WITH 1980S HARDWARE
[09:47:29] RECOMMENDED ACTION: DEPLOY TO VIRTUAL 1985 NEC PC-8801 EMULATOR
[09:47:30] STAMPEDE MODE: 88% SYNCHRONIZED WITH 1985 HARDWARE PROTOCOLS</pre>
</div>
</div>
<div class="panel">
<h2>FIGMA</h2>
<div class="panel-content">
<pre class="ascii-art">
_____ _ _ _ _ _ _ _ _ _ _ _
/ \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \
| || 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| ||___|___|___|___|___|___|___|___|___|___|___|
\_____/\_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/
</pre>
</div>
</div>
<div class="panel">
<h2>CANVA</h2>
<div class="panel-content">
<pre class="ascii-art">
_______ _ _ _ _ _ _ _ _ _ _
/ \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \
| 1985 || 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
|_______||___|___|___|___|___|___|___|___|___|___|
\______/\_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/
</pre>
</div>
</div>
</div>
</div>
</body>
</html>