color and styling

frontend/initial.html

@@ -25,10 +25,19 @@
         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">
     <style>
+        :root {
+            --cocoa: #8b5e3c;
+            --cocoa-l: #c89a6c;
+            --cocoa-xl: #d4b08a;
+            --t1: #f0ece6;
+            --t2: #a89f97;
+            --border: #2a2a2a;
+        }
+
         body {
             font-family: 'Montserrat', sans-serif;
             background-color: #000000;
-            color: #ffffff;
+            color: var(--t1);
         }
 
         .fade-in {
@@ -49,22 +58,27 @@
 
         /* Executive Overrides */
         .traffic-dynamics-card {
-            background-color: #000000 !important;
-            border: 2px solid #ffffff !important;
+            background-color: #0a0a0a !important;
+            border: 2px solid var(--cocoa) !important;
+        }
+
+        .traffic-dynamics-card:hover {
+            border-color: var(--cocoa-l) !important;
         }
 
         #dropzone {
             transition: all 0.2s ease;
+            border-color: #2a2a2a;
         }
 
         #dropzone:hover {
-            border-color: #ffffff !important;
+            border-color: var(--cocoa-l) !important;
             background-color: #0a0a0a !important;
         }
 
         .core-badge {
-            background-color: #888888 !important;
-            color: #000000 !important;
+            background-color: var(--cocoa) !important;
+            color: var(--t1) !important;
         }
     </style>
 </head>
@@ -80,23 +94,23 @@
         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] text-white tracking-tight">
+            <h1 class="text-5xl xl:text-[4.5rem] font-extrabold mb-4 leading-[1.1] tracking-tight" style="color:#f0ece6">
                 Automated <br>Vision Intelligence
             </h1>
-            <p class="font-bold mb-8 text-sm uppercase tracking-[0.2em] text-neutral-500 flex items-center">
+            <p class="font-bold mb-8 text-sm uppercase tracking-[0.2em] flex items-center" style="color:#a89f97">
                 <span class="core-badge px-3 py-1 rounded-full text-[10px] mr-3">v1.0 CORE</span>
                 Powered by Deep Learning 
             </p>
-            <ul class="space-y-4 xl:space-y-5 text-base xl:text-lg font-medium text-neutral-400">
-                <li class="flex items-center"><i class="fa-solid fa-check text-white mr-5 text-xl"></i> Real-time
+            <ul class="space-y-4 xl:space-y-5 text-base xl:text-lg font-medium" style="color:#a89f97">
+                <li class="flex items-center"><i class="fa-solid fa-check mr-5 text-xl" style="color:#c89a6c"></i> Real-time
                     spatial detection and tracking</li>
-                <li class="flex items-center"><i class="fa-solid fa-check text-white mr-5 text-xl"></i> Multi-class
+                <li class="flex items-center"><i class="fa-solid fa-check mr-5 text-xl" style="color:#c89a6c"></i> Multi-class
                     object categorization</li>
-                <li class="flex items-center"><i class="fa-solid fa-check text-white mr-5 text-xl"></i> Bidirectional
+                <li class="flex items-center"><i class="fa-solid fa-check mr-5 text-xl" style="color:#c89a6c"></i> Bidirectional
                     movement analysis</li>
-                <li class="flex items-center"><i class="fa-solid fa-check text-white mr-5 text-xl"></i> High-performance
+                <li class="flex items-center"><i class="fa-solid fa-check mr-5 text-xl" style="color:#c89a6c"></i> High-performance
                     multi-object tracking</li>
-                <li class="flex items-center"><i class="fa-solid fa-check text-white mr-5 text-xl"></i> Intelligent
+                <li class="flex items-center"><i class="fa-solid fa-check mr-5 text-xl" style="color:#c89a6c"></i> Intelligent
                     processing optimization</li>
             </ul>
         </div>
@@ -112,13 +126,14 @@
 
                 <div class="flex justify-center w-full">
                     <div onclick="showStep('upload')"
-                        class="group relative border-2 border-white rounded-[2rem] p-8 cursor-pointer hover:-translate-y-1 transition-all duration-300 text-center max-w-sm w-full traffic-dynamics-card">
+                        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 bg-white text-black text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
+                            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">
                             V1.0</div>
-                        <i class="fa-solid fa-car-side text-4xl text-white mb-4 block mx-auto"></i>
-                        <h3 class="font-bold text-lg mb-2 leading-tight text-white">Traffic <br>Dynamics</h3>
-                        <p class="text-[10px] text-neutral-500 font-medium leading-relaxed">Detect, track, and analyze
+                        <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">Detect, track, and analyze
                             vehicles in real-world environments.</p>
                     </div>
                 </div>
@@ -145,13 +160,13 @@
                 </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 text-white">
