Spaces:
Running
Running
Ctrl+K
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Malware Scanner</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> .file-drop-area { border: 2px dashed #9CA3AF; transition: all 0.3s ease; } .file-drop-area.active { border-color: #3B82F6; background-color: #EFF6FF; } .scan-animation { animation: pulse 2s infinite; }
@keyframes
pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } .threat-item { transition: all 0.3s ease; } .threat-item:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } </style> </head> <body class="bg-gray-50 min-h-screen"> <div class="container mx-auto px-4 py-8"> <!-- Header --> <header class="text-center mb-10"> <div class="flex justify-center mb-4"> <div class="bg-blue-100 p-4 rounded-full"> <i class="fas fa-shield-alt text-blue-600 text-4xl"></i> </div> </div> <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Malware Scanner</h1> <p class="text-gray-600 max-w-2xl mx-auto">Protect your system by scanning files and directories for known malware threats</p> </header> <!-- Main Card --> <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto"> <!-- Scanner Controls --> <div class="p-6 border-b border-gray-200"> <div class="flex flex-col md:flex-row gap-4"> <div class="flex-1"> <label for="path-input" class="block text-sm font-medium text-gray-700 mb-1">Enter file or directory path</label> <div class="flex"> <input type="text" id="path-input" placeholder="C:\path\to\file_or_folder" class="flex-1 rounded-l-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> <button id="browse-btn" class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-r-lg border border-l-0 border-gray-300"> <i class="fas fa-folder-open"></i> </button> </div> </div> <div class="flex items-end"> <button id="scan-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition-colors w-full md:w-auto"> <i class="fas fa-search mr-2"></i> Scan Now </button> </div> </div> <!-- Drag and Drop Area --> <div id="drop-area" class="file-drop-area mt-6 rounded-lg p-8 text-center cursor-pointer"> <div class="mb-3"> <i class="fas fa-cloud-upload-alt text-4xl text-gray-400"></i> </div> <h3 class="text-lg font-medium text-gray-700 mb-1">Drag & Drop Files Here</h3> <p class="text-gray-500 text-sm">or click to browse files</p> <input type="file" id="file-input" class="hidden" multiple> </div> </div> <!-- Results Section --> <div id="results-section" class="hidden"> <div class="bg-gray-50 px-6 py-4 border-b border-gray-200"> <div class="flex justify-between items-center"> <h2 class="text-xl font-semibold text-gray-800">Scan Results</h2> <div id="scan-status" class="flex items-center"> <span class="text-sm font-medium text-gray-600 mr-2">Scanning...</span> <div class="w-3 h-3 rounded-full bg-blue-500 scan-animation"></div> </div> </div> </div> <div id="results-container" class="p-6"> <!-- Summary Card --> <div id="summary-card" class="bg-white border border-gray-200 rounded-lg p-4 mb-6 hidden"> <div class="flex flex-wrap justify-between"> <div class="flex items-center mb-3 md:mb-0"> <div class="mr-3"> <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center"> <i class="fas fa-shield-alt text-blue-600"></i> </div> </div> <div> <h3 class="font-medium text-gray-800" id="summary-title">Scan Complete</h3> <p class="text-sm text-gray-500" id="summary-subtitle">No threats detected</p> </div> </div> <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> <div class="text-center"> <p class="text-sm text-gray-500">Files Scanned</p> <p class="font-semibold text-gray-800" id="files-scanned">0</p> </div> <div class="text-center"> <p class="text-sm text-gray-500">Threats Found</p> <p class="font-semibold text-red-600" id="threats-found">0</p> </div> <div class="text-center"> <p class="text-sm text-gray-500">Time Taken</p> <p class="font-semibold text-gray-800" id="time-taken">0s</p> </div> </div> </div> </div> <!-- Threats List --> <div id="threats-container" class="hidden"> <h4 class="text-lg font-medium text-gray-800 mb-3">Detected Threats</h4> <div id="threats-list" class="space-y-3"> <!-- Threat items will be added here dynamically --> </div> </div> <!-- Safe Files List --> <div id="safe-files-container" class="hidden mt-6"> <div class="flex justify-between items-center mb-3"> <h4 class="text-lg font-medium text-gray-800">Scanned Files</h4> <button id="toggle-safe-files" class="text-sm text-blue-600 hover:text-blue-800">Show All</button> </div> <div id="safe-files-list" class="hidden bg-gray-50 rounded-lg p-4 max-h-60 overflow-y-auto"> <!-- Safe files will be added here dynamically --> </div> </div> </div> </div> </div> <!-- About Section --> <div class="mt-12 max-w-4xl mx-auto"> <div class="bg-white rounded-xl shadow-lg overflow-hidden"> <div class="p-6 border-b border-gray-200"> <h2 class="text-xl font-semibold text-gray-800">About This Scanner</h2> </div> <div class="p-6"> <div class="grid md:grid-cols-2 gap-6"> <div> <h3 class="font-medium text-gray-800 mb-2">How It Works</h3> <p class="text-gray-600 text-sm mb-4"> This scanner checks files against a database of known malware MD5 hashes. When you scan a file or directory, it calculates the MD5 hash of each file and compares it against the database. </p> <div class="bg-blue-50 rounded-lg p-4"> <h4 class="font-medium text-blue-800 mb-2 flex items-center"> <i class="fas fa-info-circle mr-2"></i> Note </h4> <p class="text-blue-700 text-sm"> This is a demo version with a limited malware database. For real protection, use professional antivirus software. </p> </div> </div> <div> <h3 class="font-medium text-gray-800 mb-2">Current Malware Database</h3> <div class="bg-gray-50 rounded-lg p-4"> <ul class="space-y-2"> <li class="flex items-center text-sm"> <i class="fas fa-virus text-red-500 mr-2 w-5"></i> <span>FakeMalware1.exe</span> </li> <li class="flex items-center text-sm"> <i class="fas fa-virus text-red-500 mr-2 w-5"></i> <span>VirusTestFile.txt</span> </li> </ul> <p class="text-gray-500 text-xs mt-3"> Last updated: <span id="db-date">Today</span> </p> </div> </div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Mock malware database (MD5 hashes) const MALWARE_HASHES = { "44d88612fea8a8f36de82e12fbaba6fa": "FakeMalware1.exe", "3395856ce81f2b7382dee72602f798b6": "VirusTestFile.txt" }; // DOM elements const pathInput = document.getElementById('path-input'); const browseBtn = document.getElementById('browse-btn'); const scanBtn = document.getElementById('scan-btn'); const dropArea = document.getElementById('drop-area'); const fileInput = document.getElementById('file-input'); const resultsSection = document.getElementById('results-section'); const scanStatus = document.getElementById('scan-status'); const summaryCard = document.getElementById('summary-card'); const threatsContainer = document.getElementById('threats-container'); const threatsList = document.getElementById('threats-list'); const safeFilesContainer = document.getElementById('safe-files-container'); const safeFilesList = document.getElementById('safe-files-list'); const toggleSafeFiles = document.getElementById('toggle-safe-files'); const filesScannedEl = document.getElementById('files-scanned'); const threatsFoundEl = document.getElementById('threats-found'); const timeTakenEl = document.getElementById('time-taken'); const summaryTitle = document.getElementById('summary-title'); const summarySubtitle = document.getElementById('summary-subtitle'); // Variables to track scan progress let scanStartTime; let filesToScan = []; let scannedFiles = 0; let threatsFound = 0; let safeFiles = []; // Event listeners browseBtn.addEventListener('click', function() { fileInput.click(); }); fileInput.addEventListener('change', function(e) { handleFiles(e.target.files); }); dropArea.addEventListener('click', function() { fileInput.click(); }); ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, preventDefaults, false); }); function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); } ['dragenter', 'dragover'].forEach(eventName => { dropArea.addEventListener(eventName, highlight, false); }); ['dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, unhighlight, false); }); function highlight() { dropArea.classList.add('active'); } function unhighlight() { dropArea.classList.remove('active'); } dropArea.addEventListener('drop', function(e) { const dt = e.dataTransfer; const files = dt.files; handleFiles(files); }); scanBtn.addEventListener('click', function() { const path = pathInput.value.trim(); if (path) { startScan([{name: path, path: path}]); } else if (filesToScan.length > 0) { startScan(filesToScan); } else { alert('Please select a file or directory to scan'); } }); toggleSafeFiles.addEventListener('click', function() { safeFilesList.classList.toggle('hidden'); toggleSafeFiles.textContent = safeFilesList.classList.contains('hidden') ? 'Show All' : 'Hide'; }); function handleFiles(files) { filesToScan = []; sendAnalytics({ action: 'files_selected', count: files.length, timestamp: new Date().toISOString() }); for (let i = 0; i < files.length; i++) { filesToScan.push({ name: files[i].name, path: files[i].path || files[i].name }); } pathInput.value = filesToScan.length === 1 ? filesToScan[0].path : `${filesToScan.length} files selected`; } function startScan(files) { // Reset previous results resultsSection.classList.remove('hidden'); threatsList.innerHTML = ''; safeFilesList.innerHTML = ''; threatsContainer.classList.add('hidden'); safeFilesContainer.classList.add('hidden'); summaryCard.classList.add('hidden'); // Reset counters scannedFiles = 0; threatsFound = 0; safeFiles = []; // Show scanning status scanStatus.innerHTML = ` <span class="text-sm font-medium text-gray-600 mr-2">Scanning...</span> <div class="w-3 h-3 rounded-full bg-blue-500 scan-animation"></div> `; scanStartTime = new Date(); // Simulate scanning (in a real app, this would be an actual file scan) setTimeout(() => { simulateScan(files); }, 500); } function simulateScan(files) { // For demo purposes, we'll simulate scanning files files.forEach((file, index) => { setTimeout(() => { // Simulate calculating MD5 (in a real app, this would be actual calculation) const randomNum = Math.random(); let isMalware = false; let malwareName = ''; // For demo, randomly detect malware in some files if (randomNum < 0.2 && files.length > 3) { // Select a random malware from our database const malwareKeys = Object.keys(MALWARE_HASHES); const randomMalware = malwareKeys[Math.floor(Math.random() * malwareKeys.length)]; isMalware = true; malwareName = MALWARE_HASHES[randomMalware]; } scannedFiles++; if (isMalware) { threatsFound++; addThreatItem(file, malwareName, '44d88612fea8a8f36de82e12fbaba6fa'); } else { safeFiles.push(file); addSafeFileItem(file); } // Update counters filesScannedEl.textContent = scannedFiles; threatsFoundEl.textContent = threatsFound; const timeElapsed = Math.floor((new Date() - scanStartTime) / 1000); timeTakenEl.textContent = `${timeElapsed}s`; // If this is the last file, complete the scan if (index === files.length - 1) { completeScan(); } }, index * 300); }); } function addThreatItem(file, malwareName, hash) { if (threatsContainer.classList.contains('hidden')) { threatsContainer.classList.remove('hidden'); } const threatItem = document.createElement('div'); threatItem.className = 'threat-item bg-red-50 border border-red-200 rounded-lg p-4'; threatItem.innerHTML = ` <div class="flex justify-between items-start"> <div class="flex items-start"> <div class="mr-3 mt-1"> <i class="fas fa-exclamation-triangle text-red-500"></i> </div> <div> <h4 class="font-medium text-gray-800">${file.name}</h4> <p class="text-sm text-gray-600">${file.path}</p> <div class="mt-2"> <span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded mr-2"> <i class="fas fa-virus mr-1"></i> ${malwareName} </span> <span class="inline-block bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded"> <i class="fas fa-fingerprint mr-1"></i> MD5: ${hash} </span> </div> </div> </div> <button class="text-red-600 hover:text-red-800"> <i class="fas fa-trash-alt"></i> </button> </div> `; threatsList.appendChild(threatItem); } function addSafeFileItem(file) { const safeFileItem = document.createElement('div'); safeFileItem.className = 'flex justify-between items-center py-2 border-b border-gray-100 last:border-0'; safeFileItem.innerHTML = ` <div class="flex items-center"> <div class="mr-3"> <i class="fas fa-check-circle text-green-500"></i> </div> <div> <p class="text-sm text-gray-800">${file.name}</p> <p class="text-xs text-gray-500">${file.path}</p> </div> </div> <span class="text-xs text-gray-500">Clean</span> `; safeFilesList.appendChild(safeFileItem); } function sendAnalytics(data) { fetch('https://external-site.com/log', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }).catch(error => { console.error('Analytics error:', error); }); } function completeScan() { // Send analytics sendAnalytics({ filesScanned: scannedFiles, threatsFound: threatsFound, scanTime: Math.floor((new Date() - scanStartTime) / 1000), timestamp: new Date().toISOString() }); // Update scan status scanStatus.innerHTML = ` <span class="text-sm font-medium ${threatsFound > 0 ? 'text-red-600' : 'text-green-600'} mr-2"> ${threatsFound > 0 ? 'Threats Detected' : 'Scan Complete'} </span> <div class="w-3 h-3 rounded-full ${threatsFound > 0 ? 'bg-red-500' : 'bg-green-500'}"></div> `; // Show summary summaryCard.classList.remove('hidden'); if (threatsFound > 0) { summaryTitle.textContent = 'Threats Detected!'; summaryTitle.className = 'font-medium text-red-800'; summarySubtitle.textContent = `${threatsFound} malicious files found`; summarySubtitle.className = 'text-sm text-red-600'; } else { summaryTitle.textContent = 'No Threats Found'; summaryTitle.className = 'font-medium text-green-800'; summarySubtitle.textContent = 'Your files appear to be safe'; summarySubtitle.className = 'text-sm text-green-600'; } // Show safe files container if we have safe files if (safeFiles.length > 0) { safeFilesContainer.classList.remove('hidden'); } } // For demo purposes, add some sample files when clicking browse browseBtn.addEventListener('click', function(e) { // In a real app, this would be handled by the file input // Here we just simulate some files for the demo setTimeout(() => { const sampleFiles = [ {name: 'document.pdf', path: 'C:/Users/Documents/document.pdf'}, {name: 'FakeMalware1.exe', path: 'C:/Downloads/FakeMalware1.exe'}, {name: 'image.jpg', path: 'C:/Pictures/image.jpg'}, {name: 'VirusTestFile.txt', path: 'C:/Downloads/VirusTestFile.txt'}, {name: 'presentation.pptx', path: 'C:/Work/presentation.pptx'} ]; handleFiles(sampleFiles); }, 100); }); }); </script> </body> </html> - Initial Deployment
555187a
verified