← back to Hormuzy
mockups/083-bookbinder-press.html
75 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bookbinder-press — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond: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: #fff8e7; color: #1a0e00; height: 100%; }
body { display: flex; flex-direction: column; }
header { display: flex; align-items: center; justify-content: space-between; padding: 24px 48px; background: #1a0e00; color: #fff8e7; font-family: 'Cormorant Garamond', serif; }
header h1 { font-size: 1.8em; }
.project-picker { padding: 8px 16px; background: #7a1f1a; border-radius: 4px; color: #fff8e7; }
.status { padding: 8px 16px; background: #d4af37; border-radius: 4px; color: #1a0e00; }
main { display: flex; flex: 1; }
.chat-pane { width: 40%; border-right: 1px solid #7a5c3e; overflow-y: auto; }
.chat-log { padding: 24px; }
.chat-message { margin: 16px 0; }
.chat-message.user { text-align: right; }
.chat-message.system { text-align: left; }
.chat-input { position: relative; padding: 24px; }
.chat-input input { width: 100%; padding: 12px; border: 2px solid #7a5c3e; border-radius: 6px; }
.right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; }
.sub-panel { background: #fff8e7; border: 2px solid #7a5c3e; padding: 24px; }
.sub-panel h2 { color: #1a0e00; font-family: 'Cormorant Garamond', serif; margin-bottom: 16px; }
.sub-panel p { color: #7a1f1a; }
.sub-panel .accent { color: #d4af37; }
</style>
</head>
<body>
<header>
<h1>Four Horsemen</h1>
<div>
<select class="project-picker">
<option>End Papers of the Eastern Sky</option>
<option>The Foil-Stamped Codex</option>
<option>Case-Bound Ephemera</option>
</select>
<span class="status">idle</span>
</div>
</header>
<main>
<div class="chat-pane">
<div class="chat-log">
<div class="chat-message system">[system] Ready to bind new content. Type /help for commands.</div>
<div class="chat-message user">/run-topic "The Binding of Light"</div>
<div class="chat-message system">[system] Topic "The Binding of Light" initiated. Press marks detected.</div>
<div class="chat-message user">/stampede "press marks"</div>
<div class="chat-message system">[system] Stampede mode engaged. Foil-stamped overlays applied to 32 pages.</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Type a command or message..." />
</div>
</div>
<div class="right-pane">
<div class="sub-panel">
<h2>Preview</h2>
<p>A mockup of the <span class="accent">end papers</span> from <em>The Foil-Stamped Codex</em>, rendered in <span class="accent">saffron vellum</span> with <span class="accent">gold leaf</span> filigree. The <span class="accent">press marks</span> are faintly visible in the margins.</p>
</div>
<div class="sub-panel">
<h2>Paper</h2>
<p>Selected stock: <span class="accent">Japanese washi</span> (220gsm). Texture profile: <span class="accent">rough</span> with <span class="accent">natural fiber</span> inclusions. Acid-free, archival quality. Ideal for <span class="accent">foil-stamping</span> and <span class="accent">embossing</span>.</p>
</div>
<div class="sub-panel">
<h2>Figma</h2>
<p>Current layer: <span class="accent">Press Plate 7</span>. Elements include <span class="accent">gold foil</span> paths, <span class="accent">ink bleed</span> effects, and <span class="accent">case-bound</span> spine mockups. Linked to <span class="accent">Canva</span> for real-time preview.</p>
</div>
<div class="sub-panel">
<h2>Canva</h2>
<p>Template applied: <span class="accent">Bookbinder's Portfolio</span>. Includes <span class="accent">foil-stamped</span> headers, <span class="accent">end paper</span> placeholders, and <span class="accent">press mark</span> overlays. Dimensions: <span class="accent">10.5" x 8.5"</span> (US letter).</p>
</div>
</div>
</main>
</body>
</html>