`mockups/005-weather-radar.html`

225 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>weather-radar — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=Roboto+Mono:wght@400&display=swap">
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: 'Roboto Mono', monospace;
      background-color: #0a1428;
      color: #7dffe9;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 32px;
      background: linear-gradient(135deg, #06080d 0%, #0a1428 100%);
      border-bottom: 1px solid #1a243a;
      font-family: 'Roboto Condensed', sans-serif;
      font-weight: 700;
      letter-spacing: 1px;
    }
    header .brand {
      font-size: 1.5rem;
      color: #ffd166;
    }
    header select {
      padding: 8px 12px;
      background: #06080d;
      border: 1px solid #1a243a;
      color: #7dffe9;
      font-family: 'Roboto Mono', monospace;
      border-radius: 4px;
    }
    header .status {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.9rem;
    }
    .status-circle {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #7dffe9;
    }
    .main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .left-pane {
      width: 40%;
      background-color: #06080d;
      display: flex;
      flex-direction: column;
      padding: 24px;
      overflow-y: auto;
    }
    .chat-log {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 16px;
    }
    .message {
      display: flex;
      gap: 12px;
      align-items: start;
    }
    .message.user {
      justify-content: flex-end;
    }
    .message.user .text {
      background: #ef4f4f;
      color: #0a1428;
      padding: 12px 16px;
      border-radius: 8px 0 8px 8px;
      max-width: 70%;
    }
    .message.agent .text {
      background: #1a243a;
      color: #7dffe9;
      padding: 12px 16px;
      border-radius: 0 8px 8px 8px;
      max-width: 70%;
    }
    .chat-input {
      display: flex;
      gap: 8px;
    }
    .chat-input input {
      flex: 1;
      padding: 12px;
      background: #06080d;
      border: 1px solid #1a243a;
      color: #7dffe9;
      font-family: 'Roboto Mono', monospace;
      border-radius: 4px;
    }
    .chat-input button {
      padding: 12px 24px;
      background: #7dffe9;
      color: #0a1428;
      border: none;
      border-radius: 4px;
      font-weight: bold;
      cursor: pointer;
    }
    .right-pane {
      width: 60%;
      display: flex;
      flex-direction: column;
      padding: 24px;
      overflow-y: auto;
    }
    .sub-panels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      flex: 1;
    }
    .panel {
      background: #06080d;
      border: 1px solid #1a243a;
      padding: 20px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
    }
    .panel-header {
      font-family: 'Roboto Condensed', sans-serif;
      font-weight: 700;
      color: #ffd166;
      margin-bottom: 16px;
      letter-spacing: 0.5px;
    }
    .panel-content {
      color: #7dffe9;
      font-size: 0.95rem;
      line-height: 1.5;
    }
    .panel-content::before {
      content: "• ";
    }
    .panel-content span {
      color: #ef4f4f;
    }
  </style>
</head>
<body>
  <header>
    <div class="brand">FOUR HORSEMEN STUDIO</div>
    <div>
      <select>
        <option>Project: Stormfront</option>
        <option>Project: Cyclone-7</option>
        <option>Project: Tornado-9</option>
      </select>
      <div class="status">
        <div class="status-circle"></div>
        <span>idle</span>
      </div>
    </div>
  </header>
  <div class="main">
    <div class="left-pane">
      <div class="chat-log">
        <div class="message user">
          <div class="text">/run-topic "storm dynamics"</div>
        </div>
        <div class="message agent">
          <div class="text">Initiating topic run: storm dynamics. Radar sweep active. Anticipated data inflow: 12 mins.</div>
        </div>
        <div class="message user">
          <div class="text">/stampede "pressure gradients"</div>
        </div>
        <div class="message agent">
          <div class="text">Stampede mode engaged. Analyzing pressure gradients. Expected surge in 3 minutes.</div>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="Enter command or query">
        <button>→</button>
      </div>
    </div>
    <div class="right-pane">
      <div class="sub-panels">
        <div class="panel">
          <div class="panel-header">Preview</div>
          <div class="panel-content">
            Satellite imagery overlay: 85% cloud cover. Wind vectors: NE at 15kt. Pressure: 1013 hPa.
          </div>
        </div>
        <div class="panel">
          <div class="panel-header">Paper</div>
          <div class="panel-content">
            Design brief: 3D visualization of stormfront. Mockups due by 1600. Current iteration: v2.7.
          </div>
        </div>
        <div class="panel">
          <div class="panel-header">Figma</div>
          <div class="panel-content">
            Component library updated. 23 assets synced. Last sync: 08:47. Pending: 2 variants.
          </div>
        </div>
        <div class="panel">
          <div class="panel-header">Canva</div>
          <div class="panel-content">
            Template: Weather report infographic. Assets: 12 icons, 5 charts. Ready for export.
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>