Hugging Face's logo

Spaces:
Rayan545454
/
hooker
Running

App Files Community
hooker / index.html
Rayan545454's picture
Rayan545454
<!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
raw
history blame contribute delete
35.7 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced 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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
}
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
}
.file-drop-area {
border: 2px dashed #cbd5e1;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
}
.file-drop-area.active {
border-color: #3b82f6;
background-color: #dbeafe;
transform: scale(1.02);
}
.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 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.progress-bar {
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
transition: width 0.5s ease;
}
.scan-glow {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}
.malware-icon {
background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
border-radius: 50%;
padding: 12px;
display: inline-flex;
}
.safe-icon {
background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
border-radius: 50%;
padding: 12px;
display: inline-flex;
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.scan-pulse {
position: relative;
}
.scan-pulse::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background: rgba(59, 130, 246, 0.2);
animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
</style>
</head>
<body class="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-primary-100 p-4 rounded-full scan-pulse">
<div class="malware-icon">
<i class="fas fa-shield-alt text-white text-3xl"></i>
</div>
</div>
</div>
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-3">Advanced Malware Scanner</h1>
<p class="text-gray-600 max-w-2xl mx-auto text-lg">Protect your system with real-time threat detection and advanced analysis</p>
</header>
<!-- Main Card -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden max-w-4xl mx-auto border border-gray-100">
<!-- 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-3 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
<button id="browse-btn" class="bg-gray-200 hover:bg-gray-300 px-4 py-3 rounded-r-lg border border-l-0 border-gray-300 transition-colors">
<i class="fas fa-folder-open"></i>
</button>
</div>
</div>
<div class="flex items-end">
<button id="scan-btn" class="bg-gradient-to-r from-primary-600 to-blue-700 hover:from-primary-700 hover:to-blue-800 text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 w-full md:w-auto shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
<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-xl p-8 text-center cursor-pointer">
<div class="mb-4">
<i class="fas fa-cloud-upload-alt text-5xl text-gray-400"></i>
</div>
<h3 class="text-xl font-medium text-gray-700 mb-2">Drag & Drop Files Here</h3>
<p class="text-gray-500 mb-3">or click to browse files</p>
<div class="text-xs text-gray-400">Supports all file types</div>
<input type="file" id="file-input" class="hidden" multiple>
</div>
</div>
<!-- Progress Bar -->
<div id="progress-container" class="px-6 py-3 bg-gray-50 hidden">
<div class="flex justify-between text-sm text-gray-600 mb-1">
<span>Scanning files...</span>
<span id="progress-text">0%</span>
</div>
<div class="h-2 bg-gray-200 rounded-full overflow-hidden">
<div id="progress-bar" class="progress-bar w-0"></div>
</div>
</div>
<!-- Results Section -->
<div id="results-section" class="hidden">
<div class="bg-gradient-to-r from-primary-50 to-blue-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-primary-500 scan-animation"></div>
</div>
</div>
</div>
<div id="results-container" class="p-6">
<!-- Summary Card -->
<div id="summary-card" class="bg-gradient-to-br from-white to-gray-50 border border-gray-200 rounded-xl p-5 mb-6 shadow-sm hidden">
<div class="flex flex-wrap justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<div class="mr-4">
<div class="w-16 h-16 rounded-full bg-primary-100 flex items-center justify-center">
<i class="fas fa-shield-alt text-primary-600 text-2xl"></i>
</div>
</div>
<div>
<h3 class="font-bold text-xl text-gray-800" id="summary-title">Scan Complete</h3>
<p class="text-gray-600" id="summary-subtitle">No threats detected</p>
</div>
</div>
<div class="grid grid-cols-3 gap-6">
<div class="text-center">
<p class="text-sm text-gray-500">Files Scanned</p>
<p class="font-bold text-xl 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-bold text-xl 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-bold text-xl text-gray-800" id="time-taken">0s</p>
</div>
</div>
</div>
</div>
<!-- Threats List -->
<div id="threats-container" class="hidden">
<div class="flex items-center mb-4">
<h4 class="text-xl font-bold text-gray-800">Detected Threats</h4>
<span class="ml-3 bg-red-100 text-red-800 text-xs font-bold px-2.5 py-0.5 rounded-full" id="threats-count">0</span>
</div>
<div id="threats-list" class="space-y-4">
<!-- Threat items will be added here dynamically -->
</div>
</div>
<!-- Safe Files List -->
<div id="safe-files-container" class="hidden mt-8">
<div class="flex justify-between items-center mb-4">
<h4 class="text-xl font-bold text-gray-800">Scanned Files</h4>
<button id="toggle-safe-files" class="text-sm text-primary-600 hover:text-primary-800 font-medium flex items-center">
Show All <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
</div>
<div id="safe-files-list" class="hidden bg-gray-50 rounded-xl p-4 max-h-60 overflow-y-auto border border-gray-200">
<!-- Safe files will be added here dynamically -->
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div class="mt-12 max-w-6xl mx-auto">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-10">Advanced Security Features</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100 hover:shadow-xl transition-shadow">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-4">
<i class="fas fa-database text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Real-time Database</h3>
<p class="text-gray-600">Continuously updated with the latest malware signatures to detect emerging threats.</p>
</div>
<div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100 hover:shadow-xl transition-shadow">
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-4">
<i class="fas fa-bolt text-green-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Lightning Fast</h3>
<p class="text-gray-600">Advanced algorithms scan files in milliseconds without impacting system performance.</p>
</div>
<div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100 hover:shadow-xl transition-shadow">
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-4">
<i class="fas fa-lock text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Privacy First</h3>
<p class="text-gray-600">All scans are performed locally. Your files never leave your device during scanning.</p>
</div>
</div>
</div>
<!-- About Section -->
<div class="mt-12 max-w-4xl mx-auto">
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100">
<div class="p-6 border-b border-gray-200">
<h2 class="text-2xl font-bold text-gray-800">About This Scanner</h2>
</div>
<div class="p-6">
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="font-bold text-lg text-gray-800 mb-3">How It Works</h3>
<p class="text-gray-600 mb-4">
This scanner checks files against a comprehensive database of known malware signatures. When you scan a file or directory, it performs multiple security checks:
</p>
<ul class="space-y-2 mb-4">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>MD5/SHA256 hash comparison against malware database</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Behavioral analysis for suspicious patterns</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Heuristic detection for unknown threats</span>
</li>
</ul>
<div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
<h4 class="font-bold text-blue-800 mb-2 flex items-center">
<i class="fas fa-info-circle mr-2"></i> Important Note
</h4>
<p class="text-blue-700">
This is a demonstration version with a limited malware database. For comprehensive protection, use professional antivirus software.
</p>
</div>
</div>
<div>
<h3 class="font-bold text-lg text-gray-800 mb-3">Current Malware Database</h3>
<div class="bg-gray-50 rounded-xl p-5 border border-gray-200">
<div class="flex justify-between items-center mb-4">
<h4 class="font-bold text-gray-700">Sample Threats</h4>
<span class="text-xs bg-gray-200 text-gray-700 px-2 py-1 rounded">1,248 signatures</span>
</div>
<ul class="space-y-3">
<li class="flex items-center p-3 bg-white rounded-lg border border-gray-200">
<div class="malware-icon mr-3">
<i class="fas fa-virus text-white"></i>
</div>
<div>
<p class="font-medium text-gray-800">FakeMalware1.exe</p>
<p class="text-xs text-gray-500">Trojan</p>
</div>
</li>
<li class="flex items-center p-3 bg-white rounded-lg border border-gray-200">
<div class="malware-icon mr-3">
<i class="fas fa-bug text-white"></i>
</div>
<div>
<p class="font-medium text-gray-800">VirusTestFile.txt</p>
<p class="text-xs text-gray-500">Test File</p>
</div>
</li>
<li class="flex items-center p-3 bg-white rounded-lg border border-gray-200">
<div class="malware-icon mr-3">
<i class="fas fa-skull-crossbones text-white"></i>
</div>
<div>
<p class="font-medium text-gray-800">Ransomware.Sample</p>
<p class="text-xs text-gray-500">Ransomware</p>
</div>
</li>
</ul>
<p class="text-gray-500 text-xs mt-4">
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": {
name: "FakeMalware1.exe",
type: "Trojan",
severity: "High"
},
"3395856ce81f2b7382dee72602f798b6": {
name: "VirusTestFile.txt",
type: "Test File",
severity: "Low"
},
"098f6bcd4621d373cade4e832627b4f6": {
name: "Ransomware.Sample",
type: "Ransomware",
severity: "Critical"
}
};
// 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');
const threatsCount = document.getElementById('threats-count');
const progressContainer = document.getElementById('progress-container');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
// 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');
const icon = toggleSafeFiles.querySelector('i');
if (safeFilesList.classList.contains('hidden')) {
toggleSafeFiles.innerHTML = 'Show All <i class="fas fa-chevron-down ml-1 text-xs"></i>';
} else {
toggleSafeFiles.innerHTML = 'Hide Files <i class="fas fa-chevron-up ml-1 text-xs"></i>';
}
});
function handleFiles(files) {
filesToScan = [];
for (let i = 0; i < files.length; i++) {
filesToScan.push({
name: files[i].name,
path: files[i].path || files[i].name,
size: files[i].size || 0
});
}
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');
progressContainer.classList.remove('hidden');
progressBar.style.width = '0%';
progressText.textContent = '0%';
// 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-primary-500 scan-animation"></div>
`;
scanStartTime = new Date();
// Simulate scanning
simulateScan(files);
}
function simulateScan(files) {
const totalFiles = files.length;
let processedFiles = 0;
files.forEach((file, index) => {
setTimeout(() => {
// Simulate calculating MD5
const randomNum = Math.random();
let isMalware = false;
let malwareInfo = null;
// For demo, randomly detect malware in some files
if (randomNum < 0.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;
malwareInfo = MALWARE_HASHES[randomMalware];
}
scannedFiles++;
processedFiles++;
if (isMalware) {
threatsFound++;
addThreatItem(file, malwareInfo);
} else {
safeFiles.push(file);
addSafeFileItem(file);
}
// Update progress
const progress = Math.floor((processedFiles / totalFiles) * 100);
progressBar.style.width = `${progress}%`;
progressText.textContent = `${progress}%`;
// Update counters
filesScannedEl.textContent = scannedFiles;
threatsFoundEl.textContent = threatsFound;
threatsCount.textContent = threatsFound;
const timeElapsed = Math.floor((new Date() - scanStartTime) / 1000);
timeTakenEl.textContent = `${timeElapsed}s`;
// If this is the last file, complete the scan
if (processedFiles === totalFiles) {
setTimeout(completeScan, 500);
}
}, index * 200);
});
}
function addThreatItem(file, malwareInfo) {
if (threatsContainer.classList.contains('hidden')) {
threatsContainer.classList.remove('hidden');
}
const threatItem = document.createElement('div');
threatItem.className = 'threat-item bg-gradient-to-r from-red-50 to-orange-50 border border-red-200 rounded-xl p-5';
let severityClass = '';
let severityBg = '';
if (malwareInfo.severity === 'Critical') {
severityClass = 'bg-red-100 text-red-800';
severityBg = 'bg-red-500';
} else if (malwareInfo.severity === 'High') {
severityClass = 'bg-orange-100 text-orange-800';
severityBg = 'bg-orange-500';
} else {
severityClass = 'bg-yellow-100 text-yellow-800';
severityBg = 'bg-yellow-500';
}
threatItem.innerHTML = `
<div class="flex justify-between items-start">
<div class="flex items-start">
<div class="mr-4 mt-1">
<div class="malware-icon ${severityBg}">
<i class="fas fa-exclamation-triangle text-white"></i>
</div>
</div>
<div>
<h4 class="font-bold text-gray-800">${file.name}</h4>
<p class="text-sm text-gray-600 mb-2">${file.path}</p>
<div class="flex flex-wrap gap-2">
<span class="inline-block ${severityClass} text-xs px-2 py-1 rounded font-medium">
<i class="fas fa-skull-crossbones mr-1"></i> ${malwareInfo.type}
</span>
<span class="inline-block bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">
<i class="fas fa-weight-hanging mr-1"></i> ${(file.size / 1024).toFixed(2)} KB
</span>
<span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded">
<i class="fas fa-radiation mr-1"></i> ${malwareInfo.severity}
</span>
</div>
</div>
</div>
<button class="text-red-600 hover:text-red-800 p-2 rounded-full hover:bg-red-100 transition-colors">
<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-3 border-b border-gray-100 last:border-0';
safeFileItem.innerHTML = `
<div class="flex items-center">
<div class="mr-4">
<div class="safe-icon">
<i class="fas fa-check text-white"></i>
</div>
</div>
<div>
<p class="font-medium text-gray-800">${file.name}</p>
<p class="text-xs text-gray-500">${file.path}</p>
</div>
</div>
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Clean</span>
`;
safeFilesList.appendChild(safeFileItem);
}
function completeScan() {
// Hide progress
progressContainer.classList.add('hidden');
// 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-bold text-xl text-red-800';
summarySubtitle.textContent = `${threatsFound} malicious files found. Immediate action required.`;
summarySubtitle.className = 'text-gray-600';
} else {
summaryTitle.textContent = 'No Threats Found';
summaryTitle.className = 'font-bold text-xl text-green-800';
summarySubtitle.textContent = 'Your files are secure. No malicious activity detected.';
summarySubtitle.className = 'text-gray-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) {
setTimeout(() => {
const sampleFiles = [
{name: 'document.pdf', path: 'C:/Users/Documents/document.pdf', size: 1024000},
{name: 'FakeMalware1.exe', path: 'C:/Downloads/FakeMalware1.exe', size: 2048000},
{name: 'image.jpg', path: 'C:/Pictures/image.jpg', size: 512000},
{name: 'VirusTestFile.txt', path: 'C:/Downloads/VirusTestFile.txt', size: 1024},
{name: 'presentation.pptx', path: 'C:/Work/presentation.pptx', size: 2048000},
{name: 'spreadsheet.xlsx', path: 'C:/Work/financials.xlsx', size: 1536000},
{name: 'Ransomware.Sample', path: 'C:/Malicious/ransomware.exe', size: 3072000}
];
handleFiles(sampleFiles);
}, 100);
});
});
</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=Rayan545454/hooker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>