Upload 78 files

.gitattributes

@@ -38,3 +38,6 @@ credit_card/db.sqlite3 filter=lfs diff=lfs merge=lfs -text
 credit_card/media/card1.jpg filter=lfs diff=lfs merge=lfs -text
 credit_card/static/card1.jpg filter=lfs diff=lfs merge=lfs -text
 credit_card/static/videos/home_bg.mp4 filter=lfs diff=lfs merge=lfs -text
+media/card1.jpg filter=lfs diff=lfs merge=lfs -text
+static/card1.jpg filter=lfs diff=lfs merge=lfs -text
+static/videos/home_bg.mp4 filter=lfs diff=lfs merge=lfs -text

credit_card/asgi.py

@@ -0,0 +1,16 @@
+"""
+ASGI config for credit_card project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/3.2/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'credit_card.settings')
+
+application = get_asgi_application()

credit_card/settings.py

@@ -0,0 +1,138 @@
+"""
+Django settings for credit_card project.
+
+Generated by 'django-admin startproject' using Django 3.2.25.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/3.2/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/3.2/ref/settings/
+"""
+
+from pathlib import Path
+import os
+
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = os.environ.get('SECRET_KEY', 'django-insecure-d3@p12q=pj^f^i1%f+_=r@izpveu2%*^a9pw3dvwbghwy8@9b&')
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = os.environ.get('DEBUG', 'True') == 'True'
+
+ALLOWED_HOSTS = ['*']
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'users',
+    'admins'
+]
+
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'credit_card.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [os.path.join(BASE_DIR,'templates')],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'credit_card.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db.sqlite3',
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/3.2/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_L10N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/3.2/howto/static-files/
+
+STATIC_URL = '/static/'
+STATICFILES_DIRS = [
+    BASE_DIR / 'static',
+]
+
+import os
+
+
+MEDIA_URL = '/media/'
+MEDIA_ROOT = BASE_DIR / 'media'
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

credit_card/urls.py

@@ -0,0 +1,54 @@
+"""
+URL configuration for cyberattack_detection project.
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/4.2/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+
+from django.contrib import admin
+from django.urls import path
+from credit_card import views as mainView
+from admins import views as admins
+from users import views as usr
+from django.contrib.staticfiles.urls import static
+
+from django.conf import settings
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+    path("", mainView.index, name="index"),
+    path("index", mainView.index, name="index"),
+    # path("Adminlogin", mainView.AdminLogin, name="AdminLogin"),
+    path("UserLogin", mainView.UserLogin, name="UserLogin"),
+
+    # admin views
+    path("AdminLogincheck", admins.AdminLoginCheck, name="AdminLoginCheck"),
+    path('userDetails', admins.RegisterUsersView, name='RegisterUsersView'),
+    path('ActivUsers/', admins.ActivaUsers, name='activate_users'),
+    path('DeleteUsers/', admins.DeleteUsers, name='delete_users'),
+    path('adminhome',admins.adminhome,name="adminhome"),
+    
+    
+    #userurls
+    path('UserRegisterForm',usr.UserRegisterActions,name='UserRegisterForm'),
+    path("UserLoginCheck/", usr.UserLoginCheck, name="UserLoginCheck"),
+    path("UserHome/", usr.UserHome, name="UserHome"),
+    path("ViewDataset/", usr.ViewDataset, name="ViewDataset"),
+    path("prediction/", usr.prediction, name="prediction"),
+    path("training", usr.training, name="training"),
+    path("index/", usr.index, name="index"),
+   path('upload_data/', usr.upload_data_view, name='upload_data'),
+
+]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+
+

credit_card/views.py

@@ -0,0 +1,13 @@
+from django.shortcuts import render
+
+
+def index(request):
+    return render(request, 'index.html', {})
+
+def AdminLogin(request):
+    return render(request, 'AdminLogin.html', {})
+
+def UserLogin(request):
+    return render(request, 'UserLogin.html', {})
+
+

credit_card/wsgi.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for credit_card project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/3.2/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'credit_card.settings')
+
+application = get_wsgi_application()

media/ccfraud_autoencoder.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:065f54313238da2c53e0926700fb216ca456a2cbe67ef7f7ea05fc863b3ad300
+size 51120

media/ccfraud_gnn_model.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:598b0a22634f2bc1998b1748fc5ef584d6ccac8e8c64a064f212c463084ee472
+size 3424

media/ccfraud_logisticregression_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5284017077116ee4f4462457fda81ef0366c20c18731bc1cb1abb10deacc9b3a
+size 1026

media/ccfraud_lstm_model.h5

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

media/ccfraud_randomforest_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:35433a1f19c5c706d0230f4d476b36369c4fe42e91de66514a4e039c98bbbfc8
+size 13107772

media/ccfraud_scaler.pkl

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

media/ccfraud_svm_model.pkl

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

media/ccfraud_xgboost_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:981374216f7634ee7fc666d89f6b7a01ad252eae2d33486262a3c9bd398073ac
+size 482084

static/css/style.css

