Version 1.0 of the application has been developed

.gitignore

@@ -0,0 +1,2 @@
+__pycache__/
+*.pyc

Dockerfile

@@ -0,0 +1,7 @@
+FROM python:3.13.9
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+EXPOSE 7860
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

app.py

@@ -0,0 +1,146 @@
+from flask import Flask, request, render_template, jsonify
+import joblib
+import pandas as pd
+
+app = Flask(__name__)
+
+# Load pre-trained pipeline and XGBoost model at startup
+try:
+    ohe = joblib.load('models/ohe.pkl')
+    scaler = joblib.load('models/scaler.pkl')
+    model = joblib.load('models/xgboost_model.pkl')
+    expected_features = list(model.feature_names_in_)
+    print("Models and pipelines loaded successfully.")
+except Exception as e:
+    print(f"Error loading models or encoder: {e}")
+    ohe, scaler, model, expected_features = None, None, None, []
+
+@app.route('/')
+def home():
+    return render_template('home2.html')
+
+@app.route('/documentation')
+def documentation():
+    return render_template('documentation2.html')
+
+@app.route('/predict_model', methods=['GET', 'POST'])
+def predict_model():
+    if request.method == 'POST':
+        try:
+            # 1. Extract raw inputs from form
+            gender = int(request.form.get('gender', 0))
+            senior = int(request.form.get('SeniorCitizen', 0))
+            partner_str = request.form.get('Partner', 'No')
+            dependents_str = request.form.get('Dependents', 'No')
+            
+            phone_str = request.form.get('PhoneService', 'No')
+            multiple_str = request.form.get('MultipleLines', 'No')
+            internet_str = request.form.get('InternetService', 'No')
+            
+            security_str = request.form.get('OnlineSecurity', 'No')
+            backup_str = request.form.get('OnlineBackup', 'No')
+            protection_str = request.form.get('DeviceProtection', 'No')
+            tech_str = request.form.get('TechSupport', 'No')
+            tv_str = request.form.get('StreamingTV', 'No')
+            movies_str = request.form.get('StreamingMovies', 'No')
+            
+            contract = request.form.get('Contract', 'Month-to-month')
+            paperless = request.form.get('PaperlessBilling', 'No')
+            payment = request.form.get('PaymentMethod', 'Electronic check')
+            
+            tenure = int(request.form.get('tenure', 0))
+            monthly = float(request.form.get('MonthlyCharges', 0.0))
+            total = float(request.form.get('TotalCharges', 0.0))
+
+
+            map_addon = lambda val: 1 if val == 'Yes' else (-1 if val == 'No' else 0)
+            
+            security = map_addon(security_str)
+            backup = map_addon(backup_str)
+            protection = map_addon(protection_str)
+            tech = map_addon(tech_str)
+            tv = map_addon(tv_str)
+            movies = map_addon(movies_str)
+            
+            has_partner = 1 if partner_str == 'Yes' else 0
+            has_dependents = 1 if dependents_str == 'Yes' else 0
+            has_phoneservice = 1 if phone_str == 'Yes' else 0
+            has_multiplelines = 1 if multiple_str == 'Yes' else 0
+            
+            internet_map = {'No': 0, 'DSL': 1, 'Fiber optic': 2}
+            internet_encoded = internet_map.get(internet_str, 0)
+            
+            is_automatic = 1 if 'automatic' in payment else 0
+            
+            addons_list = [security_str, backup_str, protection_str, tech_str, tv_str, movies_str]
+            product_count = sum(1 for add in addons_list if add == 'Yes')
+            
+            high_risk = 1 if product_count in [1, 2, 3] else 0
+            fully_integrated = 1 if product_count >= 5 else 0
+            mod_security = 1 if security_str == 'Yes' else 0
+
+
+            user_data = {
+                'gender': gender,
+                'SeniorCitizen': senior,
+                'tenure': tenure,
+                'OnlineSecurity': security,
+                'OnlineBackup': backup,
+                'DeviceProtection': protection,
+                'TechSupport': tech,
+                'StreamingTV': tv,
+                'StreamingMovies': movies,
+                'Contract': contract,
+                'PaperlessBilling': paperless,
+                'PaymentMethod': payment,
+                'MonthlyCharges': monthly,
+                'TotalCharges': total,
+                'has_partner': has_partner,
+                'has_dependents': has_dependents,
+                'has_phoneservice': has_phoneservice,
+                'has_multiplelines': has_multiplelines,
+                'internet_service_encoded': internet_encoded,
+                'is_automatic': is_automatic,
+                'Product_Count': product_count,
+                'Is_High_Risk_Integration': high_risk,
+                'Is_Fully_Integrated': fully_integrated,
+                'Mod_Security': mod_security
+            }
+
+            df_raw = pd.DataFrame([user_data])
+
+
+            categorical_cols = ['Contract', 'PaperlessBilling', 'PaymentMethod']
+            encoded_data = ohe.transform(df_raw[categorical_cols]).toarray()
+            encoded_df = pd.DataFrame(encoded_data, columns=ohe.get_feature_names_out(categorical_cols))
+
+
+            df_processed = pd.concat([df_raw.drop(columns=categorical_cols), encoded_df], axis=1)
+
+
+            numerical_cols = ['MonthlyCharges', 'TotalCharges']
+            df_processed[numerical_cols] = scaler.transform(df_processed[numerical_cols])
+
+            df_final = df_processed[expected_features]
+
+            churn_prob = float(model.predict_proba(df_final)[0][1])
+            prediction = int(model.predict(df_final)[0])
+
+
+            return jsonify({
+                'success': True,
+                'prediction': prediction,
+                'churn_prob': churn_prob
+            })
+
+        except Exception as ex:
+            print(f"Error during prediction: {ex}")
+            return jsonify({
+                'success': False,
+                'error': str(ex)
+            }), 400
+
+    return render_template('predict2.html')
+
+if __name__ == "__main__":
+    app.run(port=7860, host='0.0.0.0')

requirements.ipynb

