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

feat: pixels

Browse source
This commit is contained in:
gdamms 2022-05-20 17:39:56 +02:00
parent d1b048ffea
commit 411e6fff92
6 changed files with 252 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/main/webapp/index.html
View file

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

54
src/main/webapp/index2.html
View file

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

8
src/main/webapp/pixels.js
View file

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