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",[],[213],"b644c7fb-1140-46d6-a834-ef1faf728841","README.md","897239a6-aba3-11f1-86f9-1607ee4eb77e",13,["D",1788886256124],"# 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",[],[222],["D",1788885060312],{"_11":12,"_146":70},{"_11":12,"_142":12,"_69":70,"_30":68,"_143":144,"_145":24},{"_41":133,"_13":16,"_35":38,"_134":97,"_135":-5,"_136":-5,"_137":-5,"_138":-5,"_139":-5,"_140":14,"_141":12},"ctx",{"_53":-5,"_165":266,"_267":268,"_269":270,"_271":24,"_272":24,"_273":24,"_274":110,"_275":-5,"_276":-7,"_277":-7,"_278":26,"_279":24,"_280":24,"_281":-5,"_282":24,"_283":24,"_284":24,"_285":-5},"ENV",{"_237":238,"_239":240,"_241":16,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265},"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"]

History · main.ts