Initial Authrix deployment

.dockerignore

@@ -0,0 +1,17 @@
+venv/
+__pycache__/
+*.pyc
+*.pyo
+.git/
+.gitignore
+node_modules/
+frontend/node_modules/
+frontend/dist/
+*.log
+uploads/
+*.mp4
+*.webm
+*.avi
+.env
+api_keys.json
+usage.json

BUSINESS_MODEL.md

@@ -0,0 +1,262 @@
+# 💰 Authrix Business Model & Monetization Guide
+
+## Revenue Streams
+
+### 1. **SaaS Subscription Tiers**
+
+| Tier | Price | Analyses/Month | Features |
+|------|-------|----------------|----------|
+| **Free** | $0 | 10 | Browser extension, 2-min videos, community support |
+| **Pro** | $9.99/mo | 100 | 10-min videos, API access (100 calls), email support |
+| **Business** | $49/mo | 1,000 | Unlimited length, API (5K calls), white-label reports |
+| **Enterprise** | Custom | Unlimited | On-premise, custom training, SLA, dedicated support |
+
+### 2. **Pay-Per-Use API**
+
+- $0.05 per video (< 5 min)
+- $0.10 per video (5-15 min)
+- $0.25 per video (> 15 min)
+
+**Target Markets:**
+- Social media platforms (Facebook, TikTok, Instagram)
+- News organizations (CNN, BBC, Reuters)
+- Content moderation companies (Spectrum Labs, ActiveFence)
+- Dating apps (Tinder, Bumble, Hinge)
+- Video platforms (YouTube, Vimeo, Twitch)
+
+### 3. **Browser Extension Premium**
+
+- **Free:** 5 analyses/day
+- **Premium:** $4.99/month - unlimited analyses
+
+**Distribution:**
+- Chrome Web Store
+- Firefox Add-ons
+- Edge Add-ons
+
+### 4. **B2B Enterprise Solutions**
+
+#### **Social Media Platforms**
+- Real-time API integration
+- Bulk scanning (millions of videos/day)
+- Custom model training on platform-specific content
+- **Pricing:** $5,000-$50,000/month
+
+#### **News Organizations**
+- Verification dashboard
+- Team collaboration
+- Audit trails & reports
+- **Pricing:** $500-$5,000/month
+
+#### **Law Enforcement**
+- Forensic-grade reports
+- Chain of custody
+- Expert witness support
+- **Pricing:** $10,000-$100,000/year
+
+### 5. **White-Label Licensing**
+
+License the technology to:
+- Security companies
+- Social media platforms
+- Government agencies
+
+**Pricing:** $50,000-$500,000 one-time + 10-20% revenue share
+
+### 6. **Training & Certification**
+
+- **Online Courses:** "Deepfake Detection Fundamentals" - $299
+- **Professional Certification:** "Certified Deepfake Analyst" - $999
+- **Corporate Training:** Custom workshops - $5,000-$20,000
+
+### 7. **Consulting Services**
+
+- Custom model training: $10,000-$50,000
+- Integration support: $200-$500/hour
+- Security audits: $5,000-$25,000
+
+### 8. **Data Marketplace**
+
+- Sell anonymized deepfake datasets to researchers
+- **Pricing:** $5,000-$50,000 per dataset
+
+---
+
+## 📈 Growth Strategy
+
+### Phase 1: Launch (Months 1-3)
+- Launch free tier + browser extension
+- Get 1,000 users
+- Focus on product-market fit
+- **Goal:** Validate demand
+
+### Phase 2: Monetization (Months 4-6)
+- Launch Pro tier
+- Add API access
+- Target first 10 paying customers
+- **Goal:** $5,000 MRR
+
+### Phase 3: Scale (Months 7-12)
+- Launch Business tier
+- B2B sales to news orgs
+- First enterprise deal
+- **Goal:** $50,000 MRR
+
+### Phase 4: Enterprise (Year 2)
+- On-premise deployments
+- White-label licensing
+- International expansion
+- **Goal:** $500,000 MRR
+
+---
+
+## 🎯 Target Customer Segments
+
+### 1. **Individual Users** (Free/Pro)
+- Journalists
+- Content creators
+- Researchers
+- Privacy-conscious users
+
+### 2. **Small Businesses** (Pro/Business)
+- Marketing agencies
+- PR firms
+- Small news outlets
+- Influencer agencies
+
+### 3. **Enterprise** (Business/Enterprise)
+- Social media platforms
+- News organizations
+- Government agencies
+- Law enforcement
+- Financial institutions (KYC/AML)
+
+---
+
+## 💡 Marketing Channels
+
+### 1. **Content Marketing**
+- Blog: "How to Spot Deepfakes"
+- YouTube tutorials
+- Case studies
+- Whitepapers
+
+### 2. **SEO**
+- Target keywords: "deepfake detector", "AI video verification"
+- Build backlinks from tech blogs
+
+### 3. **Partnerships**
+- Integrate with video platforms
+- Partner with news organizations
+- Academic collaborations
+
+### 4. **Paid Advertising**
+- Google Ads (high-intent keywords)
+- LinkedIn Ads (B2B)
+- Twitter/X (tech audience)
+
+### 5. **PR & Media**
+- Press releases for major features
+- Guest posts on tech blogs
+- Conference speaking
+
+---
+
+## 📊 Financial Projections
+
+### Year 1 (Conservative)
+| Revenue Stream | Monthly | Annual |
+|----------------|---------|--------|
+| Pro subscriptions (50 users) | $500 | $6,000 |
+| Business subscriptions (10) | $490 | $5,880 |
+| Enterprise (5 deals) | $25,000 | $300,000 |
+| API usage | $2,000 | $24,000 |
+| **Total** | **$27,990** | **$335,880** |
+
+### Year 1 (Optimistic)
+| Revenue Stream | Monthly | Annual |
+|----------------|---------|--------|
+| Pro subscriptions (500 users) | $5,000 | $60,000 |
+| Business subscriptions (50) | $2,450 | $29,400 |
+| Enterprise (20 deals) | $100,000 | $1,200,000 |
+| API usage | $20,000 | $240,000 |
+| **Total** | **$127,450** | **$1,529,400** |
+
+### Year 2 Target
+- **$5M ARR**
+- 50 enterprise customers
+- 10,000 paying users
+- Series A funding ($5-10M)
+
+---
+
+## 🚀 Quick Start: Monetization Setup
+
+### 1. **Get Your API Key**
+```bash
+cd backend
+python -c "from auth import create_api_key; print(create_api_key('your@email.com', 'pro'))"
+```
+
+### 2. **Use API with Key**
+```bash
+curl -X POST http://localhost:8000/analyze \
+  -H "X-API-Key: authrix_YOUR_KEY_HERE" \
+  -F "file=@video.mp4"
+```
+
+### 3. **Check Usage**
+```bash
+python -c "from auth import check_usage_limit; print(check_usage_limit('authrix_YOUR_KEY'))"
+```
+
+---
+
+## 📞 Next Steps to Start Earning
+
+### Immediate (Week 1):
+1. ✅ Set up Stripe/PayPal for payments
+2. ✅ Create landing page with pricing
+3. ✅ Launch on Product Hunt
+4. ✅ Post on HackerNews, Reddit
+
+### Short-term (Month 1):
+1. Get first 10 paying customers
+2. Set up customer support (email/chat)
+3. Create demo videos
+4. Reach out to 50 potential B2B customers
+
+### Medium-term (Months 2-3):
+1. Launch Chrome Web Store listing
+2. Write 10 blog posts for SEO
+3. Close first enterprise deal
+4. Build referral program
+
+### Long-term (Months 4-12):
+1. Raise seed funding ($500K-$2M)
+2. Hire sales team
+3. Expand to international markets
+4. Build mobile apps
+
+---
+
+## 🎓 Resources
+
+- **Stripe Integration:** https://stripe.com/docs/api
+- **Landing Page Builder:** https://carrd.co, https://webflow.com
+- **Email Marketing:** https://mailchimp.com, https://sendgrid.com
+- **Customer Support:** https://intercom.com, https://zendesk.com
+- **Analytics:** https://mixpanel.com, https://amplitude.com
+
+---
+
+## 📧 Contact for Enterprise Sales
+
+**Email:** enterprise@authrix.ai  
+**Demo:** https://authrix.ai/demo  
+**Pricing:** https://authrix.ai/pricing  
+**API Docs:** https://docs.authrix.ai
+
+---
+
+**Built with ❤️ by the Authrix Team**

DEPLOY_HF.md

@@ -0,0 +1,101 @@
+# Deploy Authrix to Hugging Face Spaces (Free)
+
+## Why HF Spaces?
+- FREE 16GB RAM
+- FREE CPU (and optional GPU)
+- Always-on (no sleep on free tier for public spaces)
+- Built for AI apps exactly like this
+
+---
+
+## Step-by-Step Deployment
+
+### 1. Create HuggingFace Account
+Go to https://huggingface.co/join and sign up (free)
+
+### 2. Create a New Space
+1. Go to https://huggingface.co/new-space
+2. Fill in:
+   - **Space name:** authrix (or authrix-deepfake-detector)
+   - **License:** MIT
+   - **SDK:** Docker
+   - **Visibility:** Public (required for free tier)
+3. Click **Create Space**
+
+### 3. Push Your Code
+
+Install Git LFS first:
+```bash
+# Windows
+winget install Git.Git
+git lfs install
+```
+
+Then push:
+```bash
+# In your project root (E:\DeepFake Detect)
+git init
+git add .
+git commit -m "Initial deployment"
+
+# Add HuggingFace remote (replace YOUR_USERNAME)
+git remote add hf https://huggingface.co/spaces/YOUR_USERNAME/authrix
+
+# Push (will ask for HF username + token)
+git push hf main
+```
+
+Get your HF token at: https://huggingface.co/settings/tokens
+(Create a token with "write" permission)
+
+### 4. Wait for Build
+- Build takes 10-15 minutes (downloading models)
+- Watch progress at: https://huggingface.co/spaces/YOUR_USERNAME/authrix
+
+### 5. Update Extension API URL
+Once deployed, your app will be at:
+`https://YOUR_USERNAME-authrix.hf.space`
+
+Update `extension/background.js`:
+```javascript
+const API_BASE = 'https://YOUR_USERNAME-authrix.hf.space';
+```
+
+Update `extension/popup.js`:
+```javascript
+const API_BASE = 'https://YOUR_USERNAME-authrix.hf.space';
+```
+
+Update `extension/content.js` (Open Authrix App button):
+```javascript
+window.open('https://YOUR_USERNAME-authrix.hf.space', '_blank');
+```
+
+---
+
+## Limitations of Free HF Spaces
+
+| Feature | Free Tier |
+|---------|-----------|
+| RAM | 16GB ✅ |
+| CPU | 2 vCPUs ✅ |
+| GPU | ❌ (CPU only) |
+| Storage | 50GB ✅ |
+| Sleep | Never (public spaces) ✅ |
+| Custom domain | ❌ (need Pro $9/mo) |
+| Private space | ❌ (need Pro) |
+
+## Upgrade Options
+- **HF Pro ($9/mo):** Custom domain, private spaces, more storage
+- **HF GPU Space ($0.60/hr):** 10x faster inference with T4 GPU
+
+---
+
+## After Deployment
+
+Your app will be live at:
+`https://YOUR_USERNAME-authrix.hf.space`
+
+Share this URL with anyone — no installation needed!
+
+The browser extension will also work with this URL once you update `API_BASE`.

Dockerfile

@@ -0,0 +1,47 @@
+FROM python:3.11-slim
+
+# System dependencies
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    libgomp1 \
+    ffmpeg \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# HuggingFace Spaces runs as user 1000
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+WORKDIR /home/user/app
+
+# Copy files
+COPY --chown=user backend/ ./backend/
+COPY --chown=user frontend-vanilla/ ./frontend-vanilla/
+
+# Install dependencies
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r backend/requirements.txt
+
+# Pre-cache HuggingFace models
+RUN python -c "\
+from transformers import ViTForImageClassification, ViTImageProcessor; \
+ViTImageProcessor.from_pretrained('dima806/deepfake_vs_real_image_detection'); \
+ViTForImageClassification.from_pretrained('dima806/deepfake_vs_real_image_detection'); \
+ViTImageProcessor.from_pretrained('prithivMLmods/Deep-Fake-Detector-v2-Model'); \
+ViTForImageClassification.from_pretrained('prithivMLmods/Deep-Fake-Detector-v2-Model'); \
+print('Models cached')"
+
+WORKDIR /home/user/app/backend
+
+RUN mkdir -p uploads
+
+# HuggingFace Spaces uses port 7860
+EXPOSE 7860
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,126 +1,19 @@
-# 🎯 Deepfake Authenticator
+---
+title: Authrix Deepfake Detector
+emoji: 🔍
+colorFrom: green
+colorTo: emerald
+sdk: docker
+pinned: false
+app_port: 7860
+---
 
-An AI-powered web app that detects whether an uploaded video is real or deepfake.
+# Authrix — AI Deepfake Detection Engine
 
-## Features
-
-- **Prediction** — REAL or FAKE verdict
-- **Confidence Score** — 0–100% probability
-- **Explainable Insights** — Human-readable analysis details
-- **Frame Timeline** — Per-frame fake probability visualization
-- **Agent Architecture** — Modular pipeline of 4 specialized agents
-
-## Agent Pipeline
-
-```
-Video Upload
-    │
-    ▼
-┌─────────────────────┐
-│  Frame Analyzer     │  ← Extracts every 10th frame via OpenCV
-└─────────────────────┘
-    │
-    ▼
-┌─────────────────────┐
-│  Face Detector      │  ← Detects & crops faces via MediaPipe
-└─────────────────────┘
-    │
-    ▼
-┌─────────────────────┐
-│  Decision Agent     │  ← HuggingFace model OR heuristic fallback
-└─────────────────────┘
-    │
-    ▼
-┌─────────────────────┐
-│  Report Generator   │  ← Builds verdict + explanation
-└─────────────────────┘
-    │
-    ▼
-JSON Response → Frontend
-```
-
-## Tech Stack
-
-| Layer    | Technology                                      |
-|----------|-------------------------------------------------|
-| Backend  | Python, FastAPI, OpenCV, MediaPipe              |
-| AI Model | HuggingFace `prithivMLmods/Deepfake-Detection-Model` (or heuristic fallback) |
-| Frontend | HTML, TailwindCSS, Vanilla JS                   |
-
-## Quick Start
-
-### Windows
-```bat
-setup.bat
-venv\Scripts\activate.bat
-cd backend
-python main.py
-```
-
-### macOS / Linux
-```bash
-chmod +x setup.sh && ./setup.sh
-source venv/bin/activate
-cd backend && python main.py
-```
-
-Then open **http://localhost:8000** in your browser.
-
-## API
+Upload a video and get an instant REAL / FAKE verdict powered by an ensemble of ViT models.
 
-### `POST /analyze`
-
-Upload a video file for analysis.
-
-**Request:** `multipart/form-data` with `file` field
-
-**Response:**
-```json
-{
-  "result": "FAKE",
-  "confidence": 78.4,
-  "details": [
-    "Significant facial manipulation artifacts identified",
-    "Inconsistent manipulation across frames — typical of face-swap deepfakes",
-    "Unnatural texture blending detected at facial boundaries",
-    "High-frequency noise patterns inconsistent with natural video compression"
-  ],
-  "frame_timeline": [
-    { "frame": 0, "fake_pct": 72.1 },
-    { "frame": 1, "fake_pct": 81.3 }
-  ],
-  "metadata": {
-    "frames_analyzed": 24,
-    "frames_with_faces": 20,
-    "video_duration_sec": 8.5,
-    "video_fps": 30.0,
-    "resolution": "1280x720"
-  },
-  "processing_time_sec": 4.2
-}
-```
-
-### `GET /health`
-
-Returns server status and active model type.
-
-## Detection Logic
-
-**Scoring:** Average fake probability across all detected faces and frames.
-- `> 60%` → **FAKE**
-- `≤ 60%` → **REAL**
-
-**Heuristic fallback** (when HuggingFace model is unavailable) analyzes:
-1. High-frequency noise patterns (Laplacian variance)
-2. Color channel inconsistency
-3. DCT frequency artifacts (GAN compression signatures)
-4. Skin tone uniformity
-5. Edge coherence anomalies
-
-## Constraints
-
-- Runs fully locally — no data sent to external servers
-- Free/open-source models only
-- Supports: MP4, AVI, MOV, MKV, WebM, WMV
-- Max file size: 100 MB
-- Target inference time: < 10 seconds for short videos
+## Features
+- Visual deepfake detection (2x ViT ensemble)
+- Audio analysis (AI voice detection)
+- Browser extension support
+- REST API

STRIPE_SETUP.md

