← back to Hormuzy
mockups/074-auction-paddle.html
85 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>auction-paddle — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700&family=Inter:wght@400;600&display=swap">
<style>
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #fdfaf0; color: #1a1a1a; height: 100%; }
body { display: flex; flex-direction: column; }
header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: #1a1a1a; color: #fdfaf0; font-family: 'Crimson Pro', serif; font-size: 24px; }
header .project-picker { padding: 8px 16px; background: #d4af37; border-radius: 4px; font-weight: 600; }
header .status { padding: 8px 16px; background: #a83232; color: #fdfaf0; border-radius: 4px; font-weight: 600; }
main { display: flex; flex: 1; overflow: hidden; }
.left-pane { width: 40%; border-right: 1px solid #666666; display: flex; flex-direction: column; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; }
.chat-message { margin: 8px 0; padding: 12px; background: #fdfaf0; border: 1px solid #666666; border-radius: 4px; }
.chat-message.user { background: #d4af37; color: #1a1a1a; }
.chat-input { padding: 16px; display: flex; }
.chat-input input { flex: 1; padding: 8px; font-size: 16px; }
.chat-input button { padding: 8px 16px; margin-left: 8px; background: #a83232; color: #fdfaf0; border: none; border-radius: 4px; }
.right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px; }
.panel { background: #fdfaf0; border: 1px solid #666666; border-radius: 4px; padding: 16px; display: flex; flex-direction: column; }
.panel-header { font-family: 'Crimson Pro', serif; font-size: 18px; margin-bottom: 12px; }
.panel-body { flex: 1; }
.panel-body pre { font-family: monospace; font-size: 14px; color: #666666; }
</style>
</head>
<body>
<header>
<span>FOUR HORSEMEN</span>
<div>
<select class="project-picker">
<option>Lot 47: The Midnight Gambit</option>
<option>Lot 12: Neon Diplomacy</option>
<option>Lot 88: The Velvet Hammer</option>
</select>
<span class="status">idle</span>
</div>
</header>
<main>
<div class="left-pane">
<div class="chat-log">
<div class="chat-message user">/run-topic "The Midnight Gambit" — initiate design storm</div>
<div class="chat-message">Lot 47: 'The Midnight Gambit' — sealed bid at $1.2M. Agents, mobilize.</div>
<div class="chat-message user">/stampede activate "The Midnight Gambit" — all agents, mobilize!</div>
<div class="chat-message">Agent 007: Topic locked. Generating 3D render of the vault at 45° angle. Bid increment: $500K.</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Enter command..." />
<button>Send</button>
</div>
</div>
<div class="right-pane">
<div class="panel">
<div class="panel-header">Preview</div>
<div class="panel-body">
<pre>
┌───────────────┐
│ LOT 47 │
│ BID: $1.2M │
│ HAMMER: ON │
└───────────────┘
</pre>
</div>
</div>
<div class="panel">
<div class="panel-header">Paper</div>
<div class="panel-body">
<pre>
[CONFIDENTIAL]
Design Directive: The Midnight Gambit
┌──────────────────────────────────────┐
│ 1. Use 45° perspective for all comps │
│ 2. Bid increments must be $500K │
│ 3. Red accent on all deliverables │
└──────────────────────────────────────┘
</pre>
</div>
</div>
<div class="panel">
<div class="panel-header">Figma</div>
<div class="panel-body">
<pre>
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