first commit
This commit is contained in:
@@ -0,0 +1,13 @@
|
|||||||
|
import SearchUser from "../Components/SearchUser/searchUser";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<section className='containerForm'>
|
||||||
|
<h2 className='title'> ACTIVOS Y EN MANTENIMIENTO</h2>
|
||||||
|
|
||||||
|
<SearchUser/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import SearchUser from "../Components/SearchUser/searchUser";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<section className='containerForm'>
|
||||||
|
<h2 className='title'> AGREGAR TIEMPO </h2>
|
||||||
|
|
||||||
|
<SearchUser/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
'use client'
|
||||||
|
import { useState } from "react";
|
||||||
|
import "../globals.css";
|
||||||
|
import StepNavigator from "../Components/StepNavigator/StepNavigator";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
const [step, setStep] = useState(1);
|
||||||
|
|
||||||
|
const handleNext = (e: any) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (step < 3) setStep(step + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePrev = (e: any) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (step > 1) setStep(step - 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="containerForm">
|
||||||
|
<h1 className="title">ALTA</h1>
|
||||||
|
|
||||||
|
<StepNavigator totalSteps={2}>
|
||||||
|
<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...'
|
||||||
|
/>
|
||||||
|
|
||||||
|
<label className='label'>Nombre</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'>Apellido Materno</label>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
//value={user}
|
||||||
|
//onChange={(e) => setUser(e.target.value)}
|
||||||
|
placeholder='Coloca '
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='containerInput'>
|
||||||
|
<label className='label'>Email</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'>Carrera</label>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
//value={user}
|
||||||
|
//onChange={(e) => setUser(e.target.value)}
|
||||||
|
placeholder='Coloca '
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</StepNavigator>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import SearchUser from "../Components/SearchUser/searchUser";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<section className='containerForm'>
|
||||||
|
<h2 className='title'> ASIGNACION DE EQUIPOS </h2>
|
||||||
|
|
||||||
|
<SearchUser/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
'use client'
|
||||||
|
import { useState } from "react";
|
||||||
|
import SearchUser from "../Components/SearchUser/searchUser";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
const [tiempo, setTiempo] = useState("");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className='containerForm'>
|
||||||
|
<h2 className='title'> ASIGNACION DE MESAS </h2>
|
||||||
|
|
||||||
|
<SearchUser />
|
||||||
|
|
||||||
|
<label className="label">Tiempo</label>
|
||||||
|
<div className="groupInput">
|
||||||
|
<select
|
||||||
|
className="input"
|
||||||
|
value={tiempo}
|
||||||
|
onChange={(e) => setTiempo(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="">-- Selecciona un tiempo --</option>
|
||||||
|
<option value="15">15 minutos</option>
|
||||||
|
<option value="30">30 minutos</option>
|
||||||
|
<option value="45">45 minutos</option>
|
||||||
|
<option value="60">1 hora</option>
|
||||||
|
<option value="90">1 hora 30 minutos</option>
|
||||||
|
<option value="120">2 horas</option>
|
||||||
|
</select>
|
||||||
|
<button
|
||||||
|
className='button buttonSearch'
|
||||||
|
type='submit'
|
||||||
|
>Asignar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,145 @@
|
|||||||
|
.barNavigation {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgb(1, 92, 184);
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barNavigation ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barNavigation li {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barNavigation li:hover {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
color: rgba(0, 61, 121, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.barNavigation ul.active {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuToggle {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuToggle div {
|
||||||
|
width: 25px;
|
||||||
|
height: 3px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subMenu {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
gap: 10px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subMenu ul {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
flex-direction: column;
|
||||||
|
top: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(0, 61, 121, 1);
|
||||||
|
transition: max-height 0.3s ease, opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subMenu.open ul {
|
||||||
|
display: flex;
|
||||||
|
color: rgba(0, 61, 121, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subMenu ul:hover {
|
||||||
|
color: #5b8cc9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subMenu:hover ul {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subMenu li {
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containerLinks{
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
color: white;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
|
||||||
|
.menuToggle {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: end;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuToggle.center {
|
||||||
|
align-items: center;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barNavigation {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barNavigation ul {
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgb(1, 92, 184);
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px 0;
|
||||||
|
align-items: center;
|
||||||
|
display: none;
|
||||||
|
z-index: 1;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barNavigation {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barNavigation li:hover {
|
||||||
|
background-color: rgba(0, 61, 121, 1);
|
||||||
|
color: white;
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subMenu ul {
|
||||||
|
width: 90%;
|
||||||
|
border-radius: 4px;
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(0, 61, 121, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
'use client';
|
||||||
|
import { useState } from "react";
|
||||||
|
import './BarNavigation.css';
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
function BarNavigation() {
|
||||||
|
const [openMenu, setOpenMenu] = useState(false);
|
||||||
|
const [openSubMenu, setOpenSubMenu] = useState<number | null>(null);
|
||||||
|
|
||||||
|
const toggleMenu = () => setOpenMenu(!openMenu);
|
||||||
|
const toggleSubMenu = (index: number) => {
|
||||||
|
setOpenSubMenu(openSubMenu === index ? null : index);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<nav className="barNavigation">
|
||||||
|
<div
|
||||||
|
className={`menuToggle ${openMenu ? 'center' : ''}`}
|
||||||
|
onClick={toggleMenu}>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className={openMenu ? "active" : ""}>
|
||||||
|
<li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`} onClick={() => toggleSubMenu(0)}>
|
||||||
|
Inscripciones
|
||||||
|
<ul className="containerLinks">
|
||||||
|
<Link href="/Alta" className="links">
|
||||||
|
<li >Alta</li>
|
||||||
|
</Link>
|
||||||
|
<Link href="/AgregarTiempo" className="links">
|
||||||
|
<li >Agregar Tiempo</li>
|
||||||
|
</Link>
|
||||||
|
<Link href="/Inscripciones" className="links">
|
||||||
|
<li>Inscripciones</li>
|
||||||
|
</Link>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`} onClick={() => toggleSubMenu(1)}>
|
||||||
|
Servicios
|
||||||
|
<ul>
|
||||||
|
<Link href="/Impresiones" className="links">
|
||||||
|
<li >
|
||||||
|
Impresiones y Ploteo
|
||||||
|
</li>
|
||||||
|
</Link>
|
||||||
|
<Link href="/AsignacionMesas" className="links">
|
||||||
|
<li>
|
||||||
|
Asignacion de Mesas
|
||||||
|
</li>
|
||||||
|
</Link>
|
||||||
|
<Link href="/AsignacionEquipo" className="links">
|
||||||
|
<li>
|
||||||
|
Asignacion de Equipos
|
||||||
|
</li>
|
||||||
|
</Link>
|
||||||
|
<Link href="/Monitor" className="links">
|
||||||
|
<li>
|
||||||
|
Monitor
|
||||||
|
</li>
|
||||||
|
</Link>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`} onClick={() => toggleSubMenu(2)}>
|
||||||
|
Equipo
|
||||||
|
<ul >
|
||||||
|
<Link href="/InformacionEquipo" className="links">
|
||||||
|
<li>Informacion de Equipos</li>
|
||||||
|
</Link>
|
||||||
|
<Link href="/ActivosMantenimiento" className="links">
|
||||||
|
<li >Activos y en Mantenimiento</li>
|
||||||
|
</Link>
|
||||||
|
<Link href="/Mensajes" className="links">
|
||||||
|
<li>Mensajes</li>
|
||||||
|
</Link>
|
||||||
|
<Link href="/Programas" className="links">
|
||||||
|
<li>Programas</li>
|
||||||
|
</Link>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>Reportes</li>
|
||||||
|
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>Quitar sancion</li>
|
||||||
|
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>Cambiar contraseña</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BarNavigation;
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
|
||||||
|
function Footer() {
|
||||||
|
return (
|
||||||
|
<footer>
|
||||||
|
Hecho en México. Todos los derechos reservados 2025.
|
||||||
|
Esta página puede ser reproducida con fines no lucrativos, siempre y cuando no se mutile, se cite la fuente completa y su dirección electrónica. De otra forma, requiere permiso previo por escrito de la institución.
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
.logo {
|
||||||
|
position: relative;
|
||||||
|
filter: invert(1);
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cedetecContainer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 300px;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cedetecContainer::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellowPart {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: 0;
|
||||||
|
left: -20px;
|
||||||
|
width: 30%;
|
||||||
|
height: 50%;
|
||||||
|
min-width: 300px;
|
||||||
|
background-color: #d59f0f;
|
||||||
|
transform: skew(-45deg);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import Image from "next/image";
|
||||||
|
import "./Header.css";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
function Header() {
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<Link href="https://www.unam.mx/" className="center">
|
||||||
|
<Image
|
||||||
|
className="logo"
|
||||||
|
src="/logo_fes.png"
|
||||||
|
alt="Logo FES"
|
||||||
|
width={200}
|
||||||
|
height={50}
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
<div className="yellowPart"></div>
|
||||||
|
<div className="cedetecContainer">
|
||||||
|
<Image
|
||||||
|
src="/cedetec.jpg"
|
||||||
|
alt="Image of CEDETEC"
|
||||||
|
width={300}
|
||||||
|
height={71}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header;
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
.impressions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
'use client'
|
||||||
|
import { useState } from "react";
|
||||||
|
import './Impressions.css'
|
||||||
|
function Impressions() {
|
||||||
|
const [pages, setPages] = useState('');
|
||||||
|
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [alert, setAlert] = useState('');
|
||||||
|
const [showError, setShowError] = useState(false);
|
||||||
|
const [showAlert, setShowAlert] = useState(false);
|
||||||
|
|
||||||
|
// const handlePayment = async () => {
|
||||||
|
// setAlert('')
|
||||||
|
// setError('')
|
||||||
|
// if (!studentData) {
|
||||||
|
// setError('Error busca denuevo al estudiante');
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// if (!pages) {
|
||||||
|
// setError('Ingresa el numero de hojas a imprimir')
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// try {
|
||||||
|
// await axios.post(
|
||||||
|
// `${url}/impressions`,
|
||||||
|
// {
|
||||||
|
// numAccount: numAccount,
|
||||||
|
// pages: parseInt(pages),
|
||||||
|
// cost: parseInt(pages),
|
||||||
|
// },
|
||||||
|
// { headers }
|
||||||
|
// );
|
||||||
|
// handleSearch()
|
||||||
|
// setAlert('Cobro realizado correctamente');
|
||||||
|
// setPages('')
|
||||||
|
// } catch (error) {
|
||||||
|
// const errorMessage = error.response?.data?.error || 'No se encontró el estudiante';
|
||||||
|
|
||||||
|
// if (errorMessage === 'Token inválido') {
|
||||||
|
// handleLogout();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// setError(errorMessage);
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
// handlePayment();
|
||||||
|
}}>
|
||||||
|
|
||||||
|
<div className='impressions'>
|
||||||
|
<div className='groupLabel'>
|
||||||
|
<label className='label'>Costo: $1.00</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='groupInput'>
|
||||||
|
<label className='label'>Hojas:</label>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
value={pages}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
if (/^\d*$/.test(value)) {
|
||||||
|
setPages(value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder='Numero de hojas a imprimir...'
|
||||||
|
inputMode='numeric'
|
||||||
|
pattern='[0-9]*'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='groupLabel'>
|
||||||
|
<label className='label'>Total: {pages && `$${pages}.00`}</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='containerButton'>
|
||||||
|
<button
|
||||||
|
className='button buttonCharge'
|
||||||
|
type='submit'>
|
||||||
|
Cobrar
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{error &&
|
||||||
|
<div className={`messageBox error ${!showError ? 'hidden' : ''}`}>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
{alert &&
|
||||||
|
<div className={`messageBox success ${!showAlert ? 'hidden' : ''}`}>
|
||||||
|
{alert}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Impressions
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
.login {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyeClose,
|
||||||
|
.eyeOpen {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
bottom: -1px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-size: cover;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
import "./Login.css";
|
||||||
|
|
||||||
|
function Login() {
|
||||||
|
return (
|
||||||
|
<section className='containerSection'>
|
||||||
|
|
||||||
|
<form
|
||||||
|
className='login'
|
||||||
|
//onSubmit={(e) => {
|
||||||
|
//e.preventDefault();
|
||||||
|
//handleLogin();
|
||||||
|
//</section>}}
|
||||||
|
>
|
||||||
|
<h2 className='textHeader'>Inicio de sesión</h2>
|
||||||
|
|
||||||
|
<div className='containerInput'>
|
||||||
|
<label className='label'>Usuario</label>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
//value={user}
|
||||||
|
//onChange={(e) => setUser(e.target.value)}
|
||||||
|
placeholder='Coloca tu usuario...'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='containerInput relative'>
|
||||||
|
<label className='label'>Contraseña</label>
|
||||||
|
<input
|
||||||
|
//type={showPassword ? 'text' : 'password'}
|
||||||
|
//value={password}
|
||||||
|
//onChange={(e) => setPassword(e.target.value)}
|
||||||
|
placeholder='Coloca tu contraseña...'
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
//onClick={() => setShowPassword(!showPassword)}
|
||||||
|
//className={showPassword ? 'eyeOpen' : 'eyeClose'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className='button buttonSearch'
|
||||||
|
style={{ maxWidth: '100%', width: '100%' }}
|
||||||
|
type='submit'
|
||||||
|
>Iniciar sesión
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
{/*message &&
|
||||||
|
<div
|
||||||
|
className={`messageBox ${message.includes('exitoso') ? 'success' : 'error'}`}
|
||||||
|
style={{ marginTop: '10px' }}
|
||||||
|
>
|
||||||
|
{message}
|
||||||
|
</div>
|
||||||
|
*/}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Login;
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
'use client'
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import "./Receipt.css"
|
||||||
|
import Selection from "../Selection/Selection";
|
||||||
|
|
||||||
|
function Receipt() {
|
||||||
|
const [folio, setFolio] = useState('');
|
||||||
|
const [amount, setAmount] = useState('');
|
||||||
|
const [date, setDate] = useState('');
|
||||||
|
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [alert, setAlert] = useState('');
|
||||||
|
const [showError, setShowError] = useState(false);
|
||||||
|
const [showAlert, setShowAlert] = useState(false);
|
||||||
|
|
||||||
|
//restrict this month//
|
||||||
|
const day = new Date();
|
||||||
|
const year = day.getFullYear();
|
||||||
|
const month = day.getMonth();
|
||||||
|
const today = day.getDate();
|
||||||
|
|
||||||
|
const minFecha = new Date(year, month, 1).toISOString().split('T')[0];
|
||||||
|
const maxFecha = new Date(year, month, today).toISOString().split('T')[0];
|
||||||
|
//restrict this month//
|
||||||
|
|
||||||
|
//fadeOut alert and error
|
||||||
|
useEffect(() => {
|
||||||
|
if (alert) {
|
||||||
|
setShowAlert(true);
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
setShowAlert(false);
|
||||||
|
setTimeout(() => setAlert(''), 500);
|
||||||
|
}, 6000);
|
||||||
|
return () => clearTimeout(timeout);
|
||||||
|
}
|
||||||
|
}, [alert]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (error) {
|
||||||
|
setShowError(true);
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
setShowError(false);
|
||||||
|
setTimeout(() => setError(''), 500);
|
||||||
|
}, 6000);
|
||||||
|
return () => clearTimeout(timeout);
|
||||||
|
}
|
||||||
|
}, [error]);
|
||||||
|
//fadeOut alert and error//
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
// handleSaveReceipt();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='groupInput'>
|
||||||
|
<label className='label'>Folio:</label>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
value={folio}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
if (/^\d*$/.test(value)) {
|
||||||
|
setFolio(value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder='Numero de folio...'
|
||||||
|
inputMode='numeric'
|
||||||
|
pattern='[0-9]*'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='groupInput'>
|
||||||
|
<label className='label'>Monto:</label>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
value={amount}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
|
||||||
|
if (/^\d*\.?\d*$/.test(value)) {
|
||||||
|
const numericValue = parseFloat(value);
|
||||||
|
|
||||||
|
if (value === '' || (numericValue <= 1000)) {
|
||||||
|
setAmount(value);
|
||||||
|
} else {
|
||||||
|
setAlert('')
|
||||||
|
setError('El monto no puede superar $1000.00')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder='Monto recibido...'
|
||||||
|
inputMode='numeric'
|
||||||
|
pattern="^\d*\.?\d+$"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='groupInput'>
|
||||||
|
<label className='label'>Fecha de Pago:</label>
|
||||||
|
<input
|
||||||
|
type='date'
|
||||||
|
value={date}
|
||||||
|
onChange={(e) => setDate(e.target.value)}
|
||||||
|
min={minFecha}
|
||||||
|
max={maxFecha}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='containerButton'>
|
||||||
|
|
||||||
|
{error &&
|
||||||
|
<div className={`messageBox error ${!showError ? 'hidden' : ''}`}>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
{alert &&
|
||||||
|
<div className={`messageBox success ${!showAlert ? 'hidden' : ''}`}>
|
||||||
|
{alert}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Receipt
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
'use client'
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
function SearchUser() {
|
||||||
|
const [numAccount, setNumAccount] = useState('');
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<form>
|
||||||
|
<label className='label'>No.Cuenta</label>
|
||||||
|
<div className='groupInput'>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
value={numAccount}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
if (/^\d*$/.test(value) && value.length <= 9) {
|
||||||
|
setNumAccount(value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder='Coloca un número de cuenta...'
|
||||||
|
inputMode='numeric'
|
||||||
|
pattern='[0-9]*'
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className='button buttonSearch'
|
||||||
|
type='submit'
|
||||||
|
>Buscar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className='information'>
|
||||||
|
<label><b>No.Cuenta: </b>id_cuenta</label>
|
||||||
|
<label><b>Nombre: </b>nombre</label>
|
||||||
|
<label><b>Carrera: </b>carrera</label>
|
||||||
|
<label><b>Crédito: </b>credito</label>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SearchUser
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
.selection {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectionItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonSelection {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 2px solid #5b8cc9;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonSelection:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
background-color: #d0e1ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonSelection.active {
|
||||||
|
background-color: #5b8cc9;
|
||||||
|
box-shadow: 0 0 10px #5b8cc9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonLabel {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import "./Selection.css";
|
||||||
|
|
||||||
|
function Selection() {
|
||||||
|
const [selected, setSelected] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const options = [
|
||||||
|
{
|
||||||
|
name: "WINDOWS",
|
||||||
|
img: "https://images.icon-icons.com/2235/PNG/512/windows_os_logo_icon_134678.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "MACINTOSH",
|
||||||
|
img: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "LINUX",
|
||||||
|
img: "https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "PROFESORES",
|
||||||
|
img: "https://cdn-icons-png.flaticon.com/512/3135/3135715.png",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleSelect = (optionName: string) => {
|
||||||
|
setSelected(selected === optionName ? null : optionName);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="selection">
|
||||||
|
{options.map((option, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="selectionItem"
|
||||||
|
onClick={() => handleSelect(option.name)}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className={`buttonSelection ${selected === option.name ? "active" : ""}`}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={option.img}
|
||||||
|
alt={option.name.toLowerCase()}
|
||||||
|
height={30}
|
||||||
|
width={30}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<span className="buttonLabel">{option.name}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Selection;
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
.receipt {
|
||||||
|
max-width: 600px;
|
||||||
|
margin-top: 1rem;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #f9fafb;
|
||||||
|
padding: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, ReactNode } from "react";
|
||||||
|
import "./StepNavigator.css"
|
||||||
|
|
||||||
|
interface StepNavigatorProps {
|
||||||
|
totalSteps: number;
|
||||||
|
children: ReactNode[];
|
||||||
|
onFinish?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function StepNavigator({ totalSteps, children, onFinish }: StepNavigatorProps) {
|
||||||
|
const [step, setStep] = useState(1);
|
||||||
|
|
||||||
|
const handleNext = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (step < totalSteps) setStep(step + 1);
|
||||||
|
else if (onFinish) onFinish();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePrev = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (step > 1) setStep(step - 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="receipt">
|
||||||
|
{children[step - 1]}
|
||||||
|
|
||||||
|
<div className="buttonContainer">
|
||||||
|
{step > 1 && (
|
||||||
|
<button
|
||||||
|
onClick={handlePrev}
|
||||||
|
className="button buttonSearch">
|
||||||
|
Atrás
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleNext}
|
||||||
|
className="button buttonSearch"
|
||||||
|
>
|
||||||
|
{step === totalSteps ? "Inscribir" : "Siguiente"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import Receipt from "../Components/Receipt/Receipt";
|
||||||
|
import SearchUser from "../Components/SearchUser/searchUser";
|
||||||
|
import "@/app/globals.css"
|
||||||
|
import Impressions from "../Components/Impressions/impressions";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
const [view, setView] = useState('impresiones');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className='containerForm'>
|
||||||
|
<h2 className='title'> IMPRESIONES Y PLOTEO </h2>
|
||||||
|
<SearchUser />
|
||||||
|
<section className="toggleSection">
|
||||||
|
|
||||||
|
<div className='toggleGroup'>
|
||||||
|
<button
|
||||||
|
className={`toggleButton ${view === 'impresiones' ? 'active' : ''}`}
|
||||||
|
onClick={() => setView('impresiones')}
|
||||||
|
>
|
||||||
|
Impresiones
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`toggleButton ${view === 'recibo' ? 'active' : ''}`}
|
||||||
|
onClick={() => setView('recibo')}
|
||||||
|
>
|
||||||
|
Recibo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{view === 'impresiones' && (
|
||||||
|
<Impressions />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{view === 'recibo' && (
|
||||||
|
<>
|
||||||
|
<Receipt />
|
||||||
|
<button
|
||||||
|
className="button buttonSearch">
|
||||||
|
Buscar
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
|
||||||
|
)}
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import SearchUser from "../Components/SearchUser/searchUser";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<section className='containerForm'>
|
||||||
|
<h2 className='title'> INFORMACION DE EQUIPOS </h2>
|
||||||
|
|
||||||
|
<SearchUser/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Receipt from "../Components/Receipt/Receipt";
|
||||||
|
import SearchUser from "../Components/SearchUser/searchUser";
|
||||||
|
import Selection from "../Components/Selection/Selection";
|
||||||
|
import StepNavigator from "../Components/StepNavigator/StepNavigator";
|
||||||
|
import "./inscriptions.css"
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<section className='containerForm'>
|
||||||
|
<h2 className='title'> INSCRIPCION </h2>
|
||||||
|
<SearchUser />
|
||||||
|
|
||||||
|
<StepNavigator totalSteps={2} onFinish={() => console.log()}>
|
||||||
|
<Selection/>
|
||||||
|
<Receipt />
|
||||||
|
</StepNavigator>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import SearchUser from "../Components/SearchUser/searchUser";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<section className='containerForm'>
|
||||||
|
<h2 className='title'> MENSAJES </h2>
|
||||||
|
|
||||||
|
<SearchUser/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import SearchUser from "../Components/SearchUser/searchUser";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<section className='containerForm'>
|
||||||
|
<h2 className='title'> MONITOR DE MAQUINAS DISPONIBLES </h2>
|
||||||
|
|
||||||
|
<SearchUser/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import SearchUser from "../Components/SearchUser/searchUser";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<section className='containerForm'>
|
||||||
|
<h2 className='title'> PROGRAMAS </h2>
|
||||||
|
|
||||||
|
<SearchUser/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//IO
|
||||||
+305
-31
@@ -1,42 +1,316 @@
|
|||||||
:root {
|
|
||||||
--background: #ffffff;
|
|
||||||
--foreground: #171717;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--background: #0a0a0a;
|
|
||||||
--foreground: #ededed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
max-width: 100vw;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: var(--foreground);
|
|
||||||
background: var(--background);
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-poppins), sans-serif;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto auto 1fr auto;
|
||||||
|
min-height: 100dvh;
|
||||||
|
width: 100dvw;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 5px 40px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
z-index: 1;
|
||||||
|
height: 57px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header::after {
|
||||||
|
content: "";
|
||||||
|
top: 0;
|
||||||
|
left: -40px;
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgba(0, 61, 121, 1);
|
||||||
|
height: 100%;
|
||||||
|
width: 30%;
|
||||||
|
min-width: 300px;
|
||||||
|
transform: skew(45deg);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
header::before {
|
||||||
|
content: "";
|
||||||
|
top: 0;
|
||||||
|
left: -20px;
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgb(1, 92, 184);
|
||||||
|
height: 100%;
|
||||||
|
width: 30%;
|
||||||
|
min-width: 300px;
|
||||||
|
transform: skew(45deg);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: rgba(0, 61, 121, 1);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 400px;
|
||||||
|
align-items: center;
|
||||||
|
justify-items: center;
|
||||||
|
position: relative;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin: 1.5rem auto;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 1100px;
|
||||||
|
height: 520px;
|
||||||
|
min-height: 520px;
|
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containerSection {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
height: 400px;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 400px;
|
||||||
|
height: 615px;
|
||||||
|
background-image: url('/rock.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: -1;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 200px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border: 1px solid #cfcfcf;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #cfcfcf;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupInput {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.button {
|
||||||
|
padding: 0.5rem 1.25rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
border: none;
|
||||||
|
color: #ffffff;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
max-width: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonSearch {
|
||||||
|
background-color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonSearch:hover {
|
||||||
|
background-color: #1d4ed8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonCharge {
|
||||||
|
background-color: #16a34a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonCharge:hover {
|
||||||
|
background-color: #15803d;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.buttonContainer {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containerInput {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
.information {
|
||||||
html {
|
display: flex;
|
||||||
color-scheme: dark;
|
flex-direction: column;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containerForm {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: start;
|
||||||
|
border-bottom: 1px solid #cfcfcf;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggleSection {
|
||||||
|
max-width: 600px;
|
||||||
|
margin-top: 1rem;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggleGroup {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggleButton {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggleButton.active {
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggleButton.active {
|
||||||
|
background-color: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width:800px) {
|
||||||
|
header {
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
max-height: 600px;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
right: 50%;
|
||||||
|
transform: translateX(50%);
|
||||||
|
width: 600px;
|
||||||
|
opacity: 1;
|
||||||
|
height: 650px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img::before,
|
||||||
|
.img::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img::before {
|
||||||
|
left: 0;
|
||||||
|
background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
.img::after {
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(to left, #f9f9f9, rgba(128, 128, 128, 0));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media(max-height:960px) {
|
||||||
|
.container {
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
+21
-13
@@ -1,20 +1,19 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Poppins } from "next/font/google";
|
||||||
|
import Header from "./Components/Header/Header";
|
||||||
|
import Footer from "./Components/Footer/Footer";
|
||||||
|
import BarNavigation from "./Components/BarNavigation/BarNavigation";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const poppins = Poppins({
|
||||||
variable: "--font-geist-sans",
|
variable: "--font-poppins", // nombre de la variable CSS
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const geistMono = Geist_Mono({
|
|
||||||
variable: "--font-geist-mono",
|
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
|
weight: ["400", "600", "700"], // pesos que quieras usar
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Create Next App",
|
title: "Nexus CEDETEC",
|
||||||
description: "Generated by create next app",
|
description: "Nexus CEDETEC - Frontend",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
@@ -23,10 +22,19 @@ export default function RootLayout({
|
|||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="es">
|
||||||
<body className={`${geistSans.variable} ${geistMono.variable}`}>
|
<body className={poppins.variable}>
|
||||||
{children}
|
<Header />
|
||||||
|
<BarNavigation />
|
||||||
|
<main>
|
||||||
|
<div className="container">
|
||||||
|
<div className="img"></div>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
//IO
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
export default function NotFound() {
|
||||||
|
return(
|
||||||
|
<section className="containerSection">
|
||||||
|
<h1>404 - Página no encontrada</h1>
|
||||||
|
<p>Lo sentimos, la página que buscas no existe.</p>
|
||||||
|
<p>Por favor, verifica la URL o regresa a la página principal.</p>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
//IO
|
||||||
@@ -1,167 +0,0 @@
|
|||||||
.page {
|
|
||||||
--gray-rgb: 0, 0, 0;
|
|
||||||
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
|
|
||||||
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
|
|
||||||
|
|
||||||
--button-primary-hover: #383838;
|
|
||||||
--button-secondary-hover: #f2f2f2;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 20px 1fr 20px;
|
|
||||||
align-items: center;
|
|
||||||
justify-items: center;
|
|
||||||
min-height: 100svh;
|
|
||||||
padding: 80px;
|
|
||||||
gap: 64px;
|
|
||||||
font-family: var(--font-geist-sans);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.page {
|
|
||||||
--gray-rgb: 255, 255, 255;
|
|
||||||
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
|
|
||||||
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
|
|
||||||
|
|
||||||
--button-primary-hover: #ccc;
|
|
||||||
--button-secondary-hover: #1a1a1a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 32px;
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main ol {
|
|
||||||
font-family: var(--font-geist-mono);
|
|
||||||
padding-left: 0;
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 24px;
|
|
||||||
letter-spacing: -0.01em;
|
|
||||||
list-style-position: inside;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main li:not(:last-of-type) {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main code {
|
|
||||||
font-family: inherit;
|
|
||||||
background: var(--gray-alpha-100);
|
|
||||||
padding: 2px 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctas {
|
|
||||||
display: flex;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctas a {
|
|
||||||
appearance: none;
|
|
||||||
border-radius: 128px;
|
|
||||||
height: 48px;
|
|
||||||
padding: 0 20px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
transition:
|
|
||||||
background 0.2s,
|
|
||||||
color 0.2s,
|
|
||||||
border-color 0.2s;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 20px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.primary {
|
|
||||||
background: var(--foreground);
|
|
||||||
color: var(--background);
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.secondary {
|
|
||||||
border-color: var(--gray-alpha-200);
|
|
||||||
min-width: 158px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
grid-row-start: 3;
|
|
||||||
display: flex;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer img {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enable hover only on non-touch devices */
|
|
||||||
@media (hover: hover) and (pointer: fine) {
|
|
||||||
a.primary:hover {
|
|
||||||
background: var(--button-primary-hover);
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.secondary:hover {
|
|
||||||
background: var(--button-secondary-hover);
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-offset: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.page {
|
|
||||||
padding: 32px;
|
|
||||||
padding-bottom: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main ol {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctas {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctas a {
|
|
||||||
font-size: 14px;
|
|
||||||
height: 40px;
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.secondary {
|
|
||||||
min-width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.logo {
|
|
||||||
filter: invert();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+3
-90
@@ -1,95 +1,8 @@
|
|||||||
import Image from "next/image";
|
import Login from "./Components/Login/Login";
|
||||||
import styles from "./page.module.css";
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<Login />
|
||||||
<main className={styles.main}>
|
|
||||||
<Image
|
|
||||||
className={styles.logo}
|
|
||||||
src="/next.svg"
|
|
||||||
alt="Next.js logo"
|
|
||||||
width={180}
|
|
||||||
height={38}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<ol>
|
|
||||||
<li>
|
|
||||||
Get started by editing <code>app/page.tsx</code>.
|
|
||||||
</li>
|
|
||||||
<li>Save and see your changes instantly.</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<div className={styles.ctas}>
|
|
||||||
<a
|
|
||||||
className={styles.primary}
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
className={styles.logo}
|
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel logomark"
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
Deploy now
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className={styles.secondary}
|
|
||||||
>
|
|
||||||
Read our docs
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<footer className={styles.footer}>
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/file.svg"
|
|
||||||
alt="File icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Learn
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/window.svg"
|
|
||||||
alt="Window icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Examples
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/globe.svg"
|
|
||||||
alt="Globe icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Go to nextjs.org →
|
|
||||||
</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
//IO
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 447 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 519 KiB |
Reference in New Issue
Block a user