DriveIQ — Vehicle Dashboard

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_213":214,"_215":216},"routes/_app.x.$handle.$name",{"_104":103,"_38":51,"_112":94,"_33":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_26":-5,"_124":-5,"_125":-5,"_126":31,"_127":128,"_129":66,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":61,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":31},"version",22,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","e4932377-1720-44b0-9464-2b1bf8497c71","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":34,"_39":40,"_41":42},"deleted",false,"deletedHere","path","script.js","latestPath","fileId","746f3b94-aba3-11f1-aeea-1607ee4eb77e","name","fileType","script","content","/* ============================================================\n DriveIQ — Vehicle Dashboard (client-side interactivity)\n Note: All vehicle metrics are SIMULATED demo data for the\n prototype. They do not read from a real vehicle.\n ============================================================ */\n\n/* ---------- 1. Live clock ---------- */\nconst clockEl = document.getElementById(\"clock\");\nfunction updateClock() {\n const now = new Date();\n const hh = String(now.getHours()).padStart(2, \"0\");\n const mm = String(now.getMinutes()).padStart(2, \"0\");\n const ss = String(now.getSeconds()).padStart(2, \"0\");\n clockEl.textContent = `${hh}:${mm}:${ss}`;\n}\nsetInterval(updateClock, 1000);\nupdateClock();\n\n/* ---------- 2. Settings / themes ---------- */\nconst THEME_KEY = \"driveiq-theme\";\nconst body = document.body;\nconst settingsModal = document.getElementById(\"settingsModal\");\nconst settingsView = document.getElementById(\"settingsView\");\nconst themeView = document.getElementById(\"themeView\");\nconst themeOptions = document.querySelectorAll(\".theme-option\");\nconst applyBtn = document.getElementById(\"applySettings\");\nconst cancelBtn = document.getElementById(\"cancelSettings\");\n\nconst VALID_THEMES = [\"red\", \"blue\", \"green\", \"dark\", \"white\"];\n\n// applyTheme only PREVIEWS the theme on the dashboard — it never saves.\nfunction applyTheme(theme) {\n if (!VALID_THEMES.includes(theme)) theme = \"blue\";\n body.setAttribute(\"data-theme\", theme);\n themeOptions.forEach((btn) => {\n const isCurrent = btn.dataset.theme === theme;\n btn.classList.toggle(\"current\", isCurrent);\n btn.setAttribute(\"aria-pressed\", isCurrent ? \"true\" : \"false\");\n });\n}\n\nfunction saveTheme(theme) {\n try {\n localStorage.setItem(THEME_KEY, theme);\n } catch (_) { /* storage may be unavailable */ }\n}\n\n// Restore saved theme on load\nlet appliedTheme = \"blue\"; // theme currently saved + active on the dashboard\ntry {\n appliedTheme = localStorage.getItem(THEME_KEY) || \"blue\";\n} catch (_) { /* ignore */ }\napplyTheme(appliedTheme);\n\nlet pendingTheme = \"blue\"; // theme previewed inside the modal (not yet saved)\nlet modalView = \"settings\"; // which sub-view is showing: \"settings\" or \"theme\"\nlet suppressPopstate = false; // true while a manual history.back() is in flight\n\nfunction setView(view) {\n modalView = view;\n settingsView.hidden = view !== \"settings\";\n themeView.hidden = view !== \"theme\";\n}\n\n// Dashboard -> Settings\nfunction openSettings() {\n settingsModal.hidden = false;\n document.body.style.overflow = \"hidden\";\n pendingTheme = appliedTheme; // start from the saved theme\n applyTheme(pendingTheme); // preview only — nothing saved yet\n setView(\"settings\");\n history.pushState({ view: \"settings\" }, \"\");\n}\n\n// Settings -> Theme Settings\nfunction openTheme() {\n setView(\"theme\");\n history.pushState({ view: \"theme\" }, \"\");\n}\n\n// Close the whole modal (returns to the dashboard)\nfunction closeSettings() {\n if (settingsModal.hidden) return;\n settingsModal.hidden = true;\n document.body.style.overflow = \"\";\n applyTheme(appliedTheme); // restore the previously applied theme\n setView(\"settings\");\n history.back(); // remove the modal entry from history\n}\n\n// Go back one level: Theme Settings -> Settings, or Settings -> Dashboard\nfunction navigateBack() {\n if (settingsModal.hidden) return;\n if (modalView === \"theme\") {\n suppressPopstate = true;\n setView(\"settings\");\n history.back(); // pop the theme entry, stay in the modal\n } else {\n closeSettings(); // pop the settings entry, close the modal\n }\n}\n\n// Android back button / browser back: Theme -> Settings -> Dashboard\naddEventListener(\"popstate\", () => {\n if (suppressPopstate) { suppressPopstate = false; return; }\n if (settingsModal.hidden) return;\n if (modalView === \"theme\") {\n setView(\"settings\"); // back from Theme to Settings\n } else {\n settingsModal.hidden = true; // back from Settings to Dashboard\n document.body.style.overflow = \"\";\n applyTheme(appliedTheme);\n setView(\"settings\");\n }\n});\n\ndocument.getElementById(\"settingsBtn\").addEventListener(\"click\", openSettings);\ndocument.getElementById(\"themeOption\").addEventListener(\"click\", openTheme);\ndocument.getElementById(\"closeSettings\").addEventListener(\"click\", navigateBack);\ndocument.getElementById(\"closeTheme\").addEventListener(\"click\", navigateBack);\ncancelBtn.addEventListener(\"click\", navigateBack); // Cancel behaves like X\ndocument.getElementById(\"settingsModal\").addEventListener(\"click\", (e) => {\n if (e.target === settingsModal) navigateBack(); // dismiss without saving\n});\n\n// Selecting a theme only PREVIEWS it — nothing is written until Apply.\nthemeOptions.forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n pendingTheme = btn.dataset.theme;\n applyTheme(pendingTheme);\n });\n});\n\n// Apply: commit the previewed theme.\napplyBtn.addEventListener(\"click\", () => {\n appliedTheme = pendingTheme;\n saveTheme(appliedTheme);\n closeSettings();\n});\n\ndocument.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\" && !settingsModal.hidden) navigateBack();\n});\n\n/* ---------- 3. Quick actions ---------- */\ndocument.querySelectorAll(\".quick-btn\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n const target = btn.dataset.target;\n if (target === \"settings\") {\n openSettings();\n return;\n }\n const el = document.getElementById(target);\n if (el) el.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n });\n});\n\n/* ---------- 4. Simulated speed & gauge ---------- */\nconst GAUGE_MAX = 220; // max on the gauge scale (km/h)\nconst ARC_LEN = Math.PI * 80; // semicircle path length (r=80)\nconst gaugeArc = document.getElementById(\"gaugeArc\");\nconst gaugeNeedle = document.getElementById(\"gaugeNeedle\");\nconst speedValueEl = document.getElementById(\"speedValue\");\nconst limitValueEl = document.getElementById(\"limitValue\");\nconst avgValueEl = document.getElementById(\"avgValue\");\nconst maxValueEl = document.getElementById(\"maxValue\");\n\ngaugeArc.style.strokeDasharray = String(ARC_LEN);\n\nlet currentSpeed = 0;\nlet targetSpeed = 0;\nconst speedHistory = [0];\nlet maxSpeed = 0;\nconst speedLimit = 50;\n\n// Simulated driving profile: drive, cruise, brake, coast\nfunction nextTargetSpeed() {\n const r = Math.random();\n const fuelSaveOn = fuelToggle.classList.contains(\"active\");\n let t;\n if (r < 0.18) t = 0; // stop at a light\n else if (r < 0.34) t = Math.round(30 + Math.random() * 15); // city\n else if (r < 0.62) t = Math.round(50 + Math.random() * 20); // main roads\n else if (r < 0.84) t = Math.round(72 + Math.random() * 28); // highway\n else t = Math.round(90 + Math.random() * 30); // fast lane\n return fuelSaveOn ? Math.min(t, 70) : t; // fuel save caps speed\n}\nsetInterval(() => { targetSpeed = nextTargetSpeed(); }, 3000);\n\nfunction updateSimulatedSpeed() {\n // Smoothly ease toward target\n if (currentSpeed < targetSpeed) currentSpeed = Math.min(currentSpeed + 3, targetSpeed);\n else if (currentSpeed > targetSpeed) currentSpeed = Math.max(currentSpeed - 3, targetSpeed);\n\n const value = Math.round(currentSpeed);\n speedValueEl.textContent = String(value);\n gaugeArc.style.strokeDashoffset = String(ARC_LEN * (1 - value / GAUGE_MAX));\n const needleDeg = -90 + (value / GAUGE_MAX) * 180;\n gaugeNeedle.style.transform = `rotate(${needleDeg}deg)`;\n\n speedHistory.push(value);\n if (speedHistory.length > 60) speedHistory.shift();\n maxSpeed = Math.max(maxSpeed, value);\n\n const avg = Math.round(speedHistory.reduce((a, b) => a + b, 0) / speedHistory.length);\n avgValueEl.textContent = String(avg || 0);\n maxValueEl.textContent = String(maxSpeed);\n limitValueEl.textContent = String(speedLimit);\n\n // Trip accumulator (demo)\n tripDistance += value * (1 / 3600);\n updateTrip();\n}\nsetInterval(updateSimulatedSpeed, 500);\n\n/* ---------- 5. Vehicle status (simulated) ---------- */\nconst fs = {\n fuel: 68,\n battery: 91,\n temp: 82,\n rpm: 1850,\n oil: 92, // health %\n tire: 2.4, // bar\n};\nconst fuelVal = document.getElementById(\"fsFuel\");\nconst fuelBar = document.getElementById(\"barFuel\");\nconst battVal = document.getElementById(\"fsBattery\");\nconst battBar = document.getElementById(\"barBattery\");\nconst tempVal = document.getElementById(\"fsTemp\");\nconst tempBar = document.getElementById(\"barTemp\");\nconst rpmVal = document.getElementById(\"fsRpm\");\nconst rpmBar = document.getElementById(\"barRpm\");\nconst oilVal = document.getElementById(\"fsOil\");\nconst oilBar = document.getElementById(\"barOil\");\nconst tireVal = document.getElementById(\"fsTire\");\nconst tireBar = document.getElementById(\"barTire\");\n\nfunction updateVehicleStatus() {\n // gentle demo fluctuation\n fs.temp += (Math.random() - 0.5) * 2;\n fs.temp = Math.max(78, Math.min(98, fs.temp));\n fs.rpm = Math.round(currentSpeed * 28 + 800 + Math.random() * 120);\n fs.battery = Math.max(60, Math.min(100, fs.battery - Math.random() * 0.02));\n fs.tire = Math.max(2.0, Math.min(2.6, fs.tire + (Math.random() - 0.5) * 0.02));\n\n fuelVal.textContent = `${Math.round(fs.fuel)}%`;\n fuelBar.style.width = `${fs.fuel}%`;\n battVal.textContent = `${Math.round(fs.battery)}%`;\n battBar.style.width = `${fs.battery}%`;\n tempVal.textContent = `${Math.round(fs.temp)}°C`;\n tempBar.style.width = `${(fs.temp / 130) * 100}%`;\n rpmVal.textContent = String(fs.rpm);\n rpmBar.style.width = `${(fs.rpm / 8000) * 100}%`;\n oilVal.textContent = fs.oil > 85 ? \"Good\" : \"Check\";\n oilBar.style.width = `${fs.oil}%`;\n tireVal.textContent = `${fs.tire.toFixed(1)} bar`;\n tireBar.style.width = `${((fs.tire - 1.6) / 1.2) * 100}%`;\n}\nsetInterval(updateVehicleStatus, 1500);\nupdateVehicleStatus();\n\n/* ---------- 6. Ultra Fuel Save Mode ---------- */\nconst fuelToggle = document.getElementById(\"fuelToggle\");\nconst fuelActive = document.getElementById(\"fuelActive\");\nconst fuelInactive = document.getElementById(\"fuelInactive\");\nconst fuelSavePct = document.getElementById(\"fuelSavePct\");\n\nconst SAVE_PCTS = [12, 14, 16, 18];\nlet saveIdx = 1;\n\nfuelToggle.addEventListener(\"click\", () => {\n const isActive = fuelToggle.classList.toggle(\"active\");\n fuelToggle.textContent = isActive ? \"ACTIVE\" : \"OFF\";\n fuelToggle.setAttribute(\"aria-pressed\", isActive ? \"true\" : \"false\");\n\n if (isActive) {\n fuelActive.hidden = false;\n fuelInactive.hidden = true;\n } else {\n fuelActive.hidden = true;\n fuelInactive.hidden = false;\n }\n console.log(`Ultra Fuel Save Mode ${isActive ? \"ACTIVATED\" : \"deactivated\"} (demo)`);\n});\n\n// Animate the estimated savings percentage while active\nsetInterval(() => {\n if (!fuelToggle.classList.contains(\"active\")) return;\n saveIdx = (saveIdx + 1) % SAVE_PCTS.length;\n fuelSavePct.textContent = `~${SAVE_PCTS[saveIdx]}%`;\n}, 2200);\n\n/* ---------- 7. Trip information (simulated) ---------- */\nlet tripDistance = 24.5;\nconst tripStart = Date.now() - 42 * 60 * 1000;\nconst tripDistEl = document.getElementById(\"tripDist\");\nconst tripTimeEl = document.getElementById(\"tripTime\");\nconst tripAvgEl = document.getElementById(\"tripAvg\");\nconst tripFuelEl = document.getElementById(\"tripFuel\");\n\nfunction updateTrip() {\n const minutes = Math.floor((Date.now() - tripStart) / 60000);\n const hhmm = `${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, \"0\")}`;\n const avg = minutes > 0 ? tripDistance / (minutes / 60) : 0;\n const fuelUsed = tripDistance / 14; // ~14 km/L economy\n tripDistEl.textContent = tripDistance.toFixed(1);\n tripTimeEl.textContent = hhmm;\n tripAvgEl.textContent = String(Math.round(avg));\n tripFuelEl.textContent = fuelUsed.toFixed(1);\n}\nsetInterval(updateTrip, 1000);\nupdateTrip();\n\n/* ---------- 8. Alerts (demo) ---------- */\nconst ALERTS = [\n { icon: \"⚠️\", text: \"Fuel level is low — refuel soon\", sev: \"Low fuel\", cls: \"warn\" },\n { icon: \"🌡️\", text: \"Engine temperature is elevated\", sev: \"Advice\", cls: \"warn\" },\n { icon: \"🔋\", text: \"Battery is at a healthy level\", sev: \"OK\", cls: \"\" },\n { icon: \"⚙️\", text: \"Tire pressure is normal\", sev: \"OK\", cls: \"\" },\n { icon: \"🛑\", text: \"Service interval approaching\", sev: \"Due\", cls: \"danger\" },\n];\n\nfunction renderAlerts() {\n const list = document.getElementById(\"alertList\");\n list.innerHTML = \"\";\n ALERTS.forEach((a) => {\n const li = document.createElement(\"li\");\n li.className = `alert-item ${a.cls}`;\n li.innerHTML = `\n ${a.icon}\n ${a.text}\n ${a.sev}`;\n list.appendChild(li);\n });\n}\nrenderAlerts();\n\n/* ---------- 9. Location / GPS ---------- */\nconst locName = document.getElementById(\"locName\");\nconst gpsStatus = document.getElementById(\"gpsStatus\");\nconst gpsDot = document.getElementById(\"gpsDot\");\nconst latValue = document.getElementById(\"latValue\");\nconst lngValue = document.getElementById(\"lngValue\");\n\nfunction gpsUnavailable(reason = \"No signal\") {\n locName.textContent = \"Location unavailable\";\n gpsStatus.textContent = `GPS: ${reason}`;\n gpsDot.classList.remove(\"locked\");\n latValue.textContent = \"—\";\n lngValue.textContent = \"—\";\n}\n\nfunction gpsLocked(position) {\n const lat = position.coords.latitude.toFixed(5);\n const lng = position.coords.longitude.toFixed(5);\n locName.textContent = \"GPS fix acquired\";\n gpsStatus.textContent = \"GPS: Locked\";\n gpsDot.classList.add(\"locked\");\n latValue.textContent = lat;\n lngValue.textContent = lng;\n}\n\nif (\"geolocation\" in navigator) {\n navigator.geolocation.getCurrentPosition(gpsLocked, (err) => {\n const reason = err.code === err.PERMISSION_DENIED\n ? \"Permission denied\"\n : err.code === err.POSITION_UNAVAILABLE ? \"Unavailable\" : \"Timeout\";\n gpsUnavailable(reason);\n }, { enableHighAccuracy: true, timeout: 8000, maximumAge: 0 });\n} else {\n gpsUnavailable(\"Not supported\");\n}\n","/* ============================================================\n DriveIQ — Vehicle Dashboard (client-side interactivity)\n Note: All vehicle metrics are SIMULATED demo data for the\n prototype. They do not read from a real vehicle.\n ============================================================ */\n\n/* ---------- 1. Live clock ---------- */\nconst clockEl = document.getElementById(\"clock\");\nfunction updateClock() {\n const now = new Date();\n const hh = String(now.getHours()).padStart(2, \"0\");\n const mm = String(now.getMinutes()).padStart(2, \"0\");\n const ss = String(now.getSeconds()).padStart(2, \"0\");\n clockEl.textContent = `${hh}:${mm}:${ss}`;\n}\nsetInterval(updateClock, 1000);\nupdateClock();\n\n/* ---------- 2. Settings / themes ---------- */\nconst THEME_KEY = \"driveiq-theme\";\nconst body = document.body;\nconst settingsModal = document.getElementById(\"settingsModal\");\nconst settingsView = document.getElementById(\"settingsView\");\nconst themeView = document.getElementById(\"themeView\");\nconst themeOptions = document.querySelectorAll(\".theme-option\");\nconst applyBtn = document.getElementById(\"applySettings\");\nconst cancelBtn = document.getElementById(\"cancelSettings\");\n\nconst VALID_THEMES = [\"red\", \"blue\", \"green\", \"dark\", \"white\"];\n\n// applyTheme only PREVIEWS the theme on the dashboard — it never saves.\nfunction applyTheme(theme) {\n if (!VALID_THEMES.includes(theme)) theme = \"blue\";\n body.setAttribute(\"data-theme\", theme);\n themeOptions.forEach((btn) => {\n const isCurrent = btn.dataset.theme === theme;\n btn.classList.toggle(\"current\", isCurrent);\n btn.setAttribute(\"aria-pressed\", isCurrent ? \"true\" : \"false\");\n });\n}\n\nfunction saveTheme(theme) {\n try {\n localStorage.setItem(THEME_KEY, theme);\n } catch (_) { /* storage may be unavailable */ }\n}\n\n// Restore saved theme on load\nlet appliedTheme = \"blue\"; // theme currently saved + active on the dashboard\ntry {\n appliedTheme = localStorage.getItem(THEME_KEY) || \"blue\";\n} catch (_) { /* ignore */ }\napplyTheme(appliedTheme);\n\nlet pendingTheme = \"blue\"; // theme previewed inside the modal (not yet saved)\nlet modalView = \"settings\"; // which sub-view is showing: \"settings\" or \"theme\"\nlet suppressPopstate = false; // true while a manual history.back() is in flight\n\nfunction setView(view) {\n modalView = view;\n settingsView.hidden = view !== \"settings\";\n themeView.hidden = view !== \"theme\";\n}\n\n// Dashboard -> Settings\nfunction openSettings() {\n settingsModal.hidden = false;\n document.body.style.overflow = \"hidden\";\n pendingTheme = appliedTheme; // start from the saved theme\n applyTheme(pendingTheme); // preview only — nothing saved yet\n setView(\"settings\");\n history.pushState({ view: \"settings\" }, \"\");\n}\n\n// Settings -> Theme Settings\nfunction openTheme() {\n setView(\"theme\");\n history.pushState({ view: \"theme\" }, \"\");\n}\n\n// Close the whole modal (returns to the dashboard)\nfunction closeSettings() {\n if (settingsModal.hidden) return;\n settingsModal.hidden = true;\n document.body.style.overflow = \"\";\n applyTheme(appliedTheme); // restore the previously applied theme\n setView(\"settings\");\n history.back(); // remove the modal entry from history\n}\n\n// Go back one level: Theme Settings -> Settings, or Settings -> Dashboard\nfunction navigateBack() {\n if (settingsModal.hidden) return;\n if (modalView === \"theme\") {\n suppressPopstate = true;\n setView(\"settings\");\n applyTheme(appliedTheme); // discard any previewed theme\n history.back(); // pop the theme entry, stay in the modal\n } else {\n closeSettings(); // pop the settings entry, close the modal\n }\n}\n\n// Android back button / browser back: Theme -> Settings -> Dashboard\naddEventListener(\"popstate\", () => {\n if (suppressPopstate) { suppressPopstate = false; return; }\n if (settingsModal.hidden) return;\n if (modalView === \"theme\") {\n setView(\"settings\"); // back from Theme to Settings\n applyTheme(appliedTheme); // discard any previewed theme\n } else {\n settingsModal.hidden = true; // back from Settings to Dashboard\n document.body.style.overflow = \"\";\n applyTheme(appliedTheme);\n setView(\"settings\");\n }\n});\n\ndocument.getElementById(\"settingsBtn\").addEventListener(\"click\", openSettings);\ndocument.getElementById(\"themeOption\").addEventListener(\"click\", openTheme);\ndocument.getElementById(\"closeSettings\").addEventListener(\"click\", navigateBack);\ndocument.getElementById(\"closeTheme\").addEventListener(\"click\", navigateBack);\ncancelBtn.addEventListener(\"click\", navigateBack); // Cancel behaves like X\ndocument.getElementById(\"settingsModal\").addEventListener(\"click\", (e) => {\n if (e.target === settingsModal) navigateBack(); // dismiss without saving\n});\n\n// Selecting a theme only PREVIEWS it — nothing is written until Apply.\nthemeOptions.forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n pendingTheme = btn.dataset.theme;\n applyTheme(pendingTheme);\n });\n});\n\n// Apply: commit the previewed theme.\napplyBtn.addEventListener(\"click\", () => {\n appliedTheme = pendingTheme;\n saveTheme(appliedTheme);\n closeSettings();\n});\n\ndocument.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\" && !settingsModal.hidden) navigateBack();\n});\n\n/* ---------- 3. Quick actions ---------- */\ndocument.querySelectorAll(\".quick-btn\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n const target = btn.dataset.target;\n if (target === \"settings\") {\n openSettings();\n return;\n }\n const el = document.getElementById(target);\n if (el) el.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n });\n});\n\n/* ---------- 4. Simulated speed & gauge ---------- */\nconst GAUGE_MAX = 220; // max on the gauge scale (km/h)\nconst ARC_LEN = Math.PI * 80; // semicircle path length (r=80)\nconst gaugeArc = document.getElementById(\"gaugeArc\");\nconst gaugeNeedle = document.getElementById(\"gaugeNeedle\");\nconst speedValueEl = document.getElementById(\"speedValue\");\nconst limitValueEl = document.getElementById(\"limitValue\");\nconst avgValueEl = document.getElementById(\"avgValue\");\nconst maxValueEl = document.getElementById(\"maxValue\");\n\ngaugeArc.style.strokeDasharray = String(ARC_LEN);\n\nlet currentSpeed = 0;\nlet targetSpeed = 0;\nconst speedHistory = [0];\nlet maxSpeed = 0;\nconst speedLimit = 50;\n\n// Simulated driving profile: drive, cruise, brake, coast\nfunction nextTargetSpeed() {\n const r = Math.random();\n const fuelSaveOn = fuelToggle.classList.contains(\"active\");\n let t;\n if (r < 0.18) t = 0; // stop at a light\n else if (r < 0.34) t = Math.round(30 + Math.random() * 15); // city\n else if (r < 0.62) t = Math.round(50 + Math.random() * 20); // main roads\n else if (r < 0.84) t = Math.round(72 + Math.random() * 28); // highway\n else t = Math.round(90 + Math.random() * 30); // fast lane\n return fuelSaveOn ? Math.min(t, 70) : t; // fuel save caps speed\n}\nsetInterval(() => { targetSpeed = nextTargetSpeed(); }, 3000);\n\nfunction updateSimulatedSpeed() {\n // Smoothly ease toward target\n if (currentSpeed < targetSpeed) currentSpeed = Math.min(currentSpeed + 3, targetSpeed);\n else if (currentSpeed > targetSpeed) currentSpeed = Math.max(currentSpeed - 3, targetSpeed);\n\n const value = Math.round(currentSpeed);\n speedValueEl.textContent = String(value);\n gaugeArc.style.strokeDashoffset = String(ARC_LEN * (1 - value / GAUGE_MAX));\n const needleDeg = -90 + (value / GAUGE_MAX) * 180;\n gaugeNeedle.style.transform = `rotate(${needleDeg}deg)`;\n\n speedHistory.push(value);\n if (speedHistory.length > 60) speedHistory.shift();\n maxSpeed = Math.max(maxSpeed, value);\n\n const avg = Math.round(speedHistory.reduce((a, b) => a + b, 0) / speedHistory.length);\n avgValueEl.textContent = String(avg || 0);\n maxValueEl.textContent = String(maxSpeed);\n limitValueEl.textContent = String(speedLimit);\n\n // Trip accumulator (demo)\n tripDistance += value * (1 / 3600);\n updateTrip();\n}\nsetInterval(updateSimulatedSpeed, 500);\n\n/* ---------- 5. Vehicle status (simulated) ---------- */\nconst fs = {\n fuel: 68,\n battery: 91,\n temp: 82,\n rpm: 1850,\n oil: 92, // health %\n tire: 2.4, // bar\n};\nconst fuelVal = document.getElementById(\"fsFuel\");\nconst fuelBar = document.getElementById(\"barFuel\");\nconst battVal = document.getElementById(\"fsBattery\");\nconst battBar = document.getElementById(\"barBattery\");\nconst tempVal = document.getElementById(\"fsTemp\");\nconst tempBar = document.getElementById(\"barTemp\");\nconst rpmVal = document.getElementById(\"fsRpm\");\nconst rpmBar = document.getElementById(\"barRpm\");\nconst oilVal = document.getElementById(\"fsOil\");\nconst oilBar = document.getElementById(\"barOil\");\nconst tireVal = document.getElementById(\"fsTire\");\nconst tireBar = document.getElementById(\"barTire\");\n\nfunction updateVehicleStatus() {\n // gentle demo fluctuation\n fs.temp += (Math.random() - 0.5) * 2;\n fs.temp = Math.max(78, Math.min(98, fs.temp));\n fs.rpm = Math.round(currentSpeed * 28 + 800 + Math.random() * 120);\n fs.battery = Math.max(60, Math.min(100, fs.battery - Math.random() * 0.02));\n fs.tire = Math.max(2.0, Math.min(2.6, fs.tire + (Math.random() - 0.5) * 0.02));\n\n fuelVal.textContent = `${Math.round(fs.fuel)}%`;\n fuelBar.style.width = `${fs.fuel}%`;\n battVal.textContent = `${Math.round(fs.battery)}%`;\n battBar.style.width = `${fs.battery}%`;\n tempVal.textContent = `${Math.round(fs.temp)}°C`;\n tempBar.style.width = `${(fs.temp / 130) * 100}%`;\n rpmVal.textContent = String(fs.rpm);\n rpmBar.style.width = `${(fs.rpm / 8000) * 100}%`;\n oilVal.textContent = fs.oil > 85 ? \"Good\" : \"Check\";\n oilBar.style.width = `${fs.oil}%`;\n tireVal.textContent = `${fs.tire.toFixed(1)} bar`;\n tireBar.style.width = `${((fs.tire - 1.6) / 1.2) * 100}%`;\n}\nsetInterval(updateVehicleStatus, 1500);\nupdateVehicleStatus();\n\n/* ---------- 6. Ultra Fuel Save Mode ---------- */\nconst fuelToggle = document.getElementById(\"fuelToggle\");\nconst fuelActive = document.getElementById(\"fuelActive\");\nconst fuelInactive = document.getElementById(\"fuelInactive\");\nconst fuelSavePct = document.getElementById(\"fuelSavePct\");\n\nconst SAVE_PCTS = [12, 14, 16, 18];\nlet saveIdx = 1;\n\nfuelToggle.addEventListener(\"click\", () => {\n const isActive = fuelToggle.classList.toggle(\"active\");\n fuelToggle.textContent = isActive ? \"ACTIVE\" : \"OFF\";\n fuelToggle.setAttribute(\"aria-pressed\", isActive ? \"true\" : \"false\");\n\n if (isActive) {\n fuelActive.hidden = false;\n fuelInactive.hidden = true;\n } else {\n fuelActive.hidden = true;\n fuelInactive.hidden = false;\n }\n console.log(`Ultra Fuel Save Mode ${isActive ? \"ACTIVATED\" : \"deactivated\"} (demo)`);\n});\n\n// Animate the estimated savings percentage while active\nsetInterval(() => {\n if (!fuelToggle.classList.contains(\"active\")) return;\n saveIdx = (saveIdx + 1) % SAVE_PCTS.length;\n fuelSavePct.textContent = `~${SAVE_PCTS[saveIdx]}%`;\n}, 2200);\n\n/* ---------- 7. Trip information (simulated) ---------- */\nlet tripDistance = 24.5;\nconst tripStart = Date.now() - 42 * 60 * 1000;\nconst tripDistEl = document.getElementById(\"tripDist\");\nconst tripTimeEl = document.getElementById(\"tripTime\");\nconst tripAvgEl = document.getElementById(\"tripAvg\");\nconst tripFuelEl = document.getElementById(\"tripFuel\");\n\nfunction updateTrip() {\n const minutes = Math.floor((Date.now() - tripStart) / 60000);\n const hhmm = `${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, \"0\")}`;\n const avg = minutes > 0 ? tripDistance / (minutes / 60) : 0;\n const fuelUsed = tripDistance / 14; // ~14 km/L economy\n tripDistEl.textContent = tripDistance.toFixed(1);\n tripTimeEl.textContent = hhmm;\n tripAvgEl.textContent = String(Math.round(avg));\n tripFuelEl.textContent = fuelUsed.toFixed(1);\n}\nsetInterval(updateTrip, 1000);\nupdateTrip();\n\n/* ---------- 8. Alerts (demo) ---------- */\nconst ALERTS = [\n { icon: \"⚠️\", text: \"Fuel level is low — refuel soon\", sev: \"Low fuel\", cls: \"warn\" },\n { icon: \"🌡️\", text: \"Engine temperature is elevated\", sev: \"Advice\", cls: \"warn\" },\n { icon: \"🔋\", text: \"Battery is at a healthy level\", sev: \"OK\", cls: \"\" },\n { icon: \"⚙️\", text: \"Tire pressure is normal\", sev: \"OK\", cls: \"\" },\n { icon: \"🛑\", text: \"Service interval approaching\", sev: \"Due\", cls: \"danger\" },\n];\n\nfunction renderAlerts() {\n const list = document.getElementById(\"alertList\");\n list.innerHTML = \"\";\n ALERTS.forEach((a) => {\n const li = document.createElement(\"li\");\n li.className = `alert-item ${a.cls}`;\n li.innerHTML = `\n ${a.icon}\n ${a.text}\n ${a.sev}`;\n list.appendChild(li);\n });\n}\nrenderAlerts();\n\n/* ---------- 9. Location / GPS ---------- */\nconst locName = document.getElementById(\"locName\");\nconst gpsStatus = document.getElementById(\"gpsStatus\");\nconst gpsDot = document.getElementById(\"gpsDot\");\nconst latValue = document.getElementById(\"latValue\");\nconst lngValue = document.getElementById(\"lngValue\");\n\nfunction gpsUnavailable(reason = \"No signal\") {\n locName.textContent = \"Location unavailable\";\n gpsStatus.textContent = `GPS: ${reason}`;\n gpsDot.classList.remove(\"locked\");\n latValue.textContent = \"—\";\n lngValue.textContent = \"—\";\n}\n\nfunction gpsLocked(position) {\n const lat = position.coords.latitude.toFixed(5);\n const lng = position.coords.longitude.toFixed(5);\n locName.textContent = \"GPS fix acquired\";\n gpsStatus.textContent = \"GPS: Locked\";\n gpsDot.classList.add(\"locked\");\n latValue.textContent = lat;\n lngValue.textContent = lng;\n}\n\nif (\"geolocation\" in navigator) {\n navigator.geolocation.getCurrentPosition(gpsLocked, (err) => {\n const reason = err.code === err.PERMISSION_DENIED\n ? \"Permission denied\"\n : err.code === err.POSITION_UNAVAILABLE ? \"Unavailable\" : \"Timeout\";\n gpsUnavailable(reason);\n }, { enableHighAccuracy: true, timeout: 8000, maximumAge: 0 });\n} else {\n gpsUnavailable(\"Not supported\");\n}\n","createdAt",["D",1788887434541],"branchVersion","branchId","2e3fa878-130c-45a4-86d8-8ce8d06d7d3f","id","2c7c09ef-959c-4077-8f4a-5fd8d36a65ff","Drive-iq-",["D",1788885060312],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Futuristic vehicle dashboard UI","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/0674f977-b11c-4534-730b-88d69a554b01/square512?exp=1789549199&sig=338bb40ec67014a949ff555e7995a05b0d0cfd638c6f4f4a9604e2b134656101","242e1959-1f1e-4310-863d-a7b03331e51f","pinnedFileId","ad2c711e-aba2-11f1-82b5-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a081d9-7d9b-73eb-8abe-e3cd3fb39103","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_111":107},"org",{"_104":103,"_105":103,"_106":107,"_19":62,"_108":109,"_110":31},"branch",{"_13":93,"_38":94,"_49":48,"_95":50,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":51,"_102":103},"isOwned",25,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","vandra83","handle","displayName","avatar","https://avatars.githubusercontent.com/u/222420227?v=4","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_38":51,"_44":209,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":61,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":210,"_88":211,"_90":212,"_92":31},"tree",[188,189,190,191,192],"files",[188,189,190,191,192],"counts",{"_178":70,"_179":175,"_180":70,"_181":182,"_183":184},"contents",[134,135,136,137,138],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_49":170,"_38":171,"_36":172,"_142":-5,"_47":48,"_46":173,"_144":66,"_44":174,"_13":175,"_39":26,"_41":176,"_30":31,"_148":-5,"_33":177},{"_49":163,"_38":164,"_36":165,"_142":-5,"_47":48,"_46":166,"_144":66,"_44":167,"_13":146,"_39":26,"_41":168,"_30":31,"_148":-5,"_33":169},{"_49":154,"_38":155,"_36":64,"_142":-5,"_47":48,"_46":156,"_144":66,"_44":157,"_13":158,"_39":159,"_41":160,"_30":31,"_148":161,"_33":162},{"_49":150,"_38":34,"_36":37,"_142":-5,"_47":48,"_46":14,"_144":31,"_44":151,"_13":152,"_39":40,"_41":43,"_30":31,"_148":-5,"_33":153},{"_49":139,"_38":140,"_36":141,"_142":-5,"_47":48,"_46":143,"_144":31,"_44":145,"_13":146,"_39":26,"_41":147,"_30":31,"_148":-5,"_33":149},"94e841b5-cd49-4029-9591-29779e327580","styles.css","741e4b76-aba3-11f1-aeea-1607ee4eb77e","parentId",21,"latest",["D",1788887409203],4,"/* ============================================================\n DriveIQ — Vehicle Dashboard\n Futuristic automotive UI with 5 switchable themes\n ============================================================ */\n\n/* ---------- Base variables (Blue default) ---------- */\n:root {\n --primary: #1a9fff;\n --primary-strong: #6ecbff;\n --accent: #4ecdc4;\n --accent-strong: #8ff5ee;\n --bg: #0a0e27;\n --bg-soft: #141a3d;\n --card: rgba(20, 26, 61, 0.85);\n --card-solid: #1a1f3a;\n --text: #e8ecf7;\n --muted: rgba(232, 236, 247, 0.65);\n --faint: rgba(232, 236, 247, 0.4);\n --border: rgba(26, 159, 255, 0.2);\n --glow: rgba(26, 159, 255, 0.35);\n --danger: #ff6b6b;\n --warn: #ffb84d;\n --ok: #4dd97b;\n --bar-track: rgba(255, 255, 255, 0.08);\n --shadow: rgba(0, 0, 0, 0.35);\n}\n\n/* ---------- Theme: Red ---------- */\n[data-theme=\"red\"] {\n --primary: #ff4757;\n --primary-strong: #ff8a8a;\n --accent: #e05669;\n --accent-strong: #ffa3ad;\n --bg: #23080d;\n --bg-soft: #381017;\n --card: rgba(56, 16, 23, 0.85);\n --card-solid: #41151d;\n --text: #f7e9eb;\n --muted: rgba(247, 233, 235, 0.65);\n --faint: rgba(247, 233, 235, 0.4);\n --border: rgba(255, 71, 87, 0.25);\n --glow: rgba(255, 71, 87, 0.35);\n}\n\n/* ---------- Theme: Green ---------- */\n[data-theme=\"green\"] {\n --primary: #22c55e;\n --primary-strong: #70e08f;\n --accent: #4ecdc4;\n --accent-strong: #8ff5ee;\n --bg: #07160d;\n --bg-soft: #0e2a1a;\n --card: rgba(14, 42, 26, 0.85);\n --card-solid: #123322;\n --text: #e9f7ef;\n --muted: rgba(233, 247, 239, 0.65);\n --faint: rgba(233, 247, 239, 0.4);\n --border: rgba(34, 197, 94, 0.25);\n --glow: rgba(34, 197, 94, 0.35);\n}\n\n/* ---------- Theme: Dark ---------- */\n[data-theme=\"dark\"] {\n --primary: #9aa7c7;\n --primary-strong: #c3cce4;\n --accent: #7d8aa8;\n --accent-strong: #a7b3d0;\n --bg: #05060a;\n --bg-soft: #0c0e15;\n --card: rgba(12, 14, 21, 0.9);\n --card-solid: #14161f;\n --text: #d7dbe8;\n --muted: rgba(215, 219, 232, 0.6);\n --faint: rgba(215, 219, 232, 0.38);\n --border: rgba(154, 167, 199, 0.15);\n --glow: rgba(154, 167, 199, 0.2);\n}\n\n/* ---------- Theme: White (light) ---------- */\n[data-theme=\"white\"] {\n --primary: #2563eb;\n --primary-strong: #5b8cff;\n --accent: #0f9d8f;\n --accent-strong: #31b8a8;\n --bg: #eef2fa;\n --bg-soft: #ffffff;\n --card: rgba(255, 255, 255, 0.92);\n --card-solid: #ffffff;\n --text: #1c2438;\n --muted: rgba(28, 36, 56, 0.66);\n --faint: rgba(28, 36, 56, 0.42);\n --border: rgba(37, 99, 235, 0.16);\n --glow: rgba(37, 99, 235, 0.16);\n --danger: #dc2626;\n --warn: #d97706;\n --ok: #059669;\n --bar-track: rgba(28, 36, 56, 0.1);\n --shadow: rgba(28, 36, 56, 0.12);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: \"Segoe UI\", system-ui, -apple-system, sans-serif;\n background:\n radial-gradient(1100px 500px at 15% -10%, var(--glow), transparent 60%),\n linear-gradient(150deg, var(--bg), var(--bg-soft));\n color: var(--text);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n padding: 20px;\n transition: background 0.5s ease, color 0.5s ease;\n}\n\n.dashboard {\n width: 100%;\n max-width: 960px;\n display: flex;\n flex-direction: column;\n gap: 18px;\n}\n\n/* ---------- Header ---------- */\n.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n padding: 16px 20px;\n background: var(--card);\n border-radius: 18px;\n backdrop-filter: blur(14px);\n border: 1px solid var(--border);\n transition: background 0.5s ease, border-color 0.5s ease;\n}\n\n.brand {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.brand-icon {\n font-size: 26px;\n}\n\n.brand-name {\n font-size: 24px;\n letter-spacing: 1px;\n text-shadow: 0 0 16px var(--glow);\n}\n\n.brand-name span {\n color: var(--primary);\n}\n\n.header-right {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.clock {\n font-family: \"Consolas\", \"SF Mono\", monospace;\n font-size: 18px;\n font-weight: 600;\n letter-spacing: 2px;\n color: var(--primary-strong);\n background: var(--bar-track);\n padding: 8px 12px;\n border-radius: 10px;\n border: 1px solid var(--border);\n}\n\n.status {\n display: flex;\n align-items: center;\n gap: 8px;\n background: var(--bar-track);\n padding: 8px 14px;\n border-radius: 20px;\n}\n\n.status-dot {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n background: var(--accent);\n animation: pulse 1.5s infinite;\n}\n\n.status-text {\n font-size: 13px;\n color: var(--accent-strong);\n}\n\n.icon-btn {\n width: 40px;\n height: 40px;\n border-radius: 12px;\n border: 1px solid var(--border);\n background: var(--bar-track);\n color: var(--text);\n font-size: 18px;\n cursor: pointer;\n transition: all 0.25s;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.icon-btn:hover {\n border-color: var(--primary);\n color: var(--primary);\n box-shadow: 0 0 14px var(--glow);\n}\n\n@keyframes pulse {\n 0%, 100% { box-shadow: 0 0 0 0 var(--accent); }\n 50% { box-shadow: 0 0 0 8px transparent; }\n}\n\n/* ---------- Quick actions ---------- */\n.quick-actions {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 12px;\n}\n\n.quick-btn {\n padding: 14px 10px;\n font-size: 14px;\n font-weight: 600;\n border: 1px solid var(--border);\n background: var(--card);\n color: var(--text);\n border-radius: 14px;\n cursor: pointer;\n transition: all 0.25s;\n backdrop-filter: blur(10px);\n}\n\n.quick-btn:hover {\n transform: translateY(-2px);\n border-color: var(--primary);\n box-shadow: 0 6px 18px var(--glow);\n color: var(--primary-strong);\n}\n\n/* ---------- Cards / layout ---------- */\n.main-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 18px;\n}\n\n.card {\n background: var(--card);\n border-radius: 18px;\n padding: 20px;\n border: 1px solid var(--border);\n backdrop-filter: blur(12px);\n transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.3s ease;\n}\n\n.card-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n margin-bottom: 16px;\n}\n\n.card-head h2 {\n font-size: 16px;\n letter-spacing: 1px;\n text-transform: uppercase;\n color: var(--muted);\n font-weight: 700;\n}\n\n.demo-tag {\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 1px;\n text-transform: uppercase;\n color: var(--warn);\n background: var(--bar-track);\n border: 1px solid var(--border);\n padding: 4px 8px;\n border-radius: 8px;\n}\n\n.data-note {\n margin-top: 14px;\n font-size: 12px;\n color: var(--faint);\n}\n\n/* ---------- Speed gauge ---------- */\n.speed-dash {\n grid-column: 1;\n}\n\n.gauge-wrap {\n position: relative;\n max-width: 340px;\n margin: 0 auto;\n}\n\n.gauge {\n width: 100%;\n display: block;\n overflow: visible;\n}\n\n.gauge-track {\n stroke: var(--bar-track);\n}\n\n.gauge-arc {\n stroke: var(--primary);\n stroke-dasharray: 220; /* ~half circumference of r=80 */\n stroke-dashoffset: 220;\n transform: rotate(180deg);\n transform-origin: 100px 110px;\n filter: drop-shadow(0 0 6px var(--glow));\n transition: stroke-dashoffset 0.5s ease;\n}\n\n.gauge-needle {\n stroke: var(--text);\n transform: rotate(-90deg);\n transform-origin: 100px 110px;\n transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.4, 1);\n}\n\n.gauge-hub {\n fill: var(--primary);\n stroke: var(--accent);\n stroke-width: 2;\n}\n\n.gauge-readout {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 22px;\n text-align: center;\n display: flex;\n align-items: baseline;\n justify-content: center;\n gap: 8px;\n}\n\n.speed-value {\n font-size: 56px;\n font-weight: 800;\n line-height: 1;\n color: var(--primary);\n text-shadow: 0 0 24px var(--glow);\n}\n\n.speed-unit {\n font-size: 18px;\n color: var(--muted);\n}\n\n.speed-stats {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n margin-top: 18px;\n}\n\n.stat {\n text-align: center;\n padding: 12px 8px;\n background: var(--bar-track);\n border-radius: 12px;\n border: 1px solid var(--border);\n}\n\n.stat-label {\n display: block;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--faint);\n margin-bottom: 6px;\n}\n\n.stat-value {\n font-size: 22px;\n font-weight: 700;\n color: var(--text);\n}\n\n/* ---------- Location ---------- */\n.location {\n grid-column: 1;\n}\n\n.location-row {\n display: flex;\n align-items: center;\n gap: 14px;\n margin-bottom: 16px;\n}\n\n.loc-icon {\n font-size: 30px;\n filter: drop-shadow(0 0 8px var(--glow));\n}\n\n.loc-label {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--faint);\n margin-bottom: 3px;\n}\n\n.loc-name {\n font-size: 18px;\n font-weight: 600;\n color: var(--text);\n}\n\n.gps-status {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--muted);\n padding: 10px 12px;\n background: var(--bar-track);\n border-radius: 10px;\n margin-bottom: 14px;\n}\n\n.gps-dot {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n background: var(--danger);\n transition: background 0.3s;\n}\n\n.gps-dot.locked {\n background: var(--ok);\n animation: pulse 1.5s infinite;\n}\n\n.coords {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n}\n\n.coord {\n padding: 10px 12px;\n background: var(--bar-track);\n border-radius: 10px;\n border: 1px solid var(--border);\n}\n\n.coord span {\n display: block;\n font-size: 11px;\n text-transform: uppercase;\n color: var(--faint);\n margin-bottom: 4px;\n}\n\n.coord strong {\n font-size: 16px;\n font-family: \"Consolas\", monospace;\n color: var(--text);\n}\n\n/* ---------- Vehicle status ---------- */\n.vehicle-status {\n grid-column: 1 / -1;\n}\n\n.vstat-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 14px;\n}\n\n.vstat {\n padding: 14px;\n background: var(--bar-track);\n border-radius: 14px;\n border: 1px solid var(--border);\n transition: transform 0.25s, box-shadow 0.25s;\n}\n\n.vstat:hover {\n transform: translateY(-3px);\n box-shadow: 0 6px 18px var(--glow);\n}\n\n.vstat-icon {\n font-size: 22px;\n}\n\n.vstat-label {\n display: block;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--faint);\n margin: 8px 0 6px;\n}\n\n.vstat-value {\n font-size: 22px;\n font-weight: 700;\n color: var(--text);\n}\n\n.vstat-value.ok {\n color: var(--ok);\n}\n\n.bar {\n height: 6px;\n background: var(--bar-track);\n border-radius: 3px;\n overflow: hidden;\n margin-top: 10px;\n}\n\n.bar-fill {\n height: 100%;\n border-radius: 3px;\n width: 0;\n transition: width 0.6s ease;\n}\n\n.bar-fill.fuel { background: linear-gradient(90deg, var(--primary), var(--primary-strong)); }\n.bar-fill.battery { background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }\n.bar-fill.temp { background: linear-gradient(90deg, var(--warn), var(--danger)); }\n.bar-fill.rpm { background: linear-gradient(90deg, var(--primary), var(--accent)); }\n.bar-fill.oil { background: linear-gradient(90deg, var(--ok), #8ff5a4); }\n.bar-fill.tire { background: linear-gradient(90deg, var(--accent), var(--primary)); }\n\n.vstat-conn {\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n/* ---------- Ultra Fuel Save ---------- */\n.fuel-economy {\n grid-column: 1 / -1;\n}\n\n.toggle-card {\n display: flex;\n align-items: center;\n gap: 16px;\n flex-wrap: wrap;\n background: var(--bar-track);\n border-radius: 14px;\n padding: 16px;\n border: 1px solid var(--border);\n}\n\n.toggle-info {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 200px;\n}\n\n.toggle-icon {\n font-size: 28px;\n}\n\n.toggle-info h3 {\n font-size: 17px;\n margin-bottom: 4px;\n color: var(--text);\n}\n\n.toggle-info p {\n font-size: 13px;\n color: var(--muted);\n}\n\n.toggle-btn {\n padding: 12px 28px;\n font-size: 15px;\n font-weight: 700;\n border: 2px solid var(--primary);\n background: transparent;\n color: var(--primary);\n border-radius: 12px;\n cursor: pointer;\n letter-spacing: 1px;\n transition: all 0.3s;\n}\n\n.toggle-btn:hover {\n box-shadow: 0 0 16px var(--glow);\n}\n\n.toggle-btn.active {\n background: var(--accent);\n border-color: var(--accent);\n color: var(--bg);\n box-shadow: 0 0 22px var(--glow);\n}\n\n.fuel-active {\n margin-top: 16px;\n padding: 16px;\n border-radius: 14px;\n border: 1px solid var(--border);\n background: linear-gradient(135deg, var(--glow), transparent 70%);\n animation: fadeIn 0.4s ease;\n}\n\n.fuel-badge {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 10px;\n flex-wrap: wrap;\n}\n\n.fuel-status {\n font-weight: 800;\n letter-spacing: 1px;\n color: var(--ok);\n background: rgba(77, 217, 123, 0.15);\n padding: 5px 12px;\n border-radius: 8px;\n border: 1px solid rgba(77, 217, 123, 0.5);\n animation: pulse 2s infinite;\n}\n\n.fuel-save {\n font-size: 26px;\n font-weight: 800;\n color: var(--primary);\n}\n\n.fuel-save-label {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--faint);\n}\n\n.fuel-msg {\n font-size: 13px;\n color: var(--muted);\n line-height: 1.5;\n}\n\n.fuel-inactive {\n margin-top: 12px;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* ---------- Trip ---------- */\n.trip {\n grid-column: 1;\n}\n\n.trip-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n}\n\n.trip-stat {\n text-align: center;\n padding: 16px 10px;\n background: var(--bar-track);\n border-radius: 14px;\n border: 1px solid var(--border);\n}\n\n.trip-stat .stat-value {\n display: block;\n font-size: 26px;\n color: var(--primary);\n margin-bottom: 6px;\n}\n\n.trip-stat .stat-label {\n font-size: 11px;\n text-transform: uppercase;\n color: var(--faint);\n}\n\n/* ---------- Alerts ---------- */\n.alerts {\n grid-column: 1;\n}\n\n.alert-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.alert-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 14px;\n border-radius: 12px;\n border: 1px solid var(--border);\n background: var(--bar-track);\n font-size: 14px;\n animation: fadeIn 0.4s ease;\n}\n\n.alert-item .alert-ico {\n font-size: 18px;\n}\n\n.alert-item.warn { border-left: 4px solid var(--warn); }\n.alert-item.danger { border-left: 4px solid var(--danger); }\n.alert-item.danger .alert-ico { filter: drop-shadow(0 0 6px var(--danger)); }\n\n.alert-item .alert-text {\n color: var(--text);\n flex: 1;\n}\n\n.alert-item .alert-sev {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n padding: 3px 8px;\n border-radius: 6px;\n background: var(--bar-track);\n}\n\n/* ---------- Branding ---------- */\n.branding {\n text-align: center;\n padding: 22px 16px;\n border-top: 1px solid var(--border);\n}\n\n.branding-name {\n font-size: 22px;\n letter-spacing: 2px;\n color: var(--text);\n text-shadow: 0 0 16px var(--glow);\n}\n\n.branding-name span {\n color: var(--primary);\n}\n\n.branding-made {\n margin-top: 4px;\n font-size: 13px;\n letter-spacing: 1px;\n color: var(--muted);\n opacity: 0.85;\n}\n\n.branding-note {\n margin-top: 10px;\n font-size: 11px;\n color: var(--faint);\n}\n\n/* ---------- Settings modal ---------- */\n.modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.55);\n backdrop-filter: blur(6px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n z-index: 50;\n animation: fadeIn 0.25s ease;\n}\n\n.modal {\n width: 100%;\n max-width: 400px;\n background: var(--card-solid);\n color: var(--text);\n border-radius: 18px;\n border: 1px solid var(--border);\n padding: 24px;\n box-shadow: 0 20px 60px var(--shadow);\n animation: popIn 0.3s ease;\n}\n\n@keyframes popIn {\n from { opacity: 0; transform: scale(0.94) translateY(10px); }\n to { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n.modal-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 14px;\n}\n\n.modal-head h2 {\n font-size: 20px;\n color: var(--primary);\n}\n\n.modal-sub {\n font-size: 13px;\n color: var(--muted);\n margin-bottom: 18px;\n}\n\n.settings-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.settings-option {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px;\n font-size: 15px;\n font-weight: 600;\n border: 1px solid var(--border);\n background: var(--bar-track);\n color: var(--text);\n border-radius: 12px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: all 0.25s;\n}\n\n.settings-option:hover {\n border-color: var(--primary);\n transform: translateX(4px);\n}\n\n.settings-ico {\n font-size: 20px;\n flex-shrink: 0;\n}\n\n.settings-label {\n flex: 1;\n text-align: left;\n}\n\n.settings-chevron {\n color: var(--muted);\n font-size: 22px;\n}\n\n.theme-grid {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.theme-option {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 14px;\n font-size: 15px;\n font-weight: 600;\n border: 1px solid var(--border);\n background: var(--bar-track);\n color: var(--text);\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.25s;\n}\n\n.theme-option:hover {\n border-color: var(--primary);\n transform: translateX(4px);\n}\n\n.theme-option.current {\n border-color: var(--primary);\n box-shadow: 0 0 0 2px var(--glow);\n}\n\n.swatch {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 2px solid rgba(255, 255, 255, 0.2);\n flex-shrink: 0;\n}\n\n.swatch.red { background: #ff4757; }\n.swatch.blue { background: #1a9fff; }\n.swatch.green { background: #22c55e; }\n.swatch.dark { background: #1c1f2b; border-color: rgba(255,255,255,0.5); }\n.swatch.white { background: #f5f7fb; border-color: rgba(0,0,0,0.3); }\n\n/* ---------- Modal actions ---------- */\n.modal-actions {\n display: flex;\n gap: 10px;\n margin-top: 20px;\n}\n\n.action-btn {\n flex: 1;\n min-height: 48px;\n padding: 12px 16px;\n font-size: 15px;\n font-weight: 700;\n border-radius: 12px;\n border: 1px solid var(--border);\n cursor: pointer;\n transition: all 0.25s;\n -webkit-tap-highlight-color: transparent;\n}\n\n.cancel-btn {\n background: var(--bar-track);\n color: var(--text);\n}\n.cancel-btn:hover {\n border-color: var(--muted);\n}\n\n.apply-btn {\n background: var(--primary);\n border-color: var(--primary);\n color: var(--bg);\n}\n.apply-btn:hover {\n box-shadow: 0 0 16px var(--glow);\n}\n\n/* Larger, mobile-friendly close hit area */\n.close-btn {\n width: 44px;\n height: 44px;\n font-size: 20px;\n border-radius: 10px;\n}\n@media (max-width: 480px) {\n .close-btn { width: 48px; height: 48px; }\n}\n\n/* ============================================================\n Responsive\n ============================================================ */\n@media (max-width: 820px) {\n .main-grid {\n grid-template-columns: 1fr;\n }\n .speed-dash, .location, .trip, .alerts, .vehicle-status, .fuel-economy {\n grid-column: 1;\n }\n .quick-actions {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 480px) {\n body { padding: 12px; }\n .dashboard { gap: 14px; }\n .clock { font-size: 15px; }\n .speed-value { font-size: 48px; }\n .gauge-readout { bottom: 18px; }\n .trip-grid { grid-template-columns: 1fr; }\n .coords { grid-template-columns: 1fr; }\n .header { justify-content: center; }\n .brand-name { font-size: 20px; }\n .toggle-card { flex-direction: column; text-align: center; }\n .toggle-btn { width: 100%; }\n}\n","label",[140],"0a186444-5798-41db-9bef-3f167b16f668",["D",1788887434541],5,[34],"2e74b972-ec0d-4836-9fa9-a295989d4dc4","main.ts",7,["D",1788885406318],3,"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n\n if (path === \"/\" || path === \"/index.html\") {\n return serveFile(\"/index.html\");\n }\n if (path === \"/styles.css\") {\n return serveFile(\"/styles.css\");\n }\n if (path === \"/script.js\") {\n return serveFile(\"/script.js\");\n }\n\n return new Response(\"Not found\", { status: 404 });\n}\n","driveiq",[155],"ca92ff19-49cb-4986-8001-d3b875cdc181","index.html","7413fe64-aba3-11f1-aeea-1607ee4eb77e",18,["D",1788887372291],"\n\n\n \n \n \n DriveIQ — Vehicle Dashboard\n \n\n\n

