DriveIQ — Vehicle Dashboard

\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",[78],"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",[86],{"_37":85,"_13":86,"_40":87,"_42":-5,"_43":44,"_45":88,"_47":48,"_49":111,"_17":90,"_52":24,"_53":91,"_55":56,"_57":-5,"_99":112,"_18":113},{"_37":77,"_13":78,"_40":79,"_42":-5,"_43":44,"_45":80,"_47":48,"_49":108,"_17":82,"_52":24,"_53":83,"_55":56,"_57":-5,"_99":109,"_18":110},{"_37":68,"_13":69,"_40":70,"_42":-5,"_43":44,"_45":64,"_47":48,"_49":105,"_17":72,"_52":73,"_53":74,"_55":56,"_57":75,"_99":106,"_18":107},{"_37":59,"_13":60,"_40":61,"_42":-5,"_43":44,"_45":62,"_47":48,"_49":102,"_17":64,"_52":65,"_53":66,"_55":56,"_57":-5,"_99":103,"_18":104},{"_37":38,"_13":39,"_40":41,"_42":-5,"_43":44,"_45":46,"_47":48,"_49":98,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_99":100,"_18":101},["D",1788888227737],"children",[],[39],["D",1788888292895],[],[60],["D",1788885406318],[],[69],["D",1788887372291],[],[78],["D",1788886256124],[],[86],"2c7c09ef-959c-4077-8f4a-5fd8d36a65ff",["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","userId","242e1959-1f1e-4310-863d-a7b03331e51f","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a081d9-7d9b-73eb-8abe-e3cd3fb39103","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_169":165},"org",{"_11":12,"_163":12,"_164":165,"_125":126,"_166":167,"_168":56},"branch",{"_17":62,"_13":16,"_37":44,"_155":114,"_156":-5,"_157":-5,"_158":-5,"_159":-5,"_160":-5,"_161":14,"_162":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://avatars.githubusercontent.com/u/222420227?v=4","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_37":114,"_13":14,"_49":222,"_116":-5,"_117":56,"_118":119,"_120":119,"_121":122,"_123":124,"_125":126,"_127":70,"_128":48,"_129":-5,"_130":-5,"_131":132,"_133":134,"_135":-5,"_136":-5,"_137":-5,"_138":-5,"_139":140,"_141":140,"_142":143,"_144":143,"_145":143,"_146":140,"_147":140,"_148":223,"_150":224,"_152":225,"_154":56},[207,208,209,210,211],"files",[207,208,209,210,211],"counts",{"_198":132,"_199":90,"_200":132,"_31":201,"_202":203},[188,189,190,191,192],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_37":85,"_13":86,"_40":87,"_42":-5,"_43":44,"_45":88,"_47":48,"_49":89,"_17":90,"_52":24,"_53":91,"_55":56,"_57":-5,"_18":197},{"_37":77,"_13":78,"_40":79,"_42":-5,"_43":44,"_45":80,"_47":48,"_49":81,"_17":82,"_52":24,"_53":83,"_55":56,"_57":-5,"_18":196},{"_37":68,"_13":69,"_40":70,"_42":-5,"_43":44,"_45":64,"_47":48,"_49":71,"_17":72,"_52":73,"_53":74,"_55":56,"_57":75,"_18":195},{"_37":59,"_13":60,"_40":61,"_42":-5,"_43":44,"_45":62,"_47":48,"_49":63,"_17":64,"_52":65,"_53":66,"_55":56,"_57":-5,"_18":194},{"_37":38,"_13":39,"_40":41,"_42":-5,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_18":193},[39],[60],[69],[78],[86],"pulls","branches","forks",{"_204":132,"_206":132},"connections",{"_204":132,"_205":132},"count","unfilledCount","emptyCount",{"_37":85,"_13":86,"_40":87,"_42":-5,"_43":44,"_45":88,"_47":48,"_49":111,"_17":90,"_52":24,"_53":91,"_55":56,"_57":-5,"_99":220,"_18":221},{"_37":77,"_13":78,"_40":79,"_42":-5,"_43":44,"_45":80,"_47":48,"_49":108,"_17":82,"_52":24,"_53":83,"_55":56,"_57":-5,"_99":218,"_18":219},{"_37":68,"_13":69,"_40":70,"_42":-5,"_43":44,"_45":64,"_47":48,"_49":105,"_17":72,"_52":73,"_53":74,"_55":56,"_57":75,"_99":216,"_18":217},{"_37":59,"_13":60,"_40":61,"_42":-5,"_43":44,"_45":62,"_47":48,"_49":102,"_17":64,"_52":65,"_53":66,"_55":56,"_57":-5,"_99":214,"_18":215},{"_37":38,"_13":39,"_40":41,"_42":-5,"_43":44,"_45":46,"_47":48,"_49":98,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_99":212,"_18":213},[],[39],[],[60],[],[69],[],[78],[],[86],["D",1788885060312],{"_11":12,"_169":165},{"_11":12,"_163":12,"_164":165,"_125":126,"_166":167,"_168":56},{"_17":62,"_13":16,"_37":44,"_155":114,"_156":-5,"_157":-5,"_158":-5,"_159":-5,"_160":-5,"_161":14,"_162":12},"ctx",{"_148":-5,"_185":259,"_260":261,"_262":263,"_264":56,"_265":56,"_266":56,"_267":48,"_268":-5,"_269":-7,"_270":-7,"_271":132,"_272":56,"_273":56,"_274":-5,"_275":56,"_276":56,"_277":56,"_278":-5},"ENV",{"_230":231,"_232":233,"_234":16,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258},"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"]

Code