diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html index 0490cae..d5a4f12 100644 --- a/src/main/webapp/index.html +++ b/src/main/webapp/index.html @@ -35,14 +35,14 @@
Login
-
+
- +
- +
Forgot Password? @@ -62,14 +62,14 @@
Signup
- +
- +
- +
diff --git a/src/main/webapp/index2.html b/src/main/webapp/index2.html index 0e7325f..ef79773 100644 --- a/src/main/webapp/index2.html +++ b/src/main/webapp/index2.html @@ -9,6 +9,7 @@ + + + @@ -74,21 +77,19 @@ Wallet

-
- 9999$ -
- +
+
- +
- +
- +
@@ -101,6 +102,44 @@
My pixels
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+
+ +
+
+ +
+
@@ -125,6 +164,7 @@
+ diff --git a/src/main/webapp/modify_pixel.js b/src/main/webapp/modify_pixel.js new file mode 100644 index 0000000..910553b --- /dev/null +++ b/src/main/webapp/modify_pixel.js @@ -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(); diff --git a/src/main/webapp/mypixel.css b/src/main/webapp/mypixel.css new file mode 100644 index 0000000..3c9842c --- /dev/null +++ b/src/main/webapp/mypixel.css @@ -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; +} diff --git a/src/main/webapp/pixels.js b/src/main/webapp/pixels.js index ac60309..fc2ab73 100644 --- a/src/main/webapp/pixels.js +++ b/src/main/webapp/pixels.js @@ -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; diff --git a/src/main/webapp/userinfo.js b/src/main/webapp/userinfo.js new file mode 100644 index 0000000..a69baa8 --- /dev/null +++ b/src/main/webapp/userinfo.js @@ -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);