pascal.lafourcade
/
swish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Avancement parametres

Browse Source
master
frperalde 4 years ago
parent ee90e9a021
commit 40071ebe59
18 changed files with 1830 additions and 1506 deletions
Show Stats Download Patch File Download Diff File

134
SwichGIT/src/css/PageDaccueil.css
Unescape View File

@ -8,6 +8,7 @@
#mount1 { #mount1 {
z-index: 11; z-index: 11;
position: absolute;
} }
#mount2 { #mount2 {
@ -31,7 +32,6 @@
#couleurs{ #couleurs{
z-index: 1; z-index: 1;
top: -20vw;
} }
.pannel{ .pannel{
@ -43,6 +43,7 @@
#pickrcontner{ #pickrcontner{
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
} }
@ -100,70 +101,6 @@
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
.settingRond{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
.settingCarre{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.settingTriangle{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.settingCroix{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.settingLosange{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.settingPenta{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.settingHexa{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.settingHocto{
height: 80%;
width: 80%;
margin-left: 10%;
margin-top: 10%;
-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.settingShape{ .settingShape{
background-color: #333; background-color: #333;
} }
@ -444,6 +381,73 @@ label:active:after {
z-index: 10; z-index: 10;
} }
#choosemode {
height: 4vw;
width: 16vw;
position: absolute;
left: 42vw;
top: 50vh;
z-index: 15;
}
#conteneurmode{
width: 80%;
height: 2vw;
left : 10%;
top : 25%;
position: absolute;
margin: 0 auto;
background-color: var(--lightsedonca);
border-radius: 5vw;
}
#modeprec{
height: 100%;
width: 15%;
float: left;
position: relative;
}
#modesuiv{
height: 100%;
width: 15%;
float: right;
position: relative;
}
#textdumode{
height: 100%;
width: 70%;
position: absolute;
left: 15%;
}
#textmode {
font-family: Lucida Console, Arial Black, Arial;
font-size: 1vw;
color: #707070;
text-align:center;
margin: 5% auto 0 auto;
}
#triangleprec{
width: 0;
height: 0;
margin: 0.25vw auto 0 auto;
border-top: 0.75vw solid transparent;
border-right: 1.25vw solid grey;
border-bottom: 0.75vw solid transparent;
}
#trianglesuiv{
width: 0;
height: 0;
margin: 0.25vw auto 0 auto;
border-top: 0.75vw solid transparent;
border-left: 1.25vw solid grey;
border-bottom: 0.75vw solid transparent;
}
#buttonadd { #buttonadd {
position: absolute; position: absolute;
top: 30%; top: 30%;

321
SwichGIT/src/css/Resp1.css
Unescape View File

