Update templates/index.html

templates/index.html

@@ -107,7 +107,8 @@
         html.dark .logo-shimmer { background-image: linear-gradient(90deg, #c084fc, #e879f9, #c084fc); }
         @keyframes shimmer { to { background-position: 200% center; } }
 
-        .view-section { display: none; width: 100%; max-width: 28rem; flex-direction: column; align-items: center; opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.5s; }
+        /* Adjusted view-section to perfectly center vertically and horizontally */
+        .view-section { display: none; width: 100%; max-width: 28rem; flex-direction: column; align-items: center; justify-content: center; margin: auto; opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.5s; }
         .view-section.active { display: flex; opacity: 1; transform: translateY(0); }
 
         #scanning-section { display: none; margin-top: 1.5rem; opacity: 0; transform: scale(0.95); transition: all 0.5s; }
@@ -116,7 +117,8 @@
         html.dark .progress-track { background: rgba(255,255,255,0.15); }
         .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #7c3aed, #d946ef); transition: width 0.4s; }
 
-        .result-image-frame { position: relative; width: 160px; height: 160px; border-radius: 2rem; border: 4px solid var(--glass-border); margin-bottom: -40px; z-index: 20; box-shadow: 0 15px 40px rgba(0,0,0,0.25); background: #111; cursor: pointer; transition: transform 0.2s; }
+        /* Scaled down image frame to prevent scrolling on small screens */
+        .result-image-frame { position: relative; width: 130px; height: 130px; border-radius: 2rem; border: 4px solid var(--glass-border); margin-bottom: -30px; z-index: 20; box-shadow: 0 15px 40px rgba(0,0,0,0.25); background: #111; cursor: pointer; transition: transform 0.2s; }
         .result-image-frame:hover { transform: scale(1.05); }
         .result-image-frame img { border-radius: inherit; }
         
@@ -221,7 +223,8 @@
         <i data-lucide="arrow-left" class="w-4 h-4 text-blue-800 dark:text-blue-300"></i>
     </button>
 
-    <main class="relative z-10 w-full min-h-screen flex flex-col items-center pt-20 pb-12 px-6">
+    <!-- Removed heavy top/bottom padding to allow flexbox to vertically center the active view beautifully -->
+    <main class="relative z-10 w-full min-h-[100dvh] flex flex-col justify-center items-center py-6 px-4">
         
         <!-- VIEW 1: HOME -->
         <div id="view-home" class="view-section active">
@@ -305,7 +308,7 @@
             </div>
 
             <!-- Image included in print layout, hover overlay is print-hide -->
-            <div class="result-image-frame group relative" onclick="openImageModal()">
+            <div class="result-image-frame group relative mx-auto" onclick="openImageModal()">
                 <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] print-hide">
                     <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>
@@ -313,14 +316,15 @@
                 <img id="result-photo" src="" class="w-full h-full object-cover transition-opacity duration-300" />
             </div>
 
-            <div class="glass-island p-8 pt-10 w-full flex flex-col items-center">
-                <div id="result-icon-bg" class="w-16 h-16 rounded-[1.5rem] flex items-center justify-center mb-4 shadow-xl transition-colors duration-500">
-                    <i id="result-icon" data-lucide="activity" class="w-8 h-8 text-white"></i>
+            <!-- Reduced top padding slightly to ensure it doesn't cause scrolling on small screens -->
+            <div class="glass-island p-6 pt-10 w-full flex flex-col items-center">
+                <div id="result-icon-bg" class="w-14 h-14 rounded-[1.5rem] flex items-center justify-center mb-3 shadow-xl transition-colors duration-500">
+                    <i id="result-icon" data-lucide="activity" class="w-7 h-7 text-white"></i>
                 </div>
                 
-                <h2 id="result-diagnosis" class="text-3xl font-bold mb-1 text-center tracking-tight w-full">--</h2>
-                <p id="result-severity" class="sub-label text-purple-600 dark:text-purple-400 mb-4 font-black text-xs text-center w-full">ANALYSIS COMPLETE</p>
-                <p id="result-desc" class="text-sm opacity-70 mb-6 font-medium text-center leading-relaxed max-w-[260px] w-full">--</p>
+                <h2 id="result-diagnosis" class="text-3xl font-bold mb-1 text-center tracking-tight w-full block mx-auto">--</h2>
+                <p id="result-severity" class="sub-label text-purple-600 dark:text-purple-400 mb-4 font-black text-xs text-center w-full block mx-auto">ANALYSIS COMPLETE</p>
+                <p id="result-desc" class="text-sm opacity-70 mb-6 font-medium text-center leading-relaxed max-w-[260px] w-full block mx-auto">--</p>
                 
                 <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>
@@ -351,7 +355,7 @@
                     <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
                     </button>
-                    <!-- TIMEOUT REMOVED to prevent block print warning -->
+                    <!-- TIMEOUT ENTIRELY REMOVED to prevent "automatic printing" blocks -->
                     <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>
@@ -458,15 +462,16 @@
                 <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>
+            <!-- Adjusted internal padding so the entire box stays neatly contained on screen -->
+            <div class="glass-island p-6 pt-8 w-full max-w-[420px] flex flex-col items-center">
+                <div id="calc-icon-bg" class="w-16 h-16 rounded-full flex items-center justify-center mb-4 shadow-xl transition-colors duration-500">
+                    <i id="calc-icon" data-lucide="activity" class="w-8 h-8 text-white"></i>
                 </div>
                 
-                <!-- ALLIGNED CENTERED DIAGNOSIS TEXTS -->
-                <h2 id="calc-diagnosis" class="text-3xl font-bold mb-2 text-center tracking-tight w-full">--</h2>
-                <p id="calc-severity" class="sub-label text-blue-600 dark:text-blue-400 mb-6 font-black text-xs text-center w-full">--</p>
-                <p id="calc-desc" class="text-sm opacity-80 mb-8 font-medium text-center leading-relaxed w-full">--</p>
+                <!-- ALLIGNED CENTERED DIAGNOSIS TEXTS (w-full block mx-auto forces strict text centering) -->
+                <h2 id="calc-diagnosis" class="text-3xl font-bold mb-2 text-center tracking-tight w-full block mx-auto">--</h2>
+                <p id="calc-severity" class="sub-label text-blue-600 dark:text-blue-400 mb-4 font-black text-xs text-center w-full block mx-auto">--</p>
+                <p id="calc-desc" class="text-sm opacity-80 mb-6 font-medium text-center leading-relaxed w-full block mx-auto">--</p>
 
                 <!-- DIABETES DETAILED PRINT SECTION -->
                 <div class="print-details w-full" id="calc-print-medical-details">
@@ -485,12 +490,13 @@
 
                 <!-- ADDED PRINT OPTION BUTTONS -->
                 <div class="flex gap-3 w-full mb-3 print-hide">
-                    <!-- TIMEOUT REMOVED to prevent block print warning -->
+                    <!-- TIMEOUT ENTIRELY REMOVED to prevent "automatic printing" blocks -->
                     <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>
                 
+                <!-- NEW: Hooks into resetCalculator to clear the form on close -->
                 <button onclick="resetCalculator()" 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>
@@ -788,7 +794,7 @@
 
         function showResult(data) {
             const colors = { 'emerald': 'bg-emerald-500', 'yellow': 'bg-yellow-500', 'orange': 'bg-orange-500', 'rose': 'bg-rose-500', 'purple': 'bg-purple-600' };
-            document.getElementById('result-icon-bg').className = `w-16 h-16 rounded-[1.5rem] flex items-center justify-center mb-4 shadow-xl ${colors[data.color] || 'bg-purple-600'}`;
+            document.getElementById('result-icon-bg').className = `w-14 h-14 rounded-[1.5rem] flex items-center justify-center mb-3 shadow-xl ${colors[data.color] || 'bg-purple-600'}`;
             document.getElementById('result-icon').setAttribute('data-lucide', data.icon);
             document.getElementById('result-diagnosis').textContent = data.diagnosis;
             document.getElementById('result-severity').textContent = data.severity;