new section for quick help added..

frontend/js/vehicles.js

@@ -78,7 +78,7 @@
 
         // =========== Tab switching ===========
         function switchTab(tab) {
-            ['about', 'overview', 'run-details', 'reports', 'settings', 'feedback'].forEach(t => {
+            ['about', 'overview', 'run-details', 'reports', 'settings', 'help', 'feedback'].forEach(t => {
                 const el = document.getElementById('tab-' + t);
                 const nav = document.getElementById('nav-' + t);
                 if (el) el.classList.toggle('hidden', tab !== t);
@@ -106,7 +106,7 @@
         }
 
         // =========== Keyboard Shortcuts ===========
-        const TAB_KEYS = { '1': 'about', '2': 'overview', '3': 'run-details', '4': 'reports', '5': 'settings', '6': 'feedback' };
+        const TAB_KEYS = { '1': 'about', '2': 'overview', '3': 'run-details', '4': 'reports', '5': 'settings', '6': 'help', '7': 'feedback' };
         document.addEventListener('keydown', function(e) {
             if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
             if (TAB_KEYS[e.key]) { switchTab(TAB_KEYS[e.key]); return; }
@@ -1093,5 +1093,17 @@
             }
         }
 
+        function toggleHelp(id) {
+            const ans = document.getElementById(id + '-ans');
+            const icon = document.getElementById(id + '-icon');
+            if (ans.classList.contains('hidden')) {
+                ans.classList.remove('hidden');
+                icon.classList.replace('fa-plus', 'fa-minus');
+            } else {
+                ans.classList.add('hidden');
+                icon.classList.replace('fa-minus', 'fa-plus');
+            }
+        }
+
         init();
     

frontend/vehicles.html

@@ -44,6 +44,10 @@
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
                 <i class="fa-solid fa-sliders w-6"></i> <span class="font-medium">Settings</span>
             </a>
+            <a onclick="switchTab('help')" id="nav-help"
+                class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
+                <i class="fa-solid fa-circle-question w-6"></i> <span class="font-medium">Quick Help</span>
+            </a>
             <a onclick="switchTab('feedback')" id="nav-feedback"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
                 <i class="fa-solid fa-comment-dots w-6"></i> <span class="font-medium">Feedback</span>
@@ -72,6 +76,7 @@
             <button onclick="switchTab('run-details')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i class="fa-solid fa-microchip"></i></button>
             <button onclick="switchTab('reports')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i class="fa-solid fa-file-lines"></i></button>
             <button onclick="switchTab('settings')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i class="fa-solid fa-sliders"></i></button>
+            <button onclick="switchTab('help')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i class="fa-solid fa-circle-question"></i></button>
             <button onclick="switchTab('feedback')" class="text-[9px] px-2 py-1 rounded" style="color:#a89f97"><i class="fa-solid fa-comment-dots"></i></button>
         </div>
     </div>
@@ -695,7 +700,132 @@
             </div>
         </div>
 
-        <!-- TAB: Feedback -->
+        <!-- TAB: Quick Help -->
+        <div id="tab-help" class="hidden flex-1 min-h-0 overflow-y-auto">
+            <div class="max-w-4xl mx-auto space-y-6">
+                <div class="bg-black border border-slate-800 rounded-xl overflow-hidden shadow-sm">
+                    <div class="px-6 py-4 border-b border-slate-800 bg-[#050505]">
+                        <h3 class="font-bold text-white text-sm flex items-center">Knowledge Center</h3>
+                        <p class="text-[10px] text-slate-400 mt-0.1 uppercase tracking-widest font-medium">Quick assistance and platform documentation</p>
+                    </div>
+                    
+                    <div class="p-6 space-y-8">
+                        <!-- Category: Technical -->
+                        <section>
+                            <h4 class="text-[11px] font-bold uppercase tracking-[0.2em] mb-4 pb-2 border-b border-slate-900" style="color:#c89a6c">Technical & Performance</h4>
+                            <div class="space-y-3">
+                                <div class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden">
+                                    <button onclick="toggleHelp('h1')" class="w-full px-5 py-4 text-left flex items-center justify-between hover:bg-[#080808] transition">
+                                        <span class="text-xs font-semibold text-slate-300">Why is no live feed analysis available instead of video exports?</span>
+                                        <i id="h1-icon" class="fa-solid fa-plus text-[10px] text-slate-600"></i>
+                                    </button>
+                                    <div id="h1-ans" class="hidden px-5 pb-5 text-[11px] text-slate-500 leading-relaxed">
+                                        UrbanFlow Demo is currently hosted on standard CPU instances to demonstrate accessibility. Real-time live analysis is exceptionally resource-intensive on CPUs, which can lead to processing instability. By utilizing asynchronous processing (Export Annotated Video), we optimize for low-hardware environments, significantly reducing unnecessary energy consumption and contributing to lower carbon emissions.
+                                    </div>
+                                </div>
+                                <div class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden">
+                                    <button onclick="toggleHelp('h2')" class="w-full px-5 py-4 text-left flex items-center justify-between hover:bg-[#080808] transition">
+                                        <span class="text-xs font-semibold text-slate-300">Why is auto-download not functioning correctly?</span>
+                                        <i id="h2-icon" class="fa-solid fa-plus text-[10px] text-slate-600"></i>
+                                    </button>
+                                    <div id="h2-ans" class="hidden px-5 pb-5 text-[11px] text-slate-500 leading-relaxed">
+                                        Auto-download failures are typically caused by browser popup blockers. Please ensure you have allowed popups for this site in your browser settings. Alternatively, you can use the keyboard shortcut 'D' to trigger a bundled ZIP report download once processing reaches 100%.
+                                    </div>
+                                </div>
+                                <div class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden">
+                                    <button onclick="toggleHelp('h3')" class="w-full px-5 py-4 text-left flex items-center justify-between hover:bg-[#080808] transition">
+                                        <span class="text-xs font-semibold text-slate-300">Once processing completes, how can I analyze another video?</span>
+                                        <i id="h3-icon" class="fa-solid fa-plus text-[10px] text-slate-600"></i>
+                                    </button>
+                                    <div id="h3-ans" class="hidden px-5 pb-5 text-[11px] text-slate-500 leading-relaxed">
+                                        To analyze a new dataset, navigate to the 'Settings' tab and select the 'Analyze Another Video' button. This will reset your current session state and return you to the upload interface without requiring a full browser refresh.
+                                    </div>
+                                </div>
+                                <div class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden">
+                                    <button onclick="toggleHelp('h4')" class="w-full px-5 py-4 text-left flex items-center justify-between hover:bg-[#080808] transition">
+                                        <span class="text-xs font-semibold text-slate-300">How accurate are UrbanFlow's traffic calculations?</span>
+                                        <i id="h4-icon" class="fa-solid fa-plus text-[10px] text-slate-600"></i>
+                                    </button>
+                                    <div id="h4-ans" class="hidden px-5 pb-5 text-[11px] text-slate-500 leading-relaxed">
+                                        In the field of computer vision, no model achieves 100% accuracy under all conditions. UrbanFlow provides highly reliable analytical overviews, but variables such as severe occlusion, extreme lighting, or complex mis-classifications can occur. Our development goal is constant iteration toward human-level perception.
+                                    </div>
+                                </div>
+                                <div class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden">
+                                    <button onclick="toggleHelp('h5')" class="w-full px-5 py-4 text-left flex items-center justify-between hover:bg-[#080808] transition">
+                                        <span class="text-xs font-semibold text-slate-300">What is PCU analysis and which speed metrics are calculated?</span>
+                                        <i id="h5-icon" class="fa-solid fa-plus text-[10px] text-slate-600"></i>
+                                    </button>
+                                    <div id="h5-ans" class="hidden px-5 pb-5 text-[11px] text-slate-500 leading-relaxed">
+                                        Passenger Car Unit (PCU) is a standard metric used in transportation engineering to convert heterogeneous traffic (bikes, trucks, cars) into a common denominator for capacity analysis. Speed profile metrics provide insights into velocity distribution, helping identify congestion bottlenecks and overall throughput efficiency.
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+
+                        <!-- Category: About -->
+                        <section>
+                            <h4 class="text-[11px] font-bold uppercase tracking-[0.2em] mb-4 pb-2 border-b border-slate-900" style="color:#c89a6c">About UrbanFlow</h4>
+                            <div class="space-y-3">
+                                <div class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden">
+                                    <button onclick="toggleHelp('h6')" class="w-full px-5 py-4 text-left flex items-center justify-between hover:bg-[#080808] transition">
+                                        <span class="text-xs font-semibold text-slate-300">Is UrbanFlow an independent workspace or a collaborative project?</span>
+                                        <i id="h6-icon" class="fa-solid fa-plus text-[10px] text-slate-600"></i>
+                                    </button>
+                                    <div id="h6-ans" class="hidden px-5 pb-5 text-[11px] text-slate-500 leading-relaxed">
+                                        UrbanFlow is an emerging, independent technology initiative currently in its development phase. We are continuously scaling our internal infrastructure and exploring future strategic collaborations with global leaders such as Google, AWS, and Lambda to ensure compliance with international regulations and standards.
+                                    </div>
+                                </div>
+                                <div class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden">
+                                    <button onclick="toggleHelp('h7')" class="w-full px-5 py-4 text-left flex items-center justify-between hover:bg-[#080808] transition">
+                                        <span class="text-xs font-semibold text-slate-300">Why is this demo focused on a single model?</span>
+                                        <i id="h7-icon" class="fa-solid fa-plus text-[10px] text-slate-600"></i>
+                                    </button>
+                                    <div id="h7-ans" class="hidden px-5 pb-5 text-[11px] text-slate-500 leading-relaxed">
+                                        This platform serves as a focused demonstration of a specific computer vision model for requirements gathering. The full production suite integrates multiple specialized models, real-time edge processing, and advanced telemetry designed for complex enterprise-grade deployments.
+                                    </div>
+                                </div>
+                                <div class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden">
+                                    <button onclick="toggleHelp('h8')" class="w-full px-5 py-4 text-left flex items-center justify-between hover:bg-[#080808] transition">
+                                        <span class="text-xs font-semibold text-slate-300">How can UrbanFlow assist my business operations?</span>
+                                        <i id="h8-icon" class="fa-solid fa-plus text-[10px] text-slate-600"></i>
+                                    </button>
+                                    <div id="h8-ans" class="hidden px-5 pb-5 text-[11px] text-slate-500 leading-relaxed">
+                                        UrbanFlow transforms passive visual data into actionable business intelligence. By quantifying traffic patterns and demand, businesses can optimize site selection, manage logistics more effectively, and improve general customer accessibility through data-driven planning.
+                                    </div>
+                                </div>
+                                <div class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden">
+                                    <button onclick="toggleHelp('h9')" class="w-full px-5 py-4 text-left flex items-center justify-between hover:bg-[#080808] transition">
+                                        <span class="text-xs font-semibold text-slate-300">Where can I learn more or verify the platform's reliability?</span>
+                                        <i id="h9-icon" class="fa-solid fa-plus text-[10px] text-slate-600"></i>
+                                    </button>
+                                    <div id="h9-ans" class="hidden px-5 pb-5 text-[11px] text-slate-500 leading-relaxed">
+                                        UrbanFlow is built on a foundation of transparency. While currently in the demonstration phase, we are establishing trust through rigorous internal testing and by providing clear documentation on our data privacy and operational standards.
+                                    </div>
+                                </div>
+                                <div class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden">
+                                    <button onclick="toggleHelp('h10')" class="w-full px-5 py-4 text-left flex items-center justify-between hover:bg-[#080808] transition">
+                                        <span class="text-xs font-semibold text-slate-300">Is UrbanFlow a Non-profit organization?</span>
+                                        <i id="h10-icon" class="fa-solid fa-plus text-[10px] text-slate-600"></i>
+                                    </button>
+                                    <div id="h10-ans" class="hidden px-5 pb-5 text-[11px] text-slate-500 leading-relaxed">
+                                        UrbanFlow is a commercial technology initiative focused on sustainable urban development and providing scalable traffic intelligence solutions globally.
+                                    </div>
+                                </div>
+                                <div class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden">
+                                    <button onclick="toggleHelp('h11')" class="w-full px-5 py-4 text-left flex items-center justify-between hover:bg-[#080808] transition">
+                                        <span class="text-xs font-semibold text-slate-300">What will UrbanFlow provide in the future?</span>
+                                        <i id="h11-icon" class="fa-solid fa-plus text-[10px] text-slate-600"></i>
+                                    </button>
+                                    <div id="h11-ans" class="hidden px-5 pb-5 text-[11px] text-slate-500 leading-relaxed">
+                                        Our roadmap includes multi-model fusion, real-time edge processing, advanced ANPR integration, and deeper predictive analytics to support smarter city infrastructure.
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </div>
+        </div>
         <div id="tab-feedback" class="hidden flex-1 min-h-0 overflow-y-auto">
             <!-- Full Header Area -->
             <div class="max-w-6xl mx-auto space-y-6">
@@ -941,9 +1071,13 @@
                     <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>
+                    <span style="color:#a89f97;font-size:11px;font-weight:500">Quick Help</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;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">7</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>