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",[153],"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",[161],"pulls","forks","envVars",{"_174":55,"_176":55},"connections",{"_174":55,"_175":55},"count","unfilledCount","emptyCount",{"_20":160,"_13":161,"_121":162,"_123":-5,"_124":21,"_125":163,"_127":51,"_22":195,"_29":165,"_130":103,"_131":166,"_133":38,"_134":-5,"_183":196,"_91":197},{"_20":152,"_13":153,"_121":154,"_123":-5,"_124":21,"_125":155,"_127":51,"_22":192,"_29":157,"_130":103,"_131":158,"_133":38,"_134":-5,"_183":193,"_91":194},{"_20":144,"_13":145,"_121":49,"_123":-5,"_124":21,"_125":140,"_127":51,"_22":189,"_29":147,"_130":148,"_131":149,"_133":38,"_134":150,"_183":190,"_91":191},{"_20":136,"_13":137,"_121":138,"_123":-5,"_124":21,"_125":30,"_127":51,"_22":186,"_29":140,"_130":141,"_131":142,"_133":38,"_134":-5,"_183":187,"_91":188},{"_20":119,"_13":120,"_121":122,"_123":-5,"_124":21,"_125":126,"_127":51,"_22":182,"_29":129,"_130":103,"_131":132,"_133":38,"_134":-5,"_183":184,"_91":185},["D",1788888227737],"children",[],[120],["D",1788888292895],[],[137],["D",1788885406318],[],[145],["D",1788887372291],[],[153],["D",1788886256124],[],[161],["D",1788885060312],{"_11":12,"_89":85},{"_11":12,"_83":12,"_84":85,"_46":47,"_86":87,"_88":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_78":-5,"_79":-5,"_80":-5,"_81":14,"_82":12},"ctx",{"_71":-5,"_111":235,"_236":237,"_238":239,"_240":38,"_241":38,"_242":38,"_243":51,"_244":-5,"_245":-7,"_246":-7,"_247":55,"_248":38,"_249":38,"_250":-5,"_251":38,"_252":38,"_253":38,"_254":-5},"ENV",{"_206":207,"_208":209,"_210":26,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234},"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"]

Branches1

Branches
1