Remix

Make your own version of StreetSmart

Edit the prompt below and generate a customized version in seconds.

Original by Isah sharubutu Umar

Describe your app

Create a lightweight, mobile-responsive Progressive Web App (PWA) called "StreetSmart" using HTML, Tailwind CSS, and vanilla JavaScript. The app must run completely free without AI or paid APIs.

Strict Architecture Requirements:
1. Map Integration: Use the completely free Leaflet.js and OpenStreetMap framework. Do not use Google Maps. Center the map automatically on the user's live browser GPS location with a clean blue dot.
2. Minimalist UI: 
   - Screen 1: A full-screen map. Place a prominent, floating green "+" button at the bottom center.
   - Screen 2: Clicking the "+" button opens a clean modal overlay covering the map. The modal must contain exactly 5 large, easy-to-tap buttons: [🚨 Heavy Traffic, 🌊 Flooding, 🚧 Checkpoint, 🚗 Breakdown, ✅ Road Clear].
3. Simple Interaction: Clicking any button must capture the current GPS coordinates and current timestamp, simulate a save action, place a corresponding colored marker pin on the map at that exact spot, and immediately close the modal.
4. Auto-Decay Logic: Write a JavaScript function that automatically removes any placed marker pin from the map exactly 45 minutes after its timestamp to keep data fresh and memory usage at zero.

Provide the complete, single-file deployment code (HTML with embedded CSS and JS) so I can copy, paste, and run it immediately in a browser for free.

Free to use. No credit card required.