+                    <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 bg-[#666666] w-0 transition-all duration-75 ease-linear rounded-full"></div>
+                            class="h-full w-0 transition-all duration-75 ease-linear rounded-full" style="background:#c89a6c"></div>
                     </div>
                 </div>
             </div>
@@ -176,9 +191,9 @@
 
                 <div class="flex space-x-3">
                     <button onclick="resetCanvas()"
-                        class="w-1/3 py-3.5 bg-neutral-900 border border-neutral-800 text-white rounded-full font-bold hover:bg-neutral-800 transition-all text-sm">Reset</button>
+                        class="w-1/3 py-3.5 rounded-full font-bold transition-all text-sm" style="background:#111;border:1px solid #2a2a2a;color:#a89f97">Reset</button>
                     <button id="btn-proceed" onclick="startRun()"
-                        class="w-2/3 py-3.5 bg-white text-black rounded-full font-bold transition-all text-center text-sm">Continue
+                        class="w-2/3 py-3.5 rounded-full font-bold transition-all text-center text-sm" style="background:#c89a6c;color:#000">Continue
                         &nbsp;&rarr;</button>
                 </div>
             </div>
@@ -330,9 +345,9 @@
         function drawDot(x, y) {
             ctx.beginPath();
             ctx.arc(x, y, 5, 0, Math.PI * 2);
-            ctx.fillStyle = '#10b981';
+            ctx.fillStyle = '#c89a6c';
             ctx.fill();
-            ctx.strokeStyle = '#ffffff';
+            ctx.strokeStyle = '#f0ece6';
             ctx.lineWidth = 2;
             ctx.stroke();
         }
@@ -341,7 +356,7 @@
             ctx.beginPath();
             ctx.moveTo(points[0].cx, points[0].cy);
             ctx.lineTo(points[1].cx, points[1].cy);
-            ctx.strokeStyle = '#10b981';
+            ctx.strokeStyle = '#c89a6c';
             ctx.lineWidth = 3;
             ctx.stroke();
         }

frontend/vehicles.html

@@ -17,12 +17,15 @@
         :root {
             --bg-primary: #000000;
             --bg-secondary: #000000;
-            --text-primary: #ffffff;
-            --text-secondary: #aaaaaa;
-            --border-color: #1a1a1a;
+            --text-primary: #f0ece6;
+            --text-secondary: #a89f97;
+            --border-color: #2a2a2a;
             --sidebar-bg: #000000;
             --card-bg: #0a0a0a;
             --input-bg: #111111;
+            --cocoa: #8b5e3c;
+            --cocoa-l: #c89a6c;
+            --cocoa-xl: #d4b08a;
         }
 
         body {
@@ -99,16 +102,16 @@
         /* Nav states */
         .nav-item-active {
             background-color: #111111 !important;
-            color: #ffffff !important;
-            border-left: 2px solid #ffffff !important;
+            color: var(--cocoa-xl) !important;
+            border-left: 2px solid var(--cocoa-l) !important;
         }
 
         .nav-item-inactive {
-            color: #666666 !important;
+            color: #555555 !important;
         }
 
         .nav-item-inactive:hover {
-            color: #ffffff !important;
+            color: var(--text-primary) !important;
             background-color: #050505 !important;
         }
 
@@ -167,14 +170,14 @@
         }
 
         .toggle-track.active {
-            background: #ffffff;
+            background: var(--cocoa-l);
         }
 
         .toggle-thumb {
             width: 14px;
             height: 14px;
             border-radius: 50%;
-            background: #888888;
+            background: #555555;
             position: absolute;
             top: 2px;
             left: 2px;
@@ -246,7 +249,7 @@
         }
 
         #proc-bar {
-            background-color: #666666 !important;
+            background-color: var(--cocoa-l) !important;
         }
 
         #proc-label {
@@ -291,9 +294,9 @@
         }
 
         .chip.active {
-            background: #ffffff;
+            background: var(--cocoa-l);
             color: #000000;
-            border-color: #ffffff;
+            border-color: var(--cocoa-l);
         }
 
         .chip.frozen {
@@ -309,7 +312,7 @@
         }
 
         .chip.active:hover {
-            background: #eeeeee;
+            background: var(--cocoa-xl);
         }
 
         .chip i {
@@ -749,7 +752,8 @@
                 <!-- Start Button -->
                 <div class="col-span-3 pb-4" id="settings-start-wrap">
                     <button id="btn-start-processing" onclick="startProcessingFromSettings()"
-                        class="w-full py-4 bg-[#0a0a0a] border border-[#222222] text-white font-bold text-sm rounded-full hover:bg-[#111111] active:scale-[0.99] transition flex items-center justify-center gap-2 shadow-lg">
+                        class="w-full py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2 shadow-lg"
+                        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>
@@ -757,7 +761,8 @@
                 <!-- New Analysis Button (visible only after processing completes) -->
                 <div class="col-span-3 pb-4 hidden" id="new-analysis-wrap">
                     <button onclick="startNewAnalysis()"
-                        class="w-full py-4 bg-[#e8e8e8] text-black font-bold text-sm rounded-full hover:bg-[#d4d4d4] active:scale-[0.99] transition flex items-center justify-center gap-2">
+                        class="w-full py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2"
+                        style="background:var(--cocoa-l);color:#000">
                         <i class="fa-solid fa-rotate-left text-xs"></i>
                         <span>New Analysis</span>
                     </button>