`mockups/040-y2k-chrome.html`

105 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>y2k-chrome-bubble — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Inline&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: #1e1b4b; color: #e0e7ff; }
    body { display: flex; flex-direction: column; }
    header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: linear-gradient(135deg, #7c3aed, #06b6d4); color: #1e1b4b; font-family: 'Bungee Inline', cursive; font-size: 24px; }
    header select { background: #fde047; color: #1e1b4b; border: 2px solid #7c3aed; padding: 8px 12px; border-radius: 4px; }
    header .status { padding: 8px 16px; background: #e0e7ff; color: #7c3aed; border: 2px solid #06b6d4; border-radius: 20px; font-weight: bold; }
    main { display: flex; flex: 1; overflow: hidden; }
    .chat-pane { width: 40%; border-right: 2px solid #fde047; display: flex; flex-direction: column; }
    .chat-log { flex: 1; padding: 16px; overflow-y: auto; background: #1e1b4b; }
    .chat-message { margin: 12px 0; padding: 12px; background: #e0e7ff; border: 1px solid #7c3aed; border-radius: 8px; }
    .chat-message.user { background: #06b6d4; color: #1e1b4b; }
    .chat-input { display: flex; padding: 16px; }
    .chat-input input { flex: 1; padding: 8px; border: 2px solid #fde047; border-radius: 4px; }
    .chat-input button { margin-left: 8px; padding: 8px 16px; background: #7c3aed; color: #e0e7ff; border: none; border-radius: 4px; }
    .panels { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px; }
    .panel { background: #e0e7ff; border: 2px solid #7c3aed; padding: 16px; border-radius: 8px; display: flex; flex-direction: column; }
    .panel-header { font-family: 'Bungee Inline', cursive; font-size: 18px; color: #7c3aed; margin-bottom: 12px; }
    .panel-body { flex: 1; overflow-y: auto; }
    .panel-body pre { font-family: 'Inter', monospace; font-size: 14px; color: #1e1b4b; background: #fde047; padding: 8px; border-radius: 4px; }
  </style>
</head>
<body>
  <header>
    <span>FOUR HORSEMEN</span>
    <div>
      <select>
        <option>Project Neon Dawn</option>
        <option>Project Holographic Echo</option>
        <option>Project Quantum Bubble</option>
      </select>
      <span class="status">idle</span>
    </div>
  </header>
  <main>
    <div class="chat-pane">
      <div class="chat-log">
        <div class="chat-message user">/run-topic: Generate a 2003-era website mockup</div>
        <div class="chat-message">Okay, I'm spinning up a retro-futuristic chrome bubble interface. Let me fetch the gradients...</div>
        <div class="chat-message user">/stampede: Apply AIM-era chat aesthetics</div>
        <div class="chat-message">Stampede engaged! Applying glossy gradients, pixelated fonts, and a touch of millennium-era chaos.</div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="Type a command or message...">
        <button>Send</button>
      </div>
    </div>
    <div class="panels">
      <div class="panel">
        <div class="panel-header">Preview</div>
        <div class="panel-body">
          <pre>
  [GLOWING GRADIENT BOX]
  ┌───────────────┐
  │ 404 NOT FOUND │
  └───────────────┘
  [CHROME BUBBLE EFFECT]
          </pre>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Paper</div>
        <div class="panel-body">
          <pre>
  [HANDWRITTEN TEXT IN BUBBLES]
  “This is not a drill. 
  We are in the year 2003.
  The future is chrome.”
          </pre>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Figma</div>
        <div class="panel-body">
          <pre>
  [MOCKUP UI ELEMENTS]
  ▶ Frame: Chrome Bubble UI
  ▶ Color: #7c3aed (Primary)
  ▶ Gradient: 135deg #e0e7ff to #06b6d4
  ▶ Font: Bungee Inline (Display)
          </pre>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Canva</div>
        <div class="panel-body">
          <pre>
  [DESIGN LAYER PREVIEW]
  Layer 1: Chrome Gradient Background
  Layer 2: Retro Text “Y2K CHROME”
  Layer 3: Glowing Border (#fde047)
  Layer 4: Pixelated ASCII Art
          </pre>
        </div>
      </div>
    </div>
  </main>
</body>
</html>