feat: Initial project setup

feat: Initial project setup
This commit establishes the complete initial structure for the AquaTest project.
It includes:
-Backend: app.py (Flask server and prediction API)
-Frontend: index.html, style.css, main.js (The complete user interface)
-AI Models: The trained water_quality_model.h5 and water_quality_model_ALT.h5
-Preprocessors: The saved scaler.joblib and scaler_ALT.joblib
-Training Scripts: Two complete Python scripts for model training and EDA, demonstrating the effect of hyperparameter tuning.
-Dataset: The water_potability.csv file used for training.

Dockerfile

@@ -0,0 +1,18 @@
+# Use a standard Python 3.9 image
+FROM python:3.9-slim
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy the requirements file first and install dependencies
+COPY requirements.txt requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of your project files into the container
+COPY . .
+
+# Tell Hugging Face to expose port 7860
+EXPOSE 7860
+
+# The command to run your Flask app
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,85 @@
+from flask import Flask, render_template, request, jsonify
+import numpy as np
+import tensorflow as tf
+import joblib
+
+app = Flask(__name__)
+
+# --- MODEL LOADING ---
+# Load the model and scaler you want to use.
+# By default, this loads the FIRST model you trained.
+try:
+    model = tf.keras.models.load_model('water_quality_model.h5')
+    scaler = joblib.load('scaler.joblib')
+    print("✅ Model 'water_quality_model.h5' and 'scaler.joblib' loaded successfully.")
+
+except Exception as e:
+    print(f"❌ Error loading 'water_quality_model.h5': {e}")
+    print("---")
+    # --- IF YOU WANT TO USE THE ALTERNATIVE MODEL, UNCOMMENT THE 3 LINES BELOW ---
+    # try:
+    #     model = tf.keras.models.load_model('water_quality_model_ALT.h5')
+    #     scaler = joblib.load('scaler_ALT.joblib')
+    #     print("✅ Alternative Model 'water_quality_model_ALT.h5' loaded.")
+    # except Exception as e2:
+    #     print(f"❌ Error loading all models: {e2}")
+    #     model = None
+    #     scaler = None
+    model = None
+    scaler = None
+# ---------------------
+
+
+@app.route('/')
+def home():
+    """Renders the main HTML page."""
+    return render_template('index.html')
+
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    """Receives data from the form and returns a prediction."""
+    if not model or not scaler:
+        return jsonify({'error': 'Model is not loaded properly. Check server logs.'}), 500
+
+    try:
+        # Get data from the JSON request sent by the JavaScript
+        data = request.get_json()
+        
+        # 1. Create a numpy array in the correct order (must match training order)
+        features = [
+            float(data['ph']),
+            float(data['Hardness']),
+            float(data['Solids']),
+            float(data['Chloramines']),
+            float(data['Sulfate']),
+            float(data['Conductivity']),
+            float(data['Organic_carbon']),
+            float(data['Trihalomethanes']),
+            float(data['Turbidity'])
+        ]
+        
+        # 2. Put data into a 2D numpy array (model expects a batch)
+        input_data = np.array([features])
+        
+        # 3. Scale the data using the *loaded* scaler
+        input_scaled = scaler.transform(input_data)
+        
+        # 4. Make the prediction (will be a probability between 0 and 1)
+        prediction_prob = model.predict(input_scaled)[0][0]
+        
+        # 5. Classify the prediction
+        prediction = int(prediction_prob > 0.5) # 1 if > 0.5, else 0
+        
+        # 6. Return the result as JSON
+        return jsonify({
+            'potability': prediction,     # 0 or 1
+            'probability': float(prediction_prob) # The raw probability
+        })
+
+    except Exception as e:
+        return jsonify({'error': str(e)}), 400
+
+
+if __name__ == '__main__':
+    app.run(host="0.0.0.0", port=7860)

code/correct_water_qulity_01.py

