| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>TruthCheck | AI-Powered Fact Verification</title> |
|
|
| |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap" |
| rel="stylesheet"> |
|
|
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'], |
| display: ['Orbitron', 'sans-serif'], |
| }, |
| colors: { |
| brand: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| 950: '#082f49', |
| }, |
| neon: { |
| cyan: '#00f3ff', |
| purple: '#bc13fe', |
| green: '#0aff0a', |
| red: '#ff0a0a' |
| } |
| }, |
| animation: { |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| 'glow': 'glow 2s ease-in-out infinite alternate', |
| 'scan': 'scan 2s linear infinite', |
| }, |
| keyframes: { |
| glow: { |
| '0%': { boxShadow: '0 0 5px #00f3ff, 0 0 10px #00f3ff' }, |
| '100%': { boxShadow: '0 0 20px #00f3ff, 0 0 40px #00f3ff' } |
| }, |
| scan: { |
| '0%': { transform: 'translateY(-100%)' }, |
| '100%': { transform: 'translateY(100%)' } |
| } |
| } |
| } |
| } |
| } |
| </script> |
|
|
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
| |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> |
| </head> |
|
|
| <body |
| class="bg-slate-950 text-white min-h-screen relative overflow-x-hidden selection:bg-brand-500 selection:text-white"> |
|
|
| |
| <div class="fixed inset-0 z-0 opacity-20 pointer-events-none"> |
| <div |
| class="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"> |
| </div> |
| </div> |
|
|
| |
| <div |
| class="fixed top-0 left-1/4 w-96 h-96 bg-brand-500/20 rounded-full blur-[128px] pointer-events-none animate-pulse-slow"> |
| </div> |
| <div class="fixed bottom-0 right-1/4 w-96 h-96 bg-neon-purple/20 rounded-full blur-[128px] pointer-events-none animate-pulse-slow" |
| style="animation-delay: 1.5s;"></div> |
|
|
| |
| <nav class="relative z-50 border-b border-white/10 backdrop-blur-md bg-slate-950/50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-20"> |
| <div class="flex items-center gap-3"> |
| <div |
| class="relative w-10 h-10 flex items-center justify-center bg-brand-500/10 rounded-lg border border-brand-500/50 shadow-[0_0_15px_rgba(14,165,233,0.3)]"> |
| <i class="fa-solid fa-shield-halved text-brand-400 text-xl"></i> |
| </div> |
| <span |
| class="font-display font-bold text-2xl tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400"> |
| TRUTH<span class="text-brand-400">CHECK</span> |
| </span> |
| </div> |
| <div class="hidden md:flex gap-8"> |
| <a href="/" class="text-sm font-medium text-brand-400 border-b-2 border-brand-400">Analyzer</a> |
| <a href="/dashboard" |
| class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">Dashboard</a> |
| <a href="/how-it-works" |
| class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">How it |
| Works</a> |
| <a href="/api-docs" |
| class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">API</a> |
| </div> |
| <button |
| class="bg-brand-600 hover:bg-brand-500 text-white px-6 py-2 rounded-full font-medium text-sm transition-all shadow-[0_0_20px_rgba(14,165,233,0.3)] hover:shadow-[0_0_30px_rgba(14,165,233,0.5)] border border-brand-400/50"> |
| Connect |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="relative z-10 container mx-auto px-4 py-16 flex flex-col items-center"> |
|
|
| |
| <div class="text-center max-w-4xl mx-auto mb-16 space-y-6 animate-fade-in-up"> |
| <div |
| class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 border border-brand-500/20 text-brand-300 text-sm font-medium mb-4"> |
| <span class="relative flex h-2 w-2"> |
| <span |
| class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span> |
| <span class="relative inline-flex rounded-full h-2 w-2 bg-brand-500"></span> |
| </span> |
| AI-Powered Verification Engine V2.0 |
| </div> |
|
|
| <h1 class="font-display text-5xl md:text-7xl font-bold leading-tight"> |
| Verify Reality in <br> |
| <span |
| class="text-transparent bg-clip-text bg-gradient-to-r from-brand-400 via-neon-cyan to-brand-500 drop-shadow-[0_0_15px_rgba(14,165,233,0.5)]"> |
| Real-Time |
| </span> |
| </h1> |
|
|
| <p class="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto font-light"> |
| Analyze any text statement using our advanced neural network ensemble. |
| Detect misinformation with military-grade precision. |
| </p> |
| </div> |
|
|
| |
| <div class="w-full max-w-3xl relative group perspective-1000"> |
| |
| <div |
| class="relative bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-1 shadow-2xl transition-all duration-300 hover:border-brand-500/30 hover:shadow-[0_0_50px_rgba(14,165,233,0.1)]"> |
|
|
| <div class="p-6 md:p-8 space-y-6"> |
| |
| <div class="relative"> |
| <textarea id="claimInput" rows="4" |
| class="w-full bg-slate-950/80 border border-slate-700/50 rounded-xl p-5 text-lg text-slate-200 placeholder-slate-600 focus:outline-none focus:border-brand-500/50 focus:ring-1 focus:ring-brand-500/50 transition-all resize-none font-light tracking-wide" |
| placeholder="Enter a statement to verify... (e.g., 'The Eiffel Tower is located in London')"></textarea> |
|
|
| <div class="absolute bottom-4 right-4 text-xs text-slate-500 font-mono"> |
| <span id="charCount">0</span>/500 |
| </div> |
| </div> |
|
|
| |
| <div class="flex items-center justify-between"> |
| <div class="flex gap-4 text-sm text-slate-400"> |
| <label |
| class="flex items-center gap-2 cursor-pointer hover:text-brand-300 transition-colors"> |
| <input type="checkbox" checked |
| class="accent-brand-500 bg-slate-800 border-slate-600 rounded"> |
| <span>Deep Search</span> |
| </label> |
| <label |
| class="flex items-center gap-2 cursor-pointer hover:text-brand-300 transition-colors"> |
| <input type="checkbox" checked |
| class="accent-brand-500 bg-slate-800 border-slate-600 rounded"> |
| <span>Multi-Model Consensus</span> |
| </label> |
| </div> |
|
|
| <button id="verifyBtn" |
| class="group relative px-8 py-3 bg-white text-slate-950 rounded-xl font-bold font-display hover:bg-brand-50 text-base transition-all overflow-hidden"> |
| <span class="relative z-10 flex items-center gap-2"> |
| INIT_SCAN <i |
| class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i> |
| </span> |
| <div |
| class="absolute inset-0 bg-gradient-to-r from-brand-400 to-neon-cyan opacity-0 group-hover:opacity-20 transition-opacity"> |
| </div> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="loadingOverlay" |
| class="absolute inset-0 bg-slate-950/90 backdrop-blur-sm rounded-2xl flex flex-col items-center justify-center z-20 hidden"> |
| <div class="relative w-24 h-24 mb-6"> |
| <div class="absolute inset-0 border-4 border-slate-800 rounded-full"></div> |
| <div class="absolute inset-0 border-t-4 border-brand-500 rounded-full animate-spin"></div> |
| <div class="absolute inset-4 bg-brand-500/20 rounded-full blur-md animate-pulse"></div> |
| <i |
| class="fa-solid fa-fingerprint absolute inset-0 flex items-center justify-center text-brand-400 text-3xl opacity-80"></i> |
| </div> |
| <div class="font-display text-xl font-bold text-white tracking-widest animate-pulse">ANALYZING</div> |
| <div class="text-brand-400 font-mono text-sm mt-2" id="loadingText">Connecting to neural core... |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="resultSection" class="mt-8 hidden space-y-6"> |
|
|
| |
| <div |
| class="bg-slate-900/80 border border-white/10 rounded-2xl p-8 backdrop-blur-md relative overflow-hidden"> |
| <div class="absolute top-0 left-0 w-1 h-full bg-gray-600" id="resultBar"></div> |
|
|
| <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6"> |
| <div> |
| <div class="text-slate-400 text-sm font-mono mb-1 uppercase tracking-wider">Verdict Analysis |
| </div> |
| <h2 id="resultLabel" class="font-display text-4xl font-bold text-white">--</h2> |
| </div> |
|
|
| <div class="flex items-center gap-6"> |
| <div class="text-right"> |
| <div class="text-3xl font-bold font-display text-white" id="confidenceScore">0%</div> |
| <div class="text-slate-400 text-xs uppercase">Confidence</div> |
| </div> |
| <div class="w-16 h-16 relative flex items-center justify-center"> |
| <svg class="w-full h-full transform -rotate-90"> |
| <circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="4" |
| fill="transparent" class="text-slate-800" /> |
| <circle id="confidenceCircle" cx="32" cy="32" r="28" stroke="currentColor" |
| stroke-width="4" fill="transparent" class="text-brand-500" |
| stroke-dasharray="175.9" stroke-dashoffset="175.9" /> |
| </svg> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-slate-900/50 border border-white/5 rounded-2xl p-6 backdrop-blur-md"> |
| <h3 class="font-display text-lg font-bold text-white mb-4 flex items-center gap-2"> |
| <i class="fa-solid fa-list-check text-brand-400"></i> Evidence Stream |
| </h3> |
| <div id="evidenceList" |
| class="space-y-4 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar text-slate-300 font-light leading-relaxed"> |
| |
| </div> |
| </div> |
|
|
| </div> |
| </div> |
|
|
| </main> |
|
|
| |
| <footer class="relative z-10 border-t border-white/5 mt-20 bg-slate-950"> |
| <div |
| class="max-w-7xl mx-auto px-4 py-8 flex flex-col md:flex-row items-center justify-between text-slate-500 text-sm"> |
| <div>© 2025 TruthCheck AI. All Systems Nominal.</div> |
| <div class="flex gap-4 mt-4 md:mt-0"> |
| <a href="#" class="hover:text-brand-400 transition-colors">Privacy</a> |
| <a href="#" class="hover:text-brand-400 transition-colors">Terms</a> |
| <a href="#" class="hover:text-brand-400 transition-colors">Github</a> |
| </div> |
| </div> |
| </footer> |
|
|
| <script src="{{ url_for('static', filename='js/main.js') }}"></script> |
| </body> |
|
|
| </html> |
