themes and fixes

frontend/settings.html

@@ -306,6 +306,12 @@
                         <option value="default" selected>Default</option>
                         <option value="vibrant">Vibrant</option>
                         <option value="corporate">Corporate</option>
+                        <option value="neon">Neon Night</option>
+                        <option value="earth">Earth Tones</option>
+                        <option value="ocean">Ocean Breeze</option>
+                        <option value="sunset">Sunset Glow</option>
+                        <option value="midnight">Midnight Deep</option>
+                        <option value="gold">Monochrome Gold</option>
                     </select>
                 </div>
 
@@ -339,8 +345,14 @@
         // =========== Palette definitions ===========
         const PALETTES = {
             default: { congestion: '#f97316', dominance: '#14b8a6', flow: '#3b82f6', label: 'Default' },
-            vibrant: { congestion: '#e11d48', dominance: '#8b5cf6', flow: '#06b6d4', label: 'Vibrant' },
-            corporate: { congestion: '#1e40af', dominance: '#0d9488', flow: '#475569', label: 'Corporate' }
+            vibrant: { congestion: '#ff2d55', dominance: '#a855f7', flow: '#22d3ee', label: 'Vibrant' },
+            corporate: { congestion: '#1e40af', dominance: '#0d9488', flow: '#475569', label: 'Corporate' },
+            neon: { congestion: '#f0abfc', dominance: '#22d3ee', flow: '#a855f7', label: 'Neon Night' },
+            earth: { congestion: '#84cc16', dominance: '#22c55e', flow: '#f59e0b', label: 'Earth Tones' },
+            ocean: { congestion: '#06b6d4', dominance: '#3b82f6', flow: '#14b8a6', label: 'Ocean Breeze' },
+            sunset: { congestion: '#f59e0b', dominance: '#f43f5e', flow: '#fb923c', label: 'Sunset Glow' },
+            midnight: { congestion: '#38bdf8', dominance: '#1d4ed8', flow: '#f8fafc', label: 'Midnight Deep' },
+            gold: { congestion: '#fbbf24', dominance: '#a8a29e', flow: '#f5f5f4', label: 'Monochrome Gold' }
         };
 
         // =========== Load run data from initial.html ===========

frontend/vehicles.html

@@ -15,55 +15,15 @@
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <style>
         :root {
-            --bg-primary: #000000;
-            --bg-secondary: #000000;
-            --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;
-            --chart-grid: #2a2a2a;
-        }
-
-        :root[data-theme="neon"] {
-            --bg-primary: #090014;
-            --bg-secondary: #090014;
-            --text-primary: #ffffff;
-            --text-secondary: #b399ff;
-            --border-color: #3b0086;
-            --sidebar-bg: #090014;
-            --card-bg: #12002b;
-            --input-bg: #1a0040;
-            --cocoa: #ff00ff;
-            --cocoa-l: #00ffff;
-            --cocoa-xl: #00ffff;
-            --chart-grid: #2a005e;
-        }
-
-        :root[data-theme="glass"] {
-            --bg-primary: #f8fafc;
-            --bg-secondary: #f8fafc;
-            --text-primary: #0f172a;
-            --text-secondary: #475569;
-            --border-color: #cbd5e1;
-            --sidebar-bg: #f8fafc;
-            --card-bg: #ffffff;
-            --input-bg: #f1f5f9;
-            --cocoa: #2563eb;
-            --cocoa-l: #3b82f6;
-            --cocoa-xl: #1d4ed8;
-            --chart-grid: #e2e8f0;
         }
 
         body {
             font-family: 'Montserrat', sans-serif;
-            background-color: var(--bg-primary);
-            color: var(--text-primary);
-            transition: background-color 0.3s ease;
+            background-color: #000000;
+            color: #f0ece6;
         }
 
         .mono-font {
@@ -142,18 +102,13 @@
         }
 
         .nav-item-inactive:hover {
-            color: var(--text-primary) !important;
+            color: #f0ece6 !important;
             background-color: #050505 !important;
         }
 
         /* Card Overrides */
         .bg-white {
-            background-color: var(--card-bg) !important;
-        }
-
-        /* Card Overrides */
-        .bg-white {
-            background-color: var(--card-bg) !important;
+            background-color: #0a0a0a !important;
         }
 
         .border-slate-200,
