feat: tous les menus vides

src/front/index2.html

@@ -10,9 +10,29 @@
     <link rel="stylesheet" href="pixels.css">
     <link rel="stylesheet" href="pix.css">
     <script>
-        function toggleLoginSignup(l, s) {
+        function setMenu() {
-            document.getElementById("show-login").checked = l;
+            document.getElementById("show-menu").checked = true;
-            document.getElementById("show-signup").checked = s;
+            document.getElementById("show-wallet").checked = false;
+            document.getElementById("show-mypixel").checked = false;
+            document.getElementById("show-settings").checked = false;
+        }
+        function setWallet() {
+            document.getElementById("show-menu").checked = false;
+            document.getElementById("show-wallet").checked = true;
+            document.getElementById("show-mypixel").checked = false;
+            document.getElementById("show-settings").checked = false;
+        }
+        function setMypixel() {
+            document.getElementById("show-menu").checked = false;
+            document.getElementById("show-wallet").checked = false;
+            document.getElementById("show-mypixel").checked = true;
+            document.getElementById("show-settings").checked = false;
+        }
+        function setSettings() {
+            document.getElementById("show-menu").checked = false;
+            document.getElementById("show-wallet").checked = false;
+            document.getElementById("show-mypixel").checked = false;
+            document.getElementById("show-settings").checked = true;
         }
     </script>
 </head>
@@ -25,13 +45,44 @@
         </div>
         <div class="profil">
             <input type="checkbox" id="show-menu" class="show">
-            <label for="show-menu" class="menu-btn">Menu</label>
+            <input type="checkbox" id="show-wallet" class="show">
+            <input type="checkbox" id="show-mypixel" class="show">
+            <input type="checkbox" id="show-settings" class="show">
+
+            <label class="menu-btn" onclick="setMenu()">Menu</label>
+            <div class="username">My name is Amogus</div>
 
             <div class="menu-container">
                 <label for="show-menu" class="close-btn" title="close">X</label>
                 <div class="text">
                     Menu
                 </div>
+                <div>
+                    <label class="wallet-btn" onclick="setWallet()">Wallet</label>
+                    <label class="mypixel-btn" onclick="setMypixel()">My pixels</label>
+                    <label class="settings-btn" onclick="setSettings()">Settings</label>
+                </div>
+            </div>
+
+            <div class="wallet-container">
+                <label for="show-wallet" class="close-btn" title="close">X</label>
+                <div class="text">
+                    Wallet
+                </div>
+            </div>
+
+            <div class="mypixel-container">
+                <label for="show-mypixel" class="close-btn" title="close">X</label>
+                <div class="text">
+                    My pixels
+                </div>
+            </div>
+
+            <div class="settings-container">
+                <label for="show-settings" class="close-btn" title="close">X</label>
+                <div class="text">
+                    Settings
+                </div>
             </div>
         </div>
     </div>

src/front/profil.css

@@ -12,6 +12,7 @@
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0px 0px 5px #000;
+
 }
 
 #show-menu:checked~.menu-container {
@@ -29,3 +30,119 @@
 .menu-container .close-btn:hover {
     color: #3498db;
 }
+
+.menu-container div {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.wallet-container {
+    --width: 410px;
+    display: none;
+    visibility: visible;
+    background: #fff;
+    width: var(--width);
+    margin: 30px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    position: absolute;
+    left: calc(50% - var(--width) / 2);
+    top: 30%;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0px 0px 5px #000;
+
+}
+
+#show-wallet:checked~.wallet-container {
+    display: block;
+}
+
+.wallet-container .close-btn {
+    position: absolute;
+    right: 20px;
+    top: 15px;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.wallet-container .close-btn:hover {
+    color: #3498db;
+}
+
+.mypixel-container {
+    --width: 410px;
+    display: none;
+    visibility: visible;
+    background: #fff;
+    width: var(--width);
+    margin: 30px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    position: absolute;
+    left: calc(50% - var(--width) / 2);
+    top: 30%;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0px 0px 5px #000;
+
+}
+
+#show-mypixel:checked~.mypixel-container {
+    display: block;
+}
+
+.mypixel-container .close-btn {
+    position: absolute;
+    right: 20px;
+    top: 15px;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.mypixel-container .close-btn:hover {
+    color: #3498db;
+}
+
+
+.settings-container {
+    --width: 410px;
+    display: none;
+    visibility: visible;
+    background: #fff;
+    width: var(--width);
+    margin: 30px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    position: absolute;
+    left: calc(50% - var(--width) / 2);
+    top: 30%;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0px 0px 5px #000;
+
+}
+
+#show-settings:checked~.settings-container {
+    display: block;
+}
+
+.settings-container .close-btn {
+    position: absolute;
+    right: 20px;
+    top: 15px;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.settings-container .close-btn:hover {
+    color: #3498db;
+}
+
+
+.wallet-btn,
+.mypixel-btn,
+.settings-btn {
+    background: #fff;
+    margin: 10px 10px;
+    padding: 10px 10px;
+    color: #3498db;
+    cursor: pointer;
+}

src/front/title-bar.css

@@ -31,7 +31,6 @@
     background: #fff;
     margin: 10% 10px;
     padding: 10% 10px;
-    font-size: auto;
     color: #3498db;
     cursor: pointer;
 }