`mockups/067-industrial-warning.html`

82 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>industrial-warning-sign — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&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-color: #1a1a1a; color: #fcd13e; }
    body { display: flex; flex-direction: column; }
    header { position: fixed; top: 0; left: 0; right: 0; height: 60px; background-color: #a83232; display: flex; align-items: center; padding: 0 24px; font-family: 'Bebas Neue', cursive; }
    header h1 { margin: 0; font-size: 24px; color: #000000; }
    header select { margin-left: 20px; padding: 6px 12px; font-size: 14px; background-color: #1a1a1a; color: #fcd13e; border: 1px solid #666666; }
    header .status { margin-left: auto; padding: 4px 12px; background-color: #666666; border-radius: 4px; font-size: 12px; }
    main { display: flex; flex: 1; margin-top: 60px; }
    .left-pane { width: 40%; padding: 24px; overflow-y: auto; background-color: #1a1a1a; border-right: 1px solid #666666; }
    .chat-log { display: flex; flex-direction: column; gap: 16px; }
    .message { display: flex; flex-direction: column; }
    .message.user { align-self: flex-end; }
    .message.user::before { content: "USER:"; color: #a83232; margin-bottom: 4px; }
    .message.agent::before { content: "AGENT:"; color: #fcd13e; margin-bottom: 4px; }
    .chat-input { margin-top: 24px; display: flex; }
    .chat-input input { flex: 1; padding: 8px; font-size: 14px; background-color: #000000; color: #fcd13e; border: 1px solid #666666; }
    .chat-input button { padding: 8px 16px; background-color: #a83232; color: #000000; border: none; }
    .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px; padding: 24px; }
    .sub-panel { background-color: #000000; border: 2px solid #a83232; padding: 16px; }
    .sub-panel h2 { margin: 0 0 12px; font-family: 'Bebas Neue', cursive; color: #a83232; }
    .sub-panel p { margin: 0; font-size: 14px; color: #666666; }
  </style>
</head>
<body>
  <header>
    <h1>FOUR HORSEMEN STUDIO</h1>
    <select>
      <option>Project: HORMUZ-01</option>
      <option>Project: ECHO-7</option>
      <option>Project: STAMPED-3</option>
    </select>
    <div class="status">IDLE</div>
  </header>
  <main>
    <div class="left-pane">
      <div class="chat-log">
        <div class="message user">
          <div>/run-topic "EMERGENCY PROTOCOLS"</div>
        </div>
        <div class="message agent">
          <div>TOPIC ENGAGED. INITIATING EMERGENCY PROTOCOLS. ALL SYSTEMS RED.</div>
        </div>
        <div class="message user">
          <div>/stampede</div>
        </div>
        <div class="message agent">
          <div>STAMPEDE MODE ACTIVATED. DESIGN ELEMENTS COLLAPSING INTO HAZARD ZONES.</div>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="COMMAND INPUT">
        <button>SEND</button>
      </div>
    </div>
    <div class="right-pane">
      <div class="sub-panel">
        <h2>PREVIEW</h2>
        <p>SYSTEM: RENDER LAYER 3 ENGAGED. UNAUTHORIZED MODIFICATION DETECTED. REVERTING TO BASE STATE.</p>
      </div>
      <div class="sub-panel">
        <h2>PAPER</h2>
        <p>WARNING: PAPER TRAIL INTEGRITY COMPROMISED. 3 UNRECORDED EDITS DETECTED. INITIATE AUDIT.</p>
      </div>
      <div class="sub-panel">
        <h2>FIGMA</h2>
        <p>FIGMA PLUGIN: HAZARD ZONE DETECTED IN FRAME 4. ELEMENTS EXCEEDING MAXIMUM ALLOWED SIZE.</p>
      </div>
      <div class="sub-panel">
        <h2>CANVA</h2>
        <p>CANVA LAYER: UNAUTHORIZED BACKGROUND PATTERN DETECTED. MATCHING HAZARD SIGNAGE PROTOCOL 7.</p>
      </div>
    </div>
  </main>
</body>
</html>