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",[147],"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",[155],"pulls","branches","forks","envVars",{"_169":43,"_171":43},"connections",{"_169":43,"_170":43},"count","unfilledCount","emptyCount",{"_18":154,"_20":155,"_115":156,"_117":-5,"_118":69,"_119":157,"_121":39,"_22":190,"_66":159,"_124":97,"_125":160,"_127":26,"_128":-5,"_178":191,"_86":192},{"_18":146,"_20":147,"_115":148,"_117":-5,"_118":69,"_119":149,"_121":39,"_22":187,"_66":151,"_124":97,"_125":152,"_127":26,"_128":-5,"_178":188,"_86":189},{"_18":138,"_20":139,"_115":37,"_117":-5,"_118":69,"_119":134,"_121":39,"_22":184,"_66":141,"_124":142,"_125":143,"_127":26,"_128":144,"_178":185,"_86":186},{"_18":130,"_20":131,"_115":132,"_117":-5,"_118":69,"_119":67,"_121":39,"_22":181,"_66":134,"_124":135,"_125":136,"_127":26,"_128":-5,"_178":182,"_86":183},{"_18":113,"_20":114,"_115":116,"_117":-5,"_118":69,"_119":120,"_121":39,"_22":177,"_66":123,"_124":97,"_125":126,"_127":26,"_128":-5,"_178":179,"_86":180},["D",1788888227737],"children",[],[114],["D",1788888292895],[],[131],["D",1788885406318],[],[139],["D",1788887372291],[],[147],["D",1788886256124],[],[155],["D",1788885060312],{"_16":17,"_84":80},{"_16":17,"_78":17,"_79":80,"_34":35,"_81":82,"_83":26},{"_66":67,"_20":68,"_18":69,"_70":19,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":21,"_77":17},"ctx",{"_59":-5,"_105":230,"_231":232,"_233":234,"_235":26,"_236":26,"_237":26,"_238":39,"_239":-5,"_240":-7,"_241":-7,"_242":43,"_243":26,"_244":26,"_245":-5,"_246":26,"_247":26,"_248":26,"_249":-5},"ENV",{"_201":202,"_203":204,"_205":68,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229},"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"]

Search