Update templates/index.html

templates/index.html

@@ -14,11 +14,9 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#1e1b4b">
     
-    <!-- Custom App Icon from Static Folder -->
+    <!-- Custom App Icon from Static Folder (Forcefully lowercase to match Linux server rules) -->
     <link rel="icon" type="image/png" sizes="192x192" href="{{ url_for('static', filename='logo.png') }}">
     <link rel="apple-touch-icon" href="{{ url_for('static', filename='logo.png') }}">
-    
-    <!-- Inline PWA Manifest for Android Home Screen Icon Mapping (Fix: Dynamic Jinja Paths for HuggingFace) -->
     <link rel="manifest" href='data:application/manifest+json;utf8,{"name":"CrashVision AI","short_name":"CrashVision","start_url":"./","display":"standalone","background_color":"#F4F4F9","theme_color":"#1e1b4b","icons":[{"src":"{{ url_for("static", filename="logo.png") }}","sizes":"192x192","type":"image/png"},{"src":"{{ url_for("static", filename="logo.png") }}","sizes":"512x512","type":"image/png"}]}'>
     <!-- ========================================== -->
 
@@ -182,10 +180,10 @@
         </button>
     </div>
 
-    <!-- Emergency Dispatch Banner -->
+    <!-- Emergency Dispatch Banner (Dynamically updates severity) -->
     <div id="emergencyBanner" class="hidden fixed top-0 left-0 w-full bg-red-600 text-white py-3 px-4 z-50 flex items-center justify-center gap-4 animate-pulse shadow-lg shadow-red-500/50">
         <i class="fas fa-exclamation-triangle text-xl"></i>
-        <span class="font-black uppercase tracking-widest text-sm sm:text-base">Major Collision Detected. Automated SOS Dispatched to Emergency Services.</span>
+        <span id="emergencyText" class="font-black uppercase tracking-widest text-sm sm:text-base">Collision Detected. Automated SOS Dispatched.</span>
         <i class="fas fa-exclamation-triangle text-xl"></i>
     </div>
 
@@ -296,7 +294,7 @@
                             <i class="fas fa-bolt text-rose-600 dark:text-rose-300 text-xl"></i>
                         </div>
                         <h4 class="text-sm font-black uppercase tracking-wider text-indigo-950 dark:text-purple-50 mb-2">Automated SOS</h4>
-                        <p class="text-xs text-indigo-800/70 dark:text-purple-100 leading-relaxed font-bold">Dispatch triggered by SVM Ensemble.</p>
+                        <p class="text-xs text-indigo-800/70 dark:text-purple-100 leading-relaxed font-bold">HTTP Push Dispatch via ntfy.sh.</p>
                     </div>
                 </div>
 
@@ -313,7 +311,7 @@
                             <span class="px-4 py-1.5 text-[10px] font-black uppercase tracking-widest bg-white/60 dark:bg-white/10 rounded-full text-indigo-900 dark:text-white border border-indigo-200/50 dark:border-white/20 shadow-sm">Channel: CV-PRIME</span>
                         </div>
                         
-                        <!-- Interactive Media Player Area (With Embedded Controls) -->
+                        <!-- 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 -->
                             <img id="previewImg" src="" class="w-full h-full object-contain z-10 hidden" alt="Video View">
@@ -345,14 +343,12 @@
                                 </span>
                             </div>
 
-                            <!-- Integrated Video Controls Overlay -->
+                            <!-- Integrated Video Controls Overlay (Timeline Only) -->
                             <div id="playerControlsOverlay" class="hidden absolute bottom-0 left-0 w-full p-4 sm:p-6 bg-gradient-to-t from-black/90 via-black/50 to-transparent z-40 transition-opacity duration-300 opacity-0 group-hover:opacity-100 flex-col gap-3">
-                                
                                 <!-- Progress Bar -->
                                 <div class="w-full h-1.5 bg-white/30 rounded-full cursor-pointer relative" onclick="seekVideo(event)" id="progressBarContainer">
                                     <div id="progressFill" class="absolute top-0 left-0 h-full bg-indigo-500 rounded-full pointer-events-none transition-all duration-300" style="width: 0%"></div>
                                 </div>
-
                                 <!-- Bottom Control Row -->
                                 <div class="flex items-center justify-center w-full mt-2">
                                     <!-- Playback -->
@@ -674,7 +670,7 @@
                         </form>
                     </div>
 
-                    <!-- Tabular Results View (Hidden by default) -->
+                    <!-- Tabular Results View -->
                     <div id="predictiveResultView" class="hidden text-center animate-fade-in py-6">
                         <h3 class="text-xs font-black uppercase tracking-[0.3em] text-indigo-800/50 dark:text-purple-200 mb-6">Prediction Outcome</h3>
                         
@@ -915,18 +911,22 @@
                 document.getElementById('severityLevel').innerText = data.severity || "--";
 
                 if (data.progress !== undefined) {
-                    document.getElementById('progressFill').style.width = `${data.progress}%`;
+                    if (data.progress >= 100) { document.getElementById('progressFill').style.width = `100%`; }
+                    else { document.getElementById('progressFill').style.width = `${data.progress}%`; }
                 }
 
                 const statusCard = document.getElementById('statusCard');
                 const statusIcon = document.getElementById('statusIcon');
                 const emergencyBanner = document.getElementById('emergencyBanner');
+                const emergencyText = document.getElementById('emergencyText');
 
                 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')) {
+                    if(data.severity) {
+                        const sevLevel = data.severity.toUpperCase();
+                        emergencyText.innerText = `${sevLevel} COLLISION DETECTED. AUTOMATED SOS DISPATCHED.`;
                         emergencyBanner.classList.remove('hidden');
                     }
                 } else {