Initialize clean space deployment

.gitignore

@@ -0,0 +1,80 @@
+# Python
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+env/
+venv/
+.venv/
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Database
+database.db
+*.sqlite3
+
+# OS
+.DS_Store
+.DS_Store?
+._*
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Logs
+*.log
+
+# Environment Variables
+.env
+.env.local
+
+# Editor
+.vscode/
+.idea/
+
+# Project Specific
+test_images/
+uploads/
+history_uploads/
+feedback_images/
+video_batch_results.csv
+*.bak
+
+
+# Documentation (Ignore all)
+*.md
+documentation/
+
+# Specific Files
+LICENSE
+PULL_REQUEST_TEMPLATE.md
+bug_report.yml
+config.yml
+feature_request.yml
+model/DETAILED_HISTORY.md
+model/FACEFORENSICS_GUIDE.md
+model/MODEL_CARD.md
+model/TRAINING_HISTORY.md
+CONTRIBUTING.md
+CODE_OF_CONDUCT.md
+SECURITY.md
+CHANGELOG.md
+README.md
+LICENSE
+.github/
+.gitattributes
+
+# Large Model Files
+# *.safetensors <-- Commented out to allow Git LFS
+*.pth
+*.pt
+# model/results/
+!model/results/checkpoints/
+model/results/
+model/checkpoints/
+
+# Project Specific
+visualizations/
+generate_visualizations.py
+plots/!README.md

Dockerfile

@@ -0,0 +1,42 @@
+FROM python:3.10
+
+# Explicitly set the port for Hugging Face Spaces
+ENV PORT=7860
+
+# Set working directory to /code
+WORKDIR /code
+
+# Copy specific requirement file
+COPY backend/requirements_web.txt /code/requirements.txt
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    libgl1 \
+    ffmpeg \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install python dependencies
+RUN pip install --no-cache-dir -r /code/requirements.txt
+
+# Copy the entire repository
+COPY . /code
+
+# Create necessary directories that the app writes to
+RUN mkdir -p /code/backend/uploads \
+    /code/backend/history_uploads \
+    /code/backend/feedback_images \
+    /code/model/results/checkpoints
+
+# Set permissions for writable directories (required for Spaces running as non-root)
+RUN chmod -R 777 /code/backend/uploads \
+    /code/backend/history_uploads \
+    /code/backend/feedback_images
+
+# Ensure database exists or is writable
+RUN touch /code/backend/database.db && chmod 777 /code/backend/database.db
+
+# Expose the port
+EXPOSE 7860
+
+# Run the backend app
+CMD ["python", "backend/app.py"]

HF_DEPLOYMENT_STEPS.md

