Skip to content

sweetylearner-max/SafeHER

BranchesTags

Repository files navigation

SafeHer Logo

SafeHER -- Women's Personal Safety App

A Progressive Web App (PWA) built to keep women safe -- anytime, anywhere.
One-tap SOS . Automatic GPS email alerts . Evidence recording . Shake, crash & voice detection (9 languages) . Journey tracking with path deviation . Battery-aware emergency . Fake call escape . Community safety map . Safe walking routes . Live video streaming . Darkness detection . Geo-fence alerts . Multilingual UI . Light/dark theme . Full history log with Chart.js & D3 visualizations . IP geolocation fallback . What3Words address sharing . AI on-device transcription . Live speech transcription . Screen orientation lock . Network-aware alert routing . Contact picker API . Dynamic UI translation (20+ languages) . Works offline

PWA Tech Features Leaflet EmailJS Supabase ORS Charts AI Translation PeerJS IndexedDB Voice License

Table of Contents

  1. About The Project
  2. Complete Feature List
  3. How Each Screen Works
  4. Tech Stack
  5. Project Structure
  6. Application Flow
  7. Step-by-Step Development Process
  8. Technical Deep Dives
  9. Supabase Setup
  10. Getting Started
  11. Deployment
  12. Privacy & Security
  13. Contributing
  14. License
  15. Author

About The Project

What is SafeHER?

SafeHER is a women's personal safety Progressive Web App (PWA) designed to provide instant emergency assistance at the tap of a button. It works entirely in the browser -- no app store download needed -- and can be installed on any smartphone's home screen for a native-like experience.

SafeHER is not just an SOS button -- it is a complete safety ecosystem that combines:

  • Emergency alerting -- automatic GPS + address + snapshot emails to contacts
  • Evidence collection -- video + audio recording with IndexedDB storage
  • Smart threat detection -- shake detection, crash/fall detection + voice keyword recognition in 9 languages
  • Journey protection -- waypoint tracking, path deviation detection, check-in timers
  • Battery-aware emergency -- auto-alerts contacts when battery drops to critical levels
  • Community safety -- crowdsourced unsafe area reports with Supabase + nearby police/hospital/pharmacy via Overpass API
  • Safe navigation -- pedestrian-safe walking routes via OpenRouteService
  • Live video streaming -- real-time WebRTC camera feed to trusted contacts via PeerJS
  • Darkness detection -- ambient light sensor auto-alerts in unlit environments
  • Geo-fence zones -- mark unsafe areas on the map, auto-alert on entry
  • Situational escape -- fake incoming call overlay
  • Multilingual support -- full UI in English, Hindi, and Telugu + voice detection in 9 languages
  • Data visualizations -- Chart.js + D3.js interactive analytics on safety history
  • Full activity history -- every event logged, searchable, filterable, and exportable

Why is it necessary?

Women face safety threats in everyday life -- walking alone at night, commuting, traveling to unfamiliar areas, or being in uncomfortable situations. Existing safety apps often require expensive subscriptions, complex setup, app store downloads, or manual steps during emergencies.

SafeHER eliminates all of these barriers:

Barrier SafeHER's Answer
Expensive subscriptions 100% free -- no charges, ever
App store required Works instantly in any browser
Complex manual steps One tap triggers everything automatically
Needs a backend server Fully client-side -- Supabase used only for optional community reports
Doesn't work offline Cached via Service Worker -- instant loading
Requires signup/login No account -- no signup, no tracking
English only 9-language voice detection (English, Hindi, Tamil, Telugu, Bengali, Marathi, Gujarati, Kannada, Malayalam)
No community reporting Crowdsourced safety map -- report unsafe areas, view others' reports
Don't know safe routes Safe walking routes via OpenRouteService -- tap map to get directions
No way to share live video Live WebRTC stream -- contacts watch your camera feed in real-time

What problem does it solve?

