Update templates/index.html

templates/index.html

@@ -156,7 +156,6 @@
         <h1 class="text-4xl font-black tracking-tight text-indigo-950 dark:text-white drop-shadow-sm">CrashVision AI</h1>
         <p class="text-xs font-black uppercase tracking-[0.3em] text-indigo-500 mt-3">Initializing Systems</p>
         
-        <!-- Loading Animation with Jiggle Physics -->
         <div class="mt-8 flex gap-3">
             <div class="w-3 h-3 rounded-md bg-fuchsia-500 animate-jiggle" style="animation-delay: 0s;"></div>
             <div class="w-3 h-3 rounded-md bg-indigo-500 animate-jiggle" style="animation-delay: 0.15s;"></div>
@@ -317,10 +316,8 @@
                         
                         <!-- Interactive Media Player Area -->
                         <div class="rounded-[32px] overflow-hidden shadow-2xl border border-white/50 dark:border-white/20 relative bg-black aspect-video flex items-center justify-center group">
-                            <!-- Display Image (AI Overlays) -->
-                            <img id="previewImg" src="" class="w-full h-full object-contain z-10 hidden" alt="Detection View">
-                            <!-- Raw Video Feed Image -->
-                            <img id="rawFeedImg" src="" class="w-full h-full object-contain z-10 hidden" alt="Raw View">
+                            <!-- Display Image (Single video feed element) -->
+                            <img id="previewImg" src="" class="w-full h-full object-contain z-10 hidden" alt="Video View">
 
                             <!-- Snapshot Container Overlay -->
                             <div id="snapshotContainer" class="absolute inset-0 z-30 hidden bg-black flex items-center justify-center">
@@ -367,17 +364,17 @@
                             <div class="ios-glass-inner p-3 sm:p-5 rounded-2xl sm:rounded-3xl flex flex-col items-center text-center gap-1 hover:bg-white/60 dark:hover:bg-white/10 transition-colors">
                                 <i class="fas fa-location-dot text-rose-500 text-lg sm:text-xl mb-1 sm:mb-2"></i>
                                 <p class="text-[8px] sm:text-[9px] uppercase tracking-widest text-indigo-800/50 dark:text-purple-200 font-black">Location</p>
-                                <p id="vLoc" class="text-[10px] sm:text-xs font-black text-indigo-950 dark:text-white w-full tracking-tight leading-tight text-center px-1 break-words"></p>
+                                <p id="vLoc" class="text-[10px] sm:text-xs font-black text-indigo-950 dark:text-white w-full tracking-tight leading-tight text-center px-1 break-words">--</p>
                             </div>
                             <div class="ios-glass-inner p-3 sm:p-5 rounded-2xl sm:rounded-3xl flex flex-col items-center text-center gap-1 hover:bg-white/60 dark:hover:bg-white/10 transition-colors">
                                 <i class="fas fa-cloud-bolt text-cyan-500 text-lg sm:text-xl mb-1 sm:mb-2"></i>
                                 <p class="text-[8px] sm:text-[9px] uppercase tracking-widest text-indigo-800/50 dark:text-purple-200 font-black">Conditions</p>
-                                <p id="vWx" class="text-[10px] sm:text-xs font-black text-indigo-950 dark:text-white w-full tracking-tight leading-tight text-center break-words"></p>
+                                <p id="vWx" class="text-[10px] sm:text-xs font-black text-indigo-950 dark:text-white w-full tracking-tight leading-tight text-center break-words">--</p>
                             </div>
                             <div class="ios-glass-inner p-3 sm:p-5 rounded-2xl sm:rounded-3xl flex flex-col items-center text-center gap-1 hover:bg-white/60 dark:hover:bg-white/10 transition-colors">
                                 <i class="fas fa-stopwatch text-indigo-500 dark:text-purple-300 text-lg sm:text-xl mb-1 sm:mb-2"></i>
                                 <p class="text-[8px] sm:text-[9px] uppercase tracking-widest text-indigo-800/50 dark:text-purple-200 font-black">Timeline</p>
