Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Mini Minder — GenUI Mockups</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <style> | |
| /* ---- Design System Tokens ---- */ | |
| :root { | |
| --bg: #2c2c2c; | |
| --primary: #e4e4e4; | |
| --secondary: #b0b0b0; | |
| --muted: #808080; | |
| --inverse: #1a1a1a; | |
| --cyan: #a8dadc; | |
| --pink: #ffc1cc; | |
| --cta: #b39cd0; | |
| --cta-dark: #9a7fc0; | |
| --surface-elevated: #363636; | |
| --surface-overlay: #404040; | |
| --surface-subtle: #242424; | |
| --success: #7dd3a8; | |
| --warning: #f5c26b; | |
| --error: #e57373; | |
| --font-heading: 'Atkinson Hyperlegible', system-ui, sans-serif; | |
| --font-body: 'Poppins', system-ui, sans-serif; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background: var(--bg); | |
| color: var(--secondary); | |
| font-family: var(--font-body); | |
| line-height: 1.5; | |
| min-height: 100vh; | |
| } | |
| /* ---- Page Layout ---- */ | |
| .page-header { | |
| text-align: center; | |
| padding: 32px 16px 8px; | |
| } | |
| .page-header h1 { | |
| font-family: var(--font-heading); | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| font-weight: 700; | |
| } | |
| .page-header p { font-size: 0.8rem; color: var(--muted); margin-top: 4px; } | |
| /* ---- Tab Nav ---- */ | |
| .tab-nav { | |
| display: flex; | |
| gap: 4px; | |
| padding: 8px 16px; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| border-bottom: 1px solid var(--surface-overlay); | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .tab-nav::-webkit-scrollbar { display: none; } | |
| .tab-btn { | |
| padding: 6px 14px; | |
| border-radius: 9999px; | |
| border: 1px solid var(--surface-overlay); | |
| background: transparent; | |
| color: var(--muted); | |
| font-family: var(--font-body); | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| white-space: nowrap; | |
| } | |
| .tab-btn:hover { border-color: var(--cta); color: var(--cta); } | |
| .tab-btn.active { | |
| background: rgba(179,156,208,0.15); | |
| border-color: var(--cta); | |
| color: var(--cta); | |
| } | |
| .tab-btn.general { border-color: var(--cyan); } | |
| .tab-btn.general.active { background: rgba(168,218,220,0.15); color: var(--cyan); } | |
| .tab-content { display: none; padding: 24px 16px; max-width: 460px; margin: 0 auto; } | |
| .tab-content.active { display: block; } | |
| /* ---- Section Labels ---- */ | |
| .section-label { | |
| text-align: center; | |
| font-size: 0.6rem; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 0.15em; | |
| color: var(--muted); | |
| margin: 24px 0 8px; | |
| } | |
| .section-label:first-child { margin-top: 0; } | |
| /* ---- Component Card Base ---- */ | |
| .genui-card { | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 16px; | |
| padding: 20px; | |
| background: linear-gradient(135deg, rgba(54,54,54,0.9) 0%, rgba(36,36,36,0.95) 100%); | |
| border: 1px solid rgba(179,156,208,0.15); | |
| box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05); | |
| margin-bottom: 20px; | |
| } | |
| .genui-card .accent-line { | |
| position: absolute; | |
| top: 0; left: 20%; right: 20%; | |
| height: 2px; | |
| background: linear-gradient(to right, transparent, var(--cta), transparent); | |
| opacity: 0.6; | |
| } | |
| /* ---- Header Row ---- */ | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| margin-bottom: 16px; | |
| padding-bottom: 14px; | |
| border-bottom: 1px solid rgba(255,255,255,0.05); | |
| } | |
| .icon-badge { | |
| width: 44px; height: 44px; | |
| border-radius: 12px; | |
| display: flex; align-items: center; justify-content: center; | |
| flex-shrink: 0; | |
| font-size: 1.2rem; | |
| } | |
| .ic { width: 20px; height: 20px; flex-shrink: 0; } | |
| .ic-sm { width: 14px; height: 14px; flex-shrink: 0; display: inline-block; vertical-align: -2px; } | |
| .icon-badge.cta { background: linear-gradient(135deg, rgba(179,156,208,0.25), rgba(179,156,208,0.1)); border: 1px solid rgba(179,156,208,0.3); } | |
| .icon-badge.cyan { background: linear-gradient(135deg, rgba(168,218,220,0.25), rgba(168,218,220,0.1)); border: 1px solid rgba(168,218,220,0.3); } | |
| .icon-badge.pink { background: linear-gradient(135deg, rgba(255,193,204,0.25), rgba(255,193,204,0.1)); border: 1px solid rgba(255,193,204,0.3); } | |
| .icon-badge.success { background: linear-gradient(135deg, rgba(125,211,168,0.25), rgba(125,211,168,0.1)); border: 1px solid rgba(125,211,168,0.3); } | |
| .icon-badge.warning { background: linear-gradient(135deg, rgba(245,194,107,0.25), rgba(245,194,107,0.1)); border: 1px solid rgba(245,194,107,0.3); } | |
| .card-title { font-size: 1rem; font-weight: 700; color: var(--primary); letter-spacing: -0.02em; } | |
| .card-subtitle { font-size: 0.68rem; color: var(--muted); margin-top: 2px; } | |
| .count-badge { | |
| font-size: 0.62rem; font-weight: 800; | |
| padding: 3px 10px; border-radius: 9999px; | |
| margin-left: auto; | |
| } | |
| .count-badge.cta { background: rgba(179,156,208,0.15); color: var(--cta); border: 1px solid rgba(179,156,208,0.2); } | |
| .count-badge.cyan { background: rgba(168,218,220,0.15); color: var(--cyan); border: 1px solid rgba(168,218,220,0.2); } | |
| .count-badge.success { background: rgba(125,211,168,0.15); color: var(--success); border: 1px solid rgba(125,211,168,0.2); } | |
| /* ---- Option Row ---- */ | |
| .option-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 14px; | |
| border-radius: 12px; | |
| background: rgba(36,36,36,0.6); | |
| border: 1px solid rgba(64,64,64,0.5); | |
| margin-bottom: 8px; | |
| cursor: pointer; | |
| transition: all 0.25s; | |
| } | |
| .option-row:hover { | |
| background: rgba(54,54,54,0.8); | |
| border-color: rgba(179,156,208,0.4); | |
| transform: translateY(-1px); | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 20px rgba(179,156,208,0.08); | |
| } | |
| .option-row.selected { | |
| background: rgba(179,156,208,0.12); | |
| border-color: rgba(179,156,208,0.4); | |
| } | |
| .num-badge { | |
| width: 36px; height: 36px; | |
| border-radius: 10px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 0.85rem; font-weight: 800; | |
| flex-shrink: 0; | |
| transition: all 0.3s; | |
| } | |
| .num-badge.cta { background: rgba(179,156,208,0.15); color: var(--cta); border: 1px solid rgba(179,156,208,0.2); } | |
| .option-row:hover .num-badge.cta, | |
| .option-row.selected .num-badge.cta { background: var(--cta); color: var(--inverse); } | |
| .num-badge.cyan { background: rgba(168,218,220,0.15); color: var(--cyan); border: 1px solid rgba(168,218,220,0.2); } | |
| .option-row:hover .num-badge.cyan { background: var(--cyan); color: var(--inverse); } | |
| .option-label { font-size: 0.9rem; font-weight: 600; color: var(--primary); } | |
| .option-desc { font-size: 0.75rem; color: var(--muted); margin-top: 2px; } | |
| .option-row .check { margin-left: auto; opacity: 0; font-size: 1rem; color: var(--success); transition: opacity 0.2s; } | |
| .option-row.selected .check { opacity: 1; } | |
| /* ---- Voice Hint Footer ---- */ | |
| .voice-hint { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| margin-top: 16px; | |
| padding-top: 14px; | |
| border-top: 1px solid rgba(255,255,255,0.05); | |
| } | |
| .voice-hint .mic { font-size: 0.75rem; opacity: 0.6; } | |
| .voice-hint span { | |
| font-size: 0.62rem; | |
| color: var(--muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| font-weight: 600; | |
| } | |
| /* ---- Confirmation Buttons ---- */ | |
| .confirm-actions { | |
| display: flex; | |
| gap: 12px; | |
| margin-top: 16px; | |
| } | |
| .confirm-btn { | |
| flex: 1; | |
| min-height: 56px; | |
| border-radius: 14px; | |
| border: none; | |
| font-family: var(--font-body); | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| .confirm-btn.primary { | |
| background: var(--cta); | |
| color: var(--inverse); | |
| } | |
| .confirm-btn.primary:hover { | |
| background: var(--cta-dark); | |
| transform: translateY(-1px); | |
| } | |
| .confirm-btn.secondary { | |
| background: rgba(64,64,64,0.5); | |
| color: var(--secondary); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .confirm-btn.secondary:hover { | |
| background: rgba(64,64,64,0.8); | |
| color: var(--primary); | |
| } | |
| .confirm-btn.success { background: var(--success); color: var(--inverse); } | |
| .confirm-btn.warning-btn { background: rgba(245,194,107,.15); color: var(--warning); border: 1px solid rgba(245,194,107,.3); } | |
| .confirm-btn.warning-btn:hover { background: rgba(245,194,107,.25); } | |
| .confirm-btn.danger { background: rgba(229,115,115,.15); color: var(--error); border: 1px solid rgba(229,115,115,.3); } | |
| .confirm-btn.danger:hover { background: rgba(229,115,115,.25); } | |
| /* ---- Quick Reply Chips ---- */ | |
| .chip-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-top: 12px; | |
| } | |
| .chip { | |
| padding: 8px 16px; | |
| border-radius: 9999px; | |
| background: rgba(179,156,208,0.12); | |
| border: 1px solid rgba(179,156,208,0.25); | |
| color: var(--cta); | |
| font-family: var(--font-body); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| white-space: nowrap; | |
| } | |
| .chip:hover { | |
| background: rgba(179,156,208,0.25); | |
| border-color: var(--cta); | |
| transform: translateY(-1px); | |
| } | |
| .chip.cyan { | |
| background: rgba(168,218,220,0.12); | |
| border-color: rgba(168,218,220,0.25); | |
| color: var(--cyan); | |
| } | |
| .chip.cyan:hover { background: rgba(168,218,220,0.25); border-color: var(--cyan); } | |
| /* ---- Detail Grid ---- */ | |
| .detail-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| margin-bottom: 14px; | |
| } | |
| .detail-item { | |
| background: rgba(36,36,36,0.5); | |
| border-radius: 10px; | |
| padding: 10px 12px; | |
| border: 1px solid rgba(64,64,64,0.3); | |
| } | |
| .detail-label { font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; } | |
| .detail-value { font-size: 0.85rem; color: var(--primary); font-weight: 600; margin-top: 2px; } | |
| .detail-value.pending { color: var(--muted); font-style: italic; font-weight: 400; } | |
| /* ---- Status Indicator ---- */ | |
| .status-dot { | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .status-dot.capturing { background: var(--pink); animation: pulse 1.5s infinite; } | |
| .status-dot.complete { background: var(--success); } | |
| .status-dot.error { background: var(--error); } | |
| .status-dot.sending { background: var(--cyan); animation: pulse 1.5s infinite; } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| /* ---- Timeline ---- */ | |
| .timeline-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| padding: 12px 0; | |
| border-bottom: 1px solid rgba(64,64,64,0.3); | |
| } | |
| .timeline-item:last-child { border-bottom: none; } | |
| .timeline-date { | |
| font-size: 0.68rem; | |
| color: var(--muted); | |
| font-weight: 600; | |
| min-width: 52px; | |
| text-align: right; | |
| padding-top: 2px; | |
| } | |
| .intensity-bar { | |
| width: 4px; | |
| border-radius: 2px; | |
| min-height: 32px; | |
| flex-shrink: 0; | |
| } | |
| .intensity-bar.low { background: var(--success); } | |
| .intensity-bar.mid { background: var(--warning); } | |
| .intensity-bar.high { background: var(--error); } | |
| /* ---- Medication Row ---- */ | |
| .med-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 14px; | |
| border-radius: 12px; | |
| background: rgba(36,36,36,0.6); | |
| border: 1px solid rgba(64,64,64,0.3); | |
| margin-bottom: 8px; | |
| } | |
| .med-status-icon { | |
| width: 32px; height: 32px; | |
| border-radius: 8px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 1rem; | |
| } | |
| .med-status-icon.taken { background: rgba(125,211,168,0.15); } | |
| .med-status-icon.pending { background: rgba(245,194,107,0.15); } | |
| .med-name { font-size: 0.85rem; font-weight: 600; color: var(--primary); } | |
| .med-dose { font-size: 0.72rem; color: var(--muted); margin-top: 1px; } | |
| /* ---- Snapshot Ring ---- */ | |
| .snapshot-ring { | |
| width: 64px; height: 64px; | |
| border-radius: 50%; | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .snapshot-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } | |
| .snapshot-ring .ring-bg { fill: none; stroke: rgba(64,64,64,0.5); stroke-width: 6; } | |
| .snapshot-ring .ring-fg { fill: none; stroke-width: 6; stroke-linecap: round; } | |
| .snapshot-ring .ring-label { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.85rem; | |
| font-weight: 800; | |
| color: var(--primary); | |
| } | |
| /* ---- Disclaimer ---- */ | |
| .disclaimer { | |
| font-size: 0.6rem; | |
| color: var(--muted); | |
| font-style: italic; | |
| margin-top: 12px; | |
| text-align: center; | |
| opacity: 0.8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page-header"> | |
| <h1>GenUI Mockups</h1> | |
| <p>9 new components — General Purpose + Journey-Specific</p> | |
| </div> | |
| <!-- Tab Navigation --> | |
| <nav class="tab-nav"> | |
| <button class="tab-btn general active" onclick="showTab('options')">OptionsPicker</button> | |
| <button class="tab-btn general" onclick="showTab('confirm')">ConfirmationCard</button> | |
| <button class="tab-btn general" onclick="showTab('quick')">QuickReply</button> | |
| <button class="tab-btn" onclick="showTab('medlog')">MedLog</button> | |
| <button class="tab-btn" onclick="showTab('history')">HistoryTimeline</button> | |
| <button class="tab-btn" onclick="showTab('medslist')">MyMedsList</button> | |
| <button class="tab-btn" onclick="showTab('report')">ReportConfirmation</button> | |
| <button class="tab-btn" onclick="showTab('checkin')">CheckInCard</button> | |
| <button class="tab-btn" onclick="showTab('snapshot')">DailySnapshot</button> | |
| </nav> | |
| <!-- ========================== --> | |
| <!-- 1. OPTIONS PICKER --> | |
| <!-- ========================== --> | |
| <div id="tab-options" class="tab-content active"> | |
| <p class="section-label">Default — "Shall I read these out?"</p> | |
| <div class="genui-card"> | |
| <div class="accent-line"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge cta"><svg class="ic" viewBox="0 0 24 24"><path d="M10.5 1.5a5.5 5.5 0 0 0-5.5 5.5v10a5.5 5.5 0 0 0 11 0V7a5.5 5.5 0 0 0-5.5-5.5zM5 12h11" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div> | |
| <div> | |
| <div class="card-title">Which medication?</div> | |
| <div class="card-subtitle">Tap or say the number</div> | |
| </div> | |
| <span class="count-badge cta">3 options</span> | |
| </div> | |
| <div class="option-row"> | |
| <div class="num-badge cta">1</div> | |
| <div> | |
| <div class="option-label">Acetazolamide 250mg</div> | |
| <div class="option-desc">Twice daily — morning & evening</div> | |
| </div> | |
| <span class="check">✓</span> | |
| </div> | |
| <div class="option-row"> | |
| <div class="num-badge cta">2</div> | |
| <div> | |
| <div class="option-label">Aspirin 75mg</div> | |
| <div class="option-desc">Once daily — morning</div> | |
| </div> | |
| <span class="check">✓</span> | |
| </div> | |
| <div class="option-row"> | |
| <div class="num-badge cta">3</div> | |
| <div> | |
| <div class="option-label">Something else</div> | |
| <div class="option-desc">Tell me what you took</div> | |
| </div> | |
| <span class="check">✓</span> | |
| </div> | |
| <div class="voice-hint"> | |
| <span class="mic"><svg class="ic-sm" viewBox="0 0 24 24"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" stroke="currentColor" stroke-width="2" fill="none"/><path d="M19 10v2a7 7 0 0 1-14 0v-2" stroke="currentColor" stroke-width="2" fill="none"/><line x1="12" y1="19" x2="12" y2="23" stroke="currentColor" stroke-width="2"/></svg></span> | |
| <span>Say "read them out" if you'd like me to go through the list</span> | |
| </div> | |
| </div> | |
| <p class="section-label">Option Selected</p> | |
| <div class="genui-card"> | |
| <div class="accent-line"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge cta"><svg class="ic" viewBox="0 0 24 24"><path d="M10.5 1.5a5.5 5.5 0 0 0-5.5 5.5v10a5.5 5.5 0 0 0 11 0V7a5.5 5.5 0 0 0-5.5-5.5zM5 12h11" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div> | |
| <div> | |
| <div class="card-title">Which medication?</div> | |
| <div class="card-subtitle">Tap or say the number</div> | |
| </div> | |
| <span class="count-badge success">Selected</span> | |
| </div> | |
| <div class="option-row"> | |
| <div class="num-badge cta">1</div> | |
| <div> | |
| <div class="option-label">Acetazolamide 250mg</div> | |
| <div class="option-desc">Twice daily — morning & evening</div> | |
| </div> | |
| <span class="check">✓</span> | |
| </div> | |
| <div class="option-row selected"> | |
| <div class="num-badge cta">2</div> | |
| <div> | |
| <div class="option-label">Aspirin 75mg</div> | |
| <div class="option-desc">Once daily — morning</div> | |
| </div> | |
| <span class="check">✓</span> | |
| </div> | |
| <div class="option-row" style="opacity:0.4;"> | |
| <div class="num-badge cta">3</div> | |
| <div> | |
| <div class="option-label">Something else</div> | |
| <div class="option-desc">Tell me what you took</div> | |
| </div> | |
| <span class="check">✓</span> | |
| </div> | |
| </div> | |
| <p class="section-label">Flexible — Report Type (different question)</p> | |
| <div class="genui-card"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--cyan), transparent);"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge cyan"><svg class="ic" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2" fill="none"/><polyline points="14 2 14 8 20 8" stroke="currentColor" stroke-width="2" fill="none"/></svg></div> | |
| <div> | |
| <div class="card-title">What type of report?</div> | |
| <div class="card-subtitle">Choose what to send to your doctor</div> | |
| </div> | |
| </div> | |
| <div class="option-row"> | |
| <div class="num-badge cyan">1</div> | |
| <div> | |
| <div class="option-label">Headache Diary</div> | |
| <div class="option-desc">Intensity, triggers and patterns</div> | |
| </div> | |
| <span class="check">✓</span> | |
| </div> | |
| <div class="option-row"> | |
| <div class="num-badge cyan">2</div> | |
| <div> | |
| <div class="option-label">Medication Log</div> | |
| <div class="option-desc">Doses taken and timing</div> | |
| </div> | |
| <span class="check">✓</span> | |
| </div> | |
| <div class="option-row"> | |
| <div class="num-badge cyan">3</div> | |
| <div> | |
| <div class="option-label">Both</div> | |
| <div class="option-desc">Complete health overview</div> | |
| </div> | |
| <span class="check">✓</span> | |
| </div> | |
| <div class="voice-hint"> | |
| <span class="mic"><svg class="ic-sm" viewBox="0 0 24 24"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" stroke="currentColor" stroke-width="2" fill="none"/><path d="M19 10v2a7 7 0 0 1-14 0v-2" stroke="currentColor" stroke-width="2" fill="none"/><line x1="12" y1="19" x2="12" y2="23" stroke="currentColor" stroke-width="2"/></svg></span> | |
| <span>Say "read them out" to hear the options</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ========================== --> | |
| <!-- 2. CONFIRMATION CARD --> | |
| <!-- ========================== --> | |
| <div id="tab-confirm" class="tab-content"> | |
| <p class="section-label">Default — Save Confirmation</p> | |
| <div class="genui-card"> | |
| <div class="accent-line"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge cta"><svg class="ic" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke="currentColor" stroke-width="2" fill="none"/><polyline points="22 4 12 14.01 9 11.01" stroke="currentColor" stroke-width="2" fill="none"/></svg></div> | |
| <div> | |
| <div class="card-title">Save this entry?</div> | |
| </div> | |
| </div> | |
| <div style="background: rgba(36,36,36,0.5); border-radius: 10px; padding: 14px; border: 1px solid rgba(64,64,64,0.3); margin-bottom: 4px;"> | |
| <div style="font-size: 0.82rem; color: var(--primary); line-height: 1.6;"> | |
| <strong>Headache</strong> — Intensity 7/10<br> | |
| Left temple, throbbing<br> | |
| Started about 2 hours ago<br> | |
| Light sensitivity, slight nausea | |
| </div> | |
| </div> | |
| <div class="confirm-actions"> | |
| <button class="confirm-btn secondary">Make Changes</button> | |
| <button class="confirm-btn primary">✓ Looks Right</button> | |
| </div> | |
| <div class="voice-hint"> | |
| <span class="mic"><svg class="ic-sm" viewBox="0 0 24 24"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" stroke="currentColor" stroke-width="2" fill="none"/><path d="M19 10v2a7 7 0 0 1-14 0v-2" stroke="currentColor" stroke-width="2" fill="none"/><line x1="12" y1="19" x2="12" y2="23" stroke="currentColor" stroke-width="2"/></svg></span> | |
| <span>Say "save it" or "change it"</span> | |
| </div> | |
| </div> | |
| <p class="section-label">Warning Variant — Discard</p> | |
| <div class="genui-card" style="border-color: rgba(245,194,107,0.25);"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--warning), transparent);"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge warning"><svg class="ic" viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke="currentColor" stroke-width="2" fill="none"/><line x1="12" y1="9" x2="12" y2="13" stroke="currentColor" stroke-width="2"/><line x1="12" y1="17" x2="12.01" y2="17" stroke="currentColor" stroke-width="2"/></svg></div> | |
| <div> | |
| <div class="card-title">Discard this entry?</div> | |
| <div class="card-subtitle">This cannot be undone</div> | |
| </div> | |
| </div> | |
| <div style="background: rgba(245,194,107,0.06); border-radius: 10px; padding: 14px; border: 1px solid rgba(245,194,107,0.15); margin-bottom: 4px;"> | |
| <div style="font-size: 0.82rem; color: var(--secondary); line-height: 1.6;"> | |
| You have an unsaved medication entry for <strong style="color:var(--primary);">Acetazolamide 250mg</strong> | |
| </div> | |
| </div> | |
| <div class="confirm-actions"> | |
| <button class="confirm-btn secondary">← Keep It</button> | |
| <button class="confirm-btn warning-btn">Discard</button> | |
| </div> | |
| </div> | |
| <p class="section-label">Success Variant — Send Report</p> | |
| <div class="genui-card" style="border-color: rgba(168,218,220,0.25);"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--cyan), transparent);"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge cyan"><svg class="ic" viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke="currentColor" stroke-width="2" fill="none"/><polyline points="22,6 12,13 2,6" stroke="currentColor" stroke-width="2" fill="none"/></svg></div> | |
| <div> | |
| <div class="card-title">Send to Dr. Patel?</div> | |
| <div class="card-subtitle">30-day headache report with CSV</div> | |
| </div> | |
| </div> | |
| <div class="confirm-actions"> | |
| <button class="confirm-btn secondary">Not Yet</button> | |
| <button class="confirm-btn primary" style="background: var(--cyan); color: var(--inverse);"><svg class="ic" viewBox="0 0 24 24"><polyline points="17 1 21 5 17 9" stroke="currentColor" stroke-width="2" fill="none"/><path d="M3 11V9a4 4 0 0 1 4-4h14" stroke="currentColor" stroke-width="2" fill="none"/></svg> Send Report</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ========================== --> | |
| <!-- 3. QUICK REPLY --> | |
| <!-- ========================== --> | |
| <div id="tab-quick" class="tab-content"> | |
| <p class="section-label">After saving an entry</p> | |
| <div class="genui-card"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--success), transparent);"></div> | |
| <div class="card-header" style="border-bottom: none; margin-bottom: 4px; padding-bottom: 0;"> | |
| <div class="icon-badge success"></div> | |
| <div> | |
| <div class="card-title">Entry saved</div> | |
| <div class="card-subtitle">What would you like to do next?</div> | |
| </div> | |
| </div> | |
| <div class="chip-row"> | |
| <div class="chip"><svg class="ic" viewBox="0 0 24 24"><path d="M10.5 1.5a5.5 5.5 0 0 0-5.5 5.5v10a5.5 5.5 0 0 0 11 0V7a5.5 5.5 0 0 0-5.5-5.5zM5 12h11" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg> Log medication</div> | |
| <div class="chip cyan"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="12" y1="20" x2="12" y2="4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="6" y1="20" x2="6" y2="14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> View history</div> | |
| <div class="chip" style="background: rgba(125,211,168,0.12); border-color: rgba(125,211,168,0.25); color: var(--success);">That's all</div> | |
| </div> | |
| </div> | |
| <p class="section-label">After a check-in</p> | |
| <div class="genui-card"> | |
| <div class="accent-line"></div> | |
| <div class="card-header" style="border-bottom: none; margin-bottom: 4px; padding-bottom: 0;"> | |
| <div class="icon-badge pink"></div> | |
| <div> | |
| <div class="card-title" style="font-size: 0.9rem;">Just checking in — anything you need?</div> | |
| </div> | |
| </div> | |
| <div class="chip-row"> | |
| <div class="chip">I'm fine</div> | |
| <div class="chip" style="background: rgba(255,193,204,0.12); border-color: rgba(255,193,204,0.25); color: var(--pink);">Log headache</div> | |
| <div class="chip"><svg class="ic" viewBox="0 0 24 24"><path d="M10.5 1.5a5.5 5.5 0 0 0-5.5 5.5v10a5.5 5.5 0 0 0 11 0V7a5.5 5.5 0 0 0-5.5-5.5zM5 12h11" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg> Log medication</div> | |
| <div class="chip cyan">Play music</div> | |
| </div> | |
| </div> | |
| <p class="section-label">Morning greeting</p> | |
| <div class="genui-card"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--cyan), transparent);"></div> | |
| <div class="card-header" style="border-bottom: none; margin-bottom: 4px; padding-bottom: 0;"> | |
| <div class="icon-badge cyan"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" fill="none"/><line x1="12" y1="1" x2="12" y2="3" stroke="currentColor" stroke-width="2"/><line x1="12" y1="21" x2="12" y2="23" stroke="currentColor" stroke-width="2"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="currentColor" stroke-width="2"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="currentColor" stroke-width="2"/><line x1="1" y1="12" x2="3" y2="12" stroke="currentColor" stroke-width="2"/><line x1="21" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="currentColor" stroke-width="2"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="currentColor" stroke-width="2"/></svg></div> | |
| <div> | |
| <div class="card-title" style="font-size: 0.9rem;">Good morning! How are you today?</div> | |
| </div> | |
| </div> | |
| <div class="chip-row"> | |
| <div class="chip cyan">Doing well</div> | |
| <div class="chip" style="background: rgba(255,193,204,0.12); border-color: rgba(255,193,204,0.25); color: var(--pink);">Not great</div> | |
| <div class="chip"><svg class="ic" viewBox="0 0 24 24"><path d="M10.5 1.5a5.5 5.5 0 0 0-5.5 5.5v10a5.5 5.5 0 0 0 11 0V7a5.5 5.5 0 0 0-5.5-5.5zM5 12h11" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg> Took my meds</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ========================== --> | |
| <!-- 4. MED LOG (Streaming) --> | |
| <!-- ========================== --> | |
| <div id="tab-medlog" class="tab-content"> | |
| <p class="section-label">Capturing — building in real time</p> | |
| <div class="genui-card"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--pink), transparent);"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge pink"><svg class="ic" viewBox="0 0 24 24"><path d="M10.5 1.5a5.5 5.5 0 0 0-5.5 5.5v10a5.5 5.5 0 0 0 11 0V7a5.5 5.5 0 0 0-5.5-5.5zM5 12h11" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div> | |
| <div> | |
| <div class="card-title"><span class="status-dot capturing"></span>Logging Medication</div> | |
| <div class="card-subtitle">Filling in details as you speak…</div> | |
| </div> | |
| </div> | |
| <div class="detail-grid"> | |
| <div class="detail-item"> | |
| <div class="detail-label">Medication</div> | |
| <div class="detail-value">Acetazolamide</div> | |
| </div> | |
| <div class="detail-item"> | |
| <div class="detail-label">Dose</div> | |
| <div class="detail-value">250mg</div> | |
| </div> | |
| <div class="detail-item"> | |
| <div class="detail-label">Time Taken</div> | |
| <div class="detail-value pending">Asking…</div> | |
| </div> | |
| <div class="detail-item"> | |
| <div class="detail-label">On Schedule</div> | |
| <div class="detail-value pending">Asking…</div> | |
| </div> | |
| </div> | |
| <div class="disclaimer">This records what you tell me, not verified intake.</div> | |
| </div> | |
| <p class="section-label">Complete — ready to save</p> | |
| <div class="genui-card" style="border-color: rgba(125,211,168,0.25);"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--success), transparent);"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge success"></div> | |
| <div> | |
| <div class="card-title"><span class="status-dot complete"></span>Medication Logged</div> | |
| <div class="card-subtitle">Saved to your record</div> | |
| </div> | |
| </div> | |
| <div class="detail-grid"> | |
| <div class="detail-item"> | |
| <div class="detail-label">Medication</div> | |
| <div class="detail-value">Acetazolamide</div> | |
| </div> | |
| <div class="detail-item"> | |
| <div class="detail-label">Dose</div> | |
| <div class="detail-value">250mg</div> | |
| </div> | |
| <div class="detail-item"> | |
| <div class="detail-label">Time Taken</div> | |
| <div class="detail-value">8:30 AM</div> | |
| </div> | |
| <div class="detail-item"> | |
| <div class="detail-label">On Schedule</div> | |
| <div class="detail-value" style="color: var(--success);">✓ Yes</div> | |
| </div> | |
| </div> | |
| <div class="disclaimer">This records what you tell me, not verified intake.</div> | |
| </div> | |
| </div> | |
| <!-- ========================== --> | |
| <!-- 5. HISTORY TIMELINE --> | |
| <!-- ========================== --> | |
| <div id="tab-history" class="tab-content"> | |
| <p class="section-label">Headache History — 7 days</p> | |
| <div class="genui-card"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--pink), transparent);"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge pink"><svg class="ic" viewBox="0 0 24 24"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" stroke="currentColor" stroke-width="2" fill="none"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1" stroke="currentColor" stroke-width="2" fill="none"/></svg></div> | |
| <div> | |
| <div class="card-title">Headache History</div> | |
| <div class="card-subtitle">Last 7 days</div> | |
| </div> | |
| <span class="count-badge cta">4 entries</span> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-date">Today<br><span style="font-size:0.6rem;color:var(--muted);">2:15 PM</span></div> | |
| <div class="intensity-bar high"></div> | |
| <div> | |
| <div style="font-size:0.85rem;font-weight:600;color:var(--primary);">Intensity 7/10</div> | |
| <div style="font-size:0.72rem;color:var(--muted);margin-top:2px;">Left temple, throbbing · Light sensitivity</div> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-date">Tue<br><span style="font-size:0.6rem;color:var(--muted);">9:00 AM</span></div> | |
| <div class="intensity-bar mid"></div> | |
| <div> | |
| <div style="font-size:0.85rem;font-weight:600;color:var(--primary);">Intensity 5/10</div> | |
| <div style="font-size:0.72rem;color:var(--muted);margin-top:2px;">Behind eyes, pressure · Nausea</div> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-date">Mon<br><span style="font-size:0.6rem;color:var(--muted);">11:30 AM</span></div> | |
| <div class="intensity-bar low"></div> | |
| <div> | |
| <div style="font-size:0.85rem;font-weight:600;color:var(--primary);">Intensity 3/10</div> | |
| <div style="font-size:0.72rem;color:var(--muted);margin-top:2px;">Forehead, dull ache</div> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-date">Sun<br><span style="font-size:0.6rem;color:var(--muted);">7:45 PM</span></div> | |
| <div class="intensity-bar high"></div> | |
| <div> | |
| <div style="font-size:0.85rem;font-weight:600;color:var(--primary);">Intensity 8/10</div> | |
| <div style="font-size:0.72rem;color:var(--muted);margin-top:2px;">Whole head, throbbing · Aura, nausea</div> | |
| </div> | |
| </div> | |
| <div class="disclaimer">Your neurologist can review this data and discuss patterns with you.</div> | |
| </div> | |
| <p class="section-label">Medication History — 7 days</p> | |
| <div class="genui-card"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--cyan), transparent);"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge cyan"><svg class="ic" viewBox="0 0 24 24"><path d="M10.5 1.5a5.5 5.5 0 0 0-5.5 5.5v10a5.5 5.5 0 0 0 11 0V7a5.5 5.5 0 0 0-5.5-5.5zM5 12h11" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div> | |
| <div> | |
| <div class="card-title">Medication History</div> | |
| <div class="card-subtitle">Last 7 days</div> | |
| </div> | |
| <span class="count-badge cyan">6 entries</span> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-date">Today<br><span style="font-size:0.6rem;color:var(--muted);">8:30 AM</span></div> | |
| <div class="intensity-bar" style="background:var(--success);"></div> | |
| <div> | |
| <div style="font-size:0.85rem;font-weight:600;color:var(--primary);">Acetazolamide 250mg</div> | |
| <div style="font-size:0.72rem;color:var(--success);margin-top:2px;">✓ Taken on time</div> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-date">Today<br><span style="font-size:0.6rem;color:var(--muted);">8:35 AM</span></div> | |
| <div class="intensity-bar" style="background:var(--success);"></div> | |
| <div> | |
| <div style="font-size:0.85rem;font-weight:600;color:var(--primary);">Aspirin 75mg</div> | |
| <div style="font-size:0.72rem;color:var(--success);margin-top:2px;">✓ Taken on time</div> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-date">Tue<br><span style="font-size:0.6rem;color:var(--muted);">9:15 AM</span></div> | |
| <div class="intensity-bar" style="background:var(--warning);"></div> | |
| <div> | |
| <div style="font-size:0.85rem;font-weight:600;color:var(--primary);">Acetazolamide 250mg</div> | |
| <div style="font-size:0.72rem;color:var(--warning);margin-top:2px;">Taken late</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ========================== --> | |
| <!-- 6. MY MEDS LIST --> | |
| <!-- ========================== --> | |
| <div id="tab-medslist" class="tab-content"> | |
| <p class="section-label">Tappable medication list with voice shortcuts</p> | |
| <div class="genui-card"> | |
| <div class="accent-line"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge cta"><svg class="ic" viewBox="0 0 24 24"><path d="M10.5 1.5a5.5 5.5 0 0 0-5.5 5.5v10a5.5 5.5 0 0 0 11 0V7a5.5 5.5 0 0 0-5.5-5.5zM5 12h11" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div> | |
| <div> | |
| <div class="card-title">Your Medications</div> | |
| <div class="card-subtitle">Tap to log, or say the number</div> | |
| </div> | |
| <span class="count-badge cta">2 active</span> | |
| </div> | |
| <div class="option-row"> | |
| <div class="num-badge cta">1</div> | |
| <div style="flex:1;"> | |
| <div class="option-label">Acetazolamide</div> | |
| <div class="option-desc">250mg · Twice daily · 8:00 AM, 8:00 PM</div> | |
| </div> | |
| <div class="med-status-icon taken" title="Taken today"></div> | |
| </div> | |
| <div class="option-row"> | |
| <div class="num-badge cta">2</div> | |
| <div style="flex:1;"> | |
| <div class="option-label">Aspirin</div> | |
| <div class="option-desc">75mg · Once daily · 8:00 AM</div> | |
| </div> | |
| <div class="med-status-icon pending" title="Not yet logged"></div> | |
| </div> | |
| <div class="voice-hint"> | |
| <span class="mic"><svg class="ic-sm" viewBox="0 0 24 24"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" stroke="currentColor" stroke-width="2" fill="none"/><path d="M19 10v2a7 7 0 0 1-14 0v-2" stroke="currentColor" stroke-width="2" fill="none"/><line x1="12" y1="19" x2="12" y2="23" stroke="currentColor" stroke-width="2"/></svg></span> | |
| <span>Say "I took number two" to log Aspirin</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ========================== --> | |
| <!-- 7. REPORT CONFIRMATION --> | |
| <!-- ========================== --> | |
| <div id="tab-report" class="tab-content"> | |
| <p class="section-label">Sending state</p> | |
| <div class="genui-card"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--cyan), transparent);"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge cyan"><svg class="ic" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2" fill="none"/><polyline points="14 2 14 8 20 8" stroke="currentColor" stroke-width="2" fill="none"/></svg></div> | |
| <div> | |
| <div class="card-title"><span class="status-dot sending"></span>Sending Report…</div> | |
| <div class="card-subtitle">To Dr. Patel</div> | |
| </div> | |
| </div> | |
| <div class="detail-grid"> | |
| <div class="detail-item"> | |
| <div class="detail-label">Report Type</div> | |
| <div class="detail-value">Headache + Medication</div> | |
| </div> | |
| <div class="detail-item"> | |
| <div class="detail-label">Period</div> | |
| <div class="detail-value">Last 30 days</div> | |
| </div> | |
| <div class="detail-item"> | |
| <div class="detail-label">Recipient</div> | |
| <div class="detail-value">dr.patel@nhs.uk</div> | |
| </div> | |
| <div class="detail-item"> | |
| <div class="detail-label">CSV Attached</div> | |
| <div class="detail-value">✓ Yes</div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="section-label">Sent — success</p> | |
| <div class="genui-card" style="border-color: rgba(125,211,168,0.25);"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--success), transparent);"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge success"></div> | |
| <div> | |
| <div class="card-title"><span class="status-dot complete"></span>Report Sent</div> | |
| <div class="card-subtitle">Delivered to Dr. Patel</div> | |
| </div> | |
| </div> | |
| <div class="detail-grid"> | |
| <div class="detail-item"> | |
| <div class="detail-label">Report Type</div> | |
| <div class="detail-value">Headache + Medication</div> | |
| </div> | |
| <div class="detail-item"> | |
| <div class="detail-label">Period</div> | |
| <div class="detail-value">Last 30 days</div> | |
| </div> | |
| <div class="detail-item"> | |
| <div class="detail-label">Recipient</div> | |
| <div class="detail-value">dr.patel@nhs.uk</div> | |
| </div> | |
| <div class="detail-item"> | |
| <div class="detail-label">CC Caregiver</div> | |
| <div class="detail-value" style="color:var(--success);">✓ Sarah</div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="section-label">Error state</p> | |
| <div class="genui-card" style="border-color: rgba(229,115,115,0.25);"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--error), transparent);"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge" style="background: linear-gradient(135deg, rgba(229,115,115,0.25), rgba(229,115,115,0.1)); border: 1px solid rgba(229,115,115,0.3);"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/><line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/></svg></div> | |
| <div> | |
| <div class="card-title"><span class="status-dot error"></span>Send Failed</div> | |
| <div class="card-subtitle">Email authentication failed</div> | |
| </div> | |
| </div> | |
| <div class="confirm-actions"> | |
| <button class="confirm-btn secondary">Cancel</button> | |
| <button class="confirm-btn danger">Retry</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ========================== --> | |
| <!-- 8. CHECK-IN CARD --> | |
| <!-- ========================== --> | |
| <div id="tab-checkin" class="tab-content"> | |
| <p class="section-label">Morning check-in (robot-initiated)</p> | |
| <div class="genui-card" style="border-color: rgba(168,218,220,0.2);"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--cyan), transparent);"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge cyan"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" fill="none"/><line x1="12" y1="1" x2="12" y2="3" stroke="currentColor" stroke-width="2"/><line x1="12" y1="21" x2="12" y2="23" stroke="currentColor" stroke-width="2"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="currentColor" stroke-width="2"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="currentColor" stroke-width="2"/><line x1="1" y1="12" x2="3" y2="12" stroke="currentColor" stroke-width="2"/><line x1="21" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="currentColor" stroke-width="2"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="currentColor" stroke-width="2"/></svg></div> | |
| <div> | |
| <div class="card-title">Morning Check-in</div> | |
| <div class="card-subtitle">8:00 AM · Scheduled</div> | |
| </div> | |
| <span class="count-badge cyan" style="font-size:0.58rem;">Robot</span> | |
| </div> | |
| <div style="font-size:0.88rem; color:var(--primary); margin-bottom: 14px; line-height: 1.6;"> | |
| Good morning! How are you today? | |
| </div> | |
| <div class="chip-row"> | |
| <div class="chip cyan">I'm fine</div> | |
| <div class="chip" style="background:rgba(255,193,204,0.12);border-color:rgba(255,193,204,0.25);color:var(--pink);">Having a headache</div> | |
| <div class="chip"><svg class="ic" viewBox="0 0 24 24"><path d="M10.5 1.5a5.5 5.5 0 0 0-5.5 5.5v10a5.5 5.5 0 0 0 11 0V7a5.5 5.5 0 0 0-5.5-5.5zM5 12h11" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg> Log medication</div> | |
| <div class="chip" style="background:rgba(64,64,64,0.3);border-color:rgba(64,64,64,0.5);color:var(--muted);">Not now</div> | |
| </div> | |
| </div> | |
| <p class="section-label">Medication follow-up (30 min after dose)</p> | |
| <div class="genui-card" style="border-color: rgba(179,156,208,0.2);"> | |
| <div class="accent-line"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge cta"><svg class="ic" viewBox="0 0 24 24"><path d="M10.5 1.5a5.5 5.5 0 0 0-5.5 5.5v10a5.5 5.5 0 0 0 11 0V7a5.5 5.5 0 0 0-5.5-5.5zM5 12h11" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div> | |
| <div> | |
| <div class="card-title">Medication Follow-up</div> | |
| <div class="card-subtitle">Acetazolamide · 30 min ago</div> | |
| </div> | |
| <span class="count-badge cta" style="font-size:0.58rem;">Robot</span> | |
| </div> | |
| <div style="font-size:0.88rem; color:var(--primary); margin-bottom: 14px; line-height: 1.6;"> | |
| How are you feeling after taking your Acetazolamide? | |
| </div> | |
| <div class="chip-row"> | |
| <div class="chip">Fine, thanks</div> | |
| <div class="chip" style="background:rgba(255,193,204,0.12);border-color:rgba(255,193,204,0.25);color:var(--pink);">Not great</div> | |
| <div class="chip" style="background:rgba(64,64,64,0.3);border-color:rgba(64,64,64,0.5);color:var(--muted);">Not now</div> | |
| </div> | |
| </div> | |
| <p class="section-label">Evening journal</p> | |
| <div class="genui-card" style="border-color: rgba(179,156,208,0.2);"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--cta), transparent);"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge cta"><svg class="ic" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" fill="none"/></svg></div> | |
| <div> | |
| <div class="card-title">Evening Check-in</div> | |
| <div class="card-subtitle">8:00 PM · Scheduled</div> | |
| </div> | |
| <span class="count-badge cta" style="font-size:0.58rem;">Robot</span> | |
| </div> | |
| <div style="font-size:0.88rem; color:var(--primary); margin-bottom: 14px; line-height: 1.6;"> | |
| Evening! How was your day? Anything you'd like to note before winding down? | |
| </div> | |
| <div class="chip-row"> | |
| <div class="chip">Good day</div> | |
| <div class="chip" style="background:rgba(255,193,204,0.12);border-color:rgba(255,193,204,0.25);color:var(--pink);">Log something</div> | |
| <div class="chip cyan"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="12" y1="20" x2="12" y2="4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="6" y1="20" x2="6" y2="14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> Daily summary</div> | |
| <div class="chip" style="background:rgba(64,64,64,0.3);border-color:rgba(64,64,64,0.5);color:var(--muted);">Good night</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ========================== --> | |
| <!-- 9. DAILY SNAPSHOT --> | |
| <!-- ========================== --> | |
| <div id="tab-snapshot" class="tab-content"> | |
| <p class="section-label">Compact daily status</p> | |
| <div class="genui-card"> | |
| <div class="accent-line"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge cta"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="12" y1="20" x2="12" y2="4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="6" y1="20" x2="6" y2="14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></div> | |
| <div> | |
| <div class="card-title">Today's Snapshot</div> | |
| <div class="card-subtitle">Friday, 7 Feb 2026</div> | |
| </div> | |
| </div> | |
| <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 16px;"> | |
| <!-- Medication Ring --> | |
| <div class="snapshot-ring"> | |
| <svg viewBox="0 0 36 36"> | |
| <circle class="ring-bg" cx="18" cy="18" r="15" /> | |
| <circle class="ring-fg" cx="18" cy="18" r="15" | |
| stroke="var(--success)" stroke-dasharray="66 100" /> | |
| </svg> | |
| <div class="ring-label">⅔</div> | |
| </div> | |
| <div style="flex: 1;"> | |
| <div style="font-size: 0.82rem; font-weight: 700; color: var(--primary);">Medications</div> | |
| <div style="font-size: 0.72rem; color: var(--secondary); margin-top: 2px;">2 of 3 doses logged</div> | |
| <div style="font-size: 0.65rem; color: var(--muted); margin-top: 4px;"> | |
| ✓ Acetazolamide AM · ✓ Aspirin · Acetazolamide PM | |
| </div> | |
| </div> | |
| </div> | |
| <div style="display: flex; gap: 10px;"> | |
| <div class="detail-item" style="flex:1;"> | |
| <div class="detail-label">Headaches</div> | |
| <div class="detail-value" style="color: var(--pink);">1 today</div> | |
| <div style="font-size:0.62rem;color:var(--muted);margin-top:2px;">Intensity 7/10</div> | |
| </div> | |
| <div class="detail-item" style="flex:1;"> | |
| <div class="detail-label">Now Playing</div> | |
| <div class="detail-value" style="color: var(--cyan);">Calm Waters</div> | |
| <div style="font-size:0.62rem;color:var(--muted);margin-top:2px;">Playing · 65%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="section-label">All clear state</p> | |
| <div class="genui-card" style="border-color: rgba(125,211,168,0.2);"> | |
| <div class="accent-line" style="background: linear-gradient(to right, transparent, var(--success), transparent);"></div> | |
| <div class="card-header"> | |
| <div class="icon-badge success"></div> | |
| <div> | |
| <div class="card-title">Today's Snapshot</div> | |
| <div class="card-subtitle">Friday, 7 Feb 2026</div> | |
| </div> | |
| </div> | |
| <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 16px;"> | |
| <div class="snapshot-ring"> | |
| <svg viewBox="0 0 36 36"> | |
| <circle class="ring-bg" cx="18" cy="18" r="15" /> | |
| <circle class="ring-fg" cx="18" cy="18" r="15" | |
| stroke="var(--success)" stroke-dasharray="100 100" /> | |
| </svg> | |
| <div class="ring-label">3/3</div> | |
| </div> | |
| <div style="flex: 1;"> | |
| <div style="font-size: 0.82rem; font-weight: 700; color: var(--success);">All medications logged </div> | |
| <div style="font-size: 0.72rem; color: var(--secondary); margin-top: 2px;">No headaches recorded today</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function showTab(id) { | |
| document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active')); | |
| document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active')); | |
| document.getElementById('tab-' + id).classList.add('active'); | |
| event.target.classList.add('active'); | |
| } | |
| </script> | |
| </body> | |
| </html> | |