Sync from GitHub Actions

Dockerfile

@@ -19,4 +19,4 @@ COPY . .
 
 EXPOSE 10000
 
-CMD ["python", "app.py"]
+CMD ["python", "-m", "api.app"]

api/admin.py

@@ -0,0 +1,14 @@
+from flask_admin import Admin
+from flask_admin.contrib.sqla import ModelView
+from flask import redirect, url_for, session
+from api.models import db, User
+
+class MyModelView(ModelView):
+    def is_accessible(self):
+        return session.get('user_id') == 1
+
+    def inaccessible_callback(self, name, **kwargs):
+        return redirect(url_for('auth.login'))
+
+admin = Admin(name="Admin", template_mode="bootstrap4", url="/admin")
+admin.add_view(MyModelView(User, db.session))

app.py → api/app.py

@@ -2,23 +2,39 @@ from Lawverse.pipeline.rag_pipeline import rag_components, create_chat_chian
 from flask import Flask, render_template, request, jsonify, session
 from Lawverse.utils.config import MEMORY_DIR
 from Lawverse.logger import logging
+from api.auth import auth_bp, login_required
+from api.models import db
 import json
 import glob
 import os
+from api.admin import admin
 
-app = Flask(__name__)
-app.secret_key = os.getenv("SECRET")
+app = Flask(__name__, template_folder="../templates")
+# app.secret_key = os.getenv("SECRET")
+app.secret_key = "lawverse-secret"
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+
+db.init_app(app)
+admin.init_app(app)
+app.register_blueprint(auth_bp)
 
 BASE_COMPONENTS = rag_components()
 logging.info("Lawverse RAG components ready.")
 
 active_chains = {}
 
+@app.route("/debug_session")
+def debug_session():
+    print("Session Data:", dict(session))
+    return "Check your console!"
+
 @app.route("/", methods=["GET"])
 def home():
     return render_template("index.html")
 
 @app.route("/chat", methods=["GET"])
+@login_required
 def chat():
     chat_id = session.get("chat_id")
     if not chat_id or chat_id not in active_chains:

api/auth.py

@@ -0,0 +1,68 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash, session
+from api.models import db, User
+from functools import wraps
+
+auth_bp = Blueprint("auth", __name__)
+
+@auth_bp.route("/signup", methods=["GET", "POST"])
+def signup():
+    if request.method == "POST":
+        first_name = request.form.get("first_name")
+        last_name = request.form.get("last_name")
+        email = request.form.get("email")
+        password = request.form.get("password")
+        confirm_password = request.form.get("confirm_password")
+        
+        if password != confirm_password:
+            flash("Passwords do not match!")
+            return redirect(url_for("auth.signup"))
+
+        if User.query.filter_by(email=email).first():
+            flash("Email already registered!")
+            return redirect(url_for("auth.signup"))
+        
+        user = User(first_name=first_name, last_name=last_name, email=email)
+        user.set_password(password=password)
+        db.session.add(user)
+        db.session.commit()
+        
+        session['user_id'] = user.id
+        session['user_name'] = user.first_name
+
+        flash("Login Successful!")
+        return render_template("signup.html")
+        
+    return render_template("signup.html")
+
+@auth_bp.route("/login", methods=["GET", "POST"])
+def login():
+    if request.method == "POST":
+        email = request.form.get("email")
+        password = request.form.get("password")
+        
+        user = User.query.filter_by(email=email).first()
+        if user and user.check_password(password):
+            session['user_id'] = user.id
+            session['user_name'] = user.first_name
+            flash("Login Successful!")
+            return render_template("login.html")
+        else:
+            flash("Invalid email or password.")
+            return redirect(url_for("auth.login"))  
+        
+    return render_template("login.html")
+
+@auth_bp.route("/logout")
+def logout():
+    session.pop('user_id', None)
+    session.pop('user_name', None)
+    return redirect(url_for("home"))
+
+
+def login_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if "user_id" not in session:
+            return redirect(url_for("auth.login"))
+        return f(*args, **kwargs)
+    return decorated_function

