| <!DOCTYPE html> |
| <html lang="en" class="bg-gray-900 text-white"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Social Media Scraper - Terra</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| </head> |
| <body class="flex h-screen overflow-hidden"> |
|
|
| |
| <div class="w-64 bg-gray-800 p-4 flex flex-col space-y-4"> |
| <h2 class="text-2xl font-bold mb-4 text-blue-400">Terra OSINT</h2> |
| <button onclick="showSection('dashboard')" class="flex items-center space-x-2 text-gray-300 hover:text-white"> |
| <i data-feather="home"></i><span>Dashboard</span> |
| </button> |
| <button onclick="showSection('config')" class="flex items-center space-x-2 text-gray-300 hover:text-white"> |
| <i data-feather="settings"></i><span>Settings</span> |
| </button> |
| <button onclick="showSection('results')" class="flex items-center space-x-2 text-gray-300 hover:text-white"> |
| <i data-feather="database"></i><span>Results</span> |
| </button> |
| <button onclick="showSection('logs')" class="flex items-center space-x-2 text-gray-300 hover:text-white"> |
| <i data-feather="file-text"></i><span>Logs</span> |
| </button> |
| </div> |
|
|
| |
| <div id="dashboard" class="flex-1 p-6 overflow-auto"> |
| <div class="max-w-3xl mx-auto"> |
| <h1 class="text-3xl font-bold mb-6">Instagram & Twitter Scraper</h1> |
|
|
| |
| <div class="bg-gray-800 p-6 rounded-lg mb-6"> |
| <label class="block text-lg font-semibold mb-2">Enter Target Username</label> |
| <input id="targetUsername" type="text" placeholder="e.g. realDonaldTrump" class="w-full p-2 rounded bg-gray-700 text-white" /> |
| <div class="mt-4 flex space-x-4"> |
| <button onclick="startScraping()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">Scrape Instagram</button> |
| <button onclick="startScraping()" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded">Scrape Twitter</button> |
| <button onclick="startScraping()" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded">Scrape Both</button> |
| </div> |
| </div> |
|
|
| |
| <div id="status" class="bg-gray-800 p-4 rounded-lg text-center text-gray-400">Ready to scrape</div> |
| </div> |
| </div> |
|
|
| |
| <div id="config" class="hidden flex-1 p-6 overflow-auto"> |
| <div class="max-w-3xl mx-auto"> |
| <h1 class="text-3xl font-bold mb-6">Configuration</h1> |
| <div class="bg-gray-800 p-6 rounded-lg"> |
| <label class="block text-lg font-semibold mb-2">Instagram Credentials</label> |
| <input id="igUser" type="text" placeholder="Instagram Username" class="w-full mb-2 p-2 rounded bg-gray-700 text-white" /> |
| <input id="igPass" type="password" placeholder="Instagram Password" class="w-full mb-4 p-2 rounded bg-gray-700 text-white" /> |
|
|
| <label class="block text-lg font-semibold mb-2">Twitter API Keys</label> |
| <input id="twApiKey" type="text" placeholder="API Key" class="w-full mb-2 p-2 rounded bg-gray-700 text-white" /> |
| <input id="twApiKeySecret" type="text" placeholder="API Key Secret" class="w-full mb-2 p-2 rounded bg-gray-700 text-white" /> |
| <input id="twAccessToken" type="text" placeholder="Access Token" class="w-full mb-2 p-2 rounded bg-gray-700 text-white" /> |
| <input id="twAccessTokenSecret" type="text" placeholder="Access Token Secret" class="w-full mb-4 p-2 rounded bg-gray-700 text-white" /> |
|
|
| <div class="flex space-x-4"> |
| <button onclick="saveConfig()" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded">Save</button> |
| <button onclick="loadConfig()" class="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded">Load</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="results" class="hidden flex-1 p-6 overflow-auto"> |
| <div class="max-w-5xl mx-auto"> |
| <h1 class="text-3xl font-bold mb-6">Scraping Results</h1> |
| <div class="bg-gray-800 p-6 rounded-lg"> |
| <div class="flex space-x-4 mb-4"> |
| <button onclick="showResultsTab('instagram')" class="bg-pink-600 hover:bg-pink-700 px-4 py-2 rounded">Instagram</button> |
| <button onclick="showResultsTab('twitter')" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">Twitter</button> |
| </div> |
|
|
| <div id="instagramResults" class="hidden"> |
| <h2 class="text-xl font-semibold mb-4">Instagram Mentions & Tags</h2> |
| <div id="instagramOutput" class="bg-gray-900 p-4 rounded max-h-96 overflow-y-auto text-sm text-gray-300"></div> |
| </div> |
|
|
| <div id="twitterResults" class="hidden"> |
| <h2 class="text-xl font-semibold mb-4">Twitter Mentions & Hashtags</h2> |
| <div id="twitterOutput" class="bg-gray-900 p-4 rounded max-h-96 overflow-y-auto text-sm text-gray-300"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="logs" class="hidden flex-1 p-6 overflow-auto"> |
| <div class="max-w-5xl mx-auto"> |
| <h1 class="text-3xl font-bold mb-6">Scraping Logs</h1> |
| <div class="bg-gray-800 p-6 rounded"> |
| <div id="logOutput" class="bg-black text-green-400 p-4 rounded h-96 overflow-y-auto font-mono text-sm"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| function showSection(sectionId) { |
| document.querySelectorAll("#dashboard, #config, #results, #logs").forEach(el => el.classList.add("hidden")); |
| document.getElementById(sectionId).classList.remove("hidden"); |
| } |
| |
| function showResultsTab(tab) { |
| document.getElementById("instagramResults").classList.add("hidden"); |
| document.getElementById("twitterResults").classList.add("hidden"); |
| document.getElementById(tab + "Results").classList.remove("hidden"); |
| } |
| |
| function startScraping() { |
| const username = document.getElementById("targetUsername").value.trim(); |
| if (!username) { |
| alert("Please enter a username."); |
| return; |
| } |
| |
| const status = document.getElementById("status"); |
| status.innerText = `Scraping started for ${username}...`; |
| |
| log(`[${new Date().toLocaleTimeString()}] Starting scrape for ${username}`); |
| |
| |
| setTimeout(() => { |
| const result = { |
| instagram: { |
| mentions: [], |
| tags: [{ username: "user123", caption: "Check out this post!", url: "#" }], |
| comments: [] |
| }, |
| twitter: { |
| mentions: [], |
| tags: [{ username: "john_doe", text: "Just mentioned @${username}!", url: "#" }], |
| tweets: [] |
| }, |
| timestamp: new Date().toISOString() |
| }; |
| |
| log(`[${new Date().toLocaleTimeString()}] Scraping completed.`); |
| status.innerText = `Scraping completed for ${username}.`; |
| |
| |
| showResultsTab("instagram"); |
| document.getElementById("instagramOutput").innerText = JSON.stringify(result.instagram, null, 2); |
| document.getElementById("twitterOutput").innerText = JSON.stringify(result.twitter, null, 2); |
| showSection("results"); |
| |
| |
| localStorage.setItem("lastResults", JSON.stringify(result)); |
| localStorage.setItem("lastUsername", username); |
| }, 2000); |
| } |
| |
| function log(message) { |
| const logOutput = document.getElementById("logOutput"); |
| logOutput.innerHTML += message + "\n"; |
| logOutput.scrollTop = logOutput.scrollHeight; |
| } |
| |
| function saveConfig() { |
| const config = { |
| instagram: { |
| username: document.getElementById("igUser").value, |
| password: document.getElementById("igPass").value |
| }, |
| twitter: { |
| api_key: document.getElementById("twApiKey").value, |
| api_key_secret: document.getElementById("twApiKeySecret").value, |
| access_token: document.getElementById("twAccessToken").value, |
| access_token_secret: document.getElementById("twAccessTokenSecret").value |
| } |
| }; |
| localStorage.setItem("scraperConfig", JSON.stringify(config)); |
| alert("Configuration saved."); |
| } |
| |
| function loadConfig() { |
| const config = JSON.parse(localStorage.getItem("scraperConfig")); |
| if (config) { |
| document.getElementById("igUser").value = config.instagram.username || ""; |
| document.getElementById("igPass").value = config.instagram.password || ""; |
| document.getElementById("twApiKey").value = config.twitter.api_key || ""; |
| document.getElementById("twApiKeySecret").value = config.twitter.api_key_secret || ""; |
| document.getElementById("twAccessToken").value = config.twitter.access_token || ""; |
| document.getElementById("twAccessTokenSecret").value = config.twitter.access_token_secret || ""; |
| alert("Configuration loaded."); |
| } else { |
| alert("No saved configuration found."); |
| } |
| } |
| |
| feather.replace(); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=6ee5ali/twitter" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
