onboarding popup, speed profile card in stats, shortcuts, etc..

frontend/vehicles.html

@@ -365,12 +365,13 @@
         .stats-empty-overlay {
             position: absolute;
             inset: 0;
-            z-index: 10;
+            z-index: 50;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            background: rgba(0,0,0,0.7);
+            background: rgba(10, 10, 10, 0.85);
+            backdrop-filter: blur(8px);
             border-radius: 12px;
         }
 
@@ -668,12 +669,8 @@
                     <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                         <span class="text-3xl font-black text-slate-900" id="cnt-total">0</span>
                         <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Units</span>
-                        <span class="text-[9px] font-bold mt-0.5 uppercase tracking-wider flex items-center gap-1" style="color:#8b5e3c">
+                        <span class="text-[9px] font-bold mt-1 uppercase tracking-wider" style="color:#8b5e3c" id="cnt-pcu-wrap" title="Passenger Car Units (IRC:106-1990) — normalizes mixed traffic for capacity analysis">
                             <span id="cnt-pcu">0</span> PCU
-                            <span class="info-wrap" style="margin-left:2px">
-                                <span class="info-btn" style="width:11px;height:11px;font-size:6px"><i class="fa-solid fa-info"></i></span>
-                                <span class="info-tip">Passenger Car Units (IRC:106-1990). Normalizes mixed traffic into a single unit for capacity analysis.</span>
-                            </span>
                         </span>
                     </div>
                 </div>
@@ -725,6 +722,34 @@
                 </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>
 
         <!-- TAB: Run -->
@@ -742,8 +767,8 @@
                                 Execution Telemetry</p>
                         </div>
                         <div id="results-status-badge"
-                            class="px-2.5 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold rounded-full uppercase tracking-tighter">
-                            Awaiting Execution
+                            class="px-3 py-1.5 bg-amber-900/30 border border-amber-800/50 text-amber-500 text-[10px] font-bold rounded-full uppercase tracking-widest shadow-sm flex items-center gap-2">
+                            <div class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></div>System Standby
                         </div>
                     </div>
                     <div class="p-8">
@@ -818,9 +843,40 @@
 
         <!-- TAB: Reports -->
         <div id="tab-reports" class="hidden flex-1 min-h-0 overflow-y-auto">
-            <div id="reports-pending" class="flex flex-col items-center justify-center h-full">
-                <i class="fa-solid fa-hourglass-half text-4xl text-slate-300 mb-4"></i>
-                <p class="text-sm font-medium text-slate-400">Reports will be available after processing completes.</p>
+            <div id="reports-pending" class="grid grid-cols-2 xl:grid-cols-3 gap-4 w-full">
+                <!-- Skeleton Loader 1 -->
+                <div class="bg-[#0a0a0a] rounded-xl border border-[#222] shadow-sm flex flex-col overflow-hidden animate-pulse">
+                    <div class="flex flex-col items-center justify-center py-12">
+                        <div class="w-16 h-16 bg-[#1a1a1a] rounded mb-4"></div>
+                        <div class="w-24 h-2 bg-[#1a1a1a] rounded"></div>
+                    </div>
+                    <div class="px-5 py-4 border-t border-[#1a1a1a] bg-[#050505]">
+                        <div class="w-3/4 h-3 bg-[#1a1a1a] rounded mb-2"></div>
+                        <div class="w-1/2 h-2 bg-[#111] rounded"></div>
+                    </div>
+                </div>
+                <!-- Skeleton Loader 2 -->
+                <div class="bg-[#0a0a0a] rounded-xl border border-[#222] shadow-sm flex flex-col overflow-hidden animate-pulse" style="animation-delay: 150ms;">
+                    <div class="flex flex-col items-center justify-center py-12">
+                        <div class="w-16 h-16 bg-[#1a1a1a] rounded mb-4"></div>
+                        <div class="w-24 h-2 bg-[#1a1a1a] rounded"></div>
+                    </div>
+                    <div class="px-5 py-4 border-t border-[#1a1a1a] bg-[#050505]">
+                        <div class="w-2/3 h-3 bg-[#1a1a1a] rounded mb-2"></div>
+                        <div class="w-1/3 h-2 bg-[#111] rounded"></div>
+                    </div>
+                </div>
+                <!-- Skeleton Loader 3 -->
+                <div class="bg-[#0a0a0a] rounded-xl border border-[#222] shadow-sm flex flex-col overflow-hidden animate-pulse" style="animation-delay: 300ms;">
+                    <div class="flex flex-col items-center justify-center py-12">
+                        <div class="w-16 h-16 bg-[#1a1a1a] rounded mb-4"></div>
+                        <div class="w-24 h-2 bg-[#1a1a1a] rounded"></div>
+                    </div>
+                    <div class="px-5 py-4 border-t border-[#1a1a1a] bg-[#050505]">
+                        <div class="w-4/5 h-3 bg-[#1a1a1a] rounded mb-2"></div>
+                        <div class="w-1/2 h-2 bg-[#111] rounded"></div>
+                    </div>
+                </div>
             </div>
             <div id="reports-grid" class="hidden grid grid-cols-2 xl:grid-cols-3 gap-4"></div>
         </div>
@@ -1242,6 +1298,44 @@
                 infoRow('PCU In / Out', `${pcu.pcu_in || 0} / ${pcu.pcu_out || 0}`, 'Directional PCU split.'),
                 infoRow('Speed Profile', `${dist.slow || 0}% slow · ${dist.normal || 0}% normal · ${dist.fast || 0}% fast`, 'Relative speed categories within this video.'),
             ].join('');
