Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EmailGuard | AI Spam Detection</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,600;12..96,700;12..96,800&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Bricolage Grotesque', sans-serif; | |
| background-color: #050505; | |
| background-image: | |
| radial-gradient(circle at 50% -20%, #1e293b 0%, transparent 50%), | |
| radial-gradient(circle at 0% 100%, #0f172a 0%, transparent 40%); | |
| min-height: 100vh; | |
| color: #e2e8f0; | |
| } | |
| .glass-card { | |
| background: rgba(15, 23, 42, 0.4); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6); | |
| } | |
| .input-glow:focus { | |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); | |
| border-color: #3b82f6; | |
| } | |
| .btn-gradient { | |
| background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .btn-gradient:hover:not(:disabled) { | |
| transform: translateY(-1px); | |
| box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3); | |
| filter: brightness(1.05); | |
| } | |
| .loader { | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| border-top: 2px solid #fff; | |
| border-radius: 50%; | |
| width: 16px; | |
| height: 16px; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } | |
| .developer-badge { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(5px); | |
| } | |
| #emailInput { | |
| font-weight: 300; | |
| } | |
| </style> | |
| </head> | |
| <body class="flex flex-col items-center justify-center p-6"> | |
| <div class="w-full max-w-lg"> | |
| <!-- Brand --> | |
| <div class="text-center mb-8"> | |
| <div class="inline-block p-3 rounded-2xl bg-blue-600/10 border border-blue-500/20 mb-4 shadow-xl shadow-blue-500/5"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> | |
| </svg> | |
| </div> | |
| <h1 class="text-4xl font-extrabold text-white mb-1 tracking-tight">EmailGuard</h1> | |
| <p class="text-slate-500 font-semibold tracking-widest uppercase text-[10px]">AI Forensic Analysis</p> | |
| </div> | |
| <!-- Main Card --> | |
| <div class="glass-card rounded-[2.5rem] p-8 md:p-10 mb-8"> | |
| <div class="space-y-6"> | |
| <div class="relative"> | |
| <label class="text-[10px] font-bold uppercase tracking-[0.15em] text-slate-500 ml-1 mb-3 block">Email Content</label> | |
| <textarea | |
| id="emailInput" | |
| class="w-full h-48 bg-slate-900/40 border border-slate-800/50 rounded-3xl p-6 text-slate-100 placeholder:text-slate-700 focus:outline-none input-glow transition-all resize-none text-base leading-relaxed" | |
| placeholder="Paste text here..."></textarea> | |
| </div> | |
| <button | |
| onclick="handleCheck()" | |
| id="checkBtn" | |
| class="btn-gradient w-full text-white font-bold py-4 rounded-2xl flex items-center justify-center gap-3 disabled:opacity-50 text-base"> | |
| <span id="btnLabel">Execute Analysis</span> | |
| <div id="btnLoader" class="loader hidden"></div> | |
| </button> | |
| </div> | |
| <!-- Result Area --> | |
| <div id="resultBox" class="hidden mt-8 p-6 rounded-3xl border animate-in fade-in slide-in-from-top-4 duration-500"> | |
| <div class="flex items-center gap-4"> | |
| <div id="resultIndicator" class="w-3 h-3 rounded-full"></div> | |
| <div> | |
| <p class="text-[9px] uppercase font-bold tracking-widest opacity-50 mb-0.5">Classification</p> | |
| <p id="resultText" class="text-lg font-bold"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Developer Signature - Space Fixed --> | |
| <div class="flex justify-center"> | |
| <div class="developer-badge px-5 py-2.5 rounded-2xl flex items-center gap-1.5 group hover:border-blue-500/20 transition-all cursor-default"> | |
| <span class="text-slate-500 text-[10px] font-semibold uppercase tracking-tight">Designed & Developed By</span> | |
| <span class="text-white font-bold text-base tracking-tight group-hover:text-blue-400 transition-colors">Hamza</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const API_URL = 'https://humza7656-email-backend.hf.space/email_checker'; | |
| async function handleCheck() { | |
| const input = document.getElementById('emailInput'); | |
| const btn = document.getElementById('checkBtn'); | |
| const btnLabel = document.getElementById('btnLabel'); | |
| const btnLoader = document.getElementById('btnLoader'); | |
| const resultBox = document.getElementById('resultBox'); | |
| const resultText = document.getElementById('resultText'); | |
| const resultIndicator = document.getElementById('resultIndicator'); | |
| const textValue = input.value.trim(); | |
| if (!textValue) return; | |
| btn.disabled = true; | |
| btnLabel.textContent = "Processing..."; | |
| btnLoader.classList.remove('hidden'); | |
| resultBox.classList.add('hidden'); | |
| try { | |
| const response = await fetch(API_URL, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ text: textValue }) | |
| }); | |
| const data = await response.json(); | |
| const msg = data["Email Checker"]; | |
| const isHam = msg.includes('HAM'); | |
| resultBox.className = `mt-8 p-6 rounded-3xl border animate-in fade-in slide-in-from-top-4 duration-500 ${isHam ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-rose-500/10 border-rose-500/20 text-rose-400'}`; | |
| resultIndicator.className = `w-3 h-3 rounded-full ${isHam ? 'bg-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.3)]' : 'bg-rose-500 shadow-[0_0_15px_rgba(244,63,94,0.3)]'}`; | |
| resultText.textContent = msg; | |
| resultBox.classList.remove('hidden'); | |
| } catch (e) { | |
| resultBox.className = "mt-8 p-6 rounded-3xl border bg-slate-800 border-slate-700 text-slate-300"; | |
| resultText.textContent = "Backend unreachable."; | |
| resultBox.classList.remove('hidden'); | |
| } finally { | |
| btn.disabled = false; | |
| btnLabel.textContent = "Execute Analysis"; | |
| btnLoader.classList.add('hidden'); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |