`mockups/099-bus-roll-sign.html`

85 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bus-roll-sign — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600&display=swap">
  <style>
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; height: 100%; font-family: 'Inter', sans-serif; background-color: #1a1a1a; color: #fdfaf0; }
    body { display: flex; flex-direction: column; }
    header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: linear-gradient(90deg, #a83232, #3a3a3a); color: #fcd13e; font-family: 'Bebas Neue', cursive; font-size: 24px; }
    header select { background: #3a3a3a; color: #fdfaf0; border: 1px solid #fcd13e; padding: 6px 12px; font-size: 14px; }
    header .status { padding: 6px 12px; background: #3a3a3a; border: 1px solid #fcd13e; border-radius: 4px; font-size: 14px; }
    main { display: flex; flex: 1; overflow: hidden; }
    .left-pane { width: 40%; border-right: 1px solid #3a3a3a; padding: 24px; overflow-y: auto; }
    .chat-log { display: flex; flex-direction: column; gap: 16px; }
    .message { display: flex; flex-direction: column; }
    .message.user { align-self: flex-end; }
    .message.system { align-self: flex-start; }
    .message::before { content: attr(data-time); color: #a83232; font-size: 12px; margin-bottom: 4px; }
    .message.user::after { content: attr(data-user); color: #fcd13e; font-weight: bold; margin-bottom: 4px; }
    .chat-input { margin-top: 24px; display: flex; }
    .chat-input input { flex: 1; padding: 12px; font-size: 14px; border: 1px solid #3a3a3a; background: #3a3a3a; color: #fdfaf0; }
    .chat-input button { background: #fcd13e; color: #1a1a1a; border: none; padding: 12px 24px; font-size: 14px; }
    .right-pane { width: 60%; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }
    .panel { background: #3a3a3a; border: 1px solid #a83232; padding: 24px; }
    .panel h3 { font-family: 'Bebas Neue', cursive; font-size: 18px; margin-bottom: 16px; color: #fcd13e; }
    .panel p { font-size: 14px; color: #a83232; }
    .panel .placeholder { color: #fdfaf0; }
  </style>
</head>
<body>
  <header>
    <span>FOUR HORSEMEN / HORMUZ</span>
    <div>
      <select>
        <option>Project Neon Glow</option>
        <option>Project Steel Pulse</option>
        <option>Project Velvet Dawn</option>
      </select>
      <span class="status">idle</span>
    </div>
  </header>
  <main>
    <div class="left-pane">
      <div class="chat-log">
        <div class="message user" data-time="14:22" data-user="USER">
          <div>/run-topic: "Urban Transit Reimagined"</div>
        </div>
        <div class="message system" data-time="14:23">
          <div>TOPIC: Urban Transit Reimagined | STATUS: QUEUED</div>
        </div>
        <div class="message user" data-time="14:24" data-user="USER">
          <div>/stampede: "Generate 3 variants of the bus stop sign"</div>
        </div>
        <div class="message system" data-time="14:25">
          <div>STAMPEDE: 3 variants of the bus stop sign | STATUS: PROCESSING</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">
        <h3>Preview</h3>
        <p class="placeholder">[BUS STOP SIGN MOCKUP] Neon-lit route numbers pulse in sync with the <span style="color:#fcd13e">14</span>th avenue corridor. Steel-etched glyphs glow faintly in the fog.</p>
      </div>
      <div class="panel">
        <h3>Paper</h3>
        <p class="placeholder">[SKETCH NOTES] Use 3D embossing on the "DOWNTOWN" panel. Add a tactile ridge along the <span style="color:#a83232">NEXT STOP</span> text for braille compatibility.</p>
      </div>
      <div class="panel">
        <h3>Figma</h3>
        <p class="placeholder">[COMPONENT HIERARCHY] Base component: "Bus Stop Sign" (variant: 14th Ave, Downtown, Next Stop). Nested: "Neon Glow" (color: #fcd13e, intensity: 70%).</p>
      </div>
      <div class="panel">
        <h3>Canva</h3>
        <p class="placeholder">[LAYOUT DRAFT] 8.5"x11" poster. Top third: bold "ROUTE 14" in <span style="color:#fcd13e">neon yellow</span>. Bottom two-thirds: layered <span style="color:#a83232">braille</span> text over a gradient from #1a1a1a to #3a3a3a.</p>
      </div>
    </div>
  </main>
</body>
</html>