1213 lines
31 KiB
HTML
1213 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Aurora — Clinical Record 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=Fira+Code:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
|
<style>
|
|
/* =========================================================
|
|
RESET & BASE
|
|
========================================================= */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
/* Gradient sidebar */
|
|
--sidebar-from: #312E81;
|
|
--sidebar-to: #4C1D95;
|
|
--sidebar-w: 240px;
|
|
|
|
/* Surfaces */
|
|
--surface-page: #F8FAFC;
|
|
--surface-card: #FFFFFF;
|
|
--surface-banner: #FFFFFF;
|
|
--surface-row-alt: #FAFBFD;
|
|
|
|
/* Accents */
|
|
--accent: #6366F1;
|
|
--accent-hover: #4F46E5;
|
|
--accent-light: rgba(99, 102, 241, 0.08);
|
|
--accent-lighter: rgba(99, 102, 241, 0.05);
|
|
--teal: #14B8A6;
|
|
--teal-light: rgba(20, 184, 166, 0.08);
|
|
|
|
/* Status */
|
|
--green-50: #F0FDF4;
|
|
--green-100: #DCFCE7;
|
|
--green-500: #22C55E;
|
|
--green-600: #16A34A;
|
|
--amber-50: #FFFBEB;
|
|
--amber-100: #FEF3C7;
|
|
--amber-500: #F59E0B;
|
|
--amber-600: #D97706;
|
|
--amber-700: #B45309;
|
|
--blue-50: #EFF6FF;
|
|
--blue-600: #2563EB;
|
|
--indigo-50: #EEF2FF;
|
|
--indigo-100: #E0E7FF;
|
|
|
|
/* Text */
|
|
--text-primary: #0F172A;
|
|
--text-secondary: #475569;
|
|
--text-muted: #94A3B8;
|
|
--text-on-dark: #FFFFFF;
|
|
|
|
/* Borders */
|
|
--border: #E2E8F0;
|
|
--border-light: #F1F5F9;
|
|
|
|
/* Shadows */
|
|
--shadow-card: 0 1px 3px rgba(0,0,0,0.05), 0 10px 30px rgba(0,0,0,0.04);
|
|
--shadow-card-hover: 0 4px 12px rgba(0,0,0,0.08), 0 20px 40px rgba(0,0,0,0.06);
|
|
--shadow-banner: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
|
|
|
|
/* Radii */
|
|
--radius-card: 14px;
|
|
--radius-pill: 100px;
|
|
--radius-sm: 8px;
|
|
--radius-xs: 6px;
|
|
|
|
/* Layout */
|
|
--banner-h: 82px;
|
|
--gradient-strip: 4px;
|
|
--top-offset: calc(var(--gradient-strip) + var(--banner-h));
|
|
|
|
/* Transitions */
|
|
--ease: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
html {
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
|
|
background: var(--surface-page);
|
|
color: var(--text-primary);
|
|
line-height: 1.55;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* =========================================================
|
|
GRADIENT TOP STRIP
|
|
========================================================= */
|
|
.gradient-strip {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: var(--gradient-strip);
|
|
background: linear-gradient(90deg, #312E81, #6366F1, #14B8A6, #6366F1, #4C1D95);
|
|
background-size: 200% 100%;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* =========================================================
|
|
SIDEBAR
|
|
========================================================= */
|
|
.sidebar {
|
|
position: fixed;
|
|
top: var(--gradient-strip);
|
|
left: 0;
|
|
bottom: 0;
|
|
width: var(--sidebar-w);
|
|
background: linear-gradient(180deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 900;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* subtle noise overlay on sidebar */
|
|
.sidebar::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sidebar-brand {
|
|
padding: 28px 22px 20px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
.sidebar-brand h1 {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--text-on-dark);
|
|
letter-spacing: -0.02em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sidebar-brand h1 .brand-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: rgba(255,255,255,0.12);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.sidebar-brand p {
|
|
font-size: 11.5px;
|
|
color: rgba(255,255,255,0.45);
|
|
margin-top: 4px;
|
|
padding-left: 42px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
flex: 1;
|
|
padding: 12px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 14px;
|
|
border-radius: 10px;
|
|
color: rgba(255,255,255,0.55);
|
|
font-size: 13.5px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s var(--ease);
|
|
position: relative;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
color: rgba(255,255,255,0.85);
|
|
background: rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: #FFFFFF;
|
|
background: rgba(255,255,255,0.10);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-item .nav-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
opacity: 0.8;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-item.active .nav-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.nav-shortcut {
|
|
margin-left: auto;
|
|
font-size: 10.5px;
|
|
font-family: 'Fira Code', monospace;
|
|
color: rgba(255,255,255,0.25);
|
|
background: rgba(255,255,255,0.06);
|
|
padding: 2px 7px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 16px 22px 20px;
|
|
border-top: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
.sidebar-footer .session-label {
|
|
font-size: 11px;
|
|
color: rgba(255,255,255,0.35);
|
|
font-weight: 500;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.sidebar-footer .session-user {
|
|
font-size: 12px;
|
|
color: rgba(255,255,255,0.65);
|
|
font-weight: 600;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.sidebar-footer .session-time {
|
|
font-size: 11px;
|
|
font-family: 'Fira Code', monospace;
|
|
color: rgba(255,255,255,0.30);
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* =========================================================
|
|
PATIENT BANNER
|
|
========================================================= */
|
|
.banner {
|
|
position: fixed;
|
|
top: var(--gradient-strip);
|
|
left: var(--sidebar-w);
|
|
right: 0;
|
|
height: var(--banner-h);
|
|
background: var(--surface-banner);
|
|
box-shadow: var(--shadow-banner);
|
|
z-index: 800;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 32px;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.banner-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.banner-avatar {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, var(--sidebar-from), var(--accent));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
flex-shrink: 0;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.banner-name-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.banner-name {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.banner-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
color: var(--green-600);
|
|
background: var(--green-50);
|
|
padding: 3px 10px;
|
|
border-radius: var(--radius-pill);
|
|
}
|
|
|
|
.banner-status .dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--green-500);
|
|
border-radius: 50%;
|
|
animation: pulse-dot 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
.banner-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
color: var(--accent);
|
|
background: var(--indigo-50);
|
|
padding: 3px 10px;
|
|
border-radius: var(--radius-pill);
|
|
}
|
|
|
|
.banner-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.banner-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.banner-meta-item .meta-label {
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.banner-meta-item .meta-value {
|
|
font-family: 'Fira Code', monospace;
|
|
font-size: 11.5px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.banner-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.banner-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 8px 16px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s var(--ease);
|
|
text-decoration: none;
|
|
border: none;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.banner-action.primary {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.banner-action.primary:hover {
|
|
background: var(--accent-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(99,102,241,0.25);
|
|
}
|
|
|
|
.banner-action.secondary {
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.banner-action.secondary:hover {
|
|
background: var(--surface-page);
|
|
border-color: #CBD5E1;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.banner-action .action-icon {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
/* =========================================================
|
|
MAIN CONTENT
|
|
========================================================= */
|
|
.main {
|
|
margin-left: var(--sidebar-w);
|
|
margin-top: var(--top-offset);
|
|
padding: 28px 32px 60px;
|
|
min-height: calc(100vh - var(--top-offset));
|
|
}
|
|
|
|
/* =========================================================
|
|
CLINICAL ALERT
|
|
========================================================= */
|
|
.clinical-alert {
|
|
background: linear-gradient(135deg, var(--amber-50), var(--amber-100));
|
|
border-radius: var(--radius-card);
|
|
padding: 16px 20px;
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
border: 1px solid rgba(245, 158, 11, 0.15);
|
|
position: relative;
|
|
}
|
|
|
|
.clinical-alert .alert-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--amber-600);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.clinical-alert .alert-label {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
color: var(--amber-700);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.clinical-alert .alert-text {
|
|
font-size: 13px;
|
|
color: var(--amber-700);
|
|
font-weight: 500;
|
|
flex: 1;
|
|
}
|
|
|
|
.clinical-alert .alert-dismiss {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
border: none;
|
|
background: rgba(180, 83, 9, 0.08);
|
|
color: var(--amber-600);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 0.15s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.clinical-alert .alert-dismiss:hover {
|
|
background: rgba(180, 83, 9, 0.15);
|
|
}
|
|
|
|
/* =========================================================
|
|
SECTION HEADER
|
|
========================================================= */
|
|
.section-header {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.section-header::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--border-light);
|
|
}
|
|
|
|
/* =========================================================
|
|
CARDS GRID
|
|
========================================================= */
|
|
.cards-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
.card {
|
|
background: var(--surface-card);
|
|
border-radius: var(--radius-card);
|
|
box-shadow: var(--shadow-card);
|
|
overflow: hidden;
|
|
transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
|
|
border: 1px solid rgba(0,0,0,0.03);
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: var(--shadow-card-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.card.full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 18px 22px 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.card-title .card-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.card-count {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
background: var(--surface-page);
|
|
padding: 2px 9px;
|
|
border-radius: var(--radius-pill);
|
|
}
|
|
|
|
.card-body {
|
|
padding: 18px 22px 22px;
|
|
}
|
|
|
|
/* =========================================================
|
|
DEMOGRAPHICS TABLE
|
|
========================================================= */
|
|
.demo-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.demo-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.demo-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.demo-label {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
width: 120px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.demo-value {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* =========================================================
|
|
PROBLEMS LIST
|
|
========================================================= */
|
|
.problem-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.problem-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.problem-status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
padding: 3px 10px;
|
|
border-radius: var(--radius-pill);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.problem-status-badge.active {
|
|
background: var(--green-50);
|
|
color: var(--green-600);
|
|
}
|
|
|
|
.problem-status-badge.in-progress {
|
|
background: var(--indigo-50);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.problem-text {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.problem-date {
|
|
font-size: 11px;
|
|
font-family: 'Fira Code', monospace;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* =========================================================
|
|
MEDICATIONS TABLE
|
|
========================================================= */
|
|
.meds-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.meds-table thead th {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
padding: 0 12px 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.meds-table thead th:nth-child(2) {
|
|
width: 160px;
|
|
}
|
|
|
|
.meds-table tbody tr {
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.meds-table tbody tr:hover {
|
|
background: var(--accent-lighter);
|
|
}
|
|
|
|
.meds-table tbody td {
|
|
padding: 12px 12px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
border-bottom: 1px solid var(--border-light);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.meds-table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.meds-table .drug-name {
|
|
font-weight: 600;
|
|
font-family: 'Fira Code', monospace;
|
|
font-size: 12.5px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.meds-table .dose-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.dose-bar-track {
|
|
flex: 1;
|
|
height: 6px;
|
|
background: var(--surface-page);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
max-width: 80px;
|
|
}
|
|
|
|
.dose-bar-fill {
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
background: linear-gradient(90deg, var(--accent), #818CF8);
|
|
transition: width 0.6s var(--ease);
|
|
}
|
|
|
|
.dose-pct {
|
|
font-family: 'Fira Code', monospace;
|
|
font-size: 11.5px;
|
|
color: var(--text-secondary);
|
|
min-width: 32px;
|
|
}
|
|
|
|
.freq-badge {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
background: var(--surface-page);
|
|
padding: 2px 10px;
|
|
border-radius: var(--radius-pill);
|
|
}
|
|
|
|
.status-active {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--green-600);
|
|
}
|
|
|
|
.status-active .dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
background: var(--green-500);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* =========================================================
|
|
LAST CONSULTATION
|
|
========================================================= */
|
|
.consult-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-bottom: 14px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.consult-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.consult-meta .meta-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.consult-meta .meta-label {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.consult-meta .meta-value {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.consult-divider {
|
|
width: 1px;
|
|
height: 16px;
|
|
background: var(--border);
|
|
}
|
|
|
|
.consult-role {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.consult-summary {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.65;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.consult-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 4px 11px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* =========================================================
|
|
SCROLLBAR
|
|
========================================================= */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #CBD5E1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #94A3B8;
|
|
}
|
|
|
|
/* =========================================================
|
|
RESPONSIVE
|
|
========================================================= */
|
|
@media (max-width: 1100px) {
|
|
.banner-meta {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Gradient top strip -->
|
|
<div class="gradient-strip"></div>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-brand">
|
|
<h1>
|
|
<span class="brand-icon">
|
|
<i data-lucide="heart-pulse" style="width:18px;height:18px;color:rgba(255,255,255,0.85)"></i>
|
|
</span>
|
|
Clinical Record
|
|
</h1>
|
|
<p>Patient Management</p>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<a class="nav-item active" href="#summary">
|
|
<i data-lucide="layout-dashboard" class="nav-icon"></i>
|
|
Summary
|
|
<span class="nav-shortcut">Alt+1</span>
|
|
</a>
|
|
<a class="nav-item" href="#experience">
|
|
<i data-lucide="briefcase" class="nav-icon"></i>
|
|
Experience
|
|
<span class="nav-shortcut">Alt+2</span>
|
|
</a>
|
|
<a class="nav-item" href="#skills">
|
|
<i data-lucide="flask-conical" class="nav-icon"></i>
|
|
Skills
|
|
<span class="nav-shortcut">Alt+3</span>
|
|
</a>
|
|
<a class="nav-item" href="#achievements">
|
|
<i data-lucide="trophy" class="nav-icon"></i>
|
|
Achievements
|
|
<span class="nav-shortcut">Alt+4</span>
|
|
</a>
|
|
<a class="nav-item" href="#projects">
|
|
<i data-lucide="folder-kanban" class="nav-icon"></i>
|
|
Projects
|
|
<span class="nav-shortcut">Alt+5</span>
|
|
</a>
|
|
<a class="nav-item" href="#education">
|
|
<i data-lucide="graduation-cap" class="nav-icon"></i>
|
|
Education
|
|
<span class="nav-shortcut">Alt+6</span>
|
|
</a>
|
|
<a class="nav-item" href="#contact">
|
|
<i data-lucide="mail" class="nav-icon"></i>
|
|
Contact
|
|
<span class="nav-shortcut">Alt+7</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="session-label">Session</div>
|
|
<div class="session-user">A.CHARLWOOD</div>
|
|
<div class="session-time" id="session-time">--:--:--</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Patient Banner -->
|
|
<header class="banner">
|
|
<div class="banner-left">
|
|
<div class="banner-avatar">AC</div>
|
|
<div>
|
|
<div class="banner-name-group">
|
|
<span class="banner-name">CHARLWOOD, Andrew (Mr)</span>
|
|
<span class="banner-status"><span class="dot"></span> Active</span>
|
|
<span class="banner-badge">
|
|
<i data-lucide="sparkles" style="width:12px;height:12px"></i>
|
|
Open to opportunities
|
|
</span>
|
|
</div>
|
|
<div class="banner-meta">
|
|
<div class="banner-meta-item">
|
|
<span class="meta-label">DOB</span>
|
|
<span class="meta-value">14/02/1993</span>
|
|
</div>
|
|
<div class="banner-meta-item">
|
|
<span class="meta-label">NHS No</span>
|
|
<span class="meta-value">221 181 0</span>
|
|
</div>
|
|
<div class="banner-meta-item">
|
|
<span class="meta-label">Address</span>
|
|
<span class="meta-value">Norwich, NR1</span>
|
|
</div>
|
|
<div class="banner-meta-item">
|
|
<span class="meta-label">Phone</span>
|
|
<span class="meta-value">07795553088</span>
|
|
</div>
|
|
<div class="banner-meta-item">
|
|
<span class="meta-label">Email</span>
|
|
<span class="meta-value">andy@charlwood.xyz</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="banner-right">
|
|
<button class="banner-action secondary">
|
|
<i data-lucide="linkedin" class="action-icon"></i>
|
|
LinkedIn
|
|
</button>
|
|
<button class="banner-action secondary">
|
|
<i data-lucide="mail" class="action-icon"></i>
|
|
Email
|
|
</button>
|
|
<button class="banner-action primary">
|
|
<i data-lucide="download" class="action-icon"></i>
|
|
Download CV
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main">
|
|
<!-- Clinical Alert -->
|
|
<div class="clinical-alert" id="clinical-alert">
|
|
<i data-lucide="alert-triangle" class="alert-icon"></i>
|
|
<span class="alert-label">Alert</span>
|
|
<span class="alert-text">This patient has identified <strong>£14.6M</strong> in prescribing efficiency savings across Norfolk & Waveney ICS.</span>
|
|
<button class="alert-dismiss" onclick="document.getElementById('clinical-alert').style.display='none'" aria-label="Dismiss alert">
|
|
<i data-lucide="x" style="width:14px;height:14px"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Section Header -->
|
|
<div class="section-header">Summary</div>
|
|
|
|
<!-- Cards Grid -->
|
|
<div class="cards-grid">
|
|
|
|
<!-- Card 1: Patient Demographics (full width) -->
|
|
<div class="card full">
|
|
<div class="card-header">
|
|
<span class="card-title">
|
|
<i data-lucide="user-circle" class="card-icon"></i>
|
|
Patient Demographics
|
|
</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="demo-grid">
|
|
<div class="demo-row">
|
|
<span class="demo-label">Name</span>
|
|
<span class="demo-value">Andrew Charlwood</span>
|
|
</div>
|
|
<div class="demo-row">
|
|
<span class="demo-label">Status</span>
|
|
<span class="demo-value" style="display:flex;align-items:center;gap:6px">
|
|
<span style="width:7px;height:7px;background:var(--green-500);border-radius:50%;display:inline-block"></span>
|
|
Active
|
|
</span>
|
|
</div>
|
|
<div class="demo-row">
|
|
<span class="demo-label">DOB</span>
|
|
<span class="demo-value" style="font-family:'Fira Code',monospace;font-size:12.5px">14/02/1993</span>
|
|
</div>
|
|
<div class="demo-row">
|
|
<span class="demo-label">Location</span>
|
|
<span class="demo-value">Norwich, NR1</span>
|
|
</div>
|
|
<div class="demo-row">
|
|
<span class="demo-label">Registration</span>
|
|
<span class="demo-value" style="font-family:'Fira Code',monospace;font-size:12.5px">GPhC 2211810</span>
|
|
</div>
|
|
<div class="demo-row">
|
|
<span class="demo-label">Since</span>
|
|
<span class="demo-value">August 2016</span>
|
|
</div>
|
|
<div class="demo-row">
|
|
<span class="demo-label">Qualification</span>
|
|
<span class="demo-value">MPharm (Hons) 2:1</span>
|
|
</div>
|
|
<div class="demo-row">
|
|
<span class="demo-label">University</span>
|
|
<span class="demo-value">UEA, 2015</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Active Problems (half width) -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">
|
|
<i data-lucide="activity" class="card-icon"></i>
|
|
Active Problems
|
|
</span>
|
|
<span class="card-count">3</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="problem-item">
|
|
<span class="problem-status-badge active">Active</span>
|
|
<div>
|
|
<div class="problem-text">£220M prescribing budget oversight</div>
|
|
<div class="problem-date">Jul 2024</div>
|
|
</div>
|
|
</div>
|
|
<div class="problem-item">
|
|
<span class="problem-status-badge in-progress">In Progress</span>
|
|
<div>
|
|
<div class="problem-text">Patient-level SQL analytics transformation</div>
|
|
<div class="problem-date">2025</div>
|
|
</div>
|
|
</div>
|
|
<div class="problem-item">
|
|
<span class="problem-status-badge in-progress">In Progress</span>
|
|
<div>
|
|
<div class="problem-text">Team data literacy programme</div>
|
|
<div class="problem-date">Jul 2024</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: Current Medications (half width) -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">
|
|
<i data-lucide="pill" class="card-icon"></i>
|
|
Current Medications (Quick View)
|
|
</span>
|
|
<span class="card-count">5</span>
|
|
</div>
|
|
<div class="card-body" style="padding:12px 8px 16px">
|
|
<table class="meds-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Drug</th>
|
|
<th>Dose</th>
|
|
<th>Freq</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="drug-name">Python</td>
|
|
<td>
|
|
<div class="dose-cell">
|
|
<div class="dose-bar-track"><div class="dose-bar-fill" style="width:90%"></div></div>
|
|
<span class="dose-pct">90%</span>
|
|
</div>
|
|
</td>
|
|
<td><span class="freq-badge">Daily</span></td>
|
|
<td><span class="status-active"><span class="dot"></span> Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="drug-name">SQL</td>
|
|
<td>
|
|
<div class="dose-cell">
|
|
<div class="dose-bar-track"><div class="dose-bar-fill" style="width:88%"></div></div>
|
|
<span class="dose-pct">88%</span>
|
|
</div>
|
|
</td>
|
|
<td><span class="freq-badge">Daily</span></td>
|
|
<td><span class="status-active"><span class="dot"></span> Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="drug-name">Power BI</td>
|
|
<td>
|
|
<div class="dose-cell">
|
|
<div class="dose-bar-track"><div class="dose-bar-fill" style="width:92%"></div></div>
|
|
<span class="dose-pct">92%</span>
|
|
</div>
|
|
</td>
|
|
<td><span class="freq-badge">Daily</span></td>
|
|
<td><span class="status-active"><span class="dot"></span> Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="drug-name">Data Analysis</td>
|
|
<td>
|
|
<div class="dose-cell">
|
|
<div class="dose-bar-track"><div class="dose-bar-fill" style="width:95%"></div></div>
|
|
<span class="dose-pct">95%</span>
|
|
</div>
|
|
</td>
|
|
<td><span class="freq-badge">Daily</span></td>
|
|
<td><span class="status-active"><span class="dot"></span> Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="drug-name">JS/TypeScript</td>
|
|
<td>
|
|
<div class="dose-cell">
|
|
<div class="dose-bar-track"><div class="dose-bar-fill" style="width:70%"></div></div>
|
|
<span class="dose-pct">70%</span>
|
|
</div>
|
|
</td>
|
|
<td><span class="freq-badge">Weekly</span></td>
|
|
<td><span class="status-active"><span class="dot"></span> Active</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Last Consultation (full width) -->
|
|
<div class="card full">
|
|
<div class="card-header">
|
|
<span class="card-title">
|
|
<i data-lucide="stethoscope" class="card-icon"></i>
|
|
Last Consultation
|
|
</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="consult-header">
|
|
<div class="consult-meta">
|
|
<i data-lucide="calendar" class="meta-icon"></i>
|
|
<span class="meta-label">Date</span>
|
|
<span class="meta-value">14 May 2025</span>
|
|
</div>
|
|
<div class="consult-divider"></div>
|
|
<div class="consult-meta">
|
|
<i data-lucide="building-2" class="meta-icon"></i>
|
|
<span class="meta-label">Organisation</span>
|
|
<span class="meta-value">NHS Norfolk & Waveney ICB</span>
|
|
</div>
|
|
</div>
|
|
<div class="consult-role">Interim Head, Population Health & Data Analysis</div>
|
|
<div class="consult-summary">
|
|
Led strategic delivery of population health initiatives and data-driven medicines optimisation across Norfolk & Waveney ICS.
|
|
</div>
|
|
<span class="consult-tag">
|
|
<i data-lucide="map-pin" style="width:12px;height:12px"></i>
|
|
Norfolk & Waveney ICS
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- / cards-grid -->
|
|
</main>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
// Update session clock
|
|
function updateClock() {
|
|
const now = new Date();
|
|
const hh = String(now.getHours()).padStart(2, '0');
|
|
const mm = String(now.getMinutes()).padStart(2, '0');
|
|
const ss = String(now.getSeconds()).padStart(2, '0');
|
|
document.getElementById('session-time').textContent = hh + ':' + mm + ':' + ss;
|
|
}
|
|
updateClock();
|
|
setInterval(updateClock, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|