aruncsh/ContecMonitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduce vital card size to exactly half height with hidden footer, smaller font size, smaller icons, and tighter grid gap

Browse Source
This commit is contained in:
prathiyuman
2026-07-13 16:42:16 +05:30
parent 6f8cc31a02
commit 8ebd4dc766
3 changed files with 129 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fiveparaminte-main/fiveparaminte-main/static/dashboard.html
+43 -155
View File
@@ -385,36 +385,35 @@
.vitals-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
gap: 8px;
flex: 1;
}
.vital-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 12px;
border-radius: 8px;
padding: 6px 10px;
position: relative;
overflow: hidden;
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.02),
0 4px 6px -2px rgba(0, 0, 0, 0.03);
0 1px 2px rgba(0, 0, 0, 0.02),
0 2px 4px rgba(0, 0, 0, 0.03);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: grid;
grid-template-areas:
"header header"
"value waveform"
"footer footer";
grid-template-columns: 110px 1fr;
grid-template-rows: auto 50px auto;
gap: 6px 12px;
"value waveform";
grid-template-columns: 80px 1fr;
grid-template-rows: auto 26px;
gap: 4px 8px;
}
.vital-card:hover {
background: var(--bg-card-hover);
transform: translateY(-2px);
transform: translateY(-1px);
box-shadow:
0 8px 16px -6px rgba(0, 0, 0, 0.05),
0 4px 8px -3px rgba(0, 0, 0, 0.04),
0 0 0 1px rgba(0, 0, 0, 0.01);
}
@@ -431,8 +430,8 @@
top: 0;
left: 0;
bottom: 0;
width: 3.5px;
border-radius: 12px 0 0 12px;
width: 3px;
border-radius: 8px 0 0 8px;
}
.vital-card.hr::before { background: linear-gradient(180deg, var(--hr-color), transparent); }
@@ -448,8 +447,8 @@
position: absolute;
top: 50%;
left: 20%;
width: 120px;
height: 120px;
width: 80px;
height: 80px;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
@@ -466,11 +465,11 @@
.vital-card.map-card::after { background: radial-gradient(circle, var(--map-glow), transparent 70%); }
.vital-card.has-value::after {
opacity: 0.25;
opacity: 0.2;
}
.vital-card.has-value:hover::after {
opacity: 0.4;
opacity: 0.35;
}
.card-header {
@@ -480,24 +479,24 @@
justify-content: space-between;
position: relative;
z-index: 1;
padding-bottom: 2px;
padding-bottom: 0px;
}
.card-label {
display: flex;
align-items: center;
gap: 8px;
gap: 6px;
}
.card-icon {
width: 24px;
height: 24px;
border-radius: 6px;
width: 18px;
height: 18px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
font-size: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
}
.vital-card.hr .card-icon { background: rgba(220, 38, 38, 0.05); }
@@ -508,10 +507,10 @@
.vital-card.map-card .card-icon { background: rgba(219, 39, 119, 0.05); }
.card-name {
font-size: 11px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: 0.4px;
}
.vital-card.hr .card-name { color: var(--hr-color); }
@@ -522,9 +521,9 @@
.vital-card.map-card .card-name { color: var(--map-color); }
.status-badge {
padding: 2px 6px;
border-radius: 5px;
font-size: 9px;
padding: 1px 4px;
border-radius: 4px;
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2px;
@@ -579,28 +578,28 @@
.vital-value {
font-family: 'JetBrains Mono', monospace;
font-size: 34px;
font-size: 22px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.5px;
letter-spacing: -0.3px;
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.vital-card.hr .vital-value { color: var(--hr-color); text-shadow: 0 0 6px rgba(220, 38, 38, 0.12); }
.vital-card.spo2 .vital-value { color: var(--spo2-color); text-shadow: 0 0 6px rgba(8, 145, 178, 0.12); }
.vital-card.bp .vital-value { color: var(--bp-color); text-shadow: 0 0 6px rgba(124, 58, 237, 0.12); }
.vital-card.rr .vital-value { color: var(--rr-color); text-shadow: 0 0 6px rgba(22, 163, 74, 0.12); }
.vital-card.temp .vital-value { color: var(--temp-color); text-shadow: 0 0 6px rgba(234, 88, 12, 0.12); }
.vital-card.map-card .vital-value { color: var(--map-color); text-shadow: 0 0 6px rgba(219, 39, 119, 0.12); }
.vital-card.hr .vital-value { color: var(--hr-color); text-shadow: 0 0 4px rgba(220, 38, 38, 0.12); }
.vital-card.spo2 .vital-value { color: var(--spo2-color); text-shadow: 0 0 4px rgba(8, 145, 178, 0.12); }
.vital-card.bp .vital-value { color: var(--bp-color); text-shadow: 0 0 4px rgba(124, 58, 237, 0.12); }
.vital-card.rr .vital-value { color: var(--rr-color); text-shadow: 0 0 4px rgba(22, 163, 74, 0.12); }
.vital-card.temp .vital-value { color: var(--temp-color); text-shadow: 0 0 4px rgba(234, 88, 12, 0.12); }
.vital-card.map-card .vital-value { color: var(--map-color); text-shadow: 0 0 4px rgba(219, 39, 119, 0.12); }
.vital-value.no-data {
font-size: 26px;
font-size: 18px;
color: var(--text-dim) !important;
text-shadow: none !important;
}
.vital-value .unit {
font-size: 12px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0;
margin-left: 2px;
@@ -609,7 +608,7 @@
}
.vital-value .slash {
font-size: 24px;
font-size: 16px;
opacity: 0.3;
margin: 0;
color: var(--text-secondary);
@@ -632,7 +631,7 @@
position: relative;
z-index: 1;
overflow: hidden;
border-radius: 6px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.01);
}
@@ -642,29 +641,9 @@
display: block;
}
/* === Normal Range Footer === */
/* === Normal Range Footer (Hidden for compact bedside mode) === */
.card-footer {
grid-area: footer;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 4px;
border-top: 1px solid var(--border-color);
position: relative;
z-index: 1;
}
.normal-range {
font-size: 9px;
color: var(--text-secondary);
font-weight: 600;
}
.last-update {
font-size: 9px;
color: var(--text-dim);
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
display: none !important;
}
/* === Info Bar === */
@@ -844,7 +823,6 @@
<!-- Header -->
<header class="header" id="header">
<div class="header-left">
<div class="header-icon">🏥</div>
<div>
<div class="header-title">Patient Vital Signs Monitor</div>
<div class="header-subtitle">Contec Monitor — Real-time Monitoring</div>
@@ -869,96 +847,6 @@
</div>
</header>
<!-- Patient Clinical Info Banner -->
<div class="patient-banner">
<div class="patient-banner-group">
<div class="patient-avatar">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</div>
<div>
<div class="patient-label">Active Patient</div>
<div class="patient-value-text" id="bannerPatientName">John Doe</div>
</div>
</div>
<div class="patient-banner-divider"></div>
<div class="patient-banner-group">
<div>
<div class="patient-label">Patient ID</div>
<div class="patient-value-text" id="bannerPatientId">N/A</div>
</div>
</div>
<div class="patient-banner-divider"></div>
<div class="patient-banner-group">
<div>
<div class="patient-label">Location / Bed</div>
<div class="patient-value-text">ICU - Bed 12</div>
</div>
</div>
</div>
<!-- Setup Guide -->
<div class="setup-guide" id="setupGuide">
<div class="setup-guide-header" onclick="toggleSetupGuide()">
<div class="setup-guide-title">
<span>📡</span>
<span>Contec CMS7000PLUS / CMS8500 Setup Guide — Configure Your Monitor</span>
</div>
<div class="setup-guide-toggle" id="setupToggleText">▾ Collapse</div>
</div>
<div class="setup-guide-body" id="setupGuideBody">
<div class="setup-step">
<div class="step-number">1</div>
<div class="step-content">
<h4>Connect via Wi-Fi or Ethernet</h4>
<p><strong>Wi-Fi:</strong> Connect the monitor (e.g. CMS8500) and your PC to the same Wi-Fi network. <br><strong>Ethernet:</strong> Connect using an Ethernet cable (direct or switch).</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">2</div>
<div class="step-content">
<h4>Get PC IP Address</h4>
<p>Find your PC's IP address on the network (shown in the box below). If using Wi-Fi, use your PC's Wi-Fi IP address.</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">3</div>
<div class="step-content">
<h4>Configure Monitor CMS Settings</h4>
<p>On your monitor: Go to <code>System Setup → Network → CMS Settings</code>. Set <strong>Server IP</strong> (or CMS IP) to your PC's IP address.</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">4</div>
<div class="step-content">
<h4>Set Server Port</h4>
<p>Set Server Port on your monitor to one of the listening ports: <code id="activePortsList">Detecting...</code> (usually <code>511</code> or <code>518</code>).</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">5</div>
<div class="step-content">
<h4>Enable CMS Connection</h4>
<p>Enable the CMS/Central Monitor connection in the monitor settings. Set the sending interval (e.g. 5 seconds) to start transmitting.</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">6</div>
<div class="step-content">
<h4>Data Will Appear Automatically</h4>
<p>Once connected, the monitor will show up in the "Select Monitor" list, and its vitals will display in real-time.</p>
</div>
</div>
<div class="setup-ip-display">
<div>
<div class="setup-ip-label">🖥️ Your PC's Detected IP Address (set this on the monitor)</div>
</div>
<div class="setup-ip-value" id="detectedIp">Detecting...</div>
</div>
</div>
</div>
<!-- Vitals Grid -->
<div class="vitals-grid">
fiveparaminte-main/static/dashboard.html
+43 -155
View File
@@ -385,36 +385,35 @@
.vitals-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
gap: 8px;
flex: 1;
}
.vital-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 12px;
border-radius: 8px;
padding: 6px 10px;
position: relative;
overflow: hidden;
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.02),
0 4px 6px -2px rgba(0, 0, 0, 0.03);
0 1px 2px rgba(0, 0, 0, 0.02),
0 2px 4px rgba(0, 0, 0, 0.03);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: grid;
grid-template-areas:
"header header"
"value waveform"
"footer footer";
grid-template-columns: 110px 1fr;
grid-template-rows: auto 50px auto;
gap: 6px 12px;
"value waveform";
grid-template-columns: 80px 1fr;
grid-template-rows: auto 26px;
gap: 4px 8px;
}
.vital-card:hover {
background: var(--bg-card-hover);
transform: translateY(-2px);
transform: translateY(-1px);
box-shadow:
0 8px 16px -6px rgba(0, 0, 0, 0.05),
0 4px 8px -3px rgba(0, 0, 0, 0.04),
0 0 0 1px rgba(0, 0, 0, 0.01);
}
@@ -431,8 +430,8 @@
top: 0;
left: 0;
bottom: 0;
width: 3.5px;
border-radius: 12px 0 0 12px;
width: 3px;
border-radius: 8px 0 0 8px;
}
.vital-card.hr::before { background: linear-gradient(180deg, var(--hr-color), transparent); }
@@ -448,8 +447,8 @@
position: absolute;
top: 50%;
left: 20%;
width: 120px;
height: 120px;
width: 80px;
height: 80px;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
@@ -466,11 +465,11 @@
.vital-card.map-card::after { background: radial-gradient(circle, var(--map-glow), transparent 70%); }
.vital-card.has-value::after {
opacity: 0.25;
opacity: 0.2;
}
.vital-card.has-value:hover::after {
opacity: 0.4;
opacity: 0.35;
}
.card-header {
@@ -480,24 +479,24 @@
justify-content: space-between;
position: relative;
z-index: 1;
padding-bottom: 2px;
padding-bottom: 0px;
}
.card-label {
display: flex;
align-items: center;
gap: 8px;
gap: 6px;
}
.card-icon {
width: 24px;
height: 24px;
border-radius: 6px;
width: 18px;
height: 18px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
font-size: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
}
.vital-card.hr .card-icon { background: rgba(220, 38, 38, 0.05); }
@@ -508,10 +507,10 @@
.vital-card.map-card .card-icon { background: rgba(219, 39, 119, 0.05); }
.card-name {
font-size: 11px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: 0.4px;
}
.vital-card.hr .card-name { color: var(--hr-color); }
@@ -522,9 +521,9 @@
.vital-card.map-card .card-name { color: var(--map-color); }
.status-badge {
padding: 2px 6px;
border-radius: 5px;
font-size: 9px;
padding: 1px 4px;
border-radius: 4px;
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2px;
@@ -579,28 +578,28 @@
.vital-value {
font-family: 'JetBrains Mono', monospace;
font-size: 34px;
font-size: 22px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.5px;
letter-spacing: -0.3px;
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.vital-card.hr .vital-value { color: var(--hr-color); text-shadow: 0 0 6px rgba(220, 38, 38, 0.12); }
.vital-card.spo2 .vital-value { color: var(--spo2-color); text-shadow: 0 0 6px rgba(8, 145, 178, 0.12); }
.vital-card.bp .vital-value { color: var(--bp-color); text-shadow: 0 0 6px rgba(124, 58, 237, 0.12); }
.vital-card.rr .vital-value { color: var(--rr-color); text-shadow: 0 0 6px rgba(22, 163, 74, 0.12); }
.vital-card.temp .vital-value { color: var(--temp-color); text-shadow: 0 0 6px rgba(234, 88, 12, 0.12); }
.vital-card.map-card .vital-value { color: var(--map-color); text-shadow: 0 0 6px rgba(219, 39, 119, 0.12); }
.vital-card.hr .vital-value { color: var(--hr-color); text-shadow: 0 0 4px rgba(220, 38, 38, 0.12); }
.vital-card.spo2 .vital-value { color: var(--spo2-color); text-shadow: 0 0 4px rgba(8, 145, 178, 0.12); }
.vital-card.bp .vital-value { color: var(--bp-color); text-shadow: 0 0 4px rgba(124, 58, 237, 0.12); }
.vital-card.rr .vital-value { color: var(--rr-color); text-shadow: 0 0 4px rgba(22, 163, 74, 0.12); }
.vital-card.temp .vital-value { color: var(--temp-color); text-shadow: 0 0 4px rgba(234, 88, 12, 0.12); }
.vital-card.map-card .vital-value { color: var(--map-color); text-shadow: 0 0 4px rgba(219, 39, 119, 0.12); }
.vital-value.no-data {
font-size: 26px;
font-size: 18px;
color: var(--text-dim) !important;
text-shadow: none !important;
}
.vital-value .unit {
font-size: 12px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0;
margin-left: 2px;
@@ -609,7 +608,7 @@
}
.vital-value .slash {
font-size: 24px;
font-size: 16px;
opacity: 0.3;
margin: 0;
color: var(--text-secondary);
@@ -632,7 +631,7 @@
position: relative;
z-index: 1;
overflow: hidden;
border-radius: 6px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.01);
}
@@ -642,29 +641,9 @@
display: block;
}
/* === Normal Range Footer === */
/* === Normal Range Footer (Hidden for compact bedside mode) === */
.card-footer {
grid-area: footer;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 4px;
border-top: 1px solid var(--border-color);
position: relative;
z-index: 1;
}
.normal-range {
font-size: 9px;
color: var(--text-secondary);
font-weight: 600;
}
.last-update {
font-size: 9px;
color: var(--text-dim);
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
display: none !important;
}
/* === Info Bar === */
@@ -844,7 +823,6 @@
<!-- Header -->
<header class="header" id="header">
<div class="header-left">
<div class="header-icon">🏥</div>
<div>
<div class="header-title">Patient Vital Signs Monitor</div>
<div class="header-subtitle">Contec Monitor — Real-time Monitoring</div>
@@ -869,96 +847,6 @@
</div>
</header>
<!-- Patient Clinical Info Banner -->
<div class="patient-banner">
<div class="patient-banner-group">
<div class="patient-avatar">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</div>
<div>
<div class="patient-label">Active Patient</div>
<div class="patient-value-text" id="bannerPatientName">John Doe</div>
</div>
</div>
<div class="patient-banner-divider"></div>
<div class="patient-banner-group">
<div>
<div class="patient-label">Patient ID</div>
<div class="patient-value-text" id="bannerPatientId">N/A</div>
</div>
</div>
<div class="patient-banner-divider"></div>
<div class="patient-banner-group">
<div>
<div class="patient-label">Location / Bed</div>
<div class="patient-value-text">ICU - Bed 12</div>
</div>
</div>
</div>
<!-- Setup Guide -->
<div class="setup-guide" id="setupGuide">
<div class="setup-guide-header" onclick="toggleSetupGuide()">
<div class="setup-guide-title">
<span>📡</span>
<span>Contec CMS7000PLUS / CMS8500 Setup Guide — Configure Your Monitor</span>
</div>
<div class="setup-guide-toggle" id="setupToggleText">▾ Collapse</div>
</div>
<div class="setup-guide-body" id="setupGuideBody">
<div class="setup-step">
<div class="step-number">1</div>
<div class="step-content">
<h4>Connect via Wi-Fi or Ethernet</h4>
<p><strong>Wi-Fi:</strong> Connect the monitor (e.g. CMS8500) and your PC to the same Wi-Fi network. <br><strong>Ethernet:</strong> Connect using an Ethernet cable (direct or switch).</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">2</div>
<div class="step-content">
<h4>Get PC IP Address</h4>
<p>Find your PC's IP address on the network (shown in the box below). If using Wi-Fi, use your PC's Wi-Fi IP address.</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">3</div>
<div class="step-content">
<h4>Configure Monitor CMS Settings</h4>
<p>On your monitor: Go to <code>System Setup → Network → CMS Settings</code>. Set <strong>Server IP</strong> (or CMS IP) to your PC's IP address.</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">4</div>
<div class="step-content">
<h4>Set Server Port</h4>
<p>Set Server Port on your monitor to one of the listening ports: <code id="activePortsList">Detecting...</code> (usually <code>511</code> or <code>518</code>).</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">5</div>
<div class="step-content">
<h4>Enable CMS Connection</h4>
<p>Enable the CMS/Central Monitor connection in the monitor settings. Set the sending interval (e.g. 5 seconds) to start transmitting.</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">6</div>
<div class="step-content">
<h4>Data Will Appear Automatically</h4>
<p>Once connected, the monitor will show up in the "Select Monitor" list, and its vitals will display in real-time.</p>
</div>
</div>
<div class="setup-ip-display">
<div>
<div class="setup-ip-label">🖥️ Your PC's Detected IP Address (set this on the monitor)</div>
</div>
<div class="setup-ip-value" id="detectedIp">Detecting...</div>
</div>
</div>
</div>
<!-- Vitals Grid -->
<div class="vitals-grid">
static/dashboard.html
+43 -155
View File
@@ -385,36 +385,35 @@
.vitals-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
gap: 8px;
flex: 1;
}
.vital-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 12px;
border-radius: 8px;
padding: 6px 10px;
position: relative;
overflow: hidden;
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.02),
0 4px 6px -2px rgba(0, 0, 0, 0.03);
0 1px 2px rgba(0, 0, 0, 0.02),
0 2px 4px rgba(0, 0, 0, 0.03);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: grid;
grid-template-areas:
"header header"
"value waveform"
"footer footer";
grid-template-columns: 110px 1fr;
grid-template-rows: auto 50px auto;
gap: 6px 12px;
"value waveform";
grid-template-columns: 80px 1fr;
grid-template-rows: auto 26px;
gap: 4px 8px;
}
.vital-card:hover {
background: var(--bg-card-hover);
transform: translateY(-2px);
transform: translateY(-1px);
box-shadow:
0 8px 16px -6px rgba(0, 0, 0, 0.05),
0 4px 8px -3px rgba(0, 0, 0, 0.04),
0 0 0 1px rgba(0, 0, 0, 0.01);
}
@@ -431,8 +430,8 @@
top: 0;
left: 0;
bottom: 0;
width: 3.5px;
border-radius: 12px 0 0 12px;
width: 3px;
border-radius: 8px 0 0 8px;
}
.vital-card.hr::before { background: linear-gradient(180deg, var(--hr-color), transparent); }
@@ -448,8 +447,8 @@
position: absolute;
top: 50%;
left: 20%;
width: 120px;
height: 120px;
width: 80px;
height: 80px;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
@@ -466,11 +465,11 @@
.vital-card.map-card::after { background: radial-gradient(circle, var(--map-glow), transparent 70%); }
.vital-card.has-value::after {
opacity: 0.25;
opacity: 0.2;
}
.vital-card.has-value:hover::after {
opacity: 0.4;
opacity: 0.35;
}
.card-header {
@@ -480,24 +479,24 @@
justify-content: space-between;
position: relative;
z-index: 1;
padding-bottom: 2px;
padding-bottom: 0px;
}
.card-label {
display: flex;
align-items: center;
gap: 8px;
gap: 6px;
}
.card-icon {
width: 24px;
height: 24px;
border-radius: 6px;
width: 18px;
height: 18px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
font-size: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
}
.vital-card.hr .card-icon { background: rgba(220, 38, 38, 0.05); }
@@ -508,10 +507,10 @@
.vital-card.map-card .card-icon { background: rgba(219, 39, 119, 0.05); }
.card-name {
font-size: 11px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: 0.4px;
}
.vital-card.hr .card-name { color: var(--hr-color); }
@@ -522,9 +521,9 @@
.vital-card.map-card .card-name { color: var(--map-color); }
.status-badge {
padding: 2px 6px;
border-radius: 5px;
font-size: 9px;
padding: 1px 4px;
border-radius: 4px;
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2px;
@@ -579,28 +578,28 @@
.vital-value {
font-family: 'JetBrains Mono', monospace;
font-size: 34px;
font-size: 22px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.5px;
letter-spacing: -0.3px;
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.vital-card.hr .vital-value { color: var(--hr-color); text-shadow: 0 0 6px rgba(220, 38, 38, 0.12); }
.vital-card.spo2 .vital-value { color: var(--spo2-color); text-shadow: 0 0 6px rgba(8, 145, 178, 0.12); }
.vital-card.bp .vital-value { color: var(--bp-color); text-shadow: 0 0 6px rgba(124, 58, 237, 0.12); }
.vital-card.rr .vital-value { color: var(--rr-color); text-shadow: 0 0 6px rgba(22, 163, 74, 0.12); }
.vital-card.temp .vital-value { color: var(--temp-color); text-shadow: 0 0 6px rgba(234, 88, 12, 0.12); }
.vital-card.map-card .vital-value { color: var(--map-color); text-shadow: 0 0 6px rgba(219, 39, 119, 0.12); }
.vital-card.hr .vital-value { color: var(--hr-color); text-shadow: 0 0 4px rgba(220, 38, 38, 0.12); }
.vital-card.spo2 .vital-value { color: var(--spo2-color); text-shadow: 0 0 4px rgba(8, 145, 178, 0.12); }
.vital-card.bp .vital-value { color: var(--bp-color); text-shadow: 0 0 4px rgba(124, 58, 237, 0.12); }
.vital-card.rr .vital-value { color: var(--rr-color); text-shadow: 0 0 4px rgba(22, 163, 74, 0.12); }
.vital-card.temp .vital-value { color: var(--temp-color); text-shadow: 0 0 4px rgba(234, 88, 12, 0.12); }
.vital-card.map-card .vital-value { color: var(--map-color); text-shadow: 0 0 4px rgba(219, 39, 119, 0.12); }
.vital-value.no-data {
font-size: 26px;
font-size: 18px;
color: var(--text-dim) !important;
text-shadow: none !important;
}
.vital-value .unit {
font-size: 12px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0;
margin-left: 2px;
@@ -609,7 +608,7 @@
}
.vital-value .slash {
font-size: 24px;
font-size: 16px;
opacity: 0.3;
margin: 0;
color: var(--text-secondary);
@@ -632,7 +631,7 @@
position: relative;
z-index: 1;
overflow: hidden;
border-radius: 6px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.01);
}
@@ -642,29 +641,9 @@
display: block;
}
/* === Normal Range Footer === */
/* === Normal Range Footer (Hidden for compact bedside mode) === */
.card-footer {
grid-area: footer;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 4px;
border-top: 1px solid var(--border-color);
position: relative;
z-index: 1;
}
.normal-range {
font-size: 9px;
color: var(--text-secondary);
font-weight: 600;
}
.last-update {
font-size: 9px;
color: var(--text-dim);
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
display: none !important;
}
/* === Info Bar === */
@@ -844,7 +823,6 @@
<!-- Header -->
<header class="header" id="header">
<div class="header-left">
<div class="header-icon">🏥</div>
<div>
<div class="header-title">Patient Vital Signs Monitor</div>
<div class="header-subtitle">Contec Monitor — Real-time Monitoring</div>
@@ -869,96 +847,6 @@
</div>
</header>
<!-- Patient Clinical Info Banner -->
<div class="patient-banner">
<div class="patient-banner-group">
<div class="patient-avatar">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</div>
<div>
<div class="patient-label">Active Patient</div>
<div class="patient-value-text" id="bannerPatientName">John Doe</div>
</div>
</div>
<div class="patient-banner-divider"></div>
<div class="patient-banner-group">
<div>
<div class="patient-label">Patient ID</div>
<div class="patient-value-text" id="bannerPatientId">N/A</div>
</div>
</div>
<div class="patient-banner-divider"></div>
<div class="patient-banner-group">
<div>
<div class="patient-label">Location / Bed</div>
<div class="patient-value-text">ICU - Bed 12</div>
</div>
</div>
</div>
<!-- Setup Guide -->
<div class="setup-guide" id="setupGuide">
<div class="setup-guide-header" onclick="toggleSetupGuide()">
<div class="setup-guide-title">
<span>📡</span>
<span>Contec CMS7000PLUS / CMS8500 Setup Guide — Configure Your Monitor</span>
</div>
<div class="setup-guide-toggle" id="setupToggleText">▾ Collapse</div>
</div>
<div class="setup-guide-body" id="setupGuideBody">
<div class="setup-step">
<div class="step-number">1</div>
<div class="step-content">
<h4>Connect via Wi-Fi or Ethernet</h4>
<p><strong>Wi-Fi:</strong> Connect the monitor (e.g. CMS8500) and your PC to the same Wi-Fi network. <br><strong>Ethernet:</strong> Connect using an Ethernet cable (direct or switch).</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">2</div>
<div class="step-content">
<h4>Get PC IP Address</h4>
<p>Find your PC's IP address on the network (shown in the box below). If using Wi-Fi, use your PC's Wi-Fi IP address.</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">3</div>
<div class="step-content">
<h4>Configure Monitor CMS Settings</h4>
<p>On your monitor: Go to <code>System Setup → Network → CMS Settings</code>. Set <strong>Server IP</strong> (or CMS IP) to your PC's IP address.</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">4</div>
<div class="step-content">
<h4>Set Server Port</h4>
<p>Set Server Port on your monitor to one of the listening ports: <code id="activePortsList">Detecting...</code> (usually <code>511</code> or <code>518</code>).</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">5</div>
<div class="step-content">
<h4>Enable CMS Connection</h4>
<p>Enable the CMS/Central Monitor connection in the monitor settings. Set the sending interval (e.g. 5 seconds) to start transmitting.</p>
</div>
</div>
<div class="setup-step">
<div class="step-number">6</div>
<div class="step-content">
<h4>Data Will Appear Automatically</h4>
<p>Once connected, the monitor will show up in the "Select Monitor" list, and its vitals will display in real-time.</p>
</div>
</div>
<div class="setup-ip-display">
<div>
<div class="setup-ip-label">🖥️ Your PC's Detected IP Address (set this on the monitor)</div>
</div>
<div class="setup-ip-value" id="detectedIp">Detecting...</div>
</div>
</div>
</div>
<!-- Vitals Grid -->
<div class="vitals-grid">