🩸 Gaibandha District Blood Bank

Every Drop Saves a Life — a production-ready, installable Progressive Web App that connects blood donors, patients, volunteers, hospitals, blood-collection centres, ambulance services and administrators across Gaibandha and Bangladesh.

No build step. No backend required to run. Open index.html from any static server and everything works — donor search, emergency requests, digital ID cards, dashboards and an admin panel — backed by a local-first data layer that is Firebase-ready when you want a real backend.

---

✨ Features

• Home — premium hero with animated blood drop, live blood availability, statistics, recent donors/requests, top volunteers, partner hospitals, testimonials and FAQ.
• Find Blood / Find Donor — instant smart search with filters (group, division, district, upazila, gender, age, availability, verified) and sorting; compatible-donor matching; CSV export.
• Emergency Blood Request — create + broadcast to matching donors, status timeline, accept/respond, nearby-donor suggestions.
• Become a Donor — full registration that issues a Digital Donor ID card with QR code, downloadable as PNG / PDF, plus a donation Certificate.
• Donor profiles & QR verification — public verification page reachable by scanning a donor's QR.
• Hospitals & ambulances — directory with embedded map, one-tap call and Google Maps directions (uses your location).
• Camps & volunteers — register for camps, volunteer sign-up, leaderboard.
• News, Health Tips, About, Contact — content pages with a working contact form.
• Dashboard — live Chart.js analytics (donation trend, requests by group, availability, donors by area).
• Admin panel — manage donors, requests, hospitals, volunteers and camps; announcements; audit log. (Role-based.)
• Tools — eligibility calculator, BMI calculator, blood-compatibility chart, AI-style smart matching, voice search, download center.
• PWA — installable on Android / Windows / macOS / Linux / iOS (where supported), offline mode, service-worker caching, background-sync queue, push-ready, app shortcuts, splash screen, auto-update.
• UX — dark / light / automatic theme, glassmorphism, micro-animations (AOS/GSAP), skeleton loading, responsive down to fold devices, accessibility (ARIA, high-contrast, large fonts).

---

🚀 Run locally

Any static file server works (the app is plain HTML/CSS/JS — no build):

# Python
python3 -m http.server 8000

# or Node
npx http-server -p 8000

Then open http://localhost:8000.

A service worker is registered, so use a server (not file://) for full PWA behaviour.

Demo admin

email:    admin@blood.bd
password: admin1234

The app seeds realistic demo data (donors, hospitals, requests, camps, volunteers, news) into localStorage on first load. Reset it any time from Profile → Settings → Reset demo data.

---

🗂️ Project structure

.
├── index.html              # app shell (loads CDN libs + JS modules)
├── manifest.json           # PWA manifest (icons, shortcuts, screenshots)
├── service-worker.js       # caching, offline, background sync, push
├── offline.html            # offline fallback page
├── browserconfig.xml       # Windows tile config
├── css/styles.css          # theme, glassmorphism, components, dark/light
├── icons/                  # generated PWA icons + screenshots
├── scripts/gen_icons.py    # regenerate icons/screenshots (PIL)
└── js/
    ├── app.js              # bootstrap: seed, routes, shell, PWA
    ├── tailwind.config.js  # Tailwind Play CDN config
    ├── data/               # bd-geo (8 div/64 dist/upazilas/unions), blood, seed
    ├── lib/                # db, store, auth, firebase, utils, router, ui, pwa, charts
    ├── components/         # navbar, footer, cards, idcard
    └── pages/              # home, find, donor, request, hospitals, camps,
                            # content, dashboard, tools, admin, auth, profile

---

🔌 Connecting Firebase (optional)

The data layer mimics Firestore's API. To go live:

1. Fill your config in js/lib/firebase.js.
2. Swap the local db implementation in js/lib/db.js for Firestore calls (the method surface — all/get/where/add/update/remove/set — maps 1:1).
3. Phone-OTP / Google login buttons activate automatically once Firebase Auth is configured.

---

🛠️ Tech

Vanilla HTML5 / CSS3 / JavaScript (ES modules) · Tailwind CSS (Play CDN) · Bootstrap Icons · Chart.js · AOS + GSAP · QRCode.js · jsPDF + html2canvas · full PWA (manifest + service worker). Backend-ready for Firebase (Auth, Firestore, Storage, Cloud Messaging).

---

📄 License

Released for the community of Gaibandha. Use it to save lives. ❤️