Created
April 11, 2026 06:21
-
-
Save iggyughgi-glitch/d765440205436c46f9a5102dc5878b7b to your computer and use it in GitHub Desktop.
Scrape
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Ghost Agency | Lead Intel Hub</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| body { background-color: #0a0a0c; color: #e2e2e2; font-family: 'Inter', sans-serif; } | |
| .glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } | |
| .glow-text { text-shadow: 0 0 10px rgba(168, 85, 247, 0.5); } | |
| .express-row { border-left: 4px solid #a855f7; background: linear-gradient(90deg, rgba(168,85,247,0.1) 0%, transparent 100%); } | |
| </style> | |
| </head> | |
| <body class="p-4 md:p-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <header class="flex justify-between items-center mb-8 glass p-6 rounded-2xl"> | |
| <div> | |
| <h1 class="text-3xl font-bold glow-text text-purple-400">GHOST AGENCY</h1> | |
| <p class="text-gray-400 text-sm">Deep Intel & Lead Injection Engine</p> | |
| </div> | |
| <div class="flex gap-4"> | |
| <input id="geminiKey" type="password" placeholder="Gemini API Key" class="bg-black border border-gray-700 p-2 rounded-lg text-xs"> | |
| <input id="firecrawlKey" type="password" placeholder="Firecrawl Key" class="bg-black border border-gray-700 p-2 rounded-lg text-xs"> | |
| </div> | |
| </header> | |
| <div class="glass p-6 rounded-2xl mb-8 flex gap-4"> | |
| <input id="searchQuery" type="text" placeholder="e.g. AI Startups in Austin" class="flex-grow bg-transparent border-b border-gray-700 focus:border-purple-500 outline-none p-2"> | |
| <button onclick="startResearch()" class="bg-purple-600 hover:bg-purple-700 px-6 py-2 rounded-xl font-bold transition">START RESEARCH</button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <div class="glass p-6 rounded-2xl h-[500px] flex flex-col"> | |
| <h3 class="font-bold mb-4 flex items-center gap-2"><span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span> LIVE OPERATIONS</h3> | |
| <div id="log" class="text-xs font-mono overflow-y-auto flex-grow space-y-2 text-gray-400"> | |
| > System standby... | |
| </div> | |
| </div> | |
| <div class="lg:col-span-2 glass p-6 rounded-2xl h-[500px] overflow-hidden flex flex-col"> | |
| <h3 class="font-bold mb-4 text-purple-400">IDENTIFIED TARGETS</h3> | |
| <div class="overflow-y-auto flex-grow"> | |
| <table class="w-full text-left"> | |
| <thead> | |
| <tr class="text-gray-500 text-xs uppercase border-b border-gray-800"> | |
| <th class="pb-2">Target</th> | |
| <th class="pb-2">Deep Intel (Scraped)</th> | |
| <th class="pb-2 text-right">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody id="leadTable" class="text-sm"> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const logEl = document.getElementById('log'); | |
| const tableEl = document.getElementById('leadTable'); | |
| function log(msg) { | |
| const div = document.createElement('div'); | |
| div.textContent = `> ${msg}`; | |
| logEl.prepend(div); | |
| } | |
| async function startResearch() { | |
| const query = document.getElementById('searchQuery').value; | |
| const geminiKey = document.getElementById('geminiKey').value; | |
| if(!geminiKey || !query) return alert("Please enter a Key and a Search Query"); | |
| log(`Initiating Deep Search for: ${query}`); | |
| // 1. CALL GEMINI FOR SEARCH GROUNDING | |
| try { | |
| const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${geminiKey}`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| contents: [{ parts: [{ text: `Search the web for 5 companies related to ${query}. Return only a JSON array of objects with keys "name" and "url". No other text.` }] }] | |
| }) | |
| }); | |
| const data = await response.json(); | |
| const text = data.candidates[0].content.parts[0].text; | |
| const leads = JSON.parse(text.match(/\[.*\]/s)[0]); | |
| log(`Found ${leads.length} high-potential targets.`); | |
| leads.forEach((lead, index) => { | |
| injectLeadRow(lead, index % 2 === 0); | |
| }); | |
| } catch (e) { | |
| log(`ERROR: ${e.message}`); | |
| } | |
| } | |
| function injectLeadRow(lead, isExpress) { | |
| const row = document.createElement('tr'); | |
| row.className = `border-b border-gray-900 ${isExpress ? 'express-row' : ''}`; | |
| row.innerHTML = ` | |
| <td class="py-4"> | |
| <div class="font-bold">${lead.name}</div> | |
| <div class="text-xs text-gray-500">${lead.url}</div> | |
| </td> | |
| <td class="py-4 text-xs text-gray-400 italic">Analyzing website for personalization...</td> | |
| <td class="py-4 text-right"> | |
| <button class="bg-gray-800 text-[10px] px-3 py-1 rounded-full hover:bg-purple-600 transition">DRAFT EMAIL</button> | |
| </td> | |
| `; | |
| tableEl.appendChild(row); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment