File size: 9,751 Bytes
18083dc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 | <!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">
<!-- Sidebar -->
<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>
<!-- Main Content -->
<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>
<!-- Target Input -->
<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>
<!-- Status -->
<div id="status" class="bg-gray-800 p-4 rounded-lg text-center text-gray-400">Ready to scrape</div>
</div>
</div>
<!-- Config Section -->
<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>
<!-- Results Section -->
<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>
<!-- Logs Section -->
<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}`);
// Simulate scraping
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}.`;
// Show results
showResultsTab("instagram");
document.getElementById("instagramOutput").innerText = JSON.stringify(result.instagram, null, 2);
document.getElementById("twitterOutput").innerText = JSON.stringify(result.twitter, null, 2);
showSection("results");
// Save to localStorage
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> |