`mockups/075-prayer-beads.html`

176 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>prayer-beads-stack — 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>
    html, body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', sans-serif;
      background-color: #fdfaf3;
      color: #1a1a1a;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    header {
      background-color: #3a4a2c;
      color: #fdfaf3;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
    }
    header select {
      background-color: #7a1f1a;
      color: #fdfaf3;
      border: none;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      border-radius: 4px;
      margin-left: 1rem;
    }
    header .status {
      background-color: #d4af37;
      padding: 0.3rem 0.8rem;
      border-radius: 4px;
      font-size: 0.9rem;
    }
    main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .chat-pane {
      width: 40%;
      background-color: #fdfaf3;
      border-right: 1px solid #1a1a1a;
      display: flex;
      flex-direction: column;
    }
    .chat-log {
      padding: 1rem;
      overflow-y: auto;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }
    .chat-message {
      background-color: #1a1a1a;
      color: #fdfaf3;
      padding: 0.8rem 1rem;
      border-radius: 6px;
      max-width: 80%;
    }
    .chat-input {
      padding: 1rem;
      display: flex;
      gap: 0.5rem;
    }
    .chat-input input {
      flex: 1;
      padding: 0.6rem;
      font-size: 1rem;
      border: 2px solid #7a1f1a;
      border-radius: 4px;
    }
    .chat-input button {
      background-color: #d4af37;
      color: #1a1a1a;
      border: none;
      padding: 0.6rem 1rem;
      border-radius: 4px;
      font-weight: bold;
    }
    .panels {
      width: 60%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 1.5rem;
      padding: 1.5rem;
    }
    .panel {
      background-color: #1a1a1a;
      color: #fdfaf3;
      border: 2px solid #7a1f1a;
      border-radius: 6px;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .panel h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      color: #d4af37;
      margin: 0 0 0.5rem 0;
    }
    .panel p {
      font-size: 0.95rem;
      line-height: 1.4;
    }
    .panel::before {
      content: "•";
      color: #3a4a2c;
      font-size: 1.5rem;
      margin-right: 0.8rem;
    }
    @media (max-width: 1440px) {
      .panels {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <header>
    <span>FOUR HORSEMEN STUDIO</span>
    <div>
      <select>
        <option>Project HADES</option>
        <option>Project SHIVA</option>
        <option>Project AZRAEL</option>
      </select>
      <span class="status">idle</span>
    </div>
  </header>
  <main>
    <div class="chat-pane">
      <div class="chat-log">
        <div class="chat-message">/run-topic "The silent calculus of shadows"</div>
        <div class="chat-message">[system] Initiating topic: The silent calculus of shadows. Threads: 3. Depth: 7.</div>
        <div class="chat-message">/stampede "unravel the thread"</div>
        <div class="chat-message">[system] Stampede mode engaged. All threads now bleeding into the void. May the void be kind.</div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="whisper a command...">
        <button>SEND</button>
      </div>
    </div>
    <div class="panels">
      <div class="panel">
        <h2>Preview</h2>
        <p>A canvas of void and light, where the edges of thought fray and dissolve. The unseen architecture of the prayer-beads-stack hums beneath the surface, waiting for the right incantation to reveal its form.</p>
      </div>
      <div class="panel">
        <h2>Paper</h2>
        <p>Scratched parchment and ink that bleeds through the fibers. Notes in the margin: "The first bead is always the hardest. The last is always the same." A charcoal sketch of a figure kneeling in the dark.</p>
      </div>
      <div class="panel">
        <h2>Figma</h2>
        <p>Wireframes of a labyrinth, each corridor leading to a door that opens only to another corridor. Components labeled "prayer," "bead," "stack," and "void" interlock with a quiet violence.</p>
      </div>
      <div class="panel">
        <h2>Canva</h2>
        <p>Templates for the unworthy. A gradient from #1a1a1a to #fdfaf3, with a single bead-shaped icon in the center. Text overlay: "Design is the art of making the invisible visible."</p>
      </div>
    </div>
  </main>
</body>
</html>