<?php
/**
* Sentinela ? Intelligent Linux Security Framework
* Dashboard Principal
*
* PHP 8.3 + Bootstrap 5 + Chart.js + AJAX
* Sin frameworks, sin Node.js
*/
?><!DOCTYPE html>
<html lang="es" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sentinela ? Security Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<link href="assets/css/dashboard.css" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-dark bg-dark border-bottom border-secondary sticky-top">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">
<i class="bi bi-shield-fill-check text-success"></i>
Sentinela
<small class="text-muted fs-6">Intelligent Linux Security Framework</small>
</span>
<div class="d-flex align-items-center gap-3">
<span class="badge bg-success" id="firewallStatus">ACTIVO</span>
<span class="text-muted small" id="lastUpdate">--</span>
<button class="btn btn-sm btn-outline-secondary" onclick="refreshAll()" title="Actualizar">
<i class="bi bi-arrow-clockwise"></i>
</button>
</div>
</div>
</nav>
<div class="container-fluid p-3">
<div class="row g-3">
<!-- Server Info -->
<div class="col-12">
<div class="card border-secondary">
<div class="card-header bg-dark border-secondary">
<i class="bi bi-server"></i> Servidor
<small class="text-muted" id="serverHostname"></small>
</div>
<div class="card-body bg-dark-subtle">
<div class="row g-2" id="serverStats">
<div class="col-6 col-md-3">
<div class="stat-card">
<div class="stat-label">CPU</div>
<div class="stat-value" id="cpuValue">0%</div>
<div class="progress" style="height: 4px;">
<div id="cpuBar" class="progress-bar bg-info" style="width:0%"></div>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="stat-card">
<div class="stat-label">RAM</div>
<div class="stat-value" id="memValue">0%</div>
<div class="progress" style="height: 4px;">
<div id="memBar" class="progress-bar bg-warning" style="width:0%"></div>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="stat-card">
<div class="stat-label">DISCO</div>
<div class="stat-value" id="diskValue">0%</div>
<div class="progress" style="height: 4px;">
<div id="diskBar" class="progress-bar bg-danger" style="width:0%"></div>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="stat-card">
<div class="stat-label">CARGA</div>
<div class="stat-value" id="loadValue">0.0</div>
<div class="text-muted small" id="uptimeValue">0 días</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Quick Stats -->
<div class="col-6 col-md-3">
<div class="card border-secondary text-center h-100">
<div class="card-body">
<div class="display-6 text-danger" id="totalAttacks">0</div>
<div class="text-muted small">ATAQUES DETECTADOS</div>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card border-secondary text-center h-100">
<div class="card-body">
<div class="display-6 text-warning" id="totalBanned">0</div>
<div class="text-muted small">IPS BLOQUEADAS</div>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card border-secondary text-center h-100">
<div class="card-body">
<div class="display-6 text-info" id="totalConnections">0</div>
<div class="text-muted small">CONEXIONES ACTIVAS</div>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card border-secondary text-center h-100">
<div class="card-body">
<div class="display-6 text-success" id="uptimeDays">0</div>
<div class="text-muted small">DÍAS EN LÍNEA</div>
</div>
</div>
</div>
<!-- Attack Types Chart -->
<div class="col-12 col-md-6">
<div class="card border-secondary h-100">
<div class="card-header bg-dark border-secondary">
<i class="bi bi-pie-chart"></i> Tipos de Ataque
</div>
<div class="card-body">
<canvas id="attackTypesChart"></canvas>
</div>
</div>
</div>
<!-- Top Countries -->
<div class="col-12 col-md-6">
<div class="card border-secondary h-100">
<div class="card-header bg-dark border-secondary">
<i class="bi bi-globe"></i> Países de Origen
</div>
<div class="card-body">
<canvas id="topCountriesChart"></canvas>
</div>
</div>
</div>
<!-- Top IPs -->
<div class="col-12 col-md-6">
<div class="card border-secondary h-100">
<div class="card-header bg-dark border-secondary">
<i class="bi bi-ip</i"> Top IPs Atacantes
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-dark table-striped table-sm mb-0" id="topIPsTable">
<thead>
<tr>
<th>IP</th>
<th class="text-end">Ataques</th>
<th class="text-end">Acción</th>
</tr>
</thead>
<tbody id="topIPsBody"></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Recent Attacks -->
<div class="col-12 col-md-6">
<div class="card border-secondary h-100">
<div class="card-header bg-dark border-secondary">
<i class="bi bi-exclamation-triangle"></i> Últimos Ataques
</div>
<div class="card-body p-0">
<div class="table-responsive" style="max-height: 300px;">
<table class="table table-dark table-sm mb-0" id="recentAttacksTable">
<thead>
<tr>
<th>Hora</th>
<th>IP</th>
<th>Tipo</th>
</tr>
</thead>
<tbody id="recentAttacksBody"></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Banned IPs -->
<div class="col-12">
<div class="card border-secondary">
<div class="card-header bg-dark border-secondary d-flex justify-content-between align-items-center">
<span><i class="bi bi-lock"></i> IPs Bloqueadas</span>
<button class="btn btn-sm btn-outline-danger" onclick="flushBanned()">
<i class="bi bi-trash"></i> Liberar Todas
</button>
</div>
<div class="card-body p-0">
<div class="table-responsive" style="max-height: 400px;">
<table class="table table-dark table-sm mb-0" id="bannedIPsTable">
<thead>
<tr>
<th>IP</th>
<th>Tiempo Restante</th>
<th class="text-end">Acción</th>
</tr>
</thead>
<tbody id="bannedIPsBody"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal for Unban Confirm -->
<div class="modal fade" id="confirmModal" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content bg-dark">
<div class="modal-header border-secondary">
<h5 class="modal-title">Confirmar</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body" id="confirmModalBody">¿Está seguro?</div>
<div class="modal-footer border-secondary">
<button class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button class="btn btn-sm btn-danger" id="confirmModalBtn">Confirmar</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="assets/js/dashboard.js"></script>
</body>
</html>
|
Download
