1245 lines
32 KiB
HTML
1245 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Obsidian — Clinical Record Prototype</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=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
|
<style>
|
|
/* ========================================
|
|
RESET & BASE
|
|
======================================== */
|
|
*, *::before, *::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bg-deep: #0C0F14;
|
|
--bg-base: #12161E;
|
|
--bg-surface: #181D27;
|
|
--bg-elevated: #1E2533;
|
|
--border-subtle: #1E2533;
|
|
--border-medium: #2A3144;
|
|
--border-bright: #3B82F6;
|
|
|
|
--accent: #3B82F6;
|
|
--accent-dim: rgba(59, 130, 246, 0.15);
|
|
--accent-glow: rgba(59, 130, 246, 0.08);
|
|
|
|
--text-primary: rgba(255, 255, 255, 1);
|
|
--text-secondary: rgba(255, 255, 255, 0.7);
|
|
--text-muted: rgba(255, 255, 255, 0.4);
|
|
--text-faint: rgba(255, 255, 255, 0.25);
|
|
|
|
--green: #22C55E;
|
|
--green-dim: rgba(34, 197, 94, 0.15);
|
|
--amber: #F59E0B;
|
|
--amber-dim: rgba(245, 158, 11, 0.12);
|
|
--red: #EF4444;
|
|
|
|
--radius: 6px;
|
|
--radius-lg: 8px;
|
|
|
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
|
|
--shadow-banner: 0 2px 12px rgba(59, 130, 246, 0.06), 0 1px 4px rgba(0, 0, 0, 0.3);
|
|
--shadow-glow: 0 0 20px rgba(59, 130, 246, 0.1);
|
|
|
|
--sidebar-width: 220px;
|
|
--banner-height: 88px;
|
|
|
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
}
|
|
|
|
html {
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
background: var(--bg-deep);
|
|
color: var(--text-primary);
|
|
line-height: 1.5;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* ========================================
|
|
LAYOUT SHELL
|
|
======================================== */
|
|
.app-shell {
|
|
display: grid;
|
|
grid-template-columns: var(--sidebar-width) 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* ========================================
|
|
SIDEBAR
|
|
======================================== */
|
|
.sidebar {
|
|
grid-row: 1 / -1;
|
|
background: var(--bg-deep);
|
|
border-right: 1px solid var(--border-subtle);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
z-index: 20;
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 20px 16px 16px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.sidebar-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.sidebar-logo-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--accent);
|
|
border-radius: var(--radius);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--shadow-glow);
|
|
}
|
|
|
|
.sidebar-logo-icon svg {
|
|
color: white;
|
|
}
|
|
|
|
.sidebar-logo-text {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.sidebar-logo-sub {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
margin-left: 42px;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
flex: 1;
|
|
padding: 12px 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 9px 12px;
|
|
border-radius: var(--radius);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
position: relative;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: var(--accent-glow);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
font-weight: 500;
|
|
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
.nav-item.active::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 3px;
|
|
height: 18px;
|
|
background: var(--accent);
|
|
border-radius: 0 2px 2px 0;
|
|
box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.nav-item svg {
|
|
flex-shrink: 0;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.nav-item.active svg {
|
|
opacity: 1;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.nav-item:hover svg {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.nav-shortcut {
|
|
margin-left: auto;
|
|
font-size: 10px;
|
|
font-family: var(--font-mono);
|
|
color: var(--text-faint);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
padding: 1px 5px;
|
|
border-radius: 3px;
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 12px 16px;
|
|
border-top: 1px solid var(--border-subtle);
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.sidebar-footer-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.sidebar-footer-line:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.session-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--green);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
|
|
}
|
|
|
|
/* ========================================
|
|
PATIENT BANNER
|
|
======================================== */
|
|
.patient-banner {
|
|
background: var(--bg-surface);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
padding: 0 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
height: var(--banner-height);
|
|
gap: 24px;
|
|
box-shadow: var(--shadow-banner);
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.banner-identity {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.patient-name {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.patient-title {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.banner-badges {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 3px 10px;
|
|
border-radius: 100px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.badge-active {
|
|
background: var(--green-dim);
|
|
color: var(--green);
|
|
border: 1px solid rgba(34, 197, 94, 0.2);
|
|
}
|
|
|
|
.badge-active .status-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--green);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
|
|
animation: pulse-green 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse-green {
|
|
0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); }
|
|
50% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.9); }
|
|
}
|
|
|
|
.badge-accent {
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
border: 1px solid rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.banner-details {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.banner-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.banner-detail-label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-faint);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.banner-detail-value {
|
|
font-size: 12.5px;
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-mono);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.banner-detail-value a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.banner-detail-value a:hover {
|
|
color: #60A5FA;
|
|
}
|
|
|
|
.banner-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.btn-ghost {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 14px;
|
|
border-radius: var(--radius);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
font-family: var(--font-sans);
|
|
color: var(--text-secondary);
|
|
background: transparent;
|
|
border: 1px solid var(--border-medium);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.btn-ghost svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 14px;
|
|
border-radius: var(--radius);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
font-family: var(--font-sans);
|
|
color: white;
|
|
background: var(--accent);
|
|
border: 1px solid var(--accent);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #2563EB;
|
|
border-color: #2563EB;
|
|
box-shadow: 0 0 16px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
/* ========================================
|
|
CONTENT AREA
|
|
======================================== */
|
|
.content-area {
|
|
background: var(--bg-base);
|
|
overflow-y: auto;
|
|
padding: 24px;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border-medium) transparent;
|
|
}
|
|
|
|
.content-area::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.content-area::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.content-area::-webkit-scrollbar-thumb {
|
|
background: var(--border-medium);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.content-area::-webkit-scrollbar-thumb:hover {
|
|
background: var(--border-bright);
|
|
}
|
|
|
|
/* ========================================
|
|
CLINICAL ALERT
|
|
======================================== */
|
|
.clinical-alert {
|
|
background: var(--amber-dim);
|
|
border: 1px solid rgba(245, 158, 11, 0.2);
|
|
border-radius: var(--radius-lg);
|
|
padding: 12px 16px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
animation: alert-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
}
|
|
|
|
@keyframes alert-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.alert-icon {
|
|
flex-shrink: 0;
|
|
color: var(--amber);
|
|
}
|
|
|
|
.alert-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--amber);
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.alert-text {
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
flex: 1;
|
|
}
|
|
|
|
.alert-dismiss {
|
|
flex-shrink: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: var(--radius);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.alert-dismiss:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* ========================================
|
|
CARDS
|
|
======================================== */
|
|
.cards-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.card {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
border-color: var(--border-medium);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
.card-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 14px 18px 12px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.card-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.card-header-icon {
|
|
color: var(--accent);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.card-header-action {
|
|
font-size: 11px;
|
|
color: var(--accent);
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: color 0.15s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.card-header-action:hover {
|
|
color: #60A5FA;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 16px 18px;
|
|
}
|
|
|
|
/* ========================================
|
|
DEMOGRAPHICS TABLE
|
|
======================================== */
|
|
.demo-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.demo-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.demo-row:nth-child(odd) {
|
|
padding-right: 24px;
|
|
}
|
|
|
|
.demo-row:nth-child(even) {
|
|
padding-left: 24px;
|
|
border-left: 1px solid rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.demo-label {
|
|
font-size: 11.5px;
|
|
color: var(--text-muted);
|
|
width: 100px;
|
|
flex-shrink: 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.demo-value {
|
|
font-size: 13px;
|
|
color: var(--text-primary);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.demo-value.mono {
|
|
font-family: var(--font-mono);
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
/* ========================================
|
|
PROBLEMS LIST
|
|
======================================== */
|
|
.problem-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.problem-item:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.problem-item:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.problem-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 2px 8px;
|
|
border-radius: 100px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.problem-status.active {
|
|
background: var(--green-dim);
|
|
color: var(--green);
|
|
}
|
|
|
|
.problem-status.progress {
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.problem-status-dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
box-shadow: 0 0 4px currentColor;
|
|
}
|
|
|
|
.problem-text {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.problem-date {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ========================================
|
|
MEDICATIONS TABLE
|
|
======================================== */
|
|
.med-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.med-table thead th {
|
|
font-size: 10.5px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-faint);
|
|
text-align: left;
|
|
padding: 0 0 10px 0;
|
|
}
|
|
|
|
.med-table tbody tr {
|
|
transition: background 0.12s ease;
|
|
}
|
|
|
|
.med-table tbody tr:hover {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.med-table tbody tr:nth-child(even) {
|
|
background: rgba(255, 255, 255, 0.015);
|
|
}
|
|
|
|
.med-table tbody tr:nth-child(even):hover {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.med-table td {
|
|
padding: 9px 0;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.025);
|
|
}
|
|
|
|
.med-table td:first-child {
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
font-family: var(--font-mono);
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.med-table td:nth-child(2) {
|
|
font-family: var(--font-mono);
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.med-dose-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.dose-bar-track {
|
|
width: 60px;
|
|
height: 4px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dose-bar-fill {
|
|
height: 100%;
|
|
background: var(--accent);
|
|
border-radius: 2px;
|
|
box-shadow: 0 0 6px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.dose-bar-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
min-width: 30px;
|
|
}
|
|
|
|
.med-status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--green);
|
|
}
|
|
|
|
.med-status-dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
|
|
}
|
|
|
|
/* ========================================
|
|
CONSULTATION CARD
|
|
======================================== */
|
|
.consultation-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.consultation-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.consultation-meta-item svg {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.consultation-meta-label {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.consultation-meta-value {
|
|
font-size: 12.5px;
|
|
font-family: var(--font-mono);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.consultation-role {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.consultation-summary {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.consultation-divider {
|
|
height: 1px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
margin: 12px 0;
|
|
}
|
|
|
|
/* ========================================
|
|
SECTION HEADER
|
|
======================================== */
|
|
.section-header {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
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: linear-gradient(to right, var(--border-subtle), transparent);
|
|
}
|
|
|
|
/* ========================================
|
|
UTILITY
|
|
======================================== */
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
border: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="app-shell">
|
|
<!-- ====== SIDEBAR ====== -->
|
|
<aside class="sidebar" role="navigation" aria-label="Main navigation">
|
|
<div class="sidebar-header">
|
|
<div class="sidebar-logo">
|
|
<div class="sidebar-logo-icon">
|
|
<i data-lucide="activity" style="width:18px;height:18px;"></i>
|
|
</div>
|
|
<span class="sidebar-logo-text">PatientRecord</span>
|
|
</div>
|
|
<div class="sidebar-logo-sub">Clinical Portfolio System</div>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<a class="nav-item active" href="#summary">
|
|
<i data-lucide="layout-dashboard" style="width:16px;height:16px;"></i>
|
|
Summary
|
|
<span class="nav-shortcut">Alt+1</span>
|
|
</a>
|
|
<a class="nav-item" href="#experience">
|
|
<i data-lucide="briefcase" style="width:16px;height:16px;"></i>
|
|
Experience
|
|
<span class="nav-shortcut">Alt+2</span>
|
|
</a>
|
|
<a class="nav-item" href="#skills">
|
|
<i data-lucide="bar-chart-3" style="width:16px;height:16px;"></i>
|
|
Skills
|
|
<span class="nav-shortcut">Alt+3</span>
|
|
</a>
|
|
<a class="nav-item" href="#achievements">
|
|
<i data-lucide="award" style="width:16px;height:16px;"></i>
|
|
Achievements
|
|
<span class="nav-shortcut">Alt+4</span>
|
|
</a>
|
|
<a class="nav-item" href="#projects">
|
|
<i data-lucide="folder-open" style="width:16px;height:16px;"></i>
|
|
Projects
|
|
<span class="nav-shortcut">Alt+5</span>
|
|
</a>
|
|
<a class="nav-item" href="#education">
|
|
<i data-lucide="graduation-cap" style="width:16px;height:16px;"></i>
|
|
Education
|
|
<span class="nav-shortcut">Alt+6</span>
|
|
</a>
|
|
<a class="nav-item" href="#contact">
|
|
<i data-lucide="mail" style="width:16px;height:16px;"></i>
|
|
Contact
|
|
<span class="nav-shortcut">Alt+7</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="sidebar-footer-line">
|
|
<span class="session-dot"></span>
|
|
Session: A.CHARLWOOD
|
|
</div>
|
|
<div class="sidebar-footer-line" id="session-time">
|
|
00:00:00
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ====== PATIENT BANNER ====== -->
|
|
<header class="patient-banner">
|
|
<div class="banner-identity">
|
|
<span class="patient-name">CHARLWOOD, Andrew</span>
|
|
<span class="patient-title">(Mr)</span>
|
|
</div>
|
|
|
|
<div class="banner-badges">
|
|
<span class="badge badge-active">
|
|
<span class="status-dot"></span>
|
|
Active
|
|
</span>
|
|
<span class="badge badge-accent">
|
|
<i data-lucide="sparkles" style="width:11px;height:11px;"></i>
|
|
Open to opportunities
|
|
</span>
|
|
</div>
|
|
|
|
<div class="banner-details">
|
|
<div class="banner-detail">
|
|
<span class="banner-detail-label">DOB</span>
|
|
<span class="banner-detail-value">14/02/1993</span>
|
|
</div>
|
|
<div class="banner-detail">
|
|
<span class="banner-detail-label">NHS No</span>
|
|
<span class="banner-detail-value">221 181 0</span>
|
|
</div>
|
|
<div class="banner-detail">
|
|
<span class="banner-detail-label">Address</span>
|
|
<span class="banner-detail-value">Norwich, NR1</span>
|
|
</div>
|
|
<div class="banner-detail">
|
|
<span class="banner-detail-label">Phone</span>
|
|
<span class="banner-detail-value"><a href="tel:07795553088">07795553088</a></span>
|
|
</div>
|
|
<div class="banner-detail">
|
|
<span class="banner-detail-label">Email</span>
|
|
<span class="banner-detail-value"><a href="mailto:andy@charlwood.xyz">andy@charlwood.xyz</a></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="banner-actions">
|
|
<a class="btn-ghost" href="#">
|
|
<i data-lucide="download" style="width:14px;height:14px;"></i>
|
|
Download CV
|
|
</a>
|
|
<a class="btn-ghost" href="#">
|
|
<i data-lucide="mail" style="width:14px;height:14px;"></i>
|
|
Email
|
|
</a>
|
|
<a class="btn-primary" href="#">
|
|
<i data-lucide="linkedin" style="width:14px;height:14px;"></i>
|
|
LinkedIn
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ====== CONTENT AREA ====== -->
|
|
<main class="content-area">
|
|
<!-- Clinical Alert -->
|
|
<div class="clinical-alert" id="clinical-alert">
|
|
<span class="alert-icon">
|
|
<i data-lucide="alert-triangle" style="width:18px;height:18px;"></i>
|
|
</span>
|
|
<span class="alert-text">
|
|
<span class="alert-label">Alert:</span>
|
|
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 View</div>
|
|
|
|
<!-- Cards Grid -->
|
|
<div class="cards-grid">
|
|
|
|
<!-- Card 1: Patient Demographics -->
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-header-left">
|
|
<span class="card-header-icon"><i data-lucide="user" style="width:15px;height:15px;"></i></span>
|
|
<span class="card-title">Patient Demographics</span>
|
|
</div>
|
|
<a class="card-header-action" href="#">View full record</a>
|
|
</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"><span class="badge badge-active" style="padding:2px 8px;font-size:10.5px;"><span class="status-dot" style="width:5px;height:5px;"></span> Active</span></span>
|
|
</div>
|
|
<div class="demo-row">
|
|
<span class="demo-label">DOB</span>
|
|
<span class="demo-value mono">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 mono">GPhC 2211810</span>
|
|
</div>
|
|
<div class="demo-row">
|
|
<span class="demo-label">Since</span>
|
|
<span class="demo-value mono">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 -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-header-left">
|
|
<span class="card-header-icon"><i data-lucide="alert-circle" style="width:15px;height:15px;"></i></span>
|
|
<span class="card-title">Active Problems</span>
|
|
</div>
|
|
<a class="card-header-action" href="#">3 active</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="problem-item">
|
|
<span class="problem-status active">
|
|
<span class="problem-status-dot"></span>
|
|
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 progress">
|
|
<span class="problem-status-dot"></span>
|
|
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 progress">
|
|
<span class="problem-status-dot"></span>
|
|
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 -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-header-left">
|
|
<span class="card-header-icon"><i data-lucide="pill" style="width:15px;height:15px;"></i></span>
|
|
<span class="card-title">Current Medications (Quick View)</span>
|
|
</div>
|
|
<a class="card-header-action" href="#">View all</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="med-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:40%;">Drug</th>
|
|
<th style="width:28%;">Dose</th>
|
|
<th style="width:16%;">Freq</th>
|
|
<th style="width:16%;">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Python</td>
|
|
<td>
|
|
<div class="med-dose-bar">
|
|
<div class="dose-bar-track"><div class="dose-bar-fill" style="width:90%;"></div></div>
|
|
<span class="dose-bar-label">90%</span>
|
|
</div>
|
|
</td>
|
|
<td style="font-size:12px;color:var(--text-muted);">Daily</td>
|
|
<td><span class="med-status-badge"><span class="med-status-dot"></span> Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>SQL</td>
|
|
<td>
|
|
<div class="med-dose-bar">
|
|
<div class="dose-bar-track"><div class="dose-bar-fill" style="width:88%;"></div></div>
|
|
<span class="dose-bar-label">88%</span>
|
|
</div>
|
|
</td>
|
|
<td style="font-size:12px;color:var(--text-muted);">Daily</td>
|
|
<td><span class="med-status-badge"><span class="med-status-dot"></span> Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Power BI</td>
|
|
<td>
|
|
<div class="med-dose-bar">
|
|
<div class="dose-bar-track"><div class="dose-bar-fill" style="width:92%;"></div></div>
|
|
<span class="dose-bar-label">92%</span>
|
|
</div>
|
|
</td>
|
|
<td style="font-size:12px;color:var(--text-muted);">Daily</td>
|
|
<td><span class="med-status-badge"><span class="med-status-dot"></span> Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Data Analysis</td>
|
|
<td>
|
|
<div class="med-dose-bar">
|
|
<div class="dose-bar-track"><div class="dose-bar-fill" style="width:95%;"></div></div>
|
|
<span class="dose-bar-label">95%</span>
|
|
</div>
|
|
</td>
|
|
<td style="font-size:12px;color:var(--text-muted);">Daily</td>
|
|
<td><span class="med-status-badge"><span class="med-status-dot"></span> Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>JavaScript/TS</td>
|
|
<td>
|
|
<div class="med-dose-bar">
|
|
<div class="dose-bar-track"><div class="dose-bar-fill" style="width:70%;"></div></div>
|
|
<span class="dose-bar-label">70%</span>
|
|
</div>
|
|
</td>
|
|
<td style="font-size:12px;color:var(--text-muted);">Weekly</td>
|
|
<td><span class="med-status-badge"><span class="med-status-dot"></span> Active</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Last Consultation -->
|
|
<div class="card card-full">
|
|
<div class="card-header">
|
|
<div class="card-header-left">
|
|
<span class="card-header-icon"><i data-lucide="stethoscope" style="width:15px;height:15px;"></i></span>
|
|
<span class="card-title">Last Consultation</span>
|
|
</div>
|
|
<a class="card-header-action" href="#">View all consultations</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="consultation-meta">
|
|
<div class="consultation-meta-item">
|
|
<i data-lucide="calendar" style="width:13px;height:13px;"></i>
|
|
<span class="consultation-meta-label">Date</span>
|
|
<span class="consultation-meta-value">14 May 2025</span>
|
|
</div>
|
|
<div class="consultation-meta-item">
|
|
<i data-lucide="building-2" style="width:13px;height:13px;"></i>
|
|
<span class="consultation-meta-label">Organization</span>
|
|
<span class="consultation-meta-value">NHS Norfolk & Waveney ICB</span>
|
|
</div>
|
|
</div>
|
|
<div class="consultation-divider"></div>
|
|
<div class="consultation-role">Interim Head, Population Health & Data Analysis</div>
|
|
<div class="consultation-summary">
|
|
Led strategic delivery of population health initiatives and data-driven medicines optimisation across Norfolk & Waveney ICS.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
// Live clock in sidebar
|
|
function updateClock() {
|
|
const now = new Date();
|
|
const h = String(now.getHours()).padStart(2, '0');
|
|
const m = String(now.getMinutes()).padStart(2, '0');
|
|
const s = String(now.getSeconds()).padStart(2, '0');
|
|
document.getElementById('session-time').textContent = h + ':' + m + ':' + s;
|
|
}
|
|
updateClock();
|
|
setInterval(updateClock, 1000);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|