Iconos mejorados y aviso de privacidad

This commit is contained in:
VictorMongeM 2025-06-06 14:07:51 -06:00
parent f72fc61066
commit 2270b949da
13 changed files with 8319 additions and 16 deletions

426
css/formularios.css Normal file
View File

@ -0,0 +1,426 @@
/* ==================== Fluent 2 Design System ==================== */
/* Variables CSS para consistencia */
:root {
--fluent-primary: #6A1B9A;
--fluent-primary-light: #8E24AA;
--fluent-primary-dark: #4A148C;
--fluent-secondary: #323130;
--fluent-background: #faf9f8;
--fluent-surface: #ffffff;
--fluent-border: #e1dfdd;
--fluent-border-focus: #6A1B9A;
--fluent-text-primary: #323130;
--fluent-text-secondary: #605e5c;
--fluent-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0px 2px rgba(0, 0, 0, 0.12);
--fluent-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0px 4px rgba(0, 0, 0, 0.12);
--fluent-radius-small: 4px;
--fluent-radius-medium: 8px;
--fluent-radius-large: 12px;
}
/* Reset y configuración base */
* {
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--fluent-background);
margin: 0;
line-height: 1.5;
color: var(--fluent-text-primary);
}
/* ==================== Contenedor principal ==================== */
.card {
background-color: var(--fluent-surface);
border-radius: var(--fluent-radius-large);
box-shadow: var(--fluent-shadow-medium);
border: 1px solid var(--fluent-border);
max-width: 800px;
margin: 0 auto;
overflow: hidden;
transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 0px 8px rgba(0, 0, 0, 0.14);
transform: translateY(-1px);
}
.card-body {
padding: 32px !important;
margin: 0 !important;
}
/* ==================== Formularios ==================== */
form {
margin: 0 !important;
}
h3, h4 {
color: var(--fluent-text-primary);
font-weight: 600;
margin-bottom: 24px;
margin-top: 32px;
}
h3 {
font-size: 1.75rem;
margin-top: 0;
}
h4 {
font-size: 1.25rem;
border-bottom: 2px solid var(--fluent-primary);
padding-bottom: 8px;
}
/* ==================== Labels ==================== */
.form-label {
font-weight: 500;
color: var(--fluent-text-primary);
margin-bottom: 8px !important;
margin-top: 20px !important;
display: block;
font-size: 0.875rem;
}
/* ==================== Inputs y Selects ==================== */
.form-control,
.form-select {
border: 2px solid var(--fluent-border) !important;
border-radius: var(--fluent-radius-small) !important;
padding: 12px 16px;
font-size: 0.875rem;
background-color: var(--fluent-surface);
color: var(--fluent-text-primary);
transition: all 0.2s ease;
width: 100%;
margin-bottom: 4px;
}
.form-control:focus,
.form-select:focus {
border-color: var(--fluent-border-focus) !important;
box-shadow: 0 0 0 2px rgba(106, 27, 154, 0.2) !important;
outline: none;
background-color: var(--fluent-surface);
}
.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
border-color: var(--fluent-primary-light) !important;
}
.form-control::placeholder {
color: var(--fluent-text-secondary);
opacity: 1;
}
.form-control:disabled,
.form-select:disabled {
background-color: #f3f2f1;
border-color: #e1dfdd !important;
color: var(--fluent-text-secondary);
cursor: not-allowed;
}
/* ==================== Botones ==================== */
.btn {
border-radius: var(--fluent-radius-small) !important;
font-weight: 500;
font-size: 0.875rem;
padding: 12px 24px;
transition: all 0.2s ease;
cursor: pointer;
border: 2px solid transparent !important;
text-align: center;
display: inline-block;
text-decoration: none;
}
.btn.w-100 {
width: 100%;
margin: 24px 0 !important;
}
/* Botón primario */
.btn-primary,
.btn[style*="background-color: #35245b"] {
background-color: var(--fluent-primary) !important;
color: white !important;
border-color: var(--fluent-primary) !important;
}
.btn-primary:hover,
.btn[style*="background-color: #35245b"]:hover {
background-color: var(--fluent-primary-light) !important;
border-color: var(--fluent-primary-light) !important;
transform: translateY(-1px);
box-shadow: var(--fluent-shadow-small);
}
.btn-primary:active,
.btn[style*="background-color: #35245b"]:active {
background-color: var(--fluent-primary-dark) !important;
border-color: var(--fluent-primary-dark) !important;
transform: translateY(0);
}
/* Botón secundario */
.bg-primary-subtle {
background-color: #f3e5f5 !important;
color: var(--fluent-primary) !important;
border-color: var(--fluent-primary) !important;
}
.bg-primary-subtle:hover {
background-color: #e1bee7 !important;
transform: translateY(-1px);
box-shadow: var(--fluent-shadow-small);
}
.btn:disabled {
background-color: #f3f2f1 !important;
color: var(--fluent-text-secondary) !important;
border-color: #e1dfdd !important;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ==================== Checkboxes ==================== */
.form-check {
margin: 24px 0;
padding-left: 0;
}
.form-check-input {
width: 18px;
height: 18px;
margin-right: 12px;
border: 2px solid var(--fluent-border);
border-radius: 3px;
background-color: var(--fluent-surface);
transition: all 0.2s ease;
cursor: pointer;
vertical-align: top;
margin-top: 2px;
}
.form-check-input:checked {
background-color: var(--fluent-primary);
border-color: var(--fluent-primary);
}
.form-check-input:focus {
box-shadow: 0 0 0 2px rgba(106, 27, 154, 0.2);
outline: none;
}
.form-check-label {
cursor: pointer;
color: var(--fluent-text-primary);
line-height: 1.5;
font-size: 0.875rem;
display: inline-block;
margin-left: 8px;
}
.form-check-label a {
color: var(--fluent-primary);
text-decoration: none;
}
.form-check-label a:hover {
text-decoration: underline;
}
/* ==================== Datalist ==================== */
datalist {
background-color: var(--fluent-surface);
border: 1px solid var(--fluent-border);
border-radius: var(--fluent-radius-small);
box-shadow: var(--fluent-shadow-small);
}
/* ==================== Header con logo ==================== */
div[style*="background-color: #211b52"] {
background: linear-gradient(135deg, #211b52 0%, #35245b 100%) !important;
padding: 16px 20px;
box-shadow: var(--fluent-shadow-small);
margin-bottom: 32px;
}
div[style*="background-color: #211b52"] img {
height: 4rem !important;
margin: 0 !important;
}
/* ==================== Mensaje de error ==================== */
#mensaje-error {
margin-top: 16px;
padding: 12px 16px;
border-radius: var(--fluent-radius-small);
background-color: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
font-size: 0.875rem;
display: none;
}
#mensaje-error.show {
display: block;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==================== Responsividad ==================== */
@media (max-width: 768px) {
body {
padding: 10px;
}
.card {
margin: 0 auto;
border-radius: var(--fluent-radius-medium);
}
.card-body {
padding: 24px 20px !important;
}
form {
margin: 0 !important;
}
h3 {
font-size: 1.5rem;
text-align: center;
}
h4 {
font-size: 1.125rem;
}
.form-control,
.form-select {
padding: 14px 16px;
font-size: 1rem;
}
.btn {
padding: 14px 24px;
font-size: 1rem;
}
div[style*="background-color: #211b52"] {
text-align: center;
margin-bottom: 24px;
}
div[style*="background-color: #211b52"] img {
height: 3.5rem !important;
}
}
@media (max-width: 480px) {
.card-body {
padding: 20px 16px !important;
}
.form-control,
.form-select,
.btn {
font-size: 1rem;
}
h3 {
font-size: 1.375rem;
}
h4 {
font-size: 1rem;
}
}
/* ==================== Utilidades ==================== */
.border-dark-subtle {
/* Las clases border se manejan en los selectores específicos */
}
.rounded,
.rounded-3 {
/* Las clases rounded se manejan en los selectores específicos */
}
.w-100 {
width: 100% !important;
}
/* ==================== Animaciones suaves ==================== */
* {
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* ==================== Estados de focus para accesibilidad ==================== */
.form-control:focus-visible,
.form-select:focus-visible,
.btn:focus-visible,
.form-check-input:focus-visible {
outline: 2px solid var(--fluent-primary);
outline-offset: 2px;
}
/* ==================== Mejoras de UX ==================== */
.form-control:invalid:not(:focus):not(:placeholder-shown) {
border-color: #dc3545 !important;
background-color: #fef2f2;
}
.form-select:invalid:not(:focus) {
border-color: #dc3545 !important;
background-color: #fef2f2;
}
/* Loading state para botones */
.btn.loading {
position: relative;
color: transparent !important;
}
.btn.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
color: white;
}
@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}