@@ -0,0 +1,48 @@
+# Hugging Face Deployment Guide (Post-Merge)
+
+Since you have already merged your PR, follow these specific steps to deploy the entire application (Frontend + Backend) to a single Hugging Face Space.
+
+## Step 1: Prepare the Frontend Configuration
+Ensure your frontend knows to talk to the backend on the same host.
+1.  Open [config.js](file:///Users/harshvardhan/Developer/Deepfake Project /Morden Detections system/frontend/config.js).
+2.  The `API_BASE_URL` logic already handles this correctly by checking if it's on a local or production host. No changes should be needed if you use the direct Space URL.
+
+## Step 2: Configure Hugging Face Remote
+If you haven't already linked your local repository to your Hugging Face space, run these commands:
+
+```bash
+# Install Git LFS to handle the large model files properly
+git lfs install
+git lfs track "*.safetensors"
+
+# Add the Hugging Face Space as a git remote
+# Replace USERNAME and SPACE_NAME with your actual details
+git remote add space https://huggingface.co/spaces/USERNAME/SPACE_NAME
+```
+
+## Step 3: Deploy the Unified System
+Hugging Face uses the [Dockerfile](file:///Users/harshvardhan/Developer/Deepfake Project /Morden Detections system/Dockerfile) in the root directory to build your app.
+
+```bash
+# Add all changes
+git add .
+
+# Commit (if not already committed)
+git commit -m "Prepare for deployment"
+
+# Push to Hugging Face
+# This will trigger the build and deploy process on HF
+git push space Harshvardhan:main
+```
+> [!NOTE]
+> If your Space uses a different main branch name (like `main`), use `git push space Harshvardhan:main`.
+
+## Step 4: Verification
+1.  **Monitor Build**: Go to your Hugging Face Space page and click the "Logs" tab.
+2.  **Port Check**: Ensure the app is listening on port `7860`. The `Dockerfile` and `app.py` are already configured for this.
+3.  **Model Loading**: Check the logs to ensure the `Mark-V.safetensors` model loads correctly on startup.
+
+## Summary of "The Difference"
+- **Unified Hosting**: Unlike Vercel (Frontend only), a Hugging Face Docker Space hosts both your Flask API and your HTML files simultaneously.
+- **Port 7860**: Hugging Face specifically looks for traffic on port `7860`.
+- **Persistent Storage**: Remember that files saved to `uploads/` on HF are ephemeral unless you use a HF Dataset or Persistent Storage volume.

README.md

@@ -0,0 +1,61 @@
+---
+title: Deepfake Detection Model
+emoji: 🛡️
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_file: backend/app.py
+app_port: 7860
+pinned: false
+---
+
+# DeepGuard: AI-Powered Deepfake Detection
+
+![Accuracy](https://img.shields.io/badge/Accuracy-96.97%25-brightgreen)
+![Model](https://img.shields.io/badge/Model-Mark--V-blue)
+![License](https://img.shields.io/badge/License-MIT-yellow.svg)
+
+**DeepGuard** is a state-of-the-art, privacy-focused tool designed to detect AI-generated images with **96.97% accuracy**. It runs entirely on your local machine using a Hybrid Multi-Branch Neural Network.
+
+![Radar Chart](model/visualizations/6_model_radar_comparison.png)
+
+## 🚀 Quick Links
+
+*   **[📝 Overview & How it Works](Documentation/OVERVIEW.md)**
+*   **[⚡ Getting Started Guide](Documentation/GETTING_STARTED.md)**
+*   **[🏗️ System Architecture](Documentation/ARCHITECTURE.md)**
+*   **[🔒 Security & Privacy](Documentation/SECURITY.md)**
+*   **[🛠️ Backend API](Documentation/BACKEND.md)**
+*   **[🎨 Frontend Guide](Documentation/FRONTEND.md)**
+
+## 🏆 Current Performance (Mark-V)
+
+| Metric | Score | Note |
+| :--- | :--- | :--- |
+| **Accuracy** | **96.97%** | Tested on Universal Dataset |
+| **Reliability** | **Generative** | Wide coverage of generation methods |
+| **FPS** | **~25** | Real-time analysis on GPU |
+
+## 📦 Features
+
+*   **Multi-Branch Detection**: Combines RGB, Frequency (FFT), Patch analysis, and Vision Transformers.
+*   **Defense-in-Depth**: Automatically detects C2PA credentials and invisible watermarks (Stable Diffusion).
+*   **Local-First**: No data ever leaves your computer.
+*   **History Tracking**: Keep a local log of your scans.
+
+## 💻 Quick Install
+
+```bash
+git clone https://github.com/your-username/DeepGuard.git
+cd DeepGuard/backend
+python -m venv venv
+source venv/bin/activate
+pip install -r requirements_web.txt
+python app.py
+```
+
+Open `http://localhost:7860` in your browser.
+
+---
+
+For full documentation, please visit the **[Documentation Folder](Documentation/)**.

backend/app.py

@@ -0,0 +1,618 @@
+from flask import Flask, request, jsonify, send_from_directory, Response, make_response
+from flask_cors import CORS
+import sys
+import os
+import re
+import mimetypes
+import subprocess
+
+# Add model directory to path
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..', 'model')))
+import datetime
+import torch
+import cv2
+import os
+import numpy as np
+import ssl
+import base64
+from werkzeug.utils import secure_filename
+import io
+from PIL import Image
+from src import video_inference
+
+# Disable SSL verification
+ssl._create_default_https_context = ssl._create_unverified_context
+import albumentations as A
+from albumentations.pytorch import ToTensorV2
+from albumentations.pytorch import ToTensorV2
+from src.models import DeepfakeDetector
+from src.config import Config
+from checkers import metadata_checker
+from checkers import watermark_checker
+import database
+
+try:
+    from safetensors.torch import load_file
+    SAFETENSORS_AVAILABLE = True
+except ImportError:
+    SAFETENSORS_AVAILABLE = False
+
+app = Flask(__name__, static_folder='../frontend', static_url_path='')
+CORS(app)
+
+# Configuration
+UPLOAD_FOLDER = os.path.join(os.path.dirname(__file__), 'uploads')
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'webp', 'mp4', 'avi', 'mov', 'webm'}
+HISTORY_FOLDER = os.path.join(os.path.dirname(__file__), '..', 'frontend', 'history_uploads')
+FEEDBACK_FOLDER = os.path.join(os.path.dirname(__file__), 'feedback_images')
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(HISTORY_FOLDER, exist_ok=True)
+os.makedirs(FEEDBACK_FOLDER, exist_ok=True)
+
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024  # Increase to 500MB for video
+
+# Global model and transform
+# Global model and transform
+device = torch.device(Config.DEVICE)
+model = None
+video_model_onnx = None # Dedicated optimized model for video
+transform = None
+
+def get_transform():
+    return A.Compose([
+        A.Resize(Config.IMAGE_SIZE, Config.IMAGE_SIZE),
+        A.Normalize(mean=(0.485, 0.456, 0.406), std=(0.229, 0.224, 0.225)),
+        ToTensorV2(),
+    ])
+
+def load_model():
+    """Load the trained deepfake detection model"""
+    global model, transform, video_model_onnx
+    
+    checkpoint_dir = Config.CHECKPOINT_DIR
+    target_model_name = "Mark-V.safetensors"
+    checkpoint_path = os.path.join(checkpoint_dir, target_model_name)
+    
+    print(f"Using device: {device}")
+    
+    # 1. Load PyTorch Model (Required for single image Image Heatmaps)
+    model = DeepfakeDetector(pretrained=True)
+    model.to(device)
+    model.eval()
+    
+    if not os.path.exists(checkpoint_path):
+        print(f"❌ CRITICAL ERROR: Model file not found at: {checkpoint_path}")
+        model = None
+        transform = get_transform()
+        return model, transform
+
+    try:
+        print(f"Loading PyTorch checkpoint: {checkpoint_path}")
+        if checkpoint_path.endswith(".safetensors") and SAFETENSORS_AVAILABLE:
+            state_dict = load_file(checkpoint_path)
+        else:
+            state_dict = torch.load(checkpoint_path, map_location=device)
+        
+        # Try loading directly first
+        try:
+            model.load_state_dict(state_dict)
+            print(f"✅ PyTorch Model loaded successfully!")
+        except Exception as e:
+            # Keys don't match - apply remapping for architecture compatibility
+            print(f"⚠️  Direct load failed. Attempting key remapping...")
+            from collections import OrderedDict
+            new_state_dict = OrderedDict()
+            for k, v in state_dict.items():
+                if k.startswith('rgb_branch.features.'):
+                    new_k = k.replace('rgb_branch.features.', 'rgb_branch.net.features.')
+                    new_state_dict[new_k] = v
+                elif k.startswith('rgb_branch.avgpool.'):
+                    new_k = k.replace('rgb_branch.avgpool.', 'rgb_branch.net.avgpool.')
+                    new_state_dict[new_k] = v
+                else:
+                    new_state_dict[k] = v
+            
+            model.load_state_dict(new_state_dict, strict=False)
+            print(f"✅ PyTorch Model loaded successfully (with key remapping)!")
+            
+    except Exception as e:
+        print(f"❌ Error loading PyTorch checkpoint: {e}")
+        model = None
+
+    # 2. Load ONNX Model (Removed)
+    # System optimized for PyTorch Pipeline (Threaded Preprocessing)
+    video_model_onnx = None
+
+    transform = get_transform()
+    return model, transform
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def predict_image(image_path):
+    """Make prediction on a single image"""
+    if model is None:
+        return None, "Error: Model not loaded. Check backend logs for 'best_model.safetensors' error."
+
+    try:
+        # Read and preprocess image
+        image = cv2.imread(image_path)
+        if image is None:
+            return None, "Error: Could not read image"
+        
+        image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+        augmented = transform(image=image)
+        image_tensor = augmented['image'].unsqueeze(0).to(device)
+        
+        
+        # 0. Metadata & Watermark Checks
+        meta_result = metadata_checker.check_metadata(image_path)
+        water_result = watermark_checker.check_watermarks(image_path)
+        
+        # Make prediction
+        logits = model(image_tensor)
+        prob = torch.sigmoid(logits).item()
+        
+        # Generate Heatmap
+        heatmap = model.get_heatmap(image_tensor)
+        
+        # Process Heatmap for Visualization
+        # Resize to original image size
+        heatmap = cv2.resize(heatmap, (image.shape[1], image.shape[0]))
+        heatmap = np.uint8(255 * heatmap)
+        heatmap = cv2.applyColorMap(heatmap, cv2.COLORMAP_JET)
+        
+        # Superimpose
+        # Heatmap is BGR (from cv2), Image is RGB. Convert Image to BGR.
+        image_bgr = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
+        superimposed_img = heatmap * 0.4 + image_bgr * 0.6
+        superimposed_img = np.clip(superimposed_img, 0, 255).astype(np.uint8)
+        
+        # Encode to Base64
+        _, buffer = cv2.imencode('.jpg', superimposed_img)
+        heatmap_b64 = base64.b64encode(buffer).decode('utf-8')
+        
+        is_fake = prob > 0.5
+        
+        # Override if metadata confirms fake
+        if meta_result['detected'] or water_result['detected']:
+            is_fake = True
+            # If visual model was unsure (e.g. 0.4), bump it up? 
+            # Or just rely on the 'prediction' label.
+            # Let's trust the metadata 100%
+            prob = max(prob, 0.99) 
+            
+        # Hidden Check: Explicitly flag known generator filenames as FAKE without frontend badging
+        filename_lower = os.path.basename(image_path).lower()
+        if "chatgpt" in filename_lower or "gemini" in filename_lower:
+            is_fake = True
+            prob = max(prob, 0.998) # Extremely high confidence
+            # Intentionally NOT adding to meta_result or water_result to keep it hidden from badges
+            # as requested by user ("dont shiw this in fornetend") 
+            
+        label = "FAKE" if is_fake else "REAL"
+        confidence = prob if is_fake else 1 - prob
+        
+        return {
+            'prediction': label,
+            'confidence': float(confidence),
+            'fake_probability': float(prob),
+            'real_probability': float(1 - prob),
+            'heatmap': heatmap_b64,
+            'metadata_check': meta_result,
+            'watermark_check': water_result
+        }, None
+    except Exception as e:
+        return None, str(e)
+
+
+@app.route('/')
+def index():
+    """Serve the frontend"""
+    # Use absolute path to avoid CWD issues
+    frontend_dir = os.path.abspath(os.path.join(os.path.dirname(__file__), '..', 'frontend'))
+    return send_from_directory(frontend_dir, 'index.html')
+
+@app.route('/history_uploads/<path:filename>')
+def serve_history_image(filename):
+    """Serve history images and videos with Range support"""
+    file_path = os.path.join(HISTORY_FOLDER, filename)
+    if not os.path.exists(file_path):
+        return jsonify({'error': 'File not found'}), 404
+
+    # Handle Video Range Requests
+    if filename.lower().endswith(('.mp4', '.mov', '.avi', '.webm')):
+        file_size = os.path.getsize(file_path)
+        range_header = request.headers.get('Range', None)
+        
+        if not range_header:
+            # No Range header, serve normally but with video headers
+            response = make_response(send_from_directory(HISTORY_FOLDER, filename))
+            response.headers['Content-Type'] = 'video/mp4'
+            response.headers['Accept-Ranges'] = 'bytes'
+            return response
+            
+        # Parse Range Header
+        byte1, byte2 = 0, None
+        m = re.search(r'bytes=(\d+)-(\d*)', range_header)
+        if m:
+            g = m.groups()
+            byte1 = int(g[0])
+            if g[1]:
+                byte2 = int(g[1])
+
+        length = file_size - byte1
+        if byte2 is not None:
+            length = byte2 + 1 - byte1
+
+        # Read partial content
+        with open(file_path, 'rb') as f:
+            f.seek(byte1)
+            data = f.read(length)
+
+        response = Response(
+            data,
+            206,
+            mimetype='video/mp4',
+            direct_passthrough=True
+        )
+        
+        # Determine content range
+        content_range_end = byte2 if byte2 is not None else file_size - 1
+        
+        response.headers.add('Content-Range', f'bytes {byte1}-{content_range_end}/{file_size}')
+        response.headers.add('Accept-Ranges', 'bytes')
+        response.headers.add('Content-Length', str(length))
+        response.headers.add('Access-Control-Allow-Origin', '*')
+        return response
+
+    # Default for images
+    response = send_from_directory(HISTORY_FOLDER, filename)
+    return response
+
+def reencode_video(input_path):
+    """Re-encode video to H.264/AAC with faststart using ffmpeg"""
+    try:
+        output_path = input_path + "_temp.mp4"
+        print(f"🔄 Re-encoding video: {input_path}")
+        
+        # FFmpeg command
+        # -y: overwrite output
+        # -c:v libx264: use H.264 video codec
+        # -preset fast: encode speed
+        # -profile:v high: high profile for better compatibility
+        # -level 4.0: compatibility level
+        # -pix_fmt yuv420p: ensure wide player compatibility (essential for QuickTime/Safari)
+        # -c:a aac: use AAC audio codec
+        # -movflags +faststart: move metadata to front for streaming
+        cmd = [
+            'ffmpeg', '-y', 
+            '-i', input_path,
+            '-c:v', 'libx264',
+            '-preset', 'fast',
+            '-pix_fmt', 'yuv420p',
+            '-c:a', 'aac',
+            '-movflags', '+faststart',
+            output_path
+        ]
+        
+        # Run ffmpeg
+        result = subprocess.run(cmd, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
+        
+        if result.returncode != 0:
+            print(f"❌ FFmpeg re-encoding failed: {result.stderr.decode()}")
+            return input_path # Fallback to original
+            
+        print(f"✅ Video re-encoded successfully!")
+        
+        # Replace original
+        os.remove(input_path)
+        os.rename(output_path, input_path)
+        return input_path
+        
+    except Exception as e:
+        print(f"❌ Error during re-encoding: {e}")
+        return input_path
+
+@app.route('/api/health', methods=['GET'])
+def health_check():
+    """Health check endpoint with detailed model status"""
+    model_status = "ready" if model is not None else "initializing"
+    
+    return jsonify({
+        'status': 'healthy',
+        'model_status': model_status,
+        'model_loaded': model is not None,
+        'device': str(device)
+    })
+
+@app.route('/api/predict', methods=['POST'])
+def predict():
+    """Handle image upload and prediction"""
+    try:
+        # Check if file is present
+        if 'file' not in request.files:
+            return jsonify({'error': 'No file provided'}), 400
+        
+        file = request.files['file']
+        
+        if file.filename == '':
+            return jsonify({'error': 'No file selected'}), 400
+        
+        if not allowed_file(file.filename):
+            return jsonify({'error': 'Invalid file type. Allowed types: png, jpg, jpeg, webp'}), 400
+        
+        # Save file
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(filepath)
+        
+        # Make prediction
+        result, error = predict_image(filepath)
+        
+        if error:
+            return jsonify({'error': error}), 500
+            
+        # Save to History
+        import shutil
+        history_filename = f"scan_{int(datetime.datetime.now().timestamp())}_{filename}"
+        history_path = os.path.join(HISTORY_FOLDER, history_filename)
+        
+        # Copy original file to history folder
+        # We need to read the file again or just copy if we haven't deleted it?
+        # We read via cv2, the file is still at filepath.
+        shutil.copy(filepath, history_path)
+        
+        # Relative path for frontend
+        relative_path = f"history_uploads/{history_filename}"
+
+        scan_id = database.add_scan(
+            filename=filename,
+            prediction=result['prediction'],
+            confidence=result['confidence'],
+            fake_prob=result['fake_probability'],
+            real_prob=result['real_probability'],
+            image_path=relative_path,
+            session_id=request.headers.get('X-Session-ID')
+        )
+        
+        # Clean up uploaded file
+        try:
+            os.remove(filepath)
+        except:
+            pass
+        
+        # Add scan_id to result for frontend tracking
+        result['scan_id'] = scan_id
+        
+        return jsonify(result)
+    
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/predict_video', methods=['POST'])
+def predict_video():
+    """Handle video upload and prediction"""
+    try:
+        if 'file' not in request.files:
+            return jsonify({'error': 'No file provided'}), 400
+        
+        file = request.files['file']
+        
+        if file.filename == '':
+            return jsonify({'error': 'No file selected'}), 400
+            
+        if not allowed_file(file.filename):
+             return jsonify({'error': 'Invalid file type'}), 400
+             
+        # Save file
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(filepath)
+        
+        # Re-encode video for proper web playback
+        filepath = reencode_video(filepath)
+        
+        # Process Video
+        # Prioritize Optimized ONNX Model
+        active_model = video_model_onnx if video_model_onnx is not None else model
+        
+        if active_model is None:
+             return jsonify({'error': 'Model not loaded'}), 500
+             
+        result = video_inference.process_video(filepath, active_model, transform, device, frames_per_second=10)
+        
+        if "error" in result:
+             return jsonify(result), 500
+             
+        # Save to History (Using the first frame or a placeholder icon for now?)
+        # For video, we might want to save the video file itself to history_uploads
+        # or just a thumbnail. Let's save the video for now.
+        import shutil
+        history_filename = f"scan_{int(datetime.datetime.now().timestamp())}_{filename}"
+        history_path = os.path.join(HISTORY_FOLDER, history_filename)
+        shutil.copy(filepath, history_path)
+        
+        relative_path = f"history_uploads/{history_filename}"
+        
+        # Add to database
+        # Note: The database 'add_scan' might expect image-specific fields.
+        # We'll re-use 'fake_prob' as 'avg_fake_prob'
+        scan_id = database.add_scan(
+            filename=filename,
+            prediction=result['prediction'],
+            confidence=result['confidence'],
+            fake_prob=result['avg_fake_prob'],
+            real_prob=1 - result['avg_fake_prob'],
+            image_path=relative_path,
+            session_id=request.headers.get('X-Session-ID')
+        )
+        
+        # Clean up
+        try:
+            os.remove(filepath)
+        except:
+            pass
+            
+        # Add video URL for frontend playback
+        result['video_url'] = relative_path
+        result['scan_id'] = scan_id
+        
+        return jsonify(result)
+
+    except Exception as e:
+        print(f"Video Error: {e}")
+        return jsonify({'error': str(e)}), 500
+
+
+@app.route('/api/history', methods=['GET'])
+def get_history():
+    """Get all past scans"""
+    session_id = request.headers.get('X-Session-ID')
+    history = database.get_history(session_id)
+    return jsonify(history)
+
+@app.route('/api/history/<int:scan_id>', methods=['PATCH'])
+def update_history_item(scan_id):
+    """Update a specific scan's metadata (notes, tags)"""
+    data = request.json
+    if not data:
+        return jsonify({'error': 'No data provided'}), 400
+    
+    if database.update_scan(scan_id, data):
+        return jsonify({'message': 'Scan updated successfully'})
+    return jsonify({'error': 'Failed to update scan'}), 500
+
+@app.route('/api/history/<int:scan_id>', methods=['DELETE'])
+def delete_scan(scan_id):
+    """Delete a specific scan"""
+    session_id = request.headers.get('X-Session-ID')
+    if database.delete_scan(scan_id, session_id):
+        return jsonify({'message': 'Scan deleted'})
+    return jsonify({'error': 'Failed to delete scan'}), 500
+
+@app.route('/api/history', methods=['DELETE'])
+def clear_history():
+    """Clear all history"""
+    session_id = request.headers.get('X-Session-ID')
+    if database.clear_history(session_id):
+        return jsonify({'message': 'History cleared'})
+    return jsonify({'error': 'Failed to clear history'}), 500
+
+@app.route('/api/feedback', methods=['POST'])
+def submit_feedback():
+    """Submit user feedback on a prediction"""
+    try:
+        data = request.json
+        if not data:
+            return jsonify({'error': 'No data provided'}), 400
+        
+        scan_id = data.get('scan_id')
+        is_correct = data.get('is_correct')
+        predicted_label = data.get('predicted_label')
+        
+        if scan_id is None or is_correct is None or not predicted_label:
+            return jsonify({'error': 'Missing required fields'}), 400
+        
+        # Get scan details from history
+        history = database.get_history()
+        scan = next((s for s in history if s['id'] == scan_id), None)
+        
+        if not scan:
+            return jsonify({'error': 'Scan not found'}), 404
+        
+        actual_label = None
+        feedback_image_path = None
+        
+        # If prediction is incorrect, determine actual label and copy image
+        if not is_correct:
+            # Actual label is opposite of prediction
+            actual_label = 'REAL' if predicted_label == 'FAKE' else 'FAKE'
+            
+            # Copy image to feedback folder for retraining
+            if scan.get('image_path'):
+                try:
+                    import shutil
+                    source_path = os.path.join(os.path.dirname(__file__), '..', 'frontend', scan['image_path'])
+                    feedback_filename = f"feedback_{scan_id}_{scan['filename']}"
+                    feedback_dest = os.path.join(FEEDBACK_FOLDER, feedback_filename)
+                    
+                    if os.path.exists(source_path):
+                        shutil.copy(source_path, feedback_dest)
+                        feedback_image_path = feedback_filename
+                        print(f"✅ Copied feedback image to: {feedback_dest}")
+                    else:
+                        print(f"⚠️  Source image not found: {source_path}")
+                except Exception as e:
+                    print(f"❌ Error copying feedback image: {e}")
+        
+        # Record feedback in database
+        success = database.add_feedback(
+            scan_id=scan_id,
+            is_correct=is_correct,
+            predicted_label=predicted_label,
+            actual_label=actual_label,
+            image_path=feedback_image_path,
+            confidence=scan.get('confidence')
+        )
+        
+        if success:
+            feedback_type = 'correct' if is_correct else 'incorrect'
+            return jsonify({
+                'message': f'Feedback recorded successfully',
+                'feedback': feedback_type,
+                'actual_label': actual_label
+            })
+        else:
+            return jsonify({'error': 'Failed to record feedback'}), 500
+            
+    except Exception as e:
+        print(f"Feedback error: {e}")
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/feedback/stats', methods=['GET'])
+def get_feedback_stats():
+    """Get feedback statistics"""
+    stats = database.get_feedback_stats()
+    return jsonify(stats)
+
+@app.route('/api/model-info', methods=['GET'])
+def model_info():
+    """Return model information"""
+    return jsonify({
+        'model_name': 'DeepGuard: Advanced Deepfake Detector',
+        'architecture': 'Hybrid CNN-ViT',
+        'components': {
+            'RGB Analysis': Config.USE_RGB,
+            'Frequency Domain': Config.USE_FREQ,
+            'Patch-based Detection': Config.USE_PATCH,
+            'Vision Transformer': Config.USE_VIT
+        },
+        'image_size': Config.IMAGE_SIZE,
+        'device': str(device),
+        'threshold': 0.5
+    })
+
+if __name__ == '__main__':
+    print("=" * 60)
+    print("🚀 DeepGuard - Deepfake Detection System")
+    print("=" * 60)
+    
+    # Load model
+    load_model()
+    
+    print("=" * 60)
+    print("=" * 60)
+    # Check if running on Hugging Face Spaces
+    if os.environ.get("SPACE_ID"):
+        port = 7860
+        print(f"🪐 Detected Hugging Face Space. Forcing port {port}")
+    else:
+        port = int(os.environ.get("PORT", 7860))
+        
+    print(f"🌐 Starting server on http://0.0.0.0:{port}")
+    print("=" * 60)
+    
+    app.run(debug=False, host='0.0.0.0', port=port)

backend/checkers/metadata_checker.py

@@ -0,0 +1,153 @@
+import os
+import json
+import exifread
+try:
+    import c2pa
+except ImportError:
+    c2pa = None
+
+def check_metadata(filepath):
+    """
+    Checks for Content Credentials (C2PA) and specific AI-generation metadata in Exif/XMP.
+    Returns a dictionary with detection status and details.
+    """
+    result = {
+        "detected": False,
+        "method": None,
+        "source": None,
+        "details": {}
+    }
+
+    # 1. Check C2PA / Content Credentials
+    if c2pa:
+        try:
+            # Correct API usage for c2pa-python
+            reader = c2pa.Reader(filepath)
+            manifest_json = reader.json()
+            
+            # Robust check: Convert to string and search for keywords
+            # This avoids dependency on exact JSON structure which might vary
+            json_str = manifest_json.lower()
+            
+            if "dall-e" in json_str:
+                result["detected"] = True
+                result["method"] = "C2PA"
+                result["source"] = "DALL-E"
+                return result
+            if "adobe firefly" in json_str:
+                result["detected"] = True
+                result["method"] = "C2PA"
+                result["source"] = "Adobe Firefly"
+                return result
+            if "bing image creator" in json_str:
+                result["detected"] = True
+                result["method"] = "C2PA"
+                result["source"] = "Bing Image Creator"
+                return result
+            if "my-tool" in json_str: # Example placeholder
+                 pass
+                 
+            # General check for "artificial" or "created" actions if no specific tool found
+            if 'c2pa.actions' in json_str and 'artificial' in json_str:
+                result["detected"] = True
+                result["method"] = "C2PA"
+                result["source"] = "AI Generated (C2PA)"
+                return result
+
+        except Exception as e:
+            # Expected if no C2PA manifest exists
+            # print(f"C2PA Check Info: {e}")
+            pass
+
+    # 2. Check Exif/XMP via ExifRead
+    try:
+        with open(filepath, 'rb') as f:
+            tags = exifread.process_file(f)
+            
+            # Common AI signatures in Exif/XMP/IPTC
+            software_tags = [str(tags.get('Image Software', '')), str(tags.get('0th Software', ''))]
+            description_tags = [str(tags.get('Image ImageDescription', '')), str(tags.get('EXIF UserComment', ''))]
+            
+            # DALL-E 3 often leaves signature in ImageDescription or Software
+            for tag in software_tags + description_tags:
+                tag_lower = tag.lower()
+                if "dall-e" in tag_lower:
+                    result["detected"] = True
+                    result["method"] = "EXIF"
+                    result["source"] = "DALL-E"
+                    return result
+                if "adobe firefly" in tag_lower:
+                    result["detected"] = True
+                    result["method"] = "EXIF"
+                    result["source"] = "Adobe Firefly"
+                    return result
+                if "bing image creator" in tag_lower:
+                    result["detected"] = True
+                    result["method"] = "EXIF"
+                    result["source"] = "Bing Image Creator"
+                    return result
+                if "stable diffusion" in tag_lower:
+                    result["detected"] = True
+                    result["method"] = "EXIF"
+                    result["source"] = "Stable Diffusion"
+                    return result
+
+                # Generic check for other known AI tools based on common signatures
+                for tool in ["midjourney", "runway", "leonardo", "nightcafe", "canva"]:
+                    if tool in tag_lower:
+                        result["detected"] = True
+                        result["method"] = "EXIF"
+                        result["source"] = tool.title() # Capitalize first letter
+                        return result
+                    
+    except Exception as e:
+        print(f"Exif Check Error: {e}")
+
+    # 3. Check PNG Text Chunks (often used by Leonardo, NightCafe, Stable Diffusion)
+    # ExifRead doesn't always catch purely textual PNG chunks "parameters" or "Software"
+    try:
+        from PIL import Image
+        img = Image.open(filepath)
+        img.load() # Load to access info
+        
+        info = img.info or {}
+        
+        # Combine all string values for search
+        search_space = " ".join([str(v).lower() for k, v in info.items()])
+        
+        if "stable diffusion" in search_space:
+             result["detected"] = True
+             result["method"] = "PNG Metadata"
+             result["source"] = "Stable Diffusion"
+             return result
+             
+        if "midjourney" in search_space:
+             result["detected"] = True
+             result["method"] = "PNG Metadata"
+             result["source"] = "Midjourney"
+             return result
+
+        if "leonardo" in search_space:
+             result["detected"] = True
+             result["method"] = "PNG Metadata"
+             result["source"] = "Leonardo AI"
+             return result
+
+        if "nightcafe" in search_space:
+             result["detected"] = True
+             result["method"] = "PNG Metadata"
+             result["source"] = "NightCafe"
+             return result
+
+        if "runway" in search_space:
+             result["detected"] = True
+             result["method"] = "PNG Metadata"
+             result["source"] = "Runway Gen-2"
+             return result
+
+    except Exception as e:
+        # print(f"PNG Check Error: {e}")
+        pass
+
+
+    return result

backend/checkers/watermark_checker.py

@@ -0,0 +1,61 @@
+import os
+try:
+    from imwatermark import WatermarkDecoder
+except ImportError:
+    WatermarkDecoder = None
+
+def check_watermarks(filepath):
+    """
+    Checks for invisible watermarks (specifically Stable Diffusion's 'sd_private').
+    Returns a dictionary with detection status.
+    """
+    result = {
+        "detected": False,
+        "method": None,
+        "source": None
+    }
+
+    if not WatermarkDecoder:
+        return result
+
+    try:
+        # Standard Stable Diffusion watermark is 48 bits, detecting 'bytes'
+        decoder = WatermarkDecoder('bytes', 32) # Standard length for some, but SD often uses 48 bits?
+        # Actually, the 'invisible-watermark' library default for SD
+        # typically uses method='dwtDct' combined with a specific decoder.
+        
+        # Let's try the standard approach for Stable Diffusion detection
+        # The library usually has a specific 'bytes' decoder for it.
+        
+        bgr_image = None
+        import cv2
+        bgr_image = cv2.imread(filepath)
+        if bgr_image is None:
+            return result
+            
+        decoder = WatermarkDecoder('bytes', 136) # Try generic length or specific
+        watermark = decoder.decode(bgr_image, 'dwtDct')
+        
+        # Stable Diffusion's watermark often decodes to explicit bytes.
+        # However, a more robust way often used is checking for the specific signature 
+        # that the library 'invisible-watermark' looks for.
+        
+        # Simplifying: If we decode *something* valid/structured, it might be watermarked.
+        # But for 'sd_private', we verify specifically.
+        
+        # Note: A simpler check using the library's built-in script logic:
+        # It usually converts "Stability AI" string to bits?
+        
+        # If we successfully decode the known string "Stability" or derivatives.
+        decoded_text = watermark.decode('utf-8', errors='ignore')
+        
+        if "Stability" in decoded_text or "sd_private" in decoded_text :
+            result["detected"] = True
+            result["method"] = "Invisible Watermark"
+            result["source"] = "Stable Diffusion"
+        
+    except Exception as e:
+        # print(f"Watermark Check Error: {e}")
+        pass
+        
+    return result

backend/database.py

@@ -0,0 +1,253 @@
+import sqlite3
+import datetime
+import os
+
+DB_NAME = os.path.join(os.path.dirname(__file__), 'database.db')
+
+def get_db_connection():
+    try:
+        conn = sqlite3.connect(DB_NAME)
+        conn.row_factory = sqlite3.Row
+        return conn
+    except sqlite3.Error as e:
+        print(f"Database error: {e}")
+        return None
+
+def init_db():
+    conn = get_db_connection()
+    if conn:
+        try:
+            conn.execute('''
+                CREATE TABLE IF NOT EXISTS history (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    filename TEXT NOT NULL,
+                    prediction TEXT NOT NULL,
+                    confidence REAL NOT NULL,
+                    fake_probability REAL NOT NULL,
+                    real_probability REAL NOT NULL,
+                    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP
+                )
+            ''')
+            conn.commit()
+            print("✅ Database initialized successfully.")
+        except sqlite3.Error as e:
+            print(f"Error initializing database: {e}")
+        
+        # Migration: Add image_path, notes, tags if not exists
+        try:
+            conn.execute('ALTER TABLE history ADD COLUMN image_path TEXT')
+            print("✅ Added image_path column.")
+        except sqlite3.Error:
+            pass # Column likely exists
+
+        try:
+            conn.execute('ALTER TABLE history ADD COLUMN notes TEXT')
+            print("✅ Added notes column.")
+        except sqlite3.Error:
+            pass
+
+        try:
+            conn.execute('ALTER TABLE history ADD COLUMN tags TEXT')
+            print("✅ Added tags column.")
+        except sqlite3.Error:
+            pass
+
+        try:
+            conn.execute('ALTER TABLE history ADD COLUMN session_id TEXT')
+            print("✅ Added session_id column.")
+        except sqlite3.Error:
+            pass
+        
+        # Create feedback table for user feedback on predictions
+        try:
+            conn.execute('''
+                CREATE TABLE IF NOT EXISTS feedback (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    scan_id INTEGER NOT NULL,
+                    user_feedback TEXT NOT NULL,
+                    predicted_label TEXT NOT NULL,
+                    actual_label TEXT,
+                    image_path TEXT,
+                    confidence REAL,
+                    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
+                    FOREIGN KEY (scan_id) REFERENCES history(id)
+                )
+            ''')
+            conn.commit()
+            print("✅ Feedback table initialized successfully.")
+        except sqlite3.Error as e:
+            print(f"Error initializing feedback table: {e}")
+            
+        finally:
+            conn.close()
+
+def add_scan(filename, prediction, confidence, fake_prob, real_prob, image_path="", session_id=None):
+    conn = get_db_connection()
+    if conn:
+        try:
+            cursor = conn.execute('''
+                INSERT INTO history (filename, prediction, confidence, fake_probability, real_probability, image_path, session_id)
+                VALUES (?, ?, ?, ?, ?, ?, ?)
+            ''', (filename, prediction, confidence, fake_prob, real_prob, image_path, session_id))
+            conn.commit()
+            scan_id = cursor.lastrowid
+            return scan_id
+        except sqlite3.Error as e:
+            print(f"Error adding scan: {e}")
+            return None
+        finally:
+            conn.close()
+    return None
+
+def get_history(session_id=None):
+    conn = get_db_connection()
+    if conn:
+        try:
+            query = 'SELECT * FROM history'
+            params = []
+            if session_id:
+                query += ' WHERE session_id = ? OR session_id IS NULL' # Allow seeing public/legacy items if desired, or strictly session specific
+                # Strict session isolation:
+                query = 'SELECT * FROM history WHERE session_id = ?'
+                params = [session_id]
+            else:
+                # If no session_id provided (legacy behavior), maybe show all or none?
+                # Let's show only items with NULL session_id to avoid leaking user data
+                query = 'SELECT * FROM history WHERE session_id IS NULL'
+            
+            query += ' ORDER BY timestamp DESC'
+            cursor = conn.execute(query, params)
+            history = [dict(row) for row in cursor.fetchall()]
+            return history
+        except sqlite3.Error as e:
+            print(f"Error retrieving history: {e}")
+            return []
+        finally:
+            conn.close()
+    return []
+
+def clear_history(session_id=None):
+    conn = get_db_connection()
+    if conn:
+        try:
+            if session_id:
+                conn.execute('DELETE FROM history WHERE session_id = ?', (session_id,))
+            else:
+                conn.execute('DELETE FROM history WHERE session_id IS NULL')
+            conn.commit()
+            return True
+        except sqlite3.Error as e:
+            print(f"Error clearing history: {e}")
+            return False
+        finally:
+            conn.close()
+    return False
+
+def delete_scan(scan_id, session_id=None):
+    conn = get_db_connection()
+    if conn:
+        try:
+            if session_id:
+                conn.execute('DELETE FROM history WHERE id = ? AND session_id = ?', (scan_id, session_id))
+            else:
+                conn.execute('DELETE FROM history WHERE id = ? AND session_id IS NULL', (scan_id,))
+            conn.commit()
+            return True
+        except sqlite3.Error as e:
+            print(f"Error deleting scan: {e}")
+            return False
+        finally:
+            conn.close()
+    return False
+
+def update_scan(scan_id, data):
+    conn = get_db_connection()
+    if conn:
+        try:
+            fields = []
+            values = []
+            if 'notes' in data:
+                fields.append("notes = ?")
+                values.append(data['notes'])
+            if 'tags' in data:
+                fields.append("tags = ?")
+                values.append(data['tags'])
+            
+            if not fields:
+                return True
+                
+            values.append(scan_id)
+            query = f"UPDATE history SET {', '.join(fields)} WHERE id = ?"
+            conn.execute(query, tuple(values))
+            conn.commit()
+            return True
+        except sqlite3.Error as e:
+            print(f"Error updating scan: {e}")
+            return False
+        finally:
+            conn.close()
+    return False
+
+def add_feedback(scan_id, is_correct, predicted_label, actual_label=None, image_path=None, confidence=None):
+    """Record user feedback on a prediction"""
+    conn = get_db_connection()
+    if conn:
+        try:
+            user_feedback = 'correct' if is_correct else 'incorrect'
+            conn.execute('''
+                INSERT INTO feedback (scan_id, user_feedback, predicted_label, actual_label, image_path, confidence)
+                VALUES (?, ?, ?, ?, ?, ?)
+            ''', (scan_id, user_feedback, predicted_label, actual_label, image_path, confidence))
+            conn.commit()
+            return True
+        except sqlite3.Error as e:
+            print(f"Error adding feedback: {e}")
+            return False
+        finally:
+            conn.close()
+    return False
+
+def get_incorrect_predictions():
+    """Get all incorrect predictions for model retraining"""
+    conn = get_db_connection()
+    if conn:
+        try:
+            cursor = conn.execute('''
+                SELECT f.*, h.filename 
+                FROM feedback f
+                LEFT JOIN history h ON f.scan_id = h.id
+                WHERE f.user_feedback = 'incorrect'
+                ORDER BY f.timestamp DESC
+            ''')
+            incorrect = [dict(row) for row in cursor.fetchall()]
+            return incorrect
+        except sqlite3.Error as e:
+            print(f"Error retrieving incorrect predictions: {e}")
+            return []
+        finally:
+            conn.close()
+    return []
+
+def get_feedback_stats():
+    """Get statistics on user feedback"""
+    conn = get_db_connection()
+    if conn:
+        try:
+            cursor = conn.execute('''
+                SELECT 
+                    COUNT(*) as total_feedback,
+                    SUM(CASE WHEN user_feedback = 'correct' THEN 1 ELSE 0 END) as correct_count,
+                    SUM(CASE WHEN user_feedback = 'incorrect' THEN 1 ELSE 0 END) as incorrect_count
+                FROM feedback
+            ''')
+            stats = dict(cursor.fetchone())
+            return stats
+        except sqlite3.Error as e:
+            print(f"Error retrieving feedback stats: {e}")
+            return {'total_feedback': 0, 'correct_count': 0, 'incorrect_count': 0}
+        finally:
+            conn.close()
+    return {'total_feedback': 0, 'correct_count': 0, 'incorrect_count': 0}
+
+# Initialize DB on module load
+init_db()

backend/requirements_web.txt

@@ -0,0 +1,12 @@
+flask==3.0.0
+flask-cors==4.0.0
+torch
+torchvision
+opencv-python
+albumentations
+Pillow
+numpy
+safetensors
+c2pa-python
+invisible-watermark==0.2.0
+ExifRead

frontend/analysis.html

@@ -0,0 +1,491 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>Analysis Dashboard - DeepGuard</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="variables.css">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="animations.css">
+    <link rel="stylesheet" href="pwa.css">
+    <link rel="stylesheet" href="responsive-additions.css">
+    <link rel="stylesheet" href="responsive-pages.css">
+
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="manifest.json">
+    <meta name="theme-color" content="#E3F514">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="DeepGuard">
+    <link rel="apple-touch-icon" href="logo.ico">
+</head>
+
+<body class="analysis-page">
+    <div class="mesh-background"></div>
+    <div id="particles-js"></div>
+
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="container">
+            <div class="nav-content">
+                <a href="index.html" class="logo">
+                    <img src="logo.svg" alt="DeepGuard Logo" class="logo-img">
+                    <span class="logo-text">Deep<span class="gradient-text">Guard</span></span>
+                </a>
+
+                <!-- Hamburger Menu Button (Mobile) -->
+                <button class="hamburger" id="hamburger" aria-label="Toggle navigation menu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+
+                <!-- Navigation Menu -->
+                <div class="nav-menu-wrapper">
+                    <ul class="nav-menu">
+                        <li><a href="index.html">Home</a></li>
+                        <li><a href="analysis.html" class="active">Analysis</a></li>
+                        <li><a href="history.html">History</a></li>
+                    </ul>
+                    <a href="index.html" class="btn-secondary-nav">← Back to Home</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="analysis-container">
+        <div class="analysis-grid">
+            <!-- Left Side: Upload & Preview -->
+            <div class="upload-section">
+                <div class="section-header-small">
+                    <h2>Media Input</h2>
+                    <p>Upload image for AI analysis</p>
+                </div>
+
+                <div class="upload-area animate-pulse-glow" id="uploadArea">
+                    <div class="upload-icon animate-float">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                            <polyline points="17 8 12 3 7 8" />
+                            <line x1="12" y1="3" x2="12" y2="15" />
+                        </svg>
+                    </div>
+                    <h3 class="upload-title">Drop Images Here</h3>
+                    <p class="upload-description">Supports JPG, PNG, WEBP, MP4, AVI, MOV · Max 100MB</p>
+                    <p class="upload-description" style="margin-top: 8px; font-size: 13px; opacity: 0.8;">📋 Or press
+                        Ctrl/Cmd+V to paste from clipboard</p>
+                    <p class="file-count-badge" id="fileCountBadge" style="display: none;"></p>
+                    <input type="file" id="fileInput" accept="image/*,video/*" multiple hidden>
+                    <button class="btn-primary" onclick="document.getElementById('fileInput').click()"
+                        aria-label="Select files to upload">Select
+                        Files</button>
+                    <!-- Scanner Line Effect -->
+                    <div class="scanner-line"></div>
+                </div>
+
+                <!-- File Queue Preview -->
+                <div class="file-queue-container" id="fileQueueContainer" style="display: none;">
+                    <div class="queue-header">
+                        <div class="queue-title-section">
+                            <h3 class="queue-title">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-inline"
+                                    aria-hidden="true">
+                                    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
+                                    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
+                                </svg>
+                                Upload Queue
+                            </h3>
+                            <span class="queue-count-badge" id="queueCount"
+                                aria-label="Number of files in queue">0</span>
+                        </div>
+                        <div class="queue-actions">
+                            <button class="btn-secondary-small" onclick="document.getElementById('fileInput').click()"
+                                title="Add more files" aria-label="Add more files to queue">
+                                + Add More
+                            </button>
+                            <button class="btn-secondary-small" onclick="clearQueue()" title="Clear all files"
+                                aria-label="Clear all files from queue">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-inline"
+                                    aria-hidden="true">
+                                    <polyline points="3 6 5 6 21 6"></polyline>
+                                    <path
+                                        d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
+                                    </path>
+                                    <line x1="10" y1="11" x2="10" y2="17"></line>
+                                    <line x1="14" y1="11" x2="14" y2="17"></line>
+                                </svg>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                    <div class="file-queue" id="fileQueue"></div>
+                    <div class="queue-footer">
+                        <button class="btn-secondary-outline" onclick="clearQueue()" style="flex: 1;"
+                            aria-label="Back to upload area">
+                            ← Back to Upload
+                        </button>
+                        <button class="btn-primary" onclick="processUploadQueue()" style="flex: 2;" id="startUploadBtn"
+                            aria-label="Start analysis processing">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-inline"
+                                aria-hidden="true">
+                                <path
+                                    d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z">
+                                </path>
+                                <path
+                                    d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z">
+                                </path>
+                                <path d="M9 12H4s.55-3.03 2-5c1.62-2.2 5-3 5-3"></path>
+                                <path d="M12 15v5s3.03-.55 5-2c2.2-1.62 3-5 3-5"></path>
+                            </svg>
+                            Start Analysis
+                        </button>
+                    </div>
+                </div>
+
+                <div class="preview-area" id="previewArea" style="display: none;">
+                    <img id="previewImage" src="" alt="Preview">
+                    <img id="heatmapOverlay" src="" alt="Heatmap"
+                        style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.5s ease;">
+
+                    <div class="heatmap-toggle-container" id="heatmapToggle" style="display: none;">
+                        <span class="toggle-label">Heatmap</span>
+                        <label class="switch">
+                            <input type="checkbox" id="heatmapSwitch">
+                            <span class="slider round"></span>
+                        </label>
+                    </div>
+
+                    <button class="btn-close-preview" onclick="resetAnalysis()" aria-label="Close preview"
+                        title="Close Preview">×</button>
+                </div>
+                <!-- Multi-Stage Processing Overlay -->
+                <div id="processingOverlay" class="processing-overlay-enhanced" style="display: none;">
+                    <div class="processing-content-enhanced">
+                        <!-- Model Status Badge -->
+                        <div class="model-status-badge" id="modelStatusBadge" style="display: none;">
+                            <span class="status-dot"></span>
+                            <span class="status-text">Model Status: <strong
+                                    id="modelStatusText">Checking...</strong></span>
+                        </div>
+
+                        <!-- Spinner -->
+                        <div class="neural-spinner">
+                            <div class="spinner-ring"></div>
+                            <div class="spinner-ring"></div>
+                            <div class="spinner-ring"></div>
+                        </div>
+
+                        <!-- Main Status Title -->
+                        <h2 class="processing-title-enhanced" id="processingMainTitle">Analyzing Media</h2>
+
+                        <!-- Step Progress Indicators -->
+                        <div class="progress-steps" id="progressSteps">
+                            <div class="progress-step" data-step="upload">
+                                <div class="step-icon">📤</div>
+                                <div class="step-label">Uploading</div>
+                            </div>
+                            <div class="progress-step" data-step="connect">
+                                <div class="step-icon">🔌</div>
+                                <div class="step-label">Connecting</div>
+                            </div>
+                            <div class="progress-step" data-step="warmup">
+                                <div class="step-icon">⏳</div>
+                                <div class="step-label">Warming Up</div>
+                            </div>
+                            <div class="progress-step" data-step="analyze">
+                                <div class="step-icon">🔍</div>
+                                <div class="step-label">Analyzing</div>
+                            </div>
+                            <div class="progress-step" data-step="generate">
+                                <div class="step-icon">✨</div>
+                                <div class="step-label">Finalizing</div>
+                            </div>
+                        </div>
+
+                        <!-- Status Message -->
+                        <p class="processing-message" id="processingMessage">
+                            Please don't refresh • Your media is safe and never stored
+                        </p>
+
+                        <!-- Warm-Up Alert (Hidden by default) -->
+                        <div class="warmup-alert" id="warmupAlert" style="display: none;">
+                            <div class="warmup-icon">⏳</div>
+                            <div class="warmup-content">
+                                <div class="warmup-progress-wrapper" style="width: 100%;">
+                                    <div
+                                        style="display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #fff;">
+                                        <span>Model Waking Up</span>
+                                        <span id="warmupPercent">0%</span>
+                                    </div>
+                                    <div
+                                        style="width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; position: relative;">
+                                        <div id="warmupProgressFill"
+                                            style="width: 0%; height: 100%; background: #E3F514; border-radius: 10px; transition: width 0.3s linear; box-shadow: 0 0 10px rgba(227, 245, 20, 0.5);">
+                                        </div>
+                                    </div>
+                                    <p class="warmup-reassurance"
+                                        style="margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.6);">✓
+                                        Starting cloud instance (first run only)</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Right Side: Results & Metrics -->
+            <div class="results-section" id="resultsSection">
+                <div class="empty-state">
+                    <div class="empty-icon animate-float" aria-hidden="true"
+                        style="opacity: 0.6; color: var(--accent-yellow);">
+                        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
+                        </svg>
+                    </div>
+                    <h3 style="font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 8px;">Ready to
+                        Analyze</h3>
+                    <p style="max-width: 280px; margin: 0 auto; line-height: 1.6;">Upload media to start the DeepGuard
+                        detection pipeline</p>
+                </div>
+
+                <div class="analysis-results" style="display: none;">
+                    <div class="verdict-card" id="verdictCard">
+                        <span class="verdict-label">DETECTION RESULT</span>
+                        <h1 class="verdict-title" id="verdictTitle">--</h1>
+                        <div id="detectionBadges" class="detection-badges"></div>
+                        <div class="confidence-meter">
+                            <div class="meter-bar">
+                                <div class="meter-fill" id="confidenceBar"></div>
+                            </div>
+                            <span class="meter-value" id="confidenceValue">0%</span>
+                        </div>
+                    </div>
+
+                    <!-- Feedback Section -->
+                    <div class="feedback-section" id="feedbackSection" style="display: none;">
+                        <div class="feedback-header">
+                            <h4>Was this prediction correct?</h4>
+                            <p>Your feedback helps improve the model</p>
+                        </div>
+                        <div class="feedback-buttons">
+                            <button class="btn-feedback btn-feedback-correct" id="btnFeedbackCorrect"
+                                onclick="submitFeedback(true)">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                                    <polyline points="20 6 9 17 4 12"></polyline>
+                                </svg>
+                                Prediction is Correct
+                            </button>
+                            <button class="btn-feedback btn-feedback-wrong" id="btnFeedbackWrong"
+                                onclick="submitFeedback(false)">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                                </svg>
+                                Prediction is Wrong
+                            </button>
+                        </div>
+                        <div class="feedback-message" id="feedbackMessage" style="display: none;"></div>
+                    </div>
+
+                </div>
+
+                <div class="metrics-grid">
+                    <!-- Chart Container -->
+                    <div class="metric-card"
+                        style="grid-column: span 2; display: flex; justify-content: center; align-items: center; padding: 20px;">
+                        <canvas id="probabilityChart" style="max-height: 150px;"></canvas>
+                    </div>
+
+                    <div class="metric-card" style="position: relative; overflow: hidden;">
+                        <div
+                            style="position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-yellow), transparent); border-radius: 3px 3px 0 0;">
+                        </div>
+                        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent-yellow)"
+                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <polyline points="12 6 12 12 16 14"></polyline>
+                            </svg>
+                            <span class="metric-label" style="margin-bottom: 0;">Scan Time</span>
+                        </div>
+                        <span class="metric-value" id="scanTimeDisplay">--</span>
+                    </div>
+                    <div class="metric-card" style="position: relative; overflow: hidden;">
+                        <div
+                            style="position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-yellow), transparent); border-radius: 3px 3px 0 0;">
+                        </div>
+                        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent-yellow)"
+                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
+                                <path d="M2 17l10 5 10-5"></path>
+                                <path d="M2 12l10 5 10-5"></path>
+                            </svg>
+                            <span class="metric-label" style="margin-bottom: 0;">Model Version</span>
+                        </div>
+                        <span class="metric-value">Mark V</span>
+                    </div>
+                </div>
+
+                <div class="analysis-details"
+                    style="background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 24px; position: relative; overflow: hidden;">
+                    <div
+                        style="position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-yellow), transparent);">
+                    </div>
+                    <h4
+                        style="display: flex; align-items: center; gap: 10px; font-family: var(--font-display); margin-bottom: 12px;">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent-yellow)"
+                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                            <polyline points="14 2 14 8 20 8"></polyline>
+                            <line x1="16" y1="13" x2="8" y2="13"></line>
+                            <line x1="16" y1="17" x2="8" y2="17"></line>
+                            <polyline points="10 9 9 9 8 9"></polyline>
+                        </svg>
+                        Forensic Analysis
+                    </h4>
+                    <p id="analysisText" style="color: var(--text-secondary); line-height: 1.7;">Waiting for analysis...
+                    </p>
+
+                    <button class="btn-primary" id="downloadReportBtn"
+                        style="margin-top: 20px; width: 100%; display: none; position: relative; overflow: hidden;"
+                        onclick="generatePDFReport()">
+                        📄 Download Forensic Report
+                    </button>
+                </div>
+            </div>
+        </div>
+        </div>
+
+        <!-- Statistics Overview -->
+        <div class="container" style="max-width: 1200px; margin-top: 60px;" id="statisticsSection">
+            <div class="section-header">
+                <h2 class="section-title">Analysis <span class="gradient-text">Statistics</span></h2>
+                <p class="section-subtitle">Overview of your detection history</p>
+            </div>
+            <div class="statistics-grid">
+                <div class="stat-card"
+                    style="--accent-color: var(--accent-yellow); animation: fadeInUp 0.5s ease backwards; animation-delay: 0.1s;">
+                    <div
+                        style="position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-yellow), transparent); border-radius: 3px 3px 0 0;">
+                    </div>
+                    <div class="stat-icon"
+                        style="background: rgba(227, 245, 20, 0.1); border-radius: 14px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; border: 1px solid rgba(227, 245, 20, 0.2);">
+                        📊</div>
+                    <div class="stat-value" id="totalScans">0</div>
+                    <div class="stat-label">Total Analyzed</div>
+                </div>
+                <div class="stat-card"
+                    style="--accent-color: #ff6b6b; animation: fadeInUp 0.5s ease backwards; animation-delay: 0.2s;">
+                    <div
+                        style="position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ff6b6b, transparent); border-radius: 3px 3px 0 0;">
+                    </div>
+                    <div class="stat-icon"
+                        style="background: rgba(255, 107, 107, 0.1); border-radius: 14px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; border: 1px solid rgba(255, 107, 107, 0.2);">
+                        ⚠️</div>
+                    <div class="stat-value" id="fakeCount">0</div>
+                    <div class="stat-label">Fake Detected</div>
+                </div>
+                <div class="stat-card"
+                    style="--accent-color: #10b981; animation: fadeInUp 0.5s ease backwards; animation-delay: 0.3s;">
+                    <div
+                        style="position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #10b981, transparent); border-radius: 3px 3px 0 0;">
+                    </div>
+                    <div class="stat-icon"
+                        style="background: rgba(16, 185, 129, 0.1); border-radius: 14px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; border: 1px solid rgba(16, 185, 129, 0.2);">
+                        ✓</div>
+                    <div class="stat-value" id="realCount">0</div>
+                    <div class="stat-label">Real Images</div>
+                </div>
+                <div class="stat-card"
+                    style="--accent-color: #3b82f6; animation: fadeInUp 0.5s ease backwards; animation-delay: 0.4s;">
+                    <div
+                        style="position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #3b82f6, transparent); border-radius: 3px 3px 0 0;">
+                    </div>
+                    <div class="stat-icon"
+                        style="background: rgba(59, 130, 246, 0.1); border-radius: 14px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; border: 1px solid rgba(59, 130, 246, 0.2);">
+                        🎯</div>
+                    <div class="stat-value" id="avgConfidence">0%</div>
+                    <div class="stat-label">Avg Confidence</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Recent Analyses -->
+        <div class="container" style="max-width: 1200px; margin-top: 40px; padding-bottom: 60px;" id="recentSection">
+            <div class="section-header">
+                <h2 class="section-title">Recent <span class="gradient-text">Analyses</span></h2>
+                <a href="history.html" class="btn-secondary" style="font-size: 14px;">View All History →</a>
+            </div>
+            <div class="recent-grid" id="recentGrid">
+                <!-- Recent items will be populated here -->
+            </div>
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer" style="position: relative; z-index: 1;">
+        <div class="container">
+            <div class="footer-content-minimal">
+                <div class="footer-brand">
+                    <div class="logo">
+                        <img src="logo.svg" alt="DeepGuard Logo" class="logo-img">
+                        <span class="logo-text">Deep<span style="color: var(--accent-yellow);">Guard</span></span>
+                    </div>
+                </div>
+                <p class="footer-tagline-premium">Protecting digital truth with AI</p>
+                <div class="footer-links-premium">
+                    <a href="https://harshasnade-deepfake-detection.hf.space" target="_blank"
+                        class="footer-link-premium-item">
+                        <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face">
+                        <span>Models</span>
+                    </a>
+                    <a href="https://github.com/Harshvardhan-Asnade/Deepfake-Model" target="_blank"
+                        class="footer-link-premium-item">
+                        <svg viewBox="0 0 24 24" fill="currentColor">
+                            <path
+                                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                        </svg>
+                        <span>GitHub</span>
+                    </a>
+                </div>
+                <div class="footer-copyright-premium">
+                    <p>&copy; 2024 <span style="color: var(--accent-yellow); font-weight: 700;">DeepGuard</span></p>
+                </div>
+            </div>
+        </div>
+        <div class="footer-glow-enhanced"></div>
+        <div class="footer-glow"></div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
+    <!-- Toast Container -->
+    <div id="toastContainer" class="toast-container" aria-live="polite" aria-atomic="true"></div>
+
+    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
+    <script src="motion.js"></script>
+    <script src="script.js"></script>
+    <script src="mobile.js"></script>
+    <script src="pwa.js"></script>
+
+
+</body>
+
+</html>

frontend/animations.css

@@ -0,0 +1,440 @@
+/* ==================== PREMIUM ANIMATIONS ==================== */
+
+/* SMOOTH FADE IN UP */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 40px, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.animate-fade-up {
+    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+    opacity: 0;
+    /* Init hidden */
+}
+
+/* STAGGER DELAYS (utility classes) */
+.delay-100 {
+    animation-delay: 0.1s;
+}
+
+.delay-200 {
+    animation-delay: 0.2s;
+}
+
+.delay-300 {
+    animation-delay: 0.3s;
+}
+
+.delay-400 {
+    animation-delay: 0.4s;
+}
+
+.delay-500 {
+    animation-delay: 0.5s;
+}
+
+/* PULSING GLOW (for upload area) */
+@keyframes pulseGlow {
+    0% {
+        box-shadow: 0 0 0 0 rgba(227, 245, 20, 0.1);
+        border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    50% {
+        box-shadow: 0 0 30px 0 rgba(227, 245, 20, 0.2);
+        border-color: rgba(227, 245, 20, 0.5);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 rgba(227, 245, 20, 0.1);
+        border-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.animate-pulse-glow {
+    animation: pulseGlow 3s infinite;
+    will-change: box-shadow, border-color;
+}
+
+/* SHIMMER BORDER (for premium feel) */
+@keyframes borderShimmer {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    100% {
+        background-position: 200% 50%;
+    }
+}
+
+/* FLOATING ELEMENT */
+@keyframes floatY {
+
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+.animate-float {
+    animation: floatY 6s ease-in-out infinite;
+    will-change: transform;
+    /* Hint for GPU promotion */
+}
+
+/* SCANNER LINE (High Performance - transform based) */
+@keyframes scanLine {
+    0% {
+        transform: translateY(0%);
+        opacity: 0;
+    }
+
+    10% {
+        opacity: 1;
+    }
+
+    90% {
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+}
+
+.scanner-line {
+    position: absolute;
+    top: 0;
+    /* Positioned at top, animated via transform */
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--accent-yellow);
+    box-shadow: 0 0 10px var(--accent-yellow);
+    animation: scanLine 2s linear infinite;
+    z-index: 10;
+    pointer-events: none;
+    will-change: transform, opacity;
+    /* Hint for GPU */
+}
+
+/* ==================== ENHANCED PROCESSING OVERLAY ==================== */
+
+/* Neural Spinner Animation */
+@keyframes neuralPulse {
+
+    0%,
+    100% {
+        transform: scale(1);
+        opacity: 0.8;
+    }
+
+    50% {
+        transform: scale(1.1);
+        opacity: 1;
+    }
+}
+
+@keyframes spinRing {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.neural-spinner {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 30px;
+}
+
+.neural-spinner .spinner-ring {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 3px solid transparent;
+    border-top-color: var(--accent-yellow);
+    border-radius: 50%;
+    animation: spinRing 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+.neural-spinner .spinner-ring:nth-child(2) {
+    width: 70%;
+    height: 70%;
+    top: 15%;
+    left: 15%;
+    border-top-color: rgba(227, 245, 20, 0.6);
+    animation-duration: 2s;
+    animation-direction: reverse;
+}
+
+.neural-spinner .spinner-ring:nth-child(3) {
+    width: 50%;
+    height: 50%;
+    top: 25%;
+    left: 25%;
+    border-top-color: rgba(227, 245, 20, 0.3);
+    animation-duration: 2.5s;
+}
+
+/* Progress Steps Animation */
+@keyframes stepPulse {
+
+    0%,
+    100% {
+        transform: scale(1);
+        opacity: 0.5;
+    }
+
+    50% {
+        transform: scale(1.15);
+        opacity: 1;
+    }
+}
+
+@keyframes stepGlow {
+
+    0%,
+    100% {
+        box-shadow: 0 0 10px rgba(227, 245, 20, 0.3);
+    }
+
+    50% {
+        box-shadow: 0 0 20px rgba(227, 245, 20, 0.6);
+    }
+}
+
+.progress-steps {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin: 30px 0;
+    flex-wrap: wrap;
+}
+
+.progress-step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    opacity: 0.4;
+    transition: all 0.4s ease;
+}
+
+.progress-step .step-icon {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    transition: all 0.4s ease;
+}
+
+.progress-step .step-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.6);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.progress-step.active {
+    opacity: 1;
+}
+
+.progress-step.active .step-icon {
+    background: rgba(227, 245, 20, 0.1);
+    border-color: var(--accent-yellow);
+    animation: stepPulse 2s ease-in-out infinite, stepGlow 2s ease-in-out infinite;
+}
+
+.progress-step.active .step-label {
+    color: var(--accent-yellow);
+}
+
+.progress-step.completed {
+    opacity: 0.7;
+}
+
+.progress-step.completed .step-icon {
+    background: rgba(16, 185, 129, 0.1);
+    border-color: #10B981;
+}
+
+.progress-step.completed .step-label {
+    color: #10B981;
+}
+
+/* Processing Overlay Enhanced */
+.processing-overlay-enhanced {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.95);
+    backdrop-filter: blur(10px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    padding: 20px;
+}
+
+.processing-content-enhanced {
+    max-width: 600px;
+    width: 100%;
+    text-align: center;
+    animation: fadeInUp 0.5s ease-out;
+}
+
+.model-status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    margin-bottom: 20px;
+    font-size: 13px;
+}
+
+.model-status-badge .status-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--accent-yellow);
+    border-radius: 50%;
+    animation: neuralPulse 2s ease-in-out infinite;
+}
+
+.model-status-badge .status-text {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.processing-title-enhanced {
+    font-size: 28px;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 20px;
+    letter-spacing: 0.5px;
+}
+
+.processing-message {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.6);
+    margin-top: 20px;
+}
+
+/* Warm-Up Alert */
+.warmup-alert {
+    margin-top: 30px;
+    padding: 20px;
+    background: rgba(227, 245, 20, 0.05);
+    border: 1px solid rgba(227, 245, 20, 0.2);
+    border-radius: 12px;
+    text-align: left;
+    display: flex;
+    gap: 15px;
+    animation: fadeInUp 0.5s ease-out;
+}
+
+.warmup-icon {
+    font-size: 32px;
+    flex-shrink: 0;
+}
+
+.warmup-content h4 {
+    margin: 0 0 10px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--accent-yellow);
+}
+
+.warmup-content p {
+    margin: 8px 0;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.8);
+    line-height: 1.5;
+}
+
+.warmup-content .warmup-reason {
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.6);
+    font-style: italic;
+}
+
+.warmup-content .warmup-reassurance {
+    font-size: 13px;
+    color: #10B981;
+    font-weight: 500;
+}
+
+/* ==================== ACCESSIBILITY: REDUCED MOTION ==================== */
+@media (prefers-reduced-motion: reduce) {
+
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+
+    .animate-fade-up,
+    .animate-float,
+    .animate-pulse-glow {
+        animation: none !important;
+    }
+}
+
+/* Reduced animations on mobile for performance */
+@media (max-width: 768px) {
+    .animate-float {
+        animation-duration: 8s;
+    }
+
+    .animate-pulse-glow {
+        animation-duration: 4s;
+    }
+
+    .progress-steps {
+        gap: 12px;
+    }
+
+    .progress-step .step-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 20px;
+    }
+
+    .progress-step .step-label {
+        font-size: 10px;
+    }
+
+    .warmup-alert {
+        flex-direction: column;
+        text-align: center;
+    }
+}

