`mockups/039-vaporwave-grid.html`

101 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vaporwave-aesthetic — 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; width: 100%; height: 100%; font-family: 'Inter', sans-serif; background: #1a0033; color: #ffe066; }
    body { display: flex; flex-direction: column; }
    header { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: #0d0019; border-bottom: 2px solid #ff2a78; }
    header h1 { font-family: 'Press Start 2P', cursive; font-size: 24px; color: #ff2a78; }
    .project-picker { background: #7fffd4; padding: 6px 12px; border-radius: 8px; color: #0d0019; font-size: 14px; }
    .status-indicator { font-family: 'Press Start 2P', cursive; font-size: 16px; color: #7fffd4; }
    main { display: flex; flex: 1; }
    .left-pane { width: 40%; padding: 30px; overflow-y: auto; background: #0d0019; border-right: 2px solid #ff2a78; }
    .chat-log { display: flex; flex-direction: column; gap: 15px; }
    .message { background: #1a0033; padding: 15px; border: 2px solid #ffe066; border-radius: 8px; }
    .message.user { background: #ff2a78; color: #0d0019; }
    .input-bar { margin-top: 20px; display: flex; }
    .input-bar input { flex: 1; padding: 10px; font-size: 16px; border: 2px solid #7fffd4; border-radius: 4px; }
    .input-bar button { background: #7fffd4; color: #0d0019; border: none; padding: 10px 20px; font-family: 'Press Start 2P', cursive; font-size: 14px; border-radius: 4px; margin-left: 10px; }
    .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 30px; }
    .sub-panel { background: #0d0019; border: 2px solid #ff2a78; border-radius: 8px; overflow: hidden; }
    .sub-panel-header { padding: 15px; background: linear-gradient(to right, #ff2a78, #7fffd4); color: #0d0019; font-family: 'Press Start 2P', cursive; font-size: 18px; text-align: center; }
    .sub-panel-body { padding: 20px; font-size: 14px; color: #ffe066; }
    .sub-panel-body pre { font-family: monospace; font-size: 12px; color: #ff2a78; }
  </style>
</head>
<body>
  <header>
    <h1>FOUR HORSEMEN STUDIO</h1>
    <div>
      <select class="project-picker">
        <option>Project Neon Dreams</option>
        <option>Project Synthwave</option>
        <option>Project Retro Rave</option>
      </select>
      <div class="status-indicator">idle</div>
    </div>
  </header>
  <main>
    <div class="left-pane">
      <div class="chat-log">
        <div class="message user">/run-topic "cyberpunk fashion"</div>
        <div class="message">AGENT: Initiating neural net cascade... 70% synapse sparkles detected.</div>
        <div class="message user">/stampede 3</div>
        <div class="message">AGENT: Overloading with 3D render particles. Warning: 100% vaporwave saturation achieved.</div>
      </div>
      <div class="input-bar">
        <input type="text" placeholder="type /command or message">
        <button>SEND</button>
      </div>
    </div>
    <div class="right-pane">
      <div class="sub-panel">
        <div class="sub-panel-header">PREVIEW</div>
        <div class="sub-panel-body">
          <pre>┌───────────────┐
│ 80s Arcade UI │
└───────────────┘
         ▲
         │
         ▼
</pre>
        </div>
      </div>
      <div class="sub-panel">
        <div class="sub-panel-header">PAPER</div>
        <div class="sub-panel-body">
          <div style="background: #1a0033; padding: 20px; border: 2px dashed #ff2a78; text-align: center;">
            <span style="color: #7fffd4;">[DRAFT]</span><br>
            "The future is a disco ball in a data center."
          </div>
        </div>
      </div>
      <div class="sub-panel">
        <div class="sub-panel-header">FIGMA</div>
        <div class="sub-panel-body">
          <div style="background: #0d0019; padding: 20px; border: 2px solid #ffe066; border-radius: 8px;">
            <div style="color: #ff2a78; font-size: 16px; font-family: 'Press Start 2P', cursive;">LAYER 1</div>
            <div style="color: #7fffd4;">Ellipse (80% opacity)</div>
            <div style="color: #ffe066;">Gradient: neon pink → aqua</div>
          </div>
        </div>
      </div>
      <div class="sub-panel">
        <div class="sub-panel-header">CANVA</div>
        <div class="sub-panel-body">
          <div style="display: flex; justify-content: center; align-items: center; height: 100%; background: #7fffd4; border: 2px solid #ff2a78;">
            <div style="text-align: center; color: #0d0019;">
              <div style="font-family: 'Press Start 2P', cursive; font-size: 20px;">VAPORWAVE</div>
              <div style="font-size: 14px;">Design template: 1999 cyberpunk flyer</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</body>
</html>