diff --git a/pong/static/game.js b/pong/static/game.js index 8c53964..0698013 100644 --- a/pong/static/game.js +++ b/pong/static/game.js @@ -114,7 +114,7 @@ document.addEventListener('DOMContentLoaded', () => { //logo.style.display = 'none'; pongElements.style.display = 'none'; console.log("new button must appear !"); - document.getElementById("post-form-buttons").style.display = 'block'; + document.getElementById("post-form-buttons").style.display = 'inline-block'; //startWebSocketConnection(token); } else { alert('Registration failed. Please try again.'); @@ -140,8 +140,7 @@ document.addEventListener('DOMContentLoaded', () => { token = data.token; } return data.registered; - }quickMatchButton.style.display = 'block'; - tournamentButton.style.display = 'block'; + } async function handleLogin() { const nickname = nicknameInput.value.trim(); @@ -155,7 +154,7 @@ document.addEventListener('DOMContentLoaded', () => { //logo.style.display = 'none'; //pongElements.style.display = 'none'; console.log("new button must appear !"); - document.getElementById("post-form-buttons").style.display = 'block'; + document.getElementById("post-form-buttons").style.display = 'inline-block'; //startWebSocketConnection(token); } else { alert('Authentication failed. Please try again.'); diff --git a/pong/static/index.html b/pong/static/index.html index 81d043e..52649e4 100644 --- a/pong/static/index.html +++ b/pong/static/index.html @@ -6,7 +6,7 @@ Pong Game - + diff --git a/pong/static/styles.css b/pong/static/styles.css index 1b7ef45..fdaee3a 100644 --- a/pong/static/styles.css +++ b/pong/static/styles.css @@ -13,9 +13,9 @@ html { justify-content: center; height: 100%; overflow: hidden; - } + label { margin: 10px 0 5px; } @@ -261,60 +261,59 @@ button:hover { max-width: 80%; } -/* Styles pour la barre de navigation */ + .navbar { - position: absolute; /* Positionne la barre de navigation relativement à son conteneur */ - top: 10px; /* Ajuste la position du menu déroulant par rapport au haut */ - right: 10px; /* Ajuste la position du menu déroulant par rapport à la droite */ + position: absolute; + top: 10px; + right: 10px; padding: 10px; } -/* Styles pour le bouton du menu burger */ .burger-menu { font-size: 24px; background: none; border: none; - color: #00ffff; /* Couleur du texte du bouton */ + color: #00ffff; cursor: pointer; transition: color 0.3s ease; } .burger-menu:hover { - color: #ffffff; /* Couleur du texte au survol */ + color: #ffffff; } -/* Styles pour le menu déroulant */ + .dropdown-content { display: none; position: absolute; - top: 100%; /* Positionne le menu directement sous le bouton */ - right: 0; /* Aligne le menu avec le bouton */ - margin-top: 10px; /* Espace entre le bouton et le menu */ - background-color: #1a1a2e; /* Couleur de fond du menu */ - color: #ffffff; /* Couleur du texte du menu */ + top: 100%; + right: 0; + margin-top: 10px; + background-color: #1a1a2e; + color: #ffffff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); border-radius: 5px; z-index: 1; - width: max-content; /* Ajuste la largeur du menu en fonction du contenu */ + width: max-content; } -/* Affiche le menu déroulant lorsqu'il est actif */ .dropdown-content.show { display: block; } -/* Styles pour les liens du menu déroulant */ + .dropdown-content a { - color: #ffffff; /* Couleur du texte des liens */ + color: #ffffff; padding: 12px 16px; text-decoration: none; display: block; - border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Ligne de séparation entre les éléments */ - transition: background-color 0.3s ease; /* Transition pour le fond au survol */ + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + transition: background-color 0.3s ease; } -/* Styles pour les liens au survol */ + .dropdown-content a:hover { - background-color: #333; /* Couleur de fond au survol */ - color: #00ffff; /* Couleur du texte au survol */ + background-color: #333; + color: #00ffff; } +