1270 lines
40 KiB
HTML
1270 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GP Clinical System — Bold Contemporary</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=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--bg: #F0F2F5;
|
|
--surface: #FFFFFF;
|
|
--text: #111827;
|
|
--secondary: #6B7280;
|
|
--border: #E5E7EB;
|
|
--border-light: #F3F4F6;
|
|
|
|
--clinical-blue: #2B5CE6;
|
|
--clinical-blue-light: #EBF0FD;
|
|
--clinical-blue-hover: #2350CC;
|
|
--problem-red: #E53E3E;
|
|
--problem-red-light: #FEE8E8;
|
|
--medication-amber: #D69E2E;
|
|
--medication-amber-light: #FEF7E0;
|
|
--result-purple: #7C3AED;
|
|
--result-purple-light: #F0EBFE;
|
|
--referral-teal: #0D9488;
|
|
--referral-teal-light: #E6F7F5;
|
|
--positive-green: #16A34A;
|
|
--positive-green-light: #E8F8EE;
|
|
|
|
--font-heading: 'Outfit', sans-serif;
|
|
--font-body: 'Inter', sans-serif;
|
|
--font-mono: 'IBM Plex Mono', monospace;
|
|
|
|
--sidebar-w: 220px;
|
|
--panel-w: 240px;
|
|
--banner-h: 80px;
|
|
--status-h: 28px;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
font-family: var(--font-body);
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ========== PATIENT BANNER ========== */
|
|
.patient-banner {
|
|
position: fixed; top: 0; left: 0; right: 0;
|
|
height: var(--banner-h);
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
border-left: 4px solid var(--clinical-blue);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px 0 18px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.banner-left { flex: 1; min-width: 0; }
|
|
|
|
.banner-line1 {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 16px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.patient-name {
|
|
font-family: var(--font-heading);
|
|
font-weight: 700;
|
|
font-size: 22px;
|
|
color: var(--text);
|
|
letter-spacing: -0.3px;
|
|
}
|
|
|
|
.demo-chips {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.demo-chip {
|
|
font-size: 11.5px;
|
|
font-weight: 500;
|
|
color: var(--secondary);
|
|
padding: 2px 8px;
|
|
background: var(--bg);
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.demo-divider {
|
|
color: var(--border);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.banner-line2 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
font-size: 12px;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.banner-line2 span { white-space: nowrap; }
|
|
|
|
.banner-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.allergy-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--problem-red);
|
|
color: #fff;
|
|
font-family: var(--font-heading);
|
|
font-weight: 700;
|
|
font-size: 11.5px;
|
|
letter-spacing: 0.4px;
|
|
padding: 6px 14px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.allergy-badge svg { flex-shrink: 0; }
|
|
|
|
.alerts-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 6px 12px;
|
|
background: var(--medication-amber-light);
|
|
border: 1px solid var(--medication-amber);
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
font-size: 11.5px;
|
|
color: #92600A;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ========== LAYOUT SHELL ========== */
|
|
.app-layout {
|
|
position: fixed;
|
|
top: var(--banner-h);
|
|
left: 0; right: 0;
|
|
bottom: var(--status-h);
|
|
display: flex;
|
|
}
|
|
|
|
/* ========== LEFT SIDEBAR ========== */
|
|
.sidebar {
|
|
width: var(--sidebar-w);
|
|
background: var(--surface);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-section {
|
|
padding: 10px 0;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.nav-group-label {
|
|
font-family: var(--font-heading);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
color: var(--secondary);
|
|
padding: 8px 16px 6px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 9px 14px 9px 0;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: background 0.12s;
|
|
border-left: 3px solid transparent;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.nav-item:hover { background: var(--bg); }
|
|
|
|
.nav-item.active {
|
|
background: var(--clinical-blue-light);
|
|
border-left-color: var(--clinical-blue);
|
|
}
|
|
.nav-item.active .nav-label { color: var(--clinical-blue); font-weight: 600; }
|
|
.nav-item.active .nav-count { background: var(--clinical-blue); color: #fff; }
|
|
|
|
.nav-item[data-color="blue"] { border-left-color: var(--clinical-blue); }
|
|
.nav-item[data-color="red"] { border-left-color: var(--problem-red); }
|
|
.nav-item[data-color="amber"] { border-left-color: var(--medication-amber); }
|
|
.nav-item[data-color="purple"]{ border-left-color: var(--result-purple); }
|
|
.nav-item[data-color="teal"] { border-left-color: var(--referral-teal); }
|
|
.nav-item[data-color="gray"] { border-left-color: var(--secondary); }
|
|
|
|
.nav-item.active[data-color="blue"] { background: var(--clinical-blue-light); border-left-color: var(--clinical-blue); }
|
|
|
|
.nav-icon {
|
|
width: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-left: 10px;
|
|
margin-right: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-icon svg { color: var(--secondary); }
|
|
.nav-item.active .nav-icon svg { color: var(--clinical-blue); }
|
|
|
|
.nav-label {
|
|
flex: 1;
|
|
font-size: 12.5px;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
}
|
|
|
|
.nav-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
background: var(--bg);
|
|
color: var(--secondary);
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Quick actions */
|
|
.quick-actions {
|
|
border-top: 1px solid var(--border);
|
|
padding: 10px 10px 12px;
|
|
}
|
|
|
|
.quick-actions-label {
|
|
font-family: var(--font-heading);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
color: var(--secondary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
width: 100%;
|
|
padding: 7px 10px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-family: var(--font-body);
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
margin-bottom: 4px;
|
|
transition: opacity 0.15s, transform 0.1s;
|
|
color: #fff;
|
|
}
|
|
|
|
.action-btn:hover { opacity: 0.88; }
|
|
.action-btn:active { transform: scale(0.98); }
|
|
|
|
.action-btn.blue { background: var(--clinical-blue); }
|
|
.action-btn.amber { background: var(--medication-amber); }
|
|
.action-btn.red { background: var(--problem-red); }
|
|
.action-btn.purple { background: var(--result-purple); }
|
|
.action-btn.teal { background: var(--referral-teal); }
|
|
|
|
.action-btn svg { flex-shrink: 0; }
|
|
|
|
/* ========== MAIN CONTENT ========== */
|
|
.main-content {
|
|
flex: 1;
|
|
display: flex;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* --- Consultation Timeline (Left ~40%) --- */
|
|
.timeline-pane {
|
|
width: 40%;
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.timeline-header {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.timeline-title {
|
|
font-family: var(--font-heading);
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.timeline-filter {
|
|
font-size: 11px;
|
|
color: var(--clinical-blue);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.timeline-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.timeline-entry {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 11px 16px 11px 12px;
|
|
cursor: pointer;
|
|
border-left: 3px solid transparent;
|
|
transition: background 0.12s;
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-entry:hover { background: #FAFBFC; }
|
|
|
|
.timeline-entry.selected {
|
|
background: var(--clinical-blue-light);
|
|
border-left-color: var(--clinical-blue);
|
|
}
|
|
|
|
.timeline-dot-col {
|
|
width: 28px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--clinical-blue);
|
|
border: 2px solid var(--clinical-blue-light);
|
|
position: relative;
|
|
z-index: 2;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.timeline-entry:not(:last-child) .timeline-dot-col::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 2px;
|
|
height: calc(100% + 8px);
|
|
background: var(--border);
|
|
z-index: 1;
|
|
}
|
|
|
|
.timeline-dot.green { background: var(--positive-green); border-color: var(--positive-green-light); }
|
|
.timeline-dot.amber { background: var(--medication-amber); border-color: var(--medication-amber-light); }
|
|
.timeline-dot.purple { background: var(--result-purple); border-color: var(--result-purple-light); }
|
|
|
|
.timeline-body { flex: 1; min-width: 0; }
|
|
|
|
.timeline-date {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--secondary);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.timeline-clinician {
|
|
font-weight: 600;
|
|
font-size: 12.5px;
|
|
color: var(--text);
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.timeline-type {
|
|
font-size: 11.5px;
|
|
font-weight: 500;
|
|
color: var(--clinical-blue);
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.timeline-preview {
|
|
font-size: 11.5px;
|
|
color: var(--secondary);
|
|
line-height: 1.45;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timeline-tag {
|
|
display: inline-block;
|
|
font-size: 9.5px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.timeline-tag.review { background: var(--clinical-blue-light); color: var(--clinical-blue); }
|
|
.timeline-tag.routine { background: var(--positive-green-light); color: var(--positive-green); }
|
|
.timeline-tag.acute { background: var(--problem-red-light); color: var(--problem-red); }
|
|
.timeline-tag.medication { background: var(--medication-amber-light); color: #92600A; }
|
|
.timeline-tag.vaccination { background: var(--referral-teal-light); color: var(--referral-teal); }
|
|
|
|
/* --- Consultation Detail (Right ~60%) --- */
|
|
.detail-pane {
|
|
width: 60%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.detail-tabs {
|
|
display: flex;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.detail-tab {
|
|
padding: 10px 16px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--secondary);
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.detail-tab:hover { color: var(--text); }
|
|
|
|
.detail-tab.active {
|
|
color: var(--clinical-blue);
|
|
border-bottom-color: var(--clinical-blue);
|
|
}
|
|
|
|
.detail-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
}
|
|
|
|
.detail-card {
|
|
background: var(--surface);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border);
|
|
padding: 18px 20px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.detail-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.detail-card-title {
|
|
font-family: var(--font-heading);
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.detail-card-meta {
|
|
font-size: 11px;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.detail-card-meta strong {
|
|
color: var(--text);
|
|
}
|
|
|
|
.section-heading {
|
|
font-family: var(--font-heading);
|
|
font-weight: 800;
|
|
font-size: 11px;
|
|
letter-spacing: 1.2px;
|
|
text-transform: uppercase;
|
|
color: var(--clinical-blue);
|
|
margin: 14px 0 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.section-heading:first-child { margin-top: 0; }
|
|
|
|
.section-heading::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--clinical-blue-light);
|
|
}
|
|
|
|
.clinical-text {
|
|
font-size: 12.5px;
|
|
line-height: 1.6;
|
|
color: var(--text);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.clinical-value {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-weight: 700;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
.clinical-value.blue { background: var(--clinical-blue-light); color: var(--clinical-blue); }
|
|
.clinical-value.green { background: var(--positive-green-light); color: #0F7D36; }
|
|
.clinical-value.amber { background: var(--medication-amber-light); color: #92600A; }
|
|
.clinical-value.purple { background: var(--result-purple-light); color: var(--result-purple); }
|
|
|
|
.snomed-block {
|
|
margin-top: 14px;
|
|
padding: 10px 14px;
|
|
background: var(--result-purple-light);
|
|
border-radius: 6px;
|
|
border-left: 3px solid var(--result-purple);
|
|
}
|
|
|
|
.snomed-label {
|
|
font-family: var(--font-heading);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.8px;
|
|
text-transform: uppercase;
|
|
color: var(--result-purple);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.snomed-code {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--result-purple);
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.snomed-code .desc {
|
|
color: var(--secondary);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
/* Plan items */
|
|
.plan-list {
|
|
list-style: none;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.plan-list li {
|
|
position: relative;
|
|
padding: 5px 0 5px 18px;
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.plan-list li::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0; top: 11px;
|
|
width: 8px; height: 8px;
|
|
border-radius: 2px;
|
|
background: var(--clinical-blue);
|
|
}
|
|
|
|
.plan-list li:nth-child(2)::before { background: var(--medication-amber); }
|
|
.plan-list li:nth-child(3)::before { background: var(--result-purple); }
|
|
.plan-list li:nth-child(4)::before { background: var(--referral-teal); }
|
|
.plan-list li:nth-child(5)::before { background: var(--positive-green); }
|
|
|
|
/* ========== RIGHT QUICK PANEL ========== */
|
|
.right-panel {
|
|
width: var(--panel-w);
|
|
background: var(--surface);
|
|
border-left: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.panel-section { margin-bottom: 0; }
|
|
|
|
.panel-header {
|
|
padding: 8px 14px;
|
|
font-family: var(--font-heading);
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
letter-spacing: 0.8px;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.panel-header.red { background: var(--problem-red); }
|
|
.panel-header.amber { background: var(--medication-amber); }
|
|
.panel-header.purple { background: var(--result-purple); }
|
|
|
|
.panel-header .count-badge {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
background: rgba(255,255,255,0.25);
|
|
padding: 1px 7px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.panel-items { padding: 6px 0; }
|
|
|
|
.panel-item {
|
|
padding: 7px 14px;
|
|
cursor: pointer;
|
|
transition: background 0.12s;
|
|
}
|
|
|
|
.panel-item:hover { background: var(--bg); }
|
|
|
|
.panel-item-name {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.panel-item-detail {
|
|
font-size: 11px;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.panel-item-detail .year {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.panel-item-med-dose {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.panel-item-med-freq {
|
|
font-size: 10.5px;
|
|
color: var(--secondary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.result-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 7px 14px;
|
|
cursor: pointer;
|
|
transition: background 0.12s;
|
|
}
|
|
|
|
.result-row:hover { background: var(--bg); }
|
|
|
|
.result-dot {
|
|
width: 8px; height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.result-dot.green { background: var(--positive-green); }
|
|
.result-dot.amber { background: var(--medication-amber); }
|
|
.result-dot.red { background: var(--problem-red); }
|
|
|
|
.result-info { flex: 1; min-width: 0; }
|
|
|
|
.result-name {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.result-val {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.allergy-panel-item {
|
|
padding: 9px 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.allergy-panel-drug {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--problem-red);
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.allergy-panel-reaction {
|
|
font-size: 11px;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.allergy-severity {
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
background: var(--problem-red-light);
|
|
color: var(--problem-red);
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* ========== STATUS BAR ========== */
|
|
.status-bar {
|
|
position: fixed;
|
|
bottom: 0; left: 0; right: 0;
|
|
height: var(--status-h);
|
|
background: #1E293B;
|
|
color: #94A3B8;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
font-size: 11px;
|
|
font-family: var(--font-mono);
|
|
font-weight: 500;
|
|
gap: 20px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.status-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 6px; height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--positive-green);
|
|
}
|
|
|
|
.status-rw {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: var(--positive-green);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar { width: 5px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
|
|
|
|
/* Medication issue table in detail */
|
|
.med-table-inline {
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.med-table-inline th {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
color: var(--secondary);
|
|
text-align: left;
|
|
padding: 4px 8px 6px;
|
|
border-bottom: 2px solid var(--border);
|
|
}
|
|
|
|
.med-table-inline td {
|
|
font-size: 12px;
|
|
padding: 6px 8px;
|
|
border-bottom: 1px solid var(--border-light);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.med-table-inline td:first-child { font-weight: 600; }
|
|
|
|
.med-table-inline .dose-cell {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.med-table-inline .status-active {
|
|
color: var(--positive-green);
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ==================== PATIENT BANNER ==================== -->
|
|
<header class="patient-banner">
|
|
<div class="banner-left">
|
|
<div class="banner-line1">
|
|
<span class="patient-name">Sarah Mitchell</span>
|
|
<div class="demo-chips">
|
|
<span class="demo-chip">DOB 14/03/1967</span>
|
|
<span class="demo-divider">|</span>
|
|
<span class="demo-chip">Age 58</span>
|
|
<span class="demo-divider">|</span>
|
|
<span class="demo-chip">Female</span>
|
|
<span class="demo-divider">|</span>
|
|
<span class="demo-chip">NHS 943 216 8821</span>
|
|
</div>
|
|
</div>
|
|
<div class="banner-line2">
|
|
<span>14 Oakfield Rd, Bristol BS8 2BN</span>
|
|
<span style="color: var(--border);">|</span>
|
|
<span>07712 845 392</span>
|
|
<span style="color: var(--border);">|</span>
|
|
<span>GP <strong style="color: var(--text);">Dr. J Patterson</strong></span>
|
|
</div>
|
|
</div>
|
|
<div class="banner-right">
|
|
<div class="alerts-indicator">
|
|
<svg width="13" height="13" fill="none" viewBox="0 0 24 24"><path d="M12 9v4m0 4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
|
2 Alerts
|
|
</div>
|
|
<div class="allergy-badge">
|
|
<svg width="14" height="14" fill="none" viewBox="0 0 24 24"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 15.75h.007v.008H12v-.008Z" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
|
ALLERGY: Penicillin
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ==================== APP LAYOUT ==================== -->
|
|
<div class="app-layout">
|
|
|
|
<!-- ========== LEFT SIDEBAR ========== -->
|
|
<nav class="sidebar">
|
|
<div class="nav-section">
|
|
<div class="nav-group-label">Clinical Record</div>
|
|
|
|
<div class="nav-item active" data-color="blue">
|
|
<div class="nav-icon"><svg width="15" height="15" fill="none" viewBox="0 0 24 24"><path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
<span class="nav-label">Consultations</span>
|
|
<span class="nav-count">24</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-color="red">
|
|
<div class="nav-icon"><svg width="15" height="15" fill="none" viewBox="0 0 24 24"><path d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
<span class="nav-label">Problems</span>
|
|
<span class="nav-count">3</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-color="amber">
|
|
<div class="nav-icon"><svg width="15" height="15" fill="none" viewBox="0 0 24 24"><path d="m9.75 3.104 5.5-.001a2.25 2.25 0 0 1 2.122 1.5l2.878 8.147V19.5a1.5 1.5 0 0 1-1.5 1.5h-13.5a1.5 1.5 0 0 1-1.5-1.5v-6.75l2.878-8.147a2.25 2.25 0 0 1 2.122-1.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
<span class="nav-label">Medications</span>
|
|
<span class="nav-count">3</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-color="red">
|
|
<div class="nav-icon"><svg width="15" height="15" fill="none" viewBox="0 0 24 24"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
<span class="nav-label">Allergies</span>
|
|
<span class="nav-count">1</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-color="purple">
|
|
<div class="nav-icon"><svg width="15" height="15" fill="none" viewBox="0 0 24 24"><path d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
<span class="nav-label">Results</span>
|
|
<span class="nav-count">18</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-color="teal">
|
|
<div class="nav-icon"><svg width="15" height="15" fill="none" viewBox="0 0 24 24"><path d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
<span class="nav-label">Referrals</span>
|
|
<span class="nav-count">2</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-color="gray">
|
|
<div class="nav-icon"><svg width="15" height="15" fill="none" viewBox="0 0 24 24"><path d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
<span class="nav-label">Immunisations</span>
|
|
<span class="nav-count">12</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-color="gray">
|
|
<div class="nav-icon"><svg width="15" height="15" fill="none" viewBox="0 0 24 24"><path d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
<span class="nav-label">Documents</span>
|
|
<span class="nav-count">8</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quick-actions">
|
|
<div class="quick-actions-label">Quick Actions</div>
|
|
<button class="action-btn blue">
|
|
<svg width="13" height="13" fill="none" viewBox="0 0 24 24"><path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
|
New Consultation
|
|
</button>
|
|
<button class="action-btn amber">
|
|
<svg width="13" height="13" fill="none" viewBox="0 0 24 24"><path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
|
Prescribe
|
|
</button>
|
|
<button class="action-btn red">
|
|
<svg width="13" height="13" fill="none" viewBox="0 0 24 24"><path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
|
Add Problem
|
|
</button>
|
|
<button class="action-btn purple">
|
|
<svg width="13" height="13" fill="none" viewBox="0 0 24 24"><path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
|
Order Test
|
|
</button>
|
|
<button class="action-btn teal">
|
|
<svg width="13" height="13" fill="none" viewBox="0 0 24 24"><path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
|
Refer
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ========== MAIN TWO-PANE SPLIT ========== -->
|
|
<div class="main-content">
|
|
|
|
<!-- --- Timeline Pane (Left ~40%) --- -->
|
|
<div class="timeline-pane">
|
|
<div class="timeline-header">
|
|
<span class="timeline-title">Consultation Timeline</span>
|
|
<span class="timeline-filter">
|
|
<svg width="12" height="12" fill="none" viewBox="0 0 24 24"><path d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Filter
|
|
</span>
|
|
</div>
|
|
<div class="timeline-list">
|
|
|
|
<!-- Entry 1 — SELECTED -->
|
|
<div class="timeline-entry selected">
|
|
<div class="timeline-dot-col"><div class="timeline-dot"></div></div>
|
|
<div class="timeline-body">
|
|
<div class="timeline-date">13/02/2026</div>
|
|
<div class="timeline-clinician">Dr. J Patterson</div>
|
|
<div class="timeline-type">Diabetes Annual Review</div>
|
|
<div class="timeline-preview">Annual diabetic review. HbA1c stable at 52. BP well controlled. Foot exam NAD. Discussed diet and exercise goals for coming year.</div>
|
|
<span class="timeline-tag review">Annual Review</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entry 2 -->
|
|
<div class="timeline-entry">
|
|
<div class="timeline-dot-col"><div class="timeline-dot amber"></div></div>
|
|
<div class="timeline-body">
|
|
<div class="timeline-date">28/01/2026</div>
|
|
<div class="timeline-clinician">Dr. R Williams</div>
|
|
<div class="timeline-type">Knee Pain</div>
|
|
<div class="timeline-preview">R knee pain worsening over past 3 weeks. Stiffness AM ~30min. OA knee — Ibuprofen PRN, physio referral discussed.</div>
|
|
<span class="timeline-tag acute">Acute</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entry 3 -->
|
|
<div class="timeline-entry">
|
|
<div class="timeline-dot-col"><div class="timeline-dot green"></div></div>
|
|
<div class="timeline-body">
|
|
<div class="timeline-date">15/01/2026</div>
|
|
<div class="timeline-clinician">Nurse S Brown</div>
|
|
<div class="timeline-type">BP Check</div>
|
|
<div class="timeline-preview">Routine BP monitoring. 128/78 — well controlled on Amlodipine 5mg. Repeat in 6 months.</div>
|
|
<span class="timeline-tag routine">Routine</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entry 4 -->
|
|
<div class="timeline-entry">
|
|
<div class="timeline-dot-col"><div class="timeline-dot amber"></div></div>
|
|
<div class="timeline-body">
|
|
<div class="timeline-date">02/12/2025</div>
|
|
<div class="timeline-clinician">Dr. J Patterson</div>
|
|
<div class="timeline-type">Medication Review</div>
|
|
<div class="timeline-preview">Routine medication review. All three medications reviewed and continued. No side effects reported. Compliance good.</div>
|
|
<span class="timeline-tag medication">Med Review</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entry 5 -->
|
|
<div class="timeline-entry">
|
|
<div class="timeline-dot-col"><div class="timeline-dot"></div></div>
|
|
<div class="timeline-body">
|
|
<div class="timeline-date">18/11/2025</div>
|
|
<div class="timeline-clinician">Dr. R Williams</div>
|
|
<div class="timeline-type">URTI</div>
|
|
<div class="timeline-preview">3-day history of sore throat, cough and rhinorrhoea. No fever. Tonsils — mild erythema, no exudate. Self-care advice given.</div>
|
|
<span class="timeline-tag acute">Acute</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entry 6 -->
|
|
<div class="timeline-entry">
|
|
<div class="timeline-dot-col"><div class="timeline-dot green"></div></div>
|
|
<div class="timeline-body">
|
|
<div class="timeline-date">05/11/2025</div>
|
|
<div class="timeline-clinician">Nurse S Brown</div>
|
|
<div class="timeline-type">Flu Vaccination</div>
|
|
<div class="timeline-preview">Seasonal influenza vaccination administered. Batch: FLU2025-4821. L deltoid. No immediate adverse reaction. Advised re common side effects.</div>
|
|
<span class="timeline-tag vaccination">Vaccination</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- --- Detail Pane (Right ~60%) --- -->
|
|
<div class="detail-pane">
|
|
<div class="detail-tabs">
|
|
<div class="detail-tab active">Consultation</div>
|
|
<div class="detail-tab">Medications Issued</div>
|
|
<div class="detail-tab">Investigations</div>
|
|
<div class="detail-tab">Referrals</div>
|
|
<div class="detail-tab">Codes</div>
|
|
</div>
|
|
|
|
<div class="detail-body">
|
|
<!-- Card: Consultation Header -->
|
|
<div class="detail-card">
|
|
<div class="detail-card-header">
|
|
<span class="detail-card-title">Diabetes Annual Review</span>
|
|
<span class="detail-card-meta"><strong>Dr. J Patterson</strong> · 13/02/2026 14:10 · Face-to-face</span>
|
|
</div>
|
|
|
|
<!-- HISTORY -->
|
|
<div class="section-heading">History</div>
|
|
<p class="clinical-text">
|
|
Patient attends for annual diabetic review. Reports good compliance with Metformin 500mg BD. No episodes of hypoglycaemia. No polyuria or polydipsia. Diet generally good — has reduced sugar intake. Walking 30 minutes 3x/week. No visual changes. No foot symptoms — no numbness, tingling or ulceration. Reports occasional right knee pain (managed separately).
|
|
</p>
|
|
|
|
<!-- EXAMINATION -->
|
|
<div class="section-heading">Examination</div>
|
|
<p class="clinical-text">
|
|
<strong>Vitals:</strong> BP <span class="clinical-value blue">132/82 mmHg</span> HR <span class="clinical-value blue">72 bpm</span> BMI <span class="clinical-value amber">28.4 kg/m²</span> Weight <span class="clinical-value blue">76.2 kg</span>
|
|
</p>
|
|
<p class="clinical-text" style="margin-top: 6px;">
|
|
<strong>Foot examination:</strong> Peripheral pulses palpable bilaterally. Monofilament sensation intact 10/10 sites. No calluses, ulceration or deformity. Skin intact. Nails well maintained.
|
|
</p>
|
|
|
|
<!-- ASSESSMENT -->
|
|
<div class="section-heading">Assessment</div>
|
|
<p class="clinical-text">
|
|
Type 2 diabetes mellitus — <strong>well controlled</strong>. HbA1c <span class="clinical-value green">52 mmol/mol</span> (target <58). Stable from previous <span class="clinical-value green">54 mmol/mol</span> (Aug 2025).
|
|
</p>
|
|
<p class="clinical-text">
|
|
Hypertension — <strong>controlled</strong>. BP at target on Amlodipine 5mg OD.
|
|
</p>
|
|
<p class="clinical-text">
|
|
Renal function: eGFR <span class="clinical-value green">78 mL/min</span> (stable). ACR <span class="clinical-value green">1.8 mg/mmol</span> (normal). Lipids: Total cholesterol <span class="clinical-value amber">5.2 mmol/L</span>, HDL <span class="clinical-value green">1.4 mmol/L</span>. QRISK3 score <span class="clinical-value blue">11.2%</span>.
|
|
</p>
|
|
|
|
<!-- PLAN -->
|
|
<div class="section-heading">Plan</div>
|
|
<ol class="plan-list">
|
|
<li>Continue current medications — Metformin 500mg BD, Amlodipine 5mg OD</li>
|
|
<li>Discuss statin initiation at next review given QRISK3 >10% — patient wishes to focus on lifestyle modification first</li>
|
|
<li>Repeat bloods in 6 months: HbA1c, U&Es, lipid profile, ACR</li>
|
|
<li>Diabetic eye screening — confirmed up to date (Oct 2025, no retinopathy)</li>
|
|
<li>Encouraged continued exercise, aim 150 min/week moderate activity. Dietary advice reinforced.</li>
|
|
</ol>
|
|
|
|
<!-- Medications issued this consultation -->
|
|
<div class="section-heading" style="margin-top: 18px;">Medications Issued</div>
|
|
<table class="med-table-inline">
|
|
<thead>
|
|
<tr><th>Drug</th><th>Dose</th><th>Qty</th><th>Status</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Metformin 500mg tablets</td>
|
|
<td class="dose-cell">1 tab BD</td>
|
|
<td class="dose-cell">56</td>
|
|
<td class="status-active">Active</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Amlodipine 5mg tablets</td>
|
|
<td class="dose-cell">1 tab OD</td>
|
|
<td class="dose-cell">28</td>
|
|
<td class="status-active">Active</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- SNOMED Codes -->
|
|
<div class="snomed-block">
|
|
<div class="snomed-label">SNOMED CT Codes</div>
|
|
<div class="snomed-code">
|
|
314772004 <span class="desc">— Diabetes mellitus annual review</span><br>
|
|
44054006 <span class="desc">— Type 2 diabetes mellitus</span><br>
|
|
271000000 <span class="desc">— HbA1c measurement</span><br>
|
|
163030003 <span class="desc">— Blood pressure reading</span><br>
|
|
401191002 <span class="desc">— Diabetic foot examination</span><br>
|
|
38341003 <span class="desc">— Essential hypertension</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /main-content -->
|
|
|
|
<!-- ========== RIGHT QUICK PANEL ========== -->
|
|
<aside class="right-panel">
|
|
|
|
<!-- Active Problems -->
|
|
<div class="panel-section">
|
|
<div class="panel-header red">
|
|
Active Problems
|
|
<span class="count-badge">3</span>
|
|
</div>
|
|
<div class="panel-items">
|
|
<div class="panel-item">
|
|
<div class="panel-item-name">Type 2 Diabetes Mellitus</div>
|
|
<div class="panel-item-detail">Diagnosed <span class="year">2019</span> · Active</div>
|
|
</div>
|
|
<div class="panel-item">
|
|
<div class="panel-item-name">Essential Hypertension</div>
|
|
<div class="panel-item-detail">Diagnosed <span class="year">2015</span> · Active</div>
|
|
</div>
|
|
<div class="panel-item">
|
|
<div class="panel-item-name">OA Right Knee</div>
|
|
<div class="panel-item-detail">Diagnosed <span class="year">2021</span> · Active</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Medications -->
|
|
<div class="panel-section">
|
|
<div class="panel-header amber">
|
|
Medications
|
|
<span class="count-badge">3</span>
|
|
</div>
|
|
<div class="panel-items">
|
|
<div class="panel-item">
|
|
<div class="panel-item-name">Metformin 500mg tablets</div>
|
|
<div class="panel-item-med-dose">1 tab BD</div>
|
|
<div class="panel-item-med-freq">Repeat · 56 tabs</div>
|
|
</div>
|
|
<div class="panel-item">
|
|
<div class="panel-item-name">Amlodipine 5mg tablets</div>
|
|
<div class="panel-item-med-dose">1 tab OD</div>
|
|
<div class="panel-item-med-freq">Repeat · 28 tabs</div>
|
|
</div>
|
|
<div class="panel-item">
|
|
<div class="panel-item-name">Ibuprofen 400mg tablets</div>
|
|
<div class="panel-item-med-dose">1 tab PRN</div>
|
|
<div class="panel-item-med-freq">Acute · 24 tabs</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Results -->
|
|
<div class="panel-section">
|
|
<div class="panel-header purple">
|
|
Recent Results
|
|
<span class="count-badge">3</span>
|
|
</div>
|
|
<div class="panel-items">
|
|
<div class="result-row">
|
|
<div class="result-dot green"></div>
|
|
<div class="result-info">
|
|
<div class="result-name">HbA1c</div>
|
|
<div class="panel-item-detail">10/02/2026</div>
|
|
</div>
|
|
<div class="result-val">52</div>
|
|
</div>
|
|
<div class="result-row">
|
|
<div class="result-dot green"></div>
|
|
<div class="result-info">
|
|
<div class="result-name">eGFR</div>
|
|
<div class="panel-item-detail">10/02/2026</div>
|
|
</div>
|
|
<div class="result-val">78</div>
|
|
</div>
|
|
<div class="result-row">
|
|
<div class="result-dot amber"></div>
|
|
<div class="result-info">
|
|
<div class="result-name">Total Cholesterol</div>
|
|
<div class="panel-item-detail">10/02/2026</div>
|
|
</div>
|
|
<div class="result-val">5.2</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Allergies -->
|
|
<div class="panel-section">
|
|
<div class="panel-header red">
|
|
Allergies
|
|
<span class="count-badge">1</span>
|
|
</div>
|
|
<div class="allergy-panel-item">
|
|
<div>
|
|
<div class="allergy-panel-drug">PENICILLIN</div>
|
|
<div class="allergy-panel-reaction">Reaction: Rash</div>
|
|
</div>
|
|
<span class="allergy-severity">Moderate</span>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
</div><!-- /app-layout -->
|
|
|
|
<!-- ==================== STATUS BAR ==================== -->
|
|
<div class="status-bar">
|
|
<span class="status-item">
|
|
<span class="status-dot"></span>
|
|
Riverside Medical Centre
|
|
</span>
|
|
<span class="status-item">Dr. J Patterson</span>
|
|
<span class="status-item">13/02/2026 14:35</span>
|
|
<span class="status-rw">
|
|
<svg width="10" height="10" fill="none" viewBox="0 0 24 24"><path d="M16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Record: Read/Write
|
|
</span>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |