|
|
<!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> |
