fix: arreglar
This commit is contained in:
parent
6cc55397cd
commit
e66c5e21f8
106
css/inicio.css
106
css/inicio.css
|
|
@ -324,12 +324,6 @@ main .title {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main .subtitle {
|
|
||||||
font-size: 22px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main .breadcrumbs {
|
main .breadcrumbs {
|
||||||
display: flex;
|
display: flex;
|
||||||
grid-gap: 6px;
|
grid-gap: 6px;
|
||||||
|
|
@ -587,103 +581,3 @@ main .btn-send:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Transición base para todos */
|
|
||||||
select,
|
|
||||||
input[type="date"],
|
|
||||||
button {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
box-shadow: 0 0 0 0 rgba(53, 36, 91, 0); /* Inicial */
|
|
||||||
}
|
|
||||||
|
|
||||||
select#id_rango_edad:focus,
|
|
||||||
select#id_genero:focus,
|
|
||||||
select#id_examen:focus,
|
|
||||||
input[type="date"]:focus {
|
|
||||||
border-color: #35245b;
|
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 8px 2px rgba(53, 36, 91, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Botones */
|
|
||||||
button#buscar,
|
|
||||||
button#limpiar,
|
|
||||||
button#limpiar2 {
|
|
||||||
padding: 8px 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
border: 1px solid #35245b;
|
|
||||||
border-radius: 6px;
|
|
||||||
background-color: #fff;
|
|
||||||
color: #35245b;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: inherit;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
button#buscar:hover,
|
|
||||||
button#limpiar:hover,
|
|
||||||
button#limpiar2:hover {
|
|
||||||
background-color: #35245b;
|
|
||||||
color: white;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(53, 36, 91, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Efecto de "pulse" al hacer clic */
|
|
||||||
button#buscar:active,
|
|
||||||
button#limpiar:active,
|
|
||||||
button#limpiar2:active {
|
|
||||||
transform: scale(0.98);
|
|
||||||
box-shadow: 0 2px 6px rgba(53, 36, 91, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fechas-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 20px;
|
|
||||||
margin: 10px 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fecha-item {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fecha-item label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fecha-item input[type="date"] {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fecha-item input[type="date"]:focus {
|
|
||||||
border-color: #35245b;
|
|
||||||
box-shadow: 0 0 8px 2px rgba(53, 36, 91, 0.2);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,33 @@
|
||||||
<!-- SIDEBAR -->
|
<!-- SIDEBAR -->
|
||||||
|
|
||||||
<section id="content">
|
<section id="content">
|
||||||
|
<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>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1 class="title">Dashboard</h1>
|
<h1 class="title">Dashboard</h1>
|
||||||
<ul class="breadcrumbs">
|
<ul class="breadcrumbs">
|
||||||
|
|
@ -47,13 +73,16 @@
|
||||||
<li class="divider">/</li>
|
<li class="divider">/</li>
|
||||||
<li><a href="#" class="active">Dashboard</a></li>
|
<li><a href="#" class="active">Dashboard</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="select-data">
|
<div class="select-data">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h2 class="subtitle">Filtros</h2>
|
<div class="head">
|
||||||
|
<i class='bx bx-trending-up icon'></i>
|
||||||
|
</div>
|
||||||
<div style="display: flex; gap: 20px; margin: 10px 0;">
|
<div style="display: flex; gap: 20px; margin: 10px 0;">
|
||||||
<!-- Campo: Edad -->
|
<!-- Campo: Edad -->
|
||||||
<div style="flex: 1;">
|
<div style="flex: 1;">
|
||||||
<label class="form-label" for="id_rango_edad">Edad:</label>
|
<label class="form-label" for="id_rango_edad">Edad</label>
|
||||||
<select class="border rounded-pill shadow-sm form-select" id="id_rango_edad" required>
|
<select class="border rounded-pill shadow-sm form-select" id="id_rango_edad" required>
|
||||||
<option value="NULL">Seleccione una opción</option>
|
<option value="NULL">Seleccione una opción</option>
|
||||||
<option value="1">18-24</option>
|
<option value="1">18-24</option>
|
||||||
|
|
@ -67,7 +96,7 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- Campo: Género -->
|
<!-- Campo: Género -->
|
||||||
<div style="flex: 1;">
|
<div style="flex: 1;">
|
||||||
<label class="form-label" for="id_genero" style="margin: 10px 0px 5px;">Género:</label>
|
<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>
|
<select class="border rounded-pill shadow-sm form-select" id="id_genero" required>
|
||||||
<option value="NULL">Seleccione una opción</option>
|
<option value="NULL">Seleccione una opción</option>
|
||||||
<option value="1">Masculino</option>
|
<option value="1">Masculino</option>
|
||||||
|
|
@ -77,7 +106,7 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- Campo: Examen -->
|
<!-- Campo: Examen -->
|
||||||
<div style="flex: 1;">
|
<div style="flex: 1;">
|
||||||
<label class="form-label" for="id_examen" style="margin: 10px 0px 5px;">Examen:</label>
|
<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="">
|
<select class="border rounded-pill shadow-sm form-select" id="id_examen" required="">
|
||||||
<option value="NULL">Seleccione una opción</option>
|
<option value="NULL">Seleccione una opción</option>
|
||||||
<option value="1">Amazon Web Services</option>
|
<option value="1">Amazon Web Services</option>
|
||||||
|
|
@ -99,21 +128,21 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" id="limpiar2" class="btn btn-primary">Limpiar</button>
|
<button type="button" id="limpiar2" class="btn btn-primary">Limpiar</button>
|
||||||
<h2 class="subtitle">Fecha</h2>
|
<h2>Fecha</h2>
|
||||||
<div class="fechas-wrapper">
|
<h3>Ingresa una fecha de inicio:</h3>
|
||||||
<div class="fecha-item">
|
<br>
|
||||||
<label for="date1">Inicio:</label>
|
<input type="date" id="date1" name="date1">
|
||||||
<input type="date" id="date1" name="date1">
|
<h3>Ingresa una fecha de final:</h3>
|
||||||
</div>
|
<input type="date" id="date2" name="date2">
|
||||||
<div class="fecha-item">
|
<br>
|
||||||
<label for="date2">Cierre:</label>
|
|
||||||
<input type="date" id="date2" name="date2">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button type="button" id="buscar">Buscar</button>
|
<button type="button" id="buscar">Buscar</button>
|
||||||
<button type="button" id="limpiar">Limpiar</button>
|
<button type="button" id="limpiar">Limpiar</button>
|
||||||
<br>
|
<br>
|
||||||
<div class="content-data">
|
<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 class="chart">
|
||||||
<div id="chart5"></div>
|
<div id="chart5"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue