From 5ca718d99ffa91d7c262b03c87f97a1c55b0ff38 Mon Sep 17 00:00:00 2001 From: RicardoDiNu Date: Fri, 8 Mar 2024 02:17:28 +0100 Subject: [PATCH] front-end updated --- src/main/resources/static/css/background.css | 15 +++ src/main/resources/static/css/custom.css | 19 +++ src/main/resources/static/css/footer.css | 29 +++-- src/main/resources/static/css/nav.css | 57 +++------ src/main/resources/static/css/style.css | 65 ----------- .../resources/static/script/background.js | 108 ++++++++++++++++++ src/main/resources/templates/error.html | 3 + .../resources/templates/fragments/head.html | 7 +- src/main/resources/templates/index.html | 16 ++- src/main/resources/templates/player/home.html | 4 + .../resources/templates/player/login.html | 6 +- .../resources/templates/player/signup.html | 6 +- .../templates/ranking/globalRanking.html | 4 + .../templates/ranking/playerRanking.html | 4 + 14 files changed, 222 insertions(+), 121 deletions(-) create mode 100644 src/main/resources/static/css/background.css delete mode 100644 src/main/resources/static/css/style.css create mode 100644 src/main/resources/static/script/background.js diff --git a/src/main/resources/static/css/background.css b/src/main/resources/static/css/background.css new file mode 100644 index 00000000..0dbd1671 --- /dev/null +++ b/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%); +} diff --git a/src/main/resources/static/css/custom.css b/src/main/resources/static/css/custom.css index b4adbc86..60bb097e 100644 --- a/src/main/resources/static/css/custom.css +++ b/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; +} diff --git a/src/main/resources/static/css/footer.css b/src/main/resources/static/css/footer.css index 453deca2..fad31081 100644 --- a/src/main/resources/static/css/footer.css +++ b/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 */ } + + diff --git a/src/main/resources/static/css/nav.css b/src/main/resources/static/css/nav.css index 96983c07..adbbf3bf 100644 --- a/src/main/resources/static/css/nav.css +++ b/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,'); /* Í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; -} + + diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css deleted file mode 100644 index f59ae47a..00000000 --- a/src/main/resources/static/css/style.css +++ /dev/null @@ -1,65 +0,0 @@ -/* Sticky footer styles-------------------------------------------------- */ -html { - position: relative; - min-height: 100%; -} - -/* style.css */ - -/* Estilo para el contenedor principal */ -.container { - max-width: 960px; /* Ancho máximo del contenido */ - margin: 5% auto; /* Centrar el contenido y agregar un margen superior e inferior */ -} - -.container-fluid { - margin: 5% auto; /* Centrar el contenido y agregar un margen superior e inferior */ -} - -/* Estilo para los títulos */ -h2 { - color: #283048; /* Color de texto azul oscuro */ -} - -/* Estilo para los títulos */ -h3 { - color: #283048; /* Color de texto azul oscuro */ -} - -/* Estilo para las etiquetas 'span' dentro de los párrafos */ -p span { - font-weight: bold; /* Texto en negrita */ -} - -/* Estilo para los campos de entrada */ -.form-control { - border: 1px solid #ced4da; /* Borde gris */ - border-radius: 4px; /* Borde redondeado */ - padding: 10px; /* Agregar relleno */ -} - -/* Estilo para los labels */ -.control-label { - color: #283048; /* Color de texto azul oscuro */ -} - -/* Estilo para los mensajes de error */ -.text-danger { - color: #721c24; /* Color de texto rojo oscuro */ -} - -/* Estilo para el botón de envío */ -.btn-primary { - background-color: #283048; /* Color de fondo azul oscuro */ - border-color: #283048; /* Color del borde */ - color: #fff; /* Texto blanco */ - padding: 10px 20px; /* Agregar relleno */ - border-radius: 4px; /* Borde redondeado */ - cursor: pointer; /* Cambiar el cursor al pasar el ratón */ -} - -/* Estilo para el botón de envío al pasar el ratón */ -.btn-primary:hover { - background-color: #1c2530; /* Color de fondo azul más oscuro */ - border-color: #1c2530; /* Color del borde más oscuro */ -} diff --git a/src/main/resources/static/script/background.js b/src/main/resources/static/script/background.js new file mode 100644 index 00000000..1aab4905 --- /dev/null +++ b/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=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(); + }) + } +}()); diff --git a/src/main/resources/templates/error.html b/src/main/resources/templates/error.html index 846af549..3a51fe76 100644 --- a/src/main/resources/templates/error.html +++ b/src/main/resources/templates/error.html @@ -4,6 +4,9 @@ + + +