@@ -0,0 +1,315 @@
+# 💳 Stripe Subscription Setup Guide
+
+## Your Owner API Key
+
+```
+🔑 API Key: authrix_vx5b5HqXIEtAuhUJw92p-aU7Ucz34RtWHzpBCzbKqKE
+⭐ Tier: Owner (Unlimited Access)
+```
+
+**Save this key securely!** You have unlimited analyses.
+
+---
+
+## Quick Start: Accept Payments in 30 Minutes
+
+### Step 1: Create Stripe Account (5 min)
+
+1. Go to https://dashboard.stripe.com/register
+2. Sign up with your email
+3. Complete business verification
+
+### Step 2: Get API Keys (2 min)
+
+1. Go to https://dashboard.stripe.com/apikeys
+2. Copy your **Secret Key** (starts with `sk_test_` or `sk_live_`)
+3. Add to your environment:
+
+```bash
+# Windows
+set STRIPE_SECRET_KEY=sk_test_YOUR_KEY_HERE
+
+# Linux/Mac
+export STRIPE_SECRET_KEY=sk_test_YOUR_KEY_HERE
+```
+
+### Step 3: Create Products & Prices (10 min)
+
+1. Go to https://dashboard.stripe.com/products
+2. Click **+ Add product**
+
+**Create these products:**
+
+#### Product 1: Authrix Pro
+- **Name:** Authrix Pro
+- **Description:** 100 video analyses per month
+- **Pricing:**
+  - Monthly: $9.99/month (recurring)
+  - Yearly: $99/year (recurring)
+- Copy the **Price ID** (starts with `price_`)
+
+#### Product 2: Authrix Business
+- **Name:** Authrix Business
+- **Description:** 1,000 video analyses per month
+- **Pricing:**
+  - Monthly: $49/month (recurring)
+  - Yearly: $490/year (recurring)
+- Copy the **Price ID**
+
+### Step 4: Update Price IDs (2 min)
+
+Edit `backend/stripe_integration.py`:
+
+```python
+PRICE_IDS = {
+    "pro_monthly": "price_YOUR_PRO_MONTHLY_ID",
+    "pro_yearly": "price_YOUR_PRO_YEARLY_ID",
+    "business_monthly": "price_YOUR_BUSINESS_MONTHLY_ID",
+    "business_yearly": "price_YOUR_BUSINESS_YEARLY_ID",
+}
+```
+
+### Step 5: Set Up Webhooks (5 min)
+
+1. Go to https://dashboard.stripe.com/webhooks
+2. Click **+ Add endpoint**
+3. **Endpoint URL:** `https://your-domain.com/api/stripe/webhook`
+4. **Events to send:**
+   - `checkout.session.completed`
+   - `customer.subscription.updated`
+   - `customer.subscription.deleted`
+5. Copy the **Signing secret** (starts with `whsec_`)
+6. Add to environment:
+
+```bash
+set STRIPE_WEBHOOK_SECRET=whsec_YOUR_SECRET_HERE
+```
+
+### Step 6: Test Payment (5 min)
+
+```bash
+# Start backend
+python -m uvicorn main:app --port 8000
+
+# Test checkout (in another terminal)
+curl -X POST http://localhost:8000/api/stripe/create-checkout-session \
+  -H "Content-Type: application/json" \
+  -d '{
+    "email": "test@example.com",
+    "plan": "pro_monthly",
+    "success_url": "http://localhost:8000/success",
+    "cancel_url": "http://localhost:8000/pricing"
+  }'
+```
+
+You'll get a `checkout_url` - open it in your browser!
+
+**Test Card Numbers:**
+- Success: `4242 4242 4242 4242`
+- Decline: `4000 0000 0000 0002`
+- Any future expiry date, any CVC
+
+---
+
+## Integration Examples
+
+### Frontend: Create Checkout
+
+```javascript
+// When user clicks "Subscribe to Pro"
+async function subscribeToPro() {
+  const response = await fetch('http://localhost:8000/api/stripe/create-checkout-session', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      email: 'user@example.com',
+      plan: 'pro_monthly',
+      success_url: window.location.origin + '/success',
+      cancel_url: window.location.origin + '/pricing'
+    })
+  });
+  
+  const { checkout_url } = await response.json();
+  window.location.href = checkout_url;  // Redirect to Stripe
+}
+```
+
+### Backend: Use API with Key
+
+```python
+import requests
+
+response = requests.post(
+    'http://localhost:8000/analyze',
+    headers={'X-API-Key': 'authrix_YOUR_KEY_HERE'},
+    files={'file': open('video.mp4', 'rb')}
+)
+
+print(response.json())
+```
+
+### Extension: Add API Key
+
+Edit `extension/background.js`:
+
+```javascript
+const API_KEY = 'authrix_vx5b5HqXIEtAuhUJw92p-aU7Ucz34RtWHzpBCzbKqKE';
+
+async function submitBlob(chunks, mimeType, totalSize) {
+  // ... existing code ...
+  
+  const res = await fetch(`${API_BASE}/analyze`, {
+    method: 'POST',
+    headers: {
+      'X-API-Key': API_KEY  // Add this line
+    },
+    body: fd
+  });
+  
+  // ... rest of code ...
+}
+```
+
+---
+
+## Pricing Page HTML
+
+Create `pricing.html`:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Authrix Pricing</title>
+  <script src="https://js.stripe.com/v3/"></script>
+</head>
+<body>
+  <h1>Choose Your Plan</h1>
+  
+  <div class="pricing-cards">
+    <!-- Free -->
+    <div class="card">
+      <h2>Free</h2>
+      <p class="price">$0<span>/month</span></p>
+      <ul>
+        <li>10 analyses/month</li>
+        <li>Browser extension</li>
+        <li>2-min videos</li>
+      </ul>
+      <button onclick="window.location.href='/signup'">Get Started</button>
+    </div>
+    
+    <!-- Pro -->
+    <div class="card popular">
+      <h2>Pro</h2>
+      <p class="price">$9.99<span>/month</span></p>
+      <ul>
+        <li>100 analyses/month</li>
+        <li>10-min videos</li>
+        <li>API access</li>
+        <li>Email support</li>
+      </ul>
+      <button onclick="subscribe('pro_monthly')">Subscribe</button>
+    </div>
+    
+    <!-- Business -->
+    <div class="card">
+      <h2>Business</h2>
+      <p class="price">$49<span>/month</span></p>
+      <ul>
+        <li>1,000 analyses/month</li>
+        <li>Unlimited length</li>
+        <li>White-label reports</li>
+        <li>Priority support</li>
+      </ul>
+      <button onclick="subscribe('business_monthly')">Subscribe</button>
+    </div>
+  </div>
+  
+  <script>
+    async function subscribe(plan) {
+      const email = prompt('Enter your email:');
+      if (!email) return;
+      
+      const response = await fetch('http://localhost:8000/api/stripe/create-checkout-session', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email,
+          plan,
+          success_url: window.location.origin + '/success',
+          cancel_url: window.location.origin + '/pricing'
+        })
+      });
+      
+      const { checkout_url } = await response.json();
+      window.location.href = checkout_url;
+    }
+  </script>
+</body>
+</html>
+```
+
+---
+
+## Go Live Checklist
+
+### Before Launch:
+- [ ] Switch to **Live mode** in Stripe Dashboard
+- [ ] Update `STRIPE_SECRET_KEY` with live key (`sk_live_...`)
+- [ ] Update webhook endpoint to production URL
+- [ ] Test with real card (will charge!)
+- [ ] Set up email notifications (welcome, payment failed, etc.)
+- [ ] Add terms of service & privacy policy
+- [ ] Set up customer support email
+
+### After Launch:
+- [ ] Monitor Stripe Dashboard for payments
+- [ ] Set up Stripe Radar for fraud prevention
+- [ ] Enable 3D Secure for EU customers
+- [ ] Set up tax collection (Stripe Tax)
+- [ ] Create refund policy
+
+---
+
+## Revenue Tracking
+
+### Check Earnings:
+```bash
+# Get all API keys and their tiers
+python -c "from auth import load_api_keys; import json; print(json.dumps(load_api_keys(), indent=2))"
+
+# Check usage for a key
+python -c "from auth import check_usage_limit; print(check_usage_limit('authrix_YOUR_KEY'))"
+```
+
+### Stripe Dashboard:
+- **Revenue:** https://dashboard.stripe.com/revenue
+- **Customers:** https://dashboard.stripe.com/customers
+- **Subscriptions:** https://dashboard.stripe.com/subscriptions
+
+---
+
+## Support & Resources
+
+- **Stripe Docs:** https://stripe.com/docs
+- **Stripe Testing:** https://stripe.com/docs/testing
+- **Webhook Testing:** https://stripe.com/docs/webhooks/test
+- **Stripe CLI:** https://stripe.com/docs/stripe-cli
+
+---
+
+## Next Steps
+
+1. **Deploy to production** (Heroku, AWS, DigitalOcean)
+2. **Get a domain** (authrix.ai, authrix.com)
+3. **Set up SSL** (Let's Encrypt, Cloudflare)
+4. **Create landing page** (Webflow, Carrd, custom)
+5. **Launch on Product Hunt**
+6. **Start marketing!**
+
+---
+
+**Questions?** Open an issue or email support@authrix.ai
+
+**Built with ❤️ by the Authrix Team**

backend/api_keys.json

@@ -0,0 +1,15 @@
+{
+  "c522f03ba084fc1150f9ab5bd78bf23e295dbf15cf75d232f3cf0dc3afad3641": {
+    "email": "demo@authrix.ai",
+    "tier": "pro",
+    "created_at": "2026-04-25T20:13:27.568274",
+    "active": true
+  },
+  "b35e8f8fb3db9ee0f6c4bc3b5a01112861de233b93610e5eeca87b75563ab030": {
+    "email": "owner@authrix.ai",
+    "tier": "owner",
+    "created_at": "2026-04-25T20:16:53.342074",
+    "active": true,
+    "unlimited": true
+  }
+}

backend/auth.py

@@ -0,0 +1,132 @@
+"""
+Authrix - API Key Authentication & Usage Tracking
+"""
+
+import secrets
+import hashlib
+from datetime import datetime, timedelta
+from typing import Optional
+import json
+from pathlib import Path
+
+# Simple file-based storage (replace with database in production)
+API_KEYS_FILE = Path("api_keys.json")
+USAGE_FILE = Path("usage.json")
+
+# Tier limits (analyses per month)
+TIER_LIMITS = {
+    "free": 10,
+    "pro": 100,
+    "business": 1000,
+    "enterprise": 999999,
+    "owner": 999999,  # Owner has unlimited access
+}
+
+def generate_api_key() -> str:
+    """Generate a secure API key."""
+    return f"authrix_{secrets.token_urlsafe(32)}"
+
+def hash_key(api_key: str) -> str:
+    """Hash API key for storage."""
+    return hashlib.sha256(api_key.encode()).hexdigest()
+
+def create_api_key(email: str, tier: str = "free") -> str:
+    """Create a new API key for a user."""
+    api_key = generate_api_key()
+    key_hash = hash_key(api_key)
+    
+    keys = load_api_keys()
+    keys[key_hash] = {
+        "email": email,
+        "tier": tier,
+        "created_at": datetime.now().isoformat(),
+        "active": True,
+    }
+    save_api_keys(keys)
+    
+    return api_key
+
+def validate_api_key(api_key: str) -> Optional[dict]:
+    """Validate API key and return user info."""
+    if not api_key:
+        return None
+    
+    key_hash = hash_key(api_key)
+    keys = load_api_keys()
+    
+    if key_hash not in keys:
+        return None
+    
+    key_data = keys[key_hash]
+    if not key_data.get("active", False):
+        return None
+    
+    return key_data
+
+def check_usage_limit(api_key: str) -> tuple[bool, int, int]:
+    """
+    Check if user has exceeded their monthly limit.
+    Returns (allowed, used, limit).
+    """
+    key_data = validate_api_key(api_key)
+    if not key_data:
+        return False, 0, 0
+    
+    tier = key_data.get("tier", "free")
+    
+    # Owner has unlimited access
+    if tier == "owner" or key_data.get("unlimited", False):
+        return True, 0, 999999
+    
+    limit = TIER_LIMITS.get(tier, 10)
+    
+    # Get current month usage
+    key_hash = hash_key(api_key)
+    usage = load_usage()
+    current_month = datetime.now().strftime("%Y-%m")
+    
+    if key_hash not in usage:
+        usage[key_hash] = {}
+    
+    used = usage[key_hash].get(current_month, 0)
+    
+    return used < limit, used, limit
+
+def increment_usage(api_key: str):
+    """Increment usage counter for the current month."""
+    key_hash = hash_key(api_key)
+    usage = load_usage()
+    current_month = datetime.now().strftime("%Y-%m")
+    
+    if key_hash not in usage:
+        usage[key_hash] = {}
+    
+    usage[key_hash][current_month] = usage[key_hash].get(current_month, 0) + 1
+    save_usage(usage)
+
+def load_api_keys() -> dict:
+    """Load API keys from file."""
+    if not API_KEYS_FILE.exists():
+        return {}
+    return json.loads(API_KEYS_FILE.read_text())
+
+def save_api_keys(keys: dict):
+    """Save API keys to file."""
+    API_KEYS_FILE.write_text(json.dumps(keys, indent=2))
+
+def load_usage() -> dict:
+    """Load usage data from file."""
+    if not USAGE_FILE.exists():
+        return {}
+    return json.loads(USAGE_FILE.read_text())
+
+def save_usage(usage: dict):
+    """Save usage data to file."""
+    USAGE_FILE.write_text(json.dumps(usage, indent=2))
+
+# Create a demo API key on first run
+if not API_KEYS_FILE.exists():
+    demo_key = create_api_key("demo@authrix.ai", "pro")
+    print(f"\n🔑 Demo API Key created: {demo_key}")
+    print(f"   Tier: Pro (100 analyses/month)")
+    print(f"   Add to requests: X-API-Key: {demo_key}\n")

backend/create_owner_key.py

@@ -0,0 +1,27 @@
+"""
+Create owner API key with unlimited access
+"""
+
+from auth import create_api_key, load_api_keys, save_api_keys, hash_key
+
+# Create owner key
+owner_email = "owner@authrix.ai"
+owner_key = create_api_key(owner_email, "owner")
+
+# Update to unlimited tier
+keys = load_api_keys()
+key_hash = hash_key(owner_key)
+keys[key_hash]["tier"] = "owner"
+keys[key_hash]["unlimited"] = True
+save_api_keys(keys)
+
+print("\n" + "="*60)
+print("🎉 OWNER API KEY CREATED")
+print("="*60)
+print(f"\n📧 Email: {owner_email}")
+print(f"🔑 API Key: {owner_key}")
+print(f"⭐ Tier: Owner (Unlimited)")
+print(f"\n💡 Add this to your requests:")
+print(f'   X-API-Key: {owner_key}')
+print(f"\n📝 Save this key securely - it won't be shown again!")
+print("="*60 + "\n")

backend/detector.py

@@ -25,11 +25,10 @@ class FrameAnalyzerAgent:
         """
         self.sample_rate = sample_rate
 
-    def extract_frames(self, video_path: str, max_frames: int = 40) -> list[np.ndarray]:
+    def extract_frames(self, video_path: str, max_frames: int = 50) -> list[np.ndarray]:
         """
         Extract sampled frames spread evenly across the full video duration.
-        Uses uniform temporal sampling instead of fixed-interval to ensure
-        coverage of the whole video regardless of length.
+        Increased max_frames from 40 to 50 for better coverage of extension captures.
         """
         frames = []
         cap = cv2.VideoCapture(video_path)
@@ -86,7 +85,7 @@ class FrameAnalyzerAgent:
 # Detects and crops faces using MediaPipe
 # ─────────────────────────────────────────────
 class FaceDetectorAgent:
-    def __init__(self, min_detection_confidence: float = 0.5):
+    def __init__(self, min_detection_confidence: float = 0.3):  # Lowered from 0.5 for compressed video
         self.mp_face_detection = mp.solutions.face_detection
         self.min_confidence = min_detection_confidence
 
@@ -335,41 +334,47 @@ class DecisionAgent:
     ) -> dict:
         """
         Aggregate predictions with adaptive scoring.
-
-        Key insight: deepfakes have CONSISTENTLY elevated scores across many
-        frames, while false positives on real videos tend to have a few
-        outlier frames with high scores but low overall consistency.
-
-        Strategy:
-        - Quality-gate blurry crops
-        - Per-frame: mean of valid face scores
-        - Final: weighted blend of mean + median (robust to outliers)
-        - Also return consistency metrics for adaptive thresholding
+        If no faces detected, falls back to full-frame analysis.
         """
         frame_scores = []
         frames_with_faces = 0
         frames_skipped_quality = 0
-
-        for i, crops in enumerate(face_crops_per_frame):
-            if not crops:
-                continue
-
-            valid_probs = []
-            for crop in crops:
-                score = self.analyze_face(crop)
+        total_faces_detected = sum(len(crops) for crops in face_crops_per_frame)
+
+        # Fallback: if very few faces detected, analyze full frames instead
+        if total_faces_detected < 5:
+            logger.warning(f"Only {total_faces_detected} faces detected — using full-frame analysis")
+            for i, frame in enumerate(frames):
+                # Resize frame to 224x224 for model input
+                frame_resized = cv2.resize(frame, (224, 224))
+                score = self.analyze_face(frame_resized)
                 if score is not None:
-                    valid_probs.append(score)
+                    frames_with_faces += 1
+                    frame_scores.append({"frame_index": i, "fake_probability": round(score, 4)})
+                else:
+                    frames_skipped_quality += 1
+        else:
+            # Normal face-based analysis
+            for i, crops in enumerate(face_crops_per_frame):
+                if not crops:
+                    continue
 
-            if not valid_probs:
-                frames_skipped_quality += 1
-                continue
+                valid_probs = []
+                for crop in crops:
+                    score = self.analyze_face(crop)
+                    if score is not None:
+                        valid_probs.append(score)
 
-            frames_with_faces += 1
-            frame_score = float(np.mean(valid_probs))
-            frame_scores.append({"frame_index": i, "fake_probability": round(frame_score, 4)})
+                if not valid_probs:
+                    frames_skipped_quality += 1
+                    continue
+
+                frames_with_faces += 1
+                frame_score = float(np.mean(valid_probs))
+                frame_scores.append({"frame_index": i, "fake_probability": round(frame_score, 4)})
 
         if frames_skipped_quality > 0:
-            logger.info(f"Skipped {frames_skipped_quality} frames due to low face quality")
+            logger.info(f"Skipped {frames_skipped_quality} frames due to low quality")
 
         if not frame_scores:
             return {
@@ -388,15 +393,11 @@ class DecisionAgent:
         else:
             mean_prob   = float(np.mean(probs))
             median_prob = float(np.median(probs))
-            # Mean+median blend: robust to both outliers and sparse fakes
             overall = mean_prob * 0.65 + median_prob * 0.35
 
         overall = round(float(np.clip(overall, 0.0, 1.0)), 4)
 
-        # Consistency: fraction of frames above 0.50 — high for real deepfakes
         consistency = sum(1 for p in probs if p > 0.50) / len(probs)
-
-        # Face coverage: how much of the video had detectable faces
         face_coverage = frames_with_faces / max(len(frames), 1)
 
         logger.info(
@@ -422,8 +423,9 @@ class DecisionAgent:
 # Builds the final human-readable report
 # ─────────────────────────────────────────────
 class ReportGeneratorAgent:
-    # Base threshold — adjusted adaptively per video
-    BASE_THRESHOLD = 0.58
+    # Lowered threshold for compressed video captures (extension use case)
+    # Original files: 0.58, Compressed captures: 0.54
+    BASE_THRESHOLD = 0.54
 
     def generate(self, analysis: dict, metadata: dict, audio: dict | None = None) -> dict:
         prob        = analysis["overall_fake_probability"]

backend/main.py

@@ -6,22 +6,85 @@ import os
 import uuid
 import logging
 import shutil
+import subprocess
 from pathlib import Path
 
-from fastapi import FastAPI, File, UploadFile, HTTPException
+from fastapi import FastAPI, File, UploadFile, HTTPException, Header
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse
+from typing import Optional
 
-from detector import DeepfakeAuthenticator
-
-# ── Logging ──────────────────────────────────
+# ── Logging (must be set up before any logger usage) ─────────────────────────
 logging.basicConfig(
     level=logging.INFO,
     format="%(asctime)s [%(levelname)s] %(name)s: %(message)s",
 )
 logger = logging.getLogger(__name__)
 
+from detector import DeepfakeAuthenticator
+from auth import validate_api_key, check_usage_limit, increment_usage
+
+# ── Video conversion helper ───────────────────────────────────────────────────
+def convert_to_mp4(src: Path):
+    """
+    Convert a video file to mp4 using the bundled ffmpeg binary.
+    Returns the converted Path, or None if conversion failed.
+    """
+    if src.suffix.lower() == ".mp4":
+        return None  # already mp4
+
+    dst = src.with_suffix(".mp4")
+
+    # Use imageio-ffmpeg bundled binary (always available, no system install needed)
+    ffmpeg_bin = "ffmpeg"
+    try:
+        import imageio_ffmpeg
+        ffmpeg_bin = imageio_ffmpeg.get_ffmpeg_exe()
+        logger.info(f"Using bundled ffmpeg: {ffmpeg_bin}")
+    except Exception as e:
+        logger.warning(f"imageio_ffmpeg not available, trying system ffmpeg: {e}")
+
+    try:
+        result = subprocess.run(
+            [
+                ffmpeg_bin, "-y", "-i", str(src),
+                "-c:v", "libx264", "-preset", "ultrafast", "-crf", "28",
+                "-c:a", "aac", "-movflags", "+faststart",
+                str(dst),
+            ],
+            capture_output=True,
+            timeout=120,
+        )
+        if result.returncode == 0 and dst.exists() and dst.stat().st_size > 1000:
+            logger.info(f"Converted {src.name} -> {dst.name} ({dst.stat().st_size // 1024} KB)")
+            return dst
+        stderr = result.stderr.decode(errors="ignore")[-500:]
+        logger.warning(f"ffmpeg exit {result.returncode}: {stderr}")
+    except Exception as e:
+        logger.warning(f"ffmpeg conversion failed: {e}")
+
+    # Fallback: moviepy
+    try:
+        try:
+            from moviepy import VideoFileClip
+        except ImportError:
+            from moviepy.editor import VideoFileClip
+        clip = VideoFileClip(str(src))
+        clip.write_videofile(
+            str(dst), codec="libx264", audio_codec="aac",
+            logger=None, preset="ultrafast",
+        )
+        clip.close()
+        if dst.exists() and dst.stat().st_size > 1000:
+            logger.info(f"moviepy converted {src.name} -> {dst.name}")
+            return dst
+    except Exception as e:
+        logger.warning(f"moviepy conversion also failed: {e}")
+
+    return None
+
+
 # ── App setup ────────────────────────────────
 app = FastAPI(
     title="Deepfake Authenticator API",
@@ -43,8 +106,9 @@ UPLOAD_DIR.mkdir(exist_ok=True)
 ALLOWED_EXTENSIONS = {".mp4", ".avi", ".mov", ".mkv", ".webm", ".wmv"}
 MAX_FILE_SIZE_MB = 100
 
-# ── Singleton authenticator (lazy-loaded on first request) ───
-authenticator: DeepfakeAuthenticator | None = None
+# ── Singleton authenticator ───────────────────
+authenticator = None
+
 
 @app.on_event("startup")
 async def startup_event():
@@ -85,18 +149,17 @@ async def analyze_from_url(payload: dict):
     if not video_url:
         raise HTTPException(status_code=400, detail="No URL provided")
 
-    # Use a unique prefix — yt-dlp appends its own extension
     tmp_prefix = UPLOAD_DIR / f"ext_{uuid.uuid4().hex}"
     actual_path = None
     downloaded = False
 
     try:
-        # ── yt-dlp: handles YouTube, Twitter, Instagram, TikTok ─────────────
+        # yt-dlp: handles YouTube, Twitter, Instagram, TikTok
         try:
             import yt_dlp
             ydl_opts = {
                 "format": "bestvideo[ext=mp4][height<=720]+bestaudio[ext=m4a]/best[ext=mp4][height<=720]/best",
-                "outtmpl": str(tmp_prefix) + ".%(ext)s",   # yt-dlp adds extension
+                "outtmpl": str(tmp_prefix) + ".%(ext)s",
                 "quiet": True,
                 "no_warnings": True,
                 "merge_output_format": "mp4",
@@ -104,7 +167,6 @@ async def analyze_from_url(payload: dict):
             with yt_dlp.YoutubeDL(ydl_opts) as ydl:
                 ydl.download([video_url])
 
-            # Find whatever file yt-dlp created
             for ext in (".mp4", ".webm", ".mkv", ".avi", ".mov"):
                 candidate = Path(str(tmp_prefix) + ext)
                 if candidate.exists() and candidate.stat().st_size > 1000:
@@ -113,7 +175,6 @@ async def analyze_from_url(payload: dict):
                     logger.info(f"yt-dlp: {actual_path.name} ({actual_path.stat().st_size // 1024}KB)")
                     break
 
-            # Glob fallback in case yt-dlp used a different naming scheme
             if not downloaded:
                 for f in sorted(UPLOAD_DIR.glob(f"{tmp_prefix.name}*")):
                     if f.stat().st_size > 1000:
@@ -127,7 +188,7 @@ async def analyze_from_url(payload: dict):
         except Exception as e:
             logger.warning(f"yt-dlp failed ({e}) — trying direct fetch")
 
-        # ── Fallback: direct HTTP fetch for plain video URLs ─────────────────
+        # Fallback: direct HTTP fetch
         if not downloaded:
             try:
                 import httpx
@@ -144,11 +205,14 @@ async def analyze_from_url(payload: dict):
         if not downloaded or actual_path is None:
             raise HTTPException(
                 status_code=400,
-                detail="Could not download video. For YouTube, ensure yt-dlp is installed: pip install yt-dlp"
+                detail="Could not download video. For YouTube, ensure yt-dlp is installed: pip install yt-dlp",
             )
 
-        # Analyze — no file extension check needed here (yt-dlp handles format)
-        result = authenticator.analyze(str(actual_path))
+        # Convert if needed
+        converted = convert_to_mp4(actual_path)
+        analyze_path = converted if converted else actual_path
+
+        result = authenticator.analyze(str(analyze_path))
         return result
 
     except HTTPException:
@@ -157,7 +221,6 @@ async def analyze_from_url(payload: dict):
         logger.exception(f"analyze-url failed: {e}")
         raise HTTPException(status_code=500, detail=str(e))
     finally:
-        # Clean up all files with our prefix
         for f in UPLOAD_DIR.glob(f"{tmp_prefix.name}*"):
             try:
                 f.unlink()
@@ -166,21 +229,34 @@ async def analyze_from_url(payload: dict):
 
 
 @app.post("/analyze")
-async def analyze_video(file: UploadFile = File(...)):
+async def analyze_video(
+    file: UploadFile = File(...),
+    x_api_key: Optional[str] = Header(None, alias="X-API-Key")
+):
     """
     Analyze an uploaded video for deepfake content.
-
-    Returns:
-        result: "REAL" or "FAKE"
-        confidence: 0–100 percentage
-        details: list of human-readable explanations
-        frame_timeline: per-frame fake probability for visualization
-        metadata: video info and processing stats
+    Requires API key for usage tracking and tier limits.
     """
+    # Check API key (allow localhost without key for development)
+    if x_api_key:
+        key_data = validate_api_key(x_api_key)
+        if not key_data:
+            raise HTTPException(status_code=401, detail="Invalid API key")
+        
+        allowed, used, limit = check_usage_limit(x_api_key)
+        if not allowed:
+            raise HTTPException(
+                status_code=429,
+                detail=f"Monthly limit exceeded ({used}/{limit}). Upgrade your plan at https://authrix.ai/pricing"
+            )
+        
+        logger.info(f"API request from {key_data['email']} ({key_data['tier']}) - {used+1}/{limit}")
+    else:
+        logger.info("Local request (no API key)")
+
     if not authenticator:
         raise HTTPException(status_code=503, detail="Server is still initializing, please retry.")
 
-    # Validate file extension
     suffix = Path(file.filename).suffix.lower()
     if suffix not in ALLOWED_EXTENSIONS:
         raise HTTPException(
@@ -188,49 +264,68 @@ async def analyze_video(file: UploadFile = File(...)):
             detail=f"Unsupported file type '{suffix}'. Allowed: {', '.join(ALLOWED_EXTENSIONS)}",
         )
 
-    # Save uploaded file with unique name
     unique_name = f"{uuid.uuid4().hex}{suffix}"
     save_path = UPLOAD_DIR / unique_name
+    converted_path = None
 
     try:
-        with save_path.open("wb") as f:
-            content = await file.read()
-
-            # Check file size
-            size_mb = len(content) / (1024 * 1024)
-            if size_mb > MAX_FILE_SIZE_MB:
-                raise HTTPException(
-                    status_code=413,
-                    detail=f"File too large ({size_mb:.1f} MB). Max allowed: {MAX_FILE_SIZE_MB} MB",
-                )
-
-            f.write(content)
+        content = await file.read()
+        size_mb = len(content) / (1024 * 1024)
+        if size_mb > MAX_FILE_SIZE_MB:
+            raise HTTPException(
+                status_code=413,
+                detail=f"File too large ({size_mb:.1f} MB). Max allowed: {MAX_FILE_SIZE_MB} MB",
+            )
 
+        save_path.write_bytes(content)
         logger.info(f"Saved upload: {unique_name} ({size_mb:.1f} MB)")
 
-        # Run analysis
-        result = authenticator.analyze(str(save_path))
+        # Convert webm/mkv/etc to mp4 — OpenCV on Windows cannot decode webm natively
+        analyze_path = save_path
+        if suffix in (".webm", ".mkv", ".avi", ".wmv"):
+            logger.info(f"File has {suffix} extension — conversion needed")
+            converted_path = convert_to_mp4(save_path)
+            if converted_path:
+                analyze_path = converted_path
+                logger.info(f"✓ Conversion successful — using {analyze_path.name}")
+            else:
+                logger.error(f"✗ Conversion FAILED for {suffix} — will attempt direct analysis (likely to fail)")
+        else:
+            logger.info(f"File is {suffix} — no conversion needed")
+
+        logger.info(f"Calling authenticator.analyze({analyze_path})")
+        result = authenticator.analyze(str(analyze_path))
+        
+        # Increment usage counter if API key provided
+        if x_api_key:
+            increment_usage(x_api_key)
+        
         return result
 
     except HTTPException:
         raise
     except Exception as e:
         logger.exception(f"Analysis failed for {unique_name}: {e}")
+        # Write detailed error to file for debugging
+        error_log = UPLOAD_DIR / "last_error.txt"
+        import traceback
+        error_log.write_text(f"File: {unique_name}\nError: {e}\n\n{traceback.format_exc()}")
         raise HTTPException(status_code=500, detail=f"Analysis failed: {str(e)}")
     finally:
-        # Clean up uploaded file
-        if save_path.exists():
-            save_path.unlink()
-            logger.info(f"Cleaned up: {unique_name}")
+        for p in [save_path, converted_path]:
+            if p is not None and p.exists():
+                try:
+                    p.unlink()
+                    logger.info(f"Cleaned up: {p.name}")
+                except Exception:
+                    pass
 
 
 # ── Serve frontend ────────────────────────────
-# Prefer built React dist, fall back to vanilla HTML
-_react_dist   = Path(__file__).parent.parent / "frontend-dist"
-_vanilla_dir  = Path(__file__).parent.parent / "frontend-vanilla"
+_react_dist  = Path(__file__).parent.parent / "frontend-dist"
+_vanilla_dir = Path(__file__).parent.parent / "frontend-vanilla"
 
 if _react_dist.exists():
-    # Serve React SPA
     app.mount("/assets", StaticFiles(directory=str(_react_dist / "assets")), name="assets")
 
     @app.get("/")
@@ -240,7 +335,6 @@ if _react_dist.exists():
             headers={"Cache-Control": "no-store, no-cache, must-revalidate"},
         )
 
-    # Catch-all for React Router (SPA fallback)
     @app.get("/{full_path:path}")
     async def spa_fallback(full_path: str):
         index = _react_dist / "index.html"
@@ -249,7 +343,6 @@ if _react_dist.exists():
         return {"detail": "Not found"}
 
 elif _vanilla_dir.exists():
-    # Fallback: vanilla HTML
     @app.get("/script.js")
     async def serve_script():
         return FileResponse(
@@ -258,6 +351,13 @@ elif _vanilla_dir.exists():
             headers={"Cache-Control": "no-store, no-cache, must-revalidate"},
         )
 
+    @app.get("/pricing")
+    async def serve_pricing():
+        return FileResponse(
+            str(_vanilla_dir / "pricing.html"),
+            headers={"Cache-Control": "no-store, no-cache, must-revalidate"},
+        )
+
     @app.get("/")
     async def serve_index():
         return FileResponse(

backend/requirements.txt

@@ -1,12 +1,12 @@
 fastapi==0.111.0
 uvicorn[standard]==0.29.0
 python-multipart==0.0.9
-opencv-python==4.9.0.80
+opencv-python-headless==4.9.0.80
 mediapipe==0.10.14
 numpy==1.26.4
 Pillow==10.3.0
 
-# HuggingFace models
+# HuggingFace models (CPU only for deployment)
 transformers>=4.41.0
 torch>=2.3.0
 torchvision
@@ -17,6 +17,8 @@ moviepy>=1.0.3
 librosa>=0.10.0
 soundfile>=0.12.1
 
-# Browser extension support
+# Deployment extras
+imageio-ffmpeg>=0.4.9
 yt-dlp>=2024.1.0
 httpx>=0.27.0
+stripe>=8.0.0

backend/stripe_integration.py

@@ -0,0 +1,264 @@
+"""
+Authrix - Stripe Subscription Integration
+"""
+
+import os
+from typing import Optional
+import stripe
+from fastapi import APIRouter, HTTPException, Request
+from pydantic import BaseModel
+import logging
+
+from auth import create_api_key, load_api_keys, save_api_keys, hash_key
+
+logger = logging.getLogger(__name__)
+
+# Set your Stripe secret key (get from https://dashboard.stripe.com/apikeys)
+stripe.api_key = os.getenv("STRIPE_SECRET_KEY", "sk_test_YOUR_KEY_HERE")
+STRIPE_WEBHOOK_SECRET = os.getenv("STRIPE_WEBHOOK_SECRET", "whsec_YOUR_WEBHOOK_SECRET")
+
+router = APIRouter(prefix="/api/stripe", tags=["stripe"])
+
+# Stripe Price IDs (create these in Stripe Dashboard)
+PRICE_IDS = {
+    "pro_monthly": "price_PRO_MONTHLY_ID",      # $9.99/month
+    "pro_yearly": "price_PRO_YEARLY_ID",        # $99/year (2 months free)
+    "business_monthly": "price_BUSINESS_MONTHLY_ID",  # $49/month
+    "business_yearly": "price_BUSINESS_YEARLY_ID",    # $490/year
+}
+
+class CheckoutRequest(BaseModel):
+    email: str
+    plan: str  # "pro_monthly", "pro_yearly", "business_monthly", "business_yearly"
+    success_url: str
+    cancel_url: str
+
+class PortalRequest(BaseModel):
+    customer_id: str
+    return_url: str
+
+@router.post("/create-checkout-session")
+async def create_checkout_session(request: CheckoutRequest):
+    """
+    Create a Stripe Checkout session for subscription.
+    
+    Usage:
+    POST /api/stripe/create-checkout-session
+    {
+        "email": "user@example.com",
+        "plan": "pro_monthly",
+        "success_url": "https://authrix.ai/success",
+        "cancel_url": "https://authrix.ai/pricing"
+    }
+    """
+    try:
+        price_id = PRICE_IDS.get(request.plan)
+        if not price_id:
+            raise HTTPException(status_code=400, detail=f"Invalid plan: {request.plan}")
+        
+        # Create Stripe Checkout Session
+        session = stripe.checkout.Session.create(
+            customer_email=request.email,
+            payment_method_types=["card"],
+            line_items=[{
+                "price": price_id,
+                "quantity": 1,
+            }],
+            mode="subscription",
+            success_url=request.success_url + "?session_id={CHECKOUT_SESSION_ID}",
+            cancel_url=request.cancel_url,
+            metadata={
+                "email": request.email,
+                "plan": request.plan,
+            },
+        )
+        
+        return {"checkout_url": session.url, "session_id": session.id}
+    
+    except stripe.error.StripeError as e:
+        logger.error(f"Stripe error: {e}")
+        raise HTTPException(status_code=400, detail=str(e))
+
+@router.post("/create-portal-session")
+async def create_portal_session(request: PortalRequest):
+    """
+    Create a Stripe Customer Portal session for managing subscription.
+    
+    Usage:
+    POST /api/stripe/create-portal-session
+    {
+        "customer_id": "cus_XXXXX",
+        "return_url": "https://authrix.ai/account"
+    }
+    """
+    try:
+        session = stripe.billing_portal.Session.create(
+            customer=request.customer_id,
+            return_url=request.return_url,
+        )
+        return {"portal_url": session.url}
+    
+    except stripe.error.StripeError as e:
+        logger.error(f"Stripe error: {e}")
+        raise HTTPException(status_code=400, detail=str(e))
+
+@router.post("/webhook")
+async def stripe_webhook(request: Request):
+    """
+    Handle Stripe webhook events.
+    
+    Events handled:
+    - checkout.session.completed: Create API key when subscription starts
+    - customer.subscription.updated: Update tier when subscription changes
+    - customer.subscription.deleted: Downgrade to free when subscription cancels
+    """
+    payload = await request.body()
+    sig_header = request.headers.get("stripe-signature")
+    
+    try:
+        event = stripe.Webhook.construct_event(
+            payload, sig_header, STRIPE_WEBHOOK_SECRET
+        )
+    except ValueError:
+        raise HTTPException(status_code=400, detail="Invalid payload")
+    except stripe.error.SignatureVerificationError:
+        raise HTTPException(status_code=400, detail="Invalid signature")
+    
+    # Handle the event
+    if event["type"] == "checkout.session.completed":
+        session = event["data"]["object"]
+        await handle_checkout_completed(session)
+    
+    elif event["type"] == "customer.subscription.updated":
+        subscription = event["data"]["object"]
+        await handle_subscription_updated(subscription)
+    
+    elif event["type"] == "customer.subscription.deleted":
+        subscription = event["data"]["object"]
+        await handle_subscription_deleted(subscription)
+    
+    return {"status": "success"}
+
+async def handle_checkout_completed(session: dict):
+    """Create API key when checkout completes."""
+    email = session["metadata"]["email"]
+    plan = session["metadata"]["plan"]
+    customer_id = session["customer"]
+    subscription_id = session["subscription"]
+    
+    # Determine tier from plan
+    tier = "pro" if "pro" in plan else "business"
+    
+    # Create API key
+    api_key = create_api_key(email, tier)
+    
+    # Store Stripe customer ID and subscription ID
+    keys = load_api_keys()
+    key_hash = hash_key(api_key)
+    keys[key_hash]["stripe_customer_id"] = customer_id
+    keys[key_hash]["stripe_subscription_id"] = subscription_id
+    save_api_keys(keys)
+    
+    logger.info(f"Created {tier} API key for {email} (customer: {customer_id})")
+    
+    # TODO: Send welcome email with API key
+    # send_email(email, "Welcome to Authrix!", f"Your API key: {api_key}")
+
+async def handle_subscription_updated(subscription: dict):
+    """Update tier when subscription changes."""
+    customer_id = subscription["customer"]
+    status = subscription["status"]
+    
+    # Find API key by customer ID
+    keys = load_api_keys()
+    for key_hash, key_data in keys.items():
+        if key_data.get("stripe_customer_id") == customer_id:
+            if status == "active":
+                # Subscription is active - ensure tier is correct
+                logger.info(f"Subscription active for {key_data['email']}")
+            elif status in ("past_due", "unpaid"):
+                # Payment failed - send warning
+                logger.warning(f"Payment issue for {key_data['email']}")
+            break
+
+async def handle_subscription_deleted(subscription: dict):
+    """Downgrade to free when subscription cancels."""
+    customer_id = subscription["customer"]
+    
+    # Find API key and downgrade to free
+    keys = load_api_keys()
+    for key_hash, key_data in keys.items():
+        if key_data.get("stripe_customer_id") == customer_id:
+            keys[key_hash]["tier"] = "free"
+            keys[key_hash]["active"] = False  # Deactivate key
+            save_api_keys(keys)
+            logger.info(f"Downgraded {key_data['email']} to free tier")
+            break
+
+# Pricing plans for frontend
+PRICING_PLANS = {
+    "free": {
+        "name": "Free",
+        "price": 0,
+        "interval": "month",
+        "analyses": 10,
+        "features": [
+            "10 video analyses per month",
+            "Browser extension",
+            "Max 2-minute videos",
+            "Community support",
+        ],
+    },
+    "pro": {
+        "name": "Pro",
+        "price_monthly": 9.99,
+        "price_yearly": 99,
+        "interval": "month",
+        "analyses": 100,
+        "features": [
+            "100 analyses per month",
+            "Up to 10-minute videos",
+            "API access (100 calls/month)",
+            "Priority processing",
+            "Email support",
+            "Batch upload",
+        ],
+        "popular": True,
+    },
+    "business": {
+        "name": "Business",
+        "price_monthly": 49,
+        "price_yearly": 490,
+        "interval": "month",
+        "analyses": 1000,
+        "features": [
+            "1,000 analyses per month",
+            "Unlimited video length",
+            "API access (5,000 calls/month)",
+            "White-label reports",
+            "Slack/Teams integration",
+            "Priority support",
+            "Custom branding",
+        ],
+    },
+    "enterprise": {
+        "name": "Enterprise",
+        "price": "Custom",
+        "interval": "month",
+        "analyses": "Unlimited",
+        "features": [
+            "Unlimited analyses",
+            "On-premise deployment",
+            "Custom model training",
+            "SLA guarantees",
+            "Dedicated support",
+            "Multi-user accounts",
+        ],
+        "contact": True,
+    },
+}
+
+@router.get("/pricing")
+async def get_pricing():
+    """Get pricing plans."""
+    return PRICING_PLANS

extension/README.md

@@ -1,11 +1,11 @@
 # Authrix Browser Extension
 
-Detect deepfake videos on any webpage without downloading them.
+Detect deepfake videos on any webpage — no download required.
 
 ## Install (Chrome / Edge / Brave)
 
 1. Open `chrome://extensions`