@@ -161,21 +116,21 @@
         .border-slate-50,
         .border-neutral-800,
         .border-neutral-900 {
-            border-color: var(--border-color) !important;
+            border-color: #2a2a2a !important;
         }
 
         .bg-slate-50\/50,
         .bg-slate-50,
         .bg-slate-900,
         .bg-neutral-900 {
-            background-color: var(--input-bg) !important;
+            background-color: #0c0c0c !important;
         }
 
         .text-slate-900,
         .text-slate-800,
         .text-slate-700,
         .text-neutral-900 {
-            color: var(--text-primary) !important;
+            color: #ffffff !important;
         }
 
         .text-slate-600,
@@ -183,7 +138,7 @@
         .text-slate-400,
         .text-neutral-500,
         .text-neutral-400 {
-            color: var(--text-secondary) !important;
+            color: #888888 !important;
         }
 
         .shadow-sm {
@@ -373,17 +328,17 @@
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
                 <i class="fa-solid fa-circle-info w-6"></i> <span class="font-medium">About</span>
             </a>
-            <a onclick="switchTab('stats')" id="nav-stats"
+            <a onclick="switchTab('overview')" id="nav-overview"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
-                <i class="fa-solid fa-desktop w-6"></i> <span class="font-medium">Stats</span>
+                <i class="fa-solid fa-desktop w-6"></i> <span class="font-medium">Overview</span>
             </a>
             <a onclick="switchTab('run-details')" id="nav-run-details"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
                 <i class="fa-solid fa-microchip w-6"></i> <span class="font-medium">Run</span>
             </a>
-            <a onclick="switchTab('intelligence')" id="nav-intelligence"
+            <a onclick="switchTab('reports')" id="nav-reports"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
-                <i class="fa-solid fa-file-lines w-6"></i> <span class="font-medium">Intelligence</span>
+                <i class="fa-solid fa-file-lines w-6"></i> <span class="font-medium">Reports</span>
             </a>
             <a onclick="switchTab('settings')" id="nav-settings"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
@@ -406,13 +361,6 @@
 
     <main class="flex-1 flex flex-col h-full min-w-0 p-4 gap-4">
 
-        <!-- TAB: About -->
-        <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto">
-            <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.
@@ -666,8 +614,8 @@
 
 
 
-        <!-- TAB: Intelligence -->
-        <div id="tab-intelligence" class="hidden flex-1 min-h-0 overflow-y-auto">
+        <!-- TAB: Reports -->
+        <div id="tab-reports" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div id="reports-pending" class="flex flex-col items-center justify-center h-full">
                 <i class="fa-solid fa-hourglass-half text-4xl text-slate-300 mb-4"></i>
                 <p class="text-sm font-medium text-slate-400">Reports will be available after processing completes.</p>
@@ -678,24 +626,6 @@
         <!-- TAB: Settings -->
         <div id="tab-settings" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div class="grid grid-cols-3 gap-6 w-full">
-                <!-- Output Format & Themes -->
-                <div class="col-span-1 flex flex-col gap-6">
-                    <!-- Themes Card -->
-                    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-                        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
-                            <h3 class="font-bold text-slate-800 text-sm">Dashboard Theme</h3>
-                            <p class="text-[10px] text-slate-400 mt-0.1 uppercase tracking-widest font-medium">Select aesthetic</p>
-                        </div>
-                        <div class="p-6">
-                            <select id="theme-selector" class="custom-select w-full" onchange="setTheme(this.value)">
-                                <option value="cocoa" selected>Cocoa & Slate (Classic)</option>
-                                <option value="neon">Neon Cyberpunk</option>
-                                <option value="glass">Arctic Glass (Light)</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-
                 <!-- Processing Parameters -->
                 <div class="col-span-2 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
                     <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
@@ -789,7 +719,45 @@
                     </div>
                 </div>
 
-
+                <!-- Display Preferences -->
+                <div
+                    class="col-span-1 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
+                    <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50">
+                        <h3 class="font-bold text-slate-800 text-sm">Display Preferences</h3>
+                    </div>
+                    <div class="px-5 py-4 flex-1 flex flex-col">
+                        <div class="s-row">
+                            <div>
+                                <div class="text-xs font-semibold text-slate-700">Chart Color Palette</div>
+                                <div class="text-[10px] text-slate-400">Color scheme for all charts</div>
+                            </div>
+                            <select class="custom-select" id="live-palette-select" onchange="applyPalette(this.value)">
+                                <option value="default" selected>Default</option>
+                                <option value="vibrant">Vibrant</option>
+                                <option value="corporate">Corporate</option>
+                                <option value="neon">Neon Night</option>
+                                <option value="earth">Earth Tones</option>
+                                <option value="ocean">Ocean Breeze</option>
+                                <option value="sunset">Sunset Glow</option>
+                                <option value="midnight">Midnight Deep</option>
+                                <option value="gold">Monochrome Gold</option>
+                            </select>
+                        </div>
+                        <div class="s-row hidden">
+                            <div>
+                                <div class="text-xs font-semibold text-slate-700">Interface Mode</div>
+                                <div class="text-[10px] text-slate-400">Locked to Professional Dark</div>
+                            </div>
+                            <div class="text-xs font-bold text-white px-3 py-1 bg-slate-800 rounded-full">Dark Mode Only
+                            </div>
+                        </div>
+                        <div class="mt-3">
+                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Palette
+                                Preview</div>
+                            <div class="flex gap-1.5" id="live-palette-preview"></div>
+                        </div>
+                    </div>
+                </div>
 
                 <!-- Start Button -->
                 <div class="col-span-3 pb-4" id="settings-start-wrap">
@@ -815,16 +783,6 @@
     </main>
 
     <script>
-        // =========== Theme Management ===========
-        function setTheme(theme) {
-            document.documentElement.setAttribute('data-theme', theme);
-            if (window.pieChart) window.pieChart.update();
-            if (window.domChart) window.domChart.update();
-            if (window.flowChart) window.flowChart.update();
-            if (window.congChart) window.congChart.update();
-            if (window.confChart) window.confChart.update();
-        }
-
         // =========== Rolling Counter ===========
         function animateValue(obj, start, end, duration) {
             let startTimestamp = null;
@@ -988,8 +946,14 @@
         // =========== Palettes ===========
         const PALETTES = {
             default: { congestion: '#f97316', congestionBg: 'rgba(249,115,22,0.08)', dominance: '#14b8a6', flow: '#3b82f6', doughIn: '#3b82f6', doughOut: '#f97316' },
-            vibrant: { congestion: '#e11d48', congestionBg: 'rgba(225,29,72,0.08)', dominance: '#8b5cf6', flow: '#06b6d4', doughIn: '#06b6d4', doughOut: '#e11d48' },
-            corporate: { congestion: '#1e40af', congestionBg: 'rgba(30,64,175,0.08)', dominance: '#0d9488', flow: '#475569', doughIn: '#475569', doughOut: '#1e40af' }
+            vibrant: { congestion: '#ff2d55', congestionBg: 'rgba(255,45,85,0.08)', dominance: '#a855f7', flow: '#22d3ee', doughIn: '#22d3ee', doughOut: '#ff2d55' },
+            corporate: { congestion: '#1e40af', congestionBg: 'rgba(30,64,175,0.08)', dominance: '#0d9488', flow: '#475569', doughIn: '#475569', doughOut: '#1e40af' },
+            neon: { congestion: '#f0abfc', congestionBg: 'rgba(240,171,252,0.08)', dominance: '#22d3ee', flow: '#a855f7', doughIn: '#a855f7', doughOut: '#f0abfc' },
+            earth: { congestion: '#84cc16', congestionBg: 'rgba(132,204,22,0.08)', dominance: '#22c55e', flow: '#f59e0b', doughIn: '#f59e0b', doughOut: '#84cc16' },
+            ocean: { congestion: '#06b6d4', congestionBg: 'rgba(6,182,212,0.08)', dominance: '#3b82f6', flow: '#14b8a6', doughIn: '#14b8a6', doughOut: '#06b6d4' },
+            sunset: { congestion: '#f59e0b', congestionBg: 'rgba(245,158,11,0.08)', dominance: '#f43f5e', flow: '#fb923c', doughIn: '#fb923c', doughOut: '#f59e0b' },
+            midnight: { congestion: '#38bdf8', congestionBg: 'rgba(56,189,248,0.08)', dominance: '#1d4ed8', flow: '#f8fafc', doughIn: '#f8fafc', doughOut: '#38bdf8' },
+            gold: { congestion: '#fbbf24', congestionBg: 'rgba(251,191,36,0.08)', dominance: '#a8a29e', flow: '#f5f5f4', doughIn: '#f5f5f4', doughOut: '#fbbf24' }
         };
 
         // Read settings from sessionStorage (set by settings.html)
@@ -1029,10 +993,22 @@
                 plugins: { legend: { display: false } },
                 scales: {
                     x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Frame Index', font: { size: 10, weight: '700' }, color: '#888888' } },
-                    y: { grid: { color: '#333333' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Active Vehicles', font: { size: 10, weight: '700' }, color: '#888888' } }
+                    y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Active Vehicles', font: { size: 10, weight: '700' }, color: '#888888' } }
                 },
                 animation: { duration: 0 }
-            }
+            },
+            plugins: [{
+                id: 'glow',
+                beforeDatasetsDraw: (chart) => {
+                    const ctx = chart.ctx;
+                    ctx.save();
+                    ctx.shadowBlur = 12;
+                    ctx.shadowColor = activePalette.congestion;
+                },
+                afterDatasetsDraw: (chart) => {
+                    chart.ctx.restore();
+                }
+            }]
         });
 
         const doughChart = new Chart(document.getElementById('doughnutChart').getContext('2d'), {
@@ -1053,7 +1029,19 @@
                     legend: { display: true, position: 'bottom', labels: { padding: 12, usePointStyle: true, pointStyle: 'circle', font: { size: 10, weight: '600' } } }
                 },
                 animation: { duration: 0 }
-            }
+            },
+            plugins: [{
+                id: 'glow',
+                beforeDatasetsDraw: (chart) => {
+                    const ctx = chart.ctx;
+                    ctx.save();
+                    ctx.shadowBlur = 12;
+                    ctx.shadowColor = activePalette.doughOut;
+                },
+                afterDatasetsDraw: (chart) => {
+                    chart.ctx.restore();
+                }
+            }]
         });
 
         const domChart = new Chart(document.getElementById('dominanceChart').getContext('2d'), {
@@ -1064,10 +1052,22 @@
                 plugins: { legend: { display: false } },
                 scales: {
                     x: { grid: { display: false }, ticks: { font: { size: 10, weight: '500' }, color: '#666666' } },
-                    y: { grid: { color: '#333333' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Total Vehicle Count', font: { size: 10, weight: '700' }, color: '#888888' } }
+                    y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Total Vehicle Count', font: { size: 10, weight: '700' }, color: '#888888' } }
                 },
                 animation: { duration: 0 }
-            }
+            },
+            plugins: [{
+                id: 'glow',
+                beforeDatasetsDraw: (chart) => {
+                    const ctx = chart.ctx;
+                    ctx.save();
+                    ctx.shadowBlur = 12;
+                    ctx.shadowColor = activePalette.dominance;
+                },
+                afterDatasetsDraw: (chart) => {
+                    chart.ctx.restore();
+                }
+            }]
         });
 
         const flowChart = new Chart(document.getElementById('flowChart').getContext('2d'), {
@@ -1078,10 +1078,22 @@
                 plugins: { legend: { display: false } },
                 scales: {
                     x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Time (seconds)', font: { size: 10, weight: '700' }, color: '#888888' } },
-                    y: { grid: { color: '#333333' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Vehicles Crossed', font: { size: 10, weight: '700' }, color: '#888888' } }
+                    y: { grid: { color: '#1a1a1a' }, beginAtZero: true, ticks: { font: { size: 10 }, color: '#666666' }, title: { display: true, text: 'Vehicles Crossed', font: { size: 10, weight: '700' }, color: '#888888' } }
                 },
                 animation: { duration: 0 }
-            }
+            },
+            plugins: [{
+                id: 'glow',
+                beforeDatasetsDraw: (chart) => {
+                    const ctx = chart.ctx;
+                    ctx.save();
+                    ctx.shadowBlur = 12;
+                    ctx.shadowColor = activePalette.flow;
+                },
+                afterDatasetsDraw: (chart) => {
+                    chart.ctx.restore();
+                }
+            }]
         });
 
         // =========== Update functions ===========