`mockups/096-gallery-wall-label.html`

193 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>gallery-wall-label — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Inter:wght@400;600&display=swap">
  <style>
    :root {
      --bg: #fdfaf3;
      --primary: #1a1a1a;
      --support: #ddd5c2;
      --support2: #666666;
      --support3: #3a3a3a;
      --chat-bg: #fdfaf3;
      --chat-border: #ddd5c2;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--primary);
      height: 900px;
      width: 1440px;
      display: flex;
      flex-direction: column;
      font-size: 16px;
      line-height: 1.5;
    }
    header {
      padding: 20px 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--support3);
      background: var(--bg);
    }
    header h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 24px;
      color: var(--primary);
    }
    .project-picker, .status {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
    }
    .project-picker {
      position: relative;
    }
    .project-picker select {
      padding: 6px 12px;
      border: 1px solid var(--support3);
      background: var(--bg);
      color: var(--primary);
      font-size: 14px;
      border-radius: 4px;
    }
    .status {
      padding-left: 16px;
      color: var(--support2);
    }
    .main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .left-pane {
      width: 40%;
      border-right: 1px solid var(--support3);
      display: flex;
      flex-direction: column;
    }
    .chat-log {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      background: var(--chat-bg);
      border-right: 1px solid var(--chat-border);
    }
    .chat-message {
      margin-bottom: 16px;
    }
    .chat-message.user {
      text-align: right;
    }
    .chat-message.bot {
      text-align: left;
    }
    .chat-message p {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--primary);
    }
    .chat-input {
      padding: 16px;
      border-top: 1px solid var(--support3);
      display: flex;
    }
    .chat-input input {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid var(--support3);
      background: var(--bg);
      color: var(--primary);
      font-size: 14px;
      border-radius: 4px;
    }
    .right-pane {
      width: 60%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 20px;
      padding: 20px;
    }
    .sub-panel {
      background: var(--bg);
      border: 1px solid var(--support3);
      padding: 20px;
      display: flex;
      flex-direction: column;
    }
    .sub-panel h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 18px;
      margin-bottom: 16px;
      color: var(--primary);
    }
    .sub-panel p {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--support2);
    }
  </style>
</head>
<body>
  <header>
    <h1>FOUR HORSEMEN</h1>
    <div>
      <div class="project-picker">
        <select>
          <option>Untitled, 1972</option>
          <option>Gift of the Canvas</option>
          <option>Oil on Linen</option>
        </select>
      </div>
      <div class="status">idle</div>
    </div>
  </header>
  <div class="main">
    <div class="left-pane">
      <div class="chat-log">
        <div class="chat-message user">
          <p>/run-topic: "The anatomy of a whisper"</p>
        </div>
        <div class="chat-message bot">
          <p>Topic initiated. Listening for tonal shifts in the void.</p>
        </div>
        <div class="chat-message user">
          <p>/stampede: "Bleeding edges"</p>
        </div>
        <div class="chat-message bot">
          <p>Stampede mode engaged. Expect chromatic aberration in the periphery.</p>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="Enter command or text..." />
      </div>
    </div>
    <div class="right-pane">
      <div class="sub-panel">
        <h2>Preview</h2>
        <p>A spectral residue lingers on the gallery wall—faint, almost imperceptible. The pigment seems to vibrate at a frequency just below the threshold of human perception.</p>
      </div>
      <div class="sub-panel">
        <h2>Paper</h2>
        <p>Sketches in charcoal and wax crayon, layered with translucent washes of ink. The paper itself is a relic, its fibers warped by decades of storage in a damp cellar.</p>
      </div>
      <div class="sub-panel">
        <h2>Figma</h2>
        <p>Artboard titled "Untitled, 1972" contains a single vector shape: a jagged line that refuses to close, suggesting an incomplete gesture or a deliberately unresolved form.</p>
      </div>
      <div class="sub-panel">
        <h2>Canva</h2>
        <p>Template titled "Oil on Canvas" features a background texture of cracked varnish, with placeholder text in a font that mimics the irregularity of brushstrokes.</p>
      </div>
    </div>
  </div>
</body>
</html>