|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Packet Peeper Pro</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
|
|
<style> |
|
|
.terminal { |
|
|
font-family: 'Courier New', monospace; |
|
|
background-color: #1a1a1a; |
|
|
color: #00ff00; |
|
|
border-radius: 8px; |
|
|
height: 300px; |
|
|
overflow-y: auto; |
|
|
padding: 1rem; |
|
|
} |
|
|
.packet-row:hover { |
|
|
background-color: rgba(0, 255, 0, 0.1); |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { opacity: 0.6; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.6; } |
|
|
} |
|
|
.scanning { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white"> |
|
|
<div id="vanta-bg" class="fixed inset-0 z-0"></div> |
|
|
<div class="relative z-10 container mx-auto px-4 py-8"> |
|
|
<header class="flex justify-between items-center mb-8"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="eye" class="text-green-500 mr-2"></i> |
|
|
<h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500"> |
|
|
Packet Peeper Pro |
|
|
</h1> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button id="startBtn" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg flex items-center"> |
|
|
<i data-feather="play" class="mr-2"></i> Start Sniffing |
|
|
</button> |
|
|
<button id="stopBtn" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg flex items-center" disabled> |
|
|
<i data-feather="stop-circle" class="mr-2"></i> Stop |
|
|
</button> |
|
|
<a href="documentation.html" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center"> |
|
|
<i data-feather="book" class="mr-2"></i> Documentation |
|
|
</a> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 backdrop-blur-sm"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="activity" class="mr-2 text-blue-400"></i> Network Traffic |
|
|
</h2> |
|
|
<div class="h-64"> |
|
|
<canvas id="trafficChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 backdrop-blur-sm"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="list" class="mr-2 text-purple-400"></i> Packet Log |
|
|
</h2> |
|
|
<div class="terminal"> |
|
|
<div id="packetLog" class="space-y-1"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 backdrop-blur-sm"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="target" class="mr-2 text-red-400"></i> Scan Target |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">IP Range</label> |
|
|
<input type="text" id="ipRange" |
|
|
class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" |
|
|
placeholder="192.168.1.1-255"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Ports</label> |
|
|
<input type="text" id="ports" |
|
|
class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" |
|
|
placeholder="80,443,22,3389"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Protocol</label> |
|
|
<select id="protocol" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"> |
|
|
<option value="all">All</option> |
|
|
<option value="tcp">TCP</option> |
|
|
<option value="udp">UDP</option> |
|
|
</select> |
|
|
</div> |
|
|
<button id="scanBtn" class="w-full bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="search" class="mr-2"></i> Scan Network |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 backdrop-blur-sm"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="bar-chart-2" class="mr-2 text-yellow-400"></i> Statistics |
|
|
</h2> |
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Packets Captured</span> |
|
|
<span id="packetCount">0</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div id="packetBar" class="bg-green-500 h-2 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>TCP Packets</span> |
|
|
<span id="tcpCount">0</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div id="tcpBar" class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>UDP Packets</span> |
|
|
<span id="udpCount">0</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div id="udpBar" class="bg-purple-500 h-2 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.NET({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x3fff00, |
|
|
backgroundColor: 0x111111, |
|
|
points: 10.00, |
|
|
maxDistance: 22.00, |
|
|
spacing: 17.00 |
|
|
}); |
|
|
|
|
|
|
|
|
const ctx = document.getElementById('trafficChart').getContext('2d'); |
|
|
const trafficChart = new Chart(ctx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: Array.from({length: 30}, (_, i) => i + 1), |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Incoming (KB)', |
|
|
data: Array(30).fill(0), |
|
|
borderColor: '#00ff00', |
|
|
backgroundColor: 'rgba(0, 255, 0, 0.1)', |
|
|
tension: 0.4, |
|
|
fill: true |
|
|
}, |
|
|
{ |
|
|
label: 'Outgoing (KB)', |
|
|
data: Array(30).fill(0), |
|
|
borderColor: '#ff0000', |
|
|
backgroundColor: 'rgba(255, 0, 0, 0.1)', |
|
|
tension: 0.4, |
|
|
fill: true |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
labels: { |
|
|
color: '#ffffff' |
|
|
} |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
}, |
|
|
ticks: { |
|
|
color: '#ffffff' |
|
|
} |
|
|
}, |
|
|
y: { |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
}, |
|
|
ticks: { |
|
|
color: '#ffffff' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
let isSniffing = false; |
|
|
let packetInterval; |
|
|
let packetCounter = 0; |
|
|
let tcpCounter = 0; |
|
|
let udpCounter = 0; |
|
|
const protocols = ['TCP', 'UDP', 'ICMP', 'HTTP', 'HTTPS', 'DNS', 'FTP']; |
|
|
const ips = ['192.168.1.', '10.0.0.', '172.16.0.']; |
|
|
const ports = [80, 443, 22, 53, 3389, 8080, 21]; |
|
|
|
|
|
function generateRandomIP() { |
|
|
const prefix = ips[Math.floor(Math.random() * ips.length)]; |
|
|
return prefix + Math.floor(Math.random() * 254 + 1); |
|
|
} |
|
|
|
|
|
function addPacketToLog(packet) { |
|
|
const packetLog = document.getElementById('packetLog'); |
|
|
const packetElement = document.createElement('div'); |
|
|
packetElement.className = 'packet-row text-sm flex justify-between'; |
|
|
packetElement.innerHTML = ` |
|
|
<span class="text-green-400">${new Date().toLocaleTimeString()}</span> |
|
|
<span class="text-yellow-300">${packet.source} → ${packet.destination}</span> |
|
|
<span class="text-blue-300">${packet.protocol}</span> |
|
|
<span class="text-purple-300">${packet.size} bytes</span> |
|
|
`; |
|
|
packetLog.prepend(packetElement); |
|
|
|
|
|
|
|
|
if (packetLog.children.length > 100) { |
|
|
packetLog.removeChild(packetLog.lastChild); |
|
|
} |
|
|
} |
|
|
|
|
|
function generateRandomPacket() { |
|
|
const protocol = protocols[Math.floor(Math.random() * protocols.length)]; |
|
|
const size = Math.floor(Math.random() * 1500 + 1); |
|
|
|
|
|
if (protocol === 'TCP') tcpCounter++; |
|
|
if (protocol === 'UDP') udpCounter++; |
|
|
|
|
|
packetCounter++; |
|
|
|
|
|
return { |
|
|
source: generateRandomIP() + ':' + ports[Math.floor(Math.random() * ports.length)], |
|
|
destination: generateRandomIP() + ':' + ports[Math.floor(Math.random() * ports.length)], |
|
|
protocol: protocol, |
|
|
size: size |
|
|
}; |
|
|
} |
|
|
|
|
|
function updateChart() { |
|
|
const data = trafficChart.data.datasets[0].data; |
|
|
data.shift(); |
|
|
data.push(Math.floor(Math.random() * 1000 + 500)); |
|
|
|
|
|
const data2 = trafficChart.data.datasets[1].data; |
|
|
data2.shift(); |
|
|
data2.push(Math.floor(Math.random() * 800 + 300)); |
|
|
|
|
|
trafficChart.update(); |
|
|
} |
|
|
|
|
|
function updateStats() { |
|
|
document.getElementById('packetCount').textContent = packetCounter; |
|
|
document.getElementById('tcpCount').textContent = tcpCounter; |
|
|
document.getElementById('udpCount').textContent = udpCounter; |
|
|
|
|
|
const maxPackets = 1000; |
|
|
const packetPercentage = Math.min(100, (packetCounter / maxPackets) * 100); |
|
|
document.getElementById('packetBar').style.width = packetPercentage + '%'; |
|
|
|
|
|
const tcpPercentage = packetCounter > 0 ? (tcpCounter / packetCounter) * 100 : 0; |
|
|
document.getElementById('tcpBar').style.width = tcpPercentage + '%'; |
|
|
|
|
|
const udpPercentage = packetCounter > 0 ? (udpCounter / packetCounter) * 100 : 0; |
|
|
document.getElementById('udpBar').style.width = udpPercentage + '%'; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('startBtn').addEventListener('click', function() { |
|
|
if (!isSniffing) { |
|
|
isSniffing = true; |
|
|
this.disabled = true; |
|
|
document.getElementById('stopBtn').disabled = false; |
|
|
document.getElementById('scanBtn').disabled = true; |
|
|
|
|
|
packetInterval = setInterval(function() { |
|
|
const packet = generateRandomPacket(); |
|
|
addPacketToLog(packet); |
|
|
updateChart(); |
|
|
updateStats(); |
|
|
}, 300); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('stopBtn').addEventListener('click', function() { |
|
|
if (isSniffing) { |
|
|
isSniffing = false; |
|
|
document.getElementById('startBtn').disabled = false; |
|
|
this.disabled = true; |
|
|
document.getElementById('scanBtn').disabled = false; |
|
|
clearInterval(packetInterval); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('scanBtn').addEventListener('click', function() { |
|
|
const ipRange = document.getElementById('ipRange').value || '192.168.1.1-255'; |
|
|
const ports = document.getElementById('ports').value || '80,443,22'; |
|
|
const protocol = document.getElementById('protocol').value; |
|
|
|
|
|
const packetLog = document.getElementById('packetLog'); |
|
|
packetLog.innerHTML = `<div class="text-center py-4 scanning text-yellow-400">Scanning network ${ipRange} for ports ${ports} (${protocol.toUpperCase()})...</div>`; |
|
|
|
|
|
|
|
|
setTimeout(function() { |
|
|
packetLog.innerHTML = ''; |
|
|
|
|
|
|
|
|
const fakeHosts = Math.floor(Math.random() * 10) + 3; |
|
|
for (let i = 1; i <= fakeHosts; i++) { |
|
|
const ip = ipRange.split('-')[0].slice(0, -1) + i; |
|
|
const openPorts = []; |
|
|
const portList = ports.split(','); |
|
|
|
|
|
|
|
|
portList.forEach(port => { |
|
|
if (Math.random() > 0.7) { |
|
|
openPorts.push(port); |
|
|
} |
|
|
}); |
|
|
|
|
|
if (openPorts.length > 0) { |
|
|
const scanResult = document.createElement('div'); |
|
|
scanResult.className = 'packet-row text-sm py-2 border-b border-gray-700'; |
|
|
scanResult.innerHTML = ` |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-green-400">${ip}</span> |
|
|
<span class="text-yellow-300">${openPorts.length} open ports</span> |
|
|
</div> |
|
|
<div class="mt-1 text-xs text-gray-400">Ports: ${openPorts.join(', ')}</div> |
|
|
`; |
|
|
packetLog.appendChild(scanResult); |
|
|
} |
|
|
} |
|
|
|
|
|
if (packetLog.children.length === 0) { |
|
|
packetLog.innerHTML = `<div class="text-center py-4 text-red-400">No open ports found!</div>`; |
|
|
} |
|
|
}, 3000); |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
