1095 lines
42 KiB
HTML
1095 lines
42 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Precision Light — GP Clinical System</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--white: #FFFFFF;
|
|
--bg: #F8F9FA;
|
|
--bg-subtle: #F1F3F5;
|
|
--text: #1A1C1E;
|
|
--text-secondary: #5F6368;
|
|
--text-tertiary: #80868B;
|
|
--accent: #2563EB;
|
|
--accent-light: #EFF6FF;
|
|
--accent-hover: #1D4ED8;
|
|
--alert: #DC2626;
|
|
--alert-bg: #FEF2F2;
|
|
--warning: #D97706;
|
|
--warning-bg: #FFFBEB;
|
|
--success: #059669;
|
|
--success-bg: #ECFDF5;
|
|
--border: #E5E7EB;
|
|
--border-light: #F0F0F0;
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
|
|
--shadow-md: 0 2px 8px rgba(0,0,0,0.06);
|
|
--shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 10px;
|
|
--font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--font-serif: 'Instrument Serif', Georgia, serif;
|
|
--font-mono: 'DM Mono', 'SF Mono', monospace;
|
|
}
|
|
|
|
html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
|
body { font-family: var(--font-ui); color: var(--text); background: var(--bg); overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
|
|
|
|
/* ── PATIENT BANNER ── */
|
|
.patient-banner {
|
|
height: 80px;
|
|
background: var(--white);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
gap: 32px;
|
|
flex-shrink: 0;
|
|
z-index: 100;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.patient-banner__identity { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
|
|
.patient-banner__name {
|
|
font-family: var(--font-serif);
|
|
font-size: 1.7rem;
|
|
color: var(--text);
|
|
letter-spacing: -0.01em;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
.patient-banner__demo {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.patient-banner__demo-item {
|
|
font-size: 0.82rem;
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
line-height: 1;
|
|
}
|
|
.patient-banner__demo-item + .patient-banner__demo-item::before {
|
|
content: '·';
|
|
margin-right: 6px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
.patient-banner__details {
|
|
display: flex;
|
|
gap: 24px;
|
|
align-items: center;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.patient-banner__detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
.patient-banner__detail-label {
|
|
font-size: 0.68rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-tertiary);
|
|
line-height: 1;
|
|
}
|
|
.patient-banner__detail-value {
|
|
font-size: 0.82rem;
|
|
color: var(--text);
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.3;
|
|
}
|
|
.patient-banner__detail-value--mono {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.78rem;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.patient-banner__actions { display: flex; gap: 10px; align-items: center; margin-left: auto; flex-shrink: 0; }
|
|
.allergy-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--alert);
|
|
color: var(--white);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
padding: 6px 14px;
|
|
border-radius: 100px;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
box-shadow: 0 1px 4px rgba(220,38,38,0.3);
|
|
}
|
|
.allergy-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
|
|
.btn-alert-outline {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
border: 1.5px solid var(--warning);
|
|
color: var(--warning);
|
|
background: var(--warning-bg);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
padding: 5px 14px;
|
|
border-radius: 100px;
|
|
cursor: pointer;
|
|
letter-spacing: 0.02em;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.btn-alert-outline:hover { background: var(--warning); color: var(--white); }
|
|
.btn-alert-outline svg { width: 14px; height: 14px; }
|
|
|
|
/* ── TOOLBAR ── */
|
|
.toolbar {
|
|
height: 44px;
|
|
background: var(--white);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
gap: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
.toolbar__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 14px;
|
|
font-family: var(--font-ui);
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
border: none;
|
|
background: none;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
white-space: nowrap;
|
|
}
|
|
.toolbar__btn:hover { background: var(--bg); color: var(--text); }
|
|
.toolbar__btn--primary {
|
|
background: var(--accent);
|
|
color: var(--white);
|
|
}
|
|
.toolbar__btn--primary:hover { background: var(--accent-hover); color: var(--white); }
|
|
.toolbar__btn svg { width: 15px; height: 15px; flex-shrink: 0; }
|
|
.toolbar__sep { width: 1px; height: 24px; background: var(--border); margin: 0 8px; flex-shrink: 0; }
|
|
|
|
/* ── LAYOUT ── */
|
|
.app-body { display: flex; flex: 1; overflow: hidden; }
|
|
|
|
/* ── SIDEBAR ── */
|
|
.sidebar {
|
|
width: 220px;
|
|
background: var(--white);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
overflow-y: auto;
|
|
}
|
|
.sidebar__header {
|
|
padding: 16px 16px 8px;
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-tertiary);
|
|
}
|
|
.sidebar__nav { padding: 4px 8px; flex: 1; }
|
|
.sidebar__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
font-size: 0.82rem;
|
|
color: var(--text-secondary);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: all 0.12s ease;
|
|
user-select: none;
|
|
position: relative;
|
|
}
|
|
.sidebar__item:hover { background: var(--bg); color: var(--text); }
|
|
.sidebar__item--active {
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
font-weight: 500;
|
|
}
|
|
.sidebar__item--active .sidebar__icon { color: var(--accent); }
|
|
.sidebar__icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-tertiary); }
|
|
.sidebar__item--active .sidebar__icon { color: var(--accent); }
|
|
.sidebar__badge {
|
|
margin-left: auto;
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
color: var(--text-tertiary);
|
|
background: var(--bg);
|
|
padding: 1px 7px;
|
|
border-radius: 100px;
|
|
min-width: 22px;
|
|
text-align: center;
|
|
}
|
|
.sidebar__item--active .sidebar__badge {
|
|
background: rgba(37,99,235,0.12);
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* ── MAIN CONTENT ── */
|
|
.main-content { flex: 1; display: flex; overflow: hidden; }
|
|
|
|
/* ── CONSULTATION LIST ── */
|
|
.consult-list {
|
|
width: 45%;
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--white);
|
|
overflow: hidden;
|
|
}
|
|
.consult-list__header {
|
|
padding: 14px 20px 10px;
|
|
border-bottom: 1px solid var(--border-light);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-shrink: 0;
|
|
}
|
|
.consult-list__title {
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.consult-list__count {
|
|
font-size: 0.75rem;
|
|
color: var(--text-tertiary);
|
|
}
|
|
.consult-list__items { flex: 1; overflow-y: auto; }
|
|
.consult-item {
|
|
padding: 14px 20px;
|
|
border-bottom: 1px solid var(--border-light);
|
|
cursor: pointer;
|
|
transition: background 0.12s ease;
|
|
display: flex;
|
|
gap: 14px;
|
|
}
|
|
.consult-item:hover { background: var(--bg-subtle); }
|
|
.consult-item--active {
|
|
background: var(--accent-light);
|
|
border-left: 3px solid var(--accent);
|
|
padding-left: 17px;
|
|
}
|
|
.consult-item__date-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-width: 44px;
|
|
flex-shrink: 0;
|
|
padding-top: 2px;
|
|
}
|
|
.consult-item__day {
|
|
font-size: 1.15rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
line-height: 1;
|
|
}
|
|
.consult-item--active .consult-item__day { color: var(--accent); }
|
|
.consult-item__month {
|
|
font-size: 0.68rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
color: var(--text-tertiary);
|
|
letter-spacing: 0.04em;
|
|
margin-top: 2px;
|
|
}
|
|
.consult-item__year {
|
|
font-size: 0.65rem;
|
|
color: var(--text-tertiary);
|
|
margin-top: 1px;
|
|
}
|
|
.consult-item__body { flex: 1; min-width: 0; }
|
|
.consult-item__title {
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
margin-bottom: 3px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.consult-item--active .consult-item__title { color: var(--accent); font-weight: 600; }
|
|
.consult-item__clinician {
|
|
font-size: 0.75rem;
|
|
color: var(--text-tertiary);
|
|
}
|
|
.consult-item__type-badge {
|
|
font-size: 0.65rem;
|
|
font-weight: 500;
|
|
padding: 2px 8px;
|
|
border-radius: 100px;
|
|
margin-top: 6px;
|
|
display: inline-block;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.consult-item__type-badge--review { background: var(--accent-light); color: var(--accent); }
|
|
.consult-item__type-badge--routine { background: var(--success-bg); color: var(--success); }
|
|
.consult-item__type-badge--acute { background: var(--warning-bg); color: var(--warning); }
|
|
.consult-item__type-badge--admin { background: var(--bg-subtle); color: var(--text-tertiary); }
|
|
|
|
/* ── CONSULTATION DETAIL ── */
|
|
.consult-detail {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
background: var(--bg);
|
|
padding: 24px;
|
|
}
|
|
.consult-detail__card {
|
|
background: var(--white);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--border);
|
|
overflow: hidden;
|
|
}
|
|
.consult-detail__header {
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid var(--border-light);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
.consult-detail__header-left {}
|
|
.consult-detail__title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 4px;
|
|
}
|
|
.consult-detail__meta {
|
|
font-size: 0.8rem;
|
|
color: var(--text-tertiary);
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
}
|
|
.consult-detail__meta-item { display: flex; align-items: center; gap: 4px; }
|
|
.consult-detail__meta-item svg { width: 13px; height: 13px; }
|
|
.consult-detail__status {
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
padding: 4px 12px;
|
|
border-radius: 100px;
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.consult-detail__body { padding: 24px; }
|
|
.consult-detail__section { margin-bottom: 20px; }
|
|
.consult-detail__section:last-child { margin-bottom: 0; }
|
|
.consult-detail__section-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.consult-detail__section-label svg { width: 13px; height: 13px; }
|
|
.consult-detail__section-content {
|
|
font-size: 0.88rem;
|
|
line-height: 1.65;
|
|
color: var(--text);
|
|
}
|
|
.consult-detail__section-content p { margin-bottom: 4px; }
|
|
.consult-detail__section-content p:last-child { margin-bottom: 0; }
|
|
|
|
/* Exam values */
|
|
.exam-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.exam-item {
|
|
background: var(--bg);
|
|
border-radius: var(--radius-sm);
|
|
padding: 10px 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.exam-item__label {
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.exam-item__value {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.92rem;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
}
|
|
.exam-item__value--warning { color: var(--warning); }
|
|
.exam-item__note {
|
|
font-size: 0.7rem;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Plan items */
|
|
.plan-list { list-style: none; }
|
|
.plan-list li {
|
|
padding: 5px 0;
|
|
padding-left: 20px;
|
|
position: relative;
|
|
font-size: 0.86rem;
|
|
line-height: 1.55;
|
|
}
|
|
.plan-list li::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 12px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--accent);
|
|
background: var(--white);
|
|
}
|
|
|
|
/* Clinical codes */
|
|
.clinical-codes { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.clinical-code {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
padding: 4px 10px;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
.clinical-code__id { color: var(--accent); font-weight: 500; }
|
|
|
|
/* ── RIGHT SUMMARY PANEL ── */
|
|
.summary-panel {
|
|
width: 250px;
|
|
background: var(--white);
|
|
border-left: 1px solid var(--border);
|
|
overflow-y: auto;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.summary-section {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
.summary-section:last-child { border-bottom: none; }
|
|
.summary-section__title {
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.summary-section__count {
|
|
font-weight: 500;
|
|
background: var(--bg);
|
|
padding: 1px 7px;
|
|
border-radius: 100px;
|
|
font-size: 0.65rem;
|
|
}
|
|
.summary-item {
|
|
padding: 6px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
.summary-item + .summary-item { border-top: 1px solid var(--border-light); }
|
|
.summary-item__name {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
line-height: 1.3;
|
|
}
|
|
.summary-item__detail {
|
|
font-size: 0.72rem;
|
|
color: var(--text-tertiary);
|
|
}
|
|
.summary-item__detail--mono {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
/* Medication items */
|
|
.med-item { padding: 7px 0; }
|
|
.med-item + .med-item { border-top: 1px solid var(--border-light); }
|
|
.med-item__name { font-size: 0.8rem; font-weight: 500; color: var(--text); }
|
|
.med-item__dose { font-size: 0.72rem; color: var(--text-tertiary); font-family: var(--font-mono); }
|
|
.med-item__freq { font-size: 0.72rem; color: var(--text-tertiary); }
|
|
|
|
/* Result items */
|
|
.result-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 6px 0;
|
|
}
|
|
.result-item + .result-item { border-top: 1px solid var(--border-light); }
|
|
.result-item__label { font-size: 0.78rem; color: var(--text-secondary); }
|
|
.result-item__value {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
text-align: right;
|
|
}
|
|
.result-item__value--warning { color: var(--warning); }
|
|
.result-item__date { font-size: 0.65rem; color: var(--text-tertiary); display: block; }
|
|
|
|
/* Allergy summary */
|
|
.allergy-item {
|
|
background: var(--alert-bg);
|
|
border: 1px solid rgba(220,38,38,0.15);
|
|
border-radius: var(--radius-sm);
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.allergy-item__icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
background: var(--alert);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.allergy-item__icon svg { width: 14px; height: 14px; color: var(--white); }
|
|
.allergy-item__text {}
|
|
.allergy-item__name { font-size: 0.82rem; font-weight: 600; color: var(--alert); }
|
|
.allergy-item__reaction { font-size: 0.72rem; color: var(--text-secondary); }
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
|
|
|
|
/* Assessment tags */
|
|
.assessment-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
|
|
.assessment-tag {
|
|
font-size: 0.75rem;
|
|
padding: 3px 10px;
|
|
border-radius: 100px;
|
|
font-weight: 500;
|
|
}
|
|
.assessment-tag--ok { background: var(--success-bg); color: var(--success); }
|
|
.assessment-tag--warning { background: var(--warning-bg); color: var(--warning); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ════════════════════════════════════════════════════════ -->
|
|
<!-- PATIENT BANNER -->
|
|
<!-- ════════════════════════════════════════════════════════ -->
|
|
<header class="patient-banner">
|
|
<div class="patient-banner__identity">
|
|
<span class="patient-banner__name">Sarah Mitchell</span>
|
|
<div class="patient-banner__demo">
|
|
<span class="patient-banner__demo-item">14/03/1967</span>
|
|
<span class="patient-banner__demo-item">58 y</span>
|
|
<span class="patient-banner__demo-item">Female</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="patient-banner__details">
|
|
<div class="patient-banner__detail">
|
|
<span class="patient-banner__detail-label">NHS Number</span>
|
|
<span class="patient-banner__detail-value patient-banner__detail-value--mono">943 216 8821</span>
|
|
</div>
|
|
<div class="patient-banner__detail">
|
|
<span class="patient-banner__detail-label">Address</span>
|
|
<span class="patient-banner__detail-value">14 Oakfield Road, Bristol BS8 2BN</span>
|
|
</div>
|
|
<div class="patient-banner__detail">
|
|
<span class="patient-banner__detail-label">Telephone</span>
|
|
<span class="patient-banner__detail-value patient-banner__detail-value--mono">07712 845 392</span>
|
|
</div>
|
|
<div class="patient-banner__detail">
|
|
<span class="patient-banner__detail-label">Usual GP</span>
|
|
<span class="patient-banner__detail-value">Dr. J Patterson</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="patient-banner__actions">
|
|
<span class="allergy-badge">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
|
Penicillin Allergy
|
|
</span>
|
|
<button class="btn-alert-outline">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
|
|
Alerts
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ════════════════════════════════════════════════════════ -->
|
|
<!-- TOOLBAR -->
|
|
<!-- ════════════════════════════════════════════════════════ -->
|
|
<div class="toolbar">
|
|
<button class="toolbar__btn toolbar__btn--primary">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
New Consultation
|
|
</button>
|
|
<div class="toolbar__sep"></div>
|
|
<button class="toolbar__btn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2z"/><path d="M9 7h6"/><path d="M9 11h6"/><path d="M9 15h4"/></svg>
|
|
Prescribe
|
|
</button>
|
|
<button class="toolbar__btn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
|
|
Add Problem
|
|
</button>
|
|
<button class="toolbar__btn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
|
Order Investigation
|
|
</button>
|
|
<button class="toolbar__btn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/><polyline points="22,6 12,13 2,6"/></svg>
|
|
Refer
|
|
</button>
|
|
<button class="toolbar__btn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M9 15l2 2 4-4"/></svg>
|
|
Fit Note
|
|
</button>
|
|
<div class="toolbar__sep"></div>
|
|
<button class="toolbar__btn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
|
|
Print
|
|
</button>
|
|
<button class="toolbar__btn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><path d="M9 3v18"/><path d="M3 9h6"/><path d="M3 15h6"/></svg>
|
|
Task
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════════════ -->
|
|
<!-- APP BODY -->
|
|
<!-- ════════════════════════════════════════════════════════ -->
|
|
<div class="app-body">
|
|
|
|
<!-- ── LEFT SIDEBAR ── -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar__header">Medical Record</div>
|
|
<nav class="sidebar__nav">
|
|
|
|
<div class="sidebar__item sidebar__item--active">
|
|
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
|
Consultations
|
|
<span class="sidebar__badge">48</span>
|
|
</div>
|
|
|
|
<div class="sidebar__item">
|
|
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
Problems & Diagnoses
|
|
<span class="sidebar__badge">6</span>
|
|
</div>
|
|
|
|
<div class="sidebar__item">
|
|
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 7h6"/><path d="M9 11h6"/><path d="M9 15h4"/></svg>
|
|
Medications
|
|
<span class="sidebar__badge">3</span>
|
|
</div>
|
|
|
|
<div class="sidebar__item">
|
|
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
|
Allergies
|
|
<span class="sidebar__badge">1</span>
|
|
</div>
|
|
|
|
<div class="sidebar__item">
|
|
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
|
Investigations & Results
|
|
<span class="sidebar__badge">24</span>
|
|
</div>
|
|
|
|
<div class="sidebar__item">
|
|
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/><polyline points="22,6 12,13 2,6"/></svg>
|
|
Referrals
|
|
<span class="sidebar__badge">4</span>
|
|
</div>
|
|
|
|
<div class="sidebar__item">
|
|
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
Immunisations
|
|
<span class="sidebar__badge">12</span>
|
|
</div>
|
|
|
|
<div class="sidebar__item">
|
|
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
|
|
Documents & Letters
|
|
<span class="sidebar__badge">15</span>
|
|
</div>
|
|
|
|
<div class="sidebar__item">
|
|
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
|
Measurements
|
|
<span class="sidebar__badge">32</span>
|
|
</div>
|
|
|
|
<div class="sidebar__item">
|
|
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
|
|
Procedures
|
|
<span class="sidebar__badge">2</span>
|
|
</div>
|
|
|
|
<div class="sidebar__item">
|
|
<svg class="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
|
|
Family History
|
|
<span class="sidebar__badge">3</span>
|
|
</div>
|
|
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- ── MAIN SPLIT PANE ── -->
|
|
<div class="main-content">
|
|
|
|
<!-- CONSULTATION LIST -->
|
|
<div class="consult-list">
|
|
<div class="consult-list__header">
|
|
<span class="consult-list__title">Consultations</span>
|
|
<span class="consult-list__count">48 entries</span>
|
|
</div>
|
|
<div class="consult-list__items">
|
|
|
|
<!-- Active -->
|
|
<div class="consult-item consult-item--active">
|
|
<div class="consult-item__date-col">
|
|
<span class="consult-item__day">13</span>
|
|
<span class="consult-item__month">Feb</span>
|
|
<span class="consult-item__year">2026</span>
|
|
</div>
|
|
<div class="consult-item__body">
|
|
<div class="consult-item__title">Diabetes Annual Review</div>
|
|
<div class="consult-item__clinician">Dr. J Patterson</div>
|
|
<span class="consult-item__type-badge consult-item__type-badge--review">Annual Review</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="consult-item">
|
|
<div class="consult-item__date-col">
|
|
<span class="consult-item__day">28</span>
|
|
<span class="consult-item__month">Jan</span>
|
|
<span class="consult-item__year">2026</span>
|
|
</div>
|
|
<div class="consult-item__body">
|
|
<div class="consult-item__title">Knee Pain Review</div>
|
|
<div class="consult-item__clinician">Dr. R Williams</div>
|
|
<span class="consult-item__type-badge consult-item__type-badge--routine">Follow-Up</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="consult-item">
|
|
<div class="consult-item__date-col">
|
|
<span class="consult-item__day">15</span>
|
|
<span class="consult-item__month">Jan</span>
|
|
<span class="consult-item__year">2026</span>
|
|
</div>
|
|
<div class="consult-item__body">
|
|
<div class="consult-item__title">BP Check</div>
|
|
<div class="consult-item__clinician">Nurse S Brown</div>
|
|
<span class="consult-item__type-badge consult-item__type-badge--routine">Routine</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="consult-item">
|
|
<div class="consult-item__date-col">
|
|
<span class="consult-item__day">02</span>
|
|
<span class="consult-item__month">Dec</span>
|
|
<span class="consult-item__year">2025</span>
|
|
</div>
|
|
<div class="consult-item__body">
|
|
<div class="consult-item__title">Medication Review</div>
|
|
<div class="consult-item__clinician">Dr. J Patterson</div>
|
|
<span class="consult-item__type-badge consult-item__type-badge--admin">Admin</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="consult-item">
|
|
<div class="consult-item__date-col">
|
|
<span class="consult-item__day">18</span>
|
|
<span class="consult-item__month">Nov</span>
|
|
<span class="consult-item__year">2025</span>
|
|
</div>
|
|
<div class="consult-item__body">
|
|
<div class="consult-item__title">URTI</div>
|
|
<div class="consult-item__clinician">Dr. R Williams</div>
|
|
<span class="consult-item__type-badge consult-item__type-badge--acute">Acute</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="consult-item">
|
|
<div class="consult-item__date-col">
|
|
<span class="consult-item__day">05</span>
|
|
<span class="consult-item__month">Nov</span>
|
|
<span class="consult-item__year">2025</span>
|
|
</div>
|
|
<div class="consult-item__body">
|
|
<div class="consult-item__title">Flu Vaccination</div>
|
|
<div class="consult-item__clinician">Nurse S Brown</div>
|
|
<span class="consult-item__type-badge consult-item__type-badge--routine">Routine</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CONSULTATION DETAIL -->
|
|
<div class="consult-detail">
|
|
<div class="consult-detail__card">
|
|
<div class="consult-detail__header">
|
|
<div class="consult-detail__header-left">
|
|
<div class="consult-detail__title">Diabetes Annual Review</div>
|
|
<div class="consult-detail__meta">
|
|
<span class="consult-detail__meta-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
|
13/02/2026
|
|
</span>
|
|
<span class="consult-detail__meta-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
10:35
|
|
</span>
|
|
<span class="consult-detail__meta-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
Dr. James Patterson
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span class="consult-detail__status">Signed</span>
|
|
</div>
|
|
|
|
<div class="consult-detail__body">
|
|
|
|
<!-- History -->
|
|
<div class="consult-detail__section">
|
|
<div class="consult-detail__section-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
|
|
History
|
|
</div>
|
|
<div class="consult-detail__section-content">
|
|
<p>Annual review of Type 2 Diabetes Mellitus. Patient reports feeling generally well. Adherent to Metformin regimen with no reported hypoglycaemic episodes. Diet and exercise maintained, though knee pain has been limiting walking distance recently.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Examination -->
|
|
<div class="consult-detail__section">
|
|
<div class="consult-detail__section-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
|
Examination
|
|
</div>
|
|
<div class="exam-grid">
|
|
<div class="exam-item">
|
|
<span class="exam-item__label">Blood Pressure</span>
|
|
<span class="exam-item__value exam-item__value--warning">138/82 mmHg</span>
|
|
</div>
|
|
<div class="exam-item">
|
|
<span class="exam-item__label">Weight</span>
|
|
<span class="exam-item__value">74.2 kg</span>
|
|
</div>
|
|
<div class="exam-item">
|
|
<span class="exam-item__label">BMI</span>
|
|
<span class="exam-item__value exam-item__value--warning">27.4</span>
|
|
</div>
|
|
<div class="exam-item">
|
|
<span class="exam-item__label">HbA1c</span>
|
|
<span class="exam-item__value">52 mmol/mol</span>
|
|
<span class="exam-item__note">07/02/2026</span>
|
|
</div>
|
|
<div class="exam-item">
|
|
<span class="exam-item__label">Foot Exam</span>
|
|
<span class="exam-item__value" style="font-family:var(--font-ui);font-size:0.82rem;">Pulses present, sensation intact</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Assessment -->
|
|
<div class="consult-detail__section">
|
|
<div class="consult-detail__section-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
|
|
Assessment
|
|
</div>
|
|
<div class="consult-detail__section-content">
|
|
<p>Type 2 Diabetes Mellitus — reasonable control (HbA1c 52 mmol/mol). Hypertension slightly above target. BMI in overweight range — lifestyle advice given.</p>
|
|
<div class="assessment-tags">
|
|
<span class="assessment-tag assessment-tag--ok">HbA1c at target</span>
|
|
<span class="assessment-tag assessment-tag--warning">BP above target</span>
|
|
<span class="assessment-tag assessment-tag--warning">BMI overweight</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plan -->
|
|
<div class="consult-detail__section">
|
|
<div class="consult-detail__section-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
|
|
Plan
|
|
</div>
|
|
<ul class="plan-list">
|
|
<li>Continue Metformin 500mg BD</li>
|
|
<li>Repeat BP in 4 weeks — consider Amlodipine uptitration if remains above target</li>
|
|
<li>Dietitian referral discussed — patient to consider</li>
|
|
<li>Annual bloods due August 2026</li>
|
|
<li>Foot check due February 2027</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Clinical Codes -->
|
|
<div class="consult-detail__section">
|
|
<div class="consult-detail__section-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
|
Clinical Codes
|
|
</div>
|
|
<div class="clinical-codes">
|
|
<span class="clinical-code"><span class="clinical-code__id">[C10E.]</span> Diabetes mellitus Type 2</span>
|
|
<span class="clinical-code"><span class="clinical-code__id">[XaJQp]</span> Diabetes annual review</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ── RIGHT SUMMARY PANEL ── -->
|
|
<aside class="summary-panel">
|
|
|
|
<!-- Active Problems -->
|
|
<div class="summary-section">
|
|
<div class="summary-section__title">
|
|
Active Problems
|
|
<span class="summary-section__count">3</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-item__name">Type 2 Diabetes Mellitus</span>
|
|
<span class="summary-item__detail">Since 2019</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-item__name">Essential Hypertension</span>
|
|
<span class="summary-item__detail">Since 2015</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-item__name">Osteoarthritis — Right Knee</span>
|
|
<span class="summary-item__detail">Since 2021</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Medications -->
|
|
<div class="summary-section">
|
|
<div class="summary-section__title">
|
|
Current Medications
|
|
<span class="summary-section__count">3</span>
|
|
</div>
|
|
<div class="med-item">
|
|
<div class="med-item__name">Metformin 500mg</div>
|
|
<div class="med-item__dose">1 tablet</div>
|
|
<div class="med-item__freq">Twice daily (BD)</div>
|
|
</div>
|
|
<div class="med-item">
|
|
<div class="med-item__name">Amlodipine 5mg</div>
|
|
<div class="med-item__dose">1 tablet</div>
|
|
<div class="med-item__freq">Once daily (OD)</div>
|
|
</div>
|
|
<div class="med-item">
|
|
<div class="med-item__name">Ibuprofen 400mg</div>
|
|
<div class="med-item__dose">1 tablet</div>
|
|
<div class="med-item__freq">As required (PRN)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Latest Results -->
|
|
<div class="summary-section">
|
|
<div class="summary-section__title">
|
|
Latest Results
|
|
<span class="summary-section__count">4</span>
|
|
</div>
|
|
<div class="result-item">
|
|
<div>
|
|
<div class="result-item__label">HbA1c</div>
|
|
<span class="result-item__date">07/02/2026</span>
|
|
</div>
|
|
<div class="result-item__value">52 <span style="font-size:0.65rem;color:var(--text-tertiary);font-weight:400;">mmol/mol</span></div>
|
|
</div>
|
|
<div class="result-item">
|
|
<div>
|
|
<div class="result-item__label">eGFR</div>
|
|
<span class="result-item__date">07/02/2026</span>
|
|
</div>
|
|
<div class="result-item__value">78 <span style="font-size:0.65rem;color:var(--text-tertiary);font-weight:400;">mL/min</span></div>
|
|
</div>
|
|
<div class="result-item">
|
|
<div>
|
|
<div class="result-item__label">Total Cholesterol</div>
|
|
<span class="result-item__date">07/02/2026</span>
|
|
</div>
|
|
<div class="result-item__value result-item__value--warning">5.2 <span style="font-size:0.65rem;color:var(--text-tertiary);font-weight:400;">mmol/L</span></div>
|
|
</div>
|
|
<div class="result-item">
|
|
<div>
|
|
<div class="result-item__label">Blood Pressure</div>
|
|
<span class="result-item__date">13/02/2026</span>
|
|
</div>
|
|
<div class="result-item__value result-item__value--warning">138/82</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Allergies -->
|
|
<div class="summary-section">
|
|
<div class="summary-section__title">
|
|
Allergies
|
|
<span class="summary-section__count">1</span>
|
|
</div>
|
|
<div class="allergy-item">
|
|
<div class="allergy-item__icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
|
</div>
|
|
<div class="allergy-item__text">
|
|
<div class="allergy-item__name">Penicillin</div>
|
|
<div class="allergy-item__reaction">Reaction: Rash</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |