cbs-web-antivirus-scanner/templates/index.html

372 lines
13 KiB
HTML
Raw Permalink Normal View History

2024-06-24 07:38:51 -06:00
<!DOCTYPE html>
<html lang="en">
2024-09-07 12:18:02 -06:00
<head>
2024-06-24 07:38:51 -06:00
<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>
2024-09-07 12:18:02 -06:00
/* General styling */
body {
background-color: #1e1e2f;
color: #dcdcdc;
font-family: 'Roboto', sans-serif;
overflow: hidden; /* Para que no aparezca la barra de scroll */
}
2024-06-24 07:38:51 -06:00
h1 {
2024-09-07 12:18:02 -06:00
color: #00d1b2;
margin-bottom: 30px;
text-align: center;
2024-06-24 07:38:51 -06:00
}
.container {
2024-09-07 12:18:02 -06:00
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;
2024-06-24 07:38:51 -06:00
}
.form-control-file, .form-control, .btn {
2024-09-07 12:18:02 -06:00
border-radius: 50px;
margin-bottom: 15px;
2024-06-24 07:38:51 -06:00
}
.btn-primary, .btn-secondary {
2024-09-07 12:18:02 -06:00
width: 100%;
transition: all 0.3s ease;
2024-06-24 07:38:51 -06:00
}
.btn-primary:hover, .btn-secondary:hover {
2024-09-07 12:18:02 -06:00
background-color: #00b89c;
2024-06-24 07:38:51 -06:00
}
.btn-primary {
2024-09-07 12:18:02 -06:00
background-color: #00d1b2;
border: none;
2024-06-24 07:38:51 -06:00
}
.btn-secondary {
2024-09-07 12:18:02 -06:00
background-color: #007bff;
border: none;
2024-06-24 07:38:51 -06:00
}
.progress {
2024-09-07 12:18:02 -06:00
height: 20px;
border-radius: 50px;
overflow: hidden;
2024-06-24 07:38:51 -06:00
}
.progress-bar {
2024-09-07 12:18:02 -06:00
transition: width 0.4s ease;
2024-06-24 07:38:51 -06:00
}
.terminal {
2024-09-07 12:18:02 -06:00
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;
2024-06-24 07:38:51 -06:00
}
/* Scrollbar styling */
.terminal::-webkit-scrollbar {
2024-09-07 12:18:02 -06:00
width: 10px;
2024-06-24 07:38:51 -06:00
}
.terminal::-webkit-scrollbar-thumb {
2024-09-07 12:18:02 -06:00
background-color: #00d1b2;
border-radius: 10px;
2024-06-24 07:38:51 -06:00
}
/* Responsive design */
@media (max-width: 768px) {
2024-09-07 12:18:02 -06:00
.container {
width: 90%;
}
2024-06-24 07:38:51 -06:00
}
/* Fullscreen background for particles */
#particles-js {
2024-09-07 12:18:02 -06:00
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0; /* Debajo del contenido principal */
2024-06-24 07:38:51 -06:00
}
</style>
2024-09-07 12:18:02 -06:00
</head>
<body>
2024-06-24 07:38:51 -06:00
<div id="particles-js"></div>
<div class="container mt-4">
2024-09-07 12:18:02 -06:00
<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>
2024-06-24 07:38:51 -06:00
</div>
<script type="text/javascript">
2024-09-07 12:18:02 -06:00
var socket = io.connect('http://' + document.domain + ':' + location.port);
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
document.getElementById('startScanBtn').onclick = function() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
if (!file) {
appendToTerminal('<span style="color: red;">Por favor selecciona un archivo.</span>');
return;
}
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
appendToTerminal('<span style="color: green;">Subiendo archivo: ' + file.name + '</span>');
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
var formData = new FormData();
formData.append('file', file);
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
// Mostrar la barra de progreso y ocultar el botón
document.getElementById('progress').style.display = 'block';
document.getElementById('startScanBtn').style.display = 'none';
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
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%';
});
};
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
document.getElementById('startScanBtn').onclick = function() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
if (!file) {
appendToTerminal('<span style="color: red;">Por favor selecciona un archivo.</span>');
return;
}
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
appendToTerminal('<span style="color: green;">Subiendo archivo: ' + file.name + '</span>');
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
var formData = new FormData();
formData.append('file', file);
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
// Mostrar la barra de progreso y ocultar el botón
document.getElementById('progress').style.display = 'block';
document.getElementById('startScanBtn').style.display = 'none';
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
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%';
// Limpiar el input de archivo
document.getElementById('fileInput').value = '';
})
.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%';
// Limpiar el input de archivo en caso de error
document.getElementById('fileInput').value = '';
});
};
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;
}
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
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 => {
// Comprobar si la respuesta es JSON
const contentType = response.headers.get('content-type');
if (contentType && contentType.includes('application/json')) {
return response.json();
} else {
return response.text(); // Si no es JSON, tratarlo como texto
2024-06-24 07:38:51 -06:00
}
2024-09-07 12:18:02 -06:00
})
.then(data => {
if (typeof data === 'string') {
appendToTerminal('<span style="color: red;">Respuesta inesperada: ' + data + '</span>');
} else 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%';
// Limpiar el input de URL
document.getElementById('urlInput').value = '';
})
.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%';
// Limpiar el input de URL en caso de error
document.getElementById('urlInput').value = '';
});
};
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
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);
2024-06-24 07:38:51 -06:00
}
2024-09-07 12:18:02 -06:00
// 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];
2024-06-24 07:38:51 -06:00
}
2024-09-07 12:18:02 -06:00
});
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) + '%';
}
2024-06-24 07:38:51 -06:00
2024-09-07 12:18:02 -06:00
// 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
2024-06-24 07:38:51 -06:00
},
2024-09-07 12:18:02 -06:00
"onclick": {
"enable": false
2024-06-24 07:38:51 -06:00
},
2024-09-07 12:18:02 -06:00
"resize": true
},
},
"retina_detect": true
});
2024-06-24 07:38:51 -06:00
</script>
2024-09-07 12:18:02 -06:00
</body>
2024-06-24 07:38:51 -06:00
</html>