DriveIQ Vehicle Dashboard

A 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.

Try it

Launch the dashboard

Features

  • ⚙ 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.
  • 🕐 Live Clock — real-time digital clock in the header.
  • 📍 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.
  • 🏁 Speed Dashboard — animated circular speed gauge (SVG) with current speed, speed limit, average, and maximum. Uses clearly-labelled simulated speed data.
  • 🚗 Vehicle Status — cards for fuel level, battery, engine temperature, engine RPM, oil status, tire pressure, and connection status, each with a visual indicator.
  • 🌿 Ultra Fuel Save Mode — retained toggle that switches to ACTIVE state with a visual indicator and an estimated fuel-savings percentage (demo values).
  • 🧭 Trip Information — distance travelled, trip duration, average speed, and estimated fuel consumed (simulated).
  • ⚡ Quick Actions — responsive buttons for Vehicle Status, Trip, Fuel Economy, and Settings.
  • 🔔 Alerts — demo warnings such as low fuel and elevated engine temperature.
  • 🏷 Branding — clean footer: "DriveIQ" with a subtle "Made by Vandra".

Notes

  • 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.
  • GPS uses the browser's Geolocation API only when the user grants permission; otherwise the interface reports "Location unavailable".

Files

FilePurpose
main.tsHTTP handler that serves the static assets
index.htmlPage markup
styles.cssStyling, themes, and animations
script.jsClient-side interactivity

Tech

  • Vanilla HTML / CSS / JS (no frameworks or build step)
  • Served from a Val Town HTTP endpoint via serveFile