@@ -0,0 +1,71 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "id": "f72144fd",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Flask==3.1.3\n",
+      "pandas==3.0.2\n",
+      "xgboost==3.2.0\n",
+      "joblib==1.5.3\n",
+      "scikit-learn==1.8.0\n",
+      "gunicorn==23.0.0\n"
+     ]
+    }
+   ],
+   "source": [
+    "import importlib.metadata\n",
+    "\n",
+    "name = ['flask', 'pandas', 'xgboost', 'joblib', 'scikit-learn']\n",
+    "\n",
+    "for p_name in name:\n",
+    "    try:\n",
+    "        version = importlib.metadata.version(p_name)\n",
+    "        if p_name == 'flask':\n",
+    "            p_name = 'Flask'\n",
+    "        elif p_name == 'scikit-learn':\n",
+    "            p_name = 'scikit-learn'\n",
+    "        print(f\"{p_name}=={version}\")\n",
+    "    except importlib.metadata.PackageNotFoundError:\n",
+    "        pass\n",
+    "\n",
+    "print(\"gunicorn==23.0.0\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "d0798960",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "ml (3.13.9)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.13.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

requirements.txt

@@ -0,0 +1,6 @@
+Flask==3.1.3
+pandas==3.0.2
+xgboost==3.2.0
+joblib==1.5.3
+scikit-learn==1.8.0
+gunicorn==23.0.0

templates/documentation.html

@@ -0,0 +1,613 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Customer Churn Analyzer | Documentation</title>
+    
+    <!-- Google Font -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    <style>
+        /* CSS Variable Theme mirroring predict.html */
+        :root {
+            --bg-color: #f8fafc;         /* Slate 50 - Light, clean background */
+            --card-bg: #ffffff;          /* Pure white for form containers */
+            --text-main: #0f172a;        /* Slate 900 - Deep, readable text */
+            --text-muted: #64748b;       /* Slate 500 - For labels and placeholders */
+            --border-color: #cbd5e1;     /* Slate 300 - Subtle input borders */
+            --primary-accent: #2563eb;   /* Blue 600 - Focus state & primary buttons */
+            --primary-hover: #1d4ed8;    /* Blue 700 */
+            --font-family: 'Inter', sans-serif;
+            --card-shadow: 0 15px 40px rgba(15, 23, 42, 0.06);
+            --card-border-radius: 28px;
+            --inner-border-radius: 18px;
+            --gradient-start: #1e3a8a;
+            --gradient-end: #3b82f6;
+            
+            --success: #10b981;
+            --warning: #f59e0b;
+            --danger: #ef4444;
+        }
+
+        /* Dark Mode variables */
+        [data-theme="dark"] {
+            --bg-color: #0f172a;
+            --card-bg: #1e293b;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --border-color: #334155;
+            --primary-accent: #3b82f6;
+            --primary-hover: #60a5fa;
+            --card-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+            --gradient-start: #0f172a;
+            --gradient-end: #1e3a8a;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-family);
+            background: linear-gradient(to bottom right, var(--bg-color), var(--bg-color));
+            min-height: 100vh;
+            padding: 40px 20px;
+            color: var(--text-main);
+            transition: background 0.3s, color 0.3s;
+        }
+
+        .container {
+            max-width: 1250px;
+            margin: auto;
+            position: relative;
+        }
+
+        /* Dark Mode Switch Button */
+        .theme-toggle-btn {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(37, 99, 235, 0.08);
+            border: 1px solid var(--border-color);
+            color: var(--primary-accent);
+            padding: 8px 12px;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 0.85rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s;
+            z-index: 100;
+        }
+
+        .theme-toggle-btn:hover {
+            background: var(--primary-accent);
+            color: #ffffff;
+        }
+
+        /* HERO SECTION */
+        .hero-section {
+            text-align: center;
+            margin-bottom: 50px;
+        }
+
+        .hero-badge {
+            display: inline-block;
+            padding: 10px 18px;
+            border-radius: 999px;
+            background: rgba(37, 99, 235, 0.08);
+            color: var(--primary-accent);
+            font-size: 0.85rem;
+            font-weight: 700;
+            letter-spacing: 0.4px;
+            margin-bottom: 22px;
+        }
+
+        .hero-section h1 {
+            font-size: 3rem;
+            font-weight: 800;
+            color: var(--text-main);
+            margin-bottom: 18px;
+            letter-spacing: -0.02em;
+        }
+
+        .hero-section p {
+            max-width: 850px;
+            margin: auto;
+            color: var(--text-muted);
+            line-height: 1.9;
+            font-size: 1.05rem;
+        }
+
+        /* MAIN GRID */
+        .documentation-grid {
+            display: grid;
+            grid-template-columns: 1.2fr 0.8fr;
+            gap: 28px;
+            align-items: start;
+        }
+
+        /* GENERAL CARD */
+        .card {
+            background: var(--card-bg);
+            backdrop-filter: blur(14px);
+            border-radius: var(--card-border-radius);
+            padding: 34px;
+            border: 1px solid var(--border-color);
+            box-shadow: var(--card-shadow);
+            transition: background-color 0.3s, border-color 0.3s;
+        }
+
+        /* LARGE CARD */
+        .large-card {
+            min-height: 100%;
+        }
+
+        /* STICKY COLUMN */
+        .sticky-column {
+            position: sticky;
+            top: 30px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+
+        /* SMALL CARD */
+        .small-card {
+            padding: 28px;
+            transition: transform 0.25s ease, background-color 0.3s, border-color 0.3s;
+        }
+
+        .small-card:hover {
+            transform: translateY(-2px);
+        }
+
+        /* CARD TITLE */
+        .card-title {
+            font-size: 1.45rem;
+            font-weight: 700;
+            color: var(--text-main);
+            margin-bottom: 22px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        /* PARAGRAPH */
+        .card p {
+            color: var(--text-muted);
+            line-height: 1.9;
+            font-size: 0.97rem;
+            margin-bottom: 18px;
+        }
+
+        /* FEATURE LIST */
+        .feature-list {
+            display: flex;
+            flex-direction: column;
+            gap: 18px;
+            margin-top: 22px;
+        }
+
+        .feature-item {
+            background: var(--bg-color);
+            border: 1px solid var(--border-color);
+            border-radius: var(--inner-border-radius);
+            padding: 18px 20px;
+            transition: background-color 0.3s, border-color 0.3s;
+        }
+
+        .feature-item strong {
+            display: block;
+            color: var(--text-main);
+            margin-bottom: 7px;
+            font-size: 0.96rem;
+        }
+
+        .feature-item span {
+            color: var(--text-muted);
+            line-height: 1.7;
+            font-size: 0.92rem;
+        }
+
+        /* HIGHLIGHT BOX */
+        .highlight-box {
+            background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), var(--bg-color));
+            border: 1px solid var(--border-color);
+            border-radius: 22px;
+            padding: 24px;
+            margin-top: 28px;
+        }
+
+        .highlight-title {
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--primary-accent);
+            margin-bottom: 10px;
+        }
+
+        .highlight-box p {
+            margin-bottom: 0;
+            color: var(--text-main);
+            opacity: 0.95;
+        }
+
+        /* PIPELINE SECTION */
+        .pipeline-card {
+            margin-top: 32px;
+        }
+
+        .pipeline {
+            margin-top: 24px;
+            display: flex;
+            flex-direction: column;
+            gap: 18px;
+        }
+
+        .pipeline-step {
+            display: flex;
+            align-items: flex-start;
+            gap: 16px;
+            background: var(--bg-color);
+            border: 1px solid var(--border-color);
+            border-radius: var(--inner-border-radius);
+            padding: 18px;
+            transition: background-color 0.3s, border-color 0.3s;
+        }
+
+        .step-number {
+            min-width: 38px;
+            height: 38px;
+            border-radius: 50%;
+            background: linear-gradient(to right, var(--primary-accent), var(--primary-hover));
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            font-size: 0.92rem;
+        }
+
+        .step-content strong {
+            display: block;
+            margin-bottom: 6px;
+            color: var(--text-main);
+        }
+
+        .step-content span {
+            color: var(--text-muted);
+            line-height: 1.7;
+            font-size: 0.92rem;
+        }
+
+        /* DISCLAIMER */
+        .disclaimer {
+            margin-top: 35px;
+            background: rgba(245, 158, 11, 0.08);
+            border: 1px solid rgba(245, 158, 11, 0.3);
+            color: #d97706;
+            padding: 22px;
+            border-radius: 22px;
+            line-height: 1.8;
+            font-size: 0.93rem;
+        }
+
+        /* BUTTONS */
+        .btn-group {
+            display: flex;
+            gap: 20px;
+            justify-content: center;
+            margin-top: 42px;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            text-decoration: none;
+            padding: 16px 30px;
+            border-radius: 16px;
+            font-weight: 700;
+            transition: all 0.25s ease;
+            min-width: 220px;
+            text-align: center;
+        }
+
+        .btn-primary {
+            background: linear-gradient(to right, var(--primary-accent), var(--primary-hover));
+            color: white;
+            box-shadow: 0 12px 25px rgba(37, 99, 235, 0.2);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 18px 30px rgba(37, 99, 235, 0.24);
+        }
+
+        .btn-secondary {
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-main);
+        }
+
+        .btn-secondary:hover {
+            transform: translateY(-2px);
+            background: var(--bg-color);
+        }
+
+        /* FOOTER */
+        .footer {
+            text-align: center;
+            margin-top: 45px;
+            color: var(--text-muted);
+            font-size: 0.9rem;
+        }
+
+        /* RESPONSIVE */
+        @media (max-width: 900px) {
+            .documentation-grid {
+                grid-template-columns: 1fr;
+            }
+            .sticky-column {
+                position: static;
+            }
+            .hero-section h1 {
+                font-size: 2.3rem;
+            }
+        }
+
+        @media (max-width: 600px) {
+            .card {
+                padding: 26px;
+            }
+            .btn {
+                width: 100%;
+            }
+            .hero-section h1 {
+                font-size: 2rem;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="container">
+
+        <!-- Theme Toggle Button -->
+        <button class="theme-toggle-btn" id="themeToggle" onclick="toggleTheme()" type="button">
+            <i class="fa-solid fa-moon"></i> <span id="themeToggleText">Dark Mode</span>
+        </button>
+
+        <!-- HERO -->
+        <div class="hero-section">
+            <div class="hero-badge">
+                Model Documentation & Architecture
+            </div>
+            <h1>
+                Understanding the Prediction Pipeline
+            </h1>
+            <p>
+                This documentation explains the machine learning architecture, preprocessing pipeline, optimization strategy, and the reasoning behind simplifying telecom features for both predictive performance and end-user usability.
+            </p>
+        </div>
+
+        <!-- MAIN GRID -->
+        <div class="documentation-grid">
+            
+            <!-- LEFT SIDE -->
+            <div class="card large-card">
+                <div class="card-title">
+                    <i class="fa-solid fa-brain"></i> Why XGBoost Classifier?
+                </div>
+                <p>
+                    The prediction system uses the <strong>XGBoost (Extreme Gradient Boosting) Classifier</strong> because the target task involves predicting a binary customer state (Churn vs. No Churn) using a combination of numerical billing patterns (charges, tenure) and categorical features (contract type, payment method).
+                </p>
+                <p>
+                    XGBoost was selected because it represents the state-of-the-art in gradient boosted decision trees for structured tabular datasets, providing high training efficiency, built-in regularization, and superior classification capabilities.
+                </p>
+
+                <div class="feature-list">
+                    <div class="feature-item">
+                        <strong>Regularized Gradient Boosting</strong>
+                        <span>
+                            XGBoost incorporates L1 (Lasso) and L2 (Ridge) regularization constraints to control tree complexity and prevent overfitting during split evaluations.
+                        </span>
+                    </div>
+
+                    <div class="feature-item">
+                        <strong>Imbalance Mitigation</strong>
+                        <span>
+                            Configures dynamic target weighting via the `scale_pos_weight` hyperparameter, which balances training weights based on the positive-to-negative sample ratio to handle class skewness.
+                        </span>
+                    </div>
+
+                    <div class="feature-item">
+                        <strong>Non-linear Separation</strong>
+                        <span>
+                            Enables decision split thresholds that naturally map complex, non-linear interactions between service tenures, product counts, and monthly rates.
+                        </span>
+                    </div>
+                </div>
+
+                <div class="highlight-box">
+                    <div class="highlight-title">Why Not Linear / Basic Classifiers?</div>
+                    <p>
+                        Traditional linear models assume independent, linear interactions. Customer churn data containing high multi-collinearity and multi-service usage thresholds (where churn peaks at low tenure and moderate charges) is better modeled by decision-tree systems. XGBoost significantly outperformed traditional baseline classifiers during cross-validation.
+                    </p>
+                </div>
+            </div>
+
+            <!-- RIGHT SIDE -->
+            <div class="sticky-column">
+                
+                <!-- ONE-HOT ENCODING -->
+                <div class="card small-card">
+                    <div class="card-title">
+                        <i class="fa-solid fa-cubes"></i> One-Hot Encoding
+                    </div>
+                    <p>
+                        One-Hot Encoding (OHE) was utilized to transform raw categorical columns (such as Contract, PaperlessBilling, and PaymentMethod) into numeric formats.
+                    </p>
+                    <div class="feature-list">
+                        <div class="feature-item">
+                            <strong>Dummy Variable Trap Avoidance</strong>
+                            <span>
+                                Configures `drop='first'` to drop the baseline column for each category, preventing collinearity issues in parameter calculations.
+                            </span>
+                        </div>
+                        <div class="feature-item">
+                            <strong>Algorithmic Compatibility</strong>
+                            <span>
+                                Ensures raw strings are converted into mathematical array formats required by gradient boosted tree algorithms.
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- GRID SEARCH -->
+                <div class="card small-card">
+                    <div class="card-title">
+                        <i class="fa-solid fa-magnifying-glass-chart"></i> GridSearchCV
+                    </div>
+                    <p>
+                        GridSearchCV was deployed to run exhaustive hyperparameter tuning over cross-validation folds, identifying optimal parameters for tree depth, estimators, and learning rates.
+                    </p>
+                    <div class="feature-list">
+                        <div class="feature-item">
+                            <strong>Exhaustive Optimization</strong>
+                            <span>
+                                Evaluates every parameter configuration across a defined parameter grid to prevent manual tuning bias.
+                            </span>
+                        </div>
+                        <div class="feature-item">
+                            <strong>Maximized ROC AUC</strong>
+                            <span>
+                                Optimizes model evaluation based on the Area Under the ROC Curve, balancing true positive and false positive rates.
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+
+        <!-- FEATURE ENGINEERING -->
+        <div class="card pipeline-card">
+            <div class="card-title">
+                <i class="fa-solid fa-code-fork"></i> Simplifying Features for the Model and the End User
+            </div>
+            <p>
+                One important design decision in this project was preprocessing the raw customer usage and service variables into structured, derived feature groups to improve learning quality and simplify client-side entry.
+            </p>
+            <p>
+                Tabular telecom data often contains detailed, correlated medical and account records. Direct usage of raw data fields can increase dimensionality, cause noise, and complicate user interaction.
+            </p>
+
+            <div class="pipeline">
+                <div class="pipeline-step">
+                    <div class="step-number">1</div>
+                    <div class="step-content">
+                        <strong>Service Add-On Mapping</strong>
+                        <span>
+                            Individual premium add-ons (such as OnlineSecurity, OnlineBackup, DeviceProtection, TechSupport, StreamingTV, and StreamingMovies) are mapped to numeric indicators (-1 for No, 0 for No Internet, and 1 for Yes) to construct consistent ordinal inputs.
+                        </span>
+                    </div>
+                </div>
+
+                <div class="pipeline-step">
+                    <div class="step-number">2</div>
+                    <div class="step-content">
+                        <strong>Automatic Billing Consolidation</strong>
+                        <span>
+                            Aggregates specific payment channels containing "(automatic)" to compile a single, binary `is_automatic` feature, capturing customer financial convenience.
+                        </span>
+                    </div>
+                </div>
+
+                <div class="pipeline-step">
+                    <div class="step-number">3</div>
+                    <div class="step-content">
+                        <strong>Standardization & Scaling</strong>
+                        <span>
+                            Applies `StandardScaler` to `MonthlyCharges` and `TotalCharges` dynamically on the server using training population stats to prevent scale bias from dominating prediction thresholds.
+                        </span>
+                    </div>
+                </div>
+
+                <div class="pipeline-step">
+                    <div class="step-number">4</div>
+                    <div class="step-content">
+                        <strong>Ecosystem Integration Metrics</strong>
+                        <span>
+                            Derives `Product_Count` and flags `Is_High_Risk_Integration` (1 to 3 products) and `Is_Fully_Integrated` (5 or 6 products) variables to model the protective effect of customer service bundling on user loyalty.
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="highlight-box">
+                <div class="highlight-title">Design Philosophy</div>
+                <p>
+                    The objective was not only maximizing model accuracy and ROC AUC scores, but also creating a customer-centric analytics system that remains understandable, structured, and highly interactive for real-world business decisions.
+                </p>
+            </div>
+        </div>
+
+        <!-- DISCLAIMER -->
+        <div class="disclaimer">
+            <strong>Analytical Disclaimer:</strong>
+            This platform is intended for analytical, educational, and demonstration purposes only. Predictions generated by the system should be interpreted as probability weights and not direct statements of customer action.
+        </div>
+
+        <!-- BUTTONS -->
+        <div class="btn-group">
+            <a href="{{ url_for('predict_model') }}" class="btn btn-primary">
+                <i class="fa-solid fa-gauge-high"></i> &nbsp; Open Prediction Tool
+            </a>
+            <a href="/" class="btn btn-secondary">
+                <i class="fa-solid fa-house"></i> &nbsp; Return to Home
+            </a>
+        </div>
+
+        <!-- FOOTER -->
+        <div class="footer">
+            Customer Churn Predictor • XGBoost Classifier • One-Hot Encoding • GridSearchCV • Feature Engineering
+        </div>
+
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const savedTheme = localStorage.getItem('theme') || 'dark'; // Default to dark!
+            document.documentElement.setAttribute('data-theme', savedTheme);
+            updateThemeUI(savedTheme);
+        });
+
+        function toggleTheme() {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            updateThemeUI(newTheme);
+        }
+
+        function updateThemeUI(theme) {
+            const btnText = document.getElementById('themeToggleText');
+            const btnIcon = document.querySelector('.theme-toggle-btn i');
+            if (theme === 'dark') {
+                btnText.textContent = 'Light Mode';
+                btnIcon.className = 'fa-solid fa-sun';
+            } else {
+                btnText.textContent = 'Dark Mode';
+                btnIcon.className = 'fa-solid fa-moon';
+            }
+        }
+    </script>
+</body>
+</html>

templates/documentation2.html

