`mockups/071-doctor-prescription.html`

204 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>doctor-prescription-pad — Four Horsemen Studio</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=IBM+Plex+Sans:wght@400;600&display=swap">
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: 'IBM Plex Sans', sans-serif;
      background: #fdfaf0;
      color: #1a1a1a;
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: 100vw;
      overflow: hidden;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 32px;
      background: #fdfaf0;
      border-bottom: 1px solid #3a3a3a;
      font-size: 1.25rem;
      font-family: 'Caveat', cursive;
    }
    header h1 {
      margin: 0;
      font-weight: 700;
      color: #0e2a47;
    }
    .project-picker {
      padding: 6px 12px;
      background: #fdfaf0;
      border: 1px solid #3a3a3a;
      border-radius: 4px;
      color: #1a1a1a;
      font-size: 0.9rem;
    }
    .status-pill {
      padding: 4px 12px;
      border-radius: 20px;
      background: #a83232;
      color: #fdfaf0;
      font-size: 0.85rem;
    }
    main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .chat-pane {
      width: 40%;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #3a3a3a;
      background: #fdfaf0;
      overflow: hidden;
    }
    .chat-log {
      flex: 1;
      padding: 24px;
      overflow-y: auto;
      background: #fdfaf0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .chat-message {
      background: #fdfaf0;
      border: 1px solid #3a3a3a;
      padding: 12px 16px;
      border-radius: 6px;
      font-size: 0.95rem;
      line-height: 1.3;
    }
    .chat-input {
      padding: 16px;
      background: #fdfaf0;
      border-top: 1px solid #3a3a3a;
    }
    .chat-input input {
      width: 100%;
      padding: 10px 12px;
      font-size: 1rem;
      border: 1px solid #3a3a3a;
      border-radius: 6px;
      color: #1a1a1a;
    }
    .panels {
      width: 60%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      padding: 24px;
      background: #fdfaf0;
    }
    .panel {
      background: #fdfaf0;
      border: 1px solid #3a3a3a;
      border-radius: 6px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .panel h2 {
      font-family: 'Caveat', cursive;
      font-size: 1.25rem;
      color: #0e2a47;
      margin: 0 0 12px 0;
    }
    .panel-content {
      font-size: 0.95rem;
      color: #1a1a1a;
      line-height: 1.4;
    }
    .panel-content code {
      color: #a83232;
      font-family: monospace;
    }
    @media (max-width: 1024px) {
      main { flex-direction: column; }
      .chat-pane { width: 100%; border-right: none; }
      .panels { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <header>
    <h1>FOUR HORSEMEN RX</h1>
    <div>
      <select class="project-picker">
        <option>Project HORMUZ</option>
        <option>Project BAZAR</option>
        <option>Project SANGRA</option>
      </select>
      <span class="status-pill">idle</span>
    </div>
  </header>
  <main>
    <div class="chat-pane">
      <div class="chat-log">
        <div class="chat-message"><span class="user">Agent:</span> Initiating protocol /run-topic: "Surgical Scalpel Precision"</div>
        <div class="chat-message"><span class="user">User:</span> Confirming topic parameters...</div>
        <div class="chat-message"><span class="user">Agent:</span> Topic initialized. Proceeding with /stampede: 3 iterations, 2x speed</div>
        <div class="chat-message"><span class="user">User:</span> Acknowledged. Refill x3 on topic "Neonatal Care Protocols"</div>
      </div>
      <div class="chat-input">
        <input type="text" placeholder="Type /run-topic or /stampede...">
      </div>
    </div>
    <div class="panels">
      <div class="panel">
        <h2>Preview</h2>
        <div class="panel-content">
          <p><strong>Sig:</strong> q.d. (daily), 1 tablet by mouth with food.</p>
          <p><strong>Refill:</strong> x3, 30 days supply.</p>
          <p><strong>Warning:</strong> May cause temporary hallucination of design patterns. Consult UX specialist if persisting beyond 72 hours.</p>
        </div>
      </div>
      <div class="panel">
        <h2>Paper</h2>
        <div class="panel-content">
          <p>Prescription Pad UX:</p>
          <ul>
            <li>Margin: 1.5cm on all sides</li>
            <li>Font: IBM Plex Sans 12pt</li>
            <li>Watermark: "DO NOT FOLD"</li>
            <li>Staple location: top-right corner</li>
          </ul>
        </div>
      </div>
      <div class="panel">
        <h2>Figma</h2>
        <div class="panel-content">
          <p>Design System:</p>
          <ul>
            <li>Color: #0e2a47 (primary), #a83232 (alert)</li>
            <li>Typography: Caveat for headings, IBM Plex Sans for body</li>
            <li>Components: 32px margin, 8px corner radius</li>
            <li>Icon set: Rx, stampede, refill</li>
          </ul>
        </div>
      </div>
      <div class="panel">
        <h2>Canva</h2>
        <div class="panel-content">
          <p>Mockup Template:</p>
          <ul>
            <li>Background: parchment texture</li>
            <li>Frame: 8.5" x 11" with 0.5" bleed</li>
            <li>Elements: handwritten notes, prescription icon, dosage chart</li>
            <li>Text alignment: left-justified with hanging indent</li>
          </ul>
        </div>
      </div>
    </div>
  </main>
</body>
</html>