| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MedScribe - AI Medical Scribe for Doctors</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| :root { |
| --primary: #1d4ed8; |
| --primary-dark: #1e40af; |
| --primary-soft: #dbeafe; |
| --success: #0f766e; |
| --danger: #b42318; |
| --warning: #b54708; |
| --background: #f4f7fb; |
| --surface: #ffffff; |
| --surface-alt: #f8fafc; |
| --surface-strong: #e2e8f0; |
| --text: #0f172a; |
| --text-secondary: #475569; |
| --border: #d7e0ea; |
| --shadow: 0 10px 30px rgb(15 23 42 / 0.06); |
| --shadow-lg: 0 18px 48px rgb(15 23 42 / 0.10); |
| } |
| |
| body { |
| font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; |
| background: |
| radial-gradient(circle at top left, #eff6ff 0, transparent 28%), |
| linear-gradient(180deg, #f8fbff 0%, var(--background) 100%); |
| color: var(--text); |
| line-height: 1.5; |
| min-height: 100vh; |
| } |
| |
| |
| .loading-overlay { |
| position: fixed; |
| inset: 0; |
| background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: 9999; |
| transition: opacity 0.5s ease; |
| } |
| |
| .loading-overlay.hidden { |
| opacity: 0; |
| pointer-events: none; |
| } |
| |
| .loading-content { |
| text-align: center; |
| color: var(--text); |
| background: rgb(255 255 255 / 0.88); |
| border: 1px solid rgb(215 224 234 / 0.9); |
| border-radius: 24px; |
| box-shadow: var(--shadow-lg); |
| padding: 40px 36px; |
| min-width: min(520px, 90vw); |
| backdrop-filter: blur(12px); |
| } |
| |
| .loading-spinner { |
| width: 60px; |
| height: 60px; |
| border: 4px solid rgb(29 78 216 / 0.12); |
| border-top-color: var(--primary); |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| margin: 0 auto 24px; |
| } |
| |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| |
| .loading-content h1 { |
| font-size: 2.25rem; |
| font-weight: 700; |
| margin-bottom: 10px; |
| letter-spacing: -0.03em; |
| } |
| |
| .loading-content p { |
| font-size: 1rem; |
| color: var(--text-secondary); |
| margin-bottom: 28px; |
| } |
| |
| .progress-bar { |
| background: #e6edf7; |
| border-radius: 10px; |
| height: 8px; |
| overflow: hidden; |
| margin-bottom: 16px; |
| } |
| |
| .progress-fill { |
| background: linear-gradient(90deg, var(--primary) 0%, #3b82f6 100%); |
| height: 100%; |
| width: 0%; |
| transition: width 0.3s ease; |
| border-radius: 10px; |
| } |
| |
| .progress-text { |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| } |
| |
| |
| .container { |
| max-width: 1320px; |
| margin: 0 auto; |
| padding: 32px 24px 48px; |
| } |
| |
| |
| .header { |
| padding: 8px 0 28px; |
| margin-bottom: 20px; |
| } |
| |
| .header h1 { |
| font-size: clamp(2.4rem, 5vw, 3.2rem); |
| font-weight: 700; |
| color: var(--text); |
| margin-bottom: 10px; |
| letter-spacing: -0.04em; |
| } |
| |
| .header p { |
| max-width: 760px; |
| font-size: 1rem; |
| color: var(--text-secondary); |
| margin: 0; |
| } |
| |
| |
| .status-bar { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 20px; |
| padding: 18px 22px; |
| margin-bottom: 18px; |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| box-shadow: var(--shadow); |
| } |
| |
| .status-indicator { |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| background: var(--text-secondary); |
| flex-shrink: 0; |
| } |
| |
| .status-indicator.ready { background: var(--success); } |
| .status-indicator.recording { |
| background: var(--danger); |
| animation: pulse 1.5s ease-in-out infinite; |
| } |
| .status-indicator.processing { background: var(--warning); } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; transform: scale(1); } |
| 50% { opacity: 0.7; transform: scale(1.2); } |
| } |
| |
| .status-text { |
| flex: 1; |
| font-size: 0.95rem; |
| font-weight: 500; |
| } |
| |
| .activity-progress { |
| position: fixed; |
| inset: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: rgb(244 247 251 / 0.7); |
| backdrop-filter: blur(10px); |
| z-index: 9998; |
| opacity: 1; |
| transition: opacity 0.25s ease; |
| } |
| |
| .activity-progress.hidden { |
| opacity: 0; |
| pointer-events: none; |
| } |
| |
| .activity-progress-card { |
| width: min(460px, calc(100vw - 32px)); |
| background: rgb(255 255 255 / 0.94); |
| border: 1px solid rgb(215 224 234 / 0.92); |
| border-radius: 24px; |
| box-shadow: var(--shadow-lg); |
| padding: 28px 28px 24px; |
| text-align: center; |
| } |
| |
| .activity-progress-card h2 { |
| font-size: 1.35rem; |
| font-weight: 700; |
| margin-bottom: 10px; |
| letter-spacing: -0.02em; |
| } |
| |
| .activity-progress-copy { |
| color: var(--text-secondary); |
| font-size: 0.94rem; |
| margin-bottom: 18px; |
| } |
| |
| .activity-progress-text { |
| font-size: 0.88rem; |
| color: var(--text-secondary); |
| margin-bottom: 10px; |
| } |
| |
| .activity-progress .progress-bar { |
| margin-bottom: 0; |
| height: 7px; |
| } |
| |
| |
| .controls { |
| display: flex; |
| gap: 12px; |
| justify-content: flex-start; |
| margin-bottom: 22px; |
| flex-wrap: wrap; |
| padding: 18px 20px; |
| background: rgb(255 255 255 / 0.76); |
| border: 1px solid rgb(215 224 234 / 0.9); |
| border-radius: 18px; |
| box-shadow: var(--shadow); |
| backdrop-filter: blur(10px); |
| } |
| |
| button { |
| padding: 14px 22px; |
| font-size: 0.95rem; |
| font-weight: 600; |
| border: 1px solid transparent; |
| border-radius: 12px; |
| cursor: pointer; |
| transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; |
| font-family: inherit; |
| box-shadow: none; |
| } |
| |
| button:hover:not(:disabled) { |
| transform: none; |
| box-shadow: 0 8px 18px rgb(15 23 42 / 0.08); |
| } |
| |
| button:disabled { |
| opacity: 0.45; |
| cursor: not-allowed; |
| box-shadow: none; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(180deg, #2563eb 0%, var(--primary) 100%); |
| color: white; |
| } |
| |
| .btn-danger { |
| background: #fff5f5; |
| border-color: #fecaca; |
| color: var(--danger); |
| } |
| |
| .btn-danger:hover:not(:disabled) { |
| background: #fee2e2; |
| } |
| |
| .btn-secondary { |
| background: var(--surface); |
| color: var(--text); |
| border-color: var(--border); |
| } |
| |
| .btn-secondary:hover:not(:disabled) { |
| background: var(--surface-alt); |
| } |
| |
| .btn-outline { |
| background: var(--primary-soft); |
| color: var(--primary-dark); |
| border-color: #bfdbfe; |
| } |
| |
| .btn-outline:hover:not(:disabled) { |
| background: #cfe1ff; |
| } |
| |
| .action-note { |
| display: inline-flex; |
| align-items: center; |
| padding: 12px 14px; |
| border-radius: 12px; |
| background: var(--surface-alt); |
| border: 1px solid var(--border); |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| font-weight: 500; |
| } |
| |
| .control-group { |
| display: flex; |
| gap: 12px; |
| flex-wrap: wrap; |
| align-items: center; |
| } |
| |
| .panel-label { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 8px 12px; |
| border-radius: 999px; |
| background: var(--primary-soft); |
| color: var(--primary-dark); |
| font-size: 0.8rem; |
| font-weight: 700; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| margin-bottom: 14px; |
| } |
| |
| .panel-label::before { |
| content: ''; |
| width: 8px; |
| height: 8px; |
| border-radius: 999px; |
| background: var(--primary); |
| } |
| |
| .intro-card { |
| display: grid; |
| grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.9fr); |
| gap: 16px; |
| margin-bottom: 18px; |
| } |
| |
| .intro-panel, |
| .summary-panel { |
| background: rgb(255 255 255 / 0.82); |
| border: 1px solid rgb(215 224 234 / 0.9); |
| border-radius: 22px; |
| padding: 24px; |
| box-shadow: var(--shadow); |
| backdrop-filter: blur(10px); |
| } |
| |
| .intro-panel h2, |
| .summary-panel h2 { |
| font-size: 1.45rem; |
| margin-bottom: 10px; |
| letter-spacing: -0.02em; |
| } |
| |
| .intro-panel p, |
| .summary-panel p { |
| color: var(--text-secondary); |
| margin-bottom: 16px; |
| } |
| |
| .summary-panel dl { |
| display: grid; |
| gap: 14px; |
| } |
| |
| .summary-panel dt { |
| font-size: 0.78rem; |
| color: var(--text-secondary); |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| margin-bottom: 4px; |
| font-weight: 700; |
| } |
| |
| .summary-panel dd { |
| margin: 0; |
| font-size: 1rem; |
| font-weight: 600; |
| color: var(--text); |
| } |
| |
| @media (max-width: 960px) { |
| .intro-card { |
| grid-template-columns: 1fr; |
| } |
| } |
| |
| @media (max-width: 640px) { |
| .container { |
| padding: 20px 16px 36px; |
| } |
| |
| .controls { |
| padding: 14px; |
| } |
| |
| button { |
| width: 100%; |
| justify-content: center; |
| } |
| } |
| |
| |
| .dashboard { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 18px; |
| margin-bottom: 24px; |
| } |
| |
| @media (max-width: 1024px) { |
| .dashboard { |
| grid-template-columns: 1fr; |
| } |
| } |
| |
| .widget { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 20px; |
| padding: 24px; |
| box-shadow: var(--shadow); |
| transition: border-color 0.2s ease, box-shadow 0.2s ease; |
| } |
| |
| .widget.full-width { |
| grid-column: 1 / -1; |
| } |
| |
| .widget h3 { |
| font-size: 1.25rem; |
| font-weight: 700; |
| margin-bottom: 12px; |
| color: var(--text); |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| letter-spacing: -0.02em; |
| } |
| |
| .widget-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| margin-bottom: 16px; |
| } |
| |
| .widget-header h3 { |
| margin-bottom: 0; |
| } |
| |
| .btn-small { |
| padding: 10px 14px; |
| font-size: 0.85rem; |
| } |
| |
| .manual-input-panel { |
| display: none; |
| margin-top: 18px; |
| padding-top: 18px; |
| border-top: 1px solid var(--border); |
| } |
| |
| .manual-input-panel.active { |
| display: block; |
| } |
| |
| .manual-input-panel p { |
| margin-bottom: 12px; |
| color: var(--text-secondary); |
| } |
| |
| .manual-textarea { |
| width: 100%; |
| min-height: 220px; |
| padding: 16px; |
| background: var(--surface-alt); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| color: var(--text); |
| font-family: inherit; |
| font-size: 1rem; |
| line-height: 1.6; |
| resize: vertical; |
| } |
| |
| .manual-actions { |
| display: flex; |
| gap: 12px; |
| margin-top: 16px; |
| flex-wrap: wrap; |
| } |
| |
| .widget h3::before { |
| content: ''; |
| width: 4px; |
| height: 24px; |
| background: linear-gradient(180deg, var(--primary) 0%, #60a5fa 100%); |
| border-radius: 2px; |
| } |
| |
| .widget-content { |
| color: var(--text-secondary); |
| line-height: 1.7; |
| max-height: 400px; |
| overflow-y: auto; |
| } |
| |
| .widget-content p { |
| margin-bottom: 12px; |
| } |
| |
| .placeholder { |
| color: var(--text-secondary); |
| font-style: italic; |
| opacity: 0.8; |
| } |
| |
| |
| #transcriptWidget { |
| font-size: 1rem; |
| } |
| |
| .transcript-live { |
| animation: fadeIn 0.3s ease; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(-10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| margin-top: 16px; |
| background: var(--surface-alt); |
| border-radius: 14px; |
| overflow: hidden; |
| } |
| |
| table th, table td { |
| padding: 14px 16px; |
| text-align: left; |
| border-bottom: 1px solid var(--border); |
| } |
| |
| table th { |
| background: #eff6ff; |
| font-weight: 600; |
| color: var(--text); |
| text-transform: uppercase; |
| font-size: 0.78rem; |
| letter-spacing: 0.08em; |
| } |
| |
| table tr:last-child td { |
| border-bottom: none; |
| } |
| |
| table tbody tr:hover { |
| background: #f8fbff; |
| } |
| |
| |
| ul { |
| list-style: none; |
| padding: 0; |
| } |
| |
| li { |
| padding: 12px 16px; |
| margin-bottom: 8px; |
| background: var(--surface-alt); |
| border-radius: 10px; |
| border-left: 3px solid #93c5fd; |
| transition: border-color 0.2s ease, background 0.2s ease; |
| } |
| |
| li:hover { |
| border-left-color: var(--primary); |
| background: #f8fbff; |
| } |
| |
| |
| audio { |
| width: 100%; |
| margin-top: 16px; |
| border-radius: 12px; |
| background: var(--surface-alt); |
| } |
| |
| |
| .recording-wave { |
| display: none; |
| align-items: center; |
| gap: 4px; |
| height: 40px; |
| } |
| |
| .recording-wave.active { |
| display: flex; |
| } |
| |
| .wave-bar { |
| width: 4px; |
| height: 100%; |
| background: var(--danger); |
| border-radius: 2px; |
| animation: wave 1.2s ease-in-out infinite; |
| } |
| |
| .wave-bar:nth-child(1) { animation-delay: 0s; } |
| .wave-bar:nth-child(2) { animation-delay: 0.1s; } |
| .wave-bar:nth-child(3) { animation-delay: 0.2s; } |
| .wave-bar:nth-child(4) { animation-delay: 0.3s; } |
| .wave-bar:nth-child(5) { animation-delay: 0.4s; } |
| |
| @keyframes wave { |
| 0%, 100% { height: 20%; } |
| 50% { height: 100%; } |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: #cbd5e1; |
| border-radius: 4px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: #94a3b8; |
| } |
| </style> |
| <script type="module" crossorigin src="./assets/index-CSQcKR49.js"></script> |
| </head> |
| <body> |
| |
| <div class="loading-overlay" id="loadingOverlay"> |
| <div class="loading-content"> |
| <div class="loading-spinner"></div> |
| <h1>MedScribe</h1> |
| <p>Initializing AI-powered medical scribe...</p> |
| <div class="progress-bar"> |
| <div class="progress-fill" id="progressFill"></div> |
| </div> |
| <div class="progress-text" id="progressText">Starting...</div> |
| </div> |
| </div> |
|
|
| <div class="container"> |
| <div class="header"> |
| <div class="panel-label">Clinical Workspace</div> |
| <h1>MedScribe</h1> |
| <p>Private medical documentation workspace for capturing consultations, generating structured clinical notes, and preparing printable reports.</p> |
| </div> |
|
|
| <div class="intro-card"> |
| <section class="intro-panel"> |
| <h2>Focused consultation capture</h2> |
| <p>Record a session or enter the transcript manually. MedScribe structures the note into the sections clinicians actually review: history, prescriptions, orders, treatment plan, and summary.</p> |
| <div class="control-group"> |
| <div class="action-note">Runs locally in the browser</div> |
| <div class="action-note">Liquid AI extraction engine</div> |
| <div class="action-note">Printable report output</div> |
| </div> |
| </section> |
| <aside class="summary-panel"> |
| <h2>Workflow</h2> |
| <p>Use the session controls below, then review and print the generated note once the transcript has been processed.</p> |
| <dl> |
| <div> |
| <dt>Step 1</dt> |
| <dd>Start a session or open manual entry</dd> |
| </div> |
| <div> |
| <dt>Step 2</dt> |
| <dd>Capture or paste the consultation transcript</dd> |
| </div> |
| <div> |
| <dt>Step 3</dt> |
| <dd>Review the structured report and print when ready</dd> |
| </div> |
| </dl> |
| </aside> |
| </div> |
|
|
| <div class="status-bar"> |
| <div class="status-indicator" id="statusIndicator"></div> |
| <div class="status-text" id="statusText">Initializing...</div> |
| <div class="recording-wave" id="recordingWave"> |
| <div class="wave-bar"></div> |
| <div class="wave-bar"></div> |
| <div class="wave-bar"></div> |
| <div class="wave-bar"></div> |
| <div class="wave-bar"></div> |
| </div> |
| </div> |
|
|
| <div class="activity-progress hidden" id="activityProgress"> |
| <div class="activity-progress-card"> |
| <h2>Generating Report</h2> |
| <p class="activity-progress-copy">Please wait while the consultation is processed locally with Liquid AI.</p> |
| <div class="activity-progress-text" id="activityProgressText">Preparing report generation...</div> |
| <div class="progress-bar"> |
| <div class="progress-fill" id="activityProgressFill"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="controls"> |
| <button class="btn-primary" id="startBtn" disabled> |
| Start Session |
| </button> |
| <button class="btn-danger" id="stopBtn" disabled> |
| Finish and Generate |
| </button> |
| <button class="btn-secondary" id="printBtn" disabled> |
| Print Report |
| </button> |
| </div> |
|
|
| <div class="dashboard"> |
| <div class="widget full-width"> |
| <div class="widget-header"> |
| <h3>Transcript</h3> |
| <button class="btn-outline btn-small" id="toggleManualBtn" type="button"> |
| Manual Entry |
| </button> |
| </div> |
| <div class="widget-content" id="transcriptWidget"> |
| <div class="placeholder">The transcript will appear here once a session starts or manual text is submitted.</div> |
| </div> |
| <div class="manual-input-panel" id="manualInputSection"> |
| <p>Paste dictated notes or type the consultation transcript directly here, then generate the structured report.</p> |
| <textarea |
| class="manual-textarea" |
| id="manualTextInput" |
| placeholder="Enter or paste consultation transcript here... |
| |
| Example: Patient complains of headache for 3 days, fever since yesterday. History of present illness includes nausea and photophobia. On examination, patient appears febrile with temperature 38.5°C. BP 130/80 mmHg. |
| |
| Prescribed: Paracetamol 500mg TID for fever, Ibuprofen 400mg PRN for pain. |
| |
| Recommended: CBC, fasting blood sugar. Chest X-ray. |
| |
| Advice: Rest, plenty of fluids, soft diet." |
| ></textarea> |
| <div class="manual-actions"> |
| <button class="btn-primary" id="processTextBtn" type="button"> |
| Generate Report |
| </button> |
| <button class="btn-secondary btn-small" id="clearManualTextBtn" type="button"> |
| Clear Text |
| </button> |
| </div> |
| </div> |
| <audio id="audioPlayer" controls style="display: none;"></audio> |
| </div> |
|
|
| <div class="widget"> |
| <h3>Clinical Note</h3> |
| <div class="widget-content" id="incidentWidget"> |
| <div class="placeholder">Structured clinical details will appear after extraction.</div> |
| </div> |
| </div> |
|
|
| <div class="widget"> |
| <h3>Prescription</h3> |
| <div class="widget-content" id="prescriptionWidget"> |
| <div class="placeholder">Medication orders will appear after extraction.</div> |
| </div> |
| </div> |
|
|
| <div class="widget"> |
| <h3>Lab Orders</h3> |
| <div class="widget-content" id="labWidget"> |
| <div class="placeholder">Laboratory recommendations will appear after extraction.</div> |
| </div> |
| </div> |
|
|
| <div class="widget"> |
| <h3>Imaging Orders</h3> |
| <div class="widget-content" id="radiologyWidget"> |
| <div class="placeholder">Imaging recommendations will appear after extraction.</div> |
| </div> |
| </div> |
|
|
| <div class="widget"> |
| <h3>Treatment Plan</h3> |
| <div class="widget-content" id="treatmentWidget"> |
| <div class="placeholder">The treatment plan will appear after extraction.</div> |
| </div> |
| </div> |
|
|
| <div class="widget"> |
| <h3>Diet and Lifestyle</h3> |
| <div class="widget-content" id="dietWidget"> |
| <div class="placeholder">Dietary and lifestyle advice will appear after extraction.</div> |
| </div> |
| </div> |
|
|
| <div class="widget full-width"> |
| <h3>Clinical Summary</h3> |
| <div class="widget-content" id="summaryWidget"> |
| <div class="placeholder">The consultation summary will appear after extraction.</div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| </body> |
| </html> |
|
|
