app/static/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FACEID</title>
    <!-- Google Fonts: Playfair Display / Cinzel for Retro Serif titles + JetBrains Mono / Space Mono for Terminal -->
    <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=Cinzel:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body class="bg-[#F8F5EC] text-slate-950 font-sans antialiased min-h-screen p-3 sm:p-6 selection:bg-emerald-950 selection:text-emerald-300">

    <!-- Outer Retro Terminal Shell -->
    <div class="max-w-7xl mx-auto space-y-4">
        
        <!-- Header Bar -->
        <header class="border-2 border-black bg-[#F2EDE0] p-3 sm:p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
            <div class="flex items-center space-x-3">
                <div class="w-9 h-9 bg-black text-amber-400 flex items-center justify-center font-mono font-black text-xl rounded-sm shadow-[2px_2px_0px_0px_rgba(0,0,0,0.3)]">
                    🛡️
                </div>
                <div>
                    <h1 class="font-serif text-xl sm:text-2xl font-extrabold tracking-wider text-black uppercase">FACEID</h1>
                    <p class="font-mono text-[11px] text-slate-700 tracking-tight font-medium">PRIVACY-PRESERVING IMAGE VERIFICATION & BLOCKCHAIN PROOF</p>
                </div>
            </div>
            
            <!-- Tech Stack Telemetry Badges -->
            <div class="flex flex-wrap items-center gap-2 font-mono text-[11px]">
                <span class="bg-white border border-black px-2.5 py-1 font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] flex items-center space-x-1.5">
                    <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                    <span>ArcFace 512-d</span>
                </span>
                <span class="bg-white border border-black px-2.5 py-1 font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
                    Google Lens via SerpApi
                </span>
                <span class="bg-white border border-black px-2.5 py-1 font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
                    Ethereum Sepolia
                </span>
            </div>
        </header>

        <!-- Subheader Controls & SLA Bar -->
        <div class="border-2 border-black bg-[#F2EDE0] p-2.5 sm:p-3 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] flex flex-col md:flex-row items-start md:items-center justify-between gap-3 font-mono text-xs">
            <div class="flex items-center space-x-2 flex-wrap">
                <span class="font-extrabold text-black uppercase">VERIFICATION MODE:</span>
                <span class="px-3 py-1 font-bold bg-black text-white shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">IMAGE FORENSICS</span>
            </div>
            <div class="flex items-center space-x-4 flex-wrap">
                <label class="flex items-center space-x-2 cursor-pointer font-bold select-none bg-white border border-black px-2.5 py-1 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
                    <input type="checkbox" id="chk-privacy" checked disabled class="accent-black">
                    <span>Zero-Biometric Exposure (RAM Only)</span>
                </label>
                <span class="border border-black bg-amber-200 px-2.5 py-1 font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
                    Target SLA: &lt; 300 ms
                </span>
            </div>
        </div>

        <!-- Main 2-Column Desktop Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            
            <!-- Left Card: THE BIOMETRIC TERMINAL -->
            <div class="lg:col-span-5 border-2 border-black bg-white p-5 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] space-y-5">
                
                <div class="flex items-center justify-between border-b-2 border-black pb-3">
                    <h2 class="font-serif text-lg font-black uppercase text-black tracking-wide">THE BIOMETRIC TERMINAL</h2>
                    <span class="font-mono text-[10px] font-bold bg-black text-white px-2 py-0.5 uppercase tracking-wider">IMAGE SCANNER</span>
                </div>

                <!-- Central Geometric Scan Target Box -->
                <div class="border-2 border-black bg-[#FAF8F3] p-4 text-center relative overflow-hidden shadow-[3px_3px_0px_0px_rgba(0,0,0,1)]">
                    
                    <!-- File Input Hidden -->
                    <input type="file" id="file-input" accept="image/*" class="hidden">

                    <!-- Canvas Preview for Image + Landmark Overlay -->
                    <div id="preview-container" class="hidden relative w-full h-64 bg-slate-950 border-2 border-black flex items-center justify-center overflow-hidden mb-3">
                        <canvas id="canvas-overlay" class="max-w-full max-h-full object-contain"></canvas>
                    </div>

                    <!-- Default Scanner Graphic (when awaiting image) -->
                    <div id="target-graphic" class="py-6 space-y-4 cursor-pointer">
                        <div class="relative w-28 h-28 mx-auto flex items-center justify-center border-2 border-dashed border-black bg-white rounded shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:bg-slate-100 transition-all">
                            <svg class="w-12 h-12 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" />
                            </svg>
                        </div>
                        <div class="bg-black text-emerald-400 font-mono text-xs font-extrabold py-1.5 px-3 inline-block uppercase tracking-wider border border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
                            &gt;&gt;&gt; READY FOR FACIAL SCAN
                        </div>
                        <p class="text-xs font-mono font-bold text-slate-700">Click to upload image or drop file here</p>
                    </div>

                </div>

                <!-- Input Action Form & Anchor Checkbox -->
                <div class="space-y-3 font-mono text-xs">
                    
                    <div class="flex items-center justify-between border-2 border-black p-2 bg-[#F2EDE0] shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
                        <span class="font-extrabold text-black">ANCHOR ON SEPOLIA CHAIN:</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="chk-blockchain" class="sr-only peer">
                            <div class="w-9 h-5 bg-slate-400 peer-focus:outline-none border-2 border-black rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-black after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-2 after:border-black after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-emerald-500"></div>
                        </label>
                    </div>

                    <button id="btn-verify" class="w-full py-3.5 bg-black hover:bg-slate-900 text-amber-300 font-mono font-extrabold text-sm uppercase tracking-wider border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:translate-x-0.5 active:translate-y-0.5 transition-all flex items-center justify-center space-x-2">
                        <span id="verify-spinner" class="hidden animate-spin">⚡</span>
                        <span id="verify-text">RUN PROVENANCE VERIFICATION →</span>
                    </button>
                </div>

                <!-- Quick Profiles Prompt Bar -->
                <div class="pt-3 border-t-2 border-black font-mono text-[11px] space-y-2">
                    <span class="font-extrabold text-slate-800 uppercase block">💡 QUICK SAMPLE PROFILES:</span>
                    <div class="flex flex-wrap gap-2">
                        <button id="btn-sample-1" class="border border-black bg-[#FAF8F3] hover:bg-black hover:text-white px-2.5 py-1 font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] transition-all">
                            [SAMPLE SCAN PROFILE]
                        </button>
                    </div>
                </div>

            </div>

            <!-- Right Card: THE SEA LINKS -->
            <div class="lg:col-span-7 border-2 border-black bg-white p-5 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] space-y-5 flex flex-col justify-between">
                
                <div class="flex items-center justify-between border-b-2 border-black pb-3">
                    <h2 class="font-serif text-lg font-black uppercase text-black tracking-wide">THE SEA LINKS</h2>
                    <span id="sea-status-badge" class="font-mono text-[10px] font-bold bg-black text-amber-300 px-2 py-0.5 uppercase tracking-wider">AWAITING SCAN</span>
                </div>

                <!-- Dark Emerald Cyber Grid Canvas Area -->
                <div id="grid-viewport" class="border-2 border-black bg-[#061A14] min-h-[380px] p-5 text-emerald-400 font-mono relative overflow-hidden shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] flex flex-col justify-between">
                    
                    <!-- Grid Background Pattern Layer -->
                    <div class="absolute inset-0 bg-[linear-gradient(to_right,#09382b_1px,transparent_1px),linear-gradient(to_bottom,#09382b_1px,transparent_1px)] bg-[size:24px_24px] opacity-40"></div>

                    <!-- Idle Screen State -->
                    <div id="idle-screen" class="relative z-10 my-auto text-center space-y-3 py-12">
                        <div class="w-12 h-12 mx-auto rounded-full bg-emerald-950 border-2 border-emerald-500/40 flex items-center justify-center text-emerald-400 text-xl shadow-[0_0_15px_rgba(16,185,129,0.3)]">
                            👁️
                        </div>
                        <h3 class="text-sm font-extrabold uppercase tracking-widest text-emerald-300">AWAITING BIOMETRIC SCAN INPUT</h3>
                        <p class="text-xs text-emerald-600/90 max-w-md mx-auto leading-relaxed">
                            Upload a facial image into <span class="text-emerald-300 font-bold">The Biometric Terminal</span> to execute local ArcFace detection, pHash perceptual comparison, and Sepolia blockchain proof verification.
                        </p>
                    </div>

                    <!-- Active Telemetry Screen (hidden by default) -->
                    <div id="telemetry-screen" class="hidden relative z-10 space-y-4 text-xs">
                        
                        <!-- Status Banner Header -->
                        <div class="border border-emerald-500/40 bg-[#0A261D] p-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
                            <div>
                                <span class="text-[10px] text-emerald-600 block uppercase">VERIFICATION RESULT:</span>
                                <span id="tele-status" class="text-sm font-extrabold text-emerald-300 tracking-wider">VERIFIED MATCH</span>
                            </div>
                            <div class="text-right">
                                <span class="text-[10px] text-emerald-600 block uppercase">BEST SIMILARITY SCORE:</span>
                                <span id="tele-score" class="text-base font-black text-amber-300">0.00%</span>
                            </div>
                        </div>

                        <!-- 4 Step Telemetry Modules Grid -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            
                            <!-- Module 1: Face Detection -->
                            <div class="border border-emerald-500/30 bg-[#082018] p-3 space-y-1">
                                <div class="text-[10px] font-bold text-emerald-500 uppercase">1. LOCAL ARCFACE DETECTION</div>
                                <div id="tele-face-detected" class="text-emerald-300 font-bold">Detected: False</div>
                                <div id="tele-face-count" class="text-emerald-600">Faces: 0</div>
                            </div>

                            <!-- Module 2: Hashes -->
                            <div class="border border-emerald-500/30 bg-[#082018] p-3 space-y-1">
                                <div class="text-[10px] font-bold text-emerald-500 uppercase">2. CRYPTOGRAPHIC FINGERPRINT</div>
                                <div class="truncate"><span class="text-emerald-600">SHA-256:</span> <span id="tele-sha" class="text-emerald-300 select-all">N/A</span></div>
                                <div><span class="text-emerald-600">pHash:</span> <span id="tele-phash" class="text-amber-300 select-all">N/A</span></div>
                            </div>

                            <!-- Module 3: Reverse Search -->
                            <div class="border border-emerald-500/30 bg-[#082018] p-3 space-y-1">
                                <div class="text-[10px] font-bold text-emerald-500 uppercase">3. GOOGLE LENS REVERSE SCAN</div>
                                <div id="tele-search-count" class="text-emerald-300 font-bold">Candidates Found: 0</div>
                                <div id="tele-search-engine" class="text-emerald-600">Engine: SerpApi Google Lens</div>
                            </div>

                            <!-- Module 4: Sepolia Blockchain -->
                            <div class="border border-emerald-500/30 bg-[#082018] p-3 space-y-1">
                                <div class="text-[10px] font-bold text-emerald-500 uppercase">4. SEPOLIA BLOCKCHAIN ANCHOR</div>
                                <div id="tele-bc-status" class="text-amber-300 font-bold">Status: NOT SUBMITTED</div>
                                <div id="tele-bc-link" class="truncate text-emerald-400">Tx: N/A</div>
                            </div>

                        </div>

                        <!-- Candidates Gallery Grid -->
                        <div class="border border-emerald-500/30 bg-[#082018] p-3 space-y-2">
                            <div class="text-[10px] font-bold text-emerald-500 uppercase">REVERSE SEARCH CANDIDATE MATRIX</div>
                            <div id="tele-candidates" class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                <span class="text-emerald-700 italic text-[11px]">No external matches found.</span>
                            </div>
                        </div>

                    </div>

                    <!-- Terminal Log Footer Bar -->
                    <div class="relative z-10 pt-3 border-t border-emerald-500/30 flex items-center justify-between text-[10px] text-emerald-600 font-mono">
                        <span id="log-line">> SYSTEM READY. AWAITING SCAN COMMAND.</span>
                        <span id="log-time">00:00:00</span>
                    </div>

                </div>

                <!-- Collapsible JSON Audit Report Box -->
                <div class="border-2 border-black bg-[#FAF8F3] p-3 shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] space-y-2">
                    <div class="flex items-center justify-between font-mono text-xs">
                        <span class="font-extrabold text-black uppercase">JSON PROVENANCE AUDIT REPORT</span>
                        <button id="btn-copy-json" class="bg-black text-amber-300 hover:bg-slate-800 px-2 py-0.5 text-[10px] font-bold border border-black shadow-[1px_1px_0px_0px_rgba(0,0,0,1)]">
                            COPY REPORT JSON
                        </button>
                    </div>
                    <pre id="json-viewer" class="bg-black p-3 text-[10px] font-mono text-emerald-400 border border-black max-h-36 overflow-y-auto select-all">{ "status": "AWAITING_INPUT" }</pre>
                </div>

            </div>

        </div>

    </div>

    <script src="/static/app.js"></script>
</body>
</html>