← back to Hormuzy
mockups/087-ham-radio-shack.html
219 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ham-radio-shack — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&family=Inter&display=swap">
<style>
:root {
--bg: #0a0a0a;
--primary: #39ff14;
--accent: #ff5252;
--mid: #666666;
--dark: #1a1a1a;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--primary); }
body { display: flex; flex-direction: column; }
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
background: var(--dark);
color: var(--primary);
font-family: 'VT323', monospace;
position: relative;
z-index: 100;
}
header::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--primary);
}
.brand { font-size: 1.5rem; }
.project-picker {
padding: 0.5rem 1rem;
background: var(--mid);
border: 1px solid var(--primary);
border-radius: 5px;
color: var(--primary);
}
.status-indicator {
padding: 0.3rem 0.8rem;
background: var(--accent);
border: 1px solid var(--primary);
border-radius: 5px;
font-size: 0.8rem;
}
.container {
display: flex;
flex: 1;
overflow: hidden;
}
.left-pane {
width: 40%;
padding: 2rem;
border-right: 1px solid var(--mid);
overflow-y: auto;
}
.chat-log {
display: flex;
flex-direction: column;
gap: 1rem;
}
.message {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.timestamp { color: var(--mid); font-size: 0.8rem; }
.user { font-weight: bold; }
.content { background: var(--dark); padding: 0.5rem 1rem; border-radius: 5px; }
.chat-input {
margin-top: 2rem;
display: flex;
gap: 0.5rem;
}
.input-field {
flex: 1;
padding: 0.5rem;
background: var(--mid);
color: var(--primary);
border: none;
border-radius: 5px;
}
.send-btn {
padding: 0.5rem 1rem;
background: var(--primary);
color: var(--bg);
border: none;
border-radius: 5px;
cursor: pointer;
}
.right-pane {
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
padding: 2rem;
}
.panel {
background: var(--dark);
border: 1px solid var(--mid);
border-radius: 5px;
padding: 1rem;
overflow: hidden;
}
.panel-header {
font-family: 'VT323', monospace;
font-size: 1.2rem;
margin-bottom: 1rem;
color: var(--primary);
}
.panel-content {
font-family: 'Inter', sans-serif;
color: var(--mid);
font-size: 0.9rem;
}
.panel-content code {
color: var(--primary);
}
.panel-content::before {
content: "CQ CQ CQ, this is W6XYZ, 73";
display: block;
margin-bottom: 1rem;
}
.panel-content::after {
content: "73, W6XYZ";
display: block;
margin-top: 1rem;
color: var(--accent);
}
@media (max-width: 1024px) {
.container { flex-direction: column; }
.left-pane, .right-pane { width: 100%; }
.right-pane { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<header>
<div class="brand">FOUR HORSEMEN STUDIO</div>
<div>
<select class="project-picker">
<option>Project HORMUZ</option>
<option>Project SABR</option>
<option>Project ZENITH</option>
</select>
<div class="status-indicator">idle</div>
</div>
</header>
<div class="container">
<div class="left-pane">
<div class="chat-log">
<div class="message">
<div class="timestamp">[13:45:22]</div>
<div class="user">USER</div>
<div class="content">/run-topic "Quantum Typography"</div>
</div>
<div class="message">
<div class="timestamp">[13:45:25]</div>
<div class="user">ORCHESTRATOR</div>
<div class="content">Initiating topic: Quantum Typography. Engaging 3D glyphs. Signal strength: 5/5.</div>
</div>
<div class="message">
<div class="timestamp">[13:47:12]</div>
<div class="user">USER</div>
<div class="content">/stampede</div>
</div>
<div class="message">
<div class="timestamp">[13:47:15]</div>
<div class="user">ORCHESTRATOR</div>
<div class="content">Stampede mode activated. Designing in 8.3.3.7. Antenna alignment: 45 degrees.</div>
</div>
</div>
<div class="chat-input">
<input type="text" class="input-field" placeholder="Enter command..." />
<button class="send-btn">SEND</button>
</div>
</div>
<div class="right-pane">
<div class="panel">
<div class="panel-header">PREVIEW</div>
<div class="panel-content">
<div>Design mockup in progress. Antenna alignment: 45 degrees.</div>
<div>Signal strength: 5/5. Frequency: 7.2 MHz.</div>
<div>Current glyph: ▓▓▓▓▓▓▓▓▓▓</div>
</div>
</div>
<div class="panel">
<div class="panel-header">PAPER</div>
<div class="panel-content">
<div>Sketch: 12x18 grid. Notes: "Use 39ff14 for primary elements."</div>
<div>Wireframe: 2x3 layout with CRT scanlines.</div>
<div>Margin: 1.5cm. Font: VT323 at 12pt.</div>
</div>
</div>
<div class="panel">
<div class="panel-header">FIGMA</div>
<div class="panel-content">
<div>Frame: 1920x1080. Layers: 12. Artboards: 3.</div>
<div>Components: "Radio Knob" (2 instances). "Signal Meter" (1 instance).</div>
<div>Current frame: "Quantum Typography Mockup"</div>
</div>
</div>
<div class="panel">
<div class="panel-header">CANVA</div>
<div class="panel-content">
<div>Template: A4. Background: #0a0a0a with 2px noise overlay.</div>
<div>Elements: 3 text boxes (primary color), 2 icons (radio waves).</div>
<div>Export settings: 300dpi, CMYK.</div>
</div>
</div>
</div>
</div>
</body>
</html>