Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <!-- SPA Router: go to vehicles dashboard if run data is pending --> | |
| <script> | |
| if (sessionStorage.getItem('funky_run')) { | |
| // Direct navigation — eliminates the document.write white-flash glitch. | |
| // vehicles.html has bg-black on <body>, so the browser paints dark immediately. | |
| window.location.replace('vehicles.html'); | |
| } | |
| </script> | |
| <meta charset="UTF-8"> | |
| <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" sizes="512x512" 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" sizes="512x512" href="assets/shurkien_b.png"> | |
| <script src="https://cdn.tailwindcss.com"></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&family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="css/shared.css"> | |
| <link rel="stylesheet" href="css/initial.css"> | |
| <link rel="stylesheet" href="css/auth.css"> | |
| </head> | |
| <body class="bg-black text-white min-h-screen w-full flex flex-col items-center selection:bg-white selection:text-black overflow-x-hidden"> | |
| <header class="mt-16 flex flex-col items-center flex-shrink-0 w-full z-10"> | |
| <img src="assets/uf_rf.png" alt="UrbanFlow Logo" class="h-44 md:h-52 w-auto object-contain mb-3"> | |
| </header> | |
| <main class="flex-1 w-full max-w-[90rem] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 px-10 py-6 items-center z-10"> | |
| <div class="hero-text-section lg:col-span-7 flex flex-col justify-center pb-6 lg:pb-0"> | |
| <h1 class="hero-title text-center sm:text-left font-extrabold mb-6 sm:mb-4 tracking-tight" | |
| style="background:linear-gradient(135deg,#f0ece6 0%,#f0ece6 35%,#d4b08a 60%,#c89a6c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text"> | |
| <span class="block sm:inline">Automated</span> | |
| <br class="hidden sm:block"> | |
| <span class="block sm:inline">Vision</span> | |
| <span class="block sm:inline">Intelligence</span> | |
| </h1> | |
| <p class="font-bold mb-8 text-sm uppercase tracking-[0.2em] flex items-center justify-center sm:justify-start" style="color:#a89f97"> | |
| <span class="core-badge px-3 py-1 rounded-full text-[10px] mr-3">Beta</span> | |
| Field Intelligence Platform | |
| </p> | |
| <div class="hero-desc mb-10 text-center sm:text-left" style="color:#a89f97"> | |
| <p class="hero-desc-lead mb-4 font-semibold text-white"> | |
| Transform video feeds into actionable intelligence. | |
| </p> | |
| <p class="hero-desc-body"> | |
| UrbanFlow converts raw footage from any CCTV, dashcam, or drone into high-precision structured data—delivering instant vehicle counts, classifications, and flow analytics without requiring any hardware installation. Simply upload a clip, define your spatial boundaries, and receive enterprise-grade analytical reports in minutes. | |
| </p> | |
| </div> | |
| <div class="mt-10 flex justify-center sm:justify-start"> | |
| <button onclick="openOnboarding()" class="transition-all active:scale-95 hover:text-[#c89a6c] group cursor-pointer font-bold text-white text-base tracking-[0.15em] uppercase" style="font-family: 'Montserrat', sans-serif;"> | |
| HOW TO USE? | |
| </button> | |
| </div> | |
| </div> | |
| <div class="step-card-section lg:col-span-5 flex flex-col justify-center w-full max-w-[32rem] mx-auto h-auto md:h-[480px] lg:h-[520px] mb-12 lg:mb-0"> | |
| <!-- STEP: Modules --> | |
| <div id="step-modules" class="w-full flex flex-col fade-in overflow-y-auto"> | |
| <h2 class="text-3xl font-bold mb-2 text-center" style="color:#f0ece6">UrbanFlow</h2> | |
| <p class="text-[13px] font-medium mb-8 text-center" style="color:#a89f97">Proceed to analysis</p> | |
| <div class="flex justify-center w-full"> | |
| <div onclick="handleTrafficDynamicsClick()" | |
| class="group relative border-2 rounded-[2rem] p-8 cursor-pointer hover:-translate-y-1 transition-all duration-300 text-center max-w-sm w-full traffic-dynamics-card"> | |
| <div class="absolute top-4 right-6 text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider" | |
| style="background:#c89a6c;color:#000">BETA</div> | |
| <i class="fa-solid fa-car-side text-4xl mb-4 block mx-auto" style="color:#c89a6c"></i> | |
| <h3 class="font-bold text-lg mb-2 leading-tight" style="color:#f0ece6">Traffic <br>Dynamics</h3> | |
| <p class="text-[10px] font-medium leading-relaxed" style="color:#a89f97">Vehicle counting, classification, and flow analysis</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- STEP: Upload --> | |
| <div id="step-upload" class="hidden w-full flex flex-col fade-in overflow-y-auto"> | |
| <button onclick="showStep('modules')" | |
| class="text-[#a89f97] hover:text-white hover:underline transition flex items-center text-xs font-bold uppercase tracking-widest mb-6 w-fit"> | |
| <i class="fa-solid fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <h2 class="text-3xl font-bold mb-2 text-center" style="color:#f0ece6">Media</h2> | |
| <p class="text-[13px] font-medium mb-8 text-center" style="color:#a89f97">Submit an appropriate video footage</p> | |
| <input id="file-input" type="file" accept="video/*" class="hidden"> | |
| <div id="dropzone" onclick="document.getElementById('file-input').click()" | |
| class="border border-dashed border-neutral-700 rounded-[2rem] p-8 md:p-12 flex flex-col items-center justify-center cursor-pointer transition-all duration-300 group"> | |
| <i class="fa-solid fa-arrow-up-from-bracket text-4xl mb-5 block mx-auto transition" style="color:#a89f97"></i> | |
| <span class="font-semibold text-lg mb-2 text-center block" style="color:#f0ece6">Drop or select a video</span> | |
| <span class="text-[10px] font-bold uppercase tracking-widest text-center block" style="color:#a89f97">Any standard video format accepted</span> | |
| </div> | |
| <div id="upload-progress-container" class="hidden mt-10 w-full"> | |
| <div class="flex justify-between text-[11px] font-bold uppercase tracking-widest mb-3" style="color:#f0ece6"> | |
| <span id="upload-text">Uploading...</span> | |
| <span id="upload-percentage">0%</span> | |
| </div> | |
| <div class="w-full h-1 bg-neutral-900 rounded-full overflow-hidden"> | |
| <div id="upload-bar" class="h-full w-0 transition-all duration-75 ease-linear rounded-full" style="background:#c89a6c"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- STEP: Draw --> | |
| <div id="step-draw" class="hidden w-full flex flex-col fade-in overflow-y-auto"> | |
| <h2 class="text-3xl font-bold mb-2 text-center" style="color:#f0ece6">Spatial Boundary</h2> | |
| <p class="text-[11px] font-bold uppercase tracking-widest mb-6 text-center" style="color:#a89f97">Mark two points to define the vehicle counting threshold</p> | |
| <div class="relative w-full aspect-video bg-neutral-950 rounded-3xl overflow-hidden cursor-crosshair mb-6"> | |
| <img id="frame-img" class="absolute inset-0 w-full h-full object-contain" style="display:none;"> | |
| <div id="frame-placeholder" | |
| class="absolute inset-0 flex flex-col items-center justify-center text-neutral-800 pointer-events-none"> | |
| <i class="fa-solid fa-video text-4xl mb-3 opacity-30"></i> | |
| <span class="font-bold text-[10px] uppercase tracking-widest opacity-50">Media Frame Preview</span> | |
| </div> | |
| <canvas id="drawing-canvas" class="absolute inset-0 w-full h-full"></canvas> | |
| </div> | |
| <p class="text-[11px] text-center mb-6" style="color:#a89f97"> | |
| <em>Draw across the lane of travel, not along it.</em> | |
| <!-- TODO: Add 3 correct angle visual graphics later --> | |
| </p> | |
| <div class="flex flex-col items-center gap-3"> | |
| <button id="btn-proceed" onclick="startRun()" | |
| class="w-fit px-16 py-3.5 rounded-full font-bold transition-all text-center text-sm shadow-lg hover:scale-105 active:scale-95" | |
| style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)"> | |
| Continue → | |
| </button> | |
| <button onclick="resetCanvas()" | |
| class="text-[11px] font-bold uppercase tracking-widest text-slate-300 hover:text-white transition px-4 py-2 mt-2 bg-neutral-900 rounded-full border border-neutral-700" | |
| style="border-color:#333;">Reset </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="w-full max-w-[90rem] mx-auto px-10 mt-auto z-10 text-[11px] font-bold uppercase tracking-[0.2em]" style="color:#777"> | |
| <div class="py-6 w-full"> | |
| <!-- Mobile: two links side-by-side, copyright below centered --> | |
| <!-- Desktop: three columns left / center / right --> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-2 md:gap-0"> | |
| <div class="flex justify-between md:block md:flex-none md:w-auto"> | |
| <button onclick="openAppModal('privacyModal')" class="hover:text-white transition md:mr-6">Privacy Policy</button> | |
| <button onclick="openAppModal('termsModal')" class="hover:text-white transition">Terms & Conditions</button> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| © 2026 UrbanFlow. All rights reserved. | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="js/templates.js"></script> | |
| <script src="js/shared.js"></script> | |
| <script src="js/auth.js"></script> | |
| <script src="js/initial.js"></script> | |
| <script> | |
| // Auth-gated entry into Traffic Dynamics | |
| function handleTrafficDynamicsClick() { | |
| if (isAuthenticated()) { | |
| showStep('upload'); | |
| } else { | |
| promptGoogleSignIn(function() { | |
| showStep('upload'); | |
| }); | |
| } | |
| } | |
| document.addEventListener('DOMContentLoaded', function() { | |
| injectLegalModals(); | |
| }); | |
| </script> | |
| <!-- Onboarding Walkthrough --> | |
| <div id="onboard-overlay" class="onboard-overlay" style="display:none"> | |
| <div class="onboard-card"> | |
| <div class="onboard-step active" data-step="0"> | |
| <i class="fa-solid fa-cloud-arrow-up text-4xl mb-4" style="color:var(--cocoa-l)"></i> | |
| <h3 class="text-lg font-bold mb-2" style="color:#f0ece6">Upload a Video</h3> | |
| <p class="text-xs" style="color:#777;line-height:1.7">Upload a suitable video clip from a traffic camera.</p> | |
| </div> | |
| <div class="onboard-step" data-step="1"> | |
| <i class="fa-solid fa-draw-polygon text-4xl mb-4" style="color:var(--cocoa-l)"></i> | |
| <h3 class="text-lg font-bold mb-2" style="color:#f0ece6">Draw a Counting Line</h3> | |
| <p class="text-xs" style="color:#777;line-height:1.7">Draw two points to define a counting line. Vehicles crossing this line will be counted & classified.</p> | |
| </div> | |
| <div class="onboard-step" data-step="2"> | |
| <i class="fa-solid fa-chart-line text-4xl mb-4" style="color:var(--cocoa-l)"></i> | |
| <h3 class="text-lg font-bold mb-2" style="color:#f0ece6">Review Analytics & Export</h3> | |
| <p class="text-xs" style="color:#777;line-height:1.7">Track insights as they update during processing. Download reports when ready.</p> | |
| </div> | |
| <div class="onboard-dots"> | |
| <span class="onboard-dot active"></span> | |
| <span class="onboard-dot"></span> | |
| <span class="onboard-dot"></span> | |
| </div> | |
| <div class="flex gap-3 justify-center mt-6"> | |
| <button onclick="closeOnboarding()" | |
| class="text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-full" | |
| style="color:#555;border:1px solid #222">Skip</button> | |
| <button id="onboard-next" onclick="nextOnboardStep()" | |
| class="text-[10px] font-bold uppercase tracking-widest px-6 py-2 rounded-full" | |
| style="background:var(--cocoa);color:#f0ece6">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |