From 1f0f7566e89e283f1266454267c96956776f69e8 Mon Sep 17 00:00:00 2001 From: DevSoftTech Server Date: Tue, 4 Aug 2026 02:17:26 +0530 Subject: [PATCH] feat: add screenshot gallery section to HMS presentation - Added 9-card screenshot gallery section between intro and features - Cards for: Dashboard, Patient Management, ABHA Creation, OPD Queue, Bed Status Map, Charge Master/Insurance Rates, Stock Control Center, Report Panel, Admin Panel - Lightbox overlay for full-screen image viewing (keyboard Escape to close) - Placeholder icons shown now; replace with real images by dropping PNGs into public/assets/img/screenshots/ and updating src on each card - Added gallery CSS with hover lift effect and lightbox styles - Print-friendly: lightbox hidden in @media print --- HMS_FEATURES_PRESENTATION.html | 157 +++++++++++++++++++++++++- public/HMS_FEATURES_PRESENTATION.html | 157 +++++++++++++++++++++++++- 2 files changed, 312 insertions(+), 2 deletions(-) diff --git a/HMS_FEATURES_PRESENTATION.html b/HMS_FEATURES_PRESENTATION.html index f4f4f41..4966318 100644 --- a/HMS_FEATURES_PRESENTATION.html +++ b/HMS_FEATURES_PRESENTATION.html @@ -151,8 +151,50 @@ } .print-bar button:hover { background: #0b5ed7; } + /* ── Screenshots Gallery ── */ + .gallery-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 20px; + } + .gallery-item { + background: white; border: 1px solid var(--border); border-radius: 14px; + overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.06); + cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; + } + .gallery-item:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.12); } + .gallery-item .screen-img { + width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; + display: block; background: #f1f5f9; + } + .gallery-item .screen-img.placeholder { + display: flex; align-items: center; justify-content: center; + font-size: 3rem; background: linear-gradient(135deg, #eff6ff, #e0f2fe); + } + .gallery-caption { + padding: 14px 16px; + } + .gallery-caption .cap-badge { + font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; + color: var(--blue); margin-bottom: 5px; + } + .gallery-caption h4 { font-size: .95rem; font-weight: 700; color: var(--dark); margin-bottom: 4px; } + .gallery-caption p { font-size: .8rem; color: var(--mid); line-height: 1.5; } + + /* Lightbox */ + #lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999; + align-items:center; justify-content:center; padding:20px; } + #lightbox.open { display:flex; } + #lightbox img { max-width:90vw; max-height:88vh; border-radius:10px; object-fit:contain; } + #lightbox .lb-close { position:fixed; top:20px; right:28px; font-size:2rem; color:white; + cursor:pointer; line-height:1; } + #lightbox .lb-caption { position:fixed; bottom:20px; left:0; right:0; text-align:center; + color:white; font-size:.95rem; font-weight:600; } + @media print { - * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } + .gallery-item { break-inside: avoid; } + #lightbox { display: none !important; } + } body { background: white !important; font-size: 11pt; } .print-bar { display: none !important; } .cover { @@ -255,6 +297,119 @@ + +

System Screenshots

+

Real screens from E-Atria HIMS — live hospital environment.

+ +
+ +
+
📊
+
+
Dashboard
+

Hospital Dashboard

+

Real-time counts for OPD today, Current IPD in-house, Admissions & Discharges, and Daily trend for the current month.

+
+
+ +
+
👤
+
+
Patient Management
+

Patient Search & Registration

+

Multi-tab workspace: Search by UHID/name/phone, register new patients, view last OPDs, create or verify ABHA Health ID.

+
+
+ +
+
🪪
+
+
ABDM / ABHA
+

ABHA Health ID Creation

+

Guided 4-step wizard: Aadhaar number + patient consent → OTP verification → mobile confirmation → ABHA ID issued instantly.

+
+
+ +
+
📋
+
+
OPD
+

Doctor-wise Appointment Queue

+

Live OPD queue per doctor showing status (Waiting/Visited/Cancelled), queue number, UHID, payment type, and quick-action buttons for Consult, Vitals, Scan, Upload.

+
+
+ +
+
🛏️
+
+
IPD / Bed Management
+

Real-time Bed Status Map

+

Visual ward & floor map: 85 total beds across wards, ICU, private rooms. Shows Available / Occupied / Reserved / Maintenance with patient name and LOS per bed.

+
+
+ +
+
💰
+
+
Billing
+

Charge Master & Insurance Rates

+

Per-procedure charge configuration with company-specific rates and codes. Example: USG KUB at ₹1,000 standard rate with ECHS rate at ₹170 (code RI039).

+
+
+ +
+
📦
+
+
Pharmacy / Hospital Stock
+

Stock Control Center

+

Central dashboard showing indents, low-stock alerts, near-expiry batches (within 60 days), approximate stock value, and quick-access to Indent Desk, Day Report, Stock Search, and Store Controls.

+
+
+ +
+
📈
+
+
Reports
+

Report Panel

+

Grouped quick-access panel covering Total Payment, OPD Total, Billing Operations, Finance Dashboard, NABH Audit, Diagnosis, Insurance Case IPD/OPD, Ayushman Case Dashboard, and Document Issue reports.

+
+
+ +
+
⚙️
+
+
Admin & Settings
+

Admin Control Panel

+

Tile-based admin panel giving quick access to all configuration modules: Doctor Master, User & Role Management, AI Settings, HealthPlix Integration, ABDM Gateway, Hospital Profile, Insurance, and more.

+
+
+ +
+ + + + + +

1. Patient Management

Unified patient registry — single source of truth across every department.

diff --git a/public/HMS_FEATURES_PRESENTATION.html b/public/HMS_FEATURES_PRESENTATION.html index f4f4f41..4966318 100644 --- a/public/HMS_FEATURES_PRESENTATION.html +++ b/public/HMS_FEATURES_PRESENTATION.html @@ -151,8 +151,50 @@ } .print-bar button:hover { background: #0b5ed7; } + /* ── Screenshots Gallery ── */ + .gallery-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 20px; + } + .gallery-item { + background: white; border: 1px solid var(--border); border-radius: 14px; + overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.06); + cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; + } + .gallery-item:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.12); } + .gallery-item .screen-img { + width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; + display: block; background: #f1f5f9; + } + .gallery-item .screen-img.placeholder { + display: flex; align-items: center; justify-content: center; + font-size: 3rem; background: linear-gradient(135deg, #eff6ff, #e0f2fe); + } + .gallery-caption { + padding: 14px 16px; + } + .gallery-caption .cap-badge { + font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; + color: var(--blue); margin-bottom: 5px; + } + .gallery-caption h4 { font-size: .95rem; font-weight: 700; color: var(--dark); margin-bottom: 4px; } + .gallery-caption p { font-size: .8rem; color: var(--mid); line-height: 1.5; } + + /* Lightbox */ + #lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999; + align-items:center; justify-content:center; padding:20px; } + #lightbox.open { display:flex; } + #lightbox img { max-width:90vw; max-height:88vh; border-radius:10px; object-fit:contain; } + #lightbox .lb-close { position:fixed; top:20px; right:28px; font-size:2rem; color:white; + cursor:pointer; line-height:1; } + #lightbox .lb-caption { position:fixed; bottom:20px; left:0; right:0; text-align:center; + color:white; font-size:.95rem; font-weight:600; } + @media print { - * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } + .gallery-item { break-inside: avoid; } + #lightbox { display: none !important; } + } body { background: white !important; font-size: 11pt; } .print-bar { display: none !important; } .cover { @@ -255,6 +297,119 @@ + +

System Screenshots

+

Real screens from E-Atria HIMS — live hospital environment.

+ +
+ +
+
📊
+
+
Dashboard
+

Hospital Dashboard

+

Real-time counts for OPD today, Current IPD in-house, Admissions & Discharges, and Daily trend for the current month.

+
+
+ +
+
👤
+
+
Patient Management
+

Patient Search & Registration

+

Multi-tab workspace: Search by UHID/name/phone, register new patients, view last OPDs, create or verify ABHA Health ID.

+
+
+ +
+
🪪
+
+
ABDM / ABHA
+

ABHA Health ID Creation

+

Guided 4-step wizard: Aadhaar number + patient consent → OTP verification → mobile confirmation → ABHA ID issued instantly.

+
+
+ +
+
📋
+
+
OPD
+

Doctor-wise Appointment Queue

+

Live OPD queue per doctor showing status (Waiting/Visited/Cancelled), queue number, UHID, payment type, and quick-action buttons for Consult, Vitals, Scan, Upload.

+
+
+ +
+
🛏️
+
+
IPD / Bed Management
+

Real-time Bed Status Map

+

Visual ward & floor map: 85 total beds across wards, ICU, private rooms. Shows Available / Occupied / Reserved / Maintenance with patient name and LOS per bed.

+
+
+ +
+
💰
+
+
Billing
+

Charge Master & Insurance Rates

+

Per-procedure charge configuration with company-specific rates and codes. Example: USG KUB at ₹1,000 standard rate with ECHS rate at ₹170 (code RI039).

+
+
+ +
+
📦
+
+
Pharmacy / Hospital Stock
+

Stock Control Center

+

Central dashboard showing indents, low-stock alerts, near-expiry batches (within 60 days), approximate stock value, and quick-access to Indent Desk, Day Report, Stock Search, and Store Controls.

+
+
+ +
+
📈
+
+
Reports
+

Report Panel

+

Grouped quick-access panel covering Total Payment, OPD Total, Billing Operations, Finance Dashboard, NABH Audit, Diagnosis, Insurance Case IPD/OPD, Ayushman Case Dashboard, and Document Issue reports.

+
+
+ +
+
⚙️
+
+
Admin & Settings
+

Admin Control Panel

+

Tile-based admin panel giving quick access to all configuration modules: Doctor Master, User & Role Management, AI Settings, HealthPlix Integration, ABDM Gateway, Hospital Profile, Insurance, and more.

+
+
+ +
+ + + + + +

1. Patient Management

Unified patient registry — single source of truth across every department.