@@ -0,0 +1,919 @@
+/* 
+   -----------------------------------------------------------------------------
+   ZENITH FLOW - PREMIUM 3D / MODERN DARK UI
+   ----------------------------------------------------------------------------- 
+   A polished, professional aesthetic focusing on depth, clarity, and motion.
+*/
+
+:root {
+    --bg-core: #f8fafc;
+    /* Light / White Background */
+    --bg-gradient-start: #e0f2fe;
+    --bg-gradient-end: #f1f5f9;
+
+    --primary: #2563eb;
+    /* Solid Royal Blue for high contrast */
+    --primary-glow: rgba(37, 99, 235, 0.15);
+
+    --secondary: #7c3aed;
+    /* Violet */
+    --accent: #059669;
+    /* Emerald */
+    --danger: #dc2626;
+    /* Red */
+
+    --glass-surface: rgba(255, 255, 255, 0.75);
+    /* White Glass */
+    --glass-border: rgba(0, 0, 0, 0.1);
+    /* Darker border for visibility */
+    --glass-highlight: rgba(255, 255, 255, 0.9);
+
+    --text-main: #000000;
+    /* PURE BLACK TEXT as requested */
+    --text-muted: #475569;
+    /* Dark Grey for secondary text */
+
+    --card-radius: 16px;
+    --btn-radius: 50px;
+
+    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.05);
+    --shadow-glow: 0 0 15px var(--primary-glow);
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: var(--bg-core);
+    background-image:
+        radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.15), transparent 25%),
+        radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.15), transparent 25%);
+    color: var(--text-main);
+    font-family: 'Montserrat', sans-serif;
+    /* Clean, modern sans */
+    min-height: 100vh;
+    overflow-x: hidden;
+    line-height: 1.6;
+}
+
+/* 
+   -----------------
+   ANIMATIONS 
+   -----------------
+*/
+@keyframes float {
+    0% {
+        transform: translateY(0px);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
+
+    100% {
+        transform: translateY(0px);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.fade-in {
+    animation: fadeIn 0.8s ease-out forwards;
+}
+
+.float-anim {
+    animation: float 6s ease-in-out infinite;
+}
+
+/* 
+   -----------------
+   COMPONENTS
+   -----------------
+*/
+
+/* Glass Card */
+.glass-panel {
+    background: var(--glass-surface);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--card-radius);
+    box-shadow: var(--shadow-lg);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.glass-panel:hover {
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* 3D Tilt Card (Interactive) */
+.card-3d {
+    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
+    border: 1px solid var(--glass-border);
+    border-radius: var(--card-radius);
+    padding: 2rem;
+    position: relative;
+    transform-style: preserve-3d;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    overflow: hidden;
+}
+
+.card-3d:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), var(--shadow-glow);
+    border-color: var(--primary);
+}
+
+.card-3d::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), transparent);
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.card-3d:hover::before {
+    opacity: 1;
+}
+
+/* Buttons */
+.btn-modern {
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    border: none;
+    color: white;
+    padding: 12px 30px;
+    border-radius: var(--btn-radius);
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    font-size: 0.9rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+}
+
+.btn-modern:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6);
+    color: white;
+}
+
+.btn-outline-modern {
+    background: transparent;
+    border: 2px solid var(--glass-border);
+    color: var(--text-muted);
+    padding: 10px 25px;
+    border-radius: var(--btn-radius);
+    font-weight: 600;
+    transition: all 0.3s;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+}
+
+.btn-outline-modern:hover {
+    border-color: var(--text-main);
+    color: var(--text-main);
+    background: rgba(255, 255, 255, 0.05);
+}
+
+/* Inputs */
+.input-modern {
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid var(--glass-border);
+    color: var(--text-main);
+    padding: 14px 20px;
+    border-radius: 12px;
+    width: 100%;
+    transition: 0.3s;
+    font-size: 1rem;
+}
+
+.input-modern:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px var(--primary-glow);
+    background: rgba(15, 23, 42, 0.9);
+}
+
+.input-label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* 
+   -----------------
+   LAYOUT
+   -----------------
+*/
+
+/* Header */
+.header-modern {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 15px 40px;
+    background: rgba(15, 23, 42, 0.85);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--glass-border);
+    z-index: 1000;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.nav-link-modern {
+    color: var(--text-muted);
+    font-weight: 600;
+    text-decoration: none;
+    margin: 0 15px;
+    transition: 0.3s;
+    font-size: 0.95rem;
+    position: relative;
+    padding: 5px 0;
+}
+
+.nav-link-modern::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: var(--primary);
+    transition: width 0.3s;
+}
+
+.nav-link-modern:hover,
+.nav-link-modern.active {
+    color: white;
+}
+
+.nav-link-modern:hover::after,
+.nav-link-modern.active::after {
+    width: 100%;
+}
+
+/* Sidebar (Admin) */
+.sidebar-modern {
+    width: 260px;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background: var(--bg-core);
+    border-right: 1px solid var(--glass-border);
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+}
+
+.sidebar-brand {
+    padding: 30px;
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: white;
+    border-bottom: 1px solid var(--glass-border);
+    letter-spacing: -0.5px;
+    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
+}
+
+.sidebar-menu {
+    list-style: none;
+    padding: 20px 10px;
+}
+
+.sidebar-item a {
+    display: flex;
+    align-items: center;
+    padding: 12px 20px;
+    color: var(--text-muted);
+    text-decoration: none;
+    border-radius: 8px;
+    margin-bottom: 5px;
+    transition: 0.2s;
+    font-weight: 500;
+}
+
+.sidebar-item a:hover,
+.sidebar-item a.active {
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--primary);
+}
+
+.sidebar-item a i {
+    width: 25px;
+    margin-right: 10px;
+}
+
+.main-content {
+    margin-left: 260px;
+    padding: 40px;
+    padding-top: 100px;
+}
+
+/* 
+   -----------------
+   PAGE SPECIFICS
+   -----------------
+*/
+
+/* Hero */
+.hero-wrapper {
+    min-height: 80vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 40px;
+}
+
+.hero-title {
+    font-size: 4rem;
+    font-weight: 800;
+    letter-spacing: -1px;
+    line-height: 1.1;
+    margin-bottom: 20px;
+    background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+/* Dashboard Widgets */
+.stat-card {
+    background: var(--glass-surface);
+    border: 1px solid var(--glass-border);
+    padding: 25px;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.stat-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--primary);
+}
+
+.stat-info h3 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: white;
+    margin: 0;
+}
+
+.stat-info p {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin: 0;
+    text-transform: uppercase;
+    font-weight: 600;
+}
+
+/* Prediction Result Circles */
+.result-circle {
+    width: 140px;
+    height: 140px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 3rem;
+    margin: 0 auto 20px;
+    background: rgba(255, 255, 255, 0.03);
+    position: relative;
+}
+
+.result-circle::after {
+    content: '';
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    right: -5px;
+    bottom: -5px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    border-top-color: currentColor;
+    border-right-color: currentColor;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.res-success {
+    color: var(--accent);
+}
+
+.res-danger {
+    color: var(--danger);
+}
+
+/* 
+   -----------------------------------------------------------------------------
+   ADDITIONAL UTILITIES 
+   ----------------------------------------------------------------------------- 
+*/
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-core);
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+/* Helper to center content in tables if needed */
+.table-center th,
+.table-center td {
+    text-align: center;
+}
+
+
+/* 
+   -----------------------------------------------------------------------------
+   ALERTS & NOTIFICATIONS 
+   ----------------------------------------------------------------------------- 
+*/
+.alert-modern {
+    background: rgba(15, 23, 42, 0.8);
+    border: 1px solid var(--glass-border);
+    border-left-width: 4px;
+    color: var(--text-main);
+    padding: 15px 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    backdrop-filter: blur(10px);
+}
+
+.alert-modern-info {
+    border-left-color: var(--primary);
+}
+
+.alert-modern-info i {
+    color: var(--primary);
+}
+
+.alert-modern-success {
+    border-left-color: var(--accent);
+}
+
+.alert-modern-success i {
+    color: var(--accent);
+}
+
+.alert-modern-danger {
+    border-left-color: var(--danger);
+}
+
+.alert-modern-danger i {
+    color: var(--danger);
+}
+
+.alert-modern-warning {
+    border-left-color: #f59e0b;
+}
+
+.alert-modern-warning i {
+    color: #f59e0b;
+}
+
+/* 
+   -----------------------------------------------------------------------------
+   DATA TABLES (Global Override)
+   ----------------------------------------------------------------------------- 
+*/
+.table-modern {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    color: var(--text-muted);
+}
+
+.table-modern thead th {
+    background: rgba(30, 41, 59, 0.5);
+    color: var(--text-main);
+    padding: 15px;
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 0.85rem;
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.table-modern tbody td {
+    padding: 15px;
+    border-bottom: 1px solid var(--glass-border);
+    transition: 0.2s;
+}
+
+.table-modern tbody tr:hover td {
+    background: rgba(255, 255, 255, 0.02);
+    color: white;
+}
+
+
+/* Fix for background-clip compatibility */
+.hero-title,
+.metric-icon,
+.feature-icon-3d {
+    background-clip: text;
+}
+
+
+/* 
+   -----------------------------------------------------------------------------
+   AUTH LAYOUT ENFORCEMENT 
+   ----------------------------------------------------------------------------- 
+*/
+.auth-container {
+    min-height: calc(100vh - 80px);
+    /* Adjust for header height */
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+/* 
+   -----------------------------------------------------------------------------
+   LIGHT THEME OVERRIDES 
+   ----------------------------------------------------------------------------- 
+   Forces text to be black regardless of Bootstrap utility classes.
+*/
+.text-white {
+    color: var(--text-main) !important;
+}
+
+body {
+    background-image:
+        radial-gradient(circle at 15% 50%, rgba(37, 99, 235, 0.05), transparent 25%),
+        radial-gradient(circle at 85% 30%, rgba(124, 58, 237, 0.05), transparent 25%);
+}
+
+body.video-enabled {
+    background: transparent !important;
+}
+
+.input-modern {
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    color: #000;
+}
+
+.input-modern:focus {
+    background: #ffffff;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    border-color: var(--primary);
+}
+
+.glass-panel {
+    background: rgba(255, 255, 255, 0.75);
+    border-color: rgba(226, 232, 240, 0.8);
+    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
+}
+
+.header-modern {
+    background: rgba(255, 255, 255, 0.9);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.nav-link-modern {
+    color: var(--text-muted);
+}
+
+.nav-link-modern:hover,
+.nav-link-modern.active {
+    color: var(--primary);
+    background: rgba(37, 99, 235, 0.05);
+}
+
+.sidebar-modern {
+    background: #ffffff;
+    border-right: 1px solid #e2e8f0;
+}
+
+.sidebar-brand {
+    color: #0f172a;
+    /* Dark text for brand */
+    background: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.stat-card {
+    background: #ffffff;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+
+.stat-info h3 {
+    color: #0f172a;
+}
+
+
+/* 
+   -----------------------------------------------------------------------------
+   VIDEO BACKGROUND 
+   ----------------------------------------------------------------------------- 
+*/
+.video-bg-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: -1;
+}
+
+.video-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.video-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.60);
+    /* White overlay to ensure black text is visible */
+    z-index: 1;
+}
+
+
+/* 
+   -----------------------------------------------------------------------------
+   USER FEEDBACK FIXES (NAV & HERO) 
+   ----------------------------------------------------------------------------- 
+*/
+
+/* 1. Transparent Navbar with Black Text */
+.header-modern {
+    background: transparent !important;
+    backdrop-filter: none !important;
+    border-bottom: none !important;
+    box-shadow: none !important;
+}
+
+.nav-link-modern,
+.header-modern h4,
+.header-modern i {
+    color: #000000 !important;
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
+    /* Halo for readability */
+    font-weight: 800 !important;
+}
+
+/* 2. Hero Title - Solid Black (Remove Gradient) */
+.hero-title {
+    background: none !important;
+    -webkit-text-fill-color: #000000 !important;
+    color: #000000 !important;
+    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
+}
+
+/* 3. Reduce Video Overlay Opacity (Make video more visible) */
+.video-overlay {
+    background: rgba(255, 255, 255, 0.25) !important;
+    /* Reduced for clearer HD video */
+}
+
+
+/* 
+   -----------------------------------------------------------------------------
+   NAVBAR HOVER - ROUNDED BLACK PILL 
+   ----------------------------------------------------------------------------- 
+*/
+
+/* Reset the underline animation since we are using pill shape now */
+.nav-link-modern::after {
+    display: none !important;
+}
+
+.nav-link-modern {
+    padding: 10px 25px !important;
+    border-radius: 50px !important;
+    /* Creates the pill/circle shape */
+    transition: all 0.3s ease !important;
+}
+
+.nav-link-modern:hover,
+.nav-link-modern.active {
+    background: #000000 !important;
+    /* Black Background */
+    color: #ffffff !important;
+    /* White Text */
+    text-shadow: none !important;
+    /* Remove halo */
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
+    transform: translateY(-2px);
+}
+
+
+/* 
+   -----------------------------------------------------------------------------
+   SCROLL BEHAVIOR FOR NAVBAR 
+   ----------------------------------------------------------------------------- 
+*/
+.header-modern.scrolled {
+    background: rgba(255, 255, 255, 0.95) !important;
+    /* Solid white opacity */
+    backdrop-filter: blur(10px) !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
+    transition: all 0.3s ease;
+}
+
+
+/* 
+   -----------------------------------------------------------------------------
+   ADMIN PRO THEME - ULTRA PREMIUM 
+   ----------------------------------------------------------------------------- 
+   Overrides for a sophisticated SaaS-like Admin Interface.
+*/
+
+/* 1. Dark Premium Sidebar */
+.sidebar-modern {
+    background: #0f172a !important;
+    /* Deep Slate Blue/Black */
+    border-right: none !important;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05);
+}
+
+.sidebar-brand {
+    background: #0f172a !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+}
+
+.sidebar-brand .text-dark {
+    color: #ffffff !important;
+}
+
+.sidebar-item a {
+    color: #94a3b8 !important;
+    /* Muted Blue-Grey */
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar-item a:hover,
+.sidebar-item a.active {
+    background: linear-gradient(90deg, var(--primary), #2563eb) !important;
+    color: #ffffff !important;
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+    transform: translateX(5px);
+}
+
+.sidebar-item a i {
+    color: inherit !important;
+    /* Icon matches text */
+}
+
+/* 2. Enhanced Top Header */
+.main-content {
+    background: transparent !important;
+    /* Transparent to show video background */
+    min-height: 100vh;
+    margin-left: 260px !important;
+    /* Force margin to prevent sidebar overlap */
+    padding-top: 40px !important;
+    /* Adjust padding if needed */
+}
+
+/* 3. Ultra Cards (White on Grey) */
+.glass-panel {
+    background: #ffffff !important;
+    border: none !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    /* Tailwind shadow-md */
+    border-radius: 12px !important;
+}
+
+/* 4. Data Grid Tables */
+.table-pro {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 8px;
+    /* Row spacing */
+}
+
+.table-pro thead th {
+    background: transparent !important;
+    color: #64748b !important;
+    font-size: 0.75rem !important;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    border: none !important;
+    padding-left: 20px;
+}
+
+.table-pro tbody tr {
+    background: #ffffff;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
+    transition: transform 0.2s;
+}
+
+.table-pro tbody tr:hover {
+    transform: scale(1.005);
+    background: #ffffff !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+    position: relative;
+}
+
+.table-pro td {
+    padding: 16px 20px !important;
+    border: none !important;
+    color: #334155;
+    font-weight: 500;
+}
+
+.table-pro td:first-child {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+}
+
+.table-pro td:last-child {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
+/* 5. Chart Containers */
+.chart-box {
+    height: 200px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    padding-top: 20px;
+}
+
+.chart-bar {
+    width: 12%;
+    background: var(--primary);
+    border-radius: 4px;
+    opacity: 0.8;
+    transition: height 1s ease;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+.chart-bar:hover {
+    opacity: 1;
+    transform: scaleY(1.05);
+    background: #1d4ed8;
+}

static/videos/home_bg.mp4

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

templates/AdminLogin.html

@@ -0,0 +1,52 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block contents %}
+
+<div class="auth-container">
+    <div class="glass-panel p-5" style="max-width: 450px; width: 100%; border-color: rgba(139, 92, 246, 0.3);">
+        <div class="text-center mb-5">
+            <div class="bg-secondary bg-opacity-10 d-inline-flex align-items-center justify-content-center rounded-circle mb-3"
+                style="width: 60px; height: 60px;">
+                <i class="fas fa-lock text-secondary fs-3"></i>
+            </div>
+            <h3 class="fw-bold text-white">Admin Console</h3>
+            <p class="text-muted small">Restricted access.</p>
+        </div>
+
+        <form action="{% url 'AdminLoginCheck' %}" method="POST">
+            {% csrf_token %}
+
+            <div class="mb-4">
+                <label class="input-label">Admin ID</label>
+                <input type="text" id="loginid" name="loginid" class="input-modern" required>
+            </div>
+
+            <div class="mb-4">
+                <label class="input-label">Security Key</label>
+                <input type="password" id="password" name="pswd" class="input-modern" required>
+            </div>
+
+            <button type="submit" class="btn-modern w-100 mb-4"
+                style="background: linear-gradient(135deg, var(--secondary), #4f46e5);">
+                Authenticate
+            </button>
+
+            <button type="reset" class="btn btn-sm text-muted w-100 text-center"
+                style="background: none; border: none;">
+                Clear
+            </button>
+        </form>
+
+        {% if messages %}
+        <div class="mt-4">
+            {% for message in messages %}
+            <div class="alert alert-danger bg-transparent border-danger text-danger text-center small p-2" role="alert">
+                {{ message }}
+            </div>
+            {% endfor %}
+        </div>
+        {% endif %}
+    </div>
+</div>
+
+{%endblock%}

templates/UserLogin.html

@@ -0,0 +1,56 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block contents %}
+
+<div class="auth-container">
+    <div class="glass-panel p-5" style="max-width: 450px; width: 100%;">
+        <div class="text-center mb-5">
+            <div class="bg-primary bg-opacity-10 d-inline-flex align-items-center justify-content-center rounded-circle mb-3"
+                style="width: 60px; height: 60px;">
+                <i class="fas fa-user text-primary fs-3"></i>
+            </div>
+            <h3 class="fw-bold text-white">Welcome Back</h3>
+            <p class="text-muted small">Access your secure fraud analysis dashboard.</p>
+        </div>
+
+        <form action="{% url 'UserLoginCheck' %}" method="POST" class="needs-validation" novalidate>
+            {% csrf_token %}
+
+            <div class="mb-4">
+                <label class="input-label">Login ID</label>
+                <input type="text" class="input-modern" id="loginid" name="loginid" required
+                    placeholder="Enter your ID">
+            </div>
+
+            <div class="mb-4">
+                <label class="input-label">Password</label>
+                <input type="password" class="input-modern" id="pswd" name="pswd" required placeholder="••••••••">
+            </div>
+
+            <button class="btn-modern w-100 mb-4" type="submit">
+                Sign In
+            </button>
+
+            <div class="d-flex justify-content-between align-items-center">
+                <button class="btn btn-sm text-muted" type="reset" style="background: none; border: none;">
+                    Reset
+                </button>
+                <a href="{% url 'UserRegisterForm' %}" class="text-primary text-decoration-none small fw-bold">
+                    Create Account
+                </a>
+            </div>
+
+            {% if messages %}
+            <div class="mt-4">
+                {% for message in messages %}
+                <div class="alert alert-info bg-transparent border-info text-info text-center small p-2" role="alert">
+                    {{ message }}
+                </div>
+                {% endfor %}
+            </div>
+            {% endif %}
+        </form>
+    </div>
+</div>
+
+{% endblock %}

templates/UserRegistrations.html

@@ -0,0 +1,75 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block contents %}
+
+<div class="auth-container">
+    <div class="glass-panel p-5" style="max-width: 800px; width: 100%;">
+
+        <div class="text-center mb-5">
+            <h2 class="fw-bold text-white">Create Account</h2>
+            <p class="text-muted">Join the network to start analyzing patterns.</p>
+        </div>
+
+        {% if messages %}
+        <div class="mb-4">
+            {% for message in messages %}
+            <div class="alert alert-success bg-transparent border-success text-success text-center p-2" role="alert">
+                {{ message }}
+            </div>
+            {% endfor %}
+        </div>
+        {% endif %}
+
+        <form action="{% url 'UserRegisterForm' %}" method="post">
+            {% csrf_token %}
+
+            <div class="row g-4">
+                <div class="col-md-6">
+                    <label class="input-label">Full Name</label>
+                    <input type="text" class="input-modern" id="name" name="name" maxlength="100" required>
+                </div>
+
+                <div class="col-md-6">
+                    <label class="input-label">Username / ID</label>
+                    <input type="text" class="input-modern" id="loginid" name="loginid" maxlength="100" required>
+                </div>
+
+                <div class="col-md-6">
+                    <label class="input-label">Password</label>
+                    <input type="password" class="input-modern" id="password" name="password" maxlength="100" required>
+                </div>
+
+                <div class="col-md-6">
+                    <label class="input-label">Mobile Number</label>
+                    <input type="text" class="input-modern" id="mobile" name="mobile" maxlength="10" required
+                        pattern="\d{10}">
+                </div>
+
+                <div class="col-12">
+                    <label class="input-label">Email Address</label>
+                    <input type="email" class="input-modern" id="email" name="email" maxlength="100" required>
+                </div>
+
+                <div class="col-12">
+                    <label class="input-label">Locality</label>
+                    <input type="text" class="input-modern" id="locality" name="locality" maxlength="100">
+                </div>
+            </div>
+
+            <div class="d-grid mt-5">
+                <button type="submit" class="btn-modern">
+                    Register
+                </button>
+            </div>
+
+            <div class="text-center mt-4">
+                <small class="text-muted">
+                    Already registered?
+                    <a href="{% url 'UserLogin' %}" class="text-primary text-decoration-none fw-bold">Login</a>
+                </small>
+            </div>
+        </form>
+    </div>
+</div>
+
+{% endblock %}

templates/admins/AdminHome.html

@@ -0,0 +1,265 @@
+{% extends 'admins/adminbase.html' %}
+{% load static %}
+{% block contents %}
+
+<div class="container-fluid">
+
+    <!-- CSS/SVG Charts (No External JS Libs Required) -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="glass-panel p-4 pb-0 h-100 position-relative overflow-hidden">
+                <div class="d-flex justify-content-between align-items-end mb-3">
+                    <div>
+                        <h5 class="text-dark fw-bold m-0">Live Fraud Traffic</h5>
+                        <p class="text-muted small m-0">Incoming transaction volume vs. blocked threats</p>
+                    </div>
+                    <div class="d-flex gap-3">
+                        <div class="d-flex align-items-center small"><span
+                                class="badge bg-primary rounded-circle p-1 me-2"></span> Legitimate</div>
+                        <div class="d-flex align-items-center small"><span
+                                class="badge bg-danger rounded-circle p-1 me-2"></span> Fraud</div>
+                    </div>
+                </div>
+
+                <!-- Mock Chart Visualization using CSS Flexbox -->
+                <div class="chart-box w-100 d-flex justify-content-between align-items-end"
+                    style="height: 220px; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px;">
+                    <!-- Seven days/points -->
+                    <div class="chart-bar-group d-flex flex-column align-items-center w-100 mx-2">
+                        <div class="w-100 d-flex align-items-end justify-content-center"
+                            style="height: 150px; gap: 4px;">
+                            <div class="bar bg-primary opacity-50 rounded-top" style="width: 12px; height: 40%;"></div>
+                            <div class="bar bg-danger rounded-top" style="width: 12px; height: 10%;"></div>
+                        </div>
+                        <span class="small text-muted mt-2" style="font-size: 0.7rem;">MON</span>
+                    </div>
+
+                    <div class="chart-bar-group d-flex flex-column align-items-center w-100 mx-2">
+                        <div class="w-100 d-flex align-items-end justify-content-center"
+                            style="height: 150px; gap: 4px;">
+                            <div class="bar bg-primary opacity-50 rounded-top" style="width: 12px; height: 65%;"></div>
+                            <div class="bar bg-danger rounded-top" style="width: 12px; height: 15%;"></div>
+                        </div>
+                        <span class="small text-muted mt-2" style="font-size: 0.7rem;">TUE</span>
+                    </div>
+
+                    <div class="chart-bar-group d-flex flex-column align-items-center w-100 mx-2">
+                        <div class="w-100 d-flex align-items-end justify-content-center"
+                            style="height: 150px; gap: 4px;">
+                            <div class="bar bg-primary opacity-50 rounded-top" style="width: 12px; height: 80%;"></div>
+                            <div class="bar bg-danger rounded-top" style="width: 12px; height: 5%;"></div>
+                        </div>
+                        <span class="small text-muted mt-2" style="font-size: 0.7rem;">WED</span>
+                    </div>
+
+                    <div class="chart-bar-group d-flex flex-column align-items-center w-100 mx-2">
+                        <div class="w-100 d-flex align-items-end justify-content-center"
+                            style="height: 150px; gap: 4px;">
+                            <div class="bar bg-primary opacity-50 rounded-top" style="width: 12px; height: 55%;"></div>
+                            <div class="bar bg-danger rounded-top" style="width: 12px; height: 25%;"></div>
+                        </div>
+                        <span class="small text-muted mt-2" style="font-size: 0.7rem;">THU</span>
+                    </div>
+
+                    <div class="chart-bar-group d-flex flex-column align-items-center w-100 mx-2">
+                        <div class="w-100 d-flex align-items-end justify-content-center"
+                            style="height: 150px; gap: 4px;">
+                            <div class="bar bg-primary opacity-50 rounded-top" style="width: 12px; height: 90%;"></div>
+                            <div class="bar bg-danger rounded-top" style="width: 12px; height: 8%;"></div>
+                        </div>
+                        <span class="small text-muted mt-2" style="font-size: 0.7rem;">FRI</span>
+                    </div>
+
+                    <div class="chart-bar-group d-flex flex-column align-items-center w-100 mx-2">
+                        <div class="w-100 d-flex align-items-end justify-content-center"
+                            style="height: 150px; gap: 4px;">
+                            <div class="bar bg-primary opacity-50 rounded-top" style="width: 12px; height: 45%;"></div>
+                            <div class="bar bg-danger rounded-top" style="width: 12px; height: 12%;"></div>
+                        </div>
+                        <span class="small text-muted mt-2" style="font-size: 0.7rem;">SAT</span>
+                    </div>
+
+                    <div class="chart-bar-group d-flex flex-column align-items-center w-100 mx-2">
+                        <div class="w-100 d-flex align-items-end justify-content-center"
+                            style="height: 150px; gap: 4px;">
+                            <div class="bar bg-primary opacity-50 rounded-top" style="width: 12px; height: 75%;"></div>
+                            <div class="bar bg-danger rounded-top" style="width: 12px; height: 4%;"></div>
+                        </div>
+                        <span class="small text-muted mt-2" style="font-size: 0.7rem;">SUN</span>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- Status Stats Row (Compacted) -->
+    <div class="row g-4 mb-4">
+        <div class="col-xl-3 col-md-6">
+            <div class="stat-card hover-lift border-0 shadow-sm"
+                style="border-left: 4px solid var(--primary) !important;">
+                <div class="d-flex justify-content-between align-items-start">
+                    <div class="stat-info">
+                        <p class="text-muted small fw-bold text-uppercase mb-1">Total Records</p>
+                        <h3 class="counter text-dark fw-bold mb-0">284,807</h3>
+                        <span class="text-success small"><i class="fas fa-arrow-up me-1"></i> +12% this week</span>
+                    </div>
+                    <div class="stat-icon bg-primary bg-opacity-10 text-primary rounded px-3 py-2">
+                        <i class="fas fa-database"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-xl-3 col-md-6">
+            <div class="stat-card hover-lift border-0 shadow-sm"
+                style="border-left: 4px solid var(--secondary) !important;">
+                <div class="d-flex justify-content-between align-items-start">
+                    <div class="stat-info">
+                        <p class="text-muted small fw-bold text-uppercase mb-1">Active Models</p>
+                        <h3 class="text-dark fw-bold mb-0">3</h3>
+                        <span class="text-muted small">Ensemble Mode</span>
+                    </div>
+                    <div class="stat-icon bg-secondary bg-opacity-10 text-secondary rounded px-3 py-2">
+                        <i class="fas fa-cubes"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-xl-3 col-md-6">
+            <div class="stat-card hover-lift border-0 shadow-sm"
+                style="border-left: 4px solid var(--accent) !important;">
+                <div class="d-flex justify-content-between align-items-start">
+                    <div class="stat-info">
+                        <p class="text-muted small fw-bold text-uppercase mb-1">Precision</p>
+                        <h3 class="text-dark fw-bold mb-0">99.8%</h3>
+                        <span class="text-success small"><i class="fas fa-check me-1"></i> Optimal</span>
+                    </div>
+                    <div class="stat-icon bg-success bg-opacity-10 text-success rounded px-3 py-2">
+                        <i class="fas fa-check-circle"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-xl-3 col-md-6">
+            <div class="stat-card hover-lift border-0 shadow-sm" style="border-left: 4px solid #f59e0b !important;">
+                <div class="d-flex justify-content-between align-items-start">
+                    <div class="stat-info">
+                        <p class="text-muted small fw-bold text-uppercase mb-1">Pending Alerts</p>
+                        <h3 class="text-dark fw-bold mb-0">12</h3>
+                        <span class="text-warning small">Requires review</span>
+                    </div>
+                    <div class="stat-icon bg-warning bg-opacity-10 text-warning rounded px-3 py-2">
+                        <i class="fas fa-bell"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- Main Content Split -->
+    <div class="row g-4">
+
+        <!-- Activity Log -->
+        <div class="col-lg-8">
+            <div class="glass-panel p-4 h-100">
+                <div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3">
+                    <h5 class="text-dark fw-bold m-0">Recent Security Events</h5>
+                    <button class="btn btn-sm btn-outline-primary rounded-pill px-3">Export Log</button>
+                </div>
+
+                <div class="activity-feed">
+                    <div class="d-flex align-items-center mb-4">
+                        <div class="bg-success bg-opacity-10 text-success rounded-circle p-2 me-3 d-flex align-items-center justify-content-center"
+                            style="width: 40px; height: 40px;">
+                            <i class="fas fa-shield-alt"></i>
+                        </div>
+                        <div class="flex-grow-1">
+                            <div class="d-flex justify-content-between">
+                                <h6 class="text-dark fw-bold m-0">Threat Mitigated</h6>
+                                <small class="text-muted fw-bold">2m ago</small>
+                            </div>
+                            <p class="text-muted small m-0">IP 192.168.4.22 automatically blocked by ruleset.</p>
+                        </div>
+                    </div>
+
+                    <div class="d-flex align-items-center mb-4">
+                        <div class="bg-primary bg-opacity-10 text-primary rounded-circle p-2 me-3 d-flex align-items-center justify-content-center"
+                            style="width: 40px; height: 40px;">
+                            <i class="fas fa-user-edit"></i>
+                        </div>
+                        <div class="flex-grow-1">
+                            <div class="d-flex justify-content-between">
+                                <h6 class="text-dark fw-bold m-0">Admin Action</h6>
+                                <small class="text-muted fw-bold">45m ago</small>
+                            </div>
+                            <p class="text-muted small m-0">User #482 manually approved by Analyst.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- System Health (Donut equivalent) -->
+        <div class="col-lg-4">
+            <div class="glass-panel p-4 h-100">
+                <h5 class="text-dark fw-bold mb-4">Server Load</h5>
+
+                <div class="mb-4">
+                    <div class="d-flex justify-content-between mb-1">
+                        <span class="small fw-bold text-muted">CPU Usage</span>
+                        <span class="small fw-bold text-dark">42%</span>
+                    </div>
+                    <div class="progress" style="height: 6px;">
+                        <div class="progress-bar bg-primary" style="width: 42%"></div>
+                    </div>
+                </div>
+
+                <div class="mb-4">
+                    <div class="d-flex justify-content-between mb-1">
+                        <span class="small fw-bold text-muted">Memory</span>
+                        <span class="small fw-bold text-dark">68%</span>
+                    </div>
+                    <div class="progress" style="height: 6px;">
+                        <div class="progress-bar bg-secondary" style="width: 68%"></div>
+                    </div>
+                </div>
+
+                <div class="mb-4">
+                    <div class="d-flex justify-content-between mb-1">
+                        <span class="small fw-bold text-muted">Network I/O</span>
+                        <span class="small fw-bold text-dark">2.4 GB/s</span>
+                    </div>
+                    <div class="progress" style="height: 6px;">
+                        <div class="progress-bar bg-success" style="width: 65%"></div>
+                    </div>
+                </div>
+
+                <div class="alert alert-light border small text-muted mt-4">
+                    <i class="fas fa-info-circle me-2 text-primary"></i> System is running optimally. Next maintenance
+                    scheduled for Sunday 2:00 AM.
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+</div>
+
+<style>
+    /* Bar animations */
+    .bar {
+        transition: height 0.5s ease-out;
+    }
+
+    .bar:hover {
+        opacity: 0.8 !important;
+        transform: scaleX(1.1);
+    }
+</style>
+
+{% endblock %}

templates/admins/accuracy.html

@@ -0,0 +1,87 @@
+{% extends 'admins/adminbase.html' %}
+{% load static %}
+{% block contents %}
+
+<div class="container-fluid fade-in">
+    <div class="row g-4">
+
+        <!-- Metrics Table -->
+        <div class="col-lg-12">
+            <div class="glass-panel p-4 h-100">
+                <div
+                    class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom border-secondary border-opacity-25">
+                    <h4 class="text-white fw-bold m-0"><i class="fas fa-flask text-primary me-2"></i> Model Performance
+                    </h4>
+                    <span class="text-muted small">Comparative Analysis</span>
+                </div>
+
+                {% if error %}
+                <div class="alert alert-danger bg-transparent border-danger text-danger">
+                    <i class="fas fa-exclamation-circle me-2"></i> {{ error }}
+                </div>
+                {% endif %}
+
+                <div class="table-responsive">
+                    <table class="table text-white align-middle" style="border-color: rgba(255,255,255,0.05);">
+                        <!-- The 'results' context variable typically renders raw HTML table rows/headers,
+                             so we wrap it in a cleaner container style. If 'results' contains <table> tags,
+                             this wrapper might need adjustment in the backend, but assuming it renders content: -->
+                        {{ results|safe }}
+                    </table>
+                </div>
+
+                <style>
+                    /* Result Table Overrides for dark theme compatibility */
+                    .dataframe {
+                        width: 100%;
+                        border: none;
+                    }
+
+                    .dataframe thead th {
+                        background: rgba(59, 130, 246, 0.2);
+                        color: white;
+                        border: none;
+                        padding: 12px;
+                    }
+
+                    .dataframe tbody td {
+                        padding: 12px;
+                        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+                        color: #cbd5e1;
+                    }
+
+                    .dataframe tbody tr:hover {
+                        background: rgba(255, 255, 255, 0.02);
+                    }
+                </style>
+            </div>
+        </div>
+
+        <!-- Metric Visualization -->
+        <div class="col-lg-12">
+            <div class="glass-panel p-4 h-100">
+                <div
+                    class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom border-secondary border-opacity-25">
+                    <h4 class="text-white fw-bold m-0"><i class="fas fa-chart-bar text-secondary me-2"></i>
+                        Visualization</h4>
+                    <span class="text-muted small">Accuracy Comparison Graph</span>
+                </div>
+
+                {% if graph_url %}
+                <div class="text-center p-3" style="background: rgba(0,0,0,0.2); border-radius: 12px;">
+                    <img src="{{ graph_url }}" alt="Metrics Graph"
+                        class="img-fluid rounded border border-secondary border-opacity-25 shadow-lg">
+                </div>
+                {% else %}
+                <div class="text-center py-5 text-muted opacity-50">
+                    <i class="fas fa-chart-area fs-1 mb-3"></i>
+                    <p>No visualization generated. Please initiate model training.</p>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+
+    </div>
+</div>
+
+{% endblock %}

templates/admins/adminbase.html

@@ -0,0 +1,126 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap"
+        rel="stylesheet">
+    <!-- Custom Zenith Flow CSS -->
+    <link rel="stylesheet" href="{% static 'css/style.css' %}">
+
+    <title>Admin Dashboard | FraudGuard</title>
+</head>
+
+<body class="video-enabled">
+
+    <!-- Video Background Container -->
+    <div class="video-bg-container">
+        <video autoplay muted loop playsinline class="video-bg" id="bgVideo">
+            <source src="{% static 'videos/home_bg.mp4' %}" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+        <div class="video-overlay"></div>
+    </div>
+
+    <!-- Sidebar -->
+    <div class="sidebar-modern">
+        <div class="sidebar-brand">
+            <div class="d-flex align-items-center">
+                <i class="fas fa-shield-alt text-primary fs-3 me-2"></i>
+                <div class="lh-1">
+                    <div class="ls-1 text-uppercase small text-muted fw-bold" style="font-size: 0.65rem;">System</div>
+                    <div class="fs-5 fw-bold text-dark">Fraud<span class="text-primary">Guard</span></div>
+                </div>
+            </div>
+        </div>
+
+        <ul class="sidebar-menu">
+            <li class="sidebar-item">
+                <a href="{% url 'adminhome' %}" class="{% if request.path == '/adminhome/' %}active{% endif %}">
+                    <i class="fas fa-chart-pie"></i> Dashboard
+                </a>
+            </li>
+            <li class="sidebar-item">
+                <a href="{% url 'RegisterUsersView' %}" class="{% if 'userDetails' in request.path %}active{% endif %}">
+                    <i class="fas fa-users"></i> Users Registry
+                </a>
+            </li>
+            <li class="sidebar-item">
+                <a href="{% url 'ViewDataset' %}" class="{% if 'ViewDataset' in request.path %}active{% endif %}">
+                    <i class="fas fa-database"></i> Training Data
+                </a>
+            </li>
+            <li class="sidebar-item">
+                <a href="{% url 'training' %}" class="{% if 'training' in request.path %}active{% endif %}">
+                    <i class="fas fa-sync-alt"></i> Model Retraining
+                </a>
+            </li>
+        </ul>
+
+        <div class="mt-auto p-4 border-top border-secondary border-opacity-10">
+            <a href="{% url 'index' %}" class="btn-modern btn-danger w-100 justify-content-center shadow-none"
+                style="background: var(--danger); border: none; color: white !important;">
+                <i class="fas fa-sign-out-alt me-2"></i> Sign Out
+            </a>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="main-content">
+
+        <!-- Top Header -->
+        <div
+            class="d-flex justify-content-between align-items-center mb-5 pb-3 border-bottom border-light border-opacity-10 bg-white shadow-sm p-4 rounded-3">
+            <div>
+                <h3 class="text-dark fw-bold m-0">Admin Console</h3>
+                <p class="text-muted small m-0">Real-time system monitoring</p>
+            </div>
+
+            <div class="d-flex align-items-center gap-3">
+                <div class="position-relative">
+                    <button class="btn btn-light rounded-circle shadow-sm text-muted hover-lift"
+                        style="width: 40px; height: 40px;">
+                        <i class="fas fa-bell"></i>
+                    </button>
+                    <span
+                        class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle">
+                        <span class="visually-hidden">New alerts</span>
+                    </span>
+                </div>
+
+
+                <div class="ps-3 border-start">
+                    <div class="d-flex align-items-center">
+                        <div class="text-end me-3 d-none d-md-block">
+                            <div class="text-dark fw-bold small">Administrator</div>
+                            <div class="text-success small" style="font-size: 0.7rem;">
+                                <i class="fas fa-circle me-1" style="font-size: 8px;"></i>Online
+                            </div>
+                        </div>
+                        <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center text-primary border border-primary border-opacity-25 shadow-sm hover-lift"
+                            style="width: 45px; height: 45px; font-size: 1.2rem;">
+                            <i class="fas fa-user-shield"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="fade-in">
+            {% block contents %}
+            {% endblock %}
+        </div>
+
+        <footer class="mt-5 pt-4 border-top border-secondary border-opacity-10 text-center text-muted small">
+            FraudGuard AI System &copy; 2025 | <i class="fas fa-shield-alt text-primary"></i> Protected
+        </footer>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+
+</html>

templates/admins/viewregisterusers.html

@@ -0,0 +1,102 @@
+{% extends 'admins/adminbase.html' %}
+{% load static %}
+{% block contents %}
+
+<div class="container-fluid fade-in">
+
+    <!-- Header -->
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <div>
+            <h4 class="text-dark fw-bold m-0">User Registry</h4>
+            <p class="text-muted small m-0">Manage system access and roles</p>
+        </div>
+        <span class="badge bg-white text-dark shadow-sm border px-3 py-2 rounded-pill">
+            <i class="fas fa-users me-2 text-primary"></i> {{data|length}} Total Users
+        </span>
+    </div>
+
+    <!-- Pro Table Card -->
+    <div class="glass-panel p-0 overflow-hidden shadow-sm">
+        <div class="table-responsive">
+            <table class="table-pro">
+                <thead>
+                    <tr>
+                        <th width="5%">#</th>
+                        <th width="25%">Identity</th>
+                        <th width="25%">Contact</th>
+                        <th width="15%">Region</th>
+                        <th width="10%">Status</th>
+                        <th width="20%" class="text-end pe-4">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for i in data %}
+                    <tr>
+                        <td class="text-muted ps-4">{{forloop.counter}}</td>
+                        <td>
+                            <div class="d-flex align-items-center">
+                                <div class="bg-gradient rounded-circle d-flex align-items-center justify-content-center me-3 text-white shadow-sm"
+                                    style="width: 40px; height: 40px; background: linear-gradient(135deg, #6366f1, #8b5cf6); font-weight: bold;">
+                                    {{i.name|slice:":1"|upper}}
+                                </div>
+                                <div>
+                                    <div class="text-dark fw-bold">{{i.name}}</div>
+                                    <div class="small text-muted">ID: {{i.loginid}}</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="text-dark small fw-bold">{{i.email}}</div>
+                            <div class="small text-muted">{{i.mobile}}</div>
+                        </td>
+                        <td>
+                            <span class="badge bg-light text-muted border rounded-pill px-2">
+                                <i class="fas fa-map-marker-alt me-1 text-danger"></i> {{i.locality}}
+                            </span>
+                        </td>
+                        <td>
+                            {% if i.status == 'waiting' %}
+                            <span
+                                class="badge bg-warning bg-opacity-10 text-warning border border-warning border-opacity-10 rounded-pill px-3 py-2">
+                                <i class="fas fa-clock me-1"></i> Pending
+                            </span>
+                            {% else %}
+                            <span
+                                class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-10 rounded-pill px-3 py-2">
+                                <i class="fas fa-check-circle me-1"></i> Active
+                            </span>
+                            {% endif %}
+                        </td>
+                        <td class="text-end pe-4">
+                            {% if i.status == 'waiting' %}
+                            <a href="{% url 'activate_users' %}?uid={{ i.id }}"
+                                class="btn btn-sm btn-primary rounded-pill px-3 shadow-sm hover-lift">
+                                Approved
+                            </a>
+                            {% else %}
+                            <div class="dropdown d-inline-block">
+                                <a href="{% url 'delete_users' %}?uid={{ i.id }}"
+                                    class="btn btn-sm btn-outline-danger rounded-pill px-3 hover-lift border-0 bg-danger bg-opacity-10">
+                                    <i class="fas fa-trash-alt me-1"></i> Remove
+                                </a>
+                            </div>
+                            {% endif %}
+                        </td>
+                    </tr>
+                    {% empty %}
+                    <tr>
+                        <td colspan="6" class="text-center py-5">
+                            <div class="py-5 opacity-50">
+                                <i class="fas fa-folder-open fs-1 text-muted mb-3"></i>
+                                <h6 class="text-muted">No users found in the registry.</h6>
+                            </div>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+{% endblock %}

templates/base.html

@@ -0,0 +1,82 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Bootstrap 5 -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <!-- Google Fonts -->
+    <link
+        href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Orbitron:wght@400;700;900&display=swap"
+        rel="stylesheet">
+    <!-- Custom 3D Cyber CSS -->
+    <link rel="stylesheet" href="{% static 'css/style.css' %}">
+
+    <title>Credit Card Fraud Detection | AI Console</title>
+</head>
+
+<body class="video-enabled">
+
+    <!-- Video Background Container -->
+    <div class="video-bg-container">
+        <video autoplay muted loop playsinline class="video-bg" id="bgVideo">
+            <source src="{% static 'videos/home_bg.mp4' %}" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+        <div class="video-overlay"></div>
+    </div>
+
+    <!-- Modern Glass Header -->
+    <nav class="header-modern">
+        <div class="d-flex align-items-center">
+            <i class="fas fa-shield-alt text-primary fs-3 me-3"></i>
+            <div>
+                <h4 class="m-0 fw-bold text-white" style="letter-spacing: -0.5px;">Fraud<span
+                        class="text-primary">Guard</span></h4>
+            </div>
+        </div>
+
+        <div class="d-none d-md-flex align-items-center">
+            <a class="nav-link-modern {% if request.path == '/' %}active{% endif %}" href="{% url 'index' %}">Hub</a>
+            <a class="nav-link-modern" href="{% url 'UserLogin' %}">User Portal</a>
+            <a class="nav-link-modern" href="{% url 'AdminLoginCheck' %}">Admin Console</a>
+            <a class="btn-modern ms-3" href="{% url 'UserRegisterForm' %}"
+                style="padding: 8px 20px; font-size: 0.8rem;">
+                Get Started
+            </a>
+        </div>
+    </nav>
+
+    <!-- Main Content Area -->
+    <div style="padding-top: 80px; position: relative; z-index: 2;">
+        {% block contents %}
+        {% endblock %}
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
+    <script>
+        window.addEventListener('scroll', function () {
+            const header = document.querySelector('.header-modern');
+            if (window.scrollY > 50) {
+                header.classList.add('scrolled');
+            } else {
+                header.classList.remove('scrolled');
+            }
+        });
+
+        document.addEventListener("DOMContentLoaded", function () {
+            var video = document.getElementById("bgVideo");
+            if (video) {
+                video.playbackRate = 0.6; // Lower video speed
+            }
+        });
+    </script>
+
+</body>
+
+</html>

templates/index.html

@@ -0,0 +1,85 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block contents %}
+
+
+
+<div class="hero-wrapper position-relative">
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-lg-10">
+                <span
+                    class="badge rounded-pill bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 px-3 py-2 mb-4 fade-in">
+                    <i class="fas fa-check-circle me-2"></i> Hybrid Deep Learning Architecture
+                </span>
+
+                <h1 class="hero-title fade-in" style="animation-delay: 0.1s;">
+                    Next-Gen Payment Security
+                </h1>
+
+                <p class="lead text-muted fade-in mb-5 mx-auto"
+                    style="animation-delay: 0.2s; max-width: 700px; font-weight: 600;">
+                    Protecting financial ecosystems with Graph Neural Networks and Real-Time Autoencoders. Experience
+                    instant fraud detection.
+                </p>
+
+                <div class="d-flex gap-3 justify-content-center fade-in" style="animation-delay: 0.3s;">
+                    <a href="{% url 'UserRegisterForm' %}" class="btn-modern">
+                        Create Account
+                    </a>
+                    <a href="{% url 'UserLogin' %}" class="btn-outline-modern bg-white">
+                        User Login
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="container pb-5 position-relative">
+    <div class="row g-4">
+        <!-- Feature 1 -->
+        <div class="col-md-4">
+            <div class="card-3d h-100 bg-white">
+                <div class="mb-4">
+                    <i class="fas fa-project-diagram text-primary fs-1"></i>
+                </div>
+                <h4 class="fw-bold mb-3 text-dark">Graph Neural Networks</h4>
+                <p class="text-muted small">
+                    Analyzes complex relationship matrices between transactions to identify hidden fraud rings that
+                    standard linear models miss.
+                </p>
+            </div>
+        </div>
+
+        <!-- Feature 2 -->
+        <div class="col-md-4">
+            <div class="card-3d h-100 bg-white">
+                <div class="mb-4">
+                    <i class="fas fa-bolt text-warning fs-1"></i>
+                </div>
+                <h4 class="fw-bold mb-3 text-dark">Real-Time latency</h4>
+                <p class="text-muted small">
+                    Engineered for millisecond-level inference, ensuring legitimate transactions are approved instantly
+                    while threats are blocked.
+                </p>
+            </div>
+        </div>
+
+        <!-- Feature 3 -->
+        <div class="col-md-4">
+            <div class="card-3d h-100 bg-white">
+                <div class="mb-4">
+                    <i class="fas fa-layer-group text-danger fs-1"></i>
+                </div>
+                <h4 class="fw-bold mb-3 text-dark">Ensemble Defense</h4>
+                <p class="text-muted small">
+                    A weighted voting system combining XGBoost, Random Forest, and Deep Learning provides a
+                    multi-layered security shield.
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}

