front-end updated

src/main/resources/static/css/background.css

@@ -0,0 +1,15 @@
+html, body {
+    margin: 0;
+    height: 100%;
+    overflow: hidden; /* Evita barras de desplazamiento */
+}
+
+#particle-canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background: linear-gradient(to bottom, rgb(10, 10, 50) 0%,rgb(60, 10, 60) 100%);
+}

src/main/resources/static/css/custom.css

@@ -6,6 +6,7 @@ html {
 body {
     /* Margin bottom by footer height */
     margin-bottom: 60px;
+    color: #fff;
 }
 footer {
     position: absolute;
@@ -19,3 +20,21 @@ footer {
 .bg-primary {
     background-color: rgb(1, 85, 20) !important;
 }
+
+
+/* Estilo personalizado para el botón */
+.btn-custom, .page-link {
+    color: #fff;
+    background-color: transparent;
+    border: 2px solid #fff;
+}
+
+.btn-custom:hover, .page-link:hover {
+    background-color: #fff;
+    color: #000;
+}
+
+.table-hover {
+    color: #ffffff;
+    text-align:center;
+}

src/main/resources/static/css/footer.css

@@ -1,26 +1,39 @@
-/* footer.css */
-
-/* Estilo para el pie de página */
+/* Estilo del footer */
 .footer {
     position: absolute;
     bottom: 0;
     min-height: 75px;
     width: 100%;
     margin-top: 10%; /* Eliminar margen */
-    background: linear-gradient(45deg, #283048, #586776); /* Gradiente de fondo */
-    color: #fff; /* Texto blanco */
     padding: 0; /* Eliminar relleno */
     text-align: center; /* Alineación del texto */
     display: flex; /* Usar flexbox para centrar verticalmente */
     align-items: center; /* Centrar verticalmente */
+
+    background-color: transparent !important; /* Hace que el footer sea transparente */
 }
 
-/* Estilo para el texto del pie de página */
 .footer .container {
     max-width: 960px; /* Ancho máximo del contenido */
     margin: 0 auto; /* Centrar el contenido */
 }
 
-.bg-primary {
-    background-color: transparent !important;
+/* Estilo para los enlaces del footer */
+.footer .nav-link {
+    color: white !important; /* Cambia el color del texto del enlace a blanco */
+}
+
+.footer .nav-link:hover {
+    color: rgba(255, 255, 255, 0.7) !important; /* Cambia el color del texto del enlace cuando se pasa el mouse */
+}
+
+/* Estilo para el texto centrado del footer */
+.footer .text-center {
+    color: white !important; /* Cambia el color del texto a blanco */
+}
+
+.footer .nav-link:hover {
+    color: rgba(255, 255, 255, 0.7) !important; /* Cambia el color del texto del enlace cuando se pasa el mouse */
 }
+
+

src/main/resources/static/css/nav.css

@@ -1,60 +1,41 @@
-/* nav.css */
-
-/* Estilo para el menú de navegación */
+/* Estilo del navbar */
 .navbar {
-    background: linear-gradient(45deg, #283048, #586776); /* Gradiente de fondo */
-   /* border-bottom: 1px solid #333; /* Borde inferior */
+    background-color: transparent !important; /* Hace que el navbar sea transparente */
 }
 
-/* Estilo para el botón del menú desplegable */
-.navbar-toggler {
-    border: none;
-    background-color: transparent; /* Fondo transparente */
+.navbar-nav .nav-link {
+    color: white !important; /* Cambia el color del texto del enlace a blanco */
 }
 
-/* Estilo para el ícono del botón del menú desplegable */
-.navbar-toggler-icon {
-    background-image: url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>'); /* Ícono blanco */
+.navbar-nav .nav-link:hover {
+    color: rgba(255, 255, 255, 0.7) !important; /* Cambia el color del texto del enlace cuando se pasa el mouse */
 }
 
-/* Estilo para los elementos de la barra de navegación */
-.navbar-nav .nav-link {
-    color: #fff; /* Texto blanco */
-    font-size: 16px;
-    padding: 0.5rem 1rem;
-    transition: color 0.3s ease-in-out;
+.navbar-toggler-icon {
+    background-color: white !important; /* Cambia el color del icono del toggler a blanco */
 }
 
-/* Estilo para los elementos de la barra de navegación al pasar el ratón */
-.navbar-nav .nav-link:hover {
-    color: #ccc; /* Texto gris claro al pasar el ratón */
+.navbar-toggler {
+    border-color: white !important; /* Cambia el color del borde del toggler a blanco */
 }
 
-/* Estilo para los menús desplegables */
+/* Estilo para los desplegables */
 .dropdown-menu {
-    background-color: #1a1a1a; /* Color de fondo más oscuro */
+    color: #fff;
+    background-color: transparent;
+    border: 2px solid #fff;
 }
 
-/* Estilo para los elementos dentro de los menús desplegables */
 .dropdown-item {
-    color: #fff; /* Texto blanco */
-    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+    color: white;
 }
 
-/* Estilo para los elementos dentro de los menús desplegables al pasar el ratón */
 .dropdown-item:hover {
-    background-color: #333; /* Fondo más oscuro al pasar el ratón */
+    background-color: #fff;
+    color: #000;
 }
 
-/* Animación para los menús desplegables */
-.dropdown-menu {
-    display: none;
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-}
 
-.dropdown:hover .dropdown-menu {
-    display: block;
-    opacity: 1;
-}
+
+
 

src/main/resources/static/script/background.js

@@ -0,0 +1,108 @@
+// modified version of random-normal
+function normalPool(o){var r=0;do{var a=Math.round(normal({mean:o.mean,dev:o.dev}));if(a<o.pool.length&&a>=0)return o.pool[a];r++}while(r<100)}function randomNormal(o){if(o=Object.assign({mean:0,dev:1,pool:[]},o),Array.isArray(o.pool)&&o.pool.length>0)return normalPool(o);var r,a,n,e,l=o.mean,t=o.dev;do{r=(a=2*Math.random()-1)*a+(n=2*Math.random()-1)*n}while(r>=1);return e=a*Math.sqrt(-2*Math.log(r)/r),t*e+l}
+
+const NUM_PARTICLES = 350;
+const PARTICLE_SIZE = 4; // View heights
+const SPEED = 20000; // Milliseconds
+
+let particles = [];
+
+function rand(low, high) {
+    return Math.random() * (high - low) + low;
+}
+
+function createParticle(canvas) {
+    const colour = {
+        r: 0, // Mantener tono azul
+        g: randomNormal({ mean: 100, dev: 20 }),
+        b: 255, // Mantener tono azul
+        a: rand(0, 0.5), // Opacidad entre 0.5 y 1
+    };
+    return {
+        x: -2,
+        y: -2,
+        diameter: Math.max(0, randomNormal({ mean: PARTICLE_SIZE, dev: PARTICLE_SIZE / 2 })),
+        duration: randomNormal({ mean: SPEED, dev: SPEED * 0.1 }),
+        amplitude: randomNormal({ mean: 16, dev: 2 }),
+        offsetY: randomNormal({ mean: 0, dev: 10 }),
+        arc: Math.PI * 2,
+        startTime: performance.now() - rand(0, SPEED),
+        colour: `rgba(${colour.r}, ${colour.g}, ${colour.b}, ${colour.a})`,
+    };
+}
+
+
+
+function moveParticle(particle, canvas, time) {
+    const progress = ((time - particle.startTime) % particle.duration) / particle.duration;
+    return {
+        ...particle,
+        x: progress,
+        y: ((Math.sin(progress * particle.arc) * particle.amplitude) + particle.offsetY),
+    };
+}
+
+function drawParticle(particle, canvas, ctx) {
+    canvas = document.getElementById('particle-canvas');
+    const vh = canvas.height / 100;
+
+    ctx.fillStyle = particle.colour;
+    ctx.font = `${particle.diameter * vh}px serif`;
+    ctx.fillText("?", particle.x * canvas.width, particle.y * vh + (canvas.height / 2));
+}
+
+
+function draw(time, canvas, ctx) {
+    // Move particles
+    particles.forEach((particle, index) => {
+        particles[index] = moveParticle(particle, canvas, time);
+    })
+
+    // Clear the canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw the particles
+    particles.forEach((particle) => {
+        drawParticle(particle, canvas, ctx);
+    })
+
+    // Schedule next frame
+    requestAnimationFrame((time) => draw(time, canvas, ctx));
+}
+
+function initializeCanvas() {
+    let canvas = document.getElementById('particle-canvas');
+    canvas.width = canvas.offsetWidth * window.devicePixelRatio;
+    canvas.height = canvas.offsetHeight * window.devicePixelRatio;
+    let ctx = canvas.getContext("2d");
+
+    window.addEventListener('resize', () => {
+        canvas.width = canvas.offsetWidth * window.devicePixelRatio;
+        canvas.height = canvas.offsetHeight * window.devicePixelRatio;
+        ctx = canvas.getContext("2d");
+    })
+
+    return [canvas, ctx];
+}
+
+function startAnimation() {
+    const [canvas, ctx] = initializeCanvas();
+
+    // Create a bunch of particles
+    for (let i = 0; i < NUM_PARTICLES; i++) {
+        particles.push(createParticle(canvas));
+    }
+
+    requestAnimationFrame((time) => draw(time, canvas, ctx));
+};
+
+// Start animation when document is loaded
+(function () {
+    if (document.readystate !== 'loading') {
+        startAnimation();
+    } else {
+        document.addEventListener('DOMContentLoaded', () => {
+            startAnimation();
+        })
+    }
+}());

src/main/resources/templates/error.html

@@ -4,6 +4,9 @@
 <body>
 <nav th:replace="~{fragments/nav}"></nav>
 
+<canvas id="particle-canvas"></canvas>
+<script src="/script/background.js"> </script>
+
 <div class="container mt-5">
     <h2 class="text-danger" th:text="#{error.page.title}"></h2>
     <div class="alert alert-danger" role="alert">

src/main/resources/templates/fragments/head.html

@@ -16,8 +16,9 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <!-- Nuestra CSS -->
-    <link rel="stylesheet" href="/css/style.css" />
+    <link rel="stylesheet" href="/css/custom.css" />
+    <link rel="stylesheet" href="/css/background.css" />
     <link rel="stylesheet" href="/css/nav.css" />
     <link rel="stylesheet" href="/css/footer.css" />
-    <script src="/script/languages.js"> </script>
-</head>
+     <script src="/script/languages.js"> </script>
+ </head>

src/main/resources/templates/index.html

@@ -3,11 +3,17 @@
 <head th:replace="~{fragments/head}"></head>
 <body>
 <nav th:replace="~{fragments/nav}"></nav>
-<div class="container" style="text-align: center">
-    <h2 th:text="#{index.heading}" ></h2>
-    <p th:text="#{index.subtitle}"></p>
-    <button type="button" class="btn btn-primary" th:text="#{index.button}"></button>
+<canvas id="particle-canvas"></canvas>
+<script src="/script/background.js"> </script>
+<div class="container-fluid d-flex justify-content-center align-items-center text-center text-white" style="height: 80vh;">
+    <div class="row">
+        <div class="col-md-12">
+            <h2 class="display-4 mb-4" th:text="#{index.heading}"></h2>
+            <p class="lead mb-4" th:text="#{index.subtitle}"></p>
+            <button type="button" class="btn btn-custom" th:text="#{index.button}"></button>
+        </div>
+    </div>
 </div>
 <footer th:replace="~{fragments/footer}"></footer>
 </body>
-</html>
+</html>