diff --git a/static/canvas.js b/static/canvas.js index 236e9cb..ab521a2 100644 --- a/static/canvas.js +++ b/static/canvas.js @@ -17,6 +17,9 @@ let image = new ImageData(DATA_SIZE, DATA_SIZE); let bitmap = null; window.addEventListener("load", async (e) => { + for (let x = 0; x < DATA_SIZE * DATA_SIZE * 4; x++) { + image.data[x] = 255; + } // Create drawable image, update it every half second await redraw(); setInterval(redraw, 500); @@ -46,17 +49,28 @@ function draw() { ctx.setTransform(1, 0, 0, 1, 0, 0); } +function mousePosition(e) { + let x = e.clientX - canvas.getBoundingClientRect().left; + let y = e.clientY - canvas.getBoundingClientRect().top; + let cx = Math.round(x / (CANVAS_SIZE * scale) * DATA_SIZE - offx - 0.5); + let cy = Math.round(y / (CANVAS_SIZE * scale) * DATA_SIZE - offy - 0.5); + return {x: cx, y: cy}; +} + canvas.addEventListener("wheel", async (e) => { + let mouse = mousePosition(e); + console.log(mouse); let oldScale = scale; if (e.deltaY < 0) { scale += 0.1; } else if (e.deltaY > 0) { scale -= 0.1; } - /* - offX += (DATA_SIZE * scale - DATA_SIZE * oldScale) / 2; - offY += (DATA_SIZE * scale - DATA_SIZE * oldScale) / 2; - */ + let diff = (CANVAS_SIZE / oldScale) - (CANVAS_SIZE / scale); + let ratiox = (mouse.x - (CANVAS_SIZE / 2)) / CANVAS_SIZE; + let ratioy = (mouse.y - (CANVAS_SIZE / 2)) / CANVAS_SIZE; + offx += diff * ratiox; + offy += diff * ratioy; draw(image); }); @@ -77,17 +91,12 @@ canvas.addEventListener("mousedown", async (e) => { canvas.addEventListener("mouseup", async (e) => { if (e.button == 0 && mouseClicked) { mouseClicked = false; - clickx = e.clientX; clicky = e.clientY; - - let x = e.clientX - canvas.getBoundingClientRect().left; - let y = e.clientY - canvas.getBoundingClientRect().top; - - let cx = Math.round(x / (CANVAS_SIZE * scale) * DATA_SIZE - offx); - let cy = Math.round(y / (CANVAS_SIZE * scale) * DATA_SIZE - offy); + let mouse = mousePosition(e); + let cx = mouse.x; + let cy = mouse.y; - console.log(cx, cy); if (cx < 0 || cx > CANVAS_SIZE || cy < 0 || cy > CANVAS_SIZE) { return; } diff --git a/static/contact.css b/static/contact.css new file mode 100644 index 0000000..4106807 --- /dev/null +++ b/static/contact.css @@ -0,0 +1,55 @@ +body { + margin: 0; + } + + html { + box-sizing: border-box; + } + + *, *:before, *:after { + box-sizing: inherit; + } + + .column { + float: left; + width: 33.3%; + margin-bottom: 16px; + padding: 0 8px; + } + + .card { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + margin: 8px; + } + + .about-section { + padding: 30px; + text-align: center; + background-color: #bf7016; + color: white; + } + + .container { + padding: 0 16px; + } + + .container::after, .row::after { + content: ""; + clear: both; + display: table; + } + + .title { + color: grey; + } + + .button:hover { + background-color: #555; + } + + @media screen and (max-width: 650px) { + .column { + width: 100%; + display: block; + } + } \ No newline at end of file diff --git a/static/contact.html b/static/contact.html new file mode 100644 index 0000000..1ba69a1 --- /dev/null +++ b/static/contact.html @@ -0,0 +1,95 @@ + + +
+ + +Who are we??
+back-end
+Lorem ipsum dolor sit amet.
+joe@Placeholders.com
+front-end
+Lorem ipsum dolor sit amet.
+joe2@Placeholders.com
+stinky
+Lorem ipsum dolor sit amet.
+joe3@Placeholders.com
+back-end
+Lorem ipsum dolor sit amet.
+joe@Placeholders.com
+front-end
+Lorem ipsum dolor sit amet.
+joe2@Placeholders.com
+stinky
+Lorem ipsum dolor sit amet.
+joe3@Placeholders.com
+