templates/users/UserHomePage.html

@@ -0,0 +1,53 @@
+{% extends 'users/userbase.html' %}
+{% load static %}
+{% block contents %}
+
+<div class="fade-in">
+
+    <!-- Welcome -->
+    <div class="text-center mb-5">
+        <h2 class="hero-title" style="font-size: 3rem;">Welcome Back, Agent</h2>
+        <p class="text-muted lead">The secure portal is active. Select a tool to begin analysis.</p>
+        <div class="mt-4">
+            <a href="{% url 'prediction' %}" class="btn-modern px-5 py-3 fs-5">
+                <i class="fas fa-search me-2"></i> Launch Scanner
+            </a>
+        </div>
+    </div>
+
+    <!-- Widgets -->
+    <div class="row g-4 justify-content-center">
+        <div class="col-md-4 col-lg-3">
+            <div class="glass-panel p-4 text-center h-100">
+                <div class="mb-3">
+                    <i class="fas fa-database text-primary fs-1"></i>
+                </div>
+                <h5 class="text-white fw-bold">Training Data</h5>
+                <p class="text-muted small">Access the 284k+ transaction records used for model calibration.</p>
+            </div>
+        </div>
+
+        <div class="col-md-4 col-lg-3">
+            <div class="glass-panel p-4 text-center h-100">
+                <div class="mb-3">
+                    <i class="fas fa-network-wired text-secondary fs-1"></i>
+                </div>
+                <h5 class="text-white fw-bold">Neural Logic</h5>
+                <p class="text-muted small">Visualize the decision paths of the active Deep Learning models.</p>
+            </div>
+        </div>
+
+        <div class="col-md-4 col-lg-3">
+            <div class="glass-panel p-4 text-center h-100">
+                <div class="mb-3">
+                    <i class="fas fa-file-alt text-success fs-1"></i>
+                </div>
+                <h5 class="text-white fw-bold">Reports</h5>
+                <p class="text-muted small">Generate detailed PDFs of fraud analysis sessions.</p>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+{% endblock %}

