| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MedFlow AI - Healthcare Portal</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); |
| } |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .transition-all { |
| transition: all 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| |
| <div class="container mx-auto px-4 py-8"> |
| |
| <header class="text-center mb-12"> |
| <h1 class="text-4xl md:text-5xl font-bold text-blue-800 mb-4">MedFlow AI</h1> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Smart healthcare solutions for patients and providers</p> |
| </header> |
|
|
| |
| <div class="max-w-4xl mx-auto"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| |
| <div id="patientCard" class="bg-white rounded-xl shadow-lg overflow-hidden transition-all card-hover cursor-pointer"> |
| <div class="gradient-bg p-6 text-white"> |
| <div class="flex items-center justify-center mb-4"> |
| <i class="fas fa-user-injured text-4xl mr-4"></i> |
| <h2 class="text-2xl font-bold">Patient Portal</h2> |
| </div> |
| <p class="text-blue-100">Get personalized health insights and appointment scheduling powered by AI.</p> |
| </div> |
| <div class="p-6"> |
| <button onclick="showPatientForm()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all"> |
| Access as Patient |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="hospitalCard" class="bg-white rounded-xl shadow-lg overflow-hidden transition-all card-hover cursor-pointer"> |
| <div class="gradient-bg p-6 text-white"> |
| <div class="flex items-center justify-center mb-4"> |
| <i class="fas fa-hospital text-4xl mr-4"></i> |
| <h2 class="text-2xl font-bold">Hospital Dashboard</h2> |
| </div> |
| <p class="text-blue-100">AI-powered insights for hospital management and patient flow optimization.</p> |
| </div> |
| <div class="p-6"> |
| <button onclick="showHospitalLogin()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all"> |
| Access as Provider |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="patientForm" class="hidden max-w-2xl mx-auto mt-12 bg-white rounded-xl shadow-lg p-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-blue-800">Patient Information</h2> |
| <button onclick="hidePatientForm()" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <form id="medForm" class="space-y-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required> |
| </div> |
| <div> |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> |
| <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required> |
| </div> |
| </div> |
| |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required> |
| </div> |
| |
| <div> |
| <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address</label> |
| <input type="text" id="address" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div> |
| <label for="bloodPressure" class="block text-sm font-medium text-gray-700 mb-1">Blood Pressure</label> |
| <input type="text" id="bloodPressure" placeholder="e.g. 120/80" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required> |
| </div> |
| <div> |
| <label for="height" class="block text-sm font-medium text-gray-700 mb-1">Height (cm)</label> |
| <input type="number" id="height" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required> |
| </div> |
| <div> |
| <label for="weight" class="block text-sm font-medium text-gray-700 mb-1">Weight (kg)</label> |
| <input type="number" id="weight" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required> |
| </div> |
| </div> |
| |
| <div> |
| <label for="symptoms" class="block text-sm font-medium text-gray-700 mb-1">Describe Your Symptoms</label> |
| <textarea id="symptoms" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required></textarea> |
| </div> |
| |
| <div class="pt-4"> |
| <button type="button" onclick="submitPatientForm()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all"> |
| Submit Information |
| </button> |
| </div> |
| </form> |
| </div> |
|
|
| |
| <div id="patientResults" class="hidden max-w-2xl mx-auto mt-12 bg-white rounded-xl shadow-lg p-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-blue-800">Your Health Assessment</h2> |
| <button onclick="hidePatientResults()" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="space-y-6"> |
| <div class="bg-blue-50 rounded-lg p-4"> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-exclamation-triangle text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-blue-800">Priority Level: <span id="priorityLevel" class="text-2xl">3</span>/5</h3> |
| <p class="text-sm text-gray-600">Based on your symptoms and vitals</p> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="font-bold text-lg text-gray-800 mb-2">Recommended Actions</h3> |
| <ul class="list-disc pl-5 space-y-2 text-gray-700"> |
| <li>Rest and stay hydrated</li> |
| <li>Monitor your temperature every 4 hours</li> |
| <li>Avoid strenuous activity for the next 48 hours</li> |
| <li>Limit caffeine and alcohol intake</li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="font-bold text-lg text-gray-800 mb-2">Potential Conditions</h3> |
| <p class="text-gray-700">Based on your symptoms, you may be experiencing a mild viral infection or seasonal allergies. However, if symptoms worsen or persist beyond 3 days, seek immediate medical attention.</p> |
| </div> |
| |
| <div class="bg-yellow-50 rounded-lg p-4 border border-yellow-200"> |
| <h3 class="font-bold text-lg text-yellow-800 mb-2">When to Seek Immediate Care</h3> |
| <ul class="list-disc pl-5 space-y-1 text-yellow-700"> |
| <li>Difficulty breathing</li> |
| <li>Chest pain or pressure</li> |
| <li>Severe headache with vision changes</li> |
| <li>Fever above 39°C (102°F) that doesn't respond to medication</li> |
| </ul> |
| </div> |
| |
| <div class="bg-green-50 rounded-lg p-4"> |
| <div class="flex items-center"> |
| <div class="bg-green-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-calendar-check text-green-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-green-800">Appointment Options</h3> |
| <p class="text-gray-700 mt-1">You are currently <span class="font-bold">8th</span> in the queue.</p> |
| <div class="mt-3 space-y-2"> |
| <div class="flex items-center"> |
| <input type="radio" id="waitOption" name="appointment" class="mr-2" checked> |
| <label for="waitOption">Wait for current appointment (~1 hour)</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="radio" id="laterOption" name="appointment" class="mr-2"> |
| <label for="laterOption">Schedule for tomorrow at 2:30 PM</label> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="pt-2"> |
| <button onclick="confirmAppointment()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all"> |
| Confirm My Choice |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="hospitalLogin" class="hidden max-w-md mx-auto mt-12 bg-white rounded-xl shadow-lg p-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-blue-800">Hospital Staff Login</h2> |
| <button onclick="hideHospitalLogin()" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <form class="space-y-4"> |
| <div> |
| <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label> |
| <input type="text" id="username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required> |
| </div> |
| |
| <div> |
| <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> |
| <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required> |
| </div> |
| |
| <div class="pt-4"> |
| <button type="button" onclick="loginAsDoctor()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all"> |
| Sign In |
| </button> |
| </div> |
| </form> |
| </div> |
|
|
| |
| <div id="hospitalDashboard" class="hidden max-w-6xl mx-auto mt-12"> |
| <div class="flex justify-between items-center mb-8"> |
| <div> |
| <h2 class="text-2xl font-bold text-blue-800">Healthcare Dashboard</h2> |
| <p class="text-gray-600">AI-powered insights for Toronto General Hospital</p> |
| </div> |
| <div class="flex space-x-3"> |
| <button class="bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium py-2 px-4 rounded-lg transition-all"> |
| Refresh Data |
| </button> |
| <button class="bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium py-2 px-4 rounded-lg transition-all"> |
| Export Report |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> |
| <div class="bg-white rounded-xl shadow p-6"> |
| <div class="flex justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Average Wait Time</p> |
| <h3 class="text-2xl font-bold mt-1">14.2 days</h3> |
| </div> |
| <div class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium flex items-center"> |
| <i class="fas fa-arrow-down mr-1"></i> 2.3 days |
| </div> |
| </div> |
| <p class="text-xs text-gray-500 mt-2">from last week</p> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow p-6"> |
| <div class="flex justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Patients Scheduled Today</p> |
| <h3 class="text-2xl font-bold mt-1">1,247</h3> |
| </div> |
| <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium flex items-center"> |
| <i class="fas fa-arrow-up mr-1"></i> 156 |
| </div> |
| </div> |
| <p class="text-xs text-gray-500 mt-2">from last week</p> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow p-6"> |
| <div class="flex justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">System Efficiency</p> |
| <h3 class="text-2xl font-bold mt-1">87.4%</h3> |
| </div> |
| <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium flex items-center"> |
| <i class="fas fa-arrow-up mr-1"></i> 5.2% |
| </div> |
| </div> |
| <p class="text-xs text-gray-500 mt-2">from last week</p> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow p-6"> |
| <div class="flex justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Active Bottlenecks</p> |
| <h3 class="text-2xl font-bold mt-1">3</h3> |
| </div> |
| <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium flex items-center"> |
| <i class="fas fa-arrow-down mr-1"></i> 2 |
| </div> |
| </div> |
| <p class="text-xs text-gray-500 mt-2">from last week</p> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow p-6"> |
| <div class="flex justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">AI Predictions</p> |
| <h3 class="text-2xl font-bold mt-1">94.7%</h3> |
| </div> |
| <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium flex items-center"> |
| <i class="fas fa-arrow-up mr-1"></i> 1.2% |
| </div> |
| </div> |
| <p class="text-xs text-gray-500 mt-2">from last week</p> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow p-6"> |
| <div class="flex justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Rescheduled Appointments</p> |
| <h3 class="text-2xl font-bold mt-1">23</h3> |
| </div> |
| <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium flex items-center"> |
| <i class="fas fa-arrow-down mr-1"></i> 12 |
| </div> |
| </div> |
| <p class="text-xs text-gray-500 mt-2">from last week</p> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
| <div class="bg-white rounded-xl shadow p-6"> |
| <h3 class="font-bold text-gray-800 mb-4">Patient Flow Today</h3> |
| <p class="text-sm text-gray-500 mb-4">Real-time admissions and discharges</p> |
| <div class="h-64"> |
| <canvas id="patientFlowChart"></canvas> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow p-6"> |
| <h3 class="font-bold text-gray-800 mb-4">Capacity Utilization</h3> |
| <p class="text-sm text-gray-500 mb-4">Hospital capacity throughout the day</p> |
| <div class="h-64"> |
| <canvas id="capacityChart"></canvas> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow overflow-hidden mb-8"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h3 class="font-bold text-gray-800">Real-time Alerts & Bottlenecks</h3> |
| </div> |
| <div class="divide-y divide-gray-200"> |
| <div class="p-4 hover:bg-gray-50 transition-all"> |
| <div class="flex items-start"> |
| <div class="bg-red-100 p-2 rounded-full mr-4 mt-1"> |
| <i class="fas fa-exclamation-circle text-red-600"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-medium">OR Suite 3 - Surgical Backlog</h4> |
| <p class="text-sm text-gray-600">12 affected</p> |
| <p class="text-sm mt-1">Expected 4-hour delay due to emergency surgery</p> |
| <p class="text-xs text-gray-500 mt-1">5 minutes ago</p> |
| </div> |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> |
| View Details |
| </button> |
| </div> |
| </div> |
| |
| <div class="p-4 hover:bg-gray-50 transition-all"> |
| <div class="flex items-start"> |
| <div class="bg-yellow-100 p-2 rounded-full mr-4 mt-1"> |
| <i class="fas fa-user-md text-yellow-600"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-medium">Cardiology Clinic - Staff Shortage</h4> |
| <p class="text-sm text-gray-600">18 affected</p> |
| <p class="text-sm mt-1">Dr. Martinez called in sick, 18 appointments need rescheduling</p> |
| <p class="text-xs text-gray-500 mt-1">12 minutes ago</p> |
| </div> |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> |
| View Details |
| </button> |
| </div> |
| </div> |
| |
| <div class="p-4 hover:bg-gray-50 transition-all"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-4 mt-1"> |
| <i class="fas fa-brain text-blue-600"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-medium">MRI Department - High Demand</h4> |
| <p class="text-sm text-gray-600">7 affected</p> |
| <p class="text-sm mt-1">AI recommends adding evening slots for next week</p> |
| <p class="text-xs text-gray-500 mt-1">25 minutes ago</p> |
| </div> |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> |
| View Details |
| </button> |
| </div> |
| </div> |
| |
| <div class="p-4 hover:bg-gray-50 transition-all"> |
| <div class="flex items-start"> |
| <div class="bg-red-100 p-2 rounded-full mr-4 mt-1"> |
| <i class="fas fa-ambulance text-red-600"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-medium">Emergency Department - Capacity Alert</h4> |
| <p class="text-sm text-gray-600">23 affected</p> |
| <p class="text-sm mt-1">Approaching 95% capacity, consider patient redistribution</p> |
| <p class="text-xs text-gray-500 mt-1">1 hour ago</p> |
| </div> |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> |
| View Details |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| <div class="bg-white rounded-xl shadow p-6"> |
| <h3 class="font-bold text-gray-800 mb-4">AI Confidence Level</h3> |
| <div class="flex items-center justify-center"> |
| <div class="relative w-32 h-32"> |
| <svg class="w-full h-full" viewBox="0 0 36 36"> |
| <path |
| d="M18 2.0845 |
| a 15.9155 15.9155 0 0 1 0 31.831 |
| a 15.9155 15.9155 0 0 1 0 -31.831" |
| fill="none" |
| stroke="#E5E7EB" |
| stroke-width="3" |
| /> |
| <path |
| d="M18 2.0845 |
| a 15.9155 15.9155 0 0 1 0 31.831 |
| a 15.9155 15.9155 0 0 1 0 -31.831" |
| fill="none" |
| stroke="#3B82F6" |
| stroke-width="3" |
| stroke-dasharray="94.7, 100" |
| /> |
| </svg> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <span class="text-3xl font-bold">94.7%</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow p-6"> |
| <h3 class="font-bold text-gray-800 mb-4">Quick Actions</h3> |
| <div class="grid grid-cols-2 gap-3"> |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 py-2 px-3 rounded-lg text-sm font-medium transition-all"> |
| Schedule Emergency Surgery |
| </button> |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 py-2 px-3 rounded-lg text-sm font-medium transition-all"> |
| Manage Staff Allocation |
| </button> |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 py-2 px-3 rounded-lg text-sm font-medium transition-all"> |
| View Patient Queue |
| </button> |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 py-2 px-3 rounded-lg text-sm font-medium transition-all"> |
| Generate Reports |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow p-6"> |
| <h3 class="font-bold text-gray-800 mb-4">System Status</h3> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> |
| <span class="text-sm">API Status: Operational</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> |
| <span class="text-sm">AI Models: Processing Data</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> |
| <span class="text-sm">Database: Online</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> |
| <span class="text-sm">Security: Active</span> |
| </div> |
| </div> |
| |
| <div class="mt-6"> |
| <h4 class="font-medium text-sm text-gray-700 mb-2">Follow Up Deployment</h4> |
| <div class="bg-gray-100 rounded-lg p-3"> |
| <p class="text-sm">Next deployment scheduled for tonight at 2:00 AM</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| function showPatientForm() { |
| document.getElementById('patientCard').classList.add('hidden'); |
| document.getElementById('hospitalCard').classList.add('hidden'); |
| document.getElementById('patientForm').classList.remove('hidden'); |
| } |
| |
| function hidePatientForm() { |
| document.getElementById('patientForm').classList.add('hidden'); |
| document.getElementById('patientCard').classList.remove('hidden'); |
| document.getElementById('hospitalCard').classList.remove('hidden'); |
| } |
| |
| |
| function submitPatientForm() { |
| |
| |
| document.getElementById('patientForm').classList.add('hidden'); |
| document.getElementById('patientResults').classList.remove('hidden'); |
| } |
| |
| function hidePatientResults() { |
| document.getElementById('patientResults').classList.add('hidden'); |
| document.getElementById('patientCard').classList.remove('hidden'); |
| document.getElementById('hospitalCard').classList.remove('hidden'); |
| } |
| |
| function confirmAppointment() { |
| alert('Your appointment choice has been confirmed!'); |
| hidePatientResults(); |
| } |
| |
| |
| function showHospitalLogin() { |
| document.getElementById('patientCard').classList.add('hidden'); |
| document.getElementById('hospitalCard').classList.add('hidden'); |
| document.getElementById('hospitalLogin').classList.remove('hidden'); |
| } |
| |
| function hideHospitalLogin() { |
| document.getElementById('hospitalLogin').classList.add('hidden'); |
| document.getElementById('patientCard').classList.remove('hidden'); |
| document.getElementById('hospitalCard').classList.remove('hidden'); |
| } |
| |
| |
| function loginAsDoctor() { |
| const username = document.getElementById('username').value; |
| const password = document.getElementById('password').value; |
| |
| |
| if (username === 'doctor' && password === 'timotee') { |
| document.getElementById('hospitalLogin').classList.add('hidden'); |
| document.getElementById('hospitalDashboard').classList.remove('hidden'); |
| } else { |
| alert('Invalid credentials. For this demo, use username: doctor, password: timotee'); |
| } |
| } |
| |
| |
| function loginAsDoctor() { |
| const username = document.getElementById('username').value; |
| const password = document.getElementById('password').value; |
| |
| |
| if (username === 'doctor' && password === 'timotee') { |
| document.getElementById('hospitalLogin').classList.add('hidden'); |
| document.getElementById('hospitalDashboard').classList.remove('hidden'); |
| |
| |
| const patientFlowCtx = document.getElementById('patientFlowChart').getContext('2d'); |
| new Chart(patientFlowCtx, { |
| type: 'line', |
| data: { |
| labels: ['6 AM', '8 AM', '10 AM', '12 PM', '2 PM', '4 PM', '6 PM', '8 PM'], |
| datasets: [{ |
| label: 'Admissions', |
| data: [12, 19, 28, 42, 36, 29, 18, 8], |
| borderColor: '#3B82F6', |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', |
| tension: 0.3, |
| fill: true |
| }, { |
| label: 'Discharges', |
| data: [5, 12, 18, 24, 32, 28, 22, 15], |
| borderColor: '#10B981', |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', |
| tension: 0.3, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true |
| } |
| } |
| } |
| }); |
| |
| |
| const capacityCtx = document.getElementById('capacityChart').getContext('2d'); |
| new Chart(capacityCtx, { |
| type: 'bar', |
| data: { |
| labels: ['ER', 'ICU', 'Ward A', 'Ward B', 'OR', 'Clinic'], |
| datasets: [{ |
| label: 'Capacity Utilization (%)', |
| data: [92, 85, 78, 65, 88, 72], |
| backgroundColor: [ |
| 'rgba(239, 68, 68, 0.7)', |
| 'rgba(249, 115, 22, 0.7)', |
| 'rgba(234, 179, 8, 0.7)', |
| 'rgba(16, 185, 129, 0.7)', |
| 'rgba(59, 130, 246, 0.7)', |
| 'rgba(139, 92, 246, 0.7)' |
| ], |
| borderColor: [ |
| 'rgba(239, 68, 68, 1)', |
| 'rgba(249, 115, 22, 1)', |
| 'rgba(234, 179, 8, 1)', |
| 'rgba(16, 185, 129, 1)', |
| 'rgba(59, 130, 246, 1)', |
| 'rgba(139, 92, 246, 1)' |
| ], |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| max: 100 |
| } |
| } |
| } |
| }); |
| } else { |
| alert('Invalid credentials. For this demo, use username: doctor, password: timotee'); |
| } |
| } |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dcrey7/medflowai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
