Update templates/index.html

templates/index.html

@@ -5,15 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>RetinaScan</title>
     
-    <!-- APP ICONS (Updated with Cache Busting) -->
-    <!-- Browser Tab Icon -->
-    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='logo.svg') }}?v=2">
-    
-    <!-- iOS Home Screen Icon (Forces reload) -->
-    <link rel="apple-touch-icon" href="{{ url_for('static', filename='logo.png') }}?v=2">
-    
-    <!-- Android Manifest -->
-    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}?v=2">
+    <!-- APP ICONS -->
+    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='logo.svg') }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='logo.png') }}">
+    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
 
     <meta name="apple-mobile-web-app-title" content="RetinaScan">
     <meta name="apple-mobile-web-app-capable" content="yes">
@@ -33,24 +28,24 @@
             --bg-grad-end: #e5d1ff;
             --text-main: #2d004d;
             --text-secondary: #5a2e85;
-            --glass-bg: rgba(255, 255, 255, 0.5);
-            --glass-border: rgba(255, 255, 255, 0.8);
+            --glass-bg: rgba(255, 255, 255, 0.45);
+            --glass-border: rgba(255, 255, 255, 0.65);
             --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
             --icon-vibrant: #7c3aed;
-            --btn-bg: rgba(255, 255, 255, 0.4);
+            --btn-bg: rgba(255, 255, 255, 0.45);
         }
 
         [data-theme="dark"] {
             /* iOS Dark Theme */
-            --bg-grad-start: #1c1c1e;
-            --bg-grad-end: #0a0a0c;
+            --bg-grad-start: #111113;
+            --bg-grad-end: #050505;
             --text-main: #f3e8ff; 
             --text-secondary: #c084fc; 
-            --glass-bg: rgba(44, 44, 46, 0.75);
+            --glass-bg: rgba(35, 35, 40, 0.65);
             --glass-border: rgba(255, 255, 255, 0.12);
             --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
             --icon-vibrant: #d946ef;
-            --btn-bg: rgba(255, 255, 255, 0.05);
+            --btn-bg: rgba(255, 255, 255, 0.08);
         }
 
         body {
@@ -62,16 +57,52 @@
             overflow-x: hidden;
             transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
             letter-spacing: -0.02em;
+            position: relative;
+        }
+
+        /* BACKGROUND BLOBS */
+        .bg-blob {
+            position: fixed;
+            border-radius: 50%;
+            filter: blur(90px);
+            z-index: -1;
+            opacity: 0.5;
+            animation: floatBlob 15s infinite alternate ease-in-out;
+        }
+        
+        .blob-1 {
+            top: -10%;
+            left: -20%;
+            width: 500px;
+            height: 500px;
+            background: #a855f7; /* Purple */
+        }
+        
+        .blob-2 {
+            bottom: -10%;
+            right: -20%;
+            width: 400px;
+            height: 400px;
+            background: #ec4899; /* Pink */
+            animation-delay: -5s;
         }
 
