Update templates/database.html

templates/database.html

@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>RetiCheck | Patient Database</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
         body { background: #0f172a; color: white; padding: 30px; text-align: center; }
@@ -23,10 +26,8 @@
         .btn-back { display: inline-block; padding: 12px 20px; background: #334155; color: white; text-decoration: none; border-radius: 10px; transition: 0.3s; font-weight: bold; }
         .btn-back:hover { background: #475569; }
         
-        /* PUDHU CODE: எக்செல் பட்டன் டிசைன் 👇 */
         .btn-export { display: inline-block; padding: 12px 20px; background: #10b981; color: white; text-decoration: none; border-radius: 10px; font-weight: bold; margin-right: 15px; transition: 0.3s; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }
         .btn-export:hover { background: #059669; transform: translateY(-2px); }
-        /* PUDHU CODE END 👆 */
     </style>
 </head>
 <body>
@@ -35,6 +36,9 @@
         <h2>🏥 Patient Prediction Database</h2>
         <p style="color: #94a3b8; margin-bottom: 20px;">History of all retinal scans analyzed by AI.</p>
         
+        <div style="width: 100%; max-width: 320px; margin: 0 auto 30px auto; background: rgba(0,0,0,0.2); padding: 20px; border-radius: 20px; border: 1px solid #334155;">
+            <canvas id="diseaseChart"></canvas>
+        </div>
         <table>
             <thead>
                 <tr>
@@ -66,5 +70,28 @@
         </div>
     </div>
 
-</body>
+    <script>
+        const ctx = document.getElementById('diseaseChart').getContext('2d');
+        const diseaseChart = new Chart(ctx, {
+            type: 'doughnut',
+            data: {
+                labels: ['Normal (Safe)', 'Diabetic (Urgent)', 'Glaucoma (Referral)'],
+                datasets: [{
+                    // பைதான் எண்ணி கொடுத்த நம்பர்களை இங்கே போடுகிறோம்
+                    data: [{{ n_count }}, {{ d_count }}, {{ g_count }}],
+                    backgroundColor: ['#10b981', '#ef4444', '#f59e0b'],
+                    borderWidth: 2,
+                    borderColor: '#0f172a',
+                    hoverOffset: 10
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    legend: { position: 'bottom', labels: { color: '#cbd5e1', font: { family: 'Poppins' } } }
+                }
+            }
+        });
+    </script>
+    </body>
 </html>