diff --git a/app/ActivosMantenimiento/page.tsx b/app/ActivosMantenimiento/page.tsx new file mode 100644 index 0000000..db4f0a6 --- /dev/null +++ b/app/ActivosMantenimiento/page.tsx @@ -0,0 +1,13 @@ +import SearchUser from "../Components/SearchUser/searchUser"; + +export default function Page() { + return ( +
+

ACTIVOS Y EN MANTENIMIENTO

+ + +
+ + ); +} +//IO \ No newline at end of file diff --git a/app/AgregarTiempo/page.tsx b/app/AgregarTiempo/page.tsx new file mode 100644 index 0000000..f2c8c83 --- /dev/null +++ b/app/AgregarTiempo/page.tsx @@ -0,0 +1,13 @@ +import SearchUser from "../Components/SearchUser/searchUser"; + +export default function Page() { + return ( +
+

AGREGAR TIEMPO

+ + +
+ + ); +} +//IO \ No newline at end of file diff --git a/app/Alta/page.tsx b/app/Alta/page.tsx new file mode 100644 index 0000000..6e74634 --- /dev/null +++ b/app/Alta/page.tsx @@ -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 ( +
+

ALTA

+ + +
+ + setUser(e.target.value)} + placeholder='Coloca un número de cuenta...' + /> + + + setUser(e.target.value)} + placeholder='Coloca ' + /> + + + setUser(e.target.value)} + placeholder='Coloca ' + /> + + + setUser(e.target.value)} + placeholder='Coloca ' + /> +
+ +
+ + setUser(e.target.value)} + placeholder='Coloca ' + /> + + + setUser(e.target.value)} + placeholder='Coloca ' + /> + + + setUser(e.target.value)} + placeholder='Coloca ' + /> +
+ +
+ ); +} +//IO \ No newline at end of file diff --git a/app/AsignacionEquipo/page.tsx b/app/AsignacionEquipo/page.tsx new file mode 100644 index 0000000..c430b5e --- /dev/null +++ b/app/AsignacionEquipo/page.tsx @@ -0,0 +1,13 @@ +import SearchUser from "../Components/SearchUser/searchUser"; + +export default function Page() { + return ( +
+

ASIGNACION DE EQUIPOS

+ + +
+ + ); +} +//IO \ No newline at end of file diff --git a/app/AsignacionMesas/page.tsx b/app/AsignacionMesas/page.tsx new file mode 100644 index 0000000..bf78da8 --- /dev/null +++ b/app/AsignacionMesas/page.tsx @@ -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 ( +
+

ASIGNACION DE MESAS