frontend/assets/demo_part1.mov

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

frontend/assets/demo_part2.mov

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

frontend/assets/extension_demo.mov

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

frontend/config.js

@@ -0,0 +1,6 @@
+const CONFIG = {
+    // API Base URL - Automatically selects between Localhost and Production
+    API_BASE_URL: window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
+        ? 'http://localhost:7860'
+        : 'https://harshasnade-deepfake-detection.hf.space'
+};

frontend/extension.css

@@ -0,0 +1,93 @@
+/* Extension Section Styles */
+.extension-section {
+    padding: 100px 0;
+    position: relative;
+    background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
+    overflow: hidden;
+}
+
+.extension-container {
+    display: flex;
+    align-items: center;
+    gap: 60px;
+    position: relative;
+    z-index: 2;
+}
+
+.extension-content {
+    flex: 1;
+    text-align: left;
+}
+
+.extension-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: rgba(227, 245, 20, 0.1);
+    border: 1px solid rgba(227, 245, 20, 0.2);
+    border-radius: 100px;
+    color: var(--accent-yellow);
+    font-size: 14px;
+    margin-bottom: 24px;
+}
+
+.extension-title {
+    font-size: 48px;
+    line-height: 1.1;
+    margin-bottom: 20px;
+    font-family: 'Space Grotesk', sans-serif;
+}
+
+.extension-description {
+    font-size: 18px;
+    color: #999;
+    margin-bottom: 32px;
+    line-height: 1.6;
+}
+
+.chrome-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    background: #fff;
+    color: #000;
+    padding: 16px 32px;
+    border-radius: 12px;
+    font-weight: 700;
+    font-size: 18px;
+    transition: all 0.3s ease;
+    text-decoration: none;
+}
+
+.chrome-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
+}
+
+.chrome-icon {
+    width: 24px;
+    height: 24px;
+}
+
+.extension-visual {
+    flex: 1.2;
+}
+
+/* Reusing window styles but ensuring specific context */
+.extension-visual .video-window-container {
+    box-shadow: -30px 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 968px) {
+    .extension-container {
+        flex-direction: column-reverse;
+        /* Video on top on mobile? Or text on top? usually text on top. column-reverse puts visual first if html is visual last. */
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .extension-content {
+        text-align: center;
+    }
+}

frontend/hero_reveal.js

@@ -0,0 +1,214 @@
+/**
+ * Hero Reveal Effect
+ * Adapts the fluid reveal effect for the hero section of the main landing page.
+ */
+
+class HeroFluidReveal {
+    constructor() {
+        this.container = document.getElementById('heroRevealContainer');
+        this.canvas = document.getElementById('revealCanvas');
+
+        if (!this.container || !this.canvas) {
+            console.warn('HeroFluidReveal: Container or Canvas not found.');
+            return;
+        }
+
+        this.ctx = this.canvas.getContext('2d');
+
+        // Use the new IDs we added to index.html
+        this.bgImg = document.getElementById('hero-img-bg');
+        this.revealImg = document.getElementById('hero-img-reveal');
+
+        // Initialize state
+        this.width = this.container.offsetWidth;
+        this.height = this.container.offsetHeight;
+
+        // Mouse state (relative to container)
+        this.mouse = { x: this.width / 2, y: this.height / 2 };
+        this.targetMouse = { x: this.width / 2, y: this.height / 2 };
+        this.isMouseOver = false;
+
+        // Blob state
+        this.blob = {
+            x: this.width / 2,
+            y: this.height / 2,
+            vx: 0,
+            vy: 0,
+            radius: 250 // Slightly smaller for hero section if needed, or keep 300
+        };
+
+        // Configuration
+        this.numPoints = 20;
+        this.points = [];
+        this.init();
+    }
+
+    init() {
+        // Point class definition (same as before)
+        this.Point = class {
+            constructor(angle, radius) {
+                this.angle = angle;
+                this.baseRadius = radius;
+                this.radius = radius;
+                this.x = 0;
+                this.y = 0;
+                this.noiseOffset = Math.random() * 1000;
+                this.speed = 0.002 + Math.random() * 0.003;
+            }
+
+            update(centerX, centerY, velocityX, velocityY, time) {
+                const noise = Math.sin(time * this.speed + this.noiseOffset) * 20;
+                const dirX = Math.cos(this.angle);
+                const dirY = Math.sin(this.angle);
+                const dot = dirX * velocityX + dirY * velocityY;
+                const stretch = dot * 1.5;
+                const currentRadius = this.baseRadius + noise - stretch;
+                this.x = centerX + Math.cos(this.angle) * currentRadius;
+                this.y = centerY + Math.sin(this.angle) * currentRadius;
+            }
+        };
+
+        this.resize();
+        window.addEventListener('resize', () => this.resize());
+
+        // Listen to window mouse events to avoid z-index blocking by hero content
+        window.addEventListener('mousemove', (e) => this.onMouseMove(e));
+
+        // Optional: We can still use container bounds to "pause" or hide if needed, 
+        // but for a background effect, continuous tracking is usually better.
+        // Removed container-specific enter/leave to prevent stuttering at edges of children.
+
+        // Initialize points
+        for (let i = 0; i < this.numPoints; i++) {
+            const angle = (i / this.numPoints) * Math.PI * 2;
+            this.points.push(new this.Point(angle, this.blob.radius));
+        }
+
+        // Start loop
+        requestAnimationFrame((t) => this.render(t));
+    }
+
+    resize() {
+        this.width = this.container.offsetWidth;
+        this.height = this.container.offsetHeight;
+        this.canvas.width = this.width;
+        this.canvas.height = this.height;
+    }
+
+    onMouseMove(e) {
+        // Calculate mouse position relative to container
+        const rect = this.container.getBoundingClientRect();
+        this.targetMouse.x = e.clientX - rect.left;
+        this.targetMouse.y = e.clientY - rect.top;
+    }
+
+    updateBlob() {
+        const dx = this.targetMouse.x - this.blob.x;
+        const dy = this.targetMouse.y - this.blob.y;
+
+        // Ease
+        const ease = 0.25;
+        this.blob.vx += dx * ease;
+        this.blob.vy += dy * ease;
+
+        // Friction
+        this.blob.vx *= 0.75;
+        this.blob.vy *= 0.75;
+
+        this.blob.x += this.blob.vx;
+        this.blob.y += this.blob.vy;
+
+        const velX = (this.targetMouse.x - this.blob.x) * 0.1;
+        const velY = (this.targetMouse.y - this.blob.y) * 0.1;
+
+        return { velX, velY };
+    }
+
+    drawBlobPath(time, velX, velY) {
+        this.ctx.beginPath();
+        this.points.forEach(p => p.update(this.blob.x, this.blob.y, velX, velY, time));
+
+        const p0 = this.points[0];
+        const pLast = this.points[this.points.length - 1];
+        const midX = (p0.x + pLast.x) / 2;
+        const midY = (p0.y + pLast.y) / 2;
+
+        this.ctx.moveTo(midX, midY);
+
+        for (let i = 0; i < this.points.length; i++) {
+            const p = this.points[i];
+            const nextP = this.points[(i + 1) % this.points.length];
+            const nextMidX = (p.x + nextP.x) / 2;
+            const nextMidY = (p.y + nextP.y) / 2;
+            this.ctx.quadraticCurveTo(p.x, p.y, nextMidX, nextMidY);
+        }
+        this.ctx.closePath();
+    }
+
+    drawImageCover(img) {
+        const imgRatio = img.width / img.height;
+        const canvasRatio = this.width / this.height;
+        let drawW, drawH, curX, curY;
+
+        if (imgRatio > canvasRatio) {
+            drawH = this.height;
+            drawW = drawH * imgRatio;
+            curX = (this.width - drawW) / 2;
+            curY = 0;
+        } else {
+            drawW = this.width;
+            drawH = drawW / imgRatio;
+            curX = 0;
+            curY = (this.height - drawH) / 2;
+        }
+
+        this.ctx.drawImage(img, curX, curY, drawW, drawH);
+    }
+
+    render(time) {
+        this.ctx.clearRect(0, 0, this.width, this.height);
+
+        // IMPORTANT: We do NOT draw the background image on the canvas.
+        // The background image is an <img> tag in HTML (id="hero-img-bg").
+        // The canvas sits ON TOP of it.
+        // The canvas draws the "Reveal" image ONLY inside the blob.
+
+        // 1. Update Physics
+        const velocity = this.updateBlob();
+
+        // 2. Create Mask and Draw Reveal
+        this.ctx.save();
+        this.drawBlobPath(time, velocity.velX, velocity.velY);
+        this.ctx.clip();
+
+        // Apply theme-based filter
+        const theme = document.documentElement.getAttribute('data-theme');
+        if (theme === 'light') {
+            // Rotates Yellow (~60deg) to Blue (~240deg) -> +180deg
+            this.ctx.filter = 'hue-rotate(190deg) brightness(1.1) saturate(1.2)';
+        } else {
+            this.ctx.filter = 'none';
+        }
+
+        if (this.revealImg && this.revealImg.complete) {
+            this.drawImageCover(this.revealImg);
+        }
+
+        // Optional: Add a subtle border/glow to the reveal edge
+        // this.ctx.lineWidth = 2;
+        // this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
+        // this.ctx.stroke();
+
+        this.ctx.restore();
+
+        requestAnimationFrame((t) => this.render(t));
+    }
+}
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    // Wait slightly to ensure images start loading? 
+    // Actually window.onload is safer for images but DOMContentLoaded is faster for UI.
+    // The class checks .complete so it handles loading.
+    new HeroFluidReveal();
+});

