CareConnect [+] __ U SER MANUAL SIH 2026 Healthcare Accessibility Platform Step - by - Step Demo Walkthrough TABLE OF CONTENTS 1. Launch the Application 2. Login Screen Overview 3. Patient Demo Workflow 4. Hospital Demo Workflow 5. Doctor Demo Workflow 6. Pharmacy Demo Workflow 7. Healthcare Worker Demo Workflow 8. Diagnostic Center Demo Workflow 9. Government Admin Demo Workflow 10. Language Switching 11. Theme Switching 12. Font Size Adjustment 13. OTP Verification (Demo) 14. Demo Payment Flow 15. Equipment Discovery 16. Digital Triage 17. Logout 18. Data Persistence 19. Troubleshooting 1. LAUNCH THE APPLICATION Option A: Direct Open - Navigate to the CareConnect [+] folder - Double - click index.html - The file opens in your default browser Option B: Local Server - Open a terminal in the CareConnect [+] folder - Run: python - m http.server 8080 - Open browser to: http://localhost:8080 Option C: VS Code Live Server - Open the folder in VS Code - Right - click index.html → Open with Live Server What you will see: 1. Splash screen with CareConnect [+] logo and loader (1.8 seconds) 2. Login screen with role selection and credentials form CareConnect [+] __ U SER MANUAL 2. LOGIN SCREEN OVERVIEW The login screen displays: - CareConnect [+] logo and name - "Demo Prototype" indicator - 7 role cards to select from - User ID and Password fields - Show/Hide password toggle - Login button - Language selector (EN / HI / MR / BN) - Theme toggle (Light / Dark) - Expandable "Demo Credentials" section To log in: 1. Click a role card (e.g., "Patient / User") 2. Enter the User ID and Password 3. Click "Login" DEMO CREDENTIALS: Patient: harry / harry123 Hospital: phoenix / phoenix123 Doctor: drsmith / doctor123 Pharmacy: medplus / pharma123 Healthcare Worker: asha01 / hcw123 Diagnostic Center: labplus / diag123 Government Admin: admin / admin123 3. PATIENT DEMO WORKFLOW Login: harry / harry123 After login, the Patient Dashboard appears with: - Sidebar navigation (left side) - Welcome greeting with patient name - Health stats cards (Heart Rate, Blood Pressure, etc.) - Quick action cards DEMO WALKTHROUGH: Step 1: Overview - Observe the dashboard overview with stats and quick actions - Note the upcoming appointments section Step 2: Find Care - Click "Find Care" in the sidebar - Select a category (Hospitals, Doctors, etc.) - Adjust the radius (5km, 10km, 25km, etc.) - Observe the SVG map showing nearby facilities - View the results list with distance and contact info CareConnect [+] __ U SER MANUAL Step 3: Digital Triage - Click "Digital Triage" in the sidebar - Answer the 5 symptom questions: 1. Severity (Mild / Moderate / Severe) 2. Duration (Hours / Days / Weeks) 3. Fever (Yes / No) 4. Breathing Difficulty (Yes / No) 5. Age Group (Child / Adult / Senior) - Click "Submit" to see the recommendation - Note: "Demo decision support — not a diagnosis" Step 4: Health Records - Click "Health Records" in the sidebar - Click "Grant Access" to initiate consent - Enter Demo OTP: 123456 - Click "Verify" - View the health records timeline Step 5: Equipment Finder - Click "Equipment" in the sidebar - Search for equipment types (Oxygen, Ventilator, etc.) - View provider contact information - Note: "Contact provider externally for availability" Step 6: Emergency - Click "Emergency" in the sidebar - See emergency contacts (108, 112) - View nearest hospitals with phone numbers - View blood bank information Step 7: Teleconsultation - Click "Teleconsultation" in the sidebar - View available doctors - Note the simulated consultation interface Step 8: Logout - Click "Logout" at the bottom of the sidebar - Returns to login screen 4. HOSPITAL DEMO WORKFLOW Login: phoenix / phoenix123 DEMO WALKTHROUGH: Step 1: Overview - View hospital KPI cards (Patients, Beds, Specialists, Equipment) CareConnect [+] __ U SER MANUAL Step 2: Bed Management - Click "Beds" in the sidebar - View section - wise availability (ICU, General, Emergency, Maternity) - Click +/ - buttons to adjust bed counts - Observe the occupancy progress bars change color - Note: "DEMO DATA — Not real - time availability" Step 3: Specialists - Click "Specialists" in the sidebar - View specialist directory - Click "+ Add Specialist" - Fill in: Name, Specialty, Availability - Click "Add" — specialist appears in the list - Try removing a specialist (confirm dialog appears) Step 4: Equipment Management - Click "Equipment" in the sidebar - View hospital's equipment inventory - Click "+ Add Equipment" - Fill in: Type, Name, Quantity, Contact - Click "Add" — equipment appears in the list - The new equipment is now discoverable by patients Step 5: Patient Records - Click "Records" in the sidebar - Click "Request Access" for a patient - Simulate consent with OTP: 123456 - View patient records after access is granted - Add a note — the audit trail updates Step 6: Logout 5. DOCTOR DEMO WORKFLOW Login: drsmith / doctor123 DEMO WALKTHROUGH: Step 1: Overview - View consultation stats, today's schedule Step 2: Appointments - View appointment list with patient details - Test the booking flow: 1. Click "Book Appointment" 2. Select an available time slot 3. View appointment summary with fee 4. Enter any 16 - digit number as demo card 5. Click "Pay" 6. See processing animation (1.5 seconds) CareConnect [+] __ U SER MANUAL 7. See "Payment Successful" confirmation 8. Note: "DEMO PAYMENT — No real money processed" Step 3: Queue Management - View patient queue with priority levels - Click "Start Consult" to begin teleconsultation Step 4: Teleconsultation - View simulated video interface - Test Mute/Camera/End controls - Write a prescription in the prescription area - Note: "Simulated Teleconsultation" Step 5: Referrals - Click "Referrals" in the sidebar - Click "+ New Referral" - Select patient, destination, and reason - Click "Create" — referral is created - The referral appears in the receiving hospital's dashboard Step 6: Logout 6. PHARMACY DEMO WORKFLOW Login: medplus / pharma123 - View pharmacy profile, location, and hours - Edit opening hours and save - View contact information - Note: No medicine ordering/inventory (intentional) - Logout 7. HEALTHCARE WORKER DEMO WORKFLOW Login: asha01 / hcw123 - View connected hospitals and patients - Toggle availability (Online/Offline) - Check patient requests (cross - role connected) - View and send messages - Logout 8. DIAGNOSTIC CENTER DEMO WORKFLOW Login: labplus / diag123 - View test catalog - Add/remove tests - View test schedule - Deliver a pending report (notifies patient) - Logout CareConnect [+] __ U SER MANUAL 9. GOVERNMENT ADMIN DEMO WORKFLOW Login: admin / admin123 DEMO WALKTHROUGH: Step 1: Overview - View platform - wide statistics Step 2: User Management - View all registered users - Click "Suspend" on a user - Try logging in as that user — login is blocked! - Click "Restore" to re - enable Step 3: Branding - Change the application name - Change the tagline - Click "Apply Changes" - Observe the sidebar and topbar update instantly Step 4: System Monitoring - View system health status cards - Note: "Demo Monitoring — Simulated system status" Step 5: Logout 10. LANGUAGE SWITCHING Method 1: Login Screen - Use the language dropdown at the bottom of the login screen Method 2: During Dashboard - Use the language selector in the topbar - Select: English / Hindi / Marathi / Bengali What happens: - ALL UI text updates instantly (no page reload) - Navigation labels change - Buttons and cards change - Form labels change - The selected language is saved (persists on reload) Note: Technical terms (OTP, ICU, ABDM) may remain in English. 11. THEME SWITCHING - Click the theme toggle button in the topbar - Switches between Light Mode and Dark Mode - Theme preference is saved (persists on reload) CareConnect [+] __ U SER MANUAL 12. FONT SIZE ADJUSTMENT - Go to Settings in any dashboard - Select font size: Small / Medium / Large / Extra Large - The entire UI adjusts accordingly 13. OTP VERIFICATION (DEMO) When accessing consent - gated features: 1. A consent modal appears 2. Enter Demo OTP: 123456 3. Click "Verify" 4. If correct: access is granted 5. If incorrect: error message shown IMPORTANT: This is a simulated OTP. No real SMS is sent. 14. DEMO PAYMENT FLOW When booking a doctor appointment: 1. Select a time slot 2. View appointment summary and fee 3. Enter any 16 - digit number (demo card) 4. Click "Pay" 5. Processing animation (1.5 seconds) 6. Success message IMPORTANT: "DEMO PAYMENT — No real money is processed." Use any 16 - digit number. Do not enter real card information. 15. EQUIPMENT DISCOVERY Available for: Patient and Hospital roles only. 1. Go to "Equipment" in the sidebar 2. Search by type or keyword 3. View results with provider contact info 4. Call the provider externally to arrange availability The platform supports DISCOVERY + CONTACT, not ordering/booking. 16. DIGITAL TRIAGE 1. Answer 5 symptom questions 2. Receive a guidance recommendation: - Emergency: "Call 108 immediately" - Doctor: "Consult a doctor" - Diagnostic: "Get diagnostic tests" - General: "General care guidance" 3. Follow the suggested action IMPORTANT: "Demo decision support — NOT a medical diagnosis." CareConnect [+] __ U SER MANUAL 17. LOGOUT - Click "Logout" at the bottom of the sidebar - On mobile: open the menu drawer, then click "Logout" - Returns to the login screen - Demo session is cleared 18. DATA PERSISTENCE The application uses browser LocalStorage for demo persistence. What is saved: - Language preference - Theme preference - Font size preference - Login session - Mock data changes (bed counts, specialists, equipment, etc.) - Notification read status - Admin branding changes To reset all data: - Open browser Developer Tools (F12) - Go to Application → Local Storage - Clear all items starting with "ab_" - Reload the page 19. TROUBLESHOOTING Problem: Page is blank after opening - Make sure you opened index.html, not another file - Check browser console (F12) for errors - Try a different browser Problem: Login doesn't work - Check credentials (case - sensitive) - Make sure you selected the correct role - The account may have been suspended by admin Problem: Data seems stale - Clear LocalStorage (see section 18) - Reload the page Problem: Language not changing - Some dynamic content may need a page section reload - Navigate to a different section and back Problem: Mobile layout issues - Use the hamburger menu (top - left) to open navigation - Rotate device for wider view if needed Problem: Animations are slow - Enable "Low Network Mode" in the sidebar - This disables all animations and transitions