Spaces:
Running
Running
Create a clinic assessment dashboard that shows all clinic information in Kiribati. It should show the number of clinics in each islands in the Gilbert and Linnix group. It should show the number of nurses, coordinates (optional), source of power, internet provider, number of tablets, laptop, pc, landline, status of motorbikes, oxygen conectrators, solar fridges, etc that is required by the management within the Ministry of Health and Medical Services. I want the dashboard to be viewable publicly but data can only be entered requiring a login authentication. Also make sure that in login, we should be able to perform CRUD operations to update the data for the dashboard. - Follow Up Deployment
e171d5b
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kiribati Clinic Assessment Dashboard</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| .island-map { | |
| background: url('http://static.photos/aerial/1200x630/15') center/cover no-repeat; | |
| } | |
| .stats-card { | |
| transition: all 0.3s ease; | |
| } | |
| .stats-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .login-modal { | |
| backdrop-filter: blur(5px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-blue-800 text-white shadow-lg"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <i data-feather="activity" class="h-8 w-8 mr-2"></i> | |
| <span class="font-semibold text-xl">Kiribati Clinic Assessment</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="loginBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md transition">Login</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div id="vanta-bg" class="relative py-20 text-white"> | |
| <div class="absolute inset-0 bg-blue-900 opacity-80"></div> | |
| <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">Kiribati Health Facilities Assessment</h1> | |
| <p class="text-xl max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">Comprehensive overview of medical resources across the Gilbert and Line Islands</p> | |
| </div> | |
| </div> | |
| <!-- Dashboard Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <!-- Summary Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12"> | |
| <div class="stats-card bg-white rounded-lg shadow p-6 text-center" data-aos="fade-up"> | |
| <i data-feather="home" class="h-10 w-10 text-blue-600 mx-auto mb-3"></i> | |
| <h3 class="text-2xl font-bold text-gray-800">147</h3> | |
| <p class="text-gray-600">Total Clinics</p> | |
| </div> | |
| <div class="stats-card bg-white rounded-lg shadow p-6 text-center" data-aos="fade-up" data-aos-delay="100"> | |
| <i data-feather="users" class="h-10 w-10 text-green-600 mx-auto mb-3"></i> | |
| <h3 class="text-2xl font-bold text-gray-800">328</h3> | |
| <p class="text-gray-600">Medical Staff</p> | |
| </div> | |
| <div class="stats-card bg-white rounded-lg shadow p-6 text-center" data-aos="fade-up" data-aos-delay="200"> | |
| <i data-feather="wifi" class="h-10 w-10 text-purple-600 mx-auto mb-3"></i> | |
| <h3 class="text-2xl font-bold text-gray-800">89</h3> | |
| <p class="text-gray-600">Internet Connected</p> | |
| </div> | |
| <div class="stats-card bg-white rounded-lg shadow p-6 text-center" data-aos="fade-up" data-aos-delay="300"> | |
| <i data-feather="battery-charging" class="h-10 w-10 text-yellow-600 mx-auto mb-3"></i> | |
| <h3 class="text-2xl font-bold text-gray-800">112</h3> | |
| <p class="text-gray-600">Solar Powered</p> | |
| </div> | |
| </div> | |
| <!-- Island Distribution --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12"> | |
| <div class="bg-white rounded-lg shadow p-6" data-aos="fade-right"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i data-feather="map" class="mr-2"></i> Clinics by Island Group | |
| </h2> | |
| <canvas id="islandChart" height="250"></canvas> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6" data-aos="fade-left"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i data-feather="pie-chart" class="mr-2"></i> Equipment Distribution | |
| </h2> | |
| <canvas id="equipmentChart" height="250"></canvas> | |
| </div> | |
| </div> | |
| <!-- Island Map Visualization --> | |
| <div class="bg-white rounded-lg shadow mb-12 overflow-hidden" data-aos="zoom-in"> | |
| <div class="island-map h-96 rounded-t-lg"></div> | |
| <div class="p-6"> | |
| <h2 class="text-xl font-semibold mb-2">Clinic Geographic Distribution</h2> | |
| <p class="text-gray-600">Health facilities spread across the Gilbert and Line Islands</p> | |
| </div> | |
| </div> | |
| <!-- Data Tables --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-12" data-aos="fade-up"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-xl font-semibold flex items-center"> | |
| <i data-feather="grid" class="mr-2"></i> Clinic Details Overview | |
| </h2> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Island</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clinics</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nurses</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Power Source</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Internet</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Equipment</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">Tarawa</td> | |
| <td class="px-6 py-4 whitespace-nowrap">12</td> | |
| <td class="px-6 py-4 whitespace-nowrap">45</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Grid/Solar</td> | |
| <td class="px-6 py-4 whitespace-nowrap">TSKL</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Complete</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap">Kiritimati</td> | |
| <td class="px-6 py-4 whitespace-nowrap">8</td> | |
| <td class="px-6 py-4 whitespace-nowrap">28</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Generator/Solar</td> | |
| <td class="px-6 py-4 whitespace-nowrap">TSKL</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Moderate</td> | |
| </tr> | |
| <!-- More rows would be here in a real implementation --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-blue-800 text-white py-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex md:justify-between"> | |
| <div class="mb-6 md:mb-0"> | |
| <h3 class="text-lg font-semibold mb-2">Ministry of Health and Medical Services</h3> | |
| <p class="text-blue-200">Republic of Kiribati</p> | |
| </div> | |
| <div> | |
| <p class="text-blue-200">© 2023 Clinic Assessment Dashboard. Public information.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Login Modal --> | |
| <div id="loginModal" class="fixed inset-0 z-50 hidden login-modal"> | |
| <div class="flex items-center justify-center min-h-screen p-4"> | |
| <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6" data-aos="zoom-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold">Admin Login</h3> | |
| <button id="closeModal" class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <form id="loginForm"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="username">Username</label> | |
| <input type="text" id="username" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2" for="password">Password</label> | |
| <input type="password" id="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition">Login</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize animations | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0x172554, | |
| size: 0.8 | |
| }); | |
| // Charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Island distribution chart | |
| const islandCtx = document.getElementById('islandChart').getContext('2d'); | |
| new Chart(islandCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Gilbert Islands', 'Line Islands', 'Phoenix Islands'], | |
| datasets: [{ | |
| label: 'Number of Clinics', | |
| data: [112, 28, 7], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(245, 158, 11, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgb(59, 130, 246)', | |
| 'rgb(16, 185, 129)', | |
| 'rgb(245, 158, 11)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| // Equipment chart | |
| const equipmentCtx = document.getElementById('equipmentChart').getContext('2d'); | |
| new Chart(equipmentCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Functional', 'Needs Repair', 'Not Available'], | |
| datasets: [{ | |
| data: [65, 20, 15], | |
| backgroundColor: [ | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(245, 158, 11, 0.7)', | |
| 'rgba(239, 68, 68, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgb(16, 185, 129)', | |
| 'rgb(245, 158, 11)', | |
| 'rgb(239, 68, 68)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'bottom' | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| // Modal functionality | |
| document.getElementById('loginBtn').addEventListener('click', function() { | |
| document.getElementById('loginModal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('closeModal').addEventListener('click', function() { | |
| document.getElementById('loginModal').classList.add('hidden'); | |
| }); | |
| document.getElementById('loginForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // In a real implementation, this would validate credentials and redirect to admin panel | |
| alert('Login functionality would redirect to admin panel for data management'); | |
| document.getElementById('loginModal').classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| document.getElementById('loginModal').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| this.classList.add('hidden'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |