colors and words

frontend/initial.html

@@ -94,7 +94,7 @@
         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="lg:col-span-7 flex flex-col justify-center xl:pl-10 pb-10 lg:pb-0">
-            <h1 class="text-5xl xl:text-[4.5rem] font-extrabold mb-4 leading-[1.1] tracking-tight" style="color:#f0ece6">
+            <h1 class="text-5xl xl:text-[4.5rem] font-extrabold mb-4 leading-[1.1] tracking-tight" style="background:linear-gradient(110deg,#f0ece6 0%,#f0ece6 35%,#c89a6c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
                 Automated <br>Vision Intelligence
             </h1>
             <p class="font-bold mb-8 text-sm uppercase tracking-[0.2em] flex items-center" style="color:#a89f97">

frontend/vehicles.html

@@ -359,9 +359,10 @@
                 <i class="fa-solid fa-sliders w-6"></i> <span class="font-medium">Settings</span>
             </a>
         </nav>
-        <div class="mt-auto border-t border-slate-800 p-4 flex items-center justify-center bg-black flex-shrink-0">
-            <img id="sidebar-logo-bottom" src="uf_rf.png" alt="UrbanFlow Bottom Logo"
-                class="h-20 w-auto object-contain opacity-80">
+        <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 &amp; Conditions</button>
+            <p class="text-[9px] mt-1" style="color:#333">&#169; 2026 UrbanFlow</p>
         </div>
     </aside>
 
@@ -369,74 +370,60 @@
 
         <!-- TAB: About -->
         <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto">
-            <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-8 max-w-[1400px] w-full">
-                <h2 class="text-2xl font-bold text-slate-800 mb-6">UrbanFlow</h2>
-
-                <div class="mb-10 py-6 border-y border-slate-50">
-                    <p
-                        class="max-w-3xl mx-auto text-center text-slate-400 text-sm font-semibold leading-relaxed tracking-wide italic px-8">
-                        "Urban Flow is more than a metric of transit; it is the pulse of a city’s collective intent.
-                        This workspace is designed to observe that rhythm, transforming raw motion into the clarity
-                        required for decisive, visionary infrastructure."
+            <div class="rounded-xl border p-8 max-w-[1400px] w-full" style="background:#0a0a0a;border-color:#2a2a2a">
+                <h2 class="text-2xl font-bold mb-6" style="color:#f0ece6">UrbanFlow</h2>
+
+                <div class="mb-10 py-6" style="border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a">
+                    <p class="max-w-3xl mx-auto text-center text-sm font-semibold leading-relaxed tracking-wide italic px-8" style="color:#a89f97">
+                        &ldquo;Traffic data has always existed on Indian roads &mdash; 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.&rdquo;
                     </p>
                 </div>
 
-                <div class="space-y-6 text-slate-600 leading-relaxed text-sm">
+                <div class="space-y-6 leading-relaxed text-sm" style="color:#a89f97">
                     <p>
-                        UrbanFlow is an advanced vision intelligence suite designed for real-time traffic dynamics
-                        analysis.
-                        Leveraging state-of-the-art deep learning models, it provides consultative-grade insights into
-                        vehicle movement, classification, and throughput.
+                        UrbanFlow is a computer vision system purpose-built for traffic analysis on Indian roads.
+                        It processes video footage and returns structured outputs &mdash; vehicle counts by class,
+                        directional flow totals, and temporal traffic patterns &mdash; without requiring new hardware
+                        or on-site installation.
                     </p>
                     <p>
-                        This platform is engineered for urban planners and infrastructure executives who require
-                        high-density data to drive visionary urban transformation. By transforming raw video footage
-                        into actionable intelligence, UrbanFlow enables data-driven decision making for safer,
-                        more efficient urban mobility.
+                        The system is designed for practitioners working in traffic planning, urban mobility research,
+                        and transport infrastructure assessment. Footage is submitted, inference runs in the cloud,
+                        and results are returned as structured KPI outputs and downloadable reports.
                     </p>
-                    <div class="grid grid-cols-2 gap-12 pt-8 border-t border-slate-50">
+                    <div class="grid grid-cols-2 gap-12 pt-8" style="border-top:1px solid #1a1a1a">
                         <div class="space-y-4">
-                            <h4 class="font-bold text-slate-800 text-[13px] uppercase tracking-wider">Core Capabilities
-                            </h4>
+                            <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What It Does</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 text-slate-400"></i>
-                                    <span>Real-time Spatial Detection</span>
+                                <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" style="color:#c89a6c"></i>
+                                    <span>Vehicle detection across 14 classes</span>
                                 </li>
-                                <li class="flex items-start gap-3"><i
-                                        class="fa-solid fa-circle text-[5px] mt-1.5 text-slate-400"></i>
-                                    <span>Multi-class Object Tracking</span>
+                                <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" style="color:#c89a6c"></i>
+                                    <span>Bidirectional crossing count at defined boundary</span>
                                 </li>
-                                <li class="flex items-start gap-3"><i
-                                        class="fa-solid fa-circle text-[5px] mt-1.5 text-slate-400"></i>
-                                    <span>Bidirectional Flow Analysis</span>
+                                <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" style="color:#c89a6c"></i>
+                                    <span>Temporal flow analysis per second of footage</span>
                                 </li>
-                                <li class="flex items-start gap-3"><i
-                                        class="fa-solid fa-circle text-[5px] mt-1.5 text-slate-400"></i>
-                                    <span>High-Density Metrics Capture</span>
+                                <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" style="color:#c89a6c"></i>
+                                    <span>Annotated video export with spatial overlays</span>
                                 </li>
                             </ul>
                         </div>
                         <div class="space-y-4">
