Update templates/index.html

templates/index.html

@@ -69,6 +69,7 @@
         @keyframes floatBlob { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 80px) scale(1.1); } }
 
         .glass-island { background: var(--glass-bg); backdrop-filter: blur(40px); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 2.5rem; transition: all 0.5s; }
+        
         .inner-btn { background: var(--btn-bg); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 2.2rem; padding: 1.6rem; display: flex; align-items: center; gap: 1.5rem; cursor: pointer; transition: all 0.4s; }
         .inner-btn:hover:not(.disabled) { transform: scale(1.04) translateY(-6px); background: rgba(255, 255, 255, 0.25); box-shadow: 0 15px 35px rgba(124, 58, 237, 0.15); }
         html.dark .inner-btn:hover:not(.disabled) { background: rgba(255, 255, 255, 0.12); box-shadow: 0 15px 35px rgba(217, 70, 239, 0.2); }
@@ -78,10 +79,24 @@
         .icon-vibrant { transition: all 0.4s ease; }
         .icon-purple { color: #6d28d9; }
         .icon-pink { color: #db2777; }
+        .icon-blue { color: #2563eb; }
         html.dark .icon-purple { color: #a855f7; filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.6)); }
         html.dark .icon-pink { color: #f472b6; filter: drop-shadow(0 0 12px rgba(244, 114, 182, 0.6)); }
+        html.dark .icon-blue { color: #60a5fa; filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.6)); }
         .inner-btn:hover:not(.disabled) .icon-vibrant { transform: scale(1.2) rotate(-5deg); }
 
+        /* FORM INPUT STYLES */
+        .glass-input {
+            width: 100%; padding: 0.9rem 1.2rem; border-radius: 1.2rem; margin-top: 0.3rem;
+            background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.1);
+            color: var(--text-main); font-weight: 600; font-size: 0.95rem; outline: none; transition: all 0.3s;
+            -webkit-appearance: none;
+        }
+        html.dark .glass-input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white; }
+        .glass-input:focus { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168,85,247,0.2); background: rgba(255,255,255,0.5); }
+        html.dark .glass-input:focus { background: rgba(0,0,0,0.2); }
+        .glass-input option { color: black; } 
+
         .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 99px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); backdrop-filter: blur(10px); }
         html.dark .status-badge { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); }
         .status-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 10px #22c55e; animation: pulse 2s infinite; }
