nickpons666/lastwar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style: Rediseño militar/táctico - navbar horizontal superior

Browse Source
This commit is contained in:
nickpons666
2026-02-20 14:49:16 -06:00
parent e8912bdb63
commit 4437deb505
4 changed files with 765 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
index.php
View File

@@ -14,21 +14,23 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
?>
<div class="d-flex justify-content-between align-items-center mb-4">
<h2><i class="bi bi-house-door"></i> Dashboard</h2>
<span class="text-muted">Bienvenido, <?= htmlspecialchars(getCurrentUsername()) ?></span>
<h2><i class="bi bi-crosshair"></i> Dashboard</h2>
<span class="text-muted" style="font-family: 'Share Tech Mono', monospace; font-size: 0.8rem;">
// BIENVENIDO, <?= strtoupper(htmlspecialchars(getCurrentUsername())) ?>
</span>
</div>
<div class="row mb-4">
<div class="col-md-3">
<div class="card border-0 shadow-sm">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="bg-primary bg-opacity-10 p-3 rounded me-3">
<i class="bi bi-clock text-primary fs-4"></i>
<div class="stat-card-icon me-3" style="border-color: var(--accent-orange); color: var(--accent-orange);">
<i class="bi bi-stopwatch fs-5"></i>
</div>
<div>
<h3 class="mb-0"><?= $pendingCount ?></h3>
<small class="text-muted">Mensajes Pendientes</small>
<div style="font-family: 'Share Tech Mono', monospace; font-size: 2rem; color: var(--accent-orange);"><?= $pendingCount ?></div>
<small class="text-muted text-uppercase" style="letter-spacing: 1px; font-size: 0.7rem;">Pendientes</small>
</div>
</div>
</div>
@@ -36,15 +38,15 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
</div>
<div class="col-md-3">
<div class="card border-0 shadow-sm">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="bg-success bg-opacity-10 p-3 rounded me-3">
<i class="bi bi-check-circle text-success fs-4"></i>
<div class="stat-card-icon me-3" style="border-color: var(--hud-cyan); color: var(--hud-cyan);">
<i class="bi bi-check2-all fs-5"></i>
</div>
<div>
<h3 class="mb-0"><?= $sentToday ?></h3>
<small class="text-muted">Enviados Hoy</small>
<div style="font-family: 'Share Tech Mono', monospace; font-size: 2rem; color: var(--hud-cyan);"><?= $sentToday ?></div>
<small class="text-muted text-uppercase" style="letter-spacing: 1px; font-size: 0.7rem;">Enviados Hoy</small>
</div>
</div>
</div>
@@ -52,17 +54,17 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
</div>
<div class="col-md-3">
<div class="card border-0 shadow-sm">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="bg-discord bg-opacity-10 p-3 rounded me-3" style="background-color: rgba(88,101,242,0.1)">
<i class="bi bi-discord fs-4" style="color: #5865F2"></i>
<div class="stat-card-icon me-3" style="border-color: var(--discord-color); color: var(--discord-color);">
<i class="bi bi-discord fs-5"></i>
</div>
<div>
<h3 class="mb-0">
<div style="font-family: 'Share Tech Mono', monospace; font-size: 2rem; color: var(--discord-color);">
<?= count(array_filter($scheduledMessages, fn($m) => $m['platform'] === 'discord')) ?>
</h3>
<small class="text-muted">Discord</small>
</div>
<small class="text-muted text-uppercase" style="letter-spacing: 1px; font-size: 0.7rem;">Discord</small>
</div>
</div>
</div>
@@ -70,17 +72,17 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
</div>
<div class="col-md-3">
<div class="card border-0 shadow-sm">
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="bg-info bg-opacity-10 p-3 rounded me-3">
<i class="bi bi-telegram text-info fs-4"></i>
<div class="stat-card-icon me-3" style="border-color: var(--telegram-color); color: var(--telegram-color);">
<i class="bi bi-telegram fs-5"></i>
</div>
<div>
<h3 class="mb-0">
<div style="font-family: 'Share Tech Mono', monospace; font-size: 2rem; color: var(--telegram-color);">
<?= count(array_filter($scheduledMessages, fn($m) => $m['platform'] === 'telegram')) ?>
</h3>
<small class="text-muted">Telegram</small>
</div>
<small class="text-muted text-uppercase" style="letter-spacing: 1px; font-size: 0.7rem;">Telegram</small>
</div>
</div>
</div>
@@ -91,12 +93,12 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
<div class="row">
<div class="col-md-8">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-0">
<h5 class="mb-0"><i class="bi bi-clock"></i> Próximos Mensajes</h5>
<div class="card-header border-0">
<h5 class="mb-0"><i class="bi bi-list-check"></i> Próximos Mensajes</h5>
</div>
<div class="card-body">
<?php if (empty($scheduledMessages)): ?>
<p class="text-muted text-center py-4">No hay mensajes programados</p>
<p class="text-muted text-center py-4">// NO HAY MENSAJES PROGRAMADOS</p>
<?php else: ?>
<div class="table-responsive">
<table class="table table-hover">
@@ -119,7 +121,7 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
<i class="bi bi-telegram platform-telegram"></i> Telegram
<?php endif; ?>
</td>
<td><?= date('d/m/Y H:i', strtotime($msg['send_time'])) ?></td>
<td style="font-family: 'Share Tech Mono', monospace;"><?= date('d/m/Y H:i', strtotime($msg['send_time'])) ?></td>
<td>
<span class="badge bg-<?= match($msg['status']) {
'pending' => 'warning',
@@ -144,16 +146,16 @@ $sentToday = count(array_filter($sentMessages, fn($m) => date('Y-m-d', strtotime
<div class="col-md-4">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-0">
<div class="card-header border-0">
<h5 class="mb-0"><i class="bi bi-lightning"></i> Acciones Rápidas</h5>
</div>
<div class="card-body">
<div class="d-grid gap-2">
<a href="create_message.php" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Nuevo Mensaje
<i class="bi bi-pencil-square"></i> Nuevo Mensaje
</a>
<a href="recurrentes.php" class="btn btn-outline-secondary">
<i class="bi bi-repeat"></i> Ver Plantillas
<i class="bi bi-collection"></i> Ver Plantillas
</a>
<a href="scheduled_messages.php" class="btn btn-outline-secondary">
<i class="bi bi-list"></i> Ver Todos los Programados

204
login.php Normal file → Executable file
View File

@@ -51,59 +51,221 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<title>Login - Sistema de Mensajería</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
:root {
--military-dark: #1a1f16;
--military-olive: #3d4a32;
--military-green: #5a6b4a;
--military-tan: #8b7355;
--military-sand: #c4b998;
--accent-orange: #d4652f;
}
* {
font-family: 'Rajdhani', sans-serif;
}
body {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
background: var(--military-dark);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
[data-bs-theme="dark"] body {
background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
}
.login-card {
background: var(--bs-body-bg);
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 50px,
rgba(61, 74, 50, 0.1) 50px,
rgba(61, 74, 50, 0.1) 51px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 50px,
rgba(61, 74, 50, 0.1) 50px,
rgba(61, 74, 50, 0.1) 51px
);
pointer-events: none;
}
[data-bs-theme="light"] body {
background: linear-gradient(135deg, #3d4a32 0%, #2a3024 100%);
}
.login-card {
background: rgba(26, 31, 22, 0.95);
border: 2px solid var(--military-green);
position: relative;
}
.login-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--military-green) 0%,
var(--accent-orange) 50%,
var(--military-green) 100%);
}
.login-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--military-green) 0%,
var(--accent-orange) 50%,
var(--military-green) 100%);
}
.login-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
background: transparent;
color: var(--military-sand);
padding: 30px;
text-align: center;
border-bottom: 1px solid var(--military-green);
}
.login-title {
font-family: 'Share Tech Mono', monospace;
font-size: 2rem;
color: var(--accent-orange);
letter-spacing: 4px;
margin-bottom: 5px;
}
.login-subtitle {
font-size: 0.8rem;
color: var(--military-sand);
letter-spacing: 3px;
text-transform: uppercase;
}
.login-body {
padding: 40px;
background: rgba(26, 31, 22, 0.5);
}
.form-label {
color: var(--military-sand);
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 2px;
font-weight: 600;
}
.form-control {
background: rgba(26, 31, 22, 0.8);
border: 1px solid var(--military-green);
color: var(--military-sand);
border-radius: 0;
padding: 12px 15px;
}
.form-control:focus {
background: rgba(26, 31, 22, 0.9);
border-color: var(--accent-orange);
color: #fff;
box-shadow: 0 0 0 2px rgba(212, 101, 47, 0.3);
}
.form-control::placeholder {
color: rgba(196, 185, 152, 0.5);
}
.btn-login {
background: linear-gradient(180deg, var(--military-olive) 0%, var(--military-dark) 100%);
border: 1px solid var(--military-green);
color: var(--military-sand);
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
border-radius: 0;
padding: 12px;
width: 100%;
transition: all 0.3s ease;
}
.btn-login:hover {
background: linear-gradient(180deg, var(--military-green) 0%, var(--military-olive) 100%);
border-color: var(--accent-orange);
color: #fff;
}
.btn-login i {
margin-right: 8px;
}
.alert-danger {
background: rgba(139, 58, 58, 0.3);
border: 1px solid var(--accent-red, #8b3a3a);
border-radius: 0;
color: #ff8a8a;
border-left: 3px solid #8b3a3a;
}
.corner-decoration {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid var(--accent-orange);
}
.corner-tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.corner-tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.corner-bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.corner-br { bottom: -2px; right: -2px; border-left: none; border-top: none; }
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-5">
<div class="login-card">
<div class="login-card position-relative">
<div class="corner-decoration corner-tl"></div>
<div class="corner-decoration corner-tr"></div>
<div class="corner-decoration corner-bl"></div>
<div class="corner-decoration corner-br"></div>
<div class="login-header">
<h3><i class="bi bi-messenger"></i> Sistema de Mensajería</h3>
<p class="mb-0">Discord & Telegram</p>
<div class="login-title">◈ LASTWAR</div>
<div class="login-subtitle">Comms Center</div>
</div>
<div class="login-body">
<?php if ($error): ?>
<div class="alert alert-danger"><?= htmlspecialchars($error) ?></div>
<div class="alert alert-danger mb-3"><?= htmlspecialchars($error) ?></div>
<?php endif; ?>
<form method="POST">
<div class="mb-3">
<div class="mb-4">
<label class="form-label">Usuario</label>
<input type="text" name="username" class="form-control" required autofocus>
<input type="text" name="username" class="form-control" placeholder="Ingrese su usuario" required autofocus>
</div>
<div class="mb-3">
<div class="mb-4">
<label class="form-label">Contraseña</label>
<input type="password" name="password" class="form-control" required>
<input type="password" name="password" class="form-control" placeholder="••••••••" required>
</div>
<button type="submit" class="btn btn-primary w-100">
<i class="bi bi-box-arrow-in-right"></i> Iniciar Sesión
<button type="submit" class="btn btn-login">
<i class="bi bi-shield-lock"></i> Acceder
</button>
</form>
</div>

2
templates/footer.php Normal file → Executable file
View File

@@ -1,6 +1,4 @@
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

668
templates/header.php Normal file → Executable file
View File

@@ -15,190 +15,602 @@ $theme = $_COOKIE['theme'] ?? 'light';
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
:root {
--military-dark: #1a1f16;
--military-olive: #3d4a32;
--military-green: #5a6b4a;
--military-tan: #8b7355;
--military-sand: #c4b998;
--accent-orange: #d4652f;
--accent-red: #8b3a3a;
--hud-cyan: #4a9c8c;
--discord-color: #5865F2;
--telegram-color: #0088cc;
--navbar-height: 56px;
}
* {
font-family: 'Rajdhani', sans-serif;
}
[data-bs-theme="dark"] {
--sidebar-bg: #1a1a2e;
--bs-body-bg: #12150f;
--bs-body-color: #e8e4d9;
--bs-card-bg: #1a1f16;
--bs-border-color: #3d4a32;
--navbar-bg: linear-gradient(180deg, #1a1f16 0%, #0f120c 100%);
}
[data-bs-theme="light"] {
--sidebar-bg: #1a1a2e;
--bs-body-bg: #e8e4d9;
--bs-body-color: #1a1f16;
--bs-card-bg: #f5f3ed;
--bs-border-color: #8b7355;
--navbar-bg: linear-gradient(180deg, #3d4a32 0%, #2a3024 100%);
}
.sidebar {
min-height: 100vh;
background: var(--sidebar-bg);
body {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
padding-top: var(--navbar-height);
}
.navbar-military {
background: var(--navbar-bg);
border-bottom: 2px solid var(--military-green);
min-height: var(--navbar-height);
padding: 0 1rem;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
.navbar-military::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--accent-orange) 20%,
var(--accent-orange) 80%,
transparent 100%);
}
.navbar-brand {
font-family: 'Share Tech Mono', monospace;
font-size: 1.3rem;
color: var(--accent-orange) !important;
letter-spacing: 2px;
padding: 0;
display: flex;
align-items: center;
gap: 8px;
}
.navbar-brand small {
font-size: 0.65rem;
color: var(--military-sand);
letter-spacing: 3px;
font-family: 'Rajdhani', sans-serif;
}
.nav-link-main {
color: var(--military-sand) !important;
padding: 8px 12px !important;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
font-size: 0.8rem;
border-bottom: 2px solid transparent;
transition: all 0.2s ease;
}
.nav-link-main:hover,
.nav-link-main.active {
color: #fff !important;
border-bottom-color: var(--accent-orange);
background: rgba(90, 107, 74, 0.3);
}
.nav-link-main i {
font-size: 0.9rem;
}
.nav-divider {
width: 1px;
height: 24px;
background: var(--military-green);
margin: 0 8px;
}
.nav-section-label {
color: var(--accent-orange);
font-size: 0.65rem;
letter-spacing: 2px;
text-transform: uppercase;
padding: 0 8px;
font-family: 'Share Tech Mono', monospace;
}
.dropdown-menu-military {
background: var(--military-dark);
border: 1px solid var(--military-green);
border-radius: 0;
min-width: 200px;
padding: 0.5rem 0;
}
.dropdown-menu-military .dropdown-item {
color: var(--military-sand);
padding: 8px 16px;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.dropdown-menu-military .dropdown-item:hover {
background: rgba(90, 107, 74, 0.4);
color: #fff;
}
.dropdown-menu-military .dropdown-item i {
width: 20px;
}
.dropdown-menu-military .dropdown-divider {
border-color: var(--military-green);
}
.dropdown-toggle-military {
color: var(--military-sand) !important;
padding: 8px 12px !important;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
font-size: 0.8rem;
border-bottom: 2px solid transparent;
transition: all 0.2s ease;
}
.dropdown-toggle-military:hover,
.dropdown-toggle-military.show {
color: #fff !important;
border-bottom-color: var(--accent-orange);
background: rgba(90, 107, 74, 0.3);
}
#theme-toggle {
color: var(--military-sand);
border: 1px solid var(--military-green);
background: transparent;
border-radius: 0;
padding: 4px 8px;
}
#theme-toggle:hover {
color: #fff;
background: var(--military-olive);
border-color: var(--accent-orange);
}
.navbar-toggler-military {
border: 1px solid var(--military-green);
border-radius: 0;
padding: 4px 8px;
}
.navbar-toggler-military .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(196, 185, 152, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.main-content {
padding: 1.5rem;
width: 100%;
}
.card {
background-color: var(--bs-card-bg);
border: 1px solid var(--military-green);
border-radius: 0;
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
var(--military-green) 0%,
var(--accent-orange) 50%,
var(--military-green) 100%);
}
.card-header {
background-color: rgba(61, 74, 50, 0.3);
border-bottom: 1px solid var(--military-green);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
}
[data-bs-theme="dark"] .card-header.bg-white,
[data-bs-theme="dark"] .bg-white:not(.btn):not(.nav-link):not(.dropdown-menu) {
background-color: var(--bs-body-bg) !important;
background-color: var(--bs-card-bg) !important;
}
[data-bs-theme="dark"] .bg-light {
background-color: var(--bs-tertiary-bg) !important;
background-color: rgba(61, 74, 50, 0.2) !important;
}
.sidebar .nav-link {
color: rgba(255,255,255,0.7);
padding: 12px 20px;
border-radius: 8px;
margin: 4px 8px;
.btn-primary {
background: linear-gradient(180deg, var(--military-olive) 0%, var(--military-dark) 100%);
border: 1px solid var(--military-green);
color: var(--military-sand);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
border-radius: 0;
}
#theme-toggle {
color: rgba(255,255,255,0.7);
border: none;
background: transparent;
.btn-primary:hover {
background: linear-gradient(180deg, var(--military-green) 0%, var(--military-olive) 100%);
border-color: var(--accent-orange);
color: #fff;
}
#theme-toggle:hover {
color: white;
.btn-outline-secondary {
border: 1px solid var(--military-green);
color: var(--military-sand);
border-radius: 0;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
}
.sidebar .nav-link:hover, .sidebar .nav-link.active {
background: rgba(255,255,255,0.1);
color: white;
.btn-outline-secondary:hover {
background: var(--military-olive);
border-color: var(--accent-orange);
color: #fff;
}
.btn-outline-danger {
border-color: var(--accent-red);
color: var(--accent-red);
border-radius: 0;
}
.btn-outline-danger:hover {
background: var(--accent-red);
color: #fff;
}
.btn-outline-warning {
border-color: var(--accent-orange);
color: var(--accent-orange);
border-radius: 0;
}
.btn-outline-warning:hover {
background: var(--accent-orange);
color: #fff;
}
.btn-outline-success {
border-color: var(--hud-cyan);
color: var(--hud-cyan);
border-radius: 0;
}
.btn-outline-success:hover {
background: var(--hud-cyan);
color: #fff;
}
.btn-outline-info {
border-color: var(--telegram-color);
color: var(--telegram-color);
border-radius: 0;
}
.btn-outline-info:hover {
background: var(--telegram-color);
color: #fff;
}
.form-control, .form-select {
background-color: rgba(26, 31, 22, 0.8);
border: 1px solid var(--military-green);
color: var(--bs-body-color);
border-radius: 0;
}
.form-control:focus, .form-select:focus {
background-color: rgba(26, 31, 22, 0.9);
border-color: var(--accent-orange);
color: var(--bs-body-color);
box-shadow: 0 0 0 2px rgba(212, 101, 47, 0.2);
}
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
background-color: #fff;
}
.badge {
border-radius: 0;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 1px;
font-weight: 600;
padding: 4px 8px;
}
.badge.bg-warning {
background-color: var(--accent-orange) !important;
color: #fff;
}
.badge.bg-success {
background-color: var(--hud-cyan) !important;
}
.badge.bg-danger {
background-color: var(--accent-red) !important;
}
.badge.bg-info {
background-color: var(--telegram-color) !important;
}
.table {
color: var(--bs-body-color);
}
.table thead th {
background-color: rgba(61, 74, 50, 0.4);
border-bottom: 2px solid var(--military-green);
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 1px;
font-weight: 600;
}
.table-hover tbody tr:hover {
background-color: rgba(90, 107, 74, 0.2);
}
.alert {
border-radius: 0;
border-left: 3px solid;
}
.alert-danger {
background-color: rgba(139, 58, 58, 0.2);
border-color: var(--accent-red);
color: #ff8a8a;
}
.alert-success {
background-color: rgba(74, 156, 140, 0.2);
border-color: var(--hud-cyan);
color: #7ce0d0;
}
.platform-discord { color: var(--discord-color); }
.platform-telegram { color: var(--telegram-color); }
.status-pending { color: #ffc107; }
.status-sent { color: #28a745; }
.status-failed { color: #dc3545; }
.status-processing { color: #17a2b8; }
.status-pending { color: var(--accent-orange); }
.status-sent { color: var(--hud-cyan); }
.status-failed { color: var(--accent-red); }
.status-processing { color: var(--telegram-color); }
.stat-card-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid;
position: relative;
}
.stat-card-icon::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: currentColor;
top: -2px;
left: -2px;
}
.stat-card-icon::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: currentColor;
bottom: -2px;
right: -2px;
}
h2, h3, h4, h5 {
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
}
h2 i, h3 i, h4 i, h5 i {
color: var(--accent-orange);
}
.border-top {
border-color: var(--military-green) !important;
}
.dropdown-menu {
background-color: var(--bs-card-bg);
border: 1px solid var(--military-green);
border-radius: 0;
}
.dropdown-item:hover {
background-color: rgba(90, 107, 74, 0.3);
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--military-dark);
}
::-webkit-scrollbar-thumb {
background: var(--military-green);
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-orange);
}
@media (max-width: 991.98px) {
.navbar-collapse {
background: var(--military-dark);
border: 1px solid var(--military-green);
margin-top: 8px;
padding: 10px;
max-height: 70vh;
overflow-y: auto;
}
.navbar-collapse .nav-link-main,
.navbar-collapse .dropdown-toggle-military {
padding: 10px 12px !important;
border-bottom: 1px solid var(--military-green);
}
.navbar-collapse .dropdown-menu-military {
background: transparent;
border: none;
padding-left: 20px;
}
.navbar-collapse .dropdown-menu-military .dropdown-item {
padding: 8px 12px;
}
.nav-divider {
display: none !important;
}
#theme-toggle {
margin: 10px 0;
width: 100%;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-military">
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block sidebar py-3">
<div class="text-center mb-4 position-relative">
<button class="btn btn-sm position-absolute end-0 me-2" id="theme-toggle" title="Cambiar tema">
<i class="bi bi-moon-fill"></i>
<a class="navbar-brand" href="/index.php">
◈ LASTWAR <small>COMMS</small>
</a>
<button class="navbar-toggler navbar-toggler-military" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
<span class="navbar-toggler-icon"></span>
</button>
<h5 class="text-white"><i class="bi bi-messenger"></i> Mensajería</h5>
<small class="text-muted">Discord & Telegram</small>
</div>
<ul class="nav flex-column">
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'index.php' ? 'active' : '' ?>" href="/index.php">
<i class="bi bi-house-door"></i> Inicio
<a class="nav-link nav-link-main <?= $currentPage === 'index.php' ? 'active' : '' ?>" href="/index.php">
<i class="bi bi-crosshair"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'create_message.php' ? 'active' : '' ?>" href="/create_message.php">
<i class="bi bi-plus-circle"></i> Crear Mensaje
<a class="nav-link nav-link-main <?= $currentPage === 'create_message.php' ? 'active' : '' ?>" href="/create_message.php">
<i class="bi bi-pencil-square"></i> Crear
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'scheduled_messages.php' ? 'active' : '' ?>" href="/scheduled_messages.php">
<i class="bi bi-clock"></i> Programados
<a class="nav-link nav-link-main <?= $currentPage === 'scheduled_messages.php' ? 'active' : '' ?>" href="/scheduled_messages.php">
<i class="bi bi-stopwatch"></i> Programados
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'recurrentes.php' ? 'active' : '' ?>" href="/recurrentes.php">
<i class="bi bi-repeat"></i> Plantillas
<a class="nav-link nav-link-main <?= $currentPage === 'recurrentes.php' ? 'active' : '' ?>" href="/recurrentes.php">
<i class="bi bi-collection"></i> Plantillas
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'sent_messages.php' ? 'active' : '' ?>" href="/sent_messages.php">
<i class="bi bi-send"></i> Enviados
<a class="nav-link nav-link-main <?= $currentPage === 'sent_messages.php' ? 'active' : '' ?>" href="/sent_messages.php">
<i class="bi bi-check2-all"></i> Enviados
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'gallery.php' ? 'active' : '' ?>" href="/gallery.php">
<a class="nav-link nav-link-main <?= $currentPage === 'gallery.php' ? 'active' : '' ?>" href="/gallery.php">
<i class="bi bi-images"></i> Galería
</a>
</li>
<?php if (isAdmin()): ?>
<li class="nav-item mt-3">
<small class="text-muted px-3">ADMINISTRACIÓN</small>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'users.php' ? 'active' : '' ?>" href="/admin/users.php">
<i class="bi bi-people"></i> Usuarios
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'recipients.php' ? 'active' : '' ?>" href="/admin/recipients.php">
<i class="bi bi-person-check"></i> Destinatarios
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'languages.php' ? 'active' : '' ?>" href="/admin/languages.php">
<i class="bi bi-translate"></i> Idiomas
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'comandos.php' ? 'active' : '' ?>" href="/admin/comandos.php">
<i class="bi bi-terminal"></i> Comandos
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'test_discord_connection.php' ? 'active' : '' ?>" href="/admin/test_discord_connection.php">
<i class="bi bi-discord"></i> Test Discord
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'ia_agent.php' ? 'active' : '' ?>" href="/admin/ia_agent.php">
<i class="bi bi-robot"></i> Config IA
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'set_webhook.php' ? 'active' : '' ?>" href="/set_webhook.php">
<i class="bi bi-telegram"></i> Webhook Telegram
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'chat_telegram.php' ? 'active' : '' ?>" href="/chat_telegram.php">
<i class="bi bi-chat-dots"></i> Chat Telegram
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'telegram_bot_interactions.php' ? 'active' : '' ?>" href="/telegram/admin/telegram_bot_interactions.php">
<i class="bi bi-robot"></i> Bot Telegram
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'telegram_welcome.php' ? 'active' : '' ?>" href="/telegram/admin/telegram_welcome.php">
<i class="bi bi-person-plus"></i> Bienvenida Grupos
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'translate_message.php' ? 'active' : '' ?>" href="/translate_message.php">
<i class="bi bi-translate"></i> Traductor
</a>
</li>
<li class="nav-item">
<a class="nav-link <?= $currentPage === 'admin_send_message.php' ? 'active' : '' ?>" href="/admin_send_message.php">
<i class="bi bi-send"></i> Enviar Directo
<div class="nav-divider d-none d-lg-block"></div>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle-military dropdown-toggle" href="#" data-bs-toggle="dropdown">
<i class="bi bi-shield-lock"></i> COMANDO
</a>
<ul class="dropdown-menu dropdown-menu-military">
<li><a class="dropdown-item <?= $currentPage === 'users.php' ? 'active' : '' ?>" href="/admin/users.php"><i class="bi bi-people"></i> Usuarios</a></li>
<li><a class="dropdown-item <?= $currentPage === 'recipients.php' ? 'active' : '' ?>" href="/admin/recipients.php"><i class="bi bi-person-check"></i> Destinatarios</a></li>
<li><a class="dropdown-item <?= $currentPage === 'languages.php' ? 'active' : '' ?>" href="/admin/languages.php"><i class="bi bi-translate"></i> Idiomas</a></li>
<li><a class="dropdown-item <?= $currentPage === 'comandos.php' ? 'active' : '' ?>" href="/admin/comandos.php"><i class="bi bi-terminal"></i> Comandos</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item <?= $currentPage === 'test_discord_connection.php' ? 'active' : '' ?>" href="/admin/test_discord_connection.php"><i class="bi bi-discord"></i> Test Discord</a></li>
<li><a class="dropdown-item <?= $currentPage === 'ia_agent.php' ? 'active' : '' ?>" href="/admin/ia_agent.php"><i class="bi bi-cpu"></i> Config IA</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item <?= $currentPage === 'set_webhook.php' ? 'active' : '' ?>" href="/set_webhook.php"><i class="bi bi-telegram"></i> Webhook TG</a></li>
<li><a class="dropdown-item <?= $currentPage === 'chat_telegram.php' ? 'active' : '' ?>" href="/chat_telegram.php"><i class="bi bi-chat-dots"></i> Chat TG</a></li>
<li><a class="dropdown-item <?= $currentPage === 'telegram_bot_interactions.php' ? 'active' : '' ?>" href="/telegram/admin/telegram_bot_interactions.php"><i class="bi bi-robot"></i> Bot Telegram</a></li>
<li><a class="dropdown-item <?= $currentPage === 'telegram_welcome.php' ? 'active' : '' ?>" href="/telegram/admin/telegram_welcome.php"><i class="bi bi-person-plus"></i> Bienvenida</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item <?= $currentPage === 'translate_message.php' ? 'active' : '' ?>" href="/translate_message.php"><i class="bi bi-translate"></i> Traductor</a></li>
<li><a class="dropdown-item <?= $currentPage === 'admin_send_message.php' ? 'active' : '' ?>" href="/admin_send_message.php"><i class="bi bi-lightning"></i> Enviar Directo</a></li>
</ul>
</li>
<?php endif; ?>
</ul>
<div class="mt-auto pt-3 border-top">
<a class="nav-link <?= $currentPage === 'profile.php' ? 'active' : '' ?>" href="/profile.php">
<ul class="navbar-nav">
<li class="nav-item">
<button class="btn" id="theme-toggle" title="Cambiar tema">
<i class="bi bi-moon-fill"></i>
</button>
</li>
<li class="nav-item">
<a class="nav-link nav-link-main <?= $currentPage === 'profile.php' ? 'active' : '' ?>" href="/profile.php">
<i class="bi bi-person"></i> Perfil
</a>
<a class="nav-link" href="/logout.php">
<i class="bi bi-box-arrow-left"></i> Cerrar Sesión
</li>
<li class="nav-item">
<a class="nav-link nav-link-main" href="/logout.php">
<i class="bi bi-box-arrow-left"></i> Salir
</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="col-md-10 ms-sm-auto px-4 py-4">
<main class="main-content">