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;
|
||||
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 {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
.information {
|
||||
display: flex;
|
||||
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 { 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";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
const poppins = Poppins({
|
||||
variable: "--font-poppins", // nombre de la variable CSS
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "600", "700"], // pesos que quieras usar
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Nexus CEDETEC",
|
||||
description: "Nexus CEDETEC - Frontend",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -23,10 +22,19 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`${geistSans.variable} ${geistMono.variable}`}>
|
||||
{children}
|
||||
<html lang="es">
|
||||
<body className={poppins.variable}>
|
||||
<Header />
|
||||
<BarNavigation />
|
||||
<main>
|
||||
<div className="container">
|
||||
<div className="img"></div>
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</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 styles from "./page.module.css";
|
||||
import Login from "./Components/Login/Login";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<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>
|
||||
<Login />
|
||||
);
|
||||
}
|
||||
//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