Spaces:

webapp1
/

RetinaScan

Running

App Files Files Community

GOWREESH M G commited on Feb 1

Commit

ba4caad

verified ·

1 Parent(s): 9b8b538

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +492 -440

templates/index.html CHANGED Viewed

@@ -1,441 +1,493 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>RetinaScan</title>
-    <!-- Tailwind CSS -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Lucide Icons -->
-    <script src="https://unpkg.com/lucide@latest"></script>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
-        :root {
-            /* iOS Light Theme */
-            --bg-grad-start: #fbf8ff;
-            --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-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
-            --icon-vibrant: #7c3aed;
-            --btn-bg: rgba(255, 255, 255, 0.4);
-        }
-        [data-theme="dark"] {
-            /* iOS Dark Theme */
-            --bg-grad-start: #1c1c1e;
-            --bg-grad-end: #0a0a0c;
-            --text-main: #f3e8ff;
-            --text-secondary: #c084fc;
-            --glass-bg: rgba(44, 44, 46, 0.75);
-            --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);
-        }
-        body {
-            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: linear-gradient(180deg, var(--bg-grad-start), var(--bg-grad-end));
-            color: var(--text-main);
-            min-height: 100vh;
-            margin: 0;
-            overflow-x: hidden;
-            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-            letter-spacing: -0.02em;
-        }
-        /* iOS Glassmorphism - Premium Polish */
-        .glass-island {
-            background: var(--glass-bg);
-            backdrop-filter: blur(45px) saturate(210%);
-            -webkit-backdrop-filter: blur(45px) saturate(210%);
-            border: 1px solid var(--glass-border);
-            box-shadow: var(--glass-shadow);
-            border-radius: 2.8rem;
-            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
-        }
-        /* Interactive Islands */
-        .inner-btn {
-            background: var(--btn-bg);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: 2.2rem;
-            padding: 1.6rem;
-            display: flex;
-            align-items: center;
-            gap: 1.5rem;
-            cursor: pointer;
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            position: relative;
-        }
-        .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);
-        }
-        [data-theme="dark"] .inner-btn:hover:not(.disabled) {
-            background: rgba(255, 255, 255, 0.1);
-            box-shadow: 0 15px 35px rgba(217, 70, 239, 0.2);
-        }
-        .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 */
-        .icon-vibrant { transition: all 0.4s ease; }
-        .icon-purple { color: #6d28d9; }
-        .icon-pink { color: #db2777; }
-        [data-theme="dark"] .icon-purple { color: #a855f7; filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.6)); }
-        [data-theme="dark"] .icon-pink { color: #f472b6; filter: drop-shadow(0 0 12px rgba(244, 114, 182, 0.6)); }
-        .inner-btn:hover:not(.disabled) .icon-vibrant { transform: scale(1.2) rotate(-5deg); }
-        /* Logo Visibility */
-        .logo-shimmer {
-            background: linear-gradient(90deg, #6d28d9, #d946ef, #6d28d9);
-            background-size: 200% auto;
-            color: transparent;
-            -webkit-background-clip: text;
-            background-clip: text;
-            animation: shimmer 4s linear infinite;
-        }
-        @keyframes shimmer { to { background-position: 200% center; } }
-        /* View Switching Transitions */
-        .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;
-            flex-direction: column;
-            align-items: center;
-        }
-        .view-section.active {
-            display: flex;
-            opacity: 1;
-            transform: translateY(0);
-        }
-        /* Scanning Island Appear Animation */
-        #scanning-section {
-            display: none;
-            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);
-        }
-        /* Progress Bar */
-        .progress-track {
-            width: 100%;
-            height: 8px;
-            background: rgba(0,0,0,0.06);
-            border-radius: 10px;
-            overflow: hidden;
-        }
-        [data-theme="dark"] .progress-track { background: rgba(255,255,255,0.12); }
-        .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);
-        }
-        /* Result View Specifics */
-        .result-image-frame {
-            width: 180px;
-            height: 180px;
-            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);
-        }
-        /* 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">
-    <!-- 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>
-    <main class="relative z-10 w-full min-h-screen flex flex-col items-center pt-24 pb-24 px-6">
-        <!-- VIEW 1: HOME SCREEN -->
-        <div id="view-home" class="view-section active">
-            <!-- LOGO -->
-            <div class="text-center mb-12 flex items-center gap-6">
-                <i data-lucide="scan-eye" class="w-16 h-16 text-purple-700 dark:text-purple-400 drop-shadow-2xl"></i>
-                <h1 class="text-5xl md:text-6xl font-black">
-                    <span class="logo-shimmer">RetinaScan</span>
-                </h1>
-            </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>
-                </div>
-            </div>
-            <!-- SCANNING ISLAND (Same screen, 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">
-                    <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>
-                    <div class="progress-track">
-                        <div id="scan-bar" class="progress-fill"></div>
-                    </div>
-                </div>
-            </div>
-            <input type="file" id="file-input" class="hidden" accept="image/*" onchange="handleFileSelect(event)" />
-        </div>
-        <!-- VIEW 2: RESULTS SCREEN -->
-        <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 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>
-                <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>
-                <p id="result-desc" class="text-sm opacity-80 mb-10 font-medium text-center leading-relaxed max-w-[280px]">--</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>
-                    <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>
-                </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>
-            </div>
-        </div>
-        <!-- VIEW 3: CAMERA (Fullscreen) -->
-        <div id="view-camera" class="hidden fixed inset-0 bg-black z-50 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>
-                </button>
-            </div>
-            <canvas id="camera-canvas" class="hidden"></canvas>
-        </div>
-    </main>
-    <script>
-        lucide.createIcons();
-        function toggleTheme() {
-            const body = document.body;
-            const current = body.getAttribute('data-theme');
-            const target = current === 'light' ? 'dark' : 'light';
-            body.setAttribute('data-theme', target);
-            const icon = document.getElementById('theme-btn-icon');
-            icon.setAttribute('data-lucide', target === 'light' ? 'moon' : 'sun');
-            lucide.createIcons();
-        }
-        function switchView(id) {
-            document.querySelectorAll('.view-section').forEach(v => {
-                v.classList.remove('active');
-                setTimeout(() => v.style.display = 'none', 600);
-            });
-            const target = document.getElementById(id);
-            setTimeout(() => {
-                target.style.display = 'flex';
-                setTimeout(() => target.classList.add('active'), 50);
-            }, 600);
-            if(id === 'view-camera') {
-                target.classList.remove('hidden');
-            } else {
-                document.getElementById('view-camera').classList.add('hidden');
-            }
-        }
-        function resetApp() {
-            stopCamera();
-            document.getElementById('file-input').value = '';
-            document.getElementById('scanning-section').classList.remove('show');
-            document.getElementById('btn-camera').classList.remove('disabled');
-            document.getElementById('btn-upload').classList.remove('disabled');
-            switchView('view-home');
-            setTimeout(() => {
-                document.getElementById('scanning-section').style.display = 'none';
-                document.getElementById('scan-bar').style.width = '0%';
-            }, 650);
-        }
-        let stream = null;
-        async function startCameraFlow() {
-            if(document.getElementById('btn-camera').classList.contains('disabled')) return;
-            document.getElementById('view-camera').classList.remove('hidden');
-            document.getElementById('view-camera').classList.add('flex');
-            try {
-                stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
-                document.getElementById('camera-feed').srcObject = stream;
-            } catch(e) { document.getElementById('view-camera').classList.add('hidden'); }
-        }
-        function stopCamera() {
-            if(stream) { stream.getTracks().forEach(t => t.stop()); stream = null; }
-            document.getElementById('view-camera').classList.add('hidden');
-            document.getElementById('view-camera').classList.remove('flex');
-        }
-        function capturePhoto() {
-            const video = document.getElementById('camera-feed');
-            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);
-        }
-        function triggerUpload() {
-            if(document.getElementById('btn-upload').classList.contains('disabled')) return;
-            document.getElementById('file-input').click();
-        }
-        function handleFileSelect(e) { if(e.target.files[0]) processImage(e.target.files[0]); }
-        function processImage(fileBlob) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                document.getElementById('btn-camera').classList.add('disabled');
-                document.getElementById('btn-upload').classList.add('disabled');
-                document.getElementById('scan-preview').src = e.target.result;
-                document.getElementById('result-photo').src = e.target.result;
-                const scanSection = document.getElementById('scanning-section');
-                scanSection.style.display = 'flex';
-                setTimeout(() => {
-                    scanSection.classList.add('show');
-                    scanSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                }, 100);
-                simulateScanProgress();
-                const formData = new FormData();
-                formData.append('image', fileBlob, 'scan.jpg');
-                fetch('/analyze', { method: 'POST', body: formData })
-                    .then(r => r.json())
-                    .then(data => setTimeout(() => showResult(data), 3200))
-                    .catch(() => resetApp());
-            };
-            reader.readAsDataURL(fileBlob);
-        }
-        function simulateScanProgress() {
-            const bar = document.getElementById('scan-bar');
-            const status = document.getElementById('scan-status');
-            const detail = document.getElementById('scan-detail');
-            const steps = [
-                { s: "Preprocessing", d: "Isolating Green Channel...", w: "30%" },
-                { s: "Segmentation", d: "Mapping Vascular Geometry...", w: "65%" },
-                { s: "AI Processing", d: "EfficientNet Analysis...", w: "95%" },
-                { s: "Finalizing", d: "Generating Diagnosis...", w: "100%" }
-            ];
-            steps.forEach((step, i) => {
-                setTimeout(() => {
-                    status.innerText = step.s;
-                    detail.innerText = step.d;
-                    bar.style.width = step.w;
-                }, i * 800);
-            });
-        }
-        function showResult(data) {
-            const colors = {
-                'emerald': 'bg-emerald-500',
-                'yellow': 'bg-yellow-500',
-                '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').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 || (Math.random() * 2 + 3).toFixed(2);
-            lucide.createIcons();
-            // Switch to dedicated result view
-            switchView('view-result');
-        }
-    </script>
-</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RetinaScan</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+        :root {
+            /* iOS Light Theme */
+            --bg-grad-start: #fbf8ff;
+            --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-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
+            --icon-vibrant: #7c3aed;
+            --btn-bg: rgba(255, 255, 255, 0.4);
+        }
+        [data-theme="dark"] {
+            /* iOS Dark Theme */
+            --bg-grad-start: #1c1c1e;
+            --bg-grad-end: #0a0a0c;
+            --text-main: #f3e8ff;
+            --text-secondary: #c084fc;
+            --glass-bg: rgba(44, 44, 46, 0.75);
+            --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);
+        }
+        body {
+            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(180deg, var(--bg-grad-start), var(--bg-grad-end));
+            color: var(--text-main);
+            min-height: 100vh;
+            margin: 0;
+            overflow-x: hidden;
+            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+            letter-spacing: -0.02em;
+        }
+        /* iOS Glassmorphism - Premium Polish */
+        .glass-island {
+            background: var(--glass-bg);
+            backdrop-filter: blur(45px) saturate(210%);
+            -webkit-backdrop-filter: blur(45px) saturate(210%);
+            border: 1px solid var(--glass-border);
+            box-shadow: var(--glass-shadow);
+            border-radius: 2.8rem;
+            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        /* Interactive Islands */
+        .inner-btn {
+            background: var(--btn-bg);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 2.2rem;
+            padding: 1.6rem;
+            display: flex;
+            align-items: center;
+            gap: 1.5rem;
+            cursor: pointer;
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            position: relative;
+        }
+        .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);
+        }
+        [data-theme="dark"] .inner-btn:hover:not(.disabled) {
+            background: rgba(255, 255, 255, 0.1);
+            box-shadow: 0 15px 35px rgba(217, 70, 239, 0.2);
+        }
+        .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 */
+        .icon-vibrant { transition: all 0.4s ease; }
+        .icon-purple { color: #6d28d9; }
+        .icon-pink { color: #db2777; }
+        [data-theme="dark"] .icon-purple { color: #a855f7; filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.6)); }
+        [data-theme="dark"] .icon-pink { color: #f472b6; filter: drop-shadow(0 0 12px rgba(244, 114, 182, 0.6)); }
+        .inner-btn:hover:not(.disabled) .icon-vibrant { transform: scale(1.2) rotate(-5deg); }
+        /* Logo Shimmer */
+        .logo-shimmer {
+            background: linear-gradient(90deg, #6d28d9, #d946ef, #6d28d9);
+            background-size: 200% auto;
+            color: transparent;
+            -webkit-background-clip: text;
+            background-clip: text;
+            animation: shimmer 4s linear infinite;
+        }
+        @keyframes shimmer { to { background-position: 200% center; } }
+        /* View Transitions */
+        .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;
+            flex-direction: column;
+            align-items: center;
+        }
+        .view-section.active {
+            display: flex;
+            opacity: 1;
+            transform: translateY(0);
+        }
+        /* Scanning Island Animation */
+        #scanning-section {
+            display: none;
+            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);
+        }
+        /* Progress Bar */
+        .progress-track {
+            width: 100%;
+            height: 8px;
+            background: rgba(0,0,0,0.06);
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        [data-theme="dark"] .progress-track { background: rgba(255,255,255,0.12); }
+        .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);
+        }
+        /* Result Image Frame */
+        .result-image-frame {
+            width: 180px;
+            height: 180px;
+            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;
+        }
+        /* 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">
+    <!-- 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>
+    <main class="relative z-10 w-full min-h-screen flex flex-col items-center pt-24 pb-24 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">
+                <!-- 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">
+                    <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>
+                    </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"/>
+                    <circle cx="256" cy="256" r="64" fill="url(#irisGradient)"/>
+                    <circle cx="256" cy="256" r="28" fill="#1a0a33"/>
+                    <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"/>
+                    </g>
+                    <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>
+            <!-- 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>
+                </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">
+                    <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>
+                    <div class="progress-track">
+                        <div id="scan-bar" class="progress-fill"></div>
+                    </div>
+                </div>
+            </div>
+            <input type="file" id="file-input" class="hidden" accept="image/*" onchange="handleFileSelect(event)" />
+        </div>
+        <!-- VIEW 2: RESULTS SCREEN (Separate Full View) -->
+        <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>
+                <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>
+                <p id="result-desc" class="text-sm opacity-80 mb-10 font-medium text-center leading-relaxed max-w-[280px]">--</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>
+                    <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>
+                </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>
+            </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">
+            <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>
+                </button>
+            </div>
+            <canvas id="camera-canvas" class="hidden"></canvas>
+        </div>
+    </main>
+    <script>
+        lucide.createIcons();
+        function toggleTheme() {
+            const body = document.body;
+            const current = body.getAttribute('data-theme');
+            const target = current === 'light' ? 'dark' : 'light';
+            body.setAttribute('data-theme', target);
+            const icon = document.getElementById('theme-btn-icon');
+            icon.setAttribute('data-lucide', target === 'light' ? 'moon' : 'sun');
+            lucide.createIcons();
+        }
+        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);
+            });
+            // 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);
+            }
+        }
+        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');
+            }
+        }
+        function stopCamera() {
+            if(stream) { stream.getTracks().forEach(t => t.stop()); stream = null; }
+            document.getElementById('view-camera').classList.add('hidden');
+            document.getElementById('view-camera').classList.remove('flex');
+        }
+        function capturePhoto() {
+            const video = document.getElementById('camera-feed');
+            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);
+        }
+        function triggerUpload() {
+            if(document.getElementById('btn-upload').classList.contains('disabled')) return;
+            document.getElementById('file-input').click();
+        }
+        function handleFileSelect(e) { if(e.target.files[0]) processImage(e.target.files[0]); }
+        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' });
+                }, 50);
+                simulateScanProgress();
+                const formData = new FormData();
+                formData.append('image', fileBlob, 'scan.jpg');
+                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();
+                    });
+            };
+            reader.readAsDataURL(fileBlob);
+        }
+        function simulateScanProgress() {
+            const bar = document.getElementById('scan-bar');
+            const status = document.getElementById('scan-status');
+            const detail = document.getElementById('scan-detail');
+            const steps = [
+                { s: "Preprocessing", d: "Isolating Green Channel...", w: "30%" },
+                { s: "Segmentation", d: "Mapping Vascular Geometry...", w: "65%" },
+                { s: "AI Processing", d: "EfficientNet Analysis...", w: "95%" },
+                { s: "Finalizing", d: "Generating Diagnosis...", w: "100%" }
+            ];
+            steps.forEach((step, i) => {
+                setTimeout(() => {
+                    status.innerText = step.s;
+                    detail.innerText = step.d;
+                    bar.style.width = step.w;
+                }, i * 800);
+            });
+        }
+        function showResult(data) {
+            const colors = {
+                'emerald': 'bg-emerald-500',
+                'yellow': 'bg-yellow-500',
+                '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').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>
+</body>
 </html>