+ + + + +
+ + +
+ +
+ + ); +} +//IO \ No newline at end of file diff --git a/app/Components/BarNavigation/BarNavigation.css b/app/Components/BarNavigation/BarNavigation.css new file mode 100644 index 0000000..11a9902 --- /dev/null +++ b/app/Components/BarNavigation/BarNavigation.css @@ -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); + } + +} \ No newline at end of file diff --git a/app/Components/BarNavigation/BarNavigation.tsx b/app/Components/BarNavigation/BarNavigation.tsx new file mode 100644 index 0000000..e48f449 --- /dev/null +++ b/app/Components/BarNavigation/BarNavigation.tsx @@ -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(null); + + const toggleMenu = () => setOpenMenu(!openMenu); + const toggleSubMenu = (index: number) => { + setOpenSubMenu(openSubMenu === index ? null : index); + }; + return ( + + ); +} + +export default BarNavigation; diff --git a/app/Components/Footer/Footer.tsx b/app/Components/Footer/Footer.tsx new file mode 100644 index 0000000..9fd3865 --- /dev/null +++ b/app/Components/Footer/Footer.tsx @@ -0,0 +1,12 @@ + +function Footer() { + return ( + + ) +} + +export default Footer; +//IO \ No newline at end of file diff --git a/app/Components/Header/Header.css b/app/Components/Header/Header.css new file mode 100644 index 0000000..86d608c --- /dev/null +++ b/app/Components/Header/Header.css @@ -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; +} diff --git a/app/Components/Header/Header.tsx b/app/Components/Header/Header.tsx new file mode 100644 index 0000000..1d5f8f7 --- /dev/null +++ b/app/Components/Header/Header.tsx @@ -0,0 +1,31 @@ +import Image from "next/image"; +import "./Header.css"; +import Link from "next/link"; + +function Header() { + return ( +
+ + Logo FES + +
+
+ Image of CEDETEC +
+
+ ); +} + +export default Header; +//IO \ No newline at end of file diff --git a/app/Components/Impressions/Impressions.css b/app/Components/Impressions/Impressions.css new file mode 100644 index 0000000..fd07ab9 --- /dev/null +++ b/app/Components/Impressions/Impressions.css @@ -0,0 +1,6 @@ +.impressions { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 1rem; +} \ No newline at end of file diff --git a/app/Components/Impressions/impressions.tsx b/app/Components/Impressions/impressions.tsx new file mode 100644 index 0000000..040e10d --- /dev/null +++ b/app/Components/Impressions/impressions.tsx @@ -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 ( +
{ + e.preventDefault(); + // handlePayment(); + }}> + +
+
+ +
+ +
+ + { + const value = e.target.value; + if (/^\d*$/.test(value)) { + setPages(value); + } + }} + placeholder='Numero de hojas a imprimir...' + inputMode='numeric' + pattern='[0-9]*' + /> +
+ +
+ +
+ +
+ + + {error && +
+ {error} +
+ } + {alert && +
+ {alert} +
+ } +
+
+
+ ) +} + +export default Impressions \ No newline at end of file diff --git a/app/Components/Login/Login.css b/app/Components/Login/Login.css new file mode 100644 index 0000000..68ed2d6 --- /dev/null +++ b/app/Components/Login/Login.css @@ -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; +} diff --git a/app/Components/Login/Login.tsx b/app/Components/Login/Login.tsx new file mode 100644 index 0000000..b0d2bcb --- /dev/null +++ b/app/Components/Login/Login.tsx @@ -0,0 +1,59 @@ +import "./Login.css"; + +function Login() { + return ( +
+ +
{ + //e.preventDefault(); + //handleLogin(); + //
}} + > +

Inicio de sesión

+ +
+ + setUser(e.target.value)} + placeholder='Coloca tu usuario...' + /> +
+ +
+ + setPassword(e.target.value)} + placeholder='Coloca tu contraseña...' + /> + setShowPassword(!showPassword)} + //className={showPassword ? 'eyeOpen' : 'eyeClose'} + /> +
+ + + + {/*message && +
+ {message} +
+ */} + + ); +} + +export default Login; \ No newline at end of file diff --git a/app/Components/Receipt/Receipt.css b/app/Components/Receipt/Receipt.css new file mode 100644 index 0000000..e69de29 diff --git a/app/Components/Receipt/Receipt.tsx b/app/Components/Receipt/Receipt.tsx new file mode 100644 index 0000000..bcaf967 --- /dev/null +++ b/app/Components/Receipt/Receipt.tsx @@ -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 ( +
{ + e.preventDefault(); + // handleSaveReceipt(); + }} + > +
+ + { + const value = e.target.value; + if (/^\d*$/.test(value)) { + setFolio(value); + } + }} + placeholder='Numero de folio...' + inputMode='numeric' + pattern='[0-9]*' + /> +
+ +
+ + { + 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+$" + /> +
+ +
+ + setDate(e.target.value)} + min={minFecha} + max={maxFecha} + /> +
+ +
+ + {error && +
+ {error} +
+ } + {alert && +
+ {alert} +
+ } +
+
+ ) +} + +export default Receipt +//IO \ No newline at end of file diff --git a/app/Components/SearchUser/searchUser.css b/app/Components/SearchUser/searchUser.css new file mode 100644 index 0000000..e69de29 diff --git a/app/Components/SearchUser/searchUser.tsx b/app/Components/SearchUser/searchUser.tsx new file mode 100644 index 0000000..ca07352 --- /dev/null +++ b/app/Components/SearchUser/searchUser.tsx @@ -0,0 +1,42 @@ +'use client' +import { useState } from "react"; + +function SearchUser() { + const [numAccount, setNumAccount] = useState(''); + return ( + <> +
+ +
+ { + 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]*' + /> + +
+
+ +
+ + + + +
+ + ) +} + +export default SearchUser \ No newline at end of file diff --git a/app/Components/Selection/Selection.css b/app/Components/Selection/Selection.css new file mode 100644 index 0000000..9f84044 --- /dev/null +++ b/app/Components/Selection/Selection.css @@ -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; +} diff --git a/app/Components/Selection/Selection.tsx b/app/Components/Selection/Selection.tsx new file mode 100644 index 0000000..0ab749e --- /dev/null +++ b/app/Components/Selection/Selection.tsx @@ -0,0 +1,57 @@ +'use client'; + +import { useState } from "react"; +import "./Selection.css"; + +function Selection() { + const [selected, setSelected] = useState(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 ( +
+ {options.map((option, index) => ( +
handleSelect(option.name)} + > + + {option.name} +
+ ))} +
+ ); +} + +export default Selection; diff --git a/app/Components/StepNavigator/StepNavigator.css b/app/Components/StepNavigator/StepNavigator.css new file mode 100644 index 0000000..fae51a9 --- /dev/null +++ b/app/Components/StepNavigator/StepNavigator.css @@ -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; +} \ No newline at end of file diff --git a/app/Components/StepNavigator/StepNavigator.tsx b/app/Components/StepNavigator/StepNavigator.tsx new file mode 100644 index 0000000..9197eca --- /dev/null +++ b/app/Components/StepNavigator/StepNavigator.tsx @@ -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) => { + e.preventDefault(); + if (step < totalSteps) setStep(step + 1); + else if (onFinish) onFinish(); + }; + + const handlePrev = (e: React.MouseEvent) => { + e.preventDefault(); + if (step > 1) setStep(step - 1); + }; + + return ( +
+ {children[step - 1]} + +
+ {step > 1 && ( + + )} + + +
+
+ ); +} diff --git a/app/Impresiones/page.tsx b/app/Impresiones/page.tsx new file mode 100644 index 0000000..9ab2463 --- /dev/null +++ b/app/Impresiones/page.tsx @@ -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 ( +
+

IMPRESIONES Y PLOTEO

+ +
+ +
+ + +
+ + {view === 'impresiones' && ( + + )} + + {view === 'recibo' && ( + <> + + + + + )} + +
+
+ ); +} +//IO \ No newline at end of file diff --git a/app/InformacionEquipo/page.tsx b/app/InformacionEquipo/page.tsx new file mode 100644 index 0000000..875e864 --- /dev/null +++ b/app/InformacionEquipo/page.tsx @@ -0,0 +1,13 @@ +import SearchUser from "../Components/SearchUser/searchUser"; + +export default function Page() { + return ( +
+

