speed & pcu shift to /artifacts

frontend/vehicles.html

@@ -722,32 +722,6 @@
                 </div>
             </div>
 
-            <!-- Speed Distribution -->
-            <div
-                class="col-span-6 xl:col-span-3 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col min-h-0">
-                <div class="flex justify-between items-center mb-2 relative">
-                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Speed Profile
-                        <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
-                            <span class="info-tip">Relative speed categories based on pixel displacement between frames. Slow/Normal/Fast are percentile-based within this video — not km/h.</span></span>
-                    </h3>
-                </div>
-                <div class="flex-1 flex items-center justify-center" id="speed-stats-card">
-                    <div class="text-center text-slate-300 text-xs"><i class="fa-solid fa-gauge-high text-2xl mb-2"></i><br>Available after processing</div>
-                </div>
-            </div>
-
-            <!-- PCU Summary -->
-            <div
-                class="col-span-6 xl:col-span-3 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col min-h-0">
-                <div class="flex justify-between items-center mb-2 relative">
-                    <h3 class="font-bold text-slate-900 text-sm flex items-center">PCU Analysis
-                        <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
-                            <span class="info-tip">Passenger Car Units (IRC:106-1990). Converts heterogeneous Indian traffic into standardized units for road capacity analysis.</span></span>
-                    </h3>
-                </div>
-                <div class="flex-1 flex items-center justify-center" id="pcu-stats-card">
-                    <div class="text-center text-slate-300 text-xs"><i class="fa-solid fa-car text-2xl mb-2"></i><br>Available after processing</div>
-                </div>
             </div>
 
         </div>
@@ -878,6 +852,36 @@
                     </div>
                 </div>
             </div>
+
+            <!-- Post-Processing Insights (Populated after completion) -->
+            <div id="post-process-cards" class="hidden grid grid-cols-2 gap-4 mb-4">
+                <!-- Speed Distribution -->
+                <div class="bg-black rounded-xl p-6 border border-slate-800 shadow-sm flex flex-col min-h-[140px]">
+                    <div class="flex justify-between items-center mb-4 relative">
+                        <h3 class="font-bold text-white text-sm flex items-center">Speed Profile
+                            <span class="info-wrap"><span class="info-btn" style="background:#222;color:#888"><i class="fa-solid fa-info"></i></span>
+                                <span class="info-tip">Relative speed categories based on pixel displacement between frames. Slow/Normal/Fast are percentile-based within this video — not km/h.</span></span>
+                        </h3>
+                    </div>
+                    <div class="flex-1 flex items-center justify-center" id="speed-stats-card">
+                        <div class="text-center text-slate-600 text-xs"><i class="fa-solid fa-gauge-high text-2xl mb-2"></i><br>Available after processing</div>
+                    </div>
+                </div>
+
+                <!-- PCU Summary -->
+                <div class="bg-black rounded-xl p-6 border border-slate-800 shadow-sm flex flex-col min-h-[140px]">
+                    <div class="flex justify-between items-center mb-4 relative">
+                        <h3 class="font-bold text-white text-sm flex items-center">PCU Analysis
+                            <span class="info-wrap"><span class="info-btn" style="background:#222;color:#888"><i class="fa-solid fa-info"></i></span>
+                                <span class="info-tip">Passenger Car Units (IRC:106-1990). Converts heterogeneous Indian traffic into standardized units for road capacity analysis.</span></span>
+                        </h3>
+                    </div>
+                    <div class="flex-1 flex items-center justify-center" id="pcu-stats-card">
+                        <div class="text-center text-slate-600 text-xs"><i class="fa-solid fa-car text-2xl mb-2"></i><br>Available after processing</div>
+                    </div>
+                </div>
+            </div>
+
             <div id="reports-grid" class="hidden grid grid-cols-2 xl:grid-cols-3 gap-4"></div>
         </div>
 
@@ -2001,6 +2005,7 @@
             if (!data.files || !data.files.length) return null;
 
             document.getElementById('reports-pending').classList.add('hidden');
+            document.getElementById('post-process-cards').classList.remove('hidden');
             const grid = document.getElementById('reports-grid');
             grid.classList.remove('hidden');
             grid.innerHTML = '';