Merge branch 'master' of git.inpt.fr:tocard-inc/enseeiht/projet-web
This commit is contained in:
Laureηt
commit
70e24f39f5
|
|
@ -35,14 +35,14 @@
|
|||
<div class="text">
|
||||
Login
|
||||
</div>
|
||||
<form action="#">
|
||||
<form action="login" method="post">
|
||||
<div class="data">
|
||||
<label>Nickname</label>
|
||||
<input type="text" required>
|
||||
<input type="text" name="username" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Password</label>
|
||||
<input type="password" required>
|
||||
<input type="password" name="password" required>
|
||||
</div>
|
||||
<div class="forgot-pass">
|
||||
<a href="#">Forgot Password?</a>
|
||||
|
|
@ -62,14 +62,14 @@
|
|||
<div class="text">
|
||||
Signup
|
||||
</div>
|
||||
<form action="#">
|
||||
<form action="signup" method="post">
|
||||
<div class="data">
|
||||
<label>Nickname</label>
|
||||
<input type="text" required>
|
||||
<input type="text" name="username" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Password</label>
|
||||
<input type="password" required>
|
||||
<input type="password" name="password" required>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">signup</button>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<link rel="stylesheet" href="profil.css">
|
||||
<link rel="stylesheet" href="pixels.css">
|
||||
<link rel="stylesheet" href="wallet.css">
|
||||
<link rel="stylesheet" href="mypixel.css">
|
||||
<script>
|
||||
function setMenu() {
|
||||
if (document.getElementById("show-menu").checked) {
|
||||
|
|
@ -39,6 +40,8 @@
|
|||
document.getElementById("show-settings").checked = true;
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="pixels.js"></script>
|
||||
<script type="text/javascript" src="userinfo.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -74,21 +77,19 @@
|
|||
Wallet
|
||||
</div>
|
||||
<br />
|
||||
<div class="solde">
|
||||
9999$
|
||||
</div>
|
||||
<form>
|
||||
<div class="solde" id="solde"></div>
|
||||
<form action="pay" method="post">
|
||||
<div class="data">
|
||||
<label>Amount</label>
|
||||
<input type="number" required>
|
||||
<input type="number" name="amount" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Card number</label>
|
||||
<input type="number" required>
|
||||
<input type="number" name="card" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Expiry date</label>
|
||||
<input type="month" required>
|
||||
<input type="month" name="date" required>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">Pay</button>
|
||||
|
|
@ -101,6 +102,44 @@
|
|||
<div class="text">
|
||||
My pixels
|
||||
</div>
|
||||
<br />
|
||||
<form action="modify" method="post">
|
||||
<div class="data">
|
||||
<label>Index</label>
|
||||
<input class="color" type="number" name="index" id="color" required>
|
||||
</div>
|
||||
<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="updateColor()" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Green</label>
|
||||
<input type="range" name="green" id="green" oninput="updateColor()" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Blue</label>
|
||||
<input type="range" name="blue" id="blue" oninput="updateColor()" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Description</label>
|
||||
<input type="text" name="desc" onchange="updateColor()" id="description" required>
|
||||
</div>
|
||||
<div class=" btn">
|
||||
<button type="submit">Modify</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div class="btn">
|
||||
<button onclick="previousPixel()">Previous</button>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button onclick="nextPixel()">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-container">
|
||||
|
|
@ -125,6 +164,7 @@
|
|||
<tr></tr>
|
||||
</table>
|
||||
</div>
|
||||
<script type="text/javascript" src="modify_pixel.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
95
src/main/webapp/modify_pixel.js
Normal file
95
src/main/webapp/modify_pixel.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
var url = "http://localhost:8080/api/pixel";
|
||||
|
||||
var reponse;
|
||||
var pixelsJSON;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
function nextPixel() {
|
||||
var index = document.getElementById("color").value - 1;
|
||||
|
||||
var table = document.getElementById("pixelTable");
|
||||
var num_rows = table.rows.length;
|
||||
|
||||
index++;
|
||||
if (index > num_rows * num_rows - 1) {
|
||||
index = 0;
|
||||
}
|
||||
|
||||
document.getElementById("color").value = index + 1;
|
||||
|
||||
updateInfo();
|
||||
}
|
||||
|
||||
function previousPixel() {
|
||||
var index = document.getElementById("color").value - 1;
|
||||
|
||||
var table = document.getElementById("pixelTable");
|
||||
var num_rows = table.rows.length;
|
||||
|
||||
index--;
|
||||
if (index < 0) {
|
||||
index = num_rows * num_rows - 1;
|
||||
}
|
||||
|
||||
document.getElementById("color").value = index + 1;
|
||||
|
||||
updateInfo();
|
||||
}
|
||||
|
||||
function updateInfo() {
|
||||
var colorDiv = document.getElementById("color");
|
||||
var index = colorDiv.value - 1;
|
||||
|
||||
var pixel = pixelsJSON[index];
|
||||
|
||||
var price = document.getElementById("price");
|
||||
price.value = pixel.price;
|
||||
|
||||
var red = document.getElementById("red");
|
||||
var green = document.getElementById("green");
|
||||
var blue = document.getElementById("blue");
|
||||
|
||||
console.log(pixel.color);
|
||||
var color = hexToRgb(pixel.color);
|
||||
console.log(color);
|
||||
|
||||
red.value = color.r;
|
||||
green.value = color.g;
|
||||
blue.value = color.b;
|
||||
colorDiv.style.color = 'rgb(' + (255 - color.r) + ',' + (255 - color.g) + ',' + (255 - color.b) + ')';
|
||||
colorDiv.style.background = 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')';
|
||||
|
||||
var description = document.getElementById("description");
|
||||
description.value = pixel.description;
|
||||
|
||||
updateColor();
|
||||
}
|
||||
|
||||
function updateColor() {
|
||||
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 + ")";
|
||||
}
|
||||
|
||||
const updatePixelsJSON = async () => {
|
||||
reponse = await fetch(url);
|
||||
pixelsJSON = await reponse.json();
|
||||
}
|
||||
|
||||
updatePixelsJSON();
|
||||
setInterval(updatePixelsJSON, 10000);
|
||||
|
||||
updateColor();
|
||||
updateInfo();
|
||||
89
src/main/webapp/mypixel.css
Normal file
89
src/main/webapp/mypixel.css
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
.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,13 +1,5 @@
|
|||
var url = "http://localhost:8080/api/pixel";
|
||||
|
||||
function wait(ms) {
|
||||
var start = new Date().getTime();
|
||||
var end = start;
|
||||
while(end < start + ms) {
|
||||
end = new Date().getTime();
|
||||
}
|
||||
}
|
||||
|
||||
function setPixels(pixelsJSON) {
|
||||
var table = document.getElementById("pixelTable");
|
||||
var num_rows = table.rows.length;
|
||||
|
|
|
|||
15
src/main/webapp/userinfo.js
Normal file
15
src/main/webapp/userinfo.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
var url = "http://localhost:8080/api/user";
|
||||
|
||||
function setSolde(userJSON) {
|
||||
var div = document.getElementById("solde");
|
||||
div.innerHTML = userJSON.solde + '$';
|
||||
}
|
||||
|
||||
const updateSolde = async () => {
|
||||
const reponse = await fetch(url);
|
||||
const userJSON = await reponse.json();
|
||||
setSolde(userJSON);
|
||||
}
|
||||
|
||||
updateSolde();
|
||||
setInterval(updateSolde, 10000);
|
||||
Loading…
Reference in a new issue