`mockups/061-menu-prix-fixe.html`

100 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>menu-prix-fixe — 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: #1a1a1a; height: 100%; }
    body { display: flex; flex-direction: column; }
    header { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: #1a1a1a; color: #fff8e7; font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; }
    header .project-picker { background: #ddd5c2; padding: 6px 12px; border-radius: 4px; font-size: 0.9rem; }
    header .status { padding: 6px 12px; background: #a83232; color: #fff8e7; border-radius: 4px; font-size: 0.9rem; }
    main { display: flex; flex: 1; overflow: hidden; }
    .left-pane { width: 40%; background: #fff8e7; padding: 30px; overflow-y: auto; }
    .chat-log { display: flex; flex-direction: column; gap: 15px; }
    .chat-message { display: flex; flex-direction: column; }
    .chat-message.user { align-self: flex-end; }
    .chat-message.user::before { content: "User:"; color: #7a5c3e; margin-bottom: 5px; }
    .chat-message.agent::before { content: "Agent:"; color: #a83232; margin-bottom: 5px; }
    .chat-input { margin-top: 30px; display: flex; }
    .chat-input input { flex: 1; padding: 10px; font-size: 1rem; }
    .chat-input button { padding: 10px 20px; background: #1a1a1a; color: #fff8e7; border: none; margin-left: 10px; }
    .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 30px; }
    .sub-panel { background: #fff8e7; border: 1px solid #ddd5c2; padding: 20px; }
    .sub-panel h3 { color: #7a5c3e; margin-bottom: 15px; font-family: 'Cormorant Garamond', serif; }
    .sub-panel p { font-size: 0.95rem; color: #1a1a1a; }
    .sub-panel .preview { background: linear-gradient(to right, #fff8e7, #ddd5c2); padding: 20px; }
    .sub-panel .paper { background: #fff8e7; }
    .sub-panel .figma { background: #fff8e7; }
    .sub-panel .canva { background: #fff8e7; }
  </style>
</head>
<body>
  <header>
    <div>FOUR HORSEMEN</div>
    <div>
      <select class="project-picker">
        <option>Project Mirage</option>
        <option>Project Nocturne</option>
        <option>Project Horizon</option>
      </select>
      <span class="status">idle</span>
    </div>
  </header>
  <main>
    <div class="left-pane">
      <div class="chat-log">
        <div class="chat-message user">
          <div>/run-topic "Typography Exploration"</div>
        </div>
        <div class="chat-message agent">
          <div>Initiating topic: Typography Exploration. Fetching assets from the vault...</div>
        </div>
        <div class="chat-message user">
          <div>/stampede "Icon Set 2024"</div>
        </div>
        <div class="chat-message agent">
          <div>Stampede engaged. Generating 12 icons in the style of Art Deco. Estimated completion: 3 minutes.</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="sub-panel">
        <h3>Preview</h3>
        <div class="preview">
          <p>Current design state: <strong>Typography Exploration</strong> (active). Next phase: Icon Set 2024 (queued).</p>
        </div>
      </div>
      <div class="sub-panel">
        <h3>Paper</h3>
        <p>
          <strong>Typography Notes:</strong><br>
          "Avoid over-ornamentation. Let the type breathe. Use #7a5c3e as a secondary accent in headers."
        </p>
      </div>
      <div class="sub-panel">
        <h3>Figma</h3>
        <p>
          <strong>Components:</strong><br>
          - Button (primary: #a83232, hover: #ddd5c2)<br>
          - Card (background: #fff8e7, border: #ddd5c2)<br>
          - Typography (Cormorant Garamond, 1.2rem)
        </p>
      </div>
      <div class="sub-panel">
        <h3>Canva</h3>
        <p>
          <strong>Template:</strong> "Market Price" (v1.2).<br>
          Includes: 3 placeholder images, 2 text blocks, and a gradient background.
        </p>
      </div>
    </div>
  </main>
</body>
</html>