Animaciones dashboard importador
This commit is contained in:
@@ -8,6 +8,10 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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">
|
<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/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>
|
<style>
|
||||||
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
|
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; }
|
.sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
|
||||||
@@ -44,27 +48,69 @@
|
|||||||
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
||||||
}
|
}
|
||||||
.card { border-radius: 12px; }
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h4 class="mb-4">📦 Panel del Importador</h4>
|
<h4 class="mb-4 animate__animated animate__fadeInDown">📦 Panel del Importador</h4>
|
||||||
|
|
||||||
<?php if ($catalogosData['catalogos_activos']): ?>
|
<?php if ($catalogosData['catalogos_activos']): ?>
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
<?php foreach ($catalogosData['catalogos'] as $catalogo): ?>
|
<?php
|
||||||
<div class="col-md-4">
|
$delay = 0;
|
||||||
<div class="card shadow-sm p-3 <?= $catalogo['obligatorio'] ? 'border-warning' : '' ?>">
|
foreach ($catalogosData['catalogos'] as $catalogo):
|
||||||
<h5 class="text-<?= $catalogo['color'] ?>">
|
$delay += 0.1; // Incrementar el retraso para cada catálogo
|
||||||
<?= obtenerIconoCatalogo($catalogo['nombre']) ?> <?= $catalogo['nombre'] ?>
|
?>
|
||||||
|
<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>
|
</h5>
|
||||||
<p class="text-muted small"><?= $catalogo['descripcion'] ?></p>
|
<p class="text-muted small flex-grow-1"><?= $catalogo['descripcion'] ?></p>
|
||||||
<a href="<?= $catalogo['ruta'] ?>"
|
<div class="mt-auto">
|
||||||
class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>">
|
<button
|
||||||
<?= $catalogo['accion'] ?>
|
class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
|
||||||
</a>
|
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']): ?>
|
<?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; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -74,12 +120,20 @@
|
|||||||
<?php if (count($catalogosData['catalogos']) === 2): // Solo obligatorios ?>
|
<?php if (count($catalogosData['catalogos']) === 2): // Solo obligatorios ?>
|
||||||
<div class="row mt-4">
|
<div class="row mt-4">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="alert alert-info">
|
<div class="alert alert-info alert-animated">
|
||||||
<h6>💡 Consejo</h6>
|
<div class="d-flex align-items-center">
|
||||||
<p class="mb-2">Parece que no tienes catálogos activados. Puedes activar los que necesites desde tus preferencias.</p>
|
<div class="me-3">
|
||||||
<a href="/IMPORTADORES/preferencias/catalogos" class="btn btn-primary btn-sm">
|
<i class="fas fa-lightbulb fa-2x text-info animate__animated animate__pulse animate__infinite"></i>
|
||||||
Configurar Catálogos
|
</div>
|
||||||
</a>
|
<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>
|
</div>
|
||||||
@@ -89,29 +143,48 @@
|
|||||||
<!-- Si los catálogos están completamente desactivados -->
|
<!-- Si los catálogos están completamente desactivados -->
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="alert alert-warning">
|
<div class="alert alert-warning alert-animated">
|
||||||
<h5>🔒 Catálogos Desactivados</h5>
|
<div class="d-flex align-items-center">
|
||||||
<p>Los catálogos están desactivados en tus preferencias. Solo tienes acceso a las funciones básicas del sistema.</p>
|
<div class="me-3">
|
||||||
<a href="/IMPORTADORES/preferencias/catalogos" class="btn btn-primary btn-sm">
|
<i class="fas fa-lock fa-2x text-warning animate__animated animate__swing animate__infinite"></i>
|
||||||
Activar Catálogos
|
</div>
|
||||||
</a>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mostrar solo catálogos obligatorios -->
|
<!-- Mostrar solo catálogos obligatorios -->
|
||||||
<?php foreach ($catalogosData['catalogos'] as $catalogo): ?>
|
<?php
|
||||||
<div class="col-md-4">
|
$delay = 0;
|
||||||
<div class="card shadow-sm p-3 border-warning">
|
foreach ($catalogosData['catalogos'] as $catalogo):
|
||||||
<h5 class="text-<?= $catalogo['color'] ?>">
|
$delay += 0.1;
|
||||||
<?= obtenerIconoCatalogo($catalogo['nombre']) ?> <?= $catalogo['nombre'] ?>
|
?>
|
||||||
|
<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>
|
</h5>
|
||||||
<p class="text-muted small"><?= $catalogo['descripcion'] ?></p>
|
<p class="text-muted small flex-grow-1"><?= $catalogo['descripcion'] ?></p>
|
||||||
<a href="<?= $catalogo['ruta'] ?>"
|
<div class="mt-auto">
|
||||||
class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>">
|
<button
|
||||||
<?= $catalogo['accion'] ?>
|
class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
|
||||||
</a>
|
onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
|
||||||
<small class="text-warning mt-1">
|
data-url="<?= $catalogo['ruta'] ?>">
|
||||||
<i class="fas fa-lock"></i> Función básica
|
<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>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -120,5 +193,47 @@
|
|||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user