api/models.py

@@ -0,0 +1,17 @@
+from flask_sqlalchemy import SQLAlchemy
+from werkzeug.security import generate_password_hash, check_password_hash
+
+db = SQLAlchemy()
+
+class User(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    first_name = db.Column(db.String(150))
+    last_name = db.Column(db.String(150))
+    email = db.Column(db.String(150), unique=True, nullable=False)
+    password_hash = db.Column(db.String(256), nullable=False)
+    
+    def set_password(self, password):
+        self.password_hash = generate_password_hash(password)
+    
+    def check_password(self, password):
+        return check_password_hash(self.password_hash, password)

templates/index.html

@@ -120,46 +120,40 @@
   <body>
     <div id="vanta-background" class="fixed inset-0 -z-10"></div>
 
-    <nav class="glass-panel fixed top-0 left-0 right-0 z-50 py-4 px-6">
-      <div class="container mx-auto flex justify-between items-center">
-        <div class="flex items-center space-x-2">
-          <div
-            class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500"
-          ></div>
-          <h1
-            class="text-xl font-bold glow-text cursor-pointer"
-            onclick="window.scrollTo({ top: 0, behavior: 'smooth' })"
-          >
-            LAWVERSE
-          </h1>
-        </div>
-        <div class="hidden md:flex space-x-8">
-          <a
-            href="#"
-            class="text-gray-300 hover:text-cyan-300 transition-colors duration-300"
-            >Home</a
-          >
-          <a
-            onclick="window.location.href='/chat'"
-            class="text-gray-300 hover:text-cyan-300 transition-colors duration-300"
-            >Chat</a
-          >
-          <a
-            href="#about"
-            class="text-gray-300 hover:text-cyan-300 transition-colors duration-300"
-            >About</a
-          >
-          <a
-            href="#contact"
-            class="text-gray-300 hover:text-cyan-300 transition-colors duration-300"
-            >Contact</a
-          >
-        </div>
-        <button class="md:hidden text-gray-300">
-          <i data-feather="menu"></i>
+<nav class="glass-panel fixed top-0 left-0 right-0 z-50 py-4 px-6">
+  <div class="container mx-auto flex justify-between items-center">
+    <div class="flex items-center space-x-2">
+      <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500"></div>
+      <h1
+        class="text-xl font-bold glow-text cursor-pointer"
+        onclick="window.scrollTo({ top: 0, behavior: 'smooth' })"
+      >
+        LAWVERSE
+      </h1>
+    </div>
+
+    <div class="hidden md:flex space-x-8 items-center">
+      <a href="#" class="text-gray-300 hover:text-cyan-300 transition-colors duration-300">Home</a>
+      <a onclick="window.location.href='/chat'" class="text-gray-300 hover:text-cyan-300 transition-colors duration-300">Chat</a>
+      <a href="#about" class="text-gray-300 hover:text-cyan-300 transition-colors duration-300">About</a>
+      <a href="#contact" class="text-gray-300 hover:text-cyan-300 transition-colors duration-300">Contact</a>
+
+      {% if session.get('user_id') %}
+        <button
+          onclick="window.location.href='{{ url_for('auth.logout') }}'"
+          class="neon-button text-sm py-2 px-4 ml-4"
+        >
+          Logout ({{ session.get('user_name') }})
         </button>
-      </div>
-    </nav>
+      {% endif %}
+    </div>
+
+    <button class="md:hidden text-gray-300">
+      <i data-feather="menu"></i>
+    </button>
+  </div>
+</nav>
+
 
     <section class="min-h-screen flex items-center justify-center px-6 pt-20">
       <div class="container mx-auto text-center">

templates/login.html

@@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lawverse Nexus Portal</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Space+Grotesk:wght@300;400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: "#6366f1",
+              secondary: "#8b5cf6",
+              accent: "#cbd5e1",
+            },
+            fontFamily: {
+              orbitron: ["Orbitron", "sans-serif"],
+              space: ["Space Grotesk", "sans-serif"],
+            },
+            animation: {
+              "pulse-glow":
+                "pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+              float: "float 6s ease-in-out infinite",
+              "neon-flicker": "neon-flicker 1.5s infinite alternate",
+            },
+            keyframes: {
+              "pulse-glow": {
+                "0%, 100%": {
+                  boxShadow:
+                    "0 0 5px #6366f1, 0 0 10px #6366f1, 0 0 15px #6366f1",
+                },
+                "50%": {
+                  boxShadow:
+                    "0 0 10px #6366f1, 0 0 20px #6366f1, 0 0 30px #6366f1",
+                },
+              },
+              float: {
+                "0%, 100%": { transform: "translateY(0px)" },
+                "50%": { transform: "translateY(-10px)" },
+              },
+              "neon-flicker": {
+                "0%, 18%, 22%, 25%, 53%, 57%, 100%": {
+                  textShadow:
+                    "0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #6366f1, 0 0 80px #6366f1, 0 0 90px #6366f1, 0 0 100px #6366f1, 0 0 150px #6366f1",
+                  opacity: "1",
+                },
+                "20%, 24%, 55%": {
+                  textShadow: "none",
+                  opacity: "0.8",
+                },
+              },
+            },
+          },
+        },
+      };
+    </script>
+    <style>
+      body {
+        font-family: "Space Grotesk", sans-serif;
+        background: linear-gradient(
+          135deg,
+          #000000 0%,
+          #1e1b4b 50%,
+          #000000 100%
+        );
+        overflow-x: hidden;
+      }
+      .glass-panel {
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(99, 102, 241, 0.3);
+        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+      }
+      .neon-input {
+        background: rgba(0, 0, 0, 0.3);
+        border: 1px solid rgba(99, 102, 241, 0.5);
+        transition: all 0.3s ease;
+      }
+      .neon-input:focus {
+        border-color: #6366f1;
+        box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
+      }
+      .floating-label {
+        transition: all 0.3s ease;
+        pointer-events: none;
+      }
+      .neon-input:focus + .floating-label,
+      .neon-input:not(:placeholder-shown) + .floating-label {
+        top: 0.6rem;
+        transform: translateY(-50%) scale(0.9);
+        color: #6366f1;
+        text-shadow: 0 0 5px currentColor;
+      }
+      .neon-button {
+        background: linear-gradient(45deg, #6366f1, #8b5cf6);
+        transition: all 0.3s ease;
+      }
+      .neon-button:hover {
+        box-shadow: 0 0 15px rgba(99, 102, 241, 0.7);
+        transform: translateY(-2px);
+      }
+      .portal-transition {
+        transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+      .legal-icon {
+        filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
+      }
+    </style>
+  </head>
+  <body class="min-h-screen flex items-center justify-center">
+    <div
+      id="portal"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 opacity-0 pointer-events-none transition-opacity duration-700"
+      style="display: none;"
+    >
+      <div class="text-center">
+        <div
+          class="w-32 h-32 mx-auto mb-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center animate-pulse"
+        >
+          <i data-feather="check" class="w-16 h-16 text-white"></i>
+        </div>
+        <h2 class="text-3xl font-orbitron font-bold text-white mb-4">
+          Access Granted
+        </h2>
+        <p class="text-accent font-space text-lg">
+          Entering Lawverse AI Portal...
+        </p>
+      </div>
+    </div>
+    <div id="vanta-bg" class="fixed inset-0 z-0"></div> 
+    <a href="{{ url_for('home') }}" class="fixed top-6 left-6 z-50 group">
+      <div
+        class="flex items-center space-x-2 text-accent hover:text-primary transition-all duration-300"
+      >
+        <i
+          data-feather="arrow-left"
+          class="w-5 h-5 group-hover:scale-110 transition-transform"
+        ></i>
+        <span class="font-space font-medium">Return to Home</span>
+      </div>
+    </a>
+{% with messages = get_flashed_messages() %} 
+      {% if messages %}
+        <div id="flash-message" class="fixed top-6 right-6 z-50 p-3 rounded-lg text-sm font-space transition-opacity duration-700 
+        {% if 'successful' in messages[0]|lower %}bg-green-500/20 text-green-300 border border-green-500
+        {% else %}bg-red-500/20 text-red-300 border border-red-500{% endif %}">
+          {% for message in messages %}
+            {{ message }}
+          {% endfor %}
+        </div>
+
+        <script>
+          
+          document.addEventListener("DOMContentLoaded", () => {
+            const flashMsg = document.getElementById("flash-message");
+
+            {% if 'successful' in messages[0]|lower %}
+              if (flashMsg) flashMsg.style.display = 'none';
+              const portal = document.getElementById("portal");
+              if (portal) {
+                portal.style.display = "flex";
+                portal.classList.remove("opacity-0", "pointer-events-none");
+                portal.classList.add("opacity-100");
+              }
+              
+              setTimeout(() => {
+                window.location.href = "{{ url_for('chat') }}";
+              }, 2000); 
+
+            {% else %}
+              setTimeout(() => {
+                if (flashMsg) flashMsg.style.opacity = "0";
+              }, 1500);
+            {% endif %}
+          });
+        </script>
+      {% endif %} 
+    {% endwith %}
+
+    <div  
+      class="relative z-10 w-full max-w-md mx-auto px-4 flex flex-col justify-center items-center min-h-screen"
+    > 
+      <div class="text-center mb-12 animate-float">
+        <div class="inline-flex items-center space-x-3">
+          <div
+            class="w-12 h-12 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center"
+          >
+            <i data-feather="scale" class="w-6 h-6 text-white"></i>
+          </div>
+          <h1
+            class="text-4xl md:text-5xl font-orbitron font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary via-accent to-secondary"
+          >
+            LAWVERSE
+          </h1>
+        </div>
+        <p class="mt-4 text-accent font-space text-lg">
+          AI-Powered Legal Knowledge Assistant
+        </p>
+      </div>
+
+      <div
+        class="glass-panel rounded-2xl p-8 transform transition-all duration-500 hover:scale-102 w-full"
+      >
+        <div class="text-center mb-8">
+          <div
+            class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center"
+          >
+            <i data-feather="user-check" class="w-8 h-8 text-white"></i>
+          </div>
+          <h2 class="text-2xl font-orbitron font-semibold text-white mb-2">
+            Welcome back to Lawverse
+          </h2>
+          <p class="text-accent font-space">Continue your legal journey</p>
+        </div>
+
+        <form
+          class="space-y-6"
+          method="POST"
+          action="{{ url_for('auth.login') }}"
+        >
+          <div class="relative">
+            <input
+              name="email"
+              type="email"
+              placeholder=" "
+              class="neon-input w-full px-4 py-3 rounded-lg text-white font-space placeholder-transparent"
+              required
+            />
+            <label
+              class="floating-label absolute left-4 top-3 text-accent font-space"
+              >Email</label
+            >
+            <i
+              data-feather="mail"
+              class="absolute right-4 top-3 text-accent w-5 h-5"
+            ></i>
+          </div>
+          <div class="relative">
+            <input
+              name="password"
+              type="password"
+              placeholder=" "
+              class="neon-input w-full px-4 py-3 rounded-lg text-white font-space placeholder-transparent"
+              required
+            />
+            <label
+              class="floating-label absolute left-4 top-3 text-accent font-space"
+              >Password</label
+            >
+            <i
+              data-feather="lock"
+              class="absolute right-4 top-3 text-accent w-5 h-5"
+            ></i>
+          </div>
+          <div class="flex items-center justify-between">
+            <label
+              class="flex items-center space-x-2 text-accent font-space text-sm"
+            >
+              <input
+                type="checkbox"
+                class="rounded border-accent bg-transparent"
+              />
+              <span>Remember me</span>
+            </label>
+            <a
+              href="#"
+              class="text-primary hover:text-secondary font-space text-sm transition-colors"
+              >Forgot password?</a
+            >
+          </div>
+          <button
+            type="submit"
+            class="neon-button w-full py-3 rounded-lg text-white font-orbitron font-semibold animate-pulse-glow"
+          >
+            Login to Lawverse
+          </button>
+        </form>
+
+        <p class="text-accent font-space text-sm text-center mt-4">
+          Don't have an account?
+          <a
+            href="/signup"
+            class="text-primary hover:text-secondary font-medium transition-colors"
+            >Create Account</a
+          >
+        </p>
+      </div>
+    </div>
+    <script>
+      VANTA.NET({
+        el: "#vanta-bg",
+        mouseControls: true,
+        touchControls: true,
+        gyroControls: false,
+        minHeight: 200.0,
+        minWidth: 200.0,
+        scale: 1.0,
+        scaleMobile: 1.0,
+        color: 0x6366f1,
+        backgroundColor: 0x000000,
+        points: 12.0,
+        maxDistance: 20.0,
+        spacing: 15.0,
+      });
+      document.addEventListener("DOMContentLoaded", () => {
+        feather.replace();
+        const inputs = document.querySelectorAll(".neon-input");
+        inputs.forEach((input) => {
+          input.addEventListener("focus", () => {
+            input.parentElement.classList.add("scale-105");
+          });
+          input.addEventListener("blur", () => {
+            input.parentElement.classList.remove("scale-105");
+          });
+        });
+      });
+    </script>
+  </body>
+</html>

templates/signup.html

@@ -0,0 +1,345 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lawverse Nexus Portal</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Space+Grotesk:wght@300;400;500;600&display=swap"
+      rel="stylesheet"
+    />
+
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: "#6366f1",
+              secondary: "#8b5cf6",
+              accent: "#cbd5e1",
+            },
+            fontFamily: {
+              orbitron: ["Orbitron", "sans-serif"],
+              space: ["Space Grotesk", "sans-serif"],
+            },
+            animation: {
+              "pulse-glow":
+                "pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+              float: "float 6s ease-in-out infinite",
+            },
+            keyframes: {
+              "pulse-glow": {
+                "0%, 100%": {
+                  boxShadow:
+                    "0 0 5px #6366f1, 0 0 10px #6366f1, 0 0 15px #6366f1",
+                },
+                "50%": {
+                  boxShadow:
+                    "0 0 10px #6366f1, 0 0 20px #6366f1, 0 0 30px #6366f1",
+                },
+              },
+              float: {
+                "0%, 100%": { transform: "translateY(0px)" },
+                "50%": { transform: "translateY(-10px)" },
+              },
+            },
+          },
+        },
+      };
+    </script>
+
+    <style>
+      body {
+        font-family: "Space Grotesk", sans-serif;
+        background: linear-gradient(
+          135deg,
+          #000000 0%,
+          #1e1b4b 50%,
+          #000000 100%
+        );
+        overflow-x: hidden;
+      }
+
+      .glass-panel {
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(99, 102, 241, 0.3);
+        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+      }
+
+      .neon-input {
+        background: rgba(0, 0, 0, 0.3);
+        border: 1px solid rgba(99, 102, 241, 0.5);
+        transition: all 0.3s ease;
+        padding: 1rem 1rem 0.5rem 1rem;
+        font-size: 1.05rem;
+      }
+
+      .neon-input:focus {
+        border-color: #6366f1;
+        box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
+      }
+
+      .floating-label {
+        transition: all 0.3s ease;
+        pointer-events: none;
+        top: 70%;
+        transform: translateY(-50%);
+      }
+
+      .neon-input:focus + .floating-label,
+      .neon-input:not(:placeholder-shown) + .floating-label {
+        top: 0.6rem;
+        transform: translateY(-50%) scale(0.9);
+        color: #6366f1;
+        text-shadow: 0 0 5px currentColor;
+      }
+
+      .neon-button {
+        background: linear-gradient(45deg, #6366f1, #8b5cf6);
+        transition: all 0.3s ease;
+      }
+
+      .neon-button:hover {
+        box-shadow: 0 0 15px rgba(99, 102, 241, 0.7);
+        transform: translateY(-2px);
+      }
+    </style>
+  </head>
+
+  <body class="min-h-screen flex items-center justify-center">
+    <div
+      id="portal"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 opacity-0 pointer-events-none transition-opacity duration-700"
+      style="display: none;"
+    >
+      <div class="text-center">
+        <div
+          class="w-32 h-32 mx-auto mb-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center animate-pulse"
+        >
+          <i data-feather="check" class="w-16 h-16 text-white"></i>
+        </div>
+        <h2 class="text-3xl font-orbitron font-bold text-white mb-4">
+          Access Granted
+        </h2>
+        <p class="text-accent font-space text-lg">
+          Entering Lawverse AI Portal...
+        </p>
+      </div>
+    </div>
+    <div id="vanta-bg" class="fixed inset-0 z-0"></div> 
+    <a href="{{ url_for('home') }}" class="fixed top-6 left-6 z-50 group">
+      <div
+        class="flex items-center space-x-2 text-accent hover:text-primary transition-all duration-300"
+      >
+        <i
+          data-feather="arrow-left"
+          class="w-5 h-5 group-hover:scale-110 transition-transform"
+        ></i>
+        <span class="font-space font-medium">Return to Home</span>
+      </div>
+    </a>
+{% with messages = get_flashed_messages() %} 
+      {% if messages %}
+        <div id="flash-message" class="fixed top-6 right-6 z-50 p-3 rounded-lg text-sm font-space transition-opacity duration-700 
+        {% if 'successful' in messages[0]|lower %}bg-green-500/20 text-green-300 border border-green-500
+        {% else %}bg-red-500/20 text-red-300 border border-red-500{% endif %}">
+          {% for message in messages %}
+            {{ message }}
+          {% endfor %}
+        </div>
+
+        <script>
+          
+          document.addEventListener("DOMContentLoaded", () => {
+            const flashMsg = document.getElementById("flash-message");
+
+            {% if 'successful' in messages[0]|lower %}
+              if (flashMsg) flashMsg.style.display = 'none';
+              const portal = document.getElementById("portal");
+              if (portal) {
+                portal.style.display = "flex";
+                portal.classList.remove("opacity-0", "pointer-events-none");
+                portal.classList.add("opacity-100");
+              }
+              
+              setTimeout(() => {
+                window.location.href = "{{ url_for('chat') }}";
+              }, 2000); 
+
+            {% else %}
+              setTimeout(() => {
+                if (flashMsg) flashMsg.style.opacity = "0";
+              }, 1500);
+            {% endif %}
+          });
+        </script>
+      {% endif %} 
+    {% endwith %}
+
+
+
+
+    <div class="relative z-10 w-full max-w-6xl mx-auto px-4">
+      <div class="text-center mb-12 animate-float">
+        <div class="inline-flex items-center space-x-3">
+          <div
+            class="w-12 h-12 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center"
+          >
+            <i data-feather="scale" class="w-6 h-6 text-white"></i>
+          </div>
+          <h1
+            class="text-4xl md:text-5xl font-orbitron font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary via-accent to-secondary"
+          >
+            LAWVERSE
+          </h1>
+        </div>
+        <p class="mt-4 text-accent font-space text-lg">
+          AI-Powered Legal Knowledge Assistant
+        </p>
+      </div>
+
+      <div
+        class="glass-panel rounded-2xl p-8 transform transition-all duration-500 hover:scale-105"
+      >
+        <div class="text-center mb-8">
+          <div
+            class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-secondary to-primary flex items-center justify-center"
+          >
+            <i data-feather="user-plus" class="w-8 h-8 text-white"></i>
+          </div>
+          <h2 class="text-2xl font-orbitron font-semibold text-white mb-2">
+            Create your Lawverse Account
+          </h2>
+          <p class="text-accent font-space">
+            Join the future of legal assistance
+          </p>
+        </div>
+
+        <form
+          class="space-y-6"
+          method="POST"
+          action="{{ url_for('auth.signup') }}"
+        >
+          <div class="grid grid-cols-2 gap-4">
+            <div class="relative">
+              <input
+                name="first_name"
+                type="text"
+                placeholder=" "
+                class="neon-input w-full px-4 py-3 rounded-lg text-white font-space placeholder-transparent"
+                required
+              />
+              <label
+                class="floating-label absolute left-4 top-5 text-accent font-space"
+                >First Name</label
+              >
+            </div>
+            <div class="relative">
+              <input
+                name="last_name"
+                type="text"
+                placeholder=" "
+                class="neon-input w-full px-4 py-3 rounded-lg text-white font-space placeholder-transparent"
+                required
+              />
+              <label
+                class="floating-label absolute left-4 top-5 text-accent font-space"
+                >Last Name</label
+              >
+            </div>
+          </div>
+
+          <div class="relative">
+            <input
+              name="email"
+              type="email"
+              placeholder=" "
+              class="neon-input w-full px-4 py-3 rounded-lg text-white font-space placeholder-transparent"
+              required
+            />
+            <label
+              class="floating-label absolute left-4 top-5 text-accent font-space"
+              >Email</label
+            >
+            <i
+              data-feather="mail"
+              class="absolute right-4 top-3 text-accent w-5 h-5"
+            ></i>
+          </div>
+
+          <div class="relative">
+            <input
+              name="password"
+              type="password"
+              placeholder=" "
+              class="neon-input w-full px-4 py-3 rounded-lg text-white font-space placeholder-transparent"
+              required
+            />
+            <label
+              class="floating-label absolute left-4 top-5 text-accent font-space"
+              >Password</label
+            >
+            <i
+              data-feather="lock"
+              class="absolute right-4 top-3 text-accent w-5 h-5"
+            ></i>
+          </div>
+
+          <div class="relative">
+            <input
+              name="confirm_password"
+              type="password"
+              placeholder=" "
+              class="neon-input w-full px-4 py-3 rounded-lg text-white font-space placeholder-transparent"
+              required
+            />
+            <label
+              class="floating-label absolute left-4 top-5 text-accent font-space"
+              >Confirm Password</label
+            >
+            <i
+              data-feather="shield"
+              class="absolute right-4 top-3 text-accent w-5 h-5"
+            ></i>
+          </div>
+
+          <button
+            type="submit"
+            class="neon-button w-full py-3 rounded-lg text-white font-orbitron font-semibold animate-pulse-glow"
+          >
+            Create Account
+          </button>
+        </form>
+      </div>
+    </div>
+    
+    <script>
+      VANTA.NET({
+        el: "#vanta-bg",
+        mouseControls: true,
+        touchControls: true,
+        gyroControls: false,
+        color: 0x6366f1,
+        backgroundColor: 0x000000,
+        points: 12.0,
+        maxDistance: 20.0,
+        spacing: 15.0,
+      });
+
+      document.addEventListener("DOMContentLoaded", () => {
+        feather.replace();
+        document.querySelector(".neon-button").addEventListener("click", () => {
+          const portal = document.getElementById("portal");
+          portal.classList.remove("opacity-0", "pointer-events-none");
+          portal.classList.add("opacity-100");
+          setTimeout(() => (window.location.href = "/chat"), 2000);
+        });
+      });
+    </script>
+  </body>
+</html>