240 lines
12 KiB
HTML
240 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="../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="#" class="active"><i class='bx bxs-dashboard icon'></i> Dashboard</a></li>
|
|
<li class="divider" data-text="main">Main</li>
|
|
<li>
|
|
<a href="#"><i class='bx bxs-inbox icon'></i> Elements <i class='bx bx-chevron-right icon-right'></i></a>
|
|
<ul class="side-dropdown">
|
|
<li><a href="#">Alert</a></li>
|
|
<li><a href="#">Badges</a></li>
|
|
<li><a href="#">Breadcrumbs</a></li>
|
|
<li><a href="#">Button</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#"><i class='bx bxs-chart icon'></i> Charts</a></li>
|
|
<li><a href="#"><i class='bx bxs-widget icon'></i> Widgets</a></li>
|
|
<li class="divider" data-text="tablas y formularios">Tablas y formularios</li>
|
|
<li><a href="#"><i class='bx bx-table icon'></i> Tablas</a></li>
|
|
<li>
|
|
<a href="#"><i class='bx bxs-notepad icon'></i> Formularios <i class='bx bx-chevron-right icon-right'></i></a>
|
|
<ul class="side-dropdown">
|
|
<li><a href="formulario-candidato.html">Registro de candidato</a></li>
|
|
<li><a href="formulario-datos-candidato.php">Datos de candidato</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<!-- SIDEBAR -->
|
|
|
|
<section id="content">
|
|
<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> |