diff --git a/static/80x80.svg b/static/80x80.svg
index 831049d..cdaaaf1 100644
--- a/static/80x80.svg
+++ b/static/80x80.svg
@@ -2,9 +2,9 @@
diff --git a/static/c4.css b/static/c4.css
new file mode 100644
index 0000000..a74dc49
--- /dev/null
+++ b/static/c4.css
@@ -0,0 +1,60 @@
+body {
+ color: #f0f0f0;
+ background-color: #333;
+}
+
+h1, h1 a {
+ color: #fcbb06; /* C4 Yellow */
+}
+
+.result {
+ background-color: #202020;
+ border-color: #4d4d4d;
+}
+
+.result:focus {
+ background-color: #202020;
+ border-color: #fcbb06;
+ outline-color: #fcbb06;
+}
+
+.result a {
+ color: #fcbb06;
+}
+
+.note {
+ background-color: #333;
+ font-size: smaller;
+}
+
+.btn.green {
+ color: #020;
+ background-color: #6f3;
+}
+
+.btn.green:hover ,.btn.green:focus {
+ background-color: #3f0;
+}
+
+.btn.red {
+ color: #200;
+ background-color: #f36;
+}
+
+.btn.red:hover, .btn.red:focus {
+ background-color: #f03;
+}
+
+@keyframes blinker {
+ 0% { opacity: 1; }
+ 40% { opacity: 1; }
+ 90% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+
+#mapgrid {
+ outline: 2px solid #fcbb06;
+ background: #fcbb0680;
+ animation: blinker 1s infinite;
+}
+
diff --git a/static/form.html b/static/form.html
index d894279..8447427 100644
--- a/static/form.html
+++ b/static/form.html
@@ -3,6 +3,7 @@
in?
+
diff --git a/static/form.js b/static/form.js
index 16ebf7e..a82d2a5 100644
--- a/static/form.js
+++ b/static/form.js
@@ -136,14 +136,14 @@ function del() {
let clicks = {x: [], y: []};
function mapClick(e) {
- let x = Math.floor(37 / e.target.width * e.layerX);
+ let x = Math.floor(36 / e.target.width * e.layerX);
let y = Math.floor(18 / e.target.height * e.layerY);
let humanPos = (x, y) => {
return `${String.fromCharCode(65 + 16 - y)}${x}`;
};
- if (x > 0 && x < 37 && y > 0 && y < 18) {
+ if (x > 0 && x < 36 && y > 0 && y < 18) {
if (clicks.x.length > 1) {
clicks.x = [x];
clicks.y = [y];
diff --git a/static/index.html b/static/index.html
index 585514b..472846b 100644
--- a/static/index.html
+++ b/static/index.html
@@ -3,6 +3,7 @@
in?
+
diff --git a/static/shared.js b/static/shared.js
index 6d01e23..c2b9c35 100644
--- a/static/shared.js
+++ b/static/shared.js
@@ -1,12 +1,12 @@
function renderMap(xx, yy) {
- if (xx[0] > 0 && xx[0] < 37 && yy[0] > 0 && yy[0] < 18 &&
- xx[1] > 0 && xx[1] < 37 && yy[1] > 0 && yy[1] < 18 &&
+ if (xx[0] > 0 && xx[0] < 36 && yy[0] > 0 && yy[0] < 18 &&
+ xx[1] > 0 && xx[1] < 36 && yy[1] > 0 && yy[1] < 18 &&
xx[1] >= xx[0] && yy[1] >= yy[0]) {
let grid = document.getElementById('mapgrid');
grid.style.top = `${yy[0]*100/18}%`;
- grid.style.left = `${100/37*xx[0]}%`;
+ grid.style.left = `${100/36*xx[0]}%`;
grid.style.height = `${(yy[1] - yy[0] + 1) * 100/18}%`;
- grid.style.width = `${100/37*(xx[1] - xx[0] + 1)}%`;
+ grid.style.width = `${100/36*(xx[1] - xx[0] + 1)}%`;
} else {
alert(`invalid coordinates x=${xx} y=${yy}`);
}
diff --git a/static/style.css b/static/style.css
index 3b538ec..d055b22 100644
--- a/static/style.css
+++ b/static/style.css
@@ -171,10 +171,10 @@ textarea {
#map {
position: relative;
border: 1px solid black;
- background: #fff;
- max-width: 1480px;
+ background: #4d4d4d;
+ max-width: 1440px;
max-height: 50vh;
- aspect-ratio: 37 / 18;
+ aspect-ratio: 2 / 1;
margin: 0 auto;
}