File size: 14,841 Bytes
622a0b7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 | <!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>
<!-- Fonts -->
<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">
<!-- Tailwind CSS -->
<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', // Sky Blue
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>
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Custom 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">
<!-- Background Grid Effect -->
<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>
<!-- Glowing Orbs -->
<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>
<!-- Navigation -->
<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 Content -->
<main class="relative z-10 container mx-auto px-4 py-16 flex flex-col items-center">
<!-- Hero Section -->
<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>
<!-- Verification Interface -->
<div class="w-full max-w-3xl relative group perspective-1000">
<!-- Glass Card -->
<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">
<!-- Input Area -->
<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>
<!-- Action Bar -->
<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>
<!-- Loading Overlay -->
<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>
<!-- Result Section -->
<div id="resultSection" class="mt-8 hidden space-y-6">
<!-- Main Label Card -->
<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>
<!-- Evidence Section -->
<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">
<!-- Evidence items injected here -->
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<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> |