feat: Actualización mayor a versión 2.0.0

- Nueva interfaz cibernética con efectos visuales
- Sistema de escritura tipo terminal
- Panel de estadísticas en tiempo real
- Mejor manejo de amenazas
- Efectos visuales y animaciones mejoradas
- Optimización del sistema de escaneo

app.py

@@ -8,11 +8,44 @@ import requests
 import hashlib
 import mysql.connector
 import filetype
+from urllib.parse import urlparse
+from pathlib import Path
+import logging
+
+# Cargar variables de entorno al inicio
+load_dotenv()
 
 app = Flask(__name__)
-socketio = SocketIO(app)
+socketio = SocketIO(app, cors_allowed_origins="*")
+
+# Configuración de logging
+logging.basicConfig(
+    level=logging.DEBUG,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+# Configuración de la base de datos
+DB_CONFIG = {
+    'host': os.getenv('DB_HOST'),
+    'user': os.getenv('DB_USER'),
+    'password': os.getenv('DB_PASSWD'),
+    'database': os.getenv('DB_NAME'),
+    'charset': os.getenv('DB_CHARSET'),
+    'collation': os.getenv('DB_COALLITION')
+}
+
+def get_db_connection():
+    """Establece y retorna una conexión a la base de datos."""
+    try:
+        return mysql.connector.connect(**DB_CONFIG)
+    except mysql.connector.Error as err:
+        logger.error(f"Error connecting to database: {err}")
+        raise
 
 def get_file_hashes(file_path):
+    """Calcula los hashes de un archivo."""
+    try:
         hash_md5 = hashlib.md5()
         hash_sha1 = hashlib.sha1()
         hash_sha256 = hashlib.sha256()
@@ -28,164 +61,266 @@ def get_file_hashes(file_path):
             "sha1": hash_sha1.hexdigest(),
             "sha256": hash_sha256.hexdigest()
         }
+    except IOError as e:
+        logger.error(f"Error reading file for hashing: {e}")
+        raise
 
 def get_file_type(file_path):
+    """Determina el tipo MIME del archivo."""
+    try:
         kind = filetype.guess(file_path)
-    if kind is None:
+        return kind.mime if kind else "application/octet-stream"
-        return "Unknown"
+    except Exception as e:
-    return kind.mime
+        logger.error(f"Error determining file type: {e}")
+        return "application/octet-stream"
 
 def check_file_in_db(hashes):
-    connection = mysql.connector.connect(
+    """Verifica si el archivo ya existe en la base de datos."""
-        host=os.getenv('DB_HOST'),
+    if not all(hashes.values()):
-        user=os.getenv('DB_USER'), 
+        return None
-        password=os.getenv('DB_PASSWD'),
+        
-        database=os.getenv('DB_NAME'),
+    try:
-        charset=os.getenv('DB_CHARSET'),
+        connection = get_db_connection()
-        collation=os.getenv('DB_COALLITION')
+        cursor = connection.cursor(dictionary=True)
-    )
+        
-    cursor = connection.cursor()
+        query = """
+            SELECT filename, file_type, scan_result,
+                   DATE_FORMAT(scan_date, '%Y-%m-%d %H:%i:%s') as scan_date,
+                   md5_hash, sha1_hash, sha256_hash
+            FROM file_scans 
+            WHERE md5_hash = %(md5)s 
+            OR sha1_hash = %(sha1)s 
+            OR sha256_hash = %(sha256)s
+            LIMIT 1
+        """
+        cursor.execute(query, {
+            'md5': hashes['md5'],
+            'sha1': hashes['sha1'],
+            'sha256': hashes['sha256']
+        })
         
-    query = "SELECT scan_result FROM file_scans WHERE md5_hash = %s OR sha1_hash = %s OR sha256_hash = %s"
-    cursor.execute(query, (hashes["md5"], hashes["sha1"], hashes["sha256"]))
         result = cursor.fetchone()
-
         cursor.close()
         connection.close()
 
         return result
         
+    except mysql.connector.Error as err:
+        logger.error(f"Database error: {err}")
+        raise
+
 def store_file_in_db(filename, hashes, file_type, scan_result):
