Upload 6 files

FRONTEND.md

@@ -0,0 +1,68 @@
+# 🏥 Frontend Architecture & UI/UX Documentation
+
+This document outlines the design philosophy, technical implementation, and features of the **Flask-Native Frontend** for the Heart Attack Prediction application. 
+
+Unlike standard dashboards, this interface focuses on **clinical clarity**, **patient education**, and **responsive accessibility**.
+
+---
+
+## ⚡ Overview
+This frontend is a server-side rendered (SSR) implementation using **Jinja2 templates**. It is designed to be lightweight, dependency-free (no Node.js/React required), and highly performant on mobile devices.
+
+## 🎨 Design System: "Modern Clinical Glassmorphism"
+We moved away from generic Bootstrap templates to a custom design language.
+* **Color Palette:** Trustworthy Medical Blue (`#2563eb`), Deep Navy (`#1e3a8a`), and Soft Slate (`#f8fafc`).
+* **Visual Style:** Glass-morphism cards with backdrop filters, subtle gradients, and high-fidelity SVG animations.
+* **Typography:** `Plus Jakarta Sans` for clean, modern readability.
+
+---
+
+## 🚀 Key Features
+
+### 1. The Intelligent Knowledge Hub 🧠
+A dynamic side panel (on Desktop) or bottom-sheet (on Mobile) that acts as a real-time medical assistant.
+* **Context Awareness:** As users click different fields (e.g., *Chest Pain*, *Slope*), the Hub updates instantly to explain what that medical term means.
+* **Data Ranges:** Displays valid ranges (e.g., "Age: 29-77") based on the dataset.
+* **Decision Support:** Provides "Healthy" vs "Risky" examples (e.g., *"0 Vessels = Blocked"* vs *"3 Vessels = Clear"*) to guide accurate data entry.
+
+### 2. Mobile-First Responsiveness 📱
+The layout adapts aggressively to screen size:
+* **Desktop:** Split-screen view. Form on the left, Knowledge Hub fixed on the right.
+* **Mobile:** Single-column form. The Knowledge Hub transforms into a **Sticky Bottom Sheet**, ensuring users can read guidance *while* typing without losing context.
+
+### 3. Smart Risk Modals 🛡️
+Instead of a simple text result, the app uses context-aware modals:
+* **🔴 High Risk (Danger Mode):**
+    * Triggers immediate visual warnings.
+    * **Geolocation Integration:** Features a *"Locate Nearest Hospital"* button that uses the browser's GPS API to find cardiology centers via Google Maps.
+    * **Safety Fallback:** If location is denied, it presents a prioritized "To-Do List" (e.g., *Stop exertion, Sit down*).
+* **🟢 Low Risk (Safe Mode):**
+    * Provides actionable lifestyle maintenance tips (Cardio, Diet, Hydration).
+
+### 4. Inclusive & Robust Inputs 🤝
+* **Gender Inclusivity:** The legacy dataset (1988) strictly requires binary inputs (0/1). We added an *"Other/Non-Binary"* option that politely explains this constraint and guides the user to select the biological/hormonal match for mathematical accuracy.
+* **Input Validation:** Prevents negative numbers and unrealistic values.
+
+---
+
+## 🛠️ Technical Stack
+
+| Component | Technology |
+| :--- | :--- |
+| **Templating** | Jinja2 (Python/Flask) |
+| **Styling** | CSS3 (Custom Properties / CSS Variables) |
+| **Layout** | CSS Grid & Flexbox |
+| **Interactivity** | Vanilla JavaScript (ES6+) |
+| **Icons/Assets** | Inline SVGs (No external requests) |
+
+---
+
+## 📂 File Structure
+
+```text
+/templates
+  ├── index.html      # Landing Page (SVG ECG Animation)
+  └── home.html       # Main App (Knowledge Hub + Modals)
+/static
+  └── css
+      └── style.css   # Single source of truth for all styles

README.md

@@ -1,3 +1,138 @@
----
-license: apache-2.0
----
+# Heart Attack Prediction
+
+![Project Status](https://img.shields.io/badge/status-active-brightgreen) ![Python Version](https://img.shields.io/badge/python-3.x-blue) ![License](https://img.shields.io/badge/license-MIT-green)
+
+## Description
+This project is a web-based application designed to predict the likelihood of a heart attack in patients based on various medical attributes. It utilizes a machine learning model to analyze the input data and provide a prediction, accessible through a user-friendly web interface.
+
+## Problem Statement
+The primary objective of this project is to leverage machine learning to provide a quick and accessible way to assess the risk of a heart attack. By analyzing key medical indicators, the application can assist in early-stage risk assessment, complementing professional medical advice.
+
+## Getting Started
+To get a local copy up and running, follow these simple steps.
+
+### Prerequisites
+- Python 3.x
+- pip (Python package installer)
+
+### Installation
+1. Clone the repo:
+   ```sh
+   git clone https://github.com/your_username/Heart-Attack-Prediction.git
+   ```
+2. Navigate to the project directory:
+   ```sh
+   cd Heart-Attack-Prediction
+   ```
+3. Install the required packages:
+   ```sh
+   pip install -r requirement.txt
+   ```
+
+### Running the Application
+1. Run the Flask application:
+   ```sh
+   python application.py
+   ```
+2. Open your web browser and go to `http://127.0.0.1:5000` to view the application.
+
+## Usage
+The application provides a web form where you can input the patient's medical data. Fill in the fields and click the "Predict" button to get the heart attack risk prediction.
+
+## Dataset
+The dataset used for training the model contains 76 attributes, but this project utilizes a subset of 14 key features for prediction. The "target" field indicates the presence of heart disease.
+
+### Attribute Information
+- **age**: Age of the patient
+- **sex**: Sex of the patient (1 = male; 0 = female)
+- **cp**: Chest pain type (4 values)
+- **trestbps**: Resting blood pressure (in mm Hg on admission to the hospital)
+- **chol**: Serum cholestoral in mg/dl
+- **fbs**: Fasting blood sugar > 120 mg/dl (1 = true; 0 = false)
+- **restecg**: Resting electrocardiographic results (values 0, 1, 2)
+- **thalach**: Maximum heart rate achieved
+- **exang**: Exercise induced angina (1 = yes; 0 = no)
+- **oldpeak**: ST depression induced by exercise relative to rest
+- **slope**: The slope of the peak exercise ST segment
+- **ca**: Number of major vessels (0-3) colored by flourosopy
+- **thal**: 0 = normal; 1 = fixed defect; 2 = reversable defect
+- **target**: 0 = less chance of heart attack; 1 = more chance of heart attack
+
+## Methodology
+The model was developed following these steps:
+
+1.  **Data Loading and Exploration**: The `heart.csv` dataset was loaded, and an initial exploration was performed to check for missing values and understand the data types.
+2.  **Exploratory Data Analysis (EDA)**: Visualizations such as count plots, pie charts, pair plots, and a correlation heatmap were used to understand the distribution of data and the relationships between different attributes.
+3.  **Data Preprocessing**: The dataset was split into training (70%) and testing (30%) sets. The features were then scaled using `StandardScaler` to ensure that all features contribute equally to the model's performance.
+4.  **Model Training and Hyperparameter Tuning**: A Logistic Regression model was trained on the preprocessed data. `GridSearchCV` was used to find the optimal hyperparameters for the model, resulting in the best parameters being `{'C': 0.1, 'penalty': 'l2', 'solver': 'liblinear'}`.
+5.  **Model Evaluation**: The model's performance was evaluated on the test set, achieving an accuracy of approximately 81.3%. The classification report and confusion matrix below provide a more detailed breakdown of the model's performance:
+
+    **Classification Report:**
+    ```
+                  precision    recall  f1-score   support
+
+               0       0.78      0.80      0.79        40
+               1       0.84      0.82      0.83        51
+
+        accuracy                           0.81        91
+       macro avg       0.81      0.81      0.81        91
+    weighted avg       0.81      0.81      0.81        91
+    ```
+
+    **Confusion Matrix:**
+    ```
+    [[32  8]
+     [ 9 42]]
+    ```
+
+## Model
+This project uses a **Logistic Regression** model. The trained `GridSearchCV` object, which includes the best estimator, is saved as `ridge.pkl` and is loaded by the Flask application to make predictions.
+
+## Visualization
+Here is a scatter plot visualizing the relationship between age and maximum heart rate, colored by the target variable (heart attack risk).
+
+![Scatter Plot](Visualization%20Graph/Scatter%20Plot.png)
+
+### Additional Visualizations
+In addition to the scatter plot, the `application.ipynb` notebook in the `Notebbook` directory contains several other visualizations that provide deeper insights into the dataset:
+
+- **Target Class Distribution**: A bar chart showing the distribution of patients with and without a high chance of a heart attack.
+- **Gender Distribution**: A pie chart illustrating the gender distribution within the dataset.
+- **Correlation Heatmap**: A heatmap that displays the correlation between all the attributes in the dataset, helping to identify significant relationships.
+
+These visualizations are crucial for understanding the data and the model's behavior. For a detailed view, please refer to the notebook.
+
+## Directory Structure
+```
+.Heart-Attack-Prediction/
+├── Datasets/
+│   └── heart.csv
+├── Models/
+│   ├── ridge.pkl
+│   └── scaler.pkl
+├── Notebbook/
+│   └── ...
+├── templates/
+│   ├── index.html
+│   └── home.html
+├── Visualization Graph/
+│   └── Scatter Plot.png
+├── application.py
+├── requirement.txt
+└── README.md
+```
+
+## Dependencies
+![Flask](https://img.shields.io/badge/Flask-000000?style=for-the-badge&logo=flask&logoColor=white) ![NumPy](https://img.shields.io/badge/Numpy-777BB4?style=for-the-badge&logo=numpy&logoColor=white) ![Pandas](https://img.shields.io/badge/Pandas-2C2D72?style=for-the-badge&logo=pandas&logoColor=white) ![scikit-learn](https://img.shields.io/badge/scikit--learn-F7931E?style=for-the-badge&logo=scikit-learn&logoColor=white)
+
+## Contributing
+Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## License
+Distributed under the MIT License. See `LICENSE` for more information.

application.py

@@ -0,0 +1,47 @@
+import pickle
+from flask import Flask,request,jsonify,render_template
+import numpy as np
+import pandas as pd
+from sklearn.preprocessing import StandardScaler
+
+application = Flask(__name__)
+app=application
+
+## import gridsearchcv regressor and standard scaler pickle
+grid_search_cv=pickle.load(open('Models/gridsearchcv.pkl','rb'))
+standard_scaler=pickle.load(open('Models/scaler.pkl','rb'))
+
+@app.route("/")
+def index():
+    return render_template('index.html')
+
+@app.route('/predictdata',methods=['GET','POST'])
+def predict_datapoint():
+    if request.method=="POST":
+        Age=float(request.form.get('Age'))
+        sex = float(request.form.get('sex'))
+        cp = float(request.form.get('cp'))
+        trestbps = float(request.form.get('trestbps'))
+        chol = float(request.form.get('chol'))
+        fbs = float(request.form.get('fbs'))
+        restecg = float(request.form.get('restecg'))
+        thalach = float(request.form.get('thalach'))
+        exang = float(request.form.get('exang'))
+        oldpeak = float(request.form.get('oldpeak'))
+        slope = float(request.form.get('slope'))
+        ca = float(request.form.get('ca'))
+        thal = float(request.form.get('thal'))
+        
+        
+
+        new_data_scaled=standard_scaler.transform([[Age,sex,cp,trestbps,chol,fbs,restecg,thalach,exang,oldpeak,slope,ca,thal]])
+        result=grid_search_cv.predict(new_data_scaled)
+
+        return render_template('home.html',results=result[0])
+
+        
+    else:
+        return render_template('home.html')
+
+if __name__=="__main__":
+    app.run(host="0.0.0.0")

home.html

@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Assessment Unit</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+
+<input type="hidden" id="risk_data" value="{{ results if results is defined else 'none' }}">
+
+<div class="app-wrapper">
+    
+    <div class="form-section">
+        <h2 class="section-title">Clinical Data Entry</h2>
+        <p class="section-subtitle">Select a field to view its clinical definitions, normal ranges, and risk benchmarks.</p>
+
+        <form action="{{ url_for('predict_datapoint')}}" method="post" autocomplete="off">
+            <div class="form-grid">
+                
+                <div class="input-group">
+                    <label>Age (Years)</label>
+                    <input type="number" name="Age" min="1" max="110" required placeholder="e.g., 55" onfocus="showInfo('age')">
+                </div>
+
+                <div class="input-group">
+                    <label>Sex</label>
+                    <select name="sex" required onfocus="showInfo('sex')" onchange="checkGender(this)">
+                        <option value="" disabled selected>Select...</option>
+                        <option value="1">Male</option>
+                        <option value="0">Female</option>
+                        <option value="other">Other / Non-Binary</option>
+                    </select>
+                </div>
+
+                <div class="input-group">
+                    <label>Chest Pain Type</label>
+                    <select name="cp" required onfocus="showInfo('cp')">
+                        <option value="" disabled selected>Select Symptom...</option>
+                        <option value="0">Type 0 (Typical Angina)</option>
+                        <option value="1">Type 1 (Atypical Angina)</option>
+                        <option value="2">Type 2 (Non-Anginal)</option>
+                        <option value="3">Type 3 (Asymptomatic)</option>
+                    </select>
+                </div>
+
+                <div class="input-group">
+                    <label>Resting BP (mm Hg)</label>
+                    <input type="number" name="trestbps" min="50" required placeholder="e.g. 120" onfocus="showInfo('bp')">
+                </div>
+
+                <div class="input-group">
+                    <label>Cholesterol (mg/dl)</label>
+                    <input type="number" name="chol" min="100" required placeholder="e.g. 200" onfocus="showInfo('chol')">
+                </div>
+
+                <div class="input-group">
+                    <label>Fasting Blood Sugar</label>
+                    <select name="fbs" required onfocus="showInfo('fbs')">
+                        <option value="0">Normal (< 120)</option>
+                        <option value="1">High (> 120)</option>
+                    </select>
+                </div>
+
+                <div class="input-group">
+                    <label>Resting ECG</label>
+                    <select name="restecg" required onfocus="showInfo('ecg')">
+                        <option value="0">Normal</option>
+                        <option value="1">ST-T Abnormality</option>
+                        <option value="2">Hypertrophy</option>
+                    </select>
+                </div>
+
+                <div class="input-group">
+                    <label>Max Heart Rate</label>
+                    <input type="number" name="thalach" required placeholder="BPM" onfocus="showInfo('thalach')">
+                </div>
+
+                <div class="input-group">
+                    <label>Exercise Induced Angina</label>
+                    <select name="exang" required onfocus="showInfo('exang')">
+                        <option value="0">No</option>
+                        <option value="1">Yes</option>
+                    </select>
+                </div>
+
+                <div class="input-group">
+                    <label>ST Depression</label>
+                    <input type="number" name="oldpeak" step="0.1" required placeholder="e.g. 1.0" onfocus="showInfo('oldpeak')">
+                </div>
+
+                <div class="input-group">
+                    <label>ST Slope</label>
+                    <select name="slope" required onfocus="showInfo('slope')">
+                        <option value="0">Upsloping</option>
+                        <option value="1">Flat</option>
+                        <option value="2">Downsloping</option>
+                    </select>
+                </div>
+
+                <div class="input-group">
+                    <label>Major Vessels (0-3)</label>
+                    <select name="ca" required onfocus="showInfo('ca')">
+                        <option value="0">0 Vessels</option>
+                        <option value="1">1 Vessel</option>
+                        <option value="2">2 Vessels</option>
+                        <option value="3">3 Vessels</option>
+                    </select>
+                </div>
+
+                <div class="input-group" style="grid-column: span 2;">
+                    <label>Thalassemia</label>
+                    <select name="thal" required onfocus="showInfo('thal')">
+                        <option value="0">Normal</option>
+                        <option value="1">Fixed Defect</option>
+                        <option value="2">Reversible Defect</option>
+                    </select>
+                </div>
+
+                <button type="submit" class="btn-submit">Analyze Clinical Data</button>
+            </div>
+        </form>
+    </div>
+
+    <div class="hub-section">
+        <div id="hub-card" class="hub-card active">
+            <span class="hub-label">Assistant</span>
+            <h3 class="hub-title">Ready for Input</h3>
+            <p class="hub-desc">Click any field on the left. I will provide definitions, typical ranges, and good/bad examples to help you enter accurate data.</p>
+        </div>
+    </div>
+
+</div>
+
+<div id="dangerModal" class="modal-overlay">
+    <div class="modal-box">
+        <div class="modal-header danger">
+            <h3>High Risk Detected</h3>
+        </div>
+        <div class="modal-body">
+            <p>The model indicates a <strong>high probability</strong> of heart disease based on the provided clinical markers.</p>
+            
+            <div id="danger-location-view">
+                <p style="margin-top:10px; font-size:0.9rem;"><strong>Recommended Action:</strong> Immediate Cardiologist Consultation.</p>
+                <button class="action-btn btn-danger" onclick="findHospitals()">Locate Nearest Hospital</button>
+                <button class="action-btn btn-secondary" onclick="showToDoList()">I cannot go right now / Cancel</button>
+            </div>
+
+            <div id="danger-todo-view" style="display:none;">
+                <strong>Immediate Safety Guidelines:</strong>
+                <ul class="suggestion-list">
+                    <li>Cease all physical exertion immediately.</li>
+                    <li>Sit in a semi-reclined position to ease breathing.</li>
+                    <li>Loosen any tight clothing around the neck/chest.</li>
+                    <li>If chest pain persists > 5 mins, call Emergency Services.</li>
+                </ul>
+                <button class="action-btn btn-secondary" onclick="closeModal('dangerModal')">Return to Form</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="safeModal" class="modal-overlay">
+    <div class="modal-box">
+        <div class="modal-header safe">
+            <h3>Low Risk Profile</h3>
+        </div>
+        <div class="modal-body">
+            <p>Great news. The clinical indicators suggest a <strong>healthy heart profile</strong>.</p>
+            <strong>Maintenance Recommendations:</strong>
+            <ul class="suggestion-list">
+                <li><strong>Activity:</strong> 30 mins moderate cardio (brisk walk), 5x/week.</li>
+                <li><strong>Diet:</strong> Limit sodium (under 2300mg) and saturated fats.</li>
+                <li><strong>Screening:</strong> Check BP and Cholesterol annually.</li>
+            </ul>
+            <button class="action-btn btn-safe" onclick="closeModal('safeModal')">Return to Assessment</button>
+        </div>
+    </div>
+</div>
+
+<script>
+    // 1. RICH KNOWLEDGE DATA
+    const infoData = {
+        age: {
+            title: "Age",
+            desc: "The dataset is trained on ages 29 to 77. Predictions for patients under 29 are possible but statistically less reliable (80/20 rule).",
+            range: "Dataset Range: 29 - 77 years",
+            good: ["Under 45 (Lower Risk)", "50 (Average)"],
+            bad: ["Over 65 (Higher Risk)"],
+            type: "numeric"
+        },
+        sex: {
+            title: "Biological Sex",
+            desc: "This model uses the 1988 dataset which strictly classifies as Male/Female. For non-binary patients, please select the biological sex assigned at birth to ensure the math works correctly.",
+            range: "Binary Input Required",
+            options: [
+                "1: Male (Biologically)",
+                "0: Female (Biologically)",
+                "Other: (See note above)"
+            ],
+            type: "category"
+        },
+        cp: {
+            title: "Chest Pain Type",
+            desc: "Which description fits best?",
+            range: "Select the closest match",
+            options: [
+                "Type 0 (Typical): Pain triggered by exercise, relieved by rest.",
+                "Type 1 (Atypical): Breathlessness/Fatigue (common in women).",
+                "Type 2 (Non-Anginal): Sharp stabbing (usually not heart).",
+                "Type 3 (Asymptomatic): Silent ischemia (Most Dangerous)."
+            ],
+            type: "category"
+        },
+        bp: {
+            title: "Resting BP",
+            desc: "Blood pressure level upon hospital admission.",
+            range: "Normal Range: 90 - 120 mm Hg",
+            good: ["115 (Optimal)", "120 (Normal)"],
+            bad: ["140 (Hypertension)", "160+ (Critical)"],
+            type: "numeric"
+        },
+        chol: {
+            title: "Cholesterol",
+            desc: "Total serum cholesterol level.",
+            range: "Ideal: Below 200 mg/dL",
+            good: ["180 (Healthy)", "195 (Acceptable)"],
+            bad: ["240 (High)", "300+ (Very High)"],
+            type: "numeric"
+        },
+        fbs: {
+            title: "Fasting Blood Sugar",
+            desc: "Is blood sugar > 120 mg/dl after fasting?",
+            range: "Binary Indicator for Diabetes Risk",
+            options: [
+                "0: No (Sugar is normal/low)",
+                "1: Yes (Sugar is high / Diabetic risk)"
+            ],
+            type: "category"
+        },
+        ecg: {
+            title: "Resting ECG",
+            desc: "Electrical activity of the heart at rest.",
+            range: "Select Result",
+            options: [
+                "0: Normal",
+                "1: ST Abnormality (Sign of Ischemia)",
+                "2: Hypertrophy (Thickened Heart Muscle)"
+            ],
+            type: "category"
+        },
+        thalach: {
+            title: "Max Heart Rate",
+            desc: "Highest rate achieved during stress exercise.",
+            range: "Target: Approx 220 minus Age",
+            good: ["160+ (Young/Fit)", "140 (Average)"],
+            bad: ["Under 100 (Inability to raise rate is risky)"],
+            type: "numeric"
+        },
+        exang: {
+            title: "Exercise Angina",
+            desc: "Example: Patient tries to run but gets chest pain and must stop walking immediately.",
+            range: "Binary Symptom",
+            options: [
+                "1: Yes (Pain stops you from moving)",
+                "0: No (No pain or random pain)"
+            ],
+            type: "category"
+        },
+        oldpeak: {
+            title: "ST Depression",
+            desc: "A dip in the ECG wave during exercise vs rest.",
+            range: "Normal: 0",
+            good: ["0.0 (Normal)", "0.5 (Minor)"],
+            bad: ["2.0 (Ischemia)", "4.0 (Severe Blockage)"],
+            type: "numeric"
+        },
+        slope: {
+            title: "ST Slope",
+            desc: "The angle of the ECG wave peak.",
+            range: "Diagnostic Feature",
+            options: [
+                "0: Upsloping (Healthy response)",
+                "1: Flat (Concerning)",
+                "2: Downsloping (High Risk Sign)"
+            ],
+            type: "category"
+        },
+        ca: {
+            title: "Major Vessels",
+            desc: "Number of vessels visible via Fluoroscopy dye. If a vessel lights up (colored), it is open. If it stays dark, it is blocked.",
+            range: "Traffic Light Logic (0 is Worst)",
+            options: [
+                "3: All vessels open (Best/Healthy)",
+                "2: Two vessels open",
+                "1: One vessel open",
+                "0: No vessels visible (Blocked/Risky)",
+                "Note: 0 is worst, 3 is best."
+            ],
+            type: "category"
+        },
+        thal: {
+            title: "Thalassemia",
+            desc: "Blood flow defect status.",
+            range: "Genetic/Flow Factor",
+            options: [
+                "0: Normal flow",
+                "1: Fixed Defect (Permanent damage)",
+                "2: Reversible Defect (Treatable)"
+            ],
+            type: "category"
+        }
+    };
+
+    // 2. DISPLAY LOGIC (SIDEBAR)
+    function showInfo(key) {
+        const data = infoData[key];
+        const card = document.getElementById('hub-card');
+        
+        let contentHtml = "";
+
+        if (data.type === "numeric") {
+            contentHtml = `
+                <div class="hub-section-inner">
+                    <p class="hub-range"><strong>${data.range}</strong></p>
+                    <div class="example-grid">
+                        <div class="ex-col good">
+                            <strong>Healthy Examples:</strong>
+                            <ul>${data.good.map(i => `<li>${i}</li>`).join('')}</ul>
+                        </div>
+                        <div class="ex-col bad">
+                            <strong>Risk Indicators:</strong>
+                            <ul>${data.bad.map(i => `<li>${i}</li>`).join('')}</ul>
+                        </div>
+                    </div>
+                </div>`;
+        } else {
+            contentHtml = `
+                <div class="hub-section-inner">
+                    <p class="hub-range"><strong>${data.range}</strong></p>
+                    <ul class="hub-list">
+                        ${data.options.map(opt => `<li><span class="val-badge">></span> ${opt}</li>`).join('')}
+                    </ul>
+                </div>`;
+        }
+
+        // Render
+        card.classList.remove('active');
+        setTimeout(() => {
+            card.innerHTML = `
+                <span class="hub-label">Knowledge Hub</span>
+                <h3 class="hub-title">${data.title}</h3>
+                <p class="hub-desc">${data.desc}</p>
+                ${contentHtml}
+            `;
+            card.classList.add('active');
+        }, 150);
+    }
+
+    // 3. GENDER EDGE CASE LOGIC
+    function checkGender(select) {
+        if (select.value === 'other') {
+            alert("Note on Model Constraints: Because the 1988 dataset is binary, please select the biological sex or hormonal profile that best fits the patient for this specific calculation.");
+            select.value = ""; 
+        }
+    }
+
+    // 4. MODAL LOGIC
+    const risk = document.getElementById('risk_data').value;
+    
+    window.onload = function() {
+        if (risk === '1') document.getElementById('dangerModal').style.display = 'flex';
+        if (risk === '0') document.getElementById('safeModal').style.display = 'flex';
+    };
+
+    function closeModal(id) {
+        document.getElementById(id).style.display = 'none';
+    }
+
+    // 5. LOCATION / TODO LOGIC
+    function findHospitals() {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                (pos) => {
+                    const lat = pos.coords.latitude;
+                    const lon = pos.coords.longitude;
+                    window.open(`http://googleusercontent.com/maps.google.com/search?q=cardiology+hospital&center=${lat},${lon}`);
+                },
+                (err) => {
+                    showToDoList();
+                }
+            );
+        } else {
+            showToDoList();
+        }
+    }
+
+    function showToDoList() {
+        document.getElementById('danger-location-view').style.display = 'none';
+        document.getElementById('danger-todo-view').style.display = 'block';
+    }
+</script>
+
+</body>
+</html>

index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Heart_Attack_Prediction</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+
+    <div class="landing-container">
+        
+        <svg class="pulse-graph" viewBox="0 0 600 150">
+            <path class="ecg-line" d="M0,75 L50,75 L60,40 L70,110 L80,20 L90,75 L150,75 L160,75 L170,50 L180,100 L190,75 L250,75 L260,30 L270,120 L280,10 L290,75 L600,75" />
+        </svg>
+
+        <h1 class="hero-title">Heart_Attack_Prediction</h1>
+        
+        <div class="hero-desc">
+            <p>
+                <strong>CARDIOVASCULAR RISK ASSESSMENT</strong><br><br>
+                An open-source diagnostic tool leveraging <strong>Logistic Regression</strong> on the <strong>Cleveland Heart Disease Dataset</strong>. 
+                We provide instant, clinically-relevant risk analysis to support early intervention strategies.
+            </p>
+        </div>
+
+        <a href="/predictdata" class="btn-start">Start Assessment</a>
+    </div>
+
+</body>
+</html>

requirement.txt

@@ -0,0 +1,4 @@
+Flask
+numpy
+pandas
+scikit-learn