templates/users/prediction.html

@@ -0,0 +1,144 @@
+{% extends 'users/userbase.html' %}
+{% load static %}
+{% block contents %}
+
+<div class="row justify-content-center fade-in">
+    <div class="col-xl-10">
+        <div class="glass-panel p-0 overflow-hidden">
+            <div class="row g-0">
+                <!-- Left: Form -->
+                <div class="col-lg-7 p-5" style="border-right: 1px solid var(--glass-border);">
+                    <div class="mb-4">
+                        <h3 class="fw-bold text-white mb-2">Transaction Analyzer</h3>
+                        <p class="text-muted small">Enter transaction metadata for real-time inference.</p>
+                    </div>
+
+                    <form method="POST" action="{% url 'prediction' %}">
+                        {% csrf_token %}
+
+                        <div class="row g-3 mb-3">
+                            <div class="col-6">
+                                <label class="input-label">Amount ($)</label>
+                                <input type="number" step="0.01" name="amount" class="input-modern" placeholder="0.00"
+                                    required>
+                            </div>
+                            <div class="col-6">
+                                <label class="input-label">Time (Sec)</label>
+                                <input type="number" name="transaction_time" class="input-modern"
+                                    placeholder="e.g. 4500" required>
+                            </div>
+                        </div>
+
+                        <div class="row g-3 mb-3">
+                            <div class="col-6">
+                                <label class="input-label">Category</label>
+                                <select name="merchant_type" class="input-modern">
+                                    <option>Shopping</option>
+                                    <option>Food</option>
+                                    <option>Fuel</option>
+                                    <option>Online</option>
+                                    <option>Travel</option>
+                                    <option>Bills</option>
+                                </select>
+                            </div>
+                            <div class="col-6">
+                                <label class="input-label">Location</label>
+                                <select name="location" class="input-modern">
+                                    <option>Delhi</option>
+                                    <option>Bangalore</option>
+                                    <option>Chennai</option>
+                                    <option>Hyderabad</option>
+                                    <option>Mumbai</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="row g-3 mb-5">
+                            <div class="col-6">
+                                <label class="input-label">Device</label>
+                                <select name="device_type" class="input-modern">
+                                    <option>Mobile</option>
+                                    <option>Web</option>
+                                    <option>POS</option>
+                                </select>
+                            </div>
+                            <div class="col-6">
+                                <label class="input-label">Customer ID</label>
+                                <input type="number" name="customer_id" class="input-modern" placeholder="ID" required>
+                            </div>
+                        </div>
+
+                        <button type="submit" class="btn-modern w-100 py-3">
+                            Run Analysis <i class="fas fa-arrow-right ms-2"></i>
+                        </button>
+                    </form>
+                </div>
+
+                <!-- Right: Result -->
+                <div
+                    class="col-lg-5 p-5 d-flex align-items-center justify-content-center bg-dark bg-opacity-25 text-center">
+                    <div class="w-100">
+                        {% if final_output %}
+                        <div class="fade-in">
+                            {% if "Fraud" in final_output %}
+                            <div class="result-circle res-danger">
+                                <i class="fas fa-exclamation-triangle"></i>
+                            </div>
+                            <h2 class="text-white fw-bold mb-2">FRAUD DETECTED</h2>
+                            <p
+                                class="text-danger bg-danger bg-opacity-10 p-2 rounded mb-4 d-inline-block border border-danger">
+                                High probability of fraudulent activity.
+                            </p>
+                            {% else %}
+                            <div class="result-circle res-success">
+                                <i class="fas fa-check"></i>
+                            </div>
+                            <h2 class="text-white fw-bold mb-2">LEGITIMATE</h2>
+                            <p
+                                class="text-success bg-success bg-opacity-10 p-2 rounded mb-4 d-inline-block border border-success">
+                                Transaction cleared security checks.
+                            </p>
+                            {% endif %}
+
+                            {% if predictions %}
+                            <div class="text-start bg-secondary bg-opacity-10 p-3 rounded">
+                                <div class="small fw-bold text-muted text-uppercase mb-2">Model Consensus</div>
+                                {% for model, result in predictions.items %}
+                                <div class="d-flex justify-content-between mb-1 small">
+                                    <span class="text-muted">{{ model }}</span>
+                                    <span
+                                        class="fw-bold {% if 'Fraud' in result %}text-danger{% else %}text-success{% endif %}">
+                                        {{ result }}
+                                    </span>
+                                </div>
+                                {% endfor %}
+                            </div>
+                            {% endif %}
+
+                            {% if fraud_score %}
+                            <div class="mt-3 text-muted small">
+                                Risk Score: <strong class="text-white">{{ fraud_score }}</strong>
+                            </div>
+                            {% endif %}
+                        </div>
+                        {% else %}
+                        <div class="text-muted opacity-25">
+                            <i class="fas fa-chart-radar" style="font-size: 5rem;"></i>
+                            <h4 class="fw-bold mt-4">Ready to Scan</h4>
+                            <p class="small">Enter details to initiate the inference engine.</p>
+                        </div>
+                        {% endif %}
+
+                        {% if error %}
+                        <div class="alert alert-danger mt-3 bg-danger bg-opacity-10 border-danger text-danger">
+                            {{ error }}
+                        </div>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}