Problem SafeHER's Solution
Can't call for help discreetly Silent SOS -- one tap with minimizable overlay; siren runs in background
Contacts don't know your location Automatic GPS emails with live Google Maps link, address, and driving directions
No evidence of the incident Back camera auto-records video + audio, stored locally in IndexedDB
Phone snatched or thrown Shake detection auto-triggers alert if phone is aggressively shaken
Can't speak during danger Voice detection listens for distress keywords in 9 Indian languages and auto-triggers SOS
Unsafe during commute Journey tracking with waypoints, path deviation detection, and check-in timer
Walking alone at night Battery-aware emergency -- auto-alerts contacts at 15%/10%/5% + low-power GPS mode
Phone dying in unsafe area Battery-aware emergency -- auto-alerts contacts at 15%/10%/5% + low-power GPS mode
No one checking on you Check-in timer auto-alerts contacts if you don't confirm safety
Need an excuse to leave Fake incoming call overlay that looks like a real phone call
Can't track safety history Full event history with date grouping, search, filters, and CSV export
Don't know which areas are unsafe Community safety map -- view crowdsourced reports of harassment, theft, poor lighting within 5km
No safe walking directions Safe walking route -- tap your destination on the map, get pedestrian-safe routing via OpenRouteService
Contacts can't see what's happening Live video stream -- share real-time camera feed via WebRTC; contacts watch on a companion page
Walking in dark/unlit area Darkness detection -- ambient light sensor auto-triggers alert when light drops below 10 lux
Entering a known danger zone Geo-fence alerts -- mark unsafe zones on the map; auto-alerts when you enter one
Phone about to die in danger Crash/fall detection -- detects free-fall + impact; 15s countdown before auto-SOS
App only works in English Multilingual UI -- switch between English, Hindi, Telugu with one tap

Complete Feature List

1. One-Tap SOS Emergency Alert

  • Hold the big red SOS button for 2 seconds to activate
  • Full-screen red emergency overlay with siren sound and vibration pattern
  • "I'm Safe -- Cancel Alert" button to stop everything
  • "Call Police" button for direct emergency call (112)
  • Minimize button -- hides overlay, keeps siren + vibration + recording running in background
  • SOS ACTIVE pill -- fixed red badge at top of screen when minimized; tap to reopen
  • SOS disabled in Safe Mode -- button greyed out, non-functional, no pulse animation
  • Auto-starts Live Stream -- begins WebRTC camera feed for contacts to watch in real-time
  • Auto-sends SMS -- sends SOS text with GPS link to all emergency contacts via native SMS

2. Fully Automatic Email Alerts (via EmailJS)

  • Emails sent automatically to ALL contacts with email addresses -- zero manual steps
  • Each alert email includes:
    • Live GPS location (clickable Google Maps link)
    • Street address (reverse geocoded via OpenStreetMap Nominatim API)
    • Satellite view link (see terrain around the person)
    • Google Maps navigation link (one-tap driving directions)
    • Camera snapshot (auto-uploaded to image host, rendered in email)
    • Timestamp of when SOS was triggered
    • GPS coordinates (latitude & longitude)

3. Real-Time Live Location Updates

  • After SOS, sends updated GPS location emails every 2 minutes to contacts
  • Contacts can track the person's movement in real-time
  • Stops ONLY when "I'm Safe -- Cancel Alert" is explicitly pressed
  • Maximum 30 updates (1 hour) to conserve EmailJS free quota

4. Evidence Recording (Audio & Video)

  • SOS automatically starts back camera video with audio (captures surroundings, not face)
  • Camera torch kept OFF to avoid detection
  • Auto-stops after 1.5 hours for battery conservation
  • Separate audio and video buttons -- each independently toggles its own stream
  • Stream guard -- clicking same button twice won't start duplicate streams
  • Video + audio synced -- getUserMedia with vp8,opus codec
  • 9-step recording pipeline: permission check, single getUserMedia, expanded MIME type fallback, bitrate optimization, chunk logging, test URL verification, 100ms timeslice
  • Recordings stored in IndexedDB -- playable inline, downloadable, deletable

5. Emergency Camera Snapshot

  • At SOS trigger, a snapshot is captured from the back camera
  • Resized (max 480px) for fast upload
  • Uploaded to free image hosting with 3-host fallback chain (Telegraph, freeimage.host, tmpfiles.org)
  • Public URL embedded in email and renders in all email clients

6. Shake / Motion Detection

  • DeviceMotion API detects violent shaking (threshold: 20 m/s squared)
  • Automatically triggers emergency alert
  • 60-second cooldown between triggers to prevent false positives
  • Handles iOS 13+ permission prompts automatically

7. Multi-Language Voice Detection (9 Languages)

  • Uses Web Speech Recognition API for real-time voice monitoring
  • Detects distress keywords in 9 languages (56 keywords total):
    • English: help, save me, emergency, leave me, let me go, stop, please stop, no no no
    • Hindi: bachao, madad, chodo, bachao mujhe, chhod do, mujhe bachao, koi bachao, dur hato
    • Tamil: kaappaathungal, udavi, udavi seiyungal, vidungal, niruthu, ennai vittuvidungal
    • Telugu: kaapaadam, sahayam, sahayam cheyandi, vadilandi, aapandi, nannu vadilandi
    • Bengali: sahajjo, amake bachao, chere dao, thamao, amake chere dao, dure jao
    • Marathi: vachva, vachava, madad kara, sodha, thamba, mala soda, dur vha
    • Gujarati: bachavo, madad karo, mane bachavo, chhodo, ubha raho, mane chhodi do
    • Kannada: kaapadi, sahaya, sahaya maadi, bidi, nilisu, nannu bidi, door hogi
    • Malayalam: rakshikku, sahayam, sahayikku, vidoo, nilkku, enne vidoo, enne rakshikku
  • 5-second countdown before triggering SOS (cancelable with "FALSE ALARM" button)
  • Continuous listening -- auto-restarts when speech recognition ends

