Spaces:
Running
Running
File size: 13,809 Bytes
b87a24a 23f66d2 b87a24a 0bdf61b 23f66d2 0bdf61b 23f66d2 b87a24a 091ea0d 3e04ea5 091ea0d b87a24a 4d20521 5cd1866 e3ec5d6 5cd1866 b87a24a 091ea0d b87a24a 5cd1866 bb34c97 e3ec5d6 b87a24a 4d20521 b87a24a 091ea0d b87a24a 091ea0d a14a412 5cd1866 b87a24a 5cd1866 a14a412 5cd1866 a14a412 b87a24a 091ea0d b87a24a bb34c97 091ea0d 7932d1b a14a412 3e04ea5 5cd1866 c734973 4d20521 a14a412 c734973 a14a412 b87a24a 091ea0d b87a24a 091ea0d 4d20521 b87a24a a14a412 bb34c97 091ea0d 4d20521 a14a412 7f449cc b87a24a c734973 b87a24a bb34c97 4d20521 b87a24a 091ea0d b87a24a bb34c97 091ea0d 7932d1b 4d20521 b87a24a bb34c97 b87a24a 4d20521 b87a24a 5cd1866 e0d9763 b87a24a 4d20521 5cd1866 e0d9763 5cd1866 b87a24a 091ea0d 5cd1866 091ea0d f69350e 091ea0d f69350e 5cd1866 e3ec5d6 f69350e 5cd1866 f69350e 5cd1866 f69350e d9ebe88 a41b2a9 a14a412 d9ebe88 a14a412 d9ebe88 4d20521 a14a412 d9ebe88 4d20521 d9ebe88 162e31e b87a24a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 | <!DOCTYPE html>
<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> |