الصفحات صعب
Clinic — Patient Chart
A clinician-side patient chart with a demographics header, a prominent allergy alert banner, and tabbed panels for summary, history, medications, allergies, and recent vitals with inline trend arrows.
فتح في المختبر
MCP
html css vanilla-js
الأهداف: JS HTML
الكود
:root {
--teal: #129c93;
--teal-d: #0c7a73;
--teal-700: #0a655f;
--teal-50: #e7f5f3;
--coral: #ff7a66;
--coral-soft: #ffe6df;
--ink: #16322f;
--ink-2: #3a534f;
--muted: #6b827e;
--bg: #f1f7f6;
--white: #ffffff;
--line: rgba(16, 50, 47, 0.1);
--line-2: rgba(16, 50, 47, 0.18);
--ok: #2f9e6f;
--warn: #d98a2b;
--pending: #6b7280;
--danger: #d4503e;
--font: "Inter", system-ui, -apple-system, sans-serif;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--shadow-1: 0 1px 2px rgba(16, 50, 47, 0.05), 0 4px 14px rgba(16, 50, 47, 0.06);
--shadow-2: 0 16px 40px rgba(12, 122, 115, 0.16);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
line-height: 1.5;
}
/* ── App bar ── */
.appbar {
background: var(--white);
border-bottom: 1px solid var(--line);
padding: 14px 28px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 20;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--ink);
}
.brand-mark {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
background: linear-gradient(150deg, var(--teal), var(--teal-d));
color: #fff;
font-size: 1.1rem;
font-weight: 700;
}
.brand-name {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.brand-name em {
font-style: normal;
color: var(--teal-d);
}
.appbar-actions {
display: flex;
align-items: center;
gap: 10px;
}
.ghost-btn {
border: 1px solid var(--line);
background: var(--white);
color: var(--ink-2);
border-radius: 11px;
padding: 9px 14px;
font: inherit;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.ghost-btn:hover {
background: var(--teal-50);
border-color: var(--teal);
}
.icon-btn {
width: 40px;
height: 40px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--white);
color: var(--ink-2);
font-size: 1.1rem;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.icon-btn:hover {
background: var(--teal-50);
border-color: var(--teal);
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--teal-d);
color: #fff;
font-weight: 700;
font-size: 0.82rem;
cursor: pointer;
}
/* ── Layout ── */
.chart {
max-width: 1020px;
margin: 0 auto;
padding: 22px 28px 56px;
display: flex;
flex-direction: column;
gap: 18px;
}
/* ── Allergy alert ── */
.alert {
display: flex;
align-items: center;
gap: 14px;
background: var(--coral-soft);
border: 1px solid rgba(212, 80, 62, 0.4);
border-left: 5px solid var(--danger);
border-radius: var(--r-md);
padding: 14px 18px;
box-shadow: var(--shadow-1);
}
.alert-ic {
width: 34px;
height: 34px;
flex: none;
display: grid;
place-items: center;
border-radius: 9px;
background: var(--danger);
color: #fff;
font-size: 1.1rem;
}
.alert-text {
flex: 1;
font-size: 0.92rem;
color: #7a2419;
}
.alert-text strong {
color: var(--danger);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.8rem;
}
.alert-sev {
font-weight: 700;
color: var(--danger);
}
.alert-mild {
font-weight: 600;
color: var(--warn);
}
.alert-close {
flex: none;
width: 30px;
height: 30px;
border: none;
border-radius: 8px;
background: rgba(212, 80, 62, 0.12);
color: var(--danger);
font-size: 0.85rem;
cursor: pointer;
transition: background 0.15s;
}
.alert-close:hover {
background: rgba(212, 80, 62, 0.22);
}
.alert-reopen {
align-self: flex-start;
border: 1px solid rgba(212, 80, 62, 0.4);
background: var(--white);
color: var(--danger);
border-radius: 999px;
padding: 8px 14px;
font: inherit;
font-weight: 700;
font-size: 0.82rem;
cursor: pointer;
}
.alert-reopen:hover {
background: var(--coral-soft);
}
/* ── Patient header ── */
.patient-head {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 22px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 26px;
flex-wrap: wrap;
box-shadow: var(--shadow-1);
}
.ph-id {
display: flex;
align-items: center;
gap: 16px;
}
.ph-avatar {
width: 64px;
height: 64px;
flex: none;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(150deg, var(--teal), var(--teal-d));
color: #fff;
font-weight: 800;
font-size: 1.3rem;
}
.ph-name h1 {
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.ph-line {
color: var(--muted);
font-size: 0.9rem;
margin-top: 2px;
}
.ph-flag {
display: inline-block;
margin-top: 8px;
background: var(--teal-50);
color: var(--teal-d);
border-radius: 999px;
padding: 3px 11px;
font-size: 0.74rem;
font-weight: 700;
}
.ph-meta {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 12px 30px;
}
.ph-meta dt {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
font-weight: 600;
}
.ph-meta dd {
font-size: 0.9rem;
font-weight: 600;
margin-top: 2px;
}
/* ── Tabs ── */
.tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--line);
overflow-x: auto;
}
.tab {
border: none;
background: transparent;
color: var(--muted);
font: inherit;
font-weight: 600;
font-size: 0.92rem;
padding: 12px 16px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s;
}
.tab:hover {
color: var(--ink);
}
.tab.is-active {
color: var(--teal-d);
border-bottom-color: var(--teal);
}
/* ── Panels ── */
.panel {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 22px 24px;
}
.panel[hidden] {
display: none;
}
.card-h {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 12px;
}
.muted-h {
margin-top: 22px;
color: var(--muted);
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.card {
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 16px 18px;
}
/* ── Problems / encounters ── */
.problems,
.encounters {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.problems li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
}
.problems li:last-child {
border-bottom: none;
}
.p-name {
font-weight: 600;
font-size: 0.92rem;
}
.p-meta {
font-size: 0.8rem;
color: var(--muted);
margin-top: 2px;
}
.encounters li {
display: flex;
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
font-size: 0.9rem;
}
.encounters li:last-child {
border-bottom: none;
}
.e-date {
flex: none;
width: 92px;
color: var(--teal-d);
font-weight: 600;
font-size: 0.84rem;
}
/* ── Snapshot ── */
.snapshot {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.snap {
background: var(--teal-50);
border-radius: var(--r-sm);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 3px;
}
.snap-k {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--teal-700);
font-weight: 600;
}
.snap-v {
font-size: 0.98rem;
font-weight: 700;
color: var(--ink);
}
/* ── Badges ── */
.badge {
font-size: 0.74rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
.badge.ok {
background: rgba(47, 158, 111, 0.14);
color: var(--ok);
}
.badge.warn {
background: rgba(217, 138, 43, 0.16);
color: var(--warn);
}
.badge.pending {
background: rgba(107, 114, 128, 0.14);
color: var(--pending);
}
.badge.danger {
background: rgba(212, 80, 62, 0.14);
color: var(--danger);
}
/* ── Timeline ── */
.timeline {
list-style: none;
position: relative;
padding-left: 24px;
}
.timeline::before {
content: "";
position: absolute;
left: 6px;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--line-2);
}
.timeline li {
position: relative;
display: flex;
gap: 16px;
padding: 10px 0;
}
.timeline li::before {
content: "";
position: absolute;
left: -22px;
top: 14px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--teal);
border: 2px solid var(--white);
box-shadow: 0 0 0 2px var(--teal-50);
}
.t-date {
flex: none;
width: 100px;
color: var(--teal-d);
font-weight: 600;
font-size: 0.84rem;
padding-top: 1px;
}
.t-title {
font-weight: 600;
font-size: 0.92rem;
}
.t-desc {
font-size: 0.84rem;
color: var(--muted);
margin-top: 2px;
}
/* ── Tables ── */
.table-wrap {
overflow-x: auto;
}
.med-table,
.vitals-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
.med-table th,
.vitals-table th {
text-align: left;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
font-weight: 600;
padding: 8px 12px;
border-bottom: 1px solid var(--line-2);
}
.med-table td,
.vitals-table td {
padding: 11px 12px;
border-bottom: 1px solid var(--line);
}
.vitals-table th[scope="row"] {
text-transform: none;
letter-spacing: 0;
font-size: 0.88rem;
color: var(--ink);
border-bottom: 1px solid var(--line);
}
.med-table tbody tr:hover,
.vitals-table tbody tr:hover {
background: var(--teal-50);
}
/* ── Discontinued meds ── */
.dc-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.dc-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
font-size: 0.9rem;
color: var(--ink-2);
text-decoration: line-through;
text-decoration-color: var(--line-2);
}
.dc-list li:last-child {
border-bottom: none;
}
.dc-reason {
font-size: 0.8rem;
color: var(--muted);
text-decoration: none;
}
/* ── Allergies ── */
.allergy-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.al-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-radius: var(--r-sm);
border: 1px solid var(--line);
border-left-width: 4px;
}
.al-row.sev-high {
border-left-color: var(--danger);
background: rgba(212, 80, 62, 0.05);
}
.al-row.sev-mid {
border-left-color: var(--warn);
background: rgba(217, 138, 43, 0.05);
}
.al-row.sev-low {
border-left-color: var(--ok);
background: rgba(47, 158, 111, 0.05);
}
.al-name {
font-weight: 600;
font-size: 0.94rem;
}
.al-meta {
font-size: 0.82rem;
color: var(--muted);
margin-top: 2px;
}
/* ── Trends & sparkline ── */
.trend {
font-weight: 700;
font-size: 0.9rem;
}
.trend.up {
color: var(--ok);
}
.trend.down {
color: var(--teal-d);
}
.trend.flat {
color: var(--muted);
}
.spark-card {
margin-top: 20px;
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 16px 18px;
}
.spark-label {
font-size: 0.78rem;
font-weight: 600;
color: var(--muted);
margin-bottom: 12px;
}
.spark {
display: flex;
align-items: flex-end;
gap: 10px;
height: 72px;
}
.spark span {
flex: 1;
height: var(--h);
border-radius: 6px 6px 0 0;
background: linear-gradient(180deg, var(--teal), var(--teal-d));
min-width: 14px;
}
/* ── Toast ── */
.toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translateX(-50%);
background: var(--ink);
color: #fff;
padding: 13px 20px;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 500;
box-shadow: var(--shadow-2);
z-index: 50;
max-width: 90vw;
}
@media (max-width: 760px) {
.grid-2 {
grid-template-columns: 1fr;
}
.snapshot {
grid-template-columns: repeat(2, 1fr);
}
.ph-meta {
grid-template-columns: repeat(2, auto);
}
.patient-head {
align-items: flex-start;
}
}// ── Toast ──────────────────────────────────────────────────────────────────
const toast = document.getElementById("toast");
function showToast(msg) {
toast.textContent = msg;
toast.hidden = false;
clearTimeout(showToast._t);
showToast._t = setTimeout(() => (toast.hidden = true), 2600);
}
// ── Tab switching ────────────────────────────────────────────────────────────
const tabs = Array.from(document.querySelectorAll(".tab"));
const panels = Array.from(document.querySelectorAll(".panel"));
function activateTab(name) {
for (const tab of tabs) {
const on = tab.dataset.tab === name;
tab.classList.toggle("is-active", on);
tab.setAttribute("aria-selected", on ? "true" : "false");
}
for (const panel of panels) {
const on = panel.dataset.panel === name;
panel.classList.toggle("is-active", on);
panel.hidden = !on;
}
}
document.querySelector(".tabs").addEventListener("click", (e) => {
const tab = e.target.closest(".tab");
if (!tab) return;
activateTab(tab.dataset.tab);
});
// ── Allergy alert: dismiss / re-open ─────────────────────────────────────────
const alert = document.getElementById("allergyAlert");
const alertClose = document.getElementById("alertClose");
const alertReopen = document.getElementById("alertReopen");
alertClose.addEventListener("click", () => {
alert.hidden = true;
alertReopen.hidden = false;
showToast("Allergy alert collapsed — allergies remain on file.");
});
alertReopen.addEventListener("click", () => {
alert.hidden = false;
alertReopen.hidden = true;
alertReopen.blur();
});
// ── Print chart ──────────────────────────────────────────────────────────────
document.getElementById("printBtn").addEventListener("click", () => {
showToast("Preparing chart for print — opening the print dialog…");
});<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
/>
<link rel="stylesheet" href="style.css" />
<title>Patient Chart · Northbridge Clinic</title>
</head>
<body>
<header class="appbar">
<a class="brand" href="#">
<span class="brand-mark" aria-hidden="true">✚</span>
<span class="brand-name">Northbridge <em>EHR</em></span>
</a>
<div class="appbar-actions">
<button class="ghost-btn" data-action="print" id="printBtn">⎙ Print chart</button>
<button class="icon-btn" aria-label="Search records">⌕</button>
<button class="avatar" aria-label="Signed in clinician">RP</button>
</div>
</header>
<main class="chart">
<div class="alert" id="allergyAlert" role="alert">
<span class="alert-ic" aria-hidden="true">⚠</span>
<p class="alert-text">
<strong>Allergies:</strong> Penicillin
<span class="alert-sev">(severe)</span> · Peanuts
<span class="alert-sev">(severe)</span> · Sulfa drugs
<span class="alert-mild">(mild)</span>
</p>
<button class="alert-close" id="alertClose" aria-label="Dismiss allergy alert">
✕
</button>
</div>
<button class="alert-reopen" id="alertReopen" hidden>
⚠ Show allergy alert
</button>
<section class="patient-head" aria-label="Patient demographics">
<div class="ph-id">
<span class="ph-avatar" aria-hidden="true">DM</span>
<div class="ph-name">
<h1>Daniela Moreno</h1>
<p class="ph-line">52 y · Female · Spanish / English</p>
<span class="ph-flag">Active patient</span>
</div>
</div>
<dl class="ph-meta">
<div><dt>MRN</dt><dd>NB-0048217</dd></div>
<div><dt>Date of birth</dt><dd>14 Mar 1974</dd></div>
<div><dt>Phone</dt><dd>(555) 204-7781</dd></div>
<div><dt>Primary clinician</dt><dd>Dr. Ravi Patel</dd></div>
<div><dt>Insurance</dt><dd>BlueCare PPO · #883102</dd></div>
<div><dt>Last seen</dt><dd>22 May 2026</dd></div>
</dl>
</section>
<div class="tabs" role="tablist" aria-label="Patient chart sections">
<button class="tab is-active" role="tab" aria-selected="true" data-tab="summary">
Summary
</button>
<button class="tab" role="tab" aria-selected="false" data-tab="history">
History
</button>
<button class="tab" role="tab" aria-selected="false" data-tab="meds">
Medications
</button>
<button class="tab" role="tab" aria-selected="false" data-tab="allergies">
Allergies
</button>
<button class="tab" role="tab" aria-selected="false" data-tab="vitals">
Vitals
</button>
</div>
<section class="panel is-active" role="tabpanel" data-panel="summary">
<div class="grid-2">
<div class="card">
<h3 class="card-h">Active problems</h3>
<ul class="problems">
<li>
<div><p class="p-name">Hypertension</p><p class="p-meta">Onset Feb 2019</p></div>
<span class="badge warn">Active</span>
</li>
<li>
<div><p class="p-name">Type 2 diabetes mellitus</p><p class="p-meta">Onset Aug 2020</p></div>
<span class="badge warn">Active</span>
</li>
<li>
<div><p class="p-name">Hyperlipidemia</p><p class="p-meta">Onset Aug 2020</p></div>
<span class="badge ok">Controlled</span>
</li>
</ul>
</div>
<div class="card">
<h3 class="card-h">Recent encounters</h3>
<ul class="encounters">
<li><span class="e-date">22 May 2026</span><span>Follow-up · Dr. Patel</span></li>
<li><span class="e-date">04 Apr 2026</span><span>Labs review · Telehealth</span></li>
<li><span class="e-date">11 Feb 2026</span><span>Annual physical · Dr. Patel</span></li>
</ul>
</div>
</div>
<div class="snapshot">
<div class="snap"><span class="snap-k">Code status</span><span class="snap-v">Full code</span></div>
<div class="snap"><span class="snap-k">Smoking</span><span class="snap-v">Former</span></div>
<div class="snap"><span class="snap-k">BMI</span><span class="snap-v">28.4</span></div>
<div class="snap"><span class="snap-k">Open orders</span><span class="snap-v">1</span></div>
</div>
</section>
<section class="panel" role="tabpanel" data-panel="history" hidden>
<h3 class="card-h">Encounter & diagnosis timeline</h3>
<ol class="timeline">
<li><span class="t-date">22 May 2026</span><div><p class="t-title">Follow-up visit</p><p class="t-desc">BP recheck; metformin dose reviewed.</p></div></li>
<li><span class="t-date">04 Apr 2026</span><div><p class="t-title">Lab results reviewed</p><p class="t-desc">HbA1c 7.1% — within target range.</p></div></li>
<li><span class="t-date">11 Feb 2026</span><div><p class="t-title">Annual physical</p><p class="t-desc">Full exam; lipid panel ordered.</p></div></li>
<li><span class="t-date">19 Sep 2025</span><div><p class="t-title">Procedure</p><p class="t-desc">Screening colonoscopy — normal findings.</p></div></li>
<li><span class="t-date">02 Aug 2020</span><div><p class="t-title">Diagnosis</p><p class="t-desc">Type 2 diabetes mellitus confirmed.</p></div></li>
</ol>
</section>
<section class="panel" role="tabpanel" data-panel="meds" hidden>
<h3 class="card-h">Current medications</h3>
<div class="table-wrap">
<table class="med-table">
<thead>
<tr><th scope="col">Medication</th><th scope="col">Dose</th><th scope="col">Frequency</th><th scope="col">Prescriber</th><th scope="col">Started</th></tr>
</thead>
<tbody>
<tr><td>Lisinopril</td><td>10 mg</td><td>Once daily</td><td>Dr. Patel</td><td>Feb 2019</td></tr>
<tr><td>Metformin</td><td>1000 mg</td><td>Twice daily</td><td>Dr. Patel</td><td>Aug 2020</td></tr>
<tr><td>Atorvastatin</td><td>20 mg</td><td>Nightly</td><td>Dr. Patel</td><td>Aug 2020</td></tr>
</tbody>
</table>
</div>
<h3 class="card-h muted-h">Discontinued</h3>
<ul class="dc-list">
<li><span>Glipizide 5 mg</span><span class="dc-reason">Stopped Aug 2020 · switched to metformin</span></li>
<li><span>Amoxicillin 500 mg</span><span class="dc-reason">Stopped Jun 2018 · allergy reaction</span></li>
</ul>
</section>
<section class="panel" role="tabpanel" data-panel="allergies" hidden>
<h3 class="card-h">Documented allergies</h3>
<ul class="allergy-list">
<li class="al-row sev-high">
<div><p class="al-name">Penicillin</p><p class="al-meta">Reaction: anaphylaxis</p></div>
<span class="badge danger">Severe</span>
</li>
<li class="al-row sev-high">
<div><p class="al-name">Peanuts</p><p class="al-meta">Reaction: throat swelling</p></div>
<span class="badge danger">Severe</span>
</li>
<li class="al-row sev-mid">
<div><p class="al-name">Latex</p><p class="al-meta">Reaction: contact dermatitis</p></div>
<span class="badge warn">Moderate</span>
</li>
<li class="al-row sev-low">
<div><p class="al-name">Sulfa drugs</p><p class="al-meta">Reaction: mild rash</p></div>
<span class="badge ok">Mild</span>
</li>
</ul>
</section>
<section class="panel" role="tabpanel" data-panel="vitals" hidden>
<h3 class="card-h">Recent vitals</h3>
<div class="table-wrap">
<table class="vitals-table">
<thead>
<tr><th scope="col">Measure</th><th scope="col">11 Feb</th><th scope="col">04 Apr</th><th scope="col">22 May</th><th scope="col">Trend</th></tr>
</thead>
<tbody>
<tr><th scope="row">Blood pressure</th><td>142/90</td><td>136/86</td><td>128/82</td><td><span class="trend down">▼</span></td></tr>
<tr><th scope="row">Heart rate</th><td>78</td><td>74</td><td>72</td><td><span class="trend down">▼</span></td></tr>
<tr><th scope="row">Temp (°C)</th><td>36.8</td><td>36.7</td><td>36.8</td><td><span class="trend flat">—</span></td></tr>
<tr><th scope="row">SpO₂</th><td>97%</td><td>98%</td><td>98%</td><td><span class="trend up">▲</span></td></tr>
<tr><th scope="row">Weight (kg)</th><td>79.0</td><td>78.2</td><td>77.6</td><td><span class="trend down">▼</span></td></tr>
<tr><th scope="row">BMI</th><td>28.9</td><td>28.6</td><td>28.4</td><td><span class="trend down">▼</span></td></tr>
</tbody>
</table>
</div>
<div class="spark-card">
<p class="spark-label">Systolic BP · last 6 readings</p>
<div class="spark" aria-hidden="true">
<span style="--h: 92%"></span>
<span style="--h: 88%"></span>
<span style="--h: 80%"></span>
<span style="--h: 84%"></span>
<span style="--h: 72%"></span>
<span style="--h: 64%"></span>
</div>
</div>
</section>
</main>
<div class="toast" id="toast" hidden role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Patient Chart
The view a clinician opens on a patient. A calm clinical-white layout in teal and soft coral
leads with a demographics banner — avatar initials, age and sex, MRN, date of birth, contact,
primary clinician, and insurance — under a prominent coral allergy alert that can be
dismissed and re-shown. A horizontal tab bar switches between Summary (active problem list,
recent encounters, snapshot), History (an encounter timeline), Medications (current and
discontinued), Allergies (severity-coded reactions), and Vitals (a small table across recent
dates with inline trend arrows and tiny CSS sparkline bars). Only one panel is visible at a
time, tabs carry aria-selected, and a print action raises a live-region toast. All
interactions are vanilla JS.
Illustrative UI only — not intended for real medical use.