From 0b537d1e83e3f7a4218bb7402c9dabedfb4b80a7 Mon Sep 17 00:00:00 2001 From: IO420 <320154041@pcpuma.acatlan.unam.mx> Date: Wed, 24 Sep 2025 14:05:51 -0600 Subject: [PATCH] added new style --- .../BarNavigation/BarNavigation.css | 7 +- .../ChangePassword/changePassword.tsx | 142 ++++++++---------- app/Components/Footer/Footer.module.css | 60 ++++---- app/Components/Header/Header.module.css | 48 +++--- app/globals.css | 17 ++- app/layout.tsx | 6 +- app/lib/changePass.ts | 15 ++ app/lib/postImpressions.ts | 2 +- 8 files changed, 150 insertions(+), 147 deletions(-) create mode 100644 app/lib/changePass.ts diff --git a/app/Components/BarNavigation/BarNavigation.css b/app/Components/BarNavigation/BarNavigation.css index 35b79c6..fe017fe 100644 --- a/app/Components/BarNavigation/BarNavigation.css +++ b/app/Components/BarNavigation/BarNavigation.css @@ -1,6 +1,6 @@ .barNavigation { text-align: center; - background-color: rgb(1, 92, 184); + background-color: #003e79; padding: 0 20px; display: flex; width: 100%; @@ -12,6 +12,7 @@ display: flex; justify-content: space-around; width: 100%; + gap: 10px; } .barNavigation li { @@ -24,7 +25,7 @@ } .barNavigation li:hover { - background-color: #d59f0f; + background-color: #bd8c01; } .barNavigation ul.active { @@ -67,7 +68,7 @@ flex-direction: column; top: 100%; width: 100%; - background-color: rgb(1, 92, 184); + background-color: #003e79; transition: color 0.3s ease, opacity 0.3s ease; } diff --git a/app/Components/ChangePassword/changePassword.tsx b/app/Components/ChangePassword/changePassword.tsx index 96d2d2d..7284b98 100644 --- a/app/Components/ChangePassword/changePassword.tsx +++ b/app/Components/ChangePassword/changePassword.tsx @@ -1,84 +1,74 @@ +"use client"; +import { useState } from "react"; -function ChangePassword() { - return ( -
+export default function ChangePassword() { + const [pass, setPass] = useState(""); + const [newPass, setNewPass] = useState(""); + const [confirmNewPass, setconfirmNewPass] = useState(""); -
{ - //e.preventDefault(); - //handleLogin(); - //
}} - > + const handleChangePass = (e: React.FormEvent) => { + e.preventDefault; + const data = { pass, newPass, confirmNewPass }; + console.log(data); + }; -
- - setPassword(e.target.value)} - placeholder='Coloca tu contraseña...' - /> - setShowPassword(!showPassword)} - //className={showPassword ? 'eyeOpen' : 'eyeClose'} - /> -
+ return ( +
+ +
+ + { + setPass(e.target.value); + }} + /> + +
-
- - setPassword(e.target.value)} - placeholder='Coloca tu contraseña...' - /> - setShowPassword(!showPassword)} - //className={showPassword ? 'eyeOpen' : 'eyeClose'} - /> -
+
+ + { + setNewPass(e.target.value); + }} + /> + +
-
- - setPassword(e.target.value)} - placeholder='Coloca tu contraseña...' - /> - setShowPassword(!showPassword)} - //className={showPassword ? 'eyeOpen' : 'eyeClose'} - /> -
+
+ + { + setconfirmNewPass(e.target.value); + }} + /> + +
-
- +
+ - -
- - {/*message && -
- {message} -
- */} -
- ) + + + + + ); } - -export default ChangePassword \ No newline at end of file diff --git a/app/Components/Footer/Footer.module.css b/app/Components/Footer/Footer.module.css index 54d9bb8..0b1166b 100644 --- a/app/Components/Footer/Footer.module.css +++ b/app/Components/Footer/Footer.module.css @@ -1,37 +1,37 @@ .yellowPart { - position: absolute; - content: ""; - top: 0; - left: -50px; - width: 20%; - height: 100%; - min-width: 300px; - background: linear-gradient(to left, #003d79, #d59f0f); - transform: skew(45deg); - z-index: 1; + position: absolute; + content: ""; + top: 0; + left: -50px; + width: 20%; + height: 100%; + min-width: 300px; + background: linear-gradient(to left, #003e79, #bd8c01); + transform: skew(45deg); + z-index: 1; } .yellowPartOpuest { - position: absolute; - content: ""; - top: 0; - right: -50px; - width: 20%; - height: 100%; - min-width: 300px; - background: linear-gradient(to right, #003d79, #d59f0f); - transform: skew(-45deg); - z-index: 1; + position: absolute; + content: ""; + top: 0; + right: -50px; + width: 20%; + height: 100%; + min-width: 300px; + background: linear-gradient(to right, #003d79, #bd8c01); + transform: skew(-45deg); + z-index: 1; } -@media(max-width:800px) { - .yellowPart { - width: 5%; - left: -150px; - } +@media (max-width: 800px) { + .yellowPart { + width: 5%; + left: -150px; + } - .yellowPartOpuest { - width: 5%; - right: -150px; - } -} \ No newline at end of file + .yellowPartOpuest { + width: 5%; + right: -150px; + } +} diff --git a/app/Components/Header/Header.module.css b/app/Components/Header/Header.module.css index 855b651..464ed6f 100644 --- a/app/Components/Header/Header.module.css +++ b/app/Components/Header/Header.module.css @@ -1,35 +1,35 @@ .logo { - position: relative; - filter: invert(1); - z-index: 3; - margin: 5px; + position: relative; + filter: invert(1); + z-index: 3; + margin: 5px; } .cedetecContainer { - position: absolute; - top: 0; - right: 0; - width: 300px; - height: 100%; - z-index: -1; + 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)); + 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: 50%; - height: 100%; - min-width: 300px; - background: #d59f0f; - transform: skew(-45deg); - z-index: 0; + position: absolute; + content: ""; + top: 0; + left: -20px; + width: 50%; + height: 100%; + min-width: 300px; + background: #bd8c01; + transform: skew(-45deg); + z-index: 0; } diff --git a/app/globals.css b/app/globals.css index 3d302aa..fadded1 100644 --- a/app/globals.css +++ b/app/globals.css @@ -42,7 +42,7 @@ header::after { top: 0; left: -40px; position: absolute; - background-color: rgba(0, 61, 121, 1); + background-color: #003e79; height: 100%; width: 30%; min-width: 300px; @@ -69,7 +69,7 @@ footer { justify-content: center; text-align: center; padding: 10px; - background-color: rgba(0, 61, 121, 1); + background-color: #003e79; z-index: 0; overflow: hidden; } @@ -101,7 +101,7 @@ footer p { border: 1px solid #d1d5db; border-radius: 4px; width: 90%; - max-width: 1150px; + max-width: 1500px; height: 600px; min-height: 520px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); @@ -127,9 +127,9 @@ footer p { position: absolute; top: 0; right: 0; - width: 400px; + width: 725px; height: 615px; - background-image: url("/rock.jpg"); + background-image: url("https://www.acatlan.unam.mx/images/fes_05.jpg"); background-size: cover; background-position: center; overflow: hidden; @@ -360,7 +360,7 @@ table tr { .centerGrid { display: grid; - grid-template-columns: auto 400px; + grid-template-columns: auto 725px; justify-content: center; align-items: center; } @@ -411,8 +411,8 @@ table tr { justify-content: flex-start; align-items: center; width: 100%; - height: 600px; - max-height: 600px; + height: 650px; + max-height: 650px; border-radius: 0; } @@ -421,6 +421,7 @@ table tr { } .img { + background-image: url("/rock.jpg"); right: 50%; transform: translateX(50%); width: 600px; diff --git a/app/layout.tsx b/app/layout.tsx index 3173972..fe7789d 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -29,11 +29,7 @@ export default function RootLayout({
-
- - {children} - -
+
{children}