CIDWA/front-AT
12
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

fixed problems responsives and added a new component

Browse Source
This commit is contained in:
Lino
2025-09-05 20:54:29 -04:00
parent cdb62f290e
commit cf118d4cc2
11 changed files with 179 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/ActivosMantenimiento/page.tsx
-2
View File
@@ -66,7 +66,6 @@ export default function Page() {
<td>{machine.plataforma}</td>
<td>{machine.area}</td>
<td>
{" "}
<input type="checkbox" />
</td>
</tr>
@@ -98,7 +97,6 @@ export default function Page() {
<tr key={index}>
<td>{table.mesa}</td>
<td>
{" "}
<input type="checkbox" />
</td>
</tr>
app/Alta/page.tsx
+54 -53
View File
@@ -20,66 +20,67 @@ export default function Page() {
<section className="containerSection">
<h1 className="title">ALTA</h1>
<div className='containerInput'>
<label className='label'>No.Cuenta</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca un número de cuenta...'
/>
<form className='containerForm'>
<label className='label'>Nombre</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>No.Cuenta</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca un número de cuenta...'
/>
<label className='label'>Apellido Paterno</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Nombre</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Apellido Materno</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Apellido Paterno</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Email</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Apellido Materno</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Fecha Nacimiento</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Email</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Carrera</label>
<select
value={major}
onChange={(e) => setMajor(e.target.value)}
>
<option value="">-- Selecciona un tiempo --</option>
<option value="15">15 minutos</option>
</select>
<label className='label'>Fecha Nacimiento</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<button className="button buttonSearch">registrar</button>
</div>
<label className='label'>Carrera</label>
<select
value={major}
onChange={(e) => setMajor(e.target.value)}
>
<option value="">-- Selecciona un tiempo --</option>
<option value="15">15 minutos</option>
</select>
<button className="button buttonSearch">registrar</button>
</form>
</section>
);
app/AsignacionMesas/page.tsx
-1
View File
@@ -53,7 +53,6 @@ export default function Page() {
content: (
<>
<div className="checkbox-grid">
{" "}
<label>
<input type="checkbox" /> Mesa
</label>
app/Components/BarNavigation/BarNavigation.css
+1 -3
View File
@@ -95,6 +95,7 @@
.containerLinks {
padding: 0 !important;
border-radius: 0 0 4px 4px;
}
.links {
@@ -117,8 +118,6 @@
.menuToggle.center {
align-items: center;
transform: translateX(-50%);
left: 50%;
}
.barNavigation {
@@ -129,7 +128,6 @@
position: absolute;
background-color: rgb(1, 92, 184);
flex-direction: column;
gap: 10px;
padding: 10px 0;
align-items: center;
display: none;
app/Components/BarNavigation/BarNavigation.tsx
+6 -7
View File
@@ -24,7 +24,7 @@ function BarNavigation() {
<ul className={openMenu ? "active" : ""}>
<li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(0)}>Inscripciones</span>
<ul className="containerLinks" >
<ul className="containerLinks" onClick={toggleMenu}>
<Link href="/Alta" className="links">
<li >Alta</li>
</Link>
@@ -39,7 +39,7 @@ function BarNavigation() {
<li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(1)}>Servicios</span>
<ul>
<ul onClick={toggleMenu}>
<Link href="/Impresiones" className="links">
<li >
Impresiones y Ploteo
@@ -65,7 +65,7 @@ function BarNavigation() {
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(2)}>Equipo</span>
<ul >
<ul onClick={toggleMenu}>
<Link href="/InformacionEquipo" className="links">
<li>Informacion de Equipos</li>
</Link>
@@ -83,8 +83,7 @@ function BarNavigation() {
<li className={`subMenu ${openSubMenu === 3 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(3)}>Reportes</span>
<ul>
<ul onClick={toggleMenu}>
<Link href="/Recibo" className="links">
<li>Recibo</li>
</Link>
@@ -96,12 +95,12 @@ function BarNavigation() {
</Link>
</ul>
</li>
<li className="subMenu">
<li className="subMenu" onClick={toggleMenu}>
<Link href="/QuitarSancion" className="links">
Quitar sancion
</Link>
</li>
<li className="subMenu">
<li className="subMenu" onClick={toggleMenu}>
<Link href="CambiarPass" className="links">
Cambiar contraseña
</Link>
app/Components/Login/Login.css
+8 -1
View File
@@ -2,6 +2,13 @@
width: 300px;
}
.center {
display: grid;
grid-template-columns: auto 400px;
justify-content: center;
align-items: center;
}
.relative {
position: relative;
}
@@ -20,6 +27,6 @@
@media(max-width:800px){
.center{
display: flex;
display: flex ;
}
}
app/Components/ProgramSelector/ProgramSelector.tsx
+96
View File
@@ -0,0 +1,96 @@
function ProgramSelector() {
return (
<div>
<form className="form-container">
<label htmlFor="equipo">Ubicación de equipo</label>
<select id="equipo">
<option value="">buscar</option>
<option value="sala1">Equipo 1</option>
<option value="sala2">Equipo 2</option>
<option value="sala3">Equipo 3</option>
</select>
<div className="checkbox-grid">
<label>
<input type="checkbox" /> 3D MAX STUDIO 2014
</label>
<label>
<input type="checkbox" /> ADOBE CREATIVE SUITE
</label>
<label>
<input type="checkbox" /> ARCHICAD 20
</label>
<label>
<input type="checkbox" /> AUDACITY - win - 2.0
</label>
<label>
<input type="checkbox" /> AUTOCAD
</label>
<label>
<input type="checkbox" /> CODE-BLOCKS
</label>
<label>
<input type="checkbox" /> COREL DRAW
</label>
<label>
<input type="checkbox" /> DEV-C++
</label>
<label>
<input type="checkbox" /> EVIEWS Enterprise
</label>
<label>
<input type="checkbox" /> Google Earth
</label>
<label>
<input type="checkbox" /> INTERNET
</label>
<label>
<input type="checkbox" /> MAPLE
</label>
<label>
<input type="checkbox" /> MATHEMATICA
</label>
<label>
<input type="checkbox" /> MATLAB
</label>
<label>
<input type="checkbox" /> Maxima
</label>
<label>
<input type="checkbox" /> miktex
</label>
<label>
<input type="checkbox" /> NETBEANS
</label>
<label>
<input type="checkbox" /> OFFICE 2016
</label>
<label>
<input type="checkbox" /> PSeInt
</label>
<label>
<input type="checkbox" /> R 3.0.1
</label>
<label>
<input type="checkbox" /> RStudio
</label>
<label>
<input type="checkbox" /> SPSS Statistics
</label>
<label>
<input type="checkbox" /> STATA 13
</label>
<label>
<input type="checkbox" /> STATGRAPHICS Centurion XVI
</label>
</div>
<button className="button buttonSearch">Guardar cambios</button>
</form>
</div>
)
}
export default ProgramSelector
app/Components/Receipt/Receipt.tsx
-1
View File
@@ -1,7 +1,6 @@
'use client'
import { useEffect, useState } from "react";
import "./Receipt.css"
import Selection from "../Selection/Selection";
function Receipt() {
const [folio, setFolio] = useState('');
app/InformacionEquipo/informacionequipo.css
+1 -23
View File
@@ -7,11 +7,6 @@
justify-content: start;
}
.margin {
margin: 10px 0;
display: flex;
gap: 50px;
}
.conteinercuadro {
display: flex;
flex-direction: column;
@@ -50,6 +45,7 @@
grid-template-columns: repeat(3, 240px); /* ancho fijo por columna */
gap: 6px 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.checkbox-grid label {
@@ -66,21 +62,3 @@
margin: 0;
margin-right: 1px; /* espacio mínimo entre el box y el texto */
}
input[type="checkbox"] {
accent-color: #2563eb;
}
.btn {
display: inline-block;
background: #2563eb;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
transition: 0.2s ease;
}
.btn:hover {
background: #1d4ed8;
}
app/InformacionEquipo/page.tsx
+11 -98
View File
@@ -1,3 +1,4 @@
import ProgramSelector from "../Components/ProgramSelector/ProgramSelector";
import Toggle from "../Components/Toggle/Toggle";
import "./informacionequipo.css";
@@ -13,13 +14,11 @@ export default function Page() {
key: "1",
label: "Equipos",
content: (
<div className="containerInput">
<div className="margin">
{" "}
<form className="containerForm">
<div className="groupInput">
<input type="text" />
<button className="button buttonSearch">
{" "}
Buscar por ubicación{" "}
Buscar
</button>
</div>
<label className="label">Ubicacion</label>
@@ -53,106 +52,20 @@ export default function Page() {
//onChange={(e) => setUser(e.target.value)}
placeholder="Coloca "
/>
<div className="margin">
<div className="containerButton">
<button className="button buttonSearch">Nuevo</button>
<button className="button buttonSearch">Editar</button>
</div>
</div>
</form>
),
},
{
key: "2",
label: "Programa por equipo",
content: (
<div>
<div className="form-container">
<label htmlFor="equipo">Ubicación de equipo</label>
<select id="equipo">
<option value="">buscar</option>
<option value="sala1">Equipo 1</option>
<option value="sala2">Equipo 2</option>
<option value="sala3">Equipo 3</option>
</select>
<div className="checkbox-grid">
<label>
<input type="checkbox" /> 3D MAX STUDIO 2014
</label>
<label>
<input type="checkbox" /> ADOBE CREATIVE SUITE
</label>
<label>
<input type="checkbox" /> ARCHICAD 20
</label>
<label>
<input type="checkbox" /> AUDACITY - win - 2.0
</label>
<label>
<input type="checkbox" /> AUTOCAD
</label>
<label>
<input type="checkbox" /> CODE-BLOCKS
</label>
<label>
<input type="checkbox" /> COREL DRAW
</label>
<label>
<input type="checkbox" /> DEV-C++
</label>
<label>
<input type="checkbox" /> EVIEWS Enterprise
</label>
<label>
<input type="checkbox" /> Google Earth
</label>
<label>
<input type="checkbox" /> INTERNET
</label>
<label>
<input type="checkbox" /> MAPLE
</label>
<label>
<input type="checkbox" /> MATHEMATICA
</label>
<label>
<input type="checkbox" /> MATLAB
</label>
<label>
<input type="checkbox" /> Maxima
</label>
<label>
<input type="checkbox" /> miktex
</label>
<label>
<input type="checkbox" /> NETBEANS
</label>
<label>
<input type="checkbox" /> OFFICE 2016
</label>
<label>
<input type="checkbox" /> PSeInt
</label>
<label>
<input type="checkbox" /> R 3.0.1
</label>
<label>
<input type="checkbox" /> RStudio
</label>
<label>
<input type="checkbox" /> SPSS Statistics
</label>
<label>
<input type="checkbox" /> STATA 13
</label>
<label>
<input type="checkbox" /> STATGRAPHICS Centurion XVI
</label>
</div>
<button className="btn">Guardar cambios</button>
</div>
</div>
<ProgramSelector/>
),
},
{
@@ -160,7 +73,7 @@ export default function Page() {
label: "Programa por sala",
content: (
<div>
<div className="form-container">
<form className="form-container">
<label htmlFor="salas ">Salas </label>
<select id="salas">
<option value="">Seleccione una sala</option>
@@ -244,8 +157,8 @@ export default function Page() {
</label>
</div>
<button className="btn">Guardar cambios</button>
</div>
<button className="button buttonSearch">Guardar cambios</button>
</form>
</div>
),
},
app/globals.css
+2 -8
View File
@@ -215,7 +215,7 @@ a {
border-radius: 4px;
background-color: #f3f4f6;
width: 100%;
max-width: 400px;
max-width: 450px;
margin-top: 10px;
}
@@ -267,6 +267,7 @@ form {
gap: 10px;
background-color: #f3f4f6;
border-radius: 6px;
flex-wrap: wrap;
}
.toggleButton {
@@ -288,13 +289,6 @@ form {
border-bottom: 1px solid rgb(1, 92, 184);
}
.center {
display: grid;
grid-template-columns: auto 400px;
justify-content: center;
align-items: center;
}
@media (max-width: 800px) {
header {
padding: 6px 16px;