-2. Enable **Developer Mode** (top right toggle)
+2. Enable **Developer Mode** (top-right toggle)
 3. Click **Load unpacked**
 4. Select this `extension/` folder
 5. The Authrix icon appears in your toolbar
@@ -13,6 +13,7 @@ Detect deepfake videos on any webpage without downloading them.
 ## Requirements
 
 The Authrix backend must be running locally:
+
 ```bash
 cd backend
 python -m uvicorn main:app --host 0.0.0.0 --port 8000
@@ -20,28 +21,47 @@ python -m uvicorn main:app --host 0.0.0.0 --port 8000
 
 ## Usage
 
-### Method 1 — Right-click any video
-Right-click on a video element on any webpage → **"🔍 Analyze with Authrix"**
+### Method 1 — Toolbar popup (recommended)
+Click the Authrix icon → **Capture & Analyze Video**
+
+Records 12 seconds of the currently playing video, sends it to the local AI, and shows the verdict as an overlay on the page.
+
+### Method 2 — Paste a URL
+Click the Authrix icon → paste a direct video URL → **Analyze**
 
-### Method 2 — Toolbar popup
-Click the Authrix icon in the toolbar:
-- Auto-detects videos on the current page
-- Paste any direct video URL manually
-- Shows last analysis result
+Works with direct `.mp4` / `.webm` links. For YouTube, Twitter, TikTok etc., `yt-dlp` must be installed on the backend (`pip install yt-dlp`).
 
-### Method 3 — Right-click a link
-Right-click any link to a video file → **"🔍 Analyze video URL with Authrix"**
+### Method 3 — Right-click menu
+- Right-click anywhere on a page → **🔍 Analyze with Authrix** (captures tab stream)
+- Right-click a video link → **🔗 Analyze video URL with Authrix**
 
-## How it works
+## Architecture (MV3)
+
+```
+popup.js
+  └─ sends START_CAPTURE / ANALYZE_URL → background.js
 
-1. Extension captures the video URL from the page
-2. Background service worker fetches the video and sends it to `localhost:8000/analyze`
-3. FastAPI backend runs the full 5-agent pipeline (visual + audio)
-4. Result overlay appears on the page with verdict, confidence, and insights
+background.js
+  ├─ tabCapture.getMediaStreamId()     (stream ID for the tab)
+  ├─ creates offscreen document
+  └─ sends RECORD_OFFSCREEN → offscreen.js
+
+offscreen.js
+  ├─ getUserMedia({ chromeMediaSource: 'tab' })
+  ├─ MediaRecorder records for 12s
+  └─ sends BLOB_READY → background.js
+
+background.js
+  ├─ POST /analyze (blob) or POST /analyze-url (URL)
+  └─ sends ANALYSIS_RESULT → content.js
+
+content.js
+  └─ renders overlay with verdict, confidence, details
+```
 
 ## Limitations
 
-- **DRM-protected videos** (Netflix, Disney+) cannot be analyzed
-- **YouTube** — the extension detects the page URL but YouTube's video streams require yt-dlp; direct URL analysis works for non-DRM videos
+- **DRM-protected content** (Netflix, Disney+, Prime) cannot be captured
+- **YouTube** tab capture works; URL analysis requires `yt-dlp` on the backend
 - Backend must be running on `localhost:8000`
-- Large videos (>100MB) may time out
+- Videos > 100 MB may time out

extension/background.js

@@ -1,40 +1,60 @@
 /**
- * Authrix Extension — Background Service Worker v2
+ * Authrix Extension — Background Service Worker v3
  *
- * Strategy: Use chrome.tabCapture to record the tab's live video stream
- * for N seconds, then send the recorded blob to the local FastAPI backend.
- * No video download needed — works on any platform.
+ * Architecture (MV3-compliant):
+ *   1. tabCapture.getMediaStreamId()  → get stream ID for the target tab
+ *   2. Create offscreen document      → only place getUserMedia(tab) works in MV3
+ *   3. offscreen.js records the stream and sends BLOB_READY back here
+ *   4. We POST the blob to the local FastAPI backend
+ *   5. Result is sent to the content script overlay on the original tab
  */
 
-const API_BASE    = 'http://localhost:8000';
-const CAPTURE_SEC = 12;   // seconds to record (enough for frame sampling)
+const API_BASE    = 'https://aarav13-authrix.hf.space';
+const CAPTURE_SEC = 20;   // Increased from 12s for more sample frames
+const OFFSCREEN_URL = chrome.runtime.getURL('offscreen.html');
 
 // ── Context menu ──────────────────────────────────────────────────────────────
 chrome.runtime.onInstalled.addListener(() => {
   chrome.contextMenus.create({
     id:       'authrix-capture',
-    title:    '🔍 Analyze with Authrix (capture tab)',
+    title:    '🔍 Analyze with Authrix',
     contexts: ['page', 'video', 'frame'],
   });
+  chrome.contextMenus.create({
+    id:       'authrix-url',
+    title:    '🔗 Analyze video URL with Authrix',
+    contexts: ['link'],
+  });
 });
 
 chrome.contextMenus.onClicked.addListener((info, tab) => {
   if (info.menuItemId === 'authrix-capture' && tab?.id) {
     startCapture(tab.id);
   }
+  if (info.menuItemId === 'authrix-url' && tab?.id && info.linkUrl) {
+    analyzeUrl(info.linkUrl, tab.id);
+  }
 });
 
 // ── Message handler ───────────────────────────────────────────────────────────
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
 
   if (msg.type === 'START_CAPTURE') {
-    const tabId = sender.tab?.id || msg.tabId;
+    const tabId = msg.tabId || sender.tab?.id;
     startCapture(tabId)
       .then(() => sendResponse({ ok: true }))
       .catch(e => sendResponse({ ok: false, error: e.message }));
     return true;
   }
 
+  if (msg.type === 'ANALYZE_URL') {
+    const tabId = msg.tabId || sender.tab?.id;
+    analyzeUrl(msg.url, tabId)
+      .then(() => sendResponse({ ok: true }))
+      .catch(e => sendResponse({ ok: false, error: e.message }));
+    return true;
+  }
+
   if (msg.type === 'CHECK_HEALTH') {
     fetch(`${API_BASE}/health`)
       .then(r => r.json())
@@ -43,29 +63,32 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
     return true;
   }
 
-  if (msg.type === 'SEND_BLOB_CHUNKS') {
-    // Receive recorded video chunks from offscreen/content, send to backend
-    receiveAndAnalyze(msg.chunks, msg.mimeType, sender.tab?.id)
-      .then(result => {
-        chrome.storage.local.set({ lastResult: { ...result, file: 'Tab capture' } });
-        // Send result back to the content script on that tab
-        if (sender.tab?.id) {
-          chrome.tabs.sendMessage(sender.tab.id, { type: 'ANALYSIS_RESULT', result });
-        }
-        sendResponse({ ok: true, result });
-      })
-      .catch(e => {
-        if (sender.tab?.id) {
-          chrome.tabs.sendMessage(sender.tab.id, { type: 'ANALYSIS_ERROR', error: e.message });
-        }
-        sendResponse({ ok: false, error: e.message });
-      });
-    return true;
+  // ── Messages from offscreen document ─────────────────────────────────────
+  if (msg.type === 'BLOB_READY') {
+    handleBlobReady(msg.chunks, msg.mimeType, msg.tabId, msg.totalSize);
+    return false;
+  }
+
+  if (msg.type === 'RECORD_PROGRESS') {
+    if (msg.tabId) {
+      chrome.tabs.sendMessage(msg.tabId, {
+        type: 'CAPTURE_PROGRESS',
+        elapsed: msg.elapsed,
+        total:   msg.total,
+      }).catch(() => {});
+    }
+    return false;
   }
 
-  if (msg.type === 'ANALYSIS_ERROR_FROM_CONTENT') {
-    // Bubble up errors from content script recording
-    console.error('[Authrix BG] Content error:', msg.error);
+  if (msg.type === 'RECORD_ERROR') {
+    if (msg.tabId) {
+      chrome.tabs.sendMessage(msg.tabId, {
+        type:  'ANALYSIS_ERROR',
+        error: msg.error,
+      }).catch(() => {});
+    }
+    closeOffscreen();
+    return false;
   }
 });
 
@@ -73,37 +96,112 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
 async function startCapture(tabId) {
   if (!tabId) throw new Error('No tab ID');
 
-  // Tell content script to show loading overlay
-  await chrome.tabs.sendMessage(tabId, { type: 'SHOW_CAPTURE_OVERLAY' });
+  // Show loading overlay on the tab
+  await chrome.tabs.sendMessage(tabId, { type: 'SHOW_CAPTURE_OVERLAY' }).catch(() => {
+    // Content script may not be injected yet — inject it
+    return chrome.scripting.executeScript({
+      target: { tabId },
+      files:  ['content.js'],
+    }).then(() =>
+      chrome.tabs.sendMessage(tabId, { type: 'SHOW_CAPTURE_OVERLAY' })
+    );
+  });
 
-  // Get a MediaStream for the tab using tabCapture
-  // tabCapture.getMediaStreamId gives us a stream ID usable in content scripts
+  // Get stream ID (must be called from background, not offscreen)
   const streamId = await new Promise((resolve, reject) => {
-    chrome.tabCapture.getMediaStreamId({ targetTabId: tabId }, (id) => {
-      if (chrome.runtime.lastError) reject(new Error(chrome.runtime.lastError.message));
-      else resolve(id);
+    chrome.tabCapture.getMediaStreamId({ targetTabId: tabId }, id => {
+      if (chrome.runtime.lastError) {
+        reject(new Error(chrome.runtime.lastError.message));
+      } else {
+        resolve(id);
+      }
     });
   });
 
-  // Send stream ID to content script — it will record and send back chunks
-  await chrome.tabs.sendMessage(tabId, {
-    type:       'RECORD_STREAM',
-    streamId:   streamId,
+  // Ensure offscreen document exists
+  await ensureOffscreen();
+
+  // Tell offscreen to start recording
+  await chrome.runtime.sendMessage({
+    type:       'RECORD_OFFSCREEN',
+    streamId,
     durationMs: CAPTURE_SEC * 1000,
+    tabId,
   });
 }
 
-// ── Receive chunks and analyze ────────────────────────────────────────────────
-async function receiveAndAnalyze(base64Chunks, mimeType, tabId) {
-  // Reconstruct blob from base64 chunks
-  const byteArrays = base64Chunks.map(chunk => {
-    const binary = atob(chunk);
-    const bytes  = new Uint8Array(binary.length);
-    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-    return bytes;
-  });
+// ── Analyze a direct video URL ────────────────────────────────────────────────
+async function analyzeUrl(url, tabId) {
+  if (!url) throw new Error('No URL provided');
+
+  if (tabId) {
+    await chrome.tabs.sendMessage(tabId, { type: 'SHOW_URL_ANALYSIS_OVERLAY', url }).catch(() => {});
+  }
+
+  try {
+    const res = await fetch(`${API_BASE}/analyze-url`, {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ url }),
+    });
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.detail || `Backend error ${res.status}`);
+    }
+
+    const result = await res.json();
+    result.file  = url.length > 60 ? url.slice(0, 57) + '…' : url;
 
-  const blob     = new Blob(byteArrays, { type: mimeType || 'video/webm' });
+    chrome.storage.local.set({ lastResult: result });
+
+    if (tabId) {
+      chrome.tabs.sendMessage(tabId, { type: 'ANALYSIS_RESULT', result }).catch(() => {});
+    }
+  } catch (err) {
+    if (tabId) {
+      chrome.tabs.sendMessage(tabId, { type: 'ANALYSIS_ERROR', error: err.message }).catch(() => {});
+    }
+    throw err;
+  }
+}
+
+// ── Handle blob from offscreen ────────────────────────────────────────────────
+async function handleBlobReady(chunks, mimeType, tabId, totalSize) {
+  closeOffscreen();
+
+  try {
+    if (tabId) {
+      chrome.tabs.sendMessage(tabId, { type: 'CAPTURE_PROGRESS', elapsed: 12, total: 12 }).catch(() => {});
+    }
+
+    const result = await submitBlob(chunks, mimeType, totalSize);
+    result.file  = 'Tab capture';
+
+    chrome.storage.local.set({ lastResult: result });
+
+    if (tabId) {
+      chrome.tabs.sendMessage(tabId, { type: 'ANALYSIS_RESULT', result }).catch(() => {});
+    }
+  } catch (err) {
+    if (tabId) {
+      chrome.tabs.sendMessage(tabId, { type: 'ANALYSIS_ERROR', error: err.message }).catch(() => {});
+    }
+  }
+}
+
+// ── Submit blob to backend ────────────────────────────────────────────────────
+async function submitBlob(chunks, mimeType, totalSize) {
+  // Reassemble chunks from array format back to Uint8Array
+  const uint8Array = new Uint8Array(totalSize);
+  let offset = 0;
+  
+  for (const chunk of chunks) {
+    uint8Array.set(chunk, offset);
+    offset += chunk.length;
+  }
+
+  const blob     = new Blob([uint8Array], { type: mimeType || 'video/webm' });
   const filename = `capture_${Date.now()}.webm`;
 
   const fd = new FormData();
@@ -116,3 +214,22 @@ async function receiveAndAnalyze(base64Chunks, mimeType, tabId) {
   }
   return res.json();
 }
+
+// ── Offscreen document management ────────────────────────────────────────────
+async function ensureOffscreen() {
+  const existing = await chrome.offscreen.hasDocument().catch(() => false);
+  if (!existing) {
+    await chrome.offscreen.createDocument({
+      url:    OFFSCREEN_URL,
+      reasons: ['USER_MEDIA'],
+      justification: 'Record tab video stream for deepfake analysis',
+    });
+  }
+}
+
+async function closeOffscreen() {
+  const exists = await chrome.offscreen.hasDocument().catch(() => false);
+  if (exists) {
+    await chrome.offscreen.closeDocument().catch(() => {});
+  }
+}

extension/content.js

@@ -1,25 +1,37 @@
 /**
- * Authrix Extension — Content Script v2
+ * Authrix Extension — Content Script v3
  *
- * Handles:
- * 1. Overlay UI (loading, result, error)
- * 2. Tab stream recording via MediaRecorder (using streamId from background)
- * 3. Sending recorded chunks back to background for analysis
+ * Responsibilities:
+ *  - Render the overlay UI (loading, result, error states)
+ *  - Relay messages from background to the overlay
+ *  - Recording is handled by offscreen.js (MV3 requirement)
  */
 
-// ── Message listener from background ─────────────────────────────────────────
+// ── Message listener ──────────────────────────────────────────────────────────
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+
   if (msg.type === 'SHOW_CAPTURE_OVERLAY') {
-    showOverlay();
+    showOverlay('capture');
     sendResponse({ ok: true });
   }
 
-  if (msg.type === 'RECORD_STREAM') {
-    recordStream(msg.streamId, msg.durationMs);
+  if (msg.type === 'SHOW_URL_ANALYSIS_OVERLAY') {
+    showOverlay('url', msg.url);
     sendResponse({ ok: true });
   }
 
+  if (msg.type === 'CAPTURE_PROGRESS') {
+    const pct = Math.min(95, Math.round((msg.elapsed / msg.total) * 65));
+    updateLoadingText(`Recording: ${msg.elapsed}s / ${msg.total}s`);
+    if (msg.elapsed === 1) activateStep(0);
+    if (msg.elapsed >= msg.total) {
+      activateStep(1);
+      updateLoadingText('Processing frames — running AI analysis…');
+    }
+  }
+
   if (msg.type === 'ANALYSIS_RESULT') {
+    activateStep(3);
     renderResult(msg.result);
   }
 
@@ -28,101 +40,25 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
   }
 });
 
-// ── Global trigger (from background context menu) ─────────────────────────────
-window.__authrixCapture = function() {
-  chrome.runtime.sendMessage({ type: 'START_CAPTURE' });
-};
-
-// ── Record stream ─────────────────────────────────────────────────────────────
-async function recordStream(streamId, durationMs) {
-  try {
-    updateLoadingText('Connecting to video stream...');
-
-    // Get the MediaStream from the stream ID
-    const stream = await navigator.mediaDevices.getUserMedia({
-      video: { mandatory: { chromeMediaSource: 'tab', chromeMediaSourceId: streamId } },
-      audio: { mandatory: { chromeMediaSource: 'tab', chromeMediaSourceId: streamId } },
-    });
-
-    updateLoadingText('Recording video stream...');
-    activateStep(0);
-
-    // Pick best supported format
-    const mimeType = getSupportedMimeType();
-    const recorder = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: 2_000_000 });
-    const chunks   = [];
-
-    recorder.ondataavailable = e => { if (e.data.size > 0) chunks.push(e.data); };
-
-    recorder.onstop = async () => {
-      stream.getTracks().forEach(t => t.stop());
-      activateStep(1);
-      updateLoadingText('Processing captured frames...');
-
-      try {
-        // Convert chunks to base64 for message passing
-        const blob    = new Blob(chunks, { type: mimeType });
-        const base64  = await blobToBase64(blob);
-
-        activateStep(2);
-        updateLoadingText('Running AI analysis...');
-
-        // Send to background for backend submission
-        chrome.runtime.sendMessage({
-          type:       'SEND_BLOB_CHUNKS',
-          chunks:     [base64],   // single base64 string of full blob
-          mimeType:   mimeType,
-        });
-      } catch (err) {
-        showError('Failed to process recording: ' + err.message);
-        chrome.runtime.sendMessage({ type: 'ANALYSIS_ERROR_FROM_CONTENT', error: err.message });
-      }
-    };
-
-    recorder.onerror = e => {
-      showError('Recording error: ' + e.error?.message);
-    };
-
-    // Record for durationMs then stop
-    recorder.start(1000); // collect data every 1s
-    setTimeout(() => {
-      if (recorder.state === 'recording') recorder.stop();
-    }, durationMs);
-
-    // Update progress during recording
-    const startTime = Date.now();
-    const progressInterval = setInterval(() => {
-      if (recorder.state !== 'recording') { clearInterval(progressInterval); return; }
-      const elapsed = (Date.now() - startTime) / 1000;
-      const total   = durationMs / 1000;
-      const pct     = Math.min(99, Math.round((elapsed / total) * 60));
-      updateLoadingText(`Recording: ${elapsed.toFixed(0)}s / ${total}s (${pct}% captured)`);
-    }, 500);
-
-  } catch (err) {
-    showError(err.message.includes('Permission')
-      ? 'Tab capture permission denied. Try reloading the page.'
-      : 'Stream capture failed: ' + err.message);
-  }
-}
-
-// ── Overlay UI ──────────────────────���─────────────────────────────────────────
-function showOverlay() {
+// ── Show overlay ──────────────────────────────────────────────────────────────
+function showOverlay(mode = 'capture', url = '') {
   document.getElementById('authrix-overlay')?.remove();
 
   const overlay = document.createElement('div');
   overlay.id = 'authrix-overlay';
   overlay.innerHTML = `
     <div id="authrix-panel">
+
+      <!-- Header -->
       <div id="authrix-header">
         <div id="authrix-logo">
           <span id="authrix-logo-icon">◉</span>
           <span>AUTHRIX AI</span>
         </div>
