CIDWA/front-Censo
13
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Merge branch 'Lino' of https://github.com/jls846/front-censo into Sarabia

Browse Source
This commit is contained in:
jls846
2025-10-23 16:36:25 -06:00
parent 9511e0679b 198568920f
commit d009b059bb
9 changed files with 107 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.tsx
+15 -3
View File
@@ -3,10 +3,22 @@ import { Inter, Montserrat } from "next/font/google";
import "../app/styles/base/_globales.scss"; // si tienes estilos globales
// Carga optimizada de fuentes
const inter = Inter({ subsets: ["latin"], weight: ["400", "700"], variable: "--font-inter" });
const montserrat = Montserrat({ subsets: ["latin"], weight: ["400", "700"], variable: "--font-montserrat" });
const inter = Inter({
subsets: ["latin"],
weight: ["400", "700"],
variable: "--font-inter",
});
const montserrat = Montserrat({
subsets: ["latin"],
weight: ["400", "700"],
variable: "--font-montserrat",
});
export default function RootLayout({ children }: { children: React.ReactNode }) {
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="es" className={`${inter.variable} ${montserrat.variable}`}>
<body>
src/app/page.tsx
+5 -40
View File
@@ -1,41 +1,6 @@
"use client";
import Login from "@/components/Login";
import "../app/styles/base/_globales.scss";
import { useState } from "react";
import { useRouter } from "next/navigation";
import "../app/styles/base/_globales.scss"
import "../app/styles/layout/login.scss";
export default function Login() {
const router = useRouter();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const mockUsers = [
{ email: "admin@escuela.com", password: "1234" },
{ email: "usuario@escuela.com", password: "abcd" },
];
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const user = mockUsers.find(u => u.email === email && u.password === password);
if (user) {
localStorage.setItem("loggedIn", "true");
router.push("/dashboard");
} else {
setError("Usuario o contraseña incorrectos");
}
};
return (
<div className="login-container">
<h2>Iniciar sesión</h2>
{error && <p className="error">{error}</p>}
<form onSubmit={handleSubmit}>
<input type="email" placeholder="Correo" value={email} onChange={(e) => setEmail(e.target.value)} required />
<input type="password" placeholder="Contraseña" value={password} onChange={(e) => setPassword(e.target.value)} required />
<button type="submit">Ingresar</button>
</form>
</div>
);
}
export default function page() {
return <Login />;
}
src/app/styles/base/_globales.scss
+13 -11
View File
@@ -4,7 +4,7 @@ html {
scroll-padding-top: 0rem;
}
*,
*,
*:before,
*:after {
margin: 0;
@@ -13,10 +13,14 @@ html {
}
body {
font-family: 'Inter', sans-serif;
background-color: #f5f5f7;
font-family: "Inter", sans-serif; /* 👈 Fuente principal */
font-style: normal;
font-size: 2rem;
font-optical-sizing: auto;
min-height: 100dvh;
width: 100%;
max-width: 100vw;
&.overflow-hidden {
overflow: hidden;
@@ -32,25 +36,23 @@ a {
text-decoration: none;
}
h1, h2, h3 {
h1,
h2,
h3 {
margin: 0 0 5rem 0;
font-weight: 900;
font-family: 'Montserrat', sans-serif; /* 👈 Títulos con Montserrat */
font-family: "Montserrat", sans-serif; /* 👈 Títulos con Montserrat */
}
h1 {
font-size: 4rem;
font-size: 2rem;
}
h2 {
font-size: 4.6rem;
font-size: 3rem;
}
h3 {
font-size: 6rem;
font-size: 4rem;
text-align: center;
}
body > section {
padding: 10rem 0;
}
src/app/styles/layout/BarNavigation.scss
-9
View File
@@ -24,10 +24,6 @@
font-size: 1.5rem;
}
.barNavigation li:hover {
background-color: #bd8c01;
}
.barNavigation ul.active {
display: flex;
width: 100%;
@@ -109,11 +105,6 @@
font-size: 1.5rem;
}
.subMenu:hover > span,
.subMenu > a:hover > span {
color: white;
}
.containerLinks {
padding: 0 !important;
border-radius: 0 0 4px 4px;
src/app/styles/layout/header.module.scss
+6 -6
View File
@@ -1,6 +1,5 @@
.logo {
position: relative;
filter: invert(1);
z-index: 3;
margin: 5px;
}
@@ -34,9 +33,10 @@
z-index: 0;
}
.header {
background-color: #fff;
display: grid;
grid-template-columns: auto 1fr;
padding: 0 40px;
padding: 0 10px;
position: relative;
z-index: 1;
height: 90px;
@@ -45,11 +45,11 @@
.header::after {
content: "";
top: 0;
left: -40px;
left: -60px;
position: absolute;
background-color: #003e79;
height: 100%;
min-width: 300px;
min-width: 400px;
transform: skew(45deg);
z-index: 2;
}
@@ -57,12 +57,12 @@
.header::before {
content: "";
top: 0;
left: -20px;
left: -40px;
position: absolute;
background-color: rgb(1, 92, 184);
height: 100%;
width: 10%;
min-width: 300px;
min-width: 400px;
transform: skew(45deg);
z-index: 2;
}
src/app/styles/layout/login.scss
+17 -7
View File
@@ -1,13 +1,20 @@
.containerGrid {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100%;
margin: 0 100px;
}
.login-container {
width: 300px;
width: 400px;
margin: 100px auto;
padding: 30px;
border: 1px solid #ccc;
border-radius: 10px;
background: #f8f9fa;
padding: 1.5rem;
text-align: center;
h2 { margin-bottom: 20px; color: #004aad; }
h2 {
margin-bottom: 20px;
color: #bd8c01;
}
input {
width: 100%;
@@ -27,5 +34,8 @@
cursor: pointer;
}
.error { color: red; margin-bottom: 10px; }
.error {
color: red;
margin-bottom: 10px;
}
}
src/components/BarNavigation.tsx
+5 -67
View File
@@ -23,76 +23,14 @@ function BarNavigation() {
</div>
<ul className={openMenu ? "active" : ""}>
<li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(0)}>Inscripciónes</span>
<ul className="containerLinks" onClick={toggleMenu}>
<Link href="/AgregarTiempo" className="links">
<li>Agregar Tiempo</li>
</Link>
<Link href="/Inscripcion" className="links">
<li>Inscripción Usuario</li>
</Link>
</ul>
</li>
<li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(1)}>Servicios</span>
<ul onClick={toggleMenu}>
<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" : ""}`}>
<span onClick={() => toggleSubMenu(2)}>Equipo</span>
<ul onClick={toggleMenu}>
<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 === 3 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(3)}>Reportes</span>
<ul onClick={toggleMenu}>
<Link href="/Reportes" className="links">
<li>Reportes</li>
</Link>
<Link href="/Inscritos" className="links">
<li>Inscritos</li>
</Link>
<Link href="/BitacoraSanciones" className="links">
<li>Bitacora y sanciones</li>
</Link>
</ul>
</li>
<li className="subMenu" onClick={toggleMenu}>
<Link href="/QuitarSancion" className="links">
<span>Quitar sanción</span>
<Link href="/Escanear" className="links">
<span>Escanear</span>
</Link>
</li>
<li className="subMenu" onClick={toggleMenu}>
<Link href="/CambiarPass" className="links">
<span> Cambiar contraseña</span>
<Link href="/AgregarEquipo" className="links">
<span>Agregar equipo</span>
</Link>
</li>
</ul>
@@ -101,4 +39,4 @@ function BarNavigation() {
}
export default BarNavigation;
//IO
//IO
src/components/Login.tsx
+43
View File
@@ -0,0 +1,43 @@
"use client";
import { useState } from "react";
import "../app/styles/layout/login.scss";
export default function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
};
return (
<section className="containerGrid">
<div className="login-container">
<h2>Iniciar sesión</h2>
{error && <p className="error">{error}</p>}
<form onSubmit={handleSubmit}>
<label>Usuario</label>
<input
type="email"
placeholder="Correo"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<label>Contraseña</label>
<input
type="password"
placeholder="Contraseña"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button type="submit">Ingresar</button>
</form>
</div>
</section>
);
}
src/components/header.tsx
+3 -3
View File
@@ -20,8 +20,8 @@ function Header() {
className={header.logo}
src="/logo-blanco.png"
alt="Logo FES"
width={200}
height={50}
width={250}
height={60}
/>
</Link>
<div className={header.yellowPart}></div>
@@ -43,4 +43,4 @@ function Header() {
}
export default Header;
//IO
//IO