`mockups/092-fortune-cookie.html`

184 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>fortune-cookie-slip — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Inter:wght@400;600&display=swap">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', sans-serif;
      color: #1a1a1a;
      background-color: #fdfaf3;
      height: 100%;
      width: 100%;
      overflow-x: hidden;
    }
    body {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 32px;
      background-color: #fff8e0;
      border-bottom: 1px solid #d4af37;
      font-family: 'Caveat', cursive;
      font-size: 24px;
    }
    header .status {
      font-size: 14px;
      color: #a83232;
      background-color: #fff8e0;
      padding: 4px 8px;
      border: 1px solid #d4af37;
      border-radius: 4px;
    }
    .container {
      display: flex;
      flex: 1;
    }
    .left-pane {
      width: 40%;
      border-right: 1px solid #d4af37;
      display: flex;
      flex-direction: column;
    }
    .chat-log {
      padding: 16px;
      overflow-y: auto;
      flex: 1;
      background-color: #fff8e0;
      border-right: 1px solid #d4af37;
    }
    .chat-message {
      margin-bottom: 12px;
    }
    .chat-message.user {
      text-align: right;
    }
    .chat-message.agent {
      text-align: left;
    }
    .chat-input {
      display: flex;
      padding: 16px;
      background-color: #fdfaf3;
      border-top: 1px solid #d4af37;
    }
    .chat-input input {
      flex: 1;
      padding: 8px;
      font-size: 14px;
      border: 1px solid #d4af37;
      border-radius: 4px 0 0 4px;
    }
    .chat-input button {
      padding: 8px 16px;
      background-color: #a83232;
      color: #fff8e0;
      border: none;
      border-radius: 0 4px 4px 0;
      font-weight: bold;
      cursor: pointer;
    }
    .right-pane {
      width: 60%;
      display: flex;
      flex-direction: column;
    }
    .sub-panels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      padding: 16px;
      flex: 1;
    }
    .sub-panel {
      background-color: #fff8e0;
      border: 1px solid #d4af37;
      border-radius: 4px;
      overflow: hidden;
    }
    .sub-panel-header {
      padding: 12px;
      background-color: #fdfaf3;
      font-weight: bold;
      border-bottom: 1px solid #d4af37;
      font-family: 'Caveat', cursive;
    }
    .sub-panel-body {
      padding: 12px;
      font-size: 14px;
      line-height: 1.5;
    }
    .sub-panel-body::before {
      content: "Your lucky number is ";
      color: #d4af37;
    }
    .sub-panel-body::after {
      content: " · Today's fortune: ";
      color: #a83232;
    }
  </style>
</head>
<body>
  <header>
    <span>Four Horsemen</span>
    <div>
      <select style="padding: 4px 8px; font-size: 14px; border: 1px solid #d4af37; border-radius: 4px; background-color: #fff8e0;">
        <option>Project Phoenix</option>
        <option>Project Dragon</option>
        <option>Project Oracle</option>
      </select>
      <span class="status">idle</span>
    </div>
  </header>
  <div class="container">
    <div class="left-pane">
      <div class="chat-log">
        <div class="chat-message user">
          <span>/run-topic "ancient prophecies"</span>
        </div>
        <div class="chat-message agent">
          Initiating topic: ancient prophecies. Your lucky number is 7. Learn Mandarin: 你好 (nǐ hǎo) means hello.
        </div>
        <div class="chat-message user">
          <span>/stampede</span>
        </div>
        <div class="chat-message agent">
          Stampede mode activated. Your lucky number is 3. Today's fortune: "The road to success is always under construction."
        </div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="Type a command or question..." />
        <button>Send</button>
      </div>
    </div>
    <div class="right-pane">
      <div class="sub-panels">
        <div class="sub-panel">
          <div class="sub-panel-header">Preview</div>
          <div class="sub-panel-body">The ink is still wet on this parchment. Today's fortune: "A journey of a thousand miles begins with a single step." Learn Mandarin: 一步一步 (yī bù yī bù) – step by step.</div>
        </div>
        <div class="sub-panel">
          <div class="sub-panel-header">Paper</div>
          <div class="sub-panel-body">Sketches whisper secrets. Today's fortune: "The future is not set; it is written by those who dare to write it." Learn Mandarin: 未来 (wèilái) – future.</div>
        </div>
        <div class="sub-panel">
          <div class="sub-panel-header">Figma</div>
          <div class="sub-panel-body">Designs are in flux. Today's fortune: "The best way to predict the future is to create it." Learn Mandarin: 创造 (chuàngzào) – create.</div>
        </div>
        <div class="sub-panel">
          <div class="sub-panel-header">Canva</div>
          <div class="sub-panel-body">Visuals are beckoning. Today's fortune: "A smooth sea never made a skilled sailor." Learn Mandarin: 平静的海 (píngjìng de hǎi) – calm sea.</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>