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

avancement

Browse Source
master
frperalde 4 years ago
parent 80588b1545
commit a12b855cbc
6 changed files with 1060 additions and 127 deletions
Show Stats Download Patch File Download Diff File

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

@ -24,6 +24,157 @@
margin-right: 4vh;
}
/*SETTINGS*/
#forme{
visibility: hidden;
}
#couleurs{
z-index: 1;
top: -20vw;
}
.pannel{
height: 100px;
width: 100px;
background-color: red;
}
#pickrcontner{
position: relative;
display: flex;
justify-content: space-around;
}
.Mode_Setting{
height: 20vw;
position: relative;
margin : 0 auto;
}
#BottomSetings{
position: absolute;
left: 0;
bottom: 0;
height: 5vw;
width: 100%;
border-radius: 0 0 0.3vw 0.3vw;
}
#SettingBefore{
height: 5vw;
width: 5vw;
background-color: var(--lightsedonca);
color: black;
font-size: 3vw;
visibility: collapse;
}
#SettingAfter{
bottom: 5vw;
position: relative;
height: 5vw;
width: 5vw;
background-color: var(--lightsedonca);
float: right;
}
#testSettings{
position: absolute;
color: black;
bottom: 0;
left: 18vw;
}
#ShapeSettings{
height: 100%;
width: 100%;
margin: auto 2vw;
display: flex;
flex-wrap: wrap;
}
.ShapeContener{
height: 9vw;
width: 9vw;
margin-left: 1vw;
position: relative;
display: table-cell;
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{
background-color: #333;
}
.Colorone{background-color: var(--colorbase);}
.Colortwo{background-color: var(--colorcarre);}
.Colorthree{background-color: var(--colorone);}
.Colorfour{background-color: var(--colortwo);}
.Colorfive{background-color: var(--colorthree);}
/*Bouton info*/
#infosec{
@ -337,3 +488,34 @@ label:active:after {
width: 100%;
height: 1.7vw;
}
/* === FORMES === */
.contentButton{
height: 3vw;
width: 15%;
margin : 0 auto;
position: relative;
bottom: 5vw;
}
.buttonvalidersettings{
height: 100%;
width: 100%;
border-style: none;
background-color: red;
color: white;
font-family: arial;
font-size: 2vw;
border-radius: 15px;
}
.buttonvalidersettings:active{
background-color: blue;
}

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

@ -1,9 +1,20 @@
/*Ecran*/
@media screen and (min-width: 960px) {
/*PARTIE FORMES*/
.containform {
position: relative;
height: var(--x);
width: var(--x);
display: table-cell;
vertical-align: middle;
}
/*ROND*/
.anneau {
position: relative;
left: calc((var(--x) - var(--y)) / 2);
background-color: var(--colorbase);
border-radius: var(--y);
height: var(--y);
@ -11,28 +22,64 @@
display: table-cell;
vertical-align: middle;
}
.anneau2 {
position: relative;
background-color: white;
border-radius: var(--y);
height: var(--y);
width: var(--y);
left : calc((var(--x) - var(--y))/2);
display: table-cell;
vertical-align: middle;
}
.anneau3 {
position: relative;
background-color: var(--colorbase);
border-radius: var(--y);
height: var(--y);
width: var(--y);
margin-left: auto;
margin-right: auto;
}
.rondinterieur {
background-color: var(--lighttercia);
background-color: white;
height: var(--z);
width: var(--z);
display: table;
margin: 0 auto;
border-radius: var(--z);
}
.containform {
.rond {
display: table;
margin: 0 auto;
background-color: var(--colorbase);
height: var(--z);
width: var(--z);
border-radius: var(--z);
}
.rond2 {
display: table;
margin: 0 auto;
background-color: white;
height: var(--z);
width: var(--z);
border-radius: var(--z);
}
.rond3 {
position: relative;
height: var(--x);
width: var(--x);
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);
border-radius: var(--z);
}
.rond {
.rond4 {
display: table;
margin: 0 auto;
background-color: var(--colorrond);
background-color: var(--colorbase);
height: var(--z);
width: var(--z);
border-radius: var(--z);
@ -41,7 +88,7 @@
/* PARTIE CARRE */
.carre {
position: relative;
background-color: var(--colorcarre);
background-color: blacke);
height: var(--y);
width: var(--y);
margin-left: auto;
@ -54,156 +101,348 @@
left : calc((var(--y) - var(--z))/2);
display: table-cell;
vertical-align: middle;
background-color: var(--lightsedonca);
background-color: white;
height: var(--z);
width: var(--z);
}
.carre2 {
background-color: blacke);
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: blacke);
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: blacke);
height: var(--z);
width: var(--z);
display: table;
margin: 0 auto;
}
/*A SUPPRIMER
===========================================
*/
.pcarre {
background-color: var(--colorcarre);
background-color: blacke);
height: var(--z);
width: var(--z);
display: table;
margin: 0 auto;
}
/*========================================*/
/* 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;
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;
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);
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;
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;
border-left: calc(var(--y) /2) solid transparent;
border-right: calc(var(--y) /2) solid transparent;
border-bottom: var(--y) solid white;
}
.triangletrapeze {
padding-top: 0.1vw;
/* Croix */
.croix{
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 2.5vw solid #6FDE30;
left: calc((var(--x) - var(--y)) / 2);
bottom: calc( ((var(--x) - var(--y))/2) + ((var(--y)) / 4) );
}
.trapezeinte {
.croixinté{
z-index: 2;
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;
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);
}
.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;
.croixdroite2{
position: relative;
background-color: white;
height: calc(var(--y)/4);
width: var(--y);
bottom : calc(var(--y) / 8);
transform: rotate(-45deg);
}
.trapezep {
.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;
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;
background: var(--couleur);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.triangletrapezep {
.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;
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;
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%);
}
.losangephaut {
.losangeinte2{
width: var(--z);
height: var(--z);
display: table;
margin: 0 auto;
margin-top: -3vw;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 3vw solid #B130DE;
background: var(--couleur);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.losangepbas {
/*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;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-top: 3vw solid #B130DE;
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%);
}
.losangephauti {
.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;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
background: var(--couleur);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.losangepbasi {
.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;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
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%);
}
.losangephautc {
.hexainte2{
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;
width: var(--z);
height: var(--z);
background: var(--couleur);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.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;
}
/*===========================================*/
/*Externe*/
.buttonretour {
position: relative;

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

@ -3,23 +3,31 @@
--lightprima: #DEDEDE;
--lightsedonca: #B7B7B7;
--lighttercia: #E6E6E6;
/*Couleur*/
/*Couleur bases*/
--colorbase : #e75259;
--colorcarre : #30C0DE;
--colorone : #00CBFF;
--colortwo : #00FF6E;
--colorthree : #C800FF;
--colorcarre : #30C0DE;
/*Les formes*/
--x : 3vw;
--x : 4vw;
--y : 2.5vw; /*taille anneau*/
--z :1.5vw; /*taille rond*/
--z : 1.5vw; /*taille rond*/
--d : calc(var(--x)/2);
--l : calc(var(--x)/2);
}
.test{
color: black;
}
@font-face {
font-family: "Montserrat";
src: url("/fonts/MonstMontserrat-Black.woff") format("woff"),
url("/fonts/MonstMontserrat-Black.woff2") format("woff2");
}
a {
cursor: pointer;

132
SwichGIT/src/css/pickr.min.css vendored
Unescape View File

@ -0,0 +1,132 @@
/*! Pickr 1.0.1 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)}
.pickr *{box-sizing:border-box}
.pickr .pcr-button{position:relative;height:7vw;width:7vw;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}
.pickr .pcr-button:after,.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em}
.pickr .pcr-button:after{transition:background .3s;background:currentColor}
.pickr .pcr-button.clear{background-size:70%}
.pickr .pcr-button.clear:before{opacity:0}
.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
.pickr .pcr-button.disabled{cursor:not-allowed}
.pcr-app button,.pcr-app input,.pickr button,.pickr input{outline:none;border:none;-webkit-appearance:none}
.pcr-app button:focus,.pcr-app input:focus,.pickr button:focus,.pickr input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0}
.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1}
.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}
.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0}
@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)}
}
/*! Pickr2 1.0.1 MIT | https://github.com/Simonwep/pickr2 */.pickr2{position:relative;overflow:visible;transform:translateY(0)}
.pickr2 *{box-sizing:border-box}
.pickr2 .pcr-button{position:relative;height:7vw;width:7vw;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
.pickr2 .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}
.pickr2 .pcr-button:after,.pickr2 .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em}
.pickr2 .pcr-button:after{transition:background .3s;background:currentColor}
.pickr2 .pcr-button.clear{background-size:70%}
.pickr2 .pcr-button.clear:before{opacity:0}
.pickr2 .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
.pickr2 .pcr-button.disabled{cursor:not-allowed}
.pcr-app button,.pcr-app input,.pickr2 button,.pickr2 input{outline:none;border:none;-webkit-appearance:none}
.pcr-app button:focus,.pcr-app input:focus,.pickr2 button:focus,.pickr2 input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0}
.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1}
.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}
.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0}
@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)}
}
/*! Pickr3 1.0.1 MIT | https://github.com/Simonwep/pickr3 */.pickr3{position:relative;overflow:visible;transform:translateY(0)}
.pickr3 *{box-sizing:border-box}
.pickr3 .pcr-button{position:relative;height:7vw;width:7vw;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
.pickr3 .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}
.pickr3 .pcr-button:after,.pickr3 .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em}
.pickr3 .pcr-button:after{transition:background .3s;background:currentColor}
.pickr3 .pcr-button.clear{background-size:70%}
.pickr3 .pcr-button.clear:before{opacity:0}
.pickr3 .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
.pickr3 .pcr-button.disabled{cursor:not-allowed}
.pcr-app button,.pcr-app input,.pickr3 button,.pickr3 input{outline:none;border:none;-webkit-appearance:none}
.pcr-app button:focus,.pcr-app input:focus,.pickr3 button:focus,.pickr3 input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0}
.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1}
.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}
.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0}
@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)}
}
/*! Pickr4 1.0.1 MIT | https://github.com/Simonwep/pickr4 */.pickr4{position:relative;overflow:visible;transform:translateY(0)}
.pickr4 *{box-sizing:border-box}
.pickr4 .pcr-button{position:relative;height:7vw;width:7vw;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
.pickr4 .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}
.pickr4 .pcr-button:after,.pickr4 .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em}
.pickr4 .pcr-button:after{transition:background .3s;background:currentColor}
.pickr4 .pcr-button.clear{background-size:70%}
.pickr4 .pcr-button.clear:before{opacity:0}
.pickr4 .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
.pickr4 .pcr-button.disabled{cursor:not-allowed}
.pcr-app button,.pcr-app input,.pickr4 button,.pickr4 input{outline:none;border:none;-webkit-appearance:none}
.pcr-app button:focus,.pcr-app input:focus,.pickr4 button:focus,.pickr4 input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0}
.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1}
.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}
.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0}
@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)}
}
/*! Pickr5 1.0.1 MIT | https://github.com/Simonwep/pickr5 */.pickr5{position:relative;overflow:visible;transform:translateY(0)}
.pickr5 *{box-sizing:border-box}
.pickr5 .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}
.pickr5 .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}
.pickr5 .pcr-button:after,.pickr5 .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:15em}
.pickr5 .pcr-button:after{transition:background .3s;background:currentColor}
.pickr5 .pcr-button.clear{background-size:70%}
.pickr5 .pcr-button.clear:before{opacity:0}
.pickr5 .pcr-button.clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
.pickr5 .pcr-button.disabled{cursor:not-allowed}
.pcr-app button,.pcr-app input,.pickr5 button,.pickr5 input{outline:none;border:none;-webkit-appearance:none}
.pcr-app button:focus,.pcr-app input:focus,.pickr5 button:focus,.pickr5 input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor}
.pcr-app[data-theme=classic]{position:absolute;display:flex;flex-direction:column;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);width:28.5em;max-width:95vw;padding:.8em;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s;left:0;top:0}
.pcr-app[data-theme=classic].visible{visibility:visible;opacity:1}
.pcr-app[data-theme=classic] .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}
.pcr-app[data-theme=classic] .pcr-swatches.pcr-last{margin:0}
@supports (display:grid){.pcr-app[data-theme=classic] .pcr-swatches{display:grid;align-items:center;justify-content:space-around;grid-template-columns:repeat(auto-fit,1.75em)}
}
.pcr-app[data-theme=classic] .pcr-swatches>button{position:relative;width:1.75em;height:1.75em;border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:transparent;z-index:1}
.pcr-app[data-theme=classic] .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:6px;border-radius:.15em;z-index:-1}
.pcr-app[data-theme=classic] .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:currentColor;border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}
.pcr-app[data-theme=classic] .pcr-swatches>button:hover{filter:brightness(1.05)}
.pcr-app[data-theme=classic] .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}
.pcr-app[data-theme=classic] .pcr-interaction>*{margin:0 .2em}
.pcr-app[data-theme=classic] .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}
.pcr-app[data-theme=classic] .pcr-interaction input:hover{filter:brightness(.975)}
.pcr-app[data-theme=classic] .pcr-interaction input:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px rgba(66,133,244,.75)}
.pcr-app[data-theme=classic] .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}
.pcr-app[data-theme=classic] .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}
.pcr-app[data-theme=classic] .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}
.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear,.pcr-app[data-theme=classic] .pcr-interaction .pcr-save{width:auto;color:#fff}
.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:hover,.pcr-app[data-theme=classic] .pcr-interaction .pcr-save:hover{filter:brightness(.925)}
.pcr-app[data-theme=classic] .pcr-interaction .pcr-save{background:#4285f4}
.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear{background:#f44250}
.pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:focus{box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px rgba(244,66,80,.75)}
.pcr-app[data-theme=classic] .pcr-selection{display:flex;justify-content:space-between;flex-grow:1}
.pcr-app[data-theme=classic] .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;user-select:none}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview{position:relative;z-index:1;width:2em;display:flex;flex-direction:column;justify-content:space-between;margin-right:.75em}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;transition:background-color .3s,box-shadow .3s;border-radius:.15em .15em 0 0;z-index:2}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{border-radius:0 0 .15em .15em}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{background:currentColor;width:100%;height:50%}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{position:relative;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser:active,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity:active,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{width:100%;height:8em;z-index:1}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette{flex-grow:1;border-radius:.15em}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity{margin-left:.75em}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker{left:50%;transform:translateX(-50%)}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{width:8px;flex-grow:1;border-radius:50em}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(180deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}
.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(180deg,transparent,#000),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%,50%}

312
SwichGIT/src/index.html
Unescape View File

@ -4,13 +4,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SwishGame</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/Resp1.css">
<link rel="stylesheet" href="css/Resp2.css">
<link rel="stylesheet" href="css/Resp3.css">
<link rel="stylesheet" href="css/PageDaccueil.css">
<link rel="stylesheet" href="css/PartieGame.css">
<link rel="stylesheet" href="css/pickr.min.css">
<script type="text/javascript" src="js/main.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>
</head>
<body onload="ChoisirPseudo()">
@ -37,7 +38,7 @@
<div class="inner">
<ul class="activity">
<li id="listeinfobtn">
<a id="info" href="#popup2">&#9881;</a>
<a id="info" onclick="settingOpen()" href="#popup2">&#9881;</a>
</li>
</ul>
</div>
@ -70,24 +71,312 @@
<div id="popup2" class="overlay">
<div class="popup2">
<h2>Les Paramètres :</h2>
<a class="close" href="#">&times;</a>
<div class="content">
<div class="Mode_Forme">
<div class="titre">
<h3>Mode Forme</h3>
<h2 id="SettingName">Les Paramètres</h2>
<a class="close" onclick="SettingClose()" href="#">&times;</a>
<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">
<br><br><br>
<div id="pickrcontner">
<div class="color-picker"></div>
<div class="color-picker2"></div>
<div class="color-picker3"></div>
<div class="color-picker4"></div>
<div class="color-picker5"></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>
<h3>Choix Couleur</h3>
</div>
</div>
</div>
<!-- COLOR PICKER-->
<script>
let pannel = document.getElementById("pannel");
// Simple example, see optional options for more configuration.
var couleur1 = varColorToHex('--colorbase');
var couleur2 = varColorToHex('--colorcarre');
var couleur3 = varColorToHex('--colorone');
var couleur4 = varColorToHex('--colortwo');
var couleur5 = varColorToHex('--colorthree');
const pickr = Pickr.create({
el: '.color-picker',
theme: 'classic', // or 'monolith', or 'nano'
default: couleur1,
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 pickr2 = Pickr.create({
el: '.color-picker2',
theme: 'classic', // or 'monolith', or 'nano'
default: couleur2,
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 pickr3 = Pickr.create({
el: '.color-picker3',
theme: 'classic', // or 'monolith', or 'nano'
default: couleur3,
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 pickr4 = Pickr.create({
el: '.color-picker4',
theme: 'classic', // or 'monolith', or 'nano'
default: couleur4,
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 pickr5 = Pickr.create({
el: '.color-picker5',
theme: 'classic', // or 'monolith', or 'nano'
default: couleur5,
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
pickr.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('--colorbase', newcouleur);
});
pickr2.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('--colorcarre', newcouleur);
});
pickr3.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('--colorone', newcouleur);
});
pickr4.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('--colortwo', newcouleur);
});
pickr5.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('--colorthree', newcouleur);
});
</script>
<!--
<div id="containpseudo">
<div id="pseudoenter">
@ -124,6 +413,7 @@
<div class="rond"></div>
</div>
<!-- Forme : carré-->
<div class="containform">
<div class="carre">

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

@ -0,0 +1,82 @@
var FormeSelect = [];
var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo","colorthree"]
//3 modes : 0 = couleurs // 1 = formes // 2 = personnaliser les cartes
var mode = 0;
function SelectShape(shape){
//récupérer la forme
var forme = "set"+shape;
var selection = document.getElementById(forme);
//Que si déjà selectionné
var couleurBase = selection.style.backgroundColor;
//désélection
if(couleurBase[0] == "v" && couleurBase[1] == "a" && couleurBase[2] == "r"){
//supprimé de la liste des selectionné
var pos = FormeSelect.indexOf(shape);
FormeSelect.splice(pos, 1);
//récupérer la couleur
var recupColor = getVarColor(couleurBase);
ListeCouleur.push(recupColor);
//mettre à jour la couleur
selection.style.backgroundColor = "#333";
//document.getElementById("SettingName").innerHTML = recupColor;
}else{ //selection
if(FormeSelect.length > 4){
alert("NON NON NOOOOOON");
} else{
FormeSelect.push(shape);
//définir la couleur
var couleur = "var(--" + ListeCouleur[0] + ")";
selection.style.backgroundColor = couleur;
//Supprimer la couleur de la liste
ListeCouleur.splice(0, 1);
//document.getElementById("SettingName").innerHTML = ListeCouleur.length;
}
}
}
function getVarColor(color){
var getvar = color;
getvar = getvar.substring(6,getvar.length-1);
return getvar;
}
function varColorToHex(color){
hex = getComputedStyle(document.documentElement).getPropertyValue(color);
hex = hex.substring(1,hex.length);
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