Emergency Contact Web App

Fast, mobile‑first emergency contact and medical info tool built with HTML, CSS, and Vanilla JavaScript.
No backend — all data stored locally in the browser (localStorage). Designed for real‑world use and hackathon impact: instant access to life‑saving contacts and medical details.

---

Tech Stack & Tools

Primary technologies

• HTML5 — semantic markup, mobile‑first layout.
• CSS3 — responsive, card‑based UI, dark mode, accessible focus states.
• Vanilla JavaScript — modular code (storage.js, ui.js, app.js), no frameworks.
• PWA — manifest.json + service-worker.js for installability and offline UI.
• localStorage — persistent client‑side storage for contacts, medical info, and settings.
• Accessibility — larger tap targets, keyboard focus outlines, modal focus trap, ARIA attributes.

Dev & deployment

• Git for version control.
• GitHub for repository hosting and collaboration.
• Netlify (or any static host) for quick deployment of the static site.
• No backend or server required — static files only.

---

What it does (short)

• Add / edit / delete emergency contacts (name, relationship, phone, category, priority).
• One‑tap call via tel: links.
• Save medical info (blood group, allergies, conditions, medications, notes).
• Emergency Call button dials the priority contact.
• Search, filter, dark mode, export/import JSON with preview (merge/replace).
• Works offline and is installable as a PWA.

---

Quick start (local)

1. Download or clone the repo.
2. Open index.html in a browser for basic use.
   For PWA/service worker features, run a local server:
   • Python: python -m http.server 8000
   • Node: npx http-server -c-1
   • VS Code: Live Server extension
3. Visit http://localhost:8000.
4. Add contacts, set a priority contact, save medical info, test Emergency Call, export/import.

---

Data & backup

• Storage keys:
  • ec_contacts — contacts array
  • ec_medical — medical object
  • ec_settings — settings object (dark mode, language)
• Export: ec-backup.json includes contacts, medical, settings, and exportedAt.
• Import: preview modal shows contacts; choose Merge (merge by id) or Replace.

---