Initial commit for Hugging Face Docker Spaces

.dockerignore

@@ -0,0 +1,14 @@
+.venv
+__pycache__
+.git
+.gitignore
+.gitattributes
+Dockerfile
+.dockerignore
+README.md
+*.pkl
+*.pyc
+*.pyo
+*.pyd
+.db
+.DS_Store

.gitattributes

@@ -0,0 +1,2 @@
+app/models/heart_disease_model.pkl filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,117 @@
+# Python
+*.py[cod]
+*$py.class
+*.so
+*.egg
+*.egg-info
+dist/
+build/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+pip-wheel-metadata/
+share/python-wheels/
+*.manifest
+*.spec
+
+# Virtual Environments
+.venv/
+venv/
+ENV/
+env/
+.virtualenv/
+
+# PyCharm
+.idea/
+*.iml
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# VS Code
+.vscode/
+*.code-workspace
+.history/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+*.ipynb
+
+# Flask
+instance/
+.webassets-cache
+.env
+.flaskenv
+
+# Testing
+.pytest_cache/
+.coverage
+htmlcov/
+.tox/
+.nox/
+
+# macOS
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Windows
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+*.lnk
+
+# Linux
+*~
+
+# Logs
+*.log
+logs/
+*.log.*
+
+# Database
+*.db
+*.sqlite
+*.sqlite3
+
+# Environment variables
+.env
+.env.local
+.env.*.local
+
+# IDEs
+*.swp
+*.swo
+*.swn
+.project
+.classpath
+.settings/
+
+# Backup files
+*.bak
+*.tmp
+*.temp
+
+# Cache
+__pycache__/
+*.pyc
+.cache/
+
+# Model files (uncomment if you don't want to commit large model files)
+*.pkl
+*.h5
+*.pb
+*.pth
+*.onnx

Dockerfile

