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

style: autoformatting

Browse source
This commit is contained in:
Laureηt 2022-05-27 14:30:57 +02:00
parent a957027656
commit 1939f8df0c
No known key found for this signature in database
GPG key ID: D88C6B294FD40994
8 changed files with 396 additions and 338 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8">
<title>Popup Login Form Design | CodingNepal</title> <title>Popup Login Form Design | CodingNepal</title>
<link rel="stylesheet" href="utils.css"> <link rel="stylesheet" href="utils.css" />
<link rel="stylesheet" href="title-bar.css"> <link rel="stylesheet" href="title-bar.css" />
<link rel="stylesheet" href="login-signup.css"> <link rel="stylesheet" href="login-signup.css" />
<link rel="stylesheet" href="pixels.css"> <link rel="stylesheet" href="pixels.css" />
<script> <script>
function toggleLoginSignup(l, s) { function toggleLoginSignup(l, s) {
document.getElementById("show-login").checked = l; document.getElementById("show-login").checked = l;
@ -15,34 +14,42 @@
} }
</script> </script>
<script type="text/javascript" src="pixels.js"></script> <script type="text/javascript" src="pixels.js"></script>
</head> </head>
<body>
<body>
<div class="title-bar"> <div class="title-bar">
<div class="title"> <div class="title"><img src="logo.png" /> Pixels</div>
<img src="logo.png" /> Pixels
</div>
<div class="profil"> <div class="profil">
<input type="checkbox" id="show-login" class="show"> <input type="checkbox" id="show-login" class="show" />
<div onclick="toggleLoginSignup(true, false)" class="login-btn">Login</div> <div onclick="toggleLoginSignup(true, false)" class="login-btn">
<input type="checkbox" id="show-signup" class="show">
<div onclick="toggleLoginSignup(false, true)" class="signup-btn">Signup</div>
<div class="login-container">
<div onclick="toggleLoginSignup(false, false)" class="close-btn" title="close">X</div>
<div class="text">
Login Login
</div> </div>
<input type="checkbox" id="show-signup" class="show" />
<div
onclick="toggleLoginSignup(false, true)"
class="signup-btn"
>
Signup
</div>
<div class="login-container">
<div
onclick="toggleLoginSignup(false, false)"
class="close-btn"
title="close"
>
X
</div>
<div class="text">Login</div>
<form action="api/user/login" method="post"> <form action="api/user/login" method="post">
<div class="data"> <div class="data">
<label>Nickname</label> <label>Nickname</label>
<input type="text" name="username" required> <input type="text" name="username" required />
</div> </div>
<div class="data"> <div class="data">
<label>Password</label> <label>Password</label>
<input type="password" name="password" required> <input type="password" name="password" required />
</div> </div>
<div class="forgot-pass"> <div class="forgot-pass">
<a href="#">Forgot Password?</a> <a href="#">Forgot Password?</a>
@ -52,31 +59,45 @@
</div> </div>
<div class="signup-login-link"> <div class="signup-login-link">
Not a member? Not a member?
<div class="href" onclick="toggleLoginSignup(false, true)">Signup now</div> <div
class="href"
onclick="toggleLoginSignup(false, true)"
>
Signup now
</div>
</div> </div>
</form> </form>
</div> </div>
<div class="signup-container"> <div class="signup-container">
<div onclick="toggleLoginSignup(false, false)" class="close-btn" title="close">X</div> <div
<div class="text"> onclick="toggleLoginSignup(false, false)"
Signup class="close-btn"
title="close"
>
X
</div> </div>
<div class="text">Signup</div>
<form action="api/user/signup" method="post"> <form action="api/user/signup" method="post">
<div class="data"> <div class="data">
<label>Nickname</label> <label>Nickname</label>
<input type="text" name="username" required> <input type="text" name="username" required />
</div> </div>
<div class="data"> <div class="data">
<label>Password</label> <label>Password</label>
<input type="password" name="password" required> <input type="password" name="password" required />
</div> </div>
<div class="btn"> <div class="btn">
<button type="submit">signup</button> <button type="submit">signup</button>
</div> </div>
<div class="signup-login-link"> <div class="signup-login-link">
Already a member? Already a member?
<div class="href" onclick="toggleLoginSignup(true, false)">Login now</div> <div
class="href"
onclick="toggleLoginSignup(true, false)"
>
Login now
</div>
</div> </div>
</form> </form>
</div> </div>
@ -96,6 +117,5 @@
<tr></tr> <tr></tr>
</table> </table>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,16 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8">
<title>Popup Login Form Design | CodingNepal</title> <title>Popup Login Form Design | CodingNepal</title>
<link rel="stylesheet" href="utils.css"> <link rel="stylesheet" href="utils.css" />
<link rel="stylesheet" href="title-bar.css"> <link rel="stylesheet" href="title-bar.css" />
<link rel="stylesheet" href="profil.css"> <link rel="stylesheet" href="profil.css" />
<link rel="stylesheet" href="pixels.css"> <link rel="stylesheet" href="pixels.css" />
<link rel="stylesheet" href="wallet.css"> <link rel="stylesheet" href="wallet.css" />
<link rel="stylesheet" href="mypixel.css"> <link rel="stylesheet" href="mypixel.css" />
<link rel="stylesheet" href="buypixel.css"> <link rel="stylesheet" href="buypixel.css" />
<script> <script>
function setMenu() { function setMenu() {
if (document.getElementById("show-menu").checked) { if (document.getElementById("show-menu").checked) {
@ -53,56 +52,61 @@
} }
</script> </script>
<script type="text/javascript" src="pixels.js"></script> <script type="text/javascript" src="pixels.js"></script>
</head> </head>
<body>
<body>
<div class="title-bar"> <div class="title-bar">
<div class="title"> <div class="title"><img src="logo.png" /> Pixels</div>
<img src="logo.png" /> Pixels
</div>
<div class="profil"> <div class="profil">
<input type="checkbox" id="show-menu" class="show"> <input type="checkbox" id="show-menu" class="show" />
<input type="checkbox" id="show-wallet" class="show"> <input type="checkbox" id="show-wallet" class="show" />
<input type="checkbox" id="show-mypixel" class="show"> <input type="checkbox" id="show-mypixel" class="show" />
<input type="checkbox" id="show-buypixel" class="show"> <input type="checkbox" id="show-buypixel" class="show" />
<input type="checkbox" id="show-settings" class="show"> <input type="checkbox" id="show-settings" class="show" />
<label class="menu-btn" onclick="setMenu()">Menu</label> <label class="menu-btn" onclick="setMenu()">Menu</label>
<div class="username">My name is Amogus</div> <div class="username">My name is Amogus</div>
<div class="menu-container"> <div class="menu-container">
<label for="show-menu" class="close-btn" title="close">X</label> <label for="show-menu" class="close-btn" title="close"
<div class="text"> >X</label
Menu >
</div> <div class="text">Menu</div>
<div> <div>
<label class="wallet-btn" onclick="setWallet()">Wallet</label> <label class="wallet-btn" onclick="setWallet()"
<label class="mypixel-btn" onclick="setMypixel()">My pixels</label> >Wallet</label
<label class="buypixel-btn" onclick="setBuypixel()">Buy pixel</label> >
<label class="settings-btn" onclick="setSettings()">Settings</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> </div>
<div class="wallet-container"> <div class="wallet-container">
<label for="show-wallet" class="close-btn" title="close">X</label> <label for="show-wallet" class="close-btn" title="close"
<div class="text"> >X</label
Wallet >
</div> <div class="text">Wallet</div>
<br /> <br />
<div class="solde"></div> <div class="solde"></div>
<form action="pay" method="post"> <form action="pay" method="post">
<div class="data"> <div class="data">
<label>Amount</label> <label>Amount</label>
<input type="number" name="amount" required> <input type="number" name="amount" required />
</div> </div>
<div class="data"> <div class="data">
<label>Card number</label> <label>Card number</label>
<input type="number" name="card" required> <input type="number" name="card" required />
</div> </div>
<div class="data"> <div class="data">
<label>Expiry date</label> <label>Expiry date</label>
<input type="month" name="date" required> <input type="month" name="date" required />
</div> </div>
<div class="btn"> <div class="btn">
<button type="submit">Pay</button> <button type="submit">Pay</button>
@ -110,35 +114,65 @@
</form> </form>
</div> </div>
<div class="mypixel-container"> <div class="mypixel-container">
<label for="show-mypixel" class="close-btn" title="close">X</label> <label for="show-mypixel" class="close-btn" title="close"
<div class="text"> >X</label
My pixels >
</div> <div class="text">My pixels</div>
<br /> <br />
<div class="solde"></div> <div class="solde"></div>
<div id="color"></div> <div id="color"></div>
<div id="pixel-index"></div> <div id="pixel-index"></div>
(<div id="user-pixel-index"></div>) (
<div id="user-pixel-index"></div>
)
<form action="modify" method="post"> <form action="modify" method="post">
<div class="data"> <div class="data">
<label>Price</label> <label>Price</label>
<input type="number" name="price" id="price" required> <input
type="number"
name="price"
id="price"
required
/>
</div> </div>
<div class="data"> <div class="data">
<label>Red</label> <label>Red</label>
<input type="range" name="red" id="red" oninput="updateUserColorPreview()" required> <input
type="range"
name="red"
id="red"
oninput="updateUserColorPreview()"
required
/>
</div> </div>
<div class="data"> <div class="data">
<label>Green</label> <label>Green</label>
<input type="range" name="green" id="green" oninput="updateUserColorPreview()" required> <input
type="range"
name="green"
id="green"
oninput="updateUserColorPreview()"
required
/>
</div> </div>
<div class="data"> <div class="data">
<label>Blue</label> <label>Blue</label>
<input type="range" name="blue" id="blue" oninput="updateUserColorPreview()" required> <input
type="range"
name="blue"
id="blue"
oninput="updateUserColorPreview()"
required
/>
</div> </div>
<div class="data"> <div class="data">
<label>Description</label> <label>Description</label>
<input type="text" name="desc" id="description" required> <input
type="text"
name="desc"
id="description"
required
/>
</div> </div>
<div class="btn"> <div class="btn">
<button type="submit">Modify</button> <button type="submit">Modify</button>
@ -146,7 +180,9 @@
</form> </form>
<div> <div>
<div class="btn"> <div class="btn">
<button onclick="previousUserPixel()">Previous</button> <button onclick="previousUserPixel()">
Previous
</button>
</div> </div>
<div class="btn"> <div class="btn">
<button onclick="nextUserPixel()">Next</button> <button onclick="nextUserPixel()">Next</button>
@ -154,16 +190,21 @@
</div> </div>
</div> </div>
<div class="buypixel-container"> <div class="buypixel-container">
<label for="show-buypixel" class="close-btn" title="close">X</label> <label for="show-buypixel" class="close-btn" title="close"
<div class="text"> >X</label
Buy pixel >
</div> <div class="text">Buy pixel</div>
<br /> <br />
<form action="modify" method="post"> <form action="modify" method="post">
<div class="solde"></div> <div class="solde"></div>
<div class="data"> <div class="data">
<label>Index</label> <label>Index</label>
<input type="number" name="index" id="buy-pixel-index" required> <input
type="number"
name="index"
id="buy-pixel-index"
required
/>
</div> </div>
<div class="data"> <div class="data">
<label>Owner</label> <label>Owner</label>
@ -177,13 +218,15 @@
<label>Price</label> <label>Price</label>
<div id="buy-pixel-price"></div> <div id="buy-pixel-price"></div>
</div> </div>
<div class=" btn"> <div class="btn">
<button type="submit">Buy</button> <button type="submit">Buy</button>
</div> </div>
</form> </form>
<div> <div>
<div class="btn"> <div class="btn">
<button onclick="previousBuyPixel()">Previous</button> <button onclick="previousBuyPixel()">
Previous
</button>
</div> </div>
<div class="btn"> <div class="btn">
<button onclick="nextBuyPixel()">Next</button> <button onclick="nextBuyPixel()">Next</button>
@ -192,10 +235,10 @@
</div> </div>
<div class="settings-container"> <div class="settings-container">
<label for="show-settings" class="close-btn" title="close">X</label> <label for="show-settings" class="close-btn" title="close"
<div class="text"> >X</label
Settings >
</div> <div class="text">Settings</div>
</div> </div>
</div> </div>
</div> </div>
@ -213,6 +256,5 @@
<tr></tr> <tr></tr>
</table> </table>
</div> </div>
</body> </body>
</html> </html>

4
src/main/webapp/login-signup.css
View file

@ -15,11 +15,11 @@
box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;
} }
#show-login:checked~.login-container { #show-login:checked ~ .login-container {
display: block; display: block;
} }
#show-signup:checked~.signup-container { #show-signup:checked ~ .signup-container {
display: block; display: block;
} }

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

