CyberShield Pro · Ultimate Edition (v3.1)

Reimaginación web del clásico cybershield_v3.py (Python/Tkinter): un centro de mando de ciberseguridad con HUD 3D futurista, animaciones reales (Three.js + GSAP), pantalla de bloqueo con PIN y estética cyberpunk (cian / magenta / dorado).

Ejecutar

Con motor (recomendado — acciones reales): doble clic en Iniciar CyberShield.bat (levanta server/engine.py en 127.0.0.1 y abre el navegador).

Solo interfaz (modo demo):

python -m http.server 8080 --directory .

La app usa módulos ES, WebLocks y crypto.subtle, por lo que debe servirse por HTTP local (no file://).

En el primer uso se configura el PIN/contraseña; en los siguientes se pide para desbloquear. El PIN se guarda localmente como hash SHA-256 (nunca en texto plano) bajo localStorage["cybershield.v3"].

Requisitos mínimos

• Navegador moderno: Chrome / Edge / Firefox (WebGL + crypto.subtle, requiere contexto seguro → localhost u HTTPS).
• js/vendor/three.min.js y js/vendor/gsap.min.js ya están incluidos (funciona offline).

Funcionalidad

• Pantalla de bloqueo: escáner biométrico simulado, keypad PIN, animación de desbloqueo (GSAP), re-bloqueo desde el HUD, y recuperación "olvidé mi PIN" tras 3 intentos fallidos.

• Command Center (dashboard): 4 KPIs animados (count-up + ring), radar de red en vivo (canvas 2D), globo de topología 3D interactivo (Three.js), feed de amenazas en vivo, estado del sistema y acciones rápidas. Con el motor activado, los KPIs, el estado y el feed usan datos reales del equipo.

• Motor local (server/engine.py): API JSON en 127.0.0.1 que ejecuta acciones REALES sobre Windows (ping sweep + ARP, escaneo TCP de puertos, netstat con proceso, firewall, procesos, servicios, entradas de inicio, cuentas locales, auditoría de vulnerabilidades, logs de eventos, Windows Defender, hashes SHA-1/256/512, threat hunting y scripts PowerShell). La web solo los muestra.

• 16 módulos (herederos del original):

  • General: Command Center
  • Red: Escaneo de Red, Puertos y Servicios, Conexiones Activas, Firewall
  • Sistema: Procesos, Servicios, Inicio Automático
  • Cuentas: Cuentas Windows, Gestor de Contraseñas
  • Análisis: Vulnerabilidades, Análisis de Logs, Anti-Malware, Integridad de Archivos
  • Herramientas: Threat Hunting, PowerShell Hub

  Cada módulo tiene su vista con telemetría animada y una acción real: pulsa "EJECUTAR" y el módulo interroga a Windows a través del motor y muestra resultados (tablas, KV, salida de scripts). El Gestor de Contraseñas funciona 100% local en el navegador (generación con entropía real).

• HUD: reloj/estado, toggle de sonido, botón de bloquear.

• Audio: ambiente sintetizado en Web Audio + SFX sincronizados (blip, scan, unlock, deny, alert, success). Parte tras el primer gesto del usuario.

Modo demo: si la app se abre con python -m http.server (sin el motor), todo tiene el mismo aspecto y responde "motor offline" al ejecutar; los datos son simulados. Con Iniciar CyberShield.bat (motor) los módulos ejecutan acciones reales.

Estructura

cybershield-web/
├─ index.html              shell (lock, HUD, nav, viewport, canvas 3D)
├─ Iniciar CyberShield.bat lanzador: motor local + navegador
├─ server/
│  └─ engine.py            motor local: HTTP estático + API de acciones reales
├─ css/
│  ├─ tokens.css         design tokens (paleta, tipografía, glows, radios, z)
│  ├─ base.css           reset + capas de fondo
│  ├─ hud.css            header + navegación
│  ├─ lock.css           pantalla de bloqueo
│  ├─ dashboard.css      centro de mando
│  ├─ views.css          vista de módulo (shell)
│  └─ animations.css     24 keyframes (fx por módulo + escaneres)
└─ js/
   ├─ app.js             bootstrap (lock → HUD → router)
   ├─ core/
   │  ├─ Config.js       localStorage + hash SHA-256 del PIN
   │  ├─ Audio.js        motor Web Audio (ambiente + SFX)
   │  ├─ Modules.js      ⭐ registro declarativo de los 16 módulos
   │  └─ Router.js       navegación con transición de escaneo
   ├─ fx/
   │  ├─ Background.js   partículas + grid 3D (Three.js)
   │  ├─ Globe.js        globo de topología 3D
   │  └─ Radar.js        radar sonar 2D
   ├─ ui/
   │  ├─ LockScreen.js   lock re-entrante
   │  ├─ Dashboard.js    Command Center
   │  └─ ModuleView.js   shell de módulo
   └─ vendor/            three.min.js · gsap.min.js (offline)

Añadir un módulo nuevo

1. Abre js/core/Modules.js.
2. Añade un icono en IC (SVG 24×24 stroke=currentColor).
3. Añade la entrada a MODULES con { id, name, short, color, fx, icon, caps }.
4. (Opcional) añade telemetría demo en TEL[id].
5. (Opcional) cuando exista la herramienta, escribe su builder en ModuleView.js.

Nav, tarjeta del dashboard y vista shell se generan solos. Elige color de la paleta de tokens.css y fx de los keyframes de animations.css.

Diseño

El sistema de diseño completo (tokens, paleta, tipografía, profundidad, movimiento, API de extensión) está en DESIGN_SYSTEM.md.

Origen

CyberShield Pro nació como app de escritorio en Python/Tkinter (v3.0) con 16 módulos de ciberseguridad. Esta versión web (v3.1) conserva los 16 módulos y su paleta de marca, reemplazando el stack de escritorio por HTML/CSS/JS + Three.js + GSAP, y añade un motor local (server/engine.py) que ejecuta las mismas acciones reales sobre Windows. Preparado un camino a PWA/Android.

Licencia y uso

• Licencia: MIT (ver LICENSE).
• Herramienta de ciberseguridad: úsala solo en sistemas/dispositivos que te pertenecen o con autorización escrita.
• Ten en cuenta que los binarios empaquetados (PyInstaller + PowerShell) pueden generar falsos positivos en algunos antivirus.