| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ShieldScan - Detector de Virus</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> |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| .animate-pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| .progress-bar { |
| transition: width 0.5s ease; |
| } |
| .virus-card { |
| transition: all 0.3s ease; |
| } |
| .virus-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| .scan-animation { |
| background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); |
| background-size: 200% 100%; |
| animation: shimmer 1.5s infinite linear; |
| } |
| @keyframes shimmer { |
| 0% { background-position: 200% 0; } |
| 100% { background-position: -200% 0; } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8"> |
| |
| <header class="flex justify-between items-center mb-10"> |
| <div class="flex items-center space-x-3"> |
| <div class="bg-blue-600 text-white p-3 rounded-full"> |
| <i class="fas fa-shield-virus text-2xl"></i> |
| </div> |
| <h1 class="text-2xl font-bold text-gray-800">ShieldScan</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="hidden md:flex items-center space-x-2 bg-blue-50 px-4 py-2 rounded-full"> |
| <div class="w-3 h-3 bg-green-500 rounded-full"></div> |
| <span class="text-sm font-medium text-gray-700">Protección activa</span> |
| </div> |
| <button class="bg-gray-200 hover:bg-gray-300 p-2 rounded-full"> |
| <i class="fas fa-cog text-gray-600"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <main> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-6"> |
| <div> |
| <h2 class="text-xl font-bold text-gray-800">Estado del sistema</h2> |
| <p class="text-gray-500">Último análisis: <span id="last-scan">Hace 2 días</span></p> |
| </div> |
| <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Seguro</span> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
| <div class="bg-blue-50 p-4 rounded-lg"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-sm font-medium text-blue-700">Archivos analizados</span> |
| <i class="fas fa-file text-blue-400"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-blue-800">24,582</h3> |
| </div> |
| <div class="bg-green-50 p-4 rounded-lg"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-sm font-medium text-green-700">Amenazas detectadas</span> |
| <i class="fas fa-bug text-green-400"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-green-800">0</h3> |
| </div> |
| <div class="bg-purple-50 p-4 rounded-lg"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-sm font-medium text-purple-700">Tiempo de análisis</span> |
| <i class="fas fa-clock text-purple-400"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-purple-800">2.4 min</h3> |
| </div> |
| </div> |
| |
| <button id="start-scan" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center space-x-2 transition-colors"> |
| <i class="fas fa-search"></i> |
| <span>Iniciar análisis completo</span> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="scan-results" class="hidden bg-white rounded-xl shadow-md overflow-hidden mb-8"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-bold text-gray-800">Resultados del análisis</h2> |
| <div class="flex items-center space-x-2"> |
| <span id="scan-status" class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded-full">En progreso</span> |
| <span id="scan-time" class="text-sm text-gray-500">00:00</span> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> |
| <span>Progreso del análisis</span> |
| <span id="progress-percent">0%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div id="progress-bar" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| |
| <div id="scan-details" class="space-y-4"> |
| <div class="flex items-center p-3 bg-gray-50 rounded-lg scan-animation"> |
| <div class="w-8 h-8 bg-gray-300 rounded-full animate-pulse"></div> |
| <div class="ml-3 w-3/4 h-4 bg-gray-300 rounded animate-pulse"></div> |
| </div> |
| <div class="flex items-center p-3 bg-gray-50 rounded-lg scan-animation"> |
| <div class="w-8 h-8 bg-gray-300 rounded-full animate-pulse"></div> |
| <div class="ml-3 w-2/4 h-4 bg-gray-300 rounded animate-pulse"></div> |
| </div> |
| <div class="flex items-center p-3 bg-gray-50 rounded-lg scan-animation"> |
| <div class="w-8 h-8 bg-gray-300 rounded-full animate-pulse"></div> |
| <div class="ml-3 w-4/5 h-4 bg-gray-300 rounded animate-pulse"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="threats-found" class="hidden bg-white rounded-xl shadow-md overflow-hidden mb-8"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-bold text-red-600">¡Amenazas detectadas!</h2> |
| <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Peligro</span> |
| </div> |
| |
| <div class="mb-6 bg-red-50 border-l-4 border-red-500 p-4"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-exclamation-triangle text-red-500 mt-1"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-red-800">Se encontraron 3 amenazas potenciales</h3> |
| <div class="mt-2 text-sm text-red-700"> |
| <p>Recomendamos eliminar estas amenazas inmediatamente para proteger su sistema.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="virus-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md cursor-pointer"> |
| <div class="flex items-start"> |
| <div class="bg-red-100 p-2 rounded-full"> |
| <i class="fas fa-bug text-red-500"></i> |
| </div> |
| <div class="ml-4 flex-1"> |
| <div class="flex justify-between"> |
| <h3 class="font-medium text-gray-900">Trojan:Win32/Wacatac.B!ml</h3> |
| <span class="bg-red-100 text-red-800 text-xs font-medium px-2 py-0.5 rounded">Alta</span> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">C:\Users\Usuario\Downloads\cracked_software.exe</p> |
| <div class="mt-3 flex space-x-3"> |
| <button class="text-sm font-medium text-red-600 hover:text-red-800">Eliminar</button> |
| <button class="text-sm font-medium text-gray-600 hover:text-gray-800">Cuarentena</button> |
| <button class="text-sm font-medium text-gray-600 hover:text-gray-800">Permitir</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="virus-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md cursor-pointer"> |
| <div class="flex items-start"> |
| <div class="bg-red-100 p-2 rounded-full"> |
| <i class="fas fa-bug text-red-500"></i> |
| </div> |
| <div class="ml-4 flex-1"> |
| <div class="flex justify-between"> |
| <h3 class="font-medium text-gray-900">Adware:Win32/Generic</h3> |
| <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-0.5 rounded">Media</span> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">C:\Program Files (x86)\FreeToolbar\update.dll</p> |
| <div class="mt-3 flex space-x-3"> |
| <button class="text-sm font-medium text-red-600 hover:text-red-800">Eliminar</button> |
| <button class="text-sm font-medium text-gray-600 hover:text-gray-800">Cuarentena</button> |
| <button class="text-sm font-medium text-gray-600 hover:text-gray-800">Permitir</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="virus-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md cursor-pointer"> |
| <div class="flex items-start"> |
| <div class="bg-red-100 p-2 rounded-full"> |
| <i class="fas fa-bug text-red-500"></i> |
| </div> |
| <div class="ml-4 flex-1"> |
| <div class="flex justify-between"> |
| <h3 class="font-medium text-gray-900">PUP:Win32/InstallCore</h3> |
| <span class="bg-orange-100 text-orange-800 text-xs font-medium px-2 py-0.5 rounded">Baja</span> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">C:\Users\Usuario\AppData\Local\Temp\setup_12345.exe</p> |
| <div class="mt-3 flex space-x-3"> |
| <button class="text-sm font-medium text-red-600 hover:text-red-800">Eliminar</button> |
| <button class="text-sm font-medium text-gray-600 hover:text-gray-800">Cuarentena</button> |
| <button class="text-sm font-medium text-gray-600 hover:text-gray-800">Permitir</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6 flex justify-end space-x-3"> |
| <button id="ignore-threats" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"> |
| Ignorar amenazas |
| </button> |
| <button id="clean-all" class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-md text-sm font-medium text-white"> |
| Limpiar todo |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-6"> |
| <h2 class="text-xl font-bold text-gray-800 mb-6">Funciones de protección</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition-colors"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-shield-alt text-blue-500"></i> |
| </div> |
| <h3 class="font-medium text-gray-800">Protección en tiempo real</h3> |
| </div> |
| <p class="text-sm text-gray-500">Monitorea continuamente tu sistema para detectar y bloquear amenazas.</p> |
| <div class="mt-3 flex items-center"> |
| <div class="relative inline-block w-10 mr-2 align-middle select-none"> |
| <input type="checkbox" name="real-time" id="real-time" class="sr-only" checked> |
| <label for="real-time" class="block overflow-hidden h-6 rounded-full bg-blue-500 cursor-pointer"> |
| <span class="block h-6 w-6 rounded-full bg-white shadow transform transition-transform duration-200 ease-in-out translate-x-4"></span> |
| </label> |
| </div> |
| <span class="text-sm font-medium text-gray-700">Activado</span> |
| </div> |
| </div> |
| |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-green-300 hover:bg-green-50 transition-colors"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-green-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-globe text-green-500"></i> |
| </div> |
| <h3 class="font-medium text-gray-800">Protección web</h3> |
| </div> |
| <p class="text-sm text-gray-500">Bloquea sitios web maliciosos y descargas peligrosas.</p> |
| <div class="mt-3 flex items-center"> |
| <div class="relative inline-block w-10 mr-2 align-middle select-none"> |
| <input type="checkbox" name="web-protection" id="web-protection" class="sr-only" checked> |
| <label for="web-protection" class="block overflow-hidden h-6 rounded-full bg-green-500 cursor-pointer"> |
| <span class="block h-6 w-6 rounded-full bg-white shadow transform transition-transform duration-200 ease-in-out translate-x-4"></span> |
| </label> |
| </div> |
| <span class="text-sm font-medium text-gray-700">Activado</span> |
| </div> |
| </div> |
| |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-purple-300 hover:bg-purple-50 transition-colors"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-mail-bulk text-purple-500"></i> |
| </div> |
| <h3 class="font-medium text-gray-800">Protección de email</h3> |
| </div> |
| <p class="text-sm text-gray-500">Escanea archivos adjuntos y enlaces en correos electrónicos.</p> |
| <div class="mt-3 flex items-center"> |
| <div class="relative inline-block w-10 mr-2 align-middle select-none"> |
| <input type="checkbox" name="email-protection" id="email-protection" class="sr-only" checked> |
| <label for="email-protection" class="block overflow-hidden h-6 rounded-full bg-purple-500 cursor-pointer"> |
| <span class="block h-6 w-6 rounded-full bg-white shadow transform transition-transform duration-200 ease-in-out translate-x-4"></span> |
| </label> |
| </div> |
| <span class="text-sm font-medium text-gray-700">Activado</span> |
| </div> |
| </div> |
| |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-yellow-300 hover:bg-yellow-50 transition-colors"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-fire text-yellow-500"></i> |
| </div> |
| <h3 class="font-medium text-gray-800">Protección contra ransomware</h3> |
| </div> |
| <p class="text-sm text-gray-500">Protege tus archivos importantes contra cifrado malicioso.</p> |
| <div class="mt-3 flex items-center"> |
| <div class="relative inline-block w-10 mr-2 align-middle select-none"> |
| <input type="checkbox" name="ransomware" id="ransomware" class="sr-only" checked> |
| <label for="ransomware" class="block overflow-hidden h-6 rounded-full bg-yellow-500 cursor-pointer"> |
| <span class="block h-6 w-6 rounded-full bg-white shadow transform transition-transform duration-200 ease-in-out translate-x-4"></span> |
| </label> |
| </div> |
| <span class="text-sm font-medium text-gray-700">Activado</span> |
| </div> |
| </div> |
| |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-red-300 hover:bg-red-50 transition-colors"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-red-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-microchip text-red-500"></i> |
| </div> |
| <h3 class="font-medium text-gray-800">Análisis de comportamiento</h3> |
| </div> |
| <p class="text-sm text-gray-500">Detecta amenazas desconocidas analizando patrones sospechosos.</p> |
| <div class="mt-3 flex items-center"> |
| <div class="relative inline-block w-10 mr-2 align-middle select-none"> |
| <input type="checkbox" name="behavior" id="behavior" class="sr-only" checked> |
| <label for="behavior" class="block overflow-hidden h-6 rounded-full bg-red-500 cursor-pointer"> |
| <span class="block h-6 w-6 rounded-full bg-white shadow transform transition-transform duration-200 ease-in-out translate-x-4"></span> |
| </label> |
| </div> |
| <span class="text-sm font-medium text-gray-700">Activado</span> |
| </div> |
| </div> |
| |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-indigo-300 hover:bg-indigo-50 transition-colors"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-cloud text-indigo-500"></i> |
| </div> |
| <h3 class="font-medium text-gray-800">Protección en la nube</h3> |
| </div> |
| <p class="text-sm text-gray-500">Utiliza inteligencia colectiva para detectar amenazas emergentes.</p> |
| <div class="mt-3 flex items-center"> |
| <div class="relative inline-block w-10 mr-2 align-middle select-none"> |
| <input type="checkbox" name="cloud" id="cloud" class="sr-only" checked> |
| <label for="cloud" class="block overflow-hidden h-6 rounded-full bg-indigo-500 cursor-pointer"> |
| <span class="block h-6 w-6 rounded-full bg-white shadow transform transition-transform duration-200 ease-in-out translate-x-4"></span> |
| </label> |
| </div> |
| <span class="text-sm font-medium text-gray-700">Activado</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="mt-12 text-center text-gray-500 text-sm"> |
| <p>© 2023 ShieldScan - Todos los derechos reservados</p> |
| <p class="mt-1">Versión 2.4.1 | Base de datos de virus actualizada hoy</p> |
| </footer> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const startScanBtn = document.getElementById('start-scan'); |
| const scanResults = document.getElementById('scan-results'); |
| const threatsFound = document.getElementById('threats-found'); |
| const progressBar = document.getElementById('progress-bar'); |
| const progressPercent = document.getElementById('progress-percent'); |
| const scanStatus = document.getElementById('scan-status'); |
| const scanTime = document.getElementById('scan-time'); |
| const cleanAllBtn = document.getElementById('clean-all'); |
| const ignoreThreatsBtn = document.getElementById('ignore-threats'); |
| const lastScanText = document.getElementById('last-scan'); |
| |
| let timerInterval; |
| let seconds = 0; |
| |
| |
| startScanBtn.addEventListener('click', function() { |
| |
| scanResults.classList.remove('hidden'); |
| threatsFound.classList.add('hidden'); |
| startScanBtn.disabled = true; |
| startScanBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700'); |
| startScanBtn.classList.add('bg-blue-400', 'cursor-not-allowed'); |
| |
| |
| seconds = 0; |
| updateTimer(); |
| timerInterval = setInterval(updateTimer, 1000); |
| |
| |
| let progress = 0; |
| const progressInterval = setInterval(function() { |
| progress += Math.random() * 5; |
| if (progress > 100) progress = 100; |
| |
| progressBar.style.width = progress + '%'; |
| progressPercent.textContent = Math.round(progress) + '%'; |
| |
| |
| if (progress < 30) { |
| scanStatus.textContent = 'Preparando'; |
| scanStatus.className = 'bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded-full'; |
| } else if (progress < 70) { |
| scanStatus.textContent = 'Analizando archivos'; |
| scanStatus.className = 'bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full'; |
| } else if (progress < 90) { |
| scanStatus.textContent = 'Verificando memoria'; |
| scanStatus.className = 'bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded-full'; |
| } else { |
| scanStatus.textContent = 'Finalizando'; |
| scanStatus.className = 'bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full'; |
| } |
| |
| |
| if (progress >= 100) { |
| clearInterval(progressInterval); |
| clearInterval(timerInterval); |
| |
| |
| setTimeout(function() { |
| scanResults.classList.add('hidden'); |
| threatsFound.classList.remove('hidden'); |
| lastScanText.textContent = 'Hace unos momentos'; |
| |
| |
| startScanBtn.disabled = false; |
| startScanBtn.classList.remove('bg-blue-400', 'cursor-not-allowed'); |
| startScanBtn.classList.add('bg-blue-600', 'hover:bg-blue-700'); |
| }, 1000); |
| } |
| }, 300); |
| }); |
| |
| |
| cleanAllBtn.addEventListener('click', function() { |
| threatsFound.classList.add('hidden'); |
| |
| |
| alert('¡Todas las amenazas han sido eliminadas con éxito!'); |
| }); |
| |
| |
| ignoreThreatsBtn.addEventListener('click', function() { |
| threatsFound.classList.add('hidden'); |
| |
| |
| alert('Advertencia: Has elegido ignorar las amenazas detectadas. Esto puede poner en riesgo tu sistema.'); |
| }); |
| |
| |
| function updateTimer() { |
| seconds++; |
| const minutes = Math.floor(seconds / 60); |
| const remainingSeconds = seconds % 60; |
| scanTime.textContent = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`; |
| } |
| |
| |
| document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { |
| checkbox.addEventListener('change', function() { |
| const label = this.nextElementSibling; |
| const span = label.querySelector('span'); |
| const statusText = label.nextElementSibling; |
| |
| if (this.checked) { |
| label.classList.remove('bg-gray-300'); |
| label.classList.add(this.id === 'real-time' ? 'bg-blue-500' : |
| this.id === 'web-protection' ? 'bg-green-500' : |
| this.id === 'email-protection' ? 'bg-purple-500' : |
| this.id === 'ransomware' ? 'bg-yellow-500' : |
| this.id === 'behavior' ? 'bg-red-500' : 'bg-indigo-500'); |
| span.style.transform = 'translateX(16px)'; |
| statusText.textContent = 'Activado'; |
| } else { |
| label.classList.add('bg-gray-300'); |
| label.classList.remove('bg-blue-500', 'bg-green-500', 'bg-purple-500', 'bg-yellow-500', 'bg-red-500', 'bg-indigo-500'); |
| span.style.transform = 'translateX(0)'; |
| statusText.textContent = 'Desactivado'; |
| } |
| }); |
| }); |
| }); |
| </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=Ronner82/test-2025" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
