`mockups/019-mid-century-print.html`

203 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>mid-century-poster — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Open+Sans&display=swap">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Open Sans', sans-serif;
      background: #fcecc9;
      color: #173d56;
      display: flex;
      flex-direction: column;
      height: 900px;
      width: 1440px;
      margin: 0 auto;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 48px;
      background: #173d56;
      color: #fff5e1;
      font-family: 'DM Serif Display', serif;
      font-size: 2rem;
    }
    header select {
      padding: 8px 16px;
      font-size: 1rem;
      background: #fff5e1;
      color: #173d56;
      border: 2px solid #d97706;
      border-radius: 4px;
    }
    header .status {
      padding: 8px 16px;
      background: #b91c1c;
      color: #fff5e1;
      border-radius: 4px;
      font-size: 0.875rem;
    }
    main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .chat-pane {
      width: 40%;
      background: #fff5e1;
      display: flex;
      flex-direction: column;
      padding: 24px;
      overflow-y: auto;
    }
    .chat-messages {
      flex: 1;
      margin-bottom: 24px;
    }
    .message {
      margin: 12px 0;
    }
    .user { color: #d97706; font-weight: bold; }
    .system { color: #173d56; }
    .chat-input {
      display: flex;
      gap: 8px;
    }
    .chat-input input {
      flex: 1;
      padding: 8px;
      font-size: 1rem;
    }
    .chat-input button {
      padding: 8px 16px;
      background: #d97706;
      color: #fff5e1;
      border: none;
      font-weight: bold;
    }
    .panels {
      width: 60%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 24px;
      padding: 24px;
    }
    .panel {
      background: #fff5e1;
      border: 2px solid #b91c1c;
      border-radius: 8px;
      padding: 24px;
      display: flex;
      flex-direction: column;
    }
    .panel-header {
      font-family: 'DM Serif Display', serif;
      font-size: 1.25rem;
      margin-bottom: 16px;
      color: #173d56;
    }
    .panel-body {
      font-size: 0.875rem;
      line-height: 1.5;
      color: #b91c1c;
    }
    .panel-body pre {
      font-family: monospace;
      font-size: 0.75rem;
      color: #173d56;
    }
  </style>
</head>
<body>
  <header>
    <span>FOUR HORSEMEN STUDIO</span>
    <div>
      <select>
        <option>Project Neon Dawn</option>
        <option>Project Atomic Pulse</option>
        <option>Project Golden Gate</option>
      </select>
      <span class="status">idle</span>
    </div>
  </header>
  <main>
    <div class="chat-pane">
      <div class="chat-messages">
        <div class="message"><span class="user">AGENT:</span> /run-topic: Atomic Age Typography</div>
        <div class="message"><span class="system">SYSTEM:</span> Initializing retro-futuristic font matrix...</div>
        <div class="message"><span class="user">AGENT:</span> /stampede: 3</div>
        <div class="message"><span class="system">SYSTEM:</span> Deploying 3 parallel design threads. Expect a burst of creativity.</div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="Type a command..." />
        <button>SEND</button>
      </div>
    </div>
    <div class="panels">
      <div class="panel">
        <div class="panel-header">Preview</div>
        <div class="panel-body">
          <p>Behold the future, rendered in 1950s optimism. Neon curves, chrome edges, and a touch of radioactive glow.</p>
          <pre>
  ███╗   ███╗ █████╗  ██████╗ ███████╗
  ████╗ ████║██╔══██╗██╔════╝ ██╔════╝
  ██╔████╔██║███████║██║  ███╗███████╗
  ██║╚██╔╝██║██╔══██║██║   ██║╚════██║
  ██║ ╚═╝ ██║██║  ██║╚██████╔╝███████║
  ╚═╝     ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
          </pre>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Paper</div>
        <div class="panel-body">
          <p>Hand-drawn sketches of atomic-age icons: a stylized lightbulb, a rocket with a smile, and a typewriter spitting out code.</p>
          <pre>
           _____   _   _   _____   _   _
          |  _  | | | | | |  _  | | | |
          | |_| | | |_| | | |_| | | |_| |
          |  _  | |  _  | |  _  | |  _  |
          | |_| | | | | | | |_| | | | | |
          |_____| |_| |_| |_____| |_| |_|
          </pre>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Figma</div>
        <div class="panel-body">
          <p>Vector-based atomic-age interfaces: glowing buttons, retro-futuristic sliders, and a dashboard with a pulsing core.</p>
          <pre>
           _______   _______   _______   _______   _______
          |       | |       | |       | |       | |       |
          |   _   | |   _   | |   _   | |   _   | |   _   |
          |  | |  | |  | |  | |  | |  | |  | |  | |  | |  |
          |  |_|  | |  |_|  | |  |_|  | |  |_|  | |  |_|  |
          |       | |       | |       | |       | |       |
          |       | |       | |       | |       | |       |
          </pre>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Canva</div>
        <div class="panel-body">
          <p>Collage-style layouts with neon accents: a checkerboard of 1950s advertisements, a montage of space-age travel posters, and a retro magazine spread.</p>
          <pre>
           _______   _______   _______   _______
          |       | |       | |       | |       |
          |   _   | |   _   | |   _   | |   _   |
          |  | |  | |  | |  | |  | |  | |  | |  |
          |  |_|  | |  |_|  | |  |_|  | |  |_|  |
          |       | |       | |       | |       |
          |       | |       | |       | |       |
          </pre>
        </div>
      </div>
    </div>
  </main>
</body>
</html>