ENSEEIHT/projet-application-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: wallet

Browse source
This commit is contained in:
gdamms 2022-05-10 17:25:03 +02:00
parent 764f32ef9b
commit 57d3e97103
5 changed files with 127 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/front/index.html
View file

@ -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>

34
src/front/index2.html
View file

@ -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">

4
src/front/login-signup.css
View file

@ -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%;

8
src/front/pixels.css
View file

@ -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
View 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;
}