|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TruthPulse Scanner | AI-Powered Fact Checking</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
|
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #f8fafc; |
|
|
} |
|
|
|
|
|
.verdict-true { |
|
|
box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.3); |
|
|
animation: pulseGreen 1.5s infinite; |
|
|
} |
|
|
|
|
|
.verdict-false { |
|
|
box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.3); |
|
|
animation: pulseRed 1.5s infinite; |
|
|
} |
|
|
|
|
|
.verdict-uncertain { |
|
|
box-shadow: 0 0 0 4px rgba(253, 230, 138, 0.3); |
|
|
animation: pulseYellow 1.5s infinite; |
|
|
} |
|
|
|
|
|
.verdict-unsupported { |
|
|
box-shadow: 0 0 0 4px rgba(156, 163, 175, 0.3); |
|
|
animation: pulseGray 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulseGreen { |
|
|
0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } |
|
|
} |
|
|
|
|
|
@keyframes pulseRed { |
|
|
0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(248, 113, 113, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); } |
|
|
} |
|
|
|
|
|
@keyframes pulseYellow { |
|
|
0% { box-shadow: 0 0 0 0 rgba(253, 230, 138, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(253, 230, 138, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(253, 230, 138, 0); } |
|
|
} |
|
|
|
|
|
@keyframes pulseGray { |
|
|
0% { box-shadow: 0 0 0 0 rgba(156, 163, 175, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(156, 163, 175, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(156, 163, 175, 0); } |
|
|
} |
|
|
|
|
|
.scan-animation { |
|
|
animation: scan 2s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes scan { |
|
|
0% { transform: translateY(-100%); opacity: 0; } |
|
|
10% { opacity: 1; } |
|
|
90% { opacity: 1; } |
|
|
100% { transform: translateY(100%); opacity: 0; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50"> |
|
|
|
|
|
<div id="vanta-bg" class="fixed inset-0 z-0"></div> |
|
|
|
|
|
<div class="relative z-10 min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="py-6 px-4 sm:px-6 lg:px-8 bg-white/80 backdrop-blur-md border-b border-gray-200"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="search" class="text-indigo-600 w-6 h-6"></i> |
|
|
<h1 class="text-2xl font-bold text-gray-800">TruthPulse <span class="text-indigo-600">Scanner</span></h1> |
|
|
</div> |
|
|
<nav> |
|
|
<ul class="flex space-x-6"> |
|
|
<li><a href="#" class="text-gray-600 hover:text-indigo-600 transition">How It Works</a></li> |
|
|
<li><a href="#" class="text-gray-600 hover:text-indigo-600 transition">About</a></li> |
|
|
<li><a href="#" class="text-gray-600 hover:text-indigo-600 transition">FAQ</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-12 flex flex-col items-center"> |
|
|
<div class="max-w-3xl w-full bg-white/90 backdrop-blur-sm rounded-xl shadow-xl p-8"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-2">Verify Any Claim in Seconds</h2> |
|
|
<p class="text-gray-600 text-center mb-8">Paste a link or text below to check its accuracy</p> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<button class="flex-1 py-3 px-4 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition flex items-center justify-center"> |
|
|
<i data-feather="link" class="mr-2"></i> Paste URL |
|
|
</button> |
|
|
<button class="flex-1 py-3 px-4 bg-indigo-100 text-indigo-700 rounded-lg font-medium hover:bg-indigo-200 transition flex items-center justify-center"> |
|
|
<i data-feather="edit" class="mr-2"></i> Enter Text |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<textarea class="w-full h-40 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none" placeholder="Paste the text or URL you want to verify here..."></textarea> |
|
|
|
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2 text-gray-500"> |
|
|
<i data-feather="shield"></i> |
|
|
<span class="text-sm">Your data is never stored</span> |
|
|
</div> |
|
|
<button id="verify-btn" class="py-3 px-6 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition flex items-center"> |
|
|
<i data-feather="search" class="mr-2"></i> Verify Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="result-container" class="hidden max-w-3xl w-full mt-8"> |
|
|
<div id="loading-state" class="bg-white rounded-xl shadow-lg p-8 text-center"> |
|
|
<div class="relative h-32 w-32 mx-auto mb-6"> |
|
|
<div class="absolute inset-0 rounded-full border-4 border-indigo-200"></div> |
|
|
<div class="absolute inset-4 rounded-full border-4 border-indigo-300 animate-spin"></div> |
|
|
<div class="absolute inset-8 rounded-full border-4 border-indigo-400"></div> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="h-16 w-16 bg-indigo-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="search" class="text-indigo-600 w-8 h-8 animate-pulse"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute left-0 right-0 top-1/2 h-1 bg-indigo-100 overflow-hidden"> |
|
|
<div class="scan-animation h-full w-full bg-gradient-to-b from-indigo-400 to-transparent"></div> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Analyzing Your Claim</h3> |
|
|
<p class="text-gray-600">Our AI is scanning multiple sources to determine accuracy...</p> |
|
|
</div> |
|
|
|
|
|
<div id="verdict-card" class="hidden bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold">Claim Analysis</h3> |
|
|
<p class="text-gray-600" id="verdict-date">Verified just now</p> |
|
|
</div> |
|
|
<div id="verdict-badge" class="px-4 py-2 rounded-full font-semibold flex items-center"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg mb-6"> |
|
|
<p id="claim-text" class="text-gray-800"></p> |
|
|
</div> |
|
|
|
|
|
<div id="verdict-content" class="mb-6"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-200 pt-6"> |
|
|
<h4 class="font-semibold mb-3">Sources & Evidence</h4> |
|
|
<div id="sources-list" class="space-y-3"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="py-8 px-4 sm:px-6 lg:px-8 bg-white/80 backdrop-blur-md border-t border-gray-200"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center space-x-2 mb-4 md:mb-0"> |
|
|
<i data-feather="search" class="text-indigo-600 w-5 h-5"></i> |
|
|
<span class="text-lg font-semibold text-gray-800">TruthPulse Scanner</span> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Terms of Service</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-center text-gray-500 text-sm mt-6">© 2023 TruthPulse Scanner. All rights reserved.</p> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// Initialize Vanta.js background |
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x4f46e5, |
|
|
backgroundColor: 0xf8fafc, |
|
|
size: 0.8 |
|
|
}); |
|
|
|
|
|
// Initialize feather icons |
|
|
feather.replace(); |
|
|
|
|
|
// Mock verification process |
|
|
document.getElementById('verify-btn').addEventListener('click', function() { |
|
|
const textarea = document.querySelector('textarea'); |
|
|
if (textarea.value.trim() === '') { |
|
|
alert('Please enter some text or a URL to verify'); |
|
|
return; |
|
|
} |
|
|
|
|
|
// Show loading state |
|
|
document.getElementById('result-container').classList.remove('hidden'); |
|
|
document.getElementById('loading-state').classList.remove('hidden'); |
|
|
document.getElementById('verdict-card').classList.add('hidden'); |
|
|
|
|
|
// Set the claim text |
|
|
document.getElementById('claim-text').textContent = textarea.value; |
|
|
|
|
|
// Simulate API call with timeout |
|
|
setTimeout(() => { |
|
|
document.getElementById('loading-state').classList.add('hidden'); |
|
|
|
|
|
// Randomly select a verdict for demo purposes |
|
|
const verdicts = ['true', 'false', 'uncertain', 'unsupported']; |
|
|
const randomVerdict = verdicts[Math.floor(Math.random() * verdicts.length)]; |
|
|
showVerdict(randomVerdict); |
|
|
|
|
|
document.getElementById('verdict-card').classList.remove('hidden'); |
|
|
}, 3000); |
|
|
}); |
|
|
|
|
|
function showVerdict(verdict) { |
|
|
const badge = document.getElementById('verdict-badge'); |
|
|
const content = document.getElementById('verdict-content'); |
|
|
const sources = document.getElementById('sources-list'); |
|
|
|
|
|
// Reset classes |
|
|
badge.className = 'px-4 py-2 rounded-full font-semibold flex items-center'; |
|
|
content.innerHTML = ''; |
|
|
sources.innerHTML = ''; |
|
|
|
|
|
// Add verdict-specific content |
|
|
switch(verdict) { |
|
|
case 'true': |
|
|
badge.classList.add('bg-green-100', 'text-green-800'); |
|
|
badge.innerHTML = '<i data-feather="check-circle" class="mr-2 text-green-600"></i> Verified True'; |
|
|
content.innerHTML = ` |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mr-4"> |
|
|
<div class="h-12 w-12 bg-green-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="check" class="text-green-600 w-6 h-6"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-green-800 mb-1">This claim is accurate</h4> |
|
|
<p class="text-gray-700">Our analysis of multiple reliable sources confirms this information to be true. The evidence strongly supports this claim.</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
sources.innerHTML = ` |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mr-3"> |
|
|
<div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="link" class="text-green-600 w-4 h-4"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<a href="#" class="text-indigo-600 hover:underline">Scientific Study on Topic (2022)</a> |
|
|
<p class="text-sm text-gray-500">Published in Journal of Science</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mr-3"> |
|
|
<div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="link" class="text-green-600 w-4 h-4"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<a href="#" class="text-indigo-600 hover:underline">Government Report</a> |
|
|
<p class="text-sm text-gray-500">Official statistics from National Bureau</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
badge.parentElement.parentElement.classList.add('verdict-true'); |
|
|
break; |
|
|
|
|
|
case 'false': |
|
|
badge.classList.add('bg-red-100', 'text-red-800'); |
|
|
badge.innerHTML = '<i data-feather="x-circle" class="mr-2 text-red-600"></i> Verified False'; |
|
|
content.innerHTML = ` |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mr-4"> |
|
|
<div class="h-12 w-12 bg-red-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="x" class="text-red-600 w-6 h-6"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-red-800 mb-1">This claim is incorrect</h4> |
|
|
<p class="text-gray-700">Our research found multiple credible sources that contradict this information. The evidence does not support this claim.</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
sources.innerHTML = ` |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mr-3"> |
|
|
<div class="h-8 w-8 bg-red-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="link" class="text-red-600 w-4 h-4"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<a href="#" class="text-indigo-600 hover:underline">Fact-check from Reuters</a> |
|
|
<p class="text-sm text-gray-500">Published on verified fact-checking site</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mr-3"> |
|
|
<div class="h-8 w-8 bg-red-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="link" class="text-red-600 w-4 h-4"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<a href="#" class="text-indigo-600 hover:underline">Expert Analysis</a> |
|
|
<p class="text-sm text-gray-500">Statement from subject matter experts</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
badge.parentElement.parentElement.classList.add('verdict-false'); |
|
|
break; |
|
|
|
|
|
case 'uncertain': |
|
|
badge.classList.add('bg-yellow-100', 'text-yellow-800'); |
|
|
badge.innerHTML = '<i data-feather="alert-circle" class="mr-2 text-yellow-600"></i> Uncertain'; |
|
|
content.innerHTML = ` |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mr-4"> |
|
|
<div class="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="help-circle" class="text-yellow-600 w-6 h-6"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-yellow-800 mb-1">Evidence is inconclusive</h4> |
|
|
<p class="text-gray-700">We couldn't find enough reliable evidence to confirm or deny this claim. The available information is conflicting or incomplete.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 bg-yellow-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="font-medium text-yellow-800 mr-2">Confidence Level:</span> |
|
|
<div class="flex-1 bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-yellow-500 h-2.5 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
<span class="text-sm text-yellow-800 ml-2">45%</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-700">Based on analysis of available sources</p> |
|
|
</div> |
|
|
`; |
|
|
sources.innerHTML = ` |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mr-3"> |
|
|
<div class="h-8 w-8 bg-yellow-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="link" class="text-yellow-600 w-4 h-4"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<a href="#" class="text-indigo-600 hover:underline">Conflicting Study A</a> |
|
|
<p class="text-sm text-gray-500">Supports the claim with limitations</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mr-3"> |
|
|
<div class="h-8 w-8 bg-yellow-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="link" class="text-yellow-600 w-4 h-4"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<a href="#" class="text-indigo-600 hover:underline">Conflicting Study B</a> |
|
|
<p class="text-sm text-gray-500">Contradicts the claim with caveats</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
badge.parentElement.parentElement.classList.add('verdict-uncertain'); |
|
|
break; |
|
|
|
|
|
case 'unsupported': |
|
|
badge.classList.add('bg-gray-100', 'text-gray-800'); |
|
|
badge.innerHTML = '<i data-feather="search" class="mr-2 text-gray-600"></i> No Evidence Found'; |
|
|
content.innerHTML = ` |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mr-4"> |
|
|
<div class="h-12 w-12 bg-gray-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="search" class="text-gray-600 w-6 h-6"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800 mb-1">No supporting evidence found</h4> |
|
|
<p class="text-gray-700">We couldn't find any credible sources that verify or refute this claim. More research is needed to determine its accuracy.</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
sources.innerHTML = ` |
|
|
<div class="text-gray-500 italic"> |
|
|
No verifiable sources were found related to this claim |
|
|
</div> |
|
|
`; |
|
|
badge.parentElement.parentElement.classList.add('verdict-unsupported'); |
|
|
break; |
|
|
} |
|
|
|
|
|
// Update icons |
|
|
feather.replace(); |
|
|
|
|
|
// Add animation to verdict card |
|
|
const card = document.getElementById('verdict-card'); |
|
|
card.style.opacity = '0'; |
|
|
card.style.transform = 'translateY(20px)'; |
|
|
setTimeout(() => { |
|
|
card.style.transition = 'all 0.3s ease-out'; |
|
|
card.style.opacity = '1'; |
|
|
card.style.transform = 'translateY(0)'; |
|
|
}, 100); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