templates/users/upload_data.html

@@ -0,0 +1,71 @@
+{% extends 'users/userbase.html' %}
+{% load static %}
+{% block contents %}
+
+<div class="row justify-content-center fade-in">
+    <div class="col-lg-8">
+        <div class="glass-panel p-5">
+
+            <div class="text-center mb-5">
+                <div class="bg-primary bg-opacity-10 d-inline-flex align-items-center justify-content-center rounded-circle mb-3"
+                    style="width: 70px; height: 70px;">
+                    <i class="fas fa-cloud-upload-alt text-primary fs-2"></i>
+                </div>
+                <h3 class="mw-bold text-white">Secure Dataset Upload</h3>
+                <p class="text-muted">Contribute anonymized transaction data for model refinement.</p>
+            </div>
+
+            {% if messages %}
+            <div class="mb-4">
+                {% for message in messages %}
+                <div class="alert alert-info bg-transparent border-info text-info p-3 text-center rounded-3">
+                    <i class="fas fa-info-circle me-2"></i> {{ message }}
+                </div>
+                {% endfor %}
+            </div>
+            {% endif %}
+
+            <form method="post" enctype="multipart/form-data">
+                {% csrf_token %}
+
+                <div class="mb-4">
+                    <label
+                        class="d-block text-center border-2 border-dashed border-secondary border-opacity-25 rounded-3 p-5 cursor-pointer input-modern h-auto"
+                        style="border-style: dashed !important; background: rgba(15, 23, 42, 0.4);">
+                        <i class="fas fa-file-csv fs-1 text-muted mb-3 d-block"></i>
+                        <span class="d-block fw-bold text-white mb-1">Click to select CSV File</span>
+                        <span class="d-block text-muted small">or drag and drop here</span>
+                        <input type="file" name="data_file" class="d-none"
+                            onchange="this.previousElementSibling.previousElementSibling.textContent = this.files[0].name; this.previousElementSibling.textContent = 'File Selected';">
+                    </label>
+                </div>
+
+                <div class="mb-4">
+                    <label class="input-label">Contributor ID</label>
+                    <input type="text" class="input-modern" name="user_id"
+                        value="{{ request.user.loginid|default:'System_User' }}" readonly>
+                </div>
+
+                <button type="submit" class="btn-modern w-100 py-3 fs-6">
+                    <i class="fas fa-upload me-2"></i> Upload & Process
+                </button>
+            </form>
+
+            <div class="mt-5 pt-4 border-top border-secondary border-opacity-10">
+                <h6 class="text-white fw-bold mb-3"><i class="fas fa-shield-alt text-success me-2"></i>Data Privacy
+                    Standards</h6>
+                <ul class="list-unstyled text-muted small spacing-y-2">
+                    <li class="mb-2"><i class="fas fa-check text-primary me-2"></i> Data is encrypted at rest using
+                        AES-256.</li>
+                    <li class="mb-2"><i class="fas fa-check text-primary me-2"></i> PII is automatically redacted upon
+                        ingestion.</li>
+                    <li><i class="fas fa-check text-primary me-2"></i> Only CSV formats adhering to the financial schema
+                        are accepted.</li>
+                </ul>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+{% endblock %}