@ -1,321 +0,0 @@
/*Demi Ecran*/
@media screen and (max-width: 960px) and (min-height: 600px) {
.anneau {
box-sizing: border-box;
background-color: #FFD100;
border-radius: 3vw;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle;
}
.rondinterieur {
background-color: var(--lighttercia);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
border-radius: 3vw;
}
.containform {
box-sizing: content-box;
height: 6vw;
width: 6vw;
display: table-cell;
vertical-align: middle;
}
.rond {
display: table;
margin: 0 auto;
background-color: #FFD100;
height: 3vw;
width: 3vw;
border-radius: 3vw;
}
/* PARTIE CARRE */
.carre {
background-color: #30C0DE;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle
}
.carreinterieur {
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
}
.pcarre {
display: table;
margin: 0 auto;
background-color: #30C0DE;
height: 3vw;
width: 3vw;
}
/* PARTIE TRIANGLE */
.triangle {
display: table;
margin: 0 auto;
border-left: 2.5vw solid transparent;
border-right: 2.5vw solid transparent;
border-bottom: 5vw solid #DEA430;
}
.trianglerinterieur {
position: absolute;
margin-left: -1.5vw;
margin-top: 1.25vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid var(--lightsedonca);
}
.ptriangle {
display: table;
margin: 0 auto;
margin-top: 0.75vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid #DEA430;
}
/* TRAPEZE */
.trapeze {
bottom: 0px;
height: 0;
margin-top: 2.58vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 3vw solid #6FDE30;
}
.triangletrapeze {
padding-top: 0.1vw;
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 2.5vw solid #6FDE30;
}
.trapezeinte {
position: absolute;
margin-top: 3vw;
margin-left: 1.25vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.triangletrapezeinte {
position: absolute;
margin-top: 1.45vw;
margin-left: 1.25vw;
padding-top: 0.1vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.trapezep {
display: table;
margin: 0 auto;
margin-top: 2vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid #6FDE30;
z-index: 15;
}
.triangletrapezep {
position: absolute;
margin-top: 0.55vw;
margin-left: 1.25vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid #6FDE30;
z-index: 15;
}
.losangephaut {
display: table;
margin: 0 auto;
margin-top: -3vw;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 3vw solid #B130DE;
}
.losangepbas {
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-top: 3vw solid #B130DE;
}
.losangephauti {
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
}
.losangepbasi {
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
}
.losangephautc {
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid #B130DE;
}
.losangepbasc {
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid #B130DE;
}
.buttonretour {
position: relative;
height: 4vh;
width: 4vh;
border-radius: 55vw;
background-color: var(--lightsedonca);
z-index: 5;
margin-left: 2vw;
top: 1.75vw;
}
.flex-item {
background: var(--lightsedonca);
width: 10vw;
height: 13vw;
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.25vw;
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;
}
.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;
font-size: 5vw;
margin-top: 0.2vw;
margin-left: 5.5vw;
color: var(--lightsedonca);
}
}

321
SwichGIT/src/css/Resp2.css
Unescape View File

@ -1,321 +0,0 @@
/*DemTéléphone 1i Ecran*/
@media screen and (max-width: 550px) and (max-height: 850px) {
.anneau {
box-sizing: border-box;
background-color: #DE3030;
border-radius: 3vw;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle;
}
.rondinterieur {
background-color: var(--lighttercia);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
border-radius: 3vw;
}
.containform {
box-sizing: content-box;
height: 6vw;
width: 6vw;
display: table-cell;
vertical-align: middle;
}
.rond {
display: table;
margin: 0 auto;
background-color: #DE3030;
height: 3vw;
width: 3vw;
border-radius: 3vw;
}
/* PARTIE CARRE */
.carre {
background-color: #30C0DE;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle
}
.carreinterieur {
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
}
.pcarre {
display: table;
margin: 0 auto;
background-color: #30C0DE;
height: 3vw;
width: 3vw;
}
/* PARTIE TRIANGLE */
.triangle {
display: table;
margin: 0 auto;
border-left: 2.5vw solid transparent;
border-right: 2.5vw solid transparent;
border-bottom: 5vw solid #DEA430;
}
.trianglerinterieur {
position: absolute;
margin-left: -1.5vw;
margin-top: 1.25vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid var(--lightsedonca);
}
.ptriangle {
display: table;
margin: 0 auto;
margin-top: 0.75vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid #DEA430;
}
/* TRAPEZE */
.trapeze {
bottom: 0px;
height: 0;
margin-top: 2.58vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 3vw solid #6FDE30;
}
.triangletrapeze {
padding-top: 0.1vw;
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 2.5vw solid #6FDE30;
}
.trapezeinte {
position: absolute;
margin-top: 3vw;
margin-left: 1.25vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.triangletrapezeinte {
position: absolute;
margin-top: 1.45vw;
margin-left: 1.25vw;
padding-top: 0.1vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.trapezep {
display: table;
margin: 0 auto;
margin-top: 2vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid #6FDE30;
z-index: 15;
}
.triangletrapezep {
position: absolute;
margin-top: 0.55vw;
margin-left: 1.25vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid #6FDE30;
z-index: 15;
}
.losangephaut {
display: table;
margin: 0 auto;
margin-top: -3vw;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 3vw solid #B130DE;
}
.losangepbas {
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-top: 3vw solid #B130DE;
}
.losangephauti {
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
}
.losangepbasi {
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
}
.losangephautc {
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid #B130DE;
}
.losangepbasc {
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid #B130DE;
}
.buttonretour {
position: relative;
height: 4vh;
width: 4vh;
border-radius: 55vw;
background-color: var(--lightsedonca);
z-index: 5;
margin-left: 9.5vw;
top: 6.75vw;
}
.flex-item {
background: var(--lightsedonca);
width: 10vw;
height: 13vw;
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: 5vw;
padding-left: 0.1vw;
margin-top: 0.25vw;
height: 5vw;
border-radius: 10px;
background-color: var(--lighttercia);
}
.containcards {
height: 87vh;
overflow-x: auto;
display: flex;
flex-wrap: wrap;
padding-left: 2.5vw;
padding-top: 2.5vw;
}
.logop2 img {
width: 20vh;
padding-top: 1vh;
position: relative;
left: 27vw;
}
.txt {
position: absolute;
font-family: Arial Black;
color: var(--lightprima);
font-size: 5.5vw;
left: 2.25vw;
top: -1vh;
}
.logo img {
position: absolute;
width: 45vw;
left: 28vw;
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: -10vw;
top: 5.5vw;
height: 15vw;
width: 50vw;
background-color: var(--lightsedonca);
z-index: 15;
}
.bouttonvalider {
position: absolute;
height: 13vw;
width: 47vw;
top: 1.1vw;
left: 1.5vw;
border-radius: 30px;
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;
font-size: 10vw;
margin-top: 0.2vw;
margin-left: 12.5vw;
color: var(--lightsedonca);
}
}

547
SwichGIT/src/css/Resp3.css
Unescape View File

@ -1,566 +1,77 @@
/*Ecran*/ /*Ecran*/
@media screen and (min-width: 960px) { @media screen and (min-width: 960px) {
/*PARTIE FORMES*/
.containform {
position: relative;
height: var(--x);
width: var(--x);
display: table-cell;
vertical-align: middle;
}
/*ROND*/ /*ROND*/
.anneau { .anneau {
position: relative; position: relative;
background-color: var(--colorbase); background-color: var(--colorbase);
border-radius: var(--y); border-radius: var(--v);
height: var(--y); height: var(--v);
width: var(--y); width: var(--v);
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
.anneau2 { .anneau2 {
position: relative; position: relative;
background-color: white; background-color: white;
border-radius: var(--y); border-radius: var(--v);
height: var(--y); height: var(--v);
width: var(--y); width: var(--v);
left : calc((var(--x) - var(--y))/2); left : calc((var(--u) - var(--v))/2);
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
.anneau3 { .anneau3 {
position: relative; position: relative;
background-color: var(--colorbase); background-color: var(--colorbase);
border-radius: var(--y); border-radius: var(--v);
height: var(--y); height: var(--v);
width: var(--y); width: var(--v);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.rondinterieur { .rondinterieur {
background-color: white; background-color: var(--lighttercia);
height: var(--z); height: var(--w);
width: var(--z); width: var(--w);
display: table; display: table;
margin: 0 auto; margin: 0 auto;
border-radius: var(--z); border-radius: var(--w);
} }
.rond { .rond {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
background-color: var(--colorbase); background-color: var(--colorbase);
height: var(--z); height: var(--w);
width: var(--z); width: var(--w);
border-radius: var(--z); border-radius: var(--w);
} }
.rond2 { .rond2 {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
background-color: white; background-color: white;
height: var(--z); height: var(--w);
width: var(--z); width: var(--w);
border-radius: var(--z); border-radius: var(--w);
} }
.rond3 { .rond3 {
position: relative; position: relative;
top : calc((var(--y) - var(--z))/ 2); top : calc((var(--v) - var(--w))/ 2);
left : calc((var(--y) - var(--z))/2); left : calc((var(--v) - var(--w))/2);
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
background-color: white; background-color: white;
height: var(--z); height: var(--w);
width: var(--z); width: var(--w);
border-radius: var(--z); border-radius: var(--w);
} }
.rond4 { .rond4 {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
background-color: var(--colorbase); background-color: var(--colorbase);
height: var(--z); height: var(--w);
width: var(--z); width: var(--w);
border-radius: var(--z); border-radius: var(--w);
}
/* PARTIE CARRE */
.carre {
position: relative;
background-color: black;
height: var(--y);
width: var(--y);
margin-left: auto;
margin-right: auto;
}
.carreinterieur {
position: relative;
top : calc((var(--y) - var(--z))/2);
left : calc((var(--y) - var(--z))/2);
display: table-cell;
vertical-align: middle;
background-color: white;
height: var(--z);
width: var(--z);
}
.carre2 {
background-color: black;
height: var(--z);
width: var(--z);
display: table;
margin: 0 auto;
}
.carreinterieur2 {
background-color: white;
height: var(--z);
width: var(--z);
display: table;
margin-left: auto;
margin-right: auto;
}
.carreinterieur3 {
position: relative;
background-color: white;
height: var(--y);
width: var(--y);
left : calc((var(--x) - var(--y))/2);
display: table-cell;
vertical-align: middle;
}
.carrev2 {
position: relative;
background-color: black;
height: var(--y);
width: var(--y);
margin-left: auto;
margin-right: auto;
}
.carreinterieur4 {
position : relative;
top : calc((var(--y) - var(--z)) / 2);
left : calc((var(--y) - var(--z)) / 2);
background-color: white;
height: var(--z);
width: var(--z);
display: table-cell;
vertical-align: middle;
}
.carre3 {
background-color: black;
height: var(--z);
width: var(--z);
display: table;
margin: 0 auto;
}
/*A SUPPRIMER
===========================================
*/
.pcarre {
background-color: black;
height: var(--z);
width: var(--z);
display: table;
margin: 0 auto;
}
/*========================================*/
/* PARTIE TRIANGLE */
.triangle {
display: table;
margin: 0 auto;
border-left: calc(var(--y) /2) solid transparent;
border-right: calc(var(--y) /2) solid transparent;
border-bottom: var(--y) solid var(--colortwo);
}
.trianglerinterieur {
position: absolute;
bottom: calc((var(--x) - var(--z))/2.2);
left : calc((var(--x) - var(--z))/2);
border-left: calc(var(--z) /2) solid transparent;
border-right: calc(var(--z) /2) solid transparent;
border-bottom: var(--z) solid white;
}
.trianglerinterieur2 {
position: absolute;
bottom: calc((var(--x) - var(--z))/2);
left : calc((var(--x) - var(--z))/2);
border-left: calc(var(--z) /2) solid transparent;
border-right: calc(var(--z) /2) solid transparent;
border-bottom: var(--z) solid white;
}
.ptriangle {
position: absolute;
bottom: calc(((var(--x) - var(--y))/1.5) + ((var(--y) - var(--z))/3));
left : calc((var(--x) - var(--z))/2);
border-left: calc(var(--z) /2) solid transparent;
border-right: calc(var(--z) /2) solid transparent;
border-bottom: var(--z) solid var(--colortwo);
}
.triangle2 {
display: table;
margin: 0 auto;
border-left: calc(var(--y) /2) solid transparent;
border-right: calc(var(--y) /2) solid transparent;
border-bottom: var(--y) solid white;
}
/* Croix */
.croix{
position: absolute;
left: calc((var(--x) - var(--y)) / 2);
bottom: calc( ((var(--x) - var(--y))/2) + ((var(--y)) / 4) );
}
.croixinté{
z-index: 2;
position: absolute;
left: calc((var(--x) - var(--z))/2);
bottom: calc( ((var(--x) - var(--z))/2) + ((var(--z)) / 2.33) );
}
.croixgauche{
position: relative;
background-color: var(--couleur);
height: calc(var(--y)/4);
width: var(--y);
top : calc(var(--y) / 8);
transform: rotate(45deg);
}
.croixdroite{
position: relative;
background-color: var(--couleur);
height: calc(var(--y)/4);
width: var(--y);
bottom : calc(var(--y) / 8);
transform: rotate(-45deg);
}
.croixgauche2{
position: relative;
background-color: white;
height: calc(var(--y)/4);
width: var(--y);
top : calc(var(--y) / 8);
transform: rotate(45deg);
}
.croixdroite2{
position: relative;
background-color: white;
height: calc(var(--y)/4);
width: var(--y);
bottom : calc(var(--y) / 8);
transform: rotate(-45deg);
}
.croixgaucheinte{
position: relative;
background-color: white;
height: calc(var(--z)/16);
width: calc(var(--z));
top : calc(var(--z) / 32);
transform: rotate(45deg);
}
.croixdroiteinte{
position: relative;
background-color: white;
height: calc(var(--z)/16);
width: calc(var(--z));
bottom : calc(var(--z) / 32);
transform: rotate(-45deg);
} }
.croixgaucheinte2{ }
position: relative;
background-color: var(--couleur);
height: calc(var(--z)/16);
width: calc(var(--z));
top : calc(var(--z) / 32);
transform: rotate(45deg);
}
.croixdroiteinte2{
position: relative;
background-color: var(--couleur);
height: calc(var(--z)/16);
width: calc(var(--z));
bottom : calc(var(--z) / 32);
transform: rotate(-45deg);
}
/*LOSANGE*/
.losange{
width: var(--y);
height: var(--y);
display: table;
margin: 0 auto;
background: var(--couleur);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.losange2{
width: var(--y);
height: var(--y);
display: table;
margin: 0 auto;
background: white;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.losangeinte{
position: absolute;
z-index: 2;
width: var(--z);
height: var(--z);
bottom : calc( ((var(--x) - var(--z))/2));
left : calc((var(--x) - var(--z))/2);
background: white;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.losangeinte2{
width: var(--z);
height: var(--z);
display: table;
margin: 0 auto;
background: var(--couleur);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/*PENTA*/
.trapeze{
width: var(--y);
height: var(--y);
background: var(--couleur);
position: relative;
left: calc((var(--x) - var(--y)) / 2);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.trapeze2{
width: var(--y);
height: var(--y);
background: white;
position: relative;
left: calc((var(--x) - var(--y)) / 2);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.trapezeinte{
width: var(--z);
height: var(--z);
background: white;
position: absolute;
z-index: 2;
bottom : calc( ((var(--x) - var(--z))/2));
left: calc((var(--x) - var(--z))/2);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.trapezeinte2{
width: var(--z);
height: var(--z);
background: var(--couleur);
position: absolute;
z-index: 2;
bottom : calc( ((var(--x) - var(--z))/2));
left: calc((var(--x) - var(--z))/2);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.octogon{
width: var(--y);
height: var(--y);
background: var(--couleur);
position: relative;
left: calc((var(--x) - var(--y)) / 2);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.octogon2{
width: var(--y);
height: var(--y);
background: white;
position: relative;
left: calc((var(--x) - var(--y)) / 2);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.octogoninte{
width: var(--z);
height: var(--z);
background: white;
position: absolute;
z-index: 2;
bottom : calc( ((var(--x) - var(--z))/2));
left: calc((var(--x) - var(--z))/2);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.octogoninte2{
width: var(--z);
height: var(--z);
background: var(--couleur);
position: absolute;
z-index: 2;
bottom : calc( ((var(--x) - var(--z))/2));
left: calc((var(--x) - var(--z))/2);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
/*HEXAGONE*/
.hexa{
width: var(--y);
height: var(--y);
display: table;
margin: 0 auto;
background: var(--couleur);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hexa2{
width: var(--y);
height: var(--y);
display: table;
margin: 0 auto;
background: white;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hexainte{
position: absolute;
z-index: 2;
width: var(--z);
height: var(--z);
bottom : calc( ((var(--x) - var(--z))/2));
left : calc((var(--x) - var(--z))/2);
background: white;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hexainte2{
display: table;
margin: 0 auto;
width: var(--z);
height: var(--z);
background: var(--couleur);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/*===========================================*/
/*Externe*/
.buttonretour {
position: relative;
height: 4vh;
width: 4vh;
border-radius: 55vw;
background-color: var(--lightsedonca);
z-index: 5;
margin-left: 2vw;
top: 1.75vw;
}
.flex-item {
background: var(--lightsedonca);
width: 10vw;
height: 13vw;
border-radius: 0.75vw;
padding-right: 0.15vw;
padding-left: 0.15vw;
padding-bottom: 0.25vw;
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.25vw;
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;
}
.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;
font-size: 2.5vw;
margin-top: 0.2vw;
margin-left: 2.7vw;
color: var(--lightsedonca);
text-align:center;
}
}

17
SwichGIT/src/css/base.css
Unescape View File

@ -9,14 +9,17 @@
--colorone : #00CBFF; --colorone : #00CBFF;
--colortwo : #00FF6E; --colortwo : #00FF6E;
--colorthree : #C800FF; --colorthree : #C800FF;
--colorfour : #E6DA27;
--colorfive : #2E6DB4;
--colorsix : #E6792F;
/*Les formes*/ /*Les formes*/
--x : 4vw; --u: calc(var(--x) / 2.75);
--y : 2.5vw; /*taille anneau*/ --v: calc(var(--y) / 2.75);
--z : 1.5vw; /*taille rond*/ --w: calc(var(--z) / 2.75);
--d : calc(var(--x)/2); /*Les formes settings*/
--l : calc(var(--x)/2); --x : 10vw;
--y : 7vw;
--z : 3.75vw;
} }
.test{ .test{

134
SwichGIT/src/css/desktops.css
Unescape View File

@ -0,0 +1,134 @@
/*Ecran*/
@media screen and (min-width: 992px) {
/*PARTIE FORMES*/
/*===========================================*/
/*Externe*/
.buttonretour {
position: relative;
height: 4vh;
width: 4vh;
border-radius: 55vw;
background-color: var(--lightsedonca);
z-index: 5;
margin-left: 2vw;
top: 1.75vw;
}
.flex-item {
background: var(--lightsedonca);
width: 10vw;
height: 13vw;
border-radius: 0.75vw;
padding-right: 0.15vw;
padding-left: 0.15vw;
padding-bottom: 0.25vw;
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.25vw;
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;
}
.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;
font-size: 2.5vw;
margin-top: 0.2vw;
margin-left: 2.7vw;
color: var(--lightsedonca);
text-align:center;
}
}

BIN
SwichGIT/src/css/fonts/Montserrat-Black.ttf
View File

Binary file not shown.

BIN
SwichGIT/src/css/fonts/Montserrat-Black.woff
View File

Binary file not shown.

BIN
SwichGIT/src/css/fonts/Montserrat-Black.woff2
View File

Binary file not shown.

BIN
SwichGIT/src/css/fonts/Montserrat-ExtraBold.ttf
View File

Binary file not shown.

BIN
SwichGIT/src/css/fonts/Montserrat-ExtraBold.woff2
View File

Binary file not shown.

191
SwichGIT/src/css/formes.css
Unescape View File

@ -0,0 +1,191 @@
.containform {
position: relative;
/*height: var(--x);
width: var(--x);*/
display: table-cell;
vertical-align: middle;
}
.containform3 {
position: relative;
height: var(--x);
width: var(--x);
display: table-cell;
vertical-align: middle;
}
.containform2{
position: relative;
height: var(--x);
width: var(--x);
display: table-cell;
vertical-align: middle;
background-color: black;
}
/*ROND*/
.containexte{
height: var(--y);
width: var(--y);
margin: 0 auto;
position: relative;
top: calc(var(--x)/8);
}
#cacherond{
display: none;
}
#formSize{
margin : 0 auto;
width: 100%;
height: 3vw;
}
.slider-container .bar .fill {
display: block;
width: 50%;
height: 100%;
background-color: #6200ee;
}
.slider-container .slider {
position: relative;
z-index: 2;
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
outline: none;
background-color: transparent;
}
.slider.container{
position: relative;
}
.slider-container .bar {
position: absolute;
z-index: 1;
left: 0;
width: 100%;
height: 10px;
border-radius: 5px;
background-color: #c6aee7;
overflow: hidden;
}
/*Moz*/
.slider-container .slider::-moz-range-thumb {
-webkit-appearance: none;
width: 1vw;
height: 1vw;
background-color: #6200ee;
border-radius: 1vw;
cursor: pointer;
outline: none;
box-shadow: 0 0 0 0 rgba(98, 0 ,238, .1);
transition: .3s ease-in-out;
}
.slider-container .slider::-moz-range-thumb:hover {
box-shadow: 0 0 0 10px rgba(98,0,238,.1);
}
.slider-container .slider:active::-moz-range-thumb {
box-shadow: 0 0 0 20px rgba(98,0,238,.2);
}
.containinte{
/*PROBLEME SIZE*/
top: calc((var(--y) - var(--z)) / 2);
left: calc((var(--y) - var(--z)) / 2);
height: var(--z);
width: var(--z);
z-index: 2;
position: absolute;
}
.cache{
top: calc((var(--x) - var(--y)) / 2.8);
left: calc((var(--x) - var(--y)) / 2.2);
height: calc(var(--y)*1.05);
width: calc(var(--y)*1.05);
z-index: 2;
position: absolute;
z-index: 15;
}
.rond{
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
.round{
border-radius: 5vw;
}
.cb{
background-color: white;
}
.cn{
background-color: black;
}
.formeinte{
height: 90%;
width: 90%;
margin: 0 auto;
}
.formeexte{
height: 100%;
width: 100%;
}
.carre{
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.triangle{
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.castriangle{
margin-top: calc( (var(--y) - var(--z)) / 5);
}
.caspenta{
margin-top: calc( (var(--y) - var(--z)) / 10);
}
.losange{
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.croix{
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.croixinte{
-webkit-clip-path: polygon(26% 23%, 22% 27%, 45% 50%, 22% 74%, 27% 78%, 50% 55%, 74% 78%, 78% 73%, 55% 50%, 78% 27%, 73% 23%, 50% 46%);
clip-path: polygon(26% 23%, 22% 27%, 45% 50%, 22% 74%, 27% 78%, 50% 55%, 74% 78%, 78% 73%, 55% 50%, 78% 27%, 73% 23%, 50% 46%);
}
.penta{
-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.hexa{
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hocto{
-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

6
SwichGIT/src/css/phone.css
Unescape View File

@ -0,0 +1,6 @@
/*Demi Ecran*/
@media screen and (max-width: 768px) {
body{
background-color: green;
}
}

1148
SwichGIT/src/css/pickr.min.css vendored
View File

File diff suppressed because it is too large Load Diff

79
SwichGIT/src/css/tablet.css
Unescape View File

@ -0,0 +1,79 @@
/*DemTéléphone 1i Ecran*/
@media screen and (min-width: 669px) and (max-width: 992px) {
body{
background-color: red;
}
.logop2 img {
width: 20vh;
padding-top: 1vh;
position: relative;
left: 27vw;
}
.txt {
position: absolute;
font-family: Arial Black;
color: var(--lightprima);
font-size: 5.5vw;
left: 2.25vw;
top: -1vh;
}
.logo img {
position: absolute;
width: 45vw;
left: 28vw;
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: -10vw;
top: 5.5vw;
height: 15vw;
width: 50vw;
background-color: var(--lightsedonca);
z-index: 15;
}
.bouttonvalider {
position: absolute;
height: 13vw;
width: 47vw;
top: 1.1vw;
left: 1.5vw;
border-radius: 30px;
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;
font-size: 10vw;
margin-top: 0.2vw;
margin-left: 12.5vw;
color: var(--lightsedonca);
}
}

340
SwichGIT/src/index.html
Unescape View File

@ -5,18 +5,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SwishGame</title> <title>SwishGame</title>
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/Resp1.css"> <link rel="stylesheet" href="css/phone.css">
<link rel="stylesheet" href="css/Resp2.css"> <link rel="stylesheet" href="css/tablet.css">
<link rel="stylesheet" href="css/Resp3.css"> <link rel="stylesheet" href="css/desktops.css">
<link rel="stylesheet" href="css/PageDaccueil.css"> <link rel="stylesheet" href="css/PageDaccueil.css">
<link rel="stylesheet" href="css/PartieGame.css"> <link rel="stylesheet" href="css/PartieGame.css">
<link rel="stylesheet" href="css/pickr.min.css"> <link rel="stylesheet" href="css/pickr.min.css">
<link rel="stylesheet" href="css/formes.css">
<link rel="stylesheet" href="css/Resp3.css">
<script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/menu.js"></script> <script type="text/javascript" src="js/menu.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head> </head>
<body> <body onload="settingOpen()">
@ -74,60 +77,90 @@
<div id="popup2" class="overlay"> <div id="popup2" class="overlay">
<div class="popup2"> <div class="popup2">
<h2 id="SettingName">Les Paramètres</h2> <h2 id="SettingName">Param&#232;tres</h2>
<a class="close" onclick="SettingClose()" href="#">&times;</a> <a class="close" onclick="SettingClose()" href="#">&times;</a>
<div class="content"> <div class="content">
<div id="forme" class="Mode_Setting">
<div id="ShapeSettings">
<a class="ShapeContener" onclick="SelectShape('Rond')">
<div id="setRond" class="settingRond settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Carre')">
<div id="setCarre" class="settingCarre settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Triangle')">
<div id="setTriangle" class="settingTriangle settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Croix')">
<div id="setCroix" class="settingCroix settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Losange')">
<div id="setLosange" class="settingLosange settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Penta')">
<div id="setPenta" class="settingPenta settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Hexa')">
<div id="setHexa" class="settingHexa settingShape"></div>
</a>
<a class="ShapeContener" onclick="SelectShape('Hocto')">
<div id="setHocto" class="settingHocto settingShape"></div>
</a>
</div>
</div>
<div id="couleurs" class="Mode_Setting"> <div id="couleurs" class="Mode_Setting">
<br><br><br> <br>
<div id="pickrcontner"> <div id="pickrcontner">
<div class="color-picker"></div> <div class="containform3">
<div class="color-picker2"></div> <a onclick="disableCache('rond')" id="cacherond" class="cache cn rond"></a>
<div class="color-picker3"></div> <div class="containexte">
<div class="color-picker4"></div> <a onclick="ableCache('rond')" class="containinte cb round"></a>
<div class="color-picker5"></div> <div class="color-picker"></div>
</div>
</div>
<div class="containform3">
<a onclick="disableCache('carre')" id="cachecarre" class="cache cn carre"></a>
<div class="containexte">
<a onclick="ableCache('carre')" class="containinte cb carre"></a>
<div class="color-picker2"></div>
</div>
</div>
<div class="containform3">
<a onclick="disableCache('triangle')" id="cachetriangle" class="cache cn triangle"></a>
<div class="containexte">
<a onclick="ableCache('triangle')" class="containinte cb castriangle triangle"></a>
<div class="color-picker3"></div>
</div>
</div>
<div class="containform3">
<a onclick="disableCache('losange')" id="cachelosange" class="cache cn losange"></a>
<div class="containexte">
<a onclick="ableCache('losange')" class="containinte cb losange"></a>
<div class="color-picker4"></div>
</div>
</div>
<div class="containform3">
<a onclick="disableCache('croix')" id="cachecroix" class="cache cn croix"></a>
<div class="containexte">
<a onclick="ableCache('croix')" class="containinte cb croixinte"></a>
<div class="color-picker5"></div>
</div>
</div>
<div class="containform3">
<a onclick="disableCache('penta')" id="cachepenta" class="cache cn penta"></a>
<div class="containexte">
<a onclick="ableCache('penta')" class="containinte cb caspenta penta"></a>
<div class="color-picker6"></div>
</div>
</div>
<div class="containform3">
<a onclick="disableCache('hexa')" id="cachehexa" class="cache cn hexa"></a>
<div class="containexte">
<a onclick="ableCache('hexa')" class="containinte cb hexa"></a>
<div class="color-picker7"></div>
</div>
</div>
<div class="containform3">
<a onclick="disableCache('hocto')" id="cachehocto" class="cache cn hocto"></a>
<div class="containexte">
<a onclick="ableCache('hocto')" class="containinte cb hocto"></a>
<div class="color-picker8"></div>
</div>
</div>
</div>
<div id="formSize">
<div class="slider-container">
<span class="bar"><span class="fill"></span></span>
<input onchange="updateValue(this.value)" id="slider" type="range" class="slider" min="1" max="100" value="50">
<script>
var $slider = $("#slider");
var $fill = $(".bar .fill");
function setBar(){
$fill.css("width", $slider.val() + "%");
valRange = $slider.val();
changeContour(valRange);
}
$slider.on("input", setBar);
setBar();
</script>
</div>
</div> </div>
</div> </div>
</div>
<div id="BottomSetings">
<div id="SettingBefore" onclick="settingPrec()">
</div>
<h2 id="testSettings">Les couleurs</h2>
<div id="SettingAfter" onclick="settingSuiv()">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -142,6 +175,9 @@
var couleur3 = varColorToHex('--colorone'); var couleur3 = varColorToHex('--colorone');
var couleur4 = varColorToHex('--colortwo'); var couleur4 = varColorToHex('--colortwo');
var couleur5 = varColorToHex('--colorthree'); var couleur5 = varColorToHex('--colorthree');
var couleur6 = varColorToHex('--colorfour');
var couleur7 = varColorToHex('--colorfive');
var couleur8 = varColorToHex('--colorsix');
const pickr = Pickr.create({ const pickr = Pickr.create({
el: '.color-picker', el: '.color-picker',
theme: 'classic', // or 'monolith', or 'nano' theme: 'classic', // or 'monolith', or 'nano'
@ -342,6 +378,130 @@
} }
} }
}); });
const pickr6 = Pickr.create({
el: '.color-picker6',
theme: 'classic', // or 'monolith', or 'nano'
default: couleur6,
swatches: [
'#df0024',
'#f3c300',
'#00ab9f',
'#2e6db4',
'#1bff7e',
'#fe1b00',
'#7f00ff',
'#29F073',
'#E6792F',
'#E6DA27',
'#E8695A',
'#2E294E',
'#64A6BD',
'#659157'
],
components: {
// Main components
preview: true,
opacity: false,
hue: true,
// Input / output Options
interaction: {
hex: false,
rgba: false,
hsla: false,
hsva: false,
cmyk: false,
input: true,
clear: false,
save: true
}
}
});
const pickr7 = Pickr.create({
el: '.color-picker7',
theme: 'classic', // or 'monolith', or 'nano'
default: couleur7,
swatches: [
'#df0024',
'#f3c300',
'#00ab9f',
'#2e6db4',
'#1bff7e',
'#fe1b00',
'#7f00ff',
'#29F073',
'#E6792F',
'#E6DA27',
'#E8695A',
'#2E294E',
'#64A6BD',
'#659157'
],
components: {
// Main components
preview: true,
opacity: false,
hue: true,
// Input / output Options
interaction: {
hex: false,
rgba: false,
hsla: false,
hsva: false,
cmyk: false,
input: true,
clear: false,
save: true
}
}
});
const pickr8 = Pickr.create({
el: '.color-picker8',
theme: 'classic', // or 'monolith', or 'nano'
default: couleur8,
swatches: [
'#df0024',
'#f3c300',
'#00ab9f',
'#2e6db4',
'#1bff7e',
'#fe1b00',
'#7f00ff',
'#29F073',
'#E6792F',
'#E6DA27',
'#E8695A',
'#2E294E',
'#64A6BD',
'#659157'
],
components: {
// Main components
preview: true,
opacity: false,
hue: true,
// Input / output Options
interaction: {
hex: false,
rgba: false,
hsla: false,
hsva: false,
cmyk: false,
input: true,
clear: false,
save: true
}
}
});
//changement de couleur //changement de couleur
pickr.on('change', (...args) => { pickr.on('change', (...args) => {
let color = args[0].toRGBA(); let color = args[0].toRGBA();
@ -373,6 +533,24 @@
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}` let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
document.documentElement.style.setProperty('--colorthree', newcouleur); document.documentElement.style.setProperty('--colorthree', newcouleur);
}); });
pickr6.on('change', (...args) => {
let color = args[0].toRGBA();
console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
document.documentElement.style.setProperty('--colorfour', newcouleur);
});
pickr7.on('change', (...args) => {
let color = args[0].toRGBA();
console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
document.documentElement.style.setProperty('--colorfive', newcouleur);
});
pickr8.on('change', (...args) => {
let color = args[0].toRGBA();
console.log(color);
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
document.documentElement.style.setProperty('--colorsix', newcouleur);
});
</script> </script>
@ -380,14 +558,13 @@
<!--
<div id="containpseudo"> <div id="containpseudo">
<div id="pseudoenter"> <div id="pseudoenter">
<div id="fondinput"> <div id="fondinput">
<input onkeypress="ajouterplayer(event)" maxlength="12" id="inputpseudo"> <input onkeypress="ajouterplayer(event)" maxlength="12" id="inputpseudo" placeholder="Pseudo">
</div> </div>
</div> </div>
<a onclick="EnvoyerNouveauNom()"> <a onclick="lancerpartie()">
<div id="contourbuttonvalider"> <div id="contourbuttonvalider">
<div class="bouttonvalider" > <div class="bouttonvalider" >
<h1 id="textjouer">JOUER</h1> <h1 id="textjouer">JOUER</h1>
@ -401,31 +578,39 @@
</div> </div>
</div> </div>
<div id="containplayers"> <div id="choosemode">
</div>
-->
<div id="ContainBottom"> <div id="conteneurmode">
<!-- Forme : rond--> <a>
<div class="containform"> <div id="modeprec">
<div class="anneau"> <div id="triangleprec">
<div class="rondinterieur inté"></div>
</div>
</div>
<div class="containform">
<div class="rond"></div>
</div>
</div>
</div>
</a>
<!-- Forme : carré--> <div id="textdumode">
<div class="containform"> <h1 id="textmode">Modedddd</h1>
<div class="carre">
<div class="carreinterieur inté"></div>
</div> </div>
<a>
<div id="modesuiv">
<div id="trianglesuiv">
</div>
</div>
</a>
</div> </div>
<div class="containform"> </div>
<div class="pcarre"></div>
</div> <div id="containplayers">
</div>
<div id="ContainBottom">
<!-- présentation des formes -->
</div> </div>
<div class="mounts"> <div class="mounts">
@ -435,8 +620,7 @@
</div> </div>
</div> </div>
<div id="pageGame">
<div id="pageGame">
<div class="menuhaut"> <div class="menuhaut">
<div id="Redistribution"> <div id="Redistribution">
<a onclick="redistribuer()" id="relancerbtn"> <a onclick="redistribuer()" id="relancerbtn">
@ -457,7 +641,7 @@
</a> </a>
</div> </div>
<div id="Redistribution3"> <div id="Redistribution3">
<a id="relancerbtn" onclick="chercherCombinaison()"> <a id="relancerbtn" onclick="chercheCombi2()">
<div id="contourbuttonvalider"> <div id="contourbuttonvalider">
<div class="bouttonvalider2"> <div class="bouttonvalider2">
<h1 id="btnvalider3">CHERCHER</h1> <h1 id="btnvalider3">CHERCHER</h1>

8
SwichGIT/src/js/main.js
Unescape View File

@ -1049,7 +1049,7 @@ function SommeDeCarte(CarteMere, CarteFille) {
//================================================================================== //==================================================================================
/*
function ChoisirPseudo() { function ChoisirPseudo() {
let nom = localStorage.getItem('nom'); let nom = localStorage.getItem('nom');
if (nom == null) { if (nom == null) {
@ -1065,10 +1065,10 @@ function EnvoyerNouveauNom() {
document.location.reload(true); document.location.reload(true);
}; };
*/
/*
function addplayer(){ function addplayer(){
//j'ai mis une limite de 6joueurs, mais c'est a voir //j'ai mis une limite de 6joueurs, mais c'est a voir
if(nbplayers < 7){ if(nbplayers < 7){
@ -1102,7 +1102,7 @@ function ajouterplayer(event){
addplayer(); addplayer();
} }
*/
function doublonInterdit(uneCarte) { function doublonInterdit(uneCarte) {
var lesCoPetit = []; var lesCoPetit = [];

86
SwichGIT/src/js/menu.js
Unescape View File

@ -1,41 +1,39 @@
var FormeSelect = []; var FormeSelect = [];
var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo","colorthree"] var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo","colorthree"]
var ListeClassForme = ["rond","carre","triangle","losange","croix","penta","hexa","hocto"]
//3 modes : 0 = couleurs // 1 = formes // 2 = personnaliser les cartes //3 modes : 0 = couleurs // 1 = formes // 2 = personnaliser les cartes
var mode = 0; var mode = 0;
var valRange;
function settingOpen(){
var elements = document.getElementsByClassName("pcr-button");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.add(ListeClassForme[i]);
}
}
function SelectShape(shape){ function disableCache(formName){
//recuperer la forme cacheName = "cache"+formName;
var forme = "set"+shape; document.getElementById(cacheName).style.display = "none";
var selection = document.getElementById(forme); FormeSelect.push(form);
//Que si deja selectionne
var couleurBase = selection.style.backgroundColor;
//deselection
if(couleurBase[0] == "v" && couleurBase[1] == "a" && couleurBase[2] == "r"){
//supprime de la liste des selectionne
var pos = FormeSelect.indexOf(shape);
FormeSelect.splice(pos, 1);
//recuperer la couleur
var recupColor = getVarColor(couleurBase);
ListeCouleur.push(recupColor);
//mettre a jour la couleur
selection.style.backgroundColor = "#333";
//document.getElementById("SettingName").innerHTML = recupColor;
//document.getElementById("SettingName").innerHTML = FormeSelect.length;
}
}else{ //selection function changeContour(value){
if(FormeSelect.length > 4){ var newvalue = value * 0.055 + 1;
alert("NON NON NOOOOOON"); document.documentElement.style.setProperty('--z', newvalue+'vw');
} else{ //document.getElementById("SettingName").innerHTML = newvalue;
FormeSelect.push(shape); }
//definir la couleur
var couleur = "var(--" + ListeCouleur[0] + ")"; function ableCache(formName){
selection.style.backgroundColor = couleur; cacheName = "cache"+formName;
//Supprimer la couleur de la liste const pos = FormeSelect.indexOf(formName);
ListeCouleur.splice(0, 1); if (pos > -1) {
//document.getElementById("SettingName").innerHTML = ListeCouleur.length; FormeSelect.splice(pos, 1);
}
} }
document.getElementById(cacheName).style.display = "block";
} }
function getVarColor(color){ function getVarColor(color){
@ -50,33 +48,3 @@ function varColorToHex(color){
hex = hex.substring(1,hex.length); hex = hex.substring(1,hex.length);
return hex; return hex;
} }
function settingSuiv(){
if(mode == 0){ //passage au mode forme
document.getElementById('testSettings').innerHTML = "Les formes";
document.getElementById('couleurs').style.display = "none";
document.getElementById('forme').style.visibility = "visible";
document.getElementById('SettingAfter').style.visibility = "collapse";
document.getElementById('SettingBefore').style.visibility = "visible";
mode = mode + 1;
}
}
function settingPrec(){
if(mode == 1){
document.getElementById('testSettings').innerHTML = "Les couleurs";
document.getElementById('couleurs').style.display = "";
document.getElementById('forme').style.visibility = "collapse";
document.getElementById('SettingAfter').style.visibility = "visible";
document.getElementById('SettingBefore').style.visibility = "collapse";
mode = mode - 1;
}
}
function SettingClose(){
document.getElementById('popup2').style.display = "none";
}
function settingOpen(){
document.getElementById('popup2').style.display = "";
}
Write Preview
Loading…
Cancel
Save