Fresh start with LFS

.gitattributes

@@ -0,0 +1,3 @@
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.csv filter=lfs diff=lfs merge=lfs -text
+dataset/** filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,25 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY app.py .
+COPY mnist_cnn_model.h5 .
+COPY website/ ./website/
+
+# Expose port
+EXPOSE 5000
+
+# Run the Flask app
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,2 @@
+# DigitVision
+Handwritten Digit Recognition with CNN

app.py

@@ -0,0 +1,374 @@
+from flask import Flask, render_template, request, jsonify
+from flask_cors import CORS
+import numpy as np
+import cv2
+import base64
+import io
+from PIL import Image
+import os
+
+# Suppress TensorFlow warnings
+os.environ['TF_CPP_MIN_LOG_LEVEL'] = '3'
+os.environ['TF_USE_LEGACY_KERAS'] = '1'  # Force TensorFlow to use legacy Keras
+import warnings
+warnings.filterwarnings('ignore')
+
+import tensorflow as tf
+# Use TensorFlow's built-in Keras instead of standalone Keras
+from tensorflow import keras
+load_model = keras.models.load_model
+
+app = Flask(__name__, template_folder='website', static_folder='website')
+CORS(app)
+
+# Rebuild model architecture from scratch and load weights
+def load_legacy_model(model_path):
+    """Rebuild model architecture and load weights from H5 file"""
+    try:
+        # Rebuild the exact model architecture
+        model = keras.Sequential([
+            keras.layers.Input(shape=(28, 28, 1)),
+            keras.layers.Conv2D(32, kernel_size=(3, 3), activation='relu'),
+            keras.layers.Conv2D(32, kernel_size=(3, 3), activation='relu'),
+            keras.layers.MaxPooling2D(pool_size=(2, 2)),
+            keras.layers.Dropout(0.25),
+            keras.layers.Conv2D(64, kernel_size=(3, 3), activation='relu'),
+            keras.layers.Conv2D(64, kernel_size=(3, 3), activation='relu'),
+            keras.layers.MaxPooling2D(pool_size=(1, 1)),
+            keras.layers.Dropout(0.25),
+            keras.layers.Flatten(),
+            keras.layers.Dense(256, activation='relu'),
+            keras.layers.Dropout(0.5),
+            keras.layers.Dense(10, activation='softmax')
+        ])
+        
+        # Compile model
+        model.compile(
+            optimizer='adam',
+            loss='categorical_crossentropy',
+            metrics=['accuracy']
+        )
+        
+        # Load weights from H5 file
+        model.load_weights(model_path)
+        return model
+    except Exception as e:
+        print(f"Failed to rebuild and load model: {e}")
+        return None
+
+# Load the trained model
+base_dir = os.path.dirname(__file__)
+candidate_names = [
+    'mnist_cnn_model.h5',      # prefer .h5 if the user re-saved the model
+    'mnist_cnn_model.keras'    # fallback to .keras
+]
+
+# Pick the first existing model path
+MODEL_PATH = None
+for name in candidate_names:
+    path = os.path.join(base_dir, name)
+    if os.path.isfile(path):
+        MODEL_PATH = path
+        break
+if MODEL_PATH is None:
+    # Default to .h5 path even if missing, to keep logs consistent
+    MODEL_PATH = os.path.join(base_dir, candidate_names[0])
+
+print(f"Looking for model. Resolved path: {MODEL_PATH}")
+print(f"Model file exists: {os.path.isfile(MODEL_PATH)}")
+
+try:
+    model = load_legacy_model(MODEL_PATH)
+    if model:
+        print(f"✓ Model loaded successfully from {MODEL_PATH}")
+    else:
+        print("✗ Failed to load model with compatibility loader")
+        model = None
+except Exception as e:
+    print(f"✗ Error loading model from {MODEL_PATH}")
+    print(f"✗ Error details: {type(e).__name__}: {e}")
+    import traceback
+    traceback.print_exc()
+    model = None
+
+def preprocess_image(image):
+    """
+    Preprocess image for MNIST model prediction
+    - Handles both uploaded images and canvas drawings
+    - Converts to grayscale
+    - Resizes to 28x28
+    - Normalizes to 0-1
+    - Ensures white digit on black background (MNIST format)
+    """
+    try:
+        img = image.copy()
+        print(f"DEBUG PREPROCESS: Input shape={img.shape}, dtype={img.dtype}")
+
+        # Handle RGBA (canvas drawings come as RGBA with transparent background)
+        if len(img.shape) == 3 and img.shape[2] == 4:
+            # Extract alpha channel to find drawn areas
+            alpha = img[:, :, 3]
+            # Convert RGB channels to grayscale
+            rgb = img[:, :, :3]
+            gray = cv2.cvtColor(rgb, cv2.COLOR_RGB2GRAY)
+            
+            # Create mask: where alpha > 0 (drawn) AND pixel is dark (black drawing)
+            # Canvas has BLACK digit on TRANSPARENT background
+            drawn_mask = alpha > 0
+            dark_mask = gray < 128
+            digit_mask = drawn_mask & dark_mask
+            
+            # Create output: white (255) where digit is drawn, black (0) elsewhere
+            img = np.zeros_like(gray)
+            img[digit_mask] = 255
+            
+            print(f"DEBUG PREPROCESS: Drawn pixels found: {np.sum(digit_mask)}")
+        else:
+            # If RGB -> grayscale
+            if len(img.shape) == 3:
+                img = cv2.cvtColor(img, cv2.COLOR_RGB2GRAY)
+            
+            # For uploaded images: determine if we need to invert
+            # Check if the digit is darker or lighter than background
+            # Apply Otsu's thresholding to separate foreground/background
+            _, binary = cv2.threshold(img, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)
+            
+            # Count white vs black pixels
+            white_pixels = np.sum(binary == 255)
+            black_pixels = np.sum(binary == 0)
+            
+            # If more white pixels, the background is white (digit is black) - no inversion needed
+            # If more black pixels, the background is black (digit is white) - already good
+            # But we want WHITE digit on BLACK background for MNIST
+            if white_pixels > black_pixels:
+                # Background is white, digit is black - need to invert
+                img = 255 - img
+            
+            print(f"DEBUG PREPROCESS: white_pixels={white_pixels}, black_pixels={black_pixels}, inverted={white_pixels > black_pixels}")
+
+        print(f"DEBUG PREPROCESS: After grayscale - min={img.min()}, max={img.max()}, mean={img.mean()}")
+        
+        # Apply threshold to get clean binary image with automatic threshold
+        _, thresh = cv2.threshold(img, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)
+        
+        print(f"DEBUG PREPROCESS: After threshold - min={thresh.min()}, max={thresh.max()}, mean={thresh.mean()}")
+
+        # Apply morphological closing to remove small noise
+        kernel = np.ones((3,3), np.uint8)
+        thresh = cv2.morphologyEx(thresh, cv2.MORPH_CLOSE, kernel)
+        
+        # Find the bounding box of the digit (white pixels)
+        coords = cv2.findNonZero(thresh)
+        if coords is not None and len(coords) > 10:
+            x, y, w, h = cv2.boundingRect(coords)
+            digit = thresh[y:y+h, x:x+w]
+            print(f"DEBUG PREPROCESS: Found digit at ({x},{y}) size {w}x{h}")
+            
+            # If the bounding box is too large (>80% of image), the digit is likely small and lost
+            # Try to find a tighter bounding box by using a higher threshold
+            img_h, img_w = thresh.shape
+            if w > img_w * 0.8 or h > img_h * 0.8:
+                print(f"DEBUG PREPROCESS: Bounding box too large ({w}x{h} vs {img_w}x{img_h}), trying adaptive threshold")
+                # Use adaptive threshold to better separate small digit from background
+                adaptive_thresh = cv2.adaptiveThreshold(img, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, cv2.THRESH_BINARY, 11, 2)
+                coords2 = cv2.findNonZero(adaptive_thresh)
+                if coords2 is not None and len(coords2) > 10:
+                    x, y, w, h = cv2.boundingRect(coords2)
+                    digit = adaptive_thresh[y:y+h, x:x+w]
+                    print(f"DEBUG PREPROCESS: Found tighter bounding box at ({x},{y}) size {w}x{h}")
+            
+            # Apply morphological operations to thicken thin strokes
+            kernel = np.ones((2,2), np.uint8)
+            digit = cv2.dilate(digit, kernel, iterations=1)
+            
+            # Enhance contrast - stretch to full range [0, 255]
+            digit_min = digit.min()
+            digit_max = digit.max()
+            if digit_max > digit_min:
+                digit = ((digit - digit_min) / (digit_max - digit_min) * 255).astype(np.uint8)
+                print(f"DEBUG PREPROCESS: Enhanced contrast - old range [{digit_min},{digit_max}], new range [0,255]")
+            else:
+                print(f"DEBUG PREPROCESS: WARNING - No contrast to enhance (all pixels same value: {digit_min})")
+        else:
+            print("DEBUG PREPROCESS: No digit found in image")
+            # Return empty canvas if no digit found
+            canvas = np.zeros((28, 28, 1), dtype=np.float32)
+            return canvas
+
+        # Resize the cropped digit to fit in 20x20 box (with aspect ratio preserved)
+        h_d, w_d = digit.shape
+        if h_d > w_d:
+            new_h = 20
+            new_w = max(1, int(round((w_d * 20) / h_d)))
+        else:
+            new_w = 20
+            new_h = max(1, int(round((h_d * 20) / w_d)))
+        
+        digit_resized = cv2.resize(digit, (new_w, new_h), interpolation=cv2.INTER_AREA)
+
+        # Center the digit in a 28x28 black canvas
+        canvas = np.zeros((28, 28), dtype=np.uint8)
+        x_offset = (28 - new_w) // 2
+        y_offset = (28 - new_h) // 2
+        canvas[y_offset:y_offset+new_h, x_offset:x_offset+new_w] = digit_resized
+
+        # Normalize to [0, 1]
+        canvas = canvas.astype("float32") / 255.0
+
+        # Reshape to (28, 28, 1)
+        canvas = canvas.reshape(28, 28, 1)
+
+        # Save debug image (for visual check)
+        cv2.imwrite("debug_preprocessed.png", (canvas * 255).astype(np.uint8))
+        print(f"DEBUG PREPROCESS: Final - min={float(canvas.min()):.3f}, max={float(canvas.max()):.3f}, mean={float(canvas.mean()):.3f}")
+
+        return canvas
+
+    except Exception as e:
+        print(f"Error in preprocess_image: {e}")
+        import traceback
+        traceback.print_exc()
+        canvas = np.zeros((28, 28, 1), dtype=np.float32)
+        return canvas
+@app.route('/')
+def index():
+    """Serve the layout page"""
+    return render_template('layout.html')
+
+@app.route('/layout.html')
+def layout():
+    """Serve the layout page"""
+    return render_template('layout.html')
+
+@app.route('/sign.html')
+def sign():
+    """Serve the sign in/up page"""
+    return render_template('sign.html')
+
+@app.route('/home.html')
+def home():
+    """Serve the home page"""
+    return render_template('home.html')
+
+@app.route('/predict_upload', methods=['POST'])
+def predict_upload():
+    """
+    Handle image upload prediction
+    Expects: multipart/form-data with 'image' file
+    Returns: JSON with prediction
+    """
+    if model is None:
+        return jsonify({'error': 'Model not loaded'}), 500
+    
+    try:
+        # Get the uploaded file
+        if 'image' not in request.files:
+            return jsonify({'error': 'No image provided'}), 400
+        
+        file = request.files['image']
+        if file.filename == '':
+            return jsonify({'error': 'No file selected'}), 400
+        
+        # Read image
+        image_data = file.read()
+        image = Image.open(io.BytesIO(image_data))
+        image_array = np.array(image)
+        
+        # Preprocess
+        processed_image = preprocess_image(image_array)
+        
+        # Reshape for model (add batch dimension)
+        input_data = processed_image.reshape(1, 28, 28, 1)
+        
+        # Predict
+        prediction = model.predict(input_data, verbose=0)
+        print("DEBUG INPUT SHAPE:", input_data.shape)
+        print("DEBUG INPUT STATS: min=", float(input_data.min()), "max=", float(input_data.max()), "mean=", float(input_data.mean()))
+        print("DEBUG MODEL OUTPUT:", prediction)
+
+        predicted_digit = np.argmax(prediction[0])
+        confidence = float(np.max(prediction[0])) * 100
+        
+        return jsonify({
+            'prediction': int(predicted_digit),
+            'confidence': round(confidence, 2)
+        })
+    
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/predict_canvas', methods=['POST'])
+def predict_canvas():
+    """
+    Handle canvas drawing prediction
+    Expects: JSON with 'image' as base64 data URL
+    Returns: JSON with prediction
+    """
+    if model is None:
+        return jsonify({'error': 'Model not loaded'}), 500
+    
+    try:
+        data = request.get_json()
+        if 'image' not in data:
+            return jsonify({'error': 'No image data provided'}), 400
+        
+        # Decode base64 image
+        image_data = data['image']
+        if ',' in image_data:
+            image_data = image_data.split(',')[1]
+        
+        # Decode and convert to numpy array
+        image_bytes = base64.b64decode(image_data)
+        image = Image.open(io.BytesIO(image_bytes))
+        image_array = np.array(image)
+        
+        print(f"DEBUG CANVAS: Original shape={image_array.shape}, dtype={image_array.dtype}")
+        print(f"DEBUG CANVAS: Image stats - min={image_array.min()}, max={image_array.max()}, mean={image_array.mean()}")
+        
+        # DON'T convert RGBA to RGB - let preprocess_image handle it
+        # The preprocessing function needs the alpha channel to detect drawn areas
+        
+        # Preprocess
+        processed_image = preprocess_image(image_array)
+        
+        print(f"DEBUG CANVAS: After preprocess - shape={processed_image.shape}")
+        print(f"DEBUG CANVAS: After preprocess - min={processed_image.min()}, max={processed_image.max()}, mean={processed_image.mean()}")
+        
+        # Reshape for model (add batch dimension)
+        input_data = processed_image.reshape(1, 28, 28, 1)
+        
+        # Predict
+        prediction = model.predict(input_data, verbose=0)
+        print(f"DEBUG CANVAS: Model prediction={prediction}")
+        
+        predicted_digit = np.argmax(prediction[0])
+        confidence = float(np.max(prediction[0])) * 100
+        
+        print(f"DEBUG CANVAS: Final prediction={predicted_digit}, confidence={confidence}")
+        
+        return jsonify({
+            'prediction': int(predicted_digit),
+            'confidence': round(confidence, 2)
+        })
+    
+    except Exception as e:
+        print(f"ERROR in predict_canvas: {e}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/<path:filename>')
+def serve_files(filename):
+    """Serve static files (images, css, js, etc.) from website folder"""
+    import os
+    file_path = os.path.join('website', filename)
+    if os.path.isfile(file_path):
+        from flask import send_file
+        return send_file(file_path)
+    return "File not found", 404
+
+if __name__ == '__main__':
+    if model is None:
+        print("⚠ Warning: Model could not be loaded. Predictions will fail.")
+    print("🚀 Starting DigitVision server on http://localhost:5000")
+    app.run(debug=True, port=5000)

dataset/submission.csv

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

dataset/test.csv/test.csv

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

dataset/train.csv/test.csv/test.csv

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

dataset/train.csv/train.csv

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

mnist_cnn_model.h5

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

requirements.txt

@@ -0,0 +1,8 @@
+Flask==2.3.3
+Flask-CORS==4.0.0
+tensorflow==2.13.0
+keras==2.13.1
+numpy==1.24.3
+opencv-python==4.8.0.76
+Pillow==10.1.0
+Werkzeug==2.3.7

website/home.html

@@ -0,0 +1,428 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DigitVision - Handwritten Digit Recognition</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;500&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --neon: #00ffff;
+            --bg-dark: #0f0c29;
+            --bg-gradient: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+        }
+
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: var(--bg-gradient);
+            color: #fff;
+            min-height: 100vh;
+            margin: 0;
+            overflow-x: hidden;
+            position: relative;
+        }
+
+        /* Back Arrow */
+        .back-arrow {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            font-size: 2.2rem;
+            color: var(--neon);
+            text-shadow: 0 0 12px var(--neon);
+            cursor: pointer;
+            transition: all 0.3s;
+            z-index: 1000;
+            font-weight: bold;
+        }
+        .back-arrow:hover {
+            color: #fff;
+            transform: scale(1.15);
+        }
+
+        /* ---------- PARTICLES ---------- */
+        #particles {
+            position: fixed;
+            top: 0; left: 0; width: 100%; height: 100%;
+            z-index: -1;
+            opacity: 0.3;
+        }
+
+        /* ---------- NAVBAR ---------- */
+        .navbar {
+            background: rgba(15, 12, 41, 0.8);
+            backdrop-filter: blur(12px);
+            border-bottom: 1px solid rgba(0, 255, 255, 0.2);
+            box-shadow: 0 4px 15px rgba(0, 255, 255, 0.1);
+            padding: 0.8rem 1rem;
+        }
+
+        .navbar-brand img {
+            height: 50px;
+            transition: transform .3s ease;
+            border-radius: 15px;
+            object-fit: cover;
+        }
+        .navbar-brand img:hover { transform: scale(1.1); }
+
+        .navbar-nav .nav-link {
+            color: #fff !important;
+            font-weight: 500;
+            margin: 0 10px;
+            position: relative;
+            transition: all .3s;
+        }
+        .navbar-nav .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -5px;
+            left: 50%;
+            background: var(--neon);
+            transition: all .3s;
+            transform: translateX(-50%);
+        }
+        .navbar-nav .nav-link:hover::after,
+        .navbar-nav .nav-link.active::after { width: 80%; }
+        .navbar-nav .nav-link:hover,
+        .navbar-nav .nav-link.active { color: var(--neon) !important; text-shadow: 0 0 8px var(--neon); }
+
+        /* ---------- MAIN CONTENT ---------- */
+        .main-content {
+            padding-top: 7rem;
+            max-width: 1200px;
+            margin: 0 auto;
+            z-index: 1;
+        }
+
+        h1 {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 3.5rem;
+            color: var(--neon);
+            text-align: center;
+            text-shadow: 0 0 20px var(--neon), 0 0 40px var(--neon);
+            animation: glow 2s infinite alternate;
+            margin-bottom: 1.5rem;
+        }
+        @keyframes glow {
+            from { text-shadow: 0 0 15px var(--neon), 0 0 30px var(--neon); }
+            to   { text-shadow: 0 0 25px var(--neon), 0 0 50px var(--neon); }
+        }
+
+        .lead { text-align:center; font-size:1.2rem; opacity:.9; margin-bottom:2.5rem; }
+
+        /* ---------- TABS ---------- */
+        .nav-tabs { border:none; justify-content:center; margin-bottom:2rem; }
+        .nav-tabs .nav-link {
+            background:transparent; border:none; color:#ccc; font-weight:500;
+            padding:.8rem 1.5rem; border-radius:50px; margin:0 10px; transition:all .3s;
+        }
+        .nav-tabs .nav-link.active {
+            background:rgba(0,255,255,.15); color:var(--neon)!important;
+            border:2px solid var(--neon); box-shadow:0 0 15px rgba(0,255,255,.3);
+        }
+
+        .tab-pane {
+            background:rgba(255,255,255,.08); border-radius:20px; padding:2.5rem;
+            backdrop-filter:blur(12px); border:1px solid rgba(0,255,255,.2);
+            box-shadow:0 8px 32px rgba(0,255,255,.1);
+        }
+
+        /* ---------- CANVAS (PENCIL CURSOR) ---------- */
+        #canvas {
+            border:3px solid var(--neon);
+            border-radius:15px;
+            background:#fff;
+            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>') 2 22, crosshair;
+            touch-action:none;
+            box-shadow:0 0 20px rgba(0,255,255,.3);
+        }
+        .eraser-mode #canvas {
+            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/><path d="M9 15l6-6"/></svg>') 12 12, crosshair;
+        }
+
+        #preview {
+            max-width:100%; border:3px solid var(--neon); border-radius:15px;
+            display:none; margin-top:1rem; box-shadow:0 0 20px rgba(0,255,255,.3);
+        }
+
+        /* ---------- BUTTONS ---------- */
+        .btn-neon {
+            background:transparent; border:2px solid var(--neon); color:var(--neon);
+            font-weight:bold; padding:.6rem 1.4rem; border-radius:50px;
+            transition:all .3s; box-shadow:0 0 10px rgba(0,255,255,.4); margin:.3rem;
+        }
+        .btn-neon:hover, .btn-neon.active {
+            background:var(--neon); color:#000; box-shadow:0 0 25px var(--neon);
+            transform:translateY(-2px);
+        }
+
+        #result-upload, #result-draw {
+            font-size:2.2rem; color:#00ff00; text-shadow:0 0 15px #00ff00;
+            margin-top:1.5rem; font-weight:bold;
+        }
+
+        @media (max-width:768px){
+            .main-content { padding-top:6rem; }
+            h1 { font-size:2.5rem; }
+            .navbar-brand img { height:40px; }
+            .tab-pane { padding:1.5rem; }
+            #canvas { width:100%; height:auto; }
+            .btn-neon { padding:.5rem 1rem; font-size:.9rem; }
+        }
+    </style>
+</head>
+<body>
+
+    <!-- Back Arrow -->
+    <div class="back-arrow" onclick="window.location.href='layout.html'" title="Back to Layout">
+        &larr;
+    </div>
+
+    <!-- PARTICLES -->
+    <div id="particles"></div>
+
+    <!-- NAVBAR -->
+    <nav class="navbar navbar-expand-lg fixed-top">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">
+                <img src="./logo.jpg" alt="DigitVision Logo" id="logo">
+            </a>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon" style="filter:invert(1);"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto align-items-center">
+                   <li class="nav-item"><a class="nav-link active" href="#upload">Upload</a></li>
+                  <li class="nav-item"><a class="nav-link" href="#draw">Draw</a></li>
+                  <li class="nav-item"><a class="nav-link" href="#">About</a></li>
+                  <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
+                 <li class="nav-item ms-3 d-flex align-items-center gap-2">
+                  <span id="userName" style="color:#00ffff; font-weight:500;"></span>
+                 <button id="logoutBtn" class="btn btn-neon btn-sm">Logout</button>
+                  </li>
+                 </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- MAIN CONTENT -->
+    <div class="main-content">
+        <h1>DigitVision</h1>
+        <p class="lead">Upload a handwritten digit or draw it live — powered by deep learning.</p>
+
+        <!-- TABS -->
+        <ul class="nav nav-tabs" id="myTab" role="tablist">
+            <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload">Upload Image</button>
+            </li>
+            <li class="nav-item" role="presentation">
+                <button class="nav-link" id="draw-tab" data-bs-toggle="tab" data-bs-target="#draw">Draw Digit</button>
+            </li>
+        </ul>
+
+        <div class="tab-content mt-4">
+            <!-- ==== UPLOAD ==== -->
+            <div class="tab-pane fade show active" id="upload" role="tabpanel">
+                <div class="text-center">
+                    <p style="color: #00ffff; margin-bottom: 1rem; font-size: 0.95rem;">
+                        ℹ️ Upload an image containing <strong>ONE handwritten digit (0-9)</strong>
+                    </p>
+                    <input type="file" id="fileInput" accept="image/*" class="form-control mb-4" style="max-width:500px;margin:0 auto;">
+                    <img id="preview" alt="Image Preview">
+                    <button id="predictUpload" class="btn btn-neon mt-3">Predict Digit</button>
+                    <div id="result-upload"></div>
+                </div>
+            </div>
+
+            <!-- ==== DRAW ==== -->
+            <div class="tab-pane fade" id="draw" role="tabpanel">
+                <div class="text-center">
+                    <p style="color: #00ffff; margin-bottom: 1rem; font-size: 0.95rem;">
+                        ⚠️ <strong>Draw ONE digit only (0-9)</strong> - The model recognizes single digits.
+                    </p>
+                    <canvas id="canvas" width="280" height="280"></canvas>
+
+                    <div class="mt-4 d-flex justify-content-center flex-wrap gap-2">
+                        <button id="toolPencil" class="btn btn-neon active">Pencil</button>
+                        <button id="toolEraser" class="btn btn-neon">Eraser</button>
+                        <button id="clearCanvas" class="btn btn-neon">Clear All</button>
+                        <button id="predictDraw" class="btn btn-neon">Predict Digit</button>
+                    </div>
+
+                    <div id="result-draw"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- SCRIPTS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
+    <script>
+        // ==== PROTECT THIS PAGE (using URL params for file:// compatibility) ====
+        const urlParams = new URLSearchParams(window.location.search);
+        const loggedIn = urlParams.get('loggedIn');
+        const userStr = urlParams.get('user');
+
+        if (loggedIn !== 'true' || !userStr) {
+            window.location.href = 'sign.html';
+        }
+
+        // ==== SHOW USER NAME ====
+        const user = JSON.parse(userStr || '{}');
+        const userNameEl = document.getElementById('userName');
+        if (userNameEl) {
+            userNameEl.textContent = user.name || user.email.split('@')[0];
+        }
+
+        // ==== LOGOUT BUTTON ====
+        const logoutBtn = document.getElementById('logoutBtn');
+        if (logoutBtn) {
+            logoutBtn.addEventListener('click', () => {
+                window.location.href = 'sign.html';
+            });
+        }
+
+        /* ---------- PARTICLES ---------- */
+        particlesJS('particles', {
+            particles: {
+                number: { value: 90, density: { enable: true, value_area: 800 } },
+                color: { value: '#00ffff' },
+                shape: { type: 'circle' },
+                opacity: { value: 0.6, random: true },
+                size: { value: 3, random: true },
+                line_linked: { enable: true, distance: 140, color: '#00ffff', opacity: 0.3, width: 1 },
+                move: { enable: true, speed: 1.5, direction: 'none', random: false, straight: false, out_mode: 'out' }
+            },
+            interactivity: { detect_on: 'window', events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' }, resize: true } },
+            retina_detect: true
+        });
+
+        /* ---------- TAB ↔ NAVBAR SYNC ---------- */
+        document.querySelectorAll('#myTab button').forEach(t => {
+            t.addEventListener('shown.bs.tab', e => {
+                document.querySelectorAll('.navbar-nav .nav-link').forEach(l => {
+                    l.classList.remove('active');
+                    if (l.getAttribute('href') === '#' + e.target.getAttribute('data-bs-target')) l.classList.add('active');
+                });
+            });
+        });
+
+        /* ---------- UPLOAD ---------- */
+        const fileInput = document.getElementById('fileInput');
+        const preview   = document.getElementById('preview');
+        const predictUpload = document.getElementById('predictUpload');
+        const resultUpload = document.getElementById('result-upload');
+
+        fileInput.addEventListener('change', e => {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = ev => { preview.src = ev.target.result; preview.style.display = 'block'; };
+                reader.readAsDataURL(file);
+            }
+        });
+
+        predictUpload.addEventListener('click', () => {
+            if (!fileInput.files[0]) return alert('Please upload an image.');
+            resultUpload.textContent = 'Processing...';
+            const fd = new FormData(); fd.append('image', fileInput.files[0]);
+            fetch('/predict_upload', { method: 'POST', body: fd })
+                .then(r => r.json())
+                .then(d => {
+                    if (d.error) {
+                        resultUpload.textContent = `Error: ${d.error}`;
+                    } else {
+                        resultUpload.textContent = `Predicted: ${d.prediction} (Confidence: ${d.confidence}%)`;
+                    }
+                })
+                .catch(err => {
+                    console.error(err);
+                    resultUpload.textContent = 'Prediction failed. Check console for details.';
+                });
+        });
+
+        /* ---------- DRAW (PENCIL + ERASER) ---------- */
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        let drawing = false, isEraser = false;
+
+        const toolPencil = document.getElementById('toolPencil');
+        const toolEraser = document.getElementById('toolEraser');
+
+        function setTool(eraser) {
+            isEraser = eraser;
+            canvas.classList.toggle('eraser-mode', eraser);
+            toolPencil.classList.toggle('active', !eraser);
+            toolEraser.classList.toggle('active', eraser);
+        }
+        toolPencil.onclick = () => setTool(false);
+        toolEraser.onclick = () => setTool(true);
+
+        // Mouse
+        canvas.addEventListener('mousedown', e => { drawing = true; draw(e); });
+        canvas.addEventListener('mouseup', () => { drawing = false; ctx.beginPath(); });
+        canvas.addEventListener('mousemove', draw);
+
+        // Touch
+        canvas.addEventListener('touchstart', e => { e.preventDefault(); drawing = true; draw(e.touches[0]); });
+        canvas.addEventListener('touchend', () => { drawing = false; ctx.beginPath(); });
+        canvas.addEventListener('touchmove', e => { e.preventDefault(); if (drawing) draw(e.touches[0]); });
+
+        function draw(e) {
+            if (!drawing) return;
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+
+            ctx.lineWidth = 22;
+            ctx.lineCap = 'round';
+
+            if (isEraser) {
+                ctx.globalCompositeOperation = 'destination-out';
+            } else {
+                ctx.globalCompositeOperation = 'source-over';
+                ctx.strokeStyle = '#000';
+            }
+
+            ctx.lineTo(x, y);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+        }
+
+        document.getElementById('clearCanvas').addEventListener('click', () => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            document.getElementById('result-draw').textContent = '';
+            setTool(false);
+        });
+
+        document.getElementById('predictDraw').addEventListener('click', () => {
+            document.getElementById('result-draw').textContent = 'Processing...';
+            const imageData = canvas.toDataURL('image/png');
+            fetch('/predict_canvas', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ image: imageData })
+            })
+            .then(r => r.json())
+            .then(d => {
+                if (d.error) {
+                    document.getElementById('result-draw').textContent = `Error: ${d.error}`;
+                } else {
+                    document.getElementById('result-draw').textContent = `Predicted: ${d.prediction} (Confidence: ${d.confidence}%)`;
+                }
+            })
+            .catch(err => {
+                console.error(err);
+                document.getElementById('result-draw').textContent = 'Prediction failed. Check console for details.';
+            });
+        });
+    </script>
+</body>
+</html>

