diff --git a/fiveparaminte-main/static/dashboard.html b/fiveparaminte-main/static/dashboard.html index 338084e..82ed537 100644 --- a/fiveparaminte-main/static/dashboard.html +++ b/fiveparaminte-main/static/dashboard.html @@ -428,6 +428,13 @@ 0 0 0 1px rgba(0, 0, 0, 0.02); } + .vital-card.hr:hover { border-color: rgba(220, 38, 38, 0.3); } + .vital-card.spo2:hover { border-color: rgba(8, 145, 178, 0.3); } + .vital-card.bp:hover { border-color: rgba(124, 58, 237, 0.3); } + .vital-card.rr:hover { border-color: rgba(22, 163, 74, 0.3); } + .vital-card.temp:hover { border-color: rgba(234, 88, 12, 0.3); } + .vital-card.map-card:hover { border-color: rgba(219, 39, 119, 0.3); } + .vital-card::before { content: ''; position: absolute; @@ -766,6 +773,98 @@ } } + /* === Patient Clinical Info Banner === */ + .patient-banner { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 24px; + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: 20px; + box-shadow: + 0 4px 6px -1px rgba(0, 0, 0, 0.02), + 0 10px 15px -3px rgba(0, 0, 0, 0.03); + margin-bottom: 24px; + flex-wrap: wrap; + gap: 16px; + } + + .patient-banner-group { + display: flex; + align-items: center; + gap: 12px; + } + + .patient-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + background: rgba(8, 145, 178, 0.08); + color: var(--spo2-color); + display: flex; + align-items: center; + justify-content: center; + } + + .patient-avatar svg { + width: 18px; + height: 18px; + } + + .patient-label { + font-size: 11px; + color: var(--text-secondary); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + } + + .patient-value-text { + font-size: 14px; + color: var(--text-primary); + font-weight: 700; + } + + .patient-banner-divider { + height: 24px; + width: 1px; + background: var(--border-color); + } + + .vital-svg { + stroke-width: 2.5; + transition: transform 0.3s ease; + } + + .vital-card:hover .vital-svg { + transform: scale(1.1); + } + + .vital-card.hr .card-icon { color: var(--hr-color); } + .vital-card.spo2 .card-icon { color: var(--spo2-color); } + .vital-card.bp .card-icon { color: var(--bp-color); } + .vital-card.rr .card-icon { color: var(--rr-color); } + .vital-card.temp .card-icon { color: var(--temp-color); } + .vital-card.map-card .card-icon { color: var(--map-color); } + + @media (max-width: 768px) { + .patient-banner-divider { + display: none; + } + .patient-banner { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; + } + } + + @media (max-width: 480px) { + .patient-banner { + grid-template-columns: 1fr; + } + } + /* === Scrollbar === */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } @@ -805,6 +904,50 @@ + +
+
+
+ + + + +
+
+
Active Patient
+
John Doe
+
+
+
+
+
+
Patient ID
+
N/A
+
+
+
+
+
+
Location / Bed
+
ICU - Bed 12
+
+
+
+
+
+
Monitor Status
+
CMS8500
+
+
+
+
+
+
Last Transmission
+
Never
+
+
+
+
@@ -872,7 +1015,11 @@
-
❤️
+
+ + + +
Heart Rate
No Data @@ -893,7 +1040,14 @@
-
🫁
+
+ + + + + + +
SpO₂
No Data @@ -914,7 +1068,11 @@
-
🩸
+
+ + + +
Blood Pressure
No Data @@ -935,7 +1093,13 @@
-
🌬️
+
+ + + + + +
Respiratory Rate
No Data @@ -956,7 +1120,12 @@
-
🌡️
+
+ + + + +
Temperature
No Data @@ -977,7 +1146,11 @@
-
💓
+
+ + + +
Mean Arterial Pressure
No Data @@ -1191,6 +1364,12 @@ }); document.getElementById('deviceId').textContent = 'Waiting...'; document.getElementById('patientId').textContent = 'Waiting...'; + + document.getElementById('bannerPatientId').textContent = 'N/A'; + document.getElementById('bannerPatientName').textContent = 'John Doe'; + document.getElementById('bannerMonitorModel').textContent = 'CMS8500'; + document.getElementById('bannerLastSeen').textContent = 'Never'; + lastReadingId = null; } @@ -1386,6 +1565,22 @@ document.getElementById('lastUpdateTime').textContent = now.toLocaleTimeString('en-US', { hour12: false }); + // Update patient clinical banner + if (data.patient_id) { + document.getElementById('bannerPatientId').textContent = data.patient_id; + document.getElementById('bannerPatientName').textContent = data.patient_name || `Patient #${data.patient_id}`; + } + if (data.device_id) { + let deviceModel = 'CMS8500'; + if (data.device_id.includes('CMS7000')) { + deviceModel = 'CMS7000PLUS'; + } + const parts = data.device_id.split('_'); + const suffix = parts.length > 1 ? ` (${parts.pop()})` : ''; + document.getElementById('bannerMonitorModel').textContent = `${deviceModel}${suffix}`; + } + document.getElementById('bannerLastSeen').textContent = now.toLocaleTimeString('en-US', { hour12: false }); + // Push waveform data pushWaveformPoint('hr', data.heart_rate); pushWaveformPoint('spo2', data.spo2);