Spaces:
Sleeping
Sleeping
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Epstein Archive Explorer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/htmx.org@1.9.10"></script> | |
| <style> | |
| .highlight { background-color: #fde047; color: black; padding: 2px 4px; border-radius: 2px; } | |
| b { background-color: #fde047; color: black; font-weight: normal; } | |
| /* Custom Radio Button Styling */ | |
| .mode-radio:checked + div { | |
| background-color: #2563eb; | |
| color: white; | |
| border-color: #2563eb; | |
| } | |
| .mode-radio:checked + div.visual-mode { | |
| background-color: #9333ea; /* Purple for Visual */ | |
| border-color: #9333ea; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-900 text-slate-100 min-h-screen font-sans"> | |
| <div class="max-w-4xl mx-auto pt-16 px-4"> | |
| <h1 class="text-5xl font-bold text-center mb-2 bg-gradient-to-r from-red-500 to-orange-500 bg-clip-text text-transparent"> | |
| ARCHIVE EXPLORER | |
| </h1> | |
| <p class="text-center text-slate-400 mb-8"> | |
| Indexed <span class="text-white font-mono">4,085</span> Documents • Visual AI Active | |
| </p> | |
| <div class="flex justify-center gap-4 mb-6"> | |
| <label class="cursor-pointer"> | |
| <input type="radio" name="searchmode" value="text" class="mode-radio sr-only" checked | |
| onchange="htmx.trigger('#search-input', 'search')"> | |
| <div class="px-6 py-2 bg-slate-800 border border-slate-700 rounded-full transition text-slate-400 font-medium hover:border-blue-500"> | |
| 📄 Text Search | |
| </div> | |
| </label> | |
| <label class="cursor-pointer"> | |
| <input type="radio" name="searchmode" value="visual" class="mode-radio sr-only" | |
| onchange="htmx.trigger('#search-input', 'search')"> | |
| <div class="visual-mode px-6 py-2 bg-slate-800 border border-slate-700 rounded-full transition text-slate-400 font-medium hover:border-purple-500"> | |
| 👁️ Visual AI | |
| </div> | |
| </label> | |
| </div> | |
| <div class="relative group z-10"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-red-600 to-orange-600 rounded-lg blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div> | |
| <input | |
| id="search-input" | |
| type="text" | |
| name="q" | |
| class="relative w-full bg-slate-800 text-white text-xl p-4 rounded-lg border border-slate-700 focus:outline-none focus:border-red-500 placeholder-slate-500 shadow-xl" | |
| placeholder="Search evidence..." | |
| hx-get="/search" | |
| hx-include="[name='searchmode']" | |
| hx-trigger="keyup changed delay:300ms, search" | |
| hx-target="#results-area" | |
| autocomplete="off" | |
| > | |
| </div> | |
| {% if trends %} | |
| <div class="flex flex-wrap justify-center gap-2 mt-6 text-sm"> | |
| <span class="text-xs text-slate-500 uppercase font-bold tracking-widest mr-2 pt-1">Trending:</span> | |
| {% for trend in trends %} | |
| <span class="px-3 py-1 bg-slate-800 rounded-full border border-slate-700 text-xs text-red-400 cursor-pointer hover:bg-slate-700 hover:text-white transition" | |
| onclick="document.getElementById('search-input').value='{{ trend.term }}'; htmx.trigger('#search-input', 'search')"> | |
| 🔥 {{ trend.term }} | |
| </span> | |
| {% endfor %} | |
| </div> | |
| {% endif %} | |
| </div> | |
| <div id="results-area" class="max-w-4xl mx-auto mt-10 px-4 pb-20 space-y-4"> | |
| <div class="text-center text-slate-600 italic mt-20"> | |
| Select a mode and start typing to uncover evidence... | |
| </div> | |
| </div> | |
| </body> | |
| </html> |