`mockups/085-horology-galaxy.html`

212 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>moon-phase-watch — 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: #0a0a14;
      --primary: #d4af37;
      --accent1: #a4c5e8;
      --accent2: #fdfaf0;
      --text: #fdfaf0;
      --border: #1a1a1a;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); }
    body { display: flex; flex-direction: column; }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 48px;
      background: var(--accent2);
      border-bottom: 1px solid var(--border);
      font-family: 'Cormorant Garamond', serif;
      font-size: 24px;
      letter-spacing: 1px;
    }
    header .brand { font-weight: 700; }
    header .dropdown {
      padding: 8px 16px;
      background: var(--primary);
      border-radius: 4px;
      color: var(--bg);
      font-size: 14px;
    }
    header .status {
      padding: 8px 16px;
      background: var(--accent1);
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
    }
    main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .left-pane {
      width: 40%;
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--border);
      overflow: hidden;
    }
    .chat-log {
      flex: 1;
      padding: 24px;
      overflow-y: auto;
      background: var(--accent2);
      border-right: 1px solid var(--border);
    }
    .chat-message {
      margin: 16px 0;
      display: flex;
      flex-direction: column;
    }
    .chat-message.user {
      align-self: flex-end;
    }
    .chat-message .text {
      background: var(--primary);
      color: var(--bg);
      padding: 12px 16px;
      border-radius: 8px;
      max-width: 70%;
      font-size: 14px;
    }
    .chat-message .timestamp {
      font-size: 10px;
      color: var(--accent1);
      margin-top: 4px;
      text-align: right;
    }
    .chat-input {
      display: flex;
      padding: 16px 24px;
      background: var(--accent2);
      border-top: 1px solid var(--border);
    }
    .chat-input input {
      flex: 1;
      padding: 8px 12px;
      border: none;
      border-radius: 4px;
      font-size: 14px;
    }
    .chat-input button {
      margin-left: 12px;
      padding: 8px 16px;
      background: var(--primary);
      color: var(--bg);
      border: none;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
    }
    .right-pane {
      width: 60%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 24px;
      padding: 24px;
      overflow-y: auto;
    }
    .panel {
      background: var(--accent2);
      border: 1px solid var(--border);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      padding: 24px;
    }
    .panel-header {
      font-family: 'Cormorant Garamond', serif;
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 16px;
      color: var(--primary);
    }
    .panel-content {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text);
    }
    .panel-content code {
      color: var(--primary);
    }
  </style>
</head>
<body>
  <header>
    <div class="brand">Four Horsemen</div>
    <div>
      <div class="dropdown">Project: <span>Horizon Alignment</span></div>
      <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 temporal alignment</div>
          <div class="timestamp">22:47</div>
        </div>
        <div class="chat-message">
          <div class="text">Initializing perpetual cycle: lunar phase 3.14</div>
          <div class="timestamp">22:48</div>
        </div>
        <div class="chat-message user">
          <div class="text">/stampede 5</div>
          <div class="timestamp">22:50</div>
        </div>
        <div class="chat-message">
          <div class="text">Engaging 5-axis temporal compression. Expected completion: 03:14</div>
          <div class="timestamp">22:51</div>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="chronological command">
        <button>→</button>
      </div>
    </div>
    <div class="right-pane">
      <div class="panel">
        <div class="panel-header">Preview</div>
        <div class="panel-content">
          <p>Current temporal alignment: <code>3.14</code> of lunar cycle</p>
          <p>Visual syntax: <code>perpetual</code> mode active</p>
          <p>Next phase: <code>23:14</code> (GMT+0)</p>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Paper</div>
        <div class="panel-content">
          <p>Sketching the equation of time: <code>1728</code> iterations complete</p>
          <p>Margin notes: <code>leap-year</code> correction applied</p>
          <p>Current focus: <code>horizon</code> convergence</p>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Figma</div>
        <div class="panel-content">
          <p>Figuring the matrix: <code>8</code> layers of temporal depth</p>
          <p>Component: <code>moon-phase-watch</code> v1.0.3</p>
          <p>Constraints: <code>1440x900</code> viewport lock</p>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Canva</div>
        <div class="panel-content">
          <p>Lattice composition: <code>12</code> nodes active</p>
          <p>Current theme: <code>equation-of-time</code></p>
          <p>Alignment: <code>perpetual</code> (no end)</p>
        </div>
      </div>
    </div>
  </main>
</body>
</html>