`mockups/062-tattoo-flash.html`

101 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tattoo-flash-sheet — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Limelight&family=Inter&display=swap">
  <style>
    * { box-sizing: border-box; }
    html, body { margin:0; padding:0; font-family: 'Inter', sans-serif; background: #fbf6e9; color: #1a1a1a; height: 100%; }
    body { display: flex; flex-direction: column; }
    header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: #1a1a1a; color: #fcd13e; font-family: 'Limelight', cursive; font-size: 24px; }
    header .status { padding: 8px 16px; background: #a83232; border-radius: 4px; color: #fff; }
    .container { display: flex; flex:1; overflow: hidden; }
    .left-pane { width: 40%; border-right: 1px solid #0e2a47; padding: 24px; overflow-y: auto; }
    .chat-log { display: flex; flex-direction: column; gap: 12px; }
    .message { padding: 12px 16px; background: #0e2a47; border-radius: 4px; color: #fff; }
    .message.user { background: #a83232; }
    .chat-input { margin-top: 24px; display: flex; }
    .chat-input input { flex:1; padding: 12px; font-size: 14px; }
    .chat-input button { padding: 12px 24px; background: #fcd13e; color: #1a1a1a; border: none; border-radius: 4px; }
    .right-pane { width: 60%; display: flex; flex-direction: column; }
    .sub-panels { flex:1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; }
    .panel { background: #1a1a1a; color: #fcd13e; padding: 24px; border: 2px solid #a83232; border-radius: 8px; }
    .panel h3 { margin:0 0 16px; font-family: 'Limelight', cursive; font-size: 18px; }
    .panel-content { font-size: 14px; line-height: 1.5; }
    .panel-content code { color: #fcd13e; }
    .project-picker { position: relative; }
    .project-picker select { padding: 8px 32px 8px 12px; background: #0e2a47; color: #fff; border: none; border-radius: 4px; }
    .project-picker::after { content: '▼'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #fcd13e; }
  </style>
</head>
<body>
  <header>
    <div>FOUR HORSEMEN STUDIO</div>
    <div class="project-picker">
      <select>
        <option>Ironclad Ink</option>
        <option>Shadow Veil</option>
        <option>Razor's Edge</option>
      </select>
    </div>
    <div class="status">IDLE</div>
  </header>
  <div class="container">
    <div class="left-pane">
      <div class="chat-log">
        <div class="message user">/run-topic: Blood and Thunder</div>
        <div class="message">AGENT: <span style="color:#fcd13e;">STAMPING</span> VORTEX OF BLOOD ON A <span style="color:#a83232;">SKULL</span> — 30% DONE</div>
        <div class="message user">/stampede: RAZORED WINGS</div>
        <div class="message">AGENT: <span style="color:#fcd13e;">STAMPED</span> 12 VAMPIRE WINGS IN <span style="color:#0e2a47;">INK</span> — 100% DONE</div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="Type /help for commands">
        <button>SEND</button>
      </div>
    </div>
    <div class="right-pane">
      <div class="sub-panels">
        <div class="panel">
          <h3>PREVIEW</h3>
          <div class="panel-content">
            <div style="position: relative; width: 100%; height: 150px; background: #0e2a47; border: 2px dashed #fcd13e; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: 'Limelight', cursive; font-size: 24px; color: #a83232;">TATTOO DRAFT</div>
          </div>
        </div>
        <div class="panel">
          <h3>PAPER</h3>
          <div class="panel-content">
            <pre style="background: #0e2a47; padding: 12px; border-radius: 4px; font-size: 12px; line-height: 1.2; color: #fcd13e;">
// SCRAPE FROM THE DEPTHS
// BLOOD: #a83232
// SKIN: #fbf6e9
// INK: #0e2a47
            </pre>
          </div>
        </div>
        <div class="panel">
          <h3>FIGMA</h3>
          <div class="panel-content">
            <div style="display: flex; align-items: center; justify-content: center; height: 150px; background: #0e2a47; border: 2px dashed #fcd13e; border-radius: 4px;">
              <svg width="100" height="100" viewBox="0 0 100 100" style="fill: #fcd13e;">
                <circle cx="50" cy="50" r="40" />
                <path d="M 50 10 L 90 50 L 50 90 L 10 50 Z" />
              </svg>
            </div>
          </div>
        </div>
        <div class="panel">
          <h3>CANVA</h3>
          <div class="panel-content">
            <div style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; height: 150px; background: #0e2a47; border: 2px dashed #fcd13e; border-radius: 4px;">
              <div style="flex:1 1 45px; padding: 8px; background: #a83232; color: #fff; text-align: center; font-size: 12px;">BLOOD</div>
              <div style="flex:1 1 45px; padding: 8px; background: #fcd13e; color: #0e2a47; text-align: center; font-size: 12px;">INK</div>
              <div style="flex:1 1 45px; padding: 8px; background: #0e2a47; color: #fcd13e; text-align: center; font-size: 12px;">SKIN</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>