-                                <p id="vTime" class="text-[10px] sm:text-xs font-black text-indigo-950 dark:text-white w-full tracking-tight leading-tight text-center break-words"></p>
+                                <p id="vTime" class="text-[10px] sm:text-xs font-black text-indigo-950 dark:text-white w-full tracking-tight leading-tight text-center break-words">--</p>
                             </div>
                         </div>
                     </div>
@@ -584,7 +581,7 @@
                                         </div>
                                         <div>
                                             <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Speed Limit</label>
-                                            <input type="number" id="tab_speed" value="60" min="10" max="250" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20 shadow-sm">
+                                            <input type="number" id="tab_speed" placeholder="e.g. 60" min="10" max="250" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20 shadow-sm">
                                         </div>
                                     </div>
                                 </div>
@@ -600,11 +597,11 @@
                                     <div class="space-y-4">
                                         <div>
                                             <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Density (0-5)</label>
-                                            <input type="number" id="tab_density" value="2" min="0" max="5" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20 shadow-sm">
+                                            <input type="number" id="tab_density" placeholder="e.g. 2" min="0" max="5" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20 shadow-sm">
                                         </div>
                                         <div>
                                             <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Vehicles Inv.</label>
-                                            <input type="number" id="tab_vehicles" value="2" min="1" max="20" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20 shadow-sm">
+                                            <input type="number" id="tab_vehicles" placeholder="e.g. 2" min="1" max="20" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20 shadow-sm">
                                         </div>
                                         <div>
                                             <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Vehicle Type</label>
@@ -629,15 +626,18 @@
                                     <div class="space-y-4">
                                         <div>
                                             <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Driver Age</label>
-                                            <input type="number" id="tab_age" value="35" min="16" max="99" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-fuchsia-500 focus:ring-2 focus:ring-fuchsia-500/20 shadow-sm">
+                                            <input type="number" id="tab_age" placeholder="e.g. 35" min="16" max="99" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-fuchsia-500 focus:ring-2 focus:ring-fuchsia-500/20 shadow-sm">
                                         </div>
                                         <div>
                                             <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Experience (Yrs)</label>
-                                            <input type="number" id="tab_exp" value="10" min="0" max="80" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-fuchsia-500 focus:ring-2 focus:ring-fuchsia-500/20 shadow-sm">
+                                            <input type="number" id="tab_exp" placeholder="e.g. 5" min="0" max="80" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-fuchsia-500 focus:ring-2 focus:ring-fuchsia-500/20 shadow-sm">
                                         </div>
                                         <div>
-                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Alcohol Lvl (0-1)</label>
-                                            <input type="number" id="tab_alcohol" value="0.0" step="0.1" min="0" max="1" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-fuchsia-500 focus:ring-2 focus:ring-fuchsia-500/20 shadow-sm">
+                                            <label class="block text-[10px] font-black uppercase tracking-widest text-indigo-900/70 dark:text-purple-200/70 mb-1.5 ml-1">Drunk</label>
+                                            <select id="tab_alcohol" class="predict-input bg-white/60 dark:bg-black/20 focus:bg-white dark:focus:bg-black/40 border border-indigo-200/60 dark:border-white/10 text-indigo-950 dark:text-white focus:border-fuchsia-500 focus:ring-2 focus:ring-fuchsia-500/20 shadow-sm cursor-pointer">
+                                                <option value="No">No</option>
+                                                <option value="Yes">Yes</option>
+                                            </select>
                                         </div>
                                     </div>
                                 </div>
@@ -665,8 +665,8 @@
                                     <span id="riskLabelText">Low Risk</span>
                                 </div>
                                 
