1153 lines
28 KiB
HTML
1153 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Clinical Record System — Bauhaus</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=Space+Grotesk:wght@500;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&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 {
|
|
--black: #111111;
|
|
--white: #FFFFFF;
|
|
--gray-50: #F5F5F5;
|
|
--gray-100: #EEEEEE;
|
|
--gray-200: #E0E0E0;
|
|
--gray-300: #BDBDBD;
|
|
--gray-400: #9E9E9E;
|
|
--gray-500: #757575;
|
|
--gray-600: #616161;
|
|
--gray-700: #424242;
|
|
--red: #E53935;
|
|
--blue: #1565C0;
|
|
--yellow: #FFC107;
|
|
--green: #2E7D32;
|
|
--amber: #F57F17;
|
|
|
|
--font-heading: 'Space Grotesk', sans-serif;
|
|
--font-mono: 'Space Mono', monospace;
|
|
|
|
--sidebar-width: 220px;
|
|
--banner-height: 72px;
|
|
--border: 2px solid var(--black);
|
|
--border-thin: 1px solid var(--black);
|
|
--border-gray: 1px solid var(--gray-200);
|
|
}
|
|
|
|
html {
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-mono);
|
|
font-weight: 400;
|
|
color: var(--black);
|
|
background: var(--white);
|
|
line-height: 1.5;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* ============================================
|
|
LAYOUT GRID
|
|
============================================ */
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: var(--sidebar-width) 1fr;
|
|
grid-template-rows: var(--banner-height) 1fr;
|
|
grid-template-areas:
|
|
"sidebar banner"
|
|
"sidebar content";
|
|
height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
/* ============================================
|
|
SIDEBAR
|
|
============================================ */
|
|
.sidebar {
|
|
grid-area: sidebar;
|
|
background: var(--white);
|
|
border-right: var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
}
|
|
|
|
.sidebar-brand {
|
|
padding: 16px 20px;
|
|
border-bottom: var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
height: var(--banner-height);
|
|
}
|
|
|
|
.sidebar-brand-mark {
|
|
width: 28px;
|
|
height: 28px;
|
|
background: var(--red);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sidebar-brand-mark svg {
|
|
color: var(--white);
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.sidebar-brand-text {
|
|
font-family: var(--font-heading);
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.sidebar-brand-sub {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--gray-500);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
flex: 1;
|
|
padding: 8px 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sidebar-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 20px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--gray-600);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: background 0.1s ease, color 0.1s ease;
|
|
position: relative;
|
|
border: none;
|
|
background: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.sidebar-nav-item:hover {
|
|
background: var(--gray-50);
|
|
color: var(--black);
|
|
}
|
|
|
|
.sidebar-nav-item.active {
|
|
color: var(--black);
|
|
font-weight: 700;
|
|
background: var(--gray-50);
|
|
}
|
|
|
|
.sidebar-nav-item.active::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 4px;
|
|
bottom: 4px;
|
|
width: 4px;
|
|
background: var(--red);
|
|
}
|
|
|
|
.sidebar-nav-item-number {
|
|
font-size: 10px;
|
|
color: var(--gray-400);
|
|
width: 14px;
|
|
text-align: right;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar-nav-item.active .sidebar-nav-item-number {
|
|
color: var(--red);
|
|
}
|
|
|
|
.sidebar-nav-item svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 12px 20px;
|
|
border-top: var(--border);
|
|
font-size: 10px;
|
|
color: var(--gray-500);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.sidebar-footer-session {
|
|
font-weight: 700;
|
|
color: var(--black);
|
|
}
|
|
|
|
/* ============================================
|
|
PATIENT BANNER
|
|
============================================ */
|
|
.banner {
|
|
grid-area: banner;
|
|
background: var(--black);
|
|
color: var(--white);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
gap: 0;
|
|
z-index: 10;
|
|
border-bottom: var(--border);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.banner-name-block {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
padding-right: 24px;
|
|
border-right: 1px solid var(--gray-700);
|
|
margin-right: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.banner-name {
|
|
font-family: var(--font-heading);
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
letter-spacing: 0.02em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.banner-title {
|
|
font-size: 11px;
|
|
color: var(--gray-400);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.banner-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-right: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.status-square {
|
|
width: 8px;
|
|
height: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.status-square--green { background: var(--green); }
|
|
.status-square--red { background: var(--red); }
|
|
.status-square--amber { background: var(--amber); }
|
|
.status-square--blue { background: var(--blue); }
|
|
|
|
.banner-status-text {
|
|
font-size: 11px;
|
|
color: var(--gray-300);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.banner-badge {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
padding: 3px 8px;
|
|
border: 1px solid var(--green);
|
|
color: var(--green);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.banner-details {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding-left: 24px;
|
|
border-left: 1px solid var(--gray-700);
|
|
}
|
|
|
|
.banner-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.banner-detail-label {
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
.banner-detail-value {
|
|
font-size: 12px;
|
|
color: var(--white);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.banner-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-left: auto;
|
|
padding-left: 24px;
|
|
border-left: 1px solid var(--gray-700);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.banner-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: transparent;
|
|
border: 1px solid var(--gray-700);
|
|
color: var(--gray-300);
|
|
cursor: pointer;
|
|
transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
|
|
}
|
|
|
|
.banner-action-btn:hover {
|
|
background: var(--white);
|
|
color: var(--black);
|
|
border-color: var(--white);
|
|
}
|
|
|
|
.banner-action-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* ============================================
|
|
CONTENT AREA
|
|
============================================ */
|
|
.content {
|
|
grid-area: content;
|
|
background: var(--white);
|
|
overflow-y: auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
.content-inner {
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ============================================
|
|
CLINICAL ALERT
|
|
============================================ */
|
|
.alert {
|
|
background: var(--yellow);
|
|
color: var(--black);
|
|
padding: 12px 16px;
|
|
border-left: 6px solid var(--black);
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.alert svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.alert-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.alert-dismiss {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
border: 1px solid var(--black);
|
|
color: var(--black);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: background 0.1s ease;
|
|
}
|
|
|
|
.alert-dismiss:hover {
|
|
background: var(--black);
|
|
color: var(--yellow);
|
|
}
|
|
|
|
.alert-dismiss svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
/* ============================================
|
|
SECTION HEADER
|
|
============================================ */
|
|
.section-header {
|
|
font-family: var(--font-heading);
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--gray-500);
|
|
padding-bottom: 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
CARDS
|
|
============================================ */
|
|
.cards-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.card {
|
|
border: var(--border);
|
|
background: var(--white);
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.card:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.card--full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.card--half {
|
|
grid-column: span 1;
|
|
}
|
|
|
|
/* Adjacent half-width cards: remove left border on the second one */
|
|
.card--half + .card--half {
|
|
border-left: none;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 14px 20px;
|
|
border-bottom: var(--border-thin);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: var(--gray-50);
|
|
}
|
|
|
|
.card-title {
|
|
font-family: var(--font-heading);
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.card-header-action {
|
|
font-size: 10px;
|
|
color: var(--blue);
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
cursor: pointer;
|
|
transition: color 0.1s ease;
|
|
}
|
|
|
|
.card-header-action:hover {
|
|
color: var(--red);
|
|
}
|
|
|
|
.card-body {
|
|
padding: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
DEMOGRAPHICS TABLE
|
|
============================================ */
|
|
.demo-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.demo-table td {
|
|
padding: 10px 20px;
|
|
font-size: 12px;
|
|
border-bottom: var(--border-gray);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.demo-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.demo-table .demo-label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--gray-500);
|
|
width: 120px;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.demo-table .demo-value {
|
|
font-weight: 700;
|
|
color: var(--black);
|
|
}
|
|
|
|
.demo-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.demo-grid-cell {
|
|
padding: 12px 20px;
|
|
border-bottom: var(--border-gray);
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.demo-grid-cell:nth-child(odd) {
|
|
border-right: var(--border-gray);
|
|
}
|
|
|
|
.demo-grid-label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--gray-500);
|
|
width: 100px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.demo-grid-value {
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
color: var(--black);
|
|
}
|
|
|
|
/* ============================================
|
|
PROBLEMS LIST
|
|
============================================ */
|
|
.problems-list {
|
|
list-style: none;
|
|
}
|
|
|
|
.problem-item {
|
|
padding: 12px 20px;
|
|
border-bottom: var(--border-gray);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.problem-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.problem-status {
|
|
margin-top: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.problem-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.problem-name {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--black);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.problem-meta {
|
|
font-size: 10px;
|
|
color: var(--gray-500);
|
|
margin-top: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.problem-tag {
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
padding: 2px 6px;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.problem-tag--active {
|
|
color: var(--green);
|
|
border-color: var(--green);
|
|
}
|
|
|
|
.problem-tag--progress {
|
|
color: var(--blue);
|
|
border-color: var(--blue);
|
|
}
|
|
|
|
/* ============================================
|
|
MEDICATIONS TABLE
|
|
============================================ */
|
|
.meds-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.meds-table thead {
|
|
background: var(--black);
|
|
color: var(--white);
|
|
}
|
|
|
|
.meds-table th {
|
|
padding: 8px 16px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
text-align: left;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.meds-table td {
|
|
padding: 10px 16px;
|
|
font-size: 12px;
|
|
border-bottom: var(--border-gray);
|
|
}
|
|
|
|
.meds-table tbody tr:hover {
|
|
background: var(--gray-50);
|
|
}
|
|
|
|
.meds-table .drug-name {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.meds-table .dose-value {
|
|
font-family: var(--font-heading);
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
letter-spacing: -0.02em;
|
|
color: var(--black);
|
|
}
|
|
|
|
.meds-table .dose-unit {
|
|
font-size: 10px;
|
|
color: var(--gray-500);
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.meds-table .status-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* ============================================
|
|
CONSULTATION CARD
|
|
============================================ */
|
|
.consult-header {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 0;
|
|
border-bottom: var(--border-gray);
|
|
}
|
|
|
|
.consult-date-block {
|
|
padding: 16px 20px;
|
|
border-right: var(--border-gray);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.consult-date-day {
|
|
font-family: var(--font-heading);
|
|
font-weight: 700;
|
|
font-size: 32px;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.consult-date-month {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--gray-500);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.consult-date-year {
|
|
font-size: 10px;
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
.consult-info {
|
|
padding: 12px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.consult-org {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
.consult-role {
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
color: var(--black);
|
|
}
|
|
|
|
.consult-body {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.consult-summary-label {
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--gray-400);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.consult-summary-text {
|
|
font-size: 12px;
|
|
color: var(--gray-700);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ============================================
|
|
SCROLLBAR
|
|
============================================ */
|
|
.content::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.content::-webkit-scrollbar-track {
|
|
background: var(--white);
|
|
border-left: var(--border-thin);
|
|
}
|
|
|
|
.content::-webkit-scrollbar-thumb {
|
|
background: var(--gray-300);
|
|
}
|
|
|
|
.content::-webkit-scrollbar-thumb:hover {
|
|
background: var(--gray-500);
|
|
}
|
|
|
|
/* ============================================
|
|
GRID OVERLAY (decorative)
|
|
============================================ */
|
|
.grid-rule {
|
|
height: 2px;
|
|
background: var(--black);
|
|
margin: 24px 0;
|
|
}
|
|
|
|
/* ============================================
|
|
RED ACCENT LINE (top of page)
|
|
============================================ */
|
|
.sidebar::before {
|
|
content: '';
|
|
display: block;
|
|
height: 4px;
|
|
background: var(--red);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE
|
|
============================================ */
|
|
@media (max-width: 1024px) {
|
|
.cards-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.card--half {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.card--half + .card--half {
|
|
border-left: var(--border);
|
|
}
|
|
|
|
.banner-details {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="layout">
|
|
|
|
<!-- ==========================================
|
|
SIDEBAR
|
|
========================================== -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-brand">
|
|
<div class="sidebar-brand-mark">
|
|
<i data-lucide="heart-pulse"></i>
|
|
</div>
|
|
<div>
|
|
<div class="sidebar-brand-text">Patient<br>Record</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<button class="sidebar-nav-item active">
|
|
<span class="sidebar-nav-item-number">1</span>
|
|
<i data-lucide="layout-dashboard"></i>
|
|
Summary
|
|
</button>
|
|
<button class="sidebar-nav-item">
|
|
<span class="sidebar-nav-item-number">2</span>
|
|
<i data-lucide="briefcase"></i>
|
|
Experience
|
|
</button>
|
|
<button class="sidebar-nav-item">
|
|
<span class="sidebar-nav-item-number">3</span>
|
|
<i data-lucide="wrench"></i>
|
|
Skills
|
|
</button>
|
|
<button class="sidebar-nav-item">
|
|
<span class="sidebar-nav-item-number">4</span>
|
|
<i data-lucide="trophy"></i>
|
|
Achievements
|
|
</button>
|
|
<button class="sidebar-nav-item">
|
|
<span class="sidebar-nav-item-number">5</span>
|
|
<i data-lucide="folder-open"></i>
|
|
Projects
|
|
</button>
|
|
<button class="sidebar-nav-item">
|
|
<span class="sidebar-nav-item-number">6</span>
|
|
<i data-lucide="graduation-cap"></i>
|
|
Education
|
|
</button>
|
|
<button class="sidebar-nav-item">
|
|
<span class="sidebar-nav-item-number">7</span>
|
|
<i data-lucide="mail"></i>
|
|
Contact
|
|
</button>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="sidebar-footer-session">Session: A.CHARLWOOD</div>
|
|
<div id="sidebar-time"></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ==========================================
|
|
PATIENT BANNER
|
|
========================================== -->
|
|
<header class="banner">
|
|
<div class="banner-name-block">
|
|
<span class="banner-name">CHARLWOOD, Andrew</span>
|
|
<span class="banner-title">(Mr)</span>
|
|
</div>
|
|
|
|
<div class="banner-status">
|
|
<div class="status-square status-square--green"></div>
|
|
<span class="banner-status-text">Active</span>
|
|
</div>
|
|
|
|
<div class="banner-badge">Open to opportunities</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">07795553088</span>
|
|
</div>
|
|
<div class="banner-detail">
|
|
<span class="banner-detail-label">Email</span>
|
|
<span class="banner-detail-value">andy@charlwood.xyz</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="banner-actions">
|
|
<button class="banner-action-btn" title="Download CV">
|
|
<i data-lucide="download"></i>
|
|
</button>
|
|
<button class="banner-action-btn" title="Email">
|
|
<i data-lucide="mail"></i>
|
|
</button>
|
|
<button class="banner-action-btn" title="LinkedIn">
|
|
<i data-lucide="linkedin"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ==========================================
|
|
CONTENT
|
|
========================================== -->
|
|
<main class="content">
|
|
<div class="content-inner">
|
|
|
|
<!-- ALERT -->
|
|
<div class="alert" id="clinical-alert">
|
|
<i data-lucide="alert-triangle"></i>
|
|
<span class="alert-text">ALERT: This patient has identified £14.6M in prescribing efficiency savings across Norfolk & Waveney ICS.</span>
|
|
<button class="alert-dismiss" onclick="document.getElementById('clinical-alert').style.display='none'" title="Dismiss">
|
|
<i data-lucide="x"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- SECTION: SUMMARY -->
|
|
<div class="section-header">Summary View</div>
|
|
|
|
<div class="cards-grid">
|
|
|
|
<!-- Card 1: Patient Demographics -->
|
|
<div class="card card--full">
|
|
<div class="card-header">
|
|
<span class="card-title">Patient Demographics</span>
|
|
<a class="card-header-action" href="#">Full Record</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="demo-grid">
|
|
<div class="demo-grid-cell">
|
|
<span class="demo-grid-label">Name</span>
|
|
<span class="demo-grid-value">Andrew Charlwood</span>
|
|
</div>
|
|
<div class="demo-grid-cell">
|
|
<span class="demo-grid-label">Status</span>
|
|
<span class="demo-grid-value" style="display: flex; align-items: center; gap: 8px;">
|
|
<span class="status-square status-square--green"></span> Active
|
|
</span>
|
|
</div>
|
|
<div class="demo-grid-cell">
|
|
<span class="demo-grid-label">DOB</span>
|
|
<span class="demo-grid-value">14/02/1993</span>
|
|
</div>
|
|
<div class="demo-grid-cell">
|
|
<span class="demo-grid-label">Location</span>
|
|
<span class="demo-grid-value">Norwich, NR1</span>
|
|
</div>
|
|
<div class="demo-grid-cell">
|
|
<span class="demo-grid-label">Registration</span>
|
|
<span class="demo-grid-value">GPhC 2211810</span>
|
|
</div>
|
|
<div class="demo-grid-cell">
|
|
<span class="demo-grid-label">Since</span>
|
|
<span class="demo-grid-value">August 2016</span>
|
|
</div>
|
|
<div class="demo-grid-cell">
|
|
<span class="demo-grid-label">Qualification</span>
|
|
<span class="demo-grid-value">MPharm (Hons) 2:1</span>
|
|
</div>
|
|
<div class="demo-grid-cell">
|
|
<span class="demo-grid-label">University</span>
|
|
<span class="demo-grid-value">UEA, 2015</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Active Problems -->
|
|
<div class="card card--half">
|
|
<div class="card-header">
|
|
<span class="card-title">Active Problems</span>
|
|
<span class="card-header-action">3 Active</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="problems-list">
|
|
<li class="problem-item">
|
|
<div class="problem-status">
|
|
<div class="status-square status-square--green"></div>
|
|
</div>
|
|
<div class="problem-content">
|
|
<div class="problem-name">£220M prescribing budget oversight</div>
|
|
<div class="problem-meta">
|
|
<span class="problem-tag problem-tag--active">Active</span>
|
|
<span>Jul 2024</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="problem-item">
|
|
<div class="problem-status">
|
|
<div class="status-square status-square--blue"></div>
|
|
</div>
|
|
<div class="problem-content">
|
|
<div class="problem-name">Patient-level SQL analytics transformation</div>
|
|
<div class="problem-meta">
|
|
<span class="problem-tag problem-tag--progress">In Progress</span>
|
|
<span>2025</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="problem-item">
|
|
<div class="problem-status">
|
|
<div class="status-square status-square--blue"></div>
|
|
</div>
|
|
<div class="problem-content">
|
|
<div class="problem-name">Team data literacy programme</div>
|
|
<div class="problem-meta">
|
|
<span class="problem-tag problem-tag--progress">In Progress</span>
|
|
<span>Jul 2024</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: Current Medications -->
|
|
<div class="card card--half">
|
|
<div class="card-header">
|
|
<span class="card-title">Current Medications (Quick View)</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<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><span class="dose-value">90</span><span class="dose-unit">%</span></td>
|
|
<td>Daily</td>
|
|
<td><div class="status-cell"><div class="status-square status-square--green"></div> Active</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="drug-name">SQL</td>
|
|
<td><span class="dose-value">88</span><span class="dose-unit">%</span></td>
|
|
<td>Daily</td>
|
|
<td><div class="status-cell"><div class="status-square status-square--green"></div> Active</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="drug-name">Power BI</td>
|
|
<td><span class="dose-value">92</span><span class="dose-unit">%</span></td>
|
|
<td>Daily</td>
|
|
<td><div class="status-cell"><div class="status-square status-square--green"></div> Active</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="drug-name">Data Analysis</td>
|
|
<td><span class="dose-value">95</span><span class="dose-unit">%</span></td>
|
|
<td>Daily</td>
|
|
<td><div class="status-cell"><div class="status-square status-square--green"></div> Active</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="drug-name">JavaScript/TypeScript</td>
|
|
<td><span class="dose-value">70</span><span class="dose-unit">%</span></td>
|
|
<td>Weekly</td>
|
|
<td><div class="status-cell"><div class="status-square status-square--green"></div> Active</div></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Last Consultation -->
|
|
<div class="card card--full">
|
|
<div class="card-header">
|
|
<span class="card-title">Last Consultation</span>
|
|
<a class="card-header-action" href="#">View All</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="consult-header">
|
|
<div class="consult-date-block">
|
|
<span class="consult-date-day">14</span>
|
|
<span class="consult-date-month">May</span>
|
|
<span class="consult-date-year">2025</span>
|
|
</div>
|
|
<div class="consult-info">
|
|
<span class="consult-org">NHS Norfolk & Waveney ICB</span>
|
|
<span class="consult-role">Interim Head, Population Health & Data Analysis</span>
|
|
</div>
|
|
</div>
|
|
<div class="consult-body">
|
|
<div class="consult-summary-label">Summary</div>
|
|
<div class="consult-summary-text">
|
|
Led strategic delivery of population health initiatives and data-driven medicines optimisation across Norfolk & Waveney ICS.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /cards-grid -->
|
|
|
|
</div><!-- /content-inner -->
|
|
</main>
|
|
|
|
</div><!-- /layout -->
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
// Live clock in sidebar
|
|
function updateTime() {
|
|
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('sidebar-time').textContent = h + ':' + m + ':' + s;
|
|
}
|
|
updateTime();
|
|
setInterval(updateTime, 1000);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|