`mockups/013-orchard-record.html`

209 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>orchard-record-book — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Manrope:wght@400;700&display=swap">
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 0;
      font-family: 'Manrope', sans-serif;
      background-color: #fbf6e9;
      color: #3a4a2c;
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: 100vw;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 2rem;
      background-color: #ffffff;
      border-bottom: 1px solid #9b7a3e;
      font-family: 'Lora', serif;
      font-size: 1.5rem;
      letter-spacing: 0.05em;
    }
    header .brand {
      font-weight: 700;
    }
    header .project-picker {
      padding: 0.5rem 1rem;
      background-color: #fbf6e9;
      border: 1px solid #9b7a3e;
      border-radius: 4px;
      color: #3a4a2c;
      font-size: 0.9rem;
    }
    header .status {
      padding: 0.4rem 0.8rem;
      background-color: #fbf6e9;
      border: 1px solid #5e3023;
      color: #5e3023;
      font-size: 0.85rem;
      border-radius: 4px;
    }
    main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .left-pane {
      width: 40%;
      display: flex;
      flex-direction: column;
      background-color: #ffffff;
      border-right: 1px solid #9b7a3e;
      overflow: hidden;
    }
    .chat-log {
      flex: 1;
      padding: 1rem;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }
    .chat-message {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
    .chat-message.user {
      align-self: flex-end;
    }
    .chat-message.system {
      align-self: flex-start;
    }
    .chat-message .text {
      background-color: #fbf6e9;
      padding: 0.6rem 1rem;
      border-radius: 8px;
      max-width: 70%;
    }
    .chat-input {
      display: flex;
      padding: 0.8rem;
      border-top: 1px solid #9b7a3e;
    }
    .chat-input input {
      flex: 1;
      padding: 0.6rem;
      font-size: 0.95rem;
      border: none;
      outline: none;
      background-color: #fbf6e9;
      color: #3a4a2c;
      border-radius: 4px;
    }
    .right-pane {
      width: 60%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 1rem;
      padding: 1rem;
    }
    .panel {
      background-color: #ffffff;
      border: 1px solid #9b7a3e;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
    }
    .panel-header {
      padding: 1rem;
      font-family: 'Lora', serif;
      font-size: 1.2rem;
      font-weight: 700;
      color: #5e3023;
      background-color: #fbf6e9;
      border-bottom: 1px solid #9b7a3e;
    }
    .panel-body {
      flex: 1;
      padding: 1rem;
      font-size: 0.95rem;
      line-height: 1.4;
      color: #3a4a2c;
    }
    .panel-body::before {
      content: " ";
      display: block;
      height: 20px;
      background: repeating-linear-gradient(
        to right,
        #fbf6e9,
        #fbf6e9 10px,
        #ffffff 10px,
        #ffffff 20px
      );
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <header>
    <div class="brand">Four Horsemen Studio</div>
    <div>
      <select class="project-picker">
        <option>Hormuz Harvest 2023</option>
        <option>Black Earth Blend</option>
        <option>Golden Root Initiative</option>
      </select>
      <div class="status">idle</div>
    </div>
  </header>
  <main>
    <div class="left-pane">
      <div class="chat-log">
        <div class="chat-message user">
          <div class="text">/run-topic: 'Aging techniques for chestnut tannins'</div>
        </div>
        <div class="chat-message system">
          <div class="text">Topic initiated. Monitoring oak barrel interactions with chestnut husk extracts. Patience is the first ingredient.</div>
        </div>
        <div class="chat-message user">
          <div class="text">/stampede: 'Generate 500 variations of the 2023 harvest label'</div>
        </div>
        <div class="chat-message system">
          <div class="text">Stampede engaged. 500 iterations of inked paper, pressed leaves, and wax seals in progress. Expect a parchment avalanche by dawn.</div>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="Type a command or note...">
      </div>
    </div>
    <div class="right-pane">
      <div class="panel">
        <div class="panel-header">Preview</div>
        <div class="panel-body">
          A mockup of the 2023 harvest journal, inked with walnut and iron gall. The pages whisper of sun-dried apples and the first frost.
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Paper</div>
        <div class="panel-body">
          Hand-pressed leaves from the 2023 vintage, inked with iron gall. Awaiting the first impressions. The fibers hold the scent of rain-soaked earth.
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Figma</div>
        <div class="panel-body">
          Mockups of the 2023 harvest journal, inked in walnut and iron gall. Layers awaiting the first cut. The design is a slow ripening of ideas.
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Canva</div>
        <div class="panel-body">
          Digital sketches of pressed leaves and wax seals. The colors are extracted from the last batch of elderberry syrup. Awaiting the final brushstroke.
        </div>
      </div>
    </div>
  </main>
</body>
</html>