`mockups/089-minimalist-spa.html`

198 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>minimalist-spa — Four Horsemen Studio</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Inter:wght@400;600&display=swap">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: #fbf6e9;
      color: #1a1a1a;
      font-family: 'Inter', sans-serif;
      height: 900px;
      width: 1440px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }
    header {
      height: 60px;
      background: #fff8e7;
      display: flex;
      align-items: center;
      padding: 0 24px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      position: relative;
    }
    header select {
      margin-left: auto;
      padding: 8px 12px;
      border: 1px solid #dba673;
      background: #fff8e7;
      color: #1a1a1a;
      font-family: 'Inter', sans-serif;
      font-size: 0.9rem;
    }
    header .status {
      position: absolute;
      right: 24px;
      padding: 4px 8px;
      background: #3a4a2c;
      color: #fff8e7;
      border-radius: 4px;
      font-size: 0.85rem;
    }
    main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .chat-pane {
      width: 40%;
      border-right: 1px solid #dba673;
      display: flex;
      flex-direction: column;
    }
    .chat-log {
      flex: 1;
      padding: 24px;
      overflow-y: auto;
      background: #fff8e7;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .chat-message {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .chat-message.user {
      align-self: flex-end;
    }
    .chat-message.system {
      align-self: flex-start;
    }
    .chat-message .text {
      background: #fff8e7;
      padding: 12px 16px;
      border: 1px solid #dba673;
      border-radius: 8px;
      max-width: 70%;
      font-size: 0.95rem;
    }
    .chat-input {
      padding: 12px 24px;
      display: flex;
      gap: 8px;
      background: #fbf6e9;
      border-top: 1px solid #dba673;
    }
    .chat-input input {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #dba673;
      border-radius: 4px;
      font-size: 0.95rem;
    }
    .chat-input button {
      padding: 8px 16px;
      background: #3a4a2c;
      color: #fff8e7;
      border: none;
      border-radius: 4px;
      font-size: 0.9rem;
      cursor: pointer;
    }
    .panels {
      width: 60%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 24px;
      padding: 24px;
    }
    .panel {
      background: #fff8e7;
      border: 1px solid #dba673;
      border-radius: 8px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .panel h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      color: #3a4a2c;
    }
    .panel .content {
      font-size: 0.95rem;
      line-height: 1.6;
      color: #1a1a1a;
    }
  </style>
</head>
<body>
  <header>
    <span>FOUR HORSEMEN</span>
    <select>
      <option>Project Alchemy</option>
      <option>Project Hymn</option>
      <option>Project Loom</option>
    </select>
    <div class="status">idle</div>
  </header>
  <main>
    <div class="chat-pane">
      <div class="chat-log">
        <div class="chat-message user">
          <div class="text">/run-topic "ancient rituals"</div>
        </div>
        <div class="chat-message system">
          <div class="text">Initializing ritual sequence... glyphs aligning to the cardinal axes.</div>
        </div>
        <div class="chat-message user">
          <div class="text">/stampede "neon geometry"</div>
        </div>
        <div class="chat-message system">
          <div class="text">Stampede engaged. Shapes are fracturing into prismatic shards.</div>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="type a command...">
        <button>→</button>
      </div>
    </div>
    <div class="panels">
      <div class="panel">
        <h2>Preview</h2>
        <div class="content">
          The canvas breathes in the rhythm of the unseen, each stroke a whisper of intention. A single line curves like a question, unresolved.
        </div>
      </div>
      <div class="panel">
        <h2>Paper</h2>
        <div class="content">
          Ink flows where the mind pauses, tracing the contours of forgotten knowledge. Margins are sacred, left untouched by the chaos of thought.
        </div>
      </div>
      <div class="panel">
        <h2>Figma</h2>
        <div class="content">
          Layers unfold like petals, revealing the skeleton of the design. Each component is a silent prayer, waiting for the hand that will shape it.
        </div>
      </div>
      <div class="panel">
        <h2>Canva</h2>
        <div class="content">
          Templates dissolve, leaving only the essence of the concept. A grid of possibilities hums with potential, awaiting the spark of inspiration.
        </div>
      </div>
    </div>
  </main>
</body>
</html>