`mockups/097-old-school-arcade.html`

83 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>old-school-arcade-marquee — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;600&display=swap">
  <style>
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #0a0a0a; color: #ff00ff; height: 100%; }
    body { display: flex; flex-direction: column; }
    header { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: linear-gradient(90deg, #0a0a0a, #1a1a1a); border-bottom: 2px solid #ff00ff; }
    header h1 { font-family: 'Press Start 2P', cursive; font-size: 16px; }
    .project-picker { padding: 8px 16px; background: #1a1a1a; border: 1px solid #ff5252; border-radius: 4px; }
    .status-pill { padding: 4px 12px; background: #1a1a1a; border: 2px solid #ff00ff; border-radius: 20px; font-size: 12px; }
    main { display: flex; flex: 1; }
    .chat-pane { width: 40%; padding: 20px; overflow-y: auto; }
    .chat-log { display: flex; flex-direction: column; gap: 12px; }
    .message { padding: 12px 16px; background: #1a1a1a; border: 1px solid #ffff00; border-radius: 8px; }
    .message.user { background: #2a2a2a; }
    .chat-input { margin-top: 20px; display: flex; }
    .chat-input input { flex: 1; padding: 10px; font-size: 14px; }
    .chat-input button { padding: 10px 20px; background: #ff00ff; color: #0a0a0a; border: none; border-radius: 4px; margin-left: 10px; }
    .panels { width: 60%; display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; }
    .panel { flex: 1 1 45%; min-width: 250px; background: #1a1a1a; border: 2px solid #00ffff; border-radius: 8px; overflow: hidden; }
    .panel-header { padding: 12px 16px; background: #0a0a0a; border-bottom: 1px solid #ff5252; font-family: 'Press Start 2P', cursive; font-size: 12px; }
    .panel-body { padding: 16px; font-size: 14px; color: #ffff00; }
    .panel-body pre { font-family: monospace; color: #ff5252; background: #0a0a0a; padding: 8px; border: 1px solid #00ffff; }
  </style>
</head>
<body>
  <header>
    <h1>FOUR HORSEMEN</h1>
    <div>
      <select class="project-picker">
        <option>PROJECT: HORMUZ</option>
        <option>PROJECT: NEON GHOST</option>
        <option>PROJECT: STAMPED PAPER</option>
      </select>
      <div class="status-pill">IDLE</div>
    </div>
  </header>
  <main>
    <div class="chat-pane">
      <div class="chat-log">
        <div class="message user">USER: /run-topic '80s synthwave</div>
        <div class="message">SYSTEM: TOPIC: 1UP on the synthwave revival</div>
        <div class="message user">USER: /stampede 3</div>
        <div class="message">SYSTEM: STAMPEDE: 3 agents charging into the neon haze</div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="TYPE COMMAND...">
        <button>SEND</button>
      </div>
    </div>
    <div class="panels">
      <div class="panel">
        <div class="panel-header">PREVIEW</div>
        <div class="panel-body">
          <pre>INSERT COIN TO ACTIVATE THE NEON-LIT DASHBOARD</pre>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">PAPER</div>
        <div class="panel-body">
          <pre>HIGH-SCORE: 1987 arcade cabinet mockup</pre>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">FIGMA</div>
        <div class="panel-body">
          <pre>1UP: Vectorizing the pixelated dreams</pre>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">CANVA</div>
        <div class="panel-body">
          <pre>SELECT: 8-bit color palette applied</pre>
        </div>
      </div>
    </div>
  </main>
</body>
</html>