frontend/history.css

@@ -0,0 +1,629 @@
+/* ==================== PREMIUM HISTORY STYLES ==================== */
+
+/* --- Grid System --- */
+.history-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 24px;
+    padding-bottom: 40px;
+}
+
+/* --- Card Styling (Glass + Neon) --- */
+.history-card,
+.grid-card {
+    background: rgba(20, 20, 20, 0.6);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 24px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    animation: fadeInUp 0.6s ease backwards;
+}
+
+.history-card:hover,
+.grid-card:hover {
+    transform: translateY(-8px);
+    border-color: rgba(227, 245, 20, 0.3);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(227, 245, 20, 0.05);
+    background: rgba(255, 255, 255, 0.04);
+}
+
+/* Selection State */
+.grid-card.selected {
+    border-color: var(--accent-yellow);
+    box-shadow: 0 0 0 2px rgba(227, 245, 20, 0.2);
+    background: rgba(227, 245, 20, 0.05);
+}
+
+/* --- Preview Image --- */
+.grid-preview {
+    width: 100%;
+    aspect-ratio: 16/9;
+    object-fit: cover;
+    border-radius: 16px;
+    margin-bottom: 16px;
+    background: #000;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* --- Badges (Neon Glow) --- */
+.table-badge,
+.history-badge,
+.recent-badge {
+    padding: 6px 12px;
+    border-radius: 100px;
+    font-weight: 700;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    backdrop-filter: blur(4px);
+    transition: all 0.3s ease;
+}
+
+.fake,
+.badge-fake,
+.verdict-fake {
+    background: rgba(227, 245, 20, 0.1);
+    color: #E3F514;
+    border: 1px solid rgba(227, 245, 20, 0.3);
+    box-shadow: 0 0 15px rgba(227, 245, 20, 0.15);
+}
+
+.real,
+.badge-real,
+.verdict-real {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10B981;
+    border: 1px solid rgba(16, 185, 129, 0.3);
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
+}
+
+/* --- Controls Bar (Refined) --- */
+.history-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-sm, 16px);
+    margin: var(--gap-md, 30px) 0 var(--gap-sm, 24px) 0;
+    padding: var(--card-padding, 20px);
+    background: rgba(10, 10, 10, 0.6);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 20px;
+    align-items: center;
+}
+
+.search-container {
+    flex: 2;
+    min-width: 250px;
+}
+
+.search-input,
+.filter-select {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 12px 18px;
+    color: #fff;
+    font-size: 14px;
+    transition: all 0.3s ease;
+    font-family: var(--font-primary);
+}
+
+.search-input:focus,
+.filter-select:focus {
+    outline: none;
+    border-color: var(--accent-yellow);
+    background: rgba(255, 255, 255, 0.06);
+    box-shadow: 0 0 15px rgba(227, 245, 20, 0.1);
+}
+
+.filter-controls {
+    display: flex;
+    gap: 12px;
+    flex: 3;
+}
+
+.btn-export,
+.btn-clear-all {
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-weight: 600;
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid transparent;
+}
+
+.btn-export {
+    background: rgba(255, 255, 255, 0.05);
+    color: #fff;
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.btn-export:hover {
+    background: rgba(227, 245, 20, 0.1);
+    color: var(--accent-yellow);
+    border-color: var(--accent-yellow);
+}
+
+.btn-clear-all {
+    background: rgba(255, 59, 48, 0.05);
+    color: #ff3b30;
+    border-color: rgba(255, 59, 48, 0.2);
+}
+
+.btn-clear-all:hover {
+    background: rgba(255, 59, 48, 0.15);
+    border-color: #ff3b30;
+    box-shadow: 0 0 15px rgba(255, 59, 48, 0.1);
+}
+
+/* --- Filter Chips --- */
+.filter-chips {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+    margin-top: 4px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.chip {
+    padding: 8px 16px;
+    border-radius: 100px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: #888;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.chip:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+}
+
+.chip.active {
+    background: var(--accent-yellow);
+    color: #000;
+    border-color: var(--accent-yellow);
+    font-weight: 600;
+    box-shadow: 0 0 15px rgba(227, 245, 20, 0.3);
+}
+
+/* --- History Table (Glass) --- */
+.history-table-container {
+    background: rgba(10, 10, 10, 0.4);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 24px;
+    overflow: hidden;
+    margin-bottom: 60px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+.history-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+.history-table th {
+    background: rgba(255, 255, 255, 0.02);
+    padding: 20px 24px;
+    text-align: left;
+    color: var(--text-secondary);
+    font-weight: 600;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.history-table td {
+    padding: 20px 24px;
+    color: #fff;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+    vertical-align: middle;
+    transition: background 0.2s;
+}
+
+.history-table tbody tr {
+    transition: all 0.2s;
+}
+
+.history-table tbody tr:hover {
+    background: rgba(255, 255, 255, 0.03);
+    transform: scale(1.005);
+    /* Subtle scale interaction */
+}
+
+/* Table Preview */
+.table-preview-img {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.table-filename {
+    font-weight: 500;
+    color: #fff;
+    font-family: var(--font-display);
+    letter-spacing: 0.5px;
+}
+
+.table-date {
+    color: var(--text-secondary);
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+}
+
+/* Actions in Table */
+.table-actions {
+    display: flex;
+    gap: 8px;
+    opacity: 0.6;
+    transition: opacity 0.3s;
+}
+
+.history-table tbody tr:hover .table-actions {
+    opacity: 1;
+}
+
+.btn-table-action {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #fff;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    transition: all 0.2s;
+}
+
+.btn-table-action:hover {
+    background: var(--accent-yellow);
+    color: #000;
+    border-color: var(--accent-yellow);
+    transform: translateY(-2px);
+}
+
+.btn-table-delete:hover {
+    background: #ff3b30;
+    color: #fff;
+    border-color: #ff3b30;
+}
+
+/* --- Empty State --- */
+.empty-state {
+    padding: 80px 20px;
+}
+
+.empty-icon {
+    font-size: 56px;
+    margin-bottom: 24px;
+    opacity: 0.8;
+    filter: drop-shadow(0 0 20px rgba(227, 245, 20, 0.3));
+}
+
+.empty-state h3 {
+    font-size: 24px;
+    font-family: var(--font-display);
+    margin-bottom: 12px;
+}
+
+/* --- Pagination (Refined) --- */
+.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    padding: 30px 0;
+}
+
+.btn-page {
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn-page:hover:not(:disabled) {
+    background: var(--accent-yellow);
+    color: #000;
+    border-color: var(--accent-yellow);
+}
+
+.btn-page:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.page-info {
+    font-variant-numeric: tabular-nums;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+
+
+/* ==================== GRID VIEW STYLES ==================== */
+.history-grid-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+    margin-bottom: 40px;
+}
+
+.grid-card {
+    background: rgba(17, 17, 17, 0.6);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 20px;
+    overflow: hidden;
+    transition: all 0.4s ease;
+    position: relative;
+}
+
+.grid-card:hover {
+    transform: translateY(-5px);
+    border-color: var(--accent-yellow);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+}
+
+.grid-preview {
+    width: 100%;
+    aspect-ratio: 16/9;
+    object-fit: cover;
+    cursor: pointer;
+}
+
+.grid-content {
+    padding: 16px;
+}
+
+.grid-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.grid-title {
+    font-weight: 600;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 4px;
+}
+
+.grid-date {
+    font-size: 12px;
+    color: #666;
+}
+
+/* ==================== BULK SELECTION ==================== */
+.batch-actions-bar {
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%) translateY(100px);
+    background: var(--accent-yellow);
+    color: #000;
+    padding: 12px 24px;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    box-shadow: 0 10px 40px rgba(227, 245, 20, 0.3);
+    z-index: 1000;
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.batch-actions-bar.active {
+    transform: translateX(-50%) translateY(0);
+}
+
+.selection-info {
+    font-weight: 700;
+    font-size: 14px;
+}
+
+.btn-batch {
+    background: rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 6px 16px;
+    border-radius: 20px;
+    font-weight: 600;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn-batch:hover {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+/* ==================== PAGINATION ==================== */
+.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    margin-top: 20px;
+    padding-bottom: 60px;
+}
+
+.btn-page {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #fff;
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.btn-page:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.btn-page.active {
+    background: var(--accent-yellow);
+    color: #000;
+    border-color: var(--accent-yellow);
+}
+
+.page-info {
+    color: #888;
+    font-size: 14px;
+}
+
+/* ==================== PREVIEW MODAL ==================== */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(8px);
+    z-index: 2000;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.modal-container {
+    background: #111;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 24px;
+    width: 100%;
+    max-width: 900px;
+    max-height: 90vh;
+    overflow-y: auto;
+    position: relative;
+    animation: modalSlideUp 0.4s ease;
+}
+
+@keyframes modalSlideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.modal-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: rgba(255, 255, 255, 0.05);
+    border: none;
+    color: #fff;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 20px;
+    z-index: 10;
+}
+
+.modal-body {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+    padding: 40px;
+}
+
+.modal-media {
+    width: 100%;
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.modal-details {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.modal-title {
+    font-size: 24px;
+    font-weight: 700;
+    color: #fff;
+}
+
+.notes-section {
+    margin-top: 10px;
+}
+
+.notes-area {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 12px;
+    color: #fff;
+    font-size: 14px;
+    min-height: 100px;
+    resize: vertical;
+}
+
+.notes-area:focus {
+    outline: none;
+    border-color: var(--accent-yellow);
+}
+
+.btn-save-notes {
+    margin-top: 10px;
+    background: var(--accent-yellow);
+    color: #000;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+@media (max-width: 768px) {
+    .modal-body {
+        grid-template-columns: 1fr;
+        padding: 20px;
+    }
+}

frontend/history.html

@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>Scan History - DeepGuard</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="variables.css">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="history.css">
+    <link rel="stylesheet" href="animations.css">
+    <link rel="stylesheet" href="pwa.css">
+    <link rel="stylesheet" href="responsive-additions.css">
+    <link rel="stylesheet" href="responsive-pages.css">
+
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="manifest.json">
+    <meta name="theme-color" content="#E3F514">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="DeepGuard">
+    <link rel="apple-touch-icon" href="logo.ico">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+
+<body class="analysis-page">
+    <div class="mesh-background"></div>
+    <div id="particles-js"></div>
+
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="container">
+            <div class="nav-content">
+                <a href="index.html" class="logo">
+                    <img src="logo.svg" alt="DeepGuard Logo" class="logo-img">
+                    <span class="logo-text">Deep<span class="gradient-text">Guard</span></span>
+                </a>
+
+                <!-- Hamburger Menu Button (Mobile) -->
+                <button class="hamburger" id="hamburger" aria-label="Toggle navigation menu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+
+                <!-- Navigation Menu -->
+                <div class="nav-menu-wrapper">
+                    <ul class="nav-menu">
+                        <li><a href="index.html">Home</a></li>
+                        <li><a href="analysis.html">Analysis</a></li>
+                        <li><a href="history.html" class="active">History</a></li>
+                    </ul>
+                    <a href="index.html" class="btn-secondary-nav">← Back to Home</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="analysis-container">
+        <div class="container" style="max-width: 1200px; padding-top: 40px;">
+            <div class="section-header">
+                <h2 class="section-title">Scan <span class="gradient-text">History</span></h2>
+                <p class="section-subtitle">View and manage your past detection results</p>
+            </div>
+
+            <!-- Controls Bar -->
+            <div class="history-controls">
+                <div class="search-container">
+                    <input type="text" id="searchInput" class="search-input" placeholder="🔍 Search by filename..."
+                        oninput="handleSearch()">
+                </div>
+
+                <!-- View Toggle -->
+                <div class="view-toggle">
+                    <button class="btn-toggle active" id="listViewBtn" onclick="toggleView('list')" title="List View">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="8" y1="6" x2="21" y2="6"></line>
+                            <line x1="8" y1="12" x2="21" y2="12"></line>
+                            <line x1="8" y1="18" x2="21" y2="18"></line>
+                            <line x1="3" y1="6" x2="3.01" y2="6"></line>
+                            <line x1="3" y1="12" x2="3.01" y2="12"></line>
+                            <line x1="3" y1="18" x2="3.01" y2="18"></line>
+                        </svg>
+                    </button>
+                    <button class="btn-toggle" id="gridViewBtn" onclick="toggleView('grid')" title="Grid View">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="3" y="3" width="7" height="7"></rect>
+                            <rect x="14" y="3" width="7" height="7"></rect>
+                            <rect x="14" y="14" width="7" height="7"></rect>
+                            <rect x="3" y="14" width="7" height="7"></rect>
+                        </svg>
+                    </button>
+                </div>
+
+                <div class="filter-controls">
+                    <select id="filterPrediction" class="filter-select" onchange="applyFilters()">
+                        <option value="all">All Results</option>
+                        <option value="FAKE">Fake Only</option>
+                        <option value="REAL">Real Only</option>
+                    </select>
+
+                    <select id="filterConfidence" class="filter-select" onchange="applyFilters()">
+                        <option value="all">All Confidence</option>
+                        <option value="high">High (>80%)</option>
+                        <option value="medium">Medium (50-80%)</option>
+                        <option value="low">Low (<50%)< /option>
+                    </select>
+
+                    <select id="sortBy" class="filter-select" onchange="applyFilters()">
+                        <option value="date-desc">Latest First</option>
+                        <option value="date-asc">Oldest First</option>
+                        <option value="confidence-desc">Confidence ↓</option>
+                        <option value="confidence-asc">Confidence ↑</option>
+                        <option value="filename-asc">Filename A-Z</option>
+                    </select>
+                </div>
+
+                <div class="export-controls">
+                    <button class="btn-export" onclick="exportHistory('csv')">
+                        📄 Export CSV
+                    </button>
+                    <button class="btn-export" onclick="exportHistory('json')">
+                        📋 Export JSON
+                    </button>
+                    <button class="btn-clear-all" onclick="confirmClearAll()">
+                        🗑 Clear All
+                    </button>
+                </div>
+
+                <!-- Quick Filter Chips -->
+                <div class="filter-chips">
+                    <div class="chip active" onclick="setQuickFilter('all', this)">All SCANS</div>
+                    <div class="chip" onclick="setQuickFilter('FAKE', this)">FAKES Detected</div>
+                    <div class="chip" onclick="setQuickFilter('REAL', this)">REAL Media</div>
+                    <div class="chip" onclick="setQuickFilter('high', this)">High Confidence</div>
+                </div>
+            </div>
+
+            <!-- Results Count -->
+            <div class="results-count" id="resultsCount">
+                Showing <span id="showingCount">0</span> of <span id="totalCount">0</span> results
+            </div>
+
+            <!-- History Table -->
+            <div class="history-table-container" id="historyTableContainer">
+                <table class="history-table" id="historyTable">
+                    <thead>
+                        <tr>
+                            <th style="width: 40px; cursor: default;"><input type="checkbox" id="selectAllCheckbox"
+                                    onclick="toggleSelectAll(this)"></th>
+                            <th>Preview</th>
+                            <th onclick="sortTable('filename')">Filename <span class="sort-indicator"></span></th>
+                            <th onclick="sortTable('prediction')">Result <span class="sort-indicator"></span></th>
+                            <th onclick="sortTable('confidence')">Confidence <span class="sort-indicator"></span></th>
+                            <th onclick="sortTable('timestamp')">Date <span class="sort-indicator"></span></th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="historyTableBody">
+                        <!-- Rows will be populated here -->
+                    </tbody>
+                </table>
+
+                <!-- Empty State -->
+                <div class="empty-state" id="historyEmptyState" style="display: none;">
+                    <div class="empty-icon">📂</div>
+                    <h3>No History Found</h3>
+                    <p>Your recent analysis results will appear here.</p>
+                    <a href="analysis.html" class="btn-mini-corner">
+                        <i class="fas fa-plus"></i> New Analysis
+                    </a>
+                </div>
+
+                <!-- No Results State -->
+                <div class="empty-state" id="noResultsState" style="display: none;">
+                    <div class="empty-icon">🔍</div>
+                    <h3>No Results Found</h3>
+                    <p>Try adjusting your search or filter criteria.</p>
+                </div>
+
+                <!-- Grid View Container -->
+                <div id="historyGridContainer" class="history-grid-container" style="display: none;"></div>
+
+                <!-- Pagination -->
+                <div class="pagination" id="paginationControls">
+                    <button class="btn-page" id="prevPageBtn" onclick="changePage(-1)" disabled>←</button>
+                    <span class="page-info">Page <span id="currentPage">1</span> of <span
+                            id="totalPages">1</span></span>
+                    <button class="btn-page" id="nextPageBtn" onclick="changePage(1)">→</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Batch Actions Bar -->
+        <div id="batchActionsBar" class="batch-actions-bar">
+            <span class="selection-info"><span id="selectedCount">0</span> items selected</span>
+            <button class="btn-batch" onclick="batchExport('csv')">Export CSV</button>
+            <button class="btn-batch" onclick="batchDelete()" style="color: #ff3b30;">Delete Selected</button>
+            <button class="btn-batch" onclick="clearSelection()" style="background: transparent;">Cancel</button>
+        </div>
+
+        <!-- Preview Modal -->
+        <div id="previewModal" class="modal-overlay" onclick="closeModal(event)">
+            <div class="modal-container">
+                <button class="modal-close"
+                    onclick="document.getElementById('previewModal').style.display = 'none'">&times;</button>
+                <div class="modal-body" id="modalBody">
+                    <!-- Populated via JS -->
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
+    <script src="motion.js"></script>
+    <script src="config.js"></script>
+    <script src="script.js"></script>
+    <script src="mobile.js"></script>
+    <script src="pwa.js"></script>
+    <script>
+        // Simple script to handle active state or mock history if we wanted to
+        document.addEventListener('DOMContentLoaded', () => {
+            // We can add mock history here later if requested
+        });
+    </script>
+</body>
+
+</html>

frontend/index.html

@@ -0,0 +1,447 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>DeepGuard - AI-Powered Deepfake Detection System</title>
+    <meta name="description"
+        content="Advanced AI-powered deepfake detection system using cutting-edge machine learning to identify manipulated media with unprecedented accuracy.">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap"
+        rel="stylesheet">
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <link rel="stylesheet" href="variables.css">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="showcase.css">
+    <link rel="stylesheet" href="loader.css">
+    <link rel="stylesheet" href="video_player.css">
+    <link rel="stylesheet" href="extension.css">
+    <link rel="stylesheet" href="scroll_indicator.css">
+    <link rel="stylesheet" href="orbit.css">
+    <link rel="stylesheet" href="pwa.css">
+    <link rel="stylesheet" href="responsive-additions.css">
+
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="manifest.json">
+    <meta name="theme-color" content="#E3F514">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="DeepGuard">
+    <link rel="apple-touch-icon" href="logo.ico">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+
+<body>
+    <!-- Enhanced Loading Screen -->
+    <div id="loader-wrapper">
+        <!-- Brutalist Counter -->
+        <div class="loader-content brutalist">
+            <p id="loader-quote">IN A WORLD WHERE SEEING IS NO LONGER BELIEVING,<br>OUR SYSTEM EXISTS TO <span
+                    class="quote-highlight">PROTECT THE TRUTH</span></p>
+
+            <!-- Detection Status (Cycling: ANALYZING → REAL? → FAKE?) -->
+            <div class="detection-status" id="detectionStatus">
+                <span class="status-text">ANALYZING...</span>
+            </div>
+        </div>
+
+        <div class="counter-wrapper" style="color: #E3F514; opacity: 1; display: block;">
+            <span id="loader-percent">0</span><span class="percent-symbol">%</span>
+        </div>
+
+        <!-- Meta Information -->
+        <div class="loader-meta">
+            <span>DeepGuard Mark V</span>
+            <span id="loaderTimestamp">INITIALIZING SYSTEM</span>
+        </div>
+    </div>
+    <!-- Animated Background -->
+    <div id="canvas-container"></div>
+    <div class="mesh-background"></div>
+    <!-- Scroll Progress Bar -->
+    <div class="scroll-progress-container">
+        <div class="scroll-progress-bar" id="scrollProgress"></div>
+    </div>
+    <div id="particles-js"></div>
+
+    <!-- Noise Overlay -->
+    <div class="noise-overlay"></div>
+
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="container">
+            <div class="nav-content">
+                <a href="index.html" class="logo">
+                    <img src="logo.svg" alt="DeepGuard Logo" class="logo-img">
+                    <span class="logo-text">Deep<span style="color: var(--accent-yellow);">Guard</span></span>
+                </a>
+
+                <!-- Hamburger Menu Button (Mobile) -->
+                <button class="hamburger" id="hamburger" aria-label="Toggle navigation menu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+
+                <!-- Navigation Menu -->
+                <div class="nav-menu-wrapper">
+                    <ul class="nav-menu">
+                        <li><a href="index.html" class="active">Home</a></li>
+                        <li><a href="analysis.html">Analysis</a></li>
+                        <li><a href="history.html">History</a></li>
+                    </ul>
+                    <a href="analysis.html" class="btn-primary">Get Started</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="hero-background">
+            <!-- Lottie Player Script -->
+            <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+
+            <div class="gradient-orb orb-1"></div>
+            <div class="gradient-orb orb-2"></div>
+            <div class="gradient-orb orb-3"></div>
+
+            <!-- Floating 3D Objects -->
+            <div class="floating-3d-object floating-cube" id="floatingCube">
+                <div class="cube-face cube-front"></div>
+                <div class="cube-face cube-back"></div>
+                <div class="cube-face cube-right"></div>
+                <div class="cube-face cube-left"></div>
+                <div class="cube-face cube-top"></div>
+                <div class="cube-face cube-bottom"></div>
+            </div>
+
+            <div class="floating-3d-object floating-pyramid" id="floatingPyramid">
+                <div class="pyramid-face pyramid-front"></div>
+                <div class="pyramid-face pyramid-back"></div>
+                <div class="pyramid-face pyramid-left"></div>
+                <div class="pyramid-face pyramid-right"></div>
+                <div class="pyramid-face pyramid-base"></div>
+            </div>
+
+            <!-- Fluid Hover Reveal Images -->
+            <div class="hero-reveal-container" id="heroRevealContainer">
+                <!-- Background image removed as per user request -->
+
+                <img src="assets/gemini_reveal.png" alt="AI Detection Foreground" class="reveal-image reveal-top"
+                    id="hero-img-reveal" style="display: none;"> <!-- Hidden, drawn by canvas -->
+                <canvas id="revealCanvas" class="reveal-canvas"></canvas>
+            </div>
+        </div>
+        <div class="container">
+            <div class="hero-content">
+                <div class="hero-badge">
+                    <span class="badge-dot"></span>
+                    <span>AI-Powered Detection</span>
+                </div>
+                <h1 class="hero-title" data-aos="fade-up" data-aos-delay="100">
+                    Protect Reality with
+                    <br />
+                    <span class="gradient-text-hero">Advanced AI Detection</span>
+                </h1>
+                <p class="hero-description" data-aos="fade-up" data-aos-delay="200">
+                    Welcome to the future of media authentication. Our cutting-edge deepfake detection system leverages
+                    state-of-the-art AI to identify manipulated content with unprecedented accuracy.
+                </p>
+                <div class="hero-actions" data-aos="fade-up" data-aos-delay="300">
+                    <a href="analysis.html" class="btn-hero-primary">Try Detection Now</a>
+                    <a href="#live-demo" class="btn-hero-secondary">
+                        <span class="play-icon">▶</span>
+                        Watch Demo
+                    </a>
+                    <a href="#extension" class="btn-hero-white">
+                        <img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Google_Chrome_icon_%28February_2022%29.svg"
+                            alt="Chrome" width="20" height="20">
+                        Get Extension
+                    </a>
+                </div>
+                <div class="hero-stats" data-aos="zoom-in" data-aos-delay="400" data-speed="0.1">
+                    <div class="stat-item">
+                        <div class="stat-value">97%</div>
+                        <div class="stat-label">Accuracy Rate</div>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat-item">
+                        <div class="stat-value">1.3M</div>
+                        <div class="stat-label">Dataset Trained On</div>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat-item">
+                        <div class="stat-value">&lt; 2s</div>
+                        <div class="stat-label">Detection Time</div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        </div>
+
+        <!-- Scroll Indicator (Moved out of hero-content to adhere to bottom of viewport) -->
+        <div class="scroll-indicator" data-speed="-0.2">
+            <div class="mouse">
+                <div class="wheel"></div>
+            </div>
+            <div class="arrow-scroll"></div>
+        </div>
+    </section>
+
+    <!-- Section Divider (Wave) -->
+    <div class="section-divider">
+        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+            <path
+                d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
+                class="shape-fill"></path>
+        </svg>
+    </div>
+
+    <!-- Live Demo Section -->
+    <section id="live-demo" class="video-demo-section" style="padding: 60px 0; position: relative; z-index: 5;">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">See It In <span class="gradient-text">Action</span></h2>
+                <p class="section-subtitle">Watch DeepGuard analyze deepfakes in real-time</p>
+            </div>
+
+            <div class="video-window-container" data-aos="zoom-in-up">
+                <!-- Mac Window Header -->
+                <div class="window-header">
+                    <div class="window-controls">
+                        <span class="control red"></span>
+                        <span class="control yellow"></span>
+                        <span class="control green"></span>
+                    </div>
+                    <div class="window-title">DeepGuard Live Analysis - Mark V</div>
+                </div>
+
+                <!-- Video Player -->
+                <div class="video-content-wrapper">
+                    <video id="demoVideoPlayer" class="demo-video" muted playsinline preload="metadata" width="100%">
+                        <source src="assets/demo_part1.mov" type="video/mp4">
+                        <source src="assets/demo_part1.mov" type="video/quicktime">
+                        Your browser does not support the video tag.
+                    </video>
+
+                    <!-- Play Overlay -->
+                    <div class="play-overlay" id="playOverlay">
+                        <div class="play-button">▶</div>
+                    </div>
+
+                    <!-- Progress Bar (Fake OS look) -->
+                    <div class="video-progress-bar">
+                        <div class="progress-fill" id="videoProgress"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Extension Showcase Section -->
+    <section id="extension" class="extension-section">
+        <div class="container">
+            <div class="extension-container">
+                <div class="extension-content" data-aos="fade-right">
+                    <div class="extension-badge">
+                        <span>●</span> Available for Chrome
+                    </div>
+                    <h2 class="extension-title">DeepGuard <span class="gradient-text">Everywhere</span></h2>
+                    <p class="extension-description">
+                        Detect deepfakes in real-time while you browse social media. Our browser extension automatically
+                        scans images on X, Instagram, and Reddit.
+                    </p>
+                    <a href="https://github.com/Harshvardhan-Asnade/Deepfake-Model/tree/main/extension"
+                        class="chrome-btn" target="_blank">
+                        <img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Google_Chrome_icon_%28February_2022%29.svg"
+                            alt="Chrome" class="chrome-icon">
+                        Add to Chrome
+                    </a>
+                </div>
+
+                <div class="extension-visual" data-aos="fade-left">
+                    <div class="video-window-container" style="max-width: 100%;">
+                        <div class="window-header">
+                            <div class="window-controls">
+                                <span class="control red"></span>
+                                <span class="control yellow"></span>
+                                <span class="control green"></span>
+                            </div>
+                            <div class="window-title">DeepGuard Extension Preview</div>
+                        </div>
+                        <div class="video-content-wrapper">
+                            <video class="demo-video" autoplay muted loop playsinline preload="metadata" width="100%">
+                                <source src="assets/extension_demo.mov" type="video/mp4">
+                                <source src="assets/extension_demo.mov" type="video/quicktime">
+                            </video>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+
+
+    <!-- Technology Stack Section -->
+    <section id="technology" class="tech-section">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Built with <span class="gradient-text">Advanced Technology</span></h2>
+                <p class="section-subtitle">Enterprise-grade AI infrastructure powering reliable detection</p>
+            </div>
+            <div class="tech-grid">
+                <div class="tech-card" data-aos="zoom-in" data-aos-delay="100">
+                    <div class="tech-icon">🧠</div>
+                    <h3>EfficientNet V2</h3>
+                    <p>Spatial Feature Extraction</p>
+                </div>
+                <div class="tech-card" data-aos="zoom-in" data-aos-delay="200">
+                    <div class="tech-icon">🌪️</div>
+                    <h3>Swin Transformer</h3>
+                    <p>Global Context Attention</p>
+                </div>
+                <div class="tech-card" data-aos="zoom-in" data-aos-delay="300">
+                    <div class="tech-icon">🌊</div>
+                    <h3>FFT Analysis</h3>
+                    <p>Frequency Domain Inspection</p>
+                </div>
+                <div class="tech-card" data-aos="zoom-in" data-aos-delay="400">
+                    <div class="tech-icon">🐍</div>
+                    <h3>Python & PyTorch</h3>
+                    <p>Core AI Framework</p>
+                </div>
+                <div class="tech-card" data-aos="zoom-in" data-aos-delay="500">
+                    <div class="tech-icon">🎯</div>
+                    <h3>Patch Encoder</h3>
+                    <p>Local Artifact Detection</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+
+
+
+
+    <!-- How It Works -->
+    <section class="how-it-works">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">How It <span class="gradient-text">Works</span></h2>
+                <p class="section-subtitle">Advanced AI pipeline for accurate deepfake detection</p>
+            </div>
+            <div class="pipeline">
+                <div class="pipeline-step">
+                    <div class="step-number">01</div>
+                    <div class="step-icon">📤</div>
+                    <h3 class="step-title">Upload Media</h3>
+                    <p class="step-description">Upload your image or video file through our secure platform</p>
+                </div>
+                <div class="pipeline-arrow">→</div>
+                <div class="pipeline-step">
+                    <div class="step-number">02</div>
+                    <div class="step-icon">🔍</div>
+                    <h3 class="step-title">AI Analysis</h3>
+                    <p class="step-description">Deep learning model analyzes pixel patterns and artifacts</p>
+                </div>
+                <div class="pipeline-arrow">→</div>
+                <div class="pipeline-step">
+                    <div class="step-number">03</div>
+                    <div class="step-icon">🧮</div>
+                    <h3 class="step-title">Multi-Modal Fusion</h3>
+                    <p class="step-description">Analyzes frequency (FFT), local patches, and global context
+                        simultaneously</p>
+                </div>
+                <div class="pipeline-arrow">→</div>
+                <div class="pipeline-step">
+                    <div class="step-number">04</div>
+                    <div class="step-icon">✨</div>
+                    <h3 class="step-title">Results</h3>
+                    <p class="step-description">Receive detailed report with confidence score and analysis</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Live Demo Section -->
+    <!-- Demo Section Removed - Moved to top -->
+
+    <!-- CTA Section -->
+    <section class="cta-section">
+        <div class="container">
+            <div class="cta-content">
+                <h2 class="cta-title">Ready to Protect Against Deepfakes?</h2>
+                <p class="cta-description">Join thousands of users trusting our AI-powered detection system</p>
+                <div class="cta-actions">
+                    <a href="analysis.html" class="btn-cta-primary">Get Started Free</a>
+
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content-minimal">
+                <!-- Brand -->
+                <div class="footer-brand">
+                    <div class="logo">
+                        <img src="logo.svg" alt="DeepGuard Logo" class="logo-img">
+                        <span class="logo-text">Deep<span style="color: var(--accent-yellow);">Guard</span></span>
+                    </div>
+                </div>
+
+                <!-- Tagline -->
+                <p class="footer-tagline-premium">Protecting digital truth with AI</p>
+
+                <!-- Links -->
+                <div class="footer-links-premium">
+                    <a href="https://harshasnade-deepfake-detection.hf.space" target="_blank"
+                        class="footer-link-premium-item">
+                        <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face">
+                        <span>Models</span>
+                    </a>
+                    <a href="https://github.com/Harshvardhan-Asnade/Deepfake-Model" target="_blank"
+                        class="footer-link-premium-item">
+                        <svg viewBox="0 0 24 24" fill="currentColor">
+                            <path
+                                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                        </svg>
+                        <span>GitHub</span>
+                    </a>
+                </div>
+
+                <!-- Copyright -->
+                <div class="footer-copyright-premium">
+                    <p>&copy; 2024 <span style="color: var(--accent-yellow); font-weight: 700;">DeepGuard</span></p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Enhanced decorative glows -->
+        <div class="footer-glow-enhanced"></div>
+        <div class="footer-glow"></div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="three_bg.js"></script>
+    <script src="loader.js"></script>
+    <script src="script.js"></script>
+    <script src="hero_reveal.js"></script>
+    <script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
+    <script src="motion.js"></script>
+    <script src="orbit_interaction.js"></script>
+    <script src="mobile.js"></script>
+    <script src="pwa.js"></script>
+</body>
+
+</html>

frontend/loader.css

@@ -0,0 +1,167 @@
+/* ==================== BRUTALIST LOADER ==================== */
+#loader-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000000 !important;
+    z-index: 2147483647 !important;
+    /* Max Z-Index */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    color: #ffffff;
+    font-family: sans-serif;
+    /* Fallback first */
+    transition: transform 0.5s ease-in-out;
+}
+
+#loader-wrapper.loaded {
+    transform: translateY(-100%);
+    pointer-events: none;
+}
+
+/* Brutalist Content */
+.loader-content {
+    text-align: center;
+    position: relative;
+    z-index: 2147483647;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    opacity: 1 !important;
+    visibility: visible !important;
+}
+
+.counter-wrapper {
+    font-size: 10vw;
+    font-weight: 900;
+    font-family: sans-serif;
+    line-height: 1;
+    color: #E3F514 !important;
+    /* Force Yellow */
+    position: absolute;
+    bottom: 40px;
+    right: 40px;
+    margin: 0;
+    display: block;
+    opacity: 1 !important;
+    text-align: right;
+}
+
+#loader-quote {
+    color: #ffffff;
+    font-family: 'Space Grotesk', sans-serif;
+    font-size: 2.5rem;
+    font-weight: 700;
+    text-align: center;
+    max-width: 90%;
+    margin-bottom: 2rem;
+    opacity: 1;
+    line-height: 1.3;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    z-index: 2147483648;
+
+    padding: 0;
+    border: none;
+    box-shadow: none;
+    backdrop-filter: none;
+}
+
+/* Character States for Monkeytype effect (DeepGuard Themed) */
+.char-waiting {
+    color: rgba(255, 255, 255, 0.2);
+    transition: color 0.1s ease;
+}
+
+.char-typed {
+    color: #ffffff;
+    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
+}
+
+.char-current {
+    background-color: #E3F514;
+    color: #000000;
+    border-radius: 0px;
+    /* Brutalist sharp edges */
+}
+
+.quote-highlight {
+    /* Reset glass effect to allow inner spans to control color */
+    background: none;
+    -webkit-text-fill-color: initial;
+    text-fill-color: initial;
+    font-weight: inherit;
+    letter-spacing: inherit;
+    filter: none;
+    display: inline;
+}
+
+/* Remove underline for pure glass text look */
+.quote-highlight::after {
+    display: none;
+}
+
+#loader-percent {
+    color: #E3F514 !important;
+}
+
+.percent-symbol {
+    font-size: 4vw;
+    vertical-align: super;
+    margin-left: 10px;
+    opacity: 1 !important;
+    color: #E3F514 !important;
+}
+
+/* Status Text */
+.detection-status {
+    font-family: monospace, sans-serif;
+    font-size: 1.5rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    font-weight: bold;
+    min-height: 2em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff !important;
+    margin-bottom: 20px;
+}
+
+.status-text {
+    color: #ffffff !important;
+}
+
+/* Meta Information */
+.loader-meta {
+    position: absolute;
+    bottom: 40px;
+    width: 100%;
+    text-align: center;
+    color: #666;
+    font-size: 14px;
+    z-index: 2147483647;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+    .counter-wrapper {
+        font-size: 15vw;
+        bottom: 20px;
+        right: 20px;
+    }
+
+    #loader-quote {
+        font-size: 1.4rem;
+        width: 90%;
+        padding: 1.5rem;
+        letter-spacing: 0.05em;
+    }
+}

frontend/loader.js

@@ -0,0 +1,236 @@
+// ==================== ENHANCED LOADER SYSTEM ====================
+// Countdown Timer and Real/Fake Status Cycling (Minimum 5 seconds)
+
+const initLoader = () => {
+    console.log("Initializing Loader...");
+    const loaderWrapper = document.getElementById('loader-wrapper');
+    const loaderPercent = document.getElementById('loader-percent');
+    const detectionStatus = document.getElementById('detectionStatus');
+    const statusText = detectionStatus?.querySelector('.status-text');
+    const loaderTimestamp = document.getElementById('loaderTimestamp');
+    const loaderQuote = document.getElementById('loader-quote');
+
+    // Global flag for backend readiness (default false)
+    window.isBackendReady = false;
+
+    // Expose status update function
+    window.updateLoaderStatus = (message) => {
+        if (statusText) {
+            statusText.textContent = message;
+            // Clear animations/colors to show this is a sticky state
+            if (detectionStatus) {
+                detectionStatus.classList.remove('analyzing', 'real', 'fake');
+                detectionStatus.classList.add('analyzing');
+            }
+        }
+    };
+
+    if (!loaderWrapper) {
+        console.error("Loader wrapper not found!");
+        return;
+    }
+
+    // Force visibility at start
+    loaderWrapper.style.display = 'flex';
+    loaderWrapper.style.opacity = '1';
+
+    // Prevent double initialization
+    if (loaderWrapper.dataset.initialized) return;
+    loaderWrapper.dataset.initialized = "true";
+
+    let progress = 0;
+    const targetProgress = 100;
+    let currentStatus = 0;
+    const startTime = Date.now();
+    const minimumDuration = 3500; // 3.5 seconds (Optimized for better UX)
+
+    // Safety Timeout - Force remove loader after 2 minutes (120000ms) to allow for cold starts
+    // If backend is completely dead, this ensures user isn't stuck forever.
+    setTimeout(() => {
+        if (loaderWrapper && loaderWrapper.style.display !== 'none' && !loaderWrapper.classList.contains('loaded')) {
+            console.warn("Loader safety timeout triggered - forcing removal.");
+            loaderWrapper.classList.add('loaded');
+            setTimeout(() => {
+                loaderWrapper.style.display = 'none';
+            }, 800);
+        }
+    }, 120000);
+
+    // Real/Fake Status Messages
+    const statusMessages = [
+        { text: 'ANALYZING...', class: 'analyzing' },
+        { text: 'SCANNING PATTERNS...', class: 'analyzing' },
+        { text: 'REAL?', class: 'real' },
+        { text: 'CHECKING AUTHENTICITY...', class: 'analyzing' },
+        { text: 'FAKE?', class: 'fake' },
+        { text: 'VERIFYING DATA...', class: 'analyzing' }
+    ];
+
+    // Update timestamp
+    const updateTimestamp = () => {
+        const now = new Date();
+        const timeStr = now.toLocaleTimeString('en-US', { hour12: false });
+        if (loaderTimestamp) {
+            loaderTimestamp.textContent = `SYSTEM TIME: ${timeStr}`;
+        }
+    };
+    updateTimestamp();
+    const timeInterval = setInterval(updateTimestamp, 1000);
+
+    // Cycle through status messages
+    let statusInterval;
+    const cycleStatus = () => {
+        // If external system says we are waiting (via explicit message override), stop cycling
+        // We'll use a property on the statusText or just check text content if it matches our "Starting..." message?
+        // Simpler: Just rely on the animation loop. If we are paused at 99%, we stop cycling.
+
+        if (!statusText || !detectionStatus) return;
+
+        // If we are waiting for backend (progress capped at 99), stop cycling status text
+        if (progress >= 99 && !window.isBackendReady) {
+            return;
+        }
+
+        const status = statusMessages[currentStatus];
+        statusText.textContent = status.text;
+
+        // Remove all status classes
+        detectionStatus.classList.remove('analyzing', 'real', 'fake');
+        // Add current class
+        detectionStatus.classList.add(status.class);
+
+        currentStatus = (currentStatus + 1) % statusMessages.length;
+    };
+
+    // Start cycling status every 800ms
+    cycleStatus();
+    statusInterval = setInterval(cycleStatus, 800);
+
+    // Countdown Timer Animation - Smooth progression from 0 to 100
+    let lastFrameTime = startTime;
+
+    // Pre-process loader quotes for typing effect
+    let allChars = [];
+    if (loaderQuote && !loaderQuote.dataset.processed) {
+        loaderQuote.dataset.processed = "true";
+
+        const processNode = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent;
+                // Skip empty text nodes that are just whitespace to avoid weird spacing gaps if flex/grid were used, 
+                // but for standard flow, whitespace is needed. However, large blocks of whitespace can be ignored.
+                if (text.trim().length === 0 && text.length > 0) {
+                    // Keep the whitespace node as is
+                    return;
+                }
+
+                const fragment = document.createDocumentFragment();
+                const map = text.split('');
+                map.forEach(char => {
+                    const span = document.createElement('span');
+                    span.textContent = char;
+                    span.className = 'char-waiting'; // Start in waiting state
+                    fragment.appendChild(span);
+                    allChars.push(span);
+                });
+                node.replaceWith(fragment);
+            } else if (node.nodeType === Node.ELEMENT_NODE) {
+                if (node.tagName !== 'BR') {
+                    Array.from(node.childNodes).forEach(processNode);
+                }
+            }
+        };
+
+        Array.from(loaderQuote.childNodes).forEach(processNode);
+
+        // Reveal the quote container after processing spans
+        // Synchronous update to prevent frame flicker
+        loaderQuote.style.opacity = '1';
+    }
+
+    function animateLoader() {
+        const now = Date.now();
+        const elapsed = now - startTime;
+
+        // Calculate exact progress based on time (0 to 100 over 5 seconds)
+        let exactProgress = Math.min((elapsed / minimumDuration) * 100, 100);
+
+        // BLOCKING: If backend is not ready, cap progress at 99%
+        if (!window.isBackendReady && exactProgress >= 99) {
+            // TIMEOUT FALLBACK: If we've been waiting too long (> 8 seconds), just let them in.
+            if (elapsed > 8000) {
+                console.warn("Backend check timed out - proceeding anyway.");
+                window.isBackendReady = true;
+            } else {
+                exactProgress = 99;
+                // Update status text if it hasn't been updated yet to show waiting state
+                if (statusText && statusText.textContent !== "STARTING SERVER..." && statusText.textContent !== "WAITING FOR BACKEND...") {
+                    // We rely on script.js calling updateLoaderStatus, but we can also set a default here if stuck
+                    // But let's let script.js drive the specific message
+                }
+            }
+        }
+
+        // Update progress value directly (no interpolation to avoid jumps)
+        progress = exactProgress;
+
+        if (loaderPercent) {
+            loaderPercent.textContent = Math.floor(progress);
+        }
+
+        if (allChars.length > 0) {
+            const totalChars = allChars.length;
+            // Calculate how many characters should be lit up based on progress
+            // We want all chars lit by 100%
+            const charsToLight = Math.floor((progress / 100) * totalChars);
+
+            allChars.forEach((charSpan, index) => {
+                if (index < charsToLight) {
+                    charSpan.className = 'char-typed';
+                } else if (index === charsToLight && index < totalChars) {
+                    charSpan.className = 'char-current';
+                } else {
+                    charSpan.className = 'char-waiting';
+                }
+            });
+        } else if (loaderQuote) {
+            // Fallback if processing failed
+            loaderQuote.style.opacity = progress / 100;
+        }
+
+        // Only finish when minimum time has elapsed AND backend is ready
+        if (elapsed >= minimumDuration && progress >= 100 && window.isBackendReady === true) {
+            // Ensure we show 100%
+            if (loaderPercent) {
+                loaderPercent.textContent = '100';
+            }
+
+            // Reached 100% - Exit loader
+            setTimeout(() => {
+                console.log("Loader finished.");
+                clearInterval(statusInterval);
+                clearInterval(timeInterval);
+
+                loaderWrapper.classList.add('loaded'); // CSS transform
+
+                // Remove from DOM after animation
+                setTimeout(() => {
+                    loaderWrapper.style.display = 'none';
+                }, 800); // Wait for CSS transition
+            }, 500); // Brief pause at 100%
+        } else {
+            requestAnimationFrame(animateLoader);
+        }
+    }
+
+    // Start countdown
+    animateLoader();
+};
+
+// Robust initialization
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initLoader);
+} else {
+    // DOM already ready, run immediately
+    initLoader();
+}

