From 57d3e971034c9ff9f34aa3c22b68b0dcac81ae1e Mon Sep 17 00:00:00 2001
From: gdamms <damguillotin@gmail.com>
Date: Tue, 10 May 2022 17:25:03 +0200
Subject: [PATCH] feat: wallet

---
 src/front/index.html       |  8 ++--
 src/front/index2.html      | 34 +++++++++++++--
 src/front/login-signup.css |  4 ++
 src/front/pixels.css       |  8 ++--
 src/front/wallet.css       | 85 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 127 insertions(+), 12 deletions(-)
 create mode 100644 src/front/wallet.css

diff --git a/src/front/index.html b/src/front/index.html
index 4597cc0..e30b5c5 100644
--- a/src/front/index.html
+++ b/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>
diff --git a/src/front/index2.html b/src/front/index2.html
index 0264876..1dcca4e 100644
--- a/src/front/index2.html
+++ b/src/front/index2.html
@@ -9,12 +9,17 @@
     <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() {
-            document.getElementById("show-menu").checked = true;
-            document.getElementById("show-wallet").checked = false;
-            document.getElementById("show-mypixel").checked = false;
-            document.getElementById("show-settings").checked = false;
+            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;
@@ -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">
diff --git a/src/front/login-signup.css b/src/front/login-signup.css
index e8b07eb..810a17a 100644
--- a/src/front/login-signup.css
+++ b/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%;
diff --git a/src/front/pixels.css b/src/front/pixels.css
index 7d6cf9d..2313619 100644
--- a/src/front/pixels.css
+++ b/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 {
diff --git a/src/front/wallet.css b/src/front/wallet.css
new file mode 100644
index 0000000..95f3259
--- /dev/null
+++ b/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;
+}
\ No newline at end of file