@@ -0,0 +1,35 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+ENV MODEL_PATH=app/models/heart_disease_model.pkl
+
+# Set work directory
+WORKDIR /code
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    libgomp1 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy project files
+COPY . .
+
+# Create a non-root user and switch to it for Hugging Face Spaces security
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+# Expose the port FastAPI will run on (Hugging Face default)
+EXPOSE 7860
+
+# Command to run the application using uvicorn
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,174 @@
+---
+title: HeartCare Risk Prediction System
+emoji: 🌡️
+colorFrom: red
+colorTo: pink
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# HeartCare Risk Prediction System
+
+![Python](https://img.shields.io/badge/Python-3.9+-3776AB?style=for-the-badge&logo=python&logoColor=white)
+![FastAPI](https://img.shields.io/badge/FastAPI-0.100.0+-009688?style=for-the-badge&logo=fastapi&logoColor=white)
+![Scikit-Learn](https://img.shields.io/badge/Scikit--Learn-1.3+-F7931E?style=for-the-badge&logo=scikitlearn&logoColor=white)
+![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)
+
+An end-to-end machine learning–based web application for predicting cardiovascular disease risk using lifestyle and health attributes. This system provides a production-ready API and a modern web interface to help users assess their heart health through a series of clinically relevant questions.
+
+---
+
+## 📋 Table of Contents
+- [Project Overview](#-project-overview)
+- [Key Features](#-key-features)
+- [Technology Stack](#-technology-stack)
+- [Installation Instructions](#-installation-instructions)
+- [Usage Guide](#-usage-guide)
+- [Project Structure](#-project-structure)
+- [Contribution Guidelines](#-contribution-guidelines)
+- [License](#-license)
+
+---
+
+## 🌟 Project Overview
+
+The **HeartCare Risk Prediction System** is designed to provide quick and accessible heart disease risk assessments. By processing variables such as age, lifestyle habits (smoking, alcohol, diet), and medical history (diabetes, checkups), the underlying machine learning model predicts the probability of heart-related complications.
+
+### Key Capabilities
+- **Real-time Prediction**: Immediate risk assessment using a trained Random Forest model.
+- **Data Validation**: Strict input checking via Pydantic schemas to ensure diagnostic accuracy.
+- **User-Friendly UI**: Modern, glassmorphism-inspired design for a premium user experience.
+- **RESTful API**: Fully documented API endpoints for integration with other healthcare systems.
+
+---
+
+## 🛠 Technology Stack
+
+| Component | Technology |
+| :--- | :--- |
+| **Backend Framework** | [FastAPI](https://fastapi.tiangolo.com/) |
+| **Machine Learning** | [Scikit-learn](https://scikit-learn.org/) (Random Forest) |
+| **Data Validation** | [Pydantic](https://docs.pydantic.dev/) |
+| **Frontend** | HTML5, Vanilla CSS, JavaScript |
+| **Server** | Uvicorn (ASGI) |
+| **Large File Storage** | [Git LFS](https://git-lfs.com/) |
+
+---
+
+## 📥 Installation Instructions
+
+### System Requirements
+- **OS**: Windows 10/11, macOS, or Linux
+- **Python**: 3.9 or higher
+- **Disk Space**: ~500MB (including the ML model)
+- **RAM**: 2GB minimum
+
+### Step-by-Step Setup
+
+1. **Clone the Repository** (Ensure Git LFS is installed):
+   ```bash
+   git clone https://github.com/mohsinkp02/HeartCare-Risk-Prediction-System.git
+   cd HeartCare-Risk-Prediction-System
+   ```
+
+2. **Initialize Git LFS and Pull Model**:
+   ```bash
+   git lfs install
+   git lfs pull
+   ```
+
+3. **Create a Virtual Environment**:
+   ```bash
+   # Windows
+   python -m venv .venv
+   .venv\Scripts\activate
+
+   # macOS/Linux
+   python3 -m venv .venv
+   source .venv/bin/activate
+   ```
+
+4. **Install Dependencies**:
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+---
+
+## 🚀 Usage Guide
+
+### Running the Application
+
+To launch the web server and application, execute the runner script:
+
+```bash
+python run_app.py
+```
+
+- **Website**: Access at [http://localhost:8000](http://localhost:8000)
+- **API Documentation**: Interactive Swagger docs at [http://localhost:8000/docs](http://localhost:8000/docs)
+
+### Configuration Options
+
+| Environment Variable | Default | Description |
+| :--- | :--- | :--- |
+| `APP_NAME` | HeartCare | The display name of the application |
+| `API_V1_STR` | /api/v1 | The prefix for all API endpoints |
+| `HOST` | 0.0.0.0 | Network interface to bind to |
+| `PORT` | 8000 | Port number for the web server |
+
+---
+
+## 📂 Project Structure
+
+```mermaid
+graph TD
+    Root[HeartCare-Risk-Prediction-System/] --> App[app/]
+    Root --> Config[.gitattributes, .gitignore, README.md, requirements.txt]
+    Root --> Runner[run_app.py]
+    
+    App --> API[api/ - Routes & Endpoints]
+    App --> Core[core/ - App Config]
+    App --> Models[models/ - Trained .pkl Model]
+    App --> Schemas[schemas/ - Pydantic Validation]
+    App --> Services[services/ - Business Logic]
+    App --> Static[static/ - CSS, JS, Images]
+    App --> Templates[templates/ - HTML Files]
+    App --> Main[main.py - Entry Point]
+```
+
+---
+
+## 🤝 Contribution Guidelines
+
+We welcome contributions to HeartCare! To contribute, follow these steps:
+
+### Reporting Issues
+- Use the **GitHub Issues** tab to report bugs or request features.
+- Provide a clear description and steps to reproduce the issue.
+
+### Pull Request Process
+1. Fork the repository.
+2. Create a new branch (`git checkout -b feature/AmazingFeature`).
+3. Commit your changes following our **Coding Standards** (PEP 8 for Python).
+4. Push to the branch.
+5. Open a Pull Request for review.
+
+### Coding Standards
+- Follow [PEP 8](https://peps.python.org/pep-0008/) for style.
+- Include docstrings for all new functions and classes.
+- Ensure all tests pass before submitting.
+
+---
+
+## ⚖️ License
+
+Copyright © 2024 Mohsin Khan.
+
+Distributed under the **MIT License**. See `LICENSE` for more information.
+
+---
+
+> [!NOTE]  
+> This system is intended for informational purposes and should not replace professional medical advice.

app/api/routes.py

@@ -0,0 +1,32 @@
+from fastapi import APIRouter, HTTPException, Depends
+from app.schemas.prediction import PredictionInput, PredictionOutput
+from app.services.preprocessing import PreprocessingService
+from app.services.model_service import ModelService
+import logging
+
+router = APIRouter()
+logger = logging.getLogger(__name__)
+
+@router.post("/predict", response_model=PredictionOutput)
+async def predict(input_data: PredictionInput):
+    """
+    Predict heart disease risk based on patient data.
+    """
+    try:
+        # 1. Convert Pydantic model to dict (using alias for keys to match model features)
+        data_dict = input_data.model_dump(by_alias=True)
+        
+        # 2. Preprocess
+        input_vector = PreprocessingService.process_input(data_dict)
+        
+        # 3. Predict
+        result = ModelService.predict(input_vector)
+        
+        return result
+    except Exception as e:
+        logger.error(f"Prediction error: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Internal Server Error: {str(e)}")
+
+@router.get("/health")
+async def health_check():
+    return {"status": "healthy", "service": "heart-disease-prediction"}

app/core/config.py

@@ -0,0 +1,21 @@
+import os
+from pydantic_settings import BaseSettings
+from functools import lru_cache
+
+class Settings(BaseSettings):
+    APP_NAME: str = "Heart Disease Prediction API"
+    VERSION: str = "1.0.0"
+    API_V1_STR: str = "/api/v1"
+    
+    # Model Configuration
+    MODEL_PATH: str = os.getenv("MODEL_PATH", "app/models/heart_disease_model.pkl")
+    
+    # Logging
+    LOG_LEVEL: str = "INFO"
+    
+    class Config:
+        env_file = ".env"
+
+@lru_cache()
+def get_settings():
+    return Settings()

app/main.py

@@ -0,0 +1,76 @@
+from fastapi import FastAPI, Request
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from fastapi.responses import HTMLResponse
+from fastapi.middleware.cors import CORSMiddleware
+from prometheus_fastapi_instrumentator import Instrumentator
+from app.api.routes import router as api_router
+from app.core.config import get_settings
+from app.services.model_service import ModelService
+from contextlib import asynccontextmanager
+import os
+
+settings = get_settings()
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    # Load model on startup
+    ModelService.load_model()
+    yield
+    # Clean up resources if needed
+
+app = FastAPI(
+    title=settings.APP_NAME,
+    version=settings.VERSION,
+    lifespan=lifespan,
+    docs_url="/docs",
+    redoc_url="/redoc"
+)
+
+# CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"], # In production, restrict this to specific domains
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Get absolute path to app directory
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+STATIC_DIR = os.path.join(BASE_DIR, "static")
+TEMPLATES_DIR = os.path.join(BASE_DIR, "templates")
+
+# Mount Static Files
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+
+# Templates
+if os.path.exists(TEMPLATES_DIR):
+    templates = Jinja2Templates(directory=TEMPLATES_DIR)
+else:
+    print(f"Warning: Templates directory not found at {TEMPLATES_DIR}")
+    # Fallback to avoid crash on import, but routes will fail
+    templates = Jinja2Templates(directory=".")
+
+# Frontend Routes
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+@app.get("/calculate", response_class=HTMLResponse)
+async def read_calculate(request: Request):
+    return templates.TemplateResponse("calculate.html", {"request": request})
+
+@app.get("/recommendation/{risk_level}", response_class=HTMLResponse)
+async def read_recommendation(request: Request, risk_level: int):
+    return templates.TemplateResponse("recommendation.html", {"request": request, "risk_level": risk_level})
+
+# API Routes
+app.include_router(api_router, prefix=settings.API_V1_STR)
+
+# Prometheus Metrics
+Instrumentator().instrument(app).expose(app)
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run("app.main:app", host="0.0.0.0", port=8000, reload=True)

app/models/heart_disease_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:706b4f8b470fee5ab80108e4e42381d9bedcd2b88a918722430673f5805defeb
+size 375819353

app/schemas/prediction.py

@@ -0,0 +1,56 @@
+from pydantic import BaseModel, Field
+from typing import Literal
+
+class PredictionInput(BaseModel):
+    general_health: Literal['Excellent', 'Very_Good', 'Good', 'Fair', 'Poor'] = Field(..., alias="General_Health")
+    checkup: Literal['Within 1 year', '1-2 years', '2-5 years', '5+ years', 'Never'] = Field(..., alias="Checkup")
+    exercise: Literal['0', '1'] = Field(..., alias="Exercise")
+    skin_cancer: Literal['0', '1'] = Field(..., alias="Skin_Cancer")
+    other_cancer: Literal['0', '1'] = Field(..., alias="Other_Cancer")
+    depression: Literal['0', '1'] = Field(..., alias="Depression")
+    diabetes: Literal['No', 'Borderline', 'During Pregnancy', 'Yes'] = Field(..., alias="Diabetes")
+    arthritis: Literal['0', '1'] = Field(..., alias="Arthritis")
+    sex: Literal['0', '1'] = Field(..., alias="Sex")
+    age: float = Field(..., ge=18, le=100, alias="Age")
+    height: float = Field(..., ge=50, le=300, alias="Height")
+    weight: float = Field(..., ge=10, le=500, alias="Weight")
+    bmi: float = Field(..., ge=5, le=100, alias="BMI")
+    smoking: Literal['0', '1'] = Field(..., alias="Smoking")
+    alcohol: float = Field(..., ge=0, le=30, alias="Alcohol") # Assuming days/month? Logic in original app was weird (0-30)
+    fruit: float = Field(..., ge=0, le=100, alias="Fruit")
+    green_vegetables: float = Field(..., ge=0, le=100, alias="Green_Vegetables")
+    fried_potato: float = Field(..., ge=0, le=100, alias="Fried_Potato")
+
+    class Config:
+        populate_by_name = True
+        json_schema_extra = {
+            "example": {
+                "General_Health": "Good",
+                "Checkup": "Within 1 year",
+                "Exercise": "1",
+                "Skin_Cancer": "0",
+                "Other_Cancer": "0",
+                "Depression": "0",
+                "Diabetes": "No",
+                "Arthritis": "0",
+                "Sex": "0",
+                "Age": 30,
+                "Height": 175,
+                "Weight": 70,
+                "BMI": 22.5,
+                "Smoking": "0",
+                "Alcohol": 0,
+                "Fruit": 10,
+                "Green_Vegetables": 10,
+                "Fried_Potato": 0
+            }
+        }
+
+class PredictionOutput(BaseModel):
+    probability: float
+    class_label: int = Field(..., alias="class")
+    risk_level: int
+    risk_label: str
+
+    class Config:
+        populate_by_name = True

app/services/model_service.py

@@ -0,0 +1,74 @@
+import joblib
+import os
+import logging
+import numpy as np
+from app.core.config import get_settings
+
+logger = logging.getLogger(__name__)
+settings = get_settings()
+
+class ModelService:
+    _model = None
+
+    @classmethod
+    def load_model(cls):
+        if cls._model is not None:
+            return
+
+        try:
+            if os.path.exists(settings.MODEL_PATH):
+                logger.info(f"Loading model from {settings.MODEL_PATH}...")
+                cls._model = joblib.load(settings.MODEL_PATH)
+                logger.info("Model loaded successfully!")
+            else:
+                logger.error(f"Model file {settings.MODEL_PATH} not found! Using Mock Model for demonstration.")
+                cls._model = MockModel()
+        except Exception as e:
+            logger.error(f"Failed to load model: {e}")
+            cls._model = MockModel()
+
+    @classmethod
+    def predict(cls, input_vector: list) -> dict:
+        if cls._model is None:
+            cls.load_model()
+        
+        input_array = [input_vector]
+        
+        # Predict
+        try:
+            prediction_prob = cls._model.predict_proba(input_array)[0][1]
+            prediction_class = int(cls._model.predict(input_array)[0])
+        except AttributeError:
+             # Fallback for mock model or weird scikit versions
+            prediction_prob = 0.5
+            prediction_class = 0
+
+        risk_level, risk_label = cls._calculate_risk_level(prediction_prob)
+
+        return {
+            "probability": float(prediction_prob),
+            "class": prediction_class,
+            "risk_level": risk_level,
+            "risk_label": risk_label
+        }
+
+    @staticmethod
+    def _calculate_risk_level(prob: float):
+        if prob <= 0.20:
+            return 1, "Very Low"
+        elif prob <= 0.40:
+            return 2, "Low"
+        elif prob <= 0.60:
+            return 3, "Moderate"
+        elif prob <= 0.80:
+            return 4, "High"
+        else:
+            return 5, "Very High"
+
+class MockModel:
+    """Mock model for when the real model is missing or fails to load."""
+    def predict_proba(self, X):
+        return np.array([[0.5, 0.5]]) # 50% chance
+    
+    def predict(self, X):
+        return np.array([0])

app/services/preprocessing.py

@@ -0,0 +1,85 @@
+from typing import Any, Dict, List
+import logging
+
+logger = logging.getLogger(__name__)
+
+# Feature Configuration (18 Features) - EXACT ORDER
+MODEL_FEATURES = [
+    'General_Health', 'Checkup', 'Exercise', 'Skin_Cancer', 'Other_Cancer', 
+    'Depression', 'Diabetes', 'Arthritis', 'Sex', 'Age', 'Height', 'Weight', 
+    'BMI', 'Smoking', 'Alcohol', 'Fruit', 'Green_Vegetables', 'Fried_Potato'
+]
+
+SCALERS = {
+    'Weight': {'min': 29.94, 'max': 136.0},
+    'Height': {'min': 142.0, 'max': 200.0},
+    'BMI': {'min': 12.87, 'max': 43.28},
+    'Age': {'min': 21, 'max': 82},
+    'Fruit': {'min': 0, 'max': 56.0},
+    'Green_Vegetables': {'min': 0, 'max': 44.0},
+    'Fried_Potato': {'min': 0, 'max': 17.0},
+    'Alcohol': {'min': 0, 'max': 15.0},
+    'General_Health': {
+        'Excellent': 1.0, 'Very_Good': 0.75, 'Good': 0.5, 'Fair': 0.25, 'Poor': 0.0
+    },
+    'Checkup': {
+        'Within 1 year': 1.0, '1-2 years': 0.75, '2-5 years': 0.5, '5+ years': 0.25, 'Never': 0.0
+    },
+    'Diabetes': {
+        'No': 0.0, 'Borderline': 0.33, 'During Pregnancy': 0.66, 'Yes': 1.0
+    },
+    'Sex': {'Female': 0.0, 'Male': 1.0, '0': 0.0, '1': 1.0},
+    'Exercise': {'0': 0.0, '1': 1.0},
+    'Smoking': {'0': 0.0, '1': 1.0},
+    'Skin_Cancer': {'0': 0.0, '1': 1.0},
+    'Other_Cancer': {'0': 0.0, '1': 1.0},
+    'Depression': {'0': 0.0, '1': 1.0},
+    'Arthritis': {'0': 0.0, '1': 1.0}
+}
+
+class PreprocessingService:
+    @staticmethod
+    def process_input(data: Dict[str, Any]) -> List[float]:
+        input_vector = []
+        for feature in MODEL_FEATURES:
+            raw_val = data.get(feature)
+            processed_val = PreprocessingService._process_single_value(raw_val, feature)
+            input_vector.append(processed_val)
+        return input_vector
+
+    @staticmethod
+    def _process_single_value(value: Any, feature_name: str) -> float:
+        val_str = str(value).lower()
+        
+        if feature_name in SCALERS:
+            config = SCALERS[feature_name]
+            
+            # Numeric Range Scaling
+            if isinstance(config, dict) and 'min' in config:
+                try:
+                    val = float(value)
+                    norm_val = (val - config['min']) / (config['max'] - config['min'])
+                    return max(0.0, min(1.0, norm_val))
+                except (ValueError, TypeError):
+                    logger.warning(f"Failed to convert numeric value '{value}' for feature '{feature_name}'. Defaulting to 0.0.")
+                    return 0.0
+            
+            # Categorical Logic
+            elif isinstance(config, dict):
+                # Exact match
+                if str(value) in config:
+                    return config[str(value)]
+                
+                # Check normalized key (e.g. for "Very_Good" vs "Very Good" if needed, though Pydantic handles validation)
+                # But let's keep the logic from original app just in case
+                if val_str in ['on', 'true', 'yes']: return 1.0
+                if val_str in ['off', 'false', 'no']: return 0.0
+                
+                logger.warning(f"Unknown categorical value '{value}' for feature '{feature_name}'. Defaulting to 0.0.")
+                return 0.0
+        
+        # Default fallback
+        try:
+            return float(value)
+        except:
+            return 0.0

app/static/script.js

@@ -0,0 +1,241 @@
+let predictedRiskLevel = 1;
+
+document.addEventListener('DOMContentLoaded', () => {
+    const form = document.getElementById('predictionForm');
+    const heightInput = document.getElementById('Height');
+    const weightInput = document.getElementById('Weight');
+    const bmiInput = document.getElementById('BMI');
+    const modal = document.getElementById('resultModal');
+    const closeModalBtn = document.querySelector('.close-modal');
+
+    // Live Preview Elements
+    const livePreview = document.getElementById('livePreview');
+    const liveRiskScore = document.getElementById('liveRiskScore');
+    const liveRiskLabel = document.getElementById('liveRiskLabel');
+
+    // Auto-calculate BMI
+    function calculateBMI() {
+        const heightCm = parseFloat(heightInput.value);
+        const weightKg = parseFloat(weightInput.value);
+
+        if (heightCm > 0 && weightKg > 0) {
+            const heightM = heightCm / 100;
+            const bmi = (weightKg / (heightM * heightM)).toFixed(2);
+            bmiInput.value = bmi;
+        } else {
+            bmiInput.value = '';
+        }
+    }
+
+    heightInput.addEventListener('input', calculateBMI);
+    weightInput.addEventListener('input', calculateBMI);
+
+    // Live Preview Logic (Debounced)
+    let debounceTimer;
+    function updateLivePreview() {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(async () => {
+            // Check if required fields are filled (basic check)
+            if (!heightInput.value || !weightInput.value || !document.getElementById('Age').value) return;
+
+            const formData = new FormData(form);
+            const data = {};
+
+            formData.forEach((value, key) => {
+                if (form.querySelector(`input[name="${key}"][type="checkbox"]`)) {
+                    data[key] = "1";
+                } else {
+                    data[key] = value;
+                }
+            });
+
+            const checkboxes = form.querySelectorAll('input[type="checkbox"]');
+            checkboxes.forEach(cb => {
+                if (!data.hasOwnProperty(cb.name)) data[cb.name] = "0";
+            });
+
+            if (!data['BMI']) return;
+
+            try {
+                const response = await fetch('/api/v1/predict', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(data)
+                });
+
+                if (response.ok) {
+                    const result = await response.json();
+                    liveRiskScore.textContent = (result.probability * 100).toFixed(1) + '%';
+                    liveRiskLabel.textContent = result.risk_label;
+                    livePreview.classList.add('visible');
+
+                    if (result.risk_level <= 2) liveRiskScore.style.color = '#10B981';
+                    else if (result.risk_level === 3) liveRiskScore.style.color = '#F59E0B';
+                    else liveRiskScore.style.color = '#EF4444';
+                }
+            } catch (e) {
+                console.error("Live preview failed", e);
+            }
+        }, 500);
+    }
+
+    form.addEventListener('change', updateLivePreview);
+
+    // Form Submission
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+
+        const submitBtn = form.querySelector('button[type="submit"]');
+        const originalBtnText = submitBtn.innerHTML;
+        submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Analyzing...';
+        submitBtn.disabled = true;
+
+        const formData = new FormData(form);
+        const data = {};
+
+        formData.forEach((value, key) => {
+            if (form.querySelector(`input[name="${key}"][type="checkbox"]`)) {
+                data[key] = "1";
+            } else {
+                data[key] = value;
+            }
+        });
+
+        const checkboxes = form.querySelectorAll('input[type="checkbox"]');
+        checkboxes.forEach(cb => {
+            if (!data.hasOwnProperty(cb.name)) {
+                data[cb.name] = "0";
+            }
+        });
+
+        try {
+            const response = await fetch('/api/v1/predict', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(data)
+            });
+
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+
+            const result = await response.json();
+            window.lastResult = result;
+            showResult(result);
+
+        } catch (error) {
+            console.error('Error:', error);
+            alert('An error occurred during analysis. Please try again.');
+        } finally {
+            submitBtn.innerHTML = originalBtnText;
+            submitBtn.disabled = false;
+        }
+    });
+
+    function showResult(result) {
+        const riskLevelEl = document.getElementById('riskLevel');
+        const riskIconEl = document.getElementById('riskIcon');
+        const probFill = document.getElementById('probFill');
+        const probValue = document.getElementById('probValue');
+
+        predictedRiskLevel = result.risk_level;
+
+        const probability = result.probability;
+        const percentage = (probability * 100).toFixed(1) + '%';
+
+        let colorStart, colorEnd, iconClass, text;
+
+        if (predictedRiskLevel <= 2) {
+            text = 'Low Risk';
+            iconClass = 'fa-heart-circle-check risk-low';
+            colorStart = '#34D399';
+            colorEnd = '#10B981';
+            riskLevelEl.style.color = '#10B981';
+        } else if (predictedRiskLevel === 3) {
+            text = 'Moderate Risk';
+            iconClass = 'fa-heart-circle-exclamation';
+            colorStart = '#FBBF24';
+            colorEnd = '#F59E0B';
+            riskLevelEl.style.color = '#F59E0B';
+            riskIconEl.innerHTML = `<i class="fa-solid ${iconClass}" style="color: #F59E0B"></i>`;
+        } else {
+            text = 'High Risk';
+            iconClass = 'fa-heart-crack risk-high';
+            colorStart = '#F87171';
+            colorEnd = '#EF4444';
+            riskLevelEl.style.color = '#EF4444';
+        }
+
+        riskLevelEl.textContent = text;
+        if (predictedRiskLevel !== 3) {
+            riskLevelEl.className = predictedRiskLevel <= 2 ? 'risk-low' : 'risk-high';
+            riskIconEl.innerHTML = `<i class="fa-solid ${iconClass}"></i>`;
+        }
+
+        probFill.style.background = `linear-gradient(90deg, ${colorStart}, ${colorEnd})`;
+        probFill.style.width = percentage;
+        probValue.textContent = percentage;
+
+        modal.classList.add('visible');
+    }
+
+    function closeModal() {
+        modal.classList.remove('visible');
+    }
+
+    closeModalBtn.addEventListener('click', closeModal);
+    window.onclick = function (event) {
+        if (event.target == modal) {
+            closeModal();
+        }
+    }
+
+    // smooth scroll to sections
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href');
+            if (targetId === '#') return;
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+                targetElement.scrollIntoView({
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+
+    window.closeModal = closeModal;
+});
+
+function goToRecommendations() {
+    // Gather key parameters for recommendation personalization
+    const params = new URLSearchParams();
+
+    // 1. Pass the exact calculated probability
+    if (window.lastResult && window.lastResult.probability) {
+        params.append('risk', (window.lastResult.probability * 100).toFixed(1));
+    }
+
+    // 2. Selects and Inputs
+    const fields = [
+        'Age', 'BMI', 'Sex', 'Smoking', 'Diabetes',
+        'Alcohol', 'Fried_Potato', 'Fruit', 'Green_Vegetables', 'Exercise', 'General_Health'
+    ];
+
+    fields.forEach(id => {
+        const el = document.getElementById(id);
+        if (el) params.append(id, el.value);
+    });
+
+    // 3. Checkboxes (Special handling)
+    const checkBoxes = ['Skin_Cancer', 'Other_Cancer', 'Depression', 'Arthritis'];
+    checkBoxes.forEach(id => {
+        const el = document.getElementById(id);
+        if (el) params.append(id, el.checked ? "1" : "0");
+    });
+
+    window.location.href = `/recommendation/${predictedRiskLevel}?${params.toString()}`;
+}

app/static/style.css

@@ -0,0 +1,1790 @@
+/* =============================================================================
+   1. GLOBAL STYLES - Used across ALL pages (index.html, calculate.html, recommendation.html)
+   ============================================================================= */
+
+/* -----------------------------------------------------------------------------
+   1.1 CSS Variables & Design Tokens
+   ----------------------------------------------------------------------------- */
+:root {
+    /* Color System - Human Centric */
+    --primary-color: #3B82F6;
+    --primary-hover: #2563EB;
+    --secondary-color: #64748B;
+    --accent-color: #8B5CF6;
+    --success: #10B981;
+    --warning: #F59E0B;
+    --danger: #EF4444;
+
+    /* Backgrounds */
+    --bg-body: #F8FAFC;
+    --bg-surface: #FFFFFF;
+    --bg-subtle: #F1F5F9;
+    --glass-bg: rgba(255, 255, 255, 0.95);
+
+    /* Typography */
+    --text-main: #1E293B;
+    --text-muted: #64748B;
+    --text-light: #94A3B8;
+
+    /* Spacing & Layout */
+    --space-xs: 0.25rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+
+    /* Borders & Radius */
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --border-color: #E2E8F0;
+    --border-subtle: #F1F5F9;
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);
+}
+
+/* -----------------------------------------------------------------------------
+   1.2 Base Reset & Typography (All Pages)
+   ----------------------------------------------------------------------------- */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
+    background-color: var(--bg-body);
+    color: var(--text-main);
+    line-height: 1.6;
+    overflow-x: hidden;
+    width: 100%;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+    transition: color 0.2s ease;
+}
+
+ul {
+    list-style: none;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* -----------------------------------------------------------------------------
+   1.3 Background Effect (All Pages)
+   ----------------------------------------------------------------------------- */
+.background-glow {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+    background:
+        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 40%),
+        radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);
+}
+
+/* -----------------------------------------------------------------------------
+   1.4 Container (All Pages)
+   ----------------------------------------------------------------------------- */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--space-md);
+}
+
+/* -----------------------------------------------------------------------------
+   1.5 Header & Navigation (All Pages)
+   ----------------------------------------------------------------------------- */
+.site-header {
+    background: var(--glass-bg);
+    backdrop-filter: blur(10px);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    border-bottom: 1px solid var(--border-subtle);
+    padding: var(--space-md) 0;
+}
+
+.header-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--space-md);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.brand {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-weight: 700;
+    font-size: 1.5rem;
+    color: var(--text-main);
+}
+
+.heart-icon {
+    animation: heartbeat 1.5s infinite;
+}
+
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+}
+
+.nav-links a {
+    font-weight: 500;
+    color: var(--text-muted);
+}
+
+.nav-links a:hover,
+.nav-links a.active {
+    color: var(--primary-color);
+}
+
+.btn-start {
+    background: var(--primary-color);
+    color: white !important;
+    padding: 0.5rem 1.25rem;
+    border-radius: 100px;
+    transition: all 0.3s ease;
+}
+
+.btn-start:hover {
+    background: var(--primary-hover);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+/* =============================================================================
+   2. HOME PAGE STYLES (index.html)
+   ============================================================================= */
+
+/* -----------------------------------------------------------------------------
+   2.1 Hero Section (index.html)
+   ----------------------------------------------------------------------------- */
+.hero {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+    padding: 6rem 0;
+    min-height: 80vh;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    line-height: 1.2;
+    margin-bottom: 1.5rem;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+}
+
+.hero p {
+    font-size: 1.25rem;
+    color: var(--text-muted);
+    margin-bottom: 2.5rem;
+    max-width: 540px;
+}
+
+.hero-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem 2rem;
+    border-radius: 100px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.hero-image {
+    position: relative;
+    display: flex;
+    justify-content: center;
+}
+
+/* -----------------------------------------------------------------------------
+   2.2 Trust Section (index.html)
+   ----------------------------------------------------------------------------- */
+.trust-section {
+    background: white;
+    padding: 3rem 0;
+    border-top: 1px solid var(--border-subtle);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.trust-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+    text-align: center;
+}
+
+.stat-number {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin-bottom: 0.5rem;
+}
+
+.stat-label {
+    color: var(--text-muted);
+    font-weight: 500;
+}
+
+/* -----------------------------------------------------------------------------
+   2.3 How It Works Section (index.html)
+   ----------------------------------------------------------------------------- */
+.how-it-works {
+    padding: 6rem 0;
+}
+
+.section-title {
+    text-align: center;
+    max-width: 700px;
+    margin: 0 auto 4rem;
+}
+
+.section-title h2 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+}
+
+.section-title p {
+    color: var(--text-muted);
+    font-size: 1.125rem;
+}
+
+.steps-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+}
+
+.step-card {
+    background: white;
+    padding: 2.5rem;
+    border-radius: var(--radius-xl);
+    border: 1px solid var(--border-subtle);
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.step-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+    border-color: rgba(59, 130, 246, 0.3);
+}
+
+.step-number {
+    position: absolute;
+    top: -15px;
+    right: 15px;
+    /* Changed from -15px to 15px to avoid overflow */
+    width: 40px;
+    height: 40px;
+    background: var(--primary-color);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    box-shadow: var(--shadow-md);
+}
+
+.step-icon {
+    width: 60px;
+    height: 60px;
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--primary-color);
+    border-radius: var(--radius-lg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.step-card h3 {
+    font-size: 1.25rem;
+    margin-bottom: 0.75rem;
+}
+
+.step-card p {
+    color: var(--text-muted);
+}
+
+/* -----------------------------------------------------------------------------
+   2.4 About Section (index.html)
+   ----------------------------------------------------------------------------- */
+.about-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+}
+
+.about-card {
+    background: white;
+    padding: 2rem;
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-sm);
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.about-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+}
+
+.about-card i {
+    font-size: 2.5rem;
+    color: var(--primary-color);
+    margin-bottom: 1.5rem;
+}
+
+.about-card h3 {
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+}
+
+.about-card p {
+    color: var(--text-muted);
+}
+
+/* -----------------------------------------------------------------------------
+   2.5 Testimonials Section (index.html)
+   ----------------------------------------------------------------------------- */
+.testimonials {
+    padding: 6rem 0;
+    background: white;
+}
+
+.testimonials-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+}
+
+.testimonial-card {
+    background: var(--bg-body);
+    padding: 2rem;
+    border-radius: var(--radius-xl);
+    position: relative;
+}
+
+.quote-icon {
+    color: var(--primary-color);
+    opacity: 0.2;
+    font-size: 2rem;
+    margin-bottom: 1rem;
+}
+
+.testimonial-text {
+    font-style: italic;
+    color: var(--text-main);
+    margin-bottom: 1.5rem;
+}
+
+.testimonial-author {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.author-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+}
+
+.author-name {
+    font-weight: 600;
+}
+
+.author-role {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+}
+
+/* -----------------------------------------------------------------------------
+   2.6 Contact Section (index.html)
+   ----------------------------------------------------------------------------- */
+.contact-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+}
+
+.contact-card {
+    background: white;
+    padding: 2rem;
+    border-radius: var(--radius-xl);
+    text-align: center;
+    transition: all 0.3s ease;
+}
+
+.contact-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-md);
+}
+
+.contact-card i {
+    font-size: 2rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+
+.contact-card h3 {
+    margin-bottom: 0.5rem;
+    font-size: 1.125rem;
+}
+
+.contact-card p {
+    color: var(--text-muted);
+}
+
+.contact-card .small {
+    font-size: 0.875rem;
+    opacity: 0.8;
+    margin-top: 0.25rem;
+}
+
+/* -----------------------------------------------------------------------------
+   1.6 Footer (All Pages)
+   ----------------------------------------------------------------------------- */
+.footer {
+    background: #0F172A;
+    color: white;
+    padding: 4rem 0 0;
+}
+
+.footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--space-md);
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    gap: 4rem;
+    margin-bottom: 3rem;
+}
+
+.footer-about h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.footer-about p {
+    color: #94A3B8;
+    line-height: 1.8;
+}
+
+.footer-links h4,
+.footer-contact h4 {
+    margin-bottom: 1.5rem;
+    color: white;
+}
+
+.footer-links a {
+    display: block;
+    color: #94A3B8;
+    margin-bottom: 0.75rem;
+}
+
+.footer-links a:hover {
+    color: white;
+}
+
+.footer-contact p {
+    color: #94A3B8;
+    margin-bottom: 0.75rem;
+}
+
+.footer-bottom {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 2rem 0;
+    text-align: center;
+    color: #64748B;
+}
+
+/* =============================================================================
+   3. CALCULATE PAGE STYLES (calculate.html)
+   ============================================================================= */
+
+/* -----------------------------------------------------------------------------
+   3.1 Calculator Container (calculate.html)
+   ----------------------------------------------------------------------------- */
+.calculator-section {
+    max-width: 1100px;
+    margin: 50px auto;
+    text-align: center;
+    padding: 0 20px;
+}
+
+.calculator-section h1 {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+}
+
+.subtitle {
+    color: #6b7280;
+    margin-bottom: 30px;
+}
+
+/* -----------------------------------------------------------------------------
+   3.2 Card & Form Layout (calculate.html)
+   ----------------------------------------------------------------------------- */
+.card {
+    background: white;
+    border-radius: 14px;
+    padding: 30px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+    text-align: left;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+}
+
+.box {
+    background: #f9fafb;
+    border-radius: 12px;
+    padding: 20px;
+    text-align: left;
+}
+
+.box h3 {
+    margin-bottom: 15px;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.box.full {
+    margin-top: 30px;
+}
+
+/* -----------------------------------------------------------------------------
+   3.3 Form Inputs (calculate.html)
+   ----------------------------------------------------------------------------- */
+.calculator-section label {
+    display: block;
+    font-size: 16px;
+    margin: 10px 0 5px;
+    color: #374151;
+    text-align: left;
+}
+
+.calculator-section input,
+.calculator-section select {
+    width: 100%;
+    padding: 10px;
+    border-radius: 8px;
+    border: none;
+    background: #eef2f7;
+    font-family: inherit;
+    font-size: 1.2rem;
+    color: #1f2937;
+}
+
+.calculator-section input:focus,
+.calculator-section select:focus {
+    outline: 2px solid #2563eb;
+    outline-offset: 1px;
+}
+
+.calculator-section input[disabled] {
+    background: #e5e7eb;
+    color: #9ca3af;
+    cursor: not-allowed;
+}
+
+/* -----------------------------------------------------------------------------
+   3.4 Checkboxes (calculate.html)
+   ----------------------------------------------------------------------------- */
+.checkbox-group {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin-top: 10px;
+    gap: 8px;
+}
+
+.checkbox-group label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.checkbox-group input[type="checkbox"] {
+    width: 20px;
+    height: 18px;
+    accent-color: #2563eb;
+}
+
+/* -----------------------------------------------------------------------------
+   3.5 Lifestyle Grid (calculate.html)
+   ----------------------------------------------------------------------------- */
+.grid-4 {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 20px;
+}
+
+/* -----------------------------------------------------------------------------
+   3.6 Analyze Button (calculate.html)
+   ----------------------------------------------------------------------------- */
+.analyze-btn {
+    margin-top: 30px;
+    background: #2563eb;
+    color: white;
+    border: none;
+    padding: 15px 30px;
+    border-radius: 30px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.analyze-btn:hover {
+    background: #1d4ed8;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
+
+/* -----------------------------------------------------------------------------
+   3.7 Result Modal (calculate.html)
+   ----------------------------------------------------------------------------- */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(15, 23, 42, 0.7);
+    backdrop-filter: blur(4px);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 10000;
+}
+
+.modal.visible {
+    display: flex;
+}
+
+.modal-content {
+    background: white;
+    width: 95%;
+    max-width: 500px;
+    padding: 3rem 2.5rem;
+    border-radius: 20px;
+    text-align: center;
+    position: relative;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.close-modal {
+    position: absolute;
+    top: 1.25rem;
+    right: 1.25rem;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: #f1f5f9;
+    color: #94a3b8;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: none;
+    font-size: 1rem;
+    transition: all 0.2s;
+}
+
+.close-modal:hover {
+    background: #e2e8f0;
+    color: #1e293b;
+}
+
+.risk-icon {
+    font-size: 4.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.risk-high {
+    color: #EF4444;
+}
+
+.risk-low {
+    color: #10B981;
+}
+
+.result-header h2 {
+    font-size: 2rem;
+    font-weight: 800;
+    margin-bottom: 0.75rem;
+}
+
+.result-body p {
+    color: #64748b;
+    font-size: 0.9375rem;
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+    padding: 0 1rem;
+}
+
+.probability-meter {
+    height: 28px;
+    background: #f1f5f9;
+    border-radius: 100px;
+    margin: 1.5rem 0.5rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.prob-fill {
+    height: 100%;
+    background: #10B981;
+    width: 0%;
+    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 100px;
+}
+
+#probValue {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: #1e293b;
+}
+
+.disclaimer {
+    font-size: 0.75rem;
+    color: #94a3b8;
+    line-height: 1.5;
+    margin-top: 2rem;
+    margin-bottom: 2.5rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid #f1f5f9;
+}
+
+.modal-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+}
+
+.view-btn,
+.btn-cancel {
+    padding: 0.875rem 1.5rem;
+    border-radius: 100px;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+    min-width: 160px;
+}
+
+.view-btn {
+    background: #3b82f6;
+    color: white;
+    border: none;
+    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2);
+}
+
+.view-btn:hover {
+    background: #2563eb;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 10px -1px rgba(59, 130, 246, 0.3);
+}
+
+.btn-cancel {
+    background: white;
+    color: #1e293b;
+    border: 1px solid #e2e8f0;
+}
+
+.btn-cancel:hover {
+    background: #f8fafc;
+    border-color: #cbd5e1;
+}
+
+/* Animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes zoomIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes heartbeat {
+    0% {
+        transform: scale(1);
+    }
+
+    15% {
+        transform: scale(1.15);
+    }
+
+    30% {
+        transform: scale(1);
+    }
+
+    45% {
+        transform: scale(1.15);
+    }
+
+    60% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0px);
+    }
+
+    50% {
+        transform: translateY(-15px);
+    }
+
+    100% {
+        transform: translateY(0px);
+    }
+}
+
+@keyframes pulse-soft {
+    0% {
+        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+    }
+
+    70% {
+        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+    }
+}
+
+.pulse {
+    animation: pulse-soft 2s infinite;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .hero {
+        grid-template-columns: 1fr;
+        padding: 4rem 0;
+        text-align: center;
+    }
+
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+
+    .hero-content {
+        order: 2;
+    }
+
+    .hero-image {
+        order: 1;
+        margin-bottom: 2rem;
+    }
+
+    .hero-buttons {
+        justify-content: center;
+    }
+
+    .trust-container {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .steps-grid,
+    .testimonials-grid,
+    .contact-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .footer-container {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+
+    .form-grid,
+    .lifestyle-grid,
+    .checkbox-group {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Utilities */
+.text-muted {
+    color: var(--text-muted) !important;
+}
+
+/* New Hero Enhancements (Preserved) */
+.badge-new {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--primary-color);
+    padding: 6px 12px;
+    border-radius: 100px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-bottom: var(--space-lg);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.text-gradient {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-buttons {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+}
+
+.primary-btn {
+    background: var(--primary-color);
+    color: white;
+}
+
+.secondary-btn {
+    background: white;
+    color: var(--text-main);
+    border: 1px solid var(--border-subtle);
+}
+
+.secondary-btn:hover {
+    background: var(--bg-subtle);
+    color: var(--primary-color);
+}
+
+.hero-trust {
+    display: flex;
+    gap: 1.5rem;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    font-weight: 500;
+}
+
+.hero-trust span {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.hero-trust i {
+    color: var(--success);
+}
+
+.floating-heart {
+    animation: float 6s ease-in-out infinite;
+}
+
+.count-up {
+    font-variant-numeric: tabular-nums;
+}
+
+/* =============================================================================
+   4. RECOMMENDATION PAGE STYLES (recommendation.html)
+   Note: Additional styles are embedded in recommendation.html <style> tag
+   ============================================================================= */
+
+/* -----------------------------------------------------------------------------
+   4.1 Page Layout (recommendation.html)
+   ----------------------------------------------------------------------------- */
+.recommendation-page {
+    padding: 2rem 0;
+}
+
+.page-header {
+    text-align: center;
+    margin-bottom: 3rem;
+    animation: fadeInDown 0.8s ease-out;
+}
+
+.page-header h1 {
+    font-size: 2.5rem;
+    font-weight: 800;
+    color: var(--text-main);
+    margin-bottom: 0.5rem;
+}
+
+.page-header p {
+    color: var(--text-muted);
+    font-size: 1.125rem;
+}
+
+.report-grid {
+    display: grid;
+    grid-template-columns: 1fr 420px;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+@media (max-width: 980px) {
+    .report-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .sidebar {
+        order: -1;
+    }
+}
+
+/* Risk Level Selector */
+.risk-selector {
+    background: white;
+    padding: 2rem;
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
+    margin-bottom: 2rem;
+}
+
+.risk-selector h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--text-main);
+}
+
+.risk-pills {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 0.75rem;
+}
+
+.risk-pill {
+    padding: 1rem;
+    border-radius: var(--radius-lg);
+    color: white;
+    text-align: center;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+}
+
+.risk-pill:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+}
+
+.risk-pill.active {
+    border-color: var(--text-main);
+    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
+}
+
+.risk-pill.vlow {
+    background: linear-gradient(135deg, #10B981, #059669);
+}
+
+.risk-pill.low {
+    background: linear-gradient(135deg, #34D399, #10B981);
+}
+
+.risk-pill.mod {
+    background: linear-gradient(135deg, #FBBF24, #F59E0B);
+}
+
+.risk-pill.high {
+    background: linear-gradient(135deg, #FB923C, #F97316);
+}
+
+.risk-pill.vh {
+    background: linear-gradient(135deg, #EF4444, #DC2626);
+}
+
+.risk-pill small {
+    display: block;
+    font-size: 0.75rem;
+    opacity: 0.9;
+    margin-top: 0.25rem;
+}
+
+/* Main Report Card */
+.report-card {
+    background: white;
+    padding: 2.5rem;
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
+    border-left: 6px solid var(--primary-color);
+    animation: fadeInUp 0.8s ease-out;
+}
+
+.report-card.highlight {
+    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1), var(--shadow-lg);
+}
+
+.report-title {
+    font-size: 1.75rem;
+    font-weight: 800;
+    margin-bottom: 0.5rem;
+    color: var(--text-main);
+}
+
+.report-subtitle {
+    color: var(--text-muted);
+    margin-bottom: 2rem;
+    font-size: 1rem;
+}
+
+.recommendations-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2rem;
+}
+
+.recommendation-card {
+    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+    transition: all 0.3s ease;
+}
+
+.recommendation-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-md);
+}
+
+.recommendation-card h4 {
+    font-size: 1.125rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--primary-color);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.recommendation-card ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.recommendation-card li {
+    padding: 0.5rem 0;
+    color: var(--text-main);
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+}
+
+.recommendation-card li::before {
+    content: "✓";
+    color: var(--primary-color);
+    font-weight: 700;
+    flex-shrink: 0;
+}
+
+/* Sidebar */
+.sidebar .card {
+    background: white;
+    padding: 1.5rem;
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
+    margin-bottom: 1.5rem;
+}
+
+.sidebar h3 {
+    font-size: 1.125rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--text-main);
+}
+
+/* Severity Meter */
+.meter-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.5rem 0;
+}
+
+.meter {
+    width: 160px;
+    height: 160px;
+    position: relative;
+}
+
+.meter svg {
+    transform: rotate(-90deg);
+}
+
+.meter .center {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.meter .percent {
+    font-size: 2rem;
+    font-weight: 800;
+    color: var(--primary-color);
+}
+
+.meter .label {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
+}
+
+/* Chart */
+.chart-container {
+    height: 240px;
+    margin-top: 1rem;
+}
+
+/* Doctor Cards */
+.doctor-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.doctor-card {
+    padding: 1.25rem;
+    border-radius: var(--radius-lg);
+    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
+    border: 1px solid var(--border-color);
+    transition: all 0.3s ease;
+}
+
+.doctor-card:hover {
+    transform: translateX(4px);
+    box-shadow: var(--shadow-sm);
+}
+
+.doctor-name {
+    font-weight: 700;
+    color: var(--text-main);
+    margin-bottom: 0.5rem;
+}
+
+.doctor-info {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    margin-bottom: 0.75rem;
+}
+
+.doctor-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+}
+
+.btn-small {
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-outline {
+    background: white;
+    border: 1px solid var(--border-color);
+    color: var(--text-main);
+}
+
+.btn-outline:hover {
+    background: var(--bg-body);
+}
+
+.btn-primary-small {
+    background: var(--primary-color);
+    color: white;
+}
+
+.btn-primary-small:hover {
+    background: var(--primary-hover);
+}
+
+/* Map */
+#map {
+    height: 280px;
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    margin: 1rem 0;
+}
+
+/* Action Buttons */
+.action-section {
+    background: white;
+    padding: 2rem;
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
+    margin-top: 2rem;
+}
+
+.action-section h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    color: var(--text-main);
+}
+
+.action-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.action-btn {
+    padding: 0.875rem 1.75rem;
+    border-radius: 100px;
+    font-weight: 600;
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.action-btn-primary {
+    background: var(--primary-color);
+    color: white;
+    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2);
+}
+
+.action-btn-primary:hover {
+    background: var(--primary-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 12px rgba(79, 70, 229, 0.3);
+}
+
+.action-btn-secondary {
+    background: white;
+    color: var(--text-main);
+    border: 1px solid var(--border-color);
+}
+
+.action-btn-secondary:hover {
+    background: var(--bg-body);
+}
+
+/* -----------------------------------------------------------------------------
+   3.6 Dark Header Override (calculate.html only)
+   Note: Uses :has() selector to apply only when calculator-section is present
+   ----------------------------------------------------------------------------- */
+
+/* Dark Header Override section removed to match home page header */
+
+
+/* Calculator Section Override */
+.calculator-section {
+    padding: 3rem 0 4rem;
+    max-width: 900px;
+}
+
+.calculator-section .section-title {
+    margin-bottom: 2.5rem;
+}
+
+.calculator-section .section-title h2 {
+    font-size: 2.25rem;
+    font-weight: 700;
+    color: var(--text-main);
+}
+
+.calculator-section .section-title p {
+    color: var(--text-muted);
+    font-size: 1rem;
+}
+
+/* Glass Panel Form */
+.calculator-section .glass-panel {
+    background: white;
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    padding: 2.5rem;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+/* Form Grid - Two Columns */
+.calculator-section .form-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem 3rem;
+    margin-bottom: 0;
+}
+
+/* Form Section Styling */
+.calculator-section .form-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.calculator-section .form-section.full-width {
+    grid-column: 1 / -1;
+    border-top: 1px solid var(--border-subtle);
+    padding-top: 2rem;
+    margin-top: 0.5rem;
+}
+
+.calculator-section .form-section h3 {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-main);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.calculator-section .form-section h3 i {
+    color: var(--primary-color);
+    font-size: 0.9rem;
+}
+
+/* Input Groups */
+.calculator-section .input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+}
+
+.calculator-section .input-group label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-main);
+}
+
+.calculator-section input,
+.calculator-section select {
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    font-size: 0.9375rem;
+    background: white;
+    transition: all 0.2s ease;
+}
+
+.calculator-section input:focus,
+.calculator-section select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.calculator-section input::placeholder {
+    color: var(--text-light);
+}
+
+.calculator-section input[readonly] {
+    background: var(--bg-subtle);
+    color: var(--text-muted);
+}
+
+/* Lifestyle Grid - 3x2 layout */
+.calculator-section .lifestyle-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1.25rem;
+}
+
+/* Checkbox Group Inline */
+.calculator-section .checkbox-group {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+    background: transparent;
+    padding: 0;
+    margin-top: 0.5rem;
+}
+
+.calculator-section .checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 400;
+    color: var(--text-main);
+    cursor: pointer;
+}
+
+.calculator-section .checkbox-container input[type="checkbox"] {
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--primary-color);
+    cursor: pointer;
+}
+
+/* Form Actions */
+.calculator-section .form-actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--border-subtle);
+}
+
+.calculator-section .btn-primary {
+    background: #3B82F6;
+    color: white;
+    border: none;
+    padding: 0.875rem 2rem;
+    border-radius: 50px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.3s ease;
+}
+
+.calculator-section .btn-primary:hover {
+    background: #2563EB;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
+}
+
+/* Responsive */
+@media (max-width: 992px) {
+    .hero {
+        grid-template-columns: 1fr;
+        text-align: center;
+        gap: 2rem;
+    }
+
+    .hero-content {
+        order: 2;
+    }
+
+    .hero-image {
+        order: 1;
+    }
+
+    .hero p {
+        margin: 0 auto 2.5rem;
+    }
+
+    .steps-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .testimonials-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .contact-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .header-container {
+        flex-direction: column;
+        gap: 1.25rem;
+        padding-bottom: 0.5rem;
+    }
+
+    .nav-links {
+        gap: 1rem;
+        font-size: 0.9rem;
+    }
+
+    .calculator-section .form-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .calculator-section .lifestyle-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .calculator-section .glass-panel {
+        padding: 1.5rem;
+    }
+
+    .trust-container {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .footer-container {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+        text-align: center;
+    }
+
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .steps-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .testimonials-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .contact-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .nav-links {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .calculator-section .lifestyle-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .calculator-section .glass-panel {
+        padding: 1rem;
+    }
+
+    .step-number {
+        top: 10px;
+        right: 10px;
+    }
+}
+
+/* Live Preview Styles */
+.live-preview-card {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    background: white;
+    padding: 1.25rem;
+    border-radius: 16px;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    width: 220px;
+    transform: translateY(20px);
+    opacity: 0;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid #E2E8F0;
+    pointer-events: none;
+}
+
+.live-preview-card.visible {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.live-preview-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.75rem;
+    color: #64748B;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.live-risk-score {
+    font-size: 2.25rem;
+    font-weight: 800;
+    color: #1E293B;
+    line-height: 1;
+    margin-bottom: 0.25rem;
+}
+
+.live-risk-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #64748B;
+}
+
+/* Range Sliders Removed - Logic and UI cleaned up as requested */

app/templates/calculate.html

@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Risk Assessment | HeartCare</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="/static/style.css">
+    <link rel="icon"
+        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>❤️</text></svg>">
+</head>
+
+<body>
+    <!-- Background Effect -->
+    <div class="background-glow"></div>
+
+    <!-- HEADER -->
+    <header class="site-header">
+        <div class="header-container">
+            <!-- Logo -->
+            <div class="brand">
+                <span class="heart-icon">❤️</span>
+                <span class="brand-name">HeartCare</span>
+            </div>
+
+            <!-- Navigation -->
+            <nav class="nav-links">
+                <a href="/">Home</a>
+                <a href="/#about">About</a>
+                <a href="/#contact">Contact</a>
+                <a href="/calculate" class="btn-start active">Start Assessment</a>
+            </nav>
+        </div>
+    </header>
+
+    <main class="container">
+
+        <!-- CALCULATOR SECTION -->
+        <section id="calculate" class="calculator-section">
+            <div class="section-title">
+                <h2>Assess Your Risk</h2>
+                <p>Fill in the details below for an instant Artificial Intelligence analysis.</p>
+            </div>
+
+            <form id="predictionForm" class="glass-panel">
+                <div class="form-grid">
+                    <!-- Personal Details -->
+                    <div class="form-section">
+                        <h3><i class="fa-regular fa-id-card"></i> Personal Profile</h3>
+
+                        <div class="input-group">
+                            <label for="Age">Age</label>
+                            <input type="number" id="Age" name="Age" min="18" max="100" required placeholder="e.g. 45">
+                        </div>
+
+                        <div class="input-group">
+                            <label for="Sex">Biological Sex</label>
+                            <select id="Sex" name="Sex" required>
+                                <option value="" disabled selected>Select...</option>
+                                <option value="0">Female</option>
+                                <option value="1">Male</option>
+                            </select>
+                        </div>
+
+                        <div class="input-group">
+                            <label for="Height">Height (cm)</label>
+                            <input type="number" id="Height" name="Height" min="100" max="250" required
+                                placeholder="e.g. 175">
+                        </div>
+
+                        <div class="input-group">
+                            <label for="Weight">Weight (kg)</label>
+                            <input type="number" id="Weight" name="Weight" min="30" max="200" required
+                                placeholder="e.g. 70">
+                        </div>
+
+                        <div class="input-group">
+                            <label for="BMI">BMI (Auto-calculated)</label>
+                            <input type="number" id="BMI" name="BMI" readonly placeholder="---">
+                        </div>
+                    </div>
+
+                    <!-- Health History -->
+                    <div class="form-section">
+                        <h3><i class="fa-solid fa-notes-medical"></i> Medical History</h3>
+
+                        <div class="input-group">
+                            <label for="General_Health">Self-Rated Health</label>
+                            <select id="General_Health" name="General_Health" required>
+                                <option value="Excellent">Excellent</option>
+                                <option value="Very_Good">Very Good</option>
+                                <option value="Good">Good</option>
+                                <option value="Fair">Fair</option>
+                                <option value="Poor">Poor</option>
+                            </select>
+                        </div>
+
+                        <div class="input-group">
+                            <label for="Checkup">Last Checkup</label>
+                            <select id="Checkup" name="Checkup" required>
+                                <option value="Within 1 year">Within 1 year</option>
+                                <option value="1-2 years">1-2 years</option>
+                                <option value="2-5 years">2-5 years</option>
+                                <option value="5+ years">5+ years</option>
+                                <option value="Never">Never</option>
+                            </select>
+                        </div>
+
+                        <div class="input-group">
+                            <label for="Diabetes">Diabetes Status</label>
+                            <select id="Diabetes" name="Diabetes" required>
+                                <option value="No">No</option>
+                                <option value="Borderline">Borderline</option>
+                                <option value="During Pregnancy">During Pregnancy</option>
+                                <option value="Yes">Yes</option>
+                            </select>
+                        </div>
+
+                        <div class="checkbox-group">
+                            <label class="checkbox-container">
+                                <input type="checkbox" id="Skin_Cancer" name="Skin_Cancer">
+                                <span class="checkmark"></span>
+                                Skin Cancer
+                            </label>
+                            <label class="checkbox-container">
+                                <input type="checkbox" id="Other_Cancer" name="Other_Cancer">
+                                <span class="checkmark"></span>
+                                Other Cancer
+                            </label>
+                            <label class="checkbox-container">
+                                <input type="checkbox" id="Depression" name="Depression">
+                                <span class="checkmark"></span>
+                                Depression
+                            </label>
+                            <label class="checkbox-container">
+                                <input type="checkbox" id="Arthritis" name="Arthritis">
+                                <span class="checkmark"></span>
+                                Arthritis
+                            </label>
+                        </div>
+                    </div>
+
+                    <!-- Lifestyle -->
+                    <div class="form-section full-width">
+                        <h3><i class="fa-solid fa-person-running"></i> Lifestyle Factors</h3>
+
+                        <div class="lifestyle-grid">
+                            <div class="input-group">
+                                <label for="Exercise">Regular Exercise</label>
+                                <select id="Exercise" name="Exercise" required>
+                                    <option value="0">No</option>
+                                    <option value="1">Yes</option>
+                                </select>
+                            </div>
+
+                            <div class="input-group">
+                                <label for="Smoking">Smoking History</label>
+                                <select id="Smoking" name="Smoking" required>
+                                    <option value="0">No</option>
+                                    <option value="1">Yes</option>
+                                </select>
+                            </div>
+
+                            <div class="input-group">
+                                <label for="Alcohol">Alcohol (Days/Month)</label>
+                                <input type="number" id="Alcohol" name="Alcohol" min="0" max="30" value="0">
+                            </div>
+
+                            <div class="input-group">
+                                <label for="Fruit">Fruit (Servings/Month)</label>
+                                <input type="number" id="Fruit" name="Fruit" min="0" max="100" value="0">
+                            </div>
+
+                            <div class="input-group">
+                                <label for="Green_Vegetables">Green Veggies (Servings/Month)</label>
+                                <input type="number" id="Green_Vegetables" name="Green_Vegetables" min="0" max="100"
+                                    value="0">
+                            </div>
+
+                            <div class="input-group">
+                                <label for="Fried_Potato">Fried Food (Servings/Month)</label>
+                                <input type="number" id="Fried_Potato" name="Fried_Potato" min="0" max="100" value="0">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="form-actions">
+                    <button type="submit" class="btn-primary">
+                        <span>Analyze Risk Profile</span>
+                        <i class="fa-solid fa-arrow-right"></i>
+                    </button>
+                </div>
+            </form>
+        </section>
+
+    </main>
+
+    <!-- FOOTER -->
+    <footer class="footer">
+        <div class="footer-container">
+            <div class="footer-about">
+                <h3>HeartCare</h3>
+                <p>
+                    HeartCare is a heart disease risk prediction platform created to promote early
+                    detection, awareness, and prevention of cardiovascular diseases through simple
+                    online assessment.
+                </p>
+            </div>
+
+            <div class="footer-links">
+                <h4>Quick Links</h4>
+                <a href="/">Home</a>
+                <a href="/#about">About</a>
+                <a href="/#contact">Contact</a>
+                <a href="/calculate">Start Calculation</a>
+            </div>
+
+            <div class="footer-contact">
+                <h4>Contact Info</h4>
+                <p><strong>Email:</strong> support@heartcare.com</p>
+                <p><strong>Phone:</strong> +91 9876543210</p>
+                <p><strong>Location:</strong> Nanded, Maharashtra, India</p>
+            </div>
+        </div>
+
+        <div class="footer-bottom">
+            <p>&copy; 2025 HeartCare | AI Heart Disease Risk Prediction System | All Rights Reserved</p>
+        </div>
+    </footer>
+
+    <!-- Live Risk Preview -->
+    <div id="livePreview" class="live-preview-card">
+        <div class="live-preview-header">
+            <span>Live Risk Preview</span>
+            <i class="fa-solid fa-heart-pulse"></i>
+        </div>
+        <div class="live-risk-score" id="liveRiskScore">--%</div>
+        <div class="live-risk-label" id="liveRiskLabel">Enter details...</div>
+    </div>
+
+    <!-- Modals -->
+    <div id="resultModal" class="modal">
+        <div class="modal-content">
+            <span class="close-modal" onclick="closeModal()">&times;</span>
+            <div class="result-header">
+                <div id="riskIcon" class="risk-icon"></div>
+                <h2 id="riskLevel">High Risk</h2>
+            </div>
+            <div class="result-body">
+                <p>Based on your health indicators, our AI model estimates your cardiovascular disease risk
+                    probability as:</p>
+                <div class="probability-meter">
+                    <div id="probFill" class="prob-fill"></div>
+                    <span id="probValue">0%</span>
+                </div>
+                <p class="disclaimer"><strong>Disclaimer:</strong> This tool provides an estimate based on
+                    statistical models. It is not a medical diagnosis. Please consult a cardiologist for a proper
+                    evaluation.</p>
+            </div>
+            <div class="modal-actions">
+                <button class="btn-cancel" onclick="closeModal()">Close Result</button>
+                <button type="button" onclick="goToRecommendations()" class="view-btn">
+                    View Recommendations
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- SCRIPTS -->
+    <script src="/static/script.js"></script>
+</body>
+
+</html>

app/templates/index.html

@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HeartCare | Advanced Heart Health Assessment</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="/static/style.css">
+    <link rel="icon"
+        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>❤️</text></svg>">
+    <script>
+        (function () { if (!window.chatbase || window.chatbase("getState") !== "initialized") { window.chatbase = (...arguments) => { if (!window.chatbase.q) { window.chatbase.q = [] } window.chatbase.q.push(arguments) }; window.chatbase = new Proxy(window.chatbase, { get(target, prop) { if (prop === "q") { return target.q } return (...args) => target(prop, ...args) } }) } const onLoad = function () { const script = document.createElement("script"); script.src = "https://www.chatbase.co/embed.min.js"; script.id = "AS3pcxeyHl1Kl0m0BEkAf"; script.domain = "www.chatbase.co"; document.body.appendChild(script) }; if (document.readyState === "complete") { onLoad() } else { window.addEventListener("load", onLoad) } })();
+    </script>
+</head>
+
+<body>
+    <!-- Background Effect -->
+    <div class="background-glow"></div>
+
+    <!-- HEADER -->
+    <header class="site-header">
+        <div class="header-container">
+            <div class="brand">
+                <a href="/" class="brand-link" style="text-decoration: none; color: var(--text-main);">
+                    <span class="heart-icon">❤️</span>
+                    <span class="brand-name">HeartCare</span>
+                </a>
+            </div>
+            <nav class="nav-links">
+                <a href="#home">Home</a>
+                <a href="#about">About</a>
+                <a href="#contact">Contact</a>
+                <a href="/calculate" class="btn-start">Start Assessment</a>
+            </nav>
+        </div>
+    </header>
+
+    <main class="container">
+
+        <!-- HERO SECTION -->
+        <section id="home" class="hero">
+            <div class="hero-content" style="animation: fadeInUp 0.8s ease-out;">
+                <div class="badge-new">
+                    <i class="fa-solid fa-sparkles"></i> New AI-Powered Analysis
+                </div>
+                <h1>Your Heart Health, <br> <span class="text-gradient">Understood in Minutes</span></h1>
+                <p>
+                    Experience the future of preventive cardiology. Our advanced AI assesses your risk with clinical
+                    precision and provides personalized, actionable insights—all from the comfort of your home.
+                </p>
+                <div class="hero-buttons">
+                    <a href="/calculate" class="hero-btn primary-btn">
+                        Check Your Risk Now <i class="fa-solid fa-arrow-right"></i>
+                    </a>
+                    <a href="#how-it-works" class="hero-btn secondary-btn">
+                        How It Works <i class="fa-solid fa-circle-play"></i>
+                    </a>
+                </div>
+                <div class="hero-trust">
+                    <span><i class="fa-solid fa-user-shield"></i> 100% Private & Secure</span>
+                    <span><i class="fa-solid fa-check-circle"></i> Clinically Validated Model</span>
+                </div>
+            </div>
+            <div class="hero-image" style="animation: fadeInUp 1s ease-out;">
+                <img src="/static/images/heart.png" alt="3D Heart Illustration" class="floating-heart">
+            </div>
+        </section>
+
+        <!-- TRUST INDICATORS -->
+        <section class="trust-section">
+            <div class="trust-container">
+                <div class="trust-stat">
+                    <div class="stat-number count-up" data-target="10000">10,000+</div>
+                    <div class="stat-label">Assessments Completed</div>
+                </div>
+                <div class="trust-stat">
+                    <div class="stat-number">98%</div>
+                    <div class="stat-label">User Satisfaction</div>
+                </div>
+                <div class="trust-stat">
+                    <div class="stat-number">24/7</div>
+                    <div class="stat-label">AI Availability</div>
+                </div>
+                <div class="trust-stat">
+                    <div class="stat-number">100%</div>
+                    <div class="stat-label">Data Privacy</div>
+                </div>
+            </div>
+        </section>
+
+        <!-- HOW IT WORKS -->
+        <section id="how-it-works" class="how-it-works">
+            <div class="section-title">
+                <div class="badge-new" style="margin-bottom: 1rem;">Simple Process</div>
+                <h2>How It Works</h2>
+                <p>Get your personalized heart health assessment in three simple steps</p>
+            </div>
+            <div class="steps-grid">
+                <div class="step-card">
+                    <div class="step-number">1</div>
+                    <div class="step-icon"><i class="fa-solid fa-clipboard-list"></i></div>
+                    <h3>Fill Health Profile</h3>
+                    <p>Answer a few questions about your age, lifestyle, medical history, and current health status.
+                        Takes only 2-3 minutes.</p>
+                </div>
+                <div class="step-card">
+                    <div class="step-number">2</div>
+                    <div class="step-icon"><i class="fa-solid fa-brain"></i></div>
+                    <h3>AI Analysis</h3>
+                    <p>Our advanced machine learning model analyzes your data against thousands of clinical patterns to
+                        assess your risk.</p>
+                </div>
+                <div class="step-card">
+                    <div class="step-number">3</div>
+                    <div class="step-icon"><i class="fa-solid fa-file-medical"></i></div>
+                    <h3>Get Recommendations</h3>
+                    <p>Receive a detailed report with your risk level, personalized diet plans, exercise tips, and
+                        nearby cardiologist suggestions.</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- ABOUT SECTION -->
+        <section id="about"
+            style="background: linear-gradient(180deg, var(--bg-subtle) 0%, white 100%); padding: 6rem 0;">
+            <div class="section-title">
+                <div class="badge-new" style="margin-bottom: 1rem;">Our Mission</div>
+                <h2>Why Choose HeartCare?</h2>
+                <p>Empowering you with early detection and preventive knowledge through advanced technology.</p>
+            </div>
+
+            <div class="about-grid">
+                <div class="about-card">
+                    <i class="fa-solid fa-heart-pulse"></i>
+                    <h3>AI Risk Analysis</h3>
+                    <p>Advanced machine learning algorithms assess multiple health parameters to estimate your risk
+                        profile with high accuracy.</p>
+                </div>
+
+                <div class="about-card">
+                    <i class="fa-solid fa-chart-line"></i>
+                    <h3>Data-Driven Accuracy</h3>
+                    <p>Trained on thousands of clinical records to ensure reliable and statistical predictions aligned
+                        with medical research.</p>
+                </div>
+
+                <div class="about-card">
+                    <i class="fa-solid fa-user-shield"></i>
+                    <h3>Privacy First</h3>
+                    <p>Your health data is processed securely and is never stored permanently on our servers. Your
+                        privacy is our priority.</p>
+                </div>
+
+                <div class="about-card">
+                    <i class="fa-solid fa-user-doctor"></i>
+                    <h3>Preventive Care</h3>
+                    <p>Get actionable recommendations and alerts to consult specialists when necessary, helping you stay
+                        ahead of health issues.</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- TESTIMONIALS -->
+        <section class="testimonials">
+            <div class="section-title">
+                <div class="badge-new"
+                    style="background: rgba(16, 185, 129, 0.1); color: var(--success); border-color: rgba(16, 185, 129, 0.2); margin-bottom: 1rem;">
+                    <i class="fa-solid fa-star"></i> Success Stories
+                </div>
+                <h2>What Our Users Say</h2>
+                <p>Real stories from people who took control of their heart health</p>
+            </div>
+            <div class="testimonials-grid">
+                <div class="testimonial-card">
+                    <div class="quote-icon"><i class="fa-solid fa-quote-left"></i></div>
+                    <p class="testimonial-text">"HeartCare's assessment helped me identify risk factors I wasn't aware
+                        of. I made lifestyle changes and my doctor confirmed significant improvement in my health
+                        markers."</p>
+                    <div class="testimonial-author">
+                        <div class="author-avatar" style="background: #e0e7ff; color: #4338ca;">RS</div>
+                        <div>
+                            <div class="author-name">Rajesh Sharma <i class="fa-solid fa-circle-check"
+                                    style="color: var(--success); font-size: 0.8em;" title="Verified User"></i></div>
+                            <div class="author-role">Software Engineer, 45</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="testimonial-card">
+                    <div class="quote-icon"><i class="fa-solid fa-quote-left"></i></div>
+                    <p class="testimonial-text">"As someone with a family history of heart disease, this tool gave me
+                        peace of mind. The recommendations were practical and the doctor suggestions were very helpful."
+                    </p>
+                    <div class="testimonial-author">
+                        <div class="author-avatar" style="background: #d1fae5; color: #047857;">PD</div>
+                        <div>
+                            <div class="author-name">Priya Deshmukh <i class="fa-solid fa-circle-check"
+                                    style="color: var(--success); font-size: 0.8em;" title="Verified User"></i></div>
+                            <div class="author-role">Teacher, 38</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="testimonial-card">
+                    <div class="quote-icon"><i class="fa-solid fa-quote-left"></i></div>
+                    <p class="testimonial-text">"The detailed report with diet and exercise plans was exactly what I
+                        needed. It's like having a personal health advisor available 24/7."</p>
+                    <div class="testimonial-author">
+                        <div class="author-avatar" style="background: #fee2e2; color: #b91c1c;">AK</div>
+                        <div>
+                            <div class="author-name">Amit Kulkarni <i class="fa-solid fa-circle-check"
+                                    style="color: var(--success); font-size: 0.8em;" title="Verified User"></i></div>
+                            <div class="author-role">Business Owner, 52</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- CONTACT SECTION -->
+        <section id="contact" style="background: var(--bg-subtle); padding: 6rem 0;">
+            <div class="section-title">
+                <div class="badge-new" style="margin-bottom: 1rem;">Support</div>
+                <h2>Get in Touch</h2>
+                <p>We are always available to help you with your queries and support.</p>
+            </div>
+
+            <div class="contact-grid">
+                <div class="contact-card">
+                    <i class="fa-solid fa-envelope"></i>
+                    <h3>Email Us</h3>
+                    <p>support@heartcare.com</p>
+                    <p class="small text-muted">Response within 24 hours</p>
+                </div>
+
+                <div class="contact-card">
+                    <i class="fa-solid fa-phone"></i>
+                    <h3>Call Us</h3>
+                    <p>+91 9876543210</p>
+                    <p class="small text-muted">Mon-Fri, 9am - 6pm</p>
+                </div>
+
+                <div class="contact-card">
+                    <i class="fa-solid fa-location-dot"></i>
+                    <h3>Visit Us</h3>
+                    <p>Nanded, Maharashtra, India</p>
+                    <p class="small text-muted">Main Office</p>
+                </div>
+
+                <div class="contact-card">
+                    <i class="fa-solid fa-headset"></i>
+                    <h3>Live Support</h3>
+                    <p>Chat with our AI Agent</p>
+                    <p class="small text-muted">Available 24/7</p>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <!-- FOOTER -->
+    <footer class="footer">
+        <div class="footer-container">
+            <div class="footer-about">
+                <h3>HeartCare</h3>
+                <p>
+                    HeartCare is a heart disease risk prediction platform created to promote early
+                    detection, awareness, and prevention of cardiovascular diseases through simple
+                    online assessment.
+                </p>
+            </div>
+
+            <div class="footer-links">
+                <h4>Quick Links</h4>
+                <a href="#home">Home</a>
+                <a href="#about">About</a>
+                <a href="#contact">Contact</a>
+                <a href="/calculate">Start Calculation</a>
+            </div>
+
+            <div class="footer-contact">
+                <h4>Contact Info</h4>
+                <p><i class="fa-solid fa-envelope" style="margin-right: 8px; color: var(--primary-color);"></i>
+                    <strong>Email:</strong> support@heartcare.com
+                </p>
+                <p><i class="fa-solid fa-phone" style="margin-right: 8px; color: var(--primary-color);"></i>
+                    <strong>Phone:</strong> +91 9876543210
+                </p>
+                <p><i class="fa-solid fa-location-dot" style="margin-right: 8px; color: var(--primary-color);"></i>
+                    <strong>Location:</strong> Nanded, Maharashtra, India
+                </p>
+            </div>
+        </div>
+
+        <div class="footer-bottom">
+            <p>&copy; 2025 HeartCare | AI Heart Disease Risk Prediction System | All Rights Reserved</p>
+        </div>
+    </footer>
+
+    <script src="/static/script.js"></script>
+</body>
+
+</html>

app/templates/recommendation.html

@@ -0,0 +1,1105 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Your Health Report | HeartCare</title>
+
+  <!-- Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+  <!-- Main Styles -->
+  <link rel="stylesheet" href="/static/style.css">
+
+  <!-- Libraries -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+
+  <style>
+    /* Recommendation-specific styles */
+    .recommendation-page {
+      padding: 2rem 0;
+    }
+
+    .page-header {
+      text-align: center;
+      margin-bottom: 3rem;
+      animation: fadeInDown 0.8s ease-out;
+    }
+
+    .page-header h1 {
+      font-size: 2.5rem;
+      font-weight: 800;
+      color: var(--text-main);
+      margin-bottom: 0.5rem;
+    }
+
+    .page-header p {
+      color: var(--text-muted);
+      font-size: 1.125rem;
+    }
+
+    .report-grid {
+      display: grid;
+      grid-template-columns: 1fr 420px;
+      gap: 2rem;
+      margin-bottom: 2rem;
+    }
+
+    @media (max-width: 980px) {
+      .report-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .sidebar {
+        order: -1;
+      }
+    }
+
+    /* Risk Level Selector */
+    .risk-selector {
+      background: white;
+      padding: 2rem;
+      border-radius: var(--radius-xl);
+      box-shadow: var(--shadow-md);
+      margin-bottom: 2rem;
+    }
+
+    .risk-selector h3 {
+      font-size: 1.25rem;
+      font-weight: 700;
+      margin-bottom: 1rem;
+      color: var(--text-main);
+    }
+
+    .risk-pills {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+      gap: 0.75rem;
+    }
+
+    .risk-pill {
+      padding: 1rem;
+      border-radius: var(--radius-lg);
+      color: white;
+      text-align: center;
+      cursor: pointer;
+      font-weight: 600;
+      transition: all 0.3s ease;
+      border: 2px solid transparent;
+    }
+
+    .risk-pill:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+    }
+
+    .risk-pill.active {
+      border-color: var(--text-main);
+      box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
+    }
+
+    .risk-pill.vlow {
+      background: linear-gradient(135deg, #10B981, #059669);
+    }
+
+    .risk-pill.low {
+      background: linear-gradient(135deg, #34D399, #10B981);
+    }
+
+    .risk-pill.mod {
+      background: linear-gradient(135deg, #FBBF24, #F59E0B);
+    }
+
+    .risk-pill.high {
+      background: linear-gradient(135deg, #FB923C, #F97316);
+    }
+
+    .risk-pill.vh {
+      background: linear-gradient(135deg, #EF4444, #DC2626);
+    }
+
+    .risk-pill small {
+      display: block;
+      font-size: 0.75rem;
+      opacity: 0.9;
+      margin-top: 0.25rem;
+    }
+
+    /* Main Report Card */
+    .report-card {
+      background: white;
+      padding: 2.5rem;
+      border-radius: var(--radius-xl);
+      box-shadow: var(--shadow-lg);
+      border-left: 6px solid var(--primary-color);
+      animation: fadeInUp 0.8s ease-out;
+    }
+
+    .report-card.highlight {
+      box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1), var(--shadow-lg);
+    }
+
+    .report-title {
+      font-size: 1.75rem;
+      font-weight: 800;
+      margin-bottom: 0.5rem;
+      color: var(--text-main);
+    }
+
+    .report-subtitle {
+      color: var(--text-muted);
+      margin-bottom: 2rem;
+      font-size: 1rem;
+    }
+
+    .recommendations-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1.5rem;
+      margin-top: 2rem;
+    }
+
+    .recommendation-card {
+      background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
+      padding: 1.5rem;
+      border-radius: var(--radius-lg);
+      border: 1px solid var(--border-color);
+      transition: all 0.3s ease;
+    }
+
+    .recommendation-card:hover {
+      transform: translateY(-4px);
+      box-shadow: var(--shadow-md);
+    }
+
+    .recommendation-card h4 {
+      font-size: 1.125rem;
+      font-weight: 700;
+      margin-bottom: 1rem;
+      color: var(--primary-color);
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .recommendation-card ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .recommendation-card li {
+      padding: 0.5rem 0;
+      color: var(--text-main);
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    .recommendation-card li::before {
+      content: "✓";
+      color: var(--primary-color);
+      font-weight: 700;
+      flex-shrink: 0;
+    }
+
+    /* Sidebar */
+    .sidebar .card {
+      background: white;
+      padding: 1.5rem;
+      border-radius: var(--radius-xl);
+      box-shadow: var(--shadow-md);
+      margin-bottom: 1.5rem;
+    }
+
+    .sidebar h3 {
+      font-size: 1.125rem;
+      font-weight: 700;
+      margin-bottom: 1rem;
+      color: var(--text-main);
+    }
+
+    /* Severity Meter */
+    .meter-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 1.5rem 0;
+    }
+
+    .meter {
+      width: 160px;
+      height: 160px;
+      position: relative;
+    }
+
+    .meter svg {
+      transform: rotate(-90deg);
+    }
+
+    .meter .center {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+    }
+
+    .meter .percent {
+      font-size: 2rem;
+      font-weight: 800;
+      color: var(--primary-color);
+    }
+
+    .meter .label {
+      font-size: 0.875rem;
+      color: var(--text-muted);
+      margin-top: 0.25rem;
+    }
+
+    /* Chart */
+    .chart-container {
+      height: 240px;
+      margin-top: 1rem;
+    }
+
+    /* Doctor Cards */
+    .doctor-list {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .doctor-card {
+      padding: 1.25rem;
+      border-radius: var(--radius-lg);
+      background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
+      border: 1px solid var(--border-color);
+      transition: all 0.3s ease;
+    }
+
+    .doctor-card:hover {
+      transform: translateX(4px);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .doctor-name {
+      font-weight: 700;
+      color: var(--text-main);
+      margin-bottom: 0.5rem;
+    }
+
+    .doctor-info {
+      font-size: 0.875rem;
+      color: var(--text-muted);
+      margin-bottom: 0.75rem;
+    }
+
+    .doctor-actions {
+      display: flex;
+      gap: 0.5rem;
+      margin-top: 0.75rem;
+    }
+
+    .btn-small {
+      padding: 0.5rem 1rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      border: none;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .btn-outline {
+      background: white;
+      border: 1px solid var(--border-color);
+      color: var(--text-main);
+    }
+
+    .btn-outline:hover {
+      background: var(--bg-body);
+    }
+
+    .btn-primary-small {
+      background: var(--primary-color);
+      color: white;
+    }
+
+    .btn-primary-small:hover {
+      background: var(--primary-hover);
+    }
+
+    /* Map */
+    #map {
+      height: 280px;
+      border-radius: var(--radius-lg);
+      overflow: hidden;
+      margin: 1rem 0;
+    }
+
+    /* Action Buttons */
+    .action-section {
+      background: white;
+      padding: 2rem;
+      border-radius: var(--radius-xl);
+      box-shadow: var(--shadow-md);
+      margin-top: 2rem;
+    }
+
+    .action-section h3 {
+      font-size: 1.25rem;
+      font-weight: 700;
+      margin-bottom: 1.5rem;
+      color: var(--text-main);
+    }
+
+    .action-buttons {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+    }
+
+    .action-btn {
+      padding: 0.875rem 1.75rem;
+      border-radius: 100px;
+      font-weight: 600;
+      border: none;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .action-btn-primary {
+      background: var(--primary-color);
+      color: white;
+      box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2);
+    }
+
+    .action-btn-primary:hover {
+      background: var(--primary-hover);
+      transform: translateY(-2px);
+      box-shadow: 0 8px 12px rgba(79, 70, 229, 0.3);
+    }
+
+    /* Priority Factors */
+    .priority-section {
+      margin-bottom: 2rem;
+      animation: fadeInUp 0.9s ease-out;
+    }
+
+    .priority-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 1rem;
+    }
+
+    .priority-card {
+      background: #FEF2F2;
+      border: 1px solid #FCA5A5;
+      padding: 1.25rem;
+      border-radius: var(--radius-lg);
+      position: relative;
+    }
+
+    .priority-card.warning {
+      background: #FFFBEB;
+      border-color: #FCD34D;
+    }
+
+    .priority-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.5rem;
+    }
+
+    .priority-title {
+      font-weight: 700;
+      color: #991B1B;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .priority-card.warning .priority-title {
+      color: #92400E;
+    }
+
+    .priority-value {
+      font-weight: 800;
+      font-size: 1.1rem;
+    }
+
+    .priority-desc {
+      font-size: 0.9rem;
+      color: var(--text-main);
+      margin-bottom: 0.5rem;
+    }
+
+    .info-tooltip {
+      display: inline-block;
+      cursor: pointer;
+      color: var(--primary-color);
+      margin-left: 0.5rem;
+    }
+
+    .explanation-box {
+      background: white;
+      padding: 0.75rem;
+      border-radius: var(--radius-md);
+      font-size: 0.85rem;
+      margin-top: 0.5rem;
+      border-left: 3px solid var(--primary-color);
+      display: none;
+    }
+
+    .explanation-box.visible {
+      display: block;
+      animation: fadeInDown 0.3s ease-out;
+    }
+
+    .action-btn-secondary {
+      background: white;
+      color: var(--text-main);
+      border: 1px solid var(--border-color);
+    }
+
+    .action-btn-secondary:hover {
+      background: var(--bg-body);
+    }
+
+    /* Animations */
+    @keyframes fadeInDown {
+      from {
+        opacity: 0;
+        transform: translateY(-20px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <!-- Background Effect -->
+  <div class="background-glow"></div>
+
+  <!-- HEADER -->
+  <header class="site-header">
+    <div class="header-container">
+      <div class="brand">
+        <span class="heart-icon">❤️</span>
+        <span class="brand-name">HeartCare</span>
+      </div>
+      <nav class="nav-links">
+        <a href="/">Home</a>
+        <a href="/#about">About</a>
+        <a href="/#contact">Contact</a>
+        <a href="/calculate" class="btn-start">Start Assessment</a>
+      </nav>
+    </div>
+  </header>
+
+  <main class="container recommendation-page">
+    <!-- Page Header -->
+    <div class="page-header">
+      <h1>Your Personalized Health Report</h1>
+      <p>Comprehensive cardiovascular risk assessment with tailored recommendations</p>
+    </div>
+
+    <!-- Risk Level Selector -->
+    <div class="risk-selector">
+      <h3>Select Risk Level to View Details</h3>
+      <p class="small" style="margin-bottom: 1rem;">Click on a risk level below or the system will auto-select based on
+        your assessment</p>
+      <div class="risk-pills">
+        <div class="risk-pill vlow" onclick="show(1)">
+          Very Low<br><small>0–20%</small>
+        </div>
+        <div class="risk-pill low" onclick="show(2)">
+          Low<br><small>21–40%</small>
+        </div>
+        <div class="risk-pill mod" onclick="show(3)">
+          Moderate<br><small>41–60%</small>
+        </div>
+        <div class="risk-pill high" onclick="show(4)">
+          High<br><small>61–80%</small>
+        </div>
+        <div class="risk-pill vh" onclick="show(5)">
+          Very High<br><small>81–100%</small>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content Grid -->
+    <div class="report-grid">
+      <!-- Left Column: Report Details -->
+      <div class="main-content">
+        <div id="detailsArea"></div>
+
+        <!-- Action Buttons -->
+        <div class="action-section">
+          <h3><i class="fa-solid fa-download"></i> Export & Download</h3>
+          <div class="action-buttons">
+            <button class="action-btn action-btn-primary" onclick="downloadDietPDF()">
+              <i class="fa-solid fa-file-pdf"></i> Download Diet Plan (PDF)
+            </button>
+            <button class="action-btn action-btn-secondary" onclick="downloadDietCSV()">
+              <i class="fa-solid fa-file-csv"></i> Download Diet Plan (CSV)
+            </button>
+            <button class="action-btn action-btn-primary" onclick="generatePDF()">
+              <i class="fa-solid fa-file-medical"></i> Download Full Report (PDF)
+            </button>
+            <button class="action-btn action-btn-secondary" onclick="printFriendly()">
+              <i class="fa-solid fa-print"></i> Print Report
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column: Sidebar -->
+      <div class="sidebar">
+        <!-- Severity Meter -->
+        <div class="card">
+          <h3><i class="fa-solid fa-gauge-high"></i> Risk Severity</h3>
+          <div class="meter-container">
+            <div class="meter">
+              <svg width="160" height="160" viewBox="0 0 100 100">
+                <defs>
+                  <linearGradient id="meterGradient" x1="0" x2="1">
+                    <stop offset="0%" stop-color="#10B981" />
+                    <stop offset="50%" stop-color="#FBBF24" />
+                    <stop offset="100%" stop-color="#EF4444" />
+                  </linearGradient>
+                </defs>
+                <circle cx="50" cy="50" r="40" stroke="#E5E7EB" stroke-width="12" fill="none"></circle>
+                <circle id="meterArc" cx="50" cy="50" r="40" stroke="url(#meterGradient)" stroke-width="12"
+                  stroke-linecap="round" fill="none" stroke-dasharray="0 251.2"></circle>
+              </svg>
+              <div class="center">
+                <div class="percent" id="meterPercent">0%</div>
+                <div class="label" id="meterLabel">Risk Level</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Risk Factors Chart -->
+        <div class="card">
+          <h3><i class="fa-solid fa-chart-column"></i> Risk Factor Analysis</h3>
+          <div class="chart-container">
+            <canvas id="factorChart"></canvas>
+          </div>
+        </div>
+
+        <!-- Nearby Doctors -->
+        <div class="card">
+          <h3><i class="fa-solid fa-user-doctor"></i> Nearby Cardiologists</h3>
+          <p class="small" style="margin-bottom: 1rem;">Recommended specialists in Nanded, Maharashtra</p>
+          <div id="map"></div>
+          <div class="doctor-list" id="doctorList"></div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="footer-container">
+      <div class="footer-about">
+        <h3>HeartCare</h3>
+        <p>HeartCare is a heart disease risk prediction platform created to promote early detection, awareness, and
+          prevention of cardiovascular diseases.</p>
+      </div>
+      <div class="footer-links">
+        <h4>Quick Links</h4>
+        <a href="/">Home</a>
+        <a href="/#about">About</a>
+        <a href="/#contact">Contact</a>
+        <a href="/calculate">Start Calculation</a>
+      </div>
+      <div class="footer-contact">
+        <h4>Contact Info</h4>
+        <p><strong>Email:</strong> support@heartcare.com</p>
+        <p><strong>Phone:</strong> +91 9876543210</p>
+        <p><strong>Location:</strong> Nanded, Maharashtra, India</p>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <p>&copy; 2025 HeartCare | AI Heart Disease Risk Prediction System | All Rights Reserved</p>
+    </div>
+  </footer>
+
+  <script>
+    /* Sample data — Cardiologists in Nanded, MH */
+    const doctors = [
+      { name: "Dr. Shrikant Bhoskar", address: "Sunrise Global Hospital, Nanded", phone: "+91 70454 45363", email: "shrikant@example.com", lat: 19.1683962, lon: 77.3063096 },
+      { name: "Dr. Sunil Kamble", address: "Rhythm Heart Care Clinic, Nanded", phone: "+91 92267 30273", email: "sunil@example.com", lat: 19.1574799, lon: 77.3081876 },
+      { name: "Dattakrupa Heart Care", address: "Doctor Lane, Khadakpura, Nanded", phone: "+91 93071 27289", email: "dattakrupa@example.com", lat: 19.159009, lon: 77.307444 }
+    ];
+
+    const NANDED_LAT = 19.1601;
+    const NANDED_LON = 77.3040;
+
+    /* Recommendation templates */
+    const PLANS = {
+      1: {
+        title: "✅ Very Low Risk (0–20%)",
+        desc: "Excellent health status! Continue your healthy lifestyle with routine checkups once per year.",
+        factors: [2, 2, 1, 2, 2],
+        diet: ["Daily fruits & vegetables", "Whole grains", "Limit processed sugar", "Stay hydrated"],
+        exercise: ["30 min walk daily", "Yoga/Stretching 3× week", "Light cardio activities"]
+      },
+      2: {
+        title: "🟢 Low Risk (21–40%)",
+        desc: "Good health with room for improvement. Small lifestyle changes recommended.",
+        factors: [3, 3, 2, 3, 3],
+        diet: ["Reduce salt intake", "Increase fiber", "Include omega-3 foods", "Limit saturated fats"],
+        exercise: ["Brisk walk 30–40 mins daily", "Light resistance training 2× week", "Swimming or cycling"]
+      },
+      3: {
+        title: "🟡 Moderate Risk (41–60%)",
+        desc: "Preventive action advised. Please consult your doctor for personalized guidance.",
+        factors: [5, 6, 5, 5, 4],
+        diet: ["Mediterranean diet", "Avoid fried foods", "Limit red meat", "Increase vegetables"],
+        exercise: ["Brisk walking 30–45 mins", "Swimming or cycling", "Yoga for stress management"]
+      },
+      4: {
+        title: "🟠 High Risk (61–80%)",
+        desc: "Cardiologist consultation strongly recommended. Take immediate preventive measures.",
+        factors: [7, 8, 7, 6, 5],
+        diet: ["Low sodium & low saturated fat", "Small frequent meals", "Consult dietician", "Avoid processed foods"],
+        exercise: ["Doctor-approved light exercise only", "Avoid heavy exertion", "Gentle walking"]
+      },
+      5: {
+        title: "🔴 Very High Risk (81–100%)",
+        desc: "URGENT: Immediate medical attention required. Please visit ER or cardiology specialist now.",
+        factors: [9, 10, 9, 8, 7],
+        diet: ["Strict medical diet", "Monitor blood sugar", "Avoid processed foods", "Follow doctor's plan"],
+        exercise: ["Only doctor-approved minimal activity", "Complete rest if advised"]
+      }
+    };
+
+    /* Read parameters */
+    let currentRiskLevel = {{ risk_level }};
+    const params = new URLSearchParams(location.search);
+    const riskPercentParam = parseFloat(params.get("risk")) || (currentRiskLevel * 20 - 10);
+
+    let factorChartInstance = null;
+
+    /* Initialize map */
+    let map = L.map('map', { scrollWheelZoom: false }).setView([NANDED_LAT, NANDED_LON], 13);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);
+
+    doctors.forEach((d) => {
+      const marker = L.marker([d.lat, d.lon]).addTo(map);
+      marker.bindPopup(`<strong>${d.name}</strong><br>${d.address}<br>Phone: ${d.phone}`);
+    });
+
+    /* Populate doctor list */
+    function refreshDoctorList() {
+      const div = document.getElementById('doctorList');
+      div.innerHTML = '';
+      doctors.forEach(d => {
+        const el = document.createElement('div');
+        el.className = 'doctor-card';
+        el.innerHTML = `
+                    <div class="doctor-name">${d.name}</div>
+                    <div class="doctor-info">${d.address}</div>
+                    <div class="doctor-info">📞 ${d.phone}</div>
+                    <div class="doctor-actions">
+                        <button class="btn-small btn-outline" onclick="emailDoctor('${d.email}','${d.name}')">
+                            <i class="fa-solid fa-envelope"></i> Email
+                        </button>
+                        <button class="btn-small btn-primary-small" onclick="alertDoctor('${d.email}','${d.name}')">
+                            <i class="fa-solid fa-bell"></i> Send Alert
+                        </button>
+                    </div>
+                `;
+        div.appendChild(el);
+      });
+    }
+    refreshDoctorList();
+
+    /* Show risk details */
+    function show(level) {
+      currentRiskLevel = level;
+      const data = PLANS[level];
+      const details = document.getElementById('detailsArea');
+
+      // Update active pill
+      document.querySelectorAll('.risk-pill').forEach(pill => pill.classList.remove('active'));
+      document.querySelectorAll('.risk-pill')[level - 1].classList.add('active');
+
+      const priorityHTML = getPriorityFactorsHTML();
+
+      details.innerHTML = `
+                <div class="report-card highlight" id="detailSection">
+                    <div class="report-title">${data.title}</div>
+                    <div class="report-subtitle">${data.desc}</div>
+                    
+                    <div style="background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%); padding: 1.5rem; border-radius: var(--radius-lg); margin-bottom: 2rem;">
+                        <h4 style="margin: 0 0 0.5rem 0; color: var(--primary-color);"><i class="fa-solid fa-chart-line"></i> Your Risk Score</h4>
+                        <p style="margin: 0; font-size: 2rem; font-weight: 800; color: var(--text-main);" id="predRiskText">--</p>
+                    </div>
+
+                    ${priorityHTML}
+
+                    <h3 style="margin-bottom: 1.5rem; font-size: 1.5rem;"><i class="fa-solid fa-clipboard-list"></i> Personalized Recommendations</h3>
+                    <div class="recommendations-grid">
+                        <div class="recommendation-card">
+                            <h4><i class="fa-solid fa-utensils"></i> Diet Plan</h4>
+                            <ul>${data.diet.map(i => `<li>${i}</li>`).join('')}</ul>
+                        </div>
+                        <div class="recommendation-card">
+                            <h4><i class="fa-solid fa-dumbbell"></i> Exercise</h4>
+                            <ul>${data.exercise.map(i => `<li>${i}</li>`).join('')}</ul>
+                        </div>
+                        <div class="recommendation-card">
+                            <h4><i class="fa-solid fa-stethoscope"></i> Medical Care</h4>
+                            <ul>
+                                <li>${data.desc}</li>
+                                <li>Recommended tests: BP, Lipid profile, ECG</li>
+                                ${level >= 4 ? '<li style="color: #EF4444; font-weight: 600;">Consult cardiologist immediately</li>' : ''}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            `;
+
+      const risk = (typeof riskPercentParam === 'number' && !Number.isNaN(riskPercentParam)) ? riskPercentParam : Math.min(100, Math.max(5, level * 20 - 5));
+      animateMeter(risk);
+      document.getElementById('predRiskText').innerText = risk + '%';
+      renderChart(data.factors);
+
+      setTimeout(() => document.getElementById('detailSection').scrollIntoView({ behavior: 'smooth' }), 150);
+    }
+
+    function getPriorityFactorsHTML() {
+      const factors = [];
+
+      // BMI
+      const bmi = parseFloat(params.get('BMI'));
+      if (bmi >= 30) {
+        factors.push({
+          title: 'High BMI (Obesity)',
+          value: bmi,
+          desc: 'A BMI above 30 significantly increases heart disease risk.',
+          critical: true,
+          tip: 'Aim for a BMI between 18.5 and 24.9 through calorie deficit and regular exercise.'
+        });
+      } else if (bmi >= 25) {
+        factors.push({
+          title: 'Overweight',
+          value: bmi,
+          desc: 'Being overweight is a modifiable risk factor.',
+          critical: false,
+          tip: 'Slight weight loss (5-10%) can produce significant health benefits.'
+        });
+      }
+
+      // Smoking
+      if (params.get('Smoking') === '1') {
+        factors.push({
+          title: 'Smoking History',
+          value: 'Yes',
+          desc: 'Smoking damages blood vessels and reduces oxygen delivery.',
+          critical: true,
+          tip: 'Quitting smoking is the most impactful step for heart health. Ask a doctor about cessation aids.'
+        });
+      }
+
+      // Diabetes
+      const diabetes = params.get('Diabetes');
+      if (diabetes === 'Yes' || diabetes === 'During Pregnancy') {
+        factors.push({
+          title: 'Diabetes Indicator',
+          value: diabetes,
+          desc: 'High blood sugar damages nerves and blood vessels controlling the heart.',
+          critical: true,
+          tip: 'Monitor blood sugar daily and adhere to a low-glycemic diet.'
+        });
+      }
+
+      // Alcohol
+      const alcohol = parseInt(params.get('Alcohol'));
+      if (alcohol > 14) {
+        factors.push({
+          title: 'High Alcohol Intake',
+          value: `${alcohol} days/mo`,
+          desc: 'Excessive alcohol can lead to high blood pressure and heart failure.',
+          critical: false,
+          tip: 'Limit alcohol to max 1-2 drinks per occasion or consider abstinence.'
+        });
+      }
+
+      // Age
+      const age = parseInt(params.get('Age'));
+      if (age > 65) {
+        factors.push({
+          title: 'Age Factor',
+          value: `${age} yrs`,
+          desc: 'Cardiovascular risk naturally increases with age.',
+          critical: false,
+          tip: 'More frequent checkups (every 6 months) are recommended for your age group.'
+        });
+      }
+
+      // Poor Health Perception
+      const genHealth = params.get('General_Health');
+      if (genHealth === 'Poor' || genHealth === 'Fair') {
+        factors.push({
+          title: 'Self-Reported Health',
+          value: genHealth,
+          desc: 'Your self-perception often correlates with underlying issues.',
+          critical: true,
+          tip: 'Discuss your specific symptoms (fatigue, pain) with a GP.'
+        });
+      }
+
+      // Depression
+      if (params.get('Depression') === '1') {
+        factors.push({
+          title: 'Emotional Well-being',
+          value: 'Depression Indicator',
+          desc: 'Mental health significantly impacts physical heart health.',
+          critical: false,
+          tip: 'Regular exercise and therapy can improve both mood and heart health.'
+        });
+      }
+
+      // Arthritis
+      if (params.get('Arthritis') === '1') {
+        factors.push({
+          title: 'Chronic Condition',
+          value: 'Arthritis',
+          desc: 'Inflammation from arthritis can affect cardiovascular health.',
+          critical: false,
+          tip: 'Focus on low-impact activities like swimming to keep the heart healthy without straining joints.'
+        });
+      }
+
+      // Cancer History
+      if (params.get('Skin_Cancer') === '1' || params.get('Other_Cancer') === '1') {
+        factors.push({
+          title: 'Medical History',
+          value: 'Cancer Survivor',
+          desc: 'Prior health challenges require more careful cardiovascular monitoring.',
+          critical: false,
+          tip: 'Maintain regular follow-ups with your oncology and cardiology team.'
+        });
+      }
+
+      if (factors.length === 0) return '';
+
+      return `
+            <div class="priority-section">
+                <h3 style="color: #991B1B; margin-bottom: 1rem;"><i class="fa-solid fa-triangle-exclamation"></i> Priority Risk Factors</h3>
+                <div class="priority-grid">
+                    ${factors.map((f, i) => `
+                        <div class="priority-card ${f.critical ? '' : 'warning'}">
+                            <div class="priority-header">
+                                <div class="priority-title">
+                                    ${f.critical ? '<i class="fa-solid fa-circle-exclamation"></i>' : '<i class="fa-solid fa-circle-info"></i>'}
+                                    ${f.title}
+                                </div>
+                                <div class="priority-value">${f.value}</div>
+                            </div>
+                            <div class="priority-desc">${f.desc}</div>
+                            <div style="font-size: 0.85rem; color: var(--primary-color); font-weight: 600; cursor: pointer;" onclick="toggleExp(${i})">
+                                <i class="fa-regular fa-lightbulb"></i> View Advice
+                            </div>
+                            <div id="exp-${i}" class="explanation-box">
+                                <strong><i class="fa-solid fa-user-doctor"></i> Recommendation:</strong> ${f.tip}
+                            </div>
+                        </div>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+    }
+
+    function toggleExp(i) {
+      const el = document.getElementById(`exp-${i}`);
+      el.classList.toggle('visible');
+    }
+
+    /* Animate meter */
+    function animateMeter(percent) {
+      const arc = document.getElementById('meterArc');
+      const meterPercent = document.getElementById('meterPercent');
+      const circumference = 2 * Math.PI * 40;
+      const target = Math.max(0, Math.min(100, percent));
+      const length = (target / 100) * circumference;
+
+      let current = 0;
+      const steps = 50;
+      const stepVal = length / steps;
+
+      if (window.meterAnim) clearInterval(window.meterAnim);
+      arc.style.strokeDasharray = `0 ${circumference}`;
+
+      window.meterAnim = setInterval(() => {
+        current += stepVal;
+        const filled = current;
+        const remain = Math.max(0, circumference - filled);
+        arc.style.strokeDasharray = `${filled} ${remain}`;
+        meterPercent.innerText = Math.round((filled / circumference) * 100) + '%';
+        if (filled >= length - 0.1) {
+          clearInterval(window.meterAnim);
+          meterPercent.innerText = Math.round(target) + '%';
+        }
+      }, 10);
+    }
+
+    /* Chart.js for factors */
+    function renderChart(values) {
+      const ctx = document.getElementById('factorChart').getContext('2d');
+      if (factorChartInstance) factorChartInstance.destroy();
+      factorChartInstance = new Chart(ctx, {
+        type: 'bar',
+        data: {
+          labels: ['BMI', 'BP', 'Cholesterol', 'Lifestyle', 'Diet'],
+          datasets: [{
+            label: 'Factor Level',
+            data: values,
+            backgroundColor: ['#10B981', '#34D399', '#FBBF24', '#FB923C', '#EF4444']
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: { legend: { display: false } },
+          scales: { y: { beginAtZero: true, max: 10 } }
+        }
+      });
+    }
+
+    /* Download functions */
+    function downloadDietCSV() {
+      const lev = currentRiskLevel;
+      const plan = PLANS[lev];
+      const rows = [['Type', 'Item'], ...plan.diet.map(i => ['Diet', i]), ...plan.exercise.map(i => ['Exercise', i])];
+      const csv = rows.map(r => r.map(c => `"${String(c).replace(/"/g, '""')}"`).join(',')).join('\n');
+      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `heartcare_diet_plan_level_${lev}.csv`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    }
+
+    async function downloadDietPDF() {
+      const { jsPDF } = window.jspdf;
+      const doc = new jsPDF();
+      const lev = currentRiskLevel;
+      const plan = PLANS[lev];
+      doc.setFontSize(16);
+      doc.text(`HeartCare - Diet & Exercise Plan`, 14, 20);
+      doc.setFontSize(14);
+      doc.text(`${plan.title}`, 14, 30);
+      doc.setFontSize(12);
+      let y = 44;
+      doc.text('Diet Recommendations:', 14, y);
+      y += 6;
+      plan.diet.forEach(i => { doc.text(`• ${i}`, 18, y); y += 6; });
+      y += 4;
+      doc.text('Exercise Recommendations:', 14, y);
+      y += 6;
+      plan.exercise.forEach(i => { doc.text(`• ${i}`, 18, y); y += 6; });
+      doc.save(`heartcare_diet_plan_level_${lev}.pdf`);
+    }
+
+    function printFriendly() {
+      window.print();
+    }
+
+    async function generatePDF() {
+      const { jsPDF } = window.jspdf;
+      const doc = new jsPDF({ unit: 'px', format: 'a4' });
+      const lev = currentRiskLevel;
+      const plan = PLANS[lev];
+      const risk = riskPercentParam || (lev * 20 - 10);
+
+      doc.setFontSize(20);
+      doc.text('HeartCare — Health Report', 20, 30);
+      doc.setFontSize(12);
+      doc.text(`${plan.title} — Risk: ${risk}%`, 20, 52);
+      doc.text(`Generated: ${new Date().toLocaleString()}`, 20, 68);
+
+      const chartCanvas = document.getElementById('factorChart');
+      const chartDataUrl = chartCanvas.toDataURL('image/png', 1.0);
+      doc.addImage(chartDataUrl, 'PNG', 20, 90, 320, 160);
+
+      let y = 260;
+      doc.setFontSize(13);
+      doc.text('Diet Recommendations:', 20, y);
+      y += 16;
+      plan.diet.forEach(i => { doc.setFontSize(11); doc.text('• ' + i, 24, y); y += 12; });
+      y += 8;
+      doc.setFontSize(13);
+      doc.text('Exercise Recommendations:', 20, y);
+      y += 16;
+      plan.exercise.forEach(i => { doc.setFontSize(11); doc.text('• ' + i, 24, y); y += 12; });
+      y += 14;
+      doc.setFontSize(13);
+      doc.text('Nearby Doctors:', 20, y);
+      y += 16;
+      doctors.forEach(d => {
+        doc.setFontSize(11);
+        doc.text(`${d.name} — ${d.address} — ${d.phone}`, 24, y);
+        y += 12;
+      });
+      doc.save(`heartcare_report_level_${lev}.pdf`);
+    }
+
+    function emailDoctor(email, name) {
+      const lev = currentRiskLevel;
+      const risk = riskPercentParam || (lev * 20 - 10);
+      const subject = encodeURIComponent(`HeartCare: Consultation Request — Risk ${risk}%`);
+      const body = encodeURIComponent(`Dear ${name},\n\nI am contacting you regarding a cardiovascular risk assessment showing ${risk}% risk. Please let me know your available consultation slots.\n\nRegards,\nHeartCare User`);
+      window.location.href = `mailto:${email}?subject=${subject}&body=${body}`;
+    }
+
+    function alertDoctor(email, name) {
+      emailDoctor(email, name);
+    }
+
+    /* Initialize */
+    window.addEventListener('load', () => {
+      show(currentRiskLevel);
+    });
+  </script>
+</body>
+
+</html>

requirements.txt

@@ -0,0 +1,14 @@
+fastapi==0.109.0
+uvicorn==0.27.0
+pydantic==2.6.0
+pydantic-settings==2.1.0
+joblib==1.3.2
+scikit-learn==1.4.0
+pandas==2.2.0
+numpy==1.26.3
+python-multipart==0.0.6
+prometheus-fastapi-instrumentator==6.1.0
+pytest==8.0.0
+httpx==0.26.0
+jinja2
+aiofiles

run_app.py

@@ -0,0 +1,60 @@
+import os
+import sys
+import subprocess
+import webbrowser
+import threading
+import time
+
+def install_dependencies():
+    """Install dependencies from requirements.txt."""
+    print("Checking and installing dependencies...")
+    try:
+        subprocess.check_call([sys.executable, "-m", "pip", "install", "-r", "requirements.txt"])
+        print("Dependencies installed successfully.")
+    except subprocess.CalledProcessError as e:
+        print(f"Error installing dependencies: {e}")
+        sys.exit(1)
+
+def run_app():
+    """Run the FastAPI application."""
+    print("Starting Heart Disease Prediction App...")
+    
+    # Set Environment Variable for Model Path if not set
+    if "MODEL_PATH" not in os.environ:
+        # Default to the correct path relative to this script
+        os.environ["MODEL_PATH"] = "app/models/heart_disease_model.pkl"
+
+    # Add current directory to sys.path
+    sys.path.append(os.getcwd())
+
+    # Open browser in a separate thread
+    def open_browser():
+        time.sleep(3) # Wait for server to start
+        print("Opening browser at http://localhost:8000")
+        webbrowser.open("http://localhost:8000")
+
+    threading.Thread(target=open_browser, daemon=True).start()
+
+    # Run Uvicorn
+    try:
+        import uvicorn
+        uvicorn.run("app.main:app", host="0.0.0.0", port=8000, reload=False)
+    except ImportError:
+        print("Error: uvicorn not found. Please run the script again after installation.")
+    except Exception as e:
+        print(f"Error running application: {e}")
+
+if __name__ == "__main__":
+    # Ensure we are in the script's directory
+    os.chdir(os.path.dirname(os.path.abspath(__file__)))
+    
+    # Check if dependencies are installed
+    try:
+        import fastapi
+        import uvicorn
+        import joblib
+        import jinja2
+    except ImportError:
+        install_dependencies()
+    
+    run_app()