frontend/manifest.json

@@ -0,0 +1,90 @@
+{
+    "name": "DeepGuard - AI Deepfake Detection",
+    "short_name": "DeepGuard",
+    "description": "Advanced AI-powered deepfake detection system using cutting-edge machine learning to identify manipulated media with unprecedented accuracy.",
+    "start_url": "/index.html",
+    "scope": "/",
+    "display": "standalone",
+    "background_color": "#000000",
+    "theme_color": "#E3F514",
+    "orientation": "portrait-primary",
+    "icons": [
+        {
+            "src": "icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "logo.ico",
+            "sizes": "16x16 32x32 48x48 64x64",
+            "type": "image/x-icon"
+        }
+    ],
+    "screenshots": [
+        {
+            "src": "/assets/screenshot-desktop.png",
+            "sizes": "1280x720",
+            "type": "image/png",
+            "form_factor": "wide",
+            "label": "DeepGuard Desktop View"
+        },
+        {
+            "src": "/assets/screenshot-mobile.png",
+            "sizes": "750x1334",
+            "type": "image/png",
+            "form_factor": "narrow",
+            "label": "DeepGuard Mobile View"
+        }
+    ],
+    "shortcuts": [
+        {
+            "name": "Analyze Media",
+            "short_name": "Analyze",
+            "description": "Start analyzing media for deepfakes",
+            "url": "/analysis.html",
+            "icons": [
+                {
+                    "src": "/icon-192.png",
+                    "sizes": "192x192",
+                    "type": "image/png"
+                }
+            ]
+        },
+        {
+            "name": "View History",
+            "short_name": "History",
+            "description": "View scan history",
+            "url": "/history.html",
+            "icons": [
+                {
+                    "src": "logo.ico",
+                    "sizes": "192x192",
+                    "type": "image/png"
+                }
+            ]
+        }
+    ],
+    "categories": [
+        "productivity",
+        "utilities",
+        "security"
+    ],
+    "iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7",
+    "prefer_related_applications": false,
+    "related_applications": [],
+    "share_target": {
+        "action": "/analysis.html",
+        "method": "GET",
+        "enctype": "application/x-www-form-urlencoded",
+        "params": {
+            "title": "title",
+            "text": "text",
+            "url": "url"
+        }
+    }
+}

frontend/mobile.js

@@ -0,0 +1,227 @@
+/**
+ * Mobile Navigation & Utilities
+ * Handles hamburger menu, touch events, and mobile-specific optimizations
+ */
+
+(function () {
+    'use strict';
+
+    // ==================== HAMBURGER MENU ====================
+    const hamburger = document.getElementById('hamburger');
+    const navMenuWrapper = document.querySelector('.nav-menu-wrapper');
+    const body = document.body;
+
+    if (hamburger && navMenuWrapper) {
+        // Toggle menu
+        hamburger.addEventListener('click', function () {
+            this.classList.toggle('active');
+            navMenuWrapper.classList.toggle('active');
+            body.classList.toggle('menu-open');
+        });
+
+        // Close menu when clicking on a nav link
+        const navLinks = navMenuWrapper.querySelectorAll('.nav-menu a, .btn-primary');
+        navLinks.forEach(link => {
+            link.addEventListener('click', function () {
+                hamburger.classList.remove('active');
+                navMenuWrapper.classList.remove('active');
+                body.classList.remove('menu-open');
+            });
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener('click', function (event) {
+            const isClickInsideNav = navMenuWrapper.contains(event.target);
+            const isClickOnHamburger = hamburger.contains(event.target);
+
+            if (!isClickInsideNav && !isClickOnHamburger && navMenuWrapper.classList.contains('active')) {
+                hamburger.classList.remove('active');
+                navMenuWrapper.classList.remove('active');
+                body.classList.remove('menu-open');
+            }
+        });
+
+        // Close menu on ESC key
+        document.addEventListener('keydown', function (event) {
+            if (event.key === 'Escape' && navMenuWrapper.classList.contains('active')) {
+                hamburger.classList.remove('active');
+                navMenuWrapper.classList.remove('active');
+                body.classList.remove('menu-open');
+            }
+        });
+    }
+
+    // ==================== VIEWPORT HEIGHT FIX (iOS) ====================
+    // Fix for 100vh on mobile browsers (address bar issue)
+    function setViewportHeight() {
+        const vh = window.innerHeight * 0.01;
+        document.documentElement.style.setProperty('--vh', `${vh}px`);
+    }
+
+    setViewportHeight();
+    window.addEventListener('resize', setViewportHeight);
+    window.addEventListener('orientationchange', setViewportHeight);
+
+    // ==================== TOUCH IMPROVEMENTS ====================
+    // Add touch-active class for better touch feedback
+    document.querySelectorAll('button, a, .tech-card, .showcase-item, .history-card').forEach(element => {
+        element.addEventListener('touchstart', function () {
+            this.classList.add('touch-active');
+        }, { passive: true });
+
+        element.addEventListener('touchend', function () {
+            this.classList.remove('touch-active');
+        }, { passive: true });
+
+        element.addEventListener('touchcancel', function () {
+            this.classList.remove('touch-active');
+        }, { passive: true });
+    });
+
+    // ==================== PREVENT ZOOM ON INPUT FOCUS ====================
+    // Already handled in CSS with font-size: 16px, but adding for completeness
+    const inputs = document.querySelectorAll('input, textarea, select');
+    inputs.forEach(input => {
+        input.addEventListener('focus', function () {
+            const viewport = document.querySelector('meta[name=viewport]');
+            if (viewport) {
+                viewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0';
+            }
+        });
+
+        input.addEventListener('blur', function () {
+            const viewport = document.querySelector('meta[name=viewport]');
+            if (viewport) {
+                viewport.content = 'width=device-width, initial-scale=1.0';
+            }
+        });
+    });
+
+    // ==================== MOBILE DETECTION ====================
+    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    const isTablet = /(iPad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(navigator.userAgent.toLowerCase());
+
+    if (isMobile) {
+        document.body.classList.add('is-mobile');
+    }
+    if (isTablet) {
+        document.body.classList.add('is-tablet');
+    }
+
+    // ==================== SMOOTH SCROLL POLYFILL ====================
+    // For browsers that don't support smooth scrolling
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                e.preventDefault();
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+
+    // ==================== DEBOUNCED RESIZE HANDLER ====================
+    let resizeTimer;
+    window.addEventListener('resize', function () {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(function () {
+            // Trigger custom event that other scripts can listen to
+            window.dispatchEvent(new CustomEvent('debouncedResize'));
+        }, 250);
+    });
+
+    // ==================== LAZY LOAD OPTIMIZATION ====================
+    // Only load images when they're about to enter the viewport
+    if ('IntersectionObserver' in window) {
+        const imageObserver = new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    if (img.dataset.src) {
+                        img.src = img.dataset.src;
+                        img.removeAttribute('data-src');
+                        observer.unobserve(img);
+                    }
+                }
+            });
+        }, {
+            rootMargin: '50px'
+        });
+
+        document.querySelectorAll('img[data-src]').forEach(img => {
+            imageObserver.observe(img);
+        });
+    }
+
+    // ==================== PREVENT OVERSCROLL (iOS) ====================
+    // Prevent rubber-band scrolling on iOS
+    let scrollStartY = 0;
+
+    document.addEventListener('touchstart', function (e) {
+        scrollStartY = e.touches[0].pageY;
+    }, { passive: true });
+
+    document.addEventListener('touchmove', function (e) {
+        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+        const scrollHeight = document.documentElement.scrollHeight;
+        const clientHeight = document.documentElement.clientHeight;
+        const scrollY = e.touches[0].pageY;
+
+        // Prevent overscroll at top
+        if (scrollTop === 0 && scrollY > scrollStartY) {
+            e.preventDefault();
+        }
+
+        // Prevent overscroll at bottom
+        if (scrollTop + clientHeight >= scrollHeight && scrollY < scrollStartY) {
+            e.preventDefault();
+        }
+    }, { passive: false });
+
+    // ==================== PERFORMANCE OPTIMIZATION ====================
+    // Reduce animations on low-end devices
+    if (navigator.hardwareConcurrency && navigator.hardwareConcurrency < 4) {
+        document.body.classList.add('reduce-motion');
+    }
+
+    // Detect slow connection
+    if ('connection' in navigator) {
+        const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+        if (connection && (connection.effectiveType === '2g' || connection.effectiveType === 'slow-2g')) {
+            document.body.classList.add('slow-connection');
+            // Disable heavy animations
+            document.querySelectorAll('.floating-3d-object').forEach(el => {
+                el.style.display = 'none';
+            });
+        }
+    }
+
+    // ==================== HORIZONTAL SCROLL INDICATOR ====================
+    // Add scroll indicator for tables on mobile
+    const scrollableElements = document.querySelectorAll('.history-table-container, .pipeline');
+    scrollableElements.forEach(element => {
+        if (element.scrollWidth > element.clientWidth) {
+            element.classList.add('has-horizontal-scroll');
+
+            // Remove indicator after first scroll
+            element.addEventListener('scroll', function () {
+                this.classList.remove('has-horizontal-scroll');
+            }, { once: true });
+        }
+    });
+
+    // ==================== STATUS BAR COLOR (PWA) ====================
+    // Set theme color for mobile browsers
+    const metaThemeColor = document.querySelector('meta[name=theme-color]');
+    if (!metaThemeColor) {
+        const meta = document.createElement('meta');
+        meta.name = 'theme-color';
+        meta.content = '#000000';
+        document.head.appendChild(meta);
+    }
+
+    console.log('🚀 Mobile optimizations loaded');
+})();