@@ -0,0 +1,312 @@
+# -*- coding: utf-8 -*-
+"""correct water qulity 01
+
+Automatically generated by Colab.
+
+Original file is located at
+    https://colab.research.google.com/drive/1P_fudbhG4Zu0c7jfo1ohnHoQLyG5yjyo
+"""
+
+# --- 1. SETUP AND IMPORTS ---
+import tensorflow as tf
+from tensorflow.keras.models import Sequential, load_model
+from tensorflow.keras.layers import Dense, Dropout
+from tensorflow.keras.callbacks import EarlyStopping, ReduceLROnPlateau
+from sklearn.model_selection import train_test_split
+from sklearn.preprocessing import StandardScaler
+from sklearn.impute import KNNImputer
+from sklearn.metrics import confusion_matrix, classification_report, precision_score
+from imblearn.over_sampling import SMOTE
+import pandas as pd
+import numpy as np
+import matplotlib.pyplot as plt
+import seaborn as sns
+import joblib
+
+print("TensorFlow Version:", tf.__version__)
+
+# --- 2. DATA LOADING ---
+try:
+    data = pd.read_csv('water_potability.csv')
+    print("Dataset loaded successfully.")
+except FileNotFoundError:
+    print("Error: 'water_potability.csv' not found.")
+    print("Please download the dataset from Kaggle and place it in the same directory.")
+    exit()
+
+# --- 3. TASK 1: PREPROCESSING TECHNIQUES & EDA ---
+# Each subsection represents a specific technique with its own EDA.
+
+# --------------------------------------------------------------------------
+# Technique 1 (Member 1): Handling Missing Values
+# --------------------------------------------------------------------------
+print("\n--- EDA for Technique 1: Missing Values ---")
+missing_percent = (data.isnull().sum() / len(data)) * 100
+plt.figure(figsize=(10, 6))
+sns.barplot(x=missing_percent.index, y=missing_percent.values)
+plt.title('Percentage of Missing Values per Feature', fontsize=16)
+plt.ylabel('Percentage Missing (%)')
+plt.xlabel('Features')
+plt.xticks(rotation=45)
+plt.show()
+
+print("EDA Conclusion: 'ph', 'Sulfate', and 'Trihalomethanes' have significant missing data.")
+print("Preprocessing Step: We will use KNNImputer to fill these, as it's more accurate than a simple mean.")
+
+# --------------------------------------------------------------------------
+# Technique 2 (Member 2): Handling Class Imbalance
+# --------------------------------------------------------------------------
+print("\n--- EDA for Technique 2: Class Imbalance ---")
+plt.figure(figsize=(7, 5))
+sns.countplot(x='Potability', data=data)
+plt.title('Class Distribution (0 = Not Potable, 1 = Potable)', fontsize=16)
+plt.xlabel('Potability')
+plt.ylabel('Count')
+plt.show()
+
+print(f"Distribution:\n{data['Potability'].value_counts(normalize=True)}")
+print("EDA Conclusion: The dataset is imbalanced. There are more 'Not Potable' (0) samples.")
+print("Preprocessing Step: We will use SMOTE (Synthetic Minority Over-sampling Technique) on the training data to create a balanced dataset for the model to learn from.")
+
+# --------------------------------------------------------------------------
+# Technique 3 (Member 3): Exploring Feature Distributions & Outliers
+# --------------------------------------------------------------------------
+print("\n--- EDA for Technique 3: Feature Distributions (Outliers) ---")
+# Melt the dataframe for easier plotting with Seaborn
+data_melted = pd.melt(data, id_vars=['Potability'], var_name='Feature', value_name='Value')
+
+plt.figure(figsize=(15, 8))
+sns.boxplot(x='Feature', y='Value', data=data_melted, showfliers=True) # showfliers=True to show outliers
+plt.title('Boxplots for Each Feature (Showing Outliers)', fontsize=16)
+plt.xticks(rotation=45)
+plt.yscale('log') # Use log scale for better visibility of distributions
+plt.show()
+
+print("EDA Conclusion: Features have vastly different scales and ranges (e.g., 'Solids' is in 10,000s, 'pH' is 0-14).")
+print("Many features also have significant outliers.")
+print("Preprocessing Step: Feature Scaling is mandatory for neural networks.")
+
+# --------------------------------------------------------------------------
+# Technique 4 (Member 4): Feature Scaling
+# --------------------------------------------------------------------------
+print("\n--- EDA for Technique 4: Feature Scaling (Before/After) ---")
+# We'll simulate the scaling on 'Solids' (a high-value feature) to visualize the effect.
+# Note: We only use non-null values for this specific plot.
+scaler_demo = StandardScaler()
+solids_data = data[['Solids']].dropna()
+solids_scaled = scaler_demo.fit_transform(solids_data)
+
+plt.figure(figsize=(12, 5))
+plt.subplot(1, 2, 1)
+sns.kdeplot(solids_data['Solids'], fill=True)
+plt.title('Before Scaling (Solids)')
+plt.xlabel('TDS (ppm)')
+
+plt.subplot(1, 2, 2)
+sns.kdeplot(solids_scaled.flatten(), fill=True, color='green')
+plt.title('After Scaling (Solids)')
+plt.xlabel('Standardized Value')
+plt.suptitle('Technique 4: Effect of StandardScaler', fontsize=16)
+plt.show()
+
+print("EDA Conclusion: Scaling centers the data around 0 and squashes it to a standard range.")
+print("Preprocessing Step: We will apply StandardScaler to all 9 features after splitting the data.")
+
+# --------------------------------------------------------------------------
+# Technique 5 (Member 5): Correlation Analysis
+# --------------------------------------------------------------------------
+print("\n--- EDA for Technique 5: Feature Correlation ---")
+# Use the imputed data just for this visualization (otherwise NaNs mess up the heatmap)
+imputer_demo = KNNImputer(n_neighbors=5)
+data_imputed_demo = pd.DataFrame(imputer_demo.fit_transform(data), columns=data.columns)
+corr = data_imputed_demo.corr()
+
+plt.figure(figsize=(12, 10))
+sns.heatmap(corr, annot=True, cmap='coolwarm', fmt='.2f', linewidths=0.5)
+plt.title('Feature Correlation Heatmap', fontsize=16)
+plt.show()
+
+print("EDA Conclusion: No features are extremely highly correlated (e.g., > 0.9 or < -0.9).")
+print("This suggests that all 9 features provide unique information and should be kept for the model.")
+
+# --------------------------------------------------------------------------
+# Final Combined Preprocessing Pipeline (The "How-To")
+# --------------------------------------------------------------------------
+print("\n--- Final Preprocessing Pipeline (Code) ---")
+print("Combining all techniques to prepare data for the model...")
+
+# 1. Impute Missing Values
+print("Step 1: Imputing missing values with KNNImputer...")
+imputer = KNNImputer(n_neighbors=5)
+data_imputed = pd.DataFrame(imputer.fit_transform(data), columns=data.columns)
+
+# 2. Feature / Target Split
+print("Step 2: Separating features (X) and target (y)...")
+X = data_imputed.drop('Potability', axis=1)
+y = data_imputed['Potability']
+
+# 3. Data Splitting (Train/Test)
+print("Step 3: Splitting data into training and test sets...")
+X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42, stratify=y)
+print(f"Original training samples: {X_train.shape[0]}, Test samples: {X_test.shape[0]}")
+
+# 4. Handle Class Imbalance (SMOTE)
+print("Step 4: Balancing training data with SMOTE...")
+smote = SMOTE(random_state=42)
+X_train_resampled, y_train_resampled = smote.fit_resample(X_train, y_train)
+print(f"Resampled training samples: {X_train_resampled.shape[0]}")
+
+# 5. Feature Scaling
+print("Step 5: Applying StandardScaler...")
+scaler = StandardScaler()
+# Fit the scaler ONLY on the training data
+X_train_scaled = scaler.fit_transform(X_train_resampled)
+# Apply the same scaler to the test data
+X_test_scaled = scaler.transform(X_test)
+
+print("\n✅ Final data pipelines are built and ready for model training.")
+print("The 'scaler' object is saved to apply to new user input in the app.")
+
+# --- 4. TASK 2: ALGORITHM SELECTION, IMPLEMENTATION & HYPERPARAMETER TUNING ---
+
+"""
+### Task 2.1: Algorithm Selection
+For this tabular, binary classification task, we will use a **Deep Neural Network (DNN)**,
+also known as a Multi-Layer Perceptron (MLP). This is a powerful and flexible
+choice that can learn complex, non-linear relationships between the 9 features.
+"""
+
+# --- Task 2.2: Model Implementation ---
+def build_model(input_shape):
+    model = Sequential([
+        # Input layer: 9 features
+        Dense(64, activation='relu', input_shape=[input_shape]),
+        Dropout(0.3), # Dropout layer to prevent overfitting
+        Dense(128, activation='relu'),
+        Dropout(0.3),
+        Dense(64, activation='relu'),
+        Dropout(0.3),
+        # Output layer: 1 neuron with sigmoid activation
+        # for binary classification (0 or 1)
+        Dense(1, activation='sigmoid')
+    ])
+    return model
+
+model = build_model(X_train_scaled.shape[1])
+model.summary()
+
+"""
+### Task 2.3: Hyperparameter Tuning Strategy
+* **Optimizer:** Adam (an efficient and popular choice).
+* **Loss Function:** `binary_crossentropy` (This is REQUIRED for a two-class, 0/1 problem).
+* **Metrics:** We will monitor `accuracy`.
+* **Callbacks:**
+    * `EarlyStopping`: Stops training when validation accuracy stops improving.
+    * `ReduceLROnPlateau`: Lowers the learning rate if training plateaus.
+"""
+
+# --- Model Training ---
+print("\n--- Model Training ---")
+
+model.compile(
+    optimizer=tf.keras.optimizers.Adam(learning_rate=0.001),
+    loss='binary_crossentropy',
+    metrics=['accuracy']
+)
+
+callbacks = [
+    EarlyStopping(monitor='val_accuracy', patience=20, verbose=1, restore_best_weights=True),
+    ReduceLROnPlateau(monitor='val_loss', factor=0.1, patience=10, min_lr=1e-6, verbose=1)
+]
+
+# Train on the RESAMPLED and SCALED data
+history = model.fit(
+    X_train_scaled,
+    y_train_resampled, # Use the balanced target
+    epochs=200, # Set high, EarlyStopping will handle it
+    validation_data=(X_test_scaled, y_test), # Validate on the original, unbalanced test set
+    callbacks=callbacks,
+    batch_size=32
+)
+
+# --- 5. TASK 3: EVALUATION METRICS ---
+"""
+### Task 3.1: Evaluation Metrics
+For this problem, **Accuracy is misleading**. We MUST focus on the
+**Confusion Matrix** and **Precision for Class 1**.
+
+* **DANGER:** A **False Positive** (model says 'Potable' when it's 'Not Potable')
+    is the worst possible error.
+* **Our Goal:** Minimize False Positives.
+* **Key Metric:** **Precision (Class 1)** tells us: "Of all the times the
+    model said 'Potable', what percentage was it correct?"
+"""
+print("\n--- Final Model Evaluation ---")
+final_loss, final_accuracy = model.evaluate(X_test_scaled, y_test)
+print(f"\nFinal Test Loss: {final_loss:.4f}")
+print(f"Final Test Accuracy: {final_accuracy * 100:.2f}% (Can be misleading!)")
+
+y_pred_probs = model.predict(X_test_scaled)
+y_pred = (y_pred_probs > 0.5).astype(int)
+
+# --- CRITICAL EVALUATION ---
+cm = confusion_matrix(y_test, y_pred)
+precision_class_1 = precision_score(y_test, y_pred, pos_label=1, zero_division=0)
+false_positives = cm[0][1]
+
+print("\n--- Detailed Classification Report ---")
+print(classification_report(y_test, y_pred, target_names=['Not Potable (0)', 'Potable (1)'], zero_division=0))
+
+print("\n--- CRITICAL METRIC ANALYSIS ---")
+print(f"Precision (Class 1 - Potable): {precision_class_1 * 100:.2f}%")
+print("  > This means when the model says water IS 'Potable', it is correct this % of the time.")
+print(f"\nTotal DANGEROUS Predictions (False Positives): {false_positives}")
+print(f"  > The model incorrectly labeled {false_positives} unsafe samples as 'safe'.")
+print("-----------------------------------")
+
+
+plt.figure(figsize=(8, 6))
+sns.heatmap(
+    cm,
+    annot=True, fmt='d', cmap='Reds', # Use 'Reds' to highlight danger
+    xticklabels=['Predicted Not Potable (0)', 'Predicted Potable (1)'],
+    yticklabels=['Actual Not Potable (0)', 'Actual Potable (1)']
+)
+plt.title(f'Confusion Matrix\n{false_positives} False Positives (DANGEROUS)', fontsize=14, color='red')
+plt.xlabel('Predicted Label')
+plt.ylabel('True Label')
+plt.show()
+
+# --- 6. TASK 4: ETHICAL AND BIAS ANALYSIS ---
+"""
+### Task 4.1: Ethical and Bias Analysis
+
+* **CRITICAL RISK: False Positives.**
+    As shown in the evaluation, a False Positive (predicting 'Potable' when
+    water is 'Not Potable') is a severe health risk. The model's Precision
+    for the 'Potable' class must be as high as possible.
+
+* **Dataset Bias:**
+    The dataset's origin is not specified. It may represent water from a
+    specific region or type of source (e.g., municipal vs. well). The
+    model may not generalize well to water with different chemical profiles
+    from other parts of the world.
+
+* **Conclusion & Disclaimer:**
+    This application **MUST** be deployed with a very strong
+    disclaimer. It should be labeled: "For educational and
+    informational purposes ONLY. This is NOT a substitute
+    for a professional, laboratory-based water quality test."
+    The developer has a responsibility to make this clear to all users.
+"""
+
+# --- 7. SAVE THE FINAL MODEL AND SCALER ---
+# We must save TWO files:
+# 1. The trained Keras model (.h5)
+# 2. The StandardScaler object (.joblib)
+model.save('water_quality_model.h5')
+joblib.dump(scaler, 'scaler.joblib')
+
+print("\n✅ Final model saved as 'water_quality_model.h5'")
+print("✅ Scaler saved as 'scaler.joblib'")
+print("\nProject setup complete. You are ready to build the Flask app.")

