words/css

frontend/initial.html

@@ -120,9 +120,8 @@
 
             <!-- STEP: Modules -->
             <div id="step-modules" class="w-full flex flex-col fade-in">
-                <h2 class="text-3xl font-bold mb-2 text-white text-center">UrbanFlow</h2>
-                <p class="text-[13px] font-medium text-neutral-500 mb-8 text-center">Select below analytical pipeline to
-                    proceed.</p>
+                <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">Select an analytical module to continue.</p>
 
                 <div class="flex justify-center w-full">
                     <div onclick="showStep('upload')"
@@ -145,18 +144,16 @@
                     class="text-neutral-500 hover:text-white 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-white text-center">Define Media</h2>
-                <p class="text-[13px] font-medium text-neutral-500 mb-8 text-center">Provide a target video footage. </p>
+                <h2 class="text-3xl font-bold mb-2 text-center" style="color:#f0ece6">Source Media</h2>
+                <p class="text-[13px] font-medium mb-8 text-center" style="color:#a89f97">Upload a video file to begin analysis.</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-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 text-neutral-700 group-hover:text-white transition mb-5"></i>
-                    <span class="font-semibold text-neutral-300 text-lg mb-2 text-center">Select or drop media
-                        file</span>
-                    <span class="text-[10px] font-bold uppercase tracking-widest text-neutral-600 text-center">MP4, AVI,
-                        MOV Accepted</span>
+                        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 file</span>
+                    <span class="text-[10px] font-bold uppercase tracking-widest text-center block" style="color:#a89f97">MP4 · AVI · MOV</span>
                 </div>
 
                 <div id="upload-progress-container" class="hidden mt-10 w-full">
@@ -173,9 +170,8 @@
 
             <!-- STEP: Draw -->
             <div id="step-draw" class="hidden w-full flex flex-col fade-in">
-                <h2 class="text-3xl font-bold mb-2 text-white text-center">Define Boundary</h2>
-                <p class="text-[11px] font-bold uppercase tracking-widest text-neutral-500 mb-6 text-center">Mark two
-                    points to define counting threshold</p>
+                <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">

frontend/settings.html

@@ -41,11 +41,20 @@
             }
         }
 