-                                <h4 class="text-7xl font-black tracking-tighter text-indigo-950 dark:text-white mb-2 drop-shadow-sm"><span id="riskProbabilityValue">0</span>%</h4>
-                                <p class="text-indigo-800/60 dark:text-purple-200 text-[10px] font-black uppercase tracking-widest mt-4">Calculated Accident Probability</p>
+                                <h4 class="text-6xl font-black tracking-tighter text-indigo-950 dark:text-white mb-2 drop-shadow-sm" id="riskLevelResult">--</h4>
+                                <p class="text-indigo-800/60 dark:text-purple-200 text-[10px] font-black uppercase tracking-widest mt-4">Predicted Accident Severity</p>
                             </div>
 
                             <div class="flex gap-4 max-w-sm w-full mt-4">
@@ -689,7 +689,6 @@
         const themeToggleBtn = document.getElementById('themeToggle');
         const htmlElement = document.documentElement;
 
-        // Force light mode by default on first visit. Only switch if explicitly saved.
         if (localStorage.theme === 'dark') {
             htmlElement.classList.add('dark');
         } else {
@@ -706,7 +705,6 @@
             }
         });
 
-        // App Splash Screen Removal Logic
         window.addEventListener('load', () => {
             setTimeout(() => {
                 const splash = document.getElementById('appSplashScreen');
@@ -720,43 +718,6 @@
             }, 1800);
         });
 
-        let currentLocationStr = "Unknown Location";
-        
-        async function fetchRealLocationData() {
-            if ("geolocation" in navigator) {
-                navigator.geolocation.getCurrentPosition(async (position) => {
-                    const lat = position.coords.latitude;
-                    const lon = position.coords.longitude;
-                    
-                    try {
-                        const geoRes = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`);
-                        const geoData = await geoRes.json();
-                        const city = geoData.address.city || geoData.address.town || geoData.address.village || geoData.address.county || "Unknown Region";
-                        currentLocationStr = `${city}, ${geoData.address.country_code.toUpperCase()}`;
-                        if(document.getElementById('vLoc')) document.getElementById('vLoc').innerText = currentLocationStr;
-                    } catch(e) { 
-                        if(document.getElementById('vLoc')) document.getElementById('vLoc').innerText = "Location API Error";
-                    }
-
-                    try {
-                        const wxRes = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current_weather=true`);
-                        const wxData = await wxRes.json();
-                        const temp = wxData.current_weather.temperature;
-                        if(document.getElementById('vWx')) document.getElementById('vWx').innerText = `${temp}°C, Active`;
-                    } catch(e) { 
-                        if(document.getElementById('vWx')) document.getElementById('vWx').innerText = "--";
-                    }
-                }, (error) => {
-                    if(document.getElementById('vLoc')) document.getElementById('vLoc').innerText = "Location Denied";
-                    if(document.getElementById('vWx')) document.getElementById('vWx').innerText = "--";
-                });
-            } else {
-                if(document.getElementById('vLoc')) document.getElementById('vLoc').innerText = "Not Supported";
-            }
-            const now = new Date();
-            if(document.getElementById('vTime')) document.getElementById('vTime').innerText = now.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
-        }
-
         let streamId = null;
         let poller = null;
 
