diff --git a/SwichGIT/.vs/SwichGIT/config/applicationhost.config b/SwichGIT/.vs/SwichGIT/config/applicationhost.config
new file mode 100644
index 0000000..7a99442
--- /dev/null
+++ b/SwichGIT/.vs/SwichGIT/config/applicationhost.config
@@ -0,0 +1,1025 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/SwichGIT/.vs/SwichGIT/v16/.suo b/SwichGIT/.vs/SwichGIT/v16/.suo
new file mode 100644
index 0000000..0ec2fc5
Binary files /dev/null and b/SwichGIT/.vs/SwichGIT/v16/.suo differ
diff --git a/SwichGIT/.vs/VSWorkspaceState.json b/SwichGIT/.vs/VSWorkspaceState.json
new file mode 100644
index 0000000..bb8b676
--- /dev/null
+++ b/SwichGIT/.vs/VSWorkspaceState.json
@@ -0,0 +1,10 @@
+{
+ "ExpandedNodes": [
+ "",
+ "\\src",
+ "\\src\\css",
+ "\\src\\js"
+ ],
+ "SelectedNode": "\\src\\js\\main.js",
+ "PreviewInSolutionExplorer": false
+}
\ No newline at end of file
diff --git a/SwichGIT/.vs/slnx.sqlite b/SwichGIT/.vs/slnx.sqlite
new file mode 100644
index 0000000..e1f2643
Binary files /dev/null and b/SwichGIT/.vs/slnx.sqlite differ
diff --git a/SwichGIT/Doc/TachesAFaire.md b/SwichGIT/Doc/TachesAFaire.md
new file mode 100644
index 0000000..de6d0f9
--- /dev/null
+++ b/SwichGIT/Doc/TachesAFaire.md
@@ -0,0 +1,22 @@
+#
+Liste des tâches à réaliser
+
+
+| Tâches | Durée | Dépendences |
+|:------------------------------------------------:|:-----:|:-----------:|
+| Cahier des charges | | |
+| Définir les modes de jeux | | |
+| Définir les règles | | |
+| Choisir l'implémentation des modes de jeu | | |
+| Definir les fonctions de base | | |
+| Faire la version web | | |
+| Apporter correctif nécessaires | | |
+| Version jeu en local | | |
+| Serveur local multi | | |
+| Définir les fonctions supplémentaires | | |
+| Inclure d'autres modes de jeu | | |
+| Version étendue | | |
+| Faire mode daltonien | | |
+| Mode jour/nuit | | |
+| Version conforme au appareil(Tablette/télephone) | | |
+| Verifier conformité avec CDC | | |
\ No newline at end of file
diff --git a/SwichGIT/src/css/PageDaccueil.css b/SwichGIT/src/css/PageDaccueil.css
new file mode 100644
index 0000000..89de8cf
--- /dev/null
+++ b/SwichGIT/src/css/PageDaccueil.css
@@ -0,0 +1,236 @@
+#pageAccueil {
+ visibility: visible;
+}
+
+#cloud {
+ z-index: 10
+}
+
+#mount1 {
+ z-index: 11;
+}
+
+#mount2 {
+ z-index: 10;
+}
+
+
+/*Bouton info*/
+#infosec{
+ z-index:15;
+}
+
+#info {
+ color: #B7B7B7;
+ text-decoration: none;
+ font-size: 45px;
+}
+
+#info:hover {
+ color: #E4E8E7;
+}
+
+.activity {
+ padding: 0;
+ margin: 2em 0;
+ list-style: none;
+}
+
+li {
+ -webkit-transition: box-shadow 0.2s ease;
+ -moz-transition: box-shadow 0.2s ease;
+ transition: box-shadow 0.2s ease;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ border-radius: 50%;
+ color: #B7B7B7;
+ display: inline-block;
+ font-size: 0.889em;
+ height: 3em;
+ margin: 0 1em 1em;
+ position: relative;
+ text-align: center;
+ text-transform: lowercase;
+ width: 3em;
+ line-height: 3em;
+}
+
+ li a {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+
+ li:hover {
+ box-shadow: 0 0 0 7px #B7B7B7;
+ }
+
+ li:before {
+ -webkit-transition: all 0.2s ease;
+ -moz-transition: all 0.2s ease;
+ transition: all 0.2s ease;
+ border-radius: 50%;
+ bottom: 0;
+ box-shadow: 0 0 0 4px #B7B7B7;
+ content: '';
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ background-color: #B130DE;
+ }
+
+#infosec {
+ position: absolute;
+ left: 57%;
+ top: 35%;
+}
+
+/*Les règles popups*/
+.overlay {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.7);
+ transition: opacity 500ms;
+ visibility: hidden;
+ opacity: 0;
+ z-index: 21;
+}
+
+ .overlay:target {
+ visibility: visible;
+ opacity: 1;
+ }
+
+.popup {
+ margin: 70px auto;
+ padding: 20px;
+ background: #fff;
+ border-radius: 5px;
+ width: 30%;
+ position: relative;
+ top:25%;
+}
+
+ .popup h2 {
+ margin-top: 0;
+ color: #333;
+ font-family: Tahoma, Arial, sans-serif;
+ }
+
+ .popup .close {
+ position: absolute;
+ top: 20px;
+ right: 30px;
+ transition: all 200ms;
+ font-size: 30px;
+ font-weight: bold;
+ text-decoration: none;
+ color: #333;
+ }
+
+ .popup .close:hover {
+ color: #06D85F;
+ }
+
+ .popup .content {
+ max-height: 30%;
+ overflow: auto;
+ }
+
+
+/* J'ai trop avancé, mode multi*/
+
+
+#containpseudo {
+ position: absolute;
+ height: 15%;
+ width: 30%;
+ z-index: 12;
+ left: 35%;
+ top: 30%;
+}
+
+#pseudoenter {
+ background-color: red;
+ height: 100%;
+ border-radius: 45px;
+ background-color: #B130DE;
+}
+
+#inputpseudo {
+ position: absolute;
+ width: 99%;
+ height: 65%;
+ border-radius: 30px;
+ font-size: 3vw;
+ background-color: transparent;
+ -moz-appearance: none;
+ text-align: center;
+ color: #707070;
+ border-color: transparent;
+ font-family: impact, Arial Black;
+ z-index: 11;
+}
+
+#fondinput {
+ background-color: red;
+ position: absolute;
+ width: 97%;
+ background-color: var(--lightsedonca);
+ height: 90%;
+ border-radius: 40px;
+ left: 1.5%;
+ top: 5%;
+ z-index: 10;
+}
+
+#buttonadd {
+ position: absolute;
+ top: 30%;
+ right: -12%;
+ height: 3vw;
+ width: 3vw;
+ border-radius: 2vw;
+ background-color: #B130DE;
+ z-index: 18;
+}
+
+#textplus {
+ font-size: 3vw;
+ font-family: arial, Arial Black;
+ position: absolute;
+ margin-top: -0.15vw;
+ margin-left: 0.65vw;
+ color: var(--lightprima);
+}
+
+#containplayers {
+ position: absolute;
+ background-color: transparent;
+ color: var(--lightsedonca);
+ width: 15vw;
+ height: 20vw;
+ z-index: 17;
+ right: 0%;
+ top: 8vw;
+}
+
+.pseudojoueur {
+ float: right;
+ margin-top: 0px;
+ margin-bottom: 3%;
+ margin-right: 10%;
+ font-family: Lucida Console, Arial Black, Arial;
+ font-size: 2vw;
+}
+
+#pseudolist {
+ width: 100%;
+ height: 1.7vw;
+}
diff --git a/SwichGIT/src/css/PartieGame.css b/SwichGIT/src/css/PartieGame.css
new file mode 100644
index 0000000..88d43a8
--- /dev/null
+++ b/SwichGIT/src/css/PartieGame.css
@@ -0,0 +1,14 @@
+
+#pageGame {
+ visibility: hidden;
+}
+
+.menuhaut {
+ height: 10vh;
+ width: inherit;
+ display: flex;
+}
+
+.retourstp {
+ position: absolute;
+}
diff --git a/SwichGIT/src/css/Resp1.css b/SwichGIT/src/css/Resp1.css
new file mode 100644
index 0000000..1143ed9
--- /dev/null
+++ b/SwichGIT/src/css/Resp1.css
@@ -0,0 +1,311 @@
+/*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(--lightsedonca);
+ 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: 15vw;
+ height: 18vw;
+ border-radius: 2vw;
+ padding-right: 0.4vw;
+ padding-left: 0.4vw;
+ padding-bottom: 0.8vw;
+ padding-top: 0.4vw;
+ list-style: none;
+ display: flex;
+ margin-right: 1.75vw;
+ margin-left: 1.75vw;
+ -webkit-flex-flow: row wrap;
+ justify-content: space-around;
+ }
+
+ .item-form {
+ width: 4vw;
+ padding-left: 0.1vw;
+ margin-top: 0.5vw;
+ height: 4vw;
+ border-radius: 10px;
+ background-color: var(--lighttercia);
+ }
+
+ .containcards {
+ height: 87vh;
+ overflow-x: auto;
+ display: flex;
+ flex-wrap: wrap;
+ padding-left: 10vw;
+ padding-top: 2.5vw;
+ }
+
+ .logop2 img {
+ width: 20vh;
+ padding-top: 1vh;
+ position: relative;
+ left: 38vw;
+ }
+
+ .txt {
+ position: absolute;
+ font-family: Arial Black;
+ color: var(--lightprima);
+ font-size: 2.5vw;
+ left: 1vw;
+ top: -1vh;
+ }
+
+ .logo img {
+ position: absolute;
+ width: 25vw;
+ left: 38vw;
+ top: 13%;
+ z-index: 11;
+ }
+
+ .mounts img {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ pointer-events: none;
+ margin-left: -1vw;
+ margin-top: -1vw;
+ object-fit: cover;
+ }
+
+ #contourbuttonvalider {
+ position: absolute;
+ border-radius: 45px;
+ left: 3vw;
+ top: 5.5vw;
+ height: 9vw;
+ width: 25vw;
+ background-color: var(--lightsedonca);
+ z-index: 15;
+ }
+
+ .bouttonvalider {
+ position: absolute;
+ height: 6.8vw;
+ width: 22.8vw;
+ top: 1.1vw;
+ left: 1.1vw;
+ border-radius: 30px;
+ background-color: #B130DE;
+ }
+
+ #textjouer {
+ font-family: Montserrat, impact, Arial Black;
+ position: absolute;
+ font-size: 5vw;
+ margin-top: 0.2vw;
+ margin-left: 5.5vw;
+ color: var(--lightsedonca);
+ }
+}
diff --git a/SwichGIT/src/css/Resp2.css b/SwichGIT/src/css/Resp2.css
new file mode 100644
index 0000000..858e850
--- /dev/null
+++ b/SwichGIT/src/css/Resp2.css
@@ -0,0 +1,311 @@
+/*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(--lightsedonca);
+ 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: 19vw;
+ height: 30vw;
+ 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: 1.5vw;
+ 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;
+ }
+
+ #textjouer {
+ font-family: Montserrat, impact, Arial Black;
+ position: absolute;
+ font-size: 10vw;
+ margin-top: 0.2vw;
+ margin-left: 12.5vw;
+ color: var(--lightsedonca);
+ }
+}
diff --git a/SwichGIT/src/css/Resp3.css b/SwichGIT/src/css/Resp3.css
new file mode 100644
index 0000000..2e72a9e
--- /dev/null
+++ b/SwichGIT/src/css/Resp3.css
@@ -0,0 +1,311 @@
+/*Ecran*/
+@media screen and (min-width: 960px) {
+
+ .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(--lightsedonca);
+ 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: 2vw;
+ top: 1.75vw;
+ }
+
+ .flex-item {
+ background: var(--lightsedonca);
+ width: 10vw;
+ height: 15vw;
+ border-radius: 2vw;
+ padding-right: 0.4vw;
+ padding-left: 0.4vw;
+ padding-bottom: 0.8vw;
+ padding-top: 0.4vw;
+ list-style: none;
+ display: flex;
+ margin-right: 0.4vw;
+ margin-left: 0.4vw;
+ -webkit-flex-flow: row wrap;
+ justify-content: space-around;
+ }
+
+ .item-form {
+ width: 3vw;
+ padding-left: 0.1vw;
+ margin-top: 0.5vw;
+ height: 3vw;
+ border-radius: 10px;
+ background-color: var(--lighttercia);
+ }
+
+ .containcards {
+ height: 87vh;
+ overflow-x: auto;
+ display: flex;
+ flex-wrap: wrap;
+ padding-left: 3vw;
+ padding-top: 2.5vw;
+ }
+
+ .logop2 img {
+ width: 20vh;
+ padding-top: 1vh;
+ position: relative;
+ left: 43.5vw;
+ }
+
+
+ .txt {
+ position: absolute;
+ font-family: Arial Black;
+ color: var(--lightprima);
+ font-size: 1.5vw;
+ left: 0.4vw;
+ top: -1.6vh;
+ }
+
+ .logo img {
+ position: absolute;
+ width: 12vw;
+ left: 44vw;
+ top: 13%;
+ z-index: 11;
+ }
+
+ .mounts img {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ pointer-events: none;
+ margin-left: -10px;
+ }
+
+ #contourbuttonvalider {
+ position: absolute;
+ border-radius: 45px;
+ left: 9.2vw;
+ top: 5.5vw;
+ height: 4vw;
+ width: 12vw;
+ background-color: var(--lightsedonca);
+ z-index: 15;
+ }
+
+ .bouttonvalider {
+ position: absolute;
+ height: 3.4vw;
+ width: 11.4vw;
+ top: 0.3vw;
+ left: 0.3vw;
+ border-radius: 30px;
+ background-color: #B130DE;
+ }
+
+ #textjouer {
+ font-family: Montserrat, impact, Arial Black;
+ position: absolute;
+ font-size: 2.5vw;
+ margin-top: 0.2vw;
+ margin-left: 2.7vw;
+ color: var(--lightsedonca);
+ }
+}
diff --git a/SwichGIT/src/css/base.css b/SwichGIT/src/css/base.css
new file mode 100644
index 0000000..cec154c
--- /dev/null
+++ b/SwichGIT/src/css/base.css
@@ -0,0 +1,96 @@
+:root{
+ /*couleur héhé*/
+ --lightprima: #DEDEDE;
+ --lightsedonca: #B7B7B7;
+ --lighttercia: #E6E6E6;
+}
+
+@font-face {
+ font-family: "Montserrat";
+ src: url("/fonts/MonstMontserrat-Black.woff") format("woff"),
+ url("/fonts/MonstMontserrat-Black.woff2") format("woff2");
+}
+
+a {
+ cursor: pointer;
+ z-index: 60;
+}
+
+
+
+body {
+ background-color: var(--lightprima);
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ /*Desactiver la selection*/
+ -webkit-user-select: none; /* Chrome / Safari */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* IE 10+ */
+ user-select: none;
+}
+
+
+#ContainBottom {
+position: absolute;
+margin-left: 25vw;
+height: 12vw;
+width: auto;
+bottom: 0;
+z-index: 20;
+}
+#clic{
+position: absolute;
+left: 55vw;
+top : 7vw;
+height: auto;
+width: 15vw;
+}
+#card-conteneur{
+z-index: 20;
+position: absolute;
+left: 0vw;
+}
+.flex-container {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+
+ -webkit-flex-flow: row wrap;
+ justify-content: space-around;
+ margin-top: -7vw;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/SwichGIT/src/css/style.css b/SwichGIT/src/css/style.css
deleted file mode 100644
index c06ce34..0000000
--- a/SwichGIT/src/css/style.css
+++ /dev/null
@@ -1,1154 +0,0 @@
-:root{
- /*couleur héhé*/
- --lightprima: #DEDEDE;
- --lightsedonca: #B7B7B7;
- --lighttercia: #E6E6E6;
-}
-
-@font-face {
- font-family: "Montserrat";
- src: url("/fonts/MonstMontserrat-Black.woff") format("woff"),
- url("/fonts/MonstMontserrat-Black.woff2") format("woff2");
-}
-
-a {
- cursor: pointer;
- z-index: 60;
-}
-
-body{
- background-color: var(--lightprima);
- height: 100%;
- overflow-x: hidden;
- overflow-y: hidden;
- /*Desactiver la selection*/
- -webkit-user-select: none; /* Chrome / Safari */
- -moz-user-select: none; /* Firefox */
- -ms-user-select: none; /* IE 10+ */
- user-select: none;
-}
-/*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(--lightsedonca);
- 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: 15vw;
- height: 18vw;
- border-radius: 2vw;
- padding-right: 0.4vw;
- padding-left: 0.4vw;
- padding-bottom: 0.8vw;
- padding-top: 0.4vw;
- list-style: none;
- display: flex;
-
- margin-right: 1.75vw;
- margin-left: 1.75vw;
-
- -webkit-flex-flow: row wrap;
- justify-content: space-around;
- }
-
- .item-form {
- width: 4vw;
- padding-left: 0.1vw;
- margin-top: 0.5vw;
- height: 4vw;
- border-radius: 10px;
- background-color: var(--lighttercia);
- }
-
- .containcards{
- height: 87vh;
- overflow-x:auto;
- display: flex;
- flex-wrap: wrap;
- padding-left: 10vw;
- padding-top: 2.5vw;
- }
-
- .logop2 img {
- width: 20vh;
- padding-top: 1vh;
- position: relative;
- left: 38vw;
- }
-
- .txt{
- position: absolute;
- font-family: Arial Black;
- color: var(--lightprima);
- font-size: 2.5vw;
- left: 1vw;
- top : -1vh;
- }
-
- .logo img{
- position: absolute;
- width: 25vw;
- left: 38vw;
- top: 13%;
- z-index: 11;
- }
-
- .mounts img {
- position: absolute;
- height: 100%;
- width: 100%;
- pointer-events: none;
- margin-left: -1vw;
- margin-top: -1vw;
- object-fit: cover;
- }
-
- #contourbuttonvalider{
- position: absolute;
- border-radius: 45px;
- left: 3vw;
- top: 5.5vw;
- height: 9vw;
- width: 25vw;
- background-color: var(--lightsedonca);
- z-index: 15;
- }
-
- .bouttonvalider{
- position: absolute;
- height: 6.8vw;
- width: 22.8vw;
- top: 1.1vw;
- left: 1.1vw;
- border-radius: 30px;
- background-color: #B130DE;
- }
- #textjouer{
- font-family: Montserrat, impact, Arial Black;
- position: absolute;
- font-size: 5vw;
- margin-top: 0.2vw;
- margin-left: 5.5vw;
- color: var(--lightsedonca);
- }
-
-}
-
-/*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(--lightsedonca);
- 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: 19vw;
- height: 30vw;
- 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: 1.5vw;
- 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;
- }
- #textjouer{
- font-family: Montserrat, impact, Arial Black;
- position: absolute;
- font-size: 10vw;
- margin-top: 0.2vw;
- margin-left: 12.5vw;
- color: var(--lightsedonca);
- }
-
-}
-
-/*Ecran*/
-@media screen and (min-width: 960px) {
-
- .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(--lightsedonca);
- 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: 2vw;
- top: 1.75vw;
- }
-
- .flex-item {
- background: var(--lightsedonca);
- width: 10vw;
- height: 15vw;
- border-radius: 2vw;
- padding-right: 0.4vw;
- padding-left: 0.4vw;
- padding-bottom: 0.8vw;
- padding-top: 0.4vw;
- list-style: none;
- display: flex;
-
- margin-right: 0.4vw;
- margin-left: 0.4vw;
-
- -webkit-flex-flow: row wrap;
- justify-content: space-around;
- }
-
- .item-form {
- width: 3vw;
- padding-left: 0.1vw;
- margin-top: 0.5vw;
- height: 3vw;
- border-radius: 10px;
- background-color: var(--lighttercia);
- }
-
- .containcards{
- height: 87vh;
- overflow-x:auto;
- display: flex;
- flex-wrap: wrap;
- padding-left: 3vw;
- padding-top: 2.5vw;
- }
-
- .logop2 img {
- width: 20vh;
- padding-top: 1vh;
- position: relative;
- left: 43.5vw;
- }
-
-
- .txt{
- position: absolute;
- font-family: Arial Black;
- color: var(--lightprima);
- font-size: 1.5vw;
- left: 0.4vw;
- top : -1.6vh;
- }
-
- .logo img{
- position: absolute;
- width: 12vw;
- left: 44vw;
- top: 13%;
- z-index: 11;
- }
-
- .mounts img {
- position: absolute;
- height: 100%;
- width: 100%;
- pointer-events: none;
- margin-left: -10px;
- }
-
- #contourbuttonvalider{
- position: absolute;
- border-radius: 45px;
- left: 9.2vw;
- top: 5.5vw;
- height: 4vw;
- width: 12vw;
- background-color: var(--lightsedonca);
- z-index: 15;
- }
-
- .bouttonvalider{
- position: absolute;
- height: 3.4vw;
- width: 11.4vw;
- top: 0.3vw;
- left: 0.3vw;
- border-radius: 30px;
- background-color: #B130DE;
- }
- #textjouer{
- font-family: Montserrat, impact, Arial Black;
- position: absolute;
- font-size: 2.5vw;
- margin-top: 0.2vw;
- margin-left: 2.7vw;
- color: var(--lightsedonca);
- }
-}
-
-#ContainBottom {
-position: absolute;
-margin-left: 25vw;
-height: 12vw;
-width: auto;
-bottom: 0;
-z-index: 20;
-}
-#clic{
-position: absolute;
-left: 55vw;
-top : 7vw;
-height: auto;
-width: 15vw;
-}
-#card-conteneur{
-z-index: 20;
-position: absolute;
-left: 0vw;
-}
-.flex-container {
- padding: 0;
- margin: 0;
- list-style: none;
-
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
-
- -webkit-flex-flow: row wrap;
- justify-content: space-around;
- margin-top: -7vw;
-}
-
-
-
-#pageGame{
- visibility: hidden;
-}
-
-#pageAccueil{
- visibility: visible;
-}
-
-
-#cloud{
- z-index: 10
-}
-
-#mount1 {
- z-index: 11;
-}
-
-#mount2 {
- z-index: 10;
-}
-
-.retourstp{
- position: absolute;
-}
-
-.menuhaut{
- height: 10vh;
- width: inherit;
- display: flex;
-}
-
-
-/* J'ai trop avancé, mode multi*/
-
-
-#containpseudo{
- position: absolute;
- height: 15%;
- width: 30%;
- z-index: 12;
- left: 35%;
- top: 30%;
-}
-
-#pseudoenter{
- background-color: red;
- height: 100%;
- border-radius: 45px;
- background-color: #B130DE;
-}
-
-#inputpseudo{
- position: absolute;
- width: 99%;
- height: 65%;
- border-radius: 30px;
- font-size: 3vw;
- background-color: transparent;
- appearance: none;
- text-align: center;
- color: #707070;
- border-color: transparent;
- font-family: impact, Arial Black;
- z-index: 11;
-}
-
-#fondinput{
- background-color: red;
- position: absolute;
- width: 97%;
- background-color: var(--lightsedonca);
- height: 90%;
- border-radius: 40px;
- left: 1.5%;
- top: 5%;
- z-index: 10;
-}
-
-#buttonadd{
- position: absolute;
- top: 30%;
- right: -12%;
- height: 3vw;
- width: 3vw;
- border-radius: 2vw;
- background-color: #B130DE;
- z-index: 18;
-}
-
-#textplus{
- font-size: 3vw;
- font-family: arial, Arial Black;
- position: absolute;
- margin-top: -0.15vw;
- margin-left: 0.65vw;
- color: var(--lightprima);
-}
-
-#containplayers{
- position: absolute;
- background-color: transparent;
- color: var(--lightsedonca);
- width: 15vw;
- height: 20vw;
- z-index: 17;
- right: 0%;
- top: 8vw;
-}
-
-.pseudojoueur {
- float: right;
- margin-top: 0px;
- margin-bottom: 3%;
- margin-right: 10%;
- font-family: Lucida Console, Arial Black, Arial;
- font-size: 2vw;
-}
-
-#pseudolist {
- width: 100%;
- height: 1.7vw;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html
index ed1e2c0..17037b2 100644
--- a/SwichGIT/src/index.html
+++ b/SwichGIT/src/index.html
@@ -3,7 +3,13 @@
SwishGame
-
+
+
+
+
+
+
+
@@ -11,12 +17,22 @@
-
+
+
+
@@ -80,7 +107,7 @@
-
+
+ 
+ 
+
-
-
-
