← back to Hormuzy
mockups/036-noir-detective.html
72 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>noir-detective-board — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Spectral:wght@700&family=Inter&display=swap">
<style>
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Inter', sans-serif; background: #0a0a0a; color: #fbf6e9; }
body { display: flex; flex-direction: column; }
header { display: flex; align-items: center; padding: 16px 32px; background: #3a3a3a; color: #dba673; font-family: 'Spectral', serif; font-size: 24px; }
header select { margin-left: auto; padding: 8px 12px; background: #1a1a1a; color: #fbf6e9; border: 1px solid #a83232; }
header .status { margin-left: 24px; padding: 4px 8px; background: #a83232; border-radius: 4px; font-size: 12px; }
main { display: flex; flex: 1; overflow: hidden; }
.left-pane { width: 40%; border-right: 1px solid #3a3a3a; display: flex; flex-direction: column; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; }
.chat-log .message { margin: 8px 0; }
.chat-log .user { color: #dba673; font-weight: bold; }
.chat-log .content { margin-left: 8px; }
.chat-input { padding: 16px; display: flex; }
.chat-input input { flex: 1; padding: 8px; background: #1a1a1a; color: #fbf6e9; border: 1px solid #a83232; }
.chat-input button { margin-left: 8px; padding: 8px 16px; background: #dba673; color: #0a0a0a; border: none; }
.right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 16px; padding: 16px; }
.panel { background: #1a1a1a; border: 1px solid #3a3a3a; padding: 16px; }
.panel h3 { margin: 0 0 8px; color: #dba673; font-family: 'Spectral', serif; }
.panel p { margin: 0; color: #a83232; }
</style>
</head>
<body>
<header>
<span>FOUR HORSEMEN</span>
<select>
<option>Project Neon</option>
<option>Case: Midnight</option>
<option>Hormuz Initiative</option>
</select>
<span class="status">idle</span>
</header>
<main>
<div class="left-pane">
<div class="chat-log">
<div class="message"><span class="user">AGENT:</span><span class="content">/run-topic "The Black Ledger"</span></div>
<div class="message"><span class="user">SYSTEM:</span><span class="content">Topic initiated. Scanning for anomalous data patterns...</span></div>
<div class="message"><span class="user">AGENT:</span><span class="content">/stampede 3</span></div>
<div class="message"><span class="user">SYSTEM:</span><span class="content">Stampede protocol engaged. Concurrent threads: 3. Expect volatility.</span></div>
</div>
<div class="chat-input">
<input type="text" placeholder="> whisper into the void">
<button>SEND</button>
</div>
</div>
<div class="right-pane">
<div class="panel">
<h3>Preview</h3>
<p>Mock-up: A flickering neon sign casting long shadows on a rain-slicked pavement. The word "HORMUZ" glows in blood-red. No faces. Just questions.</p>
</div>
<div class="panel">
<h3>Paper</h3>
<p>Scratched notes in the margins: "The ledger's a lie. The vault's a mirror. The client's a ghost." Coffee stain near the bottom. Pen still wet.</p>
</div>
<div class="panel">
<h3>Figma</h3>
<p>Wireframes: 3D render of a neon-lit alleyway. A figure in a trench coat, back to the camera. No face. Just the glint of a revolver handle.</p>
</div>
<div class="panel">
<h3>Canva</h3>
<p>Mock-up: Wanted poster with a smudged face. Text: "EYES ONLY. LAST SEEN IN THE RED LIGHT DISTRICT. REWARD: QUESTIONS UNANSWERED."</p>
</div>
</div>
</main>
</body>
</html>