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

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>

686
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>
<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>
</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">
<nav class="navbar navbar-expand-lg navbar-military">
<div class="container-fluid">
<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>
<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">
<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
</a>
</div>
</nav>
<main class="col-md-10 ms-sm-auto px-4 py-4">
<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>
</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="main-content">