diff --git a/SwichGIT/src/css/PageDaccueil.css b/SwichGIT/src/css/PageDaccueil.css
index d3d001c..ceeebe6 100644
--- a/SwichGIT/src/css/PageDaccueil.css
+++ b/SwichGIT/src/css/PageDaccueil.css
@@ -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;
+}
+
+
+
+
+
+
diff --git a/SwichGIT/src/css/Resp3.css b/SwichGIT/src/css/Resp3.css
index 27ed7fa..47f2071 100644
--- a/SwichGIT/src/css/Resp3.css
+++ b/SwichGIT/src/css/Resp3.css
@@ -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;
diff --git a/SwichGIT/src/css/base.css b/SwichGIT/src/css/base.css
index 831bbc0..03422a9 100644
--- a/SwichGIT/src/css/base.css
+++ b/SwichGIT/src/css/base.css
@@ -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;
diff --git a/SwichGIT/src/css/pickr.min.css b/SwichGIT/src/css/pickr.min.css
new file mode 100644
index 0000000..2e6aac6
--- /dev/null
+++ b/SwichGIT/src/css/pickr.min.css
@@ -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, ') no-repeat 50%;background-size:0;transition:all .3s}
+.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, ');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, ') no-repeat 50%;background-size:0;transition:all .3s}
+.pickr2 .pcr-button:before{background:url('data:image/svg+xml;utf8, ');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, ') no-repeat 50%;background-size:0;transition:all .3s}
+.pickr3 .pcr-button:before{background:url('data:image/svg+xml;utf8, ');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, ') no-repeat 50%;background-size:0;transition:all .3s}
+.pickr4 .pcr-button:before{background:url('data:image/svg+xml;utf8, ');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, ') no-repeat 50%;background-size:0;transition:all .3s}
+.pickr5 .pcr-button:before{background:url('data:image/svg+xml;utf8, ');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, ');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, ');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, ');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, ');background-size:100%,50%}
diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html
index 383c353..cd933e5 100644
--- a/SwichGIT/src/index.html
+++ b/SwichGIT/src/index.html
@@ -4,13 +4,14 @@
SwishGame
-
-
+
+
+
@@ -37,7 +38,7 @@
@@ -70,24 +71,312 @@