`mockups/048-morse-code.html`

211 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>morse-code-key — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@700&family=Inter:wght@400;600&display=swap">
  <style>
    :root {
      --bg: #0a0a0a;
      --primary: #ffd700;
      --accent: #a83232;
      --secondary: #3a3a3a;
      --surface: #fbf6e9;
      --font-mono: 'IBM Plex Mono', monospace;
      --font-body: 'Inter', sans-serif;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; height: 100%; font-family: var(--font-body); background: var(--bg); color: var(--primary); }
    body { display: flex; flex-direction: column; }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 2rem;
      background: var(--secondary);
      color: var(--primary);
      font-family: var(--font-mono);
      font-size: 1.5rem;
      border-bottom: 1px solid var(--primary);
    }
    header select {
      padding: 0.5rem;
      background: var(--surface);
      color: var(--accent);
      border: none;
      font-family: var(--font-body);
      font-weight: 600;
    }
    header .status {
      padding: 0.5rem 1rem;
      background: var(--surface);
      color: var(--accent);
      border-radius: 4px;
      font-size: 0.9rem;
      font-weight: 600;
    }
    .container {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .chat-pane {
      width: 40%;
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--primary);
      background: var(--surface);
      color: var(--accent);
      font-family: var(--font-body);
    }
    .chat-log {
      flex: 1;
      padding: 1rem;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .chat-message {
      background: var(--bg);
      padding: 0.5rem 1rem;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
    }
    .chat-message .timestamp {
      font-size: 0.75rem;
      color: var(--secondary);
      margin-bottom: 0.25rem;
    }
    .chat-message .content {
      font-family: var(--font-mono);
      font-size: 1rem;
    }
    .chat-input {
      display: flex;
      padding: 0.5rem 1rem;
      background: var(--surface);
      border-top: 1px solid var(--primary);
    }
    .chat-input input {
      flex: 1;
      padding: 0.5rem;
      border: none;
      background: var(--bg);
      color: var(--primary);
      font-family: var(--font-body);
    }
    .chat-input button {
      padding: 0.5rem 1rem;
      background: var(--primary);
      color: var(--bg);
      border: none;
      font-family: var(--font-mono);
      font-weight: bold;
      margin-left: 0.5rem;
      cursor: pointer;
    }
    .panels {
      width: 60%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 1rem;
      padding: 1rem;
      background: var(--bg);
      color: var(--primary);
    }
    .panel {
      display: flex;
      flex-direction: column;
      background: var(--surface);
      color: var(--accent);
      border: 1px solid var(--primary);
      border-radius: 4px;
      overflow: hidden;
    }
    .panel-header {
      padding: 0.75rem;
      font-family: var(--font-mono);
      font-weight: bold;
      background: var(--secondary);
      color: var(--primary);
    }
    .panel-body {
      flex: 1;
      padding: 1rem;
      font-family: var(--font-body);
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      color: var(--accent);
    }
    .panel-body::before {
      content: '···— —··· ··—·';
      font-family: var(--font-mono);
      font-size: 1.2rem;
      opacity: 0.3;
    }
  </style>
</head>
<body>
  <header>
    <span>FOUR HORSEMEN</span>
    <div>
      <select>
        <option>Hormuz Protocol</option>
        <option>Stampede Alpha</option>
        <option>Cipher X</option>
      </select>
      <span class="status">idle</span>
    </div>
  </header>
  <div class="container">
    <div class="chat-pane">
      <div class="chat-log">
        <div class="chat-message">
          <div class="timestamp">09:22</div>
          <div class="content">/run-topic ···— —··· ··—·</div>
        </div>
        <div class="chat-message">
          <div class="timestamp">09:23</div>
          <div class="content">[system] Initiating thematic resonance: ··—· —··· ·—··</div>
        </div>
        <div class="chat-message">
          <div class="timestamp">09:24</div>
          <div class="content">/stampede ·—·· ···— ·—··</div>
        </div>
        <div class="chat-message">
          <div class="timestamp">09:25</div>
          <div class="content">[system] Stampede mode activated. ···— —··· ·—··</div>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="·—·· ···— —···">
        <button>→</button>
      </div>
    </div>
    <div class="panels">
      <div class="panel">
        <div class="panel-header">Preview</div>
        <div class="panel-body">···— —··· ·—··</div>
      </div>
      <div class="panel">
        <div class="panel-header">Paper</div>
        <div class="panel-body">··—· —··· ·—··</div>
      </div>
      <div class="panel">
        <div class="panel-header">Figma</div>
        <div class="panel-body">··—· ·—·· ·—··</div>
      </div>
      <div class="panel">
        <div class="panel-header">Canva</div>
        <div class="panel-body">—··· ·—·· ·—··</div>
      </div>
    </div>
  </div>
</body>
</html>