`mockups/093-telegram-pole.html`

102 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>telegraph-pole-knots — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Inter&display=swap">
  <style>
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #7a5c3e; color: #fbf6e9; height: 100%; }
    body { display: flex; flex-direction: column; font-size: 14px; }
    header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: #1a0e00; border-bottom: 1px solid #3a3a3a; }
    header h1 { font-family: 'Special Elite', cursive; font-size: 24px; margin: 0; }
    .project-picker { position: relative; }
    .project-picker select { background: #fbf6e9; color: #1a0e00; padding: 6px 12px; border: 1px solid #a83232; border-radius: 4px; }
    .status-indicator { padding: 6px 12px; background: #a83232; border-radius: 4px; font-size: 12px; }
    main { display: flex; flex: 1; overflow: hidden; }
    .chat-pane { width: 40%; border-right: 1px solid #3a3a3a; padding: 24px; overflow-y: auto; }
    .chat-pane .message { margin-bottom: 16px; }
    .chat-pane .message.user { text-align: right; }
    .chat-pane .message.agent { text-align: left; }
    .chat-pane .message span { background: #fbf6e9; padding: 8px 12px; border-radius: 4px; display: inline-block; }
    .chat-input { position: relative; margin-top: 24px; }
    .chat-input input { width: 100%; padding: 12px; font-size: 14px; border: 1px solid #3a3a3a; background: #fbf6e9; color: #1a0e00; }
    .panels { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; }
    .panel { background: #fbf6e9; color: #1a0e00; padding: 24px; border: 1px solid #a83232; border-radius: 4px; }
    .panel h2 { margin: 0 0 16px 0; font-family: 'Special Elite', cursive; font-size: 18px; }
    .panel pre { font-size: 12px; color: #3a3a3a; background: #fbf6e9; padding: 12px; border: 1px solid #a83232; border-radius: 4px; }
    .panel .note { background: #fbf6e9; padding: 12px; border: 1px solid #a83232; border-radius: 4px; }
  </style>
</head>
<body>
  <header>
    <h1>FOUR HORSEMEN</h1>
    <div class="project-picker">
      <select>
        <option>Project HORMUZ</option>
        <option>Project TELGAR</option>
        <option>Project KNOTT</option>
      </select>
    </div>
    <div class="status-indicator">idle</div>
  </header>
  <main>
    <div class="chat-pane">
      <div class="message agent">
        <span>/run-topic 'telegraph-pole-knots'</span>
      </div>
      <div class="message user">
        <span>/stampede 3</span>
      </div>
      <div class="message agent">
        <span>Agent: Splicing 3 nodes into the grid. Expect sporadic hums and flickers.</span>
      </div>
      <div class="message agent">
        <span>Agent: Warning — voltage surge detected. Retracting node 2.</span>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="type /help for commands">
      </div>
    </div>
    <div class="panels">
      <div class="panel">
        <h2>Preview</h2>
        <pre>
          ┌───────────────┐
          │  ⚡ 1138 ⚡   │
          │  ┌───┐      │
          │  │   │      │
          │  └───┘      │
          └───────────────┘
        </pre>
      </div>
      <div class="panel">
        <h2>Paper</h2>
        <div class="note">
          [REPAIR LOG 001]<br>
          Date: 03/14/2024<br>
          Status: Node 2 offline due to voltage surge. Replaced insulation on pole 1138. Adjusted tension on wire 7B.
        </div>
      </div>
      <div class="panel">
        <h2>Figma</h2>
        <div class="note">
          Mockup: Telegraph Pole UI<br>
          - 3D model of pole with knot details<br>
          - Interactive voltage meter<br>
          - Wires with drag-to-repair functionality
        </div>
      </div>
      <div class="panel">
        <h2>Canva</h2>
        <div class="note">
          Design Concept: "Rusted Infrastructure"<br>
          - Background: weathered wood texture<br>
          - Accent: glowing red wires<br>
          - Tagline: "Hold the line"
        </div>
      </div>
    </div>
  </main>
</body>
</html>