8. Journey Tracking with Waypoints & Deviation

  • Built with Leaflet.js + OpenStreetMap tiles
  • Waypoint planning -- tap the map to add up to 10 waypoints
  • Dashed polyline connects waypoints on the map
  • Path deviation detection -- if you move >150m from planned route, auto-alerts contacts
  • Pause / Resume toggle -- single button switches between Pause (amber) and Resume (green)
  • Check-in timer -- set 5-60 minute intervals; auto-alerts if you don't tap "I'm Okay"
  • "I'm Home Safe" button -- ends journey with success summary
  • Share location via WhatsApp, Telegram, Email, Outlook, or clipboard

9. Battery-Aware Emergency

  • Three alert thresholds: 15% (low), 10% (very low + low-power GPS mode), 5% (critical)
  • Battery badge in header -- live percentage with color-coded icon
  • Charging detection -- resets all alert flags when plugged in

10. Fake Call

  • Instantly shows a fake incoming call overlay that looks like a real phone call
  • Accept -- shows in-call timer | Decline -- dismisses overlay

11-42. Additional Features

  • Safe Mode, Wake Lock, Darkness Detection, NTFY Push Notifications, Background Sync
  • Offline Geocoding Cache, Chart.js Activity Insights, D3.js Visualizations
  • Emergency Call Buttons (112/100/1091/108), SMS Alert System, Live Video Stream
  • Community Safety Map (Supabase + Overpass API), Safe Walking Route (OpenRouteService)
  • Multilingual UI (EN/HI/TE), Crash/Fall Detection, Full History & Event Log
  • Emergency Medical Info, Geo-fence Alerts, Contact Picker API
  • AI On-Device Transcription (Whisper), Live Speech Transcription
  • Screen Orientation Lock, Network-Aware Alert Routing, Lingva Translate (20+ languages)
  • IP Geolocation Fallback, What3Words Location Sharing

Tech Stack

Technology Purpose
HTML5 App structure, semantic markup, accessibility
CSS3 Dark theme, glassmorphism cards, responsive mobile-first (max 430px), animations
Vanilla JavaScript (ES Modules) All app logic -- zero frameworks, zero build tools, zero npm
Leaflet.js 1.9.4 Interactive maps, markers, polylines, circles
EmailJS Automatic email from browser (free: 200 emails/month)
Supabase Postgres backend for community safety reports
PeerJS 1.5.2 WebRTC peer-to-peer live video streaming
Chart.js 4.4.0 Interactive charts -- doughnut, bar, line
D3.js v7 Advanced SVG data visualizations
Transformers.js On-device AI speech recognition (Whisper-tiny model)
Lingva Translate Free open-source translation API (20+ languages)
OpenRouteService Pedestrian routing for safe walking routes
Overpass API Nearby safety amenities (police, hospitals, pharmacies)
IndexedDB Client-side DB: recordings, history, transcripts
Service Worker Offline caching, versioned updates

Project Structure