-        /* iOS Glassmorphism - Premium Polish */
+        [data-theme="dark"] .blob-1 { opacity: 0.2; background: #581c87; }
+        [data-theme="dark"] .blob-2 { opacity: 0.2; background: #831843; }
+
+        @keyframes floatBlob {
+            0% { transform: translate(0, 0) scale(1); }
+            100% { transform: translate(50px, 80px) scale(1.1); }
+        }
+
+        /* iOS Glassmorphism */
         .glass-island {
             background: var(--glass-bg);
-            backdrop-filter: blur(45px) saturate(210%);
-            -webkit-backdrop-filter: blur(45px) saturate(210%);
+            backdrop-filter: blur(40px) saturate(180%);
+            -webkit-backdrop-filter: blur(40px) saturate(180%);
             border: 1px solid var(--glass-border);
             box-shadow: var(--glass-shadow);
-            border-radius: 2.8rem;
+            border-radius: 2.5rem;
             transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
         }
 
@@ -103,7 +134,7 @@
         .inner-btn:active:not(.disabled) { transform: scale(0.96) translateY(0); }
         .inner-btn.disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(1); }
 
-        /* Vibrant Icons */
+        /* Vibrant Icons (Restored) */
         .icon-vibrant { transition: all 0.4s ease; }
         .icon-purple { color: #6d28d9; }
         .icon-pink { color: #db2777; }
@@ -113,6 +144,38 @@
 
         .inner-btn:hover:not(.disabled) .icon-vibrant { transform: scale(1.2) rotate(-5deg); }
 
+        /* Status Badge */
+        .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);
+        }
+        
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            background: #22c55e;
+            border-radius: 50%;
+            box-shadow: 0 0 10px #22c55e;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
+
+        /* Typography */
+        h1 { letter-spacing: -0.04em; line-height: 1; }
+        .sub-label { color: var(--text-secondary); font-weight: 700; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.12em; }
+
         /* Logo Shimmer */
         .logo-shimmer {
             background: linear-gradient(90deg, #6d28d9, #d946ef, #6d28d9);
@@ -125,16 +188,16 @@
         
         @keyframes shimmer { to { background-position: 200% center; } }
 
-        /* View Transitions */
+        /* View Switching */
         .view-section {
             display: none;
-            opacity: 0;
-            transform: translateY(20px);
-            transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
             width: 100%;
-            max-width: 32rem;
+            max-width: 28rem;
             flex-direction: column;
             align-items: center;
+            opacity: 0;
+            transform: translateY(10px);
+            transition: opacity 0.5s ease, transform 0.5s ease;
         }
 
         .view-section.active {
@@ -143,73 +206,68 @@
             transform: translateY(0);
         }
 
-        /* Scanning Island Animation */
+        /* Scan Animation */
         #scanning-section {
             display: none;
+            margin-top: 1.5rem;
             opacity: 0;
             transform: scale(0.95);
-            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
-            margin-top: 2rem;
-        }
-        #scanning-section.show {
-            display: flex;
-            opacity: 1;
-            transform: scale(1);
+            transition: all 0.5s ease;
         }
+        #scanning-section.show { display: flex; opacity: 1; transform: scale(1); }
 
         /* Progress Bar */
         .progress-track {
             width: 100%;
-            height: 8px;
-            background: rgba(0,0,0,0.06);
-            border-radius: 10px;
+            height: 6px;
+            background: rgba(0,0,0,0.08);
+            border-radius: 99px;
             overflow: hidden;
         }
-        [data-theme="dark"] .progress-track { background: rgba(255,255,255,0.12); }
+        [data-theme="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 ease;
-            box-shadow: 0 0 15px rgba(217, 70, 239, 0.5);
+            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
-        /* Result Image Frame */
+        /* Result Frame */
         .result-image-frame {
-            width: 180px;
-            height: 180px;
+            width: 160px;
+            height: 160px;
             border-radius: 2rem;
             border: 4px solid var(--glass-border);
             overflow: hidden;
             margin-bottom: -40px;
             z-index: 20;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-            background: #000;
+            box-shadow: 0 15px 40px rgba(0,0,0,0.25);
+            background: #111;
         }
 
-        /* Typography */
-        h1 { letter-spacing: -0.05em; line-height: 1; }
-        .sub-label { color: var(--text-secondary); font-weight: 700; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.12em; }
-
         @keyframes scan { 0% { top: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
     </style>
 </head>
 <body data-theme="light">
 
+    <!-- BACKGROUND BLOBS -->
+    <div class="bg-blob blob-1"></div>
+    <div class="bg-blob blob-2"></div>
+
     <!-- THEME TOGGLE -->
-    <button onclick="toggleTheme()" class="fixed top-6 right-6 z-50 p-4 rounded-full glass-island hover:scale-110 active:scale-90 transition-all shadow-xl">
-        <i data-lucide="moon" id="theme-btn-icon" class="w-6 h-6 text-purple-800 dark:text-purple-300"></i>
+    <button onclick="toggleTheme()" class="fixed top-6 right-6 z-50 p-3 rounded-full glass-island hover:scale-110 active:scale-95 transition-all shadow-lg backdrop-blur-md">
+        <i data-lucide="moon" id="theme-btn-icon" class="w-5 h-5 text-purple-800 dark:text-purple-300"></i>
     </button>
 
-    <main class="relative z-10 w-full min-h-screen flex flex-col items-center pt-24 pb-24 px-6">
+    <main class="relative z-10 w-full min-h-screen flex flex-col items-center pt-20 pb-12 px-6">
 
         <!-- VIEW 1: HOME SCREEN -->
         <div id="view-home" class="view-section active">
             
-            <!-- LOGO HEADER -->
-            <div class="text-center mb-12 flex flex-col items-center gap-6">
+            <!-- HEADER -->
+            <div class="text-center mb-10 flex flex-col items-center gap-6">
                 <!-- INLINE SVG LOGO -->
-                <svg width="100" height="100" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" class="drop-shadow-2xl">
+                <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">
                     <defs>
                         <linearGradient id="mainGradient" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
                             <stop offset="0%" stop-color="#7c3aed"/>
@@ -235,12 +293,18 @@
                     <rect x="110" y="254" width="292" height="4" rx="2" fill="white" fill-opacity="0.6"/>
                 </svg>
                 
-                <h1 class="text-5xl md:text-6xl font-black">
-                    <span class="logo-shimmer">RetinaScan</span>
-                </h1>
+                <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 System Active
+                    </div>
+                </div>
             </div>
 
-            <!-- SELECTION ISLAND -->
+            <!-- ACTION MENU (Restored Buttons) -->
             <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>
@@ -259,16 +323,30 @@
                 </div>
             </div>
 
-            <!-- SCANNING ISLAND (Appears Below Buttons) -->
-            <div id="scanning-section" class="w-full max-w-[420px] glass-island p-10 flex flex-col items-center">
-                <div class="relative w-64 h-64 rounded-[2.8rem] overflow-hidden shadow-2xl mb-8 bg-black/30 border border-white/20">
+            <!-- INFO CARD -->
+            <div class="mt-6 w-full max-w-[420px] glass-island p-5 flex items-start gap-4">
+                <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>
+                </div>
+            </div>
+
+            <!-- FOOTER -->
+            <footer class="mt-auto pt-8 text-center opacity-40">
+                <p class="text-[10px] font-mono uppercase tracking-widest">Powered by EfficientNet v2</p>
+            </footer>
+
+            <!-- SCANNING SECTION (Initially Hidden) -->
+            <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/40 border border-white/20">
                     <img id="scan-preview" src="" class="w-full h-full object-cover opacity-90" />
                     <div id="scan-laser" class="absolute top-0 left-0 w-full h-1.5 bg-purple-400 shadow-[0_0_25px_#c084fc] animate-[scan_2s_linear_infinite]"></div>
                 </div>
                 
                 <div class="w-full text-center">
-                    <h2 id="scan-status" class="text-sm font-black tracking-widest text-purple-700 dark:text-purple-300 mb-2 uppercase">Neural Processing</h2>
-                    <p id="scan-detail" class="text-[11px] font-mono opacity-60 mb-5">Booting AI clusters...</p>
+                    <h2 id="scan-status" class="text-xs font-black tracking-widest text-purple-700 dark:text-purple-300 mb-2 uppercase">Processing</h2>
+                    <p id="scan-detail" class="text-[10px] font-mono opacity-60 mb-4">Initializing neural matrix...</p>
                     <div class="progress-track">
                         <div id="scan-bar" class="progress-fill"></div>
                     </div>
@@ -278,47 +356,53 @@
             <input type="file" id="file-input" class="hidden" accept="image/*" onchange="handleFileSelect(event)" />
         </div>
 
-        <!-- VIEW 2: RESULTS SCREEN (Separate Full View) -->
+        <!-- VIEW 2: RESULTS -->
         <div id="view-result" class="view-section">
             <div class="result-image-frame">
                 <img id="result-photo" src="" class="w-full h-full object-cover" />
             </div>
 
-            <div class="glass-island p-10 pt-16 w-full max-w-[420px] flex flex-col items-center">
-                <div id="result-icon-bg" class="w-20 h-20 rounded-[2.2rem] flex items-center justify-center mb-6 shadow-2xl">
-                    <i id="result-icon" data-lucide="activity" class="w-10 h-10 text-white"></i>
+            <div class="glass-island p-8 pt-14 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>
                 </div>
                 
-                <h2 id="result-diagnosis" class="text-4xl font-bold mb-1 text-center">--</h2>
-                <p id="result-severity" class="sub-label text-purple-600 dark:text-purple-400 mb-4 font-black">STAGE 0</p>
+                <h2 id="result-diagnosis" class="text-3xl font-bold mb-1 text-center tracking-tight">--</h2>
+                <p id="result-severity" class="sub-label text-purple-600 dark:text-purple-400 mb-4 font-black text-xs">ANALYSIS COMPLETE</p>
                 
-                <p id="result-desc" class="text-sm opacity-80 mb-10 font-medium text-center leading-relaxed max-w-[280px]">--</p>
+                <p id="result-desc" class="text-sm opacity-70 mb-8 font-medium text-center leading-relaxed max-w-[260px]">--</p>
                 
-                <div class="grid grid-cols-2 gap-4 w-full mb-10">
-                    <div class="bg-white/10 dark:bg-white/5 p-6 rounded-[2rem] border border-white/10 text-center">
-                        <p class="sub-label mb-2">Confidence</p>
-                        <p id="result-conf" class="text-2xl font-mono font-bold">--%</p>
+                <div class="grid grid-cols-2 gap-3 w-full mb-8">
+                    <div class="bg-white/10 dark:bg-white/5 p-4 rounded-2xl border border-white/10 text-center">
+                        <p class="sub-label mb-1 opacity-50">Confidence</p>
+                        <p id="result-conf" class="text-xl font-mono font-bold">--%</p>
                     </div>
-                    <div class="bg-white/10 dark:bg-white/5 p-6 rounded-[2rem] border border-white/10 text-center">
-                        <p class="sub-label mb-2">Entropy</p>
-                        <p id="result-ent" class="text-2xl font-mono font-bold">--</p>
+                    <div class="bg-white/10 dark:bg-white/5 p-4 rounded-2xl border border-white/10 text-center">
+                        <p class="sub-label mb-1 opacity-50">Entropy</p>
+                        <p id="result-ent" class="text-xl font-mono font-bold">--</p>
                     </div>
                 </div>
 
-                <button onclick="resetApp()" class="w-full py-5 rounded-[2rem] bg-purple-700 text-white font-bold text-lg shadow-2xl shadow-purple-900/30 active:scale-95 transition-all">
-                    New Analysis
+                <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">
+                    Start New Scan
                 </button>
             </div>
         </div>
 
-        <!-- VIEW 3: CAMERA OVERLAY -->
-        <div id="view-camera" class="hidden fixed inset-0 bg-black z-50 flex-col items-center justify-center">
+        <!-- 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="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.85)]"></div>
-            <div class="absolute bottom-16 flex gap-14 items-center z-20">
-                <button onclick="stopCamera()" class="p-6 rounded-full glass-island text-white"><i data-lucide="x" class="w-8 h-8"></i></button>
-                <button onclick="capturePhoto()" class="w-24 h-24 rounded-full border-[5px] border-white flex items-center justify-center active:scale-90 transition-transform">
-                    <div class="w-20 h-20 rounded-full bg-white shadow-2xl"></div>
+            <!-- Camera UI Overlays -->
+            <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"><i data-lucide="x" 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>
+            <p class="absolute bottom-40 z-20 text-white/70 text-xs font-bold tracking-widest uppercase">Align Eye in Circle</p>
+            
+            <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 transition-transform">
+                    <div class="w-16 h-16 rounded-full bg-white shadow-lg"></div>
                 </button>
             </div>
             <canvas id="camera-canvas" class="hidden"></canvas>
@@ -341,64 +425,49 @@
         }
 
         function switchView(id) {
-            // Hide all views first with fade out
             document.querySelectorAll('.view-section').forEach(v => {
                 v.classList.remove('active');
                 setTimeout(() => {
                     if(!v.classList.contains('active')) v.style.display = 'none';
-                }, 600);
+                }, 500);
             });
             
-            // Show target view
             const target = document.getElementById(id);
             if(id !== 'view-camera') {
                 document.getElementById('view-camera').classList.add('hidden');
                 document.getElementById('view-camera').classList.remove('flex');
                 
-                // Slight delay to allow fade out of previous view
                 setTimeout(() => {
                     target.style.display = 'flex';
-                    // Trigger reflow
                     void target.offsetWidth; 
                     target.classList.add('active');
-                }, 600);
+                }, 500);
             }
         }
 
         function resetApp() {
             stopCamera();
             document.getElementById('file-input').value = '';
-            
-            // Re-enable buttons
             document.getElementById('btn-camera').classList.remove('disabled');
             document.getElementById('btn-upload').classList.remove('disabled');
-            
-            // Hide scanning section immediately
             document.getElementById('scanning-section').classList.remove('show');
             setTimeout(() => {
                 document.getElementById('scanning-section').style.display = 'none';
                 document.getElementById('scan-bar').style.width = '0%';
             }, 300);
-
-            // Go home
             switchView('view-home');
         }
 
         let stream = null;
         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');