@ -11,17 +11,17 @@ var userJSON;
const updatePixelsJSON = async () => { const updatePixelsJSON = async () => {
var reponse = await fetch(urlPixel); var reponse = await fetch(urlPixel);
pixelsJSON = await reponse.json(); pixelsJSON = await reponse.json();
} };
const updateUserJSON = async () => { const updateUserJSON = async () => {
var reponse = await fetch(urlUser); var reponse = await fetch(urlUser);
userJSON = await reponse.json(); userJSON = await reponse.json();
} };
function updateSolde() { function updateSolde() {
var elems = document.getElementsByClassName("solde"); var elems = document.getElementsByClassName("solde");
elems.forEach(el => { elems.forEach((el) => {
el.innerHTML = userJSON.solde + '₿'; el.innerHTML = userJSON.solde + "₿";
}); });
} }
@ -32,9 +32,6 @@ setInterval(updateSolde, 10000);
setInterval(updateUserJSON, 10000); setInterval(updateUserJSON, 10000);
setInterval(updatePixelsJSON, 10000); setInterval(updatePixelsJSON, 10000);
//////////////// ////////////////
// Pixel grid // // Pixel grid //
//////////////// ////////////////
@ -53,19 +50,22 @@ function setPixels() {
var row = table.rows[row_id]; var row = table.rows[row_id];
row.innerHTML += row.innerHTML +=
'<td class="pixel" style="background:#' + pixel.color + '">' + '<td class="pixel" style="background:#' +
pixel.color +
'">' +
'<div class="info-pixel">' + '<div class="info-pixel">' +
'<div class="username">' + pixel.owner_username + '</div>' + '<div class="username">' +
'<div class="description">' + pixel.description + '</div>' + pixel.owner_username +
'</div>' + "</div>" +
'<div class="description">' +
pixel.description +
"</div>" +
"</div>" +
'<div class="patch-shadow"></div>' + '<div class="patch-shadow"></div>' +
'</td>'; "</td>";
} }
} }
////////////////////// //////////////////////
// Modify my pixels // // Modify my pixels //
////////////////////// //////////////////////
@ -73,11 +73,13 @@ function setPixels() {
function hexToRgb(hex) { function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
console.log(result); console.log(result);
return result ? { return result
? {
r: parseInt(result[1], 16), r: parseInt(result[1], 16),
g: parseInt(result[2], 16), g: parseInt(result[2], 16),
b: parseInt(result[3], 16) b: parseInt(result[3], 16),
} : null; }
: null;
} }
// Initialize pixel index // Initialize pixel index
@ -93,7 +95,9 @@ function initUserPixel() {
// Compute next pixel index // Compute next pixel index
function nextUserPixel() { function nextUserPixel() {
var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML); var user_pixel_index = parseInt(
document.getElementById("user-pixel-index").innerHTML
);
user_pixel_index++; user_pixel_index++;
if (user_pixel_index > userJSON.pixels.length - 1) { if (user_pixel_index > userJSON.pixels.length - 1) {
@ -110,7 +114,9 @@ function nextUserPixel() {
// Compute previous pixel index // Compute previous pixel index
function previousUserPixel() { function previousUserPixel() {
var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML); var user_pixel_index = parseInt(
document.getElementById("user-pixel-index").innerHTML
);
user_pixel_index--; user_pixel_index--;
if (user_pixel_index < 0) { if (user_pixel_index < 0) {
@ -153,9 +159,9 @@ function updatePixelPreview() {
// Update preview's color // Update preview's color
function updateUserColorPreview() { function updateUserColorPreview() {
var red = document.getElementById("red").value * 255 / 100; var red = (document.getElementById("red").value * 255) / 100;
var green = document.getElementById("green").value * 255 / 100; var green = (document.getElementById("green").value * 255) / 100;
var blue = document.getElementById("blue").value * 255 / 100; var blue = (document.getElementById("blue").value * 255) / 100;
var color = document.getElementById("color"); var color = document.getElementById("color");
color.style.background = "rgb(" + red + "," + green + "," + blue + ")"; color.style.background = "rgb(" + red + "," + green + "," + blue + ")";
@ -163,10 +169,6 @@ function updateUserColorPreview() {
initUserPixel(); initUserPixel();
/////////////// ///////////////
// Buy pixel // // Buy pixel //
/////////////// ///////////////
@ -214,7 +216,8 @@ function previousBuyPixel() {
function updatePixelBuyPreview(pixel) { function updatePixelBuyPreview(pixel) {
document.getElementById("buy-pixel-index").value = pixel.id - 1; document.getElementById("buy-pixel-index").value = pixel.id - 1;
document.getElementById("buy-pixel-owner").innerHTML = pixel.owner_username; document.getElementById("buy-pixel-owner").innerHTML = pixel.owner_username;
document.getElementById("buy-pixel-description").innerHTML = pixel.description; document.getElementById("buy-pixel-description").innerHTML =
pixel.description;
document.getElementById("buy-pixel-price").innerHTML = pixel.price; document.getElementById("buy-pixel-price").innerHTML = pixel.price;
} }

17
src/main/webapp/profil.css
View file

@ -12,10 +12,9 @@
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;
} }
#show-menu:checked~.menu-container { #show-menu:checked ~ .menu-container {
display: block; display: block;
} }
@ -50,10 +49,9 @@
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;
} }
#show-wallet:checked~.wallet-container { #show-wallet:checked ~ .wallet-container {
display: block; display: block;
} }
@ -83,10 +81,9 @@
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;
} }
#show-mypixel:checked~.mypixel-container { #show-mypixel:checked ~ .mypixel-container {
display: block; display: block;
} }
@ -116,10 +113,9 @@
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;
} }
#show-buypixel:checked~.buypixel-container { #show-buypixel:checked ~ .buypixel-container {
display: block; display: block;
} }
@ -135,7 +131,6 @@
color: #3498db; color: #3498db;
} }
.settings-container { .settings-container {
--width: 410px; --width: 410px;
display: none; display: none;
@ -150,10 +145,9 @@
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000;
} }
#show-settings:checked~.settings-container { #show-settings:checked ~ .settings-container {
display: block; display: block;
} }
@ -169,7 +163,6 @@
color: #3498db; color: #3498db;
} }
.wallet-btn, .wallet-btn,
.mypixel-btn, .mypixel-btn,
.buypixel-btn, .buypixel-btn,

2
src/main/webapp/utils.css
View file

@ -3,7 +3,7 @@
padding: 0; padding: 0;
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Poppins', sans-serif; font-family: "Poppins", sans-serif;
} }
body { body {