`mockups/084-lock-key-cutter.html`

177 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>locksmith-shop — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=IBM+Plex+Mono&display=swap">
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: 'IBM Plex Mono', monospace;
      background-color: #1a1a1a;
      color: #fdfaf0;
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    header {
      display: flex;
      align-items: center;
      padding: 1rem 2rem;
      background-color: #0a0a0a;
      border-bottom: 1px solid #666666;
      font-family: 'Special Elite', cursive;
      font-size: 1.5rem;
      color: #d4af37;
    }
    header select {
      margin-left: auto;
      padding: 0.5rem 1rem;
      background-color: #0a0a0a;
      border: 1px solid #666666;
      color: #fdfaf0;
      font-family: 'IBM Plex Mono', monospace;
    }
    header .status {
      margin-left: 1rem;
      padding: 0.3rem 0.8rem;
      background-color: #333333;
      border: 1px solid #666666;
      color: #d4af37;
      font-size: 0.8rem;
      border-radius: 4px;
    }
    .container {
      display: flex;
      flex: 1;
    }
    .chat-pane {
      width: 40%;
      border-right: 1px solid #666666;
      overflow-y: auto;
      padding: 1rem;
      background-color: #0a0a0a;
    }
    .chat-log {
      max-height: 80vh;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .message {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .message.user {
      align-self: flex-end;
    }
    .message.system {
      align-self: flex-start;
    }
    .message .sender {
      font-weight: bold;
      color: #d4af37;
    }
    .chat-input {
      margin-top: 1rem;
      display: flex;
    }
    .chat-input input {
      flex: 1;
      padding: 0.5rem;
      background-color: #0a0a0a;
      border: 1px solid #666666;
      color: #fdfaf0;
      font-family: 'IBM Plex Mono', monospace;
    }
    .chat-input button {
      padding: 0.5rem 1rem;
      background-color: #d4af37;
      color: #0a0a0a;
      border: none;
      font-family: 'IBM Plex Mono', monospace;
      cursor: pointer;
    }
    .panels {
      width: 60%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      padding: 1rem;
    }
    .panel {
      background-color: #0a0a0a;
      border: 1px solid #666666;
      padding: 1rem;
    }
    .panel h2 {
      font-family: 'Special Elite', cursive;
      color: #d4af37;
      margin-top: 0;
    }
    .panel p {
      color: #666666;
      font-size: 0.9rem;
      margin: 0.5rem 0 0;
    }
  </style>
</head>
<body>
  <header>
    <span>FOUR HORSEMEN</span>
    <select>
      <option>Project Blacksmith</option>
      <option>Vault Protocol</option>
      <option>Keymaster Initiative</option>
    </select>
    <span class="status">idle</span>
  </header>
  <div class="container">
    <div class="chat-pane">
      <div class="chat-log">
        <div class="message user">
          <div class="sender">USER</div>
          <div>/run-topic "Tumbler Engraving"</div>
        </div>
        <div class="message system">
          <div class="sender">SYSTEM</div>
          <div>Topic initiated. Engraving tumbler 3. Progress: 42%.</div>
        </div>
        <div class="message user">
          <div class="sender">USER</div>
          <div>/stampede "Vault 7"</div>
        </div>
        <div class="message system">
          <div class="sender">SYSTEM</div>
          <div>Stampede mode engaged. Target: Vault 7. Status: Active.</div>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="> /command">
        <button>SEND</button>
      </div>
    </div>
    <div class="panels">
      <div class="panel">
        <h2>Preview</h2>
        <p>Current schematic: Tumbler alignment matrix. Status: Unlocked. Layer: 'Handle' (active).</p>
      </div>
      <div class="panel">
        <h2>Paper</h2>
        <p>Blueprints for the Iron Vault. Revision 7. Note: Handle curvature adjusted. Stamp: 'HORMUZ'</p>
      </div>
      <div class="panel">
        <h2>Figma</h2>
        <p>UI mockup: Master key interface. Layer: 'Handle' (locked). Component: 'Combination Lock' (v2).</p>
      </div>
      <div class="panel">
        <h2>Canva</h2>
        <p>Mockup: Combination lock tutorial. Background: Brass texture. Text: "Turn clockwise 3 times."</p>
      </div>
    </div>
  </div>
</body>
</html>