about tab/ minor fixes..

frontend/vehicles.html

@@ -330,7 +330,7 @@
             </a>
             <a onclick="switchTab('overview')" id="nav-overview"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
-                <i class="fa-solid fa-desktop w-6"></i> <span class="font-medium">Overview</span>
+                <i class="fa-solid fa-desktop w-6"></i> <span class="font-medium">Stats</span>
             </a>
             <a onclick="switchTab('run-details')" id="nav-run-details"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
@@ -362,10 +362,10 @@
     <main class="flex-1 flex flex-col h-full min-w-0 p-4 gap-4">
 
         <!-- TAB: About -->
-        <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto pr-4">
-            <div class="max-w-5xl">
-                <div class="mb-10 pb-10" style="border-bottom:1px solid #1a1a1a">
-                    <p class="text-lg font-montserrat font-medium italic leading-relaxed"
+        <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto px-12 py-12">
+            <div class="max-w-4xl mx-auto bg-black border border-slate-800 rounded-[2.5rem] p-12 shadow-2xl space-y-12">
+                <div class="text-center pb-12 border-b border-slate-900">
+                    <p class="text-[13px] font-montserrat font-medium italic leading-relaxed max-w-2xl mx-auto"
                         style="color:#a89f97">
                         &ldquo;Traffic data has always existed on Indian roads &mdash; in the movement of every vehicle,
                         every crossing, every congested junction.
@@ -374,7 +374,7 @@
                     </p>
                 </div>
 
-                <div class="space-y-6 leading-relaxed text-sm" style="color:#a89f97">
+                <div class="space-y-6 leading-relaxed text-sm text-center" style="color:#a89f97">
                     <p>
                         UrbanFlow is a computer vision system purpose-built for traffic analysis on Indian roads.
                         It processes video footage and returns structured outputs &mdash; vehicle counts by class,
@@ -386,7 +386,7 @@
                         and transport infrastructure assessment. Footage is submitted, inference runs in the cloud,
                         and results are returned as structured KPI outputs and downloadable reports.
                     </p>
-                    <div class="grid grid-cols-3 gap-8 pt-8" style="border-top:1px solid #1a1a1a">
+                    <div class="grid grid-cols-3 gap-8 pt-8 text-left border-t border-slate-900">
                         <div class="space-y-4">
                             <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What It Does</h4>
                             <ul class="text-xs space-y-3 pl-1">
@@ -1462,7 +1462,8 @@
                     return;
                 }
 
-                const pct = ((d.frame_index / d.total_iters) * 100).toFixed(1);
+                let pct = ((d.frame_index / d.total_iters) * 100).toFixed(1);
+                if (d.frame_index >= d.total_iters - 1) pct = '100.0';
                 document.getElementById('proc-bar').style.width = pct + '%';
                 document.getElementById('proc-frames').innerText = `${d.frame_index} / ${d.total_iters} Frames`;
                 
@@ -1523,6 +1524,7 @@
                 const url = `/reports/${videoId}/${name}`;
                 const isVideo = name.endsWith('.mp4');
                 const isPDF = name.endsWith('.pdf');
+                const isCSV = name.endsWith('.csv');
                 const card = document.createElement('div');
                 card.className = 'bg-black rounded-xl border border-slate-800 shadow-sm flex flex-col overflow-hidden';
 
@@ -1539,6 +1541,12 @@
                             <i class="fa-solid fa-file-pdf text-6xl mb-4 text-white"></i>
                             <span class="text-xs font-bold uppercase tracking-widest text-slate-500">PDF Document</span>
                         </div>`;
+                } else if (isCSV) {
+                    previewHTML = `
+                        <div class="flex flex-col items-center justify-center py-12 text-slate-700">
+                            <i class="fa-solid fa-file-csv text-6xl mb-4 text-white"></i>
+                            <span class="text-xs font-bold uppercase tracking-widest text-slate-500">Raw Analytics Export</span>
+                        </div>`;
                 } else {
                     previewHTML = `<img src="${url}" alt="${info.title}" class="max-w-full max-h-[320px] object-contain rounded">`;
                 }