\n \n \n\n \n \n\n

\n \n

Speed Dashboard

\n Demo data\n

\n \n

\n 72\n km/h\n

\n Speed Limit\n 50\n

\n Average\n 48\n

\n Maximum\n 120\n

⚠ Simulated speed data for prototype display.

\n\n \n

Location

\n 📍\n

Current Location

Location unavailable

\n \n GPS: No signal\n

Latitude—

Longitude—

Live GPS will update when sensor data is available.

\n\n \n

Vehicle Status

\n Demo data\n

\n ⛽\n Fuel Level\n 68%\n

\n 🔋\n Battery\n 91%\n

\n 🌡️\n Engine Temp\n 82°C\n

\n ⏱️\n Engine RPM\n 1850\n

\n 🛢️\n Oil Status\n Good\n

\n ⚙️\n Tire Pressure\n 2.4 bar\n

\n 📶\n Connection\n Connected\n

\n\n \n

Fuel Economy

\n 🌿\n

Ultra Fuel Save Mode

Optimize fuel consumption for maximum efficiency

\n \n

Switch on Ultra Fuel Save Mode to start optimizing consumption.

⚠ Demo values — does not control a real vehicle.

\n\n \n

Trip

\n Demo\n

24.5km · Traveled

0:42hh:mm · Duration