-                            <h4 class="font-bold text-slate-800 text-[13px] uppercase tracking-wider">Intelligence
-                                Framework
-                            </h4>
+                            <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">How It Works</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 text-slate-400"></i>
-                                    <span>OpenVINO Performance Optimization</span>
+                                <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" style="color:#c89a6c"></i>
+                                    <span>Upload footage from any existing camera source</span>
                                 </li>
-                                <li class="flex items-start gap-3"><i
-                                        class="fa-solid fa-circle text-[5px] mt-1.5 text-slate-400"></i>
-                                    <span>ByteTrack Temporal Assignment</span>
+                                <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" style="color:#c89a6c"></i>
+                                    <span>Define a spatial boundary to count vehicle crossings</span>
                                 </li>
-                                <li class="flex items-start gap-3"><i
-                                        class="fa-solid fa-circle text-[5px] mt-1.5 text-slate-400"></i>
-                                    <span>Sub-millimeter Coordinate Logic</span>
+                                <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" style="color:#c89a6c"></i>
+                                    <span>Inference runs in the cloud &mdash; no on-site compute required</span>
                                 </li>
-                                <li class="flex items-start gap-3"><i
-                                        class="fa-solid fa-circle text-[5px] mt-1.5 text-slate-400"></i>
-                                    <span>Enterprise MIS Compliance</span>
+                                <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5" style="color:#c89a6c"></i>
+                                    <span>Download structured reports and annotated outputs</span>
                                 </li>
                             </ul>
                         </div>
@@ -1447,6 +1434,59 @@
 
         init();
     </script>
+    <!-- Privacy Modal -->
+    <div id="appModal-privacyModal" onclick="if(event.target===this)closeAppModal('privacyModal')" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:24px">
+        <div style="background:#0a0a0a;border:1px solid #2a2a2a;border-radius:14px;max-width:480px;width:100%;padding:32px;position:relative;max-height:80vh;overflow-y:auto">
+            <button onclick="closeAppModal('privacyModal')" style="position:absolute;top:16px;right:18px;background:none;border:none;color:#a89f97;font-size:18px;cursor:pointer">&times;</button>
+            <h2 style="color:#f0ece6;font-size:1.1rem;font-weight:700;margin-bottom:8px">Privacy Policy</h2>
+            <p style="color:#a89f97;font-size:11px;margin-bottom:20px">We keep this simple and honest.</p>
+            <ul style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc">
+                <li>Footage you submit is processed for detection and discarded immediately. Nothing is saved on our servers.</li>
+                <li>We do not use your footage to train models, sell it, or share it with anyone.</li>
+                <li>If you export an annotated video, it saves to your device only. We never receive a copy.</li>
+                <li>We do not use advertising cookies or behavioral tracking. We do not use cookies on this site.</li>
+                <li>You can request deletion of your form submission at any time: <strong style="color:#c89a6c">support@urbanflow.in</strong></li>
+            </ul>
+            <p style="color:#555;font-size:10px;margin-top:20px">&mdash; Team UrbanFlow</p>
+        </div>
+    </div>
+
+    <!-- Terms Modal -->
+    <div id="appModal-termsModal" onclick="if(event.target===this)closeAppModal('termsModal')" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:24px">
+        <div style="background:#0a0a0a;border:1px solid #2a2a2a;border-radius:14px;max-width:480px;width:100%;padding:32px;position:relative;max-height:80vh;overflow-y:auto">
+            <button onclick="closeAppModal('termsModal')" style="position:absolute;top:16px;right:18px;background:none;border:none;color:#a89f97;font-size:18px;cursor:pointer">&times;</button>
+            <h2 style="color:#f0ece6;font-size:1.1rem;font-weight:700;margin-bottom:8px">Terms &amp; Conditions</h2>
+            <p style="color:#a89f97;font-size:11px;margin-bottom:20px">By using this platform, you agree to the following terms.</p>
+            <p style="color:#c89a6c;font-size:11px;font-weight:700;margin-bottom:6px">You can:</p>
+            <ul style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc;margin-bottom:16px">
+                <li>Use the platform to evaluate UrbanFlow&rsquo;s traffic detection capabilities.</li>
+                <li>Export annotated video outputs to your own device for personal review.</li>
+                <li>Contact us with feedback, suggestions, or questions.</li>
+            </ul>
+            <p style="color:#c89a6c;font-size:11px;font-weight:700;margin-bottom:6px">You cannot:</p>
+            <ul style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc;margin-bottom:16px">
+                <li>Share, redistribute, or publicly post outputs without written permission.</li>
+                <li>Reverse-engineer the model or attempt to extract its architecture.</li>
+                <li>Use the platform for unlawful or harmful purposes.</li>
+            </ul>
+            <p style="color:#a89f97;font-size:11px">The platform is provided as-is for demonstration purposes only. Outputs are not intended for operational or safety-critical use.</p>
+            <p style="color:#555;font-size:10px;margin-top:16px">Questions: <strong style="color:#c89a6c">support@urbanflow.in</strong></p>
+        </div>
+    </div>
+
+    <script>
+        function openAppModal(id) {
+            const el = document.getElementById('appModal-' + id);
+            if (el) { el.style.display = 'flex'; document.body.style.overflow = 'hidden'; }
+        }
+        function closeAppModal(id) {
+            const el = document.getElementById('appModal-' + id);
+            if (el) { el.style.display = 'none'; document.body.style.overflow = ''; }
+        }
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') { closeAppModal('privacyModal'); closeAppModal('termsModal'); }
+        });
+    </script>
 </body>
 
 </html>