templates/users/userbase.html

@@ -0,0 +1,54 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap"
+        rel="stylesheet">
+    <!-- Custom Zenith Flow CSS -->
+    <link rel="stylesheet" href="{% static 'css/style.css' %}">
+
+    <title>User Portal | FraudGuard</title>
+</head>
+
+<body>
+
+    <!-- Header -->
+    <nav class="header-modern">
+        <div class="d-flex align-items-center">
+            <i class="fas fa-fingerprint text-success fs-3 me-3"></i>
+            <div>
+                <h5 class="m-0 fw-bold text-white">Analyst<span class="text-success">Portal</span></h5>
+            </div>
+        </div>
+
+        <div class="d-none d-md-flex align-items-center">
+            <a class="nav-link-modern {% if request.path == '/userhome/' %}active{% endif %}"
+                href="{% url 'UserHome' %}">Dashboard</a>
+            <a class="nav-link-modern {% if 'prediction' in request.path %}active{% endif %}"
+                href="{% url 'prediction' %}">Scanner</a>
+
+            <div class="vr bg-secondary mx-3" style="opacity: 0.3; height: 20px;"></div>
+
+            <a href="{% url 'index' %}" class="btn-outline-modern"
+                style="padding: 6px 15px; font-size: 0.8rem; border: none; color: #ef4444;">
+                <i class="fas fa-power-off me-2"></i> Logout
+            </a>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <div class="main-content"
+        style="margin-left: 0; padding: 40px; padding-top: 100px; max-width: 1400px; margin: 0 auto;">
+        {% block contents %}
+        {% endblock %}
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+
+</html>

