Ergonomie

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%;

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;
+}

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;

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;

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;
     }
 }

SwichGIT/src/index.html

@@ -26,7 +26,7 @@
 		<div id="infosec">
 			<div class="inner">
 				<ul class="activity">
-					<li>
+					<li id="listeinfobtn">
 						<a id="info" href="#popup1">i</a>
 					</li>
 				</ul>
@@ -48,9 +48,9 @@
 				<h2>Les Règles :</h2>
 				<a class="close" href="#">&times;</a>
 				<div class="content">
-					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&eacute chacun de billes et de cerceaux, de 4 couleurs
+					diff&eacuterentes possibles. 16 cartes sont pos&eacutes sur une table et le joueur doit faire superposer
+					des cartes de mani&egravere que chaque bille soit dans le cerceau de m&ecircme couleur d’une autre
 					carte.
 				</div>
 			</div>
@@ -155,7 +155,16 @@
 						<a onclick="creePartie()" id="relancerbtn">
 							<div id="contourbuttonvalider">
 								<div class="bouttonvalider">
-									<h1 id="textjouer">RELANCER</h1>
+									<h1 id="textjouer2">RELANCER</h1>
+								</div>
+							</div>
+						</a>
+					</div>
+					<div id="Redistribution2">
+						<a id="relancerbtn">
+							<div id="contourbuttonvalider">
+								<div class="bouttonvalider2">
+									<h1 id="btnvalider2">VALIDER</h1>
 								</div>
 							</div>
 						</a>

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";