added things
This commit is contained in:
Alejandra-Guzman-Mendez
@@ -0,0 +1,126 @@
|
||||
|
||||
|
||||
/* ====== FORMULARIO ====== */
|
||||
.editar {
|
||||
max-width: 1000px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin: 40px auto;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.columna {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-color: #003366;
|
||||
box-shadow: 0 0 4px rgba(0, 51, 102, 0.3);
|
||||
}
|
||||
|
||||
|
||||
/* Botón cerrar sesión */
|
||||
.boton-cerrar {
|
||||
background-color: #e60000;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.3s;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.boton-cerrar:hover {
|
||||
background-color: #cc0000;
|
||||
}
|
||||
|
||||
.titulo-editar {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%; /* centra horizontalmente */
|
||||
transform: translate(-50%, -50%); /* centra vertical y horizontalmente */
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 35%; /* ajusta el ancho del bloque de texto */
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #003366;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.titulo-editar span {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s, text-decoration 0.3s;
|
||||
}
|
||||
|
||||
/* Cambia de color al pasar el mouse */
|
||||
.titulo-editar span:hover {
|
||||
color: #b8870b;
|
||||
}
|
||||
|
||||
.recuadro{
|
||||
box-shadow: 0 0 7px 0px black;
|
||||
border-radius: 10px; /* Bordes redondeados */
|
||||
padding: 10px; /* Espacio interno */
|
||||
margin: 85px 350px; /* Separación del resto del contenido */
|
||||
background-color: #f9f9f9; /* Color de fondo */
|
||||
}
|
||||
|
||||
.titulo-rec {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-left: 0; /* alinea el texto con el resto de la columna */
|
||||
text-align: left; /* asegura que esté alineado a la izquierda */
|
||||
margin-bottom: 8px; /* un poco de espacio debajo del título */
|
||||
}
|
||||
.linea{
|
||||
border-bottom: 2px solid #003366; /* color y grosor de la línea */
|
||||
width: 100%; /* ocupa toda la columna */
|
||||
margin-bottom: 10px; /* espacio entre línea y los campos */
|
||||
}
|
||||
|
||||
.botones {
|
||||
display: flex;
|
||||
justify-content: flex-end; /* Alinea los botones a la derecha */
|
||||
gap: 10px; /* Espacio entre ellos */
|
||||
margin-top: 15px; /* Separación del formulario */
|
||||
}
|
||||
.guardar{
|
||||
background-color: #b8870b;
|
||||
color: #003366;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
.cancelar{
|
||||
background-color: #003366;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
+65
-3
@@ -1,6 +1,68 @@
|
||||
import "../styles/layout/editar.scss";
|
||||
export default function Page() {
|
||||
import './editar.css';
|
||||
export default function Home() {
|
||||
return (
|
||||
<></>
|
||||
<div>
|
||||
|
||||
|
||||
|
||||
<div className="recuadro">
|
||||
<form className="editar">
|
||||
{/* Columna 1 */}
|
||||
<div className="columna">
|
||||
<p className="titulo-rec">CPU</p>
|
||||
<div className="linea"></div>
|
||||
|
||||
<label htmlFor="serie">Serie</label>
|
||||
<input type="text" id="serie" />
|
||||
|
||||
<label htmlFor="marca">Marca</label>
|
||||
<input type="text" id="marca" />
|
||||
|
||||
<label htmlFor="modelo">Modelo</label>
|
||||
<input type="text" id="modelo" />
|
||||
|
||||
<label htmlFor="estado">Estado</label>
|
||||
<input type="text" id="estado" />
|
||||
</div>
|
||||
|
||||
{/* Columna 2 */}
|
||||
<div className="columna">
|
||||
<p className="titulo-rec">Inventario:</p>
|
||||
<div className="linea"></div>
|
||||
|
||||
<label htmlFor="sistema">Sistema Operativo</label>
|
||||
<input type="text" id="sistema" />
|
||||
|
||||
<label htmlFor="procesador">Procesador</label>
|
||||
<input type="text" id="procesador" />
|
||||
|
||||
<label htmlFor="uso">Tipo de uso</label>
|
||||
<input type="text" id="uso" />
|
||||
|
||||
<label htmlFor="observaciones">Observaciones</label>
|
||||
<input type="text" id="observaciones" />
|
||||
</div>
|
||||
|
||||
{/* Columna 3 */}
|
||||
<div className="columna">
|
||||
<p className="titulo-rec">Fecha Censo:</p>
|
||||
<div className="linea"></div>
|
||||
|
||||
<label htmlFor="adscripcion">Adscripción</label>
|
||||
<input type="text" id="adscripcion" />
|
||||
|
||||
<label htmlFor="responsable">Responsable</label>
|
||||
<input type="text" id="responsable" />
|
||||
|
||||
<label htmlFor="lugar">Lugar</label>
|
||||
<input type="text" id="lugar" />
|
||||
</div>
|
||||
</form>
|
||||
<div className="botones">
|
||||
<button className="guardar">Guardar</button>
|
||||
<button className="cancelar">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
import './reporte.css';
|
||||
|
||||
export default function Reporte() {
|
||||
return (
|
||||
<div>
|
||||
<header className="encabezado">
|
||||
<div className="encabezado-sup"></div>
|
||||
<div className="logo">
|
||||
<img src="fes-logo.jpg" alt="" className="logo-img" />
|
||||
</div>
|
||||
|
||||
<div className="pestaña">
|
||||
<span>Escanear código</span>
|
||||
<span>Equipo</span>
|
||||
<span>Reportes</span>
|
||||
</div>
|
||||
|
||||
<nav className="Sesion">
|
||||
<button className="boton-cerrar">Cerrar sesión</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div className='contenedor'>
|
||||
<div className='titulo-reporte'>
|
||||
<p>REPORTE</p>
|
||||
</div>
|
||||
|
||||
<form action="/buscar" method="get">
|
||||
<input type="text" name="q" placeholder="Buscar equipo" />
|
||||
<button type="submit">Buscar</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className='tabla-rec'></div>
|
||||
<button className='boton-descargar'>Descargar</button>
|
||||
|
||||
<div className='filtro-rec'>
|
||||
<form className="editar">
|
||||
{/* Columna 1 */}
|
||||
<div className="columna">
|
||||
<p className="titulo-rec">Filtro</p>
|
||||
<div className="linea"></div>
|
||||
|
||||
<label htmlFor="adscripcion">Adscripción</label>
|
||||
<select id="adscripcion">
|
||||
<option value="">Seleccione la adscripción</option>
|
||||
<option value="informatica">CEDETEC</option>
|
||||
<option value="administracion">Administración</option>
|
||||
<option value="biblioteca">Biblioteca</option>
|
||||
<option value="direccion">Dirección</option>
|
||||
</select>
|
||||
|
||||
<label htmlFor="estado">Estado</label>
|
||||
<select id="estado">
|
||||
<option value="">Seleccione el estado del equipo</option>
|
||||
<option value="activo">Activo</option>
|
||||
<option value="mantenimiento">En Mantenimiento</option>
|
||||
<option value="baja">Dado de Baja</option>
|
||||
<option value="reparacion">En Reparación</option>
|
||||
</select>
|
||||
|
||||
<label htmlFor="tipo">Tipo de Equipo</label>
|
||||
<select id="tipo">
|
||||
<option value="">Seleccione el tipo de equipo</option>
|
||||
<option value="cpu">CPU</option>
|
||||
<option value="laptop">Laptop</option>
|
||||
<option value="monitor">Monitor</option>
|
||||
<option value="impresora">Impresora</option>
|
||||
<option value="servidor">Servidor</option>
|
||||
</select>
|
||||
|
||||
<label htmlFor="antiguedad">Antigüedad</label>
|
||||
<select id="antiguedad">
|
||||
<option value="">Seleccione la antigüedad del equipo</option>
|
||||
<option value="menos1">Menos de 1 año</option>
|
||||
<option value="1-3">1 a 3 años</option>
|
||||
<option value="3-5">3 a 5 años</option>
|
||||
<option value="mas5">Más de 5 años</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="botones-filtro">
|
||||
<button type="reset" className="limpiar">Limpiar filtros</button>
|
||||
<button type="submit" className="aplicar">Aplicar filtros</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
.pestaña {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 62%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around; /* espacio igual entre los tres textos */
|
||||
align-items: center;
|
||||
width: 45%; /* controla el ancho total del bloque central */
|
||||
font-size: 18px;
|
||||
color: #003366;
|
||||
font-weight: bold;
|
||||
z-index: 5; /* por encima del logo */
|
||||
}
|
||||
|
||||
.pestaña span {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.pestaña span:hover {
|
||||
color: #b8870b; /* cambia de color al pasar el cursor */
|
||||
}
|
||||
|
||||
.titulo-reporte{
|
||||
font-weight: bold; /* negrita */
|
||||
font-size: 24px; /* tamaño de texto */
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/*BUSCADOR*/
|
||||
|
||||
input[type="text"] {
|
||||
width: 500px; /* más ancho, más largo */
|
||||
padding: 7px; /* mantiene espacio cómodo dentro */
|
||||
font-size: 18px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 12px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
.contenedor{
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.filtro-rec{
|
||||
border: 2px solid #003366; /* Color del borde */
|
||||
border-radius: 10px; /* Bordes redondeados */
|
||||
padding: 10px; /* Espacio interno */
|
||||
margin: 80px 550px; /* Separación del resto del contenido */
|
||||
background-color: #f9f9f9;
|
||||
position: relative;
|
||||
left: 380px;
|
||||
font-family: Arial, sans-serif;
|
||||
top: -570px; /* sube 50px respecto a su posición original */
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* Estilos para los selects */
|
||||
select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #003366;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
border-color: #003366;
|
||||
box-shadow: 0 0 4px rgba(0, 51, 102, 0.3);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Botón de buscar */
|
||||
form[action="/buscar"] {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 20px 0;
|
||||
|
||||
}
|
||||
|
||||
form[action="/buscar"] input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
form[action="/buscar"] button {
|
||||
background-color: #003366;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.botones-filtro {
|
||||
display: flex;
|
||||
justify-content: flex-end; /* botones a la derecha */
|
||||
gap: 10px; /* espacio entre botones */
|
||||
margin-top: 15px; /* separación del resto del formulario */
|
||||
}
|
||||
|
||||
.aplicar {
|
||||
background-color: #003366;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.limpiar {
|
||||
background-color: #b8870b;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tabla-rec{
|
||||
border: 2px solid #003366; /* Color del borde */
|
||||
border-radius: 10px; /* Bordes redondeados */
|
||||
padding: 10px; /* Espacio interno */
|
||||
margin: 50px 700px 0 80px; /* superior, derecha, inferior, izquierda */
|
||||
background-color: #f9f9f9;
|
||||
font-family: Arial, sans-serif;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.boton-descargar{
|
||||
padding: 8px 12px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
background-color: #003366;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
right: 30px;
|
||||
margin-left: 700px;
|
||||
}
|
||||
Reference in New Issue
Block a user