first prototype-like version

app/static/app.css

@@ -0,0 +1,62 @@
+html {
+    font-family: sans-serif;
+}
+
+h1 {
+    text-align: center;
+}
+
+div.container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+div.center {
+    margin: auto;
+    max-width: 500px;
+}
+
+a.color {
+    display: block;
+    width: calc(100vw - 24px);
+    height: 100px;
+    border: 1px solid black;
+    text-align: center;
+    vertical-align: middle;
+    line-height:100px;
+    font-size:18px;
+    font-weight: bold;
+    cursor: pointer;
+    margin-bottom: 16px;
+    border-radius: 12px;
+}
+
+a.red {
+    background-color: #FF0000;
+}
+a.green {
+    background-color: #00FF00;
+}
+a.blue {
+    background-color: #0000FF;
+    color: #FFFFFF;
+}
+a.cyan {
+    background-color: #00FFFF;
+}
+a.yellow {
+    background-color: #FFFF00;
+}
+a.orange {
+    background-color: #FF8000;
+}
+a.purple {
+    background-color: #FF00FF;
+}
+a.white {
+    background-color: #FFFFFF;
+}
+a.black {
+    background-color: #000000;
+    color: #FFFFFF;
+}

app/static/app.js

@@ -0,0 +1,12 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+  document.querySelectorAll("a.color").forEach(button => {
+    button.addEventListener("click", event => {
+      console.log("button");
+      console.log(button.dataset.color);
+      fetch("/color/" + button.dataset.color, {method: "POST"});
+    });
+  });
+
+});
+