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

Animaciones plataforma

Browse Source
This commit is contained in:
Alexeer
2025-07-04 12:57:56 -06:00
parent 7057590d8d
commit 8434121efc
63 changed files with 3828 additions and 986 deletions
Download Patch File Download Diff File Expand all files Collapse all files

362
views/bitacoras/dashboard_bitacoras.php
View File

@@ -8,6 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Animate.css para animaciones adicionales -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
.sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
@@ -29,158 +33,304 @@
.btn-indigo { background-color: #6610f2; color: white; }
.btn-indigo:hover { background-color: #520dc2; color: white; }
.text-indigo { color: #520dc2; }
.btn-orange { background-color: orangeRed; color: white; }
.btn-orange:hover { background-color: #ff3600; color: white; }
.text-orange { color: orangeRed; }
.btn-teal { background-color: #4dd4ac ; color: white; }
.btn-teal:hover { background-color: #20c997; color: black; }
.text-teal { color: #4dd4ac; }
.btn-lime { background-color: #84cc16; color: white; }
.text-lime { color: #84cc16; }
.btn-lime:hover { background-color: #65a30d; color: black; }
.btn-cyan { background-color: #06b6d4; color: white; }
.text-cyan { color: #06b6d4; }
.btn-cyan:hover { background-color: #0891b2; color: white; }
.btn-violet { background-color: #8b5cf6; color: white; }
.text-violet { color: #8b5cf6; }
.btn-violet:hover { background-color: #7c3aed; color: white; }
/* Animaciones personalizadas */
.card-hover { transition: all 0.3s ease; cursor: pointer; }
.card-hover:hover { transform: translateY(-8px) scale(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.8s ease-out; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* 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; }
@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%; }
</style>
</head>
<body>
<div class="content">
<h4 class="mb-4">📖 Bitácoras</h4>
<h4 class="mb-4 animate__animated animate__fadeInDown title-glow">📖 Bitácoras</h4>
<div class="row g-4">
<?php if ($_SESSION['tipo_usuario'] === 'super_admin'): ?>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-primary">Registro de accesos</h5>
<p>Ver actividad de los usuarios.</p>
<a href="/IMPORTADORES/bitacoras/sistema"
class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/sistema' ? 'active' : '' ?>">
Ver actividad
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<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">Registro de accesos</h5>
<p class="text-muted small flex-grow-1 mb-4">Ver actividad de los usuarios.</p>
<button class="btn btn-teal btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/sistema')">
Ver actividad
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-success">Cambios de usuarios</h5>
<p>Ver cambios realizados por los usuarios.</p>
<a href="/IMPORTADORES/bitacoras/cambios"
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/cambios' ? 'active' : '' ?>">
Ver cambios
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<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">Cambios de usuarios</h5>
<p class="text-muted small flex-grow-1 mb-4">Ver cambios realizados por los usuarios.</p>
<button class="btn btn-lime btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/cambios')">
Ver cambios
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-info">Registro de usuarios</h5>
<p>Ver registros de los usuarios.</p>
<a href="/IMPORTADORES/bitacoras/usuarios"
class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/usuarios' ? 'active' : '' ?>">
Ver registro de usuarios
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<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">Registro de usuarios</h5>
<p class="text-muted small flex-grow-1 mb-4">Ver registros de los usuarios.</p>
<button class="btn btn-success btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/usuarios')">
Ver registro de usuarios
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-indigo">Registro de agencias</h5>
<p>Ver registros de las agencias.</p>
<a href="/IMPORTADORES/bitacoras/agencias"
class="btn btn-indigo btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/agencias' ? 'active' : '' ?>">
Ver registro de agencias
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<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-info mb-3">Registro de agencias</h5>
<p class="text-muted small flex-grow-1 mb-4">Ver registros de las agencias.</p>
<button class="btn btn-info btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/agencias')">
Ver registro de agencias
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-warning">Mi actividad</h5>
<p>Ver mi actividad en la plataforma.</p>
<a href="/IMPORTADORES/bitacoras/miAcceso"
class="btn btn-warning btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/miAcceso' ? 'active' : '' ?>">
Ver mis accesos
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<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-cyan mb-3">Mi actividad</h5>
<p class="text-muted small flex-grow-1 mb-4">Ver mi actividad en la plataforma.</p>
<button class="btn btn-cyan btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/miAcceso')">
Ver mis accesos
</button>
</div>
</div>
</div>
<?php endif; ?>
<?php if ($_SESSION['tipo_usuario'] === 'admin_agencia'): ?>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-primary">Registro de accesos</h5>
<p>Ver actividad de los usuarios.</p>
<a href="/IMPORTADORES/bitacoras/sistemaAgencia"
class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/sistemaAgencia' ? 'active' : '' ?>">
Ver actividad
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<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">Registro de accesos</h5>
<p class="text-muted small flex-grow-1 mb-4">Ver actividad de los usuarios.</p>
<button class="btn btn-teal btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/sistemaAgencia')">
Ver actividad
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-success">Registro de vinculaciones</h5>
<p>Ver las vinculaciones de mi agencia.</p>
<a href="/IMPORTADORES/bitacoras/vinculaciones"
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/vinculaciones' ? 'active' : '' ?>">
Ver actividad
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<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">Registro de vinculaciones</h5>
<p class="text-muted small flex-grow-1 mb-4">Ver las vinculaciones de mi agencia.</p>
<button class="btn btn-lime btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/vinculaciones')">
Ver vinculaciones
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-info">Mi actividad</h5>
<p>Ver mi actividad en la plataforma.</p>
<a href="/IMPORTADORES/bitacoras/miAcceso"
class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/miAcceso' ? 'active' : '' ?>">
Ver mis accesos
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<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">Mi actividad</h5>
<p class="text-muted small flex-grow-1 mb-4">Ver mi actividad en la plataforma.</p>
<button class="btn btn-success btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/miAcceso')">
Ver mis accesos
</button>
</div>
</div>
</div>
<?php endif; ?>
<?php if ($_SESSION['tipo_usuario'] === 'agente_aduanal'): ?>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-primary">Registro de accesos</h5>
<p>Ver actividad de los usuarios.</p>
<a href="/IMPORTADORES/bitacoras/sistemaAgencia"
class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/sistemaAgencia' ? 'active' : '' ?>">
Ver actividad
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<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">Registro de accesos</h5>
<p class="text-muted small flex-grow-1 mb-4">Ver actividad de los usuarios.</p>
<button class="btn btn-teal btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/sistemaAgencia')">
Ver actividad
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-success">Registro de vinculaciones</h5>
<p>Ver las vinculaciones de mi agencia.</p>
<a href="/IMPORTADORES/bitacoras/vinculaciones"
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/vinculaciones' ? 'active' : '' ?>">
Ver actividad
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<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">Registro de vinculaciones</h5>
<p class="text-muted small flex-grow-1 mb-4">Ver las vinculaciones de mi agencia.</p>
<button class="btn btn-lime btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/vinculaciones')">
Ver actividad
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-info">Mi actividad</h5>
<p>Ver mi actividad en la plataforma.</p>
<a href="/IMPORTADORES/bitacoras/miAcceso"
class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/miAcceso' ? 'active' : '' ?>">
Ver mis accesos
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<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">Mi actividad</h5>
<p class="text-muted small flex-grow-1 mb-4">Ver mi actividad en la plataforma.</p>
<button class="btn btn-success btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/miAcceso')">
Ver mis accesos
</button>
</div>
</div>
</div>
<?php endif; ?>
<?php if ($_SESSION['tipo_usuario'] === 'importador'): ?>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-primary">Mis vinculaciones</h5>
<p>Ver mi registro de vinculaciones.</p>
<a href="/IMPORTADORES/bitacoras/vinculacionesUsuario"
class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/vinculacionesUsuario' ? 'active' : '' ?>">
Ver mis vinculaciones
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<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">Mis vinculaciones</h5>
<p class="text-muted small flex-grow-1 mb-4">Ver mi registro de vinculaciones.</p>
<button class="btn btn-teal btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/vinculacionesUsuario')">
Ver mis vinculaciones
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm p-3">
<h5 class="text-success">Mi actividad</h5>
<p>Ver mi actividad en la plataforma.</p>
<a href="/IMPORTADORES/bitacoras/miAcceso"
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/miAcceso' ? 'active' : '' ?>">
Ver mis accesos
</a>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<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">Mi actividad</h5>
<p class="text-muted small flex-grow-1 mb-4">Ver mi actividad en la plataforma.</p>
<button class="btn btn-lime btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/bitacoras/miAcceso')">
Ver mis accesos
</button>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
<script>
// Función para navegación con animación
function navigateWithAnimation(element, url) {
// Prevenir múltiples clics
if (element.classList.contains('btn-loading')) {
return;
}
// Añadir estado de carga
element.classList.add('btn-loading');
element.disabled = true;
// Añadir efecto de salida a la tarjeta padre
const card = element.closest('.card');
if (card) {
card.style.transform = 'scale(0.95)';
card.style.opacity = '0.7';
card.style.transition = 'all 0.3s ease';
}
// Simular carga y navegar
setTimeout(function() {
// En un entorno real, descomenta la siguiente línea:
window.location.href = url;
}, 1500);
}
// Animación de entrada escalonada para las tarjetas
document.addEventListener('DOMContentLoaded', function() {
const cards = document.querySelectorAll('.card-hover');
// Efecto de revelado progresivo
cards.forEach((card, index) => {
card.style.animationDelay = (index * 0.1) + 's';
});
// Añadir efecto de hover mejorado
cards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px) scale(1.02)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0) scale(1)';
});
});
});
// Efecto de ondas en los botones
document.querySelectorAll('.btn-animated').forEach(button => {
button.addEventListener('click', function(e) {
let ripple = document.createElement('span');
ripple.classList.add('ripple');
this.appendChild(ripple);
let x = e.clientX - e.target.offsetLeft;
let y = e.clientY - e.target.offsetTop;
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
setTimeout(() => {
ripple.remove();
}, 1000);
});
});
// Animación para alertas que se pueden cerrar
document.querySelectorAll('.alert').forEach(alert => {
alert.addEventListener('closed.bs.alert', function() {
this.style.animation = 'slideOutUp 0.5s ease-in';
});
});
</script>
</body>
</html>