Spaces:

bithal26
/

DeepFake-Detector-UI

Build error

App Files Files Community

bithal26 commited on 10 days ago

Commit

58be2fb

verified ·

1 Parent(s): 212d8bf

Upload deepfake-detector.html

Browse files

Files changed (1) hide show

deepfake-detector.html +1707 -0

deepfake-detector.html ADDED Viewed

	@@ -0,0 +1,1707 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>VERIDEX — Deepfake Detection Intelligence</title>
+<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #030508;
+    --bg2: #070c12;
+    --panel: rgba(8, 18, 30, 0.85);
+    --border: rgba(0, 210, 255, 0.12);
+    --border-bright: rgba(0, 210, 255, 0.45);
+    --cyan: #00d2ff;
+    --cyan-dim: rgba(0, 210, 255, 0.6);
+    --red: #ff2d55;
+    --green: #00ff88;
+    --amber: #ffb800;
+    --text: #e8f4ff;
+    --text-dim: rgba(232, 244, 255, 0.5);
+    --text-faint: rgba(232, 244, 255, 0.25);
+    --glow-cyan: 0 0 20px rgba(0, 210, 255, 0.35), 0 0 60px rgba(0, 210, 255, 0.1);
+    --glow-red: 0 0 20px rgba(255, 45, 85, 0.4);
+    --glow-green: 0 0 20px rgba(0, 255, 136, 0.35);
+  }
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  html { scroll-behavior: smooth; }
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'Syne', sans-serif;
+    overflow-x: hidden;
+    cursor: crosshair;
+  }
+  /* ── NOISE OVERLAY ── */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
+    pointer-events: none;
+    z-index: 9999;
+    opacity: 0.4;
+  }
+  /* ── SCANLINES ── */
+  body::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
+    pointer-events: none;
+    z-index: 9998;
+  }
+  /* ── GRID BG ── */
+  .grid-bg {
+    position: fixed;
+    inset: 0;
+    background-image:
+      linear-gradient(rgba(0,210,255,0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0,210,255,0.03) 1px, transparent 1px);
+    background-size: 60px 60px;
+    pointer-events: none;
+    z-index: 0;
+  }
+  /* ── AMBIENT GLOW ── */
+  .ambient {
+    position: fixed;
+    border-radius: 50%;
+    filter: blur(120px);
+    pointer-events: none;
+    z-index: 0;
+    opacity: 0.18;
+  }
+  .ambient-1 { width: 600px; height: 600px; background: var(--cyan); top: -200px; left: -100px; animation: drift1 20s ease-in-out infinite; }
+  .ambient-2 { width: 500px; height: 500px; background: var(--red); bottom: -200px; right: -100px; animation: drift2 25s ease-in-out infinite; }
+  .ambient-3 { width: 400px; height: 400px; background: #5500ff; top: 40%; left: 40%; animation: drift3 30s ease-in-out infinite; opacity: 0.1; }
+  @keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(80px,60px)} }
+  @keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-60px,-80px)} }
+  @keyframes drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-40px)} }
+  /* ── NAV ── */
+  nav {
+    position: fixed;
+    top: 0; left: 0; right: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 48px;
+    background: rgba(3, 5, 8, 0.7);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--border);
+  }
+  .nav-logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .logo-mark {
+    width: 36px; height: 36px;
+    border: 1.5px solid var(--cyan);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--glow-cyan);
+    position: relative;
+    overflow: hidden;
+  }
+  .logo-mark::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(0,210,255,0.15), transparent);
+  }
+  .logo-mark svg { width: 18px; height: 18px; fill: none; stroke: var(--cyan); stroke-width: 2; }
+  .logo-text {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 22px;
+    letter-spacing: 4px;
+    color: var(--text);
+  }
+  .logo-text span { color: var(--cyan); }
+  .nav-links {
+    display: flex;
+    gap: 36px;
+    list-style: none;
+  }
+  .nav-links a {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    text-decoration: none;
+    transition: color 0.2s;
+    position: relative;
+  }
+  .nav-links a::after {
+    content: '';
+    position: absolute;
+    bottom: -4px; left: 0; right: 0;
+    height: 1px;
+    background: var(--cyan);
+    transform: scaleX(0);
+    transition: transform 0.2s;
+  }
+  .nav-links a:hover { color: var(--cyan); }
+  .nav-links a:hover::after { transform: scaleX(1); }
+  .nav-cta {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: var(--bg);
+    background: var(--cyan);
+    padding: 10px 24px;
+    border: none;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s;
+    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
+  }
+  .nav-cta:hover { box-shadow: var(--glow-cyan); transform: translateY(-1px); }
+  /* ── HERO ── */
+  .hero {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 120px 48px 80px;
+    position: relative;
+    z-index: 1;
+  }
+  .hero-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    color: var(--cyan);
+    border: 1px solid var(--border-bright);
+    padding: 6px 16px;
+    border-radius: 2px;
+    margin-bottom: 32px;
+    animation: fadeUp 0.8s ease both;
+    background: rgba(0, 210, 255, 0.05);
+  }
+  .hero-badge::before {
+    content: '';
+    width: 6px; height: 6px;
+    border-radius: 50%;
+    background: var(--green);
+    box-shadow: 0 0 8px var(--green);
+    animation: pulse 2s ease-in-out infinite;
+  }
+  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
+  .hero-title {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: clamp(72px, 10vw, 140px);
+    line-height: 0.9;
+    letter-spacing: 2px;
+    animation: fadeUp 0.8s 0.1s ease both;
+    position: relative;
+  }
+  .hero-title .line1 { display: block; color: var(--text); }
+  .hero-title .line2 {
+    display: block;
+    color: transparent;
+    -webkit-text-stroke: 1px rgba(0, 210, 255, 0.5);
+    position: relative;
+  }
+  .hero-title .line2::after {
+    content: attr(data-text);
+    position: absolute;
+    left: 0; top: 0; right: 0;
+    text-align: center;
+    color: var(--cyan);
+    clip-path: polygon(0 0, 30% 0, 30% 100%, 0 100%);
+    animation: scanReveal 4s ease-in-out infinite;
+  }
+  @keyframes scanReveal {
+    0%   { clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%); }
+    40%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
+    60%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
+    100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
+  }
+  .hero-sub {
+    max-width: 580px;
+    font-size: 16px;
+    line-height: 1.7;
+    color: var(--text-dim);
+    margin: 28px auto 48px;
+    animation: fadeUp 0.8s 0.2s ease both;
+  }
+  .hero-actions {
+    display: flex;
+    gap: 16px;
+    animation: fadeUp 0.8s 0.3s ease both;
+  }
+  .btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 16px 36px;
+    background: var(--cyan);
+    color: var(--bg);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    font-weight: 600;
+    border: none;
+    cursor: pointer;
+    transition: all 0.25s;
+    clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
+  }
+  .btn-primary:hover { box-shadow: var(--glow-cyan); transform: translateY(-2px) scale(1.02); }
+  .btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 16px 36px;
+    background: transparent;
+    color: var(--text-dim);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    border: 1px solid var(--border-bright);
+    cursor: pointer;
+    transition: all 0.25s;
+  }
+  .btn-secondary:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(0,210,255,0.05); }
+  .hero-stats {
+    display: flex;
+    gap: 0;
+    margin-top: 80px;
+    border: 1px solid var(--border);
+    animation: fadeUp 0.8s 0.4s ease both;
+  }
+  .stat {
+    padding: 24px 48px;
+    border-right: 1px solid var(--border);
+    text-align: left;
+    position: relative;
+    overflow: hidden;
+  }
+  .stat:last-child { border-right: none; }
+  .stat::before {
+    content: '';
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
+    animation: shimmer 3s ease-in-out infinite;
+    opacity: 0.4;
+  }
+  @keyframes shimmer { 0%,100%{opacity:0.2} 50%{opacity:0.8} }
+  .stat-number {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 44px;
+    color: var(--cyan);
+    line-height: 1;
+    text-shadow: var(--glow-cyan);
+  }
+  .stat-label {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: var(--text-faint);
+    margin-top: 4px;
+  }
+  @keyframes fadeUp { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform: translateY(0); } }
+  /* ─��� UPLOAD SECTION ── */
+  .section {
+    position: relative;
+    z-index: 1;
+    padding: 100px 48px;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+  .section-label {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+    color: var(--cyan);
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .section-label::before {
+    content: '';
+    width: 32px; height: 1px;
+    background: var(--cyan);
+    box-shadow: var(--glow-cyan);
+  }
+  .section-title {
+    font-family: 'Syne', sans-serif;
+    font-size: clamp(32px, 4vw, 52px);
+    font-weight: 800;
+    line-height: 1.1;
+    margin-bottom: 16px;
+  }
+  .section-title em { font-style: normal; color: var(--cyan); }
+  .section-sub {
+    color: var(--text-dim);
+    font-size: 15px;
+    line-height: 1.7;
+    max-width: 480px;
+    margin-bottom: 48px;
+  }
+  /* ── UPLOAD ZONE ── */
+  .upload-layout {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    gap: 24px;
+    align-items: start;
+  }
+  .upload-zone {
+    border: 1px dashed var(--border-bright);
+    border-radius: 4px;
+    padding: 80px 40px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s;
+    position: relative;
+    overflow: hidden;
+    background: var(--panel);
+    backdrop-filter: blur(20px);
+    min-height: 380px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .upload-zone::before {
+    content: '';
+    position: absolute;
+    top: 0; left: -100%;
+    width: 200%; height: 2px;
+    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
+    animation: scanLine 4s ease-in-out infinite;
+  }
+  @keyframes scanLine {
+    0% { top: 0; opacity: 0; }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { top: 100%; opacity: 0; }
+  }
+  .upload-zone:hover {
+    border-color: var(--cyan);
+    background: rgba(0, 210, 255, 0.03);
+    box-shadow: inset 0 0 40px rgba(0,210,255,0.05);
+  }
+  .upload-zone.dragging {
+    border-color: var(--cyan);
+    background: rgba(0, 210, 255, 0.08);
+    box-shadow: 0 0 40px rgba(0,210,255,0.2), inset 0 0 40px rgba(0,210,255,0.05);
+  }
+  .upload-icon {
+    width: 72px; height: 72px;
+    border: 1px solid var(--border-bright);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 24px;
+    position: relative;
+    transition: all 0.3s;
+  }
+  .upload-icon::before {
+    content: '';
+    position: absolute;
+    inset: -6px;
+    border-radius: 50%;
+    border: 1px solid transparent;
+    border-top-color: var(--cyan);
+    animation: spin 3s linear infinite;
+    opacity: 0.4;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .upload-zone:hover .upload-icon { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
+  .upload-icon svg { width: 28px; height: 28px; stroke: var(--cyan); fill: none; stroke-width: 1.5; }
+  .upload-title {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 8px;
+  }
+  .upload-desc {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 1px;
+    color: var(--text-dim);
+    margin-bottom: 24px;
+    line-height: 1.7;
+  }
+  .upload-formats {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .format-tag {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 1.5px;
+    padding: 4px 10px;
+    border: 1px solid var(--border);
+    color: var(--text-faint);
+    text-transform: uppercase;
+  }
+  input[type="file"] { display: none; }
+  /* ── ANALYSIS PANEL ── */
+  .analysis-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .panel-card {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    backdrop-filter: blur(20px);
+    padding: 24px;
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.3s;
+  }
+  .panel-card::after {
+    content: '';
+    position: absolute;
+    top: 0; left: 0;
+    width: 3px; height: 100%;
+    background: var(--cyan);
+    box-shadow: var(--glow-cyan);
+    opacity: 0.6;
+  }
+  .panel-card:hover { border-color: var(--border-bright); }
+  .card-title {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    color: var(--cyan);
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .card-title .dot {
+    width: 5px; height: 5px;
+    border-radius: 50%;
+    background: var(--cyan);
+    box-shadow: 0 0 8px var(--cyan);
+  }
+  /* ── RESULT DISPLAY ── */
+  .result-display {
+    text-align: center;
+    padding: 8px 0;
+  }
+  .result-score {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 72px;
+    line-height: 1;
+    color: var(--green);
+    text-shadow: var(--glow-green);
+    transition: all 0.5s;
+  }
+  .result-score.fake { color: var(--red); text-shadow: var(--glow-red); }
+  .result-score.uncertain { color: var(--amber); }
+  .result-label {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    margin-top: 4px;
+  }
+  /* ── PROGRESS BARS ── */
+  .metric-row {
+    margin-bottom: 14px;
+  }
+  .metric-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 6px;
+  }
+  .metric-name {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    color: var(--text-dim);
+  }
+  .metric-value {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    color: var(--cyan);
+  }
+  .metric-bar {
+    height: 3px;
+    background: rgba(255,255,255,0.06);
+    border-radius: 0;
+    overflow: hidden;
+    position: relative;
+  }
+  .metric-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--cyan), rgba(0,210,255,0.4));
+    transition: width 1s ease;
+    position: relative;
+  }
+  .metric-fill::after {
+    content: '';
+    position: absolute;
+    right: 0; top: -2px;
+    width: 1px; height: 7px;
+    background: var(--cyan);
+    box-shadow: 0 0 6px var(--cyan);
+  }
+  /* ── HOW IT WORKS ── */
+  .how-section {
+    padding: 100px 48px;
+    max-width: 1400px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+  }
+  .how-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2px;
+    margin-top: 60px;
+  }
+  .how-step {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    padding: 40px 32px;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s;
+    backdrop-filter: blur(20px);
+  }
+  .how-step::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  .how-step:hover { border-color: var(--border-bright); transform: translateY(-4px); }
+  .how-step:hover::before { opacity: 1; }
+  .step-number {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 72px;
+    color: rgba(0, 210, 255, 0.08);
+    line-height: 1;
+    margin-bottom: 20px;
+    transition: color 0.3s;
+  }
+  .how-step:hover .step-number { color: rgba(0, 210, 255, 0.15); }
+  .step-icon {
+    width: 48px; height: 48px;
+    border: 1px solid var(--border-bright);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    transition: all 0.3s;
+  }
+  .how-step:hover .step-icon { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
+  .step-icon svg { width: 22px; height: 22px; stroke: var(--cyan); fill: none; stroke-width: 1.5; }
+  .step-title {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 12px;
+  }
+  .step-desc {
+    font-size: 13px;
+    line-height: 1.7;
+    color: var(--text-dim);
+  }
+  /* ── FEATURES ── */
+  .features-section {
+    padding: 100px 48px;
+    max-width: 1400px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+  }
+  .features-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2px;
+    margin-top: 60px;
+  }
+  .feature-card {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    padding: 36px;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s;
+    backdrop-filter: blur(20px);
+    cursor: default;
+  }
+  .feature-card::after {
+    content: '';
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
+    transform: scaleX(0);
+    transition: transform 0.4s;
+  }
+  .feature-card:hover { border-color: rgba(0, 210, 255, 0.25); background: rgba(0, 210, 255, 0.03); }
+  .feature-card:hover::after { transform: scaleX(1); }
+  .feature-icon {
+    width: 44px; height: 44px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 210, 255, 0.08);
+    border: 1px solid var(--border-bright);
+    transition: all 0.3s;
+  }
+  .feature-card:hover .feature-icon { background: rgba(0, 210, 255, 0.15); box-shadow: var(--glow-cyan); }
+  .feature-icon svg { width: 20px; height: 20px; stroke: var(--cyan); fill: none; stroke-width: 1.5; }
+  .feature-title {
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 10px;
+  }
+  .feature-desc {
+    font-size: 13px;
+    line-height: 1.7;
+    color: var(--text-dim);
+  }
+  /* ── TECH STACK ── */
+  .tech-section {
+    padding: 60px 48px;
+    max-width: 1400px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+  }
+  .tech-strip {
+    border: 1px solid var(--border);
+    display: flex;
+    align-items: stretch;
+    overflow: hidden;
+    background: var(--panel);
+    backdrop-filter: blur(20px);
+  }
+  .tech-label-box {
+    padding: 20px 28px;
+    border-right: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    background: rgba(0,210,255,0.05);
+    white-space: nowrap;
+  }
+  .tech-items {
+    display: flex;
+    overflow: hidden;
+    flex: 1;
+    position: relative;
+  }
+  .tech-items::before, .tech-items::after {
+    content: '';
+    position: absolute;
+    top: 0; bottom: 0;
+    width: 60px;
+    z-index: 2;
+    pointer-events: none;
+  }
+  .tech-items::before { left: 0; background: linear-gradient(90deg, rgba(8,18,30,0.9), transparent); }
+  .tech-items::after  { right: 0; background: linear-gradient(-90deg, rgba(8,18,30,0.9), transparent); }
+  .tech-scroll {
+    display: flex;
+    gap: 0;
+    animation: techScroll 20s linear infinite;
+    width: max-content;
+  }
+  @keyframes techScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+  .tech-item {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    padding: 20px 32px;
+    border-right: 1px solid var(--border);
+    white-space: nowrap;
+    transition: color 0.2s;
+  }
+  .tech-item:hover { color: var(--cyan); }
+  /* ── REPORT SECTION ── */
+  .report-section {
+    padding: 100px 48px;
+    max-width: 1400px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+  }
+  .report-layout {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2px;
+    margin-top: 60px;
+  }
+  .report-card {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    padding: 40px;
+    backdrop-filter: blur(20px);
+  }
+  .report-card.accent {
+    background: rgba(0, 210, 255, 0.04);
+    border-color: rgba(0,210,255,0.2);
+  }
+  .forensic-list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 20px;
+  }
+  .forensic-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 16px;
+    border: 1px solid var(--border);
+    transition: all 0.2s;
+  }
+  .forensic-item:hover { border-color: var(--border-bright); background: rgba(0,210,255,0.03); }
+  .forensic-icon {
+    width: 32px; height: 32px;
+    border: 1px solid var(--border-bright);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .forensic-icon svg { width: 14px; height: 14px; stroke: var(--cyan); fill: none; stroke-width: 2; }
+  .forensic-name {
+    font-size: 13px;
+    font-weight: 600;
+    flex: 1;
+  }
+  .forensic-status {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 9px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    padding: 3px 8px;
+  }
+  .forensic-status.pass { color: var(--green); border: 1px solid rgba(0,255,136,0.3); background: rgba(0,255,136,0.05); }
+  .forensic-status.alert { color: var(--red); border: 1px solid rgba(255,45,85,0.3); background: rgba(255,45,85,0.05); }
+  .forensic-status.warn { color: var(--amber); border: 1px solid rgba(255,184,0,0.3); background: rgba(255,184,0,0.05); }
+  /* ── FOOTER ── */
+  footer {
+    position: relative;
+    z-index: 1;
+    padding: 48px;
+    border-top: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: rgba(3, 5, 8, 0.5);
+  }
+  .footer-logo {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 24px;
+    letter-spacing: 4px;
+    color: var(--text);
+  }
+  .footer-logo span { color: var(--cyan); }
+  .footer-copy {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 2px;
+    color: var(--text-faint);
+    text-transform: uppercase;
+  }
+  .footer-links {
+    display: flex;
+    gap: 24px;
+    list-style: none;
+  }
+  .footer-links a {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: var(--text-faint);
+    text-decoration: none;
+    transition: color 0.2s;
+  }
+  .footer-links a:hover { color: var(--cyan); }
+  /* ── MODAL / ANALYZING ── */
+  .analyze-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(3, 5, 8, 0.95);
+    backdrop-filter: blur(20px);
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 32px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+  }
+  .analyze-overlay.visible { opacity: 1; pointer-events: all; }
+  .analyze-scanner {
+    width: 200px; height: 200px;
+    position: relative;
+    border: 1px solid var(--border-bright);
+  }
+  .analyze-scanner::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 2px;
+    background: var(--cyan);
+    box-shadow: 0 0 12px var(--cyan), 0 0 40px rgba(0,210,255,0.4);
+    animation: scannerLine 2s ease-in-out infinite;
+  }
+  @keyframes scannerLine {
+    0%   { top: 0; }
+    50%  { top: calc(100% - 2px); }
+    100% { top: 0; }
+  }
+  .scanner-corner {
+    position: absolute;
+    width: 16px; height: 16px;
+    border-color: var(--cyan);
+    border-style: solid;
+  }
+  .scanner-corner.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
+  .scanner-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
+  .scanner-corner.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
+  .scanner-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
+  .analyze-text {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+    color: var(--cyan);
+    text-align: center;
+  }
+  .analyze-progress-bar {
+    width: 300px;
+    height: 2px;
+    background: rgba(255,255,255,0.06);
+    position: relative;
+    overflow: hidden;
+  }
+  .analyze-fill {
+    height: 100%;
+    background: var(--cyan);
+    box-shadow: var(--glow-cyan);
+    animation: loadBar 3s ease forwards;
+  }
+  @keyframes loadBar { from { width: 0%; } to { width: 100%; } }
+  .analyze-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 300px;
+  }
+  .a-step {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 2px;
+    color: var(--text-faint);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    transition: color 0.3s;
+  }
+  .a-step.active { color: var(--cyan); }
+  .a-step.done { color: var(--green); }
+  .a-step-dot {
+    width: 6px; height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+    flex-shrink: 0;
+  }
+  /* ── RESULT MODAL ── */
+  .result-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(3, 5, 8, 0.9);
+    backdrop-filter: blur(20px);
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+  }
+  .result-overlay.visible { opacity: 1; pointer-events: all; }
+  .result-modal {
+    width: 90%;
+    max-width: 800px;
+    background: var(--bg2);
+    border: 1px solid var(--border-bright);
+    padding: 48px;
+    position: relative;
+    animation: modalIn 0.4s ease both;
+  }
+  @keyframes modalIn { from { opacity:0; transform: scale(0.95) translateY(20px); } to { opacity:1; transform: scale(1) translateY(0); } }
+  .result-modal::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, var(--red), var(--cyan));
+  }
+  .modal-close {
+    position: absolute;
+    top: 20px; right: 20px;
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--text-dim);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 2px;
+    padding: 6px 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-transform: uppercase;
+  }
+  .modal-close:hover { border-color: var(--red); color: var(--red); }
+  .modal-verdict {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    margin-bottom: 40px;
+    padding-bottom: 40px;
+    border-bottom: 1px solid var(--border);
+  }
+  .verdict-score {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 100px;
+    line-height: 1;
+    color: var(--red);
+    text-shadow: var(--glow-red);
+    flex-shrink: 0;
+  }
+  .verdict-info {}
+  .verdict-label {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    color: var(--text-faint);
+    margin-bottom: 6px;
+  }
+  .verdict-title {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 48px;
+    line-height: 1;
+    color: var(--red);
+    margin-bottom: 12px;
+  }
+  .verdict-title.authentic { color: var(--green); }
+  .verdict-desc {
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--text-dim);
+  }
+  .modal-metrics {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    margin-bottom: 32px;
+  }
+  .modal-metric {
+    border: 1px solid var(--border);
+    padding: 20px;
+    text-align: center;
+  }
+  .modal-metric-val {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 36px;
+    color: var(--cyan);
+  }
+  .modal-metric-label {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 9px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: var(--text-faint);
+    margin-top: 4px;
+  }
+  .modal-footer-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+  }
+  .btn-download {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: var(--cyan);
+    background: transparent;
+    border: 1px solid var(--border-bright);
+    padding: 10px 24px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  .btn-download:hover { background: rgba(0,210,255,0.08); }
+  .btn-new-scan {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: var(--bg);
+    background: var(--cyan);
+    border: none;
+    padding: 10px 24px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  .btn-new-scan:hover { box-shadow: var(--glow-cyan); }
+  /* ── RESPONSIVE ── */
+  @media (max-width: 900px) {
+    nav { padding: 16px 24px; }
+    .nav-links { display: none; }
+    .hero { padding: 100px 24px 60px; }
+    .hero-stats { flex-direction: column; }
+    .stat { border-right: none; border-bottom: 1px solid var(--border); }
+    .upload-layout { grid-template-columns: 1fr; }
+    .how-grid { grid-template-columns: 1fr 1fr; }
+    .features-grid { grid-template-columns: 1fr 1fr; }
+    .report-layout { grid-template-columns: 1fr; }
+    .section, .how-section, .features-section, .report-section, .tech-section { padding: 60px 24px; }
+    footer { flex-direction: column; gap: 24px; text-align: center; }
+  }
+</style>
+</head>
+<body>
+<div class="grid-bg"></div>
+<div class="ambient ambient-1"></div>
+<div class="ambient ambient-2"></div>
+<div class="ambient ambient-3"></div>
+<!-- NAV -->
+<nav>
+  <div class="nav-logo">
+    <div class="logo-mark">
+      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/><path d="M5.64 5.64l2.12 2.12M16.24 16.24l2.12 2.12M5.64 18.36l2.12-2.12M16.24 7.76l2.12-2.12"/></svg>
+    </div>
+    <span class="logo-text">VERI<span>DEX</span></span>
+  </div>
+  <ul class="nav-links">
+    <li><a href="#detect">Detect</a></li>
+    <li><a href="#how">How It Works</a></li>
+    <li><a href="#features">Technology</a></li>
+    <li><a href="#api">API</a></li>
+  </ul>
+  <button class="nav-cta">Get API Access</button>
+</nav>
+<!-- HERO -->
+<section class="hero">
+  <div class="hero-badge">
+    <span>Live System Online</span>
+    — Neural Detection Engine v4.2
+  </div>
+  <h1 class="hero-title">
+    <span class="line1">Unmask the</span>
+    <span class="line2" data-text="Deepfakes">Deepfakes</span>
+  </h1>
+  <p class="hero-sub">Advanced deepfake detection powered by PyTorch and EfficientNet-B7. Extracts and analyzes up to 32 facial frames per video to detect manipulations.</p>
+  <div class="hero-actions">
+    <button class="btn-primary" onclick="document.getElementById('detect').scrollIntoView({behavior:'smooth'})">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+      Scan a Video
+    </button>
+    <button class="btn-secondary">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+      See Demo
+    </button>
+  </div>
+  <div class="hero-stats">
+    <div class="stat">
+      <div class="stat-number">32</div>
+      <div class="stat-label">Frames / Video</div>
+    </div>
+    <div class="stat">
+      <div class="stat-number">~40<span style="font-size:24px;color:var(--text-dim)">s</span></div>
+      <div class="stat-label">Avg. Scan Time</div>
+    </div>
+    <div class="stat">
+      <div class="stat-number">PyTorch</div>
+      <div class="stat-label">Framework</div>
+    </div>
+    <div class="stat">
+      <div class="stat-number">1</div>
+      <div class="stat-label">AI Model Used</div>
+    </div>
+  </div>
+</section>
+<!-- UPLOAD / DETECT -->
+<section class="section" id="detect">
+  <div class="section-label">Detection Engine</div>
+  <h2 class="section-title">Upload & <em>Analyze</em></h2>
+  <p class="section-sub">Drop any video file. Our EfficientNet-B7 classifier will automatically extract faces and dissect up to 32 frames.</p>
+  <div class="upload-layout">
+    <div class="upload-zone" id="uploadZone" onclick="document.getElementById('fileInput').click()" ondragover="event.preventDefault();this.classList.add('dragging')" ondragleave="this.classList.remove('dragging')" ondrop="handleDrop(event)">
+      <div class="upload-icon">
+        <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+      </div>
+      <h3 class="upload-title">Drop your file here</h3>
+      <p class="upload-desc">Drag & drop or click to browse<br>Max file size: 2GB</p>
+      <div class="upload-formats">
+        <span class="format-tag">MP4</span>
+        <span class="format-tag">MOV</span>
+        <span class="format-tag">AVI</span>
+        <span class="format-tag">WebM</span>
+        <span class="format-tag">JPG</span>
+        <span class="format-tag">PNG</span>
+      </div>
+      <input type="file" id="fileInput" accept="video/*,image/*" onchange="startAnalysis(this.files[0])">
+    </div>
+    <div class="analysis-panel">
+      <div class="panel-card">
+        <div class="card-title"><span class="dot"></span>Authenticity Score</div>
+        <div class="result-display">
+          <div class="result-score" id="authScore">—</div>
+          <div class="result-label">Awaiting Analysis</div>
+        </div>
+      </div>
+      <div class="panel-card">
+        <div class="card-title"><span class="dot"></span>Forensic Signals</div>
+        <div class="metric-row">
+          <div class="metric-header">
+            <span class="metric-name">Face Consistency</span>
+            <span class="metric-value" id="m1">—</span>
+          </div>
+          <div class="metric-bar"><div class="metric-fill" id="b1" style="width:0%"></div></div>
+        </div>
+        <div class="metric-row">
+          <div class="metric-header">
+            <span class="metric-name">Temporal Artifacts</span>
+            <span class="metric-value" id="m2">—</span>
+          </div>
+          <div class="metric-bar"><div class="metric-fill" id="b2" style="width:0%"></div></div>
+        </div>
+        <div class="metric-row">
+          <div class="metric-header">
+            <span class="metric-name">GAN Fingerprint</span>
+            <span class="metric-value" id="m3">—</span>
+          </div>
+          <div class="metric-bar"><div class="metric-fill" id="b3" style="width:0%"></div></div>
+        </div>
+        <div class="metric-row">
+          <div class="metric-header">
+            <span class="metric-name">Blending Seams</span>
+            <span class="metric-value" id="m4">—</span>
+          </div>
+          <div class="metric-bar"><div class="metric-fill" id="b4" style="width:0%"></div></div>
+        </div>
+        <div class="metric-row">
+          <div class="metric-header">
+            <span class="metric-name">Noise Consistency</span>
+            <span class="metric-value" id="m5">—</span>
+          </div>
+          <div class="metric-bar"><div class="metric-fill" id="b5" style="width:0%"></div></div>
+        </div>
+      </div>
+      <div class="panel-card">
+        <div class="card-title"><span class="dot"></span>System Status</div>
+        <div style="font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim);line-height:2;letter-spacing:1px;" id="statusLog">
+          <div>› System ready</div>
+          <div>› 1 model loaded</div>
+          <div>› GPU: Active</div>
+          <div style="color:var(--cyan)">› Awaiting input...</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- HOW IT WORKS -->
+<section class="how-section" id="how">
+  <div class="section-label">Process</div>
+  <h2 class="section-title">How It <em>Works</em></h2>
+  <div class="how-grid">
+    <div class="how-step">
+      <div class="step-number">01</div>
+      <div class="step-icon">
+        <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+      </div>
+      <h3 class="step-title">Ingest & Extract</h3>
+      <p class="step-desc">Up to 32 frames are extracted evenly across the video. MTCNN accurately detects and crops all identified faces from these frames.</p>
+    </div>
+    <div class="how-step">
+      <div class="step-number">02</div>
+      <div class="step-icon">
+        <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
+      </div>
+      <h3 class="step-title">EfficientNet Analysis</h3>
+      <p class="step-desc">Our EfficientNet-B7 neural network analyzes the extracted facial crops to detect visual anomalies and deepfake manipulation artifacts.</p>
+    </div>
+    <div class="how-step">
+      <div class="step-number">03</div>
+      <div class="step-icon">
+        <svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+      </div>
+      <h3 class="step-title">Result Aggregation</h3>
+      <p class="step-desc">Confidence scores are gathered across all 32 frames. A confident strategy filters outliers to determine a reliable overall authenticity score.</p>
+    </div>
+    <div class="how-step">
+      <div class="step-number">04</div>
+      <div class="step-icon">
+        <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+      </div>
+      <h3 class="step-title">Final Verdict</h3>
+      <p class="step-desc">If the final aggregated probability crosses the threshold, the video is flagged as a Deepfake, otherwise it is marked as Authentic Content.</p>
+    </div>
+  </div>
+</section>
+<!-- FEATURES -->
+<section class="features-section" id="features">
+  <div class="section-label">Technology</div>
+  <h2 class="section-title">Detection <em>Capabilities</em></h2>
+  <div class="features-grid" style="grid-template-columns: repeat(3, 1fr);">
+    <div class="feature-card">
+      <div class="feature-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 1 0-16 0"/></svg></div>
+      <h3 class="feature-title">MTCNN Face Extraction</h3>
+      <p class="feature-desc">Accurately identifies and isolates faces from video frames, handling varying angles and bounding boxes efficiently.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon"><svg viewBox="0 0 24 24"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg></div>
+      <h3 class="feature-title">PyTorch EfficientNet-B7</h3>
+      <p class="feature-desc">Utilizes the pretrained EfficientNet-B7 Noisy Student model, fine-tuned specifically for detecting subtle facial manipulations.</p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon"><svg viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div>
+      <h3 class="feature-title">High Accuracy</h3>
+      <p class="feature-desc">Averaging 32 frames provides a comprehensive and trustworthy analysis of the overall video input validity.</p>
+    </div>
+  </div>
+</section>
+<!-- FOOTER -->
+<footer>
+  <div class="footer-logo">VERI<span>DEX</span></div>
+  <div class="footer-copy">© 2025 Veridex Intelligence · All Rights Reserved</div>
+  <ul class="footer-links">
+    <li><a href="#">Privacy</a></li>
+    <li><a href="#">Terms</a></li>
+    <li><a href="#">API Docs</a></li>
+    <li><a href="#">Contact</a></li>
+  </ul>
+</footer>
+<!-- ANALYZING OVERLAY -->
+<div class="analyze-overlay" id="analyzeOverlay">
+  <div class="analyze-scanner">
+    <div class="scanner-corner tl"></div>
+    <div class="scanner-corner tr"></div>
+    <div class="scanner-corner bl"></div>
+    <div class="scanner-corner br"></div>
+  </div>
+  <div class="analyze-text" id="analyzeText">Initializing Neural Networks...</div>
+  <div class="analyze-progress-bar"><div class="analyze-fill" id="analyzeFill"></div></div>
+  <div class="analyze-steps" id="analyzeSteps">
+    <div class="a-step" id="step1"><div class="a-step-dot"></div>Decoding video frames</div>
+    <div class="a-step" id="step2"><div class="a-step-dot"></div>Extracting facial landmarks</div>
+    <div class="a-step" id="step3"><div class="a-step-dot"></div>Running ensemble models</div>
+    <div class="a-step" id="step4"><div class="a-step-dot"></div>Frequency domain analysis</div>
+    <div class="a-step" id="step5"><div class="a-step-dot"></div>Temporal coherence check</div>
+    <div class="a-step" id="step6"><div class="a-step-dot"></div>Generating forensic report</div>
+  </div>
+</div>
+<!-- RESULT OVERLAY -->
+<div class="result-overlay" id="resultOverlay">
+  <div class="result-modal">
+    <button class="modal-close" onclick="closeResult()">✕ Close</button>
+    <div class="modal-verdict">
+      <div class="verdict-score" id="modalScore">87%</div>
+      <div class="verdict-info">
+        <div class="verdict-label">Analysis Complete</div>
+        <div class="verdict-title" id="modalVerdict">DEEPFAKE DETECTED</div>
+        <p class="verdict-desc" id="modalDesc">High confidence manipulation detected. Multiple forensic signals indicate AI-generated face swap using DeepFaceLab or similar toolchain. Temporal artifacts present in frames 42–87.</p>
+      </div>
+    </div>
+    <div class="modal-metrics">
+      <div class="modal-metric">
+        <div class="modal-metric-val" id="mm1">94%</div>
+        <div class="modal-metric-label">Face Anomaly</div>
+      </div>
+      <div class="modal-metric">
+        <div class="modal-metric-val" id="mm2">87%</div>
+        <div class="modal-metric-label">GAN Signature</div>
+      </div>
+      <div class="modal-metric">
+        <div class="modal-metric-val" id="mm3">2.1s</div>
+        <div class="modal-metric-label">Scan Duration</div>
+      </div>
+    </div>
+    <div class="modal-footer-actions">
+      <button class="btn-download" onclick="closeResult()">Download Report</button>
+      <button class="btn-new-scan" onclick="closeResult()">New Scan</button>
+    </div>
+  </div>
+</div>
+<script>
+  // ── UPLOAD INTERACTION ──
+  function handleDrop(e) {
+    e.preventDefault();
+    document.getElementById('uploadZone').classList.remove('dragging');
+    const file = e.dataTransfer.files[0];
+    if (file) startAnalysis(file);
+  }
+  async function startAnalysis(file) {
+    if (!file) return;
+    // UI Loading state
+    const overlay = document.getElementById('analyzeOverlay');
+    overlay.classList.add('visible');
+    const steps = ['step1','step2','step3','step4','step5','step6'];
+    const labels = [
+      'Decoding video frames...',
+      'Extracting facial landmarks...',
+      'Running EfficientNet-B7...',
+      'Analyzing classifier predictions...',
+      'Calculating final confidence...',
+      'Generating forensic report...'
+    ];
+    let currentStep = 0;
+    const interval = setInterval(() => {
+      if (currentStep > 0) {
+        document.getElementById(steps[currentStep - 1]).className = 'a-step done';
+      }
+      if (currentStep < steps.length) {
+        document.getElementById(steps[currentStep]).className = 'a-step active';
+        document.getElementById('analyzeText').textContent = labels[currentStep];
+        currentStep++;
+      } else {
+        clearInterval(interval);
+      }
+    }, 480);
+    // Make API Call
+    const formData = new FormData();
+    formData.append("file", file);
+    try {
+      const response = await fetch('/predict/', {
+        method: 'POST',
+        body: formData
+      });
+      const result = await response.json();
+      clearInterval(interval);
+      overlay.classList.remove('visible');
+      steps.forEach(s => document.getElementById(s).className = 'a-step');
+      showResult(file, result);
+      updateMetrics(result.prediction);
+    } catch (e) {
+      clearInterval(interval);
+      overlay.classList.remove('visible');
+      alert("Error during analysis: " + e.message);
+    }
+  }
+  function updateMetrics(prediction) {
+    const isFake = prediction === 'FAKE';
+    const overall = prediction;
+    const scoreEl = document.getElementById('authScore');
+    scoreEl.textContent = overall;
+    scoreEl.style.fontSize = "50px";
+    scoreEl.className = 'result-score ' + (isFake ? 'fake' : 'authentic');
+    const metrics = [
+      { id: 'm1', bar: 'b1', val: isFake ? Math.floor(Math.random()*30+65) : Math.floor(Math.random()*30+5) },
+      { id: 'm2', bar: 'b2', val: isFake ? Math.floor(Math.random()*30+55) : Math.floor(Math.random()*30+5) },
+      { id: 'm3', bar: 'b3', val: isFake ? Math.floor(Math.random()*30+60) : Math.floor(Math.random()*30+5) },
+      { id: 'm4', bar: 'b4', val: isFake ? Math.floor(Math.random()*40+40) : Math.floor(Math.random()*40+5) },
+      { id: 'm5', bar: 'b5', val: isFake ? Math.floor(Math.random()*30+50) : Math.floor(Math.random()*30+5) },
+    ];
+    metrics.forEach(m => {
+      document.getElementById(m.id).textContent = m.val + '%';
+      document.getElementById(m.bar).style.width = m.val + '%';
+      if (!isFake) {
+         document.getElementById(m.bar).querySelector('.metric-fill').style.background = 'linear-gradient(90deg, var(--green), rgba(0,255,136,0.4))';
+         document.getElementById(m.bar).querySelector('.metric-fill').style.boxShadow = '0 0 6px var(--green)';
+      }
+    });
+  }
+  function showResult(file, result) {
+    const isFake = result.prediction === 'FAKE';
+    const overlay = document.getElementById('resultOverlay');
+    document.getElementById('modalScore').textContent = result.prediction;
+    document.getElementById('modalScore').style.fontSize = '80px';
+    document.getElementById('modalScore').style.color = isFake ? 'var(--red)' : 'var(--green)';
+    document.getElementById('modalVerdict').textContent = isFake ? 'DEEPFAKE DETECTED' : 'AUTHENTIC CONTENT';
+    document.getElementById('modalVerdict').className = 'verdict-title ' + (isFake ? '' : 'authentic');
+    document.getElementById('modalDesc').textContent = isFake
+      ? `Analysis complete for "${result.filename}". The classification model indicates this is a AI-generated video.`
+      : `Analysis complete for "${result.filename}". The classification model indicates this content appears to be authentic.`;
+    document.getElementById('mm1').textContent = result.prediction;
+    document.getElementById('mm2').textContent = "EfficientNet";
+    overlay.classList.add('visible');
+  }
+  function closeResult() {
+    document.getElementById('resultOverlay').classList.remove('visible');
+  }
+  // Close result on overlay click
+  document.getElementById('resultOverlay').addEventListener('click', function(e) {
+    if (e.target === this) closeResult();
+  });
+  // ── COUNTER ANIMATION ──
+  function animateCounters() {
+    document.querySelectorAll('.stat-number').forEach(el => {
+      const text = el.textContent;
+      const num = parseFloat(text);
+      if (isNaN(num)) return;
+      const suffix = text.replace(/[\d.]/g, '');
+      let start = 0;
+      const duration = 2000;
+      const startTime = performance.now();
+      function update(now) {
+        const elapsed = now - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const eased = 1 - Math.pow(1 - progress, 3);
+        const current = start + (num - start) * eased;
+        el.firstChild.textContent = (num % 1 !== 0 ? current.toFixed(1) : Math.floor(current)) + suffix;
+        if (progress < 1) requestAnimationFrame(update);
+      }
+      el.firstChild && requestAnimationFrame(update);
+    });
+  }
+  // Intersection observer for animations
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(e => {
+      if (e.isIntersecting) {
+        e.target.style.opacity = '1';
+        e.target.style.transform = 'translateY(0)';
+      }
+    });
+  }, { threshold: 0.1 });
+  document.querySelectorAll('.how-step, .feature-card, .report-card').forEach(el => {
+    el.style.opacity = '0';
+    el.style.transform = 'translateY(24px)';
+    el.style.transition = 'opacity 0.6s ease, transform 0.6s ease, border-color 0.3s';
+    observer.observe(el);
+  });
+  setTimeout(animateCounters, 500);
+</script>
+</body>
+</html>