Implemented User Management

static/register.css

@@ -0,0 +1,65 @@
+th {
+    writing-mode: sideways-lr;
+}
+
+th#save-box {
+    writing-mode: inherit;
+
+    >button {
+        display: none;
+    }
+}
+
+.pgrid[data-mark=True] {
+    background-color: black;
+}
+
+.pgrid[data-changed] {
+    border: 3px solid red;
+}
+
+tr {
+    background-color: var(--color-bg2);
+}
+
+.qheader {
+    background-color: var(--color-bg1);
+    vertical-align: top;
+}
+
+#users {
+    background-color: inherit;
+}
+
+#qh-ade,
+.quad-ade {
+    --hue: var(--ade);
+}
+
+#qh-bea,
+.quad-bea {
+    --hue: var(--bea);
+}
+
+#qh-cam,
+.quad-cam {
+    --hue: var(--cam);
+}
+
+#qh-des,
+.quad-des {
+    --hue: var(--des);
+}
+
+#useradd {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1em;
+    align-items: end;
+    justify-content: center;
+
+    >div>label {
+        display: block;
+    }
+}

static/register.js

@@ -0,0 +1,16 @@
+function getFirst(item, className) {
+    return item.getElementsByClassName(className)[0]
+}
+
+var saveBtn = document.getElementById("save-btn");
+
+for (chk of document.getElementsByClassName("pgrid")) {
+    chk.onclick = (event) => {
+        console.log(event.target)
+        event.target.dataset.mark = event.target.dataset.mark == "True" ? "False" : "True"
+        event.target.children[0].name = event.target.dataset.targ;
+        event.target.children[0].value = event.target.dataset.mark;
+        event.target.dataset.changed = true;
+        saveBtn.style.display = "block";
+    }
+}