`mockups/070-lawyer-shingle.html`

200 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>lawyer-brass-shingle — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Inter:wght@400;600&display=swap">
  <style>
    :root {
      --bg: #0a0a0a;
      --primary: #d4af37;
      --secondary: #fdfaf3;
      --text: #666666;
      --dark: #1a1a1a;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Inter', sans-serif;
      color: var(--text);
      background: var(--bg);
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: 100vw;
      overflow: hidden;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 2rem;
      background: linear-gradient(90deg, var(--primary) 0%, var(--dark) 100%);
      color: var(--bg);
      font-family: 'Cinzel', serif;
      font-size: 1.8rem;
      position: relative;
      z-index: 1;
    }
    header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--primary);
    }
    .project-picker {
      position: relative;
    }
    .project-picker select {
      background: var(--dark);
      color: var(--primary);
      border: 1px solid var(--primary);
      padding: 0.5rem 1rem;
      font-size: 1rem;
      border-radius: 4px;
      appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23d4af37' d='M0 0L10 0L5 6z'/></svg>");
      background-repeat: no-repeat;
      background-position: right 0.5rem center;
    }
    .status {
      font-size: 0.9rem;
      padding: 0.3rem 0.8rem;
      border: 1px solid var(--primary);
      border-radius: 4px;
      background: var(--dark);
      color: var(--primary);
    }
    main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .chat-pane {
      width: 40%;
      background: var(--dark);
      display: flex;
      flex-direction: column;
      padding: 1rem;
      overflow-y: auto;
    }
    .chat-log {
      flex: 1;
      overflow-y: auto;
      margin-bottom: 1rem;
    }
    .message {
      margin-bottom: 1rem;
    }
    .message.user {
      color: var(--primary);
    }
    .message.system {
      color: var(--text);
    }
    .input-bar {
      display: flex;
      gap: 0.5rem;
      input {
        flex: 1;
        padding: 0.5rem;
        border: 1px solid var(--primary);
        border-radius: 4px;
        background: var(--dark);
        color: var(--primary);
      }
      button {
        background: var(--primary);
        color: var(--bg);
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        cursor: pointer;
      }
    }
    .right-pane {
      width: 60%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 1rem;
      padding: 1rem;
      background: var(--secondary);
    }
    .panel {
      background: var(--dark);
      border: 1px solid var(--primary);
      border-radius: 4px;
      padding: 1rem;
      display: flex;
      flex-direction: column;
    }
    .panel-header {
      font-family: 'Cinzel', serif;
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
      color: var(--primary);
    }
    .panel-body {
      font-size: 0.9rem;
      line-height: 1.4;
      color: var(--text);
    }
    .panel-body code {
      color: var(--primary);
    }
  </style>
</head>
<body>
  <header>
    <span>FOUR HORSEMEN STUDIO</span>
    <div class="project-picker">
      <select>
        <option>Brass & Buckle Initiative</option>
        <option>The Gavel & Gauge</option>
        <option>Shingle & Scale</option>
      </select>
    </div>
    <div class="status">idle</div>
  </header>
  <main>
    <div class="chat-pane">
      <div class="chat-log">
        <div class="message system">[1898-03-15 14:22] System: Ready for instruction.</div>
        <div class="message user">/run-topic "The Brass Brief"</div>
        <div class="message system">[1898-03-15 14:23] System: Topic 'The Brass Brief' initiated. Generating legal document framework.</div>
        <div class="message user">/stampede 3</div>
        <div class="message system">[1898-03-15 14:24] System: Stampede mode engaged. Producing three variant design iterations for review.</div>
      </div>
      <div class="input-bar">
        <input type="text" placeholder="Enter command or message...">
        <button>Send</button>
      </div>
    </div>
    <div class="right-pane">
      <div class="panel">
        <div class="panel-header">Preview</div>
        <div class="panel-body">Current design iteration: "The Brass Brief" — awaiting client review. Last revision: 1898-03-15T14:23Z. Status: pending.</div>
      </div>
      <div class="panel">
        <div class="panel-header">Paper</div>
        <div class="panel-body">Legal document template v3.2 — last reviewed 1898-02-14. Contains 12 sections, 3 appendices. Requires notarization for final execution.</div>
      </div>
      <div class="panel">
        <div class="panel-header">Figma</div>
        <div class="panel-body">Design file "Brass_Brief_v3" open in Figma. Last sync: 1898-03-15 14:22. Contains 4 artboards, 3 components. Exported as PDF: /assets/brassbrief.pdf</div>
      </div>
      <div class="panel">
        <div class="panel-header">Canva</div>
        <div class="panel-body">Canva template "Lawyer's Brass" active. Last edited: 1898-03-15 14:20. Contains 5 placeholder images, 2 text layers. Export options: PNG, PDF, SVG.</div>
      </div>
    </div>
  </main>
</body>
</html>