-            
             try {
                 stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
                 document.getElementById('camera-feed').srcObject = stream;
-            } catch(e) { 
-                console.error(e);
-                camView.classList.add('hidden');
-            }
+            } catch(e) { console.error(e); camView.classList.add('hidden'); }
         }
 
         function stopCamera() {
@@ -412,10 +481,7 @@
             const canvas = document.getElementById('camera-canvas');
             canvas.width = video.videoWidth; canvas.height = video.videoHeight;
             canvas.getContext('2d').drawImage(video, 0, 0);
-            canvas.toBlob(blob => { 
-                stopCamera(); 
-                processImage(blob); 
-            }, 'image/jpeg', 0.95);
+            canvas.toBlob(blob => { stopCamera(); processImage(blob); }, 'image/jpeg', 0.95);
         }
 
         function triggerUpload() { 
@@ -428,19 +494,13 @@
         function processImage(fileBlob) {
             const reader = new FileReader();
             reader.onload = (e) => {
-                // Disable buttons
                 document.getElementById('btn-camera').classList.add('disabled');
                 document.getElementById('btn-upload').classList.add('disabled');
-
-                // Set previews
                 document.getElementById('scan-preview').src = e.target.result;
                 document.getElementById('result-photo').src = e.target.result;
 
-                // Show scanning section below buttons
                 const scanSection = document.getElementById('scanning-section');
                 scanSection.style.display = 'flex';
-                
-                // Animate in
                 setTimeout(() => {
                     scanSection.classList.add('show');
                     scanSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -454,11 +514,7 @@
                 fetch('/analyze', { method: 'POST', body: formData })
                     .then(r => r.json())
                     .then(data => setTimeout(() => showResult(data), 3200))
-                    .catch(err => {
-                        console.error(err);
-                        alert("Analysis failed. Please try again.");
-                        resetApp();
-                    });
+                    .catch(err => { alert("Analysis failed."); resetApp(); });
             };
             reader.readAsDataURL(fileBlob);
         }
@@ -489,18 +545,14 @@
                 'orange': 'bg-orange-500',
                 'rose': 'bg-rose-500'
             };
-            
-            document.getElementById('result-icon-bg').className = `w-20 h-20 rounded-[2.2rem] flex items-center justify-center mb-6 shadow-2xl ${colors[data.color] || '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').setAttribute('data-lucide', data.icon);
             document.getElementById('result-diagnosis').textContent = data.diagnosis;
             document.getElementById('result-severity').textContent = data.severity;
             document.getElementById('result-desc').textContent = data.description;
             document.getElementById('result-conf').textContent = data.confidence;
             document.getElementById('result-ent').textContent = data.features?.entropy || "N/A";
-            
             lucide.createIcons();
-            
-            // Switch to dedicated result view
             switchView('view-result');
         }
     </script>