@@ -107,7 +122,6 @@
         
         /* Modal Glass styles */
         .modal-glass { background: rgba(30, 30, 30, 0.45); backdrop-filter: blur(40px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 2rem; box-shadow: 0 25px 60px rgba(0,0,0,0.5); }
-        
         .img-magnifier-glass { position: absolute; border: 3px solid rgba(255,255,255,0.8); border-radius: 50%; cursor: none; width: 100px; height: 100px; display: none; box-shadow: 0 10px 20px rgba(0,0,0,0.5); pointer-events: none; z-index: 30; }
 
         @keyframes scan { 0% { top: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@@ -121,14 +135,17 @@
             * { text-shadow: none !important; }
             h2, p, span, div { color: black !important; }
             
+            /* Logic to exclusively print the active view */
+            .view-section { display: none !important; }
+            .view-section.active { display: block !important; opacity: 1 !important; transform: none !important; max-width: 100% !important; }
+
             .print-header { display: block !important; text-align: center; margin-bottom: 25px; border-bottom: 2px solid #000; padding-bottom: 15px; }
             .print-header h1 { font-size: 22px; margin-bottom: 5px; font-weight: bold; font-family: 'Times New Roman', serif; }
             .print-header p { font-size: 12px; color: #555 !important; font-family: 'Times New Roman', serif; margin: 2px 0; }
             
             .result-image-frame { margin: 0 auto 20px auto !important; width: 220px !important; height: 220px !important; border: 2px solid #000 !important; border-radius: 10px !important; box-shadow: none !important; }
-            #view-result { opacity: 1 !important; transform: none !important; display: block !important; max-width: 100% !important; }
-            #result-icon-bg { border: 2px solid #000 !important; box-shadow: none !important; background: transparent !important; border-radius: 50% !important;}
-            #result-icon-bg i { color: black !important; }
+            #result-icon-bg, #calc-icon-bg { border: 2px solid #000 !important; box-shadow: none !important; background: transparent !important; border-radius: 50% !important;}
+            #result-icon-bg i, #calc-icon-bg i { color: black !important; }
             .bg-black\/5, .bg-blue-500\/10 { background: white !important; border: 1px solid #aaa !important; }
             
             .print-details { display: block !important; margin-top: 25px; text-align: left; border-top: 2px solid #000; padding-top: 15px;}
@@ -139,10 +156,12 @@
     </style>
 </head>
 <body>
+    <!-- INITIAL LOADING SCREEN -->
     <div id="initial-loader" class="fixed inset-0 z-[999] flex flex-col items-center justify-center">
         <div class="relative flex flex-col items-center">
             <div class="mb-4 relative">
                 <div class="absolute inset-0 bg-purple-500 blur-2xl opacity-40 rounded-full animate-pulse"></div>
+                <!-- SVG LOGO: Integrated from component -->
                 <svg width="76" height="76" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" class="relative z-10 drop-shadow-2xl">
                     <defs>
                         <linearGradient id="loadMainGradient" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#7c3aed"/><stop offset="100%" stop-color="#d946ef"/></linearGradient>
@@ -174,6 +193,7 @@
         </div>
     </div>
 
+    <!-- BACKGROUND BLOBS -->
     <div class="bg-blob blob-1"></div><div class="bg-blob blob-2"></div>
 
     <button id="theme-toggle-btn" onclick="toggleTheme()" class="fixed top-6 right-6 z-50 p-2.5 rounded-full glass-island hover:scale-110 active:scale-95 transition-all shadow-lg backdrop-blur-md">
@@ -181,13 +201,21 @@
     </button>
 
     <main class="relative z-10 w-full min-h-screen flex flex-col items-center pt-20 pb-12 px-6">
+        
         <!-- VIEW 1: HOME -->
         <div id="view-home" class="view-section active">
-            <div class="text-center mb-10 flex flex-col items-center gap-6">
-                <svg width="90" height="90" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" class="drop-shadow-2xl hover:scale-105 transition-transform duration-500">
+            <div class="text-center mb-8 flex flex-col items-center gap-4">
+                <!-- SVG LOGO: Restored to Home View -->
+                <svg width="80" height="80" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" class="drop-shadow-2xl hover:scale-105 transition-transform duration-500">
                     <defs>
-                        <linearGradient id="mainGradient" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#7c3aed"/><stop offset="100%" stop-color="#d946ef"/></linearGradient>
-                        <linearGradient id="irisGradient" x1="256" y1="150" x2="256" y2="362" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#4c1d95"/><stop offset="100%" stop-color="#7c3aed"/></linearGradient>
+                        <linearGradient id="mainGradient" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
+                            <stop offset="0%" stop-color="#7c3aed"/>
+                            <stop offset="100%" stop-color="#d946ef"/>
+                        </linearGradient>
+                        <linearGradient id="irisGradient" x1="256" y1="150" x2="256" y2="362" gradientUnits="userSpaceOnUse">
+                            <stop offset="0%" stop-color="#4c1d95"/>
+                            <stop offset="100%" stop-color="#7c3aed"/>
+                        </linearGradient>
                     </defs>
                     <rect x="32" y="32" width="448" height="448" rx="110" fill="url(#mainGradient)" />
                     <path d="M256 160C176 160 110 210 80 256C110 302 176 352 256 352C336 352 402 302 432 256C402 210 336 160 256 160Z" fill="white"/>
@@ -196,24 +224,31 @@
                     <circle cx="276" cy="236" r="10" fill="white" fill-opacity="0.9"/>
                     <ellipse cx="256" cy="110" rx="160" ry="80" fill="white" fill-opacity="0.15"/>
                     <g stroke="white" stroke-width="8" stroke-linecap="round" stroke-opacity="0.9">
-                        <path d="M140 140 L110 140 L110 170" fill="none"/><path d="M372 140 L402 140 L402 170" fill="none"/><path d="M140 372 L110 372 L110 342" fill="none"/><path d="M372 372 L402 372 L402 342" fill="none"/>
+                        <path d="M140 140 L110 140 L110 170" fill="none"/>
+                        <path d="M372 140 L402 140 L402 170" fill="none"/>
+                        <path d="M140 372 L110 372 L110 342" fill="none"/>
+                        <path d="M372 372 L402 372 L402 342" fill="none"/>
                     </g>
                     <rect x="110" y="254" width="292" height="4" rx="2" fill="white" fill-opacity="0.6"/>
                 </svg>
+                
                 <div>
-                    <h1 class="text-5xl font-black mb-2"><span class="logo-shimmer">RetinaScan</span></h1>
-                    <div class="status-badge"><span class="status-dot"></span>AI Ensemble Active</div>
+                    <h1 class="text-4xl font-black mb-2"><span class="logo-shimmer">RetinaScan</span></h1>
+                    <div class="status-badge"><span class="status-dot"></span>Multi-Model AI</div>
                 </div>
             </div>
 
+            <!-- SELECTION ISLAND -->
             <div class="glass-island p-8 flex flex-col gap-5 w-full max-w-[420px]" id="selection-island">
-                <div onclick="startCameraFlow()" id="btn-camera" class="inner-btn group">
-                    <i data-lucide="camera" class="w-10 h-10 icon-vibrant icon-purple"></i>
-                    <div class="text-left"><span class="block text-xl font-bold">Take Photo</span><span class="sub-label opacity-70">PHONE CAMERA</span></div>
-                </div>
+                
                 <div onclick="triggerUpload()" id="btn-upload" class="inner-btn group">
-                    <i data-lucide="image" class="w-10 h-10 icon-vibrant icon-pink"></i>
-                    <div class="text-left"><span class="block text-xl font-bold">Choose Photo</span><span class="sub-label opacity-70">Photo Library</span></div>
+                    <i data-lucide="image" class="w-8 h-8 icon-vibrant icon-pink"></i>
+                    <div class="text-left"><span class="block text-xl font-bold">Upload Scan</span><span class="sub-label opacity-70">FUNDUS LIBRARY</span></div>
+                </div>
+                
+                <div onclick="switchView('view-calculator')" id="btn-calculator" class="inner-btn group">
+                    <i data-lucide="clipboard-list" class="w-8 h-8 icon-vibrant icon-blue"></i>
+                    <div class="text-left"><span class="block text-xl font-bold">Clinical Risk Form</span><span class="sub-label opacity-70">DIABETES PREDICTOR</span></div>
                 </div>
             </div>
 
@@ -221,11 +256,13 @@
                 <i data-lucide="lightbulb" class="w-5 h-5 text-yellow-500 mt-1 flex-shrink-0"></i>
                 <div>
                     <h3 class="font-bold text-sm mb-1">Quick Tip</h3>
-                    <p class="text-xs opacity-70 leading-relaxed">Ensure the room is well-lit and avoid glare on the screen for the most accurate AI diagnosis.</p>
+                    <p class="text-xs opacity-70 leading-relaxed">Upload a clear, glare-free image for accurate retinal analysis, or use the clinical form to instantly calculate your diabetes risk.</p>
                 </div>
             </div>
-            <footer class="mt-auto pt-8 text-center opacity-40 print-hide"><p class="text-[10px] font-mono uppercase tracking-widest">Powered by PyTorch Ensemble</p></footer>
 
+            <footer class="mt-auto pt-8 text-center opacity-40 print-hide"><p class="text-[10px] font-mono uppercase tracking-widest">Powered by PyTorch & Random Forest</p></footer>
+
+            <!-- SCAN LOADER -->
             <div id="scanning-section" class="w-full max-w-[420px] glass-island p-8 flex flex-col items-center">
                 <div class="relative w-56 h-56 rounded-[2rem] overflow-hidden shadow-2xl mb-6 bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/20">
                     <img id="scan-preview" src="" class="w-full h-full object-cover opacity-90" />
@@ -240,7 +277,7 @@
             <input type="file" id="file-input" class="hidden" accept="image/*" onchange="handleFileSelect(event)" />
         </div>
 
-        <!-- VIEW 2: RESULTS -->
+        <!-- VIEW 2: RETINA RESULTS -->
         <div id="view-result" class="view-section">
             <div class="print-header">
                 <h1>RETINASCAN MEDICAL DIAGNOSTICS</h1>
@@ -249,7 +286,6 @@
             </div>
 
             <div class="result-image-frame print-hide group relative" onclick="openImageModal()">
-                <!-- Hover overlay icon indicating it's clickable -->
                 <div class="absolute inset-0 bg-black/40 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10 rounded-[1.6rem]">
                     <i data-lucide="maximize-2" class="w-8 h-8 text-white"></i>
                     <span class="text-white text-xs font-bold mt-2 uppercase tracking-widest drop-shadow-md">View Full Screen</span>
@@ -266,7 +302,6 @@
                 <p id="result-severity" class="sub-label text-purple-600 dark:text-purple-400 mb-4 font-black text-xs print-hide">ANALYSIS COMPLETE</p>
                 <p id="result-desc" class="text-sm opacity-70 mb-6 font-medium text-center leading-relaxed max-w-[260px] print-hide">--</p>
                 
-                <!-- Confidence Score (Hidden on Print) -->
                 <div class="w-full bg-black/5 dark:bg-white/5 p-4 rounded-2xl border border-black/10 dark:border-white/10 text-center mb-4 shadow-inner print-hide">
                     <p class="sub-label mb-1 opacity-50">AI Confidence Score</p>
                     <p id="result-conf" class="text-2xl font-mono font-bold">--%</p>
@@ -292,7 +327,6 @@
                     <p id="print-meds">---</p>
                 </div>
 
-                <!-- Sync'd Action Buttons (Main View) -->
                 <div class="flex gap-3 w-full mb-3 print-hide">
                     <button onclick="toggleHeatmap()" id="btn-main-heatmap" class="flex-[1] py-3.5 rounded-2xl bg-purple-500/10 hover:bg-purple-500/20 text-purple-700 dark:text-purple-300 font-bold text-sm border border-purple-500/20 transition-all hidden">
                         <i data-lucide="eye" class="w-4 h-4 inline-block -mt-0.5 mr-1"></i> Heatmap
@@ -303,17 +337,149 @@
                 </div>
 
                 <button onclick="resetApp()" class="w-full py-4 rounded-2xl bg-purple-600 hover:bg-purple-700 text-white font-bold text-base shadow-xl shadow-purple-900/20 active:scale-95 transition-all print-hide">
-                    Start New Scan
+                    Done
+                </button>
+            </div>
+        </div>
+
+        <!-- VIEW 4: DIABETES CALCULATOR FORM -->
+        <div id="view-calculator" class="view-section">
+            <div class="w-full max-w-[420px] flex items-center justify-between mb-6">
+                <button onclick="switchView('view-home')" class="p-3 rounded-full bg-white/20 dark:bg-white/5 hover:bg-white/40 border border-white/20 transition-all">
+                    <i data-lucide="arrow-left" class="w-5 h-5"></i>
+                </button>
+                <h2 class="text-xl font-bold tracking-tight">Clinical Risk Form</h2>
+                <div class="w-11"></div> <!-- spacer -->
+            </div>
+
+            <div class="glass-island p-8 w-full max-w-[420px]">
+                <form id="diabetes-form" onsubmit="submitDiabetesForm(event)" class="flex flex-col gap-5">
+                    
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label class="block sub-label mb-1">Gender</label>
+                            <select id="calc-gender" required class="glass-input">
+                                <option value="" disabled selected>Select</option>
+                                <option value="Male">Male</option>
+                                <option value="Female">Female</option>
+                                <option value="Other">Other</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block sub-label mb-1">Age</label>
+                            <input type="number" id="calc-age" required min="1" max="120" step="1" class="glass-input" placeholder="e.g. 45">
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label class="block sub-label mb-1">Hypertension</label>
+                            <select id="calc-hyper" required class="glass-input">
+                                <option value="" disabled selected>Select</option>
+                                <option value="0">No</option>
+                                <option value="1">Yes</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block sub-label mb-1">Heart Disease</label>
+                            <select id="calc-heart" required class="glass-input">
+                                <option value="" disabled selected>Select</option>
+                                <option value="0">No</option>
+                                <option value="1">Yes</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label class="block sub-label mb-1">Smoking History</label>
+                            <select id="calc-smoke" required class="glass-input">
+                                <option value="" disabled selected>Select</option>
+                                <option value="never">Never</option>
+                                <option value="former">Former</option>
+                                <option value="current">Current</option>
+                                <option value="ever">Ever</option>
+                                <option value="not current">Not Current</option>
+                                <option value="No Info">No Info</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block sub-label mb-1">BMI</label>
+                            <input type="number" id="calc-bmi" required min="10" max="80" step="0.01" class="glass-input" placeholder="e.g. 27.50">
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label class="block sub-label mb-1">HbA1c Level (%)</label>
+                            <input type="number" id="calc-hba1c" required min="3" max="15" step="0.1" class="glass-input" placeholder="e.g. 6.5">
+                        </div>
+                        <div>
+                            <label class="block sub-label mb-1">Blood Glucose</label>
+                            <input type="number" id="calc-glucose" required min="50" max="400" step="1" class="glass-input" placeholder="e.g. 140">
+                        </div>
+                    </div>
+
+                    <button type="submit" id="btn-submit-calc" class="mt-4 w-full py-4 rounded-2xl bg-blue-600 hover:bg-blue-700 text-white font-bold text-base shadow-xl active:scale-95 transition-all flex justify-center items-center gap-2">
+                        <span>Calculate Risk</span>
+                        <i data-lucide="calculator" class="w-5 h-5"></i>
+                    </button>
+                </form>
+            </div>
+        </div>
+
+        <!-- VIEW 5: CALCULATOR RESULT -->
+        <div id="view-calc-result" class="view-section">
+            
+            <!-- CALCULATOR PRINT HEADER -->
+            <div class="print-header">
+                <h1>CLINICAL DIABETES RISK REPORT</h1>
+                <p><strong>Patient ID:</strong> <span id="calc-print-id">---</span></p>
+                <p><strong>Date of Analysis:</strong> <span id="calc-print-date">---</span></p>
+            </div>
+
+            <div class="glass-island p-8 pt-10 w-full max-w-[420px] flex flex-col items-center">
+                <div id="calc-icon-bg" class="w-20 h-20 rounded-full flex items-center justify-center mb-6 shadow-xl transition-colors duration-500">
+                    <i id="calc-icon" data-lucide="activity" class="w-10 h-10 text-white"></i>
+                </div>
+                
+                <h2 id="calc-diagnosis" class="text-3xl font-bold mb-2 text-center tracking-tight">--</h2>
+                <p id="calc-severity" class="sub-label text-blue-600 dark:text-blue-400 mb-6 font-black text-xs print-hide">--</p>
+                <p id="calc-desc" class="text-sm opacity-80 mb-8 font-medium text-center leading-relaxed print-hide">--</p>
+
+                <!-- DIABETES DETAILED PRINT SECTION -->
+                <div class="print-details w-full" id="calc-print-medical-details">
+                    <h3>Biomarker Analysis</h3>
+                    <p id="calc-print-analysis">---</p>
+                    
+                    <h3>Dietary Recommendations</h3>
+                    <p id="calc-print-foods">---</p>
+                    
+                    <h3>Lifestyle & Maintenance</h3>
+                    <p id="calc-print-lifestyle">---</p>
+
+                    <h3>Medical Interventions & Medicines</h3>
+                    <p id="calc-print-meds">---</p>
+                </div>
+
+                <!-- ADDED PRINT OPTION BUTTONS -->
+                <div class="flex gap-3 w-full mb-3 print-hide">
+                    <button onclick="window.print()" class="flex-[1] py-3.5 rounded-2xl bg-blue-500/10 hover:bg-blue-500/20 text-blue-700 dark:text-blue-300 font-bold text-sm border border-blue-500/20 transition-all">
+                        <i data-lucide="printer" class="w-4 h-4 inline-block -mt-0.5 mr-1"></i> Print Report
+                    </button>
+                </div>
+                
+                <button onclick="switchView('view-home')" class="w-full py-4 rounded-2xl bg-blue-600 hover:bg-blue-700 text-white font-bold text-base shadow-xl active:scale-95 transition-all print-hide">
+                    Done
                 </button>
             </div>
         </div>
 
-        <!-- FULL SCREEN IMAGE MODAL (NEW) -->
+        <!-- FULL SCREEN IMAGE MODAL -->
         <div id="image-modal" class="hidden fixed inset-0 z-[200] flex items-center justify-center p-6">
             <div class="absolute inset-0 bg-black/80 backdrop-blur-xl" onclick="closeImageModal()"></div>
             
             <div class="relative w-full max-w-[420px] modal-glass p-6 flex flex-col items-center">
-                <!-- Close Button -->
                 <button onclick="closeImageModal()" class="absolute top-4 right-4 p-2.5 bg-white/10 hover:bg-white/20 rounded-full backdrop-blur text-white transition-all z-50">
                     <i data-lucide="x" class="w-5 h-5"></i>
                 </button>
@@ -322,45 +488,25 @@
                     <h3 class="text-white font-bold text-lg tracking-wider">Image Inspection</h3>
                 </div>
 
-                <!-- Large Image Frame with Interactive Magnifier -->
                 <div class="relative w-full aspect-square rounded-[1.5rem] overflow-hidden border-2 border-white/20 shadow-inner bg-black cursor-crosshair" 
                      onmouseenter="showModalMagnifier(true)" 
                      onmouseleave="showModalMagnifier(false)" 
                      onmousemove="moveModalMagnifier(event)" 
                      ontouchmove="moveModalMagnifier(event)">
-                    
                     <div id="modal-magnifier-glass" class="img-magnifier-glass"></div>
-                    
                     <img id="modal-photo" src="" class="w-full h-full object-cover transition-opacity duration-300" />
                 </div>
 
-                <!-- Heatmap Toggle Switch (Syncs with Main View) -->
                 <button onclick="toggleHeatmap()" id="btn-modal-heatmap" class="mt-6 w-full py-4 rounded-2xl bg-purple-500/20 hover:bg-purple-500/30 text-white font-bold text-sm border border-purple-500/30 transition-all hidden shadow-lg shadow-purple-500/10">
                     <i data-lucide="eye" class="w-4 h-4 inline-block -mt-0.5 mr-1"></i> Toggle AI Heatmap
                 </button>
             </div>
         </div>
 
-        <!-- VIEW 3: CAMERA -->
-        <div id="view-camera" class="hidden fixed inset-0 bg-black z-[100] flex-col items-center justify-center">
-            <video id="camera-feed" autoplay playsinline class="absolute inset-0 w-full h-full object-cover opacity-80"></video>
-            <div class="absolute top-0 left-0 w-full p-8 flex justify-between items-start z-20">
-                <button onclick="stopCamera()" class="p-4 rounded-full bg-black/40 text-white backdrop-blur-md hover:bg-black/60"><i data-lucide="x" class="w-6 h-6"></i></button>
-                <button onclick="toggleTorch()" id="btn-torch" class="p-4 rounded-full bg-black/40 text-white backdrop-blur-md hover:bg-black/60 hidden"><i data-lucide="zap" class="w-6 h-6"></i></button>
-            </div>
-            <div class="relative z-10 w-72 h-72 rounded-full border-2 border-white/40 border-dashed shadow-[0_0_0_9999px_rgba(0,0,0,0.9)]"></div>
-            <div class="absolute bottom-40 z-20 flex flex-col items-center gap-2 text-center w-full px-6">
-                <p class="text-white font-bold text-lg tracking-wide drop-shadow-md">Align Eye in Circle</p>
-                <p class="text-white/70 text-xs font-medium max-w-[200px] bg-black/30 px-3 py-1 rounded-full backdrop-blur-sm">Ensure good lighting & no glare</p>
-            </div>
-            <div class="absolute bottom-12 flex justify-center w-full z-20">
-                <button onclick="capturePhoto()" class="w-20 h-20 rounded-full border-[4px] border-white flex items-center justify-center active:scale-90 hover:bg-white/10"><div class="w-16 h-16 rounded-full bg-white shadow-lg"></div></button>
-            </div>
-            <canvas id="camera-canvas" class="hidden"></canvas>
-        </div>
     </main>
 
     <script>
+        // --- Core UI Logic ---
         window.addEventListener('DOMContentLoaded', () => {
             const isDark = document.documentElement.classList.contains('dark');
             const metaTheme = document.getElementById('theme-color-meta');
@@ -397,18 +543,120 @@
                 setTimeout(() => { if(!v.classList.contains('active')) v.style.display = 'none'; }, 500);
             });
             const target = document.getElementById(id);
-            if(id !== 'view-camera') {
-                document.getElementById('view-camera').classList.add('hidden');
-                document.getElementById('view-camera').classList.remove('flex');
-                document.getElementById('theme-toggle-btn').style.display = 'block'; 
-                setTimeout(() => { target.style.display = 'flex'; void target.offsetWidth; target.classList.add('active'); }, 500);
+            
+            document.getElementById('theme-toggle-btn').style.display = 'block'; 
+            setTimeout(() => { target.style.display = 'flex'; void target.offsetWidth; target.classList.add('active'); }, 500);
+        }
+
+        // --- DIABETES DYNAMIC REPORT GENERATOR ---
+        function generateDiabetesReport(payload) {
+            let analysis = [];
+            let foods = [];
+            let meds = [];
+            let lifestyle = [];
+
+            let bmi = parseFloat(payload.bmi);
+            if (bmi < 18.5) analysis.push(`• BMI: ${bmi} (Underweight)`);
+            else if (bmi <= 24.9) analysis.push(`• BMI: ${bmi} (Normal)`);
+            else {
+                analysis.push(`• BMI: ${bmi} (Overweight/Obese - HIGH)`);
+                foods.push("- Focus on a caloric deficit using lean proteins, high-fiber vegetables, and whole grains.");
+                lifestyle.push("- Aim for at least 150 minutes of moderate aerobic activity per week for weight management.");
+            }
+
+            let hba1c = parseFloat(payload.HbA1c_level);
+            if (hba1c < 5.7) analysis.push(`• HbA1c Level: ${hba1c}% (Normal)`);
+            else if (hba1c <= 6.4) {
+                analysis.push(`• HbA1c Level: ${hba1c}% (Pre-diabetes range - ELEVATED)`);
+                foods.push("- Reduce refined carbohydrates and sugary drinks. Opt for low-glycemic index (GI) foods.");
+            } else {
+                analysis.push(`• HbA1c Level: ${hba1c}% (Diabetic range - HIGH)`);
+                foods.push("- Strictly monitor carbohydrate intake. Incorporate foods like bitter gourd, fenugreek, and high-fiber greens.");
+                meds.push("- Consult an endocrinologist for potential initiation of oral hypoglycemics (e.g., Metformin) or insulin therapy.");
+            }
+
+            let glucose = parseFloat(payload.blood_glucose_level);
+            if (glucose < 140) analysis.push(`• Blood Glucose: ${glucose} mg/dL (Acceptable)`);
+            else {
+                analysis.push(`• Blood Glucose: ${glucose} mg/dL (ELEVATED)`);
+                lifestyle.push("- Monitor post-meal glucose levels regularly. Stay well hydrated to help kidneys flush excess sugar.");
+                if (meds.length === 0) meds.push("- Discuss glucose-lowering medications with a healthcare provider.");
+            }
+
+            if (payload.hypertension === "1") {
+                analysis.push(`• Hypertension: Present (High Risk Factor)`);
+                foods.push("- Adopt the DASH diet (Dietary Approaches to Stop Hypertension): strictly limit sodium and saturated fats.");
+                meds.push("- Review anti-hypertensive medications (e.g., ACE inhibitors/ARBs) with your cardiologist.");
+            }
+            if (payload.heart_disease === "1") {
+                analysis.push(`• Heart Disease: Present (High Risk Factor)`);
+                lifestyle.push("- Strict cardiovascular monitoring is critical. Consult a cardiologist before engaging in high-intensity exercise.");
             }
+
+            if(foods.length === 0) foods.push("- Maintain a balanced diet rich in micronutrients to sustain your current healthy metrics.");
+            if(meds.length === 0) meds.push("- No specific anti-diabetic medications are indicated based on these metrics.");
+            if(lifestyle.length === 0) lifestyle.push("- Continue with regular annual check-ups and maintain an active lifestyle.");
+
+            document.getElementById('calc-print-analysis').innerText = analysis.join('\n');
+            document.getElementById('calc-print-foods').innerText = foods.join('\n');
+            document.getElementById('calc-print-meds').innerText = [...new Set(meds)].join('\n');
+            document.getElementById('calc-print-lifestyle').innerText = [...new Set(lifestyle)].join('\n');
+            
+            document.getElementById('calc-print-date').textContent = new Date().toLocaleDateString();
+            document.getElementById('calc-print-id').textContent = 'DBT-' + Math.floor(Math.random() * 900000 + 100000);
+        }
+
+        function submitDiabetesForm(e) {
+            e.preventDefault();
+            const btn = document.getElementById('btn-submit-calc');
+            const originalHTML = btn.innerHTML;
+            btn.innerHTML = `<i data-lucide="loader-2" class="w-5 h-5 animate-spin mx-auto"></i>`;
+            btn.classList.add('opacity-70', 'cursor-not-allowed');
+            lucide.createIcons();
+
+            const payload = {
+                gender: document.getElementById('calc-gender').value,
+                age: document.getElementById('calc-age').value,
+                hypertension: document.getElementById('calc-hyper').value,
+                heart_disease: document.getElementById('calc-heart').value,
+                smoking_history: document.getElementById('calc-smoke').value,
+                bmi: document.getElementById('calc-bmi').value,
+                HbA1c_level: document.getElementById('calc-hba1c').value,
+                blood_glucose_level: document.getElementById('calc-glucose').value
+            };
+
+            fetch('/predict_diabetes', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            })
+            .then(res => res.json())
+            .then(data => {
+                if(data.error) {
+                    alert("Error: " + data.error);
+                } else {
+                    const colors = { 'emerald': 'bg-emerald-500', 'orange': 'bg-orange-500', 'rose': 'bg-rose-500' };
+                    document.getElementById('calc-icon-bg').className = `w-20 h-20 rounded-full flex items-center justify-center mb-6 shadow-xl transition-colors duration-500 ${colors[data.color]}`;
+                    document.getElementById('calc-icon').setAttribute('data-lucide', data.icon);
+                    document.getElementById('calc-diagnosis').textContent = data.diagnosis;
+                    document.getElementById('calc-severity').textContent = data.severity;
+                    document.getElementById('calc-desc').textContent = data.description;
+                    
+                    generateDiabetesReport(payload);
+                    lucide.createIcons();
+                    switchView('view-calc-result');
+                }
+            })
+            .catch(err => alert("Connection failed."))
+            .finally(() => {
+                btn.innerHTML = originalHTML;
+                btn.classList.remove('opacity-70', 'cursor-not-allowed');
+                lucide.createIcons();
+            });
         }
 
         function resetApp() {
-            stopCamera();
             document.getElementById('file-input').value = '';
-            document.getElementById('btn-camera').classList.remove('disabled');
             document.getElementById('btn-upload').classList.remove('disabled');
             document.getElementById('scanning-section').classList.remove('show');
             setTimeout(() => {
@@ -419,58 +667,7 @@
             switchView('view-home');
         }
 
-        let originalImageSrc = '';
-        let heatmapImageSrc = '';
-        let isHeatmapShowing = false;
-        let stream = null; let track = null; let torchState = false;
-
-        async function startCameraFlow() {
-            if(document.getElementById('btn-camera').classList.contains('disabled')) return;
-            const camView = document.getElementById('view-camera');
-            camView.classList.remove('hidden'); camView.classList.add('flex');
-            document.getElementById('theme-toggle-btn').style.display = 'none';
-            try {
-                stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment', width: { ideal: 1920 }, height: { ideal: 1080 } } });
-                const videoEl = document.getElementById('camera-feed');
-                videoEl.srcObject = stream; track = stream.getVideoTracks()[0];
-                if (track.getCapabilities().torch) {
-                    const torchBtn = document.getElementById('btn-torch');
-                    torchBtn.classList.remove('hidden'); torchState = false; 
-                }
-            } catch(e) { 
-                alert("Could not access camera. Please check permissions.");
-                camView.classList.add('hidden'); document.getElementById('theme-toggle-btn').style.display = 'block';
-            }
-        }
-
-        async function toggleTorch() {
-            if (!track) return;
-            try {
-                torchState = !torchState;
-                await track.applyConstraints({ advanced: [{ torch: torchState }] });
-                const btn = document.getElementById('btn-torch');
-                if (torchState) { btn.classList.add('bg-yellow-500/80', 'text-black'); btn.classList.remove('bg-black/40', 'text-white'); } 
-                else { btn.classList.remove('bg-yellow-500/80', 'text-black'); btn.classList.add('bg-black/40', 'text-white'); }
-            } catch (e) { torchState = !torchState; }
-        }
-
-        function stopCamera() {
-            if (track && torchState) {
-                track.applyConstraints({ advanced: [{ torch: false }] }).catch(() => {}); torchState = false;
-                const btn = document.getElementById('btn-torch');
-                btn.classList.remove('bg-yellow-500/80', 'text-black'); btn.classList.add('bg-black/40', 'text-white'); btn.classList.add('hidden'); 
-            }
-            if(stream) { stream.getTracks().forEach(t => t.stop()); stream = null; track = null; }
-            document.getElementById('view-camera').classList.add('hidden'); document.getElementById('view-camera').classList.remove('flex');
-            document.getElementById('theme-toggle-btn').style.display = 'block';
-        }
-
-        function capturePhoto() {
-            const video = document.getElementById('camera-feed'); const canvas = document.getElementById('camera-canvas');
-            canvas.width = video.videoWidth; canvas.height = video.videoHeight;
-            const ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-            canvas.toBlob(blob => { stopCamera(); processImage(blob); }, 'image/jpeg', 0.95);
-        }
+        let originalImageSrc = ''; let heatmapImageSrc = ''; let isHeatmapShowing = false;
 
         function triggerUpload() { 
             if(document.getElementById('btn-upload').classList.contains('disabled')) return;
@@ -482,17 +679,13 @@
         function processImage(fileBlob) {
             const reader = new FileReader();
             reader.onload = (e) => {
-                document.getElementById('btn-camera').classList.add('disabled');
                 document.getElementById('btn-upload').classList.add('disabled');
-                
                 originalImageSrc = e.target.result;
                 document.getElementById('scan-preview').src = originalImageSrc;
                 document.getElementById('result-photo').src = originalImageSrc;
-                
                 const scanSection = document.getElementById('scanning-section');
                 scanSection.style.display = 'flex';
                 setTimeout(() => { scanSection.classList.add('show'); scanSection.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 50);
-                
                 simulateScanProgress();
 
                 const formData = new FormData();
@@ -501,7 +694,7 @@
                 fetch('/analyze', { method: 'POST', body: formData })
                     .then(r => r.json())
                     .then(data => setTimeout(() => showResult(data), 3200))
-                    .catch(err => { alert("Analysis failed."); resetApp(); });
+                    .catch(err => { resetApp(); });
             };
             reader.readAsDataURL(fileBlob);
         }
@@ -517,7 +710,6 @@
             steps.forEach((step, i) => { setTimeout(() => { status.innerText = step.s; detail.innerText = step.d; bar.style.width = step.w; }, i * 800); });
         }
 
-        // Updated Database with Detailed Evidence and Stage Information for Reports
         const medicalDatabase = {
             "No DR": {
                 desc: "STAGE: NORMAL (No Diabetic Retinopathy).\n\nVISUAL EVIDENCE: The AI identified a healthy vascular structure. No microaneurysms, hemorrhages, or hard exudates were detected in the provided retinal image.",
@@ -582,31 +774,21 @@
             switchView('view-result');
         }
 
-        // --- UNIFIED HEATMAP TOGGLE (Syncs Main View and Modal) ---
         function toggleHeatmap() {
             isHeatmapShowing = !isHeatmapShowing;
-            
             const mainImg = document.getElementById('result-photo');
             const modalImg = document.getElementById('modal-photo');
             const mainBtn = document.getElementById('btn-main-heatmap');
             const modalBtn = document.getElementById('btn-modal-heatmap');
-            
             const targetSrc = isHeatmapShowing ? heatmapImageSrc : originalImageSrc;
-            
-            // Fade out
             mainImg.style.opacity = '0';
             modalImg.style.opacity = '0';
             
             setTimeout(() => {
-                // Change source
                 mainImg.src = targetSrc;
                 modalImg.src = targetSrc;
-                
-                // Fade in
                 mainImg.style.opacity = '1';
                 modalImg.style.opacity = '1';
-                
-                // Ensure magnifier updates its background if modal is open
                 setTimeout(() => {
                     if(!document.getElementById('image-modal').classList.contains('hidden')) {
                         setupModalMagnifier();
@@ -615,22 +797,16 @@
             }, 300);
 
             if(isHeatmapShowing) {
-                // Main Btn UI
                 mainBtn.classList.add('bg-purple-500', 'text-white'); 
                 mainBtn.classList.remove('bg-purple-500/10', 'text-purple-700', 'dark:text-purple-300');
                 mainBtn.innerHTML = `<i data-lucide="eye-off" class="w-4 h-4 inline-block -mt-0.5 mr-1"></i> Original`;
-                
-                // Modal Btn UI
                 modalBtn.classList.add('bg-purple-500', 'text-white'); 
                 modalBtn.classList.remove('bg-purple-500/20', 'text-white');
                 modalBtn.innerHTML = `<i data-lucide="eye-off" class="w-4 h-4 inline-block -mt-0.5 mr-1"></i> Hide AI Heatmap`;
             } else {
-                // Main Btn UI
                 mainBtn.classList.remove('bg-purple-500', 'text-white'); 
                 mainBtn.classList.add('bg-purple-500/10', 'text-purple-700', 'dark:text-purple-300');
                 mainBtn.innerHTML = `<i data-lucide="eye" class="w-4 h-4 inline-block -mt-0.5 mr-1"></i> Heatmap`;
-
-                // Modal Btn UI
                 modalBtn.classList.remove('bg-purple-500', 'text-white'); 
                 modalBtn.classList.add('bg-purple-500/20', 'text-white');
                 modalBtn.innerHTML = `<i data-lucide="eye" class="w-4 h-4 inline-block -mt-0.5 mr-1"></i> Toggle AI Heatmap`;
@@ -638,14 +814,11 @@
             lucide.createIcons();
         }
 
-        // --- FULL SCREEN MODAL & MAGNIFIER LOGIC ---
-        
         function openImageModal() {
             if(window.matchMedia('print').matches) return;
             const modal = document.getElementById('image-modal');
             const modalImg = document.getElementById('modal-photo');
             modalImg.src = isHeatmapShowing ? heatmapImageSrc : originalImageSrc;
-            
             modal.classList.remove('hidden');
             setTimeout(setupModalMagnifier, 150);
         }
@@ -658,7 +831,6 @@
         function setupModalMagnifier() {
             const img = document.getElementById('modal-photo');
             const glass = document.getElementById('modal-magnifier-glass');
-            
             glass.style.backgroundImage = "url('" + img.src + "')";
             glass.style.backgroundRepeat = "no-repeat";
             glass.style.backgroundSize = (img.clientWidth * zoomLevel) + "px " + (img.clientHeight * zoomLevel) + "px";
@@ -674,15 +846,12 @@
             const glass = document.getElementById('modal-magnifier-glass');
             const pos = getCursorPos(e, img);
             let x = pos.x; let y = pos.y;
-            
             let w = glass.offsetWidth / 2; let h = glass.offsetHeight / 2;
             let bw = 3; 
-            
             if (x > img.clientWidth) { x = img.clientWidth; }
             if (x < 0) { x = 0; }
             if (y > img.clientHeight) { y = img.clientHeight; }
             if (y < 0) { y = 0; }
-            
             glass.style.left = (x - w) + "px";
             glass.style.top = (y - h) + "px";
             glass.style.backgroundPosition = "-" + ((x * zoomLevel) - w + bw) + "px -" + ((y * zoomLevel) - h + bw) + "px";