website/layout.html

@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DigitVision - AI Handwritten Digit Recognition</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;500&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --neon: #00ffff;
+            --bg-gradient: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+        }
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: var(--bg-gradient);
+            color: #fff;
+            min-height: 100vh;
+            margin: 0;
+            overflow-x: hidden;
+            position: relative;
+        }
+        #particles {
+            position: fixed;
+            top: 0; left: 0; width: 100%; height: 100%;
+            z-index: -1;
+            opacity: 0.3;
+        }
+
+        /* NAVBAR */
+        .navbar {
+            background: rgba(15, 12, 41, 0.8);
+            backdrop-filter: blur(12px);
+            border-bottom: 1px solid rgba(0, 255, 255, 0.2);
+            box-shadow: 0 4px 15px rgba(0, 255, 255, 0.1);
+            padding: 0.8rem 1rem;
+        }
+        .navbar-brand img {
+            height: 50px;
+            transition: transform .3s;
+            border-radius: 15px;
+            object-fit: cover;
+        }
+        .navbar-brand img:hover { transform: scale(1.1); }
+        .navbar-nav .nav-link {
+            color: #fff !important;
+            font-weight: 500;
+            margin: 0 10px;
+            position: relative;
+            transition: all .3s;
+        }
+        .navbar-nav .nav-link::after {
+            content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%;
+            background: var(--neon); transition: all .3s; transform: translateX(-50%);
+        }
+        .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { width: 80%; }
+        .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--neon) !important; text-shadow: 0 0 8px var(--neon); }
+
+        /* HERO */
+        .hero {
+            padding: 8rem 1rem 4rem;
+            text-align: center;
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+        .hero h1 {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 4.5rem;
+            color: var(--neon);
+            text-shadow: 0 0 25px var(--neon), 0 0 50px var(--neon);
+            animation: glow 2s infinite alternate;
+            margin-bottom: 1.5rem;
+        }
+        @keyframes glow {
+            from { text-shadow: 0 0 20px var(--neon), 0 0 40px var(--neon); }
+            to   { text-shadow: 0 0 30px var(--neon), 0 0 60px var(--neon); }
+        }
+        .hero p {
+            font-size: 1.3rem;
+            opacity: 0.9;
+            margin-bottom: 2.5rem;
+            max-width: 700px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .btn-neon {
+            background: transparent;
+            border: 2px solid var(--neon);
+            color: var(--neon);
+            font-weight: bold;
+            padding: 0.8rem 2rem;
+            border-radius: 50px;
+            font-size: 1.1rem;
+            transition: all 0.3s;
+            box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
+        }
+        .btn-neon:hover {
+            background: var(--neon);
+            color: #000;
+            box-shadow: 0 0 30px var(--neon);
+            transform: translateY(-3px);
+        }
+
+        /* FEATURES */
+        .features {
+            padding: 4rem 1rem;
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+            flex-wrap: wrap;
+        }
+        .feature-card {
+            background: rgba(255, 255, 255, 0.08);
+            border-radius: 20px;
+            padding: 2rem;
+            width: 300px;
+            text-align: center;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(0, 255, 255, 0.2);
+            box-shadow: 0 8px 25px rgba(0, 255, 255, 0.1);
+            transition: transform 0.3s;
+        }
+        .feature-card:hover {
+            transform: translateY(-10px);
+        }
+        .feature-card h3 {
+            color: var(--neon);
+            margin-bottom: 1rem;
+            font-family: 'Orbitron', sans-serif;
+        }
+
+        .footer {
+            text-align: center;
+            padding: 2rem;
+            color: #aaa;
+            font-size: 0.9rem;
+        }
+
+        @media (max-width: 768px) {
+            .hero h1 { font-size: 3rem; }
+            .hero { padding-top: 6rem; }
+            .feature-card { width: 100%; max-width: 350px; }
+        }
+    </style>
+</head>
+<body>
+
+    <div id="particles"></div>
+
+    <!-- NAVBAR -->
+    <nav class="navbar navbar-expand-lg fixed-top">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">
+                <img src="./logo.jpg" alt="DigitVision Logo">
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon" style="filter:invert(1);"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="./sign.html">Sign In</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- HERO SECTION -->
+    <section class="hero">
+        <h1>DigitVision</h1>
+        <p>Upload a handwritten digit or draw it live — powered by deep learning. Accurate, fast, and futuristic.</p>
+        <a href="./sign.html" class="btn btn-neon">Get Started – Sign In</a>
+    </section>
+
+    <!-- FEATURES -->
+    <section class="features" id="features">
+        <div class="feature-card">
+            <h3>Upload & Predict</h3>
+            <p>Upload any image of a handwritten digit and get instant prediction.</p>
+        </div>
+        <div class="feature-card">
+            <h3>Draw Live</h3>
+            <p>Use pencil & eraser to draw digits on a canvas and predict in real-time.</p>
+        </div>
+        <!-- AI-Powered card REMOVED -->
+    </section>
+
+    <footer class="footer">
+        © 2025 DigitVision. All rights reserved.
+    </footer>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
+    <script>
+        particlesJS('particles', {
+            particles: {
+                number: { value: 100, density: { enable: true, value_area: 800 } },
+                color: { value: '#00ffff' },
+                shape: { type: 'circle' },
+                opacity: { value: 0.6, random: true },
+                size: { value: 3, random: true },
+                line_linked: { enable: true, distance: 150, color: '#00ffff', opacity: 0.3, width: 1 },
+                move: { enable: true, speed: 1.5, direction: 'none', random: false, straight: false, out_mode: 'out' }
+            },
+            interactivity: { detect_on: 'window', events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' } } },
+            retina_detect: true
+        });
+    </script>
+</body>
+</html>

website/sign.html

@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign In | DigitVision</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;500&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --neon: #00ffff;
+            --bg-gradient: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+        }
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: var(--bg-gradient);
+            color: #fff;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0;
+            overflow: hidden;
+            position: relative;
+        }
+        #particles {
+            position: fixed;
+            top: 0; left: 0; width: 100%; height: 100%;
+            z-index: -1;
+            opacity: 0.3;
+        }
+
+        /* Back Arrow */
+        .back-arrow {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            font-size: 2.2rem;
+            color: var(--neon);
+            text-shadow: 0 0 12px var(--neon);
+            cursor: pointer;
+            transition: all 0.3s;
+            z-index: 100;
+            font-weight: bold;
+        }
+        .back-arrow:hover {
+            color: #fff;
+            transform: scale(1.15);
+        }
+
+        .card {
+            background: rgba(255, 255, 255, 0.08);
+            border-radius: 20px;
+            padding: 2.5rem;
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(0, 255, 255, 0.2);
+            box-shadow: 0 8px 32px rgba(0, 255, 255, 0.1);
+            max-width: 420px;
+            width: 100%;
+        }
+        h2 {
+            font-family: 'Orbitron', sans-serif;
+            color: var(--neon);
+            text-align: center;
+            text-shadow: 0 0 15px var(--neon);
+            margin-bottom: 1.5rem;
+        }
+        .form-control {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(0, 255, 255, 0.3);
+            color: #fff;
+            border-radius: 10px;
+            padding: 0.75rem;
+        }
+        .form-control:focus {
+            background: rgba(255, 255, 255, 0.15);
+            border-color: var(--neon);
+            box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+            color: #fff;
+        }
+        .btn-neon {
+            background: transparent;
+            border: 2px solid var(--neon);
+            color: var(--neon);
+            font-weight: bold;
+            border-radius: 50px;
+            padding: 0.7rem 1.5rem;
+            transition: all 0.3s;
+            box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
+            width: 100%;
+            margin-top: 1rem;
+        }
+        .btn-neon:hover {
+            background: var(--neon);
+            color: #000;
+            box-shadow: 0 0 20px var(--neon);
+        }
+        .toggle-text {
+            text-align: center;
+            margin-top: 1.5rem;
+            color: #ccc;
+            font-size: 0.95rem;
+        }
+        .toggle-text a {
+            color: var(--neon);
+            text-decoration: none;
+            font-weight: 500;
+        }
+        .toggle-text a:hover {
+            text-decoration: underline;
+        }
+        .logo {
+            display: block;
+            margin: 0 auto 1.5rem;
+            height: 60px;
+            filter: drop-shadow(0 0 10px var(--neon));
+            border-radius: 20px;
+            object-fit: cover;
+        }
+        .alert {
+            margin-top: 1rem;
+            font-size: 0.9rem;
+        }
+    </style>
+</head>
+<body>
+
+    <!-- Back Arrow (REAL ARROW SYMBOL) -->
+    <div class="back-arrow" onclick="window.location.href='layout.html'" title="Back to Home">
+        &larr;
+    </div>
+
+    <div id="particles"></div>
+
+    <div class="card">
+        <img src="./logo.jpg" alt="DigitVision Logo" class="logo">
+        <h2 id="formTitle">Sign In</h2>
+
+        <form id="authForm">
+            <div id="signupFields" style="display:none;">
+                <div class="mb-3">
+                    <input type="text" class="form-control" id="name" placeholder="Full Name" required>
+                </div>
+            </div>
+            <div class="mb-3">
+                <input type="email" class="form-control" id="email" placeholder="Email Address" required>
+            </div>
+            <div class="mb-3">
+                <input type="password" class="form-control" id="password" placeholder="Password" required>
+            </div>
+            <button type="submit" class="btn btn-neon" id="submitBtn">Sign In</button>
+        </form>
+
+        <div class="toggle-text" id="toggleMessage">
+            Don't have an account? <a href="#" id="toggleLink">Sign Up &larr;</a>
+        </div>
+
+        <div id="alertBox"></div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
+    <script>
+        particlesJS('particles', {
+            particles: {
+                number: { value: 80, density: { enable: true, value_area: 800 } },
+                color: { value: '#00ffff' },
+                shape: { type: 'circle' },
+                opacity: { value: 0.5, random: true },
+                size: { value: 3, random: true },
+                line_linked: { enable: true, distance: 150, color: '#00ffff', opacity: 0.4, width: 1 },
+                move: { enable: true, speed: 1.5, direction: 'none', random: false, straight: false, out_mode: 'out' }
+            },
+            interactivity: { detect_on: 'window', events: { onhover: { enable: true, mode: 'repulse' } } },
+            retina_detect: true
+        });
+
+        const isSignup = { value: false };
+        const formTitle = document.getElementById('formTitle');
+        const signupFields = document.getElementById('signupFields');
+        const submitBtn = document.getElementById('submitBtn');
+        const toggleMessage = document.getElementById('toggleMessage');
+        const alertBox = document.getElementById('alertBox');
+
+        // Toggle between Sign In and Sign Up
+        toggleMessage.addEventListener('click', (e) => {
+            if (e.target.id !== 'toggleLink') return;
+            e.preventDefault();
+
+            isSignup.value = !isSignup.value;
+            formTitle.textContent = isSignup.value ? 'Sign Up' : 'Sign In';
+            signupFields.style.display = isSignup.value ? 'block' : 'none';
+            submitBtn.textContent = isSignup.value ? 'Create Account' : 'Sign In';
+
+            // REAL ARROW SYMBOLS
+            toggleMessage.innerHTML = isSignup.value
+                ? 'Already have an account? <a href="#" id="toggleLink">Sign In &rarr;</a>'
+                : 'Don\'t have an account? <a href="#" id="toggleLink">Sign Up &larr;</a>';
+
+            alertBox.innerHTML = '';
+        });
+
+        // Form Submit → Always go to home.html
+        document.getElementById('authForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+
+            const email = document.getElementById('email').value.trim();
+            const password = document.getElementById('password').value;
+            const nameInput = document.getElementById('name');
+            
+            // Determine name based on signup state
+            const name = isSignup.value ? (nameInput ? nameInput.value.trim() : '') : 'User';
+
+            // Validation
+            if (!email || !password) {
+                showAlert('Please fill all required fields.', 'danger');
+                return;
+            }
+            if (isSignup.value && !name) {
+                showAlert('Please enter your name.', 'danger');
+                return;
+            }
+            if (password.length < 6) {
+                showAlert('Password must be at least 6 characters.', 'warning');
+                return;
+            }
+
+            // Use URL params instead of localStorage for file:// protocol compatibility
+            const user = { name: isSignup.value ? name : (email.split('@')[0] || 'User'), email };
+            const params = new URLSearchParams({
+                loggedIn: 'true',
+                user: JSON.stringify(user)
+            });
+
+            showAlert(`Welcome, ${user.name}! Redirecting...`, 'success');
+
+            setTimeout(() => {
+                window.location.href = 'home.html?' + params.toString();
+            }, 1200);
+        });
+
+        function showAlert(msg, type) {
+            alertBox.innerHTML = `<div class="alert alert-${type}">${msg}</div>`;
+        }
+    </script>
+</body>
+</html>