-    connection = mysql.connector.connect(
+    """Almacena los resultados del escaneo en la base de datos."""
-        host=os.getenv('DB_HOST'),
+    if not all([filename, hashes, file_type, scan_result]):
-        user=os.getenv('DB_USER'), 
+        raise ValueError("Missing required parameters for database storage")
-        password=os.getenv('DB_PASSWD'),
+        
-        database=os.getenv('DB_NAME'),
+    try:
-        charset=os.getenv('DB_CHARSET'),
+        connection = get_db_connection()
-        collation=os.getenv('DB_COALLITION')
-    )
         cursor = connection.cursor()
         
         query = """
-    INSERT INTO file_scans (filename, md5_hash, sha1_hash, sha256_hash, file_type, scan_result)
+            INSERT INTO file_scans 
-    VALUES (%s, %s, %s, %s, %s, %s)
+            (filename, md5_hash, sha1_hash, sha256_hash, file_type, scan_result)
+            VALUES (%(filename)s, %(md5)s, %(sha1)s, %(sha256)s, %(file_type)s, %(scan_result)s)
         """
-    cursor.execute(query, (filename, hashes["md5"], hashes["sha1"], hashes["sha256"], file_type, scan_result))
-    connection.commit()
         
+        cursor.execute(query, {
+            'filename': filename,
+            'md5': hashes['md5'],
+            'sha1': hashes['sha1'],
+            'sha256': hashes['sha256'],
+            'file_type': file_type,
+            'scan_result': scan_result
+        })
+        
+        connection.commit()
         cursor.close()
         connection.close()
         
-@app.route('/', methods=['GET', 'POST'])
+    except mysql.connector.Error as err:
+        logger.error(f"Error storing scan results: {err}")
+        raise
+
+@app.route('/')
 def index():
     return render_template('index.html')
 
 @app.route('/upload', methods=['POST'])
 def upload_file():
-    file = request.files.get('file')
+    """Maneja la subida y escaneo de archivos."""
-    if file:
+    try:
-        file_path = os.path.join('/tmp', f"{uuid.uuid4()}_{file.filename}")
+        if 'file' not in request.files:
-        file.save(file_path)
+            return jsonify({'error': 'No se recibió ningún archivo'}), 400
         
-        # Obtener los hashes y el tipo de archivo
+        file = request.files['file']
-        hashes = get_file_hashes(file_path)
+        if not file.filename:
-        file_type = get_file_type(file_path)
+            return jsonify({'error': 'Nombre de archivo vacío'}), 400
 
-        # Verificar si el archivo ya fue escaneado
+        # Guardar archivo temporalmente y calcular hashes
+        temp_path = Path('/tmp') / f"{uuid.uuid4()}_{file.filename}"
+        file.save(str(temp_path))
+
+        # Calcular hashes y tipo de archivo
+        hashes = get_file_hashes(str(temp_path))
+        file_type = get_file_type(str(temp_path))
+
+        # Verificar si existe en la base de datos
         existing_result = check_file_in_db(hashes)
+        
         if existing_result:
-            os.remove(file_path)
+            # Si existe, eliminar archivo temporal y devolver resultado existente
-            # Formatear el resultado del escaneo para que sea más legible
+            temp_path.unlink()
-            scan_result = format_scan_result(existing_result[0])
             return jsonify({
-                'message': 'Este archivo ya lo he visto antes.',
+                'message': 'Yo a este lo conozco',
-                'scan_result': scan_result
+                'result': {
+                    'filename': existing_result['filename'],
+                    'file_type': existing_result['file_type'],
+                    'scan_date': existing_result['scan_date'],
+                    'scan_result': existing_result['scan_result'],
+                    'hashes': {
+                        'md5': existing_result['md5_hash'],
+                        'sha1': existing_result['sha1_hash'],
+                        'sha256': existing_result['sha256_hash']
+                    }
+                }
             })
 
-        # Ejecuta el escaneo en un hilo separado para no bloquear la aplicación
+        # Si no existe, iniciar escaneo
-        socketio.start_background_task(target=scan_file, file_path=file_path, hashes=hashes, file_type=file_type, filename=file.filename)
+        socketio.start_background_task(
+            target=scan_file,
+            file_path=str(temp_path),
+            hashes=hashes,
+            file_type=file_type,
+            filename=file.filename
+        )
 
