314 lines
12 KiB
HTML
314 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Condor Business Solutions SecureScan</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0"></script>
|
|
<style>
|
|
/* General styling */
|
|
body {
|
|
background-color: #1e1e2f;
|
|
color: #dcdcdc;
|
|
font-family: 'Roboto', sans-serif;
|
|
overflow: hidden; /* Para que no aparezca la barra de scroll */
|
|
}
|
|
h1 {
|
|
color: #00d1b2;
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
.container {
|
|
max-width: 600px;
|
|
margin: 40px auto;
|
|
padding: 20px;
|
|
background: rgba(41, 41, 61, 0.85); /* Fondo semi-transparente */
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
|
|
position: relative; /* Necesario para el contenedor */
|
|
z-index: 1;
|
|
}
|
|
.form-control-file, .form-control, .btn {
|
|
border-radius: 50px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.btn-primary, .btn-secondary {
|
|
width: 100%;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.btn-primary:hover, .btn-secondary:hover {
|
|
background-color: #00b89c;
|
|
}
|
|
.btn-primary {
|
|
background-color: #00d1b2;
|
|
border: none;
|
|
}
|
|
.btn-secondary {
|
|
background-color: #007bff;
|
|
border: none;
|
|
}
|
|
.progress {
|
|
height: 20px;
|
|
border-radius: 50px;
|
|
overflow: hidden;
|
|
}
|
|
.progress-bar {
|
|
transition: width 0.4s ease;
|
|
}
|
|
.terminal {
|
|
height: 400px;
|
|
overflow-y: scroll;
|
|
background-color: #1a1a2e;
|
|
color: #00d1b2;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
/* Scrollbar styling */
|
|
.terminal::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
.terminal::-webkit-scrollbar-thumb {
|
|
background-color: #00d1b2;
|
|
border-radius: 10px;
|
|
}
|
|
/* Responsive design */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
width: 90%;
|
|
}
|
|
}
|
|
/* Fullscreen background for particles */
|
|
#particles-js {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 0; /* Debajo del contenido principal */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="particles-js"></div>
|
|
<div class="container mt-4">
|
|
<h1>Condor Business Solutions CyberScan|Terminal Web de Escaneo</h1>
|
|
<input type="file" id="fileInput" class="form-control-file mb-3">
|
|
<button id="startScanBtn" class="btn btn-primary">Comenzar Escaneo</button>
|
|
<input type="text" id="urlInput" class="form-control" placeholder="Introduce una URL para escanear">
|
|
<button id="startUrlScanBtn" class="btn btn-secondary">Escanear URL</button>
|
|
<div id="progress" class="progress mt-3" style="display: none;">
|
|
<div id="progressBar" class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div id="scanOutput" class="terminal mt-4"></div>
|
|
<div id="signaturesUsed" class="mt-3" style="display: none;">
|
|
<strong>Número de firmas utilizadas:</strong> <span id="signaturesCount"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var socket = io.connect('http://' + document.domain + ':' + location.port);
|
|
|
|
document.getElementById('startScanBtn').onclick = function() {
|
|
var fileInput = document.getElementById('fileInput');
|
|
var file = fileInput.files[0];
|
|
|
|
if (!file) {
|
|
appendToTerminal('<span style="color: red;">Por favor selecciona un archivo.</span>');
|
|
return;
|
|
}
|
|
|
|
appendToTerminal('<span style="color: green;">Subiendo archivo: ' + file.name + '</span>');
|
|
|
|
var formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
// Mostrar la barra de progreso y ocultar el botón
|
|
document.getElementById('progress').style.display = 'block';
|
|
document.getElementById('startScanBtn').style.display = 'none';
|
|
|
|
fetch('/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
appendToTerminal('<span style="color: green;">' + data + '</span>');
|
|
// Restablecer la visibilidad del botón después del escaneo
|
|
document.getElementById('startScanBtn').style.display = 'block';
|
|
document.getElementById('progress').style.display = 'none';
|
|
document.getElementById('progressBar').style.width = '0%';
|
|
})
|
|
.catch(error => {
|
|
appendToTerminal('<span style="color: red;">Error al subir el archivo: ' + error + '</span>');
|
|
// Restablecer la visibilidad del botón en caso de error
|
|
document.getElementById('startScanBtn').style.display = 'block';
|
|
document.getElementById('progress').style.display = 'none';
|
|
document.getElementById('progressBar').style.width = '0%';
|
|
});
|
|
};
|
|
|
|
document.getElementById('startUrlScanBtn').onclick = function() {
|
|
var urlInput = document.getElementById('urlInput').value;
|
|
|
|
if (!urlInput) {
|
|
appendToTerminal('<span style="color: red;">Por favor introduce una URL.</span>');
|
|
return;
|
|
}
|
|
|
|
// Asegurar que la URL tenga un esquema
|
|
if (!urlInput.startsWith('http://') && !urlInput.startsWith('https://')) {
|
|
urlInput = 'http://' + urlInput;
|
|
}
|
|
|
|
appendToTerminal('<span style="color: green;">Escaneando URL: ' + urlInput + '</span>');
|
|
|
|
// Mostrar la barra de progreso y ocultar el botón
|
|
document.getElementById('progress').style.display = 'block';
|
|
document.getElementById('startUrlScanBtn').style.display = 'none';
|
|
|
|
fetch('/scan_url', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ url: urlInput })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
appendToTerminal('<span style="color: red;">Error: ' + data.error + '</span>');
|
|
} else {
|
|
appendToTerminal('<span style="color: green;">' + data.message + '</span>');
|
|
}
|
|
// Restablecer la visibilidad del botón después del escaneo
|
|
document.getElementById('startUrlScanBtn').style.display = 'block';
|
|
document.getElementById('progress').style.display = 'none';
|
|
document.getElementById('progressBar').style.width = '0%';
|
|
})
|
|
.catch(error => {
|
|
appendToTerminal('<span style="color: red;">Error al escanear la URL: ' + error + '</span>');
|
|
// Restablecer la visibilidad del botón en caso de error
|
|
document.getElementById('startUrlScanBtn').style.display = 'block';
|
|
document.getElementById('progress').style.display = 'none';
|
|
document.getElementById('progressBar').style.width = '0%';
|
|
});
|
|
};
|
|
|
|
socket.on('scan_output', function(data) {
|
|
appendToTerminal(data.data);
|
|
|
|
// Parsear porcentaje de progreso si está presente
|
|
var progressMatch = data.data.match(/(\d+\.\d+)%/);
|
|
if (progressMatch) {
|
|
var percent = parseFloat(progressMatch[1]);
|
|
updateProgressBar(percent);
|
|
}
|
|
|
|
// Mostrar el número de firmas utilizadas (filtrando solo el número)
|
|
var signaturesMatch = data.data.match(/Known viruses: (\d+)/);
|
|
if (signaturesMatch) {
|
|
document.getElementById('signaturesUsed').style.display = 'block';
|
|
document.getElementById('signaturesCount').textContent = signaturesMatch[1];
|
|
}
|
|
});
|
|
|
|
function appendToTerminal(message) {
|
|
var scanOutput = document.getElementById('scanOutput');
|
|
var newLine = document.createElement('div');
|
|
newLine.innerHTML = message;
|
|
scanOutput.appendChild(newLine);
|
|
scanOutput.scrollTop = scanOutput.scrollHeight;
|
|
}
|
|
|
|
function updateProgressBar(percent) {
|
|
var progressBar = document.getElementById('progressBar');
|
|
progressBar.style.width = percent + '%';
|
|
progressBar.setAttribute('aria-valuenow', percent);
|
|
progressBar.innerHTML = percent.toFixed(2) + '%';
|
|
}
|
|
|
|
// Configurar particles.js
|
|
particlesJS('particles-js', {
|
|
"particles": {
|
|
"number": {
|
|
"value": 80,
|
|
"density": {
|
|
"enable": true,
|
|
"value_area": 800
|
|
}
|
|
},
|
|
"color": {
|
|
"value": "#ffffff"
|
|
},
|
|
"shape": {
|
|
"type": "circle",
|
|
"stroke": {
|
|
"width": 0,
|
|
"color": "#000000"
|
|
},
|
|
"polygon": {
|
|
"nb_sides": 5
|
|
},
|
|
},
|
|
"opacity": {
|
|
"value": 0.5,
|
|
"random": false,
|
|
"anim": {
|
|
"enable": false,
|
|
"speed": 1,
|
|
"opacity_min": 0.1,
|
|
"sync": false
|
|
}
|
|
},
|
|
"size": {
|
|
"value": 3,
|
|
"random": true,
|
|
"anim": {
|
|
"enable": false,
|
|
"speed": 40,
|
|
"size_min": 0.1,
|
|
"sync": false
|
|
}
|
|
},
|
|
"line_linked": {
|
|
"enable": true,
|
|
"distance": 150,
|
|
"color": "#ffffff",
|
|
"opacity": 0.4,
|
|
"width": 1
|
|
},
|
|
"move": {
|
|
"enable": true,
|
|
"speed": 6,
|
|
"direction": "none",
|
|
"random": false,
|
|
"straight": false,
|
|
"out_mode": "out",
|
|
"attract": {
|
|
"enable": false,
|
|
"rotateX": 600,
|
|
"rotateY": 1200
|
|
}
|
|
}
|
|
},
|
|
"interactivity": {
|
|
"detect_on": "canvas",
|
|
"events": {
|
|
"onhover": {
|
|
"enable": false
|
|
},
|
|
"onclick": {
|
|
"enable": false
|
|
},
|
|
"resize": true
|
|
},
|
|
},
|
|
"retina_detect": true
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|