@@ -0,0 +1,613 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Customer Churn Analyzer | Documentation</title>
+    
+    <!-- Google Font -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    <style>
+        /* CSS Variable Theme mirroring predict.html */
+        :root {
+            --bg-color: #f5f3ff;         /* soft lilac-tinted white */
+            --card-bg: #ffffff;          /* Pure white for form containers */
+            --text-main: #1e1b4b;        /* Deep indigo - highly readable */
+            --text-muted: #6b7280;       /* Slate/gray 500 */
+            --border-color: #ddd6fe;     /* Soft lavender border */
+            --primary-accent: #7c3aed;   /* Royal Amethyst violet */
+            --primary-hover: #6d28d9;    /* Darker violet */
+            --font-family: 'Inter', sans-serif;
+            --card-shadow: 0 15px 40px rgba(124, 58, 237, 0.05);
+            --card-border-radius: 28px;
+            --inner-border-radius: 18px;
+            --gradient-start: #4f46e5;   /* Indigo 600 */
+            --gradient-end: #7c3aed;     /* Amethyst violet 600 */
+            
+            --success: #10b981;
+            --warning: #f59e0b;
+            --danger: #ef4444;
+        }
+
+        /* Dark Mode variables */
+        [data-theme="dark"] {
+            --bg-color: #0b0a19;         /* deep space-violet background */
+            --card-bg: #161427;          /* deep violet-gray card container background */
+            --text-main: #f5f3ff;        /* crisp white/violet text */
+            --text-muted: #94a3b8;       /* soft slate-gray for muted text */
+            --border-color: #2c2848;     /* dark violet-gray border */
+            --primary-accent: #a78bfa;   /* light violet */
+            --primary-hover: #c4b5fd;    /* bright violet */
+            --card-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+            --gradient-start: #1e1b4b;   /* dark indigo gradient start */
+            --gradient-end: #4c1d95;     /* dark violet gradient end */
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-family);
+            background: linear-gradient(to bottom right, var(--bg-color), var(--bg-color));
+            min-height: 100vh;
+            padding: 40px 20px;
+            color: var(--text-main);
+            transition: background 0.3s, color 0.3s;
+        }
+
+        .container {
+            max-width: 1250px;
+            margin: auto;
+            position: relative;
+        }
+
+        /* Dark Mode Switch Button */
+        .theme-toggle-btn {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(124, 58, 237, 0.08);
+            border: 1px solid var(--border-color);
+            color: var(--primary-accent);
+            padding: 8px 12px;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 0.85rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s;
+            z-index: 100;
+        }
+
+        .theme-toggle-btn:hover {
+            background: var(--primary-accent);
+            color: #ffffff;
+        }
+
+        /* HERO SECTION */
+        .hero-section {
+            text-align: center;
+            margin-bottom: 50px;
+        }
+
+        .hero-badge {
+            display: inline-block;
+            padding: 10px 18px;
+            border-radius: 999px;
+            background: rgba(124, 58, 237, 0.08);
+            color: var(--primary-accent);
+            font-size: 0.85rem;
+            font-weight: 700;
+            letter-spacing: 0.4px;
+            margin-bottom: 22px;
+        }
+
+        .hero-section h1 {
+            font-size: 3rem;
+            font-weight: 800;
+            color: var(--text-main);
+            margin-bottom: 18px;
+            letter-spacing: -0.02em;
+        }
+
+        .hero-section p {
+            max-width: 850px;
+            margin: auto;
+            color: var(--text-muted);
+            line-height: 1.9;
+            font-size: 1.05rem;
+        }
+
+        /* MAIN GRID */
+        .documentation-grid {
+            display: grid;
+            grid-template-columns: 1.2fr 0.8fr;
+            gap: 28px;
+            align-items: start;
+        }
+
+        /* GENERAL CARD */
+        .card {
+            background: var(--card-bg);
+            backdrop-filter: blur(14px);
+            border-radius: var(--card-border-radius);
+            padding: 34px;
+            border: 1px solid var(--border-color);
+            box-shadow: var(--card-shadow);
+            transition: background-color 0.3s, border-color 0.3s;
+        }
+
+        /* LARGE CARD */
+        .large-card {
+            min-height: 100%;
+        }
+
+        /* STICKY COLUMN */
+        .sticky-column {
+            position: sticky;
+            top: 30px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+
+        /* SMALL CARD */
+        .small-card {
+            padding: 28px;
+            transition: transform 0.25s ease, background-color 0.3s, border-color 0.3s;
+        }
+
+        .small-card:hover {
+            transform: translateY(-2px);
+        }
+
+        /* CARD TITLE */
+        .card-title {
+            font-size: 1.45rem;
+            font-weight: 700;
+            color: var(--text-main);
+            margin-bottom: 22px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        /* PARAGRAPH */
+        .card p {
+            color: var(--text-muted);
+            line-height: 1.9;
+            font-size: 0.97rem;
+            margin-bottom: 18px;
+        }
+
+        /* FEATURE LIST */
+        .feature-list {
+            display: flex;
+            flex-direction: column;
+            gap: 18px;
+            margin-top: 22px;
+        }
+
+        .feature-item {
+            background: var(--bg-color);
+            border: 1px solid var(--border-color);
+            border-radius: var(--inner-border-radius);
+            padding: 18px 20px;
+            transition: background-color 0.3s, border-color 0.3s;
+        }
+
+        .feature-item strong {
+            display: block;
+            color: var(--text-main);
+            margin-bottom: 7px;
+            font-size: 0.96rem;
+        }
+
+        .feature-item span {
+            color: var(--text-muted);
+            line-height: 1.7;
+            font-size: 0.92rem;
+        }
+
+        /* HIGHLIGHT BOX */
+        .highlight-box {
+            background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), var(--bg-color));
+            border: 1px solid var(--border-color);
+            border-radius: 22px;
+            padding: 24px;
+            margin-top: 28px;
+        }
+
+        .highlight-title {
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--primary-accent);
+            margin-bottom: 10px;
+        }
+
+        .highlight-box p {
+            margin-bottom: 0;
+            color: var(--text-main);
+            opacity: 0.95;
+        }
+
+        /* PIPELINE SECTION */
+        .pipeline-card {
+            margin-top: 32px;
+        }
+
+        .pipeline {
+            margin-top: 24px;
+            display: flex;
+            flex-direction: column;
+            gap: 18px;
+        }
+
+        .pipeline-step {
+            display: flex;
+            align-items: flex-start;
+            gap: 16px;
+            background: var(--bg-color);
+            border: 1px solid var(--border-color);
+            border-radius: var(--inner-border-radius);
+            padding: 18px;
+            transition: background-color 0.3s, border-color 0.3s;
+        }
+
+        .step-number {
+            min-width: 38px;
+            height: 38px;
+            border-radius: 50%;
+            background: linear-gradient(to right, var(--primary-accent), var(--primary-hover));
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            font-size: 0.92rem;
+        }
+
+        .step-content strong {
+            display: block;
+            margin-bottom: 6px;
+            color: var(--text-main);
+        }
+
+        .step-content span {
+            color: var(--text-muted);
+            line-height: 1.7;
+            font-size: 0.92rem;
+        }
+
+        /* DISCLAIMER */
+        .disclaimer {
+            margin-top: 35px;
+            background: rgba(245, 158, 11, 0.08);
+            border: 1px solid rgba(245, 158, 11, 0.3);
+            color: #d97706;
+            padding: 22px;
+            border-radius: 22px;
+            line-height: 1.8;
+            font-size: 0.93rem;
+        }
+
+        /* BUTTONS */
+        .btn-group {
+            display: flex;
+            gap: 20px;
+            justify-content: center;
+            margin-top: 42px;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            text-decoration: none;
+            padding: 16px 30px;
+            border-radius: 16px;
+            font-weight: 700;
+            transition: all 0.25s ease;
+            min-width: 220px;
+            text-align: center;
+        }
+
+        .btn-primary {
+            background: linear-gradient(to right, var(--primary-accent), var(--primary-hover));
+            color: white;
+            box-shadow: 0 12px 25px rgba(124, 58, 237, 0.2);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 18px 30px rgba(124, 58, 237, 0.24);
+        }
+
+        .btn-secondary {
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-main);
+        }
+
+        .btn-secondary:hover {
+            transform: translateY(-2px);
+            background: var(--bg-color);
+        }
+
+        /* FOOTER */
+        .footer {
+            text-align: center;
+            margin-top: 45px;
+            color: var(--text-muted);
+            font-size: 0.9rem;
+        }
+
+        /* RESPONSIVE */
+        @media (max-width: 900px) {
+            .documentation-grid {
+                grid-template-columns: 1fr;
+            }
+            .sticky-column {
+                position: static;
+            }
+            .hero-section h1 {
+                font-size: 2.3rem;
+            }
+        }
+
+        @media (max-width: 600px) {
+            .card {
+                padding: 26px;
+            }
+            .btn {
+                width: 100%;
+            }
+            .hero-section h1 {
+                font-size: 2rem;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="container">
+
+        <!-- Theme Toggle Button -->
+        <button class="theme-toggle-btn" id="themeToggle" onclick="toggleTheme()" type="button">
+            <i class="fa-solid fa-moon"></i> <span id="themeToggleText">Dark Mode</span>
+        </button>
+
+        <!-- HERO -->
+        <div class="hero-section">
+            <div class="hero-badge">
+                Model Documentation & Architecture
+            </div>
+            <h1>
+                Understanding the Prediction Pipeline
+            </h1>
+            <p>
+                This documentation explains the machine learning architecture, preprocessing pipeline, optimization strategy, and the reasoning behind simplifying telecom features for both predictive performance and end-user usability.
+            </p>
+        </div>
+
+        <!-- MAIN GRID -->
+        <div class="documentation-grid">
+            
+            <!-- LEFT SIDE -->
+            <div class="card large-card">
+                <div class="card-title">
+                    <i class="fa-solid fa-brain"></i> Why XGBoost Classifier?
+                </div>
+                <p>
+                    The prediction system uses the <strong>XGBoost (Extreme Gradient Boosting) Classifier</strong> because the target task involves predicting a binary customer state (Churn vs. No Churn) using a combination of numerical billing patterns (charges, tenure) and categorical features (contract type, payment method).
+                </p>
+                <p>
+                    XGBoost was selected because it represents the state-of-the-art in gradient boosted decision trees for structured tabular datasets, providing high training efficiency, built-in regularization, and superior classification capabilities.
+                </p>
+
+                <div class="feature-list">
+                    <div class="feature-item">
+                        <strong>Regularized Gradient Boosting</strong>
+                        <span>
+                            XGBoost incorporates L1 (Lasso) and L2 (Ridge) regularization constraints to control tree complexity and prevent overfitting during split evaluations.
+                        </span>
+                    </div>
+
+                    <div class="feature-item">
+                        <strong>Imbalance Mitigation</strong>
+                        <span>
+                            Configures dynamic target weighting via the `scale_pos_weight` hyperparameter, which balances training weights based on the positive-to-negative sample ratio to handle class skewness.
+                        </span>
+                    </div>
+
+                    <div class="feature-item">
+                        <strong>Non-linear Separation</strong>
+                        <span>
+                            Enables decision split thresholds that naturally map complex, non-linear interactions between service tenures, product counts, and monthly rates.
+                        </span>
+                    </div>
+                </div>
+
+                <div class="highlight-box">
+                    <div class="highlight-title">Why Not Linear / Basic Classifiers?</div>
+                    <p>
+                        Traditional linear models assume independent, linear interactions. Customer churn data containing high multi-collinearity and multi-service usage thresholds (where churn peaks at low tenure and moderate charges) is better modeled by decision-tree systems. XGBoost significantly outperformed traditional baseline classifiers during cross-validation.
+                    </p>
+                </div>
+            </div>
+
+            <!-- RIGHT SIDE -->
+            <div class="sticky-column">
+                
+                <!-- ONE-HOT ENCODING -->
+                <div class="card small-card">
+                    <div class="card-title">
+                        <i class="fa-solid fa-cubes"></i> One-Hot Encoding
+                    </div>
+                    <p>
+                        One-Hot Encoding (OHE) was utilized to transform raw categorical columns (such as Contract, PaperlessBilling, and PaymentMethod) into numeric formats.
+                    </p>
+                    <div class="feature-list">
+                        <div class="feature-item">
+                            <strong>Dummy Variable Trap Avoidance</strong>
+                            <span>
+                                Configures `drop='first'` to drop the baseline column for each category, preventing collinearity issues in parameter calculations.
+                            </span>
+                        </div>
+                        <div class="feature-item">
+                            <strong>Algorithmic Compatibility</strong>
+                            <span>
+                                Ensures raw strings are converted into mathematical array formats required by gradient boosted tree algorithms.
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- GRID SEARCH -->
+                <div class="card small-card">
+                    <div class="card-title">
+                        <i class="fa-solid fa-magnifying-glass-chart"></i> GridSearchCV
+                    </div>
+                    <p>
+                        GridSearchCV was deployed to run exhaustive hyperparameter tuning over cross-validation folds, identifying optimal parameters for tree depth, estimators, and learning rates.
+                    </p>
+                    <div class="feature-list">
+                        <div class="feature-item">
+                            <strong>Exhaustive Optimization</strong>
+                            <span>
+                                Evaluates every parameter configuration across a defined parameter grid to prevent manual tuning bias.
+                            </span>
+                        </div>
+                        <div class="feature-item">
+                            <strong>Maximized ROC AUC</strong>
+                            <span>
+                                Optimizes model evaluation based on the Area Under the ROC Curve, balancing true positive and false positive rates.
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+
+        <!-- FEATURE ENGINEERING -->
+        <div class="card pipeline-card">
+            <div class="card-title">
+                <i class="fa-solid fa-code-fork"></i> Simplifying Features for the Model and the End User
+            </div>
+            <p>
+                One important design decision in this project was preprocessing the raw customer usage and service variables into structured, derived feature groups to improve learning quality and simplify client-side entry.
+            </p>
+            <p>
+                Tabular telecom data often contains detailed, correlated medical and account records. Direct usage of raw data fields can increase dimensionality, cause noise, and complicate user interaction.
+            </p>
+
+            <div class="pipeline">
+                <div class="pipeline-step">
+                    <div class="step-number">1</div>
+                    <div class="step-content">
+                        <strong>Service Add-On Mapping</strong>
+                        <span>
+                            Individual premium add-ons (such as OnlineSecurity, OnlineBackup, DeviceProtection, TechSupport, StreamingTV, and StreamingMovies) are mapped to numeric indicators (-1 for No, 0 for No Internet, and 1 for Yes) to construct consistent ordinal inputs.
+                        </span>
+                    </div>
+                </div>
+
+                <div class="pipeline-step">
+                    <div class="step-number">2</div>
+                    <div class="step-content">
+                        <strong>Automatic Billing Consolidation</strong>
+                        <span>
+                            Aggregates specific payment channels containing "(automatic)" to compile a single, binary `is_automatic` feature, capturing customer financial convenience.
+                        </span>
+                    </div>
+                </div>
+
+                <div class="pipeline-step">
+                    <div class="step-number">3</div>
+                    <div class="step-content">
+                        <strong>Standardization & Scaling</strong>
+                        <span>
+                            Applies `StandardScaler` to `MonthlyCharges` and `TotalCharges` dynamically on the server using training population stats to prevent scale bias from dominating prediction thresholds.
+                        </span>
+                    </div>
+                </div>
+
+                <div class="pipeline-step">
+                    <div class="step-number">4</div>
+                    <div class="step-content">
+                        <strong>Ecosystem Integration Metrics</strong>
+                        <span>
+                            Derives `Product_Count` and flags `Is_High_Risk_Integration` (1 to 3 products) and `Is_Fully_Integrated` (5 or 6 products) variables to model the protective effect of customer service bundling on user loyalty.
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="highlight-box">
+                <div class="highlight-title">Design Philosophy</div>
+                <p>
+                    The objective was not only maximizing model accuracy and ROC AUC scores, but also creating a customer-centric analytics system that remains understandable, structured, and highly interactive for real-world business decisions.
+                </p>
+            </div>
+        </div>
+
+        <!-- DISCLAIMER -->
+        <div class="disclaimer">
+            <strong>Analytical Disclaimer:</strong>
+            This platform is intended for analytical, educational, and demonstration purposes only. Predictions generated by the system should be interpreted as probability weights and not direct statements of customer action.
+        </div>
+
+        <!-- BUTTONS -->
+        <div class="btn-group">
+            <a href="{{ url_for('predict_model') }}" class="btn btn-primary">
+                <i class="fa-solid fa-gauge-high"></i> &nbsp; Open Prediction Tool
+            </a>
+            <a href="{{ url_for('home') }}" class="btn btn-secondary">
+                <i class="fa-solid fa-house"></i> &nbsp; Return to Home
+            </a>
+        </div>
+
+        <!-- FOOTER -->
+        <div class="footer">
+            Customer Churn Predictor • XGBoost Classifier • One-Hot Encoding • GridSearchCV • Feature Engineering
+        </div>
+
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const savedTheme = localStorage.getItem('theme') || 'dark'; // Default to dark!
+            document.documentElement.setAttribute('data-theme', savedTheme);
+            updateThemeUI(savedTheme);
+        });
+
+        function toggleTheme() {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            updateThemeUI(newTheme);
+        }
+
+        function updateThemeUI(theme) {
+            const btnText = document.getElementById('themeToggleText');
+            const btnIcon = document.querySelector('.theme-toggle-btn i');
+            if (theme === 'dark') {
+                btnText.textContent = 'Light Mode';
+                btnIcon.className = 'fa-solid fa-sun';
+            } else {
+                btnText.textContent = 'Dark Mode';
+                btnIcon.className = 'fa-solid fa-moon';
+            }
+        }
+    </script>
+</body>
+</html>

templates/home.html