frontend/motion.js

@@ -0,0 +1,122 @@
+/**
+ * DeepGuard Motion Design System
+ * Implements: Lenis Smooth Scroll, Magnetic Buttons, Spotlight Cards, Text Reveals
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+    const lenis = initSmoothScroll();
+    initMagneticButtons();
+    initSpotlightCards();
+    initTextReveals();
+    if (lenis) {
+        initParallax(lenis);
+    }
+});
+
+/* ==================== 1. SMOOTH SCROLL (LENIS) ==================== */
+function initSmoothScroll() {
+    // Check if Lenis is loaded
+    if (typeof Lenis === 'undefined') {
+        console.warn('Lenis not loaded. Skipping smooth scroll.');
+        return null;
+    }
+
+    const lenis = new Lenis({
+        duration: 1.2,
+        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+        direction: 'vertical',
+        gestureDirection: 'vertical',
+        smooth: true,
+        mouseMultiplier: 1,
+        smoothTouch: false,
+        touchMultiplier: 2,
+    });
+
+    function raf(time) {
+        lenis.raf(time);
+        requestAnimationFrame(raf);
+    }
+
+    requestAnimationFrame(raf);
+
+    return lenis;
+}
+
+/* ==================== 2. MAGNETIC BUTTONS ==================== */
+function initMagneticButtons() {
+    const buttons = document.querySelectorAll('.btn-primary, .btn-hero-primary');
+
+    buttons.forEach(btn => {
+        btn.addEventListener('mousemove', (e) => {
+            const rect = btn.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+
+            // Calculate distance from center
+            const centerX = rect.width / 2;
+            const centerY = rect.height / 2;
+
+            const deltaX = (x - centerX) * 0.3; // Strength of pull
+            const deltaY = (y - centerY) * 0.3;
+
+            btn.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+        });
+
+        btn.addEventListener('mouseleave', () => {
+            btn.style.transform = 'translate(0px, 0px)';
+        });
+    });
+}
+
+/* ==================== 3. SPOTLIGHT CARDS ==================== */
+function initSpotlightCards() {
+    const cards = document.querySelectorAll('.feature-card, .showcase-item, .tech-card');
+
+    cards.forEach(card => {
+        card.addEventListener('mousemove', (e) => {
+            const rect = card.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+
+            card.style.setProperty('--mouse-x', `${x}px`);
+            card.style.setProperty('--mouse-y', `${y}px`);
+        });
+    });
+}
+
+/* ==================== 4. TEXT REVEALS ==================== */
+function initTextReveals() {
+    // Targets: Hero title, Section titles
+    const targets = document.querySelectorAll('.hero-title, .section-title');
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('in-view');
+                observer.unobserve(entry.target); // Only animate once
+            }
+        });
+    }, {
+        threshold: 0.2
+    });
+
+    targets.forEach(target => {
+        observer.observe(target);
+    });
+}
+
+/* ==================== 5. PARALLAX EFFECTS ==================== */
+function initParallax(lenis) {
+    const parallaxItems = document.querySelectorAll('[data-speed]');
+
+    if (parallaxItems.length === 0) return;
+
+    lenis.on('scroll', ({ scroll }) => {
+        parallaxItems.forEach(item => {
+            const speed = parseFloat(item.dataset.speed) || 0;
+            // Apply standard translation
+            // Note: This overrides other transforms, so use on dedicated wrappers or elements without other transforms
+            item.style.transform = `translateY(${scroll * speed}px)`;
+        });
+    });
+}

frontend/offline.html

@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>Offline - DeepGuard</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="responsive-additions.css">
+    <style>
+        .offline-container {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: 40px 20px;
+            background: var(--primary-bg);
+        }
+
+        .offline-icon {
+            font-size: 120px;
+            margin-bottom: 30px;
+            opacity: 0.3;
+        }
+
+        .offline-title {
+            font-size: 48px;
+            font-weight: 800;
+            color: var(--accent-yellow);
+            margin-bottom: 20px;
+            font-family: var(--font-display);
+        }
+
+        .offline-message {
+            font-size: 20px;
+            color: var(--text-secondary);
+            max-width: 500px;
+            margin: 0 auto 40px;
+            line-height: 1.6;
+        }
+
+        .offline-actions {
+            display: flex;
+            gap: 16px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .btn-retry {
+            padding: 16px 32px;
+            background: var(--accent-yellow);
+            color: #000;
+            border: none;
+            border-radius: 12px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .btn-retry:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(227, 245, 20, 0.3);
+        }
+
+        .btn-home {
+            padding: 16px 32px;
+            background: transparent;
+            color: var(--accent-yellow);
+            border: 2px solid var(--accent-yellow);
+            border-radius: 12px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-block;
+        }
+
+        .btn-home:hover {
+            background: rgba(227, 245, 20, 0.1);
+        }
+
+        .offline-tips {
+            margin-top: 60px;
+            padding: 30px;
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+            max-width: 600px;
+        }
+
+        .offline-tips h3 {
+            color: var(--accent-yellow);
+            margin-bottom: 15px;
+            font-size: 18px;
+        }
+
+        .offline-tips ul {
+            list-style: none;
+            padding: 0;
+            text-align: left;
+            color: var(--text-secondary);
+        }
+
+        .offline-tips li {
+            padding: 8px 0;
+            padding-left: 30px;
+            position: relative;
+        }
+
+        .offline-tips li::before {
+            content: '•';
+            color: var(--accent-yellow);
+            position: absolute;
+            left: 0;
+            font-size: 24px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="offline-container">
+        <div class="offline-icon">📡</div>
+        <h1 class="offline-title">You're Offline</h1>
+        <p class="offline-message">
+            It looks like you've lost your internet connection. Some features may not be available until you're back
+            online.
+        </p>
+
+        <div class="offline-actions">
+            <button class="btn-retry" onclick="location.reload()">
+                🔄 Try Again
+            </button>
+            <a href="/index.html" class="btn-home">
+                🏠 Go Home
+            </a>
+        </div>
+
+        <div class="offline-tips">
+            <h3>While You're Offline:</h3>
+            <ul>
+                <li>You can still browse previously loaded pages</li>
+                <li>Cached content remains available</li>
+                <li>Analysis history is accessible</li>
+                <li>New analyses require an internet connection</li>
+            </ul>
+        </div>
+    </div>
+
+    <script>
+        // Auto-retry when online
+        window.addEventListener('online', () => {
+            console.log('Connection restored');
+            setTimeout(() => {
+                location.reload();
+            }, 1000);
+        });
+
+        // Check connection status
+        if (navigator.onLine) {
+            console.log('Online - attempting to reload');
+            location.reload();
+        }
+    </script>
+</body>
+
+</html>

frontend/orbit.css

@@ -0,0 +1,274 @@
+/* 3D Orbit - Stabilized & High Fidelity */
+.orbit-section {
+    padding: 100px 0;
+    position: relative;
+    overflow: hidden;
+    background: var(--primary-bg);
+}
+
+.orbit-container {
+    position: relative;
+    height: 750px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    perspective: 1500px;
+}
+
+/* 2D Overlay Elements - High Priority */
+.orbit-info-card {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.9);
+    width: 440px;
+    padding: 40px;
+    background: rgba(5, 5, 5, 0.98);
+    backdrop-filter: blur(30px);
+    border: 2px solid var(--accent-yellow);
+    box-shadow: 0 0 100px rgba(0, 0, 0, 0.95);
+    border-radius: 35px;
+    text-align: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
+        opacity 0.4s ease,
+        visibility 0.4s;
+    z-index: 2000;
+    /* Absolute Top */
+    pointer-events: auto;
+    backface-visibility: hidden;
+}
+
+.orbit-info-card.active {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, -50%) scale(1.0);
+}
+
+.orbit-info-title {
+    font-size: 26px;
+    font-weight: 800;
+    color: var(--accent-yellow);
+    margin-bottom: 12px;
+    text-shadow: 0 0 15px rgba(227, 245, 20, 0.3);
+}
+
+.orbit-info-desc {
+    color: var(--text-secondary);
+    line-height: 1.8;
+    font-size: 16px;
+    margin-bottom: 25px;
+}
+
+.orbit-tag {
+    font-size: 11px;
+    padding: 6px 14px;
+    background: rgba(227, 245, 20, 0.1);
+    border: 1px solid rgba(227, 245, 20, 0.3);
+    color: var(--accent-yellow);
+    border-radius: 25px;
+    font-weight: 700;
+    margin: 0 5px;
+}
+
+/* 3D Stage Space */
+.orbit-stage {
+    position: absolute;
+    width: 1000px;
+    height: 1000px;
+    transform-style: preserve-3d;
+    transform: rotateX(65deg);
+    /* The fixed 3D slant */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+}
+
+.orbit-hub {
+    position: absolute;
+    width: 300px;
+    height: 300px;
+    transform: rotateX(-65deg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 5;
+}
+
+.orbit-hub-inner {
+    width: 140px;
+    height: 140px;
+    background: #000;
+    border: 3px solid var(--accent-yellow);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 55px;
+    box-shadow: 0 0 50px rgba(227, 245, 20, 0.3);
+    animation: hub-pulse-v3 5s infinite ease-in-out;
+}
+
+@keyframes hub-pulse-v3 {
+
+    0%,
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 50px rgba(227, 245, 20, 0.3);
+    }
+
+    50% {
+        transform: scale(1.1);
+        box-shadow: 0 0 80px rgba(227, 245, 20, 0.5);
+    }
+}
+
+/* Spinning Plane */
+.orbit-ring {
+    position: absolute;
+    width: 750px;
+    height: 750px;
+    transform-style: preserve-3d;
+    animation: orbit-main-v4 45s linear infinite;
+    pointer-events: none;
+}
+
+/* Smooth Pause */
+.orbit-ring.paused,
+.orbit-ring.paused .node-content {
+    animation-play-state: paused;
+}
+
+@keyframes orbit-main-v4 {
+    from {
+        transform: rotateZ(0deg);
+    }
+
+    to {
+        transform: rotateZ(360deg);
+    }
+}
+
+/* Nodes */
+.orbit-node {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    background: #000;
+    border: 2px solid rgba(255, 255, 255, 0.15);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    pointer-events: auto;
+    z-index: 100;
+    /* Use transitions carefully to avoid glitching during ring rotation */
+    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    backface-visibility: hidden;
+}
+
+.orbit-node:hover {
+    border-color: var(--accent-yellow);
+    box-shadow: 0 0 40px rgba(227, 245, 20, 0.5);
+    transform: scale(1.3);
+}
+
+.node-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* Billboard */
+    transform: rotateX(-65deg);
+    animation: counter-v4 45s linear infinite;
+    backface-visibility: hidden;
+}
+
+@keyframes counter-v4 {
+    from {
+        transform: rotateX(-65deg) rotateZ(0deg);
+    }
+
+    to {
+        transform: rotateX(-65deg) rotateZ(-360deg);
+    }
+}
+
+.node-icon {
+    width: 70px;
+    height: 70px;
+    object-fit: contain;
+    /* Fix for white backgrounds in icons - Blend them out */
+    mix-blend-mode: screen;
+    filter: drop-shadow(0 0 10px rgba(227, 245, 20, 0.3));
+    pointer-events: none;
+}
+
+/* Static Positions */
+.node-1 {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.node-2 {
+    top: 50%;
+    right: 0;
+    transform: translate(50%, -50%);
+}
+
+.node-3 {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 50%);
+}
+
+.node-4 {
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
+}
+
+/* Mobile */
+@media (max-width: 900px) {
+    .orbit-ring {
+        width: 500px;
+        height: 500px;
+    }
+
+    .node-1 {
+        transform: rotate(0deg) translate(250px);
+    }
+
+    .node-2 {
+        transform: rotate(90deg) translate(250px);
+    }
+
+    .node-3 {
+        transform: rotate(180deg) translate(250px);
+    }
+
+    .node-4 {
+        transform: rotate(270deg) translate(250px);
+    }
+
+    .orbit-info-card {
+        width: 340px;
+        padding: 25px;
+    }
+
+    .orbit-node {
+        width: 90px;
+        height: 90px;
+    }
+
+    .node-icon {
+        width: 45px;
+        height: 45px;
+    }
+}

frontend/orbit_interaction.js

@@ -0,0 +1,112 @@
+const featureData = {
+    fusion: {
+        title: "Hybrid Fusion Architecture",
+        desc: "Combines EfficientNetV2 for spatial details and Swin Transformer V2 for global context with frequency domain analysis.",
+        tags: ["CNN-ViT", "Multi-Modal", "Spatial-Temporal"]
+    },
+    realtime: {
+        title: "Real-Time Analysis",
+        desc: "Lightning-fast detection processing thousands of images per minute with GPU acceleration and optimized pipelines.",
+        tags: ["CUDA", "Batch Process", "Low Latency"]
+    },
+    accuracy: {
+        title: "97% Detection Accuracy",
+        desc: "Industry-leading precision in detecting AI-generated and manipulated media across various generation methods.",
+        tags: ["Verified", "Tested", "SOTA"]
+    },
+    analytics: {
+        title: "Advanced Analytics",
+        desc: "Comprehensive reports with confidence scores, heatmaps, and detailed forensic analysis for every scan.",
+        tags: ["Reports", "Forensics", "Heatmaps"]
+    }
+};
+
+function initRobustOrbit() {
+    const nodes = document.querySelectorAll('.orbit-node');
+    const ring = document.querySelector('.orbit-ring');
+    const card = document.getElementById('orbitInfoCard');
+    const title = document.getElementById('orbitTitle');
+    const desc = document.getElementById('orbitDesc');
+    const tagsContainer = document.getElementById('orbitTags');
+    const hub = document.querySelector('.orbit-hub-inner');
+
+    if (!nodes.length || !ring || !card) return;
+
+    let hoverTimeout;
+    let isHoveringNode = false;
+    let isHoveringCard = false;
+
+    const updateState = () => {
+        if (isHoveringNode || isHoveringCard) {
+            clearTimeout(hoverTimeout);
+            card.classList.add('active');
+            ring.classList.add('paused');
+            if (hub) {
+                hub.style.boxShadow = "0 0 70px var(--accent-yellow)";
+                hub.textContent = "🔍";
+            }
+        } else {
+            hoverTimeout = setTimeout(() => {
+                if (!isHoveringNode && !isHoveringCard) {
+                    card.classList.remove('active');
+                    ring.classList.remove('paused');
+                    if (hub) {
+                        hub.style.boxShadow = "";
+                        hub.textContent = "🛡️";
+                    }
+                }
+            }, 150);
+        }
+    };
+
+    nodes.forEach(node => {
+        node.addEventListener('mouseenter', () => {
+            isHoveringNode = true;
+            const id = node.getAttribute('data-id');
+            const data = featureData[id];
+            if (data) {
+                title.textContent = data.title;
+                desc.textContent = data.desc;
+                tagsContainer.innerHTML = data.tags.map(t => `<span class="orbit-tag">${t}</span>`).join('');
+            }
+            updateState();
+        });
+
+        node.addEventListener('mouseleave', () => {
+            isHoveringNode = false;
+            updateState();
+        });
+    });
+
+    // Keeping it frozen when mouse is over the card itself
+    card.addEventListener('mouseenter', () => {
+        isHoveringCard = true;
+        updateState();
+    });
+
+    card.addEventListener('mouseleave', () => {
+        isHoveringCard = false;
+        updateState();
+    });
+
+    // Stability: Force animation refresh
+    requestAnimationFrame(() => {
+        ring.style.animation = 'none';
+        void ring.offsetWidth;
+        ring.style.animation = 'orbit-main-v4 45s linear infinite';
+
+        document.querySelectorAll('.node-content').forEach(nc => {
+            nc.style.animation = 'none';
+            void nc.offsetWidth;
+            nc.style.animation = 'counter-v4 45s linear infinite';
+        });
+    });
+}
+
+// Multi-method startup
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initRobustOrbit);
+} else {
+    initRobustOrbit();
+}
+window.addEventListener('load', initRobustOrbit);

frontend/pwa.css

@@ -0,0 +1,271 @@
+/* ==================== PWA STYLES ==================== */
+
+/* PWA Install Button */
+.pwa-install-button {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 24px;
+    background: var(--accent-yellow);
+    color: #000;
+    border: none;
+    border-radius: 50px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    box-shadow: 0 10px 40px rgba(227, 245, 20, 0.3);
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    opacity: 0;
+    transform: translateY(20px) scale(0.9);
+    pointer-events: none;
+}
+
+.pwa-install-button.visible {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: all;
+}
+
+.pwa-install-button:hover {
+    transform: translateY(-2px) scale(1.05);
+    box-shadow: 0 15px 50px rgba(227, 245, 20, 0.4);
+}
+
+.pwa-install-button:active {
+    transform: translateY(0) scale(0.98);
+}
+
+.pwa-install-button svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* PWA Update Notification */
+.pwa-update-notification {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%) translateY(-120%);
+    z-index: 10000;
+    background: rgba(0, 0, 0, 0.95);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(227, 245, 20, 0.3);
+    border-radius: 16px;
+    padding: 0;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    max-width: 500px;
+    width: 90%;
+}
+
+.pwa-update-notification.visible {
+    transform: translateX(-50%) translateY(0);
+}
+
+.update-content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 20px;
+    position: relative;
+}
+
+.update-icon {
+    font-size: 40px;
+    flex-shrink: 0;
+}
+
+.update-text {
+    flex: 1;
+}
+
+.update-text strong {
+    color: var(--accent-yellow);
+    font-size: 16px;
+    display: block;
+    margin-bottom: 4px;
+}
+
+.update-text p {
+    color: #888;
+    font-size: 13px;
+    margin: 0;
+}
+
+.update-btn {
+    padding: 10px 20px;
+    background: var(--accent-yellow);
+    color: #000;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.update-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(227, 245, 20, 0.3);
+}
+
+.update-dismiss {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: transparent;
+    border: none;
+    color: #666;
+    font-size: 18px;
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+}
+
+.update-dismiss:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+}
+
+/* iOS Install Prompt */
+.ios-install-prompt {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10000;
+    background: rgba(0, 0, 0, 0.98);
+    backdrop-filter: blur(20px);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 30px 20px;
+    transform: translateY(100%);
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.ios-install-prompt.visible {
+    transform: translateY(0);
+}
+
+.ios-prompt-content {
+    max-width: 500px;
+    margin: 0 auto;
+    position: relative;
+}
+
+.ios-prompt-close {
+    position: absolute;
+    top: -10px;
+    right: 0;
+    background: transparent;
+    border: none;
+    color: #666;
+    font-size: 24px;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ios-prompt-icon {
+    text-align: center;
+    margin-bottom: 15px;
+}
+
+.ios-prompt-content h3 {
+    color: var(--accent-yellow);
+    text-align: center;
+    font-size: 20px;
+    margin-bottom: 10px;
+}
+
+.ios-prompt-content p {
+    color: #888;
+    text-align: center;
+    margin-bottom: 15px;
+}
+
+.ios-prompt-content ol {
+    color: #fff;
+    padding-left: 20px;
+    font-size: 14px;
+    line-height: 1.8;
+}
+
+.ios-prompt-content ol li {
+    margin-bottom: 8px;
+}
+
+.ios-prompt-content ol strong {
+    color: var(--accent-yellow);
+}
+
+/* PWA Mode Adjustments */
+body.pwa-mode {
+    /* Add any PWA-specific styles */
+}
+
+/* iOS PWA Status Bar Spacing */
+body.ios-pwa {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+body.ios-pwa .navbar {
+    padding-top: calc(env(safe-area-inset-top) + 20px);
+}
+
+/* Hide install button on mobile when already in PWA mode */
+body.pwa-mode .pwa-install-button {
+    display: none;
+}
+
+/* Mobile-specific adjustments */
+@media (max-width: 768px) {
+    .pwa-install-button {
+        bottom: 20px;
+        right: 20px;
+        padding: 12px 20px;
+        font-size: 14px;
+    }
+
+    .pwa-update-notification {
+        top: 10px;
+        width: 95%;
+    }
+
+    .update-content {
+        flex-wrap: wrap;
+        padding: 15px;
+    }
+
+    .update-btn {
+        width: 100%;
+        margin-top: 10px;
+    }
+}
+
+/* Slideup animation for simple toast */
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translate(-50%, 20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate(-50%, 0);
+    }
+}

frontend/pwa.js

@@ -0,0 +1,255 @@
+/**
+ * PWA Installation and Service Worker Registration
+ */
+
+(function () {
+    'use strict';
+
+    // ==================== SERVICE WORKER REGISTRATION ====================
+    if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+            navigator.serviceWorker.register('/service-worker.js')
+                .then((registration) => {
+                    console.log('✅ Service Worker registered:', registration.scope);
+
+                    // Check for updates
+                    registration.addEventListener('updatefound', () => {
+                        const newWorker = registration.installing;
+                        console.log('🔄 Service Worker update found');
+
+                        newWorker.addEventListener('statechange', () => {
+                            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                                // New version available
+                                showUpdateNotification();
+                            }
+                        });
+                    });
+                })
+                .catch((error) => {
+                    console.error('❌ Service Worker registration failed:', error);
+                });
+        });
+    }
+
+    // ==================== PWA INSTALL PROMPT ====================
+    let deferredPrompt;
+    let installButton;
+
+    // Listen for install prompt event
+    window.addEventListener('beforeinstallprompt', (e) => {
+        console.log('💾 Install prompt triggered');
+
+        // Prevent Chrome 67 and earlier from automatically showing the prompt
+        e.preventDefault();
+
+        // Store the event for later use
+        deferredPrompt = e;
+
+        // Show install button
+        showInstallButton();
+    });
+
+    // Create and show install button
+    function showInstallButton() {
+        // Check if already installed
+        if (window.matchMedia('(display-mode: standalone)').matches) {
+            console.log('Already installed as PWA');
+            return;
+        }
+
+        // Check if button already exists
+        if (document.getElementById('pwa-install-btn')) return;
+
+        // Create install button
+        installButton = document.createElement('button');
+        installButton.id = 'pwa-install-btn';
+        installButton.className = 'pwa-install-button';
+        installButton.innerHTML = `
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                <polyline points="7 10 12 15 17 10"></polyline>
+                <line x1="12" y1="15" x2="12" y2="3"></line>
+            </svg>
+            <span>Install App</span>
+        `;
+
+        installButton.addEventListener('click', handleInstallClick);
+
+        // Add to page
+        document.body.appendChild(installButton);
+
+        // Fade in animation
+        setTimeout(() => {
+            installButton.classList.add('visible');
+        }, 100);
+    }
+
+    // Handle install button click
+    async function handleInstallClick() {
+        if (!deferredPrompt) return;
+
+        // Show install prompt
+        deferredPrompt.prompt();
+
+        // Wait for user choice
+        const { outcome } = await deferredPrompt.userChoice;
+
+        console.log(`User response to install prompt: ${outcome}`);
+
+        if (outcome === 'accepted') {
+            console.log('✅ PWA installed');
+            hideInstallButton();
+        } else {
+            console.log('❌ PWA installation declined');
+        }
+
+        // Clear the deferredPrompt
+        deferredPrompt = null;
+    }
+
+    // Hide install button
+    function hideInstallButton() {
+        if (installButton) {
+            installButton.classList.remove('visible');
+            setTimeout(() => {
+                if (installButton && installButton.parentNode) {
+                    installButton.remove();
+                }
+            }, 300);
+        }
+    }
+
+    // ==================== DETECT PWA MODE ====================
+    window.addEventListener('DOMContentLoaded', () => {
+        // Check if running as installed PWA
+        const isStandalone = window.matchMedia('(display-mode: standalone)').matches ||
+            window.navigator.standalone ||
+            document.referrer.includes('android-app://');
+
+        if (isStandalone) {
+            console.log('🚀 Running as PWA');
+            document.body.classList.add('pwa-mode');
+
+            // Add iOS status bar spacing
+            if (navigator.userAgent.match(/iPhone|iPad|iPod/)) {
+                document.body.classList.add('ios-pwa');
+            }
+        } else {
+            console.log('🌐 Running in browser');
+        }
+    });
+
+    // ==================== UPDATE NOTIFICATION ====================
+    function showUpdateNotification() {
+        // Check if notification already exists
+        if (document.getElementById('pwa-update-notification')) return;
+
+        const notification = document.createElement('div');
+        notification.id = 'pwa-update-notification';
+        notification.className = 'pwa-update-notification';
+        notification.innerHTML = `
+            <div class="update-content">
+                <div class="update-icon">🔄</div>
+                <div class="update-text">
+                    <strong>New version available!</strong>
+                    <p>Click to update and get the latest features</p>
+                </div>
+                <button class="update-btn" onclick="window.location.reload()">
+                    Update Now
+                </button>
+                <button class="update-dismiss" onclick="this.parentElement.parentElement.remove()">
+                    ✕
+                </button>
+            </div>
+        `;
+
+        document.body.appendChild(notification);
+
+        setTimeout(() => {
+            notification.classList.add('visible');
+        }, 100);
+    }
+
+    // ==================== ONLINE/OFFLINE STATUS ====================
+    window.addEventListener('online', () => {
+        console.log('🌐 Connection restored');
+        showToast('Back online!', 'success');
+    });
+
+    window.addEventListener('offline', () => {
+        console.log('📡 Connection lost');
+        showToast('You are offline. Some features may be limited.', 'warning');
+    });
+
+    // Helper function for toast (if not already defined)
+    function showToast(message, type = 'info') {
+        // Use existing toast function if available
+        if (window.showToast) {
+            window.showToast(message, type);
+            return;
+        }
+
+        // Simple fallback toast
+        const toast = document.createElement('div');
+        toast.className = `simple-toast toast-${type}`;
+        toast.textContent = message;
+        toast.style.cssText = `
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: ${type === 'success' ? '#10b981' : type === 'warning' ? '#f59e0b' : '#3b82f6'};
+            color: white;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 14px;
+            z-index: 10000;
+            animation: slideUp 0.3s ease;
+        `;
+        document.body.appendChild(toast);
+
+        setTimeout(() => {
+            toast.remove();
+        }, 3000);
+    }
+
+    // ==================== iOS ADD TO HOME SCREEN PROMPT ====================
+    function showIOSInstallPrompt() {
+        const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+        const isInStandaloneMode = ('standalone' in window.navigator) && (window.navigator.standalone);
+
+        if (isIOS && !isInStandaloneMode) {
+            // Check if user has seen this before
+            if (localStorage.getItem('ios-install-prompt-dismissed')) {
+                return;
+            }
+
+            const prompt = document.createElement('div');
+            prompt.className = 'ios-install-prompt';
+            prompt.innerHTML = `
+                <div class="ios-prompt-content">
+                    <button class="ios-prompt-close" onclick="this.parentElement.parentElement.remove(); localStorage.setItem('ios-install-prompt-dismissed', 'true');">✕</button>
+                    <div class="ios-prompt-icon">
+                        <img src="/logo.ico" alt="DeepGuard" style="width: 60px; height: 60px; border-radius: 12px;">
+                    </div>
+                    <h3>Install DeepGuard</h3>
+                    <p>Install this app on your iPhone:</p>
+                    <ol>
+                        <li>Tap the <strong>Share</strong> button <svg width="16" height="20" viewBox="0 0 16 20" fill="#0066cc"><path d="M8 0l8 8h-5v12H5V8H0z"/></svg></li>
+                        <li>Select <strong>Add to Home Screen</strong></li>
+                    </ol>
+                </div>
+            `;
+            document.body.appendChild(prompt);
+
+            setTimeout(() => {
+                prompt.classList.add('visible');
+            }, 2000);
+        }
+    }
+
+    // Show iOS prompt after short delay
+    setTimeout(showIOSInstallPrompt, 3000);
+
+    console.log('📱 PWA features initialized');
+})();

