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

Animaciones plataforma

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

153
views/importadores/dashboard_importador.php
View File

@@ -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);
});
});