feat: wallet

src/front/index.html

@@ -25,13 +25,13 @@
         </div>
         <div class="profil">
             <input type="checkbox" id="show-login" class="show">
-            <label for="show-login" class="login-btn">Login</label>
+            <div onclick="toggleLoginSignup(true, false)" class="login-btn">Login</div>
 
             <input type="checkbox" id="show-signup" class="show">
-            <label for="show-signup" class="signup-btn">Signup</label>
+            <div onclick="toggleLoginSignup(false, true)" class="signup-btn">Signup</div>
 
             <div class="login-container">
-                <label for="show-login" class="close-btn" title="close">X</label>
+                <div onclick="toggleLoginSignup(false, false)" class="close-btn" title="close">X</div>
                 <div class="text">
                     Login
                 </div>
@@ -58,7 +58,7 @@
             </div>
 
             <div class="signup-container">
-                <label for="show-signup" class="close-btn" title="close">X</label>
+                <div onclick="toggleLoginSignup(false, false)" class="close-btn" title="close">X</div>
                 <div class="text">
                     Signup
                 </div>

src/front/index2.html

@@ -9,13 +9,18 @@
     <link rel="stylesheet" href="profil.css">
     <link rel="stylesheet" href="pixels.css">
     <link rel="stylesheet" href="pix.css">
+    <link rel="stylesheet" href="wallet.css">
     <script>
         function setMenu() {
+            if (document.getElementById("show-menu").checked) {
+                document.getElementById("show-menu").checked = false;
+            } else {
                 document.getElementById("show-menu").checked = true;
                 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;
@@ -69,6 +74,27 @@
                 <div class="text">
                     Wallet
                 </div>
+                <br />
+                <div class="solde">
+                    9999$
+                </div>
+                <form>
+                    <div class="data">
+                        <label>Amount</label>
+                        <input type="number" required>
+                    </div>
+                    <div class="data">
+                        <label>Card number</label>
+                        <input type="number" required>
+                    </div>
+                    <div class="data">
+                        <label>Expiry date</label>
+                        <input type="month" required>
+                    </div>
+                    <div class="btn">
+                        <button type="submit">Pay</button>
+                    </div>
+                </form>
             </div>
 
             <div class="mypixel-container">

src/front/login-signup.css

@@ -95,6 +95,10 @@ form .btn {
     border-radius: 45px;
 }
 
+form .btn:hover {
+    box-shadow: 0px 0px 5px 5px #3333;
+}
+
 form .btn button {
     height: 100%;
     width: 100%;

src/front/pixels.css

@@ -23,8 +23,8 @@ table {
 }
 
 .pixel:hover {
-  box-shadow: 0px 0px 0px var(--border-width) #333;
-  z-index: 5;
+  --border-color: #333;
+  box-shadow: 0px 0px 0px var(--border-width) var(--border-color);
 }
 
 .info-pixel {
@@ -32,7 +32,7 @@ table {
   position: relative;
   width: max-content;
   top: var(--side);
-  box-shadow: 0px 0px 0px var(--border-width) #333;
+  box-shadow: 0px 0px 0px var(--border-width) var(--border-color);
   background: #888;
 }
 
@@ -47,7 +47,7 @@ table {
   height: var(--side);
   left: var(--side);
   top: calc(var(--side) / (-2) + var(--border-width));
-  background: #333;
+  background: var(--border-color);
 }
 
 .pixel:hover .patch-shadow {

src/front/wallet.css

@@ -0,0 +1,85 @@
+.wallet-container .text {
+    font-size: 35px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.wallet-container .solde {
+    font-size: 35px;
+    font-weight: 600;
+    text-align: center;
+    color: #fff;
+    border-radius: 45px;
+    background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
+}
+
+.wallet-container form {
+    margin-top: -20px;
+}
+
+.wallet-container form .data {
+    height: 45px;
+    width: 100%;
+    margin: 40px 0;
+}
+
+form .data label {
+    font-size: 18px;
+}
+
+form .data input {
+    height: 100%;
+    width: 100%;
+    padding-left: 10px;
+    font-size: 17px;
+    border: 1px solid silver;
+}
+
+form .data input:focus {
+    border-color: #3498db;
+    border-bottom-width: 2px;
+}
+
+form .forgot-pass {
+    margin-top: -8px;
+}
+
+form .forgot-pass a {
+    color: #3498db;
+    text-decoration: none;
+}
+
+form .forgot-pass a:hover {
+    text-decoration: underline;
+}
+
+form .btn {
+    margin: 30px 0;
+    height: 45px;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    border-radius: 45px;
+}
+
+form .btn:hover {
+    box-shadow: 0px 0px 5px 5px #3333;
+}
+
+form .btn button {
+    height: 100%;
+    width: 100%;
+    background: none;
+    border: none;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
+}
+
+form .signup-login-link {
+    text-align: center;
+}