changement

SwichGIT/src/css/PageDaccueil.css

@@ -14,25 +14,40 @@
     z-index: 10;
 }
 
+.containerparam{
+    position: absolute;
+    display: flex;
+    margin-left: 1vw;
+}
+
+.containerparam > div {
+    margin-right: 4vh;
+}
+
 
 /*Bouton info*/
 #infosec{
     z-index:15;
+    width: 2vw;
+}
+
+#infosec2{
+    z-index:15;
+    width: 2vw;
 }
 
 #info {
-    color: #B7B7B7;
+    color: var(--lightprima);
     text-decoration: none;
     font-size: 45px;
 }
 
 #info:hover {
-    color: #E4E8E7;
+    color: var(--lightprima);
 }
 
 .activity {
     padding: 0;
-    margin: 2em 0;
     list-style: none;
 }
 
@@ -47,7 +62,6 @@ li {
     display: inline-block;
     font-size: 0.889em;
     height: 3em;
-    margin: 0 1em 1em;
     position: relative;
     text-align: center;
     text-transform: lowercase;
@@ -79,15 +93,9 @@ li {
         position: absolute;
         right: 0;
         top: 0;
-        background-color: #B130DE;
+        background-color: var(--lightsedonca);
     }
 
-#infosec {
-    position: absolute;
-    left: 57%;
-    top: 35%;
-}
-
 /*Les règles popups*/
 .overlay {
     position: fixed;
@@ -143,7 +151,85 @@ li {
         overflow: auto;
     }
 
+    /*Parametres*/
+
+.popup2 {
+    margin: 70px auto;
+    padding: 20px;
+    background: #fff;
+    border-radius: 5px;
+    width: 45%;
+    height: 65%;
+    position: relative;
+    top:10%;
+}
+
+.popup2 h2 {
+    margin-top: 0;
+    color: #333;
+    font-family: Tahoma, Arial, sans-serif;
+}
+h3 {
+    margin: 0;
+    color: #333;
+    font-family: Tahoma, Arial, sans-serif;
+}
+.popup2 .close {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    transition: all 200ms;
+    font-size: 30px;
+    font-weight: bold;
+    text-decoration: none;
+    color: #333;
+}
+    .popup2 .close:hover {
+        color: #06D85F;
+    }
+.popup2 .content {
+    max-height: 30%;
+}
+
+.titre{
+    display: ruby-base;
+}
+
+label {
+    cursor: pointer;
+    text-indent: -9999px;
+    width: 2vw;
+    height: 1vw;
+    background: grey;
+    display: block;
+    border-radius: 100px;
+    position: relative;
+}
 
+label:after {
+    content: '';
+    position: absolute;
+    top: 0.1vw;
+    left: 0.1vw;
+    width: 0.8vw;
+    height: 0.8vw;
+    background: #fff;
+    border-radius: 90px;
+    transition: 0.3s;
+}
+
+input:checked + label {
+    background: #bada55;
+}
+
+input:checked + label:after {
+    left: calc(100% - 0.1vw);
+    transform: translateX(-100%);
+}
+
+label:active:after {
+    width: 1.4vw;
+}
 /* J'ai trop avancé, mode multi*/
 
 

SwichGIT/src/index.html

@@ -23,6 +23,7 @@
             </a>
         </div>
 
+        <div class="containerparam">
             <div id="infosec">
                 <div class="inner">
                     <ul class="activity">
@@ -32,6 +33,16 @@
                     </ul>
                 </div>
             </div>
+            <div id="infosec2">
+                <div class="inner">
+                    <ul class="activity">
+                        <li id="listeinfobtn">
+                            <a id="info" href="#popup2">&#9881;</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
 
         <div id="containpseudo">
             <a onclick="lancerpartie()">
@@ -43,6 +54,7 @@
             </a>
         </div>
 
+
         <div id="popup1" class="overlay">
             <div class="popup">
                 <h2>Les Règles :</h2>
@@ -56,6 +68,26 @@
             </div>
         </div>
 
+        <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>
+                            
+                        </div>
+                        
+                    </div>
+
+
+
+                    <h3>Choix Couleur</h3>
+                </div>
+            </div>
+        </div>
+
         <!--
         <div id="containpseudo">
             <div id="pseudoenter">