INFORMACION DE EQUIPOS

+ + +
+ + ); +} +//IO \ No newline at end of file diff --git a/app/Inscripciones/inscriptions.css b/app/Inscripciones/inscriptions.css new file mode 100644 index 0000000..e69de29 diff --git a/app/Inscripciones/page.tsx b/app/Inscripciones/page.tsx new file mode 100644 index 0000000..1541352 --- /dev/null +++ b/app/Inscripciones/page.tsx @@ -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 ( +
+

INSCRIPCION

+ + + console.log()}> + + + + +
+ + ); +} +//IO \ No newline at end of file diff --git a/app/Mensajes/page.tsx b/app/Mensajes/page.tsx new file mode 100644 index 0000000..5edf534 --- /dev/null +++ b/app/Mensajes/page.tsx @@ -0,0 +1,13 @@ +import SearchUser from "../Components/SearchUser/searchUser"; + +export default function Page() { + return ( +
+

MENSAJES

+ + +
+ + ); +} +//IO \ No newline at end of file diff --git a/app/Monitor/page.tsx b/app/Monitor/page.tsx new file mode 100644 index 0000000..0dcd0f9 --- /dev/null +++ b/app/Monitor/page.tsx @@ -0,0 +1,13 @@ +import SearchUser from "../Components/SearchUser/searchUser"; + +export default function Page() { + return ( +
+

MONITOR DE MAQUINAS DISPONIBLES

+ + +
+ + ); +} +//IO \ No newline at end of file diff --git a/app/Programas/page.tsx b/app/Programas/page.tsx new file mode 100644 index 0000000..3ffe784 --- /dev/null +++ b/app/Programas/page.tsx @@ -0,0 +1,13 @@ +import SearchUser from "../Components/SearchUser/searchUser"; + +export default function Page() { + return ( +
+

PROGRAMAS

+ + +
+ + ); +} +//IO \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index e3734be..317347b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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 + } +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 42fc323..2f07190 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -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 ( - - - {children} + + +
+ +
+
+
+ {children} +
+
+