`mockups/098-post-office-window.html`

87 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>post-office-window — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=IBM+Plex+Sans:wght@400;600&display=swap">
  <style>
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; font-family: 'IBM Plex Sans', sans-serif; background: #fdfaf0; color: #1a1a1a; height: 100%; }
    body { display: flex; flex-direction: column; }
    header { height: 60px; background: #0e2a47; color: #fdfaf0; display: flex; align-items: center; padding: 0 24px; font-size: 18px; font-weight: 600; }
    header h1 { margin: 0; font-family: 'Special Elite', cursive; }
    header .project-picker { margin-left: auto; padding: 8px 12px; background: #a83232; color: #fdfaf0; border-radius: 4px; cursor: pointer; }
    header .status { margin-left: 16px; padding: 4px 8px; background: #666666; color: #fdfaf0; border-radius: 4px; font-size: 14px; }
    main { flex: 1; display: flex; overflow: hidden; }
    .left-pane { width: 40%; border-right: 1px solid #666666; display: flex; flex-direction: column; }
    .chat-log { flex: 1; padding: 16px; overflow-y: auto; }
    .chat-message { margin-bottom: 12px; }
    .chat-message .timestamp { color: #666666; font-size: 12px; }
    .chat-message .sender { font-weight: 600; margin-right: 8px; }
    .chat-message .content { background: #fdfaf0; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; }
    .chat-input { padding: 12px; display: flex; }
    .chat-input input { flex: 1; padding: 8px; font-size: 14px; }
    .chat-input button { margin-left: 8px; padding: 8px 16px; background: #0e2a47; color: #fdfaf0; border: none; border-radius: 4px; cursor: pointer; }
    .right-pane { width: 60%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; padding: 16px; }
    .panel { background: #fdfaf0; border: 1px solid #ccc; border-radius: 4px; padding: 16px; display: flex; flex-direction: column; }
    .panel h2 { font-family: 'Special Elite', cursive; font-size: 16px; margin: 0 0 12px 0; color: #0e2a47; }
    .panel p { font-size: 14px; color: #666666; }
    .panel .placeholder { margin-top: auto; }
  </style>
</head>
<body>
  <header>
    <h1>FOUR HORSEMEN</h1>
    <div class="project-picker">PROJECT GUTENBERG</div>
    <div class="status">idle</div>
  </header>
  <main>
    <div class="left-pane">
      <div class="chat-log">
        <div class="chat-message">
          <div class="timestamp">10:03 AM</div>
          <div class="sender">USER:</div>
          <div class="content">/run-topic "Victorian Typewriter Aesthetics"</div>
        </div>
        <div class="chat-message">
          <div class="timestamp">10:04 AM</div>
          <div class="sender">SYSTEM:</div>
          <div class="content">Topic "Victorian Typewriter Aesthetics" initiated. Inkwell vellum primed for imposition.</div>
        </div>
        <div class="chat-message">
          <div class="timestamp">10:05 AM</div>
          <div class="sender">USER:</div>
          <div class="content">/stampede "Courier Bold" "Garamond Italic"</div>
        </div>
        <div class="chat-message">
          <div class="timestamp">10:06 AM</div>
          <div class="sender">SYSTEM:</div>
          <div class="content">Stampede queued: 32pt Courier Bold with 18pt Garamond Italic. Awaiting client approval.</div>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="Type a command or message..." />
        <button>SEND</button>
      </div>
    </div>
    <div class="right-pane">
      <div class="panel">
        <h2>Preview</h2>
        <p class="placeholder">Proof rendering: 32pt Courier Bold headlines with 18pt Garamond Italic body. Margins set to 1.5cm. Waiting for client stampede confirmation.</p>
      </div>
      <div class="panel">
        <h2>Paper</h2>
        <p class="placeholder">Selected stock: 120gsm archival paper. Texture: smooth. Notes: "Please ensure all bleed areas are within 3mm of trim."</p>
      </div>
      <div class="panel">
        <h2>Figma</h2>
        <p class="placeholder">Design file "Project Gutenberg" open. Layers: 12. Last saved: 10:02 AM. Warning: 3 uncommitted changes.</p>
      </div>
      <div class="panel">
        <h2>Canva</h2>
        <p class="placeholder">Template "Victorian Broadsheet" applied. Drag-and-drop assets: 4 remaining. Font lock: "Courier Bold" and "Garamond Italic" enforced.</p>
      </div>
    </div>
  </main>
</body>
</html>