diff --git a/controllers/CandidatoController.php b/controllers/CandidatoController.php index fb8c357..3be747d 100644 --- a/controllers/CandidatoController.php +++ b/controllers/CandidatoController.php @@ -96,6 +96,7 @@ class CandidatoController { return false; } } + } // Instanciar el modelo al cargar el controlador diff --git a/controllers/ControlCandidatos.php b/controllers/ControlCandidatos.php new file mode 100644 index 0000000..ac58112 --- /dev/null +++ b/controllers/ControlCandidatos.php @@ -0,0 +1,33 @@ +candidatoModel = new CandidatoModel(); + } + + public function obtenerCandidatosSinFechaSalida(){ + $resultado = $this->candidatoModel->obtenerCandidatosSinFechaSalida(); + if( isset($resultado['estado'])){ + return $resultado; + } else { + // iterar sobre $resultado y concatenar nombre completo, la fecha dejarla como esta + $candidatos = []; + foreach ($resultado as $candidato) { + $nombreCompleto = "{$candidato['nombres']} {$candidato['primer_apellido']} {$candidato['segundo_apellido']}"; + $candidatos[] = [ + 'id_candidato' => $candidato['id_candidato'], + 'nombre_completo' => $nombreCompleto, + 'fecha_entrada' => $candidato['fecha_entrada'] + ]; + } + return $candidatos; + } + } +} + +?> diff --git a/js/control-candidatos.js b/js/control-candidatos.js new file mode 100644 index 0000000..e45a3e6 --- /dev/null +++ b/js/control-candidatos.js @@ -0,0 +1,160 @@ +// SIDEBAR DROPDOWN +const allDropdown = document.querySelectorAll('#sidebar .side-dropdown'); +const sidebar = document.getElementById('sidebar'); + + +allDropdown.forEach(item=> { + const a = item.parentElement.querySelector('a:first-child'); + a.addEventListener('click', function (e) { + e.preventDefault(); + + if(!this.classList.contains('active')) { + allDropdown.forEach(i=> { + const aLink = i.parentElement.querySelector('a:first-child'); + + aLink.classList.remove('active'); + i.classList.remove('show'); + }) + } + + this.classList.toggle('active'); + item.classList.toggle('show'); + }) +}) + + + + + +// SIDEBAR COLLAPSE +const toggleSidebar = document.querySelector('nav .toggle-sidebar'); +const allSideDivider = document.querySelectorAll('#sidebar .divider'); + +if(sidebar.classList.contains('hide')) { + allSideDivider.forEach(item=> { + item.textContent = '-' + }) + allDropdown.forEach(item=> { + const a = item.parentElement.querySelector('a:first-child'); + a.classList.remove('active'); + item.classList.remove('show'); + }) +} else { + allSideDivider.forEach(item=> { + item.textContent = item.dataset.text; + }) +} + +toggleSidebar.addEventListener('click', function () { + sidebar.classList.toggle('hide'); + + if(sidebar.classList.contains('hide')) { + allSideDivider.forEach(item=> { + item.textContent = '-' + }) + + allDropdown.forEach(item=> { + const a = item.parentElement.querySelector('a:first-child'); + a.classList.remove('active'); + item.classList.remove('show'); + }) + } else { + allSideDivider.forEach(item=> { + item.textContent = item.dataset.text; + }) + } +}) + + + + +sidebar.addEventListener('mouseleave', function () { + if(this.classList.contains('hide')) { + allDropdown.forEach(item=> { + const a = item.parentElement.querySelector('a:first-child'); + a.classList.remove('active'); + item.classList.remove('show'); + }) + allSideDivider.forEach(item=> { + item.textContent = '-' + }) + } +}) + + + +sidebar.addEventListener('mouseenter', function () { + if(this.classList.contains('hide')) { + allDropdown.forEach(item=> { + const a = item.parentElement.querySelector('a:first-child'); + a.classList.remove('active'); + item.classList.remove('show'); + }) + allSideDivider.forEach(item=> { + item.textContent = item.dataset.text; + }) + } +}) + + + + +// PROFILE DROPDOWN +const profile = document.querySelector('nav .profile'); +const imgProfile = profile.querySelector('img'); +const dropdownProfile = profile.querySelector('.profile-link'); + +imgProfile.addEventListener('click', function () { + dropdownProfile.classList.toggle('show'); +}) + + + + +// MENU +const allMenu = document.querySelectorAll('main .content-data .head .menu'); + +allMenu.forEach(item=> { + const icon = item.querySelector('.icon'); + const menuLink = item.querySelector('.menu-link'); + + icon.addEventListener('click', function () { + menuLink.classList.toggle('show'); + }) +}) + + + +window.addEventListener('click', function (e) { + if(e.target !== imgProfile) { + if(e.target !== dropdownProfile) { + if(dropdownProfile.classList.contains('show')) { + dropdownProfile.classList.remove('show'); + } + } + } + + allMenu.forEach(item=> { + const icon = item.querySelector('.icon'); + const menuLink = item.querySelector('.menu-link'); + + if(e.target !== icon) { + if(e.target !== menuLink) { + if (menuLink.classList.contains('show')) { + menuLink.classList.remove('show') + } + } + } + }) +}) + + + + + +// // PROGRESSBAR +// const allProgress = document.querySelectorAll('main .card .progress'); +// +// allProgress.forEach(item=> { +// item.style.setProperty('--value', item.dataset.value) +// }) \ No newline at end of file diff --git a/models/CandidatoModel.php b/models/CandidatoModel.php index 371a994..cc0d696 100644 --- a/models/CandidatoModel.php +++ b/models/CandidatoModel.php @@ -311,6 +311,31 @@ class CandidatoModel { return $info; } + /** + * Obtiene información de los candidatos que no han llenado el segundo formulario + * @return array + */ + public function obtenerCandidatosSinFechaSalida(){ + $sql = "SELECT id_candidato, nombres, primer_apellido, segundo_apellido, fecha_entrada FROM lania_cc.candidato WHERE fecha_salida IS NULL"; + try { + $result = $this->conn->query($sql); + } catch (Exception $e) { + return [ + "estado" => "error", + "mensaje" => $e->getMessage() + ]; + } + // Si no hay registros pendientes + if($result->num_rows == 0){ + return [ + "estado" => "exitoso", + "mensaje" => "No hay registros pendientes" + ]; + } else { + return $result->fetch_all(MYSQLI_ASSOC); + } + } + } ?> \ No newline at end of file diff --git a/models/CatalogosModel.php b/models/CatalogosModel.php index e717081..728fefe 100644 --- a/models/CatalogosModel.php +++ b/models/CatalogosModel.php @@ -99,7 +99,7 @@ class Catalogos{ * @return array */ public function obtenerRangosEdad(){ - $sql = "SELECT id_rango_edad, descripcion FROM rango_edad"; + $sql = "SELECT id_rango_edad, descripcion FROM rango_edad ORDER BY id_rango_edad"; $result = $this->conn->query($sql); $rangos = []; diff --git a/views/Main limpio.html b/views/Main limpio.html new file mode 100644 index 0000000..541430b --- /dev/null +++ b/views/Main limpio.html @@ -0,0 +1,64 @@ + + + + + + + + AdminSite + + + + + + + + +
+ +
+

