Animaciones plataforma

2025-07-04 12:57:56 -06:00
parent 7057590d8d
commit 8434121efc
63 changed files with 3828 additions and 986 deletions
--- a/views/preferencias/catalogos.php
+++ b/views/preferencias/catalogos.php
@@ -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;
        });
--- a/views/preferencias/dashboard_preferencias.php
+++ b/views/preferencias/dashboard_preferencias.php
@@ -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>
--- a/views/preferencias/notificaciones.php
+++ b/views/preferencias/notificaciones.php
@@ -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>