Spaces:
Build error
Build error
| <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> | |