271 lines
8.0 KiB
HTML
271 lines
8.0 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>
|
|
<!-- <div class="ads">
|
|
<div class="wrapper">
|
|
<a href="#" class="btn-upgrade">Upgrade</a>
|
|
<p>Become a <span>PRO</span> member and enjoy <span>All Features</span></p>
|
|
</div>
|
|
</div> -->
|
|
</section>
|
|
<!-- SIDEBAR -->
|
|
|
|
<!-- NAVBAR -->
|
|
<section id="content">
|
|
<!-- NAVBAR -->
|
|
<nav>
|
|
<i class='bx bx-menu toggle-sidebar' ></i>
|
|
<form action="#">
|
|
<div class="form-group">
|
|
<input type="text" placeholder="Buscar...">
|
|
<i class='bx bx-search icon' ></i>
|
|
</div>
|
|
</form>
|
|
<a href="#" class="nav-link">
|
|
<i class='bx bxs-bell icon' ></i>
|
|
<span class="badge">5</span>
|
|
</a>
|
|
<a href="#" class="nav-link">
|
|
<i class='bx bxs-message-square-dots icon' ></i>
|
|
<span class="badge">8</span>
|
|
</a>
|
|
<span class="divider"></span>
|
|
<div class="profile">
|
|
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cGVvcGxlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
|
|
<ul class="profile-link">
|
|
<li><a href="#"><i class='bx bxs-user-circle icon' ></i> Profile</a></li>
|
|
<li><a href="#"><i class='bx bxs-cog' ></i> Settings</a></li>
|
|
<li><a href="#"><i class='bx bxs-log-out-circle' ></i> Logout</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<!-- NAVBAR -->
|
|
|
|
<!-- MAIN -->
|
|
<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>
|
|
|
|
<!--Añadido nuevo -->
|
|
<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>
|
|
</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>
|
|
|
|
<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>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
<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-nodefinido">
|
|
<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>
|
|
</div>
|
|
</main>
|
|
<!-- MAIN -->
|
|
</section>
|
|
<!-- NAVBAR -->
|
|
|
|
<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/formulario-candidato.js"></script>
|
|
<script src="../js/tarjetasPromedio.js"></script>
|
|
|
|
</body>
|
|
</html> |