Danielchris145/TruthCheck-AI
0
1<!DOCTYPE html>2<html lang="en" class="scroll-smooth">3 4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>TruthCheck | AI-Powered Fact Verification</title>8 9 <!-- Fonts -->10 <link rel="preconnect" href="https://fonts.googleapis.com">11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>12 <link13 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap"14 rel="stylesheet">15 16 <!-- Tailwind CSS -->17 <script src="https://cdn.tailwindcss.com"></script>18 <script>19 tailwind.config = {20 darkMode: 'class',21 theme: {22 extend: {23 fontFamily: {24 sans: ['Inter', 'sans-serif'],25 display: ['Orbitron', 'sans-serif'],26 },27 colors: {28 brand: {29 50: '#f0f9ff',30 100: '#e0f2fe',31 200: '#bae6fd',32 300: '#7dd3fc',33 400: '#38bdf8',34 500: '#0ea5e9', // Sky Blue35 600: '#0284c7',36 700: '#0369a1',37 800: '#075985',38 900: '#0c4a6e',39 950: '#082f49',40 },41 neon: {42 cyan: '#00f3ff',43 purple: '#bc13fe',44 green: '#0aff0a',45 red: '#ff0a0a'46 }47 },48 animation: {49 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',50 'glow': 'glow 2s ease-in-out infinite alternate',51 'scan': 'scan 2s linear infinite',52 },53 keyframes: {54 glow: {55 '0%': { boxShadow: '0 0 5px #00f3ff, 0 0 10px #00f3ff' },56 '100%': { boxShadow: '0 0 20px #00f3ff, 0 0 40px #00f3ff' }57 },58 scan: {59 '0%': { transform: 'translateY(-100%)' },60 '100%': { transform: 'translateY(100%)' }61 }62 }63 }64 }65 }66 </script>67 68 <!-- Icons -->69 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">70 71 <!-- Custom CSS -->72 <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">73</head>74 75<body76 class="bg-slate-950 text-white min-h-screen relative overflow-x-hidden selection:bg-brand-500 selection:text-white">77 78 <!-- Background Grid Effect -->79 <div class="fixed inset-0 z-0 opacity-20 pointer-events-none">80 <div81 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%)]">82 </div>83 </div>84 85 <!-- Glowing Orbs -->86 <div87 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">88 </div>89 <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"90 style="animation-delay: 1.5s;"></div>91 92 <!-- Navigation -->93 <nav class="relative z-50 border-b border-white/10 backdrop-blur-md bg-slate-950/50">94 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">95 <div class="flex items-center justify-between h-20">96 <div class="flex items-center gap-3">97 <div98 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)]">99 <i class="fa-solid fa-shield-halved text-brand-400 text-xl"></i>100 </div>101 <span102 class="font-display font-bold text-2xl tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400">103 TRUTH<span class="text-brand-400">CHECK</span>104 </span>105 </div>106 <div class="hidden md:flex gap-8">107 <a href="/" class="text-sm font-medium text-brand-400 border-b-2 border-brand-400">Analyzer</a>108 <a href="/dashboard"109 class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">Dashboard</a>110 <a href="/how-it-works"111 class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">How it112 Works</a>113 <a href="/api-docs"114 class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">API</a>115 </div>116 <button117 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">118 Connect119 </button>120 </div>121 </div>122 </nav>123 124 <!-- Main Content -->125 <main class="relative z-10 container mx-auto px-4 py-16 flex flex-col items-center">126 127 <!-- Hero Section -->128 <div class="text-center max-w-4xl mx-auto mb-16 space-y-6 animate-fade-in-up">129 <div130 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">131 <span class="relative flex h-2 w-2">132 <span133 class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>134 <span class="relative inline-flex rounded-full h-2 w-2 bg-brand-500"></span>135 </span>136 AI-Powered Verification Engine V2.0137 </div>138 139 <h1 class="font-display text-5xl md:text-7xl font-bold leading-tight">140 Verify Reality in <br>141 <span142 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)]">143 Real-Time144 </span>145 </h1>146 147 <p class="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto font-light">148 Analyze any text statement using our advanced neural network ensemble.149 Detect misinformation with military-grade precision.150 </p>151 </div>152 153 <!-- Verification Interface -->154 <div class="w-full max-w-3xl relative group perspective-1000">155 <!-- Glass Card -->156 <div157 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)]">158 159 <div class="p-6 md:p-8 space-y-6">160 <!-- Input Area -->161 <div class="relative">162 <textarea id="claimInput" rows="4"163 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"164 placeholder="Enter a statement to verify... (e.g., 'The Eiffel Tower is located in London')"></textarea>165 166 <div class="absolute bottom-4 right-4 text-xs text-slate-500 font-mono">167 <span id="charCount">0</span>/500168 </div>169 </div>170 171 <!-- Action Bar -->172 <div class="flex items-center justify-between">173 <div class="flex gap-4 text-sm text-slate-400">174 <label175 class="flex items-center gap-2 cursor-pointer hover:text-brand-300 transition-colors">176 <input type="checkbox" checked177 class="accent-brand-500 bg-slate-800 border-slate-600 rounded">178 <span>Deep Search</span>179 </label>180 <label181 class="flex items-center gap-2 cursor-pointer hover:text-brand-300 transition-colors">182 <input type="checkbox" checked183 class="accent-brand-500 bg-slate-800 border-slate-600 rounded">184 <span>Multi-Model Consensus</span>185 </label>186 </div>187 188 <button id="verifyBtn"189 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">190 <span class="relative z-10 flex items-center gap-2">191 INIT_SCAN <i192 class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>193 </span>194 <div195 class="absolute inset-0 bg-gradient-to-r from-brand-400 to-neon-cyan opacity-0 group-hover:opacity-20 transition-opacity">196 </div>197 </button>198 </div>199 </div>200 201 <!-- Loading Overlay -->202 <div id="loadingOverlay"203 class="absolute inset-0 bg-slate-950/90 backdrop-blur-sm rounded-2xl flex flex-col items-center justify-center z-20 hidden">204 <div class="relative w-24 h-24 mb-6">205 <div class="absolute inset-0 border-4 border-slate-800 rounded-full"></div>206 <div class="absolute inset-0 border-t-4 border-brand-500 rounded-full animate-spin"></div>207 <div class="absolute inset-4 bg-brand-500/20 rounded-full blur-md animate-pulse"></div>208 <i209 class="fa-solid fa-fingerprint absolute inset-0 flex items-center justify-center text-brand-400 text-3xl opacity-80"></i>210 </div>211 <div class="font-display text-xl font-bold text-white tracking-widest animate-pulse">ANALYZING</div>212 <div class="text-brand-400 font-mono text-sm mt-2" id="loadingText">Connecting to neural core...213 </div>214 </div>215 </div>216 217 <!-- Result Section -->218 <div id="resultSection" class="mt-8 hidden space-y-6">219 220 <!-- Main Label Card -->221 <div222 class="bg-slate-900/80 border border-white/10 rounded-2xl p-8 backdrop-blur-md relative overflow-hidden">223 <div class="absolute top-0 left-0 w-1 h-full bg-gray-600" id="resultBar"></div>224 225 <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">226 <div>227 <div class="text-slate-400 text-sm font-mono mb-1 uppercase tracking-wider">Verdict Analysis228 </div>229 <h2 id="resultLabel" class="font-display text-4xl font-bold text-white">--</h2>230 </div>231 232 <div class="flex items-center gap-6">233 <div class="text-right">234 <div class="text-3xl font-bold font-display text-white" id="confidenceScore">0%</div>235 <div class="text-slate-400 text-xs uppercase">Confidence</div>236 </div>237 <div class="w-16 h-16 relative flex items-center justify-center">238 <svg class="w-full h-full transform -rotate-90">239 <circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="4"240 fill="transparent" class="text-slate-800" />241 <circle id="confidenceCircle" cx="32" cy="32" r="28" stroke="currentColor"242 stroke-width="4" fill="transparent" class="text-brand-500"243 stroke-dasharray="175.9" stroke-dashoffset="175.9" />244 </svg>245 </div>246 </div>247 </div>248 </div>249 250 <!-- Evidence Section -->251 <div class="bg-slate-900/50 border border-white/5 rounded-2xl p-6 backdrop-blur-md">252 <h3 class="font-display text-lg font-bold text-white mb-4 flex items-center gap-2">253 <i class="fa-solid fa-list-check text-brand-400"></i> Evidence Stream254 </h3>255 <div id="evidenceList"256 class="space-y-4 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar text-slate-300 font-light leading-relaxed">257 <!-- Evidence items injected here -->258 </div>259 </div>260 261 </div>262 </div>263 264 </main>265 266 <!-- Footer -->267 <footer class="relative z-10 border-t border-white/5 mt-20 bg-slate-950">268 <div269 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">270 <div>© 2025 TruthCheck AI. All Systems Nominal.</div>271 <div class="flex gap-4 mt-4 md:mt-0">272 <a href="#" class="hover:text-brand-400 transition-colors">Privacy</a>273 <a href="#" class="hover:text-brand-400 transition-colors">Terms</a>274 <a href="#" class="hover:text-brand-400 transition-colors">Github</a>275 </div>276 </div>277 </footer>278 279 <script src="{{ url_for('static', filename='js/main.js') }}"></script>280</body>281 282</html>