`mockups/029-ledger-tape.html`

177 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>adding-machine-tape — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cutive+Mono&family=IBM+Plex+Mono&display=swap">
  <style>
    body {
      background-color: #fdfaf0;
      color: #1a1a1a;
      font-family: 'IBM Plex Mono', monospace;
      margin: 0;
      padding: 0;
      line-height: 1.4;
    }

    .container {
      width: 1440px;
      margin: 0 auto;
      padding: 20px;
      box-sizing: border-box;
    }

    header {
      background-color: #3a3a3a;
      color: #fdfaf0;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    header h1 {
      margin: 0;
      font-family: 'Cutive Mono', monospace;
      font-size: 24px;
    }

    .project-selector {
      font-size: 14px;
      color: #cccccc;
      background-color: transparent;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }

    .status-indicator {
      font-size: 12px;
      color: #888888;
    }

    .main-content {
      display: flex;
      height: calc(100vh - 60px); /* Adjust as needed */
    }

    .left-pane {
      width: 40%;
      background-color: #3a3a3a;
      color: #cccccc;
      padding: 10px;
      box-sizing: border-box;
      margin-right: 20px;
    }

    .chat-log {
      height: calc(100% - 40px); /* Adjust as needed */
      overflow-y: auto;
      padding: 5px;
    }

    .chat-message {
      margin-bottom: 10px;
      padding: 5px;
      border-bottom: 1px solid #cccccc;
    }

    .chat-input {
      background-color: #3a3a3a;
      color: #fdfaf0;
      border: none;
      padding: 8px;
      width: 100%;
      box-sizing: border-box;
      margin-top: 10px;
    }

    .right-pane {
      width: 60%;
      background-color: #fdfaf0;
      padding: 10px;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .sub-panel {
      background-color: #3a3a3a;
      color: #cccccc;
      padding: 15px;
      box-sizing: border-box;
      border-radius: 5px;
    }

    .sub-panel h2 {
      margin-top: 0;
      font-family: 'Cutive Mono', monospace;
      font-size: 18px;
      color: #888888;
    }

    .sub-panel p {
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>FOUR HORSEMEN / HORMUZ</h1>
      <select class="project-selector">
        <option>Project Nightingale</option>
        <option>Operation Chronos</option>
        <option>The Obsidian Archive</option>
      </select>
      <span class="status-indicator">idle</span>
    </header>

    <div class="main-content">
      <div class="left-pane">
        <h2>Processing Log</h2>
        <div class="chat-log">
          <div class="chat-message">
            <span style="font-family: 'IBM Plex Mono', monospace; color: #888888;">08:17:42</span> <span style="font-family: 'IBM Plex Mono', monospace; color: #1a1a1a;">System:</span> Initializing...
          </div>
          <div class="chat-message">
            <span style="font-family: 'IBM Plex Mono', monospace; color: #888888;">08:17:45</span> <span style="font-family: 'IBM Plex Mono', monospace; color: #1a1a1a;">User:</span> /run-topic "Ethereal Bloom" - batch 7
          </div>
          <div class="chat-message">
            <span style="font-family: 'IBM Plex Mono', monospace; color: #888888;">08:17:47</span> <span style="font-family: 'IBM Plex Mono', monospace; color: #1a1a1a;">System:</span> Topic "Ethereal Bloom" - batch 7 running. Estimated completion: 01:12:37
          </div>
          <div class="chat-message">
            <span style="font-family: 'IBM Plex Mono', monospace; color: #888888;">08:23:19</span> <span style="font-family: 'IBM Plex Mono', monospace; color: #1a1a1a;">User:</span> /stampede "Chromatic Cascade" - priority 3
          </div>
          <div class="chat-message">
            <span style="font-family: 'IBM Plex Mono', monospace; color: #888888;">08:23:21</span> <span style="font-family: 'IBM Plex Mono', monospace; color: #1a1a1a;">System:</span> Stampede "Chromatic Cascade" initiated.  Sub-processes allocated.
          </div>
        </div>
        <input type="text" class="chat-input" placeholder="Enter command...">
      </div>

      <div class="right-pane">
        <div class="sub-panel">
          <h2>Preview</h2>
          <p>Rendering now.  Please stand by.  Awaiting finalization of frame 732.  Total frames: 1248.  Sub-total rendering time: 14 minutes, 27 seconds.</p>
        </div>
        <div class="sub-panel">
          <h2>Paper</h2>
          <p>Preparing document for archival.  Checking for bleed errors.  Printing resolution: 300 DPI.  Estimated paper usage: 47 sheets.  Final check before binding.</p>
        </div>
        <div class="sub-panel">
          <h2>Figma</h2>
          <p>Synchronizing asset library.  Checking for version conflicts.  Please ensure all collaborators have approved changes.  Next audit scheduled for 09:00.</p>
        </div>
        <div class="sub-panel">
          <h2>Canva</h2>
          <p>Optimizing for social media distribution.  Analyzing engagement metrics.  Next scheduled post: 16:00.  Paid campaign performance below expectation – adjusting parameters.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>