/tmp MDR
This commit is contained in:
parent
9f58270be8
commit
5579e0cdc8
|
@ -1,89 +0,0 @@
|
|||
.buypixel-container .text {
|
||||
font-size: 35px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buypixel-container .solde {
|
||||
font-size: 35px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 45px;
|
||||
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
|
||||
}
|
||||
|
||||
.buypixel-container form {
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.buypixel-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;
|
||||
}
|
||||
|
||||
#color {
|
||||
min-height: 20px;
|
||||
}
|
|
@ -1,11 +1,3 @@
|
|||
nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background: #3333;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.logged-out,
|
||||
.logged-in {
|
||||
display: flex;
|
|
@ -1,89 +0,0 @@
|
|||
.mypixel-container .text {
|
||||
font-size: 35px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mypixel-container .solde {
|
||||
font-size: 35px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 45px;
|
||||
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
|
||||
}
|
||||
|
||||
.mypixel-container form {
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.mypixel-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;
|
||||
}
|
||||
|
||||
#color {
|
||||
min-height: 20px;
|
||||
}
|
|
@ -1,5 +1,4 @@
|
|||
#login,
|
||||
#signup {
|
||||
.popup {
|
||||
display: none;
|
||||
background: #fff;
|
||||
|
||||
|
@ -15,14 +14,13 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.close {
|
||||
.popup > button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popup .close {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#login > button,
|
||||
#signup > button {
|
||||
cursor: pointer;
|
||||
}
|
|
@ -1,175 +0,0 @@
|
|||
.menu-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-menu:checked ~ .menu-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-container .close-btn {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.buypixel-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-buypixel:checked ~ .buypixel-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.buypixel-container .close-btn {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.buypixel-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,
|
||||
.buypixel-btn,
|
||||
.settings-btn {
|
||||
background: #fff;
|
||||
margin: 10px 10px;
|
||||
padding: 10px 10px;
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
}
|
|
@ -10,11 +10,10 @@ body {
|
|||
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
|
||||
}
|
||||
|
||||
.href {
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.href:hover {
|
||||
text-decoration: underline;
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background: #3333;
|
||||
height: 5rem;
|
||||
}
|
|
@ -1,85 +0,0 @@
|
|||
.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;
|
||||
}
|
BIN
src/main/webapp/favicon.ico
Normal file
BIN
src/main/webapp/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 894 B |
|
@ -3,12 +3,12 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Pixels</title>
|
||||
<link rel="stylesheet" href="css/utils.css" />
|
||||
<link rel="stylesheet" href="css/title-bar.css" />
|
||||
<link rel="stylesheet" href="css/login-signup.css" />
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="css/pixels.css" />
|
||||
<script src="js/login-signup.js"></script>
|
||||
<link rel="stylesheet" href="css/popups.css" />
|
||||
<link rel="stylesheet" href="css/logged-in-out.css" />
|
||||
<script src="js/pixels.js"></script>
|
||||
<script src="js/user.js"></script>
|
||||
<script src="js/loaded.js"></script>
|
||||
</head>
|
||||
|
||||
|
@ -17,11 +17,11 @@
|
|||
<img src="assets/logo.png" />
|
||||
|
||||
<span class="logged-out">
|
||||
<button onclick="toggleLoginPopup();">Login</button>
|
||||
<button onclick="toggleSignupPopup();">Signup</button>
|
||||
<button onclick="togglePopup('login');">Login</button>
|
||||
<button onclick="togglePopup('signup');">Signup</button>
|
||||
|
||||
<div id="login">
|
||||
<button onclick="toggleLoginPopup()" class="close">
|
||||
<div id="login" class="popup">
|
||||
<button onclick="togglePopup('login')" class="close">
|
||||
X
|
||||
</button>
|
||||
|
||||
|
@ -29,7 +29,7 @@
|
|||
|
||||
<form id="login-form" action="api/user/login" method="post">
|
||||
<div>
|
||||
<label>Nickname</label>
|
||||
<label>Username</label>
|
||||
<input type="text" name="username" required />
|
||||
</div>
|
||||
|
||||
|
@ -42,8 +42,8 @@
|
|||
</form>
|
||||
</div>
|
||||
|
||||
<div id="signup">
|
||||
<button onclick="toggleSignupPopup()" class="close">
|
||||
<div id="signup" class="popup">
|
||||
<button onclick="togglePopup('signup')" class="close">
|
||||
X
|
||||
</button>
|
||||
|
||||
|
@ -55,7 +55,7 @@
|
|||
method="post"
|
||||
>
|
||||
<div>
|
||||
<label>Nickname</label>
|
||||
<label>Username</label>
|
||||
<input type="text" name="username" required />
|
||||
</div>
|
||||
|
||||
|
@ -70,8 +70,8 @@
|
|||
</span>
|
||||
|
||||
<span class="logged-in">
|
||||
USERNAME HERE
|
||||
<button onclick="userLogout();">Logout</button>
|
||||
<span id="username"></span>
|
||||
<button onclick="userLogout()">Logout</button>
|
||||
</span>
|
||||
</nav>
|
||||
|
||||
|
@ -87,5 +87,65 @@
|
|||
<tr></tr>
|
||||
<tr></tr>
|
||||
</table>
|
||||
|
||||
<div id="buy" class="popup">
|
||||
<button onclick="togglePopup('buy')" class="close">X</button>
|
||||
|
||||
Pixel infos
|
||||
|
||||
<div>
|
||||
<label>Owner</label>
|
||||
<span id="info-owner"></span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Description</label>
|
||||
<span id="info-description"></span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Price</label>
|
||||
<span id="info-price"></span>
|
||||
</div>
|
||||
|
||||
<form id="buy-form" class="logged-in" method="post">
|
||||
<button type="submit">Buy</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="modify" class="popup">
|
||||
<button onclick="togglePopup('modify')" class="close">X</button>
|
||||
|
||||
Modify pixel
|
||||
|
||||
<form id="modify-form" method="post">
|
||||
<div class="data">
|
||||
<label>Price</label>
|
||||
<input type="number" name="price" id="price" required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Red</label>
|
||||
<input type="range" name="red" required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Green</label>
|
||||
<input type="range" name="green" required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Blue</label>
|
||||
<input type="range" name="blue" required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Description</label>
|
||||
<input type="text" name="description" required />
|
||||
</div>
|
||||
|
||||
<button type="submit">Modify</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,260 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Pixel</title>
|
||||
<link rel="stylesheet" href="css/utils.css" />
|
||||
<link rel="stylesheet" href="css/title-bar.css" />
|
||||
<link rel="stylesheet" href="css/profil.css" />
|
||||
<link rel="stylesheet" href="css/pixels.css" />
|
||||
<link rel="stylesheet" href="css/wallet.css" />
|
||||
<link rel="stylesheet" href="css/mypixel.css" />
|
||||
<link rel="stylesheet" href="css/buypixel.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-buypixel").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-buypixel").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-buypixel").checked = false;
|
||||
document.getElementById("show-settings").checked = false;
|
||||
}
|
||||
function setBuypixel() {
|
||||
document.getElementById("show-menu").checked = false;
|
||||
document.getElementById("show-wallet").checked = false;
|
||||
document.getElementById("show-mypixel").checked = false;
|
||||
document.getElementById("show-buypixel").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-buypixel").checked = false;
|
||||
document.getElementById("show-settings").checked = true;
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="pixels.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="title-bar">
|
||||
<div class="title"><img src="logo.png" /> Pixels</div>
|
||||
<div class="profil">
|
||||
<input type="checkbox" id="show-menu" class="show" />
|
||||
<input type="checkbox" id="show-wallet" class="show" />
|
||||
<input type="checkbox" id="show-mypixel" class="show" />
|
||||
<input type="checkbox" id="show-buypixel" 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="buypixel-btn" onclick="setBuypixel()"
|
||||
>Buy pixel</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>
|
||||
<br />
|
||||
<div class="solde"></div>
|
||||
<form action="pay" method="post">
|
||||
<div class="data">
|
||||
<label>Amount</label>
|
||||
<input type="number" name="amount" required />
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Card number</label>
|
||||
<input type="number" name="card" required />
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Expiry date</label>
|
||||
<input type="month" name="date" required />
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">Pay</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="mypixel-container">
|
||||
<label for="show-mypixel" class="close-btn" title="close"
|
||||
>X</label
|
||||
>
|
||||
<div class="text">My pixels</div>
|
||||
<br />
|
||||
<div class="solde"></div>
|
||||
<div id="color"></div>
|
||||
<div id="pixel-index"></div>
|
||||
(
|
||||
<div id="user-pixel-index"></div>
|
||||
)
|
||||
<form action="modify" method="post">
|
||||
<div class="data">
|
||||
<label>Price</label>
|
||||
<input
|
||||
type="number"
|
||||
name="price"
|
||||
id="price"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Red</label>
|
||||
<input
|
||||
type="range"
|
||||
name="red"
|
||||
id="red"
|
||||
oninput="updateUserColorPreview()"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Green</label>
|
||||
<input
|
||||
type="range"
|
||||
name="green"
|
||||
id="green"
|
||||
oninput="updateUserColorPreview()"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Blue</label>
|
||||
<input
|
||||
type="range"
|
||||
name="blue"
|
||||
id="blue"
|
||||
oninput="updateUserColorPreview()"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Description</label>
|
||||
<input
|
||||
type="text"
|
||||
name="desc"
|
||||
id="description"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">Modify</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div class="btn">
|
||||
<button onclick="previousUserPixel()">
|
||||
Previous
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button onclick="nextUserPixel()">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buypixel-container">
|
||||
<label for="show-buypixel" class="close-btn" title="close"
|
||||
>X</label
|
||||
>
|
||||
<div class="text">Buy pixel</div>
|
||||
<br />
|
||||
<form action="modify" method="post">
|
||||
<div class="solde"></div>
|
||||
<div class="data">
|
||||
<label>Index</label>
|
||||
<input
|
||||
type="number"
|
||||
name="index"
|
||||
id="buy-pixel-index"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Owner</label>
|
||||
<div id="buy-pixel-owner"></div>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Description</label>
|
||||
<div id="buy-pixel-description"></div>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Price</label>
|
||||
<div id="buy-pixel-price"></div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">Buy</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div class="btn">
|
||||
<button onclick="previousBuyPixel()">
|
||||
Previous
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button onclick="nextBuyPixel()">Next</button>
|
||||
</div>
|
||||
</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>
|
||||
<div class="pixel-container">
|
||||
<table id="pixelTable">
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -1,19 +1,21 @@
|
|||
// fonction qui s'execute quand la page a finie de charger
|
||||
function pageLoaded() {
|
||||
// permet d'intercepter la requête post du formulaire et de la changer un peu
|
||||
document.forms["login-form"].addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
fetch(event.target.action, {
|
||||
method: "POST",
|
||||
body: new URLSearchParams(new FormData(event.target)),
|
||||
}).then((resp) => {
|
||||
}).then(async (resp) => {
|
||||
if (resp.ok) {
|
||||
userLogin();
|
||||
console.log("logged in !");
|
||||
toggleLoginPopup();
|
||||
togglePopup("login");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// permet d'intercepter la requête post du formulaire et de la changer un peu
|
||||
document.forms["signup-form"].addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
|
@ -23,12 +25,15 @@ function pageLoaded() {
|
|||
}).then((resp) => {
|
||||
if (resp.ok) {
|
||||
userLogin();
|
||||
console.log("signed up ! (and logged in)");
|
||||
toggleSignupPopup();
|
||||
togglePopup("signup");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
updatePixelsJSON();
|
||||
setInterval(updatePixelsJSON, 10000);
|
||||
updatePixelGrid();
|
||||
setInterval(updatePixelGrid, 10000);
|
||||
|
||||
if (localStorage.getItem("logged")) {
|
||||
userLogin();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,54 +0,0 @@
|
|||
function toggleLoginPopup() {
|
||||
signup = document.getElementById("signup");
|
||||
signup.style.display = "none";
|
||||
|
||||
toggleElement("login");
|
||||
}
|
||||
|
||||
function toggleSignupPopup() {
|
||||
login = document.getElementById("login");
|
||||
login.style.display = "none";
|
||||
|
||||
toggleElement("signup");
|
||||
}
|
||||
|
||||
function toggleElement(id) {
|
||||
element = document.getElementById(id);
|
||||
if (element.style.display === "none" || element.style.display === "") {
|
||||
element.style.display = "unset";
|
||||
} else {
|
||||
element.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function userLogin() {
|
||||
let elements = document.getElementsByClassName("logged-out");
|
||||
for (element of elements) {
|
||||
element.style.display = "none";
|
||||
}
|
||||
|
||||
elements = document.getElementsByClassName("logged-in");
|
||||
for (element of elements) {
|
||||
element.style.display = "flex";
|
||||
}
|
||||
}
|
||||
|
||||
function userLogout() {
|
||||
fetch("/api/user/logout", {
|
||||
method: "POST",
|
||||
}).then((resp) => {
|
||||
if (resp.ok) {
|
||||
let elements = document.getElementsByClassName("logged-out");
|
||||
for (element of elements) {
|
||||
element.style.display = "flex";
|
||||
}
|
||||
|
||||
elements = document.getElementsByClassName("logged-in");
|
||||
for (element of elements) {
|
||||
element.style.display = "none";
|
||||
}
|
||||
|
||||
console.log("logged out");
|
||||
}
|
||||
});
|
||||
}
|
|
@ -1,224 +0,0 @@
|
|||
//////////////////
|
||||
// Update loops //
|
||||
//////////////////
|
||||
|
||||
var urlPixel = "http://localhost:8080/api/pixel";
|
||||
var urlUser = "http://localhost:8080/api/user";
|
||||
|
||||
var pixelsJSON;
|
||||
var userJSON;
|
||||
|
||||
const updatePixelsJSON = async () => {
|
||||
var reponse = await fetch(urlPixel);
|
||||
pixelsJSON = await reponse.json();
|
||||
};
|
||||
|
||||
const updateUserJSON = async () => {
|
||||
var reponse = await fetch(urlUser);
|
||||
userJSON = await reponse.json();
|
||||
};
|
||||
|
||||
function updateSolde() {
|
||||
var elems = document.getElementsByClassName("solde");
|
||||
elems.forEach((el) => {
|
||||
el.innerHTML = userJSON.solde + "₿";
|
||||
});
|
||||
}
|
||||
|
||||
updateSolde();
|
||||
updateUserJSON();
|
||||
updatePixelsJSON();
|
||||
setInterval(updateSolde, 10000);
|
||||
setInterval(updateUserJSON, 10000);
|
||||
setInterval(updatePixelsJSON, 10000);
|
||||
|
||||
////////////////
|
||||
// Pixel grid //
|
||||
////////////////
|
||||
|
||||
function setPixels() {
|
||||
var table = document.getElementById("pixelTable");
|
||||
var num_rows = table.rows.length;
|
||||
|
||||
for (let i = 0; i < num_rows; i++) {
|
||||
table.rows[i].innerHTML = "";
|
||||
}
|
||||
|
||||
for (i in pixelsJSON) {
|
||||
var pixel = pixelsJSON[i];
|
||||
var row_id = Math.floor((pixel.id - 1) / num_rows);
|
||||
var row = table.rows[row_id];
|
||||
|
||||
row.innerHTML +=
|
||||
'<td class="pixel" style="background:#' +
|
||||
pixel.color +
|
||||
'">' +
|
||||
'<div class="info-pixel">' +
|
||||
'<div class="username">' +
|
||||
pixel.owner_username +
|
||||
"</div>" +
|
||||
'<div class="description">' +
|
||||
pixel.description +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
'<div class="patch-shadow"></div>' +
|
||||
"</td>";
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////
|
||||
// Modify my pixels //
|
||||
//////////////////////
|
||||
|
||||
function hexToRgb(hex) {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
console.log(result);
|
||||
return result
|
||||
? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16),
|
||||
}
|
||||
: null;
|
||||
}
|
||||
|
||||
// Initialize pixel index
|
||||
function initUserPixel() {
|
||||
var user_pixel_index = 0;
|
||||
var pixel_index = userJSON.pixels[user_pixel_index] - 1;
|
||||
|
||||
document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
|
||||
document.getElementById("pixel-index").innerHTML = pixel_index;
|
||||
|
||||
updatePixelPreview();
|
||||
}
|
||||
|
||||
// Compute next pixel index
|
||||
function nextUserPixel() {
|
||||
var user_pixel_index = parseInt(
|
||||
document.getElementById("user-pixel-index").innerHTML
|
||||
);
|
||||
|
||||
user_pixel_index++;
|
||||
if (user_pixel_index > userJSON.pixels.length - 1) {
|
||||
user_pixel_index = 0;
|
||||
}
|
||||
|
||||
var pixel_index = userJSON.pixels[user_pixel_index] - 1;
|
||||
|
||||
document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
|
||||
document.getElementById("pixel-index").innerHTML = pixel_index;
|
||||
|
||||
updatePixelPreview();
|
||||
}
|
||||
|
||||
// Compute previous pixel index
|
||||
function previousUserPixel() {
|
||||
var user_pixel_index = parseInt(
|
||||
document.getElementById("user-pixel-index").innerHTML
|
||||
);
|
||||
|
||||
user_pixel_index--;
|
||||
if (user_pixel_index < 0) {
|
||||
user_pixel_index = userJSON.pixels.length - 1;
|
||||
}
|
||||
|
||||
var pixel_index = userJSON.pixels[user_pixel_index] - 1;
|
||||
|
||||
document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
|
||||
document.getElementById("pixel-index").innerHTML = pixel_index;
|
||||
|
||||
updatePixelPreview();
|
||||
}
|
||||
|
||||
function updatePixelPreview() {
|
||||
var index = parseInt(document.getElementById("pixel-index").innerHTML);
|
||||
var pixel = pixelsJSON[index];
|
||||
|
||||
// Update price
|
||||
var price = document.getElementById("price");
|
||||
price.value = pixel.price;
|
||||
|
||||
// Update color
|
||||
var red = document.getElementById("red");
|
||||
var green = document.getElementById("green");
|
||||
var blue = document.getElementById("blue");
|
||||
|
||||
var color = hexToRgb(pixel.color);
|
||||
|
||||
red.value = color.r;
|
||||
green.value = color.g;
|
||||
blue.value = color.b;
|
||||
|
||||
updateUserColorPreview();
|
||||
|
||||
// Update description
|
||||
var description = document.getElementById("description");
|
||||
description.value = pixel.description;
|
||||
}
|
||||
|
||||
// Update preview's color
|
||||
function updateUserColorPreview() {
|
||||
var red = (document.getElementById("red").value * 255) / 100;
|
||||
var green = (document.getElementById("green").value * 255) / 100;
|
||||
var blue = (document.getElementById("blue").value * 255) / 100;
|
||||
|
||||
var color = document.getElementById("color");
|
||||
color.style.background = "rgb(" + red + "," + green + "," + blue + ")";
|
||||
}
|
||||
|
||||
initUserPixel();
|
||||
|
||||
///////////////
|
||||
// Buy pixel //
|
||||
///////////////
|
||||
|
||||
// Initialize pixel index
|
||||
function initBuyPixel() {
|
||||
var pixel_index = 0;
|
||||
|
||||
var pixel = pixelsJSON[pixel_index];
|
||||
updatePixelBuyPreview(pixel);
|
||||
}
|
||||
|
||||
// Compute next pixel index
|
||||
function nextBuyPixel() {
|
||||
var pixel_index = document.getElementById("buy-pixel-index").value;
|
||||
|
||||
var table = document.getElementById("pixelTable");
|
||||
var number_rows = table.rows.length;
|
||||
|
||||
pixel_index++;
|
||||
if (pixel_index > number_rows * number_rows - 1) {
|
||||
pixel_index = 0;
|
||||
}
|
||||
|
||||
var pixel = pixelsJSON[pixel_index];
|
||||
updatePixelBuyPreview(pixel);
|
||||
}
|
||||
|
||||
// Compute previous pixel index
|
||||
function previousBuyPixel() {
|
||||
var pixel_index = document.getElementById("buy-pixel-index").value;
|
||||
|
||||
var table = document.getElementById("pixelTable");
|
||||
var number_rows = table.rows.length;
|
||||
|
||||
pixel_index--;
|
||||
if (pixel_index < 0) {
|
||||
pixel_index = number_rows * number_rows - 1;
|
||||
}
|
||||
|
||||
var pixel = pixelsJSON[pixel_index];
|
||||
updatePixelBuyPreview(pixel);
|
||||
}
|
||||
|
||||
function updatePixelBuyPreview(pixel) {
|
||||
document.getElementById("buy-pixel-index").value = pixel.id - 1;
|
||||
document.getElementById("buy-pixel-owner").innerHTML = pixel.owner_username;
|
||||
document.getElementById("buy-pixel-description").innerHTML =
|
||||
pixel.description;
|
||||
document.getElementById("buy-pixel-price").innerHTML = pixel.price;
|
||||
}
|
||||
|
||||
initBuyPixel();
|
|
@ -1,12 +1,15 @@
|
|||
let urlPixel = "http://localhost:8080/api/pixel";
|
||||
let urlPixel = "http://localhost:8080/api/pixel/";
|
||||
|
||||
const updatePixelsJSON = async () => {
|
||||
reponse = await fetch(urlPixel);
|
||||
pixelsJSON = await reponse.json();
|
||||
setPixels();
|
||||
const updatePixelGrid = async () => {
|
||||
fetch(urlPixel).then(async (resp) => {
|
||||
if (resp.ok) {
|
||||
json = await resp.json();
|
||||
setPixels(json);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function setPixels() {
|
||||
function setPixels(json) {
|
||||
var table = document.getElementById("pixels");
|
||||
var num_rows = table.rows.length;
|
||||
|
||||
|
@ -14,15 +17,17 @@ function setPixels() {
|
|||
table.rows[i].innerHTML = "";
|
||||
}
|
||||
|
||||
for (i in pixelsJSON) {
|
||||
var pixel = pixelsJSON[i];
|
||||
for (i in json) {
|
||||
var pixel = json[i];
|
||||
var row_id = Math.floor((pixel.id - 1) / num_rows);
|
||||
var row = table.rows[row_id];
|
||||
|
||||
row.innerHTML +=
|
||||
'<td class="pixel" style="background:#' +
|
||||
pixel.color +
|
||||
'">' +
|
||||
'" onclick="pixelClick(' +
|
||||
pixel.id +
|
||||
')">' +
|
||||
'<div class="info-pixel">' +
|
||||
'<div class="username">' +
|
||||
pixel.owner_username +
|
||||
|
@ -35,3 +40,39 @@ function setPixels() {
|
|||
"</td>";
|
||||
}
|
||||
}
|
||||
|
||||
function pixelClick(id) {
|
||||
fetch(urlPixel + id).then(async (resp) => {
|
||||
if (resp.ok) {
|
||||
pixel = await resp.json();
|
||||
|
||||
fetch(urlUser).then(async (resp) => {
|
||||
if (resp.ok) {
|
||||
user = await resp.json();
|
||||
|
||||
if (user.pixels.includes(pixel.id)) {
|
||||
form = document.getElementById("modify-form");
|
||||
form.action = urlPixel + pixel.id + "/modify";
|
||||
|
||||
togglePopup("modify");
|
||||
} else {
|
||||
owner = document.getElementById("info-owner");
|
||||
owner.innerHTML = pixel.owner_username;
|
||||
|
||||
description =
|
||||
document.getElementById("info-description");
|
||||
description.innerHTML = pixel.description;
|
||||
|
||||
price = document.getElementById("info-price");
|
||||
price.innerHTML = pixel.price;
|
||||
|
||||
form = document.getElementById("buy-form");
|
||||
form.action = urlPixel + pixel.id + "/buy";
|
||||
|
||||
togglePopup("buy");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
61
src/main/webapp/js/user.js
Normal file
61
src/main/webapp/js/user.js
Normal file
|
@ -0,0 +1,61 @@
|
|||
let urlUser = "http://localhost:8080/api/user";
|
||||
let urlLogout = "http://localhost:8080/api/user/logout";
|
||||
|
||||
function togglePopup(id) {
|
||||
popups = document.getElementsByClassName("popup");
|
||||
for (popup of popups) {
|
||||
if (popup.id == id) {
|
||||
if (popup.style.display != "unset") {
|
||||
popup.style.display = "unset";
|
||||
} else {
|
||||
popup.style.display = "none";
|
||||
}
|
||||
} else {
|
||||
popup.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
async function userLogin() {
|
||||
fetch(urlUser).then(async (resp) => {
|
||||
if (resp.ok) {
|
||||
user = await resp.json();
|
||||
|
||||
username = document.getElementById("username");
|
||||
username.innerHTML = user.user;
|
||||
|
||||
let elements = document.getElementsByClassName("logged-out");
|
||||
for (element of elements) {
|
||||
element.style.display = "none";
|
||||
}
|
||||
|
||||
elements = document.getElementsByClassName("logged-in");
|
||||
for (element of elements) {
|
||||
element.style.display = "flex";
|
||||
}
|
||||
|
||||
localStorage.setItem("logged", true);
|
||||
console.log("logged in");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function userLogout() {
|
||||
fetch(urlLogout, {
|
||||
method: "POST",
|
||||
}).then((resp) => {
|
||||
if (resp.ok) {
|
||||
let elements = document.getElementsByClassName("logged-out");
|
||||
for (element of elements) {
|
||||
element.style.display = "flex";
|
||||
}
|
||||
|
||||
elements = document.getElementsByClassName("logged-in");
|
||||
for (element of elements) {
|
||||
element.style.display = "none";
|
||||
}
|
||||
|
||||
localStorage.setItem("logged", false);
|
||||
console.log("logged out");
|
||||
}
|
||||
});
|
||||
}
|
Loading…
Reference in a new issue