2 files changed, 86 insertions, 0 deletions
diff --git a/main/assets/css/main.css b/main/assets/css/main.css
new file mode 100644
index 0000000..856b5ab
--- /dev/null
+++ b/main/assets/css/main.css
@@ -0,0 +1,6 @@
+canvas.canvas_bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+\ No newline at end of file
diff --git a/main/assets/js/main.js b/main/assets/js/main.js
new file mode 100644
index 0000000..de090d1
--- /dev/null
+++ b/main/assets/js/main.js
@@ -0,0 +1,80 @@
+"use strict"
+const canvas_bg = document.getElementById("canvas_bg");
+const ctx = canvas_bg.getContext("2d");
+const ORANGE_COLOR = "#fe8b00ff";
+const WHITE_COLOR = "#ffffffff";
+const CELL_WIDTH = 256;
+
+const WALLPAPER_FONT = "30px Arial";
+const WALLPAPER_COL = 30;
+const WALLPAPER_ROW = 50;
+
+const UNDERLINE_COL_START = 25;
+const UNDERLINE_COL_END = CELL_WIDTH - UNDERLINE_COL_START;
+const UNDERLINE_ROW = 60;
+
+const SIZE_TEXT_FONT = "36px Arial";
+const SIZE_TEXT_COL = 25;
+const SIZE_TEXT_ROW = 96;
+
+function drawCanvasBg() {
+    ctx.clearRect(0, 0, canvas_bg.width, canvas_bg.height);
+    ctx.fillStyle = ORANGE_COLOR;
+    ctx.fillRect(0, 0, canvas_bg.width, canvas_bg.height);
+
+    var largerSize = Math.max(canvas_bg.width, canvas_bg.height);
+    var width = Math.max(3, Math.ceil(largerSize / 1000) + 1);
+
+    ctx.fillStyle = WHITE_COLOR;
+    ctx.fillRect(0, 0, width, canvas_bg.height);
+    ctx.fillRect(0, 0, canvas_bg.width, width);
+    ctx.fillRect(canvas_bg.width - width, 0, canvas_bg.width, canvas_bg.height);
+    ctx.fillRect(0, canvas_bg.height - width, canvas_bg.width, canvas_bg.height);
+
+    var lineWidth = 1;
+    var lineOffset = 0.5;
+    if (largerSize > 5000) {
+        lineWidth = 2;
+        lineOffset = 0;
+    }
+
+    ctx.strokeStyle = WHITE_COLOR;
+    ctx.lineWidth = lineWidth;
+
+    var currentColPos = CELL_WIDTH + lineOffset;
+
+    while (currentColPos < canvas_bg.width) {
+        ctx.moveTo(currentColPos, 0);
+        ctx.lineTo(currentColPos, canvas_bg.height);
+        ctx.stroke();
+        currentColPos += CELL_WIDTH;
+    }
+
+    var currentRowPos = CELL_WIDTH + lineOffset;
+
+    while (currentRowPos < canvas_bg.height) {
+        ctx.moveTo(0, currentRowPos);
+        ctx.lineTo(canvas_bg.width, currentRowPos);
+        ctx.stroke();
+        currentRowPos += CELL_WIDTH;
+    }
+
+    ctx.font = WALLPAPER_FONT;
+    ctx.fillText("WALLPAPER", WALLPAPER_COL, WALLPAPER_ROW);
+
+    ctx.moveTo(UNDERLINE_COL_START + lineOffset, UNDERLINE_ROW);
+    ctx.lineTo(UNDERLINE_COL_END + lineOffset, UNDERLINE_ROW);
+    ctx.stroke();
+
+    ctx.font = SIZE_TEXT_FONT;
+    ctx.fillText(canvas_bg.width + "x" + canvas_bg.height, SIZE_TEXT_COL, SIZE_TEXT_ROW);
+}
+
+function onResize() {
+    canvas_bg.width = window.innerWidth;
+    canvas_bg.height = window.innerHeight;
+    drawCanvasBg();
+}
+
+onResize();
+window.addEventListener("resize", onResize);
+\ No newline at end of file