`mockups/080-fire-watch-tower.html`

201 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>fire-watch-tower-log — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700&family=IBM+Plex+Mono:wght@400&display=swap">
  <style>
    :root {
      --bg-ground: #fbf6e9;
      --bg-primary: #1a0e00;
      --accent-1: #3a4a2c;
      --accent-2: #a83232;
      --accent-3: #7a5c3e;
      --font-display: 'Crimson Pro', serif;
      --font-body: 'IBM Plex Mono', monospace;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: var(--font-body);
      background: linear-gradient(135deg, var(--bg-ground) 0%, var(--accent-1) 100%);
      color: var(--bg-primary);
      display: flex;
      flex-direction: column;
      height: 900px;
      width: 1440px;
      margin: auto;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 40px;
      background: var(--bg-primary);
      color: var(--bg-ground);
      font-family: var(--font-display);
      font-size: 1.5em;
      border-bottom: 2px solid var(--accent-2);
    }
    header select {
      padding: 8px 12px;
      font-size: 1em;
      background: var(--accent-1);
      color: var(--bg-primary);
      border: none;
      border-radius: 4px;
      margin-left: 20px;
    }
    header .status {
      padding: 6px 12px;
      background: var(--accent-2);
      color: var(--bg-primary);
      border-radius: 4px;
      font-size: 0.9em;
    }
    main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .chat-pane {
      width: 40%;
      background: var(--accent-1);
      color: var(--bg-primary);
      display: flex;
      flex-direction: column;
      padding: 20px;
      overflow-y: auto;
    }
    .chat-log {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 20px;
    }
    .message {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .message.user {
      flex-direction: row-reverse;
    }
    .message-text {
      background: var(--accent-3);
      padding: 12px 16px;
      border-radius: 8px;
      max-width: 70%;
      font-size: 0.95em;
    }
    .chat-input {
      display: flex;
      gap: 10px;
    }
    .chat-input input {
      flex: 1;
      padding: 10px;
      font-size: 1em;
      border: none;
      border-radius: 4px;
      background: var(--bg-ground);
      color: var(--bg-primary);
    }
    .chat-input button {
      padding: 10px 16px;
      font-size: 1em;
      background: var(--accent-2);
      color: var(--bg-primary);
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .panels {
      width: 60%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 20px;
      padding: 20px;
      overflow-y: auto;
    }
    .panel {
      background: var(--bg-ground);
      color: var(--bg-primary);
      border: 2px solid var(--accent-3);
      border-radius: 6px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .panel-header {
      font-family: var(--font-display);
      font-size: 1.2em;
      color: var(--accent-2);
    }
    .panel-body {
      font-size: 0.95em;
      line-height: 1.4;
      color: var(--accent-3);
    }
  </style>
</head>
<body>
  <header>
    <span>FOUR HORSEMEN STUDIO</span>
    <div>
      <select>
        <option>Project Ember</option>
        <option>Project Ash</option>
        <option>Project Blaze</option>
      </select>
      <span class="status">idle</span>
    </div>
  </header>
  <main>
    <div class="chat-pane">
      <div class="chat-log">
        <div class="message user">
          <div class="message-text">/run-topic "Midnight Forest"</div>
        </div>
        <div class="message">
          <div class="message-text">Topic initiated. Shadows stretch long. The firelight flickers. Ash falls like snow in the dead of night.</div>
        </div>
        <div class="message user">
          <div class="message-text">/stampede generate 3 variants</div>
        </div>
        <div class="message">
          <div class="message-text">Stampede engaged. The embers rise in a spiral, each variant a different shade of ruin. The wind carries the scent of burnt pine and old parchment.</div>
        </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">The ember glows faintly in the hollow of the tree. Smoke curls upward, thin and persistent. A single flame lingers at the edge of the frame, like a secret.</div>
      </div>
      <div class="panel">
        <div class="panel-header">Paper</div>
        <div class="panel-body">Sketches in charcoal and burnt umber. The lines are jagged, like the edges of a storm. A single charcoal line loops around the page, never quite closing.</div>
      </div>
      <div class="panel">
        <div class="panel-header">Figma</div>
        <div class="panel-body">Layers of fire and ash. The canvas is smudged with the residue of a thousand embers. A single flame flickers in the corner, its glow casting long shadows.</div>
      </div>
      <div class="panel">
        <div class="panel-header">Canva</div>
        <div class="panel-body">A collage of burnt paper and cracked wood. The colors are deep, like the heart of a dying fire. A single word, "ASH," is etched into the center in charcoal.</div>
      </div>
    </div>
  </main>
</body>
</html>