Dashboard

+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/views/control-candidatos.php b/views/control-candidatos.php new file mode 100644 index 0000000..bd26f0e --- /dev/null +++ b/views/control-candidatos.php @@ -0,0 +1,114 @@ +obtenerCandidatosSinFechaSalida(); + +if(isset($resultado['estado'])){ + $hayCandidatos = false; + if($resultado['estado'] == 'error'){ + // Enviar un console.error con $resultado['mensaje'] + echo ""; + } else { + echo ""; + } +} else { + $hayCandidatos = true; +} + +?> + + + + + + + + + + Control + + + + + + + + +
+ +
+

Dashboard

+
+
+ + + + + + + + + + + + + + + + + + + + +
NombreFecha de entradaAcciones
+ Abrir formulario + Eliminar +
+
+
+
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/views/css/form.css b/views/css/form.css new file mode 100644 index 0000000..766879c --- /dev/null +++ b/views/css/form.css @@ -0,0 +1,517 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap'); + +* { + font-family: 'Open Sans', sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --grey: #F1F0F6; + --dark-grey: #8D8D8D; + --light: #fff; + --dark: #000; + --green: #81D43A; + --light-green: #E3FFCB; + --blue: #35245b; + --light-blue: #D0E4FF; + --dark-blue: #0c1b5e; + --red: #FC3B56; +} + +html { + overflow-x: hidden; +} + +body { + background: var(--grey); + overflow-x: hidden; +} + +a { + text-decoration: none; +} + +li { + list-style: none; +} + + + + + + + +/* SIDEBAR */ +#sidebar { + position: fixed; + max-width: 260px; + width: 100%; + background: var(--light); + top: 0; + left: 0; + height: 100%; + overflow-y: auto; + scrollbar-width: none; + transition: all .3s ease; + z-index: 200; +} +#sidebar.hide { + max-width: 60px; +} +#sidebar.hide:hover { + max-width: 260px; +} +#sidebar::-webkit-scrollbar { + display: none; +} +#sidebar .brand { + font-size: 24px; + display: flex; + align-items: center; + height: 64px; + font-weight: 700; + color: var(--blue); + position: sticky; + top: 0; + left: 0; + z-index: 100; + background: var(--light); + transition: all .3s ease; + padding: 0 6px; +} +#sidebar .icon { + min-width: 48px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 6px; +} +#sidebar .icon-right { + margin-left: auto; + transition: all .3s ease; +} +#sidebar .side-menu { + margin: 36px 0; + padding: 0 20px; + transition: all .3s ease; +} +#sidebar.hide .side-menu { + padding: 0 6px; +} +#sidebar.hide:hover .side-menu { + padding: 0 20px; +} +#sidebar .side-menu a { + display: flex; + align-items: center; + font-size: 14px; + color: var(--dark); + padding: 12px 16px 12px 0; + transition: all .3s ease; + border-radius: 10px; + margin: 4px 0; + white-space: nowrap; +} +#sidebar .side-menu > li > a:hover { + background: var(--grey); +} +#sidebar .side-menu > li > a.active .icon-right { + transform: rotateZ(90deg); +} +#sidebar .side-menu > li > a.active, +#sidebar .side-menu > li > a.active:hover { + background: var(--blue); + color: var(--light); +} +#sidebar .divider { + margin-top: 24px; + font-size: 12px; + text-transform: uppercase; + font-weight: 700; + color: var(--dark-grey); + transition: all .3s ease; + white-space: nowrap; +} +#sidebar.hide:hover .divider { + text-align: left; +} +#sidebar.hide .divider { + text-align: center; +} +#sidebar .side-dropdown { + padding-left: 54px; + max-height: 0; + overflow-y: hidden; + transition: all .15s ease; +} +#sidebar .side-dropdown.show { + max-height: 1000px; +} +#sidebar .side-dropdown a:hover { + color: var(--blue); +} +#sidebar .ads { + width: 100%; + padding: 20px; +} +#sidebar.hide .ads { + display: none; +} +#sidebar.hide:hover .ads { + display: block; +} +#sidebar .ads .wrapper { + background: var(--grey); + padding: 20px; + border-radius: 10px; +} +#sidebar .btn-upgrade { + font-size: 14px; + display: flex; + justify-content: center; + align-items: center; + padding: 12px 0; + color: var(--light); + background: var(--blue); + transition: all .3s ease; + border-radius: 5px; + font-weight: 600; + margin-bottom: 12px; +} +#sidebar .btn-upgrade:hover { + background: var(--dark-blue); +} +#sidebar .ads .wrapper p { + font-size: 12px; + color: var(--dark-grey); + text-align: center; +} +#sidebar .ads .wrapper p span { + font-weight: 700; +} +/* SIDEBAR */ + + + + + +/* CONTENT */ +#content { + position: relative; + width: calc(100% - 260px); + left: 260px; + transition: all .3s ease; +} +#sidebar.hide + #content { + width: calc(100% - 60px); + left: 60px; +} +/* NAVBAR */ +nav { + background: var(--light); + height: 64px; + padding: 0 20px; + display: flex; + align-items: center; + grid-gap: 28px; + position: sticky; + top: 0; + left: 0; + z-index: 100; +} +nav .toggle-sidebar { + font-size: 18px; + cursor: pointer; +} +nav form { + max-width: 400px; + width: 100%; + margin-right: auto; +} +nav .form-group { + position: relative; +} +nav .form-group input { + width: 100%; + background: var(--grey); + border-radius: 5px; + border: none; + outline: none; + padding: 10px 36px 10px 16px; + transition: all .3s ease; +} +nav .form-group input:focus { + box-shadow: 0 0 0 1px var(--blue), 0 0 0 4px var(--light-blue); +} +nav .form-group .icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 16px; + color: var(--dark-grey); +} +nav .nav-link { + position: relative; +} +nav .nav-link .icon { + font-size: 18px; + color: var(--dark); +} +nav .nav-link .badge { + position: absolute; + top: -12px; + right: -12px; + width: 20px; + height: 20px; + border-radius: 50%; + border: 2px solid var(--light); + background: var(--red); + display: flex; + justify-content: center; + align-items: center; + color: var(--light); + font-size: 10px; + font-weight: 700; +} +nav .divider { + width: 1px; + background: var(--grey); + height: 12px; + display: block; +} +nav .profile { + position: relative; +} +nav .profile img { + width: 36px; + height: 36px; + border-radius: 50%; + object-fit: cover; + cursor: pointer; +} +nav .profile .profile-link { + position: absolute; + top: calc(100% + 10px); + right: 0; + background: var(--light); + padding: 10px 0; + box-shadow: 4px 4px 16px rgba(0, 0, 0, .1); + border-radius: 10px; + width: 160px; + opacity: 0; + pointer-events: none; + transition: all .3s ease; +} +nav .profile .profile-link.show { + opacity: 1; + pointer-events: visible; + top: 100%; +} +nav .profile .profile-link a { + padding: 10px 16px; + display: flex; + grid-gap: 10px; + font-size: 14px; + color: var(--dark); + align-items: center; + transition: all .3s ease; +} +nav .profile .profile-link a:hover { + background: var(--grey); +} +/* NAVBAR */ + + + +/* MAIN */ +main { + width: 100%; + padding: 24px 20px 20px 20px; +} +main .title { + font-size: 28px; + font-weight: 600; + margin-bottom: 10px; +} +main .breadcrumbs { + display: flex; + grid-gap: 6px; +} +main .breadcrumbs li, +main .breadcrumbs li a { + font-size: 14px; +} +main .breadcrumbs li a { + color: var(--blue); +} +main .breadcrumbs li a.active, +main .breadcrumbs li.divider { + color: var(--dark-grey); + pointer-events: none; +} + +/* MAIN */ +/* CONTENT */ +@media screen and (max-width: 768px) { + #content { + position: relative; + width: calc(100% - 60px); + transition: all .3s ease; + } + nav .nav-link, + nav .divider { + display: none; + } +} + +#surveyForm { + margin-top: 36px; +} + +.welcome p { + color: #7f8c8d; + font-size: 18px; +} + +.form-group label { + display: block; + margin-bottom: 8px; + font-weight: 500; + color: #2c3e50; +} + +.rating { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 10px; +} +.rating-option { + display: flex; + flex-direction: column; + align-items: center; + width: 18%; +} +.rating-btn { + width: 50px; + height: 50px; + border-radius: 50%; + border: 2px solid #ddd; + background-color: white; + font-size: 18px; + font-weight: bold; + cursor: pointer; + transition: all 0.2s; +} +.rating-btn:hover { + border-color: #35245b; + color: #35245b; +} +.rating-btn.selected { + background-color: #35245b; + color: white; + border-color: #35245b; +} +.rating-label { + margin-top: 8px; + font-size: 12px; + text-align: center; + color: #7f8c8d; +} +.checkbox-group { + display: flex; + align-items: flex-start; + margin-top: 20px; +} +.checkbox-group input { + margin-right: 10px; + margin-top: 3px; +} +.checkbox-group label { + margin-bottom: 0; + font-size: 15px; + line-height: 1.4; +} + +.btn { + padding: 12px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + font-weight: 500; + font-size: 16px; + transition: background-color 0.3s; +} +.btn-primary { + background-color: #35245b; + color: white; +} +.btn-primary:hover { + background-color: #35245b; +} + +.form-actions { + display: flex; + justify-content: space-between; + margin-top: 30px; +} +.emoji { + font-size: 24px; + margin-bottom: 5px; +} + +.title2 { + margin-top: 36px; +} + +label { + display: block; + font-weight: bold; + margin-bottom: 8px; + } + + input[type="text"], input[type="number"], textarea, + select { + width: 100%; + padding: 10px; + border-radius: 8px; + border: 1px solid #ccc; + font-size: 16px; + transition: border-color 0.3s; + } + + input[type="text"]:focus, + select:focus { + border-color: #35245b; + outline: none; + } + + button { + background-color: #35245b; + color: white; + padding: 12px 20px; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s; + width: 100%; + } + + button:hover { + background-color: #432d74; + } + + .mensaje-error { + display: none; + background-color: #f8d7da; + color: #dc3545; + border: 1px solid #dc3545; + border-radius: 4px; + padding: 0.75rem; + margin-top: 1rem; + text-align: center; + animation: fadeIn 0.3s ease-in-out; + } diff --git a/views/css/inicio.css b/views/css/inicio.css new file mode 100644 index 0000000..85342ce --- /dev/null +++ b/views/css/inicio.css @@ -0,0 +1,581 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap'); + +* { + font-family: 'Open Sans', sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --grey: #F1F0F6; + --dark-grey: #8D8D8D; + --light: #fff; + --dark: #000; + --green: #81D43A; + --light-green: #E3FFCB; + --blue: #35245b; + --light-blue: #D0E4FF; + --dark-blue: #0c1b5e; + --red: #FC3B56; +} + +html { + overflow-x: hidden; +} + +body { + background: var(--grey); + overflow-x: hidden; +} + +a { + text-decoration: none; +} + +li { + list-style: none; +} + +/* SIDEBAR */ +#sidebar { + position: fixed; + max-width: 260px; + width: 100%; + background: var(--light); + top: 0; + left: 0; + height: 100%; + overflow-y: auto; + scrollbar-width: none; + transition: all .3s ease; + z-index: 200; +} +#sidebar.hide { + max-width: 60px; +} +#sidebar.hide:hover { + max-width: 260px; +} +#sidebar::-webkit-scrollbar { + display: none; +} +#sidebar .brand { + font-size: 24px; + display: flex; + align-items: center; + height: 64px; + font-weight: 700; + color: var(--blue); + position: sticky; + top: 0; + left: 0; + z-index: 100; + background: var(--light); + transition: all .3s ease; + padding: 0 6px; +} +#sidebar .icon { + min-width: 48px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 6px; +} +#sidebar .icon-right { + margin-left: auto; + transition: all .3s ease; +} +#sidebar .side-menu { + margin: 36px 0; + padding: 0 20px; + transition: all .3s ease; +} +#sidebar.hide .side-menu { + padding: 0 6px; +} +#sidebar.hide:hover .side-menu { + padding: 0 20px; +} +#sidebar .side-menu a { + display: flex; + align-items: center; + font-size: 14px; + color: var(--dark); + padding: 12px 16px 12px 0; + transition: all .3s ease; + border-radius: 10px; + margin: 4px 0; + white-space: nowrap; +} +#sidebar .side-menu > li > a:hover { + background: var(--grey); +} +#sidebar .side-menu > li > a.active .icon-right { + transform: rotateZ(90deg); +} +#sidebar .side-menu > li > a.active, +#sidebar .side-menu > li > a.active:hover { + background: var(--blue); + color: var(--light); +} +#sidebar .divider { + margin-top: 24px; + font-size: 12px; + text-transform: uppercase; + font-weight: 700; + color: var(--dark-grey); + transition: all .3s ease; + white-space: nowrap; +} +#sidebar.hide:hover .divider { + text-align: left; +} +#sidebar.hide .divider { + text-align: center; +} +#sidebar .side-dropdown { + padding-left: 54px; + max-height: 0; + overflow-y: hidden; + transition: all .15s ease; +} +#sidebar .side-dropdown.show { + max-height: 1000px; +} +#sidebar .side-dropdown a:hover { + color: var(--blue); +} +#sidebar .ads { + width: 100%; + padding: 20px; +} +#sidebar.hide .ads { + display: none; +} +#sidebar.hide:hover .ads { + display: block; +} +#sidebar .ads .wrapper { + background: var(--grey); + padding: 20px; + border-radius: 10px; +} +#sidebar .btn-upgrade { + font-size: 14px; + display: flex; + justify-content: center; + align-items: center; + padding: 12px 0; + color: var(--light); + background: var(--blue); + transition: all .3s ease; + border-radius: 5px; + font-weight: 600; + margin-bottom: 12px; +} +#sidebar .btn-upgrade:hover { + background: var(--dark-blue); +} +#sidebar .ads .wrapper p { + font-size: 12px; + color: var(--dark-grey); + text-align: center; +} +#sidebar .ads .wrapper p span { + font-weight: 700; +} +/* SIDEBAR */ + +/* CONTENT */ +#content { + position: relative; + width: calc(100% - 260px); + left: 260px; + transition: all .3s ease; +} +#sidebar.hide + #content { + width: calc(100% - 60px); + left: 60px; +} +/* NAVBAR */ +nav { + background: var(--light); + height: 64px; + padding: 0 20px; + display: flex; + align-items: center; + grid-gap: 28px; + position: sticky; + top: 0; + left: 0; + z-index: 100; +} +nav .toggle-sidebar { + font-size: 18px; + cursor: pointer; +} +nav form { + max-width: 400px; + width: 100%; + margin-right: auto; +} +nav .form-group { + position: relative; +} +nav .form-group input { + width: 100%; + background: var(--grey); + border-radius: 5px; + border: none; + outline: none; + padding: 10px 36px 10px 16px; + transition: all .3s ease; +} +nav .form-group input:focus { + box-shadow: 0 0 0 1px var(--blue), 0 0 0 4px var(--light-blue); +} +nav .form-group .icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 16px; + color: var(--dark-grey); +} +nav .nav-link { + position: relative; +} +nav .nav-link .icon { + font-size: 18px; + color: var(--dark); +} +nav .nav-link .badge { + position: absolute; + top: -12px; + right: -12px; + width: 20px; + height: 20px; + border-radius: 50%; + border: 2px solid var(--light); + background: var(--red); + display: flex; + justify-content: center; + align-items: center; + color: var(--light); + font-size: 10px; + font-weight: 700; +} +nav .divider { + width: 1px; + background: var(--grey); + height: 12px; + display: block; +} +nav .profile { + position: relative; +} +nav .profile img { + width: 36px; + height: 36px; + border-radius: 50%; + object-fit: cover; + cursor: pointer; +} +nav .profile .profile-link { + position: absolute; + top: calc(100% + 10px); + right: 0; + background: var(--light); + padding: 10px 0; + box-shadow: 4px 4px 16px rgba(0, 0, 0, .1); + border-radius: 10px; + width: 160px; + opacity: 0; + pointer-events: none; + transition: all .3s ease; +} +nav .profile .profile-link.show { + opacity: 1; + pointer-events: visible; + top: 100%; +} +nav .profile .profile-link a { + padding: 10px 16px; + display: flex; + grid-gap: 10px; + font-size: 14px; + color: var(--dark); + align-items: center; + transition: all .3s ease; +} +nav .profile .profile-link a:hover { + background: var(--grey); +} +/* NAVBAR */ + + +/* MAIN */ +main { + width: 100%; + padding: 24px 20px 20px 20px; +} +main .title { + font-size: 28px; + font-weight: 600; + margin-bottom: 10px; +} +main .breadcrumbs { + display: flex; + grid-gap: 6px; +} +main .breadcrumbs li, +main .breadcrumbs li a { + font-size: 14px; +} +main .breadcrumbs li a { + color: var(--blue); +} +main .breadcrumbs li a.active, +main .breadcrumbs li.divider { + color: var(--dark-grey); + pointer-events: none; +} +main .info-data { + margin-top: 36px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + grid-gap: 20px; +} +main .info-data .card { + padding: 20px; + border-radius: 10px; + background: var(--light); + box-shadow: 4px 4px 16px rgba(0, 0, 0, .05); +} +main .card .head { + display: flex; + justify-content: space-between; + align-items: flex-start; +} +main .card .head h2 { + font-size: 24px; + font-weight: 600; +} +main .card .head p { + font-size: 14px; +} +main .card .head .icon { + font-size: 20px; + color: var(--green); +} +main .card .head .icon.down { + color: var(--red); +} +main .card .progress { + display: block; + margin-top: 24px; + height: 10px; + width: 100%; + border-radius: 10px; + background: var(--grey); + overflow-y: hidden; + position: relative; + margin-bottom: 4px; +} +main .card .progress::before { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + background: var(--blue); + width: var(--value); +} +main .card .label { + font-size: 14px; + font-weight: 700; +} +main .data { + display: flex; + grid-gap: 20px; + margin-top: 20px; + flex-wrap: wrap; +} +main .data .content-data { + flex-grow: 1; + flex-basis: 400px; + padding: 20px; + background: var(--light); + border-radius: 10px; + box-shadow: 4px 4px 16px rgba(0, 0, 0, .1); +} +main .content-data .head { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; +} +main .content-data .head h3 { + font-size: 20px; + font-weight: 600; +} +main .content-data .head .menu { + position: relative; + display: flex; + justify-content: center; + align-items: center; +} +main .content-data .head .menu .icon { + cursor: pointer; +} +main .content-data .head .menu-link { + position: absolute; + top: calc(100% + 10px); + right: 0; + width: 140px; + background: var(--light); + border-radius: 10px; + box-shadow: 4px 4px 16px rgba(0, 0, 0, .1); + padding: 10px 0; + z-index: 100; + opacity: 0; + pointer-events: none; + transition: all .3s ease; +} +main .content-data .head .menu-link.show { + top: 100%; + opacity: 1; + pointer-events: visible; +} +main .content-data .head .menu-link a { + display: block; + padding: 6px 16px; + font-size: 14px; + color: var(--dark); + transition: all .3s ease; +} +main .content-data .head .menu-link a:hover { + background: var(--grey); +} +main .content-data .chart { + width: 100%; + max-width: 100%; + overflow-x: auto; + scrollbar-width: none; +} +main .content-data .chart::-webkit-scrollbar { + display: none; +} + +main .chat-box { + width: 100%; + max-height: 360px; + overflow-y: auto; + scrollbar-width: none; +} +main .chat-box::-webkit-scrollbar { + display: none; +} +main .chat-box .day { + text-align: center; + margin-bottom: 10px; +} +main .chat-box .day span { + display: inline-block; + padding: 6px 12px; + border-radius: 20px; + background: var(--light-blue); + color: var(--blue); + font-size: 12px; + font-weight: 600; +} +main .chat-box .msg img { + width: 28px; + height: 28px; + border-radius: 50%; + object-fit: cover; +} +main .chat-box .msg { + display: flex; + grid-gap: 6px; + align-items: flex-start; +} +main .chat-box .profile .username { + font-size: 14px; + font-weight: 600; + display: inline-block; + margin-right: 6px; +} +main .chat-box .profile .time { + font-size: 12px; + color: var(--dark-grey); +} +main .chat-box .chat p { + font-size: 14px; + padding: 6px 10px; + display: inline-block; + max-width: 400px; + line-height: 150%; +} +main .chat-box .msg:not(.me) .chat p { + border-radius: 0 5px 5px 5px; + background: var(--blue); + color: var(--light); +} +main .chat-box .msg.me { + justify-content: flex-end; +} +main .chat-box .msg.me .profile { + text-align: right; +} +main .chat-box .msg.me p { + background: var(--grey); + border-radius: 5px 0 5px 5px; +} +main form { + margin-top: 6px; +} +main .form-group { + width: 100%; + display: flex; + grid-gap: 10px; +} +main .form-group input { + flex-grow: 1; + padding: 10px 16px; + border-radius: 5px; + outline: none; + background: var(--grey); + border: none; + transition: all .3s ease; + width: 100%; +} +main .form-group input:focus { + box-shadow: 0 0 0 1px var(--blue), 0 0 0 4px var(--light-blue); +} +main .btn-send { + padding: 0 16px; + background: var(--blue); + border-radius: 5px; + color: var(--light); + cursor: pointer; + border: none; + transition: all .3s ease; +} +main .btn-send:hover { + background: var(--dark-blue); +} +/* MAIN */ +/* CONTENT */ + +@media screen and (max-width: 768px) { + #content { + position: relative; + width: calc(100% - 60px); + transition: all .3s ease; + } + nav .nav-link, + nav .divider { + display: none; + } +} diff --git a/views/css/login.css b/views/css/login.css new file mode 100644 index 0000000..fcf9c6d --- /dev/null +++ b/views/css/login.css @@ -0,0 +1,132 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap'); + + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Open Sans', sans-serif; +} + +body { + background-color: #f1f0f6; + display: grid; + place-items: center; + min-height: 100vh; +} + +.login-container { + background-color: #ffffff; + border: 2px solid #e8e8e8; + border-radius: 8px; + padding: 2rem; + width: 100%; + max-width: 500px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +@media screen and (max-width: 768px) { + .login-container { + width: 80%; + } +} + + +.login-encabezado { + text-align: center; + margin-bottom: 1.5rem; +} + +.login-logo { + max-width: 150px; + height: auto; + margin-bottom: 1rem; +} + +.login-titulo { + font-size: 1.5rem; + color: #333; + display: flex; + align-items: center; + justify-content: center; +} + +.login-subtitulo { + color: #666; + margin-top: 0.5rem; +} + +.login-formulario { + color: #666; + margin-top: 0.5rem; +} + +.form-grupo { + margin-bottom: 1rem; +} + +.form-label { + display: flex; + align-items: center; + margin-bottom: 0.5rem; + font-weight: bold; +} + +.form-input { + width: 100%; + padding: 0.75rem; + border: 1px solid #e8e8e8; + border-radius: 4px; + background-color: #f6f6f6; + transition: all 0.3s ease; +} + +.form-input:focus { + outline: none; + border-color: #35245b; + box-shadow: 0 0 0 2px rgba(2, 27, 48, 0.2); +} + +.login-boton { + background-color: #35245b; + color: white; + border: none; + border-radius: 4px; + padding: 0.75rem; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + cursor: pointer; + transition: all 0.3s ease; + margin-top: 1rem; + width: 100%; +} + +.login-boton:hover { + background-color: #432d74; + box-shadow: 0 4px 8px #53388f; +} + +.login-boton:active { + transform: scale(0.98); +} + +.material-icons { + font-size: 1.25rem; +} + +.mensaje-error { + display: none; + background-color: #f8d7da; + color: #dc3545; + border: 1px solid #dc3545; + border-radius: 4px; + padding: 0.75rem; + margin-top: 1rem; + text-align: center; + animation: fadeIn 0.3s ease-in-out; +} + + + diff --git a/views/formulario-candidato.html b/views/formulario-candidato.html index b62931a..297645f 100644 --- a/views/formulario-candidato.html +++ b/views/formulario-candidato.html @@ -36,16 +36,6 @@ - - - - - - + + + + + + + - +
diff --git a/views/formulario-datos-candidato.php b/views/formulario-datos-candidato.php index 163e4b5..0c5558a 100644 --- a/views/formulario-datos-candidato.php +++ b/views/formulario-datos-candidato.php @@ -1,13 +1,11 @@ @@ -26,7 +24,7 @@ if($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id_candidato'])){
- +

Información geográfica