-        <button id="authrix-close">✕</button>
+        <button id="authrix-close" title="Close">✕</button>
       </div>
 
-      <!-- Loading -->
+      <!-- Loading state -->
       <div id="authrix-loading">
         <div id="authrix-radar">
           <div class="authrix-ring r1"></div>
@@ -130,17 +66,24 @@ function showOverlay() {
           <div class="authrix-ring r3"></div>
           <div id="authrix-radar-dot"></div>
         </div>
-        <div id="authrix-loading-text">Initializing capture...</div>
+        <div id="authrix-loading-text">
+          ${mode === 'url' ? 'Downloading &amp; analyzing video…' : 'Initializing capture…'}
+        </div>
         <div id="authrix-steps">
-          <div class="authrix-step" id="as0">🎬 Recording tab stream</div>
+          <div class="authrix-step" id="as0">
+            ${mode === 'url' ? '⬇️ Downloading video' : '🎬 Recording tab stream'}
+          </div>
           <div class="authrix-step" id="as1">🖼️ Extracting frames</div>
           <div class="authrix-step" id="as2">🧠 Running AI models</div>
           <div class="authrix-step" id="as3">📊 Generating report</div>
         </div>
-        <div id="authrix-note">Recording ~12 seconds of video for analysis</div>
+        ${mode === 'url'
+          ? `<div id="authrix-note" style="font-family:monospace;font-size:10px;word-break:break-all;">${escHtml(url.slice(0, 80))}${url.length > 80 ? '…' : ''}</div>`
+          : `<div id="authrix-note">Recording ~20 seconds of video for analysis</div>`
+        }
       </div>
 
-      <!-- Result -->
+      <!-- Result state -->
       <div id="authrix-result" style="display:none;">
         <div id="authrix-verdict-row">
           <div id="authrix-badge"></div>
@@ -155,34 +98,44 @@ function showOverlay() {
           <span id="authrix-audio-icon">🎙️</span>
           <span id="authrix-audio-label"></span>
         </div>
+        <div id="authrix-meta"></div>
         <div id="authrix-actions">
           <button id="authrix-reanalyze">↺ Capture Again</button>
           <button id="authrix-open-app">Open Authrix App ↗</button>
         </div>
       </div>
 
-      <!-- Error -->
+      <!-- Error state -->
       <div id="authrix-error" style="display:none;">
         <div id="authrix-error-icon">⚠</div>
         <div id="authrix-error-msg"></div>
         <div id="authrix-error-hint"></div>
         <button id="authrix-retry">↺ Retry</button>
       </div>
+
     </div>
   `;
 
   document.body.appendChild(overlay);
 
+  // Wire up buttons
   document.getElementById('authrix-close').onclick = () => overlay.remove();
   overlay.addEventListener('click', e => { if (e.target === overlay) overlay.remove(); });
+
   document.getElementById('authrix-open-app').onclick = () =>
-    window.open('http://localhost:8000', '_blank');
+    window.open('https://aarav13-authrix.hf.space', '_blank');
+
   document.getElementById('authrix-reanalyze').onclick = () =>
     chrome.runtime.sendMessage({ type: 'START_CAPTURE' });
+
   document.getElementById('authrix-retry').onclick = () =>
     chrome.runtime.sendMessage({ type: 'START_CAPTURE' });
+
+  // Auto-activate first step for URL mode (no recording phase)
+  if (mode === 'url') activateStep(1);
 }
 
+// ── Loading helpers ───────────────────────────────────────────────────────────
 function updateLoadingText(text) {
   const el = document.getElementById('authrix-loading-text');
   if (el) el.textContent = text;
@@ -204,27 +157,30 @@ function showState(state) {
   if (error)   error.style.display   = state === 'error'   ? 'flex'  : 'none';
 }
 
+// ── Render result ─────────────────────────────────────────────────────────────
 function renderResult(data) {
-  activateStep(3);
-
   const isFake = data.result === 'FAKE';
-  const conf   = data.confidence || 0;
+  const conf   = data.confidence ?? 0;
   const color  = isFake ? '#ff4466' : '#00ff9c';
 
+  // Badge
   const badge = document.getElementById('authrix-badge');
   if (badge) {
-    badge.textContent   = isFake ? '⚠' : '✓';
-    badge.style.color   = color;
+    badge.textContent       = isFake ? '⚠' : '✓';
+    badge.style.color       = color;
     badge.style.borderColor = color;
     badge.style.boxShadow   = `0 0 16px ${color}44`;
   }
 
+  // Verdict text
   const vt = document.getElementById('authrix-verdict-text');
   if (vt) { vt.textContent = isFake ? 'DEEPFAKE DETECTED' : 'AUTHENTIC VIDEO'; vt.style.color = color; }
 
+  // Confidence number
   const cv = document.getElementById('authrix-conf');
   if (cv) { cv.textContent = conf + '%'; cv.style.color = color; }
 
+  // Confidence bar
   const bar = document.getElementById('authrix-conf-bar');
   if (bar) {
     bar.style.background = isFake
@@ -234,6 +190,7 @@ function renderResult(data) {
     setTimeout(() => { bar.style.width = conf + '%'; }, 80);
   }
 
+  // Detail bullets (max 3)
   const dl = document.getElementById('authrix-details');
   if (dl) {
     dl.innerHTML = (data.details || []).slice(0, 3).map(d =>
@@ -241,58 +198,68 @@ function renderResult(data) {
     ).join('');
   }
 
+  // Audio row
   const audioRow = document.getElementById('authrix-audio-row');
   if (audioRow && data.audio?.available) {
-    const isAI = data.audio.result === 'AI_VOICE';
+    const isAI      = data.audio.result === 'AI_VOICE';
     const isMismatch = data.audio.result === 'AV_MISMATCH';
-    const aColor = (isAI || isMismatch) ? '#ff4466' : '#00ff9c';
+    const aColor    = (isAI || isMismatch) ? '#ff4466' : '#00ff9c';
     const audioIcon  = document.getElementById('authrix-audio-icon');
     const audioLabel = document.getElementById('authrix-audio-label');
     if (audioIcon)  audioIcon.textContent  = (isAI || isMismatch) ? '🤖' : '🎙️';
     if (audioLabel) {
       audioLabel.textContent = isMismatch
         ? 'AV Mismatch — face-swap detected'
-        : isAI ? `AI Voice (${data.audio.confidence}%)`
-               : `Human Voice (${data.audio.confidence}%)`;
+        : isAI
+          ? `AI Voice (${data.audio.confidence}%)`
+          : `Human Voice (${data.audio.confidence}%)`;
       audioLabel.style.color = aColor;
     }
     audioRow.style.display = 'flex';
   }
 
+  // Metadata row
+  const meta = document.getElementById('authrix-meta');
+  if (meta && data.metadata) {
+    const m = data.metadata;
+    const parts = [];
+    if (m.video_duration_sec) parts.push(`${m.video_duration_sec}s`);
+    if (m.resolution && m.resolution !== '0x0') parts.push(m.resolution);
+    if (m.frames_with_faces != null) parts.push(`${m.frames_with_faces} faces`);
+    if (data.processing_time_sec) parts.push(`${data.processing_time_sec}s analysis`);
+    if (parts.length) {
+      meta.textContent = parts.join(' · ');
+      meta.style.cssText = 'font-size:10px;color:rgba(255,255,255,0.25);margin-bottom:12px;font-family:monospace;';
+    }
+  }
+
   showState('result');
 }
 
+// ── Show error ────────────────────────────────────────────────────────────────
 function showError(message) {
-  const isOffline = message?.includes('fetch') || message?.includes('Failed to fetch');
+  const isOffline = !message || message.includes('fetch') || message.includes('Failed to fetch') || message.includes('ERR_CONNECTION');
   const errMsg  = document.getElementById('authrix-error-msg');
   const errHint = document.getElementById('authrix-error-hint');
-  if (errMsg)  errMsg.textContent  = isOffline ? 'Authrix server is not running' : (message || 'Unknown error');
-  if (errHint) errHint.textContent = isOffline
-    ? 'Run: cd backend && python -m uvicorn main:app --port 8000'
-    : 'Make sure the video is playing before capturing.';
-  showState('error');
-}
-
-// ── Utilities ─────────────────────────────────────────────────────────────────
-function getSupportedMimeType() {
-  const types = [
-    'video/webm;codecs=vp9,opus',
-    'video/webm;codecs=vp8,opus',
-    'video/webm',
-    'video/mp4',
-  ];
-  return types.find(t => MediaRecorder.isTypeSupported(t)) || 'video/webm';
-}
 
-function blobToBase64(blob) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload  = () => resolve(reader.result.split(',')[1]);
-    reader.onerror = reject;
-    reader.readAsDataURL(blob);
-  });
+  if (errMsg) {
+    errMsg.textContent = isOffline
+      ? 'Authrix server is not running'
+      : (message || 'Unknown error');
+  }
+  if (errHint) {
+    errHint.textContent = isOffline
+      ? 'Visit https://aarav13-authrix.hf.space to check server status'
+      : 'Make sure a video is playing before capturing.';
+  }
+  showState('error');
 }
 
+// ── Utility ───────────────────────────────────────────────────────────────────
 function escHtml(s) {
-  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  return String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
 }

extension/manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "Authrix — Deepfake Detector",
-  "version": "2.0.0",
-  "description": "Detect deepfake videos on any webpage. Captures tab stream directly — no download needed. Works on YouTube, Twitter, any platform.",
+  "version": "2.2.0",
+  "description": "Detect deepfake videos on any webpage. Captures tab stream directly — works on YouTube, Twitter, TikTok, any platform.",
 
   "permissions": [
     "contextMenus",
@@ -10,11 +10,13 @@
     "scripting",
     "storage",
     "tabCapture",
-    "tabs"
+    "tabs",
+    "offscreen"
   ],
 
   "host_permissions": [
-    "http://localhost:8000/*"
+    "http://localhost:8000/*",
+    "https://aarav13-authrix.hf.space/*"
   ],
 
   "background": {

extension/offscreen.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head><meta charset="UTF-8"/></head>
+<body>
+<!-- Offscreen document: handles MediaRecorder since service workers can't -->
+<script src="offscreen.js"></script>
+</body>
+</html>

extension/offscreen.js

@@ -0,0 +1,122 @@
+/**
+ * Authrix Extension — Offscreen Document
+ *
+ * Offscreen documents can use getUserMedia with chromeMediaSource:'tab',
+ * which is NOT available in content scripts or service workers in MV3.
+ */
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  if (msg.type === 'RECORD_OFFSCREEN') {
+    startRecording(msg.streamId, msg.durationMs, msg.tabId)
+      .then(() => sendResponse({ ok: true }))
+      .catch(e => sendResponse({ ok: false, error: e.message }));
+    return true;
+  }
+});
+
+let activeRecorder = null;
+
+async function startRecording(streamId, durationMs, tabId) {
+  if (activeRecorder && activeRecorder.state === 'recording') {
+    activeRecorder.stop();
+  }
+
+  const stream = await navigator.mediaDevices.getUserMedia({
+    video: {
+      mandatory: {
+        chromeMediaSource: 'tab',
+        chromeMediaSourceId: streamId,
+      },
+    },
+    audio: {
+      mandatory: {
+        chromeMediaSource: 'tab',
+        chromeMediaSourceId: streamId,
+      },
+    },
+  });
+
+  const mimeType = getSupportedMimeType();
+  const recorder = new MediaRecorder(stream, {
+    mimeType,
+    videoBitsPerSecond: 5_000_000,  // Increased from 2.5Mbps for better quality
+  });
+  activeRecorder = recorder;
+
+  const chunks = [];
+  recorder.ondataavailable = e => {
+    if (e.data && e.data.size > 0) chunks.push(e.data);
+  };
+
+  recorder.onstop = async () => {
+    stream.getTracks().forEach(t => t.stop());
+
+    try {
+      const blob = new Blob(chunks, { type: mimeType });
+      
+      // Convert blob to ArrayBuffer (more reliable than base64 for large files)
+      const arrayBuffer = await blob.arrayBuffer();
+      const uint8Array = new Uint8Array(arrayBuffer);
+      
+      // Chunk into 1MB pieces to avoid message size limits
+      const CHUNK_SIZE = 1024 * 1024; // 1MB
+      const totalChunks = Math.ceil(uint8Array.length / CHUNK_SIZE);
+      const chunkedData = [];
+      
+      for (let i = 0; i < totalChunks; i++) {
+        const start = i * CHUNK_SIZE;
+        const end = Math.min(start + CHUNK_SIZE, uint8Array.length);
+        const chunk = uint8Array.slice(start, end);
+        // Convert to regular array for JSON serialization
+        chunkedData.push(Array.from(chunk));
+      }
+
+      chrome.runtime.sendMessage({
+        type: 'BLOB_READY',
+        chunks: chunkedData,
+        mimeType,
+        tabId,
+        totalSize: uint8Array.length,
+      });
+    } catch (err) {
+      chrome.runtime.sendMessage({
+        type:  'RECORD_ERROR',
+        error: err.message,
+        tabId,
+      });
+    }
+  };
+
+  recorder.onerror = e => {
+    chrome.runtime.sendMessage({
+      type:  'RECORD_ERROR',
+      error: e.error?.message || 'MediaRecorder error',
+      tabId,
+    });
+  };
+
+  recorder.start(1000);
+
+  setTimeout(() => {
+    if (recorder.state === 'recording') recorder.stop();
+  }, durationMs);
+
+  // Progress ticks
+  const startTime = Date.now();
+  const tick = setInterval(() => {
+    if (recorder.state !== 'recording') { clearInterval(tick); return; }
+    const elapsed = Math.round((Date.now() - startTime) / 1000);
+    const total   = Math.round(durationMs / 1000);
+    chrome.runtime.sendMessage({ type: 'RECORD_PROGRESS', elapsed, total, tabId });
+  }, 800);
+}
+
+function getSupportedMimeType() {
+  const types = [
+    'video/webm;codecs=vp9,opus',
+    'video/webm;codecs=vp8,opus',
+    'video/webm',
+    'video/mp4',
+  ];
+  return types.find(t => MediaRecorder.isTypeSupported(t)) || 'video/webm';
+}

extension/popup.html

@@ -13,6 +13,7 @@
       font-size: 13px;
     }
 
+    /* ── Header ── */
     .header {
       padding: 14px 16px 12px;
       border-bottom: 1px solid rgba(0,255,156,0.12);
@@ -43,14 +44,19 @@
       border-color: rgba(255,68,102,0.3);
       color: #ff4466; background: rgba(255,68,102,0.08);
     }
+    .status-badge.loading {
+      border-color: rgba(255,170,0,0.3);
+      color: #ffaa00; background: rgba(255,170,0,0.08);
+    }
 
-    .body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+    /* ── Body ── */
+    .body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
 
     /* Page info */
     .page-card {
       background: rgba(255,255,255,0.03);
       border: 1px solid rgba(255,255,255,0.07);
-      border-radius: 8px; padding: 10px 12px;
+      border-radius: 8px; padding: 9px 12px;
       display: flex; align-items: center; gap: 10px;
     }
     .page-icon { font-size: 18px; flex-shrink: 0; }
@@ -62,7 +68,7 @@
 
     /* Main capture button */
     .btn-capture {
-      width: 100%; padding: 14px;
+      width: 100%; padding: 13px;
       background: linear-gradient(135deg, #00ff9c, #00cc6a);
       color: #002110; border: none; border-radius: 10px;
       font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
@@ -71,25 +77,61 @@
       display: flex; align-items: center; justify-content: center; gap: 8px;
     }
     .btn-capture:hover {
-      transform: translateY(-2px);
+      transform: translateY(-1px);
       box-shadow: 0 0 36px rgba(0,255,156,0.5);
     }
     .btn-capture:active { transform: scale(0.98); }
+    .btn-capture:disabled {
+      opacity: 0.4; cursor: not-allowed; transform: none;
+      box-shadow: none;
+    }
+
+    /* Divider */
+    .divider {
+      display: flex; align-items: center; gap: 8px;
+      color: rgba(255,255,255,0.2); font-size: 10px; letter-spacing: 0.1em;
+    }
+    .divider::before, .divider::after {
+      content: ''; flex: 1; height: 1px;
+      background: rgba(255,255,255,0.07);
+    }
+
+    /* URL input */
+    .url-row { display: flex; gap: 6px; }
+    .url-input {
+      flex: 1; padding: 8px 10px;
+      background: rgba(255,255,255,0.04);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 7px; color: #dae5da;
+      font-size: 11px; font-family: monospace;
+      outline: none; transition: border-color 0.2s;
+    }
+    .url-input::placeholder { color: rgba(255,255,255,0.2); }
+    .url-input:focus { border-color: rgba(0,255,156,0.4); }
+    .btn-url {
+      padding: 8px 12px;
+      background: rgba(0,255,156,0.1);
+      border: 1px solid rgba(0,255,156,0.25);
+      border-radius: 7px; color: #00ff9c;
+      font-size: 11px; font-weight: 600; cursor: pointer;
+      transition: all 0.2s; white-space: nowrap;
+    }
+    .btn-url:hover { background: rgba(0,255,156,0.18); }
+    .btn-url:disabled { opacity: 0.4; cursor: not-allowed; }
 
     /* How it works */
     .how-it-works {
       background: rgba(255,255,255,0.02);
       border: 1px solid rgba(255,255,255,0.05);
-      border-radius: 8px; padding: 10px 12px;
+      border-radius: 8px; padding: 9px 12px;
     }
     .how-label {
       font-size: 9px; font-weight: 700; letter-spacing: 0.15em;
-      color: rgba(255,255,255,0.25); text-transform: uppercase; margin-bottom: 8px;
+      color: rgba(255,255,255,0.25); text-transform: uppercase; margin-bottom: 7px;
     }
     .how-step {
       display: flex; align-items: center; gap: 8px;
-      font-size: 10px; color: rgba(255,255,255,0.4);
-      padding: 3px 0;
+      font-size: 10px; color: rgba(255,255,255,0.4); padding: 2px 0;
     }
     .how-step-num {
       width: 16px; height: 16px; border-radius: 50%;
@@ -102,25 +144,27 @@
     #last-result {
       background: rgba(255,255,255,0.03);
       border: 1px solid rgba(255,255,255,0.07);
-      border-radius: 8px; padding: 10px 12px;
+      border-radius: 8px; padding: 9px 12px;
       display: none;
     }
     .result-label {
       font-size: 9px; font-weight: 700; letter-spacing: 0.15em;
-      color: rgba(255,255,255,0.25); text-transform: uppercase; margin-bottom: 6px;
+      color: rgba(255,255,255,0.25); text-transform: uppercase; margin-bottom: 5px;
     }
     .result-row { display: flex; align-items: center; justify-content: space-between; }
     .result-verdict { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
     .result-conf { font-size: 16px; font-weight: 700; font-family: monospace; }
     .result-bar-wrap {
       height: 3px; background: rgba(255,255,255,0.06);
-      border-radius: 99px; overflow: hidden; margin: 6px 0;
+      border-radius: 99px; overflow: hidden; margin: 5px 0;
     }
     .result-bar { height: 100%; border-radius: 99px; transition: width 0.8s ease; }
-    .result-file { font-size: 9px; color: rgba(255,255,255,0.2); font-family: monospace; }
+    .result-file { font-size: 9px; color: rgba(255,255,255,0.2); font-family: monospace;
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
+    /* Footer */
     .footer {
-      padding: 10px 16px;
+      padding: 9px 16px;
       border-top: 1px solid rgba(255,255,255,0.05);
       display: flex; align-items: center; justify-content: space-between;
     }
@@ -130,6 +174,20 @@
     }
     .footer-link:hover { color: #00ff9c; }
     .model-info { font-size: 9px; color: rgba(255,255,255,0.2); letter-spacing: 0.06em; }
+
+    /* Offline warning */
+    #offline-warn {
+      display: none;
+      background: rgba(255,68,102,0.06);
+      border: 1px solid rgba(255,68,102,0.2);
+      border-radius: 7px; padding: 8px 10px;
+      font-size: 10px; color: rgba(255,68,102,0.8);
+      line-height: 1.5;
+    }
+    #offline-warn code {
+      display: block; margin-top: 4px;
+      font-family: monospace; color: rgba(255,68,102,0.6);
+    }
   </style>
 </head>
 <body>
@@ -148,22 +206,38 @@
     <div class="page-card">
       <div class="page-icon">🎬</div>
       <div style="flex:1;min-width:0;">
-        <div class="page-title" id="pageTitle">Loading...</div>
+        <div class="page-title" id="pageTitle">Loading…</div>
         <div class="page-sub" id="pageSub">Detecting page</div>
       </div>
     </div>
 
-    <!-- Main button -->
+    <!-- Offline warning -->
+    <div id="offline-warn">
+      Backend not reachable.
+      <code>Visit: aarav13-authrix.hf.space</code>
+    </div>
+
+    <!-- Main capture button -->
     <button class="btn-capture" id="btnCapture">
       <span>⬤</span> Capture &amp; Analyze Video
     </button>
 
+    <!-- Divider -->
+    <div class="divider">OR PASTE URL</div>
+
+    <!-- URL input -->
+    <div class="url-row">
+      <input class="url-input" id="urlInput" type="url"
+             placeholder="https://example.com/video.mp4" />
+      <button class="btn-url" id="btnUrl">Analyze</button>
+    </div>
+
     <!-- How it works -->
     <div class="how-it-works">
       <div class="how-label">How it works</div>
-      <div class="how-step"><div class="how-step-num">1</div>Records 12s of the playing video</div>
+      <div class="how-step"><div class="how-step-num">1</div>Records 20s of the playing video</div>
       <div class="how-step"><div class="how-step-num">2</div>Sends to local AI for analysis</div>
-      <div class="how-step"><div class="how-step-num">3</div>Shows FAKE / REAL verdict</div>
+      <div class="how-step"><div class="how-step-num">3</div>Shows FAKE / REAL verdict on page</div>
     </div>
 
     <!-- Last result -->

extension/popup.js

@@ -1,35 +1,45 @@
 /**
- * Authrix Extension — Popup Script v2
- * Simple popup: check health, show status, trigger capture on click.
+ * Authrix Extension — Popup Script v3
  */
 
-const API_BASE = 'http://localhost:8000';
+const API_BASE = 'https://aarav13-authrix.hf.space';
 
 document.addEventListener('DOMContentLoaded', async () => {
-  await checkHealth();
-  loadLastResult();
-  wireButtons();
+  const online = await checkHealth();
   updatePageInfo();
+  loadLastResult();
+  wireButtons(online);
 });
 
 // ── Health check ──────────────────────────────────────────────────────────────
 async function checkHealth() {
   const badge     = document.getElementById('statusBadge');
   const modelInfo = document.getElementById('modelInfo');
+  const warn      = document.getElementById('offline-warn');
+
   try {
-    const res = await fetch(`${API_BASE}/health`);
+    const res = await fetch(`${API_BASE}/health`, { signal: AbortSignal.timeout(3000) });
     const d   = await res.json();
+
     if (d.ready) {
       badge.textContent = 'ONLINE';
-      badge.classList.remove('offline');
+      badge.classList.remove('offline', 'loading');
       modelInfo.textContent = (d.model || 'VIT ENSEMBLE').toUpperCase().slice(0, 22);
+      if (warn) warn.style.display = 'none';
       return true;
     }
-    badge.textContent = 'LOADING...';
+
+    badge.textContent = 'LOADING…';
+    badge.classList.remove('offline');
+    badge.classList.add('loading');
+    if (warn) warn.style.display = 'none';
     return false;
+
   } catch {
     badge.textContent = 'OFFLINE';
     badge.classList.add('offline');
+    badge.classList.remove('loading');
+    if (warn) warn.style.display = 'block';
     return false;
   }
 }
@@ -41,8 +51,11 @@ async function updatePageInfo() {
   try {
     const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
     if (tab?.title) {
-      title.textContent = tab.title.slice(0, 45);
-      sub.textContent   = new URL(tab.url).hostname;
+      title.textContent = tab.title.length > 44 ? tab.title.slice(0, 41) + '…' : tab.title;
+    }
+    if (tab?.url) {
+      try { sub.textContent = new URL(tab.url).hostname; }
+      catch { sub.textContent = 'Ready to capture'; }
     }
   } catch {
     title.textContent = 'Current page';
@@ -51,14 +64,32 @@ async function updatePageInfo() {
 }
 
 // ── Wire buttons ──────────────────────────────────────────────────────────────
-function wireButtons() {
-  document.getElementById('btnCapture').addEventListener('click', async () => {
+function wireButtons(online) {
+  const btnCapture = document.getElementById('btnCapture');
+  const btnUrl     = document.getElementById('btnUrl');
+  const urlInput   = document.getElementById('urlInput');
+
+  // Capture button
+  btnCapture.addEventListener('click', async () => {
     const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
     if (!tab?.id) return;
+    chrome.runtime.sendMessage({ type: 'START_CAPTURE', tabId: tab.id });
+    window.close();
+  });
+
+  // URL analyze button
+  btnUrl.addEventListener('click', async () => {
+    const url = urlInput.value.trim();
+    if (!url) { urlInput.focus(); return; }
+
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    chrome.runtime.sendMessage({ type: 'ANALYZE_URL', url, tabId: tab?.id });
+    window.close();
+  });
 
-    // Trigger capture from background (needs to be initiated from background for tabCapture)
-    await chrome.runtime.sendMessage({ type: 'START_CAPTURE', tabId: tab.id });
-    window.close(); // close popup so overlay is visible
+  // Allow Enter key in URL input
+  urlInput.addEventListener('keydown', e => {
+    if (e.key === 'Enter') btnUrl.click();
   });
 }
 
@@ -66,22 +97,30 @@ function wireButtons() {
 function loadLastResult() {
   chrome.storage.local.get('lastResult', ({ lastResult }) => {
     if (!lastResult) return;
+
     const el = document.getElementById('last-result');
     el.style.display = 'block';
 
     const isFake = lastResult.result === 'FAKE';
     const color  = isFake ? '#ff4466' : '#00ff9c';
+    const conf   = lastResult.confidence ?? 0;
+
+    const verdict = document.getElementById('lastVerdict');
+    verdict.textContent = lastResult.result;
+    verdict.style.color = color;
+
+    const confEl = document.getElementById('lastConf');
+    confEl.textContent = conf + '%';
+    confEl.style.color = color;
 
-    document.getElementById('lastVerdict').textContent = lastResult.result;
-    document.getElementById('lastVerdict').style.color = color;
-    document.getElementById('lastConf').textContent    = lastResult.confidence + '%';
-    document.getElementById('lastConf').style.color    = color;
-    document.getElementById('lastFile').textContent    = lastResult.file || 'Tab capture';
+    const fileEl = document.getElementById('lastFile');
+    const fileStr = lastResult.file || 'Tab capture';
+    fileEl.textContent = fileStr.length > 50 ? fileStr.slice(0, 47) + '…' : fileStr;
 
     const bar = document.getElementById('lastBar');
     bar.style.background = isFake
       ? 'linear-gradient(90deg,#880022,#ff4466)'
       : 'linear-gradient(90deg,#006633,#00ff9c)';
-    setTimeout(() => { bar.style.width = lastResult.confidence + '%'; }, 80);
+    setTimeout(() => { bar.style.width = conf + '%'; }, 80);
   });
 }

frontend-vanilla/index.html

@@ -276,6 +276,7 @@
     <span onclick="showState('heroSection')" class="text-2xl font-black tracking-tighter text-emerald-400 drop-shadow-[0_0_8px_rgba(0,255,156,0.5)] cursor-pointer">AUTHRIX AI</span>
     <div class="hidden md:flex items-center gap-6">
       <a onclick="showState('heroSection')" class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 py-1 px-2 rounded-sm cursor-pointer">Dashboard</a>
+      <a href="/pricing" class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 py-1 px-2 rounded-sm cursor-pointer">Pricing</a>
       <a onclick="openModal('agentsModal')" class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 py-1 px-2 rounded-sm cursor-pointer">Agents</a>
       <a onclick="openModal('logsModal')" class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 py-1 px-2 rounded-sm cursor-pointer">Logs</a>
       <a onclick="openModal('networkModal')" class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 py-1 px-2 rounded-sm cursor-pointer">Network</a>

frontend-vanilla/pricing.html

@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Authrix Pricing - AI-Powered Deepfake Detection</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: linear-gradient(135deg, #0a1f0f 0%, #0c150f 100%);
+      color: #dae5da;
+      min-height: 100vh;
+      padding: 40px 20px;
+    }
+    
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    
+    /* Header */
+    .header {
+      text-align: center;
+      margin-bottom: 60px;
+    }
+    
+    .logo {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 28px;
+      font-weight: 700;
+      letter-spacing: 0.12em;
+      color: #00ff9c;
+      text-shadow: 0 0 20px rgba(0,255,156,0.4);
+      margin-bottom: 20px;
+    }
+    
+    .logo-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: #00ff9c;
+      box-shadow: 0 0 16px #00ff9c;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.6; transform: scale(0.9); }
+    }
+    
+    h1 {
+      font-size: 48px;
+      margin-bottom: 16px;
+      background: linear-gradient(135deg, #00ff9c, #00cc6a);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    
+    .subtitle {
+      font-size: 20px;
+      color: rgba(255,255,255,0.6);
+      max-width: 600px;
+      margin: 0 auto;
+    }
+    
+    /* Pricing Cards */
+    .pricing-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 30px;
+      margin-bottom: 60px;
+    }
+    
+    .pricing-card {
+      background: rgba(255,255,255,0.03);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 16px;
+      padding: 40px 30px;
+      position: relative;
+      transition: all 0.3s ease;
+    }
+    
+    .pricing-card:hover {
+      transform: translateY(-8px);
+      border-color: rgba(0,255,156,0.3);
+      box-shadow: 0 20px 60px rgba(0,255,156,0.1);
+    }
+    
+    .pricing-card.popular {
+      border-color: #00ff9c;
+      box-shadow: 0 0 40px rgba(0,255,156,0.2);
+    }
+    
+    .popular-badge {
+      position: absolute;
+      top: -12px;
+      right: 30px;
+      background: linear-gradient(135deg, #00ff9c, #00cc6a);
+      color: #002110;
+      padding: 6px 16px;
+      border-radius: 20px;
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+    }
+    
+    .plan-name {
+      font-size: 24px;
+      font-weight: 700;
+      margin-bottom: 12px;
+      color: #00ff9c;
+    }
+    
+    .plan-price {
+      font-size: 48px;
+      font-weight: 700;
+      margin-bottom: 8px;
+      font-family: monospace;
+    }
+    
+    .plan-price span {
+      font-size: 18px;
+      color: rgba(255,255,255,0.5);
+    }
+    
+    .plan-interval {
+      font-size: 14px;
+      color: rgba(255,255,255,0.4);
+      margin-bottom: 24px;
+    }
+    
+    .plan-features {
+      list-style: none;
+      margin-bottom: 30px;
+    }
+    
+    .plan-features li {
+      padding: 12px 0;
+      border-bottom: 1px solid rgba(255,255,255,0.05);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 14px;
+    }
+    
+    .plan-features li:last-child {
+      border-bottom: none;
+    }
+    
+    .check {
+      color: #00ff9c;
+      font-size: 18px;
+    }
+    
+    .cta-button {
+      width: 100%;
+      padding: 16px;
+      border: none;
+      border-radius: 10px;
+      font-size: 16px;
+      font-weight: 700;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      letter-spacing: 0.06em;
+    }
+    
+    .cta-button.primary {
+      background: linear-gradient(135deg, #00ff9c, #00cc6a);
+      color: #002110;
+      box-shadow: 0 8px 24px rgba(0,255,156,0.3);
+    }
+    
+    .cta-button.primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 12px 32px rgba(0,255,156,0.4);
+    }
+    
+    .cta-button.secondary {
+      background: rgba(255,255,255,0.05);
+      color: #00ff9c;
+      border: 1px solid rgba(0,255,156,0.3);
+    }
+    
+    .cta-button.secondary:hover {
+      background: rgba(0,255,156,0.1);
+    }
+    
+    /* Enterprise Section */
+    .enterprise-section {
+      background: rgba(0,255,156,0.05);
+      border: 1px solid rgba(0,255,156,0.2);
+      border-radius: 16px;
+      padding: 50px;
+      text-align: center;
+      margin-bottom: 60px;
+    }
+    
+    .enterprise-section h2 {
+      font-size: 36px;
+      margin-bottom: 16px;
+      color: #00ff9c;
+    }
+    
+    .enterprise-section p {
+      font-size: 18px;
+      color: rgba(255,255,255,0.6);
+      margin-bottom: 30px;
+      max-width: 700px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    
+    .enterprise-features {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 20px;
+      margin-bottom: 40px;
+    }
+    
+    .enterprise-feature {
+      background: rgba(255,255,255,0.03);
+      padding: 20px;
+      border-radius: 10px;
+      border: 1px solid rgba(255,255,255,0.1);
+    }
+    
+    .enterprise-feature h3 {
+      font-size: 18px;
+      margin-bottom: 8px;
+      color: #00ff9c;
+    }
+    
+    .enterprise-feature p {
+      font-size: 14px;
+      color: rgba(255,255,255,0.5);
+      margin: 0;
+    }
+    
+    /* FAQ */
+    .faq-section {
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    
+    .faq-section h2 {
+      text-align: center;
+      font-size: 36px;
+      margin-bottom: 40px;
+      color: #00ff9c;
+    }
+    
+    .faq-item {
+      background: rgba(255,255,255,0.03);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 10px;
+      padding: 24px;
+      margin-bottom: 16px;
+    }
+    
+    .faq-question {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 12px;
+      color: #00ff9c;
+    }
+    
+    .faq-answer {
+      font-size: 15px;
+      line-height: 1.6;
+      color: rgba(255,255,255,0.6);
+    }
+    
+    /* Footer */
+    .footer {
+      text-align: center;
+      margin-top: 80px;
+      padding-top: 40px;
+      border-top: 1px solid rgba(255,255,255,0.1);
+    }
+    
+    .footer-links {
+      display: flex;
+      justify-content: center;
+      gap: 30px;
+      margin-bottom: 20px;
+    }
+    
+    .footer-links a {
+      color: rgba(0,255,156,0.6);
+      text-decoration: none;
+      font-size: 14px;
+      transition: color 0.3s;
+    }
+    
+    .footer-links a:hover {
+      color: #00ff9c;
+    }
+    
+    .demo-badge {
+      display: inline-block;
+      background: rgba(255,170,0,0.1);
+      border: 1px solid rgba(255,170,0,0.3);
+      color: #ffaa00;
+      padding: 8px 16px;
+      border-radius: 20px;
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      margin-top: 20px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <!-- Header -->
+    <div class="header">
+      <div class="logo">
+        <div class="logo-dot"></div>
+        <a href="/" style="text-decoration: none; color: inherit;">AUTHRIX AI</a>
+      </div>
+      <h1>Choose Your Plan</h1>
+      <p class="subtitle">Protect yourself from deepfakes with AI-powered detection. Start free, upgrade anytime.</p>
+    </div>
+    
+    <!-- Pricing Cards -->
+    <div class="pricing-grid">
+      <!-- Free -->
+      <div class="pricing-card">
+        <div class="plan-name">Free</div>
+        <div class="plan-price">$0<span>/mo</span></div>
+        <div class="plan-interval">Perfect for trying out</div>
+        <ul class="plan-features">
+          <li><span class="check">✓</span> 10 video analyses/month</li>
+          <li><span class="check">✓</span> Browser extension</li>
+          <li><span class="check">✓</span> Max 2-minute videos</li>
+          <li><span class="check">✓</span> Community support</li>
+        </ul>
+        <button class="cta-button secondary" onclick="showDemo('free')">Get Started Free</button>
+      </div>
+      
+      <!-- Pro -->
+      <div class="pricing-card popular">
+        <div class="popular-badge">MOST POPULAR</div>
+        <div class="plan-name">Pro</div>
+        <div class="plan-price">$9.99<span>/mo</span></div>
+        <div class="plan-interval">For individuals & creators</div>
+        <ul class="plan-features">
+          <li><span class="check">✓</span> 100 analyses/month</li>
+          <li><span class="check">✓</span> Up to 10-minute videos</li>
+          <li><span class="check">✓</span> API access (100 calls/mo)</li>
+          <li><span class="check">✓</span> Priority processing</li>
+          <li><span class="check">✓</span> Email support</li>
+          <li><span class="check">✓</span> Batch upload</li>
+        </ul>
+        <button class="cta-button primary" onclick="showDemo('pro')">Subscribe to Pro</button>
+      </div>
+      
+      <!-- Business -->
+      <div class="pricing-card">
+        <div class="plan-name">Business</div>
+        <div class="plan-price">$49<span>/mo</span></div>
+        <div class="plan-interval">For teams & organizations</div>
+        <ul class="plan-features">
+          <li><span class="check">✓</span> 1,000 analyses/month</li>
+          <li><span class="check">✓</span> Unlimited video length</li>
+          <li><span class="check">✓</span> API access (5K calls/mo)</li>
+          <li><span class="check">✓</span> White-label reports</li>
+          <li><span class="check">✓</span> Slack/Teams integration</li>
+          <li><span class="check">✓</span> Priority support</li>
+          <li><span class="check">✓</span> Custom branding</li>
+        </ul>
+        <button class="cta-button primary" onclick="showDemo('business')">Subscribe to Business</button>
+      </div>
+    </div>
+    
+    <!-- Enterprise Section -->
+    <div class="enterprise-section">
+      <h2>Enterprise Solutions</h2>
+      <p>Custom solutions for large organizations, social media platforms, and government agencies</p>
+      
+      <div class="enterprise-features">
+        <div class="enterprise-feature">
+          <h3>🏢 On-Premise Deployment</h3>
+          <p>Deploy Authrix on your own infrastructure for maximum security</p>
+        </div>
+        <div class="enterprise-feature">
+          <h3>🎯 Custom Model Training</h3>
+          <p>Train models on your specific content and use cases</p>
+        </div>
+        <div class="enterprise-feature">
+          <h3>⚡ Unlimited Analyses</h3>
+          <p>No limits on video analyses or API calls</p>
+        </div>
+        <div class="enterprise-feature">
+          <h3>🛡️ SLA Guarantees</h3>
+          <p>99.9% uptime with dedicated support team</p>
+        </div>
+      </div>
+      
+      <button class="cta-button primary" onclick="showDemo('enterprise')" style="max-width: 300px; margin: 0 auto;">Contact Sales</button>
+    </div>
+    
+    <!-- FAQ -->
+    <div class="faq-section">
+      <h2>Frequently Asked Questions</h2>
+      
+      <div class="faq-item">
+        <div class="faq-question">How accurate is Authrix?</div>
+        <div class="faq-answer">Authrix uses an ensemble of state-of-the-art ViT models achieving 99%+ accuracy on benchmark datasets. We combine visual analysis with audio detection for comprehensive deepfake identification.</div>
+      </div>
+      
+      <div class="faq-item">
+        <div class="faq-question">Can I cancel anytime?</div>
+        <div class="faq-answer">Yes! All subscriptions are month-to-month with no long-term commitment. Cancel anytime from your account dashboard.</div>
+      </div>
+      
+      <div class="faq-item">
+        <div class="faq-question">What video formats are supported?</div>
+        <div class="faq-answer">We support MP4, AVI, MOV, MKV, WebM, and WMV formats. Maximum file size is 100MB for Pro tier, unlimited for Business and Enterprise.</div>
+      </div>
+      
+      <div class="faq-item">
+        <div class="faq-question">Is my data secure?</div>
+        <div class="faq-answer">Absolutely. All videos are analyzed locally and deleted immediately after processing. We never store your content or share it with third parties.</div>
+      </div>
+      
+      <div class="faq-item">
+        <div class="faq-question">Do you offer refunds?</div>
+        <div class="faq-answer">Yes, we offer a 30-day money-back guarantee. If you're not satisfied, contact support for a full refund.</div>
+      </div>
+    </div>
+    
+    <!-- Footer -->
+    <div class="footer">
+      <div class="footer-links">
+        <a href="/">Home</a>
+        <a href="/pricing.html">Pricing</a>
+        <a href="https://docs.authrix.ai">API Docs</a>
+        <a href="mailto:support@authrix.ai">Support</a>
+        <a href="/terms.html">Terms</a>
+        <a href="/privacy.html">Privacy</a>
+      </div>
+      <p style="color: rgba(255,255,255,0.3); font-size: 14px;">
+        © 2026 Authrix AI. All rights reserved.
+      </p>
+    </div>
+  </div>
+  
+  <script>
+    function showDemo(plan) {
+      const messages = {
+        free: 'Free tier selected! In production, this would redirect to signup.',
+        pro: 'Pro plan selected ($9.99/mo)! In production, this would open Stripe checkout.',
+        business: 'Business plan selected ($49/mo)! In production, this would open Stripe checkout.',
+        enterprise: 'Enterprise inquiry! In production, this would open a contact form or schedule a demo call.'
+      };
+      
+      alert(messages[plan] + '\n\n💡 This is a demo. Payment integration will be added in production.');
+      
+      // In production, this would be:
+      // window.location.href = `/checkout?plan=${plan}`;
+    }
+  </script>
+</body>
+</html>

render.yaml

@@ -0,0 +1,12 @@
+services:
+  - type: web
+    name: authrix-api
+    runtime: docker
+    dockerfilePath: ./Dockerfile
+    plan: standard
+    healthCheckPath: /health
+    envVars:
+      - key: PORT
+        value: 8000
+      - key: PYTHONUNBUFFERED
+        value: "1"

stitch_authrix_deepfake_detection_engine/authrix_analysis_results/code.html

@@ -0,0 +1,328 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>AUTHRIX AI - Results Dashboard</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;900&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "inverse-surface": "#dae5da",
+                        "on-error": "#690005",
+                        "surface-tint": "#00e38a",
+                        "error": "#ffb4ab",
+                        "outline-variant": "#3b4b3f",
+                        "outline": "#849587",
+                        "background": "#0c150f",
+                        "surface-container-high": "#232c25",
+                        "secondary-container": "#00e3fd",
+                        "on-surface-variant": "#b9cbbc",
+                        "on-secondary-container": "#00616d",
+                        "on-error-container": "#ffdad6",
+                        "primary": "#f3fff3",
+                        "primary-container": "#00ff9c",
+                        "on-primary": "#00391f",
+                        "surface-bright": "#323c34",
+                        "primary-fixed-dim": "#00e38a",
+                        "tertiary-fixed-dim": "#e4c44f",
+                        "on-secondary-fixed": "#001f24",
+                        "tertiary-fixed": "#ffe17a",
+                        "on-tertiary-container": "#766000",
+                        "on-secondary": "#00363d",
+                        "on-tertiary-fixed": "#231b00",
+                        "on-tertiary": "#3b2f00",
+                        "surface-container-low": "#141e17",
+                        "surface": "#0c150f",
+                        "primary-fixed": "#56ffa7",
+                        "secondary-fixed-dim": "#00daf3",
+                        "on-secondary-fixed-variant": "#004f58",
+                        "inverse-on-surface": "#29332b",
+                        "surface-container": "#18221b",
+                        "on-surface": "#dae5da",
+                        "on-tertiary-fixed-variant": "#554500",
+                        "error-container": "#93000a",
+                        "surface-variant": "#2d3730",
+                        "surface-container-highest": "#2d3730",
+                        "secondary-fixed": "#9cf0ff",
+                        "on-background": "#dae5da",
+                        "on-primary-container": "#007142",
+                        "inverse-primary": "#006d40",
+                        "on-primary-fixed-variant": "#00522f",
+                        "secondary": "#bdf4ff",
+                        "tertiary": "#fffaff",
+                        "surface-dim": "#0c150f",
+                        "on-primary-fixed": "#002110",
+                        "surface-container-lowest": "#07100a",
+                        "tertiary-container": "#ffdd65"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.25rem",
+                        "lg": "0.5rem",
+                        "xl": "0.75rem",
+                        "full": "9999px"
+                    },
+                    "spacing": {
+                        "xs": "4px",
+                        "md": "16px",
+                        "base": "4px",
+                        "sm": "8px",
+                        "xl": "48px",
+                        "lg": "24px",
+                        "gutter": "20px",
+                        "margin": "32px"
+                    },
+                    "fontFamily": {
+                        "h2": ["Space Grotesk"],
+                        "h1": ["Space Grotesk"],
+                        "h3": ["Space Grotesk"],
+                        "label-xs": ["Space Grotesk"],
+                        "data-mono": ["Space Grotesk"],
+                        "body-base": ["Space Grotesk"]
+                    },
+                    "fontSize": {
+                        "h2": ["32px", { "lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600" }],
+                        "h1": ["48px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
+                        "h3": ["24px", { "lineHeight": "1.3", "letterSpacing": "0em", "fontWeight": "600" }],
+                        "label-xs": ["12px", { "lineHeight": "1", "letterSpacing": "0.1em", "fontWeight": "700" }],
+                        "data-mono": ["14px", { "lineHeight": "1.5", "letterSpacing": "0.05em", "fontWeight": "500" }],
+                        "body-base": ["16px", { "lineHeight": "1.6", "letterSpacing": "0.01em", "fontWeight": "400" }]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        .glass-panel {
+            background-color: rgba(35, 44, 37, 0.2);
+            backdrop-filter: blur(20px);
+            box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.05);
+        }
+        .glow-border-primary {
+            border: 1px solid rgba(0, 255, 156, 0.3);
+            box-shadow: 0 0 15px rgba(0, 255, 156, 0.1);
+        }
+        .glow-border-error {
+            border: 1px solid rgba(255, 180, 171, 0.3);
+            box-shadow: 0 0 15px rgba(255, 180, 171, 0.1);
+        }
+        .scanline {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            background: rgba(0, 255, 156, 0.1);
+            animation: scan 4s linear infinite;
+        }
+        @keyframes scan {
+            0% { top: 0; }
+            100% { top: 100%; }
+        }
+        .blinking-cursor::after {
+            content: '_';
+            animation: blink 1s step-end infinite;
+        }
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
+        }
+    </style>
+</head>
+<body class="bg-background text-on-surface font-body-base min-h-screen flex flex-col relative overflow-x-hidden selection:bg-primary-container selection:text-on-primary-container">
+<!-- Ambient Particles/Glows -->
+<div class="fixed inset-0 pointer-events-none z-0">
+<div class="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-primary-container/5 rounded-full blur-[120px]"></div>
+<div class="absolute bottom-[-20%] right-[-10%] w-[40%] h-[40%] bg-error/5 rounded-full blur-[100px]"></div>
+</div>
+<!-- TopNavBar -->
+<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-emerald-950/20 backdrop-blur-xl border-b border-emerald-500/20 shadow-[0_4_20px_rgba(0,0,0,0.5)]">
+<div class="flex items-center gap-md">
+<span class="font-h3 text-h3 font-black tracking-tighter text-emerald-400 drop-shadow-[0_0_8px_rgba(0,255,156,0.5)]">AUTHRIX AI</span>
+</div>
+<nav class="hidden md:flex gap-lg">
+<a class="font-label-xs text-label-xs uppercase text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] px-3 py-1 rounded" href="#">Dashboard</a>
+<a class="font-label-xs text-label-xs uppercase text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] px-3 py-1 rounded" href="#">Agents</a>
+<a class="font-label-xs text-label-xs uppercase text-emerald-400 border-b-2 border-emerald-400 pb-1 px-3 py-1" href="#">Logs</a>
+<a class="font-label-xs text-label-xs uppercase text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] px-3 py-1 rounded" href="#">Network</a>
+</nav>
+<div class="flex items-center gap-sm">
+<button class="text-emerald-400 hover:text-emerald-300 p-2 rounded-full hover:bg-emerald-400/10 transition-colors">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">sensors</span>
+</button>
+<button class="text-emerald-400 hover:text-emerald-300 p-2 rounded-full hover:bg-emerald-400/10 transition-colors">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">memory</span>
+</button>
+<button class="text-emerald-400 hover:text-emerald-300 p-2 rounded-full hover:bg-emerald-400/10 transition-colors">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">speed</span>
+</button>
+<button class="bg-primary-container text-on-primary-container font-label-xs text-label-xs uppercase px-4 py-2 rounded-DEFAULT ml-md shadow-[0_0_15px_rgba(0,255,156,0.3)] hover:bg-primary-fixed transition-colors">
+                GET STARTED
+            </button>
+</div>
+</header>
+<main class="flex-grow pt-[80px] pb-xl px-gutter max-w-[1600px] mx-auto w-full z-10 flex flex-col gap-lg">
+<!-- Cinematic Banner -->
+<section class="glass-panel glow-border-primary rounded-xl relative overflow-hidden flex flex-col md:flex-row items-center justify-between p-lg md:p-margin min-h-[300px]">
+<div class="scanline"></div>
+<!-- Background Image -->
+<div class="absolute inset-0 opacity-20 mix-blend-overlay pointer-events-none" data-alt="Abstract digital matrix code falling in a futuristic high-tech environment with green hues" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCm6V5yQ3vKXnTfGWeqxvXPbNe2CvDhwLr4NreMaQM6OFtThX8-JDMNwORYSjTMxIXoCBzt8MticyWVNk4DNbUyoBJIlb4YsCoXkDzWVT3TThqqe3qzdYl-Jui2WDP5m7Oz3o0WWKG7NnnUmBUtZsaD8xv6cx0LodaRq6UhOxWBNDs1jbiBuzpNZ7n9tfrz4HYvK-nCymTLcymqGCsvfntziWmX7JJpsLc30o5fYaQrhz-l3htAV2sSSgwetQmTdz3-IlSPRaiYNGY'); background-size: cover; background-position: center;"></div>
+<div class="relative z-10 flex flex-col md:flex-row items-center gap-margin w-full">
+<!-- Circular Badge -->
+<div class="relative w-48 h-48 rounded-full border-4 border-primary-container flex items-center justify-center shadow-[0_0_30px_rgba(0,255,156,0.4)] flex-shrink-0">
+<div class="absolute inset-0 rounded-full border border-primary-container animate-[spin_10s_linear_infinite] opacity-50"></div>
+<div class="absolute inset-2 rounded-full border border-dashed border-primary-container animate-[spin_15s_linear_infinite_reverse] opacity-30"></div>
+<div class="text-center">
+<span class="material-symbols-outlined text-primary-container text-5xl mb-2" style="font-variation-settings: 'FILL' 1;">verified_user</span>
+<h2 class="font-h3 text-h3 text-primary-container uppercase tracking-widest drop-shadow-[0_0_5px_rgba(0,255,156,0.8)]">AUTHENTIC</h2>
+</div>
+</div>
+<div class="flex-grow text-center md:text-left flex flex-col gap-sm">
+<p class="font-data-mono text-data-mono text-primary-container/80 uppercase tracking-widest">Analysis Complete // ID: 8992-AX</p>
+<h1 class="font-h1 text-h1 text-on-surface">Confidence Score</h1>
+<div class="font-h1 text-[80px] leading-none text-primary-container drop-shadow-[0_0_15px_rgba(0,255,156,0.6)] font-black">98.7%</div>
+</div>
+</div>
+</section>
+<!-- Main Dashboard Grid -->
+<div class="grid grid-cols-1 lg:grid-cols-12 gap-lg flex-grow">
+<!-- Left: Insights Panel -->
+<div class="lg:col-span-4 flex flex-col gap-md">
+<h3 class="font-label-xs text-label-xs text-outline uppercase tracking-widest border-b border-surface-variant pb-2">Primary Vectors</h3>
+<div class="glass-panel rounded-lg p-md flex items-start gap-md hover:glow-border-primary transition-all duration-300 transform hover:-translate-y-1">
+<div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center flex-shrink-0 border border-surface-variant">
+<span class="material-symbols-outlined text-primary-container" style="font-variation-settings: 'FILL' 0;">face</span>
+</div>
+<div>
+<h4 class="font-body-base text-body-base font-semibold text-on-surface">Facial Morphology</h4>
+<p class="font-data-mono text-data-mono text-on-surface-variant mt-1 text-sm">Consistent geometry. No micro-warping detected in periocular region.</p>
+<div class="mt-3 flex items-center gap-2">
+<div class="h-1 flex-grow bg-surface-container-highest rounded-full overflow-hidden">
+<div class="h-full bg-primary-container w-[95%]"></div>
+</div>
+<span class="font-data-mono text-data-mono text-primary-container text-xs">95%</span>
+</div>
+</div>
+</div>
+<div class="glass-panel rounded-lg p-md flex items-start gap-md hover:glow-border-primary transition-all duration-300 transform hover:-translate-y-1">
+<div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center flex-shrink-0 border border-surface-variant">
+<span class="material-symbols-outlined text-primary-container" style="font-variation-settings: 'FILL' 0;">graphic_eq</span>
+</div>
+<div>
+<h4 class="font-body-base text-body-base font-semibold text-on-surface">Audio Spectral Analysis</h4>
+<p class="font-data-mono text-data-mono text-on-surface-variant mt-1 text-sm">Natural harmonic resonance. No synthetic vocal fry identified.</p>
+<div class="mt-3 flex items-center gap-2">
+<div class="h-1 flex-grow bg-surface-container-highest rounded-full overflow-hidden">
+<div class="h-full bg-primary-container w-[99%]"></div>
+</div>
+<span class="font-data-mono text-data-mono text-primary-container text-xs">99%</span>
+</div>
+</div>
+</div>
+<div class="glass-panel rounded-lg p-md flex items-start gap-md hover:glow-border-error transition-all duration-300 transform hover:-translate-y-1">
+<div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center flex-shrink-0 border border-surface-variant">
+<span class="material-symbols-outlined text-error" style="font-variation-settings: 'FILL' 0;">visibility</span>
+</div>
+<div>
+<h4 class="font-body-base text-body-base font-semibold text-on-surface">Lighting/Shadow Consistency</h4>
+<p class="font-data-mono text-data-mono text-on-surface-variant mt-1 text-sm">Minor specular highlight anomaly detected on frame 412. Flagged for review.</p>
+<div class="mt-3 flex items-center gap-2">
+<div class="h-1 flex-grow bg-surface-container-highest rounded-full overflow-hidden">
+<div class="h-full bg-error w-[42%]"></div>
+</div>
+<span class="font-data-mono text-data-mono text-error text-xs">42%</span>
+</div>
+</div>
+</div>
+</div>
+<!-- Right: Diagnostics/Metadata -->
+<div class="lg:col-span-8 flex flex-col gap-md">
+<h3 class="font-label-xs text-label-xs text-outline uppercase tracking-widest border-b border-surface-variant pb-2">System Diagnostics</h3>
+<div class="glass-panel rounded-lg flex-grow p-md font-data-mono text-data-mono text-sm relative overflow-hidden flex flex-col">
+<div class="scanline"></div>
+<div class="flex justify-between items-center border-b border-surface-variant/50 pb-sm mb-sm text-on-surface-variant">
+<span>METADATA_STREAM</span>
+<span class="text-primary-container animate-pulse">ACTIVE</span>
+</div>
+<div class="flex-grow space-y-2 text-on-surface-variant overflow-y-auto pr-2">
+<div class="flex">
+<span class="text-outline w-32 shrink-0">SOURCE_HASH:</span>
+<span class="text-primary-container break-all">a8f9c2e4b5d6...7f8e9a0b1c2d3</span>
+</div>
+<div class="flex">
+<span class="text-outline w-32 shrink-0">FRAME_COUNT:</span>
+<span>1440 @ 60FPS</span>
+</div>
+<div class="flex">
+<span class="text-outline w-32 shrink-0">ENCODING:</span>
+<span>H.265/HEVC Main 10 Profile</span>
+</div>
+<div class="flex">
+<span class="text-outline w-32 shrink-0">RESOLUTION:</span>
+<span>3840x2160 (4K UHD)</span>
+</div>
+<div class="my-4 border-t border-surface-variant/30 border-dashed"></div>
+<div class="text-primary-container opacity-80">&gt; INIT NEURAL_NET_V4.2</div>
+<div class="text-primary-container opacity-80">&gt; LOADING WEIGHTS... DONE</div>
+<div class="text-primary-container opacity-80">&gt; ANALYZING SPATIAL_TEMPORAL_NOISE</div>
+<div class="text-primary-container opacity-80">&gt; EXTRACTING BIOMETRIC_FEATURES</div>
+<div class="text-primary-container opacity-80">&gt; CROSS_REFERENCING KNOWN_GAN_MODELS</div>
+<div class="text-on-surface mt-4 blinking-cursor">&gt; SYSTEM_READY</div>
+</div>
+</div>
+</div>
+</div>
+<!-- Bottom: Timeline Graph (Stylized Representation) -->
+<section class="glass-panel rounded-xl p-lg flex flex-col gap-md">
+<h3 class="font-label-xs text-label-xs text-outline uppercase tracking-widest border-b border-surface-variant pb-2">Probability Timeline</h3>
+<div class="h-48 w-full relative flex items-end pt-4">
+<!-- Grid Lines -->
+<div class="absolute inset-0 flex flex-col justify-between pointer-events-none opacity-20">
+<div class="w-full h-px bg-outline"></div>
+<div class="w-full h-px bg-outline"></div>
+<div class="w-full h-px bg-outline"></div>
+<div class="w-full h-px bg-outline"></div>
+</div>
+<!-- Fake Graph Line (CSS Stylized) -->
+<div class="w-full h-full relative z-10 flex items-end border-b border-l border-surface-variant">
+<!-- Data points / segments -->
+<div class="h-[20%] w-[10%] border-t-2 border-primary-container shadow-[0_-5px_10px_rgba(0,255,156,0.2)]"></div>
+<div class="h-[15%] w-[10%] border-t-2 border-primary-container shadow-[0_-5px_10px_rgba(0,255,156,0.2)] transform -translate-y-2"></div>
+<div class="h-[25%] w-[10%] border-t-2 border-primary-container shadow-[0_-5px_10px_rgba(0,255,156,0.2)] transform -translate-y-4"></div>
+<div class="h-[10%] w-[10%] border-t-2 border-primary-container shadow-[0_-5px_10px_rgba(0,255,156,0.2)]"></div>
+<div class="h-[30%] w-[10%] border-t-2 border-primary-container shadow-[0_-5px_10px_rgba(0,255,156,0.2)] transform -translate-y-6"></div>
+<!-- Anomaly Spike -->
+<div class="h-[80%] w-[5%] bg-error/20 border-t-2 border-l border-r border-error shadow-[0_0_20px_rgba(255,180,171,0.4)] relative group">
+<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-surface-container-highest border border-error text-error font-data-mono text-xs px-2 py-1 rounded hidden group-hover:block whitespace-nowrap z-20">
+                            Spike: Frame 412
+                        </div>
+</div>
+<div class="h-[35%] w-[15%] border-t-2 border-primary-container shadow-[0_-5px_10px_rgba(0,255,156,0.2)] transform -translate-y-8"></div>
+<div class="h-[20%] w-[10%] border-t-2 border-primary-container shadow-[0_-5px_10px_rgba(0,255,156,0.2)] transform -translate-y-2"></div>
+<div class="h-[15%] w-[20%] border-t-2 border-primary-container shadow-[0_-5px_10px_rgba(0,255,156,0.2)]"></div>
+</div>
+</div>
+<div class="flex justify-between font-data-mono text-data-mono text-xs text-outline mt-2">
+<span>00:00:00</span>
+<span>00:01:12</span>
+<span>00:02:24</span>
+</div>
+</section>
+</main>
+<!-- Footer -->
+<footer class="w-full py-8 px-10 flex flex-col md:flex-row justify-between items-center opacity-80 bg-black border-t border-emerald-900/30 font-data-mono text-[10px] uppercase tracking-[0.2em] cursor-crosshair z-10 relative">
+<span class="text-emerald-500 mb-4 md:mb-0">© 2024 AUTHRIX COMMAND. SYSTEM_STATE: VIGILANT</span>
+<div class="flex gap-md">
+<a class="text-emerald-900 hover:text-emerald-300 transition-all" href="#">Kernel</a>
+<a class="text-emerald-900 hover:text-emerald-300 transition-all" href="#">Protocol</a>
+<a class="text-emerald-900 hover:text-emerald-300 transition-all" href="#">Override</a>
+<a class="text-emerald-900 hover:text-emerald-300 transition-all" href="#">Diagnostics</a>
+</div>
+</footer>
+</body></html>

stitch_authrix_deepfake_detection_engine/authrix_hero_section/code.html

@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Authrix - Deepfake Detection Platform</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&amp;family=Space+Grotesk:wght@600;700;900&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "inverse-surface": "#e5e2e1",
+                        "primary-container": "#00ff9c",
+                        "on-secondary-fixed": "#002022",
+                        "on-tertiary-fixed-variant": "#930010",
+                        "primary-fixed-dim": "#00e38a",
+                        "surface-dim": "#131313",
+                        "on-background": "#e5e2e1",
+                        "primary-fixed": "#56ffa7",
+                        "surface-variant": "#353534",
+                        "surface-container": "#201f1f",
+                        "surface-tint": "#00e38a",
+                        "on-secondary-fixed-variant": "#004f54",
+                        "secondary-container": "#00eefc",
+                        "error": "#ffb4ab",
+                        "surface": "#131313",
+                        "tertiary": "#fffbff",
+                        "tertiary-fixed": "#ffdad6",
+                        "outline": "#849587",
+                        "on-primary-fixed": "#002110",
+                        "on-tertiary-fixed": "#410003",
+                        "outline-variant": "#3b4b3f",
+                        "tertiary-container": "#ffd6d2",
+                        "surface-container-lowest": "#0e0e0e",
+                        "on-surface": "#e5e2e1",
+                        "tertiary-fixed-dim": "#ffb3ac",
+                        "surface-container-low": "#1c1b1b",
+                        "surface-container-highest": "#353534",
+                        "on-tertiary-container": "#c7041a",
+                        "background": "#131313",
+                        "on-secondary-container": "#00686f",
+                        "surface-container-high": "#2a2a2a",
+                        "error-container": "#93000a",
+                        "on-secondary": "#00363a",
+                        "primary": "#f3fff3",
+                        "on-primary-fixed-variant": "#00522f",
+                        "on-primary": "#00391f",
+                        "surface-bright": "#3a3939",
+                        "inverse-primary": "#006d40",
+                        "secondary": "#d3fbff",
+                        "inverse-on-surface": "#313030",
+                        "secondary-fixed": "#7df4ff",
+                        "on-tertiary": "#680008",
+                        "on-error-container": "#ffdad6",
+                        "secondary-fixed-dim": "#00dbe9",
+                        "on-surface-variant": "#b9cbbc",
+                        "on-error": "#690005",
+                        "on-primary-container": "#007142"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "margin": "48px",
+                        "unit": "4px",
+                        "container-max": "1440px",
+                        "gutter": "24px",
+                        "grid-overlay": "32px"
+                    },
+                    "fontFamily": {
+                        "h1-display": ["Space Grotesk"],
+                        "h2-technical": ["Space Grotesk"],
+                        "label-caps": ["Space Grotesk"],
+                        "body-main": ["Inter"],
+                        "body-light": ["Inter"]
+                    },
+                    "fontSize": {
+                        "h1-display": ["48px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
+                        "h2-technical": ["32px", { "lineHeight": "1.2", "letterSpacing": "0.01em", "fontWeight": "600" }],
+                        "label-caps": ["11px", { "lineHeight": "1", "letterSpacing": "0.15em", "fontWeight": "600" }],
+                        "body-main": ["16px", { "lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400" }],
+                        "body-light": ["14px", { "lineHeight": "1.5", "letterSpacing": "0.03em", "fontWeight": "300" }]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        body {
+            background-color: #050505;
+            background-image: 
+                linear-gradient(rgba(0, 255, 156, 0.02) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 255, 156, 0.02) 1px, transparent 1px);
+            background-size: 32px 32px;
+            color: #e5e2e1;
+            position: relative;
+            overflow-x: hidden;
+        }
+        
+        .scan-line {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: rgba(0, 255, 156, 0.3);
+            box-shadow: 0 0 10px rgba(0, 255, 156, 0.5), 0 0 20px rgba(0, 255, 156, 0.2);
+            animation: scan 4s linear infinite;
+            z-index: 10;
+            pointer-events: none;
+        }
+
+        @keyframes scan {
+            0% { top: 0; opacity: 0; }
+            10% { opacity: 1; }
+            90% { opacity: 1; }
+            100% { top: 100%; opacity: 0; }
+        }
+
+        .ambient-glow {
+            position: absolute;
+            width: 60vw;
+            height: 60vw;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(0, 238, 252, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: -1;
+            pointer-events: none;
+        }
+
+        .glass-panel {
+            background: rgba(19, 19, 19, 0.6);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
+        }
+        
+        .orb-container {
+            position: relative;
+            width: 400px;
+            height: 400px;
+            perspective: 1000px;
+        }
+        
+        .orb-core {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 120px;
+            height: 120px;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(0, 255, 156, 0.8) 0%, rgba(0, 255, 156, 0.2) 60%, transparent 100%);
+            box-shadow: 0 0 60px rgba(0, 255, 156, 0.4);
+            z-index: 2;
+        }
+        
+        .ring {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            border-radius: 50%;
+            border: 1px solid rgba(0, 238, 252, 0.3);
+            transform-style: preserve-3d;
+        }
+        
+        .ring-1 { width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; transform: rotateX(60deg) rotateY(20deg); border-top-color: rgba(0, 255, 156, 0.8); }
+        .ring-2 { width: 280px; height: 280px; margin-top: -140px; margin-left: -140px; transform: rotateX(40deg) rotateY(-30deg); border-right-color: rgba(0, 238, 252, 0.6); }
+        .ring-3 { width: 360px; height: 360px; margin-top: -180px; margin-left: -180px; transform: rotateX(80deg) rotateY(10deg); border-bottom-color: rgba(255, 180, 171, 0.4); }
+
+        .btn-primary {
+            background-color: #00ff9c;
+            color: #002110;
+            transition: all 0.3s ease;
+            box-shadow: 0 0 15px rgba(0, 255, 156, 0.3);
+        }
+        .btn-primary:hover {
+            background-color: #56ffa7;
+            box-shadow: 0 0 25px rgba(0, 255, 156, 0.5);
+            transform: translateY(-2px);
+        }
+
+        .btn-secondary {
+            background: transparent;
+            color: #e5e2e1;
+            border: 1px solid rgba(0, 255, 156, 0.5);
+            transition: all 0.3s ease;
+        }
+        .btn-secondary:hover {
+            border-color: #00ff9c;
+            box-shadow: 0 0 15px rgba(0, 255, 156, 0.2);
+            background: rgba(0, 255, 156, 0.05);
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col font-body-main text-body-main antialiased selection:bg-primary-container selection:text-on-primary-fixed">
+<div class="scan-line"></div>
+<div class="ambient-glow"></div>
+<!-- TopNavBar -->
+<nav class="bg-zinc-950/30 backdrop-blur-xl fixed top-0 w-full z-50 border-b border-white/5 shadow-[0_8px_32px_0_rgba(0,0,0,0.8)]">
+<div class="flex justify-between items-center px-8 py-4 w-full max-w-screen-2xl mx-auto">
+<div class="text-2xl font-black text-white tracking-tighter italic">Authrix</div>
+<div class="hidden md:flex gap-8 items-center">
+<a class="font-['Space_Grotesk'] font-medium tracking-tight text-zinc-400 font-medium hover:text-emerald-300 hover:bg-white/5 transition-all duration-300 ease-out px-3 py-2 rounded-md active:scale-95 transition-transform" href="#">Technology</a>
+<a class="font-['Space_Grotesk'] font-medium tracking-tight text-emerald-400 font-bold border-b-2 border-emerald-400 pb-1 hover:text-emerald-300 hover:bg-white/5 transition-all duration-300 ease-out px-3 py-2 rounded-md active:scale-95 transition-transform" href="#">Solutions</a>
+<a class="font-['Space_Grotesk'] font-medium tracking-tight text-zinc-400 font-medium hover:text-emerald-300 hover:bg-white/5 transition-all duration-300 ease-out px-3 py-2 rounded-md active:scale-95 transition-transform" href="#">Intelligence</a>
+<a class="font-['Space_Grotesk'] font-medium tracking-tight text-zinc-400 font-medium hover:text-emerald-300 hover:bg-white/5 transition-all duration-300 ease-out px-3 py-2 rounded-md active:scale-95 transition-transform" href="#">Security</a>
+</div>
+<div class="flex items-center gap-4">
+<button class="hidden lg:flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 transition-colors text-zinc-400">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">language</span>
+</button>
+<button class="hidden lg:flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 transition-colors text-zinc-400">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">account_circle</span>
+</button>
+<button class="font-['Space_Grotesk'] font-medium tracking-tight text-emerald-400 border border-emerald-400/30 px-5 py-2 rounded-md hover:bg-emerald-400/10 transition-colors">
+                    Get Started
+                </button>
+</div>
+</div>
+</nav>
+<!-- Main Hero Section -->
+<main class="flex-grow flex items-center justify-center pt-24 pb-12 px-6 lg:px-8 relative z-10 w-full max-w-container-max mx-auto">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-8 items-center w-full">
+<!-- Hero Left: Content -->
+<div class="flex flex-col items-start max-w-2xl">
+<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-primary-container/30 bg-primary-container/5 mb-8">
+<span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span>
+<span class="font-label-caps text-label-caps text-primary-container uppercase tracking-widest">AI-Powered Authenticity Engine</span>
+</div>
+<h1 class="font-h1-display text-h1-display text-on-surface mb-6 leading-tight">
+                    Verify Reality in <br/>
+<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-container to-secondary-container">Real-Time</span>
+</h1>
+<p class="font-body-main text-body-main text-on-surface-variant mb-10 max-w-lg leading-relaxed">
+                    Detect deepfake videos and synthetic voices using multi-agent AI intelligence with explainable insights. Protect your digital perimeter with military-grade precision.
+                </p>
+<div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
+<button class="btn-primary font-h2-technical text-[16px] font-semibold px-8 py-4 rounded-md flex items-center justify-center gap-2">
+<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">troubleshoot</span>
+                        Analyze Video
+                    </button>
+<button class="btn-secondary font-h2-technical text-[16px] font-medium px-8 py-4 rounded-md flex items-center justify-center gap-2">
+                        View Demo
+                        <span class="material-symbols-outlined text-[20px]">play_circle</span>
+</button>
+</div>
+<!-- Trust Indicators Glass Card -->
+<div class="mt-16 glass-panel rounded-lg p-6 w-full max-w-md">
+<div class="flex justify-between items-center mb-4">
+<span class="font-label-caps text-label-caps text-on-surface-variant">System Status</span>
+<div class="flex items-center gap-2 text-primary-container">
+<span class="material-symbols-outlined text-sm">check_circle</span>
+<span class="font-body-light text-body-light text-xs">Operational</span>
+</div>
+</div>
+<div class="h-1 w-full bg-surface-container-high rounded-full overflow-hidden">
+<div class="h-full bg-primary-container w-full relative">
+<div class="absolute top-0 right-0 h-full w-1/2 bg-gradient-to-l from-white/40 to-transparent animate-pulse"></div>
+</div>
+</div>
+</div>
+</div>
+<!-- Hero Right: 3D Visual -->
+<div class="flex justify-center items-center relative h-[500px] w-full">
+<!-- Background Mesh/Particles abstraction -->
+<div class="absolute inset-0 z-0 opacity-20 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PHBhdGggZD0iTTIwIDBMMCAyMEwyMCA0MEw0MCAyMEwyMCAweiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDBmZjljIiBzdHJva2Utb3BhY2l0eT0iMC4xIi8+PC9zdmc+')]"></div>
+<div class="orb-container">
+<div class="orb-core"></div>
+<div class="ring ring-1"></div>
+<div class="ring ring-2"></div>
+<div class="ring ring-3"></div>
+<!-- Decorative Data Points -->
+<div class="absolute top-1/4 left-1/4 glass-panel px-3 py-1.5 rounded text-xs text-primary-container font-h2-technical z-10 shadow-[0_0_10px_rgba(0,255,156,0.2)]">
+                        99.8% Match
+                    </div>
+<div class="absolute bottom-1/4 right-1/4 glass-panel px-3 py-1.5 rounded text-xs text-secondary-container font-h2-technical z-10 shadow-[0_0_10px_rgba(0,238,252,0.2)]">
+                        Audio Sync OK
+                    </div>
+</div>
+</div>
+</div>
+</main>
+<!-- Footer -->
+<footer class="bg-zinc-950 w-full py-12 px-8 border-t border-white/5 mt-auto relative z-20">
+<div class="flex flex-col md:flex-row justify-between items-center w-full max-w-screen-2xl mx-auto">
+<div class="text-lg font-bold text-emerald-400 mb-6 md:mb-0">
+                Authrix
+            </div>
+<div class="flex flex-wrap justify-center gap-6 md:gap-8 mb-6 md:mb-0">
+<a class="font-['Space_Grotesk'] text-xs uppercase tracking-widest text-zinc-500 hover:text-emerald-300 transition-colors opacity-80 hover:opacity-100" href="#">Privacy Protocol</a>
+<a class="font-['Space_Grotesk'] text-xs uppercase tracking-widest text-zinc-500 hover:text-emerald-300 transition-colors opacity-80 hover:opacity-100" href="#">Terms of Engagement</a>
+<a class="font-['Space_Grotesk'] text-xs uppercase tracking-widest text-zinc-500 hover:text-emerald-300 transition-colors opacity-80 hover:opacity-100" href="#">API Documentation</a>
+<a class="font-['Space_Grotesk'] text-xs uppercase tracking-widest text-zinc-500 hover:text-emerald-300 transition-colors opacity-80 hover:opacity-100" href="#">Support</a>
+</div>
+<div class="font-['Space_Grotesk'] text-xs uppercase tracking-widest text-zinc-500">
+                © 2024 Authrix Intelligence Systems. All rights reserved.
+            </div>
+</div>
+</footer>
+</body></html>

stitch_authrix_deepfake_detection_engine/authrix_hero_section_v2/code.html

@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Authrix - AI Command Center</title>
+<!-- Google Fonts -->
+<link href="https://fonts.googleapis.com" rel="preconnect"/>
+<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
+<!-- Material Symbols -->
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<!-- Tailwind CSS -->
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<!-- Tailwind Config -->
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "inverse-surface": "#dae5da",
+                    "on-error": "#690005",
+                    "surface-tint": "#00e38a",
+                    "error": "#ffb4ab",
+                    "outline-variant": "#3b4b3f",
+                    "outline": "#849587",
+                    "background": "#0c150f",
+                    "surface-container-high": "#232c25",
+                    "secondary-container": "#00e3fd",
+                    "on-surface-variant": "#b9cbbc",
+                    "on-secondary-container": "#00616d",
+                    "on-error-container": "#ffdad6",
+                    "primary": "#f3fff3",
+                    "primary-container": "#00ff9c",
+                    "on-primary": "#00391f",
+                    "surface-bright": "#323c34",
+                    "primary-fixed-dim": "#00e38a",
+                    "tertiary-fixed-dim": "#e4c44f",
+                    "on-secondary-fixed": "#001f24",
+                    "tertiary-fixed": "#ffe17a",
+                    "on-tertiary-container": "#766000",
+                    "on-secondary": "#00363d",
+                    "on-tertiary-fixed": "#231b00",
+                    "on-tertiary": "#3b2f00",
+                    "surface-container-low": "#141e17",
+                    "surface": "#0c150f",
+                    "primary-fixed": "#56ffa7",
+                    "secondary-fixed-dim": "#00daf3",
+                    "on-secondary-fixed-variant": "#004f58",
+                    "inverse-on-surface": "#29332b",
+                    "surface-container": "#18221b",
+                    "on-surface": "#dae5da",
+                    "on-tertiary-fixed-variant": "#554500",
+                    "error-container": "#93000a",
+                    "surface-variant": "#2d3730",
+                    "surface-container-highest": "#2d3730",
+                    "secondary-fixed": "#9cf0ff",
+                    "on-background": "#dae5da",
+                    "on-primary-container": "#007142",
+                    "inverse-primary": "#006d40",
+                    "on-primary-fixed-variant": "#00522f",
+                    "secondary": "#bdf4ff",
+                    "tertiary": "#fffaff",
+                    "surface-dim": "#0c150f",
+                    "on-primary-fixed": "#002110",
+                    "surface-container-lowest": "#07100a",
+                    "tertiary-container": "#ffdd65"
+            },
+            "borderRadius": {
+                    "DEFAULT": "0.25rem",
+                    "lg": "0.5rem",
+                    "xl": "0.75rem",
+                    "full": "9999px"
+            },
+            "spacing": {
+                    "xs": "4px",
+                    "md": "16px",
+                    "base": "4px",
+                    "sm": "8px",
+                    "xl": "48px",
+                    "lg": "24px",
+                    "gutter": "20px",
+                    "margin": "32px"
+            },
+            "fontFamily": {
+                    "h2": ["Space Grotesk"],
+                    "h1": ["Space Grotesk"],
+                    "h3": ["Space Grotesk"],
+                    "label-xs": ["Space Grotesk"],
+                    "data-mono": ["Space Grotesk"],
+                    "body-base": ["Space Grotesk"]
+            },
+            "fontSize": {
+                    "h2": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}],
+                    "h1": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
+                    "h3": ["24px", {"lineHeight": "1.3", "letterSpacing": "0em", "fontWeight": "600"}],
+                    "label-xs": ["12px", {"lineHeight": "1", "letterSpacing": "0.1em", "fontWeight": "700"}],
+                    "data-mono": ["14px", {"lineHeight": "1.5", "letterSpacing": "0.05em", "fontWeight": "500"}],
+                    "body-base": ["16px", {"lineHeight": "1.6", "letterSpacing": "0.01em", "fontWeight": "400"}]
+            }
+          }
+        }
+      }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+    </style>
+</head>
+<body class="bg-background text-on-surface min-h-screen flex flex-col relative overflow-x-hidden font-body-base">
+<!-- Atmospheric Background Layers -->
+<div class="fixed inset-0 z-0 pointer-events-none">
+<!-- Scan Lines Simulation -->
+<div class="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[size:100%_4px,3px_100%] opacity-20"></div>
+<!-- Technical Grid -->
+<div class="absolute inset-0 bg-[linear-gradient(to_right,#3b4b3f_1px,transparent_1px),linear-gradient(to_bottom,#3b4b3f_1px,transparent_1px)] bg-[size:48px_48px] opacity-10"></div>
+<!-- Ambient Radial Glow -->
+<div class="absolute top-1/4 -right-1/4 w-[800px] h-[800px] bg-primary-container/5 rounded-full blur-[120px]"></div>
+</div>
+<!-- TopNavBar Shared Component -->
+<nav class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-emerald-950/20 backdrop-blur-xl border-b border-emerald-500/20 shadow-[0_4_20px_rgba(0,0,0,0.5)] font-['Space_Grotesk'] tracking-wider uppercase text-xs">
+<!-- Brand Logo -->
+<div class="flex items-center">
+<span class="text-2xl font-black tracking-tighter text-emerald-400 drop-shadow-[0_0_8px_rgba(0,255,156,0.5)]">AUTHRIX AI</span>
+</div>
+<!-- Navigation Links (Hidden on small screens) -->
+<div class="hidden md:flex items-center space-x-lg">
+<a class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] py-1 px-2 rounded-sm active:scale-95 transition-transform duration-150" href="#">Dashboard</a>
+<a class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] py-1 px-2 rounded-sm active:scale-95 transition-transform duration-150" href="#">Agents</a>
+<a class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] py-1 px-2 rounded-sm active:scale-95 transition-transform duration-150" href="#">Logs</a>
+<a class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] py-1 px-2 rounded-sm active:scale-95 transition-transform duration-150" href="#">Network</a>
+</div>
+<!-- Trailing Actions -->
+<div class="flex items-center space-x-md">
+<!-- Search Icon (Search bar on right logic) -->
+<button class="text-emerald-800/60 hover:text-emerald-400 transition-colors flex items-center justify-center p-1 rounded-full hover:bg-emerald-400/10">
+<span class="material-symbols-outlined text-lg">search</span>
+</button>
+<!-- Icon Actions -->
+<div class="hidden lg:flex items-center space-x-sm border-r border-emerald-500/20 pr-md mr-sm">
+<button class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] p-1 rounded-sm active:scale-95 transition-transform duration-150"><span class="material-symbols-outlined text-lg">sensors</span></button>
+<button class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] p-1 rounded-sm active:scale-95 transition-transform duration-150"><span class="material-symbols-outlined text-lg">memory</span></button>
+<button class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] p-1 rounded-sm active:scale-95 transition-transform duration-150"><span class="material-symbols-outlined text-lg">speed</span></button>
+</div>
+<!-- Primary Action -->
+<button class="text-emerald-400 border border-emerald-400/50 hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] px-sm py-1 rounded-DEFAULT active:scale-95 transition-transform duration-150 font-bold">
+                GET STARTED
+            </button>
+</div>
+</nav>
+<!-- Main Content Canvas -->
+<main class="flex-grow relative z-10 flex flex-col justify-center pt-[100px] pb-xl px-6 md:px-gutter max-w-7xl mx-auto w-full">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-xl items-center min-h-[716px]">
+<!-- Left Column: Command Console Content -->
+<div class="flex flex-col items-start space-y-md">
+<!-- Status Badge -->
+<div class="inline-flex items-center gap-2 bg-surface-container/40 border border-outline/30 backdrop-blur-md px-sm py-xs rounded-none shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
+<span class="w-2 h-2 rounded-full bg-primary-container shadow-[0_0_8px_#00ff9c] animate-pulse"></span>
+<span class="font-label-xs text-label-xs text-on-surface-variant uppercase tracking-widest">AI-Powered Authenticity Engine</span>
+</div>
+<!-- Main Headline -->
+<h1 class="font-h1 text-h1 text-on-surface drop-shadow-md">
+                    Verify Reality <br class="hidden md:block"/>
+                    in <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-container to-secondary-container">Real-Time</span>
+</h1>
+<!-- Subtext -->
+<p class="font-body-base text-body-base text-on-surface-variant max-w-lg mt-sm mb-lg">
+                    Deploy advanced neural networks to detect deepfakes, synthetic media, and manipulated data streams with military-grade precision. Establish an unbreakable perimeter of truth.
+                </p>
+<!-- Action Group -->
+<div class="flex flex-wrap items-center gap-md mt-sm">
+<!-- Primary CTA -->
+<button class="group relative px-lg py-sm bg-primary-container text-on-primary font-label-xs text-label-xs uppercase tracking-wider rounded-DEFAULT overflow-hidden transition-all duration-300 hover:shadow-[0_0_30px_rgba(0,255,156,0.4)] active:scale-95">
+<span class="relative z-10 flex items-center gap-2">
+                            Analyze Video
+                            <span class="material-symbols-outlined text-[16px]">radar</span>
+</span>
+<!-- Neon sweep effect -->
+<div class="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/40 to-transparent group-hover:animate-[shimmer_1s_infinite]"></div>
+</button>
+<!-- Secondary CTA -->
+<button class="px-lg py-sm bg-transparent border border-surface-tint/50 text-surface-tint font-label-xs text-label-xs uppercase tracking-wider rounded-DEFAULT hover:bg-surface-tint/10 hover:border-surface-tint transition-all duration-300 active:scale-95 shadow-[inset_0_0_10px_rgba(0,227,138,0)] hover:shadow-[inset_0_0_15px_rgba(0,227,138,0.2)]">
+                        View Demo
+                    </button>
+</div>
+<!-- Micro-data readouts -->
+<div class="flex items-center gap-lg mt-xl pt-lg border-t border-outline/20 w-full max-w-md">
+<div>
+<div class="font-data-mono text-data-mono text-primary-container">99.9%</div>
+<div class="font-label-xs text-[10px] text-outline mt-1 uppercase">Accuracy Rate</div>
+</div>
+<div class="w-px h-8 bg-outline/30"></div>
+<div>
+<div class="font-data-mono text-data-mono text-secondary-container">&lt;15ms</div>
+<div class="font-label-xs text-[10px] text-outline mt-1 uppercase">Latency Ping</div>
+</div>
+</div>
+</div>
+<!-- Right Column: Visualizer -->
+<div class="relative w-full aspect-square max-w-lg mx-auto flex items-center justify-center lg:justify-end">
+<!-- Tech Frame -->
+<div class="absolute inset-0 bg-surface-container-low/20 backdrop-blur-3xl rounded-full border border-outline/10 shadow-[inset_0_0_40px_rgba(0,0,0,0.8)] flex items-center justify-center overflow-hidden">
+<!-- Decorative Scanning Rings -->
+<div class="absolute w-[120%] h-[120%] border border-primary-container/10 rounded-full animate-[spin_20s_linear_infinite]"></div>
+<div class="absolute w-[100%] h-[100%] border border-secondary-container/20 rounded-full border-dashed animate-[spin_15s_linear_infinite_reverse]"></div>
+<div class="absolute w-[80%] h-[80%] border-2 border-primary-container/5 rounded-full"></div>
+<!-- Core Visual -->
+<div class="relative w-3/4 h-3/4 rounded-full overflow-hidden mix-blend-screen shadow-[0_0_60px_rgba(0,255,156,0.2)]">
+<img alt="3D glowing cybernetic orb visualization" class="w-full h-full object-cover object-center opacity-80" data-alt="Abstract 3D glowing cybernetic orb with concentric energy waves, neon emerald green and cyan light emitting from a dark core, futuristic high-tech data visualization aesthetic, dark void background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAfjdr7a8Q86RDUDxW_XWXXmcIjP7JOyIcxR4xcrlyRQZmNeR_EenBL8QBXKm6GcHvwWsudOrefOpJ8iocKhqnG1eqqCIBpbIqEbbtgJLZlHjST1TxCI-TBoazDTYTnr-Lf6jMuMrrGKFRgWai675Vl0mgUwTbVz2lfL1OG_DrEnls6BoPqHRRX_RkxpE1mSNEqDTqkA0AqzoMCdoikLZbabr5YYlZfdq7lO9fh37RM5ICH1o9BBOqolMlclMSDtd04scZIRgjvhMQ"/>
+<!-- Overlay gradient to mesh with background -->
+<div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent"></div>
+</div>
+</div>
+<!-- Floating HUD elements -->
+<div class="absolute top-10 -left-4 bg-surface/80 backdrop-blur-md border border-outline/30 px-sm py-1 font-data-mono text-[10px] text-primary-container">SYS.OPT.OK</div>
+<div class="absolute bottom-20 -right-4 bg-surface/80 backdrop-blur-md border border-outline/30 px-sm py-1 font-data-mono text-[10px] text-secondary-container flex items-center gap-1">
+<span class="material-symbols-outlined text-[12px]">sync</span> LIVE
+                </div>
+</div>
+</div>
+</main>
+<!-- Footer Shared Component -->
+<footer class="w-full py-8 px-10 flex flex-col md:flex-row justify-between items-center opacity-80 bg-black border-t border-emerald-900/30 relative z-10 font-mono text-[10px] uppercase tracking-[0.2em]">
+<!-- Copyright -->
+<div class="text-emerald-500 mb-4 md:mb-0">
+            © 2024 AUTHRIX COMMAND. SYSTEM_STATE: VIGILANT
+        </div>
+<!-- Links -->
+<div class="flex items-center space-x-md">
+<a class="text-emerald-900 hover:text-emerald-300 transition-all cursor-crosshair" href="#">Kernel</a>
+<a class="text-emerald-900 hover:text-emerald-300 transition-all cursor-crosshair" href="#">Protocol</a>
+<a class="text-emerald-900 hover:text-emerald-300 transition-all cursor-crosshair" href="#">Override</a>
+<a class="text-emerald-900 hover:text-emerald-300 transition-all cursor-crosshair" href="#">Diagnostics</a>
+</div>
+</footer>
+<!-- Inline styles for custom animations that Tailwind standard config doesn't cover natively without arbitrary values, 
+         using minimal standard tailwind approach where possible, falling back to basic CSS for the shimmer -->
+<style>
+        @keyframes shimmer {
+            100% { transform: translateX(100%); }
+        }
+    </style>
+</body></html>

stitch_authrix_deepfake_detection_engine/authrix_kinetic_1/DESIGN.md

@@ -0,0 +1,159 @@
+---
+name: Authrix Kinetic
+colors:
+  surface: '#0c150f'
+  surface-dim: '#0c150f'
+  surface-bright: '#323c34'
+  surface-container-lowest: '#07100a'
+  surface-container-low: '#141e17'
+  surface-container: '#18221b'
+  surface-container-high: '#232c25'
+  surface-container-highest: '#2d3730'
+  on-surface: '#dae5da'
+  on-surface-variant: '#b9cbbc'
+  inverse-surface: '#dae5da'
+  inverse-on-surface: '#29332b'
+  outline: '#849587'
+  outline-variant: '#3b4b3f'
+  surface-tint: '#00e38a'
+  primary: '#f3fff3'
+  on-primary: '#00391f'
+  primary-container: '#00ff9c'
+  on-primary-container: '#007142'
+  inverse-primary: '#006d40'
+  secondary: '#bdf4ff'
+  on-secondary: '#00363d'
+  secondary-container: '#00e3fd'
+  on-secondary-container: '#00616d'
+  tertiary: '#fffaff'
+  on-tertiary: '#3b2f00'
+  tertiary-container: '#ffdd65'
+  on-tertiary-container: '#766000'
+  error: '#ffb4ab'
+  on-error: '#690005'
+  error-container: '#93000a'
+  on-error-container: '#ffdad6'
+  primary-fixed: '#56ffa7'
+  primary-fixed-dim: '#00e38a'
+  on-primary-fixed: '#002110'
+  on-primary-fixed-variant: '#00522f'
+  secondary-fixed: '#9cf0ff'
+  secondary-fixed-dim: '#00daf3'
+  on-secondary-fixed: '#001f24'
+  on-secondary-fixed-variant: '#004f58'
+  tertiary-fixed: '#ffe17a'
+  tertiary-fixed-dim: '#e4c44f'
+  on-tertiary-fixed: '#231b00'
+  on-tertiary-fixed-variant: '#554500'
+  background: '#0c150f'
+  on-background: '#dae5da'
+  surface-variant: '#2d3730'
+typography:
+  h1:
+    fontFamily: Space Grotesk
+    fontSize: 48px
+    fontWeight: '700'
+    lineHeight: '1.1'
+    letterSpacing: -0.02em
+  h2:
+    fontFamily: Space Grotesk
+    fontSize: 32px
+    fontWeight: '600'
+    lineHeight: '1.2'
+    letterSpacing: -0.01em
+  h3:
+    fontFamily: Space Grotesk
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: '1.3'
+    letterSpacing: 0em
+  body-base:
+    fontFamily: Space Grotesk
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: '1.6'
+    letterSpacing: 0.01em
+  data-mono:
+    fontFamily: Space Grotesk
+    fontSize: 14px
+    fontWeight: '500'
+    lineHeight: '1.5'
+    letterSpacing: 0.05em
+  label-xs:
+    fontFamily: Space Grotesk
+    fontSize: 12px
+    fontWeight: '700'
+    lineHeight: '1'
+    letterSpacing: 0.1em
+spacing:
+  base: 4px
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 48px
+  gutter: 20px
+  margin: 32px
+---
+
+## Brand & Style
+
+The design system is engineered to evoke the high-stakes environment of a state-of-the-art cybersecurity lab and a futuristic AI command center. It targets elite technical operators who require high-precision data visualization and a sense of absolute control. The aesthetic is "Industrial-Futurism"—combining the raw, structural feel of hardware with the ethereal, cinematic quality of advanced software interfaces.
+
+The brand personality is authoritative, vigilant, and cutting-edge. Every interface element should feel like a piece of high-end equipment rather than a standard web component. The user experience is built on the tension between deep obsidian voids and vibrant, hyper-focused energy emissions (neon glows), creating a sense of immense power being harnessed through a precise digital lens.
+
+## Colors
+
+The palette is anchored in a "Deep Space" foundation, utilizing Zinc-950 and pure blacks to maximize the luminous impact of the accent colors. 
+
+- **Primary Neon Green (#00ff9c):** Used for active states, successful validations, and primary calls to action. It represents "System GO" and operational health.
+- **Cyan Secondary (#00e5ff):** Dedicated to data visualization, information overlays, and secondary interactive elements. It provides a "scanning" or "holographic" feel.
+- **Alert Red (#ff3e3e):** Reserved strictly for critical system breaches, errors, and destructive actions.
+- **Neutrals:** A range of Zinc grays (900 to 400) provide structural hierarchy.
+
+The color application relies heavily on luminescence; colors are rarely flat but are instead accompanied by subtle radial glows and inner shadows to simulate light emitting from within the screen.
+
+## Typography
+
+This design system utilizes **Space Grotesk** across all levels to maintain a cohesive, technical identity. 
+
+- **Headlines:** Use Bold or Semi-Bold weights. High-level headers should feel architectural and commanding.
+- **Body Text:** Standard reading weights prioritize legibility against the dark background.
+- **Metadata & Technical Readouts:** Use the uppercase "data-mono" styling to simulate terminal outputs and sensor readings.
+- **Emphasis:** Rather than italics, use color shifts (to Primary Neon) or weight increases to highlight critical information.
+
+## Layout & Spacing
+
+The design system employs a **Modular Grid System** with a high-density rhythm. The spacing is tight and deliberate, reflecting the efficiency of a command console.
+
+- **Grid:** A 12-column fluid grid for main layouts, with a 20px gutter to ensure data density without crowding.
+- **Rhythm:** All margins and padding follow a 4px baseline.
+- **Density:** Use "Compact" spacing for data tables and "Spacious" spacing for dashboard overviews.
+- **Borders as Spacing:** In many instances, thin 1px borders with 10% opacity are used in place of whitespace to define structural sections, reinforcing the industrial aesthetic.
+
+## Elevation & Depth
+
+Depth in this design system is achieved through **Luminous Layering** rather than traditional shadows.
+
+1.  **Glassmorphism:** Surfaces use a 10-20% opacity fill with a heavy (20px-40px) backdrop blur. This creates a "frosted laboratory glass" effect.
+2.  **Inner Shadows:** Use subtle, dark inner shadows on the top and left edges to create an "etched" or "recessed" look for input fields and containers.
+3.  **Border Glows:** Elements at higher elevation levels (e.g., modals) feature a 1px solid border with an outer "bloom" or neon glow effect using the Primary or Secondary color.
+4.  **Atmospheric Particles:** Background layers should feature very low-opacity animated particles or scan lines to give the UI a sense of "living" energy.
+
+## Shapes
+
+The design system adopts a **Sharp (0px)** philosophy for its core structural elements. This reinforces the industrial, high-precision nature of the brand.
+
+- **Containers & Buttons:** Square corners suggest rigidity and technical accuracy.
+- **Active Indicators:** Small 45-degree clipped corners can be used on decorative elements or active "tabs" to add a futuristic, military-spec feel.
+- **Icons:** Must be stroke-based, using a consistent 1.5px or 2px weight, echoing the geometric precision of the typography.
+
+## Components
+
+- **Buttons:** Primary buttons feature a solid #00ff9c background with black text. On hover, they emit a strong radial neon glow. Secondary buttons are "Ghost" style with a 1px glowing border.
+- **Input Fields:** Recessed into the background using inner shadows. The bottom border "lights up" with Cyan when focused. Use monospace font for input values.
+- **Cards:** These are the primary glassmorphic containers. They feature a subtle "Scan Line" animation overlay (a 1px line moving vertically at 2% opacity).
+- **Status Chips:** Small, rectangular tags with no border-radius. They use a "pulse" animation for active states (a soft glow that expands and contracts).
+- **Data Grids:** High-density tables with subtle horizontal separators. Row hovers should trigger a full-width Cyan highlight at 5% opacity.
+- **Command Line Interface (CLI) Modules:** Specialized components for raw data input, featuring a blinking underscore cursor and Primary color text.
+- **Progress Gauges:** Circular or linear indicators using "segmented" bars rather than solid fills to emphasize the mechanical, digital readout style.

stitch_authrix_deepfake_detection_engine/authrix_kinetic_2/DESIGN.md

@@ -0,0 +1,148 @@
+---
+name: Authrix Kinetic
+colors:
+  surface: '#131313'
+  surface-dim: '#131313'
+  surface-bright: '#3a3939'
+  surface-container-lowest: '#0e0e0e'
+  surface-container-low: '#1c1b1b'
+  surface-container: '#201f1f'
+  surface-container-high: '#2a2a2a'
+  surface-container-highest: '#353534'
+  on-surface: '#e5e2e1'
+  on-surface-variant: '#b9cbbc'
+  inverse-surface: '#e5e2e1'
+  inverse-on-surface: '#313030'
+  outline: '#849587'
+  outline-variant: '#3b4b3f'
+  surface-tint: '#00e38a'
+  primary: '#f3fff3'
+  on-primary: '#00391f'
+  primary-container: '#00ff9c'
+  on-primary-container: '#007142'
+  inverse-primary: '#006d40'
+  secondary: '#d3fbff'
+  on-secondary: '#00363a'
+  secondary-container: '#00eefc'
+  on-secondary-container: '#00686f'
+  tertiary: '#fffbff'
+  on-tertiary: '#680008'
+  tertiary-container: '#ffd6d2'
+  on-tertiary-container: '#c7041a'
+  error: '#ffb4ab'
+  on-error: '#690005'
+  error-container: '#93000a'
+  on-error-container: '#ffdad6'
+  primary-fixed: '#56ffa7'
+  primary-fixed-dim: '#00e38a'
+  on-primary-fixed: '#002110'
+  on-primary-fixed-variant: '#00522f'
+  secondary-fixed: '#7df4ff'
+  secondary-fixed-dim: '#00dbe9'
+  on-secondary-fixed: '#002022'
+  on-secondary-fixed-variant: '#004f54'
+  tertiary-fixed: '#ffdad6'
+  tertiary-fixed-dim: '#ffb3ac'
+  on-tertiary-fixed: '#410003'
+  on-tertiary-fixed-variant: '#930010'
+  background: '#131313'
+  on-background: '#e5e2e1'
+  surface-variant: '#353534'
+typography:
+  h1-display:
+    fontFamily: Space Grotesk
+    fontSize: 48px
+    fontWeight: '700'
+    lineHeight: '1.1'
+    letterSpacing: -0.02em
+  h2-technical:
+    fontFamily: Space Grotesk
+    fontSize: 32px
+    fontWeight: '600'
+    lineHeight: '1.2'
+    letterSpacing: 0.01em
+  body-main:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: '1.6'
+    letterSpacing: 0em
+  body-light:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '300'
+    lineHeight: '1.5'
+    letterSpacing: 0.03em
+  label-caps:
+    fontFamily: Space Grotesk
+    fontSize: 11px
+    fontWeight: '600'
+    lineHeight: '1'
+    letterSpacing: 0.15em
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  unit: 4px
+  gutter: 24px
+  margin: 48px
+  container-max: 1440px
+  grid-overlay: 32px
+---
+
+## Brand & Style
+
+The design system is engineered to evoke the atmosphere of a high-security AI research facility—clandestine, powerful, and hyper-intelligent. The visual narrative centers on "The Guardian in the Machine," balancing cold, technical precision with the ethereal glow of advanced neural networks.
+
+The style is a sophisticated fusion of **Cinematic Glassmorphism** and **Technical Minimalism**. It utilizes deep layers of transparency and light to create a sense of infinite digital depth. Every interaction should feel like a high-stakes command within a tactical operations center, blending the sleek automotive precision of Tesla’s interface with the information-dense, holographic aesthetics of futuristic head-up displays (HUDs). 
+
+Targeting high-level security architects and C-suite executives, the UI prioritizes "Perceived Intelligence"—where the interface feels like it is thinking alongside the user through subtle animations, particle transitions, and reactive luminescence.
+
+## Colors
+
+The palette is anchored by a "True Deep" black (#050505) to provide a canvas for light-based hierarchy. 
+- **Neon Green (#00ff9c):** The primary kinetic color, used for active states, successful encryptions, and "Safe" status indicators.
+- **Cyan Glow (#00f0ff):** Used for secondary accents, data visualization, and soft atmospheric backlighting.
+- **Subtle Red (#ff3b3b):** Reserved strictly for critical breaches and system warnings; it should feel alarming but polished, never vibrating against the black background.
+- **Grayscale:** Uses high-opacity whites for headings and low-opacity "Oxygen" blues for subtext to maintain the cinematic atmosphere.
+
+## Typography
+
+This design system utilizes a dual-font strategy. **Space Grotesk** provides a technical, geometric edge for headings and data labels, reinforcing the "AI Lab" aesthetic. **Inter** is utilized for body copy and dense technical logs to ensure maximum legibility at smaller scales.
+
+Headings should be treated as structural elements—bold and authoritative. Subtext and secondary labels use lighter weights with increased letter spacing to mimic the look of a digital readout or tactical terminal. All capitalized labels should have a minimum of 0.1em tracking.
+
+## Layout & Spacing
+
+The layout philosophy follows a **Subtle Grid** model. All layouts are based on a 4px baseline unit, ensuring mathematical rhythm. A 12-column fluid grid is used for primary dashboard layouts, but it is visually reinforced by a background "grid mesh"—a very faint 32px x 32px grid pattern (opacity 2-4%) that anchors the UI elements.
+
+Padding is generous to convey a "premium" feel. Layouts should utilize "Safe Zones" around critical data visualizations, allowing the UI to breathe despite high information density. Elements are often grouped in modular clusters to mimic a HUD-style modularity.
+
+## Elevation & Depth
+
+Depth in this design system is achieved through **Luminous Layering** rather than traditional shadows.
+- **Glassmorphism:** Primary containers use a 10-20px backdrop blur with a 1px "inner-glow" border (white at 5-10% opacity).
+- **Z-Axis Tiering:** Elements closer to the user have a brighter, more defined border and a soft Cyan or Green "under-glow" (box-shadow with 40px spread, 10% opacity).
+- **Parallax Particles:** Use a subtle particle background on a separate Z-layer to create a sense of environmental volume.
+- **Tonal Stepping:** The background is #050505, cards are "glass" at 3% white, and hovered elements increase to 8% white.
+
+## Shapes
+
+The shape language is "Soft-Technical." We use a **Soft (0.25rem)** base radius to maintain a modern, engineered feel without the aggression of sharp 90-degree corners. 
+
+- **Primary Radius:** 4px for inputs, buttons, and small widgets.
+- **Container Radius:** 8px for large dashboard cards.
+- **Specialty Shapes:** Use 45-degree chamfered corners (clipped corners) on decorative elements or "Scan" buttons to heighten the futuristic military-grade aesthetic.
+
+## Components
+
+- **Buttons:** Primary buttons feature a solid #00ff9c fill with black text. Secondary buttons are "Ghost" style with a 1px primary border and a soft neon outer glow on hover.
+- **Input Fields:** Semi-transparent dark backgrounds with an animated "bottom-line" that expands from the center when focused, glowing in Secondary Cyan.
+- **Data Chips:** Small, pill-shaped with high letter-spacing labels. Status chips for "Active" should have a pulsing 4px dot icon.
+- **Cards:** Defined by "Glass" surfaces. Use a subtle top-left to bottom-right linear gradient (white at 5% to transparent).
+- **Security Scanners:** Custom components including circular progress rings with "rotating data" segments and particle-line scans moving vertically across the component area.
+- **Alerts:** Red borders with a low-opacity red background tint. The text should remain white for readability, while the icon carries the red warning color.

stitch_authrix_deepfake_detection_engine/authrix_system_processing/code.html

@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>AUTHRIX AI - Analysis State</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "inverse-surface": "#dae5da",
+                        "on-error": "#690005",
+                        "surface-tint": "#00e38a",
+                        "error": "#ffb4ab",
+                        "outline-variant": "#3b4b3f",
+                        "outline": "#849587",
+                        "background": "#0c150f",
+                        "surface-container-high": "#232c25",
+                        "secondary-container": "#00e3fd",
+                        "on-surface-variant": "#b9cbbc",
+                        "on-secondary-container": "#00616d",
+                        "on-error-container": "#ffdad6",
+                        "primary": "#f3fff3",
+                        "primary-container": "#00ff9c",
+                        "on-primary": "#00391f",
+                        "surface-bright": "#323c34",
+                        "primary-fixed-dim": "#00e38a",
+                        "tertiary-fixed-dim": "#e4c44f",
+                        "on-secondary-fixed": "#001f24",
+                        "tertiary-fixed": "#ffe17a",
+                        "on-tertiary-container": "#766000",
+                        "on-secondary": "#00363d",
+                        "on-tertiary-fixed": "#231b00",
+                        "on-tertiary": "#3b2f00",
+                        "surface-container-low": "#141e17",
+                        "surface": "#0c150f",
+                        "primary-fixed": "#56ffa7",
+                        "secondary-fixed-dim": "#00daf3",
+                        "on-secondary-fixed-variant": "#004f58",
+                        "inverse-on-surface": "#29332b",
+                        "surface-container": "#18221b",
+                        "on-surface": "#dae5da",
+                        "on-tertiary-fixed-variant": "#554500",
+                        "error-container": "#93000a",
+                        "surface-variant": "#2d3730",
+                        "surface-container-highest": "#2d3730",
+                        "secondary-fixed": "#9cf0ff",
+                        "on-background": "#dae5da",
+                        "on-primary-container": "#007142",
+                        "inverse-primary": "#006d40",
+                        "on-primary-fixed-variant": "#00522f",
+                        "secondary": "#bdf4ff",
+                        "tertiary": "#fffaff",
+                        "surface-dim": "#0c150f",
+                        "on-primary-fixed": "#002110",
+                        "surface-container-lowest": "#07100a",
+                        "tertiary-container": "#ffdd65"
+                    },
+                    borderRadius: {
+                        "DEFAULT": "0.25rem",
+                        "lg": "0.5rem",
+                        "xl": "0.75rem",
+                        "full": "9999px"
+                    },
+                    spacing: {
+                        "xs": "4px",
+                        "md": "16px",
+                        "base": "4px",
+                        "sm": "8px",
+                        "xl": "48px",
+                        "lg": "24px",
+                        "gutter": "20px",
+                        "margin": "32px"
+                    },
+                    fontFamily: {
+                        "h2": ["Space Grotesk"],
+                        "h1": ["Space Grotesk"],
+                        "h3": ["Space Grotesk"],
+                        "label-xs": ["Space Grotesk"],
+                        "data-mono": ["Space Grotesk"],
+                        "body-base": ["Space Grotesk"]
+                    },
+                    fontSize: {
+                        "h2": ["32px", { lineHeight: "1.2", letterSpacing: "-0.01em", fontWeight: "600" }],
+                        "h1": ["48px", { lineHeight: "1.1", letterSpacing: "-0.02em", fontWeight: "700" }],
+                        "h3": ["24px", { lineHeight: "1.3", letterSpacing: "0em", fontWeight: "600" }],
+                        "label-xs": ["12px", { lineHeight: "1", letterSpacing: "0.1em", fontWeight: "700" }],
+                        "data-mono": ["14px", { lineHeight: "1.5", letterSpacing: "0.05em", fontWeight: "500" }],
+                        "body-base": ["16px", { lineHeight: "1.6", letterSpacing: "0.01em", fontWeight: "400" }]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        .scan-line {
+            background: linear-gradient(to bottom, transparent, rgba(0, 255, 156, 0.2), transparent);
+            height: 2px;
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            opacity: 0.5;
+        }
+        .noise-bg {
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+            opacity: 0.05;
+            mix-blend-mode: overlay;
+            pointer-events: none;
+        }
+        .glass-panel {
+            background: rgba(35, 44, 37, 0.2);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(0, 255, 156, 0.1);
+            box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.05);
+        }
+        .glow-border-active {
+            border: 1px solid rgba(0, 255, 156, 0.5);
+            box-shadow: 0 0 15px rgba(0, 255, 156, 0.2);
+        }
+    </style>
+</head>
+<body class="bg-background text-on-background min-h-screen font-body-base overflow-hidden relative">
+<!-- Ambient Background Elements -->
+<div class="absolute inset-0 noise-bg z-0"></div>
+<div class="absolute top-0 left-0 w-full h-full z-0 overflow-hidden">
+<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-surface-container-high/30 via-background to-background"></div>
+<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-primary-container/5 rounded-full blur-[100px] pointer-events-none"></div>
+</div>
+<div class="scan-line z-0" style="top: 30%"></div>
+<!-- Central Content Area -->
+<div class="relative z-10 container mx-auto px-6 h-screen flex flex-col items-center justify-center">
+<!-- Top Header Info -->
+<div class="w-full max-w-3xl mb-xl text-center">
+<h1 class="font-h1 text-h1 text-primary-container drop-shadow-[0_0_8px_rgba(0,255,156,0.3)] mb-sm">SYSTEM_STATE: ANALYSIS</h1>
+<p class="font-data-mono text-data-mono text-primary-fixed-dim/70 tracking-[0.2em] uppercase">Initiating Deep Inspection Protocol</p>
+</div>
+<!-- Main Bento Grid Layout for Analysis Console -->
+<div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-12 gap-gutter">
+<!-- Visual / Orb Section (Left/Top) -->
+<div class="md:col-span-5 glass-panel rounded-xl p-lg flex flex-col items-center justify-center relative min-h-[300px] border-outline/20">
+<div class="absolute top-sm left-sm font-label-xs text-label-xs text-outline tracking-widest uppercase">Target Vector</div>
+<!-- Central Rotating Orb Visual -->
+<div class="relative w-48 h-48 rounded-full border border-primary-container/30 shadow-[0_0_30px_rgba(0,255,156,0.1)] flex items-center justify-center">
+<div class="absolute inset-2 rounded-full border border-dashed border-primary-container/40"></div>
+<div class="absolute inset-6 rounded-full bg-surface-container-high shadow-inner flex items-center justify-center overflow-hidden">
+<img alt="Abstract glowing grid structure representing data analysis" class="w-full h-full object-cover opacity-60 mix-blend-screen" data-alt="Abstract glowing geometric grid structure with vibrant cyan and emerald neon lights against dark background, technological feel" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDJdb_uls8CdiY4F9nfTubj-C8Q_ONhUf9a91ObNEcp65p0OrntMRuJI0C38IGnMHouwLDXGGbfpcWSmv6_t0RoIQeoLXUtfGy6tuTwxIiSMVBXHrKIT08HzkIeO5xTy_BpvPKs9thCqsvR5RCtdcWERQuAN62JbBXAJLgRBam6AqZTLX4Oj4W4nhE02AfHC__Ef2UmE41kdBX9auPEFAlMFjX3YJoY7MBXyjN3PK5EufCBhz4A2AIvR0fJlYbAN-JPfn57NzQba80"/>
+</div>
+<div class="absolute inset-0 rounded-full border-t-2 border-primary-container/80 blur-[2px]"></div>
+<span class="material-symbols-outlined absolute text-primary-container text-4xl drop-shadow-[0_0_10px_rgba(0,255,156,0.8)]">troubleshoot</span>
+</div>
+<div class="mt-lg text-center w-full">
+<div class="font-data-mono text-data-mono text-on-surface-variant flex items-center justify-between w-full border-b border-outline/10 pb-xs mb-xs">
+<span>DATA_STREAM</span>
+<span class="text-secondary-fixed">ACTIVE</span>
+</div>
+<div class="font-data-mono text-data-mono text-on-surface-variant flex items-center justify-between w-full border-b border-outline/10 pb-xs">
+<span>THROUGHPUT</span>
+<span class="text-tertiary-container">2.4 TB/s</span>
+</div>
+</div>
+</div>
+<!-- Dynamic Status List Section (Right/Bottom) -->
+<div class="md:col-span-7 glass-panel rounded-xl p-lg flex flex-col justify-center gap-md border-outline/20">
+<div class="flex justify-between items-center mb-sm">
+<div class="font-label-xs text-label-xs text-outline tracking-widest uppercase">Processing Pipeline</div>
+<div class="font-data-mono text-data-mono text-primary-container bg-primary-container/10 px-2 py-1 rounded">68% COMPLETE</div>
+</div>
+<!-- Step 1: Completed -->
+<div class="flex flex-col gap-xs opacity-60">
+<div class="flex justify-between items-center">
+<div class="flex items-center gap-sm">
+<span class="material-symbols-outlined text-outline text-sm">check_circle</span>
+<span class="font-data-mono text-data-mono text-on-surface">Extracting frames...</span>
+</div>
+<span class="font-data-mono text-data-mono text-outline">100%</span>
+</div>
+<div class="w-full h-1 bg-surface-container-highest overflow-hidden">
+<div class="h-full bg-outline w-full"></div>
+</div>
+</div>
+<!-- Step 2: Completed -->
+<div class="flex flex-col gap-xs opacity-60">
+<div class="flex justify-between items-center">
+<div class="flex items-center gap-sm">
+<span class="material-symbols-outlined text-outline text-sm">check_circle</span>
+<span class="font-data-mono text-data-mono text-on-surface">Detecting faces...</span>
+</div>
+<span class="font-data-mono text-data-mono text-outline">100%</span>
+</div>
+<div class="w-full h-1 bg-surface-container-highest overflow-hidden">
+<div class="h-full bg-outline w-full"></div>
+</div>
+</div>
+<!-- Step 3: Active Processing -->
+<div class="flex flex-col gap-xs glow-border-active bg-primary-container/5 p-sm -mx-sm rounded-lg">
+<div class="flex justify-between items-center">
+<div class="flex items-center gap-sm">
+<span class="material-symbols-outlined text-primary-container text-sm animate-pulse">memory</span>
+<span class="font-data-mono text-data-mono text-primary-container font-bold">Running model inference...</span>
+</div>
+<span class="font-data-mono text-data-mono text-primary-container">42%</span>
+</div>
+<!-- Segmented Progress Bar for Active State -->
+<div class="w-full h-2 bg-surface-container-highest flex gap-[2px]">
+<div class="h-full bg-primary-container/80 flex-1 shadow-[0_0_8px_rgba(0,255,156,0.5)]"></div>
+<div class="h-full bg-primary-container/80 flex-1 shadow-[0_0_8px_rgba(0,255,156,0.5)]"></div>
+<div class="h-full bg-primary-container/80 flex-1 shadow-[0_0_8px_rgba(0,255,156,0.5)]"></div>
+<div class="h-full bg-primary-container/80 flex-1 shadow-[0_0_8px_rgba(0,255,156,0.5)]"></div>
+<div class="h-full bg-primary-container/20 flex-1"></div>
+<div class="h-full bg-primary-container/20 flex-1"></div>
+<div class="h-full bg-primary-container/20 flex-1"></div>
+<div class="h-full bg-primary-container/20 flex-1"></div>
+<div class="h-full bg-primary-container/20 flex-1"></div>
+<div class="h-full bg-primary-container/20 flex-1"></div>
+</div>
+</div>
+<!-- Step 4: Pending -->
+<div class="flex flex-col gap-xs opacity-30 mt-sm">
+<div class="flex justify-between items-center">
+<div class="flex items-center gap-sm">
+<span class="material-symbols-outlined text-outline text-sm">hourglass_empty</span>
+<span class="font-data-mono text-data-mono text-on-surface">Analyzing audio patterns...</span>
+</div>
+<span class="font-data-mono text-data-mono text-outline">0%</span>
+</div>
+<div class="w-full h-1 bg-surface-container-highest overflow-hidden">
+<div class="h-full bg-outline w-0"></div>
+</div>
+</div>
+<!-- CLI Feedback Area -->
+<div class="mt-auto bg-surface-container-highest/50 border border-outline/10 p-sm rounded font-data-mono text-data-mono text-xs text-primary-fixed-dim/60 shadow-inner">
+                    &gt; [SYS] Fetching neural weights... OK<br/>
+                    &gt; [SYS] Allocating tensor buffers... OK<br/>
+                    &gt; [INF] Batch 0x7F processing... <span class="text-primary-container animate-pulse">_</span>
+</div>
+</div>
+</div>
+<!-- Cancel Action (Ghost Button) -->
+<div class="mt-xl">
+<button class="font-data-mono text-data-mono text-error border border-error/50 px-lg py-sm rounded bg-error/5 hover:bg-error/10 hover:shadow-[0_0_15px_rgba(255,180,171,0.2)] transition-all flex items-center gap-xs">
+<span class="material-symbols-outlined text-sm">cancel</span>
+                 ABORT SEQUENCE
+             </button>
+</div>
+</div>
+</body></html>

stitch_authrix_deepfake_detection_engine/authrix_upload_center/code.html

@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Authrix - Secure Data Ingest</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "inverse-surface": "#dae5da",
+                        "on-error": "#690005",
+                        "surface-tint": "#00e38a",
+                        "error": "#ffb4ab",
+                        "outline-variant": "#3b4b3f",
+                        "outline": "#849587",
+                        "background": "#0c150f",
+                        "surface-container-high": "#232c25",
+                        "secondary-container": "#00e3fd",
+                        "on-surface-variant": "#b9cbbc",
+                        "on-secondary-container": "#00616d",
+                        "on-error-container": "#ffdad6",
+                        "primary": "#f3fff3",
+                        "primary-container": "#00ff9c",
+                        "on-primary": "#00391f",
+                        "surface-bright": "#323c34",
+                        "primary-fixed-dim": "#00e38a",
+                        "tertiary-fixed-dim": "#e4c44f",
+                        "on-secondary-fixed": "#001f24",
+                        "tertiary-fixed": "#ffe17a",
+                        "on-tertiary-container": "#766000",
+                        "on-secondary": "#00363d",
+                        "on-tertiary-fixed": "#231b00",
+                        "on-tertiary": "#3b2f00",
+                        "surface-container-low": "#141e17",
+                        "surface": "#0c150f",
+                        "primary-fixed": "#56ffa7",
+                        "secondary-fixed-dim": "#00daf3",
+                        "on-secondary-fixed-variant": "#004f58",
+                        "inverse-on-surface": "#29332b",
+                        "surface-container": "#18221b",
+                        "on-surface": "#dae5da",
+                        "on-tertiary-fixed-variant": "#554500",
+                        "error-container": "#93000a",
+                        "surface-variant": "#2d3730",
+                        "surface-container-highest": "#2d3730",
+                        "secondary-fixed": "#9cf0ff",
+                        "on-background": "#dae5da",
+                        "on-primary-container": "#007142",
+                        "inverse-primary": "#006d40",
+                        "on-primary-fixed-variant": "#00522f",
+                        "secondary": "#bdf4ff",
+                        "tertiary": "#fffaff",
+                        "surface-dim": "#0c150f",
+                        "on-primary-fixed": "#002110",
+                        "surface-container-lowest": "#07100a",
+                        "tertiary-container": "#ffdd65"
+                    },
+                    borderRadius: {
+                        "DEFAULT": "0.25rem",
+                        "lg": "0.5rem",
+                        "xl": "0.75rem",
+                        "full": "9999px"
+                    },
+                    spacing: {
+                        "xs": "4px",
+                        "md": "16px",
+                        "base": "4px",
+                        "sm": "8px",
+                        "xl": "48px",
+                        "lg": "24px",
+                        "gutter": "20px",
+                        "margin": "32px"
+                    },
+                    fontFamily: {
+                        "h2": ["Space Grotesk"],
+                        "h1": ["Space Grotesk"],
+                        "h3": ["Space Grotesk"],
+                        "label-xs": ["Space Grotesk"],
+                        "data-mono": ["Space Grotesk"],
+                        "body-base": ["Space Grotesk"]
+                    },
+                    fontSize: {
+                        "h2": ["32px", { lineHeight: "1.2", letterSpacing: "-0.01em", fontWeight: "600" }],
+                        "h1": ["48px", { lineHeight: "1.1", letterSpacing: "-0.02em", fontWeight: "700" }],
+                        "h3": ["24px", { lineHeight: "1.3", letterSpacing: "0em", fontWeight: "600" }],
+                        "label-xs": ["12px", { lineHeight: "1", letterSpacing: "0.1em", fontWeight: "700" }],
+                        "data-mono": ["14px", { lineHeight: "1.5", letterSpacing: "0.05em", fontWeight: "500" }],
+                        "body-base": ["16px", { lineHeight: "1.6", letterSpacing: "0.01em", fontWeight: "400" }]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        .scan-line {
+            background: linear-gradient(to bottom, transparent 0%, rgba(0, 255, 156, 0.1) 50%, transparent 100%);
+            animation: scan 4s linear infinite;
+        }
+        @keyframes scan {
+            0% { transform: translateY(-100%); }
+            100% { transform: translateY(200%); }
+        }
+    </style>
+</head>
+<body class="bg-background text-on-background min-h-screen flex flex-col font-body-base overflow-x-hidden selection:bg-primary-container selection:text-on-primary">
+<!-- Atmospheric Layering -->
+<div class="fixed inset-0 pointer-events-none z-0">
+<div class="absolute inset-0 bg-[linear-gradient(to_right,#8495870a_1px,transparent_1px),linear-gradient(to_bottom,#8495870a_1px,transparent_1px)] bg-[size:3rem_3rem]"></div>
+<div class="absolute top-[20%] left-[30%] w-[40vw] h-[40vw] bg-surface-tint/5 rounded-full blur-[120px] mix-blend-screen"></div>
+<div class="absolute bottom-[10%] right-[20%] w-[35vw] h-[35vw] bg-secondary-container/5 rounded-full blur-[100px] mix-blend-screen"></div>
+</div>
+<!-- TopNavBar (Shared Component) -->
+<header class="bg-emerald-950/20 backdrop-blur-xl border-emerald-500/20 fixed top-0 left-0 w-full z-50 flex justify-between items-center px-6 h-16 w-full border-b shadow-[0_4_20px_rgba(0,0,0,0.5)]">
+<div class="flex items-center gap-8">
+<span class="text-2xl font-black tracking-tighter text-emerald-400 drop-shadow-[0_0_8px_rgba(0,255,156,0.5)]">AUTHRIX AI</span>
+<nav class="hidden md:flex gap-6 font-['Space_Grotesk'] tracking-wider uppercase text-xs">
+<a class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] py-2 px-3 rounded-DEFAULT" href="#">Dashboard</a>
+<a class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] py-2 px-3 rounded-DEFAULT" href="#">Agents</a>
+<a class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] py-2 px-3 rounded-DEFAULT" href="#">Logs</a>
+<a class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] py-2 px-3 rounded-DEFAULT" href="#">Network</a>
+</nav>
+</div>
+<div class="flex items-center gap-4">
+<div class="flex gap-3 text-emerald-400">
+<span class="material-symbols-outlined hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] p-1 rounded-DEFAULT cursor-pointer">sensors</span>
+<span class="material-symbols-outlined hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] p-1 rounded-DEFAULT cursor-pointer">memory</span>
+<span class="material-symbols-outlined hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] p-1 rounded-DEFAULT cursor-pointer">speed</span>
+</div>
+<button class="bg-primary-container text-on-primary font-['Space_Grotesk'] tracking-wider uppercase text-xs px-4 py-2 font-bold hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] transition-all">GET STARTED</button>
+</div>
+</header>
+<!-- Main Content Canvas -->
+<main class="flex-grow relative z-10 flex flex-col items-center justify-center pt-32 pb-24 px-6">
+<!-- Upload Panel Container -->
+<div class="w-full max-w-3xl flex flex-col gap-8">
+<!-- Header Section -->
+<div class="text-center space-y-2">
+<h1 class="font-h2 text-h2 text-primary-container drop-shadow-[0_0_12px_rgba(0,255,156,0.4)]">SECURE INGEST PORTAL</h1>
+<p class="font-data-mono text-data-mono text-on-surface-variant">Awaiting encrypted payload via protocol AX-9.</p>
+</div>
+<!-- Primary Upload Zone (Glassmorphic) -->
+<div class="relative bg-surface-container/40 backdrop-blur-2xl border border-outline/20 rounded-xl overflow-hidden group hover:border-primary-container/50 transition-colors duration-500 shadow-[inset_0_1px_1px_rgba(255,255,255,0.05),0_0_30px_rgba(0,0,0,0.5)]">
+<!-- Inner scan line effect -->
+<div class="absolute inset-0 w-full h-[2px] scan-line pointer-events-none opacity-50"></div>
+<div class="p-10 flex flex-col items-center justify-center border-2 border-dashed border-outline-variant/50 m-4 rounded-lg bg-surface-container-low/30 hover:bg-primary-container/5 hover:border-primary-container hover:shadow-[0_0_40px_rgba(0,255,156,0.1)_inset] transition-all duration-300 cursor-pointer min-h-[300px]">
+<div class="w-24 h-24 rounded-full bg-surface-variant flex items-center justify-center mb-6 shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)] group-hover:bg-surface-container-highest transition-colors">
+<span class="material-symbols-outlined text-[48px] text-on-surface-variant group-hover:text-primary-container drop-shadow-[0_0_8px_transparent] group-hover:drop-shadow-[0_0_12px_rgba(0,255,156,0.8)] transition-all duration-300" style="font-variation-settings: 'FILL' 1;">
+                            cloud_upload
+                        </span>
+</div>
+<h3 class="font-h3 text-h3 text-on-surface mb-2">INITIALIZE UPLOAD</h3>
+<p class="font-body-base text-body-base text-on-surface-variant mb-6 text-center max-w-sm">Drag and drop verified .DAT, .BIN, or .LOG packets here, or click to browse terminal files.</p>
+<div class="flex items-center gap-2 font-label-xs text-label-xs text-outline tracking-widest">
+<span class="w-1.5 h-1.5 rounded-full bg-outline"></span>
+                        MAXIMUM PAYLOAD: 5GB
+                        <span class="w-1.5 h-1.5 rounded-full bg-outline"></span>
+</div>
+</div>
+</div>
+<!-- Upload Queue / Recent Activity (Minimalist Data Grid style) -->
+<div class="mt-8 flex flex-col gap-4">
+<div class="flex items-center justify-between border-b border-outline/20 pb-2">
+<h4 class="font-label-xs text-label-xs text-primary-container uppercase tracking-widest flex items-center gap-2">
+<span class="w-2 h-2 bg-primary-container shadow-[0_0_8px_rgba(0,255,156,0.8)]"></span>
+                        ACTIVE QUEUE
+                    </h4>
+<span class="font-data-mono text-[10px] text-on-surface-variant">SYS_TIME: 14:02:09</span>
+</div>
+<!-- Queue Items -->
+<div class="grid grid-cols-1 gap-2">
+<!-- Item 1: Uploading -->
+<div class="bg-surface-container-low border border-outline-variant/30 rounded-DEFAULT p-4 flex flex-col gap-3 relative overflow-hidden">
+<div class="absolute bottom-0 left-0 h-[1px] bg-primary-container w-[45%] shadow-[0_0_5px_rgba(0,255,156,0.8)]"></div>
+<div class="flex justify-between items-start">
+<div class="flex items-center gap-3">
+<span class="material-symbols-outlined text-primary-container text-[20px]">description</span>
+<div>
+<div class="font-data-mono text-data-mono text-on-surface">nexus_core_dump_v4.bin</div>
+<div class="font-label-xs text-[10px] text-on-surface-variant mt-1">1.2 GB / 2.8 GB</div>
+</div>
+</div>
+<span class="font-label-xs text-[10px] border border-primary-container/50 text-primary-container px-2 py-1 bg-primary-container/10">UPLOADING 45%</span>
+</div>
+</div>
+<!-- Item 2: Scanning -->
+<div class="bg-surface-container-low border border-outline-variant/30 rounded-DEFAULT p-4 flex flex-col gap-3">
+<div class="flex justify-between items-start">
+<div class="flex items-center gap-3">
+<span class="material-symbols-outlined text-secondary-container text-[20px]">radar</span>
+<div>
+<div class="font-data-mono text-data-mono text-on-surface">auth_log_sector7.dat</div>
+<div class="font-label-xs text-[10px] text-on-surface-variant mt-1">450 MB</div>
+</div>
+</div>
+<span class="font-label-xs text-[10px] border border-secondary-container/50 text-secondary-container px-2 py-1 bg-secondary-container/10 shadow-[0_0_10px_rgba(0,227,253,0.2)_inset]">SCANNING</span>
+</div>
+</div>
+<!-- Item 3: Verified -->
+<div class="bg-surface-container-low border border-outline-variant/30 rounded-DEFAULT p-4 flex flex-col gap-3 opacity-60">
+<div class="flex justify-between items-start">
+<div class="flex items-center gap-3">
+<span class="material-symbols-outlined text-outline text-[20px]">check_circle</span>
+<div>
+<div class="font-data-mono text-data-mono text-on-surface line-through decoration-outline/50">legacy_key_archive.log</div>
+<div class="font-label-xs text-[10px] text-outline mt-1">12 MB</div>
+</div>
+</div>
+<span class="font-label-xs text-[10px] border border-outline/50 text-outline px-2 py-1">VERIFIED</span>
+</div>
+</div>
+</div>
+</div>
+</div>
+</main>
+<!-- Footer (Shared Component) -->
+<footer class="bg-black border-emerald-900/30 full-width border-t w-full py-8 px-10 flex flex-col md:flex-row justify-between items-center opacity-80 z-50 relative mt-auto">
+<div class="text-emerald-500 font-mono text-[10px] uppercase tracking-[0.2em] mb-4 md:mb-0">
+            © 2024 AUTHRIX COMMAND. SYSTEM_STATE: VIGILANT
+        </div>
+<nav class="flex gap-6 font-mono text-[10px] uppercase tracking-[0.2em]">
+<a class="text-emerald-900 hover:text-emerald-300 transition-all cursor-crosshair" href="#">Kernel</a>
+<a class="text-emerald-900 hover:text-emerald-300 transition-all cursor-crosshair" href="#">Protocol</a>
+<a class="text-emerald-900 hover:text-emerald-300 transition-all cursor-crosshair" href="#">Override</a>
+<a class="text-emerald-900 hover:text-emerald-300 transition-all cursor-crosshair" href="#">Diagnostics</a>
+</nav>
+</footer>
+</body></html>