frontend/responsive-additions.css

@@ -0,0 +1,898 @@
+/* ==================== COMPREHENSIVE RESPONSIVE FIXES ==================== */
+/* This file contains ALL responsive fixes for the entire frontend */
+/* Preserves exact visual design on desktop while ensuring perfect mobile adaptation */
+
+/* ==================== GLOBAL OVERFLOW PREVENTION ==================== */
+/* ==================== GLOBAL OVERFLOW PREVENTION ==================== */
+html,
+body {
+    overflow-x: hidden !important;
+    max-width: 100%;
+    /* Changed from 100vw to avoid scrollbar width issues */
+    width: 100%;
+    overscroll-behavior-y: none;
+    /* Prevent bounce on mobile if handled by Lenis */
+}
+
+/* Ensure all major containers respect viewport */
+.container,
+.analysis-container,
+.hero,
+.section,
+[class*="-container"],
+[class*="-wrapper"] {
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+/* ==================== UNIVERSAL MEDIA CONSTRAINTS ==================== */
+img,
+video,
+canvas,
+iframe {
+    max-width: 100%;
+    height: auto;
+}
+
+/* ==================== LOADER / ANALYZING SCREEN FIXES ==================== */
+@media (max-height: 700px) {
+
+    /* Fix loader cropping on short screens */
+    #loader-wrapper {
+        padding: 20px;
+    }
+
+    #loader-quote {
+        font-size: clamp(1rem, 4vh, 1.2rem) !important;
+        /* Fluid scaling */
+        margin-bottom: 1rem;
+        max-width: 95%;
+        line-height: 1.2;
+    }
+
+    .counter-wrapper {
+        font-size: clamp(3rem, 8vh, 5rem) !important;
+        /* Stable scaling */
+        bottom: 15px;
+        right: 15px;
+    }
+
+    .detection-status {
+        font-size: 1.2rem !important;
+        margin-bottom: 10px;
+    }
+
+    .loader-meta {
+        bottom: 15px;
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 480px) {
+    #loader-quote {
+        font-size: 1rem !important;
+        padding: 10px;
+        letter-spacing: 0.03em;
+    }
+
+    .counter-wrapper {
+        font-size: clamp(4rem, 12vw, 6rem) !important;
+        bottom: 10px;
+        right: 10px;
+    }
+
+    .percent-symbol {
+        font-size: 0.5em;
+        /* Generic relative size */
+    }
+}
+
+/* ==================== ANALYSIS PAGE: PROCESSING OVERLAY ==================== */
+.processing-overlay {
+    max-width: 100%;
+    max-height: 100%;
+    height: 100dvh;
+    /* Dynamic viewport height */
+    overflow: hidden;
+}
+
+@media (max-width: 768px) {
+    .processing-overlay {
+        padding: 20px;
+    }
+
+    .processing-title {
+        font-size: clamp(16px, 4vw, 18px) !important;
+    }
+
+    .processing-status {
+        font-size: 13px !important;
+    }
+
+    .processing-time {
+        font-size: 12px !important;
+    }
+}
+
+@media (max-height: 600px) {
+    .processing-overlay {
+        padding: 10px;
+    }
+
+    .processing-title {
+        font-size: 16px !important;
+        margin-bottom: 10px;
+    }
+
+    .processing-spinner {
+        width: 40px !important;
+        height: 40px !important;
+    }
+}
+
+/* ==================== PREVIEW AREA: IMAGE/VIDEO CONSTRAINTS ==================== */
+.preview-area {
+    max-width: 100%;
+    /* Use dvh for mobile browser bars */
+    max-height: calc(100dvh - 250px);
+    overflow: hidden;
+}
+
+.preview-area img,
+.preview-area video,
+.preview-area canvas {
+    max-width: 100% !important;
+    max-height: calc(100dvh - 300px) !important;
+    object-fit: contain;
+    width: auto;
+    height: auto;
+}
+
+@media (max-width: 768px) {
+    .preview-area {
+        max-height: 400px;
+        min-height: auto;
+    }
+
+    .preview-area img,
+    .preview-area video,
+    .preview-area canvas {
+        max-height: 350px !important;
+    }
+}
+
+@media (max-height: 700px) {
+    .preview-area {
+        max-height: 300px;
+    }
+
+    .preview-area img,
+    .preview-area video,
+    .preview-area canvas {
+        max-height: 250px !important;
+    }
+}
+
+/* ==================== HEATMAP OVERLAY CONSTRAINTS ==================== */
+.heatmap-overlay,
+.heatmap-container {
+    max-width: 100%;
+    max-height: calc(100vh - 250px);
+    overflow: hidden;
+}
+
+.heatmap-overlay img,
+.heatmap-container img {
+    max-width: 100% !important;
+    max-height: calc(100vh - 300px) !important;
+    object-fit: contain;
+}
+
+@media (max-width: 768px) {
+
+    .heatmap-overlay,
+    .heatmap-container {
+        max-height: 400px;
+    }
+
+    .heatmap-overlay img,
+    .heatmap-container img {
+        max-height: 350px !important;
+    }
+}
+
+/* ==================== VIDEO RESULT PAGE ==================== */
+.video-preview-container {
+    max-width: 100%;
+    max-height: calc(100vh - 200px);
+    overflow: hidden;
+}
+
+.video-preview-container video {
+    max-width: 100% !important;
+    max-height: calc(100vh - 250px) !important;
+    width: auto;
+    height: auto;
+}
+
+@media (max-width: 768px) {
+    .video-preview-container {
+        max-height: 400px;
+    }
+
+    .video-preview-container video {
+        max-height: 350px !important;
+    }
+}
+
+/* ==================== BOTTOM ACTION PANELS / SHEETS ==================== */
+.action-panel,
+.bottom-sheet,
+.queue-footer,
+[class*="action"] {
+    position: relative;
+    bottom: auto;
+    max-width: 100%;
+}
+
+@media (max-width: 768px) {
+
+    .action-panel,
+    .bottom-sheet {
+        position: sticky;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 12px 16px;
+        max-height: 30vh;
+        overflow-y: auto;
+    }
+
+    .queue-footer {
+        flex-direction: column;
+        gap: 10px;
+        padding: 12px;
+    }
+
+    .queue-footer button {
+        width: 100% !important;
+        min-height: 48px;
+    }
+}
+
+/* ==================== FILE QUEUE MOBILE OPTIMIZATION ==================== */
+@media (max-width: 768px) {
+    .file-queue-container {
+        max-height: calc(100vh - 400px);
+        overflow-y: auto;
+    }
+
+    .file-queue-item {
+        padding: 12px;
+        gap: 8px;
+    }
+
+    .queue-header {
+        flex-direction: column;
+        gap: 12px;
+        align-items: stretch;
+    }
+
+    .queue-title {
+        font-size: 16px;
+    }
+
+    .queue-actions {
+        display: flex;
+        gap: 8px;
+        width: 100%;
+    }
+
+    .queue-actions button {
+        flex: 1;
+        min-height: 44px;
+        font-size: 13px;
+    }
+}
+
+/* ==================== MODALS & OVERLAYS ==================== */
+.modal-overlay,
+.overlay {
+    max-width: 100vw;
+    max-height: 100vh;
+    overflow-y: auto;
+}
+
+.modal-container,
+.modal-content {
+    max-width: calc(100vw - 40px);
+    max-height: calc(100vh - 40px);
+    margin: 20px auto;
+    overflow-y: auto;
+}
+
+@media (max-width: 768px) {
+
+    .modal-container,
+    .modal-content {
+        max-width: calc(100vw - 20px);
+        max-height: calc(100vh - 20px);
+        margin: 10px;
+        border-radius: 12px;
+    }
+
+    .modal-close,
+    .btn-close {
+        width: 44px;
+        height: 44px;
+        font-size: 24px;
+    }
+}
+
+/* ==================== CARDS EXCEEDING VIEWPORT HEIGHT ==================== */
+.card,
+.result-card,
+.analysis-card,
+.verdict-card,
+.metric-card {
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+}
+
+@media (max-width: 768px) {
+
+    .card,
+    .result-card,
+    .analysis-card {
+        max-height: none;
+        height: auto;
+    }
+
+    .verdict-card {
+        padding: 20px 16px;
+    }
+}
+
+/* ==================== HISTORY / FILTER PANEL HEIGHT FIXES ==================== */
+.history-controls {
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+}
+
+@media (max-width: 768px) {
+    .history-controls {
+        max-height: none;
+        height: auto;
+        overflow-y: visible;
+    }
+
+    .filter-controls {
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .filter-select {
+        width: 100%;
+        min-width: 100%;
+    }
+
+    .export-controls {
+        flex-direction: column;
+        gap: 10px;
+        width: 100%;
+    }
+
+    .btn-export,
+    .btn-clear-all {
+        width: 100%;
+        min-height: 48px;
+    }
+}
+
+/* ==================== HISTORY TABLE CONSTRAINTS ==================== */
+@media (max-width: 768px) {
+    .history-table-container {
+        max-height: calc(100vh - 350px);
+        overflow-x: auto;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+
+@media (max-width: 640px) {
+    .history-table {
+        min-width: 600px;
+    }
+
+    .table-filename {
+        max-width: 100px;
+    }
+}
+
+/* Floating buttons — only apply to actual UI floating buttons, not decorative */
+@media (max-width: 768px) {
+
+    .floating-button,
+    .btn-floating {
+        position: fixed;
+        bottom: 20px !important;
+        right: 20px !important;
+        width: 56px;
+        height: 56px;
+        max-width: calc(100vw - 40px);
+    }
+}
+
+/* ==================== HERO SECTION SHORT SCREENS ==================== */
+@media (max-height: 700px) {
+    .hero {
+        min-height: auto;
+        padding: 80px 0 40px;
+    }
+
+    .hero-title {
+        font-size: 40px;
+        margin-bottom: 15px;
+    }
+
+    .hero-description {
+        font-size: 15px;
+        margin-bottom: 20px;
+    }
+
+    .hero-stats {
+        margin-top: 20px;
+        gap: 15px;
+    }
+
+    .hero-actions {
+        gap: 10px;
+        margin-top: 20px;
+    }
+}
+
+/* ==================== ULTRA-WIDE SCREENS (2560px+) ==================== */
+@media (min-width: 2560px) {
+    .container {
+        max-width: 1800px;
+    }
+
+    .analysis-container {
+        max-width: 1600px;
+    }
+
+    .hero-content {
+        max-width: 60%;
+    }
+}
+
+/* ==================== EXTREME ASPECT RATIOS (21:9, 32:9) ==================== */
+@media (min-aspect-ratio: 21/9) {
+    .hero-content {
+        max-width: 55%;
+    }
+
+    .analysis-grid {
+        gap: 60px;
+    }
+}
+
+/* ==================== LANDSCAPE MOBILE (SHORT & WIDE) ==================== */
+@media (max-height: 500px) and (orientation: landscape) {
+    .navbar {
+        padding: 6px 0;
+    }
+
+    .analysis-container {
+        padding-top: 70px;
+    }
+
+    .hero {
+        min-height: auto;
+        padding: 50px 0 30px;
+    }
+
+    .hero-title {
+        font-size: 28px;
+    }
+
+    .section-title {
+        font-size: 24px;
+    }
+
+    .upload-area {
+        min-height: 180px;
+    }
+
+    .preview-area {
+        max-height: 250px;
+    }
+
+    /* Force single column even in landscape if screen is too short */
+    .analysis-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .statistics-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* ==================== VERY TALL MOBILE SCREENS ==================== */
+@media (min-height: 900px) and (max-width: 480px) {
+
+    /* Optimize for very tall phones */
+    .upload-area {
+        min-height: 450px;
+    }
+
+    .preview-area {
+        max-height: 500px;
+    }
+
+    .section {
+        padding: 80px 0;
+    }
+}
+
+/* ==================== PWA STANDALONE MODE ==================== */
+@media (display-mode: standalone) {
+    body {
+        overscroll-behavior-y: contain;
+    }
+
+    .navbar {
+        padding-bottom: max(12px, env(safe-area-inset-bottom));
+    }
+
+    .footer {
+        padding-bottom: max(40px, calc(40px + env(safe-area-inset-bottom)));
+    }
+
+    /* Prevent content from hiding behind home indicator */
+    .action-panel,
+    .bottom-sheet,
+    .queue-footer {
+        padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
+    }
+}
+
+/* ==================== EMPTY STATES ==================== */
+.empty-state {
+    max-width: 100%;
+    padding: 40px 20px;
+}
+
+@media (max-width: 768px) {
+    .empty-state {
+        padding: 30px 16px;
+    }
+
+    .empty-icon {
+        font-size: 40px;
+    }
+
+    .empty-state h3 {
+        font-size: 18px;
+    }
+
+    .empty-state p {
+        font-size: 14px;
+    }
+}
+
+/* ==================== GRID LAYOUTS MOBILE OPTIMIZATION ==================== */
+@media (max-width: 768px) {
+
+    .tech-grid,
+    .showcase-grid,
+    .capabilities-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
+    .model-stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .recent-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .pipeline {
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    /* RESPONSIVE: Hide pipeline arrows on mobile since steps stack */
+    .pipeline-arrow {
+        display: none;
+    }
+}
+
+/* ==================== TOUCH TARGET SIZES (WCAG AAA) — Mobile Only ==================== */
+@media (max-width: 768px) {
+
+    button,
+    .btn,
+    .btn-primary,
+    .btn-secondary,
+    .btn-hero-primary,
+    .btn-hero-secondary,
+    .btn-upload,
+    .btn-export,
+    .btn-toggle,
+    .btn-page,
+    .btn-batch,
+    .control-btn,
+    [role="button"] {
+        min-height: 44px;
+        min-width: 44px;
+    }
+
+    /* Checkboxes and radios need larger hit area */
+    [type="checkbox"],
+    [type="radio"] {
+        min-height: 24px;
+        min-width: 24px;
+    }
+}
+
+/* ==================== PREVENT iOS ZOOM ON INPUT FOCUS ==================== */
+@media (max-width: 768px) {
+
+    input,
+    select,
+    textarea {
+        font-size: 16px !important;
+    }
+}
+
+/* ==================== BETTER TAP HIGHLIGHTING ==================== */
+* {
+    -webkit-tap-highlight-color: rgba(227, 245, 20, 0.15);
+}
+
+/* ==================== SAFE SCROLLING ==================== */
+.scrollable {
+    -webkit-overflow-scrolling: touch;
+}
+
+/* ==================== ENSURE BUTTONS DONT WRAP TEXT ==================== */
+@media (max-width: 480px) {
+
+    .btn-primary,
+    .btn-secondary,
+    .btn-hero-primary,
+    .btn-hero-secondary {
+        font-size: 14px;
+        padding: 12px 20px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+/* ==================== STATISTICS SECTION MOBILE ==================== */
+@media (max-width: 480px) {
+    .statistics-grid {
+        grid-template-columns: 1fr !important;
+        gap: 12px;
+    }
+
+    .stat-card {
+        padding: 16px;
+    }
+
+    .stat-value {
+        font-size: 24px;
+    }
+
+    .stat-label {
+        font-size: 12px;
+    }
+}
+
+/* ==================== CONTENT PADDING TOP/BOTTOM FIXES ==================== */
+@media (max-width: 768px) {
+    section {
+        padding: 50px 0;
+    }
+
+    .analysis-container,
+    .history-container {
+        padding-top: 100px;
+        padding-bottom: 40px;
+    }
+}
+
+@media (max-width: 480px) {
+    section {
+        padding: 40px 0;
+    }
+
+    .analysis-container,
+    .history-container {
+        padding-top: 90px;
+        padding-bottom: 30px;
+    }
+}
+
+/* ==================== VIDEO PLAYER RESPONSIVE ==================== */
+.video-container,
+.video-window-container,
+.video-content-wrapper {
+    max-width: 100%;
+    overflow: hidden;
+}
+
+.video-container video,
+.demo-video {
+    max-width: 100%;
+    height: auto;
+}
+
+@media (max-width: 768px) {
+    .img-comp-container {
+        height: 300px !important;
+    }
+}
+
+@media (max-width: 480px) {
+    .img-comp-container {
+        height: 250px !important;
+    }
+}
+
+/* ==================== ORBIT/FEATURES SECTION ==================== */
+@media (max-width: 768px) {
+    .orbit-container {
+        min-height: 400px;
+        overflow: hidden;
+    }
+
+    .orbit-stage {
+        transform: scale(0.7);
+    }
+
+    .orbit-info-card {
+        max-width: 90%;
+        padding: 16px;
+    }
+}
+
+@media (max-width: 480px) {
+    .orbit-stage {
+        transform: scale(0.5);
+    }
+}
+
+/* ==================== EXTENSION SECTION ==================== */
+@media (max-width: 768px) {
+    .extension-container {
+        flex-direction: column;
+    }
+
+    .extension-content,
+    .extension-visual {
+        width: 100%;
+    }
+}
+
+/* ==================== OVERFLOW PREVENTION ==================== */
+/* Applied to specific layout containers only — not globally */
+.container,
+.analysis-grid,
+.features-grid,
+.tech-grid,
+.pipeline-grid {
+    max-width: 100%;
+    overflow-x: hidden;
+}
+
+/* ==================== BATCH ACTIONS BAR MOBILE ==================== */
+@media (max-width: 768px) {
+    .batch-actions-bar {
+        width: 90%;
+        max-width: 400px;
+        bottom: 20px;
+        padding: 12px 16px;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .btn-batch {
+        width: 100%;
+        min-height: 44px;
+    }
+}
+
+/* ==================== PAGINATION MOBILE ==================== */
+@media (max-width: 768px) {
+    .pagination {
+        gap: 8px;
+        padding-bottom: 40px;
+    }
+
+    .btn-page {
+        width: 40px;
+        height: 40px;
+        font-size: 14px;
+    }
+
+    .page-info {
+        font-size: 13px;
+    }
+}
+
+/* ==================== FIX ANY FIXED POSITIONING OVERFLOW ==================== */
+@media (max-width: 768px) {
+
+    [style*="position: fixed"],
+    [style*="position:fixed"] {
+        max-width: 100vw;
+    }
+}
+
+/* ==================== LANDSCAPE TABLET ==================== */
+@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
+    .analysis-grid {
+        grid-template-columns: 1fr 1fr;
+        gap: 30px;
+    }
+
+    .upload-area {
+        min-height: 350px;
+    }
+
+    .preview-area {
+        max-height: 400px;
+    }
+}
+
+/* ==================== PORTRAIT TABLET ==================== */
+@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
+    .analysis-grid {
+        grid-template-columns: 1fr;
+        gap: 30px;
+    }
+
+    .container {
+        padding: 0 30px;
+    }
+}
+
+/* ==================== ENSURE TEXT DOESNT OVERFLOW ==================== */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+span,
+div {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+/* ==================== FINAL SAFETY NET ==================== */
+@media (max-width: 768px) {
+
+    /* Ensure absolutely nothing causes horizontal scroll */
+    * {
+        max-width: 100vw !important;
+    }
+
+    /* Exception for background elements */
+    .mesh-background,
+    #particles-js,
+    #canvas-container,
+    .noise-overlay,
+    .gradient-orb,
+    .floating-3d-object,
+    body,
+    html {
+        max-width: none !important;
+    }
+}

frontend/responsive-pages.css

@@ -0,0 +1,350 @@
+/* ==================================================================================
+   RESPONSIVE STYLES FOR NON-LANDING PAGES
+   ================================================================================== 
+   This file contains responsive CSS for: analysis.html, history.html, video_result.html
+   DO NOT link this file in index.html - landing page should keep its original design
+   ================================================================================== */
+
+/* ==================== FLUID TYPOGRAPHY VARIABLES ==================== */
+:root {
+    /* Fluid font sizes for inner pages */
+    --font-size-page-title: clamp(1.75rem, 4vw + 0.5rem, 3rem);
+    --font-size-section-header: clamp(1.25rem, 2.5vw + 0.5rem, 2rem);
+    --font-size-card-title: clamp(1rem, 1.5vw + 0.5rem, 1.375rem);
+    --font-size-body: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);
+    --font-size-small: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
+
+    /* Fluid spacing */
+    --container-padding: clamp(16px, 4vw, 40px);
+    --card-padding: clamp(16px, 3vw, 32px);
+    --gap-sm: clamp(12px, 2vw, 20px);
+    --gap-md: clamp(20px, 3vw, 40px);
+    --gap-lg: clamp(30px, 5vw, 60px);
+}
+
+/* ==================== ANALYSIS PAGE RESPONSIVE ==================== */
+
+/* Analysis grid - stack on tablet and below */
+.analysis-grid {
+    gap: var(--gap-md);
+}
+
+@media (max-width: 1024px) {
+    .analysis-grid {
+        grid-template-columns: 1fr !important;
+        gap: var(--gap-md);
+    }
+}
+
+/* Upload section responsive */
+.upload-section {
+    gap: var(--gap-sm);
+}
+
+.section-header-small h2 {
+    font-size: var(--font-size-section-header);
+}
+
+/* Upload area fluid sizing */
+.upload-area {
+    min-height: clamp(250px, 35vh, 400px);
+    padding: var(--card-padding);
+}
+
+@media (max-width: 768px) {
+    .upload-area {
+        min-height: 220px;
+        border-radius: 16px;
+    }
+
+    .upload-icon {
+        font-size: 48px;
+    }
+
+    .upload-text {
+        font-size: 14px;
+    }
+}
+
+/* Results section responsive */
+.results-section {
+    padding: var(--card-padding);
+}
+
+@media (max-width: 768px) {
+    .results-section {
+        border-radius: 16px;
+    }
+}
+
+/* Statistics grid responsive */
+.statistics-grid {
+    gap: var(--gap-sm);
+}
+
+@media (max-width: 768px) {
+    .statistics-grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+}
+
+@media (max-width: 480px) {
+    .statistics-grid {
+        grid-template-columns: 1fr !important;
+    }
+
+    .stat-card {
+        padding: 16px;
+    }
+
+    .stat-value {
+        font-size: 24px;
+    }
+}
+
+/* Recent analyses grid responsive */
+.recent-grid {
+    gap: var(--gap-sm);
+}
+
+@media (max-width: 768px) {
+    .recent-grid {
+        grid-template-columns: 1fr !important;
+    }
+}
+
+/* ==================== HISTORY PAGE RESPONSIVE ==================== */
+
+/* History controls fluid spacing */
+.history-controls {
+    gap: var(--gap-sm);
+    padding: var(--card-padding);
+}
+
+@media (max-width: 768px) {
+    .history-controls {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .search-container {
+        min-width: 100%;
+    }
+
+    .filter-controls {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .filter-select {
+        width: 100%;
+    }
+
+    .export-controls {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .btn-export,
+    .btn-clear-all {
+        width: 100%;
+        min-height: 48px;
+    }
+}
+
+/* History table horizontal scroll on mobile */
+.history-table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 768px) {
+    .history-table {
+        min-width: 600px;
+    }
+}
+
+/* Grid view card sizing */
+@media (max-width: 768px) {
+    .history-grid {
+        grid-template-columns: 1fr !important;
+        gap: var(--gap-sm);
+    }
+}
+
+/* Batch actions bar mobile */
+@media (max-width: 768px) {
+    .batch-actions {
+        flex-wrap: wrap;
+        gap: 10px;
+        padding: 12px;
+    }
+
+    .batch-actions button {
+        flex: 1;
+        min-width: calc(50% - 10px);
+        min-height: 44px;
+    }
+}
+
+/* ==================== VIDEO RESULT PAGE RESPONSIVE ==================== */
+
+/* Video player container responsive */
+.video-preview-container {
+    max-width: 100%;
+}
+
+@media (max-width: 768px) {
+    .video-window-container {
+        border-radius: 16px;
+    }
+
+    .window-header {
+        padding: 10px 12px;
+    }
+
+    .play-button {
+        width: 60px;
+        height: 60px;
+        font-size: 28px;
+    }
+}
+
+@media (max-width: 480px) {
+    .play-button {
+        width: 50px;
+        height: 50px;
+        font-size: 24px;
+    }
+}
+
+/* Dashboard grid stack on mobile */
+.dashboard-grid {
+    gap: var(--gap-md);
+}
+
+@media (max-width: 1024px) {
+    .dashboard-grid {
+        grid-template-columns: 1fr !important;
+    }
+}
+
+/* Stats grid compact on mobile */
+@media (max-width: 768px) {
+    .video-stats-grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+        gap: var(--gap-sm);
+    }
+}
+
+@media (max-width: 480px) {
+    .video-stats-grid {
+        grid-template-columns: 1fr !important;
+    }
+}
+
+/* Timeline chart container responsive */
+.timeline-container,
+.chart-container {
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+/* Frame grid responsive */
+@media (max-width: 768px) {
+    .frame-grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+        gap: var(--gap-sm);
+    }
+}
+
+@media (max-width: 480px) {
+    .frame-grid {
+        grid-template-columns: 1fr !important;
+    }
+}
+
+/* Report section mobile */
+@media (max-width: 768px) {
+    .report-section {
+        padding: var(--card-padding);
+    }
+
+    .report-header {
+        flex-direction: column;
+        gap: 12px;
+        align-items: flex-start;
+    }
+
+    .btn-download-report {
+        width: 100%;
+        min-height: 48px;
+    }
+}
+
+/* ==================== SHARED RESPONSIVE PATTERNS ==================== */
+
+/* Container padding */
+.analysis-container,
+.history-container,
+.video-result-container {
+    padding-left: var(--container-padding);
+    padding-right: var(--container-padding);
+}
+
+/* Card styling consistency */
+.result-card,
+.analysis-card,
+.history-card,
+.video-card {
+    padding: var(--card-padding);
+}
+
+@media (max-width: 768px) {
+
+    .result-card,
+    .analysis-card,
+    .history-card,
+    .video-card {
+        border-radius: 16px;
+    }
+}
+
+/* Touch targets for interactive elements */
+@media (max-width: 768px) {
+
+    button,
+    .btn,
+    .btn-primary,
+    .btn-secondary,
+    [role="button"] {
+        min-height: 44px;
+        min-width: 44px;
+    }
+}
+
+/* Prevent iOS input zoom */
+@media (max-width: 768px) {
+
+    input,
+    select,
+    textarea {
+        font-size: 16px !important;
+    }
+}
+
+/* Modal responsive */
+@media (max-width: 768px) {
+    .modal-content {
+        max-width: calc(100vw - 32px);
+        max-height: calc(100vh - 32px);
+        margin: 16px;
+        border-radius: 16px;
+    }
+
+    .modal-close {
+        width: 44px;
+        height: 44px;
+    }
+}

frontend/scroll_indicator.css

@@ -0,0 +1,96 @@
+/* ==================== SCROLL INDICATOR ==================== */
+.scroll-indicator {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    z-index: 10;
+    opacity: 0.7;
+    transition: opacity 0.3s ease;
+    cursor: pointer;
+}
+
+.scroll-indicator:hover {
+    opacity: 1;
+}
+
+.mouse {
+    width: 26px;
+    height: 42px;
+    border: 2px solid rgba(255, 255, 255, 0.4);
+    border-radius: 20px;
+    position: relative;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.wheel {
+    width: 4px;
+    height: 8px;
+    background: var(--accent-yellow, #E3F514);
+    border-radius: 2px;
+    position: absolute;
+    top: 6px;
+    left: 50%;
+    transform: translateX(-50%);
+    animation: scrollWheel 2s ease-in-out infinite;
+}
+
+.arrow-scroll {
+    width: 10px;
+    height: 10px;
+    border-right: 2px solid rgba(255, 255, 255, 0.4);
+    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
+    transform: rotate(45deg);
+    animation: scrollArrow 2s ease-in-out infinite;
+    animation-delay: 0.2s;
+}
+
+@keyframes scrollWheel {
+    0% {
+        top: 6px;
+        opacity: 1;
+        height: 8px;
+    }
+
+    100% {
+        top: 24px;
+        opacity: 0;
+        height: 4px;
+    }
+}
+
+@keyframes scrollArrow {
+    0% {
+        transform: rotate(45deg) translate(0, 0);
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+
+    100% {
+        transform: rotate(45deg) translate(2px, 2px);
+        opacity: 0;
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+
+    .wheel,
+    .arrow-scroll {
+        animation: none;
+    }
+}
+
+/* Hide on small screens where height is limited */
+@media (max-height: 700px) {
+    .scroll-indicator {
+        display: none;
+    }
+}

frontend/service-worker.js

@@ -0,0 +1,219 @@
+/**
+ * DeepGuard Service Worker
+ * Handles offline functionality, caching, and PWA features
+ */
+
+const CACHE_VERSION = 'v1.0.0';
+const CACHE_NAME = `deepguard-${CACHE_VERSION}`;
+
+// Assets to cache immediately on install
+const STATIC_ASSETS = [
+    '/',
+    '/index.html',
+    '/analysis.html',
+    '/history.html',
+    '/offline.html',
+    '/style.css',
+    '/animations.css',
+    '/history.css',
+    '/loader.css',
+    '/orbit.css',
+    '/showcase.css',
+    '/video_player.css',
+    '/extension.css',
+    '/scroll_indicator.css',
+    '/script.js',
+    '/mobile.js',
+    '/loader.js',
+    '/hero_reveal.js',
+    '/motion.js',
+    '/orbit_interaction.js',
+    '/three_bg.js',
+    '/logo.ico',
+    '/icon-192.png',
+    '/icon-512.png',
+    '/manifest.json'
+];
+
+// Assets that can be cached on demand
+const RUNTIME_CACHE = 'deepguard-runtime';
+
+// Install event - cache static assets
+self.addEventListener('install', (event) => {
+    console.log('[Service Worker] Installing...');
+
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then((cache) => {
+                console.log('[Service Worker] Caching static assets');
+                return cache.addAll(STATIC_ASSETS);
+            })
+            .then(() => {
+                console.log('[Service Worker] Installation complete');
+                return self.skipWaiting(); // Activate immediately
+            })
+            .catch((error) => {
+                console.error('[Service Worker] Installation failed:', error);
+            })
+    );
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+    console.log('[Service Worker] Activating...');
+
+    event.waitUntil(
+        caches.keys()
+            .then((cacheNames) => {
+                return Promise.all(
+                    cacheNames
+                        .filter((name) => name.startsWith('deepguard-') && name !== CACHE_NAME)
+                        .map((name) => {
+                            console.log('[Service Worker] Deleting old cache:', name);
+                            return caches.delete(name);
+                        })
+                );
+            })
+            .then(() => {
+                console.log('[Service Worker] Activation complete');
+                return self.clients.claim(); // Take control immediately
+            })
+    );
+});
+
+// Fetch event - serve from cache, fallback to network
+self.addEventListener('fetch', (event) => {
+    const { request } = event;
+    const url = new URL(request.url);
+
+    // Skip cross-origin requests
+    if (url.origin !== location.origin) {
+        return;
+    }
+
+    // Skip API requests (let them go to network)
+    if (url.pathname.startsWith('/api/')) {
+        return;
+    }
+
+    event.respondWith(
+        caches.match(request)
+            .then((cachedResponse) => {
+                if (cachedResponse) {
+                    console.log('[Service Worker] Serving from cache:', request.url);
+                    return cachedResponse;
+                }
+
+                // Not in cache, fetch from network
+                return fetch(request)
+                    .then((response) => {
+                        // Don't cache non-successful responses
+                        if (!response || response.status !== 200 || response.type !== 'basic') {
+                            return response;
+                        }
+
+                        // Clone response for caching
+                        const responseToCache = response.clone();
+
+                        // Cache runtime assets
+                        caches.open(RUNTIME_CACHE)
+                            .then((cache) => {
+                                cache.put(request, responseToCache);
+                            });
+
+                        return response;
+                    })
+                    .catch((error) => {
+                        console.error('[Service Worker] Fetch failed:', error);
+
+                        // Return offline page for navigation requests
+                        if (request.mode === 'navigate') {
+                            return caches.match('/offline.html');
+                        }
+
+                        // Return fallback for images
+                        if (request.destination === 'image') {
+                            return caches.match('/logo.svg');
+                        }
+
+                        return new Response('Offline - content not available', {
+                            status: 503,
+                            statusText: 'Service Unavailable',
+                            headers: new Headers({
+                                'Content-Type': 'text/plain'
+                            })
+                        });
+                    });
+            })
+    );
+});
+
+// Background sync for offline analysis (future enhancement)
+self.addEventListener('sync', (event) => {
+    console.log('[Service Worker] Background sync:', event.tag);
+
+    if (event.tag === 'sync-analyses') {
+        event.waitUntil(syncPendingAnalyses());
+    }
+});
+
+// Push notifications (future enhancement)
+self.addEventListener('push', (event) => {
+    console.log('[Service Worker] Push notification received');
+
+    const data = event.data ? event.data.json() : {};
+    const title = data.title || 'DeepGuard';
+    const options = {
+        body: data.body || 'Analysis complete',
+        icon: '/icon-192.png',
+        badge: '/icon-192.png',
+        vibrate: [200, 100, 200],
+        data: {
+            url: data.url || '/history.html'
+        }
+    };
+
+    event.waitUntil(
+        self.registration.showNotification(title, options)
+    );
+});
+
+// Notification click handler
+self.addEventListener('notificationclick', (event) => {
+    console.log('[Service Worker] Notification clicked');
+    event.notification.close();
+
+    const urlToOpen = event.notification.data.url || '/';
+
+    event.waitUntil(
+        clients.matchAll({ type: 'window', includeUncontrolled: true })
+            .then((windowClients) => {
+                // Check if there's already a window open
+                for (let client of windowClients) {
+                    if (client.url === urlToOpen && 'focus' in client) {
+                        return client.focus();
+                    }
+                }
+                // Open new window
+                if (clients.openWindow) {
+                    return clients.openWindow(urlToOpen);
+                }
+            })
+    );
+});
+
+// Helper function for background sync
+async function syncPendingAnalyses() {
+    // Future implementation: sync pending analyses to backend
+    console.log('[Service Worker] Syncing pending analyses...');
+    return Promise.resolve();
+}
+
+// Message handler for skip waiting
+self.addEventListener('message', (event) => {
+    if (event.data && event.data.type === 'SKIP_WAITING') {
+        self.skipWaiting();
+    }
+});
+
+console.log('[Service Worker] Loaded successfully');

frontend/three_bg.js

@@ -0,0 +1,265 @@
+// 3D Background with Three.js
+// Theme: Dark space with "Nano Yellow" stars/particles
+
+function initThreeBackground() {
+    const container = document.getElementById('canvas-container');
+    if (!container) return;
+
+    // PERFORMANCE OPTIMIZATION: Reduce count on mobile
+    const isMobile = window.innerWidth < 768;
+    const particleCount = isMobile ? 400 : 1200; // significantly fewer particles on mobile
+
+    // SCENE
+    const scene = new THREE.Scene();
+    scene.fog = new THREE.FogExp2(0x000000, 0.002);
+
+    // CAMERA
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
+    camera.position.z = 500;
+
+    // RENDERER - PERFORMANCE TUNING
+    const renderer = new THREE.WebGLRenderer({
+        alpha: true,
+        antialias: !isMobile, // Disable antialias on mobile for performance
+        powerPreference: "high-performance" // Hint to browser
+    });
+
+    // Cap pixel ratio to 2 to avoid 9x rendering on 3x screens
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setClearColor(0x000000, 0); // Transparent background
+    container.appendChild(renderer.domElement);
+
+    // Theme Check
+    const getThemeColors = () => {
+        const theme = localStorage.getItem('theme') || 'dark';
+        if (theme === 'light') {
+            return {
+                primary: 0x00AEEF, // Cyan
+                secondary: 0x0044CC, // Blue
+                gridPrimary: 0x00AEEF, // Cyan Grid
+                gridSecondary: 0xE0E0E0 // Light Grey Grid
+            };
+        }
+        return {
+            primary: 0xE3F514, // Nano Yellow
+            secondary: 0xFFFFFF, // White
+            gridPrimary: 0xE3F514, // Nano Yellow Grid
+            gridSecondary: 0x333333 // Dark Grey Grid
+        };
+    };
+
+    let themeColors = getThemeColors();
+
+    const geometry = new THREE.BufferGeometry();
+    const vertices = [];
+    const colors = [];
+
+    const color1 = new THREE.Color(themeColors.primary);
+    const color2 = new THREE.Color(themeColors.secondary);
+
+    for (let i = 0; i < particleCount; i++) {
+        // Random position
+        const x = (Math.random() - 0.5) * 2000;
+        const y = (Math.random() - 0.5) * 2000;
+        const z = (Math.random() - 0.5) * 2000;
+        vertices.push(x, y, z);
+
+        // Random color mix
+        const mixedColor = color1.clone().lerp(color2, Math.random() * 0.5);
+        colors.push(mixedColor.r, mixedColor.g, mixedColor.b);
+    }
+
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
+    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
+
+    const material = new THREE.PointsMaterial({
+        size: 2,
+        vertexColors: true,
+        transparent: true,
+        opacity: 0.8,
+        sizeAttenuation: true
+    });
+
+    const particles = new THREE.Points(geometry, material);
+    scene.add(particles);
+
+    // GEOMETRIC SHAPES (Floating low-poly meshes)
+    const shapeGroup = new THREE.Group();
+    scene.add(shapeGroup);
+
+    function addFloatingShape(type, x, y, z, size) {
+        let geometry;
+        if (type === 'icosahedron') geometry = new THREE.IcosahedronGeometry(size, 0);
+        else if (type === 'octahedron') geometry = new THREE.OctahedronGeometry(size, 0);
+
+        const material = new THREE.MeshBasicMaterial({
+            color: themeColors.primary,
+            wireframe: true,
+            transparent: true,
+            opacity: 0.15
+        });
+
+        const mesh = new THREE.Mesh(geometry, material);
+        mesh.position.set(x, y, z);
+        shapeGroup.add(mesh);
+        return mesh;
+    }
+
+    // Add a few floating shapes
+    const shapes = [];
+    shapes.push(addFloatingShape('icosahedron', -300, 100, -200, 60));
+    shapes.push(addFloatingShape('octahedron', 400, -150, -300, 80));
+    shapes.push(addFloatingShape('icosahedron', 0, 200, -400, 40));
+
+    // 3. INTERACTIVE 3D GRID FLOOR
+    const gridSize = 2000;
+    const gridDivisions = 40;
+    // Change const to let to allow reassignment
+    let gridHelper = new THREE.GridHelper(gridSize, gridDivisions, themeColors.gridPrimary, themeColors.gridSecondary);
+    gridHelper.position.y = -200; // Floor level
+    gridHelper.material.transparent = true;
+    gridHelper.material.opacity = 0.15;
+    scene.add(gridHelper);
+
+    // Watch for theme changes
+    // Store initial theme to avoid redundant updates on load
+    let currentTheme = localStorage.getItem('theme') || 'dark';
+
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+                const newTheme = document.documentElement.getAttribute('data-theme');
+
+                // Prevent infinite loop relative to initial set or same-value updates
+                if (newTheme === currentTheme) return;
+                currentTheme = newTheme;
+
+                const isLight = newTheme === 'light';
+
+                const newPrim = new THREE.Color(isLight ? 0x00AEEF : 0xE3F514);
+                const newSec = new THREE.Color(isLight ? 0x0044CC : 0xFFFFFF);
+
+                // Update Particles
+                const newColors = [];
+                for (let i = 0; i < particleCount; i++) {
+                    const mixedColor = newPrim.clone().lerp(newSec, Math.random() * 0.5);
+                    newColors.push(mixedColor.r, mixedColor.g, mixedColor.b);
+                }
+                particles.geometry.setAttribute('color', new THREE.Float32BufferAttribute(newColors, 3));
+                particles.geometry.attributes.color.needsUpdate = true;
+
+                // Update Shapes
+                shapes.forEach(shape => {
+                    shape.material.color.set(newPrim);
+                });
+
+                // Update Grid
+                scene.remove(gridHelper);
+                // Create new grid using standard ThreeJS helper for fixed geometry colors
+                gridHelper = new THREE.GridHelper(gridSize, gridDivisions, isLight ? 0x00AEEF : 0xE3F514, isLight ? 0xE0E0E0 : 0x333333);
+                gridHelper.position.y = -200;
+                gridHelper.material.transparent = true;
+                gridHelper.material.opacity = 0.15;
+                scene.add(gridHelper);
+            }
+        });
+    });
+
+    observer.observe(document.documentElement, { attributes: true });
+
+
+    // MOUSE INTERACTION
+    let mouseX = 0;
+    let mouseY = 0;
+    let targetX = 0;
+    let targetY = 0;
+
+    const windowHalfX = window.innerWidth / 2;
+    const windowHalfY = window.innerHeight / 2;
+
+    document.addEventListener('mousemove', (event) => {
+        // Optimize: use requestAnimationFrame for mouse updates if needed, but direct is usually fine for coordinates
+        mouseX = (event.clientX - windowHalfX);
+        mouseY = (event.clientY - windowHalfY);
+    });
+
+    // RESIZE HANDLER (THROTTLED)
+    let resizeTimeout;
+    window.addEventListener('resize', () => {
+        if (!resizeTimeout) {
+            resizeTimeout = setTimeout(() => {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+
+                // Update constraints for mouse calc
+                // windowHalfX = window.innerWidth / 2; // const variable can't be reassigned, generally okay not to update center exactly on resize for this effect
+
+                resizeTimeout = null;
+            }, 100);
+        }
+    });
+
+    // SCROLL INTERACTION
+    let scrollY = 0;
+    let targetScrollY = 0;
+
+    // Use passive listener for better scroll performance
+    document.addEventListener('scroll', () => {
+        scrollY = window.scrollY;
+    }, { passive: true });
+
+    // ANIMATION LOOP
+    function animate() {
+        requestAnimationFrame(animate);
+
+        // Smooth Scroll Interpolation
+        targetScrollY += (scrollY - targetScrollY) * 0.05;
+
+        // Mouse Parallax Calculation
+        targetX = mouseX * 0.001;
+        targetY = mouseY * 0.001;
+
+        // 1. Particle System Rotation
+        particles.rotation.y += 0.0005;
+        particles.rotation.x = targetScrollY * 0.0002;
+
+        // Mouse interaction for rotation
+        particles.rotation.y += 0.05 * (targetX - particles.rotation.y);
+        particles.rotation.x += 0.05 * (targetY - particles.rotation.x);
+
+        // 2. Camera Scroll Movement
+        const zoomFactor = targetScrollY * 0.1;
+        camera.position.z = 500 - zoomFactor; // Move closer
+        camera.position.y = -targetScrollY * 0.05; // Pan down subtly
+
+        // Stop zooming too close
+        if (camera.position.z < 100) camera.position.z = 100;
+
+        // 3. Floating Shapes Animation
+        for (let i = 0; i < shapes.length; i++) {
+            const shape = shapes[i];
+            shape.rotation.x += 0.002 * (i + 1);
+            shape.rotation.y += 0.002 * (i + 1);
+            shape.rotation.z = targetScrollY * 0.001 * (i % 2 === 0 ? 1 : -1);
+        }
+
+        // 4. Grid Animation (Infinite Scroll)
+        // Move grid towards camera (z-axis)
+        // Using modulo based on local vars to avoid Date.now() overhead if high precision distinctness isn't needed
+        // But Date.now() is fine.
+        gridHelper.position.z = (Date.now() * 0.05) % (gridSize / gridDivisions);
+        gridHelper.position.z += targetScrollY * 0.5;
+
+        const cell = gridSize / gridDivisions;
+        if (gridHelper.position.z > cell) gridHelper.position.z -= cell;
+
+        renderer.render(scene, camera);
+    }
+
+    animate();
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', initThreeBackground);

frontend/vercel.json

@@ -0,0 +1,5 @@
+{
+    "version": 2,
+    "cleanUrls": true,
+    "trailingSlash": false
+}

frontend/video_player.css

@@ -0,0 +1,160 @@
+/* Video Window Styles */
+.video-window-container {
+    background: #1e1e1e;
+    border-radius: 12px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    overflow: hidden;
+    max-width: 1200px;
+    margin: 0 auto;
+    position: relative;
+    transform: translateZ(0);
+    /* Hardware accel */
+}
+
+.window-header {
+    background: #2d2d2d;
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+    position: relative;
+}
+
+.window-controls {
+    display: flex;
+    gap: 8px;
+    z-index: 2;
+}
+
+.control {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.control.red {
+    background: #ff5f56;
+}
+
+.control.yellow {
+    background: #ffbd2e;
+}
+
+.control.green {
+    background: #27c93f;
+}
+
+.window-title {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    text-align: center;
+    color: #999;
+    font-size: 13px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    font-weight: 500;
+}
+
+.video-content-wrapper {
+    position: relative;
+    background: #000;
+    aspect-ratio: 16/9;
+    /* Enforce aspect ratio */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.demo-video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    /* Or contain, depending on video */
+    display: block;
+}
+
+.play-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+    z-index: 10;
+}
+
+.play-overlay.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.play-button {
+    width: 80px;
+    height: 80px;
+    background: rgba(227, 245, 20, 0.9);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #000;
+    font-size: 40px;
+    padding-left: 5px;
+    /* Visual center adjustment */
+    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    box-shadow: 0 0 30px rgba(227, 245, 20, 0.4);
+}
+
+.play-overlay:hover .play-button {
+    transform: scale(1.1);
+}
+
+.video-progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.progress-fill {
+    height: 100%;
+    width: 0%;
+    background: var(--accent-yellow);
+    transition: width 0.1s linear;
+}
+
+/* ==================== VIDEO PLAYER RESPONSIVE ==================== */
+@media (max-width: 768px) {
+    .video-window-container {
+        border-radius: 16px;
+    }
+
+    .window-header {
+        padding: 10px 12px;
+    }
+
+    .play-button {
+        width: 60px;
+        height: 60px;
+        font-size: 28px;
+    }
+
+    .window-title {
+        font-size: 11px;
+    }
+}
+
+@media (max-width: 480px) {
+    .play-button {
+        width: 50px;
+        height: 50px;
+        font-size: 24px;
+    }
+}