+
+            // ---- Also populate Stats tab cards ----
+            // Speed card in Stats
+            const speedCard = document.getElementById('speed-stats-card');
+            if (speedCard) {
+                speedCard.innerHTML = `<div class="flex gap-5 items-end justify-center w-full">
+                    ${['slow', 'normal', 'fast'].map(cat => {
+                        const pct = dist[cat] || 0;
+                        const h = Math.max(12, pct * 1.0);
+                        return `<div class="flex flex-col items-center gap-1.5 flex-1">
+                            <span class="text-lg font-black" style="color:${colors[cat]}">${pct}%</span>
+                            <div style="width:100%;max-width:48px;height:${h}px;background:${colors[cat]};border-radius:8px;transition:height 0.5s"></div>
+                            <span class="text-[10px] font-bold text-slate-500 uppercase">${labels[cat]}</span>
+                        </div>`;
+                    }).join('')}
+                </div>`;
+            }
+
+            // PCU card in Stats
+            const pcuCard = document.getElementById('pcu-stats-card');
+            if (pcuCard) {
+                pcuCard.innerHTML = `<div class="space-y-3 w-full">
+                    <div class="flex justify-between items-center">
+                        <span class="text-xs font-medium text-slate-500">Total PCU</span>
+                        <span class="text-2xl font-black" style="color:#8b5e3c">${pcu.total_pcu || 0}</span>
+                    </div>
+                    <div class="flex gap-3">
+                        <div class="flex-1 bg-green-50 rounded-lg p-2.5 text-center border border-green-100">
+                            <div class="text-lg font-bold text-green-700">${pcu.pcu_in || 0}</div>
+                            <div class="text-[9px] font-bold text-green-500 uppercase">PCU In</div>
+                        </div>
+                        <div class="flex-1 bg-red-50 rounded-lg p-2.5 text-center border border-red-100">
+                            <div class="text-lg font-bold text-red-700">${pcu.pcu_out || 0}</div>
+                            <div class="text-[9px] font-bold text-red-500 uppercase">PCU Out</div>
+                        </div>
+                    </div>
+                </div>`;
+            }
         }
 
         // =========== Run Details helpers ===========
@@ -2051,6 +2145,51 @@
         </div>
     </div>
 
+    <!-- Keyboard Shortcuts Modal -->
+    <div id="appModal-shortcutsModal" onclick="if(event.target===this)closeAppModal('shortcutsModal')"
+        style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:24px">
+        <div
+            style="background:#0a0a0a;border:1px solid #2a2a2a;border-radius:14px;max-width:380px;width:100%;padding:28px;position:relative">
+            <button onclick="closeAppModal('shortcutsModal')"
+                style="position:absolute;top:14px;right:16px;background:none;border:none;color:#a89f97;font-size:18px;cursor:pointer">&times;</button>
+            <h2 style="color:#f0ece6;font-size:1rem;font-weight:700;margin-bottom:4px">
+                <i class="fa-solid fa-keyboard" style="color:#c89a6c;margin-right:6px"></i>Keyboard Shortcuts
+            </h2>
+            <p style="color:#555;font-size:10px;margin-bottom:16px">Navigate faster with these shortcuts</p>
+            <div style="display:flex;flex-direction:column;gap:8px">
+                <div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a">
+                    <span style="color:#a89f97;font-size:11px;font-weight:500">About</span>
+                    <kbd style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">1</kbd>
+                </div>
+                <div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a">
+                    <span style="color:#a89f97;font-size:11px;font-weight:500">Stats</span>
+                    <kbd style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">2</kbd>
+                </div>
+                <div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a">
+                    <span style="color:#a89f97;font-size:11px;font-weight:500">Run</span>
+                    <kbd style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">3</kbd>
+                </div>
+                <div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a">
+                    <span style="color:#a89f97;font-size:11px;font-weight:500">Artifacts</span>
+                    <kbd style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">4</kbd>
+                </div>
+                <div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a">
+                    <span style="color:#a89f97;font-size:11px;font-weight:500">Settings</span>
+                    <kbd style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">5</kbd>
+                </div>
+                <div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1a1a1a">
+                    <span style="color:#a89f97;font-size:11px;font-weight:500">Feedback</span>
+                    <kbd style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">6</kbd>
+                </div>
+                <div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0">
+                    <span style="color:#a89f97;font-size:11px;font-weight:500">Download Artifacts</span>
+                    <kbd style="background:#1a1a1a;color:#c89a6c;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid #2a2a2a;font-family:'JetBrains Mono',monospace">D</kbd>
+                </div>
+            </div>
+            <p style="color:#333;font-size:9px;margin-top:14px;text-align:center">Press <strong style="color:#555">Esc</strong> to close</p>
+        </div>
+    </div>
+
     <script>
 
         function openAppModal(id) {
@@ -2062,8 +2201,11 @@
             if (el) { el.style.display = 'none'; document.body.style.overflow = ''; }
         }
         document.addEventListener('keydown', function (e) {
-            if (e.key === 'Escape') { closeAppModal('privacyModal'); closeAppModal('termsModal'); }
+            if (e.key === 'Escape') { closeAppModal('privacyModal'); closeAppModal('termsModal'); closeAppModal('shortcutsModal'); }
         });
+
+        // Auto-show keyboard shortcuts on every page visit
+        setTimeout(function() { openAppModal('shortcutsModal'); }, 800);
     </script>
 </body>