34km/h · Avg Speed

1.8L · Fuel Used

⚠ Simulated trip information.

\n\n \n

Alerts

\n Demo\n

\n\n \n \n

\n\n \n \n\n \n\n\n",[164],"b644c7fb-1140-46d6-a834-ef1faf728841","README.md","897239a6-aba3-11f1-86f9-1607ee4eb77e",13,["D",1788886256124],1,"# DriveIQ Vehicle Dashboard\n\nA futuristic but realistic automotive dashboard built with vanilla HTML, CSS, and JavaScript. Features a modern, vehicle-control interface with simulated (demo) sensor data — clearly labelled as prototype data.\n\n## Try it\n\n[Launch the dashboard](url:main.ts)\n\n## Features\n\n- **⚙ Settings & Themes** — gear button opens a settings panel to switch between **Red, Blue, Green, Dark, and White** themes. The active theme is saved to `localStorage` and restored after refresh.\n- **🕐 Live Clock** — real-time digital clock in the header.\n- **📍 Location** — shows current location, GPS status, and lat/long when a GPS fix is available. When no real GPS data exists it clearly shows **\"Location unavailable\"** rather than fake coordinates.\n- **🏁 Speed Dashboard** — animated circular speed gauge (SVG) with current speed, speed limit, average, and maximum. Uses clearly-labelled simulated speed data.\n- **🚗 Vehicle Status** — cards for fuel level, battery, engine temperature, engine RPM, oil status, tire pressure, and connection status, each with a visual indicator.\n- **🌿 Ultra Fuel Save Mode** — retained toggle that switches to **ACTIVE** state with a visual indicator and an estimated fuel-savings percentage (demo values).\n- **🧭 Trip Information** — distance travelled, trip duration, average speed, and estimated fuel consumed (simulated).\n- **⚡ Quick Actions** — responsive buttons for Vehicle Status, Trip, Fuel Economy, and Settings.\n- **🔔 Alerts** — demo warnings such as low fuel and elevated engine temperature.\n- **🏷 Branding** — clean footer: \"DriveIQ\" with a subtle \"Made by Vandra\".\n\n## Notes\n\n- All vehicle metrics (speed, fuel, battery, temperature, RPM, trip, fuel savings) are **simulated demo data** and are labelled as such in the UI. They do not read from a real vehicle.\n- GPS uses the browser's Geolocation API only when the user grants permission; otherwise the interface reports \"Location unavailable\".\n\n## Files\n\n| File | Purpose |\n| --- | --- |\n| `main.ts` | HTTP handler that serves the static assets |\n| `index.html` | Page markup |\n| `styles.css` | Styling, themes, and animations |\n| `script.js` | Client-side interactivity |\n\n## Tech\n\n- Vanilla HTML / CSS / JS (no frameworks or build step)\n- Served from a Val Town HTTP endpoint via `serveFile`\n",[171],"pulls","branches","forks","envVars",{"_185":70,"_187":70},"connections",{"_185":70,"_186":70},"count","unfilledCount","emptyCount",{"_49":170,"_38":171,"_36":172,"_142":-5,"_47":48,"_46":173,"_144":66,"_44":206,"_13":175,"_39":26,"_41":176,"_30":31,"_148":-5,"_194":207,"_33":208},{"_49":163,"_38":164,"_36":165,"_142":-5,"_47":48,"_46":166,"_144":66,"_44":203,"_13":146,"_39":26,"_41":168,"_30":31,"_148":-5,"_194":204,"_33":205},{"_49":154,"_38":155,"_36":64,"_142":-5,"_47":48,"_46":156,"_144":66,"_44":200,"_13":158,"_39":159,"_41":160,"_30":31,"_148":161,"_194":201,"_33":202},{"_49":150,"_38":34,"_36":37,"_142":-5,"_47":48,"_46":14,"_144":31,"_44":197,"_13":152,"_39":40,"_41":43,"_30":31,"_148":-5,"_194":198,"_33":199},{"_49":139,"_38":140,"_36":141,"_142":-5,"_47":48,"_46":143,"_144":31,"_44":193,"_13":146,"_39":26,"_41":147,"_30":31,"_148":-5,"_194":195,"_33":196},["D",1788887409203],"children",[],[140],["D",1788887434541],[],[34],["D",1788885406318],[],[155],["D",1788887372291],[],[164],["D",1788886256124],[],[171],["D",1788885060312],{"_104":103,"_111":107},{"_104":103,"_105":103,"_106":107,"_19":62,"_108":109,"_110":31},{"_13":93,"_38":94,"_49":48,"_95":50,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":51,"_102":103},"ctx",{"_86":-5,"_131":246,"_247":248,"_249":250,"_251":31,"_252":31,"_253":31,"_254":66,"_255":-5,"_256":-7,"_257":-7,"_258":70,"_259":31,"_260":31,"_261":-5,"_262":31,"_263":31,"_264":31,"_265":-5},"ENV",{"_217":218,"_219":220,"_221":94,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v22