-        return jsonify({'message': 'Archivo subido exitosamente: ' + file.filename})
+        return jsonify({
-    return jsonify({'error': 'No se recibió ningún archivo'}), 400
+            'message': f'Archivo {file.filename} subido exitosamente. Iniciando escaneo...',
+            'hashes': hashes
+        })
+
+    except Exception as e:
+        logger.error(f"Error in upload_file: {e}")
+        return jsonify({'error': str(e)}), 500
 
 @app.route('/scan_url', methods=['POST'])
 def scan_url():
+    """Maneja el escaneo de archivos desde URLs."""
+    try:
         url = request.json.get('url')
         if not url:
-        return jsonify({'error': 'No URL provided'}), 400
+            return jsonify({'error': 'URL no proporcionada'}), 400
 
-    # Añadir esquema si falta
+        # Validar y normalizar URL
-    if not url.startswith(('http://', 'https://')):
+        parsed_url = urlparse(url if '://' in url else f'http://{url}')
-        url = 'http://' + url
+        if not all([parsed_url.scheme, parsed_url.netloc]):
+            return jsonify({'error': 'URL inválida'}), 400
+
+        # Descargar archivo
+        try:
+            response = requests.get(parsed_url.geturl(), timeout=30)
+            response.raise_for_status()
+        except requests.exceptions.RequestException as e:
+            return jsonify({'error': f'Error al descargar la URL: {str(e)}'}), 400
+
+        # Crear archivo temporal
+        file_path = Path('/tmp') / f"{uuid.uuid4()}_downloaded_content"
+        file_path.write_bytes(response.content)
 
         try:
-        # Descargar el contenido de la URL a un archivo temporal
+            # Calcular hashes y tipo de archivo
-        response = requests.get(url)
+            hashes = get_file_hashes(str(file_path))
-        if response.status_code != 200:
+            file_type = get_file_type(str(file_path))
-            return jsonify({'error': f'Error al descargar la URL: {response.status_code}'}), 400
             
-        file_path = os.path.join('/tmp', f"{uuid.uuid4()}_downloaded_content")
+            # Obtener nombre del archivo de la URL o usar uno genérico
-        with open(file_path, 'wb') as temp_file:
+            filename = Path(parsed_url.path).name or "downloaded_file"
-            temp_file.write(response.content)
             
-        # Obtener los hashes y el tipo de archivo
+            # Verificar si existe en la base de datos
-        hashes = get_file_hashes(file_path)
-        file_type = get_file_type(file_path)
-
-        # Verificar si el archivo ya fue escaneado
             existing_result = check_file_in_db(hashes)
+            
             if existing_result:
-            os.remove(file_path)
+                # Si existe, eliminar archivo temporal y devolver resultado existente
-            # Formatear el resultado del escaneo para que sea más legible
+                file_path.unlink()
-            scan_result = format_scan_result(existing_result[0])
                 return jsonify({
-                'message': 'Este archivo ya lo he visto antes.',
+                    'message': 'Yo a este lo conozco',
-                'scan_result': scan_result
+                    'result': {
+                        'filename': existing_result['filename'],
+                        'file_type': existing_result['file_type'],
+                        'scan_date': existing_result['scan_date'],
+                        'scan_result': existing_result['scan_result'],
+                        'hashes': {
+                            'md5': existing_result['md5_hash'],
+                            'sha1': existing_result['sha1_hash'],
+                            'sha256': existing_result['sha256_hash']
+                        }
+                    }
                 })
 
-        # Ejecutar el escaneo en un hilo separado para no bloquear la aplicación
+            # Si no existe, iniciar escaneo
-        socketio.start_background_task(target=scan_file, file_path=file_path, hashes=hashes, file_type=file_type, filename=filename)
+            socketio.start_background_task(
+                target=scan_file,
+                file_path=str(file_path),
+                hashes=hashes,
+                file_type=file_type,
+                filename=filename
+            )
+
+            return jsonify({
+                'message': 'URL descargada. Iniciando análisis...',
+                'hashes': hashes
+            })
 
