dix/formha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mod visits views

Browse Source
This commit is contained in:
David Itehua Xalamihua 2025-04-28 14:45:50 -06:00
parent ba711f5423
commit c6ca569415
11 changed files with 317 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -25,6 +25,7 @@ exit
```
# Añade las variables de entorno del proyecto al archivo envars
- si tienes problemas con las variables de entorno deberás de comentarlas y reiniciar apache, una vez reiniciado deberas descomentar las variables de entorno y volver a reiniciar apache
```bash
sudo nano /etc/apache2/envvars
```

12
static/b_about-us/about-us.css
View File

@ -122,30 +122,30 @@ main {
/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
/* main { background-color: red; } */
main {
min-height: 130vh;
min-height: 150vh;
}
.expanding-panels {
grid-template-columns: repeat(2, 1fr);
.panel {
height: 64vh;
height: 75vh;
}
}
}
/* Laptops (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
/* main { background-color: pink; } */
main {
height: 100vh;
height: 170vh;
}
.expanding-panels {
grid-template-columns: repeat(2, 1fr);
.panel {
height: 50vh;
min-height: 80vh;
}
}
}

92
static/c_solutions/solutions.css
View File

@ -69,64 +69,92 @@ main {
/* Smartphones (hasta 767px) */
@media (max-width: 767px) {
main {
min-height: 100vh;
background-size: auto 15%;
place-items: start;
min-height: 80vh;
background-size: 65% auto;
border-radius: 15px;
padding: 1em; /* Añadido para espacio interno */
}
.parent {
width: 100% !important;
padding: 1em; /* Reducido el padding para móviles */
width: 100%;
padding: 1em;
display: grid;
grid-template-columns: 1fr; /* Solo una columna en móviles */
grid-template-rows: repeat(6, minmax(120px, 1fr)); /* Altura mínima garantizada */
gap: 1em; /* Espacio reducido para móviles */
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(120px, auto); /* Renglones automáticos */
gap: 1em;
}
/* Asegurar que todos los divs sean visibles */
.parent div {
min-height: 120px; /* Altura mínima garantizada */
width: 100% !important;
min-height: 120px;
width: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border: 2px solid rgba(255, 255, 255, 0.5); /* Borde más visible */
border: 2px solid rgba(255, 255, 255, 0.5);
}
/* Posicionamiento específico para móviles */
.ii-i {
grid-row: 4; /* Posición ajustada */
}
.ii-ii {
grid-row: 5; /* Posición ajustada */
grid-column: 1; /* Reset para móviles */
}
.ii-ii {
grid-column: 1 / span 2; /* Ocupa las dos columnas */
grid-row: 3; /* Está en la tercera fila */
justify-self: center; /* Centrado dentro de las dos columnas */
width: 60%;
margin-top: 1em;
}
}
/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
.parent {
width: 100% !important;
height: 50vw;
gap: 2em;
main {
place-items: start;
min-height: 50vh;
background-size: auto 45%;
border-radius: 15px;
padding: 1em;
}
main {
background-size: 50% auto; /* 30% del ancho del contenedor */
height: 50vh;
.parent {
width: 100%;
padding: 1em;
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columnas */
grid-template-rows: repeat(2, minmax(120px, auto)); /* 2 filas */
gap: 1em;
}
.parent div {
min-height: 120px;
width: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border: 2px solid rgba(255, 255, 255, 0.5);
}
/* Ajustes específicos de posición */
/* Primeros tres divs no necesitan ajuste, fluyen normalmente */
.ii-i {
grid-column: 1; /* Columna 1 */
grid-row: 2; /* Fila 2 */
}
.ii-ii {
grid-column: 3; /* Columna 3 */
grid-row: 2; /* Fila 2 */
}
}
/* Laptops (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
.parent {
width: 100% !important;
height: 65vw;
@ -134,8 +162,8 @@ main {
}
main {
background-size: 65% auto; /* 30% del ancho del contenedor */
height: 65vh;
background-size: 50% auto; /* 30% del ancho del contenedor */
height: 80vh;
}
}

28
static/g_login/see_hide_pswd.css Normal file
View File

@ -0,0 +1,28 @@
.password-wrapper {
position: relative;
}
.password-wrapper input {
width: 100%;
padding: 8px 35px 8px 10px;
}
.password-toggle {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
background: none;
border: none;
color: #666;
}
input::-ms-reveal,
input::-ms-clear {
display: none;
}
input::-webkit-credentials-auto-fill-button {
display: none !important;
}

12
static/g_login/see_hide_pswd.js Normal file
View File

@ -0,0 +1,12 @@
const toggleBtn = document.getElementById('toggleBtn');
const passwordField = document.getElementById('password');
toggleBtn.addEventListener('click', () => {
if (passwordField.type === 'password') {
passwordField.type = 'text';
toggleBtn.innerHTML = '<i class="bi bi-eye-slash"></i>';
} else {
passwordField.type = 'password';
toggleBtn.innerHTML = '<i class="bi bi-eye"></i>';
}
});

118
static/h_tmp_user/a_home/get_contact_data.js
View File

@ -30,19 +30,111 @@ async function get_contact_data(btn) {
estatus: data[11] ?? "Sin Estatus"
};
modalBody.innerHTML = `
<p><b><i class="bi bi-calendar4-week"></i></b> ${contact.fecha} - ${contact.fecha_hora}</p>
<p><b><i class="bi bi-person-fill"></i></b> ${contact.nombre} ${contact.apellido}</p>
<p><b><i class="bi bi-envelope-at-fill"></i></b> ${contact.correo}</p>
<p><b><i class="bi bi-pin-map-fill"></i></b> ${contact.estado}</p>
<p><b><i class="bi bi-telephone-fill"></i></b> ${contact.telefono}</p>
<p><b><i class="bi bi-people-fill"></i></b> ${contact.tamano_empresa}</p>
<p><b><i class="bi bi-person-vcard"></i></b> ${contact.rol_contacto}</p>
<p><b><i class="bi bi-shop"></i></b> ${contact.tipo_industria}</p>
<p><b><i class="bi bi-wrench-adjustable"></i></b> ${contact.estatus}</p>
<p><b><i class="bi bi-file-earmark-font-fill"></i></b> ${contact.comentarios}</p>
`;
// modalBody.innerHTML = `
// <p><b><i class="bi bi-calendar4-week"></i></b> ${contact.fecha} - ${contact.fecha_hora}</p>
// <p><b><i class="bi bi-person-fill"></i></b> ${contact.nombre} ${contact.apellido}</p>
// <p><b><i class="bi bi-envelope-at-fill"></i></b> ${contact.correo}</p>
// <p><b><i class="bi bi-pin-map-fill"></i></b> ${contact.estado}</p>
// <p><b><i class="bi bi-telephone-fill"></i></b> ${contact.telefono}</p>
// <p><b><i class="bi bi-people-fill"></i></b> ${contact.tamano_empresa}</p>
// <p><b><i class="bi bi-person-vcard"></i></b> ${contact.rol_contacto}</p>
// <p><b><i class="bi bi-shop"></i></b> ${contact.tipo_industria}</p>
// <p><b><i class="bi bi-wrench-adjustable"></i></b> ${contact.estatus}</p>
// <p><b><i class="bi bi-file-earmark-font-fill"></i></b> ${contact.comentarios}</p>
// `;
modalBody.innerHTML = `
<div class="row">
<div class="col-md-6">
<div class="modal-contact-item">
<div class="modal-contact-icon"><i class="bi bi-calendar4-week"></i></div>
<div class="modal-contact-content">
<span class="modal-contact-label">Fecha y Hora</span>
<span class="modal-contact-value">${contact.fecha} - ${contact.fecha_hora}</span>
</div>
</div>
<div class="modal-contact-item">
<div class="modal-contact-icon"><i class="bi bi-person-fill"></i></div>
<div class="modal-contact-content">
<span class="modal-contact-label">Nombre</span>
<span class="modal-contact-value">${contact.nombre} ${contact.apellido}</span>
</div>
</div>
<div class="modal-contact-item">
<div class="modal-contact-icon"><i class="bi bi-envelope-at-fill"></i></div>
<div class="modal-contact-content">
<span class="modal-contact-label">Correo</span>
<span class="modal-contact-value">
<a href="mailto:${contact.correo}">${contact.correo}</a>
</span>
</div>
</div>
<div class="modal-contact-item">
<div class="modal-contact-icon"><i class="bi bi-telephone-fill"></i></div>
<div class="modal-contact-content">
<span class="modal-contact-label">Teléfono</span>
<span class="modal-contact-value">
<a href="tel:${contact.telefono}">${contact.telefono}</a>
</span>
</div>
</div>
<div class="modal-contact-item">
<div class="modal-contact-icon"><i class="bi bi-pin-map-fill"></i></div>
<div class="modal-contact-content">
<span class="modal-contact-label">Estado</span>
<span class="modal-contact-value">${contact.estado}</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="modal-contact-item">
<div class="modal-contact-icon"><i class="bi bi-people-fill"></i></div>
<div class="modal-contact-content">
<span class="modal-contact-label">Tamaño de Empresa</span>
<span class="modal-contact-value">${contact.tamano_empresa}</span>
</div>
</div>
<div class="modal-contact-item">
<div class="modal-contact-icon"><i class="bi bi-person-vcard"></i></div>
<div class="modal-contact-content">
<span class="modal-contact-label">Rol de Contacto</span>
<span class="modal-contact-value">${contact.rol_contacto}</span>
</div>
</div>
<div class="modal-contact-item">
<div class="modal-contact-icon"><i class="bi bi-shop"></i></div>
<div class="modal-contact-content">
<span class="modal-contact-label">Industria</span>
<span class="modal-contact-value">${contact.tipo_industria}</span>
</div>
</div>
<div class="modal-contact-item">
<div class="modal-contact-icon"><i class="bi bi-wrench-adjustable"></i></div>
<div class="modal-contact-content">
<span class="modal-contact-label">Estatus</span>
<span class="modal-contact-value badge bg-info text-dark">${contact.estatus}</span>
</div>
</div>
</div>
</div>
<div class="comments-container mt-3">
<div class="modal-contact-item">
<div class="modal-contact-icon"><i class="bi bi-file-earmark-font-fill"></i></div>
<div class="modal-contact-content">
<span class="modal-contact-label">Comentarios</span>
<span class="modal-contact-value">${contact.comentarios || 'Sin comentarios'}</span>
</div>
</div>
</div>
`;
} catch (error) {
console.error('Error al obtener datos:', error);
}