SafeHER/
|-- index.html              # Main app shell -- all 5 screens, overlays, modals, navigation
|-- watch.html              # Companion page -- contacts open this to watch live video stream
|-- manifest.json           # PWA manifest
|-- sw.js                   # Service Worker -- offline caching
|-- netlify.toml            # Netlify deployment config
|-- vercel.json             # Vercel deployment config
|-- README.md               # Project documentation
|
|-- css/
|   |-- style.css           # Complete dark theme UI
|   |-- features.css        # Feature-specific styles
|
|-- js/
|   |-- app.js              # Entry point -- shared AppState, navigation, module init
|   |-- alerts.js           # Toast system, overlays, siren, vibration, notifications
|   |-- contacts.js         # Contact CRUD, EmailJS auto-email, snapshot, live GPS updates
|   |-- sosButton.js        # SOS button logic, activate/deactivate, minimize overlay
|   |-- recorder.js         # MediaRecorder (audio/video), IndexedDB storage, playback
|   |-- mapJourney.js       # Leaflet map, waypoints, deviation detection, check-in timer
|   |-- batteryWatch.js     # Battery monitoring, 3 thresholds, low-power GPS mode
|   |-- safeMode.js         # Safe mode toggle
|   |-- motionDetect.js     # Shake detection + crash/fall detection
|   |-- voiceDetect.js      # Speech recognition, 56 keywords in 9 languages
|   |-- history.js          # History screen UI -- date groups, filter, export CSV
|   |-- historyLogger.js    # logEvent() -- writes to IndexedDB
|   |-- emergencyInfo.js    # Emergency medical info (blood type, allergies, etc.)
|   |-- geofence.js         # Geo-fence unsafe zone system
|   |-- wakeLock.js         # Screen Wake Lock API
|   |-- ambientLight.js     # Ambient Light Sensor -- darkness detection
|   |-- liveStream.js       # WebRTC live video stream via PeerJS
|   |-- communityMap.js     # Community safety map -- Supabase + Overpass
|   |-- safeRoute.js        # Safe walking route -- OpenRouteService
|   |-- i18n.js             # Multilingual UI (EN/HI/TE)
|   |-- aiTranscription.js  # On-device Whisper AI transcription
|   |-- liveTranscript.js   # Live speech transcription
|   |-- networkRouter.js    # Network-aware alert routing
|   |-- ipGeolocation.js    # IP geolocation fallback
|   |-- what3words.js       # What3Words address sharing
|   |-- lingvaTranslate.js  # Dynamic UI translation (20+ languages)
|   |-- db.js               # IndexedDB helpers
|   |-- (+ more modules)
|
|-- assets/
    |-- icons/
    |   |-- icon-192.svg
    |   |-- icon-512.svg
    |-- i18n/
        |-- en.json
        |-- hi.json
        |-- te.json

Getting Started

Prerequisites

  • Any modern web browser (Chrome, Edge, Firefox, Safari)
  • Smartphone for full features (GPS, camera, accelerometer, microphone)

Installation

  1. Clone the repository:

    git clone https://github.com/sweetylearner-max/SafeHER.git
cd SafeHER

  2. Serve locally (any static server):

    # Python
python -m http.server 8000

# Node.js
npx serve .

# VS Code Live Server
# Right-click index.html then "Open with Live Server"

  3. Open in browser:

    http://localhost:8000

  4. Install as PWA:

    • Android (Chrome): Tap menu then "Install app" / "Add to Home Screen"
    • iOS (Safari): Tap Share then "Add to Home Screen"
    • Desktop (Chrome/Edge): Click install icon in address bar

EmailJS Setup (for automatic email alerts)

  1. Sign up at emailjs.com (free -- 200 emails/month)
  2. Create an Email Service (connect Gmail/Outlook)
  3. Create an Email Template with variables: {{to_email}}, {{location_link}}, {{address}}, {{snapshot_url}}
  4. Update credentials in index.html: 
    emailjs.init('YOUR_PUBLIC_KEY');
  5. Update IDs in js/contacts.js: 
    emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams)

Deployment

GitHub Pages

git push origin main
# Settings > Pages > Source: main branch > Save

Netlify

  • Drag and drop folder or connect GitHub repo
  • netlify.toml already configured

Vercel

  • Import GitHub repo at vercel.com
  • vercel.json already configured

Supabase Setup

The Community Safety Map requires a Supabase Postgres table.

  1. Go to supabase.com and create a free project
  2. Run this SQL in the SQL Editor:
CREATE TABLE safety_reports (
  id BIGSERIAL PRIMARY KEY,
  lat DOUBLE PRECISION NOT NULL,
  lng DOUBLE PRECISION NOT NULL,
  type TEXT DEFAULT 'unsafe',
  description TEXT DEFAULT '',
  severity TEXT DEFAULT 'medium',
  anonymous BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT now()
);

ALTER TABLE safety_reports ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Allow public read" ON safety_reports
  FOR SELECT USING (true);

CREATE POLICY "Allow public insert" ON safety_reports
  FOR INSERT WITH CHECK (true);
  1. Copy your Project URL and anon key from Settings > API
  2. Update js/communityMap.js lines 11-12 with your credentials

Privacy & Security

  • No server / No backend -- core safety features run entirely in your browser
  • No data collection -- no analytics, no tracking, no telemetry
  • Recordings stored locally in IndexedDB -- never uploaded anywhere
  • No account required -- no signup, no login, no password
  • Medical info stays on-device -- stored only in localStorage
  • Community reports are anonymous -- no user ID, no IP stored
  • Open source -- audit every line of code yourself

Contributing

Contributions are welcome!

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is open source and available under the MIT License.

Author

Developed by Akanksha

Built with love for women's safety
Because every woman deserves to feel safe.

About

sweetylearner-max.github.io/SafeHER/

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages