Malin
1aa164263f
- Full Spanish interface (all UI text, popups, charts, tables) - Dark and light mode support - Disclaimer banner: no data logged, public European service - Footer: Servicio ofrecido por Cloud Host (cloudhost.es) - Docker: single container (Redis + DataServer + AttackMapServer) - Remote T-Pot support via ELASTICSEARCH_URL env var (direct or SSH tunnel) - Based on telekom-security/t-pot-attack-map (Apache 2.0) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
680 lines
34 KiB
HTML
680 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es" data-theme="dark">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' https://*.cartocdn.com https://*.openstreetmap.org data:; object-src 'none'; connect-src 'self' wss: ws:">
|
|
<title>Mapa de Ataques - Visualización de Ciberseguridad en Tiempo Real</title>
|
|
<meta name="description" content="Visualización en tiempo real de ataques al honeypot T-Pot y amenazas de ciberseguridad">
|
|
|
|
<!-- Check integrity: openssl dgst -sha384 -binary your.file.name | openssl base64 -A-->
|
|
|
|
<!--Setup D3-->
|
|
<script src="static/d3.v7.min.js" defer integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i"></script>
|
|
|
|
<!--Setup JQuery-->
|
|
<script src="static/jquery-3.7.1.min.js" defer integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs"></script>
|
|
|
|
<!--Setup Luxon-->
|
|
<script src="static/luxon.min.js" defer integrity="sha384-CU0J6nu6GO5gWB5IqOOhPQsG0LKyjpotF5Gw502R+0zbkzKHjDWc6FKSZsNTJfLX"></script>
|
|
|
|
<!--Setup Chart.js for enhanced visualizations-->
|
|
<script src="static/chart.umd.js" defer integrity="sha384-FcQlsUOd0TJjROrBxhJdUhXTUgNJQxTMcxZe6nHbaEfFL1zjQ+bq/uRoBQxb0KMo"></script>
|
|
|
|
<!--Setup Bootstrap-->
|
|
<link href="static/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"/>
|
|
<script src="static/bootstrap.min.js" defer integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"></script>
|
|
|
|
<!--Setup Leaflet-->
|
|
<link rel="stylesheet" href="static/leaflet.css" integrity="sha384-sHL9NAb7lN7rfvG5lfHpm643Xkcjzp4jFvuavGOndn6pjVqS6ny56CAt3nsEVT4H"/>
|
|
<script src="static/leaflet.js" defer integrity="sha384-cxOPjt7s7Iz04uaHJceBmS+qpjv2JkIHNVcuOrM+YHwZOmJGBXI00mdUXEq65HTH"></script>
|
|
|
|
<!--Setup Leaflet Fullscreen Plugin (https://github.com/Leaflet/Leaflet.fullscreen) -->
|
|
<link href="static/leaflet.fullscreen.css" integrity="sha384-C7Iw1+OrHpvFnDYJhJHiS1pJp56ctL3Y74XojtVviNiHwMX1h8KlJEo41yI6UA8i" rel="stylesheet"/>
|
|
<script src="static/leaflet.fullscreen.js" defer integrity="sha384-TqFtkYBnYsrP2JCfIv/oLQxS9L6xpaIV9xnaI2UGMK25cJsTtQXZIU6WGQ7daT0Z"></script>
|
|
|
|
<!-- Local Fonts (Inter & JetBrains Mono) -->
|
|
<link href="static/fonts/fonts.css" rel="stylesheet" integrity="sha384-hfuGJk4QqYM6FMHlIjLQUEioQvJ1nPENVylKK8+JSZTBQ/KG7GwoJe29Mpw+2p11">
|
|
|
|
<!-- Local Icons (Font Awesome) -->
|
|
<link rel="stylesheet" href="static/fontawesome/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g">
|
|
|
|
<link href="static/index.css?v=6" rel="stylesheet" integrity="sha384-axsUVEL9GPXH1d8THaTelM/LEPfqz4DQswvGr5mjWiL97mOoRFAsB8KLrDB13qAI"/>
|
|
|
|
<style>
|
|
#disclaimer-banner {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 9999;
|
|
background: rgba(15, 20, 30, 0.97);
|
|
border-top: 1px solid rgba(99, 102, 241, 0.4);
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
font-size: 0.78rem;
|
|
color: rgba(200, 210, 230, 0.85);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
[data-theme="light"] #disclaimer-banner {
|
|
background: rgba(240, 242, 250, 0.97);
|
|
border-top: 1px solid rgba(99, 102, 241, 0.3);
|
|
color: rgba(40, 50, 80, 0.9);
|
|
}
|
|
#disclaimer-banner .disclaimer-text strong {
|
|
color: #a5b4fc;
|
|
}
|
|
[data-theme="light"] #disclaimer-banner .disclaimer-text strong {
|
|
color: #4f46e5;
|
|
}
|
|
#disclaimer-close-btn {
|
|
background: rgba(99,102,241,0.15);
|
|
border: 1px solid rgba(99,102,241,0.4);
|
|
color: #a5b4fc;
|
|
border-radius: 6px;
|
|
padding: 4px 12px;
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
[data-theme="light"] #disclaimer-close-btn {
|
|
color: #4f46e5;
|
|
}
|
|
#site-footer {
|
|
position: fixed;
|
|
bottom: 6px;
|
|
right: 16px;
|
|
z-index: 9997;
|
|
font-size: 0.72rem;
|
|
color: rgba(150, 160, 180, 0.65);
|
|
pointer-events: auto;
|
|
display: none;
|
|
}
|
|
[data-theme="light"] #site-footer {
|
|
color: rgba(80, 90, 120, 0.65);
|
|
}
|
|
#site-footer a {
|
|
color: rgba(165,180,252,0.8);
|
|
text-decoration: none;
|
|
}
|
|
[data-theme="light"] #site-footer a {
|
|
color: rgba(79, 70, 229, 0.8);
|
|
}
|
|
#site-footer-inline {
|
|
font-size: 0.72rem;
|
|
color: rgba(150, 160, 180, 0.65);
|
|
}
|
|
#site-footer-inline a {
|
|
color: rgba(165,180,252,0.8);
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Pantalla de carga -->
|
|
<div id="loading-screen" class="loading-screen">
|
|
<div class="loading-content">
|
|
<div class="spinner"></div>
|
|
<h2>Iniciando Mapa de Ataques</h2>
|
|
<p>Cargando datos de ciberseguridad en tiempo real...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Barra de navegación superior -->
|
|
<nav class="top-navbar">
|
|
<div class="navbar-content flex-between">
|
|
<div class="navbar-brand flex-center">
|
|
<i class="fas fa-shield-halved"></i>
|
|
<span>Mapa de Ataques</span>
|
|
</div>
|
|
|
|
<!-- Estadísticas T-Pot en cabecera -->
|
|
<div class="navbar-stats">
|
|
<div class="stats-group">
|
|
<div class="stats-header-title">
|
|
<i class="fas fa-satellite-dish fa-lg"></i>
|
|
<span id="honeypotStatsHeader">Ataques</span>
|
|
</div>
|
|
<div class="stats-inline">
|
|
<div class="stat-inline-item flex-center">
|
|
<span class="stat-inline-label">1m</span>
|
|
<span class="stat-inline-value" id="last_1m">-</span>
|
|
</div>
|
|
<div class="stat-separator">|</div>
|
|
<div class="stat-inline-item flex-center">
|
|
<span class="stat-inline-label">1h</span>
|
|
<span class="stat-inline-value" id="last_1h">-</span>
|
|
</div>
|
|
<div class="stat-separator">|</div>
|
|
<div class="stat-inline-item flex-center">
|
|
<span class="stat-inline-label">24h</span>
|
|
<span class="stat-inline-value" id="last_24h">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar-controls">
|
|
<div class="connection-status" id="connection-status">
|
|
<div class="status-indicator" id="status-indicator"></div>
|
|
<span id="status-text">Conectando...</span>
|
|
</div>
|
|
<div class="cache-status" id="cache-status" title="Estado de la caché de datos">
|
|
<div class="status-indicator" id="cache-indicator"></div>
|
|
<span id="cache-text">Caché</span>
|
|
</div>
|
|
<button class="btn-base control-btn flex-center-both hover-lift" id="theme-toggle" title="Cambiar tema">
|
|
<i class="fas fa-moon"></i>
|
|
</button>
|
|
<button class="btn-base control-btn flex-center-both hover-lift" id="fullscreen-toggle" title="Pantalla completa">
|
|
<i class="fas fa-expand"></i>
|
|
</button>
|
|
<button class="btn-base control-btn flex-center-both hover-lift" id="settings-toggle" title="Configuración">
|
|
<i class="fas fa-gear"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Contenedor principal -->
|
|
<div class="main-container">
|
|
<!-- Contenedor del mapa -->
|
|
<div class="map-container">
|
|
<div id="map"></div>
|
|
</div>
|
|
|
|
<!-- Panel lateral (plegable) -->
|
|
<div class="side-panel" id="side-panel">
|
|
<div class="panel-toggle" id="panel-toggle">
|
|
<i class="fas fa-chevron-left"></i>
|
|
</div>
|
|
|
|
<div class="panel-content">
|
|
<!-- Leyenda de servicios -->
|
|
<div class="panel-section">
|
|
<div class="section-header flex-center">
|
|
<i class="fas fa-palette"></i>
|
|
<h3>Tipos de Servicio</h3>
|
|
</div>
|
|
<div class="service-legend">
|
|
<div class="service-item">
|
|
<div class="service-color protocol-adb"></div>
|
|
<span>ADB</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-chargen"></div>
|
|
<span>CHARGEN</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-dhcp"></div>
|
|
<span>DHCP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-dicom"></div>
|
|
<span>DICOM</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-dns"></div>
|
|
<span>DNS</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-elasticsearch"></div>
|
|
<span>ELASTICSEARCH</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-email"></div>
|
|
<span>EMAIL</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-ftp"></div>
|
|
<span>FTP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-ftp-data"></div>
|
|
<span>FTP-DATA</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-hl7"></div>
|
|
<span>HL7</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-http"></div>
|
|
<span>HTTP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-https"></div>
|
|
<span>HTTPS</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-iec104"></div>
|
|
<span>IEC104</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-imap"></div>
|
|
<span>IMAP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-imaps"></div>
|
|
<span>IMAPS</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-industrial"></div>
|
|
<span>INDUSTRIAL</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-ipp"></div>
|
|
<span>IPP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-ipmi"></div>
|
|
<span>IPMI</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-ipsec"></div>
|
|
<span>IPSEC</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-irc"></div>
|
|
<span>IRC</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-jetdirect"></div>
|
|
<span>JETDIRECT</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-ldap"></div>
|
|
<span>LDAP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-memcached"></div>
|
|
<span>MEMCACHED</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-mongodb"></div>
|
|
<span>MONGODB</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-mqtt"></div>
|
|
<span>MQTT</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-mysql"></div>
|
|
<span>MYSQL</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-nfs"></div>
|
|
<span>NFS</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-ntp"></div>
|
|
<span>NTP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-oracle"></div>
|
|
<span>ORACLE</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-pop3"></div>
|
|
<span>POP3</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-pop3s"></div>
|
|
<span>POP3S</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-postgresql"></div>
|
|
<span>POSTGRESQL</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-pptp"></div>
|
|
<span>PPTP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-rdp"></div>
|
|
<span>RDP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-redis"></div>
|
|
<span>REDIS</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-rpc"></div>
|
|
<span>RPC</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-scada"></div>
|
|
<span>SCADA</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-sip"></div>
|
|
<span>SIP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-smb"></div>
|
|
<span>SMB</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-smtp"></div>
|
|
<span>SMTP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-smtps"></div>
|
|
<span>SMTPS</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-snmp"></div>
|
|
<span>SNMP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-socks"></div>
|
|
<span>SOCKS</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-sql"></div>
|
|
<span>SQL</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-ssdp"></div>
|
|
<span>SSDP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-ssh"></div>
|
|
<span>SSH</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-telnet"></div>
|
|
<span>TELNET</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-tftp"></div>
|
|
<span>TFTP</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-vnc"></div>
|
|
<span>VNC</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-wins"></div>
|
|
<span>WINS</span>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-color protocol-other"></div>
|
|
<span>OTRO</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel inferior (Dashboard) -->
|
|
<div class="bottom-panel" id="bottom-panel">
|
|
<div class="panel-tabs">
|
|
<button class="tab-btn active" data-tab="live-feed">
|
|
<i class="fas fa-list-ol"></i>
|
|
Ataques en Vivo
|
|
</button>
|
|
<button class="tab-btn" data-tab="top-ips">
|
|
<i class="fas fa-bullseye"></i>
|
|
IPs más Activas
|
|
</button>
|
|
<button class="tab-btn" data-tab="countries">
|
|
<i class="fas fa-globe"></i>
|
|
Países Atacantes
|
|
</button>
|
|
<button class="tab-btn" data-tab="overview">
|
|
<i class="fas fa-chart-bar"></i>
|
|
Panel de Control
|
|
</button>
|
|
<div class="panel-resize" id="panel-resize">
|
|
<i class="fas fa-bars"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content">
|
|
<!-- Panel de Control -->
|
|
<div class="tab-pane" id="overview-tab">
|
|
<div class="dashboard-grid">
|
|
<div class="dashboard-card">
|
|
<div class="card-header flex-between">
|
|
<h4 class="flex-center"><i class="fas fa-bullseye"></i> Distribución de Ataques</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<canvas id="attack-distribution-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-card">
|
|
<div class="card-header flex-between">
|
|
<h4 class="flex-center"><i class="fas fa-clock"></i> Línea Temporal de Actividad</h4>
|
|
<div class="time-range-selector">
|
|
<select id="timeline-interval" class="timeline-dropdown">
|
|
<option value="1m">Último 1 Minuto</option>
|
|
<option value="1h">Última 1 Hora</option>
|
|
<option value="24h" selected>Últimas 24 Horas</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<canvas id="timeline-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-card">
|
|
<div class="card-header">
|
|
<h4><i class="fas fa-network-wired"></i> Desglose por Protocolo</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<canvas id="protocol-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-card">
|
|
<div class="card-header">
|
|
<h4><i class="fas fa-server"></i> Rendimiento del Honeypot</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<canvas id="honeypot-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-card">
|
|
<div class="card-header">
|
|
<h4><i class="fas fa-temperature-half"></i> Mapa de Calor de Amenazas</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div id="threat-heatmap"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pestaña IPs más Activas -->
|
|
<div class="tab-pane" id="top-ips-tab">
|
|
<div class="table-wrapper">
|
|
<table class="data-table" id="ip-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Posición</th>
|
|
<th>Ataques</th>
|
|
<th>IP Origen</th>
|
|
<th>Reputación</th>
|
|
<th>Bandera</th>
|
|
<th>País</th>
|
|
<th>Último Protocolo</th>
|
|
<th>Última Vez Visto</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id='ip-tracking'>
|
|
<!-- Contenido dinámico -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pestaña Países Atacantes -->
|
|
<div class="tab-pane" id="countries-tab">
|
|
<div class="table-wrapper">
|
|
<table class="data-table" id="country-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Posición</th>
|
|
<th>Ataques</th>
|
|
<th>Bandera</th>
|
|
<th>País</th>
|
|
<th>Protocolo Principal</th>
|
|
<th>IPs Únicas</th>
|
|
<th>Última IP Vista</th>
|
|
<th>Última Vez</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id='country-tracking'>
|
|
<!-- Contenido dinámico -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pestaña Ataques en Vivo -->
|
|
<div class="tab-pane" id="live-feed-tab">
|
|
<div class="table-wrapper">
|
|
<table class="data-table" id="live-attacks-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Hora</th>
|
|
<th>IP Origen</th>
|
|
<th>Reputación</th>
|
|
<th>Bandera</th>
|
|
<th>País</th>
|
|
<th>Honeypot</th>
|
|
<th>Protocolo</th>
|
|
<th>Puerto</th>
|
|
<th>Hostname T-Pot</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id='attack-tracking'>
|
|
<!-- Contenido dinámico -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal de Configuración -->
|
|
<div class="modal" id="settings-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header flex-between">
|
|
<h3 class="flex-center"><i class="fas fa-cog"></i> Configuración</h3>
|
|
<button class="modal-close flex-center-both" id="settings-close">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="settings-section">
|
|
<h4 class="flex-center"><i class="fas fa-volume-up"></i> Alertas de Audio</h4>
|
|
<div class="setting-item">
|
|
<label class="setting-label">
|
|
<input type="checkbox" id="sound-alerts">
|
|
<div class="setting-content">
|
|
<span class="setting-title">Activar alertas de sonido</span>
|
|
<span class="setting-description">Habilitar notificaciones de audio para nuevos ataques</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="setting-item" id="sound-options">
|
|
<div class="setting-content">
|
|
<span class="setting-title">Sonido de alerta</span>
|
|
<select id="alert-sound" class="setting-select">
|
|
<option value="beep">Pitido Digital</option>
|
|
<option value="notification">Campanilla de Notificación</option>
|
|
<option value="alert">Alerta de Seguridad</option>
|
|
<option value="retro_videogame">Videojuego Retro</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-section">
|
|
<h4 class="flex-center"><i class="fas fa-database"></i> Gestión de Datos</h4>
|
|
<div class="setting-item">
|
|
<div class="setting-content">
|
|
<span class="setting-title">Almacenamiento en Caché</span>
|
|
<span class="setting-description">Borrar los datos de ataques en caché y reiniciar los marcadores del mapa</span>
|
|
<button class="btn-base btn-warning hover-lift mt-2" id="clear-cache">
|
|
<i class="fas fa-trash-alt"></i> Limpiar Caché
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer flex-between">
|
|
<button class="btn-base btn-secondary hover-lift" id="reset-settings">
|
|
<i class="fas fa-undo"></i> Restablecer valores
|
|
</button>
|
|
<button class="btn-base btn-primary hover-lift" id="save-settings">
|
|
<i class="fas fa-save"></i> Guardar cambios
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Banner de aviso legal y privacidad -->
|
|
<div id="disclaimer-banner">
|
|
<div class="disclaimer-text" style="display:flex; align-items:center; gap:10px; flex:1; flex-wrap:wrap;">
|
|
<i class="fas fa-shield-halved" style="color:#6366f1; font-size:1.1rem; flex-shrink:0;"></i>
|
|
<span>
|
|
<strong>Servicio público europeo.</strong>
|
|
Este mapa muestra ataques detectados por señuelos de ciberseguridad (honeypots).
|
|
<strong>No se registran ni almacenan datos personales de ningún tipo.</strong>
|
|
Todos los datos son agregados y anónimos. Hecho en Europa 🇪🇺 con fines de investigación y divulgación.
|
|
— Servicio ofrecido por <a href="https://cloudhost.es" target="_blank" rel="noopener noreferrer" style="color:#a5b4fc; text-decoration:none;">Cloud Host</a>
|
|
</span>
|
|
</div>
|
|
<button id="disclaimer-close-btn">Entendido</button>
|
|
</div>
|
|
|
|
<!-- Pie de página permanente -->
|
|
<div id="site-footer">
|
|
Servicio ofrecido por <a href="https://cloudhost.es" target="_blank" rel="noopener noreferrer">Cloud Host</a>
|
|
</div>
|
|
|
|
<script src="static/cache-bridge.js" defer integrity="sha384-mMltIbf7JoxVuM6ZaB7TYkrLmY2njkbSTL9VvYqNKtmct/C2X1/JvKr8FeYHU0I+"></script>
|
|
<script src="static/map.js" defer integrity="sha384-2qT3tHtMdXU7HVX5lsXUrVs/of8RMbZKLzlajAkUSFHOQtHBOR/e8klblY+r89DE"></script>
|
|
<script src="static/dashboard.js" defer integrity="sha384-G3w6UiVOgfx+CP0Otu961qJu1kfOfCLHDO4rtaWMPxem4VHwdL1SPSA0jDDWqRKF"></script>
|
|
|
|
<script>
|
|
window.addEventListener('load', function() {
|
|
var banner = document.getElementById('disclaimer-banner');
|
|
var footer = document.getElementById('site-footer');
|
|
var closeBtn = document.getElementById('disclaimer-close-btn');
|
|
|
|
// Adjust bottom panel margin for banner
|
|
function adjustLayout() {
|
|
var bottomPanel = document.getElementById('bottom-panel');
|
|
if (bottomPanel) {
|
|
if (banner && banner.style.display !== 'none') {
|
|
bottomPanel.style.marginBottom = banner.offsetHeight + 'px';
|
|
} else {
|
|
bottomPanel.style.marginBottom = '0';
|
|
}
|
|
}
|
|
}
|
|
|
|
adjustLayout();
|
|
window.addEventListener('resize', adjustLayout);
|
|
|
|
closeBtn.addEventListener('click', function() {
|
|
banner.style.display = 'none';
|
|
footer.style.display = 'block';
|
|
adjustLayout();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|