Spaces:
Sleeping
Sleeping
| <html lang="en" class="bg-slate-900 h-screen"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>{{ filename }} - Page {{ page }}</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| .detective-active { | |
| filter: contrast(175%) brightness(90%) grayscale(100%) invert(0%); | |
| } | |
| .iframe-container { | |
| transition: filter 0.3s ease; | |
| } | |
| </style> | |
| <button onclick="toggleDetective()" | |
| class="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1.5 rounded text-sm font-bold flex items-center gap-2 transition"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg> | |
| Detective Mode | |
| </button> | |
| </head> | |
| <body class="h-screen flex flex-col overflow-hidden"> | |
| <div class="h-14 bg-slate-800 border-b border-slate-700 flex items-center justify-between px-4 shrink-0 z-10"> | |
| <div class="flex items-center gap-4"> | |
| <a href="/" class="text-slate-400 hover:text-white transition">← Back to Search</a> | |
| <h1 class="font-bold text-white truncate max-w-md">{{ filename }}</h1> | |
| <span class="bg-red-600 text-white text-xs px-2 py-1 rounded">Page {{ page }}</span> | |
| </div> | |
| <div> | |
| <button onclick="snapEvidence()" | |
| class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded shadow-lg font-bold flex items-center gap-2 transition"> | |
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg> | |
| Snap Evidence | |
| </button> | |
| <div id="snapModal" class="fixed inset-0 bg-black/90 hidden items-center justify-center z-50 p-4" onclick="closeModal()"> | |
| <div class="max-w-4xl w-full bg-slate-900 rounded-lg overflow-hidden shadow-2xl border border-slate-700" onclick="event.stopPropagation()"> | |
| <div class="p-4 border-b border-slate-700 flex justify-between items-center"> | |
| <h3 class="text-white font-bold">Evidence Receipt Generated</h3> | |
| <button onclick="closeModal()" class="text-slate-400 hover:text-white">✕</button> | |
| </div> | |
| <div class="p-4 bg-black flex justify-center"> | |
| <img id="evidenceImg" src="" class="max-h-[70vh] object-contain border border-slate-800" /> | |
| </div> | |
| <div class="p-4 flex gap-3 justify-end bg-slate-800"> | |
| <a id="downloadLink" href="#" download="evidence.png" class="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded">Download</a> | |
| <a id="twitterLink" href="#" target="_blank" class="bg-[#1DA1F2] hover:bg-[#1a91da] text-white px-4 py-2 rounded font-bold">Post to X</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute right-0 top-14 bottom-0 w-64 bg-slate-900 border-l border-slate-700 p-4 overflow-y-auto" id="related-panel"> | |
| <h3 class="text-xs font-bold text-slate-500 uppercase mb-4">Related Evidence (AI)</h3> | |
| <div id="similar-results"> | |
| <div class="animate-pulse text-xs text-slate-600">Loading AI analysis...</div> | |
| </div> | |
| </div> | |
| <script> | |
| </script> | |
| <script> | |
| async function snapEvidence() { | |
| const btn = document.querySelector('button'); | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = "Generating..."; | |
| btn.disabled = true; | |
| try { | |
| // Fetch the image from our new Python endpoint | |
| const response = await fetch(`/api/snap/{{ filename }}/{{ page }}`); | |
| const blob = await response.blob(); | |
| const url = URL.createObjectURL(blob); | |
| // Setup Modal | |
| const img = document.getElementById('evidenceImg'); | |
| img.src = url; | |
| const dl = document.getElementById('downloadLink'); | |
| dl.href = url; | |
| dl.download = `Epstein_Evidence_{{ filename }}_Pg{{ page }}.png`; | |
| const tw = document.getElementById('twitterLink'); | |
| const text = encodeURIComponent(`Found in the Epstein Archive: "{{ filename }}" Page {{ page }}. \n\nIndexed via Archive Explorer.`); | |
| tw.href = `https://twitter.com/intent/tweet?text=${text}`; | |
| // Show Modal | |
| document.getElementById('snapModal').classList.remove('hidden'); | |
| document.getElementById('snapModal').classList.add('flex'); | |
| } catch (e) { | |
| alert("Error generating snap. Is Poppler installed?"); | |
| } finally { | |
| btn.innerHTML = originalText; | |
| btn.disabled = false; | |
| } | |
| } | |
| function closeModal() { | |
| document.getElementById('snapModal').classList.add('hidden'); | |
| document.getElementById('snapModal').classList.remove('flex'); | |
| } | |
| function toggleDetective() { | |
| const iframe = document.querySelector('iframe'); | |
| iframe.classList.toggle('detective-active'); | |
| } | |
| </script> | |
| </div> | |
| </div> | |
| <iframe src="{{ filepath }}#page={{ page }}" class="w-full h-full border-none bg-slate-500"></iframe> | |
| </body> | |
| </html> | |