21
static/h_tmp_user/change_pswd.js
View File

@ -9,7 +9,8 @@ document.addEventListener('DOMContentLoaded', function () {
lengt10: (pwd) => pwd.length >= 10,
atl1num: (pwd) => /\d/.test(pwd),
atl1mayusc: (pwd) => /[A-Z]/.test(pwd),
atl1chrspe: (pwd) => /[!"#$%&\/()=?¡]/.test(pwd)
// atl1chrspe: (pwd) => /[!@"#$%&\/()=?¡]/.test(pwd)
atl1chrspe: (pwd) => /[!@#$%&*()_+\-=[\]{};':"\\|,.<>\/?¡¿]/.test(pwd)
};
newPswdInput.addEventListener('input', function () {
@ -27,4 +28,22 @@ document.addEventListener('DOMContentLoaded', function () {
simpleNotification("Error", "La contraseña no cumple con todos los requisitos indicados.", "error");
}
});
});
// ver contraseñas
const toggleButtons = document.querySelectorAll('.password-toggle');
toggleButtons.forEach(btn => {
btn.addEventListener('click', () => {
const passwordInput = btn.previousElementSibling;
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
btn.innerHTML = '<i class="bi bi-eye"></i>';
} else {
passwordInput.type = 'password';
btn.innerHTML = '<i class="bi bi-eye-slash"></i>';
}
});
});

10
templates/b_about-us/about-us.html
View File

@ -11,9 +11,9 @@
{% block body %}
<div class="expanding-panels">
<div class="expanding-panels" data-aos="zoom-in" data-aos-delay="0" data-aos-duration="800" data-aos-easing="ease-in-out">
<!-- Quiénes Somos -->
<div class="panel p1" data-aos="zoom-in" data-aos-delay="0" data-aos-duration="800" data-aos-easing="ease-in-out">
<div class="panel p1" >
<div class="panel-content">
<div class="panel-title">
<h3>¿Quiénes Somos?</h3>
@ -27,7 +27,7 @@
</div>
<!-- Misión -->
<div class="panel p2" data-aos="zoom-in" data-aos-delay="250" data-aos-duration="800" data-aos-easing="ease-in-out">
<div class="panel p2">
<div class="panel-content">
<div class="panel-title">
<h3>Misión</h3>
@ -40,7 +40,7 @@
</div>
<!-- Visión -->
<div class="panel p3" data-aos="zoom-in" data-aos-delay="450" data-aos-duration="800" data-aos-easing="ease-in-out">
<div class="panel p3">
<div class="panel-content">
<div class="panel-title">
<h3>Visión</h3>
@ -53,7 +53,7 @@
</div>
<!-- Valores -->
<div class="panel p4" data-aos="zoom-in" data-aos-delay="650" data-aos-duration="800" data-aos-easing="ease-in-out">
<div class="panel p4">
<div class="panel-content">
<div class="panel-title">
<h3>Valores</h3>

10
templates/g_login/login.html
View File

@ -3,6 +3,7 @@
{% block css %}
<link rel="stylesheet" href="{{ url_for('static', filename='f_contact/form.css') }}">
<link rel="stylesheet" href="{{ url_for( 'static', filename='g_login/login.css' ) }}">
<link rel="stylesheet" href="{{ url_for( 'static', filename='g_login/see_hide_pswd.css' ) }}">
{% endblock css %}
{% block navbar %}
@ -34,8 +35,9 @@
</div>
<!-- {# password usuario #} -->
<div class="form-row">
<div class="form-row password-wrapper">
{{ form.password(class_="form-control", placeholder="L4_c0ntr4z3ñ4", autocomplete="on") }}
<button type="button" class="password-toggle" id="toggleBtn"><i class="bi bi-eye-slash"></i></button>
</div>
<button type="submit" class="btn btn-primary">
@ -49,17 +51,15 @@
</div>
{% endblock body %}
{% block js %}
<!-- {# if flash #} -->
{% include 'z_comps/if_flash.html' %}
<!-- {# aos script #} -->
{% include 'z_comps/aos_script.html' %}
<script src="{{ url_for('static', filename='g_login/see_hide_pswd.js') }}"></script>
{% endblock js %}

64
templates/h_tmp_usr/a_home.html
View File

@ -73,6 +73,68 @@
</div>
</div>
<style>
/* Estilos personalizados para el modal */
.modal-contact-item {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #eee;
}
.modal-contact-icon {
font-size: 1.2rem;
color: #0d6efd; /* Color azul de Bootstrap */
min-width: 30px;
text-align: center;
margin-right: 12px;
}
.modal-contact-content {
flex: 1;
}
.modal-contact-label {
font-weight: 600;
color: #555;
display: block;
margin-bottom: 2px;
}
.modal-contact-value {
color: #333;
word-break: break-word;
}
/* Estilo para el campo de comentarios */
.comments-container {
background-color: #f8f9fa;
border-radius: 5px;
padding: 12px;
margin-top: 15px;
}
.modal-contact-item {
transition: all 0.3s ease;
}
.modal-contact-item:hover {
background-color: #f8f9fa;
border-radius: 5px;
}
.modal-contact-icon {
transition: transform 0.2s ease;
}
.modal-contact-item:hover .modal-contact-icon {
transform: scale(1.1);
}
</style>
<!-- Modal -->
<div class="modal fade" id="modalContactData" tabindex="-1" aria-labelledby="modalContactDataLabel" aria-hidden="true">
<div class="modal-dialog">
@ -82,7 +144,7 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="modalBody">
...
<!-- {# contenido modal #} -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>

18
templates/h_tmp_usr/f_change_pswd.html
View File

@ -2,6 +2,7 @@
{% block css %}
<link rel="stylesheet" href="{{ url_for('static', filename='f_contact/form.css') }}">
<link rel="stylesheet" href="{{ url_for( 'static', filename='g_login/see_hide_pswd.css' ) }}">
{% endblock css %}
{% block body %}
@ -23,19 +24,22 @@
<form method="POST" action="{{ url_for('change_pswd') }}" class="login-form">
{{ form.hidden_tag() }}
<div class="form-row">
{{ form.cur_pswd(class_="form-control", placeholder="Contraseña actual", id="cur_pswd", maxlength="60") }}
<div class="form-row password-wrapper">
{{ form.cur_pswd(class_="form-control", placeholder="Contraseña actual", id="cur_pswd", maxlength="60", autocomplete="new-password", type="password") }}
<button type="button" class="password-toggle"><i class="bi bi-eye-slash"></i></button>
</div>
<div class="form-row">
{{ form.new_pswd(class_="form-control", placeholder="Nueva Contraseña", id="new_pswd", maxlength="60") }}
<div class="form-row password-wrapper">
{{ form.new_pswd(class_="form-control", placeholder="Nueva Contraseña", id="new_pswd", maxlength="60", autocomplete="new-password", type="password") }}
<button type="button" class="password-toggle"><i class="bi bi-eye-slash"></i></button>
</div>
<ul style="list-style-type:none;">
<li><span id="lengt10">❌</span> Al menos 10 caracteres.</li>
<li><span id="atl1num">❌</span> Al menos un número.</li>
<li><span id="atl1mayusc">❌</span> Al menos una mayúscula.</li>
<li><span id="atl1chrspe">❌</span> Al menos un caracter especial: !"#$%&/()=?¡".</li>
<li><span id="atl1chrspe">❌</span> Al menos un caracter especial: <b><i>/[!@#$%&*()_+\-=[\]{};':"\\|,.<>\/?¡¿]/</i></b>.</li>
</ul>
<button type="submit" class="btn btn-primary">
@ -59,4 +63,6 @@
{% include 'z_comps/if_flash.html' %}
{% endblock js %}