+        :root {
+            --cocoa: #8b5e3c;
+            --cocoa-l: #c89a6c;
+            --cocoa-xl: #d4b08a;
+            --t1: #f0ece6;
+            --t2: #a89f97;
+            --border: #2a2a2a;
+        }
+
         .bg-glow {
             position: absolute;
             width: 600px;
             height: 600px;
-            background: radial-gradient(circle, rgba(241, 245, 249, 1) 0%, rgba(255, 255, 255, 0) 70%);
+            background: radial-gradient(circle, rgba(139,94,60,0.08) 0%, rgba(0,0,0,0) 70%);
             top: 50%;
             left: 0;
             transform: translateY(-50%);
@@ -57,7 +66,7 @@
             width: 36px;
             height: 20px;
             border-radius: 10px;
-            background: #cbd5e1;
+            background: #2a2a2a;
             position: relative;
             cursor: pointer;
             transition: background 0.2s;
@@ -65,23 +74,24 @@
         }
 
         .toggle-track.active {
-            background: #0f172a;
+            background: var(--cocoa-l);
         }
 
         .toggle-thumb {
             width: 16px;
             height: 16px;
             border-radius: 50%;
-            background: #fff;
+            background: #555;
             position: absolute;
             top: 2px;
             left: 2px;
             transition: transform 0.2s;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+            box-shadow: 0 1px 3px rgba(0,0,0,0.4);
         }
 
         .toggle-track.active .toggle-thumb {
             transform: translateX(16px);
+            background: #000;
         }
 
         .toggle-track.locked {
@@ -92,16 +102,16 @@
 
         .custom-select {
             appearance: none;
-            background: #f8fafc;
-            border: 1px solid #e2e8f0;
+            background: #111;
+            border: 1px solid #2a2a2a;
             border-radius: 8px;
             padding: 6px 32px 6px 12px;
             font-size: 12px;
             font-weight: 600;
-            color: #1e293b;
+            color: var(--t1);
             cursor: pointer;
             outline: none;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a89f97'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: right 10px center;
             background-size: 14px;
@@ -109,11 +119,11 @@
         }
 
         .custom-select:hover {
-            border-color: #94a3b8;
+            border-color: var(--cocoa);
         }
 
         .custom-select:focus {
-            border-color: #0f172a;
+            border-color: var(--cocoa-l);
         }
 
         .custom-select:disabled {
@@ -131,16 +141,16 @@
         }
 
         .setting-card {
-            background: #fff;
-            border: 1px solid #e2e8f0;
+            background: #0a0a0a;
+            border: 1px solid #2a2a2a;
             border-radius: 16px;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+            box-shadow: 0 4px 24px rgba(0,0,0,0.6);
             overflow: hidden;
         }
 
         .setting-card-header {
             padding: 16px 24px;
-            border-bottom: 1px solid #f1f5f9;
+            border-bottom: 1px solid #1a1a1a;
         }
 
         .setting-row {
@@ -148,7 +158,7 @@
             align-items: center;
             justify-content: space-between;
             padding: 14px 24px;
-            border-bottom: 1px solid #f8fafc;
+            border-bottom: 1px solid #111;
         }
 
         .setting-row:last-child {
@@ -158,18 +168,19 @@
 </head>
 
 <body
-    class="bg-white text-slate-900 min-h-screen w-full overflow-x-hidden flex flex-col items-center selection:bg-black selection:text-white relative z-0">
+    class="min-h-screen w-full overflow-x-hidden flex flex-col items-center relative z-0"
+    style="background:#000;color:#f0ece6;font-family:'Montserrat',sans-serif">
 
     <div class="bg-glow"></div>
 
     <header class="mt-6 flex flex-col items-center flex-shrink-0 w-full z-10">
         <img src="uf_rf.png" alt="UrbanFlow Logo" class="h-28 w-auto object-contain mb-2">
         <div class="flex items-center space-x-3">
-            <span class="w-12 h-[1px] bg-slate-200"></span>
-            <p class="font-montserrat font-bold tracking-[0.25em] uppercase text-[10px] text-slate-400 text-center">
-                Configure & Launch
+            <span class="w-12 h-[1px]" style="background:#2a2a2a"></span>
+            <p class="font-montserrat font-bold tracking-[0.25em] uppercase text-[10px] text-center" style="color:#a89f97">
+                Inference Configuration
             </p>
-            <span class="w-12 h-[1px] bg-slate-200"></span>
+            <span class="w-12 h-[1px]" style="background:#2a2a2a"></span>
         </div>
     </header>
 
@@ -180,27 +191,23 @@
             <!-- Processing Parameters (locked once started) -->
             <div class="setting-card" id="card-processing">
                 <div class="setting-card-header">
-                    <h3 class="font-montserrat font-bold text-slate-900 text-base">Processing Parameters</h3>
-                    <p class="text-[10px] font-montserrat font-medium text-slate-400 mt-1 uppercase tracking-widest">
-                        Auto-configured · adjustable before start</p>
+                    <h3 class="font-montserrat font-bold text-base" style="color:#f0ece6">Processing Parameters</h3>
+                    <p class="text-[10px] font-montserrat font-medium mt-1 uppercase tracking-widest" style="color:#a89f97">
+                        Auto-configured &middot; adjustable before start</p>
                 </div>
 
                 <!-- Image Size -->
                 <div class="setting-row">
                     <div>
-                        <div class="text-xs font-semibold text-slate-700">Image Size</div>
-                        <div class="text-[10px] text-slate-400 mt-0.5">Model input resolution</div>
+                        <div class="text-xs font-semibold" style="color:#f0ece6">Image Size</div>
+                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Model input resolution</div>
                     </div>
-                    <div
-                        class="flex items-center space-x-3 bg-slate-50 px-3 py-1.5 rounded-full border border-slate-200 shadow-sm">
-                        <button class="stepper-btn text-slate-400 hover:text-black transition p-1"
-                            onclick="adjust('imgsz',-1)">
+                    <div class="flex items-center space-x-3 px-3 py-1.5 rounded-full" style="background:#111;border:1px solid #2a2a2a">
+                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('imgsz',-1)">
                             <i class="fa-solid fa-chevron-left text-[10px]"></i>
                         </button>
-                        <span class="mono-font font-bold w-12 text-center text-slate-900 text-sm"
-                            id="val-imgsz">640</span>
-                        <button class="stepper-btn text-slate-400 hover:text-black transition p-1"
-                            onclick="adjust('imgsz',1)">
+                        <span class="mono-font font-bold w-12 text-center text-sm" style="color:#f0ece6" id="val-imgsz">640</span>
+                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('imgsz',1)">
                             <i class="fa-solid fa-chevron-right text-[10px]"></i>
                         </button>
                     </div>
@@ -209,19 +216,15 @@
                 <!-- Confidence -->
                 <div class="setting-row">
                     <div>
-                        <div class="text-xs font-semibold text-slate-700">Confidence</div>
-                        <div class="text-[10px] text-slate-400 mt-0.5">Minimum detection threshold</div>
+                        <div class="text-xs font-semibold" style="color:#f0ece6">Confidence</div>
+                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Minimum detection threshold</div>
                     </div>
-                    <div
-                        class="flex items-center space-x-3 bg-slate-50 px-3 py-1.5 rounded-full border border-slate-200 shadow-sm">
-                        <button class="stepper-btn text-slate-400 hover:text-black transition p-1"
-                            onclick="adjust('conf',-1)">
+                    <div class="flex items-center space-x-3 px-3 py-1.5 rounded-full" style="background:#111;border:1px solid #2a2a2a">
+                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('conf',-1)">
                             <i class="fa-solid fa-chevron-left text-[10px]"></i>
                         </button>
-                        <span class="mono-font font-bold w-12 text-center text-slate-900 text-sm"
-                            id="val-conf">0.12</span>
-                        <button class="stepper-btn text-slate-400 hover:text-black transition p-1"
-                            onclick="adjust('conf',1)">
+                        <span class="mono-font font-bold w-12 text-center text-sm" style="color:#f0ece6" id="val-conf">0.12</span>
+                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('conf',1)">
                             <i class="fa-solid fa-chevron-right text-[10px]"></i>
                         </button>
                     </div>
@@ -230,19 +233,15 @@
                 <!-- IoU -->
                 <div class="setting-row">
                     <div>
-                        <div class="text-xs font-semibold text-slate-700">IoU Threshold</div>
-                        <div class="text-[10px] text-slate-400 mt-0.5">Non-max suppression overlap</div>
+                        <div class="text-xs font-semibold" style="color:#f0ece6">IoU Threshold</div>
+                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Non-max suppression overlap</div>
                     </div>
-                    <div
-                        class="flex items-center space-x-3 bg-slate-50 px-3 py-1.5 rounded-full border border-slate-200 shadow-sm">
-                        <button class="stepper-btn text-slate-400 hover:text-black transition p-1"
-                            onclick="adjust('iou',-1)">
+                    <div class="flex items-center space-x-3 px-3 py-1.5 rounded-full" style="background:#111;border:1px solid #2a2a2a">
+                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('iou',-1)">
                             <i class="fa-solid fa-chevron-left text-[10px]"></i>
                         </button>
-                        <span class="mono-font font-bold w-12 text-center text-slate-900 text-sm"
-                            id="val-iou">0.60</span>
-                        <button class="stepper-btn text-slate-400 hover:text-black transition p-1"
-                            onclick="adjust('iou',1)">
+                        <span class="mono-font font-bold w-12 text-center text-sm" style="color:#f0ece6" id="val-iou">0.60</span>
+                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('iou',1)">
                             <i class="fa-solid fa-chevron-right text-[10px]"></i>
                         </button>
                     </div>
@@ -251,19 +250,15 @@
                 <!-- Frame Stride -->
                 <div class="setting-row">
                     <div>
-                        <div class="text-xs font-semibold text-slate-700">Frame Stride</div>
-                        <div class="text-[10px] text-slate-400 mt-0.5">Frames skipped between detections</div>
+                        <div class="text-xs font-semibold" style="color:#f0ece6">Frame Stride</div>
+                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Frames skipped between detections</div>
                     </div>
-                    <div
-                        class="flex items-center space-x-3 bg-slate-50 px-3 py-1.5 rounded-full border border-slate-200 shadow-sm">
-                        <button class="stepper-btn text-slate-400 hover:text-black transition p-1"
-                            onclick="adjust('detect_stride',-1)">
+                    <div class="flex items-center space-x-3 px-3 py-1.5 rounded-full" style="background:#111;border:1px solid #2a2a2a">
+                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('detect_stride',-1)">
                             <i class="fa-solid fa-chevron-left text-[10px]"></i>
                         </button>
-                        <span class="mono-font font-bold w-12 text-center text-slate-900 text-sm"
-                            id="val-detect_stride">3</span>
-                        <button class="stepper-btn text-slate-400 hover:text-black transition p-1"
-                            onclick="adjust('detect_stride',1)">
+                        <span class="mono-font font-bold w-12 text-center text-sm" style="color:#f0ece6" id="val-detect_stride">3</span>
+                        <button class="stepper-btn p-1 transition" style="color:#a89f97" onclick="adjust('detect_stride',1)">
                             <i class="fa-solid fa-chevron-right text-[10px]"></i>
                         </button>
                     </div>
@@ -272,8 +267,8 @@
                 <!-- Report Format -->
                 <div class="setting-row">
                     <div>
-                        <div class="text-xs font-semibold text-slate-700">Report Format</div>
-                        <div class="text-[10px] text-slate-400 mt-0.5">Export file type for report charts</div>
+                        <div class="text-xs font-semibold" style="color:#f0ece6">Report Format</div>
+                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Export file type for report charts</div>
                     </div>
                     <select class="custom-select" id="sel-report-format">
                         <option value="png" selected>PNG Image</option>
@@ -284,8 +279,8 @@
                 <!-- Annotated Video -->
                 <div class="setting-row">
                     <div>
-                        <div class="text-xs font-semibold text-slate-700">Export Annotated Video</div>
-                        <div class="text-[10px] text-slate-400 mt-0.5">Bounding boxes + track IDs + counting line</div>
+                        <div class="text-xs font-semibold" style="color:#f0ece6">Export Annotated Video</div>
+                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Bounding boxes · track IDs · spatial boundary</div>
                     </div>
                     <div class="toggle-track" id="tog-annotated" onclick="toggleSwitch(this)">
                         <div class="toggle-thumb"></div>
@@ -296,16 +291,16 @@
             <!-- Display Preferences (editable anytime) -->
             <div class="setting-card" id="card-display">
                 <div class="setting-card-header">
-                    <h3 class="font-montserrat font-bold text-slate-900 text-base">Display Preferences</h3>
-                    <p class="text-[10px] font-montserrat font-medium text-slate-400 mt-1 uppercase tracking-widest">
-                        Editable anytime · applies to live charts</p>
+                    <h3 class="font-montserrat font-bold text-base" style="color:#f0ece6">Display Preferences</h3>
+                    <p class="text-[10px] font-montserrat font-medium mt-1 uppercase tracking-widest" style="color:#a89f97">
+                        Editable anytime &middot; applies to live charts</p>
                 </div>
 
                 <!-- Chart Color Palette -->
                 <div class="setting-row">
                     <div>
-                        <div class="text-xs font-semibold text-slate-700">Chart Color Palette</div>
-                        <div class="text-[10px] text-slate-400 mt-0.5">Color scheme for all dashboard charts</div>
+                        <div class="text-xs font-semibold" style="color:#f0ece6">Chart Color Palette</div>
+                        <div class="text-[10px] mt-0.5" style="color:#a89f97">Color scheme for all dashboard charts</div>
                     </div>
                     <select class="custom-select" id="sel-palette">
                         <option value="default" selected>Default</option>
@@ -316,8 +311,7 @@
 
                 <!-- Palette Preview -->
                 <div class="px-6 py-4">
-                    <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">Palette Preview
-                    </div>
+                    <div class="text-[10px] font-bold uppercase tracking-widest mb-3" style="color:#a89f97">Palette Preview</div>
                     <div class="flex gap-2" id="palette-preview"></div>
                 </div>
             </div>
@@ -326,8 +320,9 @@
 
         <!-- Start Button -->
         <button id="btn-start" onclick="startProcessing()"
-            class="w-full py-4 bg-black text-white rounded-full font-montserrat font-semibold hover:bg-slate-800 transition-all text-lg flex justify-center items-center shadow-lg">
-            Start Processing <i class="fa-solid fa-arrow-right ml-3 text-sm"></i>
+            class="w-full py-4 rounded-full font-montserrat font-semibold transition-all text-sm flex justify-center items-center shadow-lg"
+            style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)">
+            Initiate Processing <i class="fa-solid fa-arrow-right ml-3 text-sm"></i>
         </button>
 
     </main>