diff --git a/src/css/style.css b/src/css/style.css index 9fdd04c..6994aaa 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -27,50 +27,212 @@ body{ -ms-user-select: none; /* IE 10+ */ user-select: none; } -/* versions mobiles, tablette à faire*/ - -.logo img{ - position: absolute; - width: 12vw; - left: 44vw; - top: 13%; - z-index: 11; -} -.mounts img { - position: absolute; - height: 100%; - width: 100%; - pointer-events: none; - margin-left: -10px; -} -#contourbuttonvalider{ -position: absolute; -border-radius: 45px; -left: 9.2vw; -top: 5.5vw; -height: 4vw; -width: 12vw; -background-color: var(--lightsedonca); -z-index: 15; +/*Demi Ecran*/ +@media screen and (max-width: 960px) and (min-height: 600px) { + .flex-item { + background: var(--lightsedonca); + width: 15vw; + height: 18vw; + border-radius: 2vw; + padding-right: 0.4vw; + padding-left: 0.4vw; + padding-bottom: 0.8vw; + padding-top: 0.4vw; + list-style: none; + display: flex; + + margin-right: 1.75vw; + margin-left: 1.75vw; + + -webkit-flex-flow: row wrap; + justify-content: space-around; + } + + .item-form { + width: 4vw; + padding-left: 0.1vw; + margin-top: 0.5vw; + height: 4vw; + border-radius: 10px; + background-color: var(--lighttercia); + } + + .containcards{ + height: 87vh; + overflow-x:auto; + display: flex; + flex-wrap: wrap; + padding-left: 10vw; + padding-top: 2.5vw; + } + + .logop2 img { + width: 20vh; + padding-top: 1vh; + position: relative; + left: 38vw; + } + + .txt{ + position: absolute; + font-family: Arial Black; + color: var(--lightprima); + font-size: 2.5vw; + left: 1vw; + top : -1vh; + } + + .logo img{ + position: absolute; + width: 25vw; + left: 38vw; + top: 13%; + z-index: 11; + } + + .mounts img { + position: absolute; + height: 100%; + width: 100%; + pointer-events: none; + margin-left: -1vw; + margin-top: -1vw; + object-fit: cover; + } + + #contourbuttonvalider{ + position: absolute; + border-radius: 45px; + left: 3vw; + top: 5.5vw; + height: 9vw; + width: 25vw; + background-color: var(--lightsedonca); + z-index: 15; + } + + .bouttonvalider{ + position: absolute; + height: 6.8vw; + width: 22.8vw; + top: 1.1vw; + left: 1.1vw; + border-radius: 30px; + background-color: #B130DE; + } + #textjouer{ + font-family: Montserrat, impact, Arial Black; + position: absolute; + font-size: 5vw; + margin-top: 0.2vw; + margin-left: 5.5vw; + color: var(--lightsedonca); + } + +} + +/*Ecran*/ +@media screen and (min-width: 960px) { + .flex-item { + background: var(--lightsedonca); + width: 10vw; + height: 15vw; + border-radius: 2vw; + padding-right: 0.4vw; + padding-left: 0.4vw; + padding-bottom: 0.8vw; + padding-top: 0.4vw; + list-style: none; + display: flex; + + margin-right: 0.4vw; + margin-left: 0.4vw; + + -webkit-flex-flow: row wrap; + justify-content: space-around; + } + + .item-form { + width: 3vw; + padding-left: 0.1vw; + margin-top: 0.5vw; + height: 3vw; + border-radius: 10px; + background-color: var(--lighttercia); + } + + .containcards{ + height: 87vh; + overflow-x:auto; + display: flex; + flex-wrap: wrap; + padding-left: 3vw; + padding-top: 2.5vw; + } + + .logop2 img { + width: 20vh; + padding-top: 1vh; + position: relative; + left: 43.5vw; + } + + + .txt{ + position: absolute; + font-family: Arial Black; + color: var(--lightprima); + font-size: 1.5vw; + left: 0.4vw; + top : -1.6vh; + } + + .logo img{ + position: absolute; + width: 12vw; + left: 44vw; + top: 13%; + z-index: 11; + } + + .mounts img { + position: absolute; + height: 100%; + width: 100%; + pointer-events: none; + margin-left: -10px; + } + + #contourbuttonvalider{ + position: absolute; + border-radius: 45px; + left: 9.2vw; + top: 5.5vw; + height: 4vw; + width: 12vw; + background-color: var(--lightsedonca); + z-index: 15; + } + + .bouttonvalider{ + position: absolute; + height: 3.4vw; + width: 11.4vw; + top: 0.3vw; + left: 0.3vw; + border-radius: 30px; + background-color: #B130DE; + } + #textjouer{ + font-family: Montserrat, impact, Arial Black; + position: absolute; + font-size: 2.5vw; + margin-top: 0.2vw; + margin-left: 2.7vw; + color: var(--lightsedonca); + } } -.bouttonvalider{ - position: absolute; - height: 3.4vw; - width: 11.4vw; - top: 0.3vw; - left: 0.3vw; - border-radius: 30px; - background-color: #B130DE; -} -#textjouer{ - font-family: Montserrat, impact, Arial Black; - position: absolute; - font-size: 2.5vw; - margin-top: 0.2vw; - margin-left: 2.7vw; - color: var(--lightsedonca); -} #ContainBottom { position: absolute; margin-left: 25vw; @@ -130,37 +292,6 @@ left: 0vw; z-index: 10; } - -.flex-item { - background: var(--lightsedonca); - width: 10vw; - height: 15vw; - border-radius: 2vw; - padding-right: 0.4vw; - padding-left: 0.4vw; - padding-bottom: 0.8vw; - padding-top: 0.4vw; - list-style: none; - display: flex; - - margin-right: 0.4vw; - margin-left: 0.4vw; - - -webkit-flex-flow: row wrap; - justify-content: space-around; -} - -.item-form { - width: 3vw; - padding-left: 0.1vw; - margin-top: 0.5vw; - height: 3vw; - border-radius: 10px; - background-color: var(--lighttercia); -} - - - /* PARTIE ANNEAU / ROND */ .anneau{ box-sizing: border-box; @@ -372,23 +503,8 @@ left: 0vw; width: inherit; display: flex; } - -.containcards{ - height: 87vh; - overflow-x:auto; - display: flex; - flex-wrap: wrap; - padding-left: 3vw; - padding-top: 2.5vw; -} - -.logop2 img { - width: 20vh; - padding-top: 1vh; - position: relative; - left: 43.5vw; -} + .buttonretour{ position: relative; @@ -401,15 +517,6 @@ left: 0vw; top: 1.75vw; } -.txt{ - position: absolute; - font-family: Arial Black; - color: var(--lightprima); - font-size: 1.5vw; - left: 0.4vw; - top : -1.6vh; -} - table, td { border: 0px solid #333; diff --git a/src/index.html b/src/index.html index d90c6c8..7af360f 100644 --- a/src/index.html +++ b/src/index.html @@ -140,494 +140,263 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
diff --git a/src/js/main.js b/src/js/main.js index 6741e66..ff49a51 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -7,6 +7,7 @@ var lighttercia = "#E6E6E6"; var darkprima = "#474747"; var darkseconda = "#393939"; var darktercia = "#606060"; +var carteselect = []; function journuit(){ //mode jour @@ -66,7 +67,25 @@ function retour(){ document.getElementById("pageGame").style.visibility = "hidden"; } - +//PARTIE SELECTION +function selectioncarte(lcarte){ + lacarte = "card"+ lcarte ; + if(document.getElementById(lacarte).style.border != "") + { + var pos = carteselect.indexOf(lacarte); + carteselect.splice(pos, 1); + document.getElementById(lacarte).style.border = ""; + } + else{ + if(carteselect.length < 5) + { + carteselect.push(lacarte); + document.getElementById(lacarte).style.border = "2px inset green"; + } + else + window.alert("Bonjour !"); + } +}