Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="color-scheme" content="dark"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>UrbanFlow</title> | |
| <link rel="icon" type="image/png" href="assets/shuriken.png"> | |
| <link rel="manifest" href="manifest.json"> | |
| <meta name="theme-color" content="#000000"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> | |
| <meta name="apple-mobile-web-app-title" content="UrbanFlow"> | |
| <link rel="apple-touch-icon" href="assets/shurkien_b.png"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800;900&display=swap" | |
| rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="css/shared.css"> | |
| <link rel="stylesheet" href="css/vehicles.css"> | |
| <link rel="stylesheet" href="css/auth.css"> | |
| <!-- SPA Guard: no active run OR page refresh → go back to landing --> | |
| <script> | |
| (function() { | |
| // SPA: rewrite URL to root so /vehicles never shows in the address bar | |
| if (window.location.pathname !== '/') { | |
| history.replaceState(null, '', '/'); | |
| } | |
| var hasRun = sessionStorage.getItem('funky_run'); | |
| var consumed = sessionStorage.getItem('funky_run_consumed'); | |
| if (!hasRun || consumed) { | |
| sessionStorage.removeItem('funky_run'); | |
| sessionStorage.removeItem('funky_run_consumed'); | |
| sessionStorage.removeItem('uf_active_tab'); | |
| window.location.replace('/'); | |
| } else { | |
| // Mark as consumed immediately — any refresh from here will redirect | |
| sessionStorage.setItem('funky_run_consumed', '1'); | |
| } | |
| })(); | |
| </script> | |
| </head> | |
| <body class="bg-black text-white h-screen w-screen flex" style="overflow:hidden"> | |
| <!-- Fixed portal: bubbles, toasts, overlays append here — never clipped --> | |
| <div id="fixed-portal" style="position:fixed;inset:0;pointer-events:none;z-index:8999"></div> | |
| <div class="mobile-top-bar" id="mobile-top-bar"> | |
| <img src="assets/uf_rf.png" alt="UrbanFlow" class="h-14 w-auto object-contain"> | |
| <!-- Mobile Legal Overflow --> | |
| <div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center"> | |
| <button id="mobile-menu-trigger" onclick="toggleLegalMenu(event)" class="text-[#a89f97] hover:text-white p-2 transition-colors" aria-label="Menu"> | |
| <i id="mobile-menu-icon" class="fa-solid fa-ellipsis-vertical text-lg"></i> | |
| </button> | |
| <div id="legal-menu" class="hidden absolute right-0 top-full mt-2 w-48 bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg shadow-2xl z-50 overflow-hidden"> | |
| <button onclick="openAppModal('privacyModal'); toggleLegalMenu(event)" class="w-full text-left px-4 py-3.5 text-[10px] font-bold uppercase tracking-widest text-[#a89f97] hover:text-white hover:bg-[#111] border-b border-[#1a1a1a] transition-all"> | |
| Privacy Policy | |
| </button> | |
| <button onclick="openAppModal('termsModal'); toggleLegalMenu(event)" class="w-full text-left px-4 py-3.5 text-[10px] font-bold uppercase tracking-widest text-[#a89f97] hover:text-white hover:bg-[#111] border-b border-[#1a1a1a] transition-all"> | |
| Terms & Conditions | |
| </button> | |
| <!-- Sign Out (populated by JS) --> | |
| <button id="mobile-signout-btn" class="mobile-signout-btn" style="display:none" onclick="showLogoutConfirm()">Sign Out</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar --> | |
| <aside class="w-60 bg-neutral-950 shadow-xl flex flex-col z-20 flex-shrink-0 border-r border-neutral-800 relative"> | |
| <div class="h-28 bg-black flex items-center justify-center px-4 my-2 border-b border-slate-800 flex-shrink-0"> | |
| <img id="sidebar-logo-top" src="assets/uf_rf.png" alt="UrbanFlow Logo" class="h-24 w-auto object-contain"> | |
| </div> | |
| <nav class="flex-1 px-4 py-4 space-y-1.5 overflow-y-auto text-sm"> | |
| <a onclick="switchTab('about')" id="nav-about" | |
| class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive"> | |
| <i class="fa-solid fa-circle-info w-6"></i> <span class="font-medium">About</span> | |
| </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> | |
| </a> | |
| <a onclick="switchTab('results')" id="nav-results" | |
| class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive"> | |
| <i class="fa-solid fa-file-lines w-6"></i> <span class="font-medium">Results</span> | |
| </a> | |
| <a onclick="switchTab('settings')" id="nav-settings" | |
| class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive"> | |
| <i class="fa-solid fa-gear 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">Guide</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> | |
| </a> | |
| <a onclick="switchTab('profile')" id="nav-profile" | |
| class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive"> | |
| <div id="sidebar-profile-pfp-wrap" class="w-6 h-6 inline-flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-circle-user"></i></div> | |
| <span class="font-medium ml-3">Profile</span> | |
| </a> | |
| </nav> | |
| <div class="mt-auto border-t p-4 flex flex-col items-center gap-2 bg-black flex-shrink-0" | |
| style="border-color:#2a2a2a"> | |
| <button onclick="openAppModal('privacyModal')" | |
| class="text-[10px] font-bold uppercase tracking-widest transition w-full text-center py-1 rounded" | |
| style="color:#a89f97" onmouseover="this.style.color='#c89a6c'" | |
| onmouseout="this.style.color='#a89f97'">Privacy Policy</button> | |
| <button onclick="openAppModal('termsModal')" | |
| class="text-[10px] font-bold uppercase tracking-widest transition w-full text-center py-1 rounded" | |
| style="color:#a89f97" onmouseover="this.style.color='#c89a6c'" | |
| onmouseout="this.style.color='#a89f97'">Terms & Conditions</button> | |
| <p class="text-[11px] font-medium mt-2 mb-1 text-center" style="color:#555">© 2026 UrbanFlow<br><span class="text-[9px] text-[#444] block mt-1">All rights reserved.</span></p> | |
| </div> | |
| </aside> | |
| <!-- Mobile Navigation (hidden on desktop) --> | |
| <div | |
| class="mobile-nav hidden fixed top-0 left-0 right-0 z-30 bg-black border-b border-slate-800 px-4 py-2 items-center justify-between"> | |
| <img src="assets/uf_rf.png" alt="UF" class="h-8"> | |
| <div class="flex items-center gap-4"> | |
| <div class="dropdown relative"> | |
| <button onclick="toggleLegalMenu(event)" class="text-slate-500 hover:text-white transition"> | |
| <i class="fa-solid fa-ellipsis-vertical"></i> | |
| </button> | |
| <div id="legal-menu" class="hidden absolute right-0 mt-2 w-48 bg-neutral-900 border border-neutral-800 rounded-lg shadow-xl py-2 z-50"> | |
| <a onclick="openAppModal('privacyModal')" class="block px-4 py-2 text-xs text-slate-300 hover:bg-neutral-800 hover:text-white cursor-pointer">Privacy Policy</a> | |
| <a onclick="openAppModal('termsModal')" class="block px-4 py-2 text-xs text-slate-300 hover:bg-neutral-800 hover:text-white cursor-pointer">Terms & Conditions</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Container --> | |
| <div id="toast-container"></div> | |
| <main class="flex-1 flex flex-col h-full min-w-0 p-4 gap-4"> | |
| <!-- Progress Bar (shared) --> | |
| <div id="progress-bar-wrapper" | |
| class="w-full bg-neutral-950 rounded-xl px-6 py-4 border border-neutral-800 shadow-sm flex items-center justify-between flex-shrink-0"> | |
| <div class="flex items-center space-x-4 flex-1 mr-6"> | |
| <span class="text-[11px] font-black text-white uppercase tracking-wider whitespace-nowrap" | |
| id="proc-label">Waiting</span> | |
| <div class="flex-1 h-2 bg-[#111111] rounded-full overflow-hidden relative border border-[#1a1a1a]"> | |
| <div id="proc-bar" class="h-full bg-[#444444] rounded-full transition-all duration-500 ease-out" | |
| style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-6 text-xs font-bold text-white whitespace-nowrap"> | |
| <span id="proc-frames">Awaiting Input</span> | |
| <span id="proc-pct">Idle</span> | |
| <div class="uf-select-wrap" id="live-palette-wrap"> | |
| <div class="uf-select-trigger" id="live-palette-trigger" onclick="ufSelectToggle('live-palette')"> | |
| <span class="uf-select-label" id="live-palette-label">Default</span> | |
| <i class="fa-solid fa-chevron-down uf-select-arrow" id="live-palette-arrow"></i> | |
| </div> | |
| <div class="uf-select-dropdown hidden" id="live-palette-dropdown"> | |
| <div class="uf-select-option" data-value="default" onclick="ufSelectPick('live-palette','default','Default')">Default</div> | |
| <div class="uf-select-option" data-value="vibrant" onclick="ufSelectPick('live-palette','vibrant','Vibrant')">Vibrant</div> | |
| <div class="uf-select-option" data-value="corporate" onclick="ufSelectPick('live-palette','corporate','Corporate')">Corporate</div> | |
| <div class="uf-select-option" data-value="neon" onclick="ufSelectPick('live-palette','neon','Neon Night')">Neon Night</div> | |
| <div class="uf-select-option" data-value="earth" onclick="ufSelectPick('live-palette','earth','Earth Tones')">Earth Tones</div> | |
| <div class="uf-select-option" data-value="ocean" onclick="ufSelectPick('live-palette','ocean','Ocean Breeze')">Ocean Breeze</div> | |
| <div class="uf-select-option" data-value="sunset" onclick="ufSelectPick('live-palette','sunset','Sunset Glow')">Sunset Glow</div> | |
| <div class="uf-select-option" data-value="midnight" onclick="ufSelectPick('live-palette','midnight','Midnight Deep')">Midnight Deep</div> | |
| <div class="uf-select-option" data-value="gold" onclick="ufSelectPick('live-palette','gold','Monochrome Gold')">Monochrome Gold</div> | |
| </div> | |
| <input type="hidden" id="live-palette-select" value="default"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TAB: About --> | |
| <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto"> | |
| <div class="bg-black border rounded-xl p-12 shadow-2xl space-y-8 flex flex-col justify-center" | |
| style="border-color:#2a2a2a"> | |
| <div class="text-center"> | |
| <p class="text-sm italic font-bold leading-relaxed max-w-3xl mx-auto" | |
| style="color:#c89a6c;font-family:'Montserrat',sans-serif"> | |
| “Traffic data has always existed on Indian roads — in the movement of every vehicle, | |
| every crossing, every congested junction. | |
| UrbanFlow is built to read that data precisely, and return it in a form that practitioners can | |
| act on.” | |
| </p> | |
| </div> | |
| <div class="space-y-5 leading-relaxed text-sm text-center" style="color:#a89f97"> | |
| <p> | |
| UrbanFlow is a cloud-based traffic intelligence application that turns raw camera footage from | |
| Indian roads | |
| into structured, actionable data — vehicle counts by class, directional flow, congestion | |
| patterns, | |
| and downloadable reports — without requiring new hardware or on-site installation. | |
| </p> | |
| <p> | |
| This is a <strong style="color:#f0ece6">demo application</strong>. It exists so that traffic | |
| engineers, urban planners, | |
| transport authorities, and researchers can evaluate what UrbanFlow delivers — and tell us | |
| what they actually need. | |
| We are in the <strong style="color:#f0ece6">requirements gathering phase</strong>, and your | |
| feedback directly shapes | |
| what gets built for production. | |
| </p> | |
| <p style="font-size:13px;color:#777"> | |
| The production system will support live-streaming and more advanced analytics. | |
| This application only accepts video clips. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-12 pt-8 text-left border-t max-w-6xl mx-auto" | |
| style="border-color:#1a1a1a"> | |
| <div class="space-y-4"> | |
| <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What You Will Get Here</h4> | |
| <ul class="text-xs space-y-3 pl-1"> | |
| <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" | |
| style="color:#c89a6c"></i> | |
| <span>Class-wise vehicle counts</span> | |
| </li> | |
| <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" | |
| style="color:#c89a6c"></i> | |
| <span>Directional Flow Analysis — incoming vs outgoing</span> | |
| </li> | |
| <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" | |
| style="color:#c89a6c"></i> | |
| <span>Congestion Analytics, Peak Detection, and temporal Trends</span> | |
| </li> | |
| <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" | |
| style="color:#c89a6c"></i> | |
| <span>Exportable Reports</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="space-y-4"> | |
| <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">Inference | |
| Accuracy | |
| </h4> | |
| <p class="text-xs leading-relaxed" style="color:#a89f97"> | |
| UrbanFlow delivers an estimated accuracy of ±5–8% on dense mixed-traffic footage. Results | |
| may vary slightly across runs due to frame-by-frame inference variability. | |
| </p> | |
| <p class="text-xs leading-relaxed" style="color:#a89f97"> | |
| For research or planning use, process the same footage 2–3 times | |
| and average the results for improved reliability. | |
| </p> | |
| </div> | |
| <div class="space-y-4"> | |
| <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What's Next (Roadmap)</h4> | |
| <ul class="text-xs space-y-3 pl-1"> | |
| <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" | |
| style="color:#c89a6c"></i> | |
| <span><strong>RTSP Streaming Integration:</strong> Live CCTV stream processing directly from your network.</span> | |
| </li> | |
| <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" | |
| style="color:#c89a6c"></i> | |
| <span><strong>ANPR / ALPR:</strong> Automated Number Plate Recognition for localized enforcement.</span> | |
| </li> | |
| <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" | |
| style="color:#c89a6c"></i> | |
| <span><strong>Helmet Detection:</strong> Real-time compliance tracking for two-wheelers.</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="text-center pt-6 border-t" style="border-color:#1a1a1a"> | |
| <p class="text-[13px] leading-relaxed" style="color:#888"> | |
| We are an applied research team — that work on solving real problems, not controlled test | |
| environments. | |
| The focus is on reliability under the actual condition: mixed lanes, dense occlusion, | |
| heterogeneous vehicle type and variable lightning. | |
| </p> | |
| <p class="text-[12px] mt-3" style="color:#777"> | |
| Feedback, collaboration, or questions: <strong | |
| style="color:#c89a6c">support.urbanflow365@gmail.com</strong> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="tab-overview" class="hidden grid grid-cols-12 gap-4 flex-1 min-h-0 overflow-hidden" | |
| style="position:relative"> | |
| <!-- Empty State Overlay --> | |
| <div id="stats-empty-state" class="stats-empty-overlay"> | |
| <i class="fa-solid fa-chart-column text-4xl mb-4" style="color:#333"></i> | |
| <span class="text-sm font-bold" style="color:#555">Awaiting Processing</span> | |
| <span class="text-[11px] mt-1" style="color:#444">Charts will update dynamically as analysis | |
| progresses.</span> | |
| </div> | |
| <!-- Congestion Index --> | |
| <div | |
| class="col-span-12 xl:col-span-6 bg-neutral-950 rounded-xl p-5 border border-neutral-800 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">Congestion Index | |
| <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span> | |
| <span class="info-tip">Count of active tracked vehicles visible in each processed | |
| frame.</span></span> | |
| </h3> | |
| </div> | |
| <div class="flex-1 relative w-full min-h-[220px]"> | |
| <canvas id="congestionChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Doughnut — In / Out --> | |
| <div | |
| class="col-span-6 xl:col-span-3 bg-neutral-950 rounded-xl p-5 border border-neutral-800 shadow-sm flex flex-col items-center justify-center min-h-0"> | |
| <h3 class="font-bold text-slate-900 text-sm mb-2 self-start flex items-center">Directional Distribution | |
| <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span> | |
| <span class="info-tip">Incoming vs outgoing vehicles detected along the defined path</span></span> | |
| </h3> | |
| <div class="relative w-full flex-1 min-h-[180px] flex items-center justify-center"> | |
| <canvas id="doughnutChart"></canvas> | |
| <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 Count</span> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Vehicle Classification Breakdown --> | |
| <div | |
| class="col-span-6 xl:col-span-3 bg-neutral-950 rounded-xl p-5 border border-neutral-800 shadow-sm flex flex-col overflow-hidden min-h-0"> | |
| <div class="flex justify-between items-center mb-1 relative"> | |
| <h3 class="font-bold text-slate-900 text-sm flex items-center">Vehicle Classification | |
| <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span> | |
| <span class="info-tip">Per-class vehicle distribution with directional split across the | |
| spatial boundary.</span></span> | |
| </h3> | |
| </div> | |
| <div class="text-[10px] text-slate-400 mb-3 uppercase tracking-widest">Class Breakdown</div> | |
| <div class="flex-1 overflow-y-auto pr-2 space-y-2" id="class-breakdown"></div> | |
| </div> | |
| <!-- Class Dominance --> | |
| <div | |
| class="col-span-12 xl:col-span-6 bg-neutral-950 rounded-xl p-5 border border-neutral-800 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">Big Picture | |
| <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span> | |
| <span class="info-tip">Aggregated vehicle count grouped by dominant category.</span></span> | |
| </h3> | |
| <span | |
| class="text-[10px] text-slate-500 font-bold uppercase tracking-wider whitespace-nowrap">Category Dominance</span> | |
| </div> | |
| <div class="flex-1 w-full relative min-h-[220px]"> | |
| <canvas id="dominanceChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Traffic Flow Over Time --> | |
| <div | |
| class="col-span-12 xl:col-span-6 bg-neutral-950 rounded-xl p-5 border border-neutral-800 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">Temporal Traffic Flow | |
| <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span> | |
| <span class="info-tip">Number of vehicles analyzed within the spatial boundary, binned per | |
| second of video duration.</span></span> | |
| </h3> | |
| <span class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Units / Second</span> | |
| </div> | |
| <div class="flex-1 w-full relative min-h-[220px]"> | |
| <canvas id="flowChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TAB: Results (Merged Artifacts + Run) --> | |
| <div id="tab-results" class="hidden flex-1 min-h-0 overflow-y-auto"> | |
| <div id="reports-pending-message" | |
| class="mb-4 text-center p-8 flex flex-col items-center justify-center gap-4" | |
| style="min-height: 60vh;"> | |
| <i class="fa-solid fa-hourglass-half text-5xl mb-2" style="color:#3a3230;"></i> | |
| <div style="color:#c89a6c; font-size:13px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;"> | |
| Results Pending | |
| </div> | |
| <span id="reports-pending-text" | |
| class="text-xs font-medium tracking-wide uppercase leading-relaxed text-center" | |
| style="color:#5a5450; max-width:220px; display:block;"> | |
| Upload a video & run analysis to access results and reports here. | |
| </span> | |
| </div> | |
| <div id="results-content-wrap" class="hidden space-y-8 w-full pb-6"> | |
| <!-- Download Button --> | |
| <div class="flex justify-center lg:hidden"> | |
| <button onclick="downloadArtifacts()" id="btn-download-bundle" class="w-fit px-8 py-3 font-bold text-xs rounded-full transition flex items-center justify-center gap-2 shadow-lg active:scale-95 hover:scale-105" | |
| style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)"> | |
| <i class="fa-solid fa-download"></i> Download All Artifacts | |
| </button> | |
| </div> | |
| <!-- Section: Performance Insights (formerly Run tab) --> | |
| <div class="space-y-6"> | |
| <!-- PCU + Report Grid (unified) --> | |
| <div id="post-process-cards" class="mb-4"> | |
| <div class="bg-black rounded-xl p-6 border border-neutral-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">Available after processing</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Report Grid --> | |
| <div id="reports-grid" class="grid grid-cols-1 lg:grid-cols-2 gap-4"></div> | |
| <!-- Collapsible Technical Telemetry (formerly Run tab) --> | |
| <div class="mt-12 pt-12 border-t border-neutral-900"> | |
| <details class="group"> | |
| <summary class="flex items-center justify-between cursor-pointer list-none text-slate-500 hover:text-slate-300 transition"> | |
| <div class="flex items-center gap-3"> | |
| <i class="fa-solid fa-microchip text-xs"></i> | |
| <span class="text-sm font-bold uppercase tracking-widest">Technical Runtime Telemetry</span> | |
| </div> | |
| <i class="fa-solid fa-chevron-down text-[10px] group-open:rotate-180 transition-transform"></i> | |
| </summary> | |
| <div class="mt-8 space-y-8 animate-in fade-in slide-in-from-top-4 duration-500"> | |
| <!-- Process Analytics --> | |
| <div id="run-results-card" class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm overflow-hidden flex flex-col"> | |
| <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505"> | |
| <h3 class="font-bold text-sm text-white">Execution Telemetry</h3> | |
| </div> | |
| <div class="p-8"> | |
| <div id="run-results-content" class="grid grid-cols-3 gap-8"></div> | |
| </div> | |
| </div> | |
| <!-- Technical Context Row --> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden"> | |
| <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505"> | |
| <h3 class="font-bold text-sm text-white">Stream Source Profile</h3> | |
| </div> | |
| <div class="p-6 space-y-4 text-xs text-slate-400" id="panel-video"></div> | |
| </div> | |
| <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden"> | |
| <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505"> | |
| <h3 class="font-bold text-sm text-white">System Resource Utilization</h3> | |
| </div> | |
| <div class="p-6 space-y-4 text-xs text-slate-400" id="panel-perf"></div> | |
| </div> | |
| <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden"> | |
| <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505"> | |
| <h3 class="font-bold text-sm text-white">Model Architecture & Logic</h3> | |
| </div> | |
| <div class="p-6 space-y-4 text-xs text-slate-400" id="panel-model"></div> | |
| </div> | |
| <div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden"> | |
| <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505"> | |
| <h3 class="font-bold text-sm text-white">Inference Parameters</h3> | |
| </div> | |
| <div class="p-6 space-y-4 text-xs text-slate-400" id="panel-infer"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </details> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TAB: Settings --> | |
| <div id="tab-settings" class="hidden flex-1 min-h-0 overflow-y-auto"> | |
| <div class="grid grid-cols-2 gap-6 w-full"> | |
| <!-- Processing Parameters --> | |
| <div class="col-span-1 bg-black rounded-xl border shadow-sm overflow-hidden flex flex-col self-start" | |
| style="border-color:#2a2a2a"> | |
| <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505"> | |
| <h3 class="font-bold text-white text-sm flex items-center">Inference Configuration Profile | |
| <span class="info-wrap ml-2"> | |
| <span class="info-btn" style="background:#1a1a1a;color:#888"><i | |
| class="fa-solid fa-info"></i></span> | |
| <span class="info-tip">Figures and numbers below are auto-calculated for best | |
| performance.</span> | |
| </span> | |
| </h3> | |
| <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97"> | |
| Auto-configured pipeline parameters</p> | |
| </div> | |
| <div class="px-6 py-2" id="settings-params"> | |
| <div class="s-row" data-param="imgsz"> | |
| <div> | |
| <div class="text-xs font-semibold text-slate-300 flex items-center">Image Size | |
| <span class="info-wrap ml-1"> | |
| <span class="info-btn" style="background:#1a1a1a;color:#888"><i | |
| class="fa-solid fa-info"></i></span> | |
| <span class="info-tip">Input resolution fed to the detection model. Optimized | |
| for the resolution compiled into the OpenVINO weights.</span> | |
| </span> | |
| </div> | |
| <div class="text-[10px] text-slate-500">Model input resolution</div> | |
| </div> | |
| <div class="s-stepper"><button onclick="stepParam('imgsz',-32)">‹</button><span | |
| class="s-val" id="sv-imgsz">640</span><button | |
| onclick="stepParam('imgsz',32)">›</button></div> | |
| </div> | |
| <div class="s-row" data-param="conf"> | |
| <div> | |
| <div class="text-xs font-semibold text-slate-300 flex items-center">Confidence | |
| <span class="info-wrap ml-1"> | |
| <span class="info-btn" style="background:#1a1a1a;color:#888"><i | |
| class="fa-solid fa-info"></i></span> | |
| <span class="info-tip">Minimum score a detection must reach to be counted. Lower | |
| values detect more but may include false positives.</span> | |
| </span> | |
| </div> | |
| <div class="text-[10px] text-slate-500">Minimum detection threshold</div> | |
| </div> | |
| <div class="s-stepper"><button onclick="stepParam('conf',-0.01)">‹</button><span | |
| class="s-val" id="sv-conf">0.12</span><button | |
| onclick="stepParam('conf',0.01)">›</button></div> | |
| </div> | |
| <div class="s-row" data-param="iou"> | |
| <div> | |
| <div class="text-xs font-semibold text-slate-300 flex items-center">IoU Threshold | |
| <span class="info-wrap ml-1"> | |
| <span class="info-btn" style="background:#1a1a1a;color:#888"><i | |
| class="fa-solid fa-info"></i></span> | |
| <span class="info-tip">Controls how aggressively overlapping detections are | |
| merged. Higher values allow more overlap before suppression.</span> | |
| </span> | |
| </div> | |
| <div class="text-[10px] text-slate-500">Non-max suppression overlap</div> | |
| </div> | |
| <div class="s-stepper"><button onclick="stepParam('iou',-0.05)">‹</button><span | |
| class="s-val" id="sv-iou">0.60</span><button | |
| onclick="stepParam('iou',0.05)">›</button></div> | |
| </div> | |
| <div class="s-row" data-param="stride"> | |
| <div> | |
| <div class="text-xs font-semibold text-slate-300 flex items-center">Frame Stride | |
| <span class="info-wrap ml-1"> | |
| <span class="info-btn" style="background:#1a1a1a;color:#888"><i | |
| class="fa-solid fa-info"></i></span> | |
| <span class="info-tip">Number of frames skipped between each detection pass. | |
| Higher values trade accuracy for speed.</span> | |
| </span> | |
| </div> | |
| <div class="text-[10px] text-slate-500">Frames skipped between detections</div> | |
| </div> | |
| <div class="s-stepper"><button onclick="stepParam('stride',-1)">‹</button><span | |
| class="s-val" id="sv-stride">2</span><button | |
| onclick="stepParam('stride',1)">›</button></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Artifact Generation Settings --> | |
| <div class="col-span-1 bg-black rounded-xl border shadow-sm overflow-hidden flex flex-col" | |
| style="border-color:#2a2a2a"> | |
| <div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505"> | |
| <h3 class="font-bold text-white text-sm">Artifact Settings</h3> | |
| <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97"> | |
| Configured visual overlay options</p> | |
| </div> | |
| <div class="px-6 py-4 flex-1 flex flex-col"> | |
| <div class="s-row" data-param="report"> | |
| <div> | |
| <div class="text-xs font-semibold text-slate-300">Chart Format</div> | |
| <div class="text-[10px] text-slate-500">Format for each KPI chart</div> | |
| </div> | |
| <div class="uf-select-wrap" id="sv-report-wrap"> | |
| <div class="uf-select-trigger" id="sv-report-trigger" onclick="ufSelectToggle('sv-report')"> | |
| <span class="uf-select-label" id="sv-report-label">PNG</span> | |
| <i class="fa-solid fa-chevron-down uf-select-arrow" id="sv-report-arrow"></i> | |
| </div> | |
| <div class="uf-select-dropdown hidden" id="sv-report-dropdown"> | |
| <div class="uf-select-option uf-select-option-active" data-value="png" onclick="ufSelectPick('sv-report','png','PNG')">PNG</div> | |
| <div class="uf-select-option" data-value="pdf" onclick="ufSelectPick('sv-report','pdf','PDF')">PDF</div> | |
| </div> | |
| <input type="hidden" id="sv-report" value="png"> | |
| </div> | |
| </div> | |
| <div class="s-row" data-param="annotated"> | |
| <div> | |
| <div class="text-xs font-semibold text-slate-300">Export Annotated Video</div> | |
| <div class="text-[10px] text-slate-500">Diagnostic visual overlays</div> | |
| </div> | |
| <div class="toggle-track" id="sv-annotated" onclick="toggleExportMaster(this)"> | |
| <div class="toggle-thumb"></div> | |
| </div> | |
| </div> | |
| <div id="chip-selector" class="chip-container hidden-chip-container" data-param="annotated-chips"> | |
| <div class="chip frozen" id="chip-bbox"> | |
| <i class="fa-solid fa-check"></i> Bounding Boxes | |
| </div> | |
| <div class="chip active" id="chip-spatial" onclick="toggleChip('spatial')"> | |
| <i class="fa-solid fa-check"></i> Spatial Boundary | |
| </div> | |
| <div class="chip active" id="chip-class_id" onclick="toggleChip('class_id')"> | |
| <i class="fa-solid fa-check"></i> Class ID | |
| </div> | |
| <div class="chip active" id="chip-class_name" onclick="toggleChip('class_name')"> | |
| <i class="fa-solid fa-check"></i> Class Names | |
| </div> | |
| <div class="chip" id="chip-track_id" onclick="toggleChip('track_id')"> | |
| <i class="fa-solid fa-plus"></i> Track IDs | |
| </div> | |
| </div> | |
| <div class="s-row"> | |
| <div> | |
| <div class="text-xs font-semibold text-slate-300 flex items-center">Export Run Details | |
| <span class="info-wrap ml-1"> | |
| <span class="info-btn" style="background:#1a1a1a;color:#888"><i | |
| class="fa-solid fa-info"></i></span> | |
| <span class="info-tip">Include analysis.json payload with all run parameters and | |
| data structures.</span> | |
| </span> | |
| </div> | |
| <div class="text-[10px] text-slate-500">Structurally represented technical details</div> | |
| </div> | |
| <div class="toggle-track" id="sv-export-json" onclick="this.classList.toggle('active')"> | |
| <div class="toggle-thumb"></div> | |
| </div> | |
| </div> | |
| <div class="s-row"> | |
| <div> | |
| <div class="text-xs font-semibold text-slate-300 flex items-center">Export CSV Results | |
| <span class="info-wrap ml-1"> | |
| <span class="info-btn" style="background:#1a1a1a;color:#888"><i | |
| class="fa-solid fa-info"></i></span> | |
| <span class="info-tip">Include frame-by-frame data in raw CSV format.</span> | |
| </span> | |
| </div> | |
| <div class="text-[10px] text-slate-500">Include raw metrics and detections</div> | |
| </div> | |
| <div class="toggle-track" id="sv-export-csv" onclick="this.classList.toggle('active')"> | |
| <div class="toggle-thumb"></div> | |
| </div> | |
| </div> | |
| <div class="s-row"> | |
| <div> | |
| <div class="text-xs font-semibold text-slate-300 flex items-center">Auto-Download Report | |
| <span class="info-wrap ml-1"> | |
| <span class="info-btn" style="background:#1a1a1a;color:#888"><i | |
| class="fa-solid fa-info"></i></span> | |
| <span class="info-tip">Enable before processing completes | |
| to automatically download the report.</span> | |
| </span> | |
| </div> | |
| <div class="text-[10px] text-slate-500">Save reports automatically</div> | |
| </div> | |
| <div class="toggle-track" id="sv-auto-download" onclick="toggleAutoDownload(this)"> | |
| <div class="toggle-thumb"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Start Button --> | |
| <div class="col-span-3 pb-4 flex justify-center" id="settings-start-wrap"> | |
| <button id="btn-start-processing" onclick="startProcessingFromSettings()" | |
| class="w-fit px-16 py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2 shadow-lg hover:scale-105 active:scale-95" | |
| style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)"> | |
| <span>Process <i class="fa-solid fa-arrow-right ml-2 text-[10px]"></i></span> | |
| </button> | |
| </div> | |
| <!-- Home Button (visible only after processing completes) --> | |
| <div class="col-span-3 pb-4 hidden flex justify-center" id="new-analysis-wrap"> | |
| <button onclick="startNewAnalysis()" | |
| class="w-fit px-16 py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2 shadow-lg hover:scale-105 active:scale-95" | |
| style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)"> | |
| <span><i class="fa-solid fa-house mr-2 text-sm"></i> Home</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TAB: Navigator --> | |
| <div id="tab-help" class="hidden flex-1 min-h-0 overflow-y-auto"> | |
| <div class="space-y-6 w-full"> | |
| <div class="bg-black border rounded-xl overflow-hidden shadow-sm" style="border-color:#2a2a2a"> | |
| <div class="px-6 py-4 border-b flex justify-between items-center" | |
| style="border-color:#1a1a1a;background:#050505"> | |
| <div> | |
| <h3 class="font-bold text-white text-sm flex items-center">Navigator</h3> | |
| <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97"> | |
| Quick | |
| assistance & Documentation</p> | |
| </div> | |
| </div> | |
| <div class="p-8 space-y-10"> | |
| <!-- Category: Technical --> | |
| <section> | |
| <h4 class="text-[13px] font-bold uppercase tracking-[0.2em] mb-6 pb-2 border-b border-slate-900" | |
| style="color:#c89a6c">Technical & Performance</h4> | |
| <div class="space-y-4"> | |
| <div | |
| class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]"> | |
| <button onclick="toggleHelp('h1')" | |
| class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition"> | |
| <span class="text-sm font-semibold" style="color:#a89f97">Why is no live feed | |
| analysis available instead of video exports?</span> | |
| <i id="h1-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i> | |
| </button> | |
| <div id="h1-ans" class="hidden px-6 pb-6 text-xs leading-relaxed" | |
| style="color:#777"> | |
| 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 transition hover:border-[#1a1a1a]"> | |
| <button onclick="toggleHelp('h2')" | |
| class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition"> | |
| <span class="text-sm font-semibold" style="color:#a89f97">Why is auto-download | |
| not functioning correctly?</span> | |
| <i id="h2-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i> | |
| </button> | |
| <div id="h2-ans" class="hidden px-6 pb-6 text-xs leading-relaxed" | |
| style="color:#777"> | |
| 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 manually trigger the bundled ZIP download once processing reaches 100% by using the 'D' keyboard shortcut on Desktop, or tapping the 'Download All' button on Mobile. | |
| </div> | |
| </div> | |
| <div | |
| class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]"> | |
| <button onclick="toggleHelp('h3')" | |
| class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition"> | |
| <span class="text-sm font-semibold" style="color:#a89f97">Once processing | |
| completes, how can I analyze another video?</span> | |
| <i id="h3-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i> | |
| </button> | |
| <div id="h3-ans" class="hidden px-6 pb-6 text-xs leading-relaxed" | |
| style="color:#777"> | |
| To analyze a new video, go to 'Settings' and click 'Home'. | |
| This resets your current session and returns you | |
| to the Home screen. | |
| </div> | |
| </div> | |
| <div | |
| class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]"> | |
| <button onclick="toggleHelp('h4')" | |
| class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition"> | |
| <span class="text-sm font-semibold" style="color:#a89f97">How accurate are | |
| UrbanFlow's | |
| traffic calculations?</span> | |
| <i id="h4-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i> | |
| </button> | |
| <div id="h4-ans" class="hidden px-6 pb-6 text-xs leading-relaxed" | |
| style="color:#777"> | |
| UrbanFlow delivers an estimated accuracy of ±5–8% on dense mixed-traffic footage. While highly reliable, no computer vision model achieves 100% accuracy under all conditions. Results may vary slightly across runs due to frame-by-frame inference variability, severe occlusion, or extreme lighting. Our goal is constant iteration toward human-level perception. | |
| </div> | |
| </div> | |
| <div | |
| class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]"> | |
| <button onclick="toggleHelp('h5')" | |
| class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition"> | |
| <span class="text-sm font-semibold" style="color:#a89f97">What is PCU analysis?</span> | |
| <i id="h5-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i> | |
| </button> | |
| <div id="h5-ans" class="hidden px-6 pb-6 text-xs leading-relaxed" | |
| style="color:#777"> | |
| 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. This allows UrbanFlow to accurately calculate standardized traffic loads and identify congestion bottlenecks regardless of vehicle composition. | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Category: About --> | |
| <section> | |
| <h4 class="text-[13px] font-bold uppercase tracking-[0.2em] mb-6 pb-2 border-b border-slate-900" | |
| style="color:#c89a6c">About UrbanFlow</h4> | |
| <div class="space-y-4"> | |
| <div | |
| class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]"> | |
| <button onclick="toggleHelp('h6')" | |
| class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition"> | |
| <span class="text-sm font-semibold" style="color:#a89f97">Is UrbanFlow an | |
| independent workspace or a collaborative project?</span> | |
| <i id="h6-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i> | |
| </button> | |
| <div id="h6-ans" class="hidden px-6 pb-6 text-xs leading-relaxed" | |
| style="color:#777"> | |
| 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 transition hover:border-[#1a1a1a]"> | |
| <button onclick="toggleHelp('h7')" | |
| class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition"> | |
| <span class="text-sm font-semibold" style="color:#a89f97">Why is this application designed to be simple and focused?</span> | |
| <i id="h7-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i> | |
| </button> | |
| <div id="h7-ans" class="hidden px-6 pb-6 text-xs leading-relaxed" | |
| style="color:#777"> | |
| This platform is intentionally built as a streamlined demo. We created it to allow users to explore and provide us with valuable feedback. This user feedback directly helps us continuously improve our models and guides the development of our full, enterprise-grade production suite. | |
| </div> | |
| </div> | |
| <div | |
| class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]"> | |
| <button onclick="toggleHelp('h8')" | |
| class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition"> | |
| <span class="text-sm font-semibold" style="color:#a89f97">How can UrbanFlow | |
| assist my business operations?</span> | |
| <i id="h8-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i> | |
| </button> | |
| <div id="h8-ans" class="hidden px-6 pb-6 text-xs leading-relaxed" | |
| style="color:#777"> | |
| 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 transition hover:border-[#1a1a1a]"> | |
| <button onclick="toggleHelp('h9')" | |
| class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition"> | |
| <span class="text-sm font-semibold" style="color:#a89f97">Where can I learn more | |
| or verify the platform's reliability?</span> | |
| <i id="h9-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i> | |
| </button> | |
| <div id="h9-ans" class="hidden px-6 pb-6 text-xs leading-relaxed" | |
| style="color:#777"> | |
| 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 transition hover:border-[#1a1a1a]"> | |
| <button onclick="toggleHelp('h10')" | |
| class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition"> | |
| <span class="text-sm font-semibold" style="color:#a89f97">Is UrbanFlow a | |
| Non-profit organization?</span> | |
| <i id="h10-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i> | |
| </button> | |
| <div id="h10-ans" class="hidden px-6 pb-6 text-xs leading-relaxed" | |
| style="color:#777"> | |
| 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 transition hover:border-[#1a1a1a]"> | |
| <button onclick="toggleHelp('h11')" | |
| class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition"> | |
| <span class="text-sm font-semibold" style="color:#a89f97">What will UrbanFlow | |
| provide in the future?</span> | |
| <i id="h11-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i> | |
| </button> | |
| <div id="h11-ans" class="hidden px-6 pb-6 text-xs leading-relaxed" | |
| style="color:#777"> | |
| Our roadmap includes multi-model fusion, real-time 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="space-y-6 w-full"> | |
| <div class="text-center space-y-3 mb-6"> | |
| <h2 class="text-2xl font-bold tracking-tight" style="color:#f0ece6">Share Your Feedback</h2> | |
| <p class="text-xs" style="color:#777">We are constantly refining UrbanFlow. Your technical insights | |
| directly drive our roadmap.</p> | |
| <div | |
| class="inline-flex items-center gap-2 px-4 py-1.5 bg-[#111] border border-[#222] rounded-full mt-2"> | |
| <i class="fa-regular fa-clock text-[#c89a6c] text-[10px]"></i> | |
| <span class="text-[10px] font-bold uppercase tracking-widest text-[#a89f97]">It takes less than | |
| a minute to complete</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full"> | |
| <!-- Left Side: Experience & Requirements (All Selective Choices) --> | |
| <div class="col-span-1 bg-black rounded-xl border shadow-sm overflow-hidden flex flex-col" | |
| style="border-color:#2a2a2a"> | |
| <div class="px-6 py-4 border-b bg-[#050505]" style="border-color:#1a1a1a"> | |
| <h3 class="font-bold text-white text-sm flex items-center">Experience & Priorities</h3> | |
| <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97"> | |
| Rate your | |
| experience</p> | |
| </div> | |
| <div class="p-6 flex-1 space-y-8"> | |
| <!-- Overall Experience Centered --> | |
| <div class="flex flex-col items-center justify-center border-b pb-6" | |
| style="border-color:#1a1a1a"> | |
| <label class="text-[10px] font-bold uppercase tracking-widest block mb-3 text-center" | |
| style="color:#a89f97">Overall Experience</label> | |
| <div class="fb-stars" id="fb-stars"> | |
| <span class="fb-star" data-v="1" onclick="setRating(1)">★</span> | |
| <span class="fb-star" data-v="2" onclick="setRating(2)">★</span> | |
| <span class="fb-star" data-v="3" onclick="setRating(3)">★</span> | |
| <span class="fb-star" data-v="4" onclick="setRating(4)">★</span> | |
| <span class="fb-star" data-v="5" onclick="setRating(5)">★</span> | |
| </div> | |
| </div> | |
| <!-- Emojis Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" | |
| style="color:#a89f97">Recommend Product</label> | |
| <div class="flex gap-2" id="fb-recommend"> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Unlikely')"> | |
| <i class="fa-solid fa-face-frown text-xl"></i><span | |
| class="block mt-1 text-[8px] uppercase">Unlikely</span> | |
| </div> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Maybe')"><i | |
| class="fa-solid fa-face-meh text-xl"></i><span | |
| class="block mt-1 text-[8px] uppercase">Maybe</span></div> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Likely')"><i | |
| class="fa-solid fa-face-smile text-xl"></i><span | |
| class="block mt-1 text-[8px] uppercase">Likely</span></div> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Highly')"><i | |
| class="fa-solid fa-face-grin-stars text-xl"></i><span | |
| class="block mt-1 text-[8px] uppercase">Highly</span></div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" | |
| style="color:#a89f97">Security | |
| <span class="info-wrap ml-1"><span class="info-btn"><i | |
| class="fa-solid fa-info"></i></span><span class="info-tip">How | |
| confident are you in our data handling and privacy | |
| measures?</span></span> | |
| </label> | |
| <div class="flex gap-2" id="fb-security"> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Poor')"><i | |
| class="fa-solid fa-face-frown text-lg"></i><span | |
| class="block mt-1 text-[8px] uppercase">Poor</span></div> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Fair')"><i | |
| class="fa-solid fa-face-meh text-lg"></i><span | |
| class="block mt-1 text-[8px] uppercase">Fair</span></div> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Good')"><i | |
| class="fa-solid fa-face-smile text-lg"></i><span | |
| class="block mt-1 text-[8px] uppercase">Good</span></div> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Great')"><i | |
| class="fa-solid fa-face-grin-stars text-lg"></i><span | |
| class="block mt-1 text-[8px] uppercase">Great</span></div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" | |
| style="color:#a89f97">Integrations | |
| <span class="info-wrap ml-1"><span class="info-btn"><i | |
| class="fa-solid fa-info"></i></span><span class="info-tip">How well | |
| does UrbanFlow fit into your existing TMS or software | |
| ecosystem?</span></span> | |
| </label> | |
| <div class="flex gap-2" id="fb-integration"> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Poor')"><i | |
| class="fa-solid fa-face-frown text-lg"></i><span | |
| class="block mt-1 text-[8px] uppercase">Poor</span></div> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Fair')"><i | |
| class="fa-solid fa-face-meh text-lg"></i><span | |
| class="block mt-1 text-[8px] uppercase">Fair</span></div> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Good')"><i | |
| class="fa-solid fa-face-smile text-lg"></i><span | |
| class="block mt-1 text-[8px] uppercase">Good</span></div> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Great')"><i | |
| class="fa-solid fa-face-grin-stars text-lg"></i><span | |
| class="block mt-1 text-[8px] uppercase">Great</span></div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" | |
| style="color:#a89f97">Ease of Use | |
| <span class="info-wrap ml-1"><span class="info-btn"><i | |
| class="fa-solid fa-info"></i></span><span class="info-tip">How | |
| intuitive is the dashboard and configuration process?</span></span> | |
| </label> | |
| <div class="flex gap-2" id="fb-ease"> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Poor')"><i | |
| class="fa-solid fa-face-frown text-lg"></i><span | |
| class="block mt-1 text-[8px] uppercase">Poor</span></div> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Fair')"><i | |
| class="fa-solid fa-face-meh text-lg"></i><span | |
| class="block mt-1 text-[8px] uppercase">Fair</span></div> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Good')"><i | |
| class="fa-solid fa-face-smile text-lg"></i><span | |
| class="block mt-1 text-[8px] uppercase">Good</span></div> | |
| <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Great')"><i | |
| class="fa-solid fa-face-grin-stars text-lg"></i><span | |
| class="block mt-1 text-[8px] uppercase">Great</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feature Prioritization --> | |
| <div class="pt-4 border-t" style="border-color:#1a1a1a"> | |
| <label class="text-[10px] font-bold uppercase tracking-widest block mb-4" | |
| style="color:#a89f97">Which feature we should prioritize?</label> | |
| <div class="grid grid-cols-2 gap-3" id="fb-priorities"> | |
| <div class="fb-chip" onclick="this.classList.toggle('active')" | |
| data-val="api-access">API Access & Shortcuts</div> | |
| <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="anpr">UI/UX | |
| Improvements</div> | |
| <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="security"> | |
| Security Enhancement</div> | |
| <div class="fb-chip" onclick="this.classList.toggle('active')" | |
| data-val="regulation">IAM, Regulations & Policy Support</div> | |
| <div class="fb-chip" onclick="this.classList.toggle('active')" | |
| data-val="regulation">Customer Success & Business Support</div> | |
| <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="helmet"> | |
| Features: Dwell Time, ANPR, Parking</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Side: Categorization & Feedback Text --> | |
| <div class="col-span-1 bg-black rounded-xl border shadow-sm overflow-hidden flex flex-col" | |
| style="border-color:#2a2a2a"> | |
| <div class="px-6 py-4 border-b bg-[#050505]" style="border-color:#1a1a1a"> | |
| <h3 class="font-bold text-white text-sm flex items-center">Categorization & Feedback</h3> | |
| <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97"> | |
| Detailed | |
| workflow insights</p> | |
| </div> | |
| <div class="p-6 flex-1 flex flex-col space-y-6"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" | |
| style="color:#a89f97">Primary Use Case</label> | |
| <div class="uf-select-wrap w-full" id="fb-usecase-wrap"> | |
| <div class="uf-select-trigger" id="fb-usecase-trigger" onclick="ufSelectToggle('fb-usecase')"> | |
| <span class="uf-select-label" id="fb-usecase-label" style="color:#666">Select your use case</span> | |
| <i class="fa-solid fa-chevron-down uf-select-arrow" id="fb-usecase-arrow"></i> | |
| </div> | |
| <div class="uf-select-dropdown hidden" id="fb-usecase-dropdown"> | |
| <div class="uf-select-option" data-value="research" onclick="ufSelectPick('fb-usecase','research','Academic Research')">Academic Research</div> | |
| <div class="uf-select-option" data-value="planning" onclick="ufSelectPick('fb-usecase','planning','Urban Planning')">Urban Planning</div> | |
| <div class="uf-select-option" data-value="highway" onclick="ufSelectPick('fb-usecase','highway','Business Modelling')">Business Modelling</div> | |
| <div class="uf-select-option" data-value="smartcity" onclick="ufSelectPick('fb-usecase','smartcity','Smart City Investment')">Smart City Investment</div> | |
| <div class="uf-select-option" data-value="other" onclick="ufSelectPick('fb-usecase','other','Other...')">Other...</div> | |
| </div> | |
| <input type="hidden" id="fb-usecase" value=""> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" | |
| style="color:#a89f97">Feedback Category</label> | |
| <div class="uf-select-wrap w-full" id="fb-type-wrap"> | |
| <div class="uf-select-trigger" id="fb-type-trigger" onclick="ufSelectToggle('fb-type')"> | |
| <span class="uf-select-label" id="fb-type-label" style="color:#666">General Feedback</span> | |
| <i class="fa-solid fa-chevron-down uf-select-arrow" id="fb-type-arrow"></i> | |
| </div> | |
| <div class="uf-select-dropdown hidden" id="fb-type-dropdown"> | |
| <div class="uf-select-option" data-value="bug" onclick="ufSelectPick('fb-type','bug','Technical Issue / Bug Report')">Technical Issue / Bug Report</div> | |
| <div class="uf-select-option" data-value="feature" onclick="ufSelectPick('fb-type','feature','Feature Request')">Feature Request</div> | |
| <div class="uf-select-option" data-value="accuracy" onclick="ufSelectPick('fb-type','accuracy','Inference Accuracy Review')">Inference Accuracy Review</div> | |
| <div class="uf-select-option" data-value="ux" onclick="ufSelectPick('fb-type','ux','UI / UX')">UI / UX</div> | |
| </div> | |
| <input type="hidden" id="fb-type" value=""> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-1 flex flex-col"> | |
| <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" | |
| style="color:#a89f97">Detailed Word Feedback</label> | |
| <textarea class="fb-textarea w-full flex-1 min-h-[180px]" id="fb-text" | |
| placeholder="Please take a moment to provide a meaningful response. Describe your specific workflow needs or any limitations you encountered..."></textarea> | |
| </div> | |
| <button id="fb-submit-btn" onclick="submitFeedback()" | |
| class="w-full py-4 font-bold text-sm rounded-full transition hover:scale-[1.01] active:scale-95 shadow-lg flex items-center justify-center gap-3 mt-4" | |
| style="background:#111;border:1px solid var(--cocoa);color:var(--cocoa-l)"> | |
| Transmit Feedback | |
| </button> | |
| <!-- Cooldown Progress Bar --> | |
| <div id="fb-cooldown-wrap" class="w-full mt-5 hidden"> | |
| <div class="w-full h-[1.5px] bg-neutral-900 rounded-full overflow-hidden"> | |
| <div id="fb-cooldown-bar" class="h-full w-full rounded-full" | |
| style="background:var(--cocoa-l)"></div> | |
| </div> | |
| <p class="text-[9px] font-bold text-center mt-2.5 uppercase tracking-[0.25em]" | |
| style="color:#444">Ready to send again in a moment...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-6 border-t border-[#111]"> | |
| <p class="text-[10px] text-center tracking-widest" style="color:#444">Queries: <strong | |
| style="color:#c89a6c">support.urbanflow365@gmail.com</strong></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TAB: Profile --> | |
| <div id="tab-profile" class="hidden flex-1 min-h-0 overflow-y-auto"> | |
| <!-- Single unified card — full width --> | |
| <div class="bg-neutral-950 rounded-2xl border border-neutral-900 overflow-hidden"> | |
| <!-- Identity Section --> | |
| <div class="p-6 lg:p-8 flex flex-col items-center lg:flex-row lg:items-start gap-6 border-b border-neutral-900"> | |
| <div class="relative group flex-shrink-0"> | |
| <img id="profile-pfp-large" src="" alt="" class="w-20 h-20 lg:w-24 lg:h-24 rounded-full border-2 border-neutral-800 shadow-2xl object-cover"> | |
| <div class="absolute inset-0 rounded-full bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-[10px] font-bold text-white uppercase text-center p-2">Managed by Google</div> | |
| </div> | |
| <div class="flex-1 w-full text-center lg:text-left space-y-4"> | |
| <div> | |
| <label class="text-[10px] font-bold uppercase tracking-widest text-slate-500 block mb-1">Email Address</label> | |
| <div id="profile-email" class="text-sm font-medium text-slate-300"></div> | |
| </div> | |
| <div> | |
| <label class="text-[10px] font-bold uppercase tracking-widest text-slate-500 block mb-1">Display Name</label> | |
| <div class="flex items-center gap-3 justify-center lg:justify-start"> | |
| <input type="text" id="profile-username-input" class="bg-neutral-900 border border-neutral-800 rounded-lg px-4 py-2 text-sm text-white focus:outline-none focus:border-neutral-600 transition w-full max-w-[240px]"> | |
| <button onclick="saveProfileUsername()" id="btn-save-username" class="px-4 py-2 bg-neutral-800 hover:bg-neutral-700 text-[10px] font-bold uppercase tracking-widest rounded-lg text-slate-300 transition">Save</button> | |
| </div> | |
| <p class="text-[9px] text-slate-600 mt-1">This name will be used on exported reports.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Row --> | |
| <div class="grid grid-cols-2 gap-0 border-b border-neutral-900"> | |
| <div class="p-5 lg:p-6 border-r border-neutral-900"> | |
| <div class="text-[9px] font-bold uppercase tracking-widest text-slate-600 mb-1">Total Runs</div> | |
| <div id="profile-total-runs" class="text-2xl font-bold text-white">0</div> | |
| </div> | |
| <div class="p-5 lg:p-6"> | |
| <div class="text-[9px] font-bold uppercase tracking-widest text-slate-600 mb-1">Last Active</div> | |
| <div id="profile-last-active" class="text-sm font-bold text-slate-300">Never</div> | |
| </div> | |
| </div> | |
| <!-- Terms Acceptance Indicator --> | |
| <div class="p-5 lg:p-6 flex items-center gap-3 border-b border-neutral-900"> | |
| <i class="fa-solid fa-circle-check text-emerald-500"></i> | |
| <div> | |
| <div class="text-xs font-bold text-slate-300">Terms & Privacy Accepted</div> | |
| <div class="text-[9px] text-slate-600">You have agreed to the Privacy Policy and Terms & Conditions.</div> | |
| </div> | |
| </div> | |
| <!-- Sign Out --> | |
| <div class="p-5 lg:p-6 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-xs font-bold uppercase tracking-widest text-red-400">Account Access</h3> | |
| <p class="text-[10px] text-slate-500 mt-1">Sign out clears your local session.</p> | |
| </div> | |
| <button onclick="showLogoutConfirm()" class="px-6 py-2.5 bg-red-900/20 hover:bg-red-900/30 text-red-400 border border-red-900/30 text-[10px] font-bold uppercase tracking-widest rounded-xl transition">Sign Out</button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="js/templates.js"></script> | |
| <script src="js/shared.js"></script> | |
| <script src="js/auth.js"></script> | |
| <script src="js/vehicles.js"></script> | |
| <script> | |
| // Inject shared components (modals, shortcuts, nav) | |
| injectLegalModals(); | |
| injectShortcutsModal(); | |
| // Auto-show keyboard shortcuts on first desktop visit | |
| if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) { | |
| setTimeout(function () { openAppModal('shortcutsModal'); }, 800); | |
| } | |
| </script> | |
| <nav class="mobile-bottom-nav" id="mobile-bottom-nav"> | |
| <button class="mob-nav-item" id="mob-nav-about" onclick="switchTab('about')"> | |
| <i class="fa-solid fa-circle-info"></i> | |
| </button> | |
| <button class="mob-nav-item" id="mob-nav-overview" onclick="switchTab('overview')"> | |
| <i class="fa-solid fa-desktop"></i> | |
| </button> | |
| <button class="mob-nav-item" id="mob-nav-results" onclick="switchTab('results')"> | |
| <i class="fa-solid fa-file-lines"></i> | |
| </button> | |
| <button class="mob-nav-item" id="mob-nav-settings" onclick="switchTab('settings')"> | |
| <i class="fa-solid fa-gear"></i> | |
| </button> | |
| <button class="mob-nav-item" id="mob-nav-help" onclick="switchTab('help')"> | |
| <i class="fa-solid fa-circle-question"></i> | |
| </button> | |
| <button class="mob-nav-item" id="mob-nav-feedback" onclick="switchTab('feedback')"> | |
| <i class="fa-solid fa-comment-dots"></i> | |
| </button> | |
| <button class="mob-nav-item" id="mob-nav-profile" onclick="switchTab('profile')"> | |
| <div id="mob-pfp-wrap" class="w-7 h-7 rounded-full overflow-hidden bg-neutral-800 flex items-center justify-center mx-auto"> | |
| <i class="fa-solid fa-circle-user"></i> | |
| </div> | |
| </button> | |
| </nav> | |
| <script> | |
| if ('serviceWorker' in navigator) { | |
| window.addEventListener('load', () => { | |
| navigator.serviceWorker.register('./sw.js'); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |