winter-hospitals

byMohit Hadap

You are a senior full-stack engineer tasked with building a complete, production-ready web application called **BedFinder** — a real-time hospital bed availability finder for emergencies. Deliver all code in full, with no placeholders, no truncation, and no "add your logic here" comments. Every file must be complete and immediately runnable. --- **Tech Stack** - **Frontend:** Single HTML file (`index.html`) — Vanilla JS, CSS (no frameworks), Leaflet.js for maps, Chart.js for admin charts, Inter or Poppins font via Google Fonts - **Backend:** Python Flask REST API (`app.py`) - **Database:** SQLite (demo mode) — initialized and seeded on first run - **Real-time updates:** Flask-SocketIO broadcasting bed count changes to connected clients - **No external paid APIs required** — Leaflet.js replaces Google Maps --- **Deliver these files:** 1. `app.py` — Flask backend with all endpoints, SQLite setup, seeding logic, and SocketIO 2. `index.html` — Complete frontend (all HTML, CSS, JS in one file) 3. `requirements.txt` — All Python dependencies --- ## BACKEND (`app.py`) ### Database Schema — SQLite **`hospitals` table:** `id, name, lat, lng, address, phone, last_updated` **`beds` table:** `id, hospital_id, bed_type` (values: `ICU`, `General`, `Oxygen`, `Ventilator`), `total, available, updated_at` **`notifications` table:** `id, hospital_id, patient_eta, timestamp` **`bed_history` table:** `id, hospital_id, bed_type, available, recorded_at` ### Seed Data On first run, seed the database with **6 fictional Nagpur-area hospitals** with realistic lat/lng coordinates, varied bed availability, and all four bed types per hospital. Availability should vary realistically — some critical (ICU nearly full), some comfortable. ### API Endpoints ``` GET /api/hospitals?lat=&lng=&radius=&type= ``` Returns hospitals within `radius` km of `lat/lng`, filtered by bed `type` if provided. Include distance from query point, and a nested bed breakdown for each hospital. Sort by distance ascending. ``` GET /api/hospitals/<id> ``` Returns full detail for one hospital: all fields, full bed breakdown by type, address, phone. ``` POST /api/hospitals/<id>/notify ``` Accepts JSON `{ "patient_eta": "<minutes>" }`. Logs to `notifications` table. Emits a SocketIO event `hospital_alert` with hospital id and ETA. ``` PUT /api/hospitals/<id>/beds ``` Accepts JSON `{ "bed_type": "ICU", "available": 3, "total": 10 }`. Updates `beds` table, logs to `bed_history`, emits SocketIO event `beds_updated` with updated hospital data to all connected clients. ``` GET /api/hospitals/<id>/history ``` Returns bed count history for the last 24 hours from `bed_history`, grouped by `bed_type`, suitable for Chart.js line chart rendering. ### Admin Auth `POST /api/admin/login` — accepts `{ "pin": "1234" }`, returns `{ "success": true }` or `{ "success": false }`. No session needed; frontend stores auth state in memory. ### SocketIO Emit `beds_updated` whenever beds change. Frontend listens and refreshes card data without full page reload. --- ## FRONTEND (`index.html`) ### Color System | Token | Value | |---|---| | Background | `#0A1628` (deep navy) | | Card background | `#FFFFFF` | | Primary accent | `#E63946` (red — urgency, CTA) | | Available (green) | `#2DC653` | | Limited (amber) | `#F4A261` | | Critical (red) | `#E63946` | | Text on dark | `#F0F4FF` | **Availability thresholds:** - Green: >50% beds available - Amber: 10–50% available - Red: <10% or full Font: Poppins via Google Fonts. Mobile-first responsive layout. --- ### Screen 1 — Landing / Search - Navbar: `🏥 BedFinder` logo left, tagline `"Find a bed. Save a life."` right, styled in navy with white text - Large centered search bar: `"Search city or use current location"` with a **📍 Use My Location** button that triggers browser Geolocation API - **Search Radius slider:** styled range input, 1km–50km, labeled `"Search Radius: Xkm"` updating live - **Filter chips:** `All | ICU | Oxygen | Ventilator | General Ward` — toggle-style, red when active - **"Find Now"** CTA button in `#E63946` red, full-width on mobile --- ### Screen 2 — Results View **Desktop:** Split layout — left 40% scrollable hospital cards, right 60% Leaflet.js map **Mobile:** Stacked — map on top (collapsed, ~200px), cards below **Map:** - Leaflet.js initialized centered on Nagpur - Custom circle markers colored green/amber/red per hospital availability - Popup on marker click shows hospital name + quick bed summary **Hospital Cards:** Each card displays: - Hospital name + `"X.X km away"` badge - Horizontal availability progress bar (colored green/amber/red) - Bed breakdown row: `ICU: X | General: X | Oxygen: X | Ventilator: X` - Two buttons: `"🗺 Get Directions"` (opens Google Maps link) and `"📢 Notify Hospital"` (triggers notify modal) - `"Last updated: X mins ago"` timestamp in small muted text Cards are **sorted by distance**. The full list re-fetches from `/api/hospitals` every **30 seconds**. SocketIO `beds_updated` events update individual cards in real-time without full re-fetch. --- ### Hospital Detail Modal (on card click) Slides up as a modal overlay: - Full name, address, phone number - Complete bed breakdown by type with individual progress bars - Small embedded Leaflet map zoomed to that hospital (zoom level 15) - `"📍 I'm on my way"` button → calls `POST /api/hospitals/<id>/notify` with a patient ETA input field (dropdown: 5 / 10 / 15 / 20 / 30 mins) - Close button top-right --- ### Screen 3 — Admin Panel (`/admin` route, same HTML file, separate view) **Access:** Show a PIN entry screen first. Hardcoded PIN: `1234`. On success, reveal the admin dashboard. **Admin Dashboard:** - Dropdown to select a hospital - Form with fields: Bed Type (select: ICU/General/Oxygen/Ventilator), Available count, Total count - `"Update Beds"` submit button → calls `PUT /api/hospitals/<id>/beds` - After update, show a success toast notification - **Line chart (Chart.js):** Shows bed count trends over the last 24 hours for the selected hospital. Fetches from `GET /api/hospitals/<id>/history`. Separate lines per bed type, color-coded. --- ### UI Polish Requirements - Rounded cards (`border-radius: 16px`), subtle box shadows (`0 4px 20px rgba(0,0,0,0.08)`) - Smooth CSS transitions on all interactive elements (hover, modal open/close) - Large, readable fonts — minimum 16px body, 22px+ headings - Loading skeleton state while fetching hospitals (animated pulse placeholder cards) - Error state card if API is unreachable: `"⚠️ Could not reach BedFinder servers. Please try again."` - Toast notifications for actions (notify sent, bed update success) - The entire experience must feel **instantly understandable under panic conditions** — no decorative clutter, high contrast, clear hierarchy --- **Deliver the complete, runnable code for all three files. Do not omit any section. Do not use placeholder comments. Every function, route, query, and UI component must be fully implemented.**