feat: wallet
This commit is contained in:
parent
764f32ef9b
commit
57d3e97103
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -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 {
|
||||
|
|
85
src/front/wallet.css
Normal file
85
src/front/wallet.css
Normal file
|
@ -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;
|
||||
}
|
Loading…
Reference in a new issue