|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Dark Web Scraper (Simulation)</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.terminal { |
|
|
background-color: #1a1a1a; |
|
|
color: #00ff00; |
|
|
font-family: 'Courier New', monospace; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 0 15px rgba(0, 255, 0, 0.2); |
|
|
} |
|
|
.typing { |
|
|
border-right: 2px solid #00ff00; |
|
|
animation: blink 1s step-end infinite; |
|
|
} |
|
|
@keyframes blink { |
|
|
from, to { border-color: transparent; } |
|
|
50% { border-color: #00ff00; } |
|
|
} |
|
|
.tor-connected { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); } |
|
|
} |
|
|
.scrollbar-hide::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
.modal { |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 min-h-screen"> |
|
|
|
|
|
<div id="torModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 modal hidden"> |
|
|
<div class="bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-green-500"> |
|
|
<i class="fas fa-shield-alt mr-2"></i>Tor Connection Required |
|
|
</h3> |
|
|
<button id="closeModal" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<p class="text-gray-300 mb-4">You need to connect to the Tor network before you can start scraping .onion sites.</p> |
|
|
|
|
|
<div class="bg-gray-700 p-4 rounded-lg mb-4"> |
|
|
<h4 class="font-semibold text-green-400 mb-2">How to connect to Tor:</h4> |
|
|
<ol class="list-decimal pl-5 space-y-2 text-sm"> |
|
|
<li>Download and install the <a href="https://www.torproject.org/download/" class="text-green-400 hover:underline" target="_blank">Tor Browser</a></li> |
|
|
<li>Launch the Tor Browser and wait for connection</li> |
|
|
<li>Alternatively, configure your system Tor proxy at 127.0.0.1:9050</li> |
|
|
<li>Click "Verify Tor Connection" below</li> |
|
|
</ol> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between"> |
|
|
<button id="verifyTor" class="bg-green-700 hover:bg-green-600 px-4 py-2 rounded-md"> |
|
|
<i class="fas fa-check-circle mr-2"></i>Verify Tor Connection |
|
|
</button> |
|
|
<button id="learnMoreTor" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-md"> |
|
|
<i class="fas fa-info-circle mr-2"></i>Learn More |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<header class="mb-8"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h1 class="text-3xl font-bold text-green-500"> |
|
|
<i class="fas fa-spider mr-2"></i> OnionScraper |
|
|
</h1> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div id="torStatus" class="flex items-center"> |
|
|
<span class="h-3 w-3 rounded-full bg-red-500 mr-2"></span> |
|
|
<span>Tor Disconnected</span> |
|
|
</div> |
|
|
<button id="connectTor" class="bg-green-700 hover:bg-green-600 px-4 py-2 rounded-md"> |
|
|
<i class="fas fa-plug mr-2"></i>Connect Tor |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-400 mt-2">Dark web scraping interface - requires Tor connection</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-1 bg-gray-800 p-6 rounded-lg shadow-lg"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-green-400"> |
|
|
<i class="fas fa-search mr-2"></i>Search Parameters |
|
|
</h2> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-300 mb-2">Onion URL</label> |
|
|
<div class="flex"> |
|
|
<span class="inline-flex items-center px-3 rounded-l-md bg-gray-700 text-gray-300">http://</span> |
|
|
<input type="text" id="onionUrl" class="flex-1 bg-gray-700 text-gray-200 px-4 py-2 rounded-r-md focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="example.onion"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-300 mb-2">Search Depth</label> |
|
|
<select id="searchDepth" class="w-full bg-gray-700 text-gray-200 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"> |
|
|
<option value="1">Surface Level (1 hop)</option> |
|
|
<option value="2">Medium (2 hops)</option> |
|
|
<option value="3">Deep (3 hops)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-300 mb-2">Content Type</label> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox bg-gray-700 text-green-500 rounded focus:ring-green-500" checked> |
|
|
<span class="ml-2 text-gray-300">Text</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox bg-gray-700 text-green-500 rounded focus:ring-green-500"> |
|
|
<span class="ml-2 text-gray-300">Images</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox bg-gray-700 text-green-500 rounded focus:ring-green-500" checked> |
|
|
<span class="ml-2 text-gray-300">Links</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox bg-gray-700 text-green-500 rounded focus:ring-green-500"> |
|
|
<span class="ml-2 text-gray-300">Documents</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-300 mb-2">Keywords (comma separated)</label> |
|
|
<textarea id="keywords" class="w-full bg-gray-700 text-gray-200 px-4 py-2 rounded-md h-24 focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="keyword1, keyword2, etc"></textarea> |
|
|
</div> |
|
|
|
|
|
<button id="startScrape" class="w-full bg-green-700 hover:bg-green-600 text-white py-3 rounded-md font-semibold flex items-center justify-center disabled:opacity-50" disabled> |
|
|
<i class="fas fa-play mr-2"></i>Start Scraping |
|
|
</button> |
|
|
|
|
|
<div class="mt-4 text-xs text-gray-400"> |
|
|
<p><i class="fas fa-exclamation-triangle mr-1"></i> Important notes:</p> |
|
|
<ul class="list-disc pl-5 mt-1"> |
|
|
<li>Requires active Tor connection</li> |
|
|
<li>Only scrape legally authorized sites</li> |
|
|
<li>Respect site terms of service</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2"> |
|
|
<div class="terminal p-6 rounded-lg h-full flex flex-col"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold text-green-400"> |
|
|
<i class="fas fa-terminal mr-2"></i>Scraping Console |
|
|
</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="clearConsole" class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded"> |
|
|
<i class="fas fa-trash-alt mr-1"></i>Clear |
|
|
</button> |
|
|
<button id="exportResults" class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded"> |
|
|
<i class="fas fa-download mr-1"></i>Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="consoleOutput" class="flex-1 overflow-y-auto scrollbar-hide mb-4 text-sm"> |
|
|
<div class="mb-2"> |
|
|
<span class="text-green-500">user@onionscraper:~$</span> Welcome to OnionScraper v1.0.3 |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="text-green-500">user@onionscraper:~$</span> Tor network connection required |
|
|
</div> |
|
|
<div id="typingIndicator" class="mb-2 typing"> |
|
|
<span class="text-green-500">user@onionscraper:~$</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<span class="absolute left-3 top-3 text-green-500">></span> |
|
|
<input id="consoleInput" type="text" class="w-full bg-transparent border border-green-500 text-green-200 px-8 py-2 rounded focus:outline-none" placeholder="Enter console command..." disabled> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6"> |
|
|
<div class="flex border-b border-gray-700"> |
|
|
<button class="tab-button px-4 py-2 font-medium text-gray-300 border-b-2 border-transparent hover:text-green-400 hover:border-green-500 active" data-tab="results"> |
|
|
<i class="fas fa-file-alt mr-2"></i>Results |
|
|
</button> |
|
|
<button class="tab-button px-4 py-2 font-medium text-gray-300 border-b-2 border-transparent hover:text-green-400 hover:border-green-500" data-tab="links"> |
|
|
<i class="fas fa-link mr-2"></i>Links |
|
|
</button> |
|
|
<button class="tab-button px-4 py-2 font-medium text-gray-300 border-b-2 border-transparent hover:text-green-400 hover:border-green-500" data-tab="stats"> |
|
|
<i class="fas fa-chart-bar mr-2"></i>Statistics |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="resultsTab" class="tab-content bg-gray-800 p-4 rounded-b-lg rounded-tr-lg"> |
|
|
<div class="text-center py-8 text-gray-500"> |
|
|
<i class="fas fa-database text-4xl mb-2"></i> |
|
|
<p>No scraping results yet. Connect to Tor and start a search.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="linksTab" class="tab-content bg-gray-800 p-4 rounded-b-lg rounded-tr-lg hidden"> |
|
|
<div class="text-center py-8 text-gray-500"> |
|
|
<i class="fas fa-project-diagram text-4xl mb-2"></i> |
|
|
<p>Discovered links will appear here after scraping.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="statsTab" class="tab-content bg-gray-800 p-4 rounded-b-lg rounded-tr-lg hidden"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
|
|
<div class="bg-gray-700 p-4 rounded-lg text-center"> |
|
|
<div class="text-green-400 text-3xl font-bold">0</div> |
|
|
<div class="text-gray-400 text-sm">Pages Scraped</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg text-center"> |
|
|
<div class="text-green-400 text-3xl font-bold">0</div> |
|
|
<div class="text-gray-400 text-sm">Links Found</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg text-center"> |
|
|
<div class="text-green-400 text-3xl font-bold">0</div> |
|
|
<div class="text-gray-400 text-sm">Keywords Matched</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg text-center"> |
|
|
<div class="text-green-400 text-3xl font-bold">0s</div> |
|
|
<div class="text-gray-400 text-sm">Time Elapsed</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
checkTorConnection(); |
|
|
}); |
|
|
|
|
|
|
|
|
async function checkTorConnection() { |
|
|
const torStatus = document.getElementById('torStatus'); |
|
|
const connectButton = document.getElementById('connectTor'); |
|
|
const startScrape = document.getElementById('startScrape'); |
|
|
|
|
|
|
|
|
torStatus.innerHTML = ` |
|
|
<span class="h-3 w-3 rounded-full bg-yellow-500 mr-2"></span> |
|
|
<span>Checking Tor...</span> |
|
|
`; |
|
|
|
|
|
try { |
|
|
|
|
|
const isConnected = await verifyTorProxy(); |
|
|
|
|
|
if (isConnected) { |
|
|
|
|
|
torStatus.innerHTML = ` |
|
|
<span class="h-3 w-3 rounded-full bg-green-500 mr-2 tor-connected"></span> |
|
|
<span>Tor Connected</span> |
|
|
`; |
|
|
|
|
|
connectButton.innerHTML = '<i class="fas fa-unlink mr-2"></i>Disconnect'; |
|
|
connectButton.classList.remove('bg-green-700', 'hover:bg-green-600'); |
|
|
connectButton.classList.add('bg-red-700', 'hover:bg-red-600'); |
|
|
startScrape.disabled = false; |
|
|
|
|
|
addConsoleMessage('Detected active Tor connection'); |
|
|
addConsoleMessage('Ready for .onion queries'); |
|
|
} else { |
|
|
|
|
|
torStatus.innerHTML = ` |
|
|
<span class="h-3 w-3 rounded-full bg-red-500 mr-2"></span> |
|
|
<span>Tor Disconnected</span> |
|
|
`; |
|
|
|
|
|
connectButton.innerHTML = '<i class="fas fa-plug mr-2"></i>Connect Tor'; |
|
|
connectButton.classList.remove('bg-red-700', 'hover:bg-red-600'); |
|
|
connectButton.classList.add('bg-green-700', 'hover:bg-green-600'); |
|
|
startScrape.disabled = true; |
|
|
|
|
|
addConsoleMessage('No active Tor connection detected'); |
|
|
showTorModal(); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Error checking Tor connection:', error); |
|
|
torStatus.innerHTML = ` |
|
|
<span class="h-3 w-3 rounded-full bg-red-500 mr-2"></span> |
|
|
<span>Tor Disconnected</span> |
|
|
`; |
|
|
|
|
|
addConsoleMessage('Error checking Tor connection'); |
|
|
showTorModal(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function verifyTorProxy() { |
|
|
|
|
|
const proxyPorts = [9050, 9150, 9051, 9151]; |
|
|
|
|
|
for (const port of proxyPorts) { |
|
|
try { |
|
|
const response = await fetch(`http://127.0.0.1:${port}`, { |
|
|
method: 'HEAD', |
|
|
mode: 'no-cors', |
|
|
cache: 'no-store' |
|
|
}); |
|
|
|
|
|
|
|
|
return true; |
|
|
} catch (error) { |
|
|
|
|
|
if (error.message.includes('Failed to fetch') || |
|
|
error.message.includes('NetworkError')) { |
|
|
|
|
|
return true; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
|
return false; |
|
|
} catch (error) { |
|
|
return false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function showTorModal() { |
|
|
const modal = document.getElementById('torModal'); |
|
|
modal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function hideTorModal() { |
|
|
const modal = document.getElementById('torModal'); |
|
|
modal.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('closeModal').addEventListener('click', hideTorModal); |
|
|
document.getElementById('learnMoreTor').addEventListener('click', function() { |
|
|
window.open('https://www.torproject.org/', '_blank'); |
|
|
}); |
|
|
|
|
|
document.getElementById('verifyTor').addEventListener('click', function() { |
|
|
addConsoleMessage('Verifying Tor connection...'); |
|
|
checkTorConnection(); |
|
|
hideTorModal(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('connectTor').addEventListener('click', function() { |
|
|
const torStatus = document.getElementById('torStatus'); |
|
|
const connectButton = this; |
|
|
const startScrape = document.getElementById('startScrape'); |
|
|
const consoleInput = document.getElementById('consoleInput'); |
|
|
|
|
|
|
|
|
connectButton.disabled = true; |
|
|
connectButton.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i>Connecting...'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
torStatus.innerHTML = ` |
|
|
<span class="h-3 w-3 rounded-full bg-green-500 mr-2 tor-connected"></span> |
|
|
<span>Tor Connected</span> |
|
|
`; |
|
|
|
|
|
|
|
|
connectButton.innerHTML = '<i class="fas fa-unlink mr-2"></i>Disconnect'; |
|
|
connectButton.classList.remove('bg-green-700', 'hover:bg-green-600'); |
|
|
connectButton.classList.add('bg-red-700', 'hover:bg-red-600'); |
|
|
connectButton.disabled = false; |
|
|
|
|
|
|
|
|
startScrape.disabled = false; |
|
|
consoleInput.disabled = false; |
|
|
|
|
|
|
|
|
addConsoleMessage('Initializing Tor connection...'); |
|
|
setTimeout(() => addConsoleMessage('Establishing secure circuit...'), 800); |
|
|
setTimeout(() => addConsoleMessage('Connected to Tor network (3 hops)'), 1500); |
|
|
setTimeout(() => addConsoleMessage('IP masked: 73.249.xx.xxx → 5ekxb6v4en3qyxxx.onion'), 2200); |
|
|
setTimeout(() => addConsoleMessage('Ready for .onion queries'), 3000); |
|
|
|
|
|
|
|
|
connectButton.onclick = function() { |
|
|
torStatus.innerHTML = ` |
|
|
<span class="h-3 w-3 rounded-full bg-red-500 mr-2"></span> |
|
|
<span>Tor Disconnected</span> |
|
|
`; |
|
|
|
|
|
connectButton.innerHTML = '<i class="fas fa-plug mr-2"></i>Connect Tor'; |
|
|
connectButton.classList.remove('bg-red-700', 'hover:bg-red-600'); |
|
|
connectButton.classList.add('bg-green-700', 'hover:bg-green-600'); |
|
|
startScrape.disabled = true; |
|
|
consoleInput.disabled = true; |
|
|
|
|
|
addConsoleMessage('Tor connection terminated'); |
|
|
connectButton.onclick = connectTor.onclick; |
|
|
}; |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('startScrape').addEventListener('click', function() { |
|
|
const onionUrl = document.getElementById('onionUrl').value || 'example.onion'; |
|
|
const keywords = document.getElementById('keywords').value || 'none'; |
|
|
const depth = document.getElementById('searchDepth').value; |
|
|
|
|
|
addConsoleMessage(`Starting scrape of http://${onionUrl}`); |
|
|
addConsoleMessage(`Parameters: depth=${depth}, keywords=${keywords}`); |
|
|
addConsoleMessage('Initializing headless browser through Tor...'); |
|
|
|
|
|
|
|
|
const progressMessages = [ |
|
|
'Connected to entry node (Germany)', |
|
|
'Connected to middle node (Finland)', |
|
|
'Connected to exit node (Canada)', |
|
|
`Loading http://${onionUrl}`, |
|
|
'Analyzing page structure', |
|
|
'Extracting text content', |
|
|
'Finding internal links', |
|
|
'Following links (depth 1)', |
|
|
'Analyzing secondary pages', |
|
|
'Compressing collected data', |
|
|
'Generating report' |
|
|
]; |
|
|
|
|
|
let delay = 1500; |
|
|
progressMessages.forEach((msg, i) => { |
|
|
setTimeout(() => { |
|
|
addConsoleMessage(msg); |
|
|
|
|
|
|
|
|
if (i === progressMessages.length - 1) { |
|
|
setTimeout(() => { |
|
|
addConsoleMessage(`Scrape completed. Found ${Math.floor(Math.random() * 50) + 10} pages with relevant data.`); |
|
|
updateResultsTab(); |
|
|
updateStatsTab(); |
|
|
}, 800); |
|
|
} |
|
|
}, delay); |
|
|
delay += 1000 + Math.random() * 1000; |
|
|
}); |
|
|
|
|
|
|
|
|
this.disabled = true; |
|
|
this.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i>Scraping...'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
this.disabled = false; |
|
|
this.innerHTML = '<i class="fas fa-play mr-2"></i>Start Scraping'; |
|
|
}, delay); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-button').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
|
|
|
document.querySelectorAll('.tab-button').forEach(btn => { |
|
|
btn.classList.remove('active', 'border-green-500', 'text-green-400'); |
|
|
}); |
|
|
this.classList.add('active', 'border-green-500', 'text-green-400'); |
|
|
|
|
|
|
|
|
const tabName = this.getAttribute('data-tab'); |
|
|
document.querySelectorAll('.tab-content').forEach(content => { |
|
|
content.classList.add('hidden'); |
|
|
}); |
|
|
document.getElementById(`${tabName}Tab`).classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('consoleInput').addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
const command = this.value; |
|
|
addConsoleMessage(`> ${command}`, 'user-input'); |
|
|
|
|
|
|
|
|
let response = 'Unrecognized command. Type "help" for available commands.'; |
|
|
|
|
|
if (command === 'help') { |
|
|
response = 'Available commands:\n- status: Show Tor connection status\n- clear: Clear console\n- scan [url]: Start scanning specific URL\n- exit: Disconnect from Tor'; |
|
|
} else if (command === 'status') { |
|
|
response = 'Tor connection active\nCircuit: Germany → Finland → Canada\nBandwidth: 1.2 MB/s\nUptime: 5 minutes'; |
|
|
} else if (command.startsWith('scan ')) { |
|
|
response = `Initiating scan of ${command.substring(5)}...\nThis is a simulation only.`; |
|
|
} else if (command === 'clear') { |
|
|
document.getElementById('consoleOutput').innerHTML = ''; |
|
|
this.value = ''; |
|
|
return; |
|
|
} else if (command === 'exit') { |
|
|
response = 'Disconnecting from Tor network...'; |
|
|
setTimeout(() => { |
|
|
document.getElementById('connectTor').click(); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
addConsoleMessage(response); |
|
|
this.value = ''; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('clearConsole').addEventListener('click', function() { |
|
|
document.getElementById('consoleOutput').innerHTML = ` |
|
|
<div class="mb-2"> |
|
|
<span class="text-green-500">user@onionscraper:~$</span> Console cleared |
|
|
</div> |
|
|
<div id="typingIndicator" class="mb-2 typing"> |
|
|
<span class="text-green-500">user@onionscraper:~$</span> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('exportResults').addEventListener('click', function() { |
|
|
addConsoleMessage('Preparing export package...'); |
|
|
setTimeout(() => { |
|
|
addConsoleMessage('Export complete: results_export.zip'); |
|
|
|
|
|
|
|
|
const notification = document.createElement('div'); |
|
|
notification.className = 'fixed bottom-4 right-4 bg-green-700 text-white px-4 py-2 rounded-md shadow-lg flex items-center'; |
|
|
notification.innerHTML = ` |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
Results exported successfully (simulation) |
|
|
`; |
|
|
document.body.appendChild(notification); |
|
|
|
|
|
setTimeout(() => { |
|
|
notification.remove(); |
|
|
}, 3000); |
|
|
}, 1500); |
|
|
}); |
|
|
|
|
|
|
|
|
function addConsoleMessage(message, type = '') { |
|
|
const consoleOutput = document.getElementById('consoleOutput'); |
|
|
const typingIndicator = document.getElementById('typingIndicator'); |
|
|
|
|
|
|
|
|
const messageElement = document.createElement('div'); |
|
|
messageElement.className = `mb-2 ${type}`; |
|
|
|
|
|
if (type === 'user-input') { |
|
|
messageElement.innerHTML = `<span class="text-green-500">></span> ${message}`; |
|
|
} else { |
|
|
messageElement.innerHTML = `<span class="text-green-500">user@onionscraper:~$</span> ${message}`; |
|
|
} |
|
|
|
|
|
|
|
|
consoleOutput.insertBefore(messageElement, typingIndicator); |
|
|
|
|
|
|
|
|
consoleOutput.scrollTop = consoleOutput.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
function updateResultsTab() { |
|
|
const resultsTab = document.getElementById('resultsTab'); |
|
|
resultsTab.innerHTML = ` |
|
|
<div class="space-y-4"> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-medium text-green-400">http://example.onion/main</h3> |
|
|
<span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded">3 matches</span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm">Sample content extracted from the dark web page. This would contain the actual scraped data in a real implementation. The content might include forum posts, product listings, or other information depending on the site being scraped.</p> |
|
|
<div class="mt-2 text-xs text-gray-400"> |
|
|
<span class="mr-3"><i class="fas fa-link mr-1"></i>12 links found</span> |
|
|
<span><i class="fas fa-calendar mr-1"></i>Last updated: 2023-05-15</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-medium text-green-400">http://example.onion/products</h3> |
|
|
<span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded">7 matches</span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm">Another sample of scraped content. This might represent product listings from a dark web marketplace. In a real implementation, this would show actual product names, prices, and descriptions.</p> |
|
|
<div class="mt-2 text-xs text-gray-400"> |
|
|
<span class="mr-3"><i class="fas fa-link mr-1"></i>5 links found</span> |
|
|
<span><i class="fas fa-calendar mr-1"></i>Last updated: 2023-06-22</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-medium text-green-400">http://example.onion/forum</h3> |
|
|
<span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded">2 matches</span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm">Forum discussion content would appear here. This might include usernames, timestamps, and discussion threads. Remember that scraping such content may have legal and ethical implications.</p> |
|
|
<div class="mt-2 text-xs text-gray-400"> |
|
|
<span class="mr-3"><i class="fas fa-link mr-1"></i>18 links found</span> |
|
|
<span><i class="fas fa-calendar mr-1"></i>Last updated: 2023-07-10</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
updateLinksTab(); |
|
|
} |
|
|
|
|
|
function updateLinksTab() { |
|
|
const linksTab = document.getElementById('linksTab'); |
|
|
linksTab.innerHTML = ` |
|
|
<div class="space-y-3"> |
|
|
<div class="flex justify-between items-center bg-gray-700 p-3 rounded"> |
|
|
<span class="text-green-400">http://example.onion/main</span> |
|
|
<span class="text-xs bg-gray-600 px-2 py-1 rounded">12 links</span> |
|
|
</div> |
|
|
<div class="ml-4 pl-4 border-l-2 border-gray-600 space-y-2"> |
|
|
<div class="flex justify-between items-center bg-gray-700 p-2 rounded text-sm"> |
|
|
<span>http://example.onion/products</span> |
|
|
<span class="text-xs bg-gray-600 px-2 py-1 rounded">visited</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center bg-gray-700 p-2 rounded text-sm"> |
|
|
<span>http://example.onion/forum</span> |
|
|
<span class="text-xs bg-gray-600 px-2 py-1 rounded">visited</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center bg-gray-700 p-2 rounded text-sm"> |
|
|
<span>http://example.onion/about</span> |
|
|
<span class="text-xs bg-gray-600 px-2 py-1 rounded">pending</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center bg-gray-700 p-3 rounded"> |
|
|
<span class="text-green-400">http://example.onion/products</span> |
|
|
<span class="text-xs bg-gray-600 px-2 py-1 rounded">5 links</span> |
|
|
</div> |
|
|
<div class="ml-4 pl-4 border-l-2 border-gray-600 space-y-2"> |
|
|
<div class="flex justify-between items-center bg-gray-700 p-2 rounded text-sm"> |
|
|
<span>http://example.onion/products/item1</span> |
|
|
<span class="text-xs bg-gray-600 px-2 py-1 rounded">visited</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center bg-gray-700 p-2 rounded text-sm"> |
|
|
<span>http://example.onion/products/item2</span> |
|
|
<span class="text-xs bg-gray-600 px-2 py-1 rounded">visited</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
function updateStatsTab() { |
|
|
const statsTab = document.getElementById('statsTab'); |
|
|
statsTab.innerHTML = ` |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
|
|
<div class="bg-gray-700 p-4 rounded-lg text-center"> |
|
|
<div class="text-green-400 text-3xl font-bold">3</div> |
|
|
<div class="text-gray-400 text-sm">Pages Scraped</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg text-center"> |
|
|
<div class="text-green-400 text-3xl font-bold">35</div> |
|
|
<div class="text-gray-400 text-sm">Links Found</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg text-center"> |
|
|
<div class="text-green-400 text-3xl font-bold">12</div> |
|
|
<div class="text-gray-400 text-sm">Keywords Matched</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg text-center"> |
|
|
<div class="text-green-400 text-3xl font-bold">${Math.floor(Math.random() * 30) + 15}s</div> |
|
|
<div class="text-gray-400 text-sm">Time Elapsed</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 bg-gray-700 p-4 rounded-lg"> |
|
|
<h3 class="font-medium mb-2 text-green-400">Data Distribution</h3> |
|
|
<div class="h-40 flex items-end space-x-1"> |
|
|
<div class="flex-1 bg-green-500" style="height: 30%"></div> |
|
|
<div class="flex-1 bg-green-500" style="height: 70%"></div> |
|
|
<div class="flex-1 bg-green-500" style="height: 45%"></div> |
|
|
<div class="flex-1 bg-green-500" style="height: 80%"></div> |
|
|
<div class="flex-1 bg-green-500" style="height: 25%"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-400 mt-2"> |
|
|
<span>Main</span> |
|
|
<span>Products</span> |
|
|
<span>Forum</span> |
|
|
<span>About</span> |
|
|
<span>Contact</span> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
|
|
|
const messages = [ |
|
|
'Initializing OnionScraper interface...', |
|
|
'Checking system requirements...', |
|
|
'Waiting for Tor connection...' |
|
|
]; |
|
|
|
|
|
let msgIndex = 0; |
|
|
const typingElement = document.getElementById('typingIndicator'); |
|
|
|
|
|
function typeMessage(message, callback) { |
|
|
let i = 0; |
|
|
typingElement.innerHTML = `<span class="text-green-500">user@onionscraper:~$</span> `; |
|
|
|
|
|
const typingInterval = setInterval(() => { |
|
|
if (i < message.length) { |
|
|
typingElement.innerHTML += message.charAt(i); |
|
|
i++; |
|
|
} else { |
|
|
clearInterval(typingInterval); |
|
|
setTimeout(callback, 1000); |
|
|
} |
|
|
}, 50); |
|
|
} |
|
|
|
|
|
function showNextMessage() { |
|
|
if (msgIndex < messages.length) { |
|
|
typeMessage(messages[msgIndex], () => { |
|
|
const newElement = document.createElement('div'); |
|
|
newElement.className = 'mb-2'; |
|
|
newElement.innerHTML = typingElement.innerHTML; |
|
|
typingElement.parentNode.insertBefore(newElement, typingElement); |
|
|
|
|
|
msgIndex++; |
|
|
showNextMessage(); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(showNextMessage, 1000); |
|
|
</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-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=flitrx/dws" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