scaler.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0331c9f8377c4d3666b57610c6b16782eab623a8bb99e8e31a2f16aab8e18e72
+size 1183

scaler_ALT.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0331c9f8377c4d3666b57610c6b16782eab623a8bb99e8e31a2f16aab8e18e72
+size 1183

static/css/style.css

@@ -0,0 +1,666 @@
+/* ====== Base Styles ====== */
+:root {
+    --primary: #0891B2;
+    --primary-dark: #155E75;
+    --primary-light: #22D3EE;
+    --secondary: #155E75;
+    --dark: #082F49;
+    --light: #F0F9FF;
+    --gray: #64748B;
+    --danger: #DC2626;
+    --success: #059669;
+    --warning: #D97706;
+    --transition: all 0.3s ease;
+    --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
+}
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    color: #333;
+    overflow-x: hidden;
+    background-color: #fff;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+}
+
+section {
+    position: relative;
+    padding: 80px 0;
+}
+
+.section-title {
+    font-weight: 700;
+    position: relative;
+    margin-bottom: 15px;
+    color: var(--dark);
+}
+
+.section-divider {
+    height: 4px;
+    width: 70px;
+    background: var(--primary);
+    margin: 0 auto 40px;
+    border-radius: 2px;
+}
+
+.btn {
+    border-radius: 50px;
+    padding: 12px 25px;
+    font-weight: 500;
+    transition: var(--transition);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-size: 14px;
+}
+
+.btn-primary {
+    background-color: var(--primary);
+    border-color: var(--primary);
+    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.3);
+}
+
+.btn-primary:hover, .btn-primary:focus {
+    background-color: var(--primary-dark);
+    border-color: var(--primary-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(8, 145, 178, 0.4);
+}
+
+.btn-lg {
+    padding: 14px 30px;
+    font-size: 16px;
+}
+
+/* ====== Particles Background ====== */
+#particles-js {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    background: linear-gradient(135deg, #0C4A6E, #082F49);
+}
+
+/* ====== Navbar ====== */
+.navbar {
+    padding: 20px 0;
+    transition: var(--transition);
+    z-index: 1000;
+}
+
+.navbar.scrolled {
+    background-color: rgba(8, 47, 73, 0.9);
+    padding: 10px 0;
+    box-shadow: var(--shadow);
+}
+
+.navbar-brand {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    font-size: 24px;
+    color: var(--light) !important;
+}
+
+.wave-icon {
+    animation: waveAnimation 2s infinite;
+    display: inline-block;
+}
+
+@keyframes waveAnimation {
+    0% { transform: rotate(0deg); }
+    25% { transform: rotate(-10deg); }
+    50% { transform: rotate(0deg); }
+    75% { transform: rotate(10deg); }
+    100% { transform: rotate(0deg); }
+}
+
+/* Unique Nav styling */
+.custom-nav {
+    display: flex;
+    gap: 15px;
+}
+
+.custom-nav .nav-item {
+    position: relative;
+}
+
+.custom-nav .nav-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px 15px;
+    color: var(--light) !important;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.custom-nav .nav-icon {
+    font-size: 1.2rem;
+    margin-bottom: 3px;
+    transition: all 0.3s ease;
+}
+
+.custom-nav .nav-text {
+    font-size: 0.85rem;
+    font-weight: 500;
+    opacity: 0.8;
+}
+
+.custom-nav .nav-link:hover,
+.custom-nav .nav-link.active {
+    background: rgba(255, 255, 255, 0.15);
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.custom-nav .nav-link:hover .nav-icon,
+.custom-nav .nav-link.active .nav-icon {
+    color: var(--primary-light);
+    transform: scale(1.2);
+}
+
+.custom-nav .nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: 5px;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background: var(--primary-light);
+    transform: translateX(-50%);
+    transition: width 0.3s ease;
+}
+
+.custom-nav .nav-link:hover::after,
+.custom-nav .nav-link.active::after {
+    width: 50%;
+}
+
+/* ====== Hero Section ====== */
+.hero {
+    height: 100vh;
+    min-height: 700px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    background-color: transparent;
+    padding-bottom: 100px;
+}
+
+.hero h1 {
+    font-size: 56px;
+    font-weight: 700;
+    margin-bottom: 20px;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.hero .lead {
+    font-size: 18px;
+    margin-bottom: 30px;
+}
+
+.hero-image {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+}
+
+.hero-img {
+    max-width: 90%;
+    box-shadow: var(--shadow-lg);
+    border: 5px solid rgba(255, 255, 255, 0.2);
+    animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+    100% { transform: translateY(0px); }
+}
+
+.wave {
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    width: 100%;
+    z-index: 2;
+}
+
+/* ====== About Section ====== */
+.about {
+    background-color: #fff;
+}
+
+.feature-card {
+    background: #fff;
+    border-radius: 15px;
+    padding: 30px;
+    text-align: center;
+    box-shadow: var(--shadow);
+    height: 100%;
+    transition: var(--transition);
+}
+
+.feature-card:hover {
+    transform: translateY(-10px);
+    box-shadow: var(--shadow-lg);
+}
+
+.icon-wrapper {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(8, 145, 178, 0.1);
+    border-radius: 50%;
+}
+
+.icon-wrapper i {
+    font-size: 36px;
+}
+
+.feature-card h4 {
+    margin-bottom: 15px;
+    color: var(--dark);
+}
+
+.img-wrapper {
+    border-radius: 15px;
+    overflow: hidden;
+}
+
+.floating-badge {
+    position: absolute;
+    top: 20px;
+    right: -15px;
+    background: var(--primary);
+    color: white;
+    padding: 10px 20px;
+    border-radius: 30px;
+    box-shadow: var(--shadow);
+    font-weight: 600;
+}
+
+.parameters-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.parameter {
+    background-color: rgba(8, 145, 178, 0.1);
+    padding: 10px;
+    border-radius: 5px;
+    text-align: center;
+    font-weight: 500;
+    transition: var(--transition);
+}
+
+.parameter:hover {
+    background-color: var(--primary);
+    color: white;
+    transform: scale(1.05);
+}
+
+/* ====== Water Test Section ====== */
+.water-test {
+    background-color: #f9f9f9;
+    position: relative;
+    overflow: hidden;
+}
+
+.test-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url('https://source.unsplash.com/1600x900/?water,pattern') no-repeat center center;
+    background-size: cover;
+    opacity: 0.05;
+    z-index: 0;
+}
+
+.test-card {
+    background: white;
+    border-radius: 20px;
+    box-shadow: var(--shadow-lg);
+    padding: 40px;
+    position: relative;
+    z-index: 1;
+}
+
+.form-floating .form-control {
+    border-radius: 10px;
+    height: 60px;
+    border: 2px solid #e1e1e1;
+}
+
+.form-floating .form-control:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 0.25rem rgba(8, 145, 178, 0.25);
+}
+
+.result-box {
+    background: white;
+    border-radius: 15px;
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    border: 1px solid #e9e9e9;
+}
+
+.result-header {
+    padding: 15px 25px;
+    background: var(--primary);
+    color: white;
+}
+
+.result-body {
+    padding: 25px;
+}
+
+.gauge-container {
+    padding: 20px 0;
+}
+
+.gauge {
+    width: 150px;
+    height: 75px;
+    border-radius: 75px 75px 0 0;
+    background-color: #e0e0e0;
+    position: relative;
+    overflow: hidden;
+    margin: 0 auto;
+}
+
+.gauge-fill {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 0%;
+    background: linear-gradient(to top, var(--danger), var(--warning), var(--success));
+    transition: height 1s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.gauge-center {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 24px;
+    color: #333;
+}
+
+.gauge-label {
+    margin-top: 10px;
+    font-weight: 600;
+    color: var(--gray);
+}
+
+.result-info {
+    padding: 0 20px;
+}
+
+#result-status {
+    margin-bottom: 15px;
+    font-weight: 700;
+}
+
+#result-status.safe {
+    color: var(--success);
+}
+
+#result-status.unsafe {
+    color: var(--danger);
+}
+
+#recommendations-list li {
+    margin-bottom: 8px;
+}
+
+/* ====== Contact Section ====== */
+.contact {
+    background-color: white;
+}
+
+.contact-info {
+    text-align: center;
+    padding: 40px;
+    border-radius: 20px;
+    box-shadow: var(--shadow-lg);
+    height: 100%;
+    background-color: #fff;
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+}
+
+.contact-info::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(8, 145, 178, 0.05), rgba(21, 94, 117, 0.1));
+    z-index: -1;
+}
+
+.profile-img {
+    width: 180px;
+    height: 180px;
+    margin: 0 auto 20px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 5px solid rgba(8, 145, 178, 0.1);
+    position: relative;
+}
+
+.profile-img::after {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    border-radius: 50%;
+    border: 2px solid var(--primary-light);
+    animation: pulseRing 2s infinite;
+}
+
+@keyframes pulseRing {
+    0% {
+        transform: scale(0.95);
+        opacity: 1;
+    }
+    70% {
+        transform: scale(1.1);
+        opacity: 0.7;
+    }
+    100% {
+        transform: scale(0.95);
+        opacity: 1;
+    }
+}
+
+.profile-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.social-links {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    margin-top: 25px;
+}
+
+.social-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    color: white;
+    transition: var(--transition);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
+}
+
+.social-icon:hover {
+    transform: translateY(-5px) rotate(10deg);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+.facebook {
+    background-color: #3b5998;
+}
+
+.linkedin {
+    background-color: #0077b5;
+}
+
+.github {
+    background-color: #333;
+}
+
+.instagram {
+    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
+}
+
+.student-id {
+    background-color: var(--primary-light);
+    color: var(--dark);
+    padding: 5px 15px;
+    border-radius: 20px;
+    font-weight: 600;
+    display: inline-block;
+    margin-top: -5px;
+    margin-bottom: 10px;
+}
+
+/* ====== Footer ====== */
+.footer {
+    background-color: var(--dark);
+    color: var(--light);
+}
+
+/* ====== Responsive Styles ====== */
+@media (max-width: 991px) {
+    .hero h1 {
+        font-size: 42px;
+    }
+    
+    .hero-image {
+        margin-top: 50px;
+    }
+    
+    .test-card {
+        padding: 30px 20px;
+    }
+    
+    .custom-nav {
+        gap: 5px;
+    }
+    
+    .custom-nav .nav-link {
+        padding: 8px 10px;
+    }
+}
+
+@media (max-width: 767px) {
+    section {
+        padding: 60px 0;
+    }
+    
+    .hero h1 {
+        font-size: 36px;
+        text-align: center;
+    }
+    
+    .hero .lead {
+        text-align: center;
+    }
+    
+    .hero .btn {
+        display: block;
+        margin: 0 auto;
+    }
+    
+    .feature-card {
+        margin-bottom: 30px;
+    }
+    
+    .test-card {
+        padding: 25px 15px;
+    }
+    
+    .custom-nav {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .custom-nav .nav-item {
+        width: calc(50% - 10px);
+    }
+    
+    .custom-nav .nav-link {
+        margin-bottom: 10px;
+    }
+}
+
+/* ====== Animation Classes ====== */
+.fade-in {
+    animation: fadeIn 1s ease forwards;
+}
+
+.slide-up {
+    animation: slideUp 0.8s ease forwards;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideUp {
+    from { 
+        opacity: 0;
+        transform: translateY(50px);
+    }
+    to { 
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes waterRipple {
+    0% {
+        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5);
+    }
+    70% {
+        box-shadow: 0 0 0 20px rgba(34, 211, 238, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
+    }
+}

static/js/main.js

@@ -0,0 +1,275 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize AOS Animation Library
+    AOS.init({
+        duration: 800,
+        easing: 'ease',
+        once: true,
+    });
+    
+    // Initialize Particles.js for background animation
+    particlesJS('particles-js', {
+        "particles": {
+            "number": {
+                "value": 80,
+                "density": {
+                    "enable": true,
+                    "value_area": 800
+                }
+            },
+            "color": {
+                "value": "#ffffff"
+            },
+            "shape": {
+                "type": "circle",
+                "stroke": {
+                    "width": 0,
+                    "color": "#000000"
+                },
+                "polygon": {
+                    "nb_sides": 5
+                }
+            },
+            "opacity": {
+                "value": 0.5,
+                "random": false,
+                "anim": {
+                    "enable": false,
+                    "speed": 1,
+                    "opacity_min": 0.1,
+                    "sync": false
+                }
+            },
+            "size": {
+                "value": 3,
+                "random": true,
+                "anim": {
+                    "enable": false,
+                    "speed": 40,
+                    "size_min": 0.1,
+                    "sync": false
+                }
+            },
+            "line_linked": {
+                "enable": true,
+                "distance": 150,
+                "color": "#ffffff",
+                "opacity": 0.4,
+                "width": 1
+            },
+            "move": {
+                "enable": true,
+                "speed": 2,
+                "direction": "none",
+                "random": false,
+                "straight": false,
+                "out_mode": "out",
+                "bounce": false,
+                "attract": {
+                    "enable": false,
+                    "rotateX": 600,
+                    "rotateY": 1200
+                }
+            }
+        },
+        "interactivity": {
+            "detect_on": "canvas",
+            "events": {
+                "onhover": {
+                    "enable": true,
+                    "mode": "grab"
+                },
+                "onclick": {
+                    "enable": true,
+                    "mode": "push"
+                },
+                "resize": true
+            },
+            "modes": {
+                "grab": {
+                    "distance": 140,
+                    "line_linked": {
+                        "opacity": 1
+                    }
+                },
+                "bubble": {
+                    "distance": 400,
+                    "size": 40,
+                    "duration": 2,
+                    "opacity": 8,
+                    "speed": 3
+                },
+                "repulse": {
+                    "distance": 200,
+                    "duration": 0.4
+                },
+                "push": {
+                    "particles_nb": 4
+                },
+                "remove": {
+                    "particles_nb": 2
+                }
+            }
+        },
+        "retina_detect": true
+    });
+
+    // Navbar scroll effect
+    window.addEventListener('scroll', function() {
+        const navbar = document.querySelector('.navbar');
+        if (window.scrollY > 100) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+    });
+
+    // Active menu item highlighting
+    const sections = document.querySelectorAll('section');
+    const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
+    
+    window.addEventListener('scroll', () => {
+        let current = '';
+        
+        sections.forEach(section => {
+            const sectionTop = section.offsetTop;
+            const sectionHeight = section.clientHeight;
+            if (pageYOffset >= (sectionTop - 150)) {
+                current = section.getAttribute('id');
+            }
+        });
+        
+        navLinks.forEach(link => {
+            link.classList.remove('active');
+            if (link.getAttribute('href').substring(1) === current) {
+                link.classList.add('active');
+            }
+        });
+    });
+
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                window.scrollTo({
+                    top: target.offsetTop - 80,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+
+    // ==========================================================
+    // === UPDATED WATER QUALITY PREDICTION FORM SUBMISSION ===
+    // ==========================================================
+    const waterForm = document.getElementById('water-form');
+    const resultContainer = document.getElementById('result-container');
+
+    // All the result elements
+    const resultStatus = document.getElementById('result-status');
+    const resultMessage = document.getElementById('result-message');
+    const resultProbability = document.getElementById('result-probability');
+    const gaugeFill = document.getElementById('gauge-fill');
+    const recommendationsList = document.getElementById('recommendations-list');
+
+    if (waterForm) {
+        waterForm.addEventListener('submit', function(e) {
+            e.preventDefault(); // Stop the form from reloading
+            
+            // Show loading state (using your existing IDs)
+            resultContainer.style.display = 'block';
+            resultStatus.textContent = 'Analyzing water parameters...';
+            resultStatus.className = ''; // Reset color
+            resultMessage.textContent = 'Please wait while we process your results.';
+            recommendationsList.innerHTML = '';
+            gaugeFill.style.height = '0%';
+            gaugeFill.style.background = '#e0e0e0'; // Reset gauge color
+            resultProbability.textContent = '...';
+            
+            // 1. Collect form data into a JavaScript object
+            const formData = new FormData(waterForm);
+            const data = {};
+            formData.forEach((value, key) => {
+                data[key] = value;
+            });
+
+            // 2. Send data as JSON using jQuery.ajax (as in your original file)
+            $.ajax({
+                type: 'POST',
+                url: '/predict', // The endpoint in our Flask app
+                data: JSON.stringify(data), // Send as a JSON string
+                contentType: 'application/json', // Tell the server we are sending JSON
+                success: function(response) {
+                    // Simulate processing delay for better UX
+                    setTimeout(() => {
+                        displayResults(response);
+                    }, 1000); // 1-second delay
+                },
+                error: function(error) {
+                    console.log(error);
+                    resultContainer.style.display = 'block';
+                    resultStatus.textContent = 'Prediction Error';
+                    resultStatus.className = 'unsafe'; // Use 'unsafe' style for errors
+                    resultMessage.textContent = 'An error occurred. Please check your input values and try again.';
+                }
+            });
+        });
+    }
+
+    /**
+     * This function takes the JSON response from Flask and updates the HTML.
+     */
+    function displayResults(response) {
+        if (response.error) {
+            resultStatus.textContent = 'Error';
+            resultStatus.className = 'unsafe';
+            resultMessage.textContent = response.error;
+            return;
+        }
+
+        const probability = response.probability;
+        const potability = response.potability;
+        let confidence = 0;
+        let recommendationsHTML = '';
+
+        if (potability === 1) {
+            // --- SAFE (POTABLE) ---
+            confidence = probability * 100;
+            resultStatus.textContent = 'Result: Potable (Safe)';
+            resultStatus.className = 'safe'; // Uses your --success color
+            resultMessage.textContent = 'The model predicts this water is safe for consumption.';
+            gaugeFill.style.background = 'var(--success)';
+            recommendationsHTML = `
+                <li>Confidence in this result is high.</li>
+                <li>Maintain regular filtering and testing schedules.</li>
+                <li><strong>Disclaimer:</strong> This is an AI prediction and not a substitute for a professional lab test.</li>
+            `;
+
+        } else {
+            // --- UNSAFE (NOT POTABLE) ---
+            confidence = (1 - probability) * 100; // Confidence in the "unsafe" prediction
+            resultStatus.textContent = 'Result: Not Potable (Unsafe)';
+            resultStatus.className = 'unsafe'; // Uses your --danger color
+            resultMessage.textContent = 'The model predicts this water is unsafe for consumption.';
+            gaugeFill.style.background = 'var(--danger)';
+            recommendationsHTML = `
+                <li>It is strongly advised **not** to drink this water.</li>
+                <li>Boil water before use or use a certified water filter.</li>
+                <li>Consult a local health authority for professional testing.</li>
+                <li><strong>Disclaimer:</strong> This is an AI prediction. Prioritize safety.</li>
+            `;
+        }
+
+        // Update gauge
+        resultProbability.textContent = `${confidence.toFixed(0)}%`;
+        gaugeFill.style.height = `${confidence.toFixed(0)}%`;
+        
+        // Update recommendations
+        recommendationsList.innerHTML = recommendationsHTML;
+
+        // Scroll to the result
+        resultContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+
+});

templates/index.html

@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Water Quality Prediction | Janith Deshan</title>
+    
+    <!-- Favicon -->
+    <link rel="icon" href="https://img.icons8.com/color/48/000000/water-drop.png" type="image/png">
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
+    
+    <!-- AOS Animation Library -->
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <!-- Particles Background -->
+    <div id="particles-js"></div>
+    
+    <!-- Header Section -->
+    <header>
+        <nav class="navbar navbar-expand-lg navbar-dark">
+            <div class="container">
+                <a class="navbar-brand" href="#">
+                    <i class="fas fa-water me-2 text-primary wave-icon"></i>
+                    <span>AquaTest</span>
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <ul class="navbar-nav ms-auto custom-nav">
+                        <li class="nav-item">
+                            <a class="nav-link active" href="#home">
+                                <span class="nav-icon"><i class="fas fa-home"></i></span>
+                                <span class="nav-text">Home</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#about">
+                                <span class="nav-icon"><i class="fas fa-info-circle"></i></span>
+                                <span class="nav-text">About</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#test">
+                                <span class="nav-icon"><i class="fas fa-flask"></i></span>
+                                <span class="nav-text">Test Water</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#contact">
+                                <span class="nav-icon"><i class="fas fa-user"></i></span>
+                                <span class="nav-text">Profile</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <!-- Hero Section -->
+    <section id="home" class="hero">
+        <div class="container h-100">
+            <div class="row h-100 align-items-center">
+                <div class="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
+                    <h1 class="display-4 fw-bold text-white">Water Quality <span class="text-primary">Prediction</span></h1>
+                    <p class="lead my-4 text-white-50">
+                        Analyze water parameters and determine potability using machine learning. Get instant results and ensure your water is safe for consumption.
+                    </p>
+                    <a href="#test" class="btn btn-primary btn-lg">Test Your Water <i class="fas fa-arrow-right ms-2"></i></a>
+                </div>
+                
+            </div>
+        </div>
+        <div class="wave">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+                <path fill="#ffffff" fill-opacity="1" d="M0,128L60,138.7C120,149,240,171,360,176C480,181,600,171,720,149.3C840,128,960,96,1080,90.7C1200,85,1320,107,1380,117.3L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
+            </svg>
+        </div>
+    </section>
+
+    <!-- About Section -->
+    <section id="about" class="about py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-12 text-center mb-5" data-aos="fade-up">
+                    <h2 class="section-title">About This Project</h2>
+                    <div class="section-divider"></div>
+                </div>
+            </div>
+            <div class="row g-4">
+                <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
+                    <div class="feature-card">
+                        <div class="icon-wrapper">
+                            <i class="fas fa-flask text-primary"></i>
+                        </div>
+                        <h4>Water Analysis</h4>
+                        <p>Input water quality parameters to analyze potability using advanced machine learning algorithms.</p>
+                    </div>
+                </div>
+                <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
+                    <div class="feature-card">
+                        <div class="icon-wrapper">
+                            <i class="fas fa-brain text-primary"></i>
+                        </div>
+                        <h4>ML Powered</h4>
+                        <p>Backed by machine learning models trained on thousands of water samples for accurate predictions.</p>
+                    </div>
+                </div>
+                <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
+                    <div class="feature-card">
+                        <div class="icon-wrapper">
+                            <i class="fas fa-tachometer-alt text-primary"></i>
+                        </div>
+                        <h4>Instant Results</h4>
+                        <p>Get immediate assessment of water potability with confidence percentage and recommendations.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="row mt-5">
+                <div class="col-md-6" data-aos="fade-right">
+                    <div class="img-wrapper position-relative">
+                        <img src="https://images.unsplash.com/photo-1617155093730-a8bf47be792d?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Water Testing" class="img-fluid rounded shadow">
+                        <div class="floating-badge">
+                            <span>9 Water Parameters</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6" data-aos="fade-left">
+                    <h3 class="mb-4">The Science Behind Water Potability</h3>
+                    <p>This application analyzes critical water parameters to determine if water is safe for human consumption. The model considers factors like pH level, hardness, TDS, turbidity and more to make an informed prediction.</p>
+                    <div class="parameters-grid">
+                        <div class="parameter">pH</div>
+                        <div class="parameter">Hardness</div>
+                        <div class="parameter">Solids</div>
+                        <div class="parameter">Chloramines</div>
+                        <div class="parameter">Sulfate</div>
+                        <div class="parameter">Conductivity</div>
+                        <div class="parameter">Organic Carbon</div>
+                        <div class="parameter">Trihalomethanes</div>
+                        <div class="parameter">Turbidity</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Water Test Section -->
+    <section id="test" class="water-test py-5">
+        <div class="test-bg"></div>
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-lg-10">
+                    <div class="test-card" data-aos="zoom-in">
+                        <div class="row">
+                            <div class="col-12 text-center mb-4">
+                                <h2 class="section-title">Water Quality Test</h2>
+                                <p class="text-muted">Enter the water parameters to predict potability</p>
+                            </div>
+                        </div>
+                        
+                        <form id="water-form">
+                            <div class="row g-3">
+                                <div class="col-md-4">
+                                    <div class="form-floating">
+                                        <input type="number" step="0.01" class="form-control" id="ph" name="ph" placeholder="pH Level" required>
+                                        <label for="ph"><i class="fas fa-vial me-2"></i> pH Level (0-14)</label>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="form-floating">
+                                        <input type="number" step="0.01" class="form-control" id="Hardness" name="Hardness" placeholder="Hardness" required>
+                                        <label for="Hardness"><i class="fas fa-gem me-2"></i> Hardness (mg/L)</label>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="form-floating">
+                                        <input type="number" step="0.01" class="form-control" id="Solids" name="Solids" placeholder="TDS" required>
+                                        <label for="Solids"><i class="fas fa-microscope me-2"></i> TDS (ppm)</label>
+                                    </div>
+                                </div>
+                                
+                                <div class="col-md-4">
+                                    <div class="form-floating">
+                                        <input type="number" step="0.01" class="form-control" id="Chloramines" name="Chloramines" placeholder="Chloramines" required>
+                                        <label for="Chloramines"><i class="fas fa-prescription-bottle me-2"></i> Chloramines (ppm)</label>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="form-floating">
+                                        <input type="number" step="0.01" class="form-control" id="Sulfate" name="Sulfate" placeholder="Sulfate" required>
+                                        <label for="Sulfate"><i class="fas fa-atom me-2"></i> Sulfate (mg/L)</label>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="form-floating">
+                                        <input type="number" step="0.01" class="form-control" id="Conductivity" name="Conductivity" placeholder="Conductivity" required>
+                                        <label for="Conductivity"><i class="fas fa-bolt me-2"></i> Conductivity (μS/cm)</label>
+                                    </div>
+                                </div>
+                                
+                                <div class="col-md-4">
+                                    <div class="form-floating">
+                                        <input type="number" step="0.01" class="form-control" id="Organic_carbon" name="Organic_carbon" placeholder="Organic Carbon" required>
+                                        <label for="Organic_carbon"><i class="fas fa-leaf me-2"></i> Organic Carbon (ppm)</label>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="form-floating">
+                                        <input type="number" step="0.01" class="form-control" id="Trihalomethanes" name="Trihalomethanes" placeholder="Trihalomethanes" required>
+                                        <label for="Trihalomethanes"><i class="fas fa-biohazard me-2"></i> Trihalomethanes (μg/L)</label>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="form-floating">
+                                        <input type="number" step="0.01" class="form-control" id="Turbidity" name="Turbidity" placeholder="Turbidity" required>
+                                        <label for="Turbidity"><i class="fas fa-cloud me-2"></i> Turbidity (NTU)</label>
+                                    </div>
+                                </div>
+                                
+                                <div class="col-12 text-center mt-4">
+                                    <button type="submit" class="btn btn-primary btn-lg px-5">
+                                        <i class="fas fa-flask-vial me-2"></i> Analyze Water
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                        
+                        <div class="mt-4" id="result-container" style="display: none;">
+                            <div class="result-box">
+                                <div class="result-header">
+                                    <h4 id="result-title">Prediction Result</h4>
+                                </div>
+                                <div class="result-body">
+                                    <div class="row">
+                                        <div class="col-md-4 text-center">
+                                            <div class="gauge-container">
+                                                <div class="gauge">
+                                                    <div class="gauge-fill" id="gauge-fill"></div>
+                                                    <div class="gauge-center">
+                                                        <span id="result-probability">0%</span>
+                                                    </div>
+                                                </div>
+                                                <p class="gauge-label">Confidence</p>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-8">
+                                            <div class="result-info">
+                                                <h5 id="result-status">Testing...</h5>
+                                                <p id="result-message" class="lead"></p>
+                                                <div id="result-recommendations" class="mt-3">
+                                                    <h6><i class="fas fa-info-circle me-2"></i> Recommendations</h6>
+                                                    <ul id="recommendations-list">
+                                                        <!-- Recommendations will be added dynamically -->
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact/Profile Section -->
+    <section id="contact" class="contact py-5">
+        <div class="container">
+            <div class="row text-center mb-5">
+                <div class="col-12" data-aos="fade-up">
+                    <h2 class="section-title">Developer Profile</h2>
+                    <div class="section-divider"></div>
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-8" data-aos="fade-up">
+                    <div class="contact-info">
+                        <div class="profile-img">
+                            <img src="https://avatars.githubusercontent.com/u/138566861?v=4" alt="Janith Deshan" class="img-fluid rounded-circle">
+                        </div>
+                        <h3 class="mt-4 mb-3">Janith Deshan</h3>
+                        <p class="lead">Water Quality Researcher & ML Engineer</p>
+                        <p class="student-id">IT24102137</p>
+                        <p><i class="fas fa-envelope me-2"></i> janithmihijaya123@gmail.com</p>
+                        
+                        <div class="social-links mt-4">
+                            <a href="https://www.facebook.com/janith.deshan.186" target="_blank" class="social-icon facebook">
+                                <i class="fab fa-facebook-f"></i>
+                            </a>
+                            <a href="https://www.linkedin.com/in/janithdeshan/" target="_blank" class="social-icon linkedin">
+                                <i class="fab fa-linkedin-in"></i>
+                            </a>
+                            <a href="https://github.com/janiyax35" target="_blank" class="social-icon github">
+                                <i class="fab fa-github"></i>
+                            </a>
+                            <a href="https://www.instagram.com/janith_deshan11/" target="_blank" class="social-icon instagram">
+                                <i class="fab fa-instagram"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer py-4">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-md-6 text-center text-md-start">
+                    <p class="mb-0">&copy; 2025 Water Quality Prediction | Developed by <span class="fw-bold">Janith Deshan</span></p>
+                </div>
+                <div class="col-md-6 text-center text-md-end">
+                    <p class="mb-0">IT24102137</p>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    
+    <!-- AOS Animation Library -->
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    
+    <!-- Particles.js -->
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    
+    <!-- Custom JS -->
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+</html>

water_quality_model.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:04ca7ec3bda533dd4039f67b43001cb687c956a1eea4a8b10f05b580b2bae5fd
+size 246744

water_quality_model_ALT.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9f99b44eaf30caaa94fbd517c8bb480e0378fa7c35f9dcdcab5facd0607c4f26
+size 50008