Animaciones plataforma
This commit is contained in:
@@ -13,6 +13,10 @@
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -31,14 +35,40 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.table thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">✅ Agencias Activas</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✅ Agencias Activas</h4>
|
||||
<!-- TABLA DE AGENCIAS -->
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover align-middle" id="tabla-agencias-activas">
|
||||
<thead>
|
||||
@@ -68,7 +98,7 @@
|
||||
<td><?= htmlspecialchars($ag['id_administrador']) ?></td>
|
||||
<td>
|
||||
<?php if (isset($ag['activo']) && $ag['activo'] == 1): ?>
|
||||
<a href="/IMPORTADORES/administrador/suspenderAgencia?id=<?= $ag['id_agencia'] ?>&success=1" class="btn btn-sm btn-danger">Suspender</a>
|
||||
<a href="/IMPORTADORES/administrador/suspenderAgencia?id=<?= $ag['id_agencia'] ?>&success=1" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">Suspender</a>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
<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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -27,6 +31,32 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.table thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -34,10 +64,10 @@
|
||||
|
||||
<!-- 📄 CONTENIDO -->
|
||||
<div class="content">
|
||||
<h4 class="mb-4">🏪 Alta de Agencias Aduanales</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🏪 Alta de Agencias Aduanales</h4>
|
||||
|
||||
<!-- FORMULARIO -->
|
||||
<div class="card p-4 mb-5 shadow-sm">
|
||||
<div class="card p-4 mb-5 shadow-sm card-hover position-relative h-auto">
|
||||
<form action="/IMPORTADORES/administrador/guardar_agencia" method="POST" id="formAltaAgencias">
|
||||
<h5 class="mb-3">➕ Nueva Agencia Aduanal</h5>
|
||||
<div class="row g-3">
|
||||
@@ -76,7 +106,7 @@
|
||||
</div>
|
||||
|
||||
<div class="text-end mt-4">
|
||||
<button class="btn btn-success px-4">Registrar</button>
|
||||
<button class="btn btn-success px-4 mt-auto w-auto btn-animated">Registrar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -13,6 +13,10 @@
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -31,6 +35,32 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
table.dataTable thead th { background:#343a40; color:#fff; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -38,9 +68,9 @@
|
||||
|
||||
<!-- 📄 CONTENIDO -->
|
||||
<div class="content">
|
||||
<h3 class="mb-4">👥 Alta de Usuarios</h3>
|
||||
<h3 class="mb-4 animate__animated animate__fadeInDown title_glow">👥 Alta de Usuarios</h3>
|
||||
<!-- FORMULARIO -->
|
||||
<div class="card p-4 mb-4 shadow-sm bg-white">
|
||||
<div class="card p-4 mb-4 shadow-sm bg-white card-hover position-relative h-auto">
|
||||
<form action="/IMPORTADORES/administrador/guardar_usuario" method="POST">
|
||||
<h5 class="mb-3">➕ Nuevo Usuario</h5>
|
||||
<div class="row g-3">
|
||||
@@ -62,7 +92,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end mt-4">
|
||||
<button class="btn btn-success px-4">Registrar</button>
|
||||
<button class="btn btn-success px-4 mt-auto w-auto btn-animated">Registrar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -93,7 +123,7 @@
|
||||
<td><?= isset($u['creado_en']) && $u['creado_en'] instanceof DateTime ? $u['creado_en']->format('Y-m-d H:i') : '' ?></td>
|
||||
<td>
|
||||
<?php if (isset($u['activo']) && $u['activo'] == 1): ?>
|
||||
<a href="/IMPORTADORES/administrador/suspender?id=<?= $u['id_usuario'] ?>&success=1" class="btn btn-sm btn-danger">Suspender</a>
|
||||
<a href="/IMPORTADORES/administrador/suspender?id=<?= $u['id_usuario'] ?>&success=1" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">Suspender</a>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -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; }
|
||||
@@ -26,6 +30,32 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.table thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -33,10 +63,10 @@
|
||||
|
||||
<!-- 📄 CONTENIDO -->
|
||||
<div class="content">
|
||||
<h4 class="mb-4">✅ Aprobación de Agencias Aduanales</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✅ Aprobación de Agencias Aduanales</h4>
|
||||
|
||||
<!-- TABLA DE AGENCIAS -->
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<h5 class="mb-3">🏪 Agencias Solicitantes</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover align-middle" id="tabla-agencias-pendientes">
|
||||
@@ -66,13 +96,13 @@
|
||||
<td><?= $s['request_date'] ? $s['request_date']->format('Y-m-d H:i') : '' ?></td>
|
||||
<td>
|
||||
<?php if (!empty($s['opinion_file'])): ?>
|
||||
<a href="/IMPORTADORES/ver_opinion.php?file=<?= urlencode($s['opinion_file']) ?>" target="_blank" class="btn btn-sm btn-outline-secondary">Ver PDF</a>
|
||||
<a href="/IMPORTADORES/ver_opinion.php?file=<?= urlencode($s['opinion_file']) ?>" target="_blank" class="btn btn-sm btn-outline-secondary mt-auto w-auto btn-animated">Ver PDF</a>
|
||||
<?php else: ?>
|
||||
<span class="text-muted">No adjunto</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/IMPORTADORES/administrador/aprobar_agencia?id=<?= $s['request_id'] ?>" class="btn btn-sm btn-success">Aprobar</a>
|
||||
<a href="/IMPORTADORES/administrador/aprobar_agencia?id=<?= $s['request_id'] ?>" class="btn btn-sm btn-success mt-auto w-auto btn-animated">Aprobar</a>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
|
||||
@@ -12,6 +12,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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; }
|
||||
@@ -30,6 +34,32 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.table thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -37,9 +67,9 @@
|
||||
|
||||
<!-- 📄 CONTENIDO -->
|
||||
<div class="content">
|
||||
<h4 class="mb-4">✅ Aprobación de Usuarios</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✅ Aprobación de Usuarios</h4>
|
||||
<!-- TABLA DE USUARIOS -->
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<h5 class="mb-3">👥 Usuarios Solicitantes</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover align-middle" id="tabla-usuarios-pendientes">
|
||||
@@ -67,13 +97,13 @@
|
||||
<td><?= $s['request_date'] ? $s['request_date']->format('Y-m-d H:i') : '' ?></td>
|
||||
<td>
|
||||
<?php if (!empty($s['opinion_file'])): ?>
|
||||
<a href="/IMPORTADORES/ver_opinion.php?file=<?= urlencode($s['opinion_file']) ?>" target="_blank" class="btn btn-sm btn-outline-secondary">Ver PDF</a>
|
||||
<a href="/IMPORTADORES/ver_opinion.php?file=<?= urlencode($s['opinion_file']) ?>" target="_blank" class="btn btn-sm btn-outline-secondary mt-auto w-auto btn-animated">Ver PDF</a>
|
||||
<?php else: ?>
|
||||
<span class="text-muted">No adjunto</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/IMPORTADORES/administrador/aprobar_usuario?id=<?= $s['request_id'] ?>" class="btn btn-sm btn-success">Aprobar</a>
|
||||
<a href="/IMPORTADORES/administrador/aprobar_usuario?id=<?= $s['request_id'] ?>" class="btn btn-sm btn-success mt-auto w-auto btn-animated">Aprobar</a>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
|
||||
@@ -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; }
|
||||
@@ -22,9 +26,18 @@
|
||||
.btn-orange { background-color: orangeRed; color: white; }
|
||||
.btn-orange:hover { background-color: #ff3600; color: white; }
|
||||
.text-orange { color: orangeRed; }
|
||||
.btn-teal { background-color: #20c997; color: white; }
|
||||
.btn-teal:hover { background-color: #4dd4ac; color: black; }
|
||||
.text-teal { color: #20c997; }
|
||||
.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; }
|
||||
/* 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 */
|
||||
@@ -35,79 +48,231 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.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; }
|
||||
.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; }
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.loading-spinner { display: none; }
|
||||
.btn-loading .loading-spinner { display: inline-block; }
|
||||
.btn-loading .btn-text { display: none; }
|
||||
/* Animación para alertas */
|
||||
.alert-animated { animation: slideInDown 0.5s ease-out; }
|
||||
@keyframes slideInDown {
|
||||
from { transform: translateY(-100%); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
/* Efecto de parpadeo para elementos obligatorios */
|
||||
.border-warning-animated { animation: borderGlow 2s ease-in-out infinite alternate; }
|
||||
@keyframes borderGlow {
|
||||
from { border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); }
|
||||
to { border-color: #ffcd39; box-shadow: 0 0 20px rgba(255, 193, 7, 0.8); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 📄 CONTENIDO -->
|
||||
<div class="content">
|
||||
<h4 class="mb-4">📦 Panel de Administrador</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📦 Panel de Administrador</h4>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-primary">Aprobar agencias</h5>
|
||||
<p>Aprueba las agencias que solicitaron un registro.</p>
|
||||
<a href="/IMPORTADORES/administrador/aprobarAgencias"
|
||||
class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/aprobarAgencias' ? 'active' : '' ?>">
|
||||
Ver agencias solicitantes</a>
|
||||
</div>
|
||||
<!-- <?php // if ($catalogosData['catalogos_activos']): ?> -->
|
||||
<div class="row g-4">
|
||||
<!-- <?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-primary">Aprobar agencias</h5>
|
||||
<p>Aprueba las agencias que solicitaron un registro.</p>
|
||||
<a href="/IMPORTADORES/administrador/aprobarAgencias"
|
||||
class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/aprobarAgencias' ? 'active' : '' ?>">
|
||||
Ver agencias solicitantes</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-success">Alta de agencias</h5>
|
||||
<p>Da de alta manualmente una agencia.</p>
|
||||
<a href="/IMPORTADORES/administrador/altaAgencias"
|
||||
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/altaAgencias' ? 'active' : '' ?>">
|
||||
Nueva agencia
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-info">Aprobar de usuarios</h5>
|
||||
<p>Aprueba los usuarios que solicitaron un registro.</p>
|
||||
<a href="/IMPORTADORES/administrador/aprobarUsuarios"
|
||||
class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/aprobarUsuarios' ? 'active' : '' ?>">
|
||||
Ver usuarios solicitantes
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-indigo">Alta de usuarios</h5>
|
||||
<p>Da de alta manualmente a un usuario.</p>
|
||||
<a href="/IMPORTADORES/administrador/altaUsuarios"
|
||||
class="btn btn-indigo btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/altaUsuarios' ? 'active' : '' ?>">
|
||||
Nuevo usuario
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-warning">Configuración</h5>
|
||||
<p>Administra los datos de tu agencia.</p>
|
||||
<a href="/IMPORTADORES/administrador/configuracion"
|
||||
class="btn btn-warning btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/configuracion' ? 'active' : '' ?>">
|
||||
Configurar
|
||||
</a>
|
||||
</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>
|
||||
</div>
|
||||
<!-- <?php // endforeach; ?> -->
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-success">Alta de agencias</h5>
|
||||
<p>Da de alta manualmente una agencia.</p>
|
||||
<a href="/IMPORTADORES/administrador/altaAgencias"
|
||||
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/altaAgencias' ? 'active' : '' ?>">
|
||||
Nueva agencia
|
||||
</a>
|
||||
<!-- <?php // if (count($catalogosData['catalogos']) === 2): // Solo obligatorios ?>
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info alert-animated">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="fas fa-lightbulb fa-2x text-info animate__animated animate__pulse animate__infinite"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="alert-heading">💡 Consejo</h6>
|
||||
<p class="mb-2">Parece que no tienes catálogos activados. Puedes activar los que necesites desde tus preferencias.</p>
|
||||
<button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
|
||||
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span class="btn-text">Configurar Catálogos</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-info">Aprobar de usuarios</h5>
|
||||
<p>Aprueba los usuarios que solicitaron un registro.</p>
|
||||
<a href="/IMPORTADORES/administrador/aprobarUsuarios"
|
||||
class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/aprobarUsuarios' ? 'active' : '' ?>">
|
||||
Ver usuarios solicitantes
|
||||
</a>
|
||||
<?php // endif; ?>
|
||||
|
||||
<?php // else: ?>
|
||||
<! -- Si los catálogos están completamente desactivados -- >
|
||||
<div class="row g-4">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-warning alert-animated">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="fas fa-lock fa-2x text-warning animate__animated animate__swing animate__infinite"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="alert-heading">🔒 Catálogos Desactivados</h5>
|
||||
<p class="mb-3">Los catálogos están desactivados en tus preferencias. Solo tienes acceso a las funciones básicas del sistema.</p>
|
||||
<button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
|
||||
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span class="btn-text">Activar Catálogos</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<! -- Mostrar solo catálogos obligatorios -- >
|
||||
<?php /*
|
||||
$delay = 0;
|
||||
foreach ($catalogosData['catalogos'] as $catalogo):
|
||||
$delay += 0.1;
|
||||
?>
|
||||
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
|
||||
<div class="card shadow-sm p-3 card-hover border-warning border-warning-animated h-100">
|
||||
<h5 class="text-<?= $catalogo['color'] ?> mb-3">
|
||||
<i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i>
|
||||
<?= $catalogo['nombre'] ?>
|
||||
</h5>
|
||||
<p class="text-muted small flex-grow-1"><?= $catalogo['descripcion'] ?></p>
|
||||
<div class="mt-auto">
|
||||
<button
|
||||
class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
|
||||
onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
|
||||
data-url="<?= $catalogo['ruta'] ?>">
|
||||
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span class="btn-text"><?= $catalogo['accion'] ?></span>
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-warning mt-2 d-flex align-items-center">
|
||||
<i class="fas fa-lock me-1 animate__animated animate__pulse animate__infinite"></i>
|
||||
Función básica
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; */ ?>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-indigo">Alta de usuarios</h5>
|
||||
<p>Da de alta manualmente a un usuario.</p>
|
||||
<a href="/IMPORTADORES/administrador/altaUsuarios"
|
||||
class="btn btn-indigo btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/altaUsuarios' ? 'active' : '' ?>">
|
||||
Nuevo usuario
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-warning">Configuración</h5>
|
||||
<p>Administra los datos de tu agencia.</p>
|
||||
<a href="/IMPORTADORES/administrador/configuracion"
|
||||
class="btn btn-warning btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/sistemas/configuracion' ? 'active' : '' ?>">
|
||||
Configurar
|
||||
</a>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php // endif; ?> -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Función para navegación con animación
|
||||
function navigateWithAnimation(button, url) {
|
||||
// Añadir estado de carga
|
||||
button.classList.add('btn-loading');
|
||||
button.disabled = true;
|
||||
|
||||
// Simular carga y navegar
|
||||
setTimeout(function() {
|
||||
window.location.href = url;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 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';
|
||||
});
|
||||
});
|
||||
|
||||
// Efecto de hover mejorado
|
||||
document.querySelectorAll('.card-hover').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)';
|
||||
});
|
||||
});
|
||||
|
||||
// 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>
|
||||
@@ -14,6 +14,10 @@
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -32,6 +36,32 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
table.dataTable thead th { background:#343a40; color:#fff; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -39,8 +69,8 @@
|
||||
|
||||
<!-- 📄 CONTENIDO -->
|
||||
<div class="content">
|
||||
<h4 class="mb-4">🚷 Usuarios Inactivos</h4>
|
||||
<div class="card p-3 shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🚷 Usuarios Inactivos</h4>
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="tabla-inactivos">
|
||||
<thead class="table-dark">
|
||||
@@ -65,8 +95,8 @@
|
||||
<td><?= isset($u['creado_en']) && $u['creado_en'] instanceof DateTime ? $u['creado_en']->format('Y-m-d H:i') : '' ?></td>
|
||||
<td>
|
||||
<?php if (isset($u['activo']) && $u['activo'] == 0): ?>
|
||||
<a href="/IMPORTADORES/administrador/activar?id=<?= $u['id_usuario'] ?>&success=1" class="btn btn-sm btn-success">Activar</a>
|
||||
<a href="/IMPORTADORES/administrador/reset_password?id=<?= $u['id_usuario'] ?>" class="btn btn-sm btn-secondary">Nueva Contraseña</a>
|
||||
<a href="/IMPORTADORES/administrador/activar?id=<?= $u['id_usuario'] ?>&success=1" class="btn btn-sm btn-success mt-auto w-auto btn-animated">Activar</a>
|
||||
<a href="/IMPORTADORES/administrador/reset_password?id=<?= $u['id_usuario'] ?>" class="btn btn-sm btn-secondary mt-auto w-auto btn-animated">Nueva Contraseña</a>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -12,6 +12,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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; }
|
||||
@@ -30,6 +34,32 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
table.dataTable thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -37,9 +67,9 @@
|
||||
|
||||
<!-- 📄 CONTENIDO -->
|
||||
<div class="content px-4">
|
||||
<h3 class="mb-4">👨✈️ Administración de Agentes</h3>
|
||||
<h3 class="mb-4 animate__animated animate__fadeInDown title_glow">👨✈️ Administración de Agentes</h3>
|
||||
<!-- FORMULARIO -->
|
||||
<div class="card p-4 mb-4 shadow-sm bg-white">
|
||||
<div class="card p-4 mb-4 shadow-sm bg-white card-hover position-relative h-auto">
|
||||
<form action="/IMPORTADORES/agencias/guardarAgente" method="POST">
|
||||
<h5 class="mb-3">➕ Nuevo Agente</h5>
|
||||
<div class="row g-3">
|
||||
@@ -60,7 +90,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end mt-4">
|
||||
<button class="btn btn-success px-4">Registrar</button>
|
||||
<button class="btn btn-success px-4 mt-auto w-auto btn-animated">Registrar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -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; }
|
||||
@@ -22,9 +26,18 @@
|
||||
.btn-orange { background-color: orangeRed; color: white; }
|
||||
.btn-orange:hover { background-color: #ff3600; color: white; }
|
||||
.text-orange { color: orangeRed; }
|
||||
.btn-teal { background-color: #20c997; color: white; }
|
||||
.btn-teal:hover { background-color: #4dd4ac; color: black; }
|
||||
.text-teal { color: #20c997; }
|
||||
.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; }
|
||||
/* 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 */
|
||||
@@ -35,6 +48,35 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.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; }
|
||||
.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; }
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.loading-spinner { display: none; }
|
||||
.btn-loading .loading-spinner { display: inline-block; }
|
||||
.btn-loading .btn-text { display: none; }
|
||||
/* Animación para alertas */
|
||||
.alert-animated { animation: slideInDown 0.5s ease-out; }
|
||||
@keyframes slideInDown {
|
||||
from { transform: translateY(-100%); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
/* Efecto de parpadeo para elementos obligatorios */
|
||||
.border-warning-animated { animation: borderGlow 2s ease-in-out infinite alternate; }
|
||||
@keyframes borderGlow {
|
||||
from { border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); }
|
||||
to { border-color: #ffcd39; box-shadow: 0 0 20px rgba(255, 193, 7, 0.8); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -43,83 +85,206 @@
|
||||
<div class="content">
|
||||
<h4 class="mb-4">📦 Panel de Agencia Aduanal</h4>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-primary">Solicitudes de vinculación</h5>
|
||||
<p>Aprueba las solicitudes de vinculación de los importadores.</p>
|
||||
<a href="/IMPORTADORES/vinculaciones/solicitudesVinculacion"
|
||||
class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/vinculaciones/solicitudesVinculacion' ? 'active' : '' ?>">
|
||||
Ver solicitudes
|
||||
</a>
|
||||
</div>
|
||||
<!-- <?php // if ($catalogosData['catalogos_activos']): ?> -->
|
||||
<div class="row g-4">
|
||||
<!-- <?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-primary">Solicitudes de vinculación</h5>
|
||||
<p>Aprueba las solicitudes de vinculación de los importadores.</p>
|
||||
<a href="/IMPORTADORES/vinculaciones/solicitudesVinculacion"
|
||||
class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/vinculaciones/solicitudesVinculacion' ? 'active' : '' ?>">
|
||||
Ver solicitudes
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-success">Usuarios vinculados</h5>
|
||||
<p>Consulta los que ya fueron autorizados.</p>
|
||||
<a href="/IMPORTADORES/vinculaciones/vinculacionesAgencia"
|
||||
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/vinculaciones/vinculacionesAgencia' ? 'active' : '' ?>">
|
||||
Ver usuarios
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-info">Alta de agentes</h5>
|
||||
<p>Da de alta a tus agentes aduanales.</p>
|
||||
<a href="/IMPORTADORES/agencias/alta"
|
||||
class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agencias/alta' ? 'active' : '' ?>">
|
||||
Nuevo agente
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-indigo">Patentes</h5>
|
||||
<p>Gestiona las patentes de la agencia.</p>
|
||||
<a href="/IMPORTADORES/patente/dashboard"
|
||||
class="btn btn-indigo btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/patente/dashboard' ? 'active' : '' ?>">
|
||||
Ver agentes
|
||||
</a>
|
||||
</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/agencias/configuracion' ? 'active' : '' ?>">
|
||||
Configurar
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-orange">Locaciones</h5>
|
||||
<p>Gestiona la locaciones validas para nuevos registros.</p>
|
||||
<a href="/IMPORTADORES/locaciones/lista"
|
||||
class="btn btn-orange btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/locaciones/lista' ? 'active' : '' ?>">
|
||||
Gestionar locaciones
|
||||
</a>
|
||||
</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>
|
||||
</div>
|
||||
<!-- <?php // endforeach; ?> -->
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-success">Usuarios vinculados</h5>
|
||||
<p>Consulta los que ya fueron autorizados.</p>
|
||||
<a href="/IMPORTADORES/vinculaciones/vinculacionesAgencia"
|
||||
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/vinculaciones/vinculacionesAgencia' ? 'active' : '' ?>">
|
||||
Ver usuarios
|
||||
</a>
|
||||
<!-- <?php // if (count($catalogosData['catalogos']) === 2): // Solo obligatorios ?>
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info alert-animated">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="fas fa-lightbulb fa-2x text-info animate__animated animate__pulse animate__infinite"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="alert-heading">💡 Consejo</h6>
|
||||
<p class="mb-2">Parece que no tienes catálogos activados. Puedes activar los que necesites desde tus preferencias.</p>
|
||||
<button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
|
||||
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span class="btn-text">Configurar Catálogos</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-info">Alta de agentes</h5>
|
||||
<p>Da de alta a tus agentes aduanales.</p>
|
||||
<a href="/IMPORTADORES/agencias/alta"
|
||||
class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agencias/alta' ? 'active' : '' ?>">
|
||||
Nuevo agente
|
||||
</a>
|
||||
<?php // endif; ?>
|
||||
|
||||
<?php // else: ?>
|
||||
<! -- Si los catálogos están completamente desactivados -- >
|
||||
<div class="row g-4">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-warning alert-animated">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="fas fa-lock fa-2x text-warning animate__animated animate__swing animate__infinite"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="alert-heading">🔒 Catálogos Desactivados</h5>
|
||||
<p class="mb-3">Los catálogos están desactivados en tus preferencias. Solo tienes acceso a las funciones básicas del sistema.</p>
|
||||
<button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
|
||||
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span class="btn-text">Activar Catálogos</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<! -- Mostrar solo catálogos obligatorios -- >
|
||||
<?php /*
|
||||
$delay = 0;
|
||||
foreach ($catalogosData['catalogos'] as $catalogo):
|
||||
$delay += 0.1;
|
||||
?>
|
||||
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
|
||||
<div class="card shadow-sm p-3 card-hover border-warning border-warning-animated h-100">
|
||||
<h5 class="text-<?= $catalogo['color'] ?> mb-3">
|
||||
<i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i>
|
||||
<?= $catalogo['nombre'] ?>
|
||||
</h5>
|
||||
<p class="text-muted small flex-grow-1"><?= $catalogo['descripcion'] ?></p>
|
||||
<div class="mt-auto">
|
||||
<button
|
||||
class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
|
||||
onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
|
||||
data-url="<?= $catalogo['ruta'] ?>">
|
||||
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span class="btn-text"><?= $catalogo['accion'] ?></span>
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-warning mt-2 d-flex align-items-center">
|
||||
<i class="fas fa-lock me-1 animate__animated animate__pulse animate__infinite"></i>
|
||||
Función básica
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; */ ?>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-indigo">Patentes</h5>
|
||||
<p>Gestiona las patentes de la agencia.</p>
|
||||
<a href="/IMPORTADORES/patente/dashboard"
|
||||
class="btn btn-indigo btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/patente/dashboard' ? 'active' : '' ?>">
|
||||
Ver agentes
|
||||
</a>
|
||||
</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/agencias/configuracion' ? 'active' : '' ?>">
|
||||
Configurar
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-orange">Locaciones</h5>
|
||||
<p>Gestiona la locaciones validas para nuevos registros.</p>
|
||||
<a href="/IMPORTADORES/locaciones/lista"
|
||||
class="btn btn-orange btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/locaciones/lista' ? 'active' : '' ?>">
|
||||
Gestionar locaciones
|
||||
</a>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php // endif; ?> -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Función para navegación con animación
|
||||
function navigateWithAnimation(button, url) {
|
||||
// Añadir estado de carga
|
||||
button.classList.add('btn-loading');
|
||||
button.disabled = true;
|
||||
|
||||
// Simular carga y navegar
|
||||
setTimeout(function() {
|
||||
window.location.href = url;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 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';
|
||||
});
|
||||
});
|
||||
|
||||
// Efecto de hover mejorado
|
||||
document.querySelectorAll('.card-hover').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)';
|
||||
});
|
||||
});
|
||||
|
||||
// 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>
|
||||
@@ -11,6 +11,10 @@ include __DIR__ . '/../partials/sidebar_agente.php';
|
||||
<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; }
|
||||
@@ -19,9 +23,24 @@ include __DIR__ . '/../partials/sidebar_agente.php';
|
||||
.sidebar .nav-link.active { background-color: #495057; color: #fff; }
|
||||
.content { margin-top: 56px; padding: 40px 20px; position: relative; z-index: 1; background-color: #f4f6f9; transition: margin-left 0.3s ease; }
|
||||
.navbar { position: fixed; top: 0; width: 100%; z-index: 1050; }
|
||||
.btn-orange { background-color: orangeRed; color: white;}
|
||||
.btn-orange:hover { background-color: #ff3600; color: white;}
|
||||
.text-orange { color: orangeRed;}
|
||||
.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; }
|
||||
/* 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 */
|
||||
@@ -32,6 +51,35 @@ include __DIR__ . '/../partials/sidebar_agente.php';
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.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; }
|
||||
.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; }
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.loading-spinner { display: none; }
|
||||
.btn-loading .loading-spinner { display: inline-block; }
|
||||
.btn-loading .btn-text { display: none; }
|
||||
/* Animación para alertas */
|
||||
.alert-animated { animation: slideInDown 0.5s ease-out; }
|
||||
@keyframes slideInDown {
|
||||
from { transform: translateY(-100%); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
/* Efecto de parpadeo para elementos obligatorios */
|
||||
.border-warning-animated { animation: borderGlow 2s ease-in-out infinite alternate; }
|
||||
@keyframes borderGlow {
|
||||
from { border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); }
|
||||
to { border-color: #ffcd39; box-shadow: 0 0 20px rgba(255, 193, 7, 0.8); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -40,61 +88,184 @@ include __DIR__ . '/../partials/sidebar_agente.php';
|
||||
<div class="content">
|
||||
<h4 class="mb-4">📦 Panel del Agente Aduanal</h4>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-primary">Importadores vinculados</h5>
|
||||
<p>Consulta los que ya fueron autorizados.</p>
|
||||
<a href="/IMPORTADORES/agentes/vinculados"
|
||||
class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agentes/vinculados' ? 'active' : '' ?>">
|
||||
Ver importadores
|
||||
</a>
|
||||
</div>
|
||||
<!-- <?php // if ($catalogosData ['catalogos_activos']): ?> -->
|
||||
<div class="row g-4">
|
||||
<!-- <?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-primary">Importadores vinculados</h5>
|
||||
<p>Consulta los que ya fueron autorizados.</p>
|
||||
<a href="/IMPORTADORES/agentes/vinculados"
|
||||
class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agentes/vinculados' ? 'active' : '' ?>">
|
||||
Ver importadores
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-success">Patentes</h5>
|
||||
<p>Gestiona las patentes de la agencia.</p>
|
||||
<a href="/IMPORTADORES/patente/dashboard"
|
||||
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES//patente/dashboard' ? 'active' : '' ?>">
|
||||
Ver solicitudes
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-info">Locaciones</h5>
|
||||
<p>Gestiona la locaciones validas para nuevos registros.</p>
|
||||
<a href="/IMPORTADORES/locaciones/lista"
|
||||
class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/locaciones/lista' ? 'active' : '' ?>">
|
||||
Gestionar locaciones
|
||||
</a>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
<!-- <?php // endforeach; ?> -->
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-success">Patentes</h5>
|
||||
<p>Gestiona las patentes de la agencia.</p>
|
||||
<a href="/IMPORTADORES/patente/dashboard"
|
||||
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES//patente/dashboard' ? 'active' : '' ?>">
|
||||
Ver solicitudes
|
||||
</a>
|
||||
<!-- <?php // if (count($catalogosData['catalogos']) === 2): // Solo obligatorios ?>
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info alert-animated">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="fas fa-lightbulb fa-2x text-info animate__animated animate__pulse animate__infinite"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="alert-heading">💡 Consejo</h6>
|
||||
<p class="mb-2">Parece que no tienes catálogos activados. Puedes activar los que necesites desde tus preferencias.</p>
|
||||
<button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
|
||||
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span class="btn-text">Configurar Catálogos</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-info">Locaciones</h5>
|
||||
<p>Gestiona la locaciones validas para nuevos registros.</p>
|
||||
<a href="/IMPORTADORES/locaciones/lista"
|
||||
class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/locaciones/lista' ? 'active' : '' ?>">
|
||||
Gestionar locaciones
|
||||
</a>
|
||||
<?php // endif; ?>
|
||||
|
||||
<?php // else: ?>
|
||||
<! -- Si los catálogos están completamente desactivados -- >
|
||||
<div class="row g-4">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-warning alert-animated">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="fas fa-lock fa-2x text-warning animate__animated animate__swing animate__infinite"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="alert-heading">🔒 Catálogos Desactivados</h5>
|
||||
<p class="mb-3">Los catálogos están desactivados en tus preferencias. Solo tienes acceso a las funciones básicas del sistema.</p>
|
||||
<button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
|
||||
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span class="btn-text">Activar Catálogos</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<! -- Mostrar solo catálogos obligatorios -- >
|
||||
<?php /*
|
||||
$delay = 0;
|
||||
foreach ($catalogosData['catalogos'] as $catalogo):
|
||||
$delay += 0.1;
|
||||
?>
|
||||
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
|
||||
<div class="card shadow-sm p-3 card-hover border-warning border-warning-animated h-100">
|
||||
<h5 class="text-<?= $catalogo['color'] ?> mb-3">
|
||||
<i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i>
|
||||
<?= $catalogo['nombre'] ?>
|
||||
</h5>
|
||||
<p class="text-muted small flex-grow-1"><?= $catalogo['descripcion'] ?></p>
|
||||
<div class="mt-auto">
|
||||
<button
|
||||
class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
|
||||
onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
|
||||
data-url="<?= $catalogo['ruta'] ?>">
|
||||
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span class="btn-text"> <?= $catalogo['accion'] ?></span>
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-warning mt-2 d-flex align-items-center">
|
||||
<i class="fas fa-lock me-1 animate__animated animate__pulse animate__infinite"></i>
|
||||
Función básica
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; */ ?>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php // endif; ?> -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Función para navegación con animación
|
||||
function navigateWithAnimation(button, url) {
|
||||
// Añadir estado de carga
|
||||
button.classList.add('btn-loading');
|
||||
button.disabled = true;
|
||||
|
||||
// Simular carga y navegar
|
||||
setTimeout(function() {
|
||||
window.location.href = url;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 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';
|
||||
});
|
||||
});
|
||||
|
||||
// Efecto de hover mejorado
|
||||
document.querySelectorAll('.card-hover').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)';
|
||||
});
|
||||
});
|
||||
|
||||
// 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>
|
||||
@@ -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; }
|
||||
@@ -26,12 +30,38 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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">⚙️ Automatizaciones</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">⚙️ Automatizaciones</h4>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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,15 +33,41 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
table.dataTable thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">🏪 Registro de Agencias</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🏪 Registro de Agencias</h4>
|
||||
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="tabla-registros-agencias">
|
||||
<thead class="table-dark">
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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,15 +33,41 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.table thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">🔄 Cambios de Usuario</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🔄 Cambios de Usuario</h4>
|
||||
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped align-middle" id="tabla-bitacora-usuarios">
|
||||
<thead class="table-dark">
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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,15 +33,41 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
table.dataTable thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">👥 Acceso de Usuarios</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">👥 Acceso de Usuarios</h4>
|
||||
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="tabla-logins">
|
||||
<thead class="table-dark">
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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,15 +33,41 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
table.dataTable thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">👥 Mi Actividad</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">👥 Mi Actividad</h4>
|
||||
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="tabla-logins-usuario">
|
||||
<thead class="table-dark">
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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,15 +33,41 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
table.dataTable thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">👥 Registro de Usuarios</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">👥 Registro de Usuarios</h4>
|
||||
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="tabla-registros-usuarios">
|
||||
<thead class="table-dark">
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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,15 +33,41 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
table.dataTable thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">🔗 Vinculaciones</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🔗 Vinculaciones</h4>
|
||||
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped align-middle" id="tabla-bitacora-vinculaciones">
|
||||
<thead class="table-dark">
|
||||
|
||||
@@ -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>
|
||||
@@ -11,6 +11,10 @@
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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,16 +33,42 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
table.dataTable thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">👥 Acceso de Usuarios</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">👥 Acceso de Usuarios</h4>
|
||||
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="table-responsive">
|
||||
<div class="table-responsive card-hover position-relative h-auto">
|
||||
<table class="table table-striped" id="tabla-logins">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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,15 +33,41 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
table.dataTable thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">🔗 Vinculaciones</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🔗 Vinculaciones</h4>
|
||||
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped align-middle" id="tabla-vinculaciones-usuario">
|
||||
<thead class="table-dark">
|
||||
|
||||
@@ -10,6 +10,10 @@
|
||||
<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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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>
|
||||
table.dataTable thead th { background: #343a40; color: #fff; }
|
||||
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
|
||||
@@ -29,13 +33,39 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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>➕ Nuevo Chofer</h4>
|
||||
<div class="card p-4 shadow-sm bg-white">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Nuevo Chofer</h4>
|
||||
<div class="card p-4 shadow-sm bg-white card-hover position-relative h-auto">
|
||||
<!-- Se agrega enctype para subir archivos -->
|
||||
<form action="/IMPORTADORES/choferes/guardar" method="POST" enctype="multipart/form-data" id="formAltaChoferes">
|
||||
<div class="mb-3">
|
||||
@@ -91,8 +121,8 @@
|
||||
<input name="foto" id="foto" type="file" class="form-control" accept="image/*">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-success">Guardar</button>
|
||||
<a href="/IMPORTADORES/choferes/lista" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<button type="submit" class="btn btn-success mt-auto w-auto btn-animated">Guardar</button>
|
||||
<a href="/IMPORTADORES/choferes/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,6 +10,10 @@
|
||||
<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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -28,13 +32,39 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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>✏️ Editar Chofer #<?= (int)$chofer['id_chofer'] ?></h4>
|
||||
<div class="card p-4 shadow-sm bg-white">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✏️ Editar Chofer #<?= (int)$chofer['id_chofer'] ?></h4>
|
||||
<div class="card p-4 shadow-sm bg-white card-hover position-relative h-auto">
|
||||
<form action="/IMPORTADORES/choferes/actualizar" method="POST" enctype="multipart/form-data" id="formEditChoferes">
|
||||
<input type="hidden" name="id_chofer" value="<?= (int)$chofer['id_chofer'] ?>">
|
||||
|
||||
@@ -130,8 +160,8 @@
|
||||
<label for="status" class="form-check-label">Activo</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Actualizar</button>
|
||||
<a href="/IMPORTADORES/choferes/lista" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Actualizar</button>
|
||||
<a href="/IMPORTADORES/choferes/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,6 +13,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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>
|
||||
table.dataTable thead th { background: #343a40; color: #fff; }
|
||||
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
|
||||
@@ -32,14 +36,40 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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>👨✈️ Mis Choferes</h4>
|
||||
<a href="/IMPORTADORES/choferes/crear" class="btn btn-success mb-3">➕ Nuevo Chofer</a>
|
||||
<div class="card p-3 shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">👨✈️ Mis Choferes</h4>
|
||||
<a href="/IMPORTADORES/choferes/crear" class="btn btn-success mb-3 mt-auto w-auto btn-animated">➕ Nuevo Chofer</a>
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="tabla-choferes">
|
||||
<thead>
|
||||
@@ -75,8 +105,8 @@
|
||||
</td>
|
||||
<td><?= htmlspecialchars($c['transportista']) ?></td>
|
||||
<td>
|
||||
<a href="/IMPORTADORES/choferes/editar?id=<?= $c['id_chofer'] ?>" class="btn btn-sm btn-primary">✏️</a>
|
||||
<button class="btn btn-sm btn-danger" onclick="confirmDeleteChofer(<?= $c['id_chofer'] ?>)">🗑️</button>
|
||||
<a href="/IMPORTADORES/choferes/editar?id=<?= $c['id_chofer'] ?>" class="btn btn-sm btn-primary mt-auto w-auto btn-animated">✏️</a>
|
||||
<button class="btn btn-sm btn-danger mt-auto w-auto btn-animated" onclick="confirmDeleteChofer(<?= $c['id_chofer'] ?>)">🗑️</button>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
|
||||
@@ -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; }
|
||||
@@ -26,6 +30,32 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
label {font-weight: bold;}
|
||||
.section-header { background-color: #e9ecef; padding: 10px 15px; margin: 0 0 20px 0; border-radius: 8px 8px 0 0; font-weight: bold; color: #495057; }
|
||||
</style>
|
||||
@@ -33,10 +63,10 @@
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">ℹ️ Información General</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">ℹ️ Información General</h4>
|
||||
|
||||
<?php if (isset($datos['tipo_usuario']) && $datos['tipo_usuario'] === 'importador'): ?>
|
||||
<div class="card shadow-sm p-4 mb-4 bg-white">
|
||||
<div class="card shadow-sm p-4 mb-4 bg-white card-hover position-relative h-auto">
|
||||
<div class="section-header">👤 Información Personal</div>
|
||||
<form>
|
||||
<div class="row mb-3">
|
||||
@@ -156,7 +186,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: right;">
|
||||
<a href="/IMPORTADORES/configuracion/editar" class="btn btn-success mb-3">✏️ Editar Información</a>
|
||||
<a href="/IMPORTADORES/configuracion/editar" class="btn btn-success mb-3 mt-auto w-auto btn-animated">✏️ Editar Información</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -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; }
|
||||
@@ -26,6 +30,32 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
label {font-weight: bold;}
|
||||
.error-msg { color: red; font-size: 0.9em; }
|
||||
</style>
|
||||
@@ -33,8 +63,8 @@
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">✏️ Editar Información</h4>
|
||||
<div class="card shadow-sm p-4 mb-4 bg-white">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✏️ Editar Información</h4>
|
||||
<div class="card shadow-sm p-4 mb-4 bg-white card-hover position-relative h-auto">
|
||||
<form id="form-edicion" method="POST" action="/IMPORTADORES/configuracion/guardar">
|
||||
<div class="row mb-3">
|
||||
<label class="col-md-2 col-form-label">Clave:</label>
|
||||
@@ -154,8 +184,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: right;">
|
||||
<a href="/IMPORTADORES/configuracion/index" class="btn btn-secondary ms-2" style="margin-right: 10px;">Cancelar</a>
|
||||
<button type="submit" class="btn btn-primary">💾 Guardar Cambios</button>
|
||||
<a href="/IMPORTADORES/configuracion/index" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated" style="margin-right: 10px;">Cancelar</a>
|
||||
<button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">💾 Guardar Cambios</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
<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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -22,6 +26,32 @@
|
||||
.sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.table th, .table td { vertical-align: middle; }
|
||||
.folder-icon { color: #f0ad4e; font-size: 1.2rem; }
|
||||
</style>
|
||||
@@ -29,8 +59,8 @@
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">📁 Expedientes Electrónicos</h4>
|
||||
<div class="card p-3 shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📁 Expedientes Electrónicos</h4>
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover table-bordered">
|
||||
<thead class="table-dark">
|
||||
@@ -55,8 +85,8 @@
|
||||
<td><?= $exp['total_archivos'] ?> archivos</td>
|
||||
<td><?= number_format($exp['total_tamano'], 2) ?> KB</td>
|
||||
<td>
|
||||
<a href="/IMPORTADORES/expediente/ver/<?= $exp['id_solicitud'] ?>" class="btn btn-outline-primary btn-sm">📂 Ver</a>
|
||||
<a href="/IMPORTADORES/expediente/subir/<?= $exp['id_solicitud'] ?>" class="btn btn-outline-success btn-sm">⬆ Subir</a>
|
||||
<a href="/IMPORTADORES/expediente/ver/<?= $exp['id_solicitud'] ?>" class="btn btn-outline-primary btn-sm mt-auto w-auto btn-animated">📂 Ver</a>
|
||||
<a href="/IMPORTADORES/expediente/subir/<?= $exp['id_solicitud'] ?>" class="btn btn-outline-success btn-sm mt-auto w-auto btn-animated">⬆ Subir</a>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
|
||||
@@ -8,17 +8,50 @@
|
||||
<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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
.content { margin-top: 56px; padding: 40px 20px; background-color: #f4f6f9; }
|
||||
@media (min-width: 768px) { .content { margin-left: 250px; } }
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.table th, .table td { vertical-align: middle; }
|
||||
.folder-icon { color: #f0ad4e; font-size: 1.2rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4>📤 Subir Archivos al Expediente</h4>
|
||||
<div class="card p-4 bg-white shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📤 Subir Archivos al Expediente</h4>
|
||||
<div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
|
||||
<form action="/IMPORTADORES/expediente/subir_handler" method="POST" enctype="multipart/form-data">
|
||||
|
||||
<input type="hidden" name="id_solicitud" value="<?= $id_solicitud ?>">
|
||||
@@ -26,8 +59,8 @@
|
||||
<label for="archivo" class="form-label">Selecciona archivo(s)</label>
|
||||
<input class="form-control" type="file" name="archivos[]" id="archivo" multiple required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success">Subir</button>
|
||||
<a href="/IMPORTADORES/expediente/index" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<button type="submit" class="btn btn-success mt-auto w-auto btn-animated">Subir</button>
|
||||
<a href="/IMPORTADORES/expediente/index" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,27 +7,60 @@
|
||||
<title>📂 Ver Expediente</title>
|
||||
<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">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<style>
|
||||
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
|
||||
.content { margin-top: 56px; padding: 40px 20px; background-color: #f4f6f9; }
|
||||
@media (min-width: 768px) { .content { margin-left: 250px; } }
|
||||
.file-icon { margin-right: 8px; }
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.table th, .table td { vertical-align: middle; }
|
||||
.folder-icon { color: #f0ad4e; font-size: 1.2rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4>📂 Archivos del Expediente</h4>
|
||||
<div class="card p-4 bg-white shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📂 Archivos del Expediente</h4>
|
||||
<div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
|
||||
<?php if (empty($archivos)): ?>
|
||||
|
||||
<p>No hay archivos subidos para esta solicitud.</p>
|
||||
<a href="/IMPORTADORES/expediente/subir/<?= $id_solicitud ?>" class="btn btn-success">➕ Subir archivos</a>
|
||||
<a href="/IMPORTADORES/expediente/subir/<?= $id_solicitud ?>" class="btn btn-success mt-auto w-auto btn-animated">➕ Subir archivos</a>
|
||||
|
||||
<?php else: ?>
|
||||
<div class="mb-3">
|
||||
<a href="/IMPORTADORES/expediente/descargar_zip/<?= $id_solicitud ?>" class="btn btn-outline-dark">📦 Descargar todo en ZIP</a>
|
||||
<a href="/IMPORTADORES/expediente/descargar_zip/<?= $id_solicitud ?>" class="btn btn-outline-dark mt-auto w-auto btn-animated">📦 Descargar todo en ZIP</a>
|
||||
</div>
|
||||
<table class="table table-hover table-bordered">
|
||||
<thead class="table-light">
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
.text-teal { color: #4dd4ac; }
|
||||
.btn-lime { background-color: #84cc16; color: white; }
|
||||
.text-lime { color: #84cc16; }
|
||||
.btn-lime:hover { background-color: #65a30d; color: white; }
|
||||
.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; }
|
||||
@@ -49,22 +49,39 @@
|
||||
}
|
||||
.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 {
|
||||
@@ -82,7 +99,7 @@
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown">📦 Panel del Importador</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📦 Panel del Importador</h4>
|
||||
|
||||
<?php if ($catalogosData['catalogos_activos']): ?>
|
||||
<div class="row g-4">
|
||||
@@ -91,27 +108,29 @@
|
||||
foreach ($catalogosData['catalogos'] as $catalogo):
|
||||
$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="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
|
||||
<div class="card shadow-sm p-3 card-hover <?= $catalogo['obligatorio'] ? 'border-warning border-warning-animated' : '' ?>">
|
||||
<h5 class="text-<?= $catalogo['color'] ?> mb-3">
|
||||
<i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i><?= $catalogo['nombre'] ?>
|
||||
</h5>
|
||||
<p class="text-muted small flex-grow-1"><?= $catalogo['descripcion'] ?></p>
|
||||
<div class="mt-auto">
|
||||
<button
|
||||
class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
|
||||
onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
|
||||
data-url="<?= $catalogo['ruta'] ?>">
|
||||
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span class="btn-text"><?= $catalogo['accion'] ?></span>
|
||||
</button>
|
||||
<div class="card-body p-0 d-flex flex-column">
|
||||
<h5 class="text-<?= $catalogo['color'] ?> mb-3">
|
||||
<i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i><?= $catalogo['nombre'] ?>
|
||||
</h5>
|
||||
<p class="text-muted small flex-grow-1 mb-4"><?= $catalogo['descripcion'] ?></p>
|
||||
<div class="mt-auto">
|
||||
<button
|
||||
class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-auto w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
|
||||
onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
|
||||
data-url="<?= $catalogo['ruta'] ?>">
|
||||
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span class="btn-text"><?= $catalogo['accion'] ?></span>
|
||||
</button>
|
||||
</div>
|
||||
<?php if ($catalogo['obligatorio']): ?>
|
||||
<small class="text-warning mt-2 animate__animated animate__pulse animate__infinite">
|
||||
<i class="fas fa-exclamation-triangle me-1"></i>
|
||||
Obligatorio
|
||||
</small>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php if ($catalogo['obligatorio']): ?>
|
||||
<small class="text-warning mt-2 animate__animated animate__pulse animate__infinite">
|
||||
<i class="fas fa-exclamation-triangle me-1"></i>
|
||||
Obligatorio
|
||||
</small>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
@@ -168,24 +187,26 @@
|
||||
?>
|
||||
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
|
||||
<div class="card shadow-sm p-3 card-hover border-warning border-warning-animated h-100">
|
||||
<h5 class="text-<?= $catalogo['color'] ?> mb-3">
|
||||
<i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i>
|
||||
<?= $catalogo['nombre'] ?>
|
||||
</h5>
|
||||
<p class="text-muted small flex-grow-1"><?= $catalogo['descripcion'] ?></p>
|
||||
<div class="mt-auto">
|
||||
<button
|
||||
class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
|
||||
onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
|
||||
data-url="<?= $catalogo['ruta'] ?>">
|
||||
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span class="btn-text"><?= $catalogo['accion'] ?></span>
|
||||
</button>
|
||||
<div class="card-body p-0 d-flex flex-column">
|
||||
<h5 class="text-<?= $catalogo['color'] ?> mb-3">
|
||||
<i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i>
|
||||
<?= $catalogo['nombre'] ?>
|
||||
</h5>
|
||||
<p class="text-muted small flex-grow-1 mb-4"><?= $catalogo['descripcion'] ?></p>
|
||||
<div class="mt-auto">
|
||||
<button
|
||||
class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-auto w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
|
||||
onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
|
||||
data-url="<?= $catalogo['ruta'] ?>">
|
||||
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<span class="btn-text"><?= $catalogo['accion'] ?></span>
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-warning mt-2 d-flex align-items-center">
|
||||
<i class="fas fa-lock me-1 animate__animated animate__pulse animate__infinite"></i>
|
||||
Función básica
|
||||
</small>
|
||||
</div>
|
||||
<small class="text-warning mt-2 d-flex align-items-center">
|
||||
<i class="fas fa-lock me-1 animate__animated animate__pulse animate__infinite"></i>
|
||||
Función básica
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
@@ -196,9 +217,22 @@
|
||||
<script>
|
||||
// Función para navegación con animación
|
||||
function navigateWithAnimation(button, url) {
|
||||
// Prevenir múltiples clics
|
||||
if (button.classList.contains('btn-loading')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Añadir estado de carga
|
||||
button.classList.add('btn-loading');
|
||||
button.disabled = true;
|
||||
|
||||
// Añadir efecto de salida a la tarjeta padre
|
||||
const card = button.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() {
|
||||
@@ -209,21 +243,40 @@
|
||||
// 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)';
|
||||
});
|
||||
|
||||
// Efecto de hover mejorado
|
||||
document.querySelectorAll('.card-hover').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)';
|
||||
});
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -20,6 +20,10 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
<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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -33,18 +37,44 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
.sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.hide { display: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">🗺️ Nuevas Locaciones</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🗺️ Nuevas Locaciones</h4>
|
||||
<div class="row g-3">
|
||||
|
||||
<!-- Nuevo Estado -->
|
||||
<div class="col-md">
|
||||
<div class="card p-4 bg-white shadow-sm">
|
||||
<div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
|
||||
<form id="estadoForm">
|
||||
<h4 class="mb-4 text-dark">➕ Nuevo Estado</h4><br>
|
||||
<!-- País -->
|
||||
@@ -67,10 +97,10 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
</div><br><br>
|
||||
|
||||
<div class="col-md-4 d-flex align-items-end">
|
||||
<button type="submit" class="btn btn-success w-100">
|
||||
<button type="submit" class="btn btn-success mt-auto w-auto btn-animated">
|
||||
<i class="fas fa-plus"></i> Registrar Estado
|
||||
</button>
|
||||
<a href="/IMPORTADORES/locaciones/lista" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<a href="/IMPORTADORES/locaciones/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -79,7 +109,7 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
|
||||
<!-- Nueva Ciudad -->
|
||||
<div class="col-md">
|
||||
<div class="card p-4 bg-white shadow-sm">
|
||||
<div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
|
||||
<form id="ciudadForm" action="/IMPORTADORES/locaciones/guadarCiudad" method="POST" enctype="multipart/form-data">
|
||||
<h4 class="mb-4 text-dark">➕ Nueva Ciudad</h4>
|
||||
<!-- País -->
|
||||
@@ -110,10 +140,10 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
</div><br>
|
||||
|
||||
<div class="col-md-4 d-flex align-items-end">
|
||||
<button type="submit" class="btn btn-success w-100">
|
||||
<button type="submit" class="btn btn-success w-auto">
|
||||
<i class="fas fa-plus"></i> Registrar Ciudad
|
||||
</button>
|
||||
<a href="/IMPORTADORES/locaciones/lista" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<a href="/IMPORTADORES/locaciones/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -24,6 +24,10 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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>
|
||||
table.dataTable thead th { background:#343a40; color:#fff; }
|
||||
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
|
||||
@@ -43,14 +47,40 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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">🌍 Locaciones</h4>
|
||||
<a href="/IMPORTADORES/locaciones/alta" class="btn btn-success mb-3">➕ Agregar Locación</a>
|
||||
<div class="card p-3 shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🌍 Locaciones</h4>
|
||||
<a href="/IMPORTADORES/locaciones/alta" class="btn btn-success mb-3 mt-auto w-auto btn-animated">➕ Agregar Locación</a>
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="tabla-locaciones">
|
||||
<thead class="table-dark">
|
||||
@@ -79,31 +109,31 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
<!-- Botones de acción (editar/eliminar) -->
|
||||
<?php if (!empty($loc['id_ciudad'])): ?>
|
||||
<!-- Es una ciudad -->
|
||||
<button class="btn btn-sm btn-primary"
|
||||
<button class="btn btn-sm btn-primary mt-auto w-auto btn-animated"
|
||||
onclick="editarItem('ciudad', <?= $loc['id_ciudad'] ?>, '<?= htmlspecialchars($loc['nombre_ciudad'], ENT_QUOTES) ?>', '', '', '', <?= $loc['id_estado'] ?>)">
|
||||
✏️
|
||||
</button>
|
||||
<button class="btn btn-sm btn-danger"
|
||||
<button class="btn btn-sm btn-danger mt-auto w-auto btn-animated"
|
||||
onclick="eliminarItem('ciudad', <?= $loc['id_ciudad'] ?>, '<?= htmlspecialchars($loc['nombre_ciudad'], ENT_QUOTES) ?>')">
|
||||
🗑️
|
||||
</button>
|
||||
<?php elseif (!empty($loc['id_estado'])): ?>
|
||||
<!-- Es un estado - CORREGIDO: Obtener abreviatura correctamente -->
|
||||
<button class="btn btn-sm btn-primary"
|
||||
<button class="btn btn-sm btn-primary mt-auto w-auto btn-animated"
|
||||
onclick="editarItem('estado', <?= $loc['id_estado'] ?>, '<?= htmlspecialchars($loc['nombre_estado'], ENT_QUOTES) ?>', '', '', '<?= htmlspecialchars($loc['abreviatura'] ?? '', ENT_QUOTES) ?>', <?= $loc['id_pais'] ?>)">
|
||||
✏️
|
||||
</button>
|
||||
<button class="btn btn-sm btn-danger"
|
||||
<button class="btn btn-sm btn-danger mt-auto w-auto btn-animated"
|
||||
onclick="eliminarItem('estado', <?= $loc['id_estado'] ?>, '<?= htmlspecialchars($loc['nombre_estado'], ENT_QUOTES) ?>')">
|
||||
🗑️
|
||||
</button>
|
||||
<?php else: ?>
|
||||
<!-- Es un país -->
|
||||
<button class="btn btn-sm btn-primary"
|
||||
<button class="btn btn-sm btn-primary mt-auto w-auto btn-animated"
|
||||
onclick="editarItem('pais', <?= $loc['id_pais'] ?>, '<?= htmlspecialchars($loc['nombre_pais'], ENT_QUOTES) ?>', '<?= htmlspecialchars($loc['iso2'] ?? '', ENT_QUOTES) ?>', '<?= htmlspecialchars($loc['iso3'] ?? '', ENT_QUOTES) ?>')">
|
||||
✏️
|
||||
</button>
|
||||
<button class="btn btn-sm btn-danger"
|
||||
<button class="btn btn-sm btn-danger mt-auto w-auto btn-animated"
|
||||
onclick="eliminarItem('pais', <?= $loc['id_pais'] ?>, '<?= htmlspecialchars($loc['nombre_pais'], ENT_QUOTES) ?>')">
|
||||
🗑️
|
||||
</button>
|
||||
@@ -193,8 +223,8 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-primary">Guardar Cambios</button>
|
||||
<button type="button" class="btn btn-secondary mt-auto w-auto btn-animated" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Guardar Cambios</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -13,6 +13,10 @@
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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>
|
||||
table.dataTable thead th { background:#343a40; color:#fff; }
|
||||
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
|
||||
@@ -32,13 +36,39 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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">🗺️ Locaciones</h4>
|
||||
<div class="card p-3 shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🗺️ Locaciones</h4>
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="tabla-locaciones">
|
||||
<thead class="table-dark">
|
||||
|
||||
@@ -21,6 +21,10 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -59,13 +63,39 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
.nav-tabs .nav-item:first-child .nav-link { margin-left: 0; }
|
||||
.nav-tabs .nav-item:last-child .nav-link { margin-right: 0; }
|
||||
.tab-content { padding: 10px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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>CONFIGURACIÓN ADUANA / PATENTE</h4>
|
||||
<div class="card p-4 shadow-sm bg-white">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">CONFIGURACIÓN ADUANA / PATENTE</h4>
|
||||
<div class="card p-4 shadow-sm bg-white card-hover position-relative h-auto">
|
||||
<!-- Se agrega enctype para subir archivos -->
|
||||
<form action="/IMPORTADORES/patente/guardar" method="POST" id="formAltaPatente">
|
||||
<!-- Pestañas de navegación -->
|
||||
@@ -262,8 +292,8 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: right;">
|
||||
<button type="submit" class="btn btn-primary">Registrar</button>
|
||||
<a href="/IMPORTADORES/patente/lista" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Registrar</button>
|
||||
<a href="/IMPORTADORES/patente/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -19,6 +19,10 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
<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; }
|
||||
@@ -27,12 +31,24 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
.sidebar .nav-link.active { background-color: #495057; color: #fff; }
|
||||
.content { margin-top: 56px; padding: 40px 20px; position: relative; z-index: 1; background-color: #f4f6f9; transition: margin-left 0.3s ease; }
|
||||
.navbar { position: fixed; top: 0; width: 100%; z-index: 1050; }
|
||||
.btn-indigo { background-color: #6610f2; color: white;}
|
||||
.btn-indigo:hover { background-color: #520dc2; color: white;}
|
||||
.text-indigo { color: orangeRed;}
|
||||
.btn-orange { background-color: orangeRed; color: white;}
|
||||
.btn-orange:hover { background-color: #ff3600; color: white;}
|
||||
.text-orange { color: orangeRed;}
|
||||
.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; }
|
||||
/* 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 */
|
||||
@@ -43,38 +59,148 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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">📦 Panel de Patentes</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title-glow">📦 Panel de Patentes</h4>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-primary">Ver patentes</h5>
|
||||
<p>Revisa y gestiona las patentes.</p>
|
||||
<a href="/IMPORTADORES/patente/lista"
|
||||
class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/transportes/lista' ? 'active' : '' ?>">
|
||||
Ver patentes
|
||||
</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">Ver patentes</h5>
|
||||
<p class="text-muted small flex-grow-1 mb-4">Revisa y gestiona las patentes.</p>
|
||||
<button class="btn btn-teal btn-sm mt-auto w-100 btn-animated"
|
||||
onclick="navigateWithAnimation(this, '/IMPORTADORES/patente/lista')">
|
||||
Ver patentes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-success">Nueva patente</h5>
|
||||
<p>Agrega nuevas patentes:</p>
|
||||
<a href="/IMPORTADORES/patente/alta"
|
||||
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/transportistas/lista' ? 'active' : '' ?>">
|
||||
Registrar nueva patente
|
||||
</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">Nueva patente</h5>
|
||||
<p class="text-muted small flex-grow-1 mb-4">Agrega nuevas patentes:</p>
|
||||
<button class="btn btn-lime btn-sm mt-auto w-100 btn-animated"
|
||||
onclick="navigateWithAnimation(this, '/IMPORTADORES/patente/alta')">
|
||||
Registrar nueva patente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
@@ -21,6 +21,10 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -56,13 +60,39 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
.nav-tabs .nav-item:first-child .nav-link { margin-left: 0; }
|
||||
.nav-tabs .nav-item:last-child .nav-link { margin-right: 0; }
|
||||
.tab-content { padding: 10px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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>CONFIGURACIÓN ADUANA / PATENTE</h4>
|
||||
<div class="card p-4 shadow-sm bg-white">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">CONFIGURACIÓN ADUANA / PATENTE</h4>
|
||||
<div class="card p-4 shadow-sm bg-white card-hover position-relative h-auto">
|
||||
<!-- Se agrega enctype para subir archivos -->
|
||||
<form action="/IMPORTADORES/patente/actualizar" method="POST" id="formEdicionPatente">
|
||||
<!-- Campo oculto para el ID -->
|
||||
@@ -286,7 +316,7 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
|
||||
<div style="display: flex; justify-content: right;">
|
||||
<button type="submit" class="btn btn-success">💾 Guardar</button>
|
||||
<a href="/IMPORTADORES/patente/lista" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<a href="/IMPORTADORES/patente/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -23,6 +23,10 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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; }
|
||||
@@ -47,14 +51,40 @@ if ($tipoUsuario === 'agente_aduanal') {
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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>📑 Registro de Patentes Aduanales</h4>
|
||||
<a href="/IMPORTADORES/patente/alta" class="btn btn-success mb-3">➕ Nueva Patente</a>
|
||||
<div class="card p-3 shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📑 Registro de Patentes Aduanales</h4>
|
||||
<a href="/IMPORTADORES/patente/alta" class="btn btn-success mb-3 mt-auto w-auto btn-animated">➕ Nueva Patente</a>
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="tabla-patentes">
|
||||
<thead class="table-dark">
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
<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>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
<!-- 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; }
|
||||
@@ -71,7 +75,9 @@
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">📊 Visualización de Catálogos</h4>
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📊 Visualización de Catálogos</h4>
|
||||
</div>
|
||||
|
||||
<!-- Mensajes de éxito o error iniciales -->
|
||||
<?php if (isset($_GET['success'])): ?>
|
||||
@@ -85,7 +91,7 @@
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="card shadow-sm p-4 mb-4 bg-white">
|
||||
<div class="card shadow-sm p-4 mb-4 bg-white card-hover position-relative h-auto">
|
||||
<!-- Switch general de notificaciones -->
|
||||
<div class="section-divider">
|
||||
<div class="form-check form-switch">
|
||||
@@ -120,7 +126,7 @@
|
||||
<input class="form-check-input tipo-catalogo" type="checkbox"
|
||||
name="<?= $nombreCampo ?>" id="<?= $idCampo ?>"
|
||||
data-tipo="tipo-catalogo" data-nombre="<?= $nombreCampo ?>"
|
||||
<?= $checked ? 'checked' : '' ?>>
|
||||
<?= $checked ? 'checked' : '' ?>>
|
||||
<label class="form-check-label" for="<?= $idCampo ?>">
|
||||
<strong><?= htmlspecialchars($nombre) ?></strong>
|
||||
<div class="form-text text-<?= htmlspecialchars($info['color']) ?>">
|
||||
@@ -197,7 +203,7 @@
|
||||
const response = await fetch('/IMPORTADORES/preferencias/guardarCatalogosAjax', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
@@ -231,12 +237,12 @@
|
||||
const isChecked = checkbox.checked;
|
||||
|
||||
if (isChecked) {
|
||||
target.style.display = 'block';
|
||||
target.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
target.style.opacity = '1';
|
||||
}, 10);
|
||||
} else {
|
||||
target.style.opacity = '0';
|
||||
target.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
target.style.display = 'none';
|
||||
}, 300);
|
||||
@@ -305,7 +311,7 @@
|
||||
// Guardar cambio
|
||||
autoSave('tipo_catalogo', {
|
||||
nombre: tipoNombre,
|
||||
valor: isChecked
|
||||
valor: isChecked
|
||||
}).finally(() => {
|
||||
this.disabled = false;
|
||||
});
|
||||
|
||||
@@ -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; }
|
||||
@@ -26,38 +30,178 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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%; }
|
||||
.alert { border: none; border-radius: 12px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">✅ Preferencias</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title-glow">✅ Preferencias</h4>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-primary">Notificaciones</h5>
|
||||
<p>Gestiona y configura las notificaciones.</p>
|
||||
<a href="/IMPORTADORES/preferencias/notificaciones"
|
||||
class="btn btn-primary btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/preferencias/notificaciones' ? 'active' : '' ?>">
|
||||
Configurar Notificaciones
|
||||
</a>
|
||||
<!-- Tarjeta 1: Notificaciones -->
|
||||
<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-primary mb-3">
|
||||
<i class="fas fa-bell me-2"></i>
|
||||
Notificaciones
|
||||
</h5>
|
||||
<p class="text-muted small flex-grow-1 mb-4">
|
||||
Gestiona y configura las notificaciones del sistema para mantenerte informado.
|
||||
</p>
|
||||
<button class="btn btn-primary btn-sm mt-auto w-100 btn-animated"
|
||||
onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/notificaciones')">
|
||||
<i class="fas fa-cog me-2"></i>
|
||||
Configurar Notificaciones
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h5 class="text-success">Catalogos</h5>
|
||||
<p>Personaliza la visualización de tus catalogos.</p>
|
||||
<a href="/IMPORTADORES/preferencias/catalogos"
|
||||
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/preferencias/catalogos' ? 'active' : '' ?>">
|
||||
Personalizar Catálogos
|
||||
</a>
|
||||
<!-- Tarjeta 2: Catálogos -->
|
||||
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
|
||||
<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">
|
||||
<i class="fas fa-list me-2"></i>
|
||||
Catálogos
|
||||
</h5>
|
||||
<p class="text-muted small flex-grow-1 mb-4">
|
||||
Personaliza la visualización de tus catálogos y organiza tu contenido.
|
||||
</p>
|
||||
<button class="btn btn-success btn-sm mt-auto w-100 btn-animated"
|
||||
onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
|
||||
<i class="fas fa-palette me-2"></i>
|
||||
Personalizar Catálogos
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sección adicional con más opciones -->
|
||||
<div class="row g-4 mt-4">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info animate__animated animate__fadeInUp" style="animation-delay: 0.4s;">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-info-circle fa-2x text-info me-3 animate__animated animate__pulse animate__infinite"></i>
|
||||
<div>
|
||||
<h6 class="alert-heading mb-2">💡 Tip de Configuración</h6>
|
||||
<p class="mb-0">
|
||||
Personaliza estas configuraciones según tus necesidades para optimizar tu experiencia.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</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>
|
||||
@@ -9,6 +9,10 @@
|
||||
<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>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
<!-- 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; }
|
||||
@@ -47,7 +51,7 @@
|
||||
|
||||
<div class="content">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h4 class="mb-0">🔔 Gestión de Notificaciones</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🔔 Gestión de Notificaciones</h4>
|
||||
</div>
|
||||
|
||||
<!-- Mensajes de éxito o error iniciales -->
|
||||
@@ -63,7 +67,7 @@
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="card shadow-sm p-4 mb-4 bg-white">
|
||||
<div class="card shadow-sm p-4 mb-4 bg-white card-hover position-relative h-auto">
|
||||
<!-- Switch general de notificaciones -->
|
||||
<div class="section-divider">
|
||||
<div class="form-check form-switch">
|
||||
@@ -82,122 +86,23 @@
|
||||
<div class="section-divider">
|
||||
<h6 class="mb-3">📋 Tipos de Notificaciones</h6>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input tipo-notificacion" type="checkbox"
|
||||
name="nuevas_solicitudes" id="nuevas_solicitudes"
|
||||
data-tipo="tipo_notificacion" data-nombre="nuevas_solicitudes"
|
||||
<?= !empty($preferencias['nuevas_solicitudes']) ? 'checked' : '' ?>>
|
||||
<label class="form-check-label" for="nuevas_solicitudes">
|
||||
<strong>Nuevas Solicitudes</strong>
|
||||
<div class="form-text">Creación de nuevas solicitudes de importación</div>
|
||||
</label>
|
||||
<?php foreach ($preferencias as $campo => $valor): ?>
|
||||
<?php if (in_array($campo, ['resumen_diario_hora', 'resumen_diario_dias'])): continue; endif; ?>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input tipo-notificacion" type="checkbox"
|
||||
name="<?= $campo ?>" id="<?= $campo ?>"
|
||||
data-tipo="tipo_notificacion" data-nombre="<?= $campo ?>"
|
||||
<?= !empty($valor) ? 'checked' : '' ?>>
|
||||
<label class="form-check-label" for="<?= $campo ?>">
|
||||
<strong><?= ucwords(str_replace('_', ' ', $campo)) ?></strong>
|
||||
<div class="form-text">
|
||||
<?= $tipos[$campo] ?? 'Configuración de ' . str_replace('_', ' ', $campo) ?>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input tipo-notificacion" type="checkbox"
|
||||
name="registro_solicitud" id="registro_solicitud"
|
||||
data-tipo="tipo_notificacion" data-nombre="registro_solicitud"
|
||||
<?= !empty($preferencias['registro_solicitud']) ? 'checked' : '' ?>>
|
||||
<label class="form-check-label" for="registro_solicitud">
|
||||
<strong>Registro Solicitud</strong>
|
||||
<div class="form-text">Notificación inmediata al registrar una solicitud</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input tipo-notificacion" type="checkbox"
|
||||
name="cambio_estado" id="cambio_estado"
|
||||
data-tipo="tipo_notificacion" data-nombre="cambio_estado"
|
||||
<?= !empty($preferencias['cambio_estado']) ? 'checked' : '' ?>>
|
||||
<label class="form-check-label" for="cambio_estado">
|
||||
<strong>Cambio Estado</strong>
|
||||
<div class="form-text">Cambio de estado de solicitudes de importación</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input tipo-notificacion" type="checkbox"
|
||||
name="resumen_diario" id="resumen_diario"
|
||||
data-tipo="tipo_notificacion" data-nombre="resumen_diario"
|
||||
<?= !empty($preferencias['resumen_diario']) ? 'checked' : '' ?>>
|
||||
<label class="form-check-label" for="resumen_diario">
|
||||
<strong>Resumen Diario</strong>
|
||||
<div class="form-text">Resumen diario de solicitudes de importación</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input tipo-notificacion" type="checkbox"
|
||||
name="alertas_tiempo" id="alertas_tiempo"
|
||||
data-tipo="tipo_notificacion" data-nombre="alertas_tiempo"
|
||||
<?= !empty($preferencias['alertas_tiempo']) ? 'checked' : '' ?>>
|
||||
<label class="form-check-label" for="alertas_tiempo">
|
||||
<strong>Alertas Tiempo</strong>
|
||||
<div class="form-text">Alertas por tiempo excedido en estados críticos</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input tipo-notificacion" type="checkbox"
|
||||
name="documentos_expediente" id="documentos_expediente"
|
||||
data-tipo="tipo_notificacion" data-nombre="documentos_expediente"
|
||||
<?= !empty($preferencias['documentos_expediente']) ? 'checked' : '' ?>>
|
||||
<label class="form-check-label" for="documentos_expediente">
|
||||
<strong>Documentos Expediente</strong>
|
||||
<div class="form-text">Incorporación de documentos al expediente electrónico</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input tipo-notificacion" type="checkbox"
|
||||
name="nuevos_archivos" id="nuevos_archivos"
|
||||
data-tipo="tipo_notificacion" data-nombre="nuevos_archivos"
|
||||
<?= !empty($preferencias['nuevos_archivos']) ? 'checked' : '' ?>>
|
||||
<label class="form-check-label" for="nuevos_archivos">
|
||||
<strong>Nuevos Archivos</strong>
|
||||
<div class="form-text">Aviso al agregarse nuevos archivos o documentos</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input tipo-notificacion" type="checkbox"
|
||||
name="intentos_fallidos" id="intentos_fallidos"
|
||||
data-tipo="tipo_notificacion" data-nombre="intentos_fallidos"
|
||||
<?= !empty($preferencias['intentos_fallidos']) ? 'checked' : '' ?>>
|
||||
<label class="form-check-label" for="intentos_fallidos">
|
||||
<strong>Intentos Fallidos</strong>
|
||||
<div class="form-text">Intentos fallidos de acceso</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input tipo-notificacion" type="checkbox"
|
||||
name="bloqueo_cuenta" id="bloqueo_cuenta"
|
||||
data-tipo="tipo_notificacion" data-nombre="bloqueo_cuenta"
|
||||
<?= !empty($preferencias['bloqueo_cuenta']) ? 'checked' : '' ?>>
|
||||
<label class="form-check-label" for="bloqueo_cuenta">
|
||||
<strong>Bloqueo Cuenta</strong>
|
||||
<div class="form-text">Bloqueo de cuenta</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -30,12 +30,42 @@
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
|
||||
<!-- SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
.content { margin-top: 56px; padding: 40px 20px; background-color: #f4f6f9; transition: margin-left .3s ease; }
|
||||
@media (min-width: 768px) { .content { margin-left: 250px; } }
|
||||
@media (max-width: 767.98px) { .content { margin-left: 0; padding: 20px 10px; } }
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.form-label { font-weight: 500; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -54,8 +84,8 @@
|
||||
<?php unset($_SESSION['flash_success']); endif; ?>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">➕ Alta de Producto Frecuente</h4>
|
||||
<div class="card p-4 shadow-sm bg-white">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Alta de Producto Frecuente</h4>
|
||||
<div class="card p-4 shadow-sm bg-white card-hover position-relative h-auto">
|
||||
<form id="altaProductoFrecuenteForm" action="/IMPORTADORES/productos_frecuentes/guardar" method="POST">
|
||||
<div class="row g-3">
|
||||
<!-- Sinónimo, Fracción, NICO -->
|
||||
@@ -180,8 +210,8 @@
|
||||
|
||||
<!-- Botones -->
|
||||
<div class="col-12 text-end mt-4">
|
||||
<button type="submit" class="btn btn-primary">Guardar Producto</button>
|
||||
<a href="/IMPORTADORES/productos_frecuentes" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Guardar Producto</button>
|
||||
<a href="/IMPORTADORES/productos_frecuentes" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -26,12 +26,42 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
.content { margin-top: 56px; padding: 40px 20px; background-color: #f4f6f9; transition: margin-left .3s ease; }
|
||||
@media (min-width: 768px) { .content { margin-left: 250px; } }
|
||||
@media (max-width: 767.98px) { .content { margin-left: 0; padding: 20px 10px; } }
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.form-label { font-weight: 500; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -48,8 +78,8 @@
|
||||
<?php unset($_SESSION['flash_success']); endif; ?>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">✏️ Editar Producto Frecuente</h4>
|
||||
<div class="card p-4 shadow-sm bg-white">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✏️ Editar Producto Frecuente</h4>
|
||||
<div class="card p-4 shadow-sm bg-white card-hover position-relative h-auto">
|
||||
<form id="editarProductoFrecuenteForm" action="/IMPORTADORES/productos_frecuentes/actualizar" method="POST">
|
||||
<input type="hidden" name="id_producto_frecuente" value="<?= htmlspecialchars($producto['id_producto_frecuente']) ?>">
|
||||
<div class="row g-3">
|
||||
@@ -165,8 +195,8 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-end">
|
||||
<button type="submit" class="btn btn-primary">Actualizar</button>
|
||||
<a href="/IMPORTADORES/productos_frecuentes" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Actualizar</button>
|
||||
<a href="/IMPORTADORES/productos_frecuentes" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -13,12 +13,42 @@
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<!-- SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
.content { margin-top: 56px; padding: 40px 20px; background-color: #f4f6f9; transition: margin-left .3s ease; }
|
||||
@media (min-width: 768px) { .content { margin-left: 250px; } }
|
||||
@media (max-width: 767.98px) { .content { margin-left: 0; padding: 20px 10px; } }
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
/* Asegura que la tabla pueda desplazarse en móvil */
|
||||
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
||||
</style>
|
||||
@@ -46,8 +76,8 @@
|
||||
<?php unset($_SESSION['flash_success']); endif; ?>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">📋 Productos Frecuentes</h4>
|
||||
<div class="card p-4 shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📋 Productos Frecuentes</h4>
|
||||
<div class="card p-4 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table id="tablaProductosFrecuentes" class="table table-striped table-bordered">
|
||||
<thead class="table-dark">
|
||||
@@ -122,8 +152,8 @@
|
||||
<td><?= htmlspecialchars($row['frecuencia_uso']) ?></td>
|
||||
<td class="text-center">
|
||||
<a href="/IMPORTADORES/productos_frecuentes/editar?id=<?= $row['id_producto_frecuente'] ?>"
|
||||
class="btn btn-sm btn-primary">✏️</a>
|
||||
<button class="btn btn-sm btn-danger"
|
||||
class="btn btn-sm btn-primary mt-auto w-auto btn-animated">✏️</a>
|
||||
<button class="btn btn-sm btn-danger mt-auto w-auto btn-animated"
|
||||
onclick="confirmDelete(<?= $row['id_producto_frecuente'] ?>)">
|
||||
🗑️
|
||||
</button>
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -21,6 +25,32 @@
|
||||
@media (min-width: 768px) { .content { margin-left: 250px; } }
|
||||
@media (max-width: 767.98px) { .content { margin-left: 0; } }
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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>
|
||||
@@ -42,8 +72,8 @@
|
||||
?>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">➕ Registro de Proveedor</h4>
|
||||
<div class="card p-4 shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Registro de Proveedor</h4>
|
||||
<div class="card p-4 shadow-sm card-hover position-relative h-auto">
|
||||
<form action="/IMPORTADORES/proveedores/guardar" method="POST" enctype="multipart/form-data" id="formAltaProveedores">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
@@ -88,8 +118,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 text-end">
|
||||
<a href="/IMPORTADORES/proveedores" class="btn btn-secondary me-2">Cancelar</a>
|
||||
<button type="submit" class="btn btn-primary">Guardar Proveedor</button>
|
||||
<a href="/IMPORTADORES/proveedores" class="btn btn-secondary me-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
<button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Guardar Proveedor</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,10 @@
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<!-- SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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>
|
||||
table.dataTable thead th { background: #343a40; color: #fff; }
|
||||
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
|
||||
@@ -31,15 +35,41 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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">📄 Listado de Proveedores</h4>
|
||||
<a href="/IMPORTADORES/proveedores/crear" class="btn btn-success mb-3">➕ Nuevo Proveedor</a>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📄 Listado de Proveedores</h4>
|
||||
<a href="/IMPORTADORES/proveedores/crear" class="btn btn-success mb-3 mt-auto w-auto btn-animated">➕ Nuevo Proveedor</a>
|
||||
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<br>
|
||||
<table id="proveedores-table" class="table table-striped nowrap" style="width:100%">
|
||||
<thead>
|
||||
|
||||
@@ -11,8 +11,11 @@ $dos_factores_estado = obtenerEstadoDosFactores();
|
||||
<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>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.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; }
|
||||
@@ -46,106 +49,140 @@ $dos_factores_estado = obtenerEstadoDosFactores();
|
||||
/* Animación suave para el modal */
|
||||
.modal.fade .modal-dialog { transform: translate(0, -50px); transition: transform 0.3s ease-out; }
|
||||
.modal.show .modal-dialog { transform: translate(0, 0); }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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">👮 Opciones de Seguridad</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title-glow">👮 Opciones de Seguridad</h4>
|
||||
<div class="row g-3">
|
||||
|
||||
<!-- Autenticacin de dos factores -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h4 class="mb-4 text-dark">Autenticación de dos factores</h4>
|
||||
<p>Al activar esta funcionalidad, blindas el acceso a tu cuenta, recibiras un código de acceso a tu correo electrónico para confirmar identidad.</p>
|
||||
<form method="post" action="/IMPORTADORES/seguridad/autenticacionDosFactores">
|
||||
<div class="form-check form-switch mb-3">
|
||||
<input type="checkbox" name="dos_factores" id="dos_factores" class="form-check-input"
|
||||
<?php echo ($dos_factores_estado == 1) ? "checked" : ""; ?>>
|
||||
<label class="form-check-label" for="dos_factores">
|
||||
<?php echo ($dos_factores_estado == 1) ? "Activo" : "Inactivo"; ?>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary"><i class="fas fa-floppy-disk"></i>Guardar configuración</button>
|
||||
</form>
|
||||
<div class="col-md-6 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">
|
||||
<h4 class="mb-4 text-dark">Autenticación de dos factores</h4>
|
||||
<p class="text-muted small flex-grow-1 mb-4">Al activar esta funcionalidad, blindas el acceso a tu cuenta, recibiras un código de acceso a tu correo electrónico para confirmar identidad.</p>
|
||||
<form method="post" action="/IMPORTADORES/seguridad/autenticacionDosFactores">
|
||||
<div class="form-check form-switch mb-3">
|
||||
<input type="checkbox" name="dos_factores" id="dos_factores" class="form-check-input"
|
||||
<?php echo ($dos_factores_estado == 1) ? "checked" : ""; ?>>
|
||||
<label class="form-check-label" for="dos_factores">
|
||||
<?php echo ($dos_factores_estado == 1) ? "Activo" : "Inactivo"; ?>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-sm mt-2 w-40 btn-animated"><i class="fas fa-floppy-disk"></i>Guardar configuración</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cambiar contraseña -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h4 class="mb-4 text-dark">Cambiar contraseña</h4>
|
||||
<p>Al actualizar tu contraseña, refuerzas la seguridad de tu cuenta. Te recomendamos usar una combinación de letras, números y símbolos para mayor seguridad.</p><br>
|
||||
<form>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalConfirmarCambio">
|
||||
<i class="fas fa-key"></i>Cambiar contraseña
|
||||
</button>
|
||||
</form>
|
||||
<div class="col-md-6 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">
|
||||
<h4 class="mb-4 text-dark">Cambiar contraseña</h4>
|
||||
<p class="text-muted small flex-grow-1 mb-4">Al actualizar tu contraseña, refuerzas la seguridad de tu cuenta. Te recomendamos usar una combinación de letras, números y símbolos para mayor seguridad.</p><br>
|
||||
<form>
|
||||
<button type="button" class="btn btn-primary btn-sm mt-2 w-40 btn-animated" data-bs-toggle="modal" data-bs-target="#modalConfirmarCambio">
|
||||
<i class="fas fa-key"></i>Cambiar contraseña
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Correo adicional (extra) -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h4 class="mb-4 text-dark">Recibe notificaciones</h4>
|
||||
<p>Agrega un correo adicional para recibir notificaciones.</p>
|
||||
<?php if (!empty($correos['correo_extra'])): ?>
|
||||
<p><code><?= htmlspecialchars($correos['correo_extra']) ?></code></p>
|
||||
<!-- Formulario para eliminar -->
|
||||
<form method="POST" action="/IMPORTADORES/seguridad/eliminarCorreoExtra" id="form-eliminar-extra" class="mt-2 hide"></form>
|
||||
<form method="POST" action="/IMPORTADORES/seguridad/modificarCorreoExtra">
|
||||
<div class="mb-3">
|
||||
<input type="email" name="email-extra" class="form-control" value="" placeholder="Actualizar correo adicional" required>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-success">
|
||||
<i class="fas fa-edit"></i>Actualizar
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" onclick="confirmarEliminacion('extra')">
|
||||
<i class="fas fa-trash"></i> Eliminar correo
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<?php else: ?>
|
||||
<form method="POST" action="/IMPORTADORES/seguridad/correoExtra">
|
||||
<div class="mb-3">
|
||||
<input type="email" name="email-extra" class="form-control" placeholder="Correo adicional" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary"><i class="fas fa-envelope"></i>Registrar</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
<div class="col-md-6 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">
|
||||
<h4 class="mb-4 text-dark">Recibe notificaciones</h4>
|
||||
<p class="text-muted small flex-grow-1 mb-4">Agrega un correo adicional para recibir notificaciones.</p>
|
||||
<?php if (!empty($correos['correo_extra'])): ?>
|
||||
<p><code><?= htmlspecialchars($correos['correo_extra']) ?></code></p>
|
||||
<!-- Formulario para eliminar -->
|
||||
<form method="POST" action="/IMPORTADORES/seguridad/eliminarCorreoExtra" id="form-eliminar-extra" class="mt-2 hide"></form>
|
||||
<form method="POST" action="/IMPORTADORES/seguridad/modificarCorreoExtra">
|
||||
<div class="mb-3">
|
||||
<input type="email" name="email-extra" class="form-control" value="" placeholder="Actualizar correo adicional" required>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-success btn-sm mt-2 w-40 btn-animated">
|
||||
<i class="fas fa-edit"></i>Actualizar
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-sm mt-2 w-40 btn-animated" onclick="confirmarEliminacion('extra')">
|
||||
<i class="fas fa-trash"></i> Eliminar correo
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<?php else: ?>
|
||||
<form method="POST" action="/IMPORTADORES/seguridad/correoExtra">
|
||||
<div class="mb-3">
|
||||
<input type="email" name="email-extra" class="form-control" placeholder="Correo adicional" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-sm mt-2 w-40 btn-animated"><i class="fas fa-envelope"></i>Registrar</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Correo de Respaldo -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h4 class="mb-4 text-dark">Correo de respaldo</h4>
|
||||
<p>Agrega un correo de respaldo para reuperación de tu cuenta.</p>
|
||||
<?php if (!empty($correos['correo_respaldo'])): ?>
|
||||
<p><code><?= htmlspecialchars($correos['correo_respaldo']) ?></code></p>
|
||||
<!-- Formulario para eliminar -->
|
||||
<form method="POST" action="/IMPORTADORES/seguridad/eliminarCorreoRespaldo" id="form-eliminar-respaldo" class="mt-2 hide"></form>
|
||||
<form method="POST" action="/IMPORTADORES/seguridad/modificarCorreoRspaldo">
|
||||
<div class="mb-3">
|
||||
<input type="email" name="email-respaldo" class="form-control" value="" placeholder="Actualizar correo de respaldo" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success">
|
||||
<i class="fas fa-edit"></i>Actualizar
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" onclick="confirmarEliminacion('respaldo')">
|
||||
<i class="fas fa-trash"></i> Eliminar correo
|
||||
</button>
|
||||
</form>
|
||||
<?php else: ?>
|
||||
<form method="POST" action="/IMPORTADORES/seguridad/correoRespaldo">
|
||||
<div class="mb-3">
|
||||
<input type="email" name="email-respaldo" class="form-control" placeholder="Correo de respaldo" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary"><i class="fas fa-envelope"></i>Registrar</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
<div class="col-md-6 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">
|
||||
<h4 class="mb-4 text-dark">Correo de respaldo</h4>
|
||||
<p class="text-muted small flex-grow-1 mb-4">Agrega un correo de respaldo para reuperación de tu cuenta.</p>
|
||||
<?php if (!empty($correos['correo_respaldo'])): ?>
|
||||
<p><code><?= htmlspecialchars($correos['correo_respaldo']) ?></code></p>
|
||||
<!-- Formulario para eliminar -->
|
||||
<form method="POST" action="/IMPORTADORES/seguridad/eliminarCorreoRespaldo" id="form-eliminar-respaldo" class="mt-2 hide"></form>
|
||||
<form method="POST" action="/IMPORTADORES/seguridad/modificarCorreoRspaldo">
|
||||
<div class="mb-3">
|
||||
<input type="email" name="email-respaldo" class="form-control" value="" placeholder="Actualizar correo de respaldo" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success btn-sm mt-2 w-40 btn-animated">
|
||||
<i class="fas fa-edit"></i>Actualizar
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-sm mt-2 w-40 btn-animated" onclick="confirmarEliminacion('respaldo')">
|
||||
<i class="fas fa-trash"></i> Eliminar correo
|
||||
</button>
|
||||
</form>
|
||||
<?php else: ?>
|
||||
<form method="POST" action="/IMPORTADORES/seguridad/correoRespaldo">
|
||||
<div class="mb-3">
|
||||
<input type="email" name="email-respaldo" class="form-control" placeholder="Correo de respaldo" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-sm mt-2 w-40 btn-animated"><i class="fas fa-envelope"></i>Registrar</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -195,19 +232,19 @@ $dos_factores_estado = obtenerEstadoDosFactores();
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const chk = document.getElementById('dos_factores');
|
||||
const chk = document.getElementById('dos_factores');
|
||||
const label = document.querySelector('label[for="dos_factores"]');
|
||||
|
||||
chk.addEventListener('change', () => { label.textContent = chk.checked ? 'Activo' : 'Inactivo'; });
|
||||
// Función para confirmar eliminación con SweetAlert
|
||||
function confirmarEliminacion(tipo) {
|
||||
const mensajes = {
|
||||
'extra': { titulo: '¿Eliminar correo adicional?', texto: 'No podrás recibir notificaciones en este correo.', confirmado: 'Correo adicional eliminado', form: 'form-eliminar-extra' },
|
||||
'extra': { titulo: '¿Eliminar correo adicional?', texto: 'No podrás recibir notificaciones en este correo.', confirmado: 'Correo adicional eliminado', form: 'form-eliminar-extra' },
|
||||
'respaldo': { titulo: '¿Eliminar correo de respaldo?', texto: 'No podrás recuperar tu cuenta con este correo.', confirmado: 'Correo de respaldo eliminado', form: 'form-eliminar-respaldo' }
|
||||
};
|
||||
const config = mensajes[tipo];
|
||||
swal({ title: config.titulo, text: config.texto, icon: "warning", buttons: {
|
||||
cancel: { text: "Cancelar", visible: true, className: "btn-secondary" },
|
||||
cancel: { text: "Cancelar", visible: true, className: "btn-secondary" },
|
||||
confirm: { text: "Sí, eliminar", className: "btn-danger" }
|
||||
}, dangerMode: true,
|
||||
})
|
||||
|
||||
@@ -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; }
|
||||
@@ -26,62 +30,95 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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">👮 Seguridad</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title-glow">👮 Seguridad</h4>
|
||||
<div class="row g-3">
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h4 class="mb-4 text-dark">Autenticación de dos factores</h4>
|
||||
<p>Al activar esta funcionalidad, blindas el acceso a tu cuenta, recibiras un código de acceso a tu correo electrónico para confirmar identidad.</p>
|
||||
<form>
|
||||
<div class="form-check form-switch">
|
||||
<input type="checkbox" class="form-check-input" role="switch"
|
||||
id="dos_factores" name="dos_factores" disabled
|
||||
<?php if(!empty($correos['dos_factores'])) echo "checked"; ?>>
|
||||
<label class="form-check-label" for="dos_factores">
|
||||
<?php echo !empty($correos['dos_factores']) ? "Activo" : "Inactivo"; ?>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<div class="col-md-6 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">
|
||||
<h4 class="mb-4 text-dark">Autenticación de dos factores</h4>
|
||||
<p class="text-muted small flex-grow-1 mb-4">Al activar esta funcionalidad, blindas el acceso a tu cuenta, recibiras un código de acceso a tu correo electrónico para confirmar identidad.</p>
|
||||
<form>
|
||||
<div class="form-check form-switch">
|
||||
<input type="checkbox" class="form-check-input" role="switch"
|
||||
id="dos_factores" name="dos_factores" disabled
|
||||
<?php if(!empty($correos['dos_factores'])) echo "checked"; ?>>
|
||||
<label class="form-check-label" for="dos_factores">
|
||||
<?php echo !empty($correos['dos_factores']) ? "Activo" : "Inactivo"; ?>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cambiar contraseña -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h4 class="mb-4 text-dark">Cambiar contraseña</h4>
|
||||
<p>Al actualizar tu contraseña, refuerzas la seguridad de tu cuenta. Te recomendamos usar una combinación de letras, números y símbolos para mayor seguridad.</p><br>
|
||||
<div class="col-md-6 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">
|
||||
<h4 class="mb-4 text-dark">Cambiar contraseña</h4>
|
||||
<p class="text-muted small flex-grow-1 mb-4">Al actualizar tu contraseña, refuerzas la seguridad de tu cuenta. Te recomendamos usar una combinación de letras, números y símbolos para mayor seguridad.</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h4 class="mb-4 text-dark">Recibe notificaciones</h4>
|
||||
<p>Agrega un correo adicional para recibir notificaciones.</p>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Correo electrónico adicional</label>
|
||||
<input type="email" name="email-extra" class="form-control" disabled value="<?php echo htmlspecialchars($correos['correo_extra']); ?>">
|
||||
</div>
|
||||
</form>
|
||||
<div class="col-md-6 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">
|
||||
<h4 class="mb-4 text-dark">Recibe notificaciones</h4>
|
||||
<p class="text-muted small flex-grow-1 mb-4">Agrega un correo adicional para recibir notificaciones.</p>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Correo electrónico adicional</label>
|
||||
<input type="email" name="email-extra" class="form-control" disabled value="<?php echo htmlspecialchars($correos['correo_extra']); ?>"> </div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h4 class="mb-4 text-dark">Correo de respaldo</h4>
|
||||
<p>Agrega un correo de respaldo para reuperación de tu cuenta.</p>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Correo electrónico de respaldo</label>
|
||||
<input type="email" name="email-respaldo" class="form-control" disabled value="<?php echo htmlspecialchars($correos['correo_respaldo']); ?>">
|
||||
</div>
|
||||
</form>
|
||||
<div class="col-md-6 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">
|
||||
<h4 class="mb-4 text-dark">Correo de respaldo</h4>
|
||||
<p class="text-muted small flex-grow-1 mb-4">Agrega un correo de respaldo para reuperación de tu cuenta.</p>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Correo electrónico de respaldo</label>
|
||||
<input type="email" name="email-respaldo" class="form-control" disabled value="<?php echo htmlspecialchars($correos['correo_respaldo']); ?>">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,7 +12,11 @@
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>v
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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; }
|
||||
@@ -26,6 +30,32 @@
|
||||
.sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.hide { display: none !important; }
|
||||
.alert { top: 75px; left: 275px; right: 50px; position: fixed; z-index: 1050; width: calc(100% - 285px); }
|
||||
</style>
|
||||
@@ -36,14 +66,14 @@
|
||||
<div class="alert alert-warning mt-4">
|
||||
<h5>⚠️ No tienes una agencia activa vinculada.</h5>
|
||||
<p>Para poder gestionar tus solicitudes de importación, primero debes <strong>vincularte a una agencia</strong>.</p>
|
||||
<a href="/IMPORTADORES/vinculaciones/nuevaVinculacion" class="btn btn-primary">Ir a Vinculaciones</a>
|
||||
<a href="/IMPORTADORES/vinculaciones/nuevaVinculacion" class="btn btn-primary mt-auto w-auto btn-animated">Ir a Vinculaciones</a>
|
||||
</div>
|
||||
<?php return; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="content">
|
||||
<h4>➕ Nueva Solicitud de Importación</h4>
|
||||
<div class="card p-4 bg-white shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Nueva Solicitud de Importación</h4>
|
||||
<div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
|
||||
<form id="solicitudForm" action="/IMPORTADORES/solicitud_importacion/guardar" method="POST" enctype="multipart/form-data">
|
||||
|
||||
<!-- Sección principal -->
|
||||
@@ -185,9 +215,9 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input name="partidas[0][descripcion]" class="form-control w-100" required></td>
|
||||
<td><input name="partidas[0][cantidad_comercial]" type="number" step="0.0001" class="form-control w-100" min="0" required></td>
|
||||
<td><input name="partidas[0][cantidad_tarifa]" type="number" step="0.0001" class="form-control w-100" min="0" required></td>
|
||||
<td><input name="partidas[0][descripcion]" class="form-control w-auto" required></td>
|
||||
<td><input name="partidas[0][cantidad_comercial]" type="number" step="0.0001" class="form-control w-auto" min="0" required></td>
|
||||
<td><input name="partidas[0][cantidad_tarifa]" type="number" step="0.0001" class="form-control w-auto" min="0" required></td>
|
||||
<td>
|
||||
<div class="mb-3">
|
||||
<select name="partidas[0][unidad_comercial_id]" class="form-select searchable" required>
|
||||
@@ -198,8 +228,8 @@
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
<td><input name="partidas[0][valor_factura]" type="number" step="0.01" class="form-control valor-partida w-100" min="0" required></td>
|
||||
<td><input name="partidas[0][peso_bruto]" type="number" step="0.0001" class="form-control w-100" min="0" required></td>
|
||||
<td><input name="partidas[0][valor_factura]" type="number" step="0.01" class="form-control valor-partida w-auto" min="0" required></td>
|
||||
<td><input name="partidas[0][peso_bruto]" type="number" step="0.0001" class="form-control w-auto" min="0" required></td>
|
||||
<td>
|
||||
<div class="mb-3">
|
||||
<select name="partidas[0][tasa_preferencial]" class="form-select searchable" required>
|
||||
@@ -212,14 +242,14 @@
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
<td class="hide"><input name="partidas[0][precio_unitario]" type="number" class="form-control w-100"></td>
|
||||
<td class="hide"><input name="partidas[0][oma_factura]" class="form-control w-100"></td>
|
||||
<td class="hide"><input name="partidas[0][precio_unitario]" type="number" class="form-control w-auto"></td>
|
||||
<td class="hide"><input name="partidas[0][oma_factura]" class="form-control w-auto"></td>
|
||||
<td><button type="button" class="btn btn-danger btn-sm remove-row">✖️</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="add-partida">➕ Agregar partida</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm mt-auto w-auto btn-animated" id="add-partida">➕ Agregar partida</button>
|
||||
|
||||
<!-- Activo -->
|
||||
<div class="form-check mt-4">
|
||||
@@ -228,8 +258,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Botones finales -->
|
||||
<button type="submit" class="btn btn-success mt-3">Guardar</button>
|
||||
<a href="/IMPORTADORES/solicitud_importacion/lista" class="btn btn-secondary mt-3 ms-2">Cancelar</a>
|
||||
<button type="submit" class="btn btn-success mt-3 mt-auto w-auto btn-animated">Guardar</button>
|
||||
<a href="/IMPORTADORES/solicitud_importacion/lista" class="btn btn-secondary mt-3 ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -15,6 +15,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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; }
|
||||
@@ -28,14 +32,40 @@
|
||||
.sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.hide { display: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4>✏️ Editar Solicitud #<?= (int)$factura['id_solicitud'] ?></h4>
|
||||
<div class="card p-4 bg-white shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✏️ Editar Solicitud #<?= (int)$factura['id_solicitud'] ?></h4>
|
||||
<div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
|
||||
<form id="solicitudForm" action="/IMPORTADORES/solicitud_importacion/actualizar" method="POST" enctype="multipart/form-data">
|
||||
<input type="hidden" name="id_solicitud" value="<?= (int)$factura['id_solicitud'] ?>">
|
||||
|
||||
@@ -244,7 +274,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary btn-sm mb-3" id="add-partida">➕ Agregar partida</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm mb-3 mt-auto w-auto btn-animated" id="add-partida">➕ Agregar partida</button>
|
||||
|
||||
<!-- Activo -->
|
||||
<div class="form-check mb-4">
|
||||
@@ -252,8 +282,8 @@
|
||||
<label for="status" class="hide form-check-label">Activo</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-success">Actualizar</button>
|
||||
<a href="/IMPORTADORES/solicitud_importacion/lista" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<button type="submit" class="btn btn-success mt-auto w-auto btn-animated">Actualizar</button>
|
||||
<a href="/IMPORTADORES/solicitud_importacion/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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>
|
||||
table.dataTable thead th { background: #343a40; color: #fff; }
|
||||
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
|
||||
@@ -33,6 +37,32 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.status-select:disabled { background-color: #e9ecef; color: #6c757d;}
|
||||
.alert { top: 75px; left: 275px; right: 50px; position: fixed; z-index: 1050; width: calc(100% - 285px); }
|
||||
</style>
|
||||
@@ -49,11 +79,11 @@
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="content">
|
||||
<h4>📄 Solicitudes de Importación</h4>
|
||||
<a href="/IMPORTADORES/solicitud_importacion/crear" class="btn btn-success mb-3">➕ Nueva Solicitud</a>
|
||||
<button class="btn btn-warning mb-3" id="btn-solicitar-masivo">🚚 Solicitar Importación Masiva</button>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📄 Solicitudes de Importación</h4>
|
||||
<a href="/IMPORTADORES/solicitud_importacion/crear" class="btn btn-success mb-3 mt-auto w-auto btn-animated">➕ Nueva Solicitud</a>
|
||||
<button class="btn btn-warning mb-3 mt-auto w-auto btn-animated" id="btn-solicitar-masivo">🚚 Solicitar Importación Masiva</button>
|
||||
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="tabla-solicitudes">
|
||||
<thead>
|
||||
|
||||
@@ -10,6 +10,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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>
|
||||
table.dataTable thead th { background:#343a40; color:#fff; }
|
||||
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
|
||||
@@ -29,6 +33,32 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
/* Forzar z-index más alto para modales anidados */
|
||||
.modal { z-index: 9999 !important; }
|
||||
.modal-backdrop { z-index: 9998 !important; }
|
||||
@@ -41,8 +71,8 @@
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4>➕ Nuevo Transporte</h4>
|
||||
<form id="formTransCrear" action="/IMPORTADORES/transportes/guardar" method="POST" enctype="multipart/form-data" class="card p-4 shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Nuevo Transporte</h4>
|
||||
<form id="formTransCrear" action="/IMPORTADORES/transportes/guardar" method="POST" enctype="multipart/form-data" class="card p-4 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Contenedor *</label>
|
||||
@@ -78,7 +108,7 @@
|
||||
</div>
|
||||
<div class="text-end mt-4">
|
||||
<button type="submit" class="btn btn-success">Guardar</button>
|
||||
<a href="/IMPORTADORES/transportes/lista" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<a href="/IMPORTADORES/transportes/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -10,6 +10,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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>
|
||||
table.dataTable thead th { background:#343a40; color:#fff; }
|
||||
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
|
||||
@@ -29,14 +33,40 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.preview{ width: 40%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4>✏️ Editar Transporte #<?= $t['id_transporte'] ?></h4>
|
||||
<form id="formTransEdit" action="/IMPORTADORES/transportes/actualizar" method="POST" enctype="multipart/form-data" class="card p-4 shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✏️ Editar Transporte #<?= $t['id_transporte'] ?></h4>
|
||||
<form id="formTransEdit" action="/IMPORTADORES/transportes/actualizar" method="POST" enctype="multipart/form-data" class="card p-4 shadow-sm card-hover position-relative h-auto">
|
||||
<input type="hidden" name="id_transporte" value="<?= $t['id_transporte'] ?>">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
@@ -80,8 +110,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end mt-4">
|
||||
<button type="submit" class="btn btn-primary">Actualizar</button>
|
||||
<a href="/IMPORTADORES/transportes/lista" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Actualizar</button>
|
||||
<a href="/IMPORTADORES/transportes/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
<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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -27,12 +31,38 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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>📂 Importación Masiva de Transportes</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📂 Importación Masiva de Transportes</h4>
|
||||
<?php if (isset($_SESSION['import_result'])):
|
||||
$res = $_SESSION['import_result'];
|
||||
unset($_SESSION['import_result']);
|
||||
@@ -51,7 +81,7 @@
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="card p-4 shadow-sm">
|
||||
<div class="card p-4 shadow-sm card-hover position-relative h-auto">
|
||||
<form action="/IMPORTADORES/transportes/importarGuardar" method="POST" enctype="multipart/form-data">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Archivo CSV *</label>
|
||||
@@ -61,8 +91,8 @@
|
||||
<a href="/IMPORTADORES/public/downloads/transportes_masivo_template.csv" class="btn btn-outline-secondary mb-3">
|
||||
📥 Descargar plantilla
|
||||
</a><br>
|
||||
<button type="submit" class="btn btn-primary">Importar</button>
|
||||
<a href="/IMPORTADORES/transportes/lista" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Importar</button>
|
||||
<a href="/IMPORTADORES/transportes/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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>
|
||||
table.dataTable thead th { background:#343a40; color:#fff; }
|
||||
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
|
||||
@@ -31,14 +35,40 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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>🚛 Mis Transportes</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🚛 Mis Transportes</h4>
|
||||
<a href="/IMPORTADORES/transportes/crear" class="btn btn-success mb-3">➕ Nuevo Transporte</a>
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="tabla-transportes">
|
||||
<thead>
|
||||
|
||||
@@ -10,6 +10,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -21,13 +25,39 @@
|
||||
@media (min-width: 768px) { .content { margin-left: 250px; } }
|
||||
@media (max-width: 767.98px) { .content { margin-left: 0; } }
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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">➕ Alta de Transportista</h4>
|
||||
<form action="/IMPORTADORES/transportistas/guardar" method="POST" class="card p-4 shadow-sm" id="formAltaTransportista">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Alta de Transportista</h4>
|
||||
<form action="/IMPORTADORES/transportistas/guardar" method="POST" class="card p-4 shadow-sm card-hover position-relative h-auto" id="formAltaTransportista">
|
||||
<!-- Hidden para persona moral -->
|
||||
<input type="hidden" name="es_persona_moral" id="es_persona_moral" value="0">
|
||||
|
||||
@@ -103,8 +133,8 @@
|
||||
</div>
|
||||
|
||||
<div class="text-end mt-4">
|
||||
<button class="btn btn-success px-4">Guardar Transportista</button>
|
||||
<a href="/IMPORTADORES/transportistas/lista" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<button class="btn btn-success px-4 mt-auto w-auto btn-animated">Guardar Transportista</button>
|
||||
<a href="/IMPORTADORES/transportistas/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -18,6 +18,10 @@ unset($_SESSION['import_errors'], $_SESSION['import_success']);
|
||||
<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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -43,13 +47,39 @@ unset($_SESSION['import_errors'], $_SESSION['import_success']);
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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">📂 Carga Masiva de Transportistas</h4>
|
||||
<div class="card p-4 shadow-sm">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">📂 Carga Masiva de Transportistas</h4>
|
||||
<div class="card p-4 shadow-sm card-hover position-relative h-auto">
|
||||
<p>1. Descarga la plantilla, complétala con tus datos y luego súbela aquí.</p>
|
||||
<a href="/IMPORTADORES/transportistas/template" class="btn btn-outline-secondary mb-4">
|
||||
📥 Descargar Plantilla CSV
|
||||
@@ -60,8 +90,8 @@ unset($_SESSION['import_errors'], $_SESSION['import_success']);
|
||||
<label for="archivo_csv" class="form-label">Selecciona archivo CSV</label>
|
||||
<input type="file" id="archivo_csv" name="archivo_csv" class="form-control" accept=".csv" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">🚀 Cargar Transportistas</button>
|
||||
<a href="/IMPORTADORES/transportistas/lista" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">🚀 Cargar Transportistas</button>
|
||||
<a href="/IMPORTADORES/transportistas/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,6 +10,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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; }
|
||||
@@ -28,13 +32,39 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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">✏️ Editar Transportista #<?= $t['id_transportista'] ?></h4>
|
||||
<form action="/IMPORTADORES/transportistas/actualizar" method="POST" class="card p-4 shadow-sm" id="formEditTransportista">
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✏️ Editar Transportista #<?= $t['id_transportista'] ?></h4>
|
||||
<form action="/IMPORTADORES/transportistas/actualizar" method="POST" class="card p-4 shadow-sm card-hover position-relative h-auto" id="formEditTransportista">
|
||||
<input type="hidden" name="id_transportista" value="<?= $t['id_transportista'] ?>">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
@@ -111,8 +141,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end mt-4">
|
||||
<button class="btn btn-success px-4">💾 Guardar Cambios</button>
|
||||
<a href="/IMPORTADORES/transportistas/lista" class="btn btn-secondary ms-2">Cancelar</a>
|
||||
<button class="btn btn-success px-4 mt-auto w-auto btn-animated">💾 Guardar Cambios</button>
|
||||
<a href="/IMPORTADORES/transportistas/lista" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
<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>
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<!-- 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>
|
||||
table.dataTable thead th { background:#343a40; color:#fff; }
|
||||
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
|
||||
@@ -28,13 +32,39 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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">🚚 Mis Transportistas</h4>
|
||||
<a href="/IMPORTADORES/transportistas/alta" class="btn btn-success mb-3">➕ Nuevo Transportista</a>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🚚 Mis Transportistas</h4>
|
||||
<a href="/IMPORTADORES/transportistas/alta" class="btn btn-success mb-3 card-hover position-relative h-auto mt-auto w-auto btn-animated">➕ Nuevo Transportista</a>
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="table-responsive">
|
||||
<table id="transportistas-table" class="display nowrap" style="width:100%">
|
||||
@@ -87,8 +117,8 @@
|
||||
render: function(data, type, row) {
|
||||
const id = row[0];
|
||||
return `
|
||||
<a href="/IMPORTADORES/transportistas/editar?id=${id}" class="btn btn-sm btn-primary">✏️</a>
|
||||
<button class="btn btn-sm btn-danger" onclick="confirmDelete(${id})">🗑️</button>
|
||||
<a href="/IMPORTADORES/transportistas/editar?id=${id}" class="btn btn-sm btn-primary mt-auto w-auto btn-animated">✏️</a>
|
||||
<button class="btn btn-sm btn-danger mt-auto w-auto btn-animated" onclick="confirmDelete(${id})">🗑️</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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,15 +33,41 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.table thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4>✅ Importadores Vinculados</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✅ Importadores Vinculados</h4>
|
||||
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="tabla-importadores-vinculados">
|
||||
<thead>
|
||||
@@ -59,7 +89,7 @@
|
||||
<td><?= htmlspecialchars($v['telefono']) ?></td>
|
||||
<td><?= isset($v['fecha_vinculacion']) && $v['fecha_vinculacion'] instanceof DateTime ? $v['fecha_vinculacion']->format('Y-m-d H:i') : '' ?></td>
|
||||
<td>
|
||||
<a href="/IMPORTADORES/agentes/desvincularAgente?id=<?= $v['id_relacion'] ?>" class="btn btn-sm btn-danger">Desvincular</a>
|
||||
<a href="/IMPORTADORES/agentes/desvincularAgente?id=<?= $v['id_relacion'] ?>" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">Desvincular</a>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
|
||||
@@ -12,6 +12,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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; }
|
||||
@@ -30,6 +34,32 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.table thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -37,9 +67,9 @@
|
||||
|
||||
<!-- 📄 CONTENIDO -->
|
||||
<div class="content">
|
||||
<h4 class="mb-4">➕ Nueva Vinculación</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Nueva Vinculación</h4>
|
||||
<!-- TABLA DE AGENCIAS -->
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<h5 class="mb-3">🔗 Solicitar Vinculación con Agencias Aduanales</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover align-middle" id="tabla-solicitar-vinculaciones">
|
||||
@@ -68,9 +98,9 @@
|
||||
<td><?= $ag['creado_en'] ? $ag['creado_en']->format('Y-m-d H:i') : '' ?></td>
|
||||
<td>
|
||||
<?php if (!empty($ag['estado_solicitud']) && $ag['estado_solicitud'] === 'PENDIENTE'): ?>
|
||||
<a href="/IMPORTADORES/importadores/cancelarVinculacion?id=<?= $ag['id_agencia'] ?>" class="btn btn-sm btn-danger">Cancelar solicitud</a>
|
||||
<a href="/IMPORTADORES/importadores/cancelarVinculacion?id=<?= $ag['id_agencia'] ?>" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">Cancelar solicitud</a>
|
||||
<?php else: ?>
|
||||
<a href="/IMPORTADORES/importadores/vincular?id=<?= $ag['id_agencia'] ?>" class="btn btn-sm btn-success">Vincular</a>
|
||||
<a href="/IMPORTADORES/importadores/vincular?id=<?= $ag['id_agencia'] ?>" class="btn btn-sm btn-success mt-auto w-auto btn-animated">Vincular</a>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -10,6 +10,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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; }
|
||||
@@ -28,15 +32,41 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.table thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">🔗 Solicitudes de Vinculación</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🔗 Solicitudes de Vinculación</h4>
|
||||
<!-- TABLA DE SOLICITUDES DE VINCULACIÓN -->
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<h5 class="mb-3">👥 Usuarios Solicitantes</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover align-middle" id="tabla-vinculaciones-pendientes">
|
||||
@@ -68,8 +98,8 @@
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/IMPORTADORES/vinculaciones/aprobarVinculacion?id=<?= $s['id_solicitud'] ?>" class="btn btn-sm btn-success">Aprobar</a>
|
||||
<a href="/IMPORTADORES/vinculaciones/denegarVinculacion?id=<?= $s['id_solicitud'] ?>" class="btn btn-sm btn-danger">Denegar</a>
|
||||
<a href="/IMPORTADORES/vinculaciones/aprobarVinculacion?id=<?= $s['id_solicitud'] ?>" class="btn btn-sm btn-success mt-auto w-auto btn-animated">Aprobar</a>
|
||||
<a href="/IMPORTADORES/vinculaciones/denegarVinculacion?id=<?= $s['id_solicitud'] ?>" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">Denegar</a>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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,15 +33,41 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.table thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="mb-4">👥 Usuarios Vinculados</h4>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">👥 Usuarios Vinculados</h4>
|
||||
<!-- TABLA DE VINCULACIÓN AGENCIA -->
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover align-middle" id="tabla-vinculaciones-agencia">
|
||||
<thead>
|
||||
@@ -65,7 +95,7 @@
|
||||
<td><?= !empty($v['fecha_vinculacion']) ? $v['fecha_vinculacion']->format('Y-m-d H:i') : '' ?></td>
|
||||
<td>
|
||||
<?php if (in_array($v['tipo_usuario_sistema'], ['importador', 'agente_aduanal'])): ?>
|
||||
<a href="/IMPORTADORES/vinculaciones/desvincularAgencia?id=<?= $v['id_relacion'] ?>&tipo=<?= $v['tipo_vinculacion'] ?>" class="btn btn-sm btn-danger">
|
||||
<a href="/IMPORTADORES/vinculaciones/desvincularAgencia?id=<?= $v['id_relacion'] ?>&tipo=<?= $v['tipo_vinculacion'] ?>" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">
|
||||
Desvincular
|
||||
</a>
|
||||
<?php else: ?>
|
||||
|
||||
@@ -12,6 +12,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.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; }
|
||||
@@ -30,6 +34,32 @@
|
||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||
}
|
||||
.card { border-radius: 12px; }
|
||||
/* 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); }
|
||||
}
|
||||
/* 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%; }
|
||||
.table thead th { background: #343a40; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -37,10 +67,10 @@
|
||||
|
||||
<!-- 📄 CONTENIDO -->
|
||||
<div class="content">
|
||||
<h4 class="mb-4">🔗 Mis vinculaciones</h4>
|
||||
<a href="/IMPORTADORES/vinculaciones/nuevaVinculacion" class="btn btn-success mb-3">➕ Nueva Vinculación</a>
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">🔗 Mis vinculaciones</h4>
|
||||
<a href="/IMPORTADORES/vinculaciones/nuevaVinculacion" class="btn btn-success mb-3 mt-auto w-auto btn-animated">➕ Nueva Vinculación</a>
|
||||
<!-- TABLA DE VINCULACIÓN USUARIO -->
|
||||
<div class="card p-3 shadow-sm">
|
||||
<div class="card p-3 shadow-sm card-hover position-relative h-auto">
|
||||
<h5 class="mb-3">🏪 Agencia Vinculadas</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover align-middle" id="tabla-vinculaciones-usuario">
|
||||
@@ -71,9 +101,9 @@
|
||||
<?php if ($v['id_agencia'] == ($_SESSION['id_agencia_en_uso'] ?? null)): ?>
|
||||
<span class="badge bg-secondary">En uso</span>
|
||||
<?php else: ?>
|
||||
<a href="/IMPORTADORES/importadores/cambiarAgenciaActiva?id=<?= $v['id_agencia'] ?>" class="btn btn-sm btn-success">Usar Agencia</a>
|
||||
<a href="/IMPORTADORES/importadores/cambiarAgenciaActiva?id=<?= $v['id_agencia'] ?>" class="btn btn-sm btn-success mt-auto w-auto btn-animated">Usar Agencia</a>
|
||||
<?php endif; ?>
|
||||
<a href="/IMPORTADORES/importadores/desvincularUsuario?id=<?= $v['id_relacion'] ?>" class="btn btn-sm btn-danger">Desvincular</a>
|
||||
<a href="/IMPORTADORES/importadores/desvincularUsuario?id=<?= $v['id_relacion'] ?>" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">Desvincular</a>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
|
||||
Reference in New Issue
Block a user