Binary file not shown.

1609
views/assets/fontawesome/css/brands.css vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

19
views/assets/fontawesome/css/solid.css vendored Normal file
View File

@ -0,0 +1,19 @@
/*!
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
:root, :host {
--fa-style-family-classic: 'Font Awesome 6 Free';
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: block;
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
.fas,
.fa-solid {
font-weight: 900; }

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -35,6 +35,10 @@ if(isset($resultado['estado'])){
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/inicio.css">
<link rel="stylesheet" href="../font/bootstrap-icons.css">
<link rel="stylesheet" href="assets/fontawesome/css/fontawesome.css">
<link rel="stylesheet" href="assets/fontawesome/css/brands.css">
<link rel="stylesheet" href="assets/fontawesome/css/solid.css">
<title>Control de candidatos</title>
</head>
<body>
@ -69,9 +73,9 @@ if(isset($resultado['estado'])){
<table class="table table-hover table-bordered border-dark-subtle shadow-sm">
<thead>
<tr class="table-dark">
<th>Nombre</th>
<th>Entrada</th>
<th>Acciones</th>
<th><i class="fa-solid fa-users"></i> Nombre</th>
<th><i class="fa-solid fa-user-clock"></i> Entrada</th>
<th><i class="fa-solid fa-user-gear"></i> Acciones</th>
</tr>
</thead>
<tbody class="table-group-divider">
@ -81,8 +85,8 @@ if(isset($resultado['estado'])){
<td><?php echo $candidato['nombre_completo'] ?></td>
<td><?php echo $candidato['fecha_entrada'] ?></td>
<td>
<a class="btn border rounded-3 shadow" role="button" style="background-color: #35245b;color: white;" href="formulario-datos-candidato.php?id_candidato=<?php echo $candidato['id_candidato']?>" target="_blank"><i class="bi bi-file-earmark-text"></i> Abrir formulario</a>
<button class="boton-eliminar btn border rounded-3 shadow" role="button" style="background-color: #35245b;color: white;" data-id-candidato="<?php echo $candidato['id_candidato'] ?>"><i class="bi bi-trash"></i> Eliminar</button>
<a class="btn border rounded-3 shadow" role="button" style="background-color: #35245b;color: white;" href="formulario-datos-candidato.php?id_candidato=<?php echo $candidato['id_candidato']?>" target="_blank"><i class="fa-solid fa-share-from-square"></i> Abrir formulario</a>
<button class="boton-eliminar btn border rounded-3 shadow" role="button" style="background-color: #35245b;color: white;" data-id-candidato="<?php echo $candidato['id_candidato'] ?>"><i class="fa-solid fa-user-xmark"></i> Eliminar</button>
</td>
<tr>
<?php endforeach; ?>

View File

@ -30,6 +30,10 @@ if (isset($resultado['estado'])){
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/inicio.css">
<link rel="stylesheet" href="../font/bootstrap-icons.css">
<link rel="stylesheet" href="assets/fontawesome/css/fontawesome.css">
<link rel="stylesheet" href="assets/fontawesome/css/brands.css">
<link rel="stylesheet" href="assets/fontawesome/css/solid.css">
<title>Control de usuarios</title>
</head>
<body>
@ -58,7 +62,7 @@ if (isset($resultado['estado'])){
<h1 class="title" style="margin: 2% 1%">Control de usuarios</h1>
<a class="btn border rounded-3 shadow" style="background-color: #35245b;color: white;margin: 1%" href="crearUsuario.php"><i class="bi bi-person-plus"></i> Crear usuario</a>
<a class="btn border rounded-3 shadow" style="background-color: #35245b;color: white;margin: 1%" href="crearUsuario.php"><i class="fa-solid fa-user-plus"></i> Crear usuario</a>
<!-- ------------------------------ div qué contiene la tabla ------------------------------------------ -->
<div style="margin: 1%">
@ -66,18 +70,18 @@ if (isset($resultado['estado'])){
<table class="table table-hover table-bordered border-dark-subtle shadow-sm">
<thead>
<tr class="table-dark">
<th>Nombre</th>
<th>Acciones</th>
<th><i class="fa-solid fa-users"></i> Nombre</th>
<th><i class="fa-solid fa-user-gear"></i> Acciones</th>
</tr>
</thead>
<tbody class="table-group-divider">
<?php if ($hayUsuarios): ?>
<?php foreach ($resultado as $usuario): ?>
<tr>
<td><?php echo $usuario['usuario'] ?></td>
<td><i class="fa-solid fa-user" style="color: #c0c0c0;"></i> <?php echo $usuario['usuario'] ?></td>
<td>
<a class="btn border rounded-3 shadow" role="button" style="background-color: #35245b;color: white;" href="modificar-usuario.php?id=<?php echo $usuario['id'] ?>&usuario=<?php echo urlencode($usuario['usuario']) ?>"><i class="bi bi-pencil-square"></i> Modificar</a>
<button class="boton-eliminar btn border rounded-3 shadow" role="button" style="background-color: #35245b;color: white;" data-id-usuario="<?php echo $usuario['id'] ?>" data-nombre-usuario="<?php echo $usuario['usuario'] ?>"><i class="bi bi-trash"></i> Eliminar</button>
<a class="btn border rounded-3 shadow" role="button" style="background-color: #35245b;color: white;" href="modificar-usuario.php?id=<?php echo $usuario['id'] ?>&usuario=<?php echo urlencode($usuario['usuario']) ?>"><i class="fa-solid fa-user-pen"></i> Modificar</a>
<button class="boton-eliminar btn border rounded-3 shadow" role="button" style="background-color: #35245b;color: white;" data-id-usuario="<?php echo $usuario['id'] ?>" data-nombre-usuario="<?php echo $usuario['usuario'] ?>"><i class="fa-solid fa-user-xmark"></i> Eliminar</button>
</td>
<tr>
<?php endforeach; ?>

View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Formulario de registro</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/formularios.css">
</head>
<body>
@ -60,7 +60,6 @@
<div id="mensaje-error"></div>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../js/formulario-candidato.js"></script>
</body>

View File

@ -15,7 +15,7 @@ if($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id_candidato'])) {
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Formulario</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/formularios.css">
</head>
<body>
@ -88,7 +88,7 @@ if($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id_candidato'])) {
<br>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="consentimiento_pub" value="1" checked>
<label class="form-check-label" for="consentimiento_pub">Consiento que mis datos personales sean tratados de conformidad con los términos y condiciones informados en el presente <a href="#">aviso de privacidad</a>.</label>
<label class="form-check-label" for="consentimiento_pub">Consiento que mis datos personales sean tratados de conformidad con los términos y condiciones informados en el presente <a href="../src/documentos/Aviso-de-Privacidad-LANIA-2025-1.pdf">aviso de privacidad</a>.</label>
</div>
<input class="btn border rounded-3 border border-primary-subtle btn-primary w-100" type="submit" style="margin: 15px 0px;" value="Enviar" name="btnEnviar">
@ -97,7 +97,6 @@ if($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id_candidato'])) {
</div>
</div>
<script src="../js/formulario-datos-candidato.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>