IO/front-AT
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

add wave

Browse Source
This commit is contained in:
Lino
2025-09-05 14:17:26 -04:00
parent 554fb2c6d9
commit e980b0400c
6 changed files with 87 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Components/BarNavigation/BarNavigation.css
+1
View File
@@ -15,6 +15,7 @@
cursor: pointer;
color: white;
font-weight: bold;
width: 100%;
}
.barNavigation li:hover {
app/Components/BarNavigation/BarNavigation.tsx
+15 -15
View File
@@ -24,14 +24,14 @@ function BarNavigation() {
<ul className={openMenu ? "active" : ""}>
<li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(0)}>Inscripciones</span>
<ul className="containerLinks">
<Link href="/Alta">
<ul className="containerLinks" >
<Link href="/Alta" className="links">
<li >Alta</li>
</Link>
<Link href="/AgregarTiempo" >
<Link href="/AgregarTiempo" className="links">
<li >Agregar Tiempo</li>
</Link>
<Link href="/Inscripciones">
<Link href="/Inscripciones" className="links">
<li>Inscripciones</li>
</Link>
</ul>
@@ -40,22 +40,22 @@ function BarNavigation() {
<li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(1)}>Servicios</span>
<ul>
<Link href="/Impresiones">
<Link href="/Impresiones" className="links">
<li >
Impresiones y Ploteo
</li>
</Link>
<Link href="/AsignacionMesas">
<Link href="/AsignacionMesas" className="links">
<li>
Asignacion de Mesas
</li>
</Link>
<Link href="/AsignacionEquipo">
<Link href="/AsignacionEquipo" className="links">
<li>
Asignacion de Equipos
</li>
</Link>
<Link href="/Monitor">
<Link href="/Monitor" className="links">
<li>
Monitor
</li>
@@ -66,16 +66,16 @@ function BarNavigation() {
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(2)}>Equipo</span>
<ul >
<Link href="/InformacionEquipo">
<Link href="/InformacionEquipo" className="links">
<li>Informacion de Equipos</li>
</Link>
<Link href="/ActivosMantenimiento">
<Link href="/ActivosMantenimiento" className="links">
<li >Activos y en Mantenimiento</li>
</Link>
<Link href="/Mensajes">
<Link href="/Mensajes" className="links">
<li>Mensajes</li>
</Link>
<Link href="/Programas">
<Link href="/Programas" className="links">
<li>Programas</li>
</Link>
</ul>
@@ -85,13 +85,13 @@ function BarNavigation() {
<span onClick={() => toggleSubMenu(3)}>Reportes</span>
<ul>
<Link href="/Recibo">
<Link href="/Recibo" className="links">
<li>Recibo</li>
</Link>
<Link href="/Inscritos">
<Link href="/Inscritos" className="links">
<li>Inscritos</li>
</Link>
<Link href="/BitacoraSanciones">
<Link href="/BitacoraSanciones" className="links">
<li>Bitacora y sanciones</li>
</Link>
</ul>
app/Components/wave.module.css
+53
View File
@@ -0,0 +1,53 @@
.ocean {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30vh;
overflow: hidden;
background: #4fc3f7; /* color del mar */
z-index: -1; /* para que quede atrás del contenido */
}
.wave {
position: absolute;
bottom: 0;
width: 200%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
border-radius: 100% 50%;
animation: waveMove 8s linear infinite;
}
.wave:nth-child(2) {
background: rgba(255, 255, 255, 0.3);
animation-duration: 10s;
animation-delay: -2s;
}
.wave:nth-child(3) {
background: rgba(255, 255, 255, 0.2);
animation-duration: 12s;
animation-delay: -4s;
}
@keyframes waveMove {
0% {
transform: translateX(0) translateY(0);
}
50% {
transform: translateX(-25%) translateY(5%);
}
100% {
transform: translateX(0) translateY(0);
}
}
@media (max-width: 800px) {
.ocean {
background: transparent;
}
.wave {
display: none;
}
}
app/Components/wavesBack.tsx
+12
View File
@@ -0,0 +1,12 @@
'use client';
import styles from './wave.module.css';
export default function WavesBackground() {
return (
<div className={styles.ocean}>
<div className={styles.wave}></div>
<div className={styles.wave}></div>
<div className={styles.wave}></div>
</div>
);
}
app/globals.css
+4 -4
View File
@@ -5,6 +5,7 @@
}
body {
position: relative;
font-family: var(--font-poppins), sans-serif;
display: grid;
grid-template-rows: auto auto 1fr auto;
@@ -106,7 +107,7 @@ footer {
background-position: center;
overflow: hidden;
z-index: -1;
opacity: 0.5;
opacity: 1;
}
.img::after {
@@ -268,12 +269,11 @@ form {
.toggleButton.active {
background-color: #e5e7eb;
color: rgb(1, 92, 184);
border-radius: 4px 4px 0 0;
border-bottom: 1px solid rgb(1, 92, 184);
}
.toggleButton.active {
background-color: #f9fafb;
}
@media(max-width:800px) {
header {
app/layout.tsx
+2
View File
@@ -4,6 +4,7 @@ import Header from "./Components/Header/Header";
import Footer from "./Components/Footer/Footer";
import BarNavigation from "./Components/BarNavigation/BarNavigation";
import "./globals.css";
import WavesBackground from "./Components/wavesBack";
const poppins = Poppins({
variable: "--font-poppins", // nombre de la variable CSS
@@ -31,6 +32,7 @@ export default function RootLayout({
<div className="img"></div>
{children}
</div>
<WavesBackground />
</main>
<Footer />
</body>