-        return jsonify({'message': f'Archivo descargado y guardado como {file_path}. El escaneo está en progreso.'}), 200
         except Exception as e:
-        return jsonify({'error': str(e)}), 500
+            # Asegurar limpieza del archivo temporal en caso de error
+            if file_path.exists():
+                file_path.unlink()
+            raise
+
+    except Exception as e:
+        logger.error(f"Error in scan_url: {e}")
+        return jsonify({'error': 'Error interno del servidor'}), 500
 
 def scan_file(file_path, hashes, file_type, filename):
+    """Ejecuta el escaneo del archivo."""
     try:
-        # Ejecuta el comando de escaneo
+        # Ejecutar ClamAV
         scan_command = ["clamscan", "-r", file_path]
-        process = subprocess.Popen(scan_command, stdout=subprocess.PIPE, stderr=subprocess.PIPE, universal_newlines=True)
+        process = subprocess.run(
+            scan_command,
+            capture_output=True,
+            text=True,
+            check=True,
+            timeout=300
+        )
 
-        # Lee la salida y los errores usando communicate()
+        # Procesar y emitir resultado línea por línea
-        scan_output, error_output = process.communicate()
+        scan_output = process.stdout
+        for line in scan_output.split('\n'):
+            if line.strip():
+                socketio.emit('scan_output', {'data': line + '\n'})
 
-        # Verificar el código de retorno del proceso
+        # Almacenar resultado en la base de datos
-        if process.returncode != 0:
-            socketio.emit('scan_output', {'data': f'Error en el escaneo: {error_output}'})
-            return
-
-        # Si no hubo errores, emitir la salida del escaneo
-        socketio.emit('scan_output', {'data': scan_output})
-
-        # Emitir mensaje de escaneo completo
-        socketio.emit('scan_output', {'data': '--- Escaneo completado ---'})
-
-        # Almacenar los hashes, el tipo de archivo y el resultado del escaneo en la base de datos
         store_file_in_db(filename, hashes, file_type, scan_output)
 
-    except Exception as e:
+        # Emitir mensaje de finalización
-        socketio.emit('scan_output', {'data': f'Error: {str(e)}'})
+        socketio.emit('scan_output', {'data': '\n--- Escaneo completado ---\n'})
-    finally:
-        # Asegúrate de eliminar el archivo temporal después del escaneo
-        if os.path.exists(file_path):
-            os.remove(file_path)
 
-def format_scan_result(scan_result):
+    except subprocess.TimeoutExpired:
-    # Formatear el resultado del escaneo para mejor legibilidad
+        socketio.emit('scan_output', {'data': 'Error: El escaneo excedió el tiempo límite\n'})
-    formatted_result = scan_result.replace("\n", "<br>")
+    except subprocess.CalledProcessError as e:
-    return formatted_result
+        socketio.emit('scan_output', {'data': f'Error en el escaneo: {e.stderr}\n'})
+    except Exception as e:
+        socketio.emit('scan_output', {'data': f'Error: {str(e)}\n'})
+    finally:
+        # Limpiar archivo temporal
+        try:
+            Path(file_path).unlink(missing_ok=True)
+        except Exception as e:
+            logger.error(f"Error removing temporary file: {e}")
 
 if __name__ == '__main__':
-    socketio.run(app, host='0.0.0.0', port=5001, debug=os.getenv('FLASK_DEBUG', 'False').lower() == 'true')
+    # Asegurarse de que el directorio temporal existe
-
+    Path('/tmp').mkdir(exist_ok=True)
     
+    # Iniciar la aplicación
+    socketio.run(app, debug=os.getenv('FLASK_DEBUG', 'False').lower() == 'true')

templates/index.html

@@ -1,371 +1,599 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
   <head>
     <meta charset="UTF-8">
-    <title>Condor Business Solutions SecureScan</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>
+    <title>CBS CyberScan | Terminal Web de Escaneo</title>
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <style>
-/* General styling */
+:root {
-body {
+  --primary-color: #00ff8c;
-  background-color: #1e1e2f;
+  --secondary-color: #232b38;
-  color: #dcdcdc;
+  --accent-color: #0a4da3;
-  font-family: 'Roboto', sans-serif;
+  --text-color: #ffffff;
-  overflow: hidden; /* Para que no aparezca la barra de scroll */
+  --terminal-bg: #0a0a0a;
+  --container-bg: rgba(35, 43, 56, 0.95);
 }
-        h1 {
+
-          color: #00d1b2;
+        body {
-          margin-bottom: 30px;
+          background-color: #121212;
-          text-align: center;
+          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;
         }
-        .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;
+          position: fixed;
-          width: 100%;
-          height: 100%;
           top: 0;
           left: 0;
-          z-index: 0; /* Debajo del contenido principal */
+          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;
+          text-align: center;
+          margin: 1rem 0;
+          font-weight: 600;
+          font-size: 2rem;
+          text-shadow: 0 0 10px rgba(0, 255, 140, 0.5);
+        }
+
+        .terminal {
+          background-color: var(--terminal-bg);
+          color: var(--primary-color);
+          font-family: 'Courier New', Courier, monospace;
+          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;
+        }
+
+        .terminal::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        .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;
+          transition: all 0.3s ease;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+          font-weight: 600;
+          cursor: pointer;
+        }
+
+        .cyber-btn:hover:not(:disabled) {
+          background: var(--primary-color);
+          color: var(--secondary-color);
+          box-shadow: 0 0 15px var(--primary-color);
+        }
+
+        .cyber-btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .cyber-input {
+          background: var(--terminal-bg);
+          border: 1px solid var(--primary-color);
+          color: var(--primary-color);
+          padding: 10px 15px;
+          border-radius: 5px;
+        }
+
+        .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);
+        }
+
+        .progress {
+          height: 10px;
+          background: var(--terminal-bg);
+          border: 1px solid var(--primary-color);
+          border-radius: 5px;
+          margin: 15px 0;
+          overflow: hidden;
+        }
+
+        .progress-bar {
+          background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
+          transition: width 0.3s ease;
+        }
+
+        .scan-stats {
+          display: flex;
+          justify-content: space-between;
+          margin-top: 15px;
+          flex-wrap: wrap;
+          gap: 10px;
+        }
+
+        .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;
+        }
+
+        .error-text {
+          color: #ff4444;
+        }
+
+        .success-text {
+          color: var(--primary-color);
+        }
+
+        .logo-container {
+          text-align: center;
+          margin-bottom: 1rem;
+        }
+
+        .logo {
+          max-width: 50px;
+          height: auto;
+        }
+
+        @media (max-width: 768px) {
+          .cyber-container {
+            padding: 1rem;
+          }
+
+          .terminal {
+            height: 300px;
+          }
+
+          .control-panel {
+            padding: 1rem;
+          }
+
+          .cyber-title {
+            font-size: 1.5rem;
+          }
         }
     </style>
   </head>
   <body>
     <div id="particles-js"></div>
-    <div class="container mt-4">
+
-      <h1>Condor Business Solutions CyberScan|Terminal Web de Escaneo</h1>
+    <div class="main-container">
-      <input type="file" id="fileInput" class="form-control-file mb-3">
+      <div class="cyber-container">
-      <button id="startScanBtn" class="btn btn-primary">Comenzar Escaneo</button>
+        <div class="logo-container">
-      <input type="text" id="urlInput" class="form-control" placeholder="Introduce una URL para escanear">
+          <img src="https://condorbs.net/favicon.ico" alt="CBS Logo" class="logo">
-      <button id="startUrlScanBtn" class="btn btn-secondary">Escanear URL</button>
+        </div>
-      <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>
+        <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 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">
+        <div id="progress" class="progress" style="display: none;">
-      var socket = io.connect('http://' + document.domain + ':' + location.port);
+          <div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%;" 
+                                                                        aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+        </div>
 
-      document.getElementById('startScanBtn').onclick = function() {
+        <div id="scanOutput" class="terminal"></div>
-        var fileInput = document.getElementById('fileInput');
-        var file = fileInput.files[0];
 
-        if (!file) {
+        <div class="scan-stats">
-          appendToTerminal('<span style="color: red;">Por favor selecciona un archivo.</span>');
+          <div class="stat-item">
-          return;
+            <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>
+      </div>
+    </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
         }
 
-        appendToTerminal('<span style="color: green;">Subiendo archivo: ' + file.name + '</span>');
+        write(text, type = '') {
-
+          return new Promise((resolve) => {
-        var formData = new FormData();
+            this.queue.push({ text, type, resolve });
-        formData.append('file', file);
+            if (!this.isWriting) {
-
+              this.processQueue();
-        // 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('startScanBtn').onclick = function() {
+        async processQueue() {
-        var fileInput = document.getElementById('fileInput');
+          if (this.queue.length === 0) {
-        var file = fileInput.files[0];
+            this.isWriting = false;
-
-        if (!file) {
-          appendToTerminal('<span style="color: red;">Por favor selecciona un archivo.</span>');
             return;
           }
 
-        appendToTerminal('<span style="color: green;">Subiendo archivo: ' + file.name + '</span>');
+          this.isWriting = true;
+          const { text, type, resolve } = this.queue.shift();
 
-        var formData = new FormData();
+          let formattedText = text;
-        formData.append('file', file);
+          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>`;
+          }
 
-        // Mostrar la barra de progreso y ocultar el botón
+          const newLine = document.createElement('span');
-        document.getElementById('progress').style.display = 'block';
+          newLine.classList.add('terminal-line');
-        document.getElementById('startScanBtn').style.display = 'none';
+          this.terminal.appendChild(newLine);
 
-        fetch('/upload', {
+          const cursor = document.createElement('span');
-          method: 'POST',
+          cursor.classList.add('cursor');
-          body: formData
+          this.terminal.appendChild(cursor);
-        })
+
-          .then(response => response.text())
+          let charIndex = 0;
-          .then(data => {
+          while (charIndex < formattedText.length) {
-            appendToTerminal('<span style="color: green;">' + data + '</span>');
+            newLine.innerHTML = formattedText.substring(0, charIndex + 1);
-            // Restablecer la visibilidad del botón después del escaneo
+            charIndex++;
-            document.getElementById('startScanBtn').style.display = 'block';
+            this.terminal.scrollTop = this.terminal.scrollHeight;
-            document.getElementById('progress').style.display = 'none';
+            await this.sleep(this.typingSpeed);
-            document.getElementById('progressBar').style.width = '0%';
+          }
-            // Limpiar el input de archivo
+
-            document.getElementById('fileInput').value = '';
+          cursor.remove();
-          })
+          await this.sleep(this.lineDelay);
-          .catch(error => {
+          resolve();
-            appendToTerminal('<span style="color: red;">Error al subir el archivo: ' + error + '</span>');
+          this.processQueue();
-            // Restablecer la visibilidad del botón en caso de error
+        }
-            document.getElementById('startScanBtn').style.display = 'block';
+
-            document.getElementById('progress').style.display = 'none';
+        sleep(ms) {
-            document.getElementById('progressBar').style.width = '0%';
+          return new Promise(resolve => setTimeout(resolve, ms));
-            // Limpiar el input de archivo en caso de error
+        }
-            document.getElementById('fileInput').value = '';
+
+        clear() {
+          this.queue = [];
+          this.terminal.innerHTML = '';
+          this.isWriting = false;
+        }
+      }
+
+      // Initialize variables and socket connection
+      const socket = io();
+      let scanInProgress = false;
+      let scanStartTime;
+      let threatCount = 0;
+      let timerInterval;
+
+      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'));
+
+      // 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'
+            }
+          }
+        }
       });
-      };
 
-      document.getElementById('startUrlScanBtn').onclick = function() {
+      function toggleControls(disabled) {
-        var urlInput = document.getElementById('urlInput').value;
+        uploadBtn.disabled = disabled;
+        urlBtn.disabled = disabled;
+        urlInput.disabled = disabled;
+      }
 
-        if (!urlInput) {
+      function updateProgress(progress) {
-          appendToTerminal('<span style="color: red;">Por favor introduce una URL.</span>');
+        const progressBar = document.getElementById('progressBar');
+        progressBar.style.width = `${progress}%`;
+        progressBar.setAttribute('aria-valuenow', progress);
+      }
+
+      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');
           return;
         }
 
-        // Asegurar que la URL tenga un esquema
+        startScan();
-        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: {
+          headers: { 'Content-Type': 'application/json' },
-            'Content-Type': 'application/json'
+          body: JSON.stringify({ url: url })
-          },
-          body: JSON.stringify({ url: urlInput })
         })
-          .then(response => {
+          .then(handleResponse)
-            // Comprobar si la respuesta es JSON
+          .catch(handleError);
-            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
       }
-          })
-          .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 = '';
-          });
-      };
 
+      document.getElementById('fileInput').addEventListener('change', function(e) {
+        if (e.target.files.length === 0) return;
+
+        const file = e.target.files[0];
+        const formData = new FormData();
+        formData.append('file', file);
+
+        startScan();
+        fetch('/upload', {
+          method: 'POST',
+          body: formData
+        })
+          .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);
+            } else {
+              appendToTerminal('Iniciando nuevo escaneo...\n');
+              updateProgress(40);
+            }
+          }
+        });
+      }
+
+      function handleError(error) {
+        appendToTerminal('Error: ' + error + '\n', 'error');
+        finishScan(false);
+      }
 
       socket.on('scan_output', function(data) {
         appendToTerminal(data.data);
+        updateProgress(60);
 
-        // Parsear porcentaje de progreso si está presente
+        if (data.data.toLowerCase().includes('found')) {
-        var progressMatch = data.data.match(/(\d+\.\d+)%/);
+          threatCount++;
-        if (progressMatch) {
+          threatCountElement.textContent = `Amenazas: ${threatCount}`;
-          var percent = parseFloat(progressMatch[1]);
+          scanStatusElement.textContent = 'Estado: Amenaza Detectada';
-          updateProgressBar(percent);
+          scanStatusElement.style.color = '#ff4444';
         }
 
-        // Mostrar el número de firmas utilizadas (filtrando solo el número)
+        if (data.data.includes('Infected files:')) {
-        var signaturesMatch = data.data.match(/Known viruses: (\d+)/);
+          const match = data.data.match(/Infected files:\s*(\d+)/);
-        if (signaturesMatch) {
+          if (match) {
-          document.getElementById('signaturesUsed').style.display = 'block';
+            const infectedCount = parseInt(match[1]);
-          document.getElementById('signaturesCount').textContent = signaturesMatch[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);
         }
       });
 
-      function appendToTerminal(message) {
+      function appendToTerminal(text, type = '') {
-        var scanOutput = document.getElementById('scanOutput');
+        terminalWriter.write(text, type);
-        var newLine = document.createElement('div');
-        newLine.innerHTML = message;
-        scanOutput.appendChild(newLine);
-        scanOutput.scrollTop = scanOutput.scrollHeight;
       }
 
-      function updateProgressBar(percent) {
+      function finishScan(success = true) {
-        var progressBar = document.getElementById('progressBar');
+        scanInProgress = false;
-        progressBar.style.width = percent + '%';
+        toggleControls(false);
-        progressBar.setAttribute('aria-valuenow', percent);
+        document.getElementById('progress').style.display = 'none';
-        progressBar.innerHTML = percent.toFixed(2) + '%';
+        updateProgress(100);
+        clearInterval(timerInterval);
+
+        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';
+          }
+        } else {
+          scanStatusElement.textContent = 'Estado: Error';
+          scanStatusElement.style.color = '#ff4444';
         }
 
-      // Configurar particles.js
+        document.getElementById('fileInput').value = '';
-      particlesJS('particles-js', {
+        urlInput.value = '';
-        "particles": {
-          "number": {
-            "value": 80,
-            "density": {
-              "enable": true,
-              "value_area": 800
       }
-          },
+
-          "color": {
+      // Inicialización al cargar la página
-            "value": "#ffffff"
+      window.onload = function() {
-          },
+        document.getElementById('fileInput').value = '';
-          "shape": {
+        document.getElementById('urlInput').value = '';
-            "type": "circle",
+        updateProgress(0);
-            "stroke": {
+        toggleControls(false);
-              "width": 0,
+        document.getElementById('progress').style.display = 'none';
-              "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>