From df67e2e4f76e2c2bd0dd2b237d805338ed2e7e59 Mon Sep 17 00:00:00 2001 From: theo Date: Mon, 16 Nov 2020 11:45:39 +0100 Subject: [PATCH] Ergonomie --- SwichGIT/src/css/PageDaccueil.css | 27 +++++++++++++++---- SwichGIT/src/css/PartieGame.css | 43 +++++++++++++++++++++++++++++++ SwichGIT/src/css/Resp1.css | 10 +++++++ SwichGIT/src/css/Resp2.css | 10 +++++++ SwichGIT/src/css/Resp3.css | 12 +++++++++ SwichGIT/src/index.html | 19 ++++++++++---- SwichGIT/src/js/main.js | 16 ++++++++---- 7 files changed, 122 insertions(+), 15 deletions(-) diff --git a/SwichGIT/src/css/PageDaccueil.css b/SwichGIT/src/css/PageDaccueil.css index 89de8cf..3dbd4eb 100644 --- a/SwichGIT/src/css/PageDaccueil.css +++ b/SwichGIT/src/css/PageDaccueil.css @@ -64,16 +64,16 @@ li { } li:hover { - box-shadow: 0 0 0 7px #B7B7B7; + box-shadow: 0 0 0 7px var(--lightsedonca); + font-size:99%; + position:relative; + right:5%; } li:before { - -webkit-transition: all 0.2s ease; - -moz-transition: all 0.2s ease; - transition: all 0.2s ease; border-radius: 50%; bottom: 0; - box-shadow: 0 0 0 4px #B7B7B7; + box-shadow: 0 0 0 4px var(--lightsedonca); content: ''; left: 0; position: absolute; @@ -156,6 +156,23 @@ li { top: 30%; } +.bouttonvalider:hover { + box-shadow: 0 0 0 8px var(--lightsedonca); + font-size: 99%; + position: relative; + height: 93%; + width:95%; + top: 4%; + transition: box-shadow 0.2s ease; +} + +#bouttonvalider:hover { + box-shadow: 0 0 0 5px var(--lightsedonca); + font-size: 120%; + position: relative; + right: 5%; +} + #pseudoenter { background-color: red; height: 100%; diff --git a/SwichGIT/src/css/PartieGame.css b/SwichGIT/src/css/PartieGame.css index 88d43a8..9d69319 100644 --- a/SwichGIT/src/css/PartieGame.css +++ b/SwichGIT/src/css/PartieGame.css @@ -12,3 +12,46 @@ .retourstp { position: absolute; } + +#Redistribution{ + position:relative; + top:-60%; +} + +#textjouer2 { + position: absolute; + text-align: center; + + font-family: Montserrat, impact, Arial Black; + font-size: 2.5vw; + margin-top: 0.2vw; + margin-left: 0.6vw; + color: var(--lightsedonca); + +} + +#btnvalider2 { + position: relative; + text-align: center; + font-family: Montserrat, impact, Arial Black; + font-size: 2.5vw; + margin-top: 0.2vw; + margin-left: 0.2vw; + color: var(--lightsedonca); +} + +#Redistribution2 { + position: relative; + top: -60%; + left:68%; +} + +.bouttonvalider2:hover { + box-shadow: 0 0 0 9px var(--lightsedonca); + font-size: 120%; + position: relative; + top: 2%; + height: 82%; + width: 96%; + transition: box-shadow 0.2s ease; +} diff --git a/SwichGIT/src/css/Resp1.css b/SwichGIT/src/css/Resp1.css index 1143ed9..79ba472 100644 --- a/SwichGIT/src/css/Resp1.css +++ b/SwichGIT/src/css/Resp1.css @@ -300,6 +300,16 @@ background-color: #B130DE; } + .bouttonvalider2 { + position: absolute; + height: 6.8vw; + width: 22.8vw; + top: 1.1vw; + left: 1.1vw; + border-radius: 30px; + background-color: #00CC66; + } + #textjouer { font-family: Montserrat, impact, Arial Black; position: absolute; diff --git a/SwichGIT/src/css/Resp2.css b/SwichGIT/src/css/Resp2.css index 858e850..3b84e76 100644 --- a/SwichGIT/src/css/Resp2.css +++ b/SwichGIT/src/css/Resp2.css @@ -300,6 +300,16 @@ background-color: #B130DE; } + .bouttonvalider2 { + position: absolute; + height: 6.8vw; + width: 22.8vw; + top: 1.1vw; + left: 1.1vw; + border-radius: 30px; + background-color: #00CC66; + } + #textjouer { font-family: Montserrat, impact, Arial Black; position: absolute; diff --git a/SwichGIT/src/css/Resp3.css b/SwichGIT/src/css/Resp3.css index 2e72a9e..c3962ba 100644 --- a/SwichGIT/src/css/Resp3.css +++ b/SwichGIT/src/css/Resp3.css @@ -300,6 +300,17 @@ background-color: #B130DE; } + + .bouttonvalider2 { + position: absolute; + height: 3.4vw; + width: 11.4vw; + top: 0.3vw; + left: 0.3vw; + border-radius: 30px; + background-color: #00CC66; + } + #textjouer { font-family: Montserrat, impact, Arial Black; position: absolute; @@ -307,5 +318,6 @@ margin-top: 0.2vw; margin-left: 2.7vw; color: var(--lightsedonca); + text-align:center; } } diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html index e157796..49c34e3 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -26,7 +26,7 @@
    -
  • +
  • i
@@ -48,9 +48,9 @@

Les Règles :

×
- Swish : Jeu de 60 cartes composé chacun de billes et de cerceaux, de 4 couleurs - différentes possibles. 16 cartes sont posés sur une table et le joueur doit faire superposer - des cartes de manière que chaque bille soit dans le cerceau de même couleur d’une autre + Swish : Jeu de 60 cartes composé chacun de billes et de cerceaux, de 4 couleurs + différentes possibles. 16 cartes sont posés sur une table et le joueur doit faire superposer + des cartes de manière que chaque bille soit dans le cerceau de même couleur d’une autre carte.
@@ -155,7 +155,16 @@
-

RELANCER

+

RELANCER

+
+
+ +
+
+ +
+
+

VALIDER

 diff --git a/SwichGIT/src/js/main.js b/SwichGIT/src/js/main.js index 150777f..e8bc5aa 100644 --- a/SwichGIT/src/js/main.js +++ b/SwichGIT/src/js/main.js @@ -122,32 +122,38 @@ function journuit() { document.getElementById("imglogo").src = "imgs/swishjour.png"; document.getElementById("imglogo2").src = "imgs/swishjour.png"; - document.getElementById("fondinput").style.backgroundColor = lightsedonca; + //document.getElementById("fondinput").style.backgroundColor = lightsedonca; document.getElementById("contourbuttonvalider").style.backgroundColor = lightsedonca; document.getElementById("textjouer").style.color = lightsedonca; - document.getElementById("textplus").style.color = lightprima; + //document.getElementById("textplus").style.color = lightprima; //changer montagnesfond document.getElementById("mount1").src = "imgs/mount1.png"; document.getElementById("mount2").src = "imgs/mount2.png"; //nuages document.getElementById("cloud").src = "imgs/lightcloud.png"; //changer background color - document.getElementById("containplayers").style.color = lightsedonca; + //document.getElementById("containplayers").style.color = lightsedonca; //maj couleur principales document.documentElement.style.setProperty('--lightprima', lightprima); document.documentElement.style.setProperty('--lightsedonca', lightsedonca); document.documentElement.style.setProperty('--lighttercia', lighttercia); + document.getElementById("info").style.color = lightsedonca; + //document.getElementById("listeinfobtn").style.boxShadow = lightsedonca; } //mode nuit else { + //point info + document.getElementById("info").style.color = darkseconda; + //document.getElementById("listeinfobtn").style.boxShadow = 0,0,0,4,px,darkseconda; + //changer logo swish document.getElementById("imglogo").src = "imgs/swishnuit.png"; document.getElementById("imglogo2").src = "imgs/swishnuit.png"; //bouttonjouer - document.getElementById("fondinput").style.backgroundColor = darkseconda; + //document.getElementById("fondinput").style.backgroundColor = darkseconda; document.getElementById("contourbuttonvalider").style.backgroundColor = darkseconda; document.getElementById("textjouer").style.color = darkseconda; - document.getElementById("textplus").style.color = darkprima; + //document.getElementById("textplus").style.color = darkprima; //changer montagnesfond document.getElementById("mount1").src = "imgs/darkmount1.png"; document.getElementById("mount2").src = "imgs/darkmount2.png";