From 9925a0bf55d0a15653dcc78843a59a343b5d0c67 Mon Sep 17 00:00:00 2001 From: Alexeer Date: Mon, 7 Jul 2025 11:41:11 -0600 Subject: [PATCH] Registro de agencias --- views/admin/alta_agencias.php | 193 ++++++++++++++++++++++++++++------ views/registro/form.php | 65 ++++++++---- 2 files changed, 203 insertions(+), 55 deletions(-) diff --git a/views/admin/alta_agencias.php b/views/admin/alta_agencias.php index 284e03f..ec6a7e0 100644 --- a/views/admin/alta_agencias.php +++ b/views/admin/alta_agencias.php @@ -58,6 +58,68 @@ 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; } + /* ========== ANIMACIONES PARA INPUTS ========== */ + /* 1. Animación al hacer focus */ + .form-control { transition: all 0.3s ease; border: 2px solid #dee2e6; position: relative; } + .form-control:focus { border-color: #0d6efd; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25), 0 0 20px rgba(13, 110, 253, 0.3); transform: translateY(-2px); } + /* 2. Animación al escribir */ + .form-control:not(:placeholder-shown) { border-color: #198754; background-color: #f8fff9; } + /* 3. Efecto de shake en validación */ + .form-control.shake { animation: shake 0.5s ease-in-out; } + @keyframes shake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-5px); } + 75% { transform: translateX(5px); } + } + /* 4. Floating labels con animación */ + .form-floating-custom { position: relative; margin-bottom: 1.5rem; } + .form-floating-custom .form-control { padding: 1rem 0.75rem 0.5rem 0.75rem; height: auto; } + .form-floating-custom .form-label { position: absolute; top: 0.75rem; left: 0.75rem; transition: all 0.3s ease; pointer-events: none; color: #6c757d; z-index: 2; } + .form-floating-custom .form-control:focus ~ .form-label, + .form-floating-custom .form-control:not(:placeholder-shown) ~ .form-label { top: 0.25rem; font-size: 0.75rem; color: #0d6efd; font-weight: 600; } + /* 5. Efecto de pulso en hover */ + .input-pulse:hover { animation: inputPulse 0.6s ease-in-out; } + @keyframes inputPulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.02); } + 100% { transform: scale(1); } + } + /* 6. Gradiente animado en el borde */ + .input-gradient { position: relative; overflow: hidden; } + .input-gradient::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; + background: linear-gradient(90deg, transparent, rgba(13, 110, 253, 0.3), transparent); transition: left 0.5s; pointer-events: none; z-index: 1; } + .input-gradient:focus::before { left: 100%; } + /* 7. Efecto de brillo en validación exitosa */ + .form-control.valid { border-color: #198754; background: linear-gradient(45deg, #fff, #f8fff9); animation: successGlow 1s ease-in-out; } + @keyframes successGlow { + 0% { box-shadow: 0 0 5px rgba(25, 135, 84, 0.5); } + 50% { box-shadow: 0 0 20px rgba(25, 135, 84, 0.8); } + 100% { box-shadow: 0 0 5px rgba(25, 135, 84, 0.5); } + } + /* 8. Typing effect simulation */ + .input-typing { position: relative; } + .input-typing::after { content: '|'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 0; animation: blink 1s infinite; color: #0d6efd; } + .input-typing:focus::after { opacity: 1; } + @keyframes blink { + 0%, 50% { opacity: 1; } + 51%, 100% { opacity: 0; } + } + /* 9. Efecto de ondas */ + .input-ripple { position: relative; overflow: hidden; } + .input-ripple::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(13, 110, 253, 0.2); + border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s; pointer-events: none; } + .input-ripple:focus::before { width: 300px; height: 300px; } + /* 10. Slide-up animation para los campos */ + .form-group-animated { opacity: 0; transform: translateY(20px); animation: slideUp 0.6s ease-out forwards; } + .form-group-animated:nth-child(1) { animation-delay: 0.1s; } + .form-group-animated:nth-child(2) { animation-delay: 0.2s; } + .form-group-animated:nth-child(3) { animation-delay: 0.3s; } + .form-group-animated:nth-child(4) { animation-delay: 0.4s; } + .form-group-animated:nth-child(5) { animation-delay: 0.5s; } + .form-group-animated:nth-child(6) { animation-delay: 0.6s; } + .form-group-animated:nth-child(7) { animation-delay: 0.7s; } + .form-group-animated:nth-child(8) { animation-delay: 0.8s; } + @keyframes slideUp { to { opacity: 1; transform: translateY(0); } } @@ -71,42 +133,61 @@
➕ Nueva Agencia Aduanal
-
- - -
-
- - -
+
+
+ + +
+
-
- - -
+
+
+ + +
+
-
- - -
-
- - -
-

Administrador de la Agencia

-
- - -
-
- - -
+
+
+ + +
+
-
- +
+
+ + +
+
+
+
+ + +
+
+
+
+

Administrador de la Agencia

+
+
+
+ + +
+
+
+
+ + +
+
+ +
+ +
@@ -196,6 +277,54 @@ // Si todas las validaciones pasan, el formulario se envía. this.submit(); }); + // Script para manejar las animaciones de validación + document.addEventListener('DOMContentLoaded', function() { + const inputs = document.querySelectorAll('.form-control'); + + inputs.forEach(input => { + // Validación en tiempo real + input.addEventListener('input', function() { + if (this.checkValidity()) { + this.classList.remove('shake'); + this.classList.add('valid'); + } else { + this.classList.remove('valid'); + } + }); + + // Efecto shake en campos inválidos + input.addEventListener('invalid', function() { + this.classList.add('shake'); + setTimeout(() => { + this.classList.remove('shake'); + }, 500); + }); + }); + + // Validación del formulario + document.getElementById('formAltaAgencias').addEventListener('submit', function(e) { + e.preventDefault(); + + let isValid = true; + inputs.forEach(input => { + if (!input.checkValidity()) { + input.classList.add('shake'); + isValid = false; + } + }); + + if (isValid) { + // Aquí puedes agregar tu lógica de envío + Swal.fire({ + icon: 'success', + title: '¡Éxito!', + text: 'Agencia registrada correctamente', + showConfirmButton: false, + timer: 1500 + }); + } + }); + }); diff --git a/views/registro/form.php b/views/registro/form.php index bca5f73..96be6a3 100644 --- a/views/registro/form.php +++ b/views/registro/form.php @@ -112,12 +112,12 @@ $color2 = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5')
- - + +
-
+
@@ -157,8 +157,8 @@ $color2 = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5') placeholder="Ej: Calle, num.externo, num.interno, colonia, municipio, código postal, estado" required>
- - + +

Administrador de la Agencia

@@ -171,7 +171,7 @@ $color2 = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5')
-
+
@@ -201,33 +201,51 @@ $color2 = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5') function alternarFormulario() { const formImportador = document.getElementById('formImportadorContainer'); - const formAgencia = document.getElementById('formAgenciaContainer'); - const btnToggle = document.getElementById('btnToggle'); + const formAgencia = document.getElementById('formAgenciaContainer'); + const btnToggle = document.getElementById('btnToggle'); if (formularioActual === 'importador') { // Cambiar a formulario de agencia formImportador.classList.remove('active'); formAgencia.classList.add('active'); btnToggle.textContent = '🔄 Registro de Importador'; - btnToggle.classList.remove('btn-white'); - btnToggle.classList.add('btn-white'); - formularioActual = 'agencia'; + formularioActual = 'agencia'; } else { // Cambiar a formulario de importador formAgencia.classList.remove('active'); formImportador.classList.add('active'); btnToggle.textContent = '🔄 Registro de Agencia Aduanal'; - btnToggle.classList.remove('btn-white'); - btnToggle.classList.add('btn-white'); - formularioActual = 'importador'; + formularioActual = 'importador'; } // Resetear reCAPTCHA si está disponible if (typeof grecaptcha !== 'undefined') { - grecaptcha.reset(); + try{ + grecaptcha.reset(0); // Reset primer reCAPTCHA + grecaptcha.reset(1); // Reset primer reCAPTCHA + } catch (e) { + console.log('Error resetting reCAPTCHA:', e); + } } } + // Función para obtener la respuesta del reCAPTCHA activo + function getActiveRecaptchaResponse() { + if (typeof grecaptcha !== 'undefined') { + try { + if (formularioActual === 'importador') { + return grecaptcha.getResponse(0) || grecaptcha.getResponse(); + } else { + return grecaptcha.getResponse(1) || grecaptcha.getResponse(); + } + } catch (e) { + console.log('Error getting reCAPTCHA response:', e); + return ''; + } + } + return ''; + } + // Inicializar al cargar la página document.addEventListener('DOMContentLoaded', function() { // Por defecto mostrar el formulario de importador @@ -243,8 +261,8 @@ $color2 = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5') const rfc = document.getElementById('rfc').value.trim().toUpperCase(); const email = document.getElementById('email').value.trim(); const phone = document.getElementById('phone').value.trim(); - const archivo = document.getElementById('opinion_file').files[0]; - const recaptcha = grecaptcha.getResponse(); + const archivo = document.getElementById('opinion_file_importador').files[0]; + const recaptcha = getActiveRecaptchaResponse(); // Expresiones regulares const emailRegex = /^[a-zA-Z0-9._+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; @@ -293,14 +311,15 @@ $color2 = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5') // Validación de archivo PDF if (!archivo) { Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El padrón de importadores es obligatorio.', confirmButtonColor: '#dc3545' }); - document.getElementById('opinion_file').focus(); + document.getElementById('opinion_file_importador').focus(); return; } if (!archivo || archivo.type !== 'application/pdf') { Swal.fire({ icon: 'error', title: 'Formato de documento inválido', text: 'Solo se permite subir archivos PDF.', confirmButtonColor: '#dc3545' }); - return; } + return; + } // Validación de reCAPTCHA - if (recaptcha.length === 0) { + if (!recaptcha || recaptcha.length === 0) { Swal.fire({ icon: 'warning', title: 'Verificación requerida', text: 'Por favor completa el reCAPTCHA.', confirmButtonColor: '#dc3545' }); return; } @@ -320,7 +339,7 @@ $color2 = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5') const archivo = document.getElementById('opinion_file').files[0]; const nombre_admin = document.getElementById('nombre_admin').value.trim(); const correo_admin = document.getElementById('correo_admin').value.trim(); - const recaptcha = grecaptcha.getResponse(); + const recaptcha = getActiveRecaptchaResponse(); // Expresiones regulares const correoRegex = /^[a-zA-Z0-9._+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; @@ -375,7 +394,7 @@ $color2 = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5') // Validación de archivo PDF if (!archivo) { Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El padrón de importadores es obligatorio.', confirmButtonColor: '#dc3545' }); - document.getElementById('opinion_file').focus(); + document.getElementById('opinion_file_agencia').focus(); return; } if (!archivo || archivo.type !== 'application/pdf') { @@ -399,7 +418,7 @@ $color2 = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5') return; } // Validación de reCAPTCHA - if (recaptcha.length === 0) { + if (!recaptcha || recaptcha.length === 0) { Swal.fire({ icon: 'warning', title: 'Verificación requerida', text: 'Por favor completa el reCAPTCHA.', confirmButtonColor: '#dc3545' }); return; }