From 994ee9b6a6486f1d7882ca332cd3c2ca31c903d1 Mon Sep 17 00:00:00 2001 From: IO420 <320154041@pcpuma.acatlan.unam.mx> Date: Wed, 24 Sep 2025 17:51:54 -0600 Subject: [PATCH] added new animations --- app/(private)/layout.tsx | 3 +- app/Components/AlertBox/AlertBox.css | 39 ++++++++++++++---- .../BarNavigation/BarNavigation.css | 15 ++++++- .../ChangePassword/changePassword.tsx | 2 +- app/Components/Header/Header.module.css | 10 ++++- app/Components/Impressions/impressions.tsx | 2 +- app/Components/Login/Login.tsx | 4 +- app/Components/Logout/Logout.css | 6 +-- app/Components/Receipt/Receipt.tsx | 2 +- app/globals.css | 16 ++++++- public/rock2.jpg | Bin 0 -> 550016 bytes 11 files changed, 75 insertions(+), 24 deletions(-) create mode 100644 public/rock2.jpg diff --git a/app/(private)/layout.tsx b/app/(private)/layout.tsx index 64368d2..4eb8832 100644 --- a/app/(private)/layout.tsx +++ b/app/(private)/layout.tsx @@ -1,5 +1,4 @@ import { ReactNode } from "react"; -import { PrivateRoute } from "../Routes/PrivateRoute"; import BarNavigation from "../Components/BarNavigation/BarNavigation"; import Logout from "../Components/Logout/Logout"; @@ -8,7 +7,7 @@ export default function PrivateLayout({ children }: { children: ReactNode }) {
- +
{children}
diff --git a/app/Components/AlertBox/AlertBox.css b/app/Components/AlertBox/AlertBox.css index f33818d..894252f 100644 --- a/app/Components/AlertBox/AlertBox.css +++ b/app/Components/AlertBox/AlertBox.css @@ -1,3 +1,26 @@ +/* Animaciones */ +@keyframes slideInLeft { + 0% { + opacity: 0; + transform: translateX(-100%); + } + 100% { + opacity: 0.9; + transform: translateX(0); + } +} + +@keyframes slideOutRight { + 0% { + opacity: 0.9; + transform: translateX(0); + } + 100% { + opacity: 0; + transform: translateX(100%); + } +} + .messageBox { display: flex; position: absolute; @@ -6,20 +29,20 @@ font-weight: bold; font-size: 2rem; text-align: center; - opacity: 1; z-index: 100; top: 0; left: 0; - width: 100%; + max-width: 500px; max-height: min-content; - opacity: 0.9; - transition: opacity 0.5s ease, transform 0.5s ease; + opacity: 0; +} + +.messageBox:not(.hidden) { + animation: slideInLeft 0.5s ease forwards; } .messageBox.hidden { - opacity: 0; - pointer-events: none; - transition: opacity 1s ease-out,transform 0.5 ease; + animation: slideOutRight 0.5s ease forwards; } .success { @@ -32,4 +55,4 @@ background-color: #ffcdd2; color: #000000; border: 1px solid #ef9a9a; -} \ No newline at end of file +} diff --git a/app/Components/BarNavigation/BarNavigation.css b/app/Components/BarNavigation/BarNavigation.css index b7d7cea..0f3debf 100644 --- a/app/Components/BarNavigation/BarNavigation.css +++ b/app/Components/BarNavigation/BarNavigation.css @@ -62,13 +62,19 @@ } .subMenu ul { - display: none; + opacity: 0; + max-height: 0; position: absolute; flex-direction: column; top: 100%; width: 100%; background-color: #003e79; - transition: color 0.3s ease, opacity 0.3s ease; + transition: color 0.3s ease; + transition: opacity 0.4s ease, max-height 0.4s ease; +} + +.subMenu ul a { + display: none; } .subMenu.open ul { @@ -81,6 +87,11 @@ } .subMenu:hover ul { + opacity: 1; + max-height: 500px; +} + +.subMenu:hover ul a { display: flex; } diff --git a/app/Components/ChangePassword/changePassword.tsx b/app/Components/ChangePassword/changePassword.tsx index 620a57b..95b95a6 100644 --- a/app/Components/ChangePassword/changePassword.tsx +++ b/app/Components/ChangePassword/changePassword.tsx @@ -42,7 +42,7 @@ export default function ChangePassword() {
{ setconfirmNewPass(e.target.value); diff --git a/app/Components/Header/Header.module.css b/app/Components/Header/Header.module.css index 464ed6f..f1773e4 100644 --- a/app/Components/Header/Header.module.css +++ b/app/Components/Header/Header.module.css @@ -26,10 +26,16 @@ content: ""; top: 0; left: -20px; - width: 50%; + width: 65%; height: 100%; min-width: 300px; - background: #bd8c01; + background: linear-gradient(to right, #bd8c01, #f9f9f9); transform: skew(-45deg); z-index: 0; } + +@media (max-width: 800px) { + .yellowPart { + background: #bd8c01; + } +} diff --git a/app/Components/Impressions/impressions.tsx b/app/Components/Impressions/impressions.tsx index b0ad63d..4c55d7f 100644 --- a/app/Components/Impressions/impressions.tsx +++ b/app/Components/Impressions/impressions.tsx @@ -84,7 +84,7 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {