Hora: {}
Nombre: {} {}
Email: {}
Teléfono: {}
Mensaje: {}
Iniciar Sesión - """.format(fecha, hora, form.nombre.data, form.apellido.data, form.email.data, form.num_tel.data, form.tipo_req.data) +Hora: {hora}
+Nombre: {form.nombre.data} {form.apellido.data}
+Email: {form.email.data}
+Teléfono: {form.num_tel.data}
+Mensaje: {form.tipo_req.data}
+ + """ # Enviar en segundo plano thr = Thread( target=send_async_email, args=(current_app._get_current_object(), msg) ) diff --git a/static/b_about-us/about-us.css b/static/b_about-us/about-us.css index b945719..d1ea372 100644 --- a/static/b_about-us/about-us.css +++ b/static/b_about-us/about-us.css @@ -100,23 +100,22 @@ /* MEDIA QUERIES - RESPONSIVE DESIGN */ /* ============================================ */ +main { + place-items: center; +} + /* Smartphones (hasta 767px) */ @media (max-width: 767px) { main { - width: 95vw; - margin: 1em auto; min-height: 100vh; - margin-top: 1em; - margin-bottom: 1em; } .expanding-panels { grid-template-rows: repeat(4, 1fr); - row-gap: 2em; .panel { - height: 45vh; + height: 70vh; } } } @@ -125,18 +124,13 @@ @media (min-width: 768px) and (max-width: 1023px) { main { - width: 90vw; - margin: auto; - min-height: 85vh; - margin-top: 1em; - margin-bottom: 1em; + min-height: 130vh; } .expanding-panels { grid-template-columns: repeat(2, 1fr); - .panel { - height: 45vh; + height: 64vh; } } } @@ -145,18 +139,13 @@ @media (min-width: 1024px) and (max-width: 1439px) { main { - width: 90vw; - margin: auto; - min-height: 85vh; - margin-top: 1em; - margin-bottom: 1em; + height: 100vh; } .expanding-panels { grid-template-columns: repeat(2, 1fr); - .panel { - height: 40vh; + height: 50vh; } } } @@ -168,16 +157,12 @@ grid-template-columns: repeat(4, 1fr); .panel { - height: 75vh; + height: 80vh; } } main { - width: 90vw; - margin: auto; - min-height: 85vh; - margin-top: 1em; - margin-bottom: 1em; + height: 80vh; } @@ -186,6 +171,10 @@ /* Pantallas Ultrawide (1920px en adelante) */ @media (min-width: 1920px) { + main { + height: 80vh; + } + .expanding-panels { grid-template-columns: repeat(4, 1fr); diff --git a/static/c_solutions/solutions.css b/static/c_solutions/solutions.css index ae78331..abfc6d0 100644 --- a/static/c_solutions/solutions.css +++ b/static/c_solutions/solutions.css @@ -6,7 +6,7 @@ main { .parent { - padding: 5em; + /* padding: 5em; */ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); @@ -16,24 +16,24 @@ main { background-size: contain; background-position: center; background-repeat: no-repeat; + transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); + border: 2px solid transparent; + /* border: 2px solid red; */ + border-radius: 15px; + + &:hover { + animation: vibrate 0.1s ease infinite !important; + transform: scale(1.05) !important; + box-shadow: 0 5px 15px rgba(255, 255, 255, 0.5) !important; + border-color: #00acc1 !important; + filter: brightness(1.05) !important; + z-index: 10 !important; + border-radius: 15px !important; + } + } } -.parent div { - transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); - border: 2px solid transparent; - border-radius: 15px; - - &:hover { - animation: vibrate 0.4s ease infinite !important; - transform: scale(1.05) !important; - box-shadow: 0 5px 15px rgba(255, 255, 255, 0.5) !important; - border-color: #00acc1 !important; - filter: brightness(1.05) !important; - z-index: 10 !important; - border-radius: 15px !important; - } -} /* Imágenes específicas */ @@ -61,20 +61,23 @@ main { } + +main { + place-items: center; +} + /* Smartphones (hasta 767px) */ @media (max-width: 767px) { main { - width: 95vw; - min-height: 70vh; - margin: 10px auto; + min-height: 100vh; background-size: auto 15%; - border-radius: 12px; + border-radius: 15px; padding: 1em; /* Añadido para espacio interno */ } .parent { - width: 100vw; /* Cambiado a 100% para mejor ajuste */ + width: 100% !important; padding: 1em; /* Reducido el padding para móviles */ display: grid; @@ -108,18 +111,15 @@ main { /* Tablets (768px - 1023px) */ @media (min-width: 768px) and (max-width: 1023px) { - main { - width: 90vw; - min-height: 70vh; - margin: 10px auto; - background-size: auto 35%; - border-radius: 12px; + .parent { + width: 100% !important; + height: 50vw; + gap: 2em; } - .parent { - width: 90vw; - /* Altura para que la grilla sea visible */ - height: 80vh; + main { + background-size: 50% auto; /* 30% del ancho del contenedor */ + height: 50vh; } } @@ -127,18 +127,15 @@ main { /* Laptops (1024px - 1439px) */ @media (min-width: 1024px) and (max-width: 1439px) { - main { - width: 85vw; - min-height: 85vh; - margin: 10px auto; - background-size: auto 50%; - border-radius: 12px; + .parent { + width: 100% !important; + height: 65vw; + gap: 2em; } - .parent { - width: 80vw; - /* Altura para que la grilla sea visible */ - height: 80vh; + main { + background-size: 65% auto; /* 30% del ancho del contenedor */ + height: 65vh; } } @@ -146,11 +143,15 @@ main { /* PCs de escritorio (1440px - 1919px) */ @media (min-width: 1440px) and (max-width: 1919px) { - .parent { - width: 70vw; - /* Altura para que la grilla sea visible */ - height: 70vh; + width: 100% !important; + height: 50vw; + gap: 2em; + } + + main { + background-size: 45% auto; /* 30% del ancho del contenedor */ + height: 80vh; } } @@ -158,14 +159,20 @@ main { /* Pantallas Ultrawide (1920px en adelante) */ @media (min-width: 1920px) { + .parent { - width: 75vw; + width: 100% !important; height: 40vw; gap: 2em; } main { background-size: 50% auto; /* 30% del ancho del contenedor */ + min-height: 80vh; } -} \ No newline at end of file +} + + + + diff --git a/static/d_methodology/methodology.css b/static/d_methodology/methodology.css index 3159a54..17eb681 100644 --- a/static/d_methodology/methodology.css +++ b/static/d_methodology/methodology.css @@ -2,4 +2,43 @@ & p { font-size: 1.5rem; } -} \ No newline at end of file +} + +main { + place-items: center; +} + +/* Smartphones (hasta 767px) */ +@media (max-width: 767px) { + /* main{ background-color: black; } */ +} + +/* Tablets (768px - 1023px) */ +@media (min-width: 768px) and (max-width: 1023px) { + /* main{ background-color: pink; } */ +} + +/* Laptops (1024px - 1439px) monitores resulición baja */ +@media (min-width: 1024px) and (max-width: 1439px) { + /* main{ background-color: purple; } */ + main { + min-height: 85vh; + } +} + +/* PCs de escritorio (1440px - 1919px) macbook */ +@media (min-width: 1440px) and (max-width: 1919px) { + /* main{ background-color: greenyellow; } */ + main { + min-height: 80vh; + } +} + +/* Pantallas Ultrawide (1920px en adelante) */ +@media (min-width: 1920px) { + /* main{ background-color: red; } */ + main { + min-height: 80vh; + } +} + diff --git a/static/f_contact/contact.css b/static/f_contact/contact.css new file mode 100644 index 0000000..83de633 --- /dev/null +++ b/static/f_contact/contact.css @@ -0,0 +1,61 @@ +.form-header{ + width: 100% !important; + & img { + width: 100px; + height: auto !important; + animation: rotacion 10s linear infinite; + transform-origin: center center; /* Asegura que gire desde el centro */ + display: inline-block; /* Para mejor comportamiento en algunos navegadores */ + } +} + +@keyframes rotacion { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + + +/* Smartphones (hasta 767px) */ +@media (max-width: 767px) { + /* main{ background-color: black; } */ + main { + min-height: 80vh; + } +} + +/* Tablets (768px - 1023px) */ +@media (min-width: 768px) and (max-width: 1023px) { + /* main{ background-color: pink; } */ + main { + min-height: 80vh; + } +} + +/* Laptops (1024px - 1439px) monitores resulición baja */ +@media (min-width: 1024px) and (max-width: 1439px) { + /* main{ background-color: purple; } */ + main { + min-height: 80vh; + } + +} + +/* PCs de escritorio (1440px - 1919px) macbook */ +@media (min-width: 1440px) and (max-width: 1919px) { + /* main{ background-color: greenyellow; } */ + main { + min-height: 80vh; + } +} + +/* Pantallas Ultrawide (1920px en adelante) */ +@media (min-width: 1920px) { + /* main{ background-color: red; } */ + main { + min-height: 80vh; + } +} diff --git a/static/f_contact/contact.js b/static/f_contact/contact.js index f374a66..b16a278 100644 --- a/static/f_contact/contact.js +++ b/static/f_contact/contact.js @@ -1,7 +1,9 @@ import {simpleNotification} from '../z_comps/notify.js'; for (let data of dataList) { - simpleNotification(data.title, data.body, data.typeAlert); + if (data != null){ + simpleNotification(data.title, data.body, data.typeAlert); + } } diff --git a/static/g_login/login.css b/static/g_login/login.css new file mode 100644 index 0000000..0ed49be --- /dev/null +++ b/static/g_login/login.css @@ -0,0 +1,44 @@ +main { + place-items: center; +} + +/* Smartphones (hasta 767px) */ +@media (max-width: 767px) { + /* main{ background-color: black; } */ + main { + min-height: 80vh; + } +} + +/* Tablets (768px - 1023px) */ +@media (min-width: 768px) and (max-width: 1023px) { + /* main{ background-color: pink; } */ + main { + min-height: 80vh; + } +} + +/* Laptops (1024px - 1439px) monitores resulición baja */ +@media (min-width: 1024px) and (max-width: 1439px) { + /* main{ background-color: purple; } */ + main { + min-height: 80vh; + } + +} + +/* PCs de escritorio (1440px - 1919px) macbook */ +@media (min-width: 1440px) and (max-width: 1919px) { + /* main{ background-color: greenyellow; } */ + main { + min-height: 80vh; + } +} + +/* Pantallas Ultrawide (1920px en adelante) */ +@media (min-width: 1920px) { + /* main{ background-color: red; } */ + main { + min-height: 80vh; + } +} diff --git a/static/h_tmp_user/a_home/a_home.css b/static/h_tmp_user/a_home/a_home.css new file mode 100644 index 0000000..7a34326 --- /dev/null +++ b/static/h_tmp_user/a_home/a_home.css @@ -0,0 +1,251 @@ +/* Contenedor general */ +/* #dbContact_wrapper .row { + display: flex; + flex-wrap: wrap; + gap: 1em; + background: #f8f9fa; + padding: 1em; + border-radius: 8px; +} */ + +/* Sección de "entries per page" */ +/* #dbContact_wrapper .dt-layout-start, +#dbContact_wrapper .dt-layout-end { + display: flex; + align-items: center; + gap: 0.5em; +} */ + +/* Ajuste a los selects */ +/* #dbContact_wrapper .dt-length select, +#dbContact_wrapper .dt-search input[type="search"] { + min-width: 150px; + padding: 0.5em; + border-radius: 6px; +} */ + +/* Ajustes a los labels */ +/* #dbContact_wrapper .dt-length label, +#dbContact_wrapper .dt-search label { + margin: 0; + font-size: 1em; + display: flex; + align-items: center; + gap: 0.5em; +} */ + +/* ------------------------ */ +.dt-length label, +.dt-search label { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.dt-length::before { + content: "📄"; + font-size: 0.9rem; +} + +.dt-search::before { + content: "🔍"; + font-size: 0.9rem; + margin-right: 0.5rem; +} + + + +/* Smartphones (hasta 767px) */ +@media (max-width: 767px) { + + /* [ inicio info datatables ] */ + #dbContact_wrapper> :first-child { + & div>div { + width: 100%; + display: grid; + grid-template-columns: 20% 80%; + place-items: center; + + & select, + input { + width: 100% !important; + } + } + + } + /* [ final info datatables ] */ + + + /* [ i thead] */ + thead > tr, th { + background-color: #333 !important; + } + + th.status { + display: none; + } + + thead th .filter { + visibility: visible; + position: absolute; + top: 50%; + left: 0; + right: 0; + transform: translateY(-50%); + } + + thead th .filter input { + width: 100%; + padding: 0.5em; + font-size: 0.9em; + } + + /* [ f thead] */ + + /* [ i select ] */ + + select.form-select { + width: 100% !important; + margin-top: 0.5em; + font-size: 0.9em; + padding: 0.5em; + } + + /* [ f select ] */ + + /* [ i general table ] */ + /* Eliminar estilos por defecto */ + table, thead, tbody, th, td, tr { + all: unset; + } + + + /* Estilo para cada fila */ + tr { + margin-top: 0.5em; + margin-bottom: 0.5em; + display: flex; + flex-direction: column; + background: #fff; + border: 2px solid #ccc; + border-radius: 10px; + padding: 0.5em; + /* gap: 0.8em; */ + + } + + + td.td-texto { + white-space: nowrap; + overflow: hidden; + text-align: left; + text-overflow: ellipsis; + max-width: 100%; /* Se adapta al contenedor */ + display: inline-block; + vertical-align: middle; /* Alinea verticalmente */ + } + + + + /* Estilo para celdas */ + td { + display: flex; + align-items: center; + padding: 0.6em 0; + /* border-bottom: 1px solid #eee; */ + font-size: 0.9em; + flex-wrap: wrap; + } + + + /* Etiquetas de las celdas */ + td::before, th::before { + content: attr(data-label); + font-weight: bold; + color: #333; + text-align: left; + flex-basis: 45%; + flex-shrink: 0; + } + +} + + + + +#dbContact thead { + text-align: center; + vertical-align: middle; + background-color: black; + color: white; +} + +#dbContact th { + text-align: center; + vertical-align: middle; + background-color: black; + color: white; +} + + + + + + +/* Tablets (768px - 1023px) */ +@media (min-width: 768px) and (max-width: 1023px) { + /* main{ background-color: pink; } */ + main { + min-height: 80vh; + /* background-color: blueviolet; */ + } + + + +} + +/* Laptops (1024px - 1439px) monitores resulición baja */ +@media (min-width: 1024px) and (max-width: 1439px) { + /* main{ background-color: purple; } */ + main { + min-height: 50vh; + /* background-color: aqua; */ + } +} + +/* PCs de escritorio (1440px - 1919px) macbook */ +@media (min-width: 1440px) and (max-width: 1919px) { + /* main{ background-color: greenyellow; } */ + main { + min-height: 50vh; + } +} + +/* Pantallas Ultrawide (1920px en adelante) */ +@media (min-width: 1920px) { + /* main{ background-color: red; } */ + main { + min-height: 80vh; + } + + + #dbContact thead { + position: sticky; + top: 0; + z-index: 10; + } + +} + + + +/* #dbContact th:nth-child(2), +#dbContact td:nth-child(2) { + display: none; +} */ \ No newline at end of file diff --git a/static/h_tmp_user/a_home/datatable.js b/static/h_tmp_user/a_home/datatable.js new file mode 100644 index 0000000..09f498f --- /dev/null +++ b/static/h_tmp_user/a_home/datatable.js @@ -0,0 +1,28 @@ +new DataTable('#dbContact', { + autoWidth: true, // 👈 agregar esto + responsive: true, + + initComplete: function () { + // Agrega campos de filtro para cada columna + this.api().columns().every(function () { + let column = this; + let header = $(column.header()); + let title = header.text().trim(); + + // Excluir la columna "Estatus" del filtro + if (title !== 'Estatus') { + // Crea input de filtro + header.append(''); + + // Aplica el filtro al escribir + $('input', header) + .on('keyup change', function () { + if (column.search() !== this.value) { + column.search(this.value).draw(); + } + }); + } + }); + } +}); + diff --git a/static/h_tmp_user/a_home/get_contact_data.js b/static/h_tmp_user/a_home/get_contact_data.js new file mode 100644 index 0000000..92cfcd5 --- /dev/null +++ b/static/h_tmp_user/a_home/get_contact_data.js @@ -0,0 +1,57 @@ +// obtener los demás datos de la base de datos de contactos para mostrarlas en la ui +async function get_contact_data(btn) { + try { + let id = btn.dataset.id; + let modalBody = document.querySelector("#modalBody"); + + let response = await fetch('/user/get-contact-data', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ id }), + credentials: 'include' + }); + + if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); + + let { data } = await response.json(); + + let contact = { + fecha: data[0], + fecha_hora: data[1], + nombre: data[2], + apellido: data[3], + correo: data[4], + estado: data[5], + telefono: data[6], + tamano_empresa: data[7], + rol_contacto: data[8], + tipo_industria: data[9], + comentarios: data[10], + estatus: data[11] ?? "Sin Estatus" + }; + + modalBody.innerHTML = ` +${contact.fecha} - ${contact.fecha_hora}
+${contact.nombre} ${contact.apellido}
+${contact.correo}
+${contact.estado}
+${contact.telefono}
+${contact.tamano_empresa}
+${contact.rol_contacto}
+${contact.tipo_industria}
+${contact.estatus}
+${contact.comentarios}
+ `; + + } catch (error) { + console.error('Error al obtener datos:', error); + } +} + +document.getElementById('dbContact').addEventListener('click', (event) => { + const button = event.target.closest('button.btn-primary[data-id]'); + if (button) { + get_contact_data(button); + } +}); + diff --git a/static/h_tmp_user/a_home/update_status_contacts.js b/static/h_tmp_user/a_home/update_status_contacts.js new file mode 100644 index 0000000..a40d7f5 --- /dev/null +++ b/static/h_tmp_user/a_home/update_status_contacts.js @@ -0,0 +1,29 @@ +// actualiza los status en la base de datos + +function send_data(target) { + let id = target.dataset.id; + let valor = target.value != "Null" ? target.value : null; + let data = { id, value: valor }; + + + if (valor === 'Archivado') { + let table = $('#dbContact').DataTable(); + let row = table.row(`tr[data-id="${id}"]`); + row.remove().draw(); + } + + fetch('/user/manage-record', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data), + credentials: 'include' + }); +} + +document.getElementById('dbContact').addEventListener('change', (event) => { + if (event.target.matches('select.form-select[data-id]')) { + send_data(event.target); + } +}); + + diff --git a/static/template/navbar_footer.css b/static/template/navbar_footer.css index 22a3ca1..1f9301f 100644 --- a/static/template/navbar_footer.css +++ b/static/template/navbar_footer.css @@ -1,11 +1,11 @@ :root { - --blue-formha: #5d9dd1; + --navbar-footer-color: #5d9dd1; --font-size-formha: 1.2rem; } .navbar-custom { - background-color: var(--blue-formha) !important; + background-color: var(--navbar-footer-color) !important; font-size: var(--font-size-formha); padding-top: 15px; padding-bottom: 15px; @@ -63,25 +63,38 @@ margin-left: 1em; margin-right: 1em; } - - /* logo bordeado blanco */ - & .logo{ - background-color: white; - border-radius: 10px; - background-image: url('../y_img/logos/formha_blanco_vertical.png'); - width: 150px; - height: 100px; - background-size: cover; /* o cover según lo que busques */ - background-repeat: no-repeat; - background-position: center; - } + } +.logo { + background-color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + + +/* Animación de rotar el svg */ +& .logo svg { + animation: rotar 5s linear infinite; +} + +/* Definición de la animación */ +@keyframes rotar { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} /* Estilos personalizados para el footer */ .footer { - background-color: var(--blue-formha); + background-color: var(--navbar-footer-color); font-size: var(--font-size-formha); color: white; padding: 3rem 0; @@ -118,4 +131,52 @@ +/* Smartphones (hasta 767px) */ +@media (max-width: 767px) { + /* body{ background-color: black; } */ + .logo { + padding: 2px; + width: 2.5em; + height: 2.5em; + } +} +/* Tablets (768px - 1023px) */ +@media (min-width: 768px) and (max-width: 1023px) { + /* body{ background-color: pink; } */ + .logo { + padding: 4px; + width: 2.5em; + height: 2.5em; + } +} + +/* Laptops (1024px - 1439px) */ +@media (min-width: 1024px) and (max-width: 1439px) { + /* body{ background-color: purple; } */ + .logo { + padding: 6px; + width: 3em; + height: 3em; + } +} + +/* PCs de escritorio (1440px - 1919px) */ +@media (min-width: 1440px) and (max-width: 1919px) { + /* body{ background-color: greenyellow; } */ + .logo { + padding: 4px; + width: 3em; + height: 3em; + } +} + +/* Pantallas Ultrawide (1920px en adelante) */ +@media (min-width: 1920px) { + /* body{ background-color: red; } */ + .logo { + padding: 6px; + width: 3.5em; + height: 3.5em; + } +} diff --git a/static/template/tmp.css b/static/template/tmp.css index 24d5e97..7dd9470 100644 --- a/static/template/tmp.css +++ b/static/template/tmp.css @@ -1,24 +1,50 @@ body { - font-family: "Source Sans 3", sans-serif !important; + font-family: "Roboto", sans-serif !important; } +main{ + display: grid; + margin: auto; + margin-top: 2em; + margin-bottom: 2em; +} + + +/* Smartphones (hasta 767px) */ +@media (max-width: 767px) { + /* body{ background-color: black; } */ + main { + width: 98vw !important; + } +} + +/* Tablets (768px - 1023px) */ +@media (min-width: 768px) and (max-width: 1023px) { + /* body{ background-color: pink; } */ + main { + width: 96vw !important; + } +} + +/* Laptops (1024px - 1439px) baja resolución */ +@media (min-width: 1024px) and (max-width: 1439px) { + /* body{ background-color: purple; } */ + main { + width: 95vw !important; + } +} + +/* PCs de escritorio (1440px - 1919px) macbook */ +@media (min-width: 1440px) and (max-width: 1919px) { + main{ + width: 90vw !important; + } +} /* Pantallas Ultrawide (1920px en adelante) */ @media (min-width: 1920px) { main { - /* border: 6px solid red; */ - /* max-width: 80vw !important; */ width: 80vw !important; - min-height: 85vh !important; - margin: auto; - margin-top: 2em; - margin-bottom: 2em; - display: grid; - /* place-content: center; */ } } - - - - diff --git a/static/y_img/about-us/mision.avif b/static/y_img/about-us/mision.avif index ed252de..49adcc4 100644 Binary files a/static/y_img/about-us/mision.avif and b/static/y_img/about-us/mision.avif differ diff --git a/static/y_img/about-us/team.avif b/static/y_img/about-us/team.avif index 429787a..4738928 100644 Binary files a/static/y_img/about-us/team.avif and b/static/y_img/about-us/team.avif differ diff --git a/static/y_img/about-us/valores.avif b/static/y_img/about-us/valores.avif index ccd937f..9a1af59 100644 Binary files a/static/y_img/about-us/valores.avif and b/static/y_img/about-us/valores.avif differ diff --git a/static/y_img/about-us/vision.avif b/static/y_img/about-us/vision.avif index 97cfb47..c393a51 100644 Binary files a/static/y_img/about-us/vision.avif and b/static/y_img/about-us/vision.avif differ diff --git a/templates/c_solutions/solutions.html b/templates/c_solutions/solutions.html index a0a4025..9fc9cc0 100644 --- a/templates/c_solutions/solutions.html +++ b/templates/c_solutions/solutions.html @@ -21,25 +21,20 @@ -->