Remix

Make your own version of SafeGuard Safety Dashboard

Get an exact, working copy in your account, then change anything with chat.

Original by M DHARSHAN

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

Create a complete, modern, interactive web application named *SafeGuard – AI-Based Personal Safety System*. This is for a college project demonstration. Build the entire application in one response, with all features integrated and working together.

*Technology:* HTML5, CSS3, JavaScript, and browser APIs. The application must run directly in a browser using a single index.html file, without requiring a backend, database, API key, or paid service.

### 1. Modern Dashboard
- Create a beautiful, professional, mobile-responsive safety dashboard.
- Use a dark navy background with red emergency buttons, blue highlights, and green safety indicators.
- Add the SafeGuard logo/title, navigation menu, feature cards, and status indicators.
- Make the design suitable for a college project demonstration.

### 2. Safety Monitoring
- Add Start Monitoring and Stop Monitoring buttons.
- Update the monitoring status dynamically.
- Display whether monitoring is ON or OFF.
- Show clear notifications when monitoring starts or stops.

### 3. Emergency Detection Demo
- Add a large red *SIMULATE EMERGENCY* button.
- When clicked, activate the emergency workflow automatically.
- Display an emergency warning and start a visible countdown.
- Allow the user to cancel the simulated emergency using an *I'M SAFE* button.
- Show a clear distinction between simulated detection and actual sensor-based detection.
- Do not falsely claim that real AI detection is running.

### 4. Photo Capture
- Use the browser's getUserMedia() API to request webcam access.
- Display a live camera preview.
- Add a Capture Photo button.
- When the user starts a simulated emergency, offer to capture a photo using the webcam if permission is granted.
- Display the captured image in the dashboard.
- If camera permission is unavailable, show a clear error message and keep the remaining features working.

### 5. GPS Location
- Use the browser Geolocation API to request the user's permission.
- Display the actual available latitude and longitude.
- Add a Get My Location button.
- Add an Open in Google Maps button that opens the obtained coordinates in Google Maps.
- Show errors if permission is denied or location is unavailable.
- Never use fake coordinates or claim that a location is real when it is simulated.

### 6. Emergency SOS
- Allow the user to enter and save a trusted emergency contact number in the current browser session.
- Generate an emergency message containing the available location.
- Provide a button to open the phone's SMS application using an sms: link where supported.
- Make it clear that opening the SMS application does not mean the message has been sent.
- Never display a false "SMS sent successfully" notification.

### 7. Safety Timer
- Add a configurable countdown timer with Start, Cancel, and Reset controls.
- Display the remaining time every second.
- When the timer reaches zero, display an emergency warning and offer to start the emergency workflow.
- Allow the user to confirm safety and stop the warning.

### 8. I'm Safe Feature
- Add a prominent green I'M SAFE button.
- Allow the user to cancel a simulated emergency.
- Stop the active countdown and update the dashboard status.
- Show a confirmation message.

### 9. Movement Detection Demo
- If supported by the browser, request permission to use device motion events.
- Display available acceleration readings.
- Include a clearly labelled *SIMULATE FALL* button so the feature can be demonstrated on a laptop.
- Trigger the emergency demo when this button is pressed.
- Do not claim that a real fall has been detected when the event was simulated.

### 10. Emergency Contacts
- Allow users to add, edit, and remove emergency contacts.
- Validate the contact fields.
- Display the saved contacts in a contact list.
- Store demo settings locally in the browser where appropriate.

### 11. Activity Log
- Show recent actions, including monitoring started, emergency simulation, location retrieved, photo captured, and safety confirmed.
- Add timestamps to each activity.
- Include a Clear History button.

### 12. Technical Requirements
- Deliver the complete application in a single index.html file.
- Include all HTML, CSS, and JavaScript in that file.
- Implement every button; do not leave empty placeholder buttons.
- Use responsive CSS for laptop and mobile screens.
- Handle browser permission errors gracefully.
- Ensure the JavaScript runs without syntax errors.
- Do not require external libraries or paid APIs.
- Do not pretend that real emergency messages were sent.
- Clearly label simulated functions and real browser features.
- Use a professional interface suitable for a college project demo.

### 13. Final Output
Return the entire ready-to-run index.html code in one code block. Do not split the code into multiple files. Then give simple instructions to save it as index.html and run it in a browser.

*Important:* Generate the complete working application now. Do not provide only a plan, explanation, or partial code. All requested demo features must be integrated into the final output.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.