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>API Documentation | TruthCheck</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&family=Fira+Code:wght@400;500&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 mono: ['Fira Code', 'monospace'],27 },28 colors: {29 brand: {30 50: '#f0f9ff',31 100: '#e0f2fe',32 200: '#bae6fd',33 300: '#7dd3fc',34 400: '#38bdf8',35 500: '#0ea5e9',36 600: '#0284c7',37 700: '#0369a1',38 800: '#075985',39 900: '#0c4a6e',40 950: '#082f49',41 },42 neon: {43 cyan: '#00f3ff',44 purple: '#bc13fe',45 }46 },47 animation: {48 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',49 'fade-in-up': 'fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards',50 },51 keyframes: {52 fadeInUp: {53 'from': { opacity: '0', transform: 'translate3d(0, 20px, 0)' },54 'to': { opacity: '1', transform: 'translate3d(0, 0, 0)' }55 }56 }57 }58 }59 }60 </script>61 62 <!-- Icons -->63 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">64 65 <!-- Custom CSS -->66 <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">67</head>68 69<body70 class="bg-slate-950 text-white min-h-screen relative overflow-x-hidden selection:bg-brand-500 selection:text-white">71 72 <!-- Background Grid Effect -->73 <div class="fixed inset-0 z-0 opacity-20 pointer-events-none">74 <div75 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%)]">76 </div>77 </div>78 79 <!-- Navigation -->80 <nav class="relative z-50 border-b border-white/10 backdrop-blur-md bg-slate-950/50">81 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">82 <div class="flex items-center justify-between h-20">83 <a href="/" class="flex items-center gap-3 group">84 <div85 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)] group-hover:shadow-[0_0_25px_rgba(14,165,233,0.5)] transition-shadow">86 <i class="fa-solid fa-shield-halved text-brand-400 text-xl"></i>87 </div>88 <span89 class="font-display font-bold text-2xl tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400">90 TRUTH<span class="text-brand-400">CHECK</span>91 </span>92 </a>93 <div class="hidden md:flex gap-8">94 <a href="/"95 class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">Analyzer</a>96 <a href="/how-it-works"97 class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">How it98 Works</a>99 <a href="/api-docs" class="text-sm font-medium text-brand-400 border-b-2 border-brand-400">API</a>100 </div>101 </div>102 </div>103 </nav>104 105 <!-- Main Content -->106 <main class="relative z-10 container mx-auto px-4 py-16">107 108 <div class="max-w-4xl mx-auto space-y-12 animate-fade-in-up">109 110 <!-- Header -->111 <div class="space-y-4">112 <h1 class="font-display text-4xl md:text-5xl font-bold text-white">REST API Reference</h1>113 <p class="text-slate-400 text-lg">Integrate TruthCheck verification directly into your applications.</p>114 </div>115 116 <!-- Endpoint Card -->117 <div class="bg-slate-900/50 border border-white/5 rounded-2xl overflow-hidden">118 <div class="p-6 border-b border-white/5 bg-slate-900 flex justify-between items-center">119 <div class="flex items-center gap-4">120 <span121 class="px-3 py-1 bg-green-500/20 text-green-400 font-mono text-sm font-bold rounded">POST</span>122 <code class="text-lg text-white font-mono">/api/verify</code>123 </div>124 </div>125 126 <div class="p-8 space-y-8">127 <!-- Description -->128 <div>129 <h3 class="font-display text-lg text-white mb-2">Description</h3>130 <p class="text-slate-400">Submit a text claim for verification. The system will process the131 claim and return a verdict with supporting evidence.</p>132 </div>133 134 <!-- Request -->135 <div>136 <h3 class="font-display text-lg text-white mb-4">Request Body</h3>137 <div class="bg-slate-950 p-6 rounded-xl border border-white/10 relative group">138 <button class="absolute top-4 right-4 text-slate-500 hover:text-white transition-colors"><i139 class="fa-regular fa-copy"></i></button>140 <pre><code class="language-json text-sm font-mono text-brand-300">{141 "claim": "The Eiffel Tower is located in London"142}</code></pre>143 </div>144 </div>145 146 <!-- Response -->147 <div>148 <h3 class="font-display text-lg text-white mb-4">Response</h3>149 <div class="bg-slate-950 p-6 rounded-xl border border-white/10 relative group">150 <button class="absolute top-4 right-4 text-slate-500 hover:text-white transition-colors"><i151 class="fa-regular fa-copy"></i></button>152 <pre><code class="language-json text-sm font-mono text-emerald-300">{153 "label": "False",154 "confidence": 0.98,155 "evidence": "**Analyzed 4 sources**...",156 "claim": "The Eiffel Tower is located in London"157}</code></pre>158 </div>159 </div>160 </div>161 </div>162 163 <!-- Status Codes -->164 <div class="bg-slate-900/50 border border-white/5 rounded-2xl overflow-hidden p-8">165 <h3 class="font-display text-lg text-white mb-6">Status Codes</h3>166 <div class="space-y-4">167 <div class="flex gap-4">168 <code class="text-green-400 font-mono font-bold w-12">200</code>169 <span class="text-slate-300">Successful verification.</span>170 </div>171 <div class="flex gap-4">172 <code class="text-amber-400 font-mono font-bold w-12">400</code>173 <span class="text-slate-300">Bad request (missing claim).</span>174 </div>175 <div class="flex gap-4">176 <code class="text-red-400 font-mono font-bold w-12">500</code>177 <span class="text-slate-300">Internal server error.</span>178 </div>179 </div>180 </div>181 182 </div>183 </main>184 185 <!-- Footer -->186 <footer class="relative z-10 border-t border-white/5 mt-20 bg-slate-950">187 <div188 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">189 <div>© 2025 TruthCheck AI. All Systems Nominal.</div>190 <div class="flex gap-4 mt-4 md:mt-0">191 <a href="#" class="hover:text-brand-400 transition-colors">Privacy</a>192 <a href="#" class="hover:text-brand-400 transition-colors">Terms</a>193 <a href="https://github.com/CHRISDANIEL145" class="hover:text-brand-400 transition-colors">Github</a>194 </div>195 </div>196 </footer>197</body>198 199</html>