@@ -770,6 +731,8 @@
         function closePredictModal() {
             document.getElementById('predictiveModal').classList.add('hidden');
             document.body.style.overflow = '';
+            document.getElementById('tabularForm').reset(); // Wipe Predictor Form Data
+            resetPredictModal(); // Push back to form view
         }
         function resetPredictModal() {
             document.getElementById('predictiveResultView').classList.add('hidden');
@@ -780,7 +743,7 @@
             const url = document.getElementById('ipCamUrl').value;
             if(!url) return;
             closeIpCamModal();
-            startSession({url: url, location: currentLocationStr}, '/init_stream');
+            startSession({url: url}, '/init_stream');
         }
 
         document.getElementById('fileInput').addEventListener('change', async (e) => {
@@ -804,58 +767,48 @@
             const data = await res.json();
             streamId = data.stream_id;
             
-            if(data.location && data.location !== "Nil" && document.getElementById('vLoc')) {
-                document.getElementById('vLoc').innerText = data.location;
-            } else {
-                fetchRealLocationData(); // fallback
-            }
+            // Set metadata without browser fallback
+            if(document.getElementById('vLoc')) document.getElementById('vLoc').innerText = data.location || "--";
+            if(document.getElementById('vWx')) document.getElementById('vWx').innerText = data.weather || "--";
+            if(document.getElementById('vTime')) document.getElementById('vTime').innerText = data.time || "--";
 
-            if(data.weather && data.weather !== "Nil" && document.getElementById('vWx')) {
-                document.getElementById('vWx').innerText = data.weather;
-            }
-
-            activateTrackingUI(); 
+            // Instantly start UI logic
+            document.getElementById('previewImg').classList.remove('hidden');
+            document.getElementById('tBtn').classList.add('opacity-50');
+            document.getElementById('oBtn').classList.remove('opacity-50');
+            document.getElementById('liveBadge').innerHTML = '<span class="w-2 h-2 rounded-full bg-red-500 animate-pulse shadow-[0_0_8px_red]"></span> LIVE AI FEED';
             
-            const locText = document.getElementById('vLoc') ? document.getElementById('vLoc').innerText : "Unknown";
-            document.getElementById('previewImg').src = `/video_feed/${streamId}?loc=${encodeURIComponent(locText)}&t=${Date.now()}`;
-            document.getElementById('rawFeedImg').src = `/raw_feed/${streamId}?loc=${encodeURIComponent(locText)}&t=${Date.now()}`;
+            document.getElementById('previewImg').src = `/video_feed/${streamId}?loc=${encodeURIComponent(data.location)}&t=${Date.now()}`;
             
             if(poller) clearInterval(poller);
             poller = setInterval(update, 1000);
         }
 
-        function activateTrackingUI() {
-            document.getElementById('previewImg').classList.remove('hidden');
-            document.getElementById('rawFeedImg').classList.add('hidden');
-            document.getElementById('snapshotContainer').classList.add('hidden');
-            document.getElementById('liveBadgeContainer').classList.remove('hidden');
-
+        // Toggles AI boxes dynamically on backend via API request
+        async function goTracking() { 
+            document.getElementById('tBtn').classList.add('opacity-50');
+            document.getElementById('oBtn').classList.remove('opacity-50');
             document.getElementById('liveBadge').innerHTML = '<span class="w-2 h-2 rounded-full bg-red-500 animate-pulse shadow-[0_0_8px_red]"></span> LIVE AI FEED';
-            if(document.getElementById('tBtn')) document.getElementById('tBtn').classList.add('opacity-50');
-            if(document.getElementById('oBtn')) document.getElementById('oBtn').classList.remove('opacity-50');
+            await fetch(`/toggle_tracking/${streamId}`, {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({track: true})
+            });
         }
-
-        function goTracking() { activateTrackingUI(); }
         
-        function goOriginal() { 
-            document.getElementById('previewImg').classList.add('hidden');
-            document.getElementById('rawFeedImg').classList.remove('hidden');
-            document.getElementById('snapshotContainer').classList.add('hidden');
-            document.getElementById('liveBadgeContainer').classList.remove('hidden');
-
+        async function goOriginal() { 
+            document.getElementById('oBtn').classList.add('opacity-50');
+            document.getElementById('tBtn').classList.remove('opacity-50');
             document.getElementById('liveBadge').innerHTML = '<span class="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_8px_blue]"></span> RAW FEED';
-            if(document.getElementById('oBtn')) document.getElementById('oBtn').classList.add('opacity-50');
-            if(document.getElementById('tBtn')) document.getElementById('tBtn').classList.remove('opacity-50');
+            await fetch(`/toggle_tracking/${streamId}`, {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({track: false})
+            });
         }
 
         function takeSnapshot() { 
-            let feed = null;
-            if(!document.getElementById('previewImg').classList.contains('hidden')) {
-                feed = document.getElementById('previewImg');
-            } else if (!document.getElementById('rawFeedImg').classList.contains('hidden')) {
-                feed = document.getElementById('rawFeedImg');
-            }
-
+            const feed = document.getElementById('previewImg');
             if(feed && feed.src) {
                 const c = document.createElement('canvas'); 
                 c.width = feed.naturalWidth || feed.width || 640; 
@@ -863,20 +816,16 @@
                 c.getContext('2d').drawImage(feed, 0, 0, c.width, c.height); 
                 
                 document.getElementById('snapshotImg').src = c.toDataURL('image/jpeg');
-                
                 document.getElementById('snapshotContainer').classList.remove('hidden');
                 document.getElementById('previewImg').classList.add('hidden');
-                document.getElementById('rawFeedImg').classList.add('hidden');
                 document.getElementById('liveBadgeContainer').classList.add('hidden');
             }
         }
 
         function closeSnapshot() {
-            if (document.getElementById('tBtn').classList.contains('opacity-50')) {
-                goTracking();
-            } else {
-                goOriginal();
-            }
+            document.getElementById('snapshotContainer').classList.add('hidden');
+            document.getElementById('previewImg').classList.remove('hidden');
+            document.getElementById('liveBadgeContainer').classList.remove('hidden');
         }
 
         function fullscreenSnapshot() {
@@ -906,17 +855,15 @@
                 const statusIcon = document.getElementById('statusIcon');
                 const emergencyBanner = document.getElementById('emergencyBanner');
 
-                if(data.is_accident) {
-                    statusCard.classList.remove('border-indigo-500');
-                    statusCard.classList.add('border-rose-500', 'bg-rose-50/50', 'dark:bg-rose-900/20');
+                if(data.is_accident || data.final_decision) {
+                    statusCard.className = "ios-glass-inner p-8 rounded-[32px] mb-8 shadow-sm dark:shadow-lg relative overflow-hidden border-l-4 border-rose-500 bg-rose-50/50 dark:bg-rose-900/20 transition-colors duration-500";
                     statusIcon.className = "fas fa-exclamation-triangle text-rose-600";
                     
                     if(data.severity && (data.severity.toLowerCase() === 'major' || data.severity.toLowerCase() === 'moderate')) {
                         emergencyBanner.classList.remove('hidden');
                     }
                 } else {
-                    statusCard.classList.add('border-indigo-500');
-                    statusCard.classList.remove('border-rose-500', 'bg-rose-50/50', 'dark:bg-rose-900/20');
+                    statusCard.className = "ios-glass-inner p-8 rounded-[32px] mb-8 shadow-sm dark:shadow-lg relative overflow-hidden border-l-4 border-indigo-500 transition-colors duration-500";
                     statusIcon.className = "fas fa-shield-check text-indigo-600";
                     emergencyBanner.classList.add('hidden');
                 }
@@ -935,15 +882,31 @@
             } catch(e) {}
         }
 
+        // Entire UI is reset completely when leaving
         function resetApp() {
             if(poller) clearInterval(poller);
             streamId = null;
             document.getElementById('previewImg').src = "";
-            document.getElementById('rawFeedImg').src = "";
             document.getElementById('uploadSection').classList.remove('hidden');
             document.getElementById('results').classList.add('hidden');
             document.getElementById('emergencyBanner').classList.add('hidden');
+            document.getElementById('alprSection').classList.add('hidden');
+            
+            // Wipe Form and Upload fields completely
             document.getElementById('fileInput').value = "";
+            document.getElementById('uploadForm').reset();
+            document.getElementById('ipCamUrl').value = "";
+
+            // Reset Diagnostics View Default State
+            document.getElementById('confVal').innerText = "0";
+            document.getElementById('severityLevel').innerText = "--";
+            document.getElementById('cnnBar').style.width = "0%";
+            document.getElementById('rcnnBar').style.width = "0%";
+            document.getElementById('cnnVal').innerText = "0%";
+            document.getElementById('rcnnVal').innerText = "0%";
+            document.getElementById('labelText').innerText = "Scanning Stream...";
+            document.getElementById('statusCard').className = "ios-glass-inner p-8 rounded-[32px] mb-8 shadow-sm dark:shadow-lg relative overflow-hidden border-l-4 border-indigo-500 transition-colors duration-500";
+            document.getElementById('statusIcon').className = "fas fa-spinner fa-spin text-indigo-600";
         }
 
         async function submitPredictiveData(e) {
@@ -965,7 +928,8 @@
                 Vehicle_Type: document.getElementById('tab_vehicle').value,
                 Driver_Age: document.getElementById('tab_age').value,
                 Driver_Experience: document.getElementById('tab_exp').value,
-                Driver_Alcohol: document.getElementById('tab_alcohol').value
+                // Yes=1.0, No=0.0 mapped strictly here for the AI
+                Driver_Alcohol: document.getElementById('tab_alcohol').value === "Yes" ? 1.0 : 0.0
             };
 
             try {
@@ -979,32 +943,34 @@
                 document.getElementById('predictiveFormView').classList.add('hidden');
                 document.getElementById('predictiveResultView').classList.remove('hidden');
                 
-                const prob = data.risk_probability_percentage || 0;
-                document.getElementById('riskProbabilityValue').innerText = prob;
-                
                 const riskCard = document.getElementById('riskStatusCard');
                 const riskBadge = document.getElementById('riskBadge');
                 const riskIcon = document.getElementById('riskIcon');
                 const riskLabel = document.getElementById('riskLabelText');
+                const riskText = document.getElementById('riskLevelResult');
 
                 riskCard.className = 'ios-glass-inner p-10 rounded-[32px] shadow-sm dark:shadow-lg relative overflow-hidden w-full max-w-sm border';
                 riskBadge.className = 'inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-black mb-6 uppercase tracking-[0.2em] border shadow-sm text-white';
 
-                if(prob >= 70) {
+                // Displaying labels directly instead of percentages
+                if(data.status === "Major") {
                     riskCard.classList.add('border-red-500', 'bg-red-50/10', 'dark:bg-red-900/20');
                     riskBadge.classList.add('bg-red-500', 'border-red-400');
                     riskIcon.className = 'fas fa-exclamation-triangle';
-                    riskLabel.innerText = 'Critical Risk';
-                } else if(prob >= 40) {
+                    riskLabel.innerText = 'High Alert';
+                    riskText.innerText = 'Major';
+                } else if(data.status === "Moderate") {
                     riskCard.classList.add('border-amber-500', 'bg-amber-50/10', 'dark:bg-amber-900/20');
                     riskBadge.classList.add('bg-amber-500', 'border-amber-400');
                     riskIcon.className = 'fas fa-exclamation-circle';
-                    riskLabel.innerText = 'Elevated Risk';
+                    riskLabel.innerText = 'Elevated Alert';
+                    riskText.innerText = 'Moderate';
                 } else {
                     riskCard.classList.add('border-green-500', 'bg-green-50/10', 'dark:bg-green-900/20');
                     riskBadge.classList.add('bg-green-500', 'border-green-400');
                     riskIcon.className = 'fas fa-shield-check';
-                    riskLabel.innerText = 'Low Risk';
+                    riskLabel.innerText = 'Safe Zone';
+                    riskText.innerText = 'Minor';
                 }
 
             } catch (e) {
@@ -1014,9 +980,6 @@
                 spinner.classList.add('hidden');
             }
         }
-        
-        // Setup script initialization call
-        fetchRealLocationData();
     </script>
 </body>
 </html>