@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Customer Churn Analyzer | Home</title>
+    
+    <!-- Google Font -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    <style>
+        /* CSS Variable Theme mirroring predict.html */
+        :root {
+            --bg-color: #f8fafc;         /* Slate 50 - Light, clean background */
+            --card-bg: #ffffff;          /* Pure white for form containers */
+            --text-main: #0f172a;        /* Slate 900 - Deep, readable text */
+            --text-muted: #64748b;       /* Slate 500 - For labels and placeholders */
+            --border-color: #cbd5e1;     /* Slate 300 - Subtle input borders */
+            --primary-accent: #2563eb;   /* Blue 600 - Focus state & primary buttons */
+            --primary-hover: #1d4ed8;    /* Blue 700 */
+            --font-family: 'Inter', sans-serif;
+            --card-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);
+            --card-border-radius: 32px;
+            --inner-border-radius: 18px;
+            --gradient-start: #1e3a8a;
+            --gradient-end: #3b82f6;
+            
+            --success: #10b981;
+            --warning: #f59e0b;
+            --danger: #ef4444;
+        }
+
+        /* Dark Mode variables */
+        [data-theme="dark"] {
+            --bg-color: #0f172a;
+            --card-bg: #1e293b;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --border-color: #334155;
+            --primary-accent: #3b82f6;
+            --primary-hover: #60a5fa;
+            --card-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+            --gradient-start: #0f172a;
+            --gradient-end: #1e3a8a;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-family);
+            min-height: 100vh;
+            background: linear-gradient(to bottom right, var(--bg-color), var(--bg-color));
+            padding: 40px 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-main);
+            transition: background 0.3s, color 0.3s;
+        }
+
+        .hero-container {
+            width: 100%;
+            max-width: 1050px;
+            background: var(--card-bg);
+            backdrop-filter: blur(14px);
+            border-radius: var(--card-border-radius);
+            padding: 60px;
+            border: 1px solid var(--border-color);
+            box-shadow: var(--card-shadow);
+            animation: fadeIn 0.5s ease;
+            position: relative;
+            transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
+        }
+
+        /* Dark Mode Switch Button */
+        .theme-toggle-btn {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(37, 99, 235, 0.08);
+            border: 1px solid var(--border-color);
+            color: var(--primary-accent);
+            padding: 8px 12px;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 0.85rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s;
+        }
+
+        .theme-toggle-btn:hover {
+            background: var(--primary-accent);
+            color: #ffffff;
+        }
+
+        /* HERO Section */
+        .hero-top {
+            text-align: center;
+            margin-bottom: 50px;
+        }
+
+        .hero-badge {
+            display: inline-block;
+            padding: 10px 18px;
+            border-radius: 999px;
+            background: rgba(37, 99, 235, 0.08);
+            color: var(--primary-accent);
+            font-size: 0.85rem;
+            font-weight: 700;
+            letter-spacing: 0.4px;
+            margin-bottom: 22px;
+        }
+
+        h1 {
+            font-size: 3.2rem;
+            line-height: 1.1;
+            color: var(--text-main);
+            margin-bottom: 20px;
+            font-weight: 800;
+            letter-spacing: -0.02em;
+        }
+
+        .hero-description {
+            max-width: 760px;
+            margin: auto;
+            color: var(--text-muted);
+            line-height: 1.9;
+            font-size: 1.05rem;
+        }
+
+        /* GRID */
+        .content-grid {
+            display: grid;
+            grid-template-columns: 1.1fr 0.9fr;
+            gap: 28px;
+            margin-bottom: 40px;
+        }
+
+        /* CARDS */
+        .card {
+            background: var(--card-bg);
+            border-radius: 24px;
+            padding: 30px;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
+            transition: background-color 0.3s, border-color 0.3s;
+        }
+
+        .card-title {
+            font-size: 1.35rem;
+            font-weight: 700;
+            margin-bottom: 18px;
+            color: var(--text-main);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .card p {
+            color: var(--text-muted);
+            line-height: 1.8;
+            font-size: 0.97rem;
+        }
+
+        /* FEATURE LIST */
+        .feature-list {
+            margin-top: 22px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .feature-item {
+            background: var(--bg-color);
+            border-radius: 16px;
+            padding: 16px 18px;
+            border: 1px solid var(--border-color);
+            transition: background-color 0.3s, border-color 0.3s;
+        }
+
+        .feature-item strong {
+            display: block;
+            margin-bottom: 6px;
+            color: var(--text-main);
+            font-size: 0.95rem;
+        }
+
+        .feature-item span {
+            color: var(--text-muted);
+            font-size: 0.92rem;
+            line-height: 1.6;
+        }
+
+        /* HIGHLIGHT */
+        .highlight-box {
+            background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), var(--bg-color));
+            border: 1px solid var(--border-color);
+            border-radius: 22px;
+            padding: 28px;
+            margin-top: 24px;
+        }
+
+        .highlight-title {
+            color: var(--primary-accent);
+            font-size: 1rem;
+            font-weight: 700;
+            margin-bottom: 12px;
+        }
+
+        .highlight-box p {
+            color: var(--text-main);
+            line-height: 1.8;
+            font-size: 0.95rem;
+            opacity: 0.95;
+        }
+
+        /* METRICS */
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 18px;
+            margin-top: 22px;
+        }
+
+        .metric-card {
+            background: var(--bg-color);
+            border-radius: var(--inner-border-radius);
+            padding: 20px;
+            border: 1px solid var(--border-color);
+            transition: background-color 0.3s, border-color 0.3s;
+        }
+
+        .metric-number {
+            font-size: 1.8rem;
+            font-weight: 800;
+            color: var(--primary-accent);
+            margin-bottom: 6px;
+        }
+
+        .metric-label {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+
+        /* DISCLAIMER */
+        .disclaimer {
+            margin-top: 28px;
+            background: rgba(245, 158, 11, 0.08);
+            border: 1px solid rgba(245, 158, 11, 0.3);
+            color: #d97706;
+            padding: 18px 20px;
+            border-radius: var(--inner-border-radius);
+            line-height: 1.8;
+            font-size: 0.92rem;
+        }
+
+        /* BUTTONS */
+        .btn-group {
+            display: flex;
+            gap: 20px;
+            justify-content: center;
+            margin-top: 42px;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            text-decoration: none;
+            padding: 16px 30px;
+            border-radius: 16px;
+            font-weight: 700;
+            font-size: 0.97rem;
+            transition: all 0.25s ease;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 230px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(to right, var(--primary-accent), var(--primary-hover));
+            color: white;
+            box-shadow: 0 12px 25px rgba(37, 99, 235, 0.2);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 18px 30px rgba(37, 99, 235, 0.25);
+        }
+
+        .btn-secondary {
+            background: var(--card-bg);
+            color: var(--text-main);
+            border: 1px solid var(--border-color);
+        }
+
+        .btn-secondary:hover {
+            transform: translateY(-2px);
+            background: var(--bg-color);
+        }
+
+        /* FOOTER */
+        .footer {
+            text-align: center;
+            margin-top: 45px;
+            color: var(--text-muted);
+            font-size: 0.9rem;
+        }
+
+        /* ANIMATION */
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(12px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* RESPONSIVE */
+        @media (max-width: 900px) {
+            .content-grid {
+                grid-template-columns: 1fr;
+            }
+            h1 {
+                font-size: 2.3rem;
+            }
+            .hero-container {
+                padding: 35px;
+            }
+        }
+
+        @media (max-width: 600px) {
+            .metrics-grid {
+                grid-template-columns: 1fr;
+            }
+            .btn {
+                width: 100%;
+            }
+            .hero-container {
+                padding: 28px;
+            }
+            h1 {
+                font-size: 2rem;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="hero-container">
+        
+        <!-- Theme Toggle Button -->
+        <button class="theme-toggle-btn" id="themeToggle" onclick="toggleTheme()" type="button">
+            <i class="fa-solid fa-moon"></i> <span id="themeToggleText">Dark Mode</span>
+        </button>
+
+        <!-- HERO -->
+        <div class="hero-top">
+            <div class="hero-badge">
+                AI-Driven Telecom Intelligence Platform
+            </div>
+            <h1>
+                Customer Churn Predictor
+            </h1>
+            <p class="hero-description">
+                Advanced machine learning system designed to estimate customer churn risk patterns using customer metadata, active service subscriptions, contract types, and billing history.
+            </p>
+        </div>
+
+        <!-- CONTENT GRID -->
+        <div class="content-grid">
+            
+            <!-- LEFT CARD -->
+            <div class="card">
+                <div class="card-title">
+                    <i class="fa-solid fa-chart-line"></i> Platform Overview
+                </div>
+                <p>
+                    This platform was developed to analyze customer profiles and identify patterns associated with churn behavior. The prediction pipeline combines statistical learning, feature preprocessing, and subscription activity indicators to estimate customer churn probability.
+                </p>
+
+                <div class="feature-list">
+                    <div class="feature-item">
+                        <strong>XGBoost Classifier</strong>
+                        <span>
+                            Gradient boosted decision trees optimized for high classification performance, class imbalance, and stable prediction behavior.
+                        </span>
+                    </div>
+
+                    <div class="feature-item">
+                        <strong>GridSearchCV Optimization</strong>
+                        <span>
+                            Exhaustive hyperparameter tuning performed to maximize model ROC AUC score and ensure robust generalization across demographic segments.
+                        </span>
+                    </div>
+
+                    <div class="feature-item">
+                        <strong>Telecom Feature Engineering</strong>
+                        <span>
+                            One-hot categorical encodings, standardized numerical billing features, product usage counts, and integration risk levels built into the pipeline.
+                        </span>
+                    </div>
+                </div>
+
+                <div class="highlight-box">
+                    <div class="highlight-title">Optimization Overview</div>
+                    <p>
+                        This version utilizes <strong>XGBoost</strong> to achieve high classification power on structured customer data. Hyperparameters (learning rate, max depth, estimators) were tuned using <strong>GridSearchCV</strong> to maximize predictive reliability and precision-recall trade-offs.
+                    </p>
+                </div>
+            </div>
+
+            <!-- RIGHT CARD -->
+            <div class="card">
+                <div class="card-title">
+                    <i class="fa-solid fa-gears"></i> System Capabilities
+                </div>
+                <p>
+                    The model evaluates customer profiles using a combination of customer tenure, service subscriptions, charges, payment history, and contract parameters.
+                </p>
+
+                <div class="metrics-grid">
+                    <div class="metric-card" style="grid-row: span 2; display: flex; flex-direction: column; justify-content: center;">
+                        <div class="metric-number" style="font-size: 1.45rem; line-height: 1.35; margin-bottom: 8px;">82% Overall Accuracy<br>&amp; 75% Churn Recall</div>
+                        <div class="metric-label">
+                            Optimized XGBoost model performance showcasing overall accuracy and recall for churn detection
+                        </div>
+                    </div>
+
+                    <div class="metric-card">
+                        <div class="metric-number">XGB</div>
+                        <div class="metric-label">
+                            Extreme Gradient Boosting used for predictions
+                        </div>
+                    </div>
+
+                    <div class="metric-card">
+                        <div class="metric-number">ML</div>
+                        <div class="metric-label">
+                            Machine learning pipeline with preprocessing integration
+                        </div>
+                    </div>
+                </div>
+
+                <div class="disclaimer">
+                    <strong>Analytical Disclaimer:</strong>
+                    This platform is intended for analytical and research demonstration purposes. Predictions generated by the system should be used in combination with qualitative customer insights and business policy.
+                </div>
+            </div>
+
+        </div>
+
+        <!-- BUTTONS -->
+        <div class="btn-group">
+            <a href="{{ url_for('predict_model') }}" class="btn btn-primary">
+                <i class="fa-solid fa-gauge-high"></i> &nbsp; Launch Prediction Tool
+            </a>
+            <a href="{{ url_for('documentation') }}" class="btn btn-secondary">
+                <i class="fa-solid fa-book"></i> &nbsp; View Model Documentation
+            </a>
+        </div>
+
+        <!-- FOOTER -->
+        <div class="footer">
+            Customer Churn Predictor • Powered by XGBoost Classifier, Feature Engineering, and GridSearchCV
+        </div>
+
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const savedTheme = localStorage.getItem('theme') || 'dark'; // Default to dark!
+            document.documentElement.setAttribute('data-theme', savedTheme);
+            updateThemeUI(savedTheme);
+        });
+
+        function toggleTheme() {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            updateThemeUI(newTheme);
+        }
+
+        function updateThemeUI(theme) {
+            const btnText = document.getElementById('themeToggleText');
+            const btnIcon = document.querySelector('.theme-toggle-btn i');
+            if (theme === 'dark') {
+                btnText.textContent = 'Light Mode';
+                btnIcon.className = 'fa-solid fa-sun';
+            } else {
+                btnText.textContent = 'Dark Mode';
+                btnIcon.className = 'fa-solid fa-moon';
+            }
+        }
+    </script>
+</body>
+</html>

templates/home2.html

@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Customer Churn Analyzer | Home</title>
+    
+    <!-- Google Font -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    <style>
+        /* CSS Variable Theme mirroring predict.html */
+        :root {
+            --bg-color: #f5f3ff;         /* soft lilac-tinted white */
+            --card-bg: #ffffff;          /* Pure white for form containers */
+            --text-main: #1e1b4b;        /* Deep indigo - highly readable */
+            --text-muted: #6b7280;       /* Slate/gray 500 */
+            --border-color: #ddd6fe;     /* Soft lavender border */
+            --primary-accent: #7c3aed;   /* Royal Amethyst violet */
+            --primary-hover: #6d28d9;    /* Darker violet */
+            --font-family: 'Inter', sans-serif;
+            --card-shadow: 0 20px 50px rgba(124, 58, 237, 0.05);
+            --card-border-radius: 32px;
+            --inner-border-radius: 18px;
+            --gradient-start: #4f46e5;   /* Indigo 600 */
+            --gradient-end: #7c3aed;     /* Amethyst violet 600 */
+            
+            --success: #10b981;
+            --warning: #f59e0b;
+            --danger: #ef4444;
+        }
+
+        /* Dark Mode variables */
+        [data-theme="dark"] {
+            --bg-color: #0b0a19;         /* deep space-violet background */
+            --card-bg: #161427;          /* deep violet-gray card container background */
+            --text-main: #f5f3ff;        /* crisp white/violet text */
+            --text-muted: #94a3b8;       /* soft slate-gray for muted text */
+            --border-color: #2c2848;     /* dark violet-gray border */
+            --primary-accent: #a78bfa;   /* light violet */
+            --primary-hover: #c4b5fd;    /* bright violet */
+            --card-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+            --gradient-start: #1e1b4b;   /* dark indigo gradient start */
+            --gradient-end: #4c1d95;     /* dark violet gradient end */
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-family);
+            min-height: 100vh;
+            background: linear-gradient(to bottom right, var(--bg-color), var(--bg-color));
+            padding: 40px 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-main);
+            transition: background 0.3s, color 0.3s;
+        }
+
+        .hero-container {
+            width: 100%;
+            max-width: 1050px;
+            background: var(--card-bg);
+            backdrop-filter: blur(14px);
+            border-radius: var(--card-border-radius);
+            padding: 60px;
+            border: 1px solid var(--border-color);
+            box-shadow: var(--card-shadow);
+            animation: fadeIn 0.5s ease;
+            position: relative;
+            transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
+        }
+
+        /* Dark Mode Switch Button */
+        .theme-toggle-btn {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(124, 58, 237, 0.08);
+            border: 1px solid var(--border-color);
+            color: var(--primary-accent);
+            padding: 8px 12px;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 0.85rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s;
+        }
+
+        .theme-toggle-btn:hover {
+            background: var(--primary-accent);
+            color: #ffffff;
+        }
+
+        /* HERO Section */
+        .hero-top {
+            text-align: center;
+            margin-bottom: 50px;
+        }
+
+        .hero-badge {
+            display: inline-block;
+            padding: 10px 18px;
+            border-radius: 999px;
+            background: rgba(124, 58, 237, 0.08);
+            color: var(--primary-accent);
+            font-size: 0.85rem;
+            font-weight: 700;
+            letter-spacing: 0.4px;
+            margin-bottom: 22px;
+        }
+
+        h1 {
+            font-size: 3.2rem;
+            line-height: 1.1;
+            color: var(--text-main);
+            margin-bottom: 20px;
+            font-weight: 800;
+            letter-spacing: -0.02em;
+        }
+
+        .hero-description {
+            max-width: 760px;
+            margin: auto;
+            color: var(--text-muted);
+            line-height: 1.9;
+            font-size: 1.05rem;
+        }
+
+        /* GRID */
+        .content-grid {
+            display: grid;
+            grid-template-columns: 1.1fr 0.9fr;
+            gap: 28px;
+            margin-bottom: 40px;
+        }
+
+        /* CARDS */
+        .card {
+            background: var(--card-bg);
+            border-radius: 24px;
+            padding: 30px;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
+            transition: background-color 0.3s, border-color 0.3s;
+        }
+
+        .card-title {
+            font-size: 1.35rem;
+            font-weight: 700;
+            margin-bottom: 18px;
+            color: var(--text-main);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .card p {
+            color: var(--text-muted);
+            line-height: 1.8;
+            font-size: 0.97rem;
+        }
+
+        /* FEATURE LIST */
+        .feature-list {
+            margin-top: 22px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .feature-item {
+            background: var(--bg-color);
+            border-radius: 16px;
+            padding: 16px 18px;
+            border: 1px solid var(--border-color);
+            transition: background-color 0.3s, border-color 0.3s;
+        }
+
+        .feature-item strong {
+            display: block;
+            margin-bottom: 6px;
+            color: var(--text-main);
+            font-size: 0.95rem;
+        }
+
+        .feature-item span {
+            color: var(--text-muted);
+            font-size: 0.92rem;
+            line-height: 1.6;
+        }
+
+        /* HIGHLIGHT */
+        .highlight-box {
+            background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), var(--bg-color));
+            border: 1px solid var(--border-color);
+            border-radius: 22px;
+            padding: 28px;
+            margin-top: 24px;
+        }
+
+        .highlight-title {
+            color: var(--primary-accent);
+            font-size: 1rem;
+            font-weight: 700;
+            margin-bottom: 12px;
+        }
+
+        .highlight-box p {
+            color: var(--text-main);
+            line-height: 1.8;
+            font-size: 0.95rem;
+            opacity: 0.95;
+        }
+
+        /* METRICS */
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 18px;
+            margin-top: 22px;
+        }
+
+        .metric-card {
+            background: var(--bg-color);
+            border-radius: var(--inner-border-radius);
+            padding: 20px;
+            border: 1px solid var(--border-color);
+            transition: background-color 0.3s, border-color 0.3s;
+        }
+
+        .metric-number {
+            font-size: 1.8rem;
+            font-weight: 800;
+            color: var(--primary-accent);
+            margin-bottom: 6px;
+        }
+
+        .metric-label {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+
+        /* DISCLAIMER */
+        .disclaimer {
+            margin-top: 28px;
+            background: rgba(245, 158, 11, 0.08);
+            border: 1px solid rgba(245, 158, 11, 0.3);
+            color: #d97706;
+            padding: 18px 20px;
+            border-radius: var(--inner-border-radius);
+            line-height: 1.8;
+            font-size: 0.92rem;
+        }
+
+        /* BUTTONS */
+        .btn-group {
+            display: flex;
+            gap: 20px;
+            justify-content: center;
+            margin-top: 42px;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            text-decoration: none;
+            padding: 16px 30px;
+            border-radius: 16px;
+            font-weight: 700;
+            font-size: 0.97rem;
+            transition: all 0.25s ease;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 230px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(to right, var(--primary-accent), var(--primary-hover));
+            color: white;
+            box-shadow: 0 12px 25px rgba(124, 58, 237, 0.2);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 18px 30px rgba(124, 58, 237, 0.25);
+        }
+
+        .btn-secondary {
+            background: var(--card-bg);
+            color: var(--text-main);
+            border: 1px solid var(--border-color);
+        }
+
+        .btn-secondary:hover {
+            transform: translateY(-2px);
+            background: var(--bg-color);
+        }
+
+        /* FOOTER */
+        .footer {
+            text-align: center;
+            margin-top: 45px;
+            color: var(--text-muted);
+            font-size: 0.9rem;
+        }
+
+        /* ANIMATION */
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(12px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* RESPONSIVE */
+        @media (max-width: 900px) {
+            .content-grid {
+                grid-template-columns: 1fr;
+            }
+            h1 {
+                font-size: 2.3rem;
+            }
+            .hero-container {
+                padding: 35px;
+            }
+        }
+
+        @media (max-width: 600px) {
+            .metrics-grid {
+                grid-template-columns: 1fr;
+            }
+            .btn {
+                width: 100%;
+            }
+            .hero-container {
+                padding: 28px;
+            }
+            h1 {
+                font-size: 2rem;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="hero-container">
+        
+        <!-- Theme Toggle Button -->
+        <button class="theme-toggle-btn" id="themeToggle" onclick="toggleTheme()" type="button">
+            <i class="fa-solid fa-moon"></i> <span id="themeToggleText">Dark Mode</span>
+        </button>
+
+        <!-- HERO -->
+        <div class="hero-top">
+            <div class="hero-badge">
+                AI-Driven Telecom Intelligence Platform
+            </div>
+            <h1>
+                Customer Churn Predictor
+            </h1>
+            <p class="hero-description">
+                Advanced machine learning system designed to estimate customer churn risk patterns using customer metadata, active service subscriptions, contract types, and billing history.
+            </p>
+        </div>
+
+        <!-- CONTENT GRID -->
+        <div class="content-grid">
+            
+            <!-- LEFT CARD -->
+            <div class="card">
+                <div class="card-title">
+                    <i class="fa-solid fa-chart-line"></i> Platform Overview
+                </div>
+                <p>
+                    This platform was developed to analyze customer profiles and identify patterns associated with churn behavior. The prediction pipeline combines statistical learning, feature preprocessing, and subscription activity indicators to estimate customer churn probability.
+                </p>
+
+                <div class="feature-list">
+                    <div class="feature-item">
+                        <strong>XGBoost Classifier</strong>
+                        <span>
+                            Gradient boosted decision trees optimized for high classification performance, class imbalance, and stable prediction behavior.
+                        </span>
+                    </div>
+
+                    <div class="feature-item">
+                        <strong>GridSearchCV Optimization</strong>
+                        <span>
+                            Exhaustive hyperparameter tuning performed to maximize model ROC AUC score and ensure robust generalization across demographic segments.
+                        </span>
+                    </div>
+
+                    <div class="feature-item">
+                        <strong>Telecom Feature Engineering</strong>
+                        <span>
+                            One-hot categorical encodings, standardized numerical billing features, product usage counts, and integration risk levels built into the pipeline.
+                        </span>
+                    </div>
+                </div>
+
+                <div class="highlight-box">
+                    <div class="highlight-title">Optimization Overview</div>
+                    <p>
+                        This version utilizes <strong>XGBoost</strong> to achieve high classification power on structured customer data. Hyperparameters (learning rate, max depth, estimators) were tuned using <strong>GridSearchCV</strong> to maximize predictive reliability and precision-recall trade-offs.
+                    </p>
+                </div>
+            </div>
+
+            <!-- RIGHT CARD -->
+            <div class="card">
+                <div class="card-title">
+                    <i class="fa-solid fa-gears"></i> System Capabilities
+                </div>
+                <p>
+                    The model evaluates customer profiles using a combination of customer tenure, service subscriptions, charges, payment history, and contract parameters.
+                </p>
+
+                <div class="metrics-grid">
+                    <div class="metric-card" style="grid-row: span 2; display: flex; flex-direction: column; justify-content: center;">
+                        <div class="metric-number" style="font-size: 1.45rem; line-height: 1.35; margin-bottom: 8px;">82% Overall Accuracy<br>&amp; 75% Churn Recall</div>
+                        <div class="metric-label">
+                            Optimized XGBoost model performance showcasing overall accuracy and recall for churn detection
+                        </div>
+                    </div>
+
+                    <div class="metric-card">
+                        <div class="metric-number">XGB</div>
+                        <div class="metric-label">
+                            Extreme Gradient Boosting used for predictions
+                        </div>
+                    </div>
+
+                    <div class="metric-card">
+                        <div class="metric-number">ML</div>
+                        <div class="metric-label">
+                            Machine learning pipeline with preprocessing integration
+                        </div>
+                    </div>
+                </div>
+
+                <div class="disclaimer">
+                    <strong>Analytical Disclaimer:</strong>
+                    This platform is intended for analytical and research demonstration purposes. Predictions generated by the system should be used in combination with qualitative customer insights and business policy.
+                </div>
+            </div>
+
+        </div>
+
+        <!-- BUTTONS -->
+        <div class="btn-group">
+            <a href="{{ url_for('predict_model') }}" class="btn btn-primary">
+                <i class="fa-solid fa-gauge-high"></i> &nbsp; Launch Prediction Tool
+            </a>
+            <a href="{{ url_for('documentation') }}" class="btn btn-secondary">
+                <i class="fa-solid fa-book"></i> &nbsp; View Model Documentation
+            </a>
+        </div>
+
+        <!-- FOOTER -->
+        <div class="footer">
+            Customer Churn Predictor • Powered by XGBoost Classifier, Feature Engineering, and GridSearchCV
+        </div>
+
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const savedTheme = localStorage.getItem('theme') || 'dark'; // Default to dark!
+            document.documentElement.setAttribute('data-theme', savedTheme);
+            updateThemeUI(savedTheme);
+        });
+
+        function toggleTheme() {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            updateThemeUI(newTheme);
+        }
+
+        function updateThemeUI(theme) {
+            const btnText = document.getElementById('themeToggleText');
+            const btnIcon = document.querySelector('.theme-toggle-btn i');
+            if (theme === 'dark') {
+                btnText.textContent = 'Light Mode';
+                btnIcon.className = 'fa-solid fa-sun';
+            } else {
+                btnText.textContent = 'Dark Mode';
+                btnIcon.className = 'fa-solid fa-moon';
+            }
+        }
+    </script>
+</body>
+</html>

templates/predict.html

@@ -0,0 +1,855 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Customer Churn Prediction Portal</title>
+  <meta name="description" content="Predict customer churn probability using advanced machine learning models based on telecom profile characteristics.">
+  
+  <!-- Modern Google 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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  
+  <!-- Font Awesome Icons for premium look -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+  <style>
+    /* Styling variables and custom design tokens */
+    :root {
+      --bg-color: #f8fafc;         /* Slate 50 - Light, clean background */
+      --card-bg: #ffffff;          /* Pure white for form containers */
+      --text-main: #0f172a;        /* Slate 900 - Deep, readable text */
+      --text-muted: #64748b;       /* Slate 500 - For labels and placeholders */
+      --border-color: #cbd5e1;     /* Slate 300 - Subtle input borders */
+      --primary-accent: #2563eb;   /* Blue 600 - Focus state & primary buttons */
+      --primary-hover: #1d4ed8;    /* Blue 700 */
+      --font-family: 'Inter', sans-serif;
+      --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05), 0 20px 25px -5px rgb(0 0 0 / 0.03);
+      --card-border-radius: 12px;
+      
+      /* Auxiliary colors for status and categories */
+      --success: #10b981;
+      --warning: #f59e0b;
+      --danger: #ef4444;
+      --gradient-start: #1e3a8a;
+      --gradient-end: #3b82f6;
+    }
+
+    /* Dark Mode variables */
+    [data-theme="dark"] {
+      --bg-color: #0f172a;
+      --card-bg: #1e293b;
+      --text-main: #f8fafc;
+      --text-muted: #94a3b8;
+      --border-color: #334155;
+      --primary-accent: #3b82f6;
+      --primary-hover: #60a5fa;
+      --card-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+      --gradient-start: #0f172a;
+      --gradient-end: #1e3a8a;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: var(--font-family);
+      background-color: var(--bg-color);
+      color: var(--text-main);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      transition: background-color 0.3s, color 0.3s;
+      line-height: 1.5;
+    }
+
+    /* Header styling with smooth gradient */
+    header {
+      background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+      color: #ffffff;
+      padding: 2.5rem 1.5rem;
+      text-align: center;
+      position: relative;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .header-content {
+      max-width: 1000px;
+      margin: 0 auto;
+      position: relative;
+    }
+
+    header h1 {
+      font-size: 2.25rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+      letter-spacing: -0.025em;
+    }
+
+    header p {
+      font-size: 1rem;
+      opacity: 0.9;
+      max-width: 600px;
+      margin: 0 auto;
+    }
+
+    .theme-toggle-btn {
+      position: absolute;
+      top: 10px;
+      right: 20px;
+      background: rgba(255, 255, 255, 0.15);
+      border: none;
+      color: #ffffff;
+      padding: 8px 12px;
+      border-radius: 20px;
+      cursor: pointer;
+      font-size: 0.9rem;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: background 0.2s;
+    }
+
+    .theme-toggle-btn:hover {
+      background: rgba(255, 255, 255, 0.25);
+    }
+
+    /* Main layout container */
+    main {
+      flex: 1;
+      max-width: 1200px;
+      width: 100%;
+      margin: 0 auto;
+      padding: 2rem 1.5rem;
+    }
+
+    /* Prediction Result Banner if present */
+    .result-card {
+      background-color: var(--card-bg);
+      border-radius: var(--card-border-radius);
+      box-shadow: var(--card-shadow);
+      border-left: 6px solid var(--primary-accent);
+      padding: 1.5rem;
+      margin-top: 2rem;
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+      animation: slideDown 0.4s ease-out;
+      border-top: 1px solid var(--border-color);
+      border-right: 1px solid var(--border-color);
+      border-bottom: 1px solid var(--border-color);
+    }
+
+    .result-card.churn-high {
+      border-left-color: var(--danger);
+    }
+
+    .result-card.churn-low {
+      border-left-color: var(--success);
+    }
+
+    .result-icon {
+      font-size: 2.5rem;
+    }
+
+    .churn-high .result-icon { color: var(--danger); }
+    .churn-low .result-icon { color: var(--success); }
+
+    .result-info h3 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 0.25rem;
+    }
+
+    .result-info p {
+      color: var(--text-muted);
+      font-size: 0.95rem;
+    }
+
+    .result-score {
+      margin-left: auto;
+      text-align: right;
+    }
+
+    .result-score .percentage {
+      font-size: 2rem;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .result-score .label {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    /* Grid Layout for Form Card and Controls */
+    .form-layout {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+    }
+
+    /* Card Panels representing form sections */
+    .section-card {
+      background-color: var(--card-bg);
+      border-radius: var(--card-border-radius);
+      box-shadow: var(--card-shadow);
+      padding: 2rem;
+      border: 1px solid var(--border-color);
+      transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
+    }
+
+    .section-card:hover {
+      transform: translateY(-2px);
+    }
+
+    .section-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 1.5rem;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      border-bottom: 2px solid var(--bg-color);
+      padding-bottom: 0.75rem;
+      color: var(--primary-accent);
+    }
+
+    .grid-container {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      gap: 1.5rem;
+    }
+
+    /* Form Fields Styling */
+    .form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    label {
+      font-weight: 500;
+      font-size: 0.9rem;
+      color: var(--text-main);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .field-desc {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      margin-top: -0.25rem;
+    }
+
+    input[type="text"],
+    input[type="number"],
+    select {
+      font-family: var(--font-family);
+      color: var(--text-main);
+      background-color: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+      padding: 10px 14px;
+      font-size: 0.95rem;
+      width: 100%;
+      transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
+    }
+
+    input[type="text"]:focus,
+    input[type="number"]:focus,
+    select:focus {
+      border-color: var(--primary-accent);
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+      outline: none;
+    }
+
+    /* Form action buttons */
+    .form-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      gap: 1rem;
+      margin-top: 1.5rem;
+      flex-wrap: wrap;
+    }
+
+    .form-actions .nav-group,
+    .form-actions .action-group {
+      display: flex;
+      gap: 1rem;
+      flex-wrap: wrap;
+    }
+
+    .btn {
+      font-family: var(--font-family);
+      font-size: 0.95rem;
+      font-weight: 600;
+      padding: 12px 24px;
+      border-radius: 6px;
+      cursor: pointer;
+      border: none;
+      transition: all 0.2s;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      text-decoration: none;
+    }
+
+    .btn-secondary {
+      background-color: var(--card-bg);
+      color: var(--text-main);
+      border: 1px solid var(--border-color);
+    }
+
+    .btn-secondary:hover {
+      background-color: var(--bg-color);
+    }
+
+    .btn-primary {
+      background-color: var(--primary-accent);
+      color: #ffffff;
+      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
+    }
+
+    .btn-primary:hover {
+      background-color: var(--primary-hover);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
+    }
+
+    .btn-primary:active {
+      transform: translateY(0);
+    }
+
+    .btn-warning {
+      background-color: var(--warning);
+      color: #ffffff;
+      box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
+    }
+
+    .btn-warning:hover {
+      background-color: #d97706;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
+    }
+
+    footer {
+      text-align: center;
+      padding: 2rem 1.5rem;
+      color: var(--text-muted);
+      font-size: 0.85rem;
+      border-top: 1px solid var(--border-color);
+      margin-top: auto;
+      background-color: var(--card-bg);
+      transition: background-color 0.3s, border-top 0.3s;
+    }
+
+    /* Animations */
+    @keyframes slideDown {
+      from {
+        opacity: 0;
+        transform: translateY(-15px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+      .grid-container {
+        grid-template-columns: 1fr;
+      }
+      header h1 {
+        font-size: 1.75rem;
+      }
+      main {
+        padding: 1rem;
+      }
+      .form-actions {
+        flex-direction: column-reverse;
+        align-items: stretch;
+      }
+      .form-actions .nav-group,
+      .form-actions .action-group {
+        flex-direction: column;
+        width: 100%;
+      }
+      .btn {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+  </style>
+</head>
+<body>
+
+  <header>
+    <button class="theme-toggle-btn" id="themeToggle" onclick="toggleTheme()" type="button">
+      <i class="fa-solid fa-moon"></i> <span id="themeToggleText">Dark Mode</span>
+    </button>
+    <div class="header-content">
+      <h1><i class="fa-solid fa-chart-line"></i> Customer Churn Analyzer</h1>
+      <p>Configure a customer profile below to estimate the likelihood of churn using our optimized XGBoost prediction engine.</p>
+    </div>
+  </header>
+
+  <main>
+    <form id="churnForm">
+      <div class="form-layout">
+
+        <!-- Section 1: Customer Profile -->
+        <section class="section-card">
+          <h2 class="section-title"><i class="fa-solid fa-user-tie"></i> Customer Profile & Demographics</h2>
+          <div class="grid-container">
+            
+            <div class="form-group">
+              <label for="gender"><i class="fa-solid fa-venus-mars"></i> Gender</label>
+              <select name="gender" id="gender" required>
+                <option value="0">Female</option>
+                <option value="1">Male</option>
+              </select>
+              <span class="field-desc">Binary representation (Female=0, Male=1)</span>
+            </div>
+
+            <div class="form-group">
+              <label for="SeniorCitizen"><i class="fa-solid fa-person-cane"></i> Senior Citizen</label>
+              <select name="SeniorCitizen" id="SeniorCitizen" required>
+                <option value="0">No</option>
+                <option value="1">Yes</option>
+              </select>
+              <span class="field-desc">Is the customer 65 years or older?</span>
+            </div>
+
+            <div class="form-group">
+              <label for="Partner"><i class="fa-solid fa-ring"></i> Partner Status</label>
+              <select name="Partner" id="Partner" required>
+                <option value="No">No Partner</option>
+                <option value="Yes">Has Partner</option>
+              </select>
+              <span class="field-desc">Primary demographic status flag</span>
+            </div>
+
+            <div class="form-group">
+              <label for="Dependents"><i class="fa-solid fa-children"></i> Dependents Status</label>
+              <select name="Dependents" id="Dependents" required>
+                <option value="No">No Dependents</option>
+                <option value="Yes">Has Dependents</option>
+              </select>
+              <span class="field-desc">Dependent children or relatives</span>
+            </div>
+
+          </div>
+        </section>
+
+        <!-- Section 2: Core Phone & Internet Services -->
+        <section class="section-card">
+          <h2 class="section-title"><i class="fa-solid fa-network-wired"></i> Core Telecom Services</h2>
+          <div class="grid-container">
+            
+            <div class="form-group">
+              <label for="PhoneService"><i class="fa-solid fa-phone"></i> Phone Service</label>
+              <select name="PhoneService" id="PhoneService" required>
+                <option value="Yes">Yes</option>
+                <option value="No">No</option>
+              </select>
+              <span class="field-desc">Subscribes to standard voice line</span>
+            </div>
+
+            <div class="form-group">
+              <label for="MultipleLines"><i class="fa-solid fa-phone-volume"></i> Multiple Lines</label>
+              <select name="MultipleLines" id="MultipleLines" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No phone service">No phone service</option>
+              </select>
+              <span class="field-desc">Multiple telephone numbers active</span>
+            </div>
+
+            <div class="form-group">
+              <label for="InternetService"><i class="fa-solid fa-wifi"></i> Internet Service Type</label>
+              <select name="InternetService" id="InternetService" required>
+                <option value="DSL">DSL</option>
+                <option value="Fiber optic">Fiber optic</option>
+                <option value="No">No Internet Service</option>
+              </select>
+              <span class="field-desc">Technology type</span>
+            </div>
+
+          </div>
+        </section>
+
+        <!-- Section 3: Premium Add-ons & Streaming -->
+        <section class="section-card">
+          <h2 class="section-title"><i class="fa-solid fa-cubes"></i> Service Add-Ons & Streaming</h2>
+          <div class="grid-container">
+            
+            <div class="form-group">
+              <label for="OnlineSecurity"><i class="fa-solid fa-shield-halved"></i> Online Security</label>
+              <select name="OnlineSecurity" id="OnlineSecurity" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No internet service">No internet service</option>
+              </select>
+              <span class="field-desc">Antivirus & firewall bundle</span>
+            </div>
+
+            <div class="form-group">
+              <label for="OnlineBackup"><i class="fa-solid fa-cloud-arrow-up"></i> Online Backup</label>
+              <select name="OnlineBackup" id="OnlineBackup" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No internet service">No internet service</option>
+              </select>
+              <span class="field-desc">Cloud backup storage</span>
+            </div>
+
+            <div class="form-group">
+              <label for="DeviceProtection"><i class="fa-solid fa-laptop-medical"></i> Device Protection</label>
+              <select name="DeviceProtection" id="DeviceProtection" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No internet service">No internet service</option>
+              </select>
+              <span class="field-desc">Accidental damage coverage</span>
+            </div>
+
+            <div class="form-group">
+              <label for="TechSupport"><i class="fa-solid fa-user-gear"></i> Tech Support</label>
+              <select name="TechSupport" id="TechSupport" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No internet service">No internet service</option>
+              </select>
+              <span class="field-desc">Priority assistance plan</span>
+            </div>
+
+            <div class="form-group">
+              <label for="StreamingTV"><i class="fa-solid fa-tv"></i> Streaming TV</label>
+              <select name="StreamingTV" id="StreamingTV" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No internet service">No internet service</option>
+              </select>
+              <span class="field-desc">Live TV channels package</span>
+            </div>
+
+            <div class="form-group">
+              <label for="StreamingMovies"><i class="fa-solid fa-film"></i> Streaming Movies</label>
+              <select name="StreamingMovies" id="StreamingMovies" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No internet service">No internet service</option>
+              </select>
+              <span class="field-desc">Movie library subscription</span>
+            </div>
+
+          </div>
+        </section>
+
+        <!-- Section 4: Contract & Financials -->
+        <section class="section-card">
+          <h2 class="section-title"><i class="fa-solid fa-file-invoice-dollar"></i> Contract & Billing Details</h2>
+          <div class="grid-container">
+            
+            <div class="form-group">
+              <label for="Contract"><i class="fa-solid fa-file-contract"></i> Contract Type</label>
+              <select name="Contract" id="Contract" required>
+                <option value="Month-to-month">Month-to-month</option>
+                <option value="One year">One year</option>
+                <option value="Two year">Two year</option>
+              </select>
+              <span class="field-desc">Billing term structure</span>
+            </div>
+
+            <div class="form-group">
+              <label for="PaperlessBilling"><i class="fa-solid fa-envelope-open-text"></i> Paperless Billing</label>
+              <select name="PaperlessBilling" id="PaperlessBilling" required>
+                <option value="Yes">Yes</option>
+                <option value="No">No</option>
+              </select>
+              <span class="field-desc">Invoice delivery preference</span>
+            </div>
+
+            <div class="form-group">
+              <label for="PaymentMethod"><i class="fa-solid fa-credit-card"></i> Payment Method</label>
+              <select name="PaymentMethod" id="PaymentMethod" required>
+                <option value="Electronic check">Electronic check</option>
+                <option value="Mailed check">Mailed check</option>
+                <option value="Bank transfer (automatic)">Bank transfer (automatic)</option>
+                <option value="Credit card (automatic)">Credit card (automatic)</option>
+              </select>
+              <span class="field-desc">Billing settlement channel</span>
+            </div>
+
+            <div class="form-group">
+              <label for="tenure"><i class="fa-solid fa-hourglass-half"></i> Tenure (Months)</label>
+              <input type="number" name="tenure" id="tenure" min="0" max="72" placeholder="e.g. 12" required>
+              <span class="field-desc">Months customer has stayed (0 to 72)</span>
+            </div>
+
+            <div class="form-group">
+              <label for="MonthlyCharges"><i class="fa-solid fa-sack-dollar"></i> Monthly Charges ($)</label>
+              <input type="number" name="MonthlyCharges" id="MonthlyCharges" min="0" max="150" step="0.01" placeholder="e.g. 64.85" required>
+              <span class="field-desc">Current monthly invoice price</span>
+            </div>
+
+            <div class="form-group">
+              <label for="TotalCharges"><i class="fa-solid fa-money-bill-wave"></i> Total Charges ($)</label>
+              <input type="number" name="TotalCharges" id="TotalCharges" min="0" max="10000" step="0.01" placeholder="e.g. 2292.15" required>
+              <span class="field-desc">Accrued bill amount across tenure</span>
+            </div>
+
+          </div>
+        </section>
+
+        <!-- Submit & Reset Actions -->
+        <div class="form-actions">
+          <div class="nav-group">
+            <a href="/" class="btn btn-secondary">
+              <i class="fa-solid fa-house"></i> Return to Home
+            </a>
+            <a href="/documentation" class="btn btn-secondary">
+              <i class="fa-solid fa-book"></i> View Documentation
+            </a>
+          </div>
+          <div class="action-group">
+            <button type="button" class="btn btn-warning" onclick="resetForm()">
+              <i class="fa-solid fa-arrow-rotate-left"></i> Reset Fields
+            </button>
+            <button type="submit" class="btn btn-primary">
+              <i class="fa-solid fa-circle-play"></i> Run Prediction Model
+            </button>
+          </div>
+        </div>
+
+        <!-- Result Container located at the bottom of the page, below the buttons -->
+        <div id="resultContainer"></div>
+
+      </div>
+    </form>
+  </main>
+
+  <footer>
+    <p>&copy; 2026 Customer Churn Prediction Engine. All rights reserved. Powered by Flask, XGBoost & Scikit-Learn.</p>
+  </footer>
+
+  <script>
+    // Initialize Theme
+    document.addEventListener('DOMContentLoaded', () => {
+      const savedTheme = localStorage.getItem('theme') || 'dark'; // Default to dark!
+      document.documentElement.setAttribute('data-theme', savedTheme);
+      updateThemeUI(savedTheme);
+
+      // Initialize service dependencies and constraints
+      checkServiceDependencies();
+      document.getElementById('PhoneService').addEventListener('change', checkServiceDependencies);
+      document.getElementById('InternetService').addEventListener('change', checkServiceDependencies);
+
+      // Handle asynchronous native form submission
+      document.getElementById('churnForm').addEventListener('submit', function(event) {
+        event.preventDefault(); // Intercept page navigation
+
+        const phoneService = document.getElementById('PhoneService').value;
+        const internetService = document.getElementById('InternetService').value;
+
+        // Double check: if both phone and internet are 'No', block submission
+        if (phoneService === 'No' && internetService === 'No') {
+          return; // Block submission
+        }
+
+        const formData = new FormData(this);
+        
+        // Asynchronously post to prediction endpoint
+        fetch('/predict_model', {
+          method: 'POST',
+          body: formData
+        })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error('Network response error');
+          }
+          return response.json();
+        })
+        .then(data => {
+          if (data.success) {
+            displayPredictionResult(data.prediction, data.churn_prob);
+          } else {
+            console.error('Prediction failed: ' + data.error);
+          }
+        })
+        .catch(error => {
+          console.warn('Backend server unavailable. Executing client-side model fallback...', error);
+          
+          // Fallback mechanism if opened directly via filesystem (file:///C:/...)
+          if (window.location.protocol === 'file:') {
+            runClientSideMockPrediction();
+          }
+        });
+      });
+    });
+
+    // Theme toggle function
+    function toggleTheme() {
+      const currentTheme = document.documentElement.getAttribute('data-theme');
+      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', newTheme);
+      localStorage.setItem('theme', newTheme);
+      updateThemeUI(newTheme);
+    }
+
+    function updateThemeUI(theme) {
+      const btnText = document.getElementById('themeToggleText');
+      const btnIcon = document.querySelector('.theme-toggle-btn i');
+      if (theme === 'dark') {
+        btnText.textContent = 'Light Mode';
+        btnIcon.className = 'fa-solid fa-sun';
+      } else {
+        btnText.textContent = 'Dark Mode';
+        btnIcon.className = 'fa-solid fa-moon';
+      }
+    }
+
+    // Dynamic UI constraints for phone and internet services selection
+    function checkServiceDependencies() {
+      const phoneService = document.getElementById('PhoneService').value;
+      const multipleLines = document.getElementById('MultipleLines');
+      const internetService = document.getElementById('InternetService').value;
+      const submitBtn = document.querySelector('button[type="submit"]');
+      const resultContainer = document.getElementById('resultContainer');
+
+      // 1. Phone Service -> Multiple Lines constraint
+      if (phoneService === 'No') {
+        multipleLines.value = 'No phone service';
+        multipleLines.disabled = true;
+        multipleLines.style.opacity = '0.6';
+      } else {
+        if (multipleLines.value === 'No phone service') {
+          multipleLines.value = 'No';
+        }
+        multipleLines.disabled = false;
+        multipleLines.style.opacity = '1';
+      }
+
+      // 2. Internet Service -> Add-ons constraints
+      const addons = ['OnlineSecurity', 'OnlineBackup', 'DeviceProtection', 'TechSupport', 'StreamingTV', 'StreamingMovies'];
+      if (internetService === 'No') {
+        addons.forEach(id => {
+          const select = document.getElementById(id);
+          select.value = 'No internet service';
+          select.disabled = true;
+          select.style.opacity = '0.6';
+        });
+      } else {
+        addons.forEach(id => {
+          const select = document.getElementById(id);
+          select.disabled = false;
+          select.style.opacity = '1';
+          if (select.value === 'No internet service') {
+            select.value = 'No';
+          }
+        });
+      }
+
+      // 3. Dual service deactivation check (Phone Service = No & Internet Service = No)
+      if (phoneService === 'No' && internetService === 'No') {
+        submitBtn.disabled = true;
+        
+        // Render a warning card below buttons
+        resultContainer.innerHTML = `
+          <div class="result-card churn-high" style="border-left-color: var(--warning); margin-top: 2rem;">
+            <div class="result-icon" style="color: var(--warning);">
+              <i class="fa-solid fa-triangle-exclamation"></i>
+            </div>
+            <div class="result-info">
+              <h3>Inactive Profile Status</h3>
+              <p>This customer has selected no services from the telecom provider (Phone and Internet are both deactivated). Churn prediction model cannot run on an inactive subscription.</p>
+            </div>
+          </div>
+        `;
+        resultContainer.scrollIntoView({ behavior: 'smooth' });
+      } else {
+        submitBtn.disabled = false;
+        // Clear message only if it was the subscription warning
+        if (resultContainer.innerHTML.includes('Inactive Profile Status')) {
+          resultContainer.innerHTML = '';
+        }
+      }
+    }
+
+    // Function to calculate a mock prediction if running offline / from file system
+    function runClientSideMockPrediction() {
+      const tenure = parseFloat(document.getElementById('tenure').value) || 0;
+      const monthly = parseFloat(document.getElementById('MonthlyCharges').value) || 0;
+      const contract = document.getElementById('Contract').value;
+      const security = document.getElementById('OnlineSecurity').value;
+      
+      // Basic churn risk logic matching general trends
+      let riskFactor = 0.3;
+      
+      // Monthly charges increase risk
+      riskFactor += (monthly / 150) * 0.3;
+      // Tenure reduces risk
+      riskFactor -= (tenure / 72) * 0.4;
+      // Month-to-month contracts have high risk
+      if (contract === 'Month-to-month') riskFactor += 0.25;
+      if (contract === 'Two year') riskFactor -= 0.2;
+      // Security reduces risk
+      if (security === 'Yes') riskFactor -= 0.1;
+      
+      // Clamp values between 0.02 and 0.98
+      const churnProb = Math.max(0.02, Math.min(0.98, riskFactor));
+      const prediction = churnProb > 0.5 ? 1 : 0;
+      
+      displayPredictionResult(prediction, churnProb);
+    }
+
+    // Dynamically insert and display the prediction result below the action buttons
+    function displayPredictionResult(prediction, churnProb) {
+      const container = document.getElementById('resultContainer');
+      const isHighRisk = churnProb > 0.5;
+      
+      container.innerHTML = `
+        <div class="result-card ${isHighRisk ? 'churn-high' : 'churn-low'}">
+          <div class="result-icon">
+            ${isHighRisk ? '<i class="fa-solid fa-circle-exclamation"></i>' : '<i class="fa-solid fa-circle-check"></i>'}
+          </div>
+          <div class="result-info">
+            <h3>${isHighRisk ? 'High Churn Risk Predicted' : 'Low Churn Risk Predicted'}</h3>
+            <p>${isHighRisk ? 'This customer is likely to terminate service. Immediate retention measures are recommended.' : 'This customer is satisfied and is likely to remain with the service.'}</p>
+          </div>
+          <div class="result-score">
+            <div class="percentage">${(churnProb * 100).toFixed(1)}%</div>
+            <div class="label">Churn Probability</div>
+          </div>
+        </div>
+      `;
+      
+      // Smooth scroll to view results natively
+      container.scrollIntoView({ behavior: 'smooth' });
+    }
+
+    // Reset Form to initial default state
+    function resetForm() {
+      document.getElementById('churnForm').reset();
+      
+      // Clear result container
+      const container = document.getElementById('resultContainer');
+      if (container) {
+        container.innerHTML = '';
+      }
+    }
+  </script>
+</body>
+</html>

templates/predict2.html

@@ -0,0 +1,856 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Customer Churn Prediction Portal</title>
+  <meta name="description" content="Predict customer churn probability using advanced machine learning models based on telecom profile characteristics.">
+  
+  <!-- Modern Google 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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  
+  <!-- Font Awesome Icons for premium look -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+  <style>
+    /* Styling variables and custom design tokens */
+    :root {
+      --bg-color: #f5f3ff;         /* soft lilac-tinted white */
+      --card-bg: #ffffff;          /* Pure white for form containers */
+      --text-main: #1e1b4b;        /* Deep indigo - highly readable */
+      --text-muted: #6b7280;       /* Slate/gray 500 */
+      --border-color: #ddd6fe;     /* Soft lavender border */
+      --primary-accent: #7c3aed;   /* Royal Amethyst violet */
+      --primary-hover: #6d28d9;    /* Darker violet */
+      --font-family: 'Inter', sans-serif;
+      --card-shadow: 0 10px 30px rgba(124, 58, 237, 0.05);
+      --card-border-radius: 12px;
+      
+      /* Auxiliary colors for status and categories */
+      --success: #10b981;
+      --warning: #f59e0b;
+      --danger: #ef4444;
+      --gradient-start: #4f46e5;   /* Indigo 600 */
+      --gradient-end: #7c3aed;     /* Amethyst violet 600 */
+    }
+
+    /* Dark Mode variables */
+    [data-theme="dark"] {
+      --bg-color: #0b0a19;         /* deep space-violet background */
+      --card-bg: #161427;          /* deep violet-gray card container background */
+      --text-main: #f5f3ff;        /* crisp white/violet text */
+      --text-muted: #94a3b8;       /* soft slate-gray for muted text */
+      --border-color: #2c2848;     /* dark violet-gray border */
+      --primary-accent: #a78bfa;   /* light violet */
+      --primary-hover: #c4b5fd;    /* bright violet */
+      --card-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+      --gradient-start: #1e1b4b;   /* dark indigo gradient start */
+      --gradient-end: #4c1d95;     /* dark violet gradient end */
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: var(--font-family);
+      background-color: var(--bg-color);
+      color: var(--text-main);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      transition: background-color 0.3s, color 0.3s;
+      line-height: 1.5;
+    }
+
+    /* Header styling with smooth gradient */
+    header {
+      background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+      color: #ffffff;
+      padding: 2.5rem 1.5rem;
+      text-align: center;
+      position: relative;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .header-content {
+      max-width: 1000px;
+      margin: 0 auto;
+      position: relative;
+    }
+
+    header h1 {
+      font-size: 2.25rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+      letter-spacing: -0.025em;
+    }
+
+    header p {
+      font-size: 1rem;
+      opacity: 0.9;
+      max-width: 600px;
+      margin: 0 auto;
+    }
+
+    .theme-toggle-btn {
+      position: absolute;
+      top: 10px;
+      right: 20px;
+      background: rgba(255, 255, 255, 0.15);
+      border: none;
+      color: #ffffff;
+      padding: 8px 12px;
+      border-radius: 20px;
+      cursor: pointer;
+      font-size: 0.9rem;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: background 0.2s;
+    }
+
+    .theme-toggle-btn:hover {
+      background: rgba(255, 255, 255, 0.25);
+    }
+
+    /* Main layout container */
+    main {
+      flex: 1;
+      max-width: 1200px;
+      width: 100%;
+      margin: 0 auto;
+      padding: 2rem 1.5rem;
+    }
+
+    /* Prediction Result Banner if present */
+    .result-card {
+      background-color: var(--card-bg);
+      border-radius: var(--card-border-radius);
+      box-shadow: var(--card-shadow);
+      border-left: 6px solid var(--primary-accent);
+      padding: 1.5rem;
+      margin-top: 2rem;
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+      animation: slideDown 0.4s ease-out;
+      border-top: 1px solid var(--border-color);
+      border-right: 1px solid var(--border-color);
+      border-bottom: 1px solid var(--border-color);
+    }
+
+    .result-card.churn-high {
+      border-left-color: var(--danger);
+    }
+
+    .result-card.churn-low {
+      border-left-color: var(--success);
+    }
+
+    .result-icon {
+      font-size: 2.5rem;
+    }
+
+    .churn-high .result-icon { color: var(--danger); }
+    .churn-low .result-icon { color: var(--success); }
+
+    .result-info h3 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 0.25rem;
+    }
+
+    .result-info p {
+      color: var(--text-muted);
+      font-size: 0.95rem;
+    }
+
+    .result-score {
+      margin-left: auto;
+      text-align: right;
+    }
+
+    .result-score .percentage {
+      font-size: 2rem;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .result-score .label {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    /* Grid Layout for Form Card and Controls */
+    .form-layout {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+    }
+
+    /* Card Panels representing form sections */
+    .section-card {
+      background-color: var(--card-bg);
+      border-radius: var(--card-border-radius);
+      box-shadow: var(--card-shadow);
+      padding: 2rem;
+      border: 1px solid var(--border-color);
+      transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
+    }
+
+    .section-card:hover {
+      transform: translateY(-2px);
+    }
+
+    .section-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 1.5rem;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      border-bottom: 2px solid var(--bg-color);
+      padding-bottom: 0.75rem;
+      color: var(--primary-accent);
+    }
+
+    .grid-container {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      gap: 1.5rem;
+    }
+
+    /* Form Fields Styling */
+    .form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    label {
+      font-weight: 500;
+      font-size: 0.9rem;
+      color: var(--text-main);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .field-desc {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      margin-top: -0.25rem;
+    }
+
+    input[type="text"],
+    input[type="number"],
+    select {
+      font-family: var(--font-family);
+      color: var(--text-main);
+      background-color: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+      padding: 10px 14px;
+      font-size: 0.95rem;
+      width: 100%;
+      transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
+    }
+
+    input[type="text"]:focus,
+    input[type="number"]:focus,
+    select:focus {
+      border-color: var(--primary-accent);
+      box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
+      outline: none;
+    }
+
+    /* Form action buttons */
+    .form-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      gap: 1rem;
+      margin-top: 1.5rem;
+      flex-wrap: wrap;
+    }
+
+    .form-actions .nav-group,
+    .form-actions .action-group {
+      display: flex;
+      gap: 1rem;
+      flex-wrap: wrap;
+    }
+
+    .btn {
+      font-family: var(--font-family);
+      font-size: 0.95rem;
+      font-weight: 600;
+      padding: 12px 24px;
+      border-radius: 6px;
+      cursor: pointer;
+      border: none;
+      transition: all 0.2s;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      text-decoration: none;
+    }
+
+    .btn-secondary {
+      background-color: var(--card-bg);
+      color: var(--text-main);
+      border: 1px solid var(--border-color);
+    }
+
+    .btn-secondary:hover {
+      background-color: var(--bg-color);
+    }
+
+    .btn-primary {
+      background-color: var(--primary-accent);
+      color: #ffffff;
+      box-shadow: 0 2px 4px rgba(124, 58, 237, 0.2);
+    }
+
+    .btn-primary:hover {
+      background-color: var(--primary-hover);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 6px rgba(124, 58, 237, 0.3);
+    }
+
+    .btn-primary:active {
+      transform: translateY(0);
+    }
+
+    .btn-warning {
+      background-color: var(--warning);
+      color: #ffffff;
+      box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
+    }
+
+    .btn-warning:hover {
+      background-color: #d97706;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
+    }
+
+    footer {
+      text-align: center;
+      padding: 2rem 1.5rem;
+      color: var(--text-muted);
+      font-size: 0.85rem;
+      border-top: 1px solid var(--border-color);
+      margin-top: auto;
+      background-color: var(--card-bg);
+      transition: background-color 0.3s, border-top 0.3s;
+    }
+
+    /* Animations */
+    @keyframes slideDown {
+      from {
+        opacity: 0;
+        transform: translateY(-15px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+      .grid-container {
+        grid-template-columns: 1fr;
+      }
+      header h1 {
+        font-size: 1.75rem;
+      }
+      main {
+        padding: 1rem;
+      }
+      .form-actions {
+        flex-direction: column-reverse;
+        align-items: stretch;
+      }
+      .form-actions .nav-group,
+      .form-actions .action-group {
+        flex-direction: column;
+        width: 100%;
+      }
+      .btn {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+  </style>
+</head>
+<body>
+
+  <header>
+    <button class="theme-toggle-btn" id="themeToggle" onclick="toggleTheme()" type="button">
+      <i class="fa-solid fa-moon"></i> <span id="themeToggleText">Dark Mode</span>
+    </button>
+    <div class="header-content">
+      <h1><i class="fa-solid fa-chart-line"></i> Customer Churn Analyzer</h1>
+      <p>Configure a customer profile below to estimate the likelihood of churn using our optimized XGBoost prediction engine.</p>
+    </div>
+  </header>
+
+  <main>
+    <form id="churnForm">
+      <div class="form-layout">
+
+        <!-- Section 1: Customer Profile -->
+        <section class="section-card">
+          <h2 class="section-title"><i class="fa-solid fa-user-tie"></i> Customer Profile & Demographics</h2>
+          <div class="grid-container">
+            
+            <div class="form-group">
+              <label for="gender"><i class="fa-solid fa-venus-mars"></i> Gender</label>
+              <select name="gender" id="gender" required>
+                <option value="0">Female</option>
+                <option value="1">Male</option>
+              </select>
+              <span class="field-desc">Binary representation (Female=0, Male=1)</span>
+            </div>
+
+            <div class="form-group">
+              <label for="SeniorCitizen"><i class="fa-solid fa-person-cane"></i> Senior Citizen</label>
+              <select name="SeniorCitizen" id="SeniorCitizen" required>
+                <option value="0">No</option>
+                <option value="1">Yes</option>
+              </select>
+              <span class="field-desc">Is the customer 65 years or older?</span>
+            </div>
+
+            <div class="form-group">
+              <label for="Partner"><i class="fa-solid fa-ring"></i> Partner Status</label>
+              <select name="Partner" id="Partner" required>
+                <option value="No">No Partner</option>
+                <option value="Yes">Has Partner</option>
+              </select>
+              <span class="field-desc">Primary demographic status flag</span>
+            </div>
+
+            <div class="form-group">
+              <label for="Dependents"><i class="fa-solid fa-children"></i> Dependents Status</label>
+              <select name="Dependents" id="Dependents" required>
+                <option value="No">No Dependents</option>
+                <option value="Yes">Has Dependents</option>
+              </select>
+              <span class="field-desc">Dependent children or relatives</span>
+            </div>
+
+          </div>
+        </section>
+
+        <!-- Section 2: Core Phone & Internet Services -->
+        <section class="section-card">
+          <h2 class="section-title"><i class="fa-solid fa-network-wired"></i> Core Telecom Services</h2>
+          <div class="grid-container">
+            
+            <div class="form-group">
+              <label for="PhoneService"><i class="fa-solid fa-phone"></i> Phone Service</label>
+              <select name="PhoneService" id="PhoneService" required>
+                <option value="Yes">Yes</option>
+                <option value="No">No</option>
+              </select>
+              <span class="field-desc">Subscribes to standard voice line</span>
+            </div>
+
+            <div class="form-group">
+              <label for="MultipleLines"><i class="fa-solid fa-phone-volume"></i> Multiple Lines</label>
+              <select name="MultipleLines" id="MultipleLines" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No phone service">No phone service</option>
+              </select>
+              <span class="field-desc">Multiple telephone numbers active</span>
+            </div>
+
+            <div class="form-group">
+              <label for="InternetService"><i class="fa-solid fa-wifi"></i> Internet Service Type</label>
+              <select name="InternetService" id="InternetService" required>
+                <option value="DSL">DSL</option>
+                <option value="Fiber optic">Fiber optic</option>
+                <option value="No">No Internet Service</option>
+              </select>
+              <span class="field-desc">Technology type</span>
+            </div>
+
+          </div>
+        </section>
+
+        <!-- Section 3: Premium Add-ons & Streaming -->
+        <section class="section-card">
+          <h2 class="section-title"><i class="fa-solid fa-cubes"></i> Service Add-Ons & Streaming</h2>
+          <div class="grid-container">
+            
+            <div class="form-group">
+              <label for="OnlineSecurity"><i class="fa-solid fa-shield-halved"></i> Online Security</label>
+              <select name="OnlineSecurity" id="OnlineSecurity" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No internet service">No internet service</option>
+              </select>
+              <span class="field-desc">Antivirus & firewall bundle</span>
+            </div>
+
+            <div class="form-group">
+              <label for="OnlineBackup"><i class="fa-solid fa-cloud-arrow-up"></i> Online Backup</label>
+              <select name="OnlineBackup" id="OnlineBackup" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No internet service">No internet service</option>
+              </select>
+              <span class="field-desc">Cloud backup storage</span>
+            </div>
+
+            <div class="form-group">
+              <label for="DeviceProtection"><i class="fa-solid fa-laptop-medical"></i> Device Protection</label>
+              <select name="DeviceProtection" id="DeviceProtection" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No internet service">No internet service</option>
+              </select>
+              <span class="field-desc">Accidental damage coverage</span>
+            </div>
+
+            <div class="form-group">
+              <label for="TechSupport"><i class="fa-solid fa-user-gear"></i> Tech Support</label>
+              <select name="TechSupport" id="TechSupport" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No internet service">No internet service</option>
+              </select>
+              <span class="field-desc">Priority assistance plan</span>
+            </div>
+
+            <div class="form-group">
+              <label for="StreamingTV"><i class="fa-solid fa-tv"></i> Streaming TV</label>
+              <select name="StreamingTV" id="StreamingTV" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No internet service">No internet service</option>
+              </select>
+              <span class="field-desc">Live TV channels package</span>
+            </div>
+
+            <div class="form-group">
+              <label for="StreamingMovies"><i class="fa-solid fa-film"></i> Streaming Movies</label>
+              <select name="StreamingMovies" id="StreamingMovies" required>
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+                <option value="No internet service">No internet service</option>
+              </select>
+              <span class="field-desc">Movie library subscription</span>
+            </div>
+
+          </div>
+        </section>
+
+        <!-- Section 4: Contract & Financials -->
+        <section class="section-card">
+          <h2 class="section-title"><i class="fa-solid fa-file-invoice-dollar"></i> Contract & Billing Details</h2>
+          <div class="grid-container">
+            
+            <div class="form-group">
+              <label for="Contract"><i class="fa-solid fa-file-contract"></i> Contract Type</label>
+              <select name="Contract" id="Contract" required>
+                <option value="Month-to-month">Month-to-month</option>
+                <option value="One year">One year</option>
+                <option value="Two year">Two year</option>
+              </select>
+              <span class="field-desc">Billing term structure</span>
+            </div>
+
+            <div class="form-group">
+              <label for="PaperlessBilling"><i class="fa-solid fa-envelope-open-text"></i> Paperless Billing</label>
+              <select name="PaperlessBilling" id="PaperlessBilling" required>
+                <option value="Yes">Yes</option>
+                <option value="No">No</option>
+              </select>
+              <span class="field-desc">Invoice delivery preference</span>
+            </div>
+
+            <div class="form-group">
+              <label for="PaymentMethod"><i class="fa-solid fa-credit-card"></i> Payment Method</label>
+              <select name="PaymentMethod" id="PaymentMethod" required>
+                <option value="Electronic check">Electronic check</option>
+                <option value="Mailed check">Mailed check</option>
+                <option value="Bank transfer (automatic)">Bank transfer (automatic)</option>
+                <option value="Credit card (automatic)">Credit card (automatic)</option>
+              </select>
+              <span class="field-desc">Billing settlement channel</span>
+            </div>
+
+            <div class="form-group">
+              <label for="tenure"><i class="fa-solid fa-hourglass-half"></i> Tenure (Months)</label>
+              <input type="number" name="tenure" id="tenure" min="0" max="72" placeholder="e.g. 12" required>
+              <span class="field-desc">Months customer has stayed (0 to 72)</span>
+            </div>
+
+            <div class="form-group">
+              <label for="MonthlyCharges"><i class="fa-solid fa-sack-dollar"></i> Monthly Charges ($)</label>
+              <input type="number" name="MonthlyCharges" id="MonthlyCharges" min="0" max="150" step="0.01" placeholder="e.g. 64.85" required>
+              <span class="field-desc">Current monthly invoice price</span>
+            </div>
+
+            <div class="form-group">
+              <label for="TotalCharges"><i class="fa-solid fa-money-bill-wave"></i> Total Charges ($)</label>
+              <input type="number" name="TotalCharges" id="TotalCharges" min="0" max="10000" step="0.01" placeholder="e.g. 2292.15" required>
+              <span class="field-desc">Accrued bill amount across tenure</span>
+            </div>
+
+          </div>
+        </section>
+
+        <!-- Submit & Reset Actions -->
+        <div class="form-actions">
+          <div class="nav-group">
+            <a href="{{ url_for('home') }}" class="btn btn-secondary">
+              <i class="fa-solid fa-house"></i> Return to Home
+            </a>
+            <a href="{{ url_for('documentation') }}" class="btn btn-secondary">
+              <i class="fa-solid fa-book"></i> View Documentation
+            </a>
+          </div>
+          <div class="action-group">
+            <button type="button" class="btn btn-warning" onclick="resetForm()">
+              <i class="fa-solid fa-arrow-rotate-left"></i> Reset Fields
+            </button>
+            <button type="submit" class="btn btn-primary">
+              <i class="fa-solid fa-circle-play"></i> Run Prediction Model
+            </button>
+          </div>
+        </div>
+
+        <!-- Result Container located at the bottom of the page, below the buttons -->
+        <div id="resultContainer"></div>
+
+      </div>
+    </form>
+  </main>
+
+  <footer>
+    <p>&copy; 2026 Customer Churn Prediction Engine. All rights reserved. Powered by Flask, XGBoost & Scikit-Learn.</p>
+  </footer>
+
+  <script>
+    // Initialize Theme
+    document.addEventListener('DOMContentLoaded', () => {
+      const savedTheme = localStorage.getItem('theme') || 'dark'; // Default to dark!
+      document.documentElement.setAttribute('data-theme', savedTheme);
+      updateThemeUI(savedTheme);
+
+      // Initialize service dependencies and constraints
+      checkServiceDependencies();
+      document.getElementById('PhoneService').addEventListener('change', checkServiceDependencies);
+      document.getElementById('InternetService').addEventListener('change', checkServiceDependencies);
+
+      // Handle asynchronous native form submission
+      document.getElementById('churnForm').addEventListener('submit', function(event) {
+        event.preventDefault(); // Intercept page navigation
+
+        const phoneService = document.getElementById('PhoneService').value;
+        const internetService = document.getElementById('InternetService').value;
+
+        // Double check: if both phone and internet are 'No', block submission
+        if (phoneService === 'No' && internetService === 'No') {
+          return; // Block submission
+        }
+
+        const formData = new FormData(this);
+        
+        // Asynchronously post to prediction endpoint
+        fetch('/predict_model', {
+          method: 'POST',
+          body: formData
+        })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error('Network response error');
+          }
+          return response.json();
+        })
+        .then(data => {
+          if (data.success) {
+            displayPredictionResult(data.prediction, data.churn_prob);
+          } else {
+            console.error('Prediction failed: ' + data.error);
+          }
+        })
+        .catch(error => {
+          console.warn('Backend server unavailable. Executing client-side model fallback...', error);
+          
+          // Fallback mechanism if opened directly via filesystem (file:///C:/...)
+          if (window.location.protocol === 'file:') {
+            runClientSideMockPrediction();
+          }
+        });
+      });
+    });
+
+    // Theme toggle function
+    function toggleTheme() {
+      const currentTheme = document.documentElement.getAttribute('data-theme');
+      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', newTheme);
+      localStorage.setItem('theme', newTheme);
+      updateThemeUI(newTheme);
+    }
+
+    // Update Theme Toggle Buttons
+    function updateThemeUI(theme) {
+      const btnText = document.getElementById('themeToggleText');
+      const btnIcon = document.querySelector('.theme-toggle-btn i');
+      if (theme === 'dark') {
+        btnText.textContent = 'Light Mode';
+        btnIcon.className = 'fa-solid fa-sun';
+      } else {
+        btnText.textContent = 'Dark Mode';
+        btnIcon.className = 'fa-solid fa-moon';
+      }
+    }
+
+    // Dynamic UI constraints for phone and internet services selection
+    function checkServiceDependencies() {
+      const phoneService = document.getElementById('PhoneService').value;
+      const multipleLines = document.getElementById('MultipleLines');
+      const internetService = document.getElementById('InternetService').value;
+      const submitBtn = document.querySelector('button[type="submit"]');
+      const resultContainer = document.getElementById('resultContainer');
+
+      // 1. Phone Service -> Multiple Lines constraint
+      if (phoneService === 'No') {
+        multipleLines.value = 'No phone service';
+        multipleLines.disabled = true;
+        multipleLines.style.opacity = '0.6';
+      } else {
+        if (multipleLines.value === 'No phone service') {
+          multipleLines.value = 'No';
+        }
+        multipleLines.disabled = false;
+        multipleLines.style.opacity = '1';
+      }
+
+      // 2. Internet Service -> Add-ons constraints
+      const addons = ['OnlineSecurity', 'OnlineBackup', 'DeviceProtection', 'TechSupport', 'StreamingTV', 'StreamingMovies'];
+      if (internetService === 'No') {
+        addons.forEach(id => {
+          const select = document.getElementById(id);
+          select.value = 'No internet service';
+          select.disabled = true;
+          select.style.opacity = '0.6';
+        });
+      } else {
+        addons.forEach(id => {
+          const select = document.getElementById(id);
+          select.disabled = false;
+          select.style.opacity = '1';
+          if (select.value === 'No internet service') {
+            select.value = 'No';
+          }
+        });
+      }
+
+      // 3. Dual service deactivation check (Phone Service = No & Internet Service = No)
+      if (phoneService === 'No' && internetService === 'No') {
+        submitBtn.disabled = true;
+        
+        // Render a warning card below buttons
+        resultContainer.innerHTML = `
+          <div class="result-card churn-high" style="border-left-color: var(--warning); margin-top: 2rem;">
+            <div class="result-icon" style="color: var(--warning);">
+              <i class="fa-solid fa-triangle-exclamation"></i>
+            </div>
+            <div class="result-info">
+              <h3>Inactive Profile Status</h3>
+              <p>This customer has selected no services from the telecom provider (Phone and Internet are both deactivated). Churn prediction model cannot run on an inactive subscription.</p>
+            </div>
+          </div>
+        `;
+        resultContainer.scrollIntoView({ behavior: 'smooth' });
+      } else {
+        submitBtn.disabled = false;
+        // Clear message only if it was the subscription warning
+        if (resultContainer.innerHTML.includes('Inactive Profile Status')) {
+          resultContainer.innerHTML = '';
+        }
+      }
+    }
+
+    // Function to calculate a mock prediction if running offline / from file system
+    function runClientSideMockPrediction() {
+      const tenure = parseFloat(document.getElementById('tenure').value) || 0;
+      const monthly = parseFloat(document.getElementById('MonthlyCharges').value) || 0;
+      const contract = document.getElementById('Contract').value;
+      const security = document.getElementById('OnlineSecurity').value;
+      
+      // Basic churn risk logic matching general trends
+      let riskFactor = 0.3;
+      
+      // Monthly charges increase risk
+      riskFactor += (monthly / 150) * 0.3;
+      // Tenure reduces risk
+      riskFactor -= (tenure / 72) * 0.4;
+      // Month-to-month contracts have high risk
+      if (contract === 'Month-to-month') riskFactor += 0.25;
+      if (contract === 'Two year') riskFactor -= 0.2;
+      // Security reduces risk
+      if (security === 'Yes') riskFactor -= 0.1;
+      
+      // Clamp values between 0.02 and 0.98
+      const churnProb = Math.max(0.02, Math.min(0.98, riskFactor));
+      const prediction = churnProb > 0.5 ? 1 : 0;
+      
+      displayPredictionResult(prediction, churnProb);
+    }
+
+    // Dynamically insert and display the prediction result below the action buttons
+    function displayPredictionResult(prediction, churnProb) {
+      const container = document.getElementById('resultContainer');
+      const isHighRisk = churnProb > 0.5;
+      
+      container.innerHTML = `
+        <div class="result-card ${isHighRisk ? 'churn-high' : 'churn-low'}">
+          <div class="result-icon">
+            ${isHighRisk ? '<i class="fa-solid fa-circle-exclamation"></i>' : '<i class="fa-solid fa-circle-check"></i>'}
+          </div>
+          <div class="result-info">
+            <h3>${isHighRisk ? 'High Churn Risk Predicted' : 'Low Churn Risk Predicted'}</h3>
+            <p>${isHighRisk ? 'This customer is likely to terminate service. Immediate retention measures are recommended.' : 'This customer is satisfied and is likely to remain with the service.'}</p>
+          </div>
+          <div class="result-score">
+            <div class="percentage">${(churnProb * 100).toFixed(1)}%</div>
+            <div class="label">Churn Probability</div>
+          </div>
+        </div>
+      `;
+      
+      // Smooth scroll to view results natively
+      container.scrollIntoView({ behavior: 'smooth' });
+    }
+
+    // Reset Form to initial default state
+    function resetForm() {
+      document.getElementById('churnForm').reset();
+      
+      // Clear result container
+      const container = document.getElementById('resultContainer');
+      if (container) {
+        container.innerHTML = '';
+      }
+    }
+  </script>
+</body>
+</html>