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

600 lines
18 KiB
HTML
Raw Normal View History

2024-06-24 07:38:51 -06:00
<!DOCTYPE html>
<html lang="es">
2024-09-07 12:18:02 -06:00
<head>
2024-06-24 07:38:51 -06:00
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CBS CyberScan | Terminal Web de Escaneo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
2024-06-24 07:38:51 -06:00
<style>
:root {
--primary-color: #00ff8c;
--secondary-color: #232b38;
--accent-color: #0a4da3;
--text-color: #ffffff;
--terminal-bg: #0a0a0a;
--container-bg: rgba(35, 43, 56, 0.95);
2024-09-07 12:18:02 -06:00
}
body {
background-color: #121212;
color: var(--text-color);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
margin: 0;
padding: 20px 0;
display: flex;
flex-direction: column;
}
#particles-js {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.main-container {
flex: 1;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
}
.cyber-container {
background: var(--container-bg);
border: 1px solid var(--primary-color);
border-radius: 15px;
padding: 2rem;
box-shadow: 0 0 20px rgba(0, 255, 140, 0.2);
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.cyber-title {
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 2px;
2024-09-07 12:18:02 -06:00
text-align: center;
margin: 1rem 0;
font-weight: 600;
font-size: 2rem;
text-shadow: 0 0 10px rgba(0, 255, 140, 0.5);
2024-06-24 07:38:51 -06:00
}
.terminal {
background-color: var(--terminal-bg);
color: var(--primary-color);
font-family: 'Courier New', Courier, monospace;
2024-09-07 12:18:02 -06:00
padding: 20px;
border-radius: 10px;
height: 400px;
overflow-y: auto;
border: 1px solid var(--primary-color);
box-shadow: 0 0 10px rgba(0, 255, 140, 0.2);
margin-top: 20px;
font-size: 14px;
line-height: 1.4;
word-wrap: break-word;
white-space: pre-wrap;
position: relative;
2024-06-24 07:38:51 -06:00
}
.terminal::-webkit-scrollbar {
width: 8px;
2024-06-24 07:38:51 -06:00
}
.terminal::-webkit-scrollbar-track {
background: var(--terminal-bg);
}
.terminal::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 4px;
}
.terminal-line {
display: inline;
margin: 0;
padding: 0;
white-space: pre-wrap;
}
.cursor {
display: inline-block;
width: 8px;
height: 16px;
background-color: var(--primary-color);
animation: blink 1s infinite;
margin-left: 2px;
vertical-align: middle;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.control-panel {
background: rgba(10, 77, 163, 0.1);
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid var(--accent-color);
}
.cyber-btn {
background: var(--secondary-color);
color: var(--primary-color);
border: 1px solid var(--primary-color);
padding: 10px 20px;
border-radius: 5px;
2024-09-07 12:18:02 -06:00
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
cursor: pointer;
2024-06-24 07:38:51 -06:00
}
.cyber-btn:hover:not(:disabled) {
background: var(--primary-color);
color: var(--secondary-color);
box-shadow: 0 0 15px var(--primary-color);
2024-06-24 07:38:51 -06:00
}
.cyber-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
2024-06-24 07:38:51 -06:00
}
.cyber-input {
background: var(--terminal-bg);
border: 1px solid var(--primary-color);
color: var(--primary-color);
padding: 10px 15px;
border-radius: 5px;
2024-06-24 07:38:51 -06:00
}
.cyber-input:focus {
outline: none;
box-shadow: 0 0 10px var(--primary-color);
border-color: var(--primary-color);
color: var(--primary-color);
background: var(--terminal-bg);
}
2024-06-24 07:38:51 -06:00
.progress {
height: 10px;
background: var(--terminal-bg);
border: 1px solid var(--primary-color);
border-radius: 5px;
margin: 15px 0;
2024-09-07 12:18:02 -06:00
overflow: hidden;
2024-06-24 07:38:51 -06:00
}
2024-06-24 07:38:51 -06:00
.progress-bar {
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
transition: width 0.3s ease;
2024-06-24 07:38:51 -06:00
}
.scan-stats {
display: flex;
justify-content: space-between;
margin-top: 15px;
flex-wrap: wrap;
gap: 10px;
2024-06-24 07:38:51 -06:00
}
.stat-item {
background: rgba(10, 77, 163, 0.2);
padding: 10px;
border-radius: 5px;
border: 1px solid var(--accent-color);
flex: 1;
min-width: 200px;
text-align: center;
2024-06-24 07:38:51 -06:00
}
.error-text {
color: #ff4444;
}
.success-text {
color: var(--primary-color);
2024-06-24 07:38:51 -06:00
}
.logo-container {
text-align: center;
margin-bottom: 1rem;
}
.logo {
max-width: 50px;
height: auto;
}
2024-06-24 07:38:51 -06:00
@media (max-width: 768px) {
.cyber-container {
padding: 1rem;
}
.terminal {
height: 300px;
}
.control-panel {
padding: 1rem;
}
.cyber-title {
font-size: 1.5rem;
2024-09-07 12:18:02 -06:00
}
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="main-container">
<div class="cyber-container">
<div class="logo-container">
<img src="https://condorbs.net/favicon.ico" alt="CBS Logo" class="logo">
</div>
<h1 class="cyber-title">
<i class="fas fa-shield-alt"></i> CBS CyberScan
</h1>
<div class="control-panel">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="d-grid gap-3">
<input type="file" id="fileInput" class="cyber-input" style="display: none;">
<button id="uploadBtn" onclick="document.getElementById('fileInput').click()" class="cyber-btn w-100">
<i class="fas fa-upload me-2"></i> Iniciar Escaneo
</button>
<div class="input-group">
<input type="url" id="urlInput" class="cyber-input form-control"
placeholder="Ingrese URL para escanear">
<button id="urlBtn" class="cyber-btn" onclick="scanUrl()">
<i class="fas fa-globe me-2"></i> Escanear URL
</button>
</div>
</div>
</div>
</div>
</div>
<div id="progress" class="progress" style="display: none;">
<div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%;"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div id="scanOutput" class="terminal"></div>
<div class="scan-stats">
<div class="stat-item">
<i class="fas fa-clock"></i>
<span id="scanTime">Tiempo: 0s</span>
</div>
<div class="stat-item">
<i class="fas fa-shield-alt"></i>
<span id="scanStatus">Estado: Listo</span>
</div>
<div class="stat-item">
<i class="fas fa-virus-slash"></i>
<span id="threatCount">Amenazas: 0</span>
</div>
</div>
2024-09-07 12:18:02 -06:00
</div>
2024-06-24 07:38:51 -06:00
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// Terminal Writer Class
class TerminalWriter {
constructor(terminal) {
this.terminal = terminal;
this.queue = [];
this.isWriting = false;
this.typingSpeed = 5; // ms por carácter
this.lineDelay = 50; // ms entre líneas
}
2024-06-24 07:38:51 -06:00
write(text, type = '') {
return new Promise((resolve) => {
this.queue.push({ text, type, resolve });
if (!this.isWriting) {
this.processQueue();
}
});
2024-09-07 12:18:02 -06:00
}
2024-06-24 07:38:51 -06:00
async processQueue() {
if (this.queue.length === 0) {
this.isWriting = false;
return;
}
2024-06-24 07:38:51 -06:00
this.isWriting = true;
const { text, type, resolve } = this.queue.shift();
2024-06-24 07:38:51 -06:00
let formattedText = text;
if (type === 'error') {
formattedText = `<span class="error-text">${text}</span>`;
} else if (type === 'success') {
formattedText = `<span class="success-text">${text}</span>`;
} else if (text.toLowerCase().includes('found')) {
formattedText = `<span style="color: #ff4444;">${text}</span>`;
}
2024-06-24 07:38:51 -06:00
const newLine = document.createElement('span');
newLine.classList.add('terminal-line');
this.terminal.appendChild(newLine);
2024-06-24 07:38:51 -06:00
const cursor = document.createElement('span');
cursor.classList.add('cursor');
this.terminal.appendChild(cursor);
2024-06-24 07:38:51 -06:00
let charIndex = 0;
while (charIndex < formattedText.length) {
newLine.innerHTML = formattedText.substring(0, charIndex + 1);
charIndex++;
this.terminal.scrollTop = this.terminal.scrollHeight;
await this.sleep(this.typingSpeed);
}
cursor.remove();
await this.sleep(this.lineDelay);
resolve();
this.processQueue();
2024-09-07 12:18:02 -06:00
}
2024-06-24 07:38:51 -06:00
sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
2024-06-24 07:38:51 -06:00
clear() {
this.queue = [];
this.terminal.innerHTML = '';
this.isWriting = false;
}
}
2024-06-24 07:38:51 -06:00
// Initialize variables and socket connection
const socket = io();
let scanInProgress = false;
let scanStartTime;
let threatCount = 0;
let timerInterval;
2024-06-24 07:38:51 -06:00
const uploadBtn = document.getElementById('uploadBtn');
const urlBtn = document.getElementById('urlBtn');
const urlInput = document.getElementById('urlInput');
const scanTimeElement = document.getElementById('scanTime');
const scanStatusElement = document.getElementById('scanStatus');
const threatCountElement = document.getElementById('threatCount');
const terminalWriter = new TerminalWriter(document.getElementById('scanOutput'));
2024-09-07 12:18:02 -06:00
// Particles.js configuration
particlesJS('particles-js', {
particles: {
number: { value: 80 },
color: { value: '#00ff8c' },
shape: { type: 'circle' },
opacity: { value: 0.5, random: true },
size: { value: 3 },
line_linked: {
enable: true,
color: '#00ff8c',
opacity: 0.4
},
move: {
enable: true,
speed: 3,
direction: 'none',
random: true,
straight: false,
out_mode: 'out'
}
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'repulse'
}
}
}
});
function toggleControls(disabled) {
uploadBtn.disabled = disabled;
urlBtn.disabled = disabled;
urlInput.disabled = disabled;
}
function updateProgress(progress) {
const progressBar = document.getElementById('progressBar');
progressBar.style.width = `${progress}%`;
progressBar.setAttribute('aria-valuenow', progress);
}
2024-09-07 12:18:02 -06:00
function startScanTimer() {
scanStartTime = Date.now();
clearInterval(timerInterval);
timerInterval = setInterval(updateTimer, 1000);
}
function updateTimer() {
const elapsedTime = Math.floor((Date.now() - scanStartTime) / 1000);
scanTimeElement.textContent = `Tiempo: ${elapsedTime}s`;
}
function resetStats() {
threatCount = 0;
scanTimeElement.textContent = 'Tiempo: 0s';
scanStatusElement.textContent = 'Estado: Escaneando';
scanStatusElement.style.color = '#00ff8c';
threatCountElement.textContent = 'Amenazas: 0';
clearInterval(timerInterval);
}
function scanUrl() {
const url = urlInput.value;
if (!url) {
appendToTerminal('Error: Por favor ingrese una URL\n', 'error');
2024-09-07 12:18:02 -06:00
return;
}
startScan();
fetch('/scan_url', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url: url })
})
.then(handleResponse)
.catch(handleError);
}
2024-06-24 07:38:51 -06:00
document.getElementById('fileInput').addEventListener('change', function(e) {
if (e.target.files.length === 0) return;
2024-09-07 12:18:02 -06:00
const file = e.target.files[0];
const formData = new FormData();
formData.append('file', file);
2024-09-07 12:18:02 -06:00
startScan();
fetch('/upload', {
2024-09-07 12:18:02 -06:00
method: 'POST',
body: formData
2024-09-07 12:18:02 -06:00
})
.then(handleResponse)
.catch(handleError);
});
function startScan() {
terminalWriter.clear();
document.getElementById('progress').style.display = 'block';
scanInProgress = true;
toggleControls(true);
resetStats();
startScanTimer();
updateProgress(20);
threatCount = 0;
threatCountElement.textContent = 'Amenazas: 0';
scanStatusElement.textContent = 'Estado: Escaneando';
scanStatusElement.style.color = '#00ff8c';
}
function handleResponse(response) {
return response.json().then(data => {
if (data.error) {
appendToTerminal('Error: ' + data.error + '\n', 'error');
finishScan(false);
} else {
if (data.result) {
appendToTerminal('Yo a este lo conozco\n', 'success');
appendToTerminal('Fecha de escaneo previo: ' + data.result.scan_date + '\n');
appendToTerminal('Tipo de archivo: ' + data.result.file_type + '\n');
appendToTerminal('\nResultado del escaneo previo:\n');
appendToTerminal(data.result.scan_result + '\n');
if (data.result.scan_result.toLowerCase().includes('found')) {
threatCount++;
threatCountElement.textContent = `Amenazas: ${threatCount}`;
scanStatusElement.textContent = 'Estado: Amenaza Detectada';
scanStatusElement.style.color = '#ff4444';
}
finishScan(true);
2024-09-07 12:18:02 -06:00
} else {
appendToTerminal('Iniciando nuevo escaneo...\n');
updateProgress(40);
2024-09-07 12:18:02 -06:00
}
}
});
}
2024-09-07 12:18:02 -06:00
function handleError(error) {
appendToTerminal('Error: ' + error + '\n', 'error');
finishScan(false);
}
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);
updateProgress(60);
2024-09-07 12:18:02 -06:00
if (data.data.toLowerCase().includes('found')) {
threatCount++;
threatCountElement.textContent = `Amenazas: ${threatCount}`;
scanStatusElement.textContent = 'Estado: Amenaza Detectada';
scanStatusElement.style.color = '#ff4444';
2024-06-24 07:38:51 -06:00
}
if (data.data.includes('Infected files:')) {
const match = data.data.match(/Infected files:\s*(\d+)/);
if (match) {
const infectedCount = parseInt(match[1]);
if (infectedCount > 0) {
threatCount = infectedCount;
threatCountElement.textContent = `Amenazas: ${threatCount}`;
scanStatusElement.textContent = 'Estado: Amenazas Detectadas';
scanStatusElement.style.color = '#ff4444';
}
}
updateProgress(80);
}
if (data.data.includes('--- Escaneo completado ---')) {
finishScan(true);
2024-06-24 07:38:51 -06:00
}
2024-09-07 12:18:02 -06:00
});
function appendToTerminal(text, type = '') {
terminalWriter.write(text, type);
2024-09-07 12:18:02 -06:00
}
function finishScan(success = true) {
scanInProgress = false;
toggleControls(false);
document.getElementById('progress').style.display = 'none';
updateProgress(100);
clearInterval(timerInterval);
2024-06-24 07:38:51 -06:00
if (success) {
if (threatCount > 0) {
scanStatusElement.textContent = `Estado: ${threatCount} Amenaza(s) Detectada(s)`;
scanStatusElement.style.color = '#ff4444';
} else {
scanStatusElement.textContent = 'Estado: Archivo Seguro';
scanStatusElement.style.color = '#00ff8c';
2024-09-07 12:18:02 -06:00
}
} else {
scanStatusElement.textContent = 'Estado: Error';
scanStatusElement.style.color = '#ff4444';
}
document.getElementById('fileInput').value = '';
urlInput.value = '';
}
// Inicialización al cargar la página
window.onload = function() {
document.getElementById('fileInput').value = '';
document.getElementById('urlInput').value = '';
updateProgress(0);
toggleControls(false);
document.getElementById('progress').style.display = 'none';
};
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>