templates/users/viewData.html

@@ -0,0 +1,58 @@
+{% extends 'admins/adminbase.html' %}
+{% load static %}
+{% block contents %}
+
+<div class="container-fluid fade-in">
+  <div class="glass-panel p-4">
+
+    <div
+      class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom border-secondary border-opacity-25">
+      <h4 class="text-white fw-bold m-0"><i class="fas fa-database text-warning me-2"></i> Training Dataset</h4>
+      <span class="badge bg-warning bg-opacity-10 text-warning border border-warning border-opacity-25">Raw Data
+        View</span>
+    </div>
+
+    <div class="table-responsive" style="max-height: 70vh; overflow-y: auto;">
+      <!-- The dataset content (likely HTML table generated by pandas) goes here -->
+      <div class="dataset-wrapper">
+        {{data|safe}}
+      </div>
+    </div>
+
+    <style>
+      /* Overrides for generic Pandas HTML tables */
+      .dataset-wrapper table {
+        width: 100%;
+        border-collapse: collapse;
+        color: #e2e8f0;
+      }
+
+      .dataset-wrapper th {
+        background-color: rgba(255, 255, 255, 0.1);
+        padding: 12px;
+        text-align: left;
+        font-weight: 600;
+        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+        white-space: nowrap;
+      }
+
+      .dataset-wrapper td {
+        padding: 10px;
+        border: none;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        font-size: 0.9rem;
+      }
+
+      .dataset-wrapper tr:nth-child(even) {
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+
+      .dataset-wrapper tr:hover {
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+    </style>
+
+  </div>
+</div>
+
+{% endblock %}