Spaces:

Howie254
/

packet-peeper-pro-spyware

Running

App Files Files Community

Howie254 commited on Oct 16, 2025

Commit

dbe2dc2

verified ·

1 Parent(s): 328366d

create a fully functioning packet sniffer that probes networks and traffic

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +374 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Packet Peeper Pro Spyware
-emoji: 🐢
-colorFrom: purple
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Packet Peeper Pro Spyware 🕵️‍♂️
+colorFrom: green
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,375 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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>
+            </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>
+        // Initialize Vanta.js background
+        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
+        });
+        // Initialize charts
+        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'
+                        }
+                    }
+                }
+            }
+        });
+        // Simulate packet data
+        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);
+            // Limit log to 100 entries
+            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 + '%';
+        }
+        // Button event listeners
+        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>`;
+            // Simulate scan results after delay
+            setTimeout(function() {
+                packetLog.innerHTML = '';
+                // Add fake scan results
+                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(',');
+                    // Randomly select some ports to show as open
+                    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);
+        });
+        // Initialize feather icons
+        feather.replace();
+    </script>
+</body>
 </html>