← back to Hormuzy
mockups/030-darkroom-redlight.html
68 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>darkroom-red-light — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@600;800&family=JetBrains+Mono:wght@500&display=swap">
<style>
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: 'JetBrains Mono', monospace; background: #0a0303; color: #ff2a2a; }
body { display: flex; flex-direction: column; height: 100vh; }
header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; font-family: 'Inter', sans-serif; font-weight: 800; }
header .brand { font-size: 1.5em; }
header .dropdown { padding: 8px 16px; background: #1a0808; border-radius: 4px; }
header .status { padding: 6px 12px; background: #591212; border-radius: 4px; color: #ffd1d1; }
main { display: flex; flex: 1; overflow: hidden; }
.left-pane { width: 40%; border-right: 1px solid #591212; padding: 24px; overflow-y: auto; }
.chat-log { display: flex; flex-direction: column; gap: 16px; }
.message { background: #1a0808; padding: 12px; border-radius: 6px; }
.message.user { align-self: flex-end; background: #591212; }
.chat-input { margin-top: 24px; display: flex; }
.chat-input input { flex: 1; padding: 12px; border: none; background: #1a0808; color: #ff2a2a; border-radius: 4px; }
.chat-input button { padding: 12px 24px; background: #ff2a2a; color: #0a0303; border: none; border-radius: 4px; }
.right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; }
.sub-panel { background: #1a0808; border: 1px solid #591212; border-radius: 6px; padding: 24px; }
.sub-panel h3 { margin: 0 0 16px; font-family: 'Inter', sans-serif; font-weight: 600; }
.sub-panel p { font-size: 0.9em; }
</style>
</head>
<body>
<header>
<div class="brand">FOUR HORSEMEN STUDIO</div>
<div class="dropdown">PROJECT: <span>Project Red</span> | <span>Hormuz Initiative</span> | <span>Stampede-7</span></div>
<div class="status">idle</div>
</header>
<main>
<div class="left-pane">
<div class="chat-log">
<div class="message user">/run-topic: "emulsion fatigue"</div>
<div class="message">Processing... Hydroquinone saturation at 32%. Adjusting safelight exposure.</div>
<div class="message user">/stampede: "silver halide bloom"</div>
<div class="message">Initiating. Developing in D-76 at 20°C.预计 3 分钟完成.</div>
</div>
<div class="chat-input">
<input type="text" placeholder="type /help for commands">
<button>SEND</button>
</div>
</div>
<div class="right-pane">
<div class="sub-panel">
<h3>Preview</h3>
<p>Negative exposed to red safelight, emulsion swelling. Hydroquinone saturation at 32%. Silver halide bloom detected.</p>
</div>
<div class="sub-panel">
<h3>Paper</h3>
<p>Archival-grade fiber base. Contrast ratio: 4.7:1. Bleach failure risk: low. Fixer residue: 0.03%.</p>
</div>
<div class="sub-panel">
<h3>Figma</h3>
<p>Layer "emulsion" locked. Blend mode: multiply. Opacity: 78%. Linked to asset: silver-halide-123.</p>
</div>
<div class="sub-panel">
<h3>Canva</h3>
<p>Template: 4x5 contact sheet. Grid: 16 columns. Frame 7: underexposed by 1/3 stop. Fixer time: 3 minutes.</p>
</div>
</div>
</main>
</body>
</html>