about section optimization

frontend/initial.html

@@ -185,12 +185,13 @@
                     <canvas id="drawing-canvas" class="absolute inset-0 w-full h-full"></canvas>
                 </div>
 
-                <div class="flex space-x-3">
-                    <button onclick="resetCanvas()"
-                        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>
+                <div class="flex flex-col items-center gap-3">
                     <button id="btn-proceed" onclick="startRun()"
-                        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>
+                        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:#c89a6c;color:#000">
+                        Continue &nbsp;&rarr;
+                    </button>
+                    <button onclick="resetCanvas()"
+                        class="text-[10px] font-bold uppercase tracking-widest text-slate-500 hover:text-white transition" style="background:none;border:none;">Reset Boundary</button>
                 </div>
             </div>
 

frontend/vehicles.html

@@ -363,7 +363,7 @@
 
         <!-- TAB: About -->
         <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto">
-            <div class="h-full bg-black border border-slate-800 rounded-xl p-8 shadow-2xl space-y-10">
+            <div class="bg-black border border-slate-800 rounded-xl p-12 shadow-2xl space-y-12 min-h-full flex flex-col justify-center">
                 <div class="text-center">
                     <p class="text-[13px] font-montserrat font-bold italic leading-relaxed max-w-3xl mx-auto"
                         style="color:#a89f97">
@@ -721,6 +721,15 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="s-row" data-param="smoothing">
+                            <div>
+                                <div class="text-xs font-semibold text-slate-700">Congestion Smoothing</div>
+                                <div class="text-[10px] text-slate-400">Alpha factor for rolling average</div>
+                            </div>
+                            <div class="s-stepper"><button onclick="stepParam('smoothing',-0.05)">&#8249;</button><span
+                                    class="s-val" id="sv-smoothing">0.25</span><button
+                                    onclick="stepParam('smoothing',0.05)">&#8250;</button></div>
+                        </div>
                     </div>
                 </div>
 
@@ -748,6 +757,15 @@
                                 <option value="gold">Monochrome Gold</option>
                             </select>
                         </div>
+                        <div class="s-row mt-4">
+                            <div>
+                                <div class="text-xs font-semibold text-slate-700">Auto-Download Report</div>
+                                <div class="text-[10px] text-slate-400">Save PDF automatically on completion</div>
+                            </div>
+                            <div class="toggle-track" id="sv-auto-download" onclick="toggleAutoDownload(this)">
+                                <div class="toggle-thumb"></div>
+                            </div>
+                        </div>
                         <div class="s-row hidden">
                             <div>
                                 <div class="text-xs font-semibold text-slate-700">Interface Mode</div>
@@ -765,18 +783,18 @@
                 </div>
 
                 <!-- Start Button -->
-                <div class="col-span-3 pb-4" id="settings-start-wrap">
+                <div class="col-span-3 pb-4 flex justify-center" id="settings-start-wrap">
                     <button id="btn-start-processing" onclick="startProcessingFromSettings()"
-                        class="w-full py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2 shadow-lg"
+                        class="w-fit px-16 py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2 shadow-lg hover:scale-105 active:scale-95"
                         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>
 
                 <!-- New Analysis Button (visible only after processing completes) -->
-                <div class="col-span-3 pb-4 hidden" id="new-analysis-wrap">
+                <div class="col-span-3 pb-4 hidden justify-center" id="new-analysis-wrap">
                     <button onclick="startNewAnalysis()"
-                        class="w-full py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2"
+                        class="w-fit px-16 py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2 shadow-lg hover:scale-105 active:scale-95"
                         style="background:var(--cocoa-l);color:#000">
                         <i class="fa-solid fa-rotate-left text-xs"></i>
                         <span>New Analysis</span>
@@ -1183,7 +1201,8 @@
             imgsz: { min: 640, max: 1280 },
             conf: { min: 0.10, max: 0.95 },
             iou: { min: 0.50, max: 0.95 },
-            stride: { min: 1, max: 10 }
+            stride: { min: 1, max: 10 },
+            smoothing: { min: 0.05, max: 0.95 }
         };
 
         function stepParam(param, delta) {
@@ -1193,7 +1212,7 @@
             let val = parseFloat(el.textContent);
             val = Math.round((val + delta) * 100) / 100;
             val = Math.max(limits.min, Math.min(limits.max, val));
-            el.textContent = (param === 'conf' || param === 'iou') ? val.toFixed(2) : val;
+            el.textContent = (param === 'conf' || param === 'iou' || param === 'smoothing') ? val.toFixed(2) : val;
         }
 
         function lockSettings() {
@@ -1589,6 +1608,10 @@
             }
         }
 
+        function toggleAutoDownload(el) {
+            el.classList.toggle('active');
+        }
+
         function toggleChip(id) {
             const chip = document.getElementById(`chip-${id}`);
             chip.classList.toggle('active');