282 lines
12 KiB
HTML
282 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
|
|
<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">
|
|
<style>
|
|
/* Selects e inputs de fecha */
|
|
select#id_rango_edad,
|
|
select#id_genero,
|
|
select#id_examen,
|
|
input[type="date"] {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
background-color: #fff;
|
|
color: #333;
|
|
font-family: inherit;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
select#id_rango_edad:focus,
|
|
select#id_genero:focus,
|
|
select#id_examen:focus,
|
|
input[type="date"]:focus {
|
|
border-color: #4a90e2;
|
|
outline: none;
|
|
}
|
|
|
|
/* Botones Buscar y Limpiar */
|
|
button#buscar,
|
|
button#limpiar,
|
|
button#limpiar2 {
|
|
padding: 8px 20px;
|
|
font-size: 14px;
|
|
border: 1px solid #4a90e2;
|
|
border-radius: 6px;
|
|
background-color: #fff;
|
|
color: #4a90e2;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
margin-top: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
button#buscar:hover,
|
|
button#limpiar:hover,
|
|
button#limpiar2:hover {
|
|
background-color: #4a90e2;
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="../css/inicio.css">
|
|
<title>AdminSite</title>
|
|
</head>
|
|
<body>
|
|
<!-- SIDEBAR -->
|
|
<section id="sidebar">
|
|
<a href="inicio.html" class="brand"><i class='bx bx-code-alt icon' ></i> LANIA</a>
|
|
<ul class="side-menu">
|
|
<li><a href="inicio.html" class="active"><i class="fa-solid fa-home-user icon"></i> Dashboard</a></li>
|
|
<li><a href="formulario-candidato.html" target="_blank"><i class="fa-solid fa-list icon"></i> Formulario de registro</a></li>
|
|
<li><a href="control-candidatos.php"><i class="fa-solid fa-users-line icon"></i>Control candidatos</a></li>
|
|
<li><a href="control-usuarios.php"><i class="fa-solid fa-users-gear icon"></i>Control usuario</a></li>
|
|
<li><a href="consultar-api.html"><i class="fa-solid fa-globe icon"></i> API</a></li>
|
|
<li><a href="../controllers/cerrarSesion.php"><i class="fa-solid fa-right-to-bracket icon"></i> Cerrar sesión</a></li>
|
|
</ul>
|
|
</section>
|
|
<!-- SIDEBAR -->
|
|
|
|
<section id="content">
|
|
<nav style="display: none;">
|
|
<i class='bx bx-menu toggle-sidebar'></i>
|
|
</nav>
|
|
|
|
|
|
<main>
|
|
<h1 class="title">Dashboard</h1>
|
|
<ul class="breadcrumbs">
|
|
<li><a href="#">Home</a></li>
|
|
<li class="divider">/</li>
|
|
<li><a href="#" class="active">Dashboard</a></li>
|
|
</ul>
|
|
|
|
<div class="select-data">
|
|
<div class="card">
|
|
<div class="head">
|
|
<i class='bx bx-trending-up icon'></i>
|
|
</div>
|
|
<div style="display: flex; gap: 20px; margin: 10px 0;">
|
|
<!-- Campo: Edad -->
|
|
<div style="flex: 1;">
|
|
<label class="form-label" for="id_rango_edad">Edad</label>
|
|
<select class="border rounded-pill shadow-sm form-select" id="id_rango_edad" required>
|
|
<option value="NULL">Seleccione una opción</option>
|
|
<option value="1">18-24</option>
|
|
<option value="2">24-34</option>
|
|
<option value="3">35-44</option>
|
|
<option value="4">44-54</option>
|
|
<option value="5">55-64</option>
|
|
<option value="6">65 o más</option>
|
|
<option value="7">Menor de 18</option>
|
|
</select>
|
|
</div>
|
|
<!-- Campo: Género -->
|
|
<div style="flex: 1;">
|
|
<label class="form-label" for="id_genero" style="margin: 10px 0px 5px;">Género</label>
|
|
<select class="border rounded-pill shadow-sm form-select" id="id_genero" required>
|
|
<option value="NULL">Seleccione una opción</option>
|
|
<option value="1">Masculino</option>
|
|
<option value="2">Femenino</option>
|
|
<option value="3">Prefiero no decir</option>
|
|
</select>
|
|
</div>
|
|
<!-- Campo: Examen -->
|
|
<div style="flex: 1;">
|
|
<label class="form-label" for="id_examen" style="margin: 10px 0px 5px;">Examen</label>
|
|
<select class="border rounded-pill shadow-sm form-select" id="id_examen" required="">
|
|
<option value="NULL">Seleccione una opción</option>
|
|
<option value="1">Amazon Web Services</option>
|
|
<option value="2">Cisco</option>
|
|
<option value="3">CompTIA</option>
|
|
<option value="4">Fortinet</option>
|
|
<option value="5">Google Cloud Platform</option>
|
|
<option value="6">IBM</option>
|
|
<option value="7">Juniper Networks</option>
|
|
<option value="8">Microsoft</option>
|
|
<option value="9">Oracle</option>
|
|
<option value="10">Otros</option>
|
|
<option value="11">Palo Alto Networks</option>
|
|
<option value="12">Red Hat</option>
|
|
<option value="13">Salesforce</option>
|
|
<option value="14">SAP</option>
|
|
<option value="15">VMware</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<button type="button" id="limpiar2" class="btn btn-primary">Limpiar</button>
|
|
<h2>Fecha</h2>
|
|
<h3>Ingresa una fecha de inicio:</h3>
|
|
<br>
|
|
<input type="date" id="date1" name="date1">
|
|
<h3>Ingresa una fecha de final:</h3>
|
|
<input type="date" id="date2" name="date2">
|
|
<br>
|
|
<button type="button" id="buscar">Buscar</button>
|
|
<button type="button" id="limpiar">Limpiar</button>
|
|
<br>
|
|
<div class="content-data">
|
|
<div class="head">
|
|
<h3>Resultado de registros en el rango de fecha ingresado</h3>
|
|
<div class="menu"></div>
|
|
</div>
|
|
<div class="chart">
|
|
<div id="chart5"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<br>
|
|
<h3>Promedio de géneros:</h3>
|
|
<div class="info-data">
|
|
<div class="card" id="card-femenino">
|
|
<div class="head">
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<i class='bx bx-female' style="font-size: 24px; color: #e91e63;"></i>
|
|
<div>
|
|
<h2>0</h2>
|
|
<p>Femenino</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card" id="card-masculino">
|
|
<div class="head">
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<i class='bx bx-male' style="font-size: 24px; color: #2196f3;"></i>
|
|
<div>
|
|
<h2>0</h2>
|
|
<p>Masculino</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card" id="card-prefiero">
|
|
<div class="head">
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<i class='bx bx-male' style="font-size: 24px; color: black;"></i>
|
|
<div>
|
|
<h2>0</h2>
|
|
<p>Prefiero no decirlo</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data">
|
|
<div class="content-data">
|
|
<div class="head">
|
|
<h3>Generos</h3>
|
|
<div class="menu">
|
|
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
|
<ul class="menu-link">
|
|
<li><a href="#">Edit</a></li>
|
|
<li><a href="#">Save</a></li>
|
|
<li><a href="#">Remove</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="chart">
|
|
<div id="chart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="content-data">
|
|
<div class="head">
|
|
<h3>Edades</h3>
|
|
<div class="menu">
|
|
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
|
<ul class="menu-link">
|
|
<li><a href="#">Edit</a></li>
|
|
<li><a href="#">Save</a></li>
|
|
<li><a href="#">Remove</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="chart">
|
|
<div id="chart2"></div>
|
|
</div>
|
|
</div>
|
|
<div class="content-data">
|
|
<div class="head">
|
|
<h3>Estados</h3>
|
|
<div class="menu">
|
|
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
|
<ul class="menu-link">
|
|
<li><a href="#">Edit</a></li>
|
|
<li><a href="#">Save</a></li>
|
|
<li><a href="#">Remove</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="chart">
|
|
<div id="chart3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="content-data">
|
|
<div class="head">
|
|
<h3>Examenes</h3>
|
|
<div class="menu">
|
|
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
|
<ul class="menu-link">
|
|
<li><a href="#">Edit</a></li>
|
|
<li><a href="#">Save</a></li>
|
|
<li><a href="#">Remove</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="chart">
|
|
<div id="chart4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</section>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
|
<script type="module" src="../js/inicio.js"></script>
|
|
<script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>
|
|
<script src="../js/tarjetasPromedio.js"></script>
|
|
</body>
|
|
</html> |