ADUANASOFT/MVE
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sidebars - animaciones

Browse Source
This commit is contained in:
Alexeer
2025-07-18 12:21:26 -06:00
parent 1900091b99
commit 37dcfffd7b
69 changed files with 1282 additions and 710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
views/agentes/dashboard_agentes.php
View File

@@ -41,6 +41,9 @@ include __DIR__ . '/../partials/sidebar_agente.php';
.btn-violet { background-color: #8b5cf6; color: white; }
.text-violet { color: #8b5cf6; }
.btn-violet:hover { background-color: #7c3aed; color: white; }
.btn-lila { background-color: #c4b5fd; /* violeta claro */ color: white; border: none; }
.btn-lila:hover { background-color: #a78bfa; /* tono ligeramente más fuerte */ color: white; }
.text-lila { color: #c4b5fd; }
/* A partir de dispositivos medianos (>=768px), deja espacio lateral */
@media (min-width: 768px) { .content { margin-left: 250px; /* Ancho del sidebar */ } }
/* En móviles, sin margen lateral */
@@ -52,22 +55,39 @@ include __DIR__ . '/../partials/sidebar_agente.php';
}
.card { border-radius: 12px; }
/* Animaciones personalizadas */
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
.card-hover { transition: all 0.3s ease; cursor: pointer; }
.card-hover:hover { transform: translateY(-8px) saqcle(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
.btn-pulse { animation: pulse 2s infinite; }
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.fade-in-up { animation: fadeInUp 0.6s ease-out; }
.fade-in-up { animation: fadeInUp 0.8s ease-out; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.loading-spinner { display: none; }
/* Botón con efecto de loading */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after { content: ''; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin-left: -10px;
margin-top: -10px; border: 2px solid #fff; border-radius: 50%; border-top-color: transparent; animation: spin 1s linear infinite; }
.btn-loading .loading-spinner { display: inline-block; }
.btn-loading .btn-text { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Responsive animations */
@media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
/* Efecto de glow para elementos activos */
.btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
/* Animación para el título */
.title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
/* Efecto para botones */
.btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
.btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
.btn-animated:hover::before { left: 100%; }
/* Animación para alertas */
.alert-animated { animation: slideInDown 0.5s ease-out; }
@keyframes slideInDown {
@@ -90,60 +110,93 @@ include __DIR__ . '/../partials/sidebar_agente.php';
<!-- <?php // if ($catalogosData ['catalogos_activos']): ?> -->
<div class="row g-4">
<!-- <?php
// $delay = 0;
<?php
$delay = 0;
// foreach ($catalogosData['catalogos'] as $catalogo):
// $delay += 0.1; // Incrementar el retraso para cada catálogo
?> -->
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-teal">Importadores vinculados</h5>
<p>Consulta los que ya fueron autorizados.</p>
<a href="/IMPORTADORES/agentes/vinculados"
class="btn btn-teal btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agentes/vinculados' ? 'active' : '' ?>">
Ver importadores
</a>
$delay += 0.1; // Incrementar el retraso para cada catálogo
?>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-teal mb-3">Importadores vinculados</h5>
<p class="text-muted small flex-grow-1 mb-4">Consulta los que ya fueron autorizados.</p>
<div class="mt-auto">
<button class="btn btn-teal btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/agentes/vinculados')"
data-url="/IMPORTADORES/agentes/vinculados">
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span class="btn-text">Ver importadores</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-lime">Patentes</h5>
<p>Gestiona las patentes de la agencia.</p>
<a href="/IMPORTADORES/patente/dashboard"
class="btn btn-lime btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES//patente/dashboard' ? 'active' : '' ?>">
Ver solicitudes
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-lime mb-3">Patentes</h5>
<p class="text-muted small flex-grow-1 mb-4">Gestiona las patentes de la agencia.</p>
<div class="mt-auto">
<button class="btn btn-lime btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/patente/dashboard')"
data-url="/IMPORTADORES/patente/dashboard">
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span class="btn-text">Ver patentes</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-success">Locaciones</h5>
<p>Gestiona la locaciones validas para nuevos registros.</p>
<a href="/IMPORTADORES/locaciones/lista"
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/locaciones/lista' ? 'active' : '' ?>">
Gestionar locaciones
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-success mb-3">Locaciones</h5>
<p class="text-muted small flex-grow-1 mb-4">Gestiona la locaciones validas para nuevos registros.</p>
<div class="mt-auto">
<button class="btn btn-success btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/locaciones/lista')"
data-url="/IMPORTADORES/locaciones/lista">
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span class="btn-text">Gestionar locaciones</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-warning">Configuración</h5>
<p>Administra tus datos y preferencias.</p>
<a href="/IMPORTADORES/configuracion"
class="btn btn-warning btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agentes/configuracion' ? 'active' : '' ?>">
Configurar
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-warning mb-3">Configuración</h5>
<p class="text-muted small flex-grow-1 mb-4">Administra los datos de tu empresa y preferencias.</p>
<div class="mt-auto">
<button class="btn btn-warning btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/configuracion')"
data-url="/IMPORTADORES/configuracion">
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span class="btn-text">Ir a configuración</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-danger">Cerrar sesión</h5>
<p>Salir del sistema de forma segura.</p>
<a href="/IMPORTADORES/sistemas/logout" class="btn btn-danger btn-sm mt-2">Logout</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-danger mb-3">Cerrar sesión</h5>
<p class="text-muted small flex-grow-1 mb-4">Salir del sistema de forma segura.</p>
<div class="mt-auto">
<button class="btn btn-danger btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/sistemas/logout')"
data-url="/IMPORTADORES/sistemas/logout">
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span class="btn-text">Cerrar sesión</span>
</button>
</div>
</div>
</div>
</div>
<!-- <?php // endforeach; ?> -->