commit for publication

static/colour-default.css

@@ -0,0 +1,41 @@
+:root {
+    /* Backgrounds */
+    --bg-app: #121214;
+    --bg-surface: #1a1a1e;
+    --bg-nav-item-hover: #2a2a30;
+    
+    /* Borders */
+    --border-color: #2d2d34;
+    
+    /* Text */
+    --text-primary: #f0f0f5;
+    --text-muted: #a0a0b0;
+    
+    /* Accents & Buttons */
+    --accent: #38bdf8;          /* Vibrant sky blue */
+    --accent-hover: #7dd3fc;
+    --auth-bg: #22c55e;         /* Success green for sign in/out */
+    --auth-text: #ffffff;
+}
+
+/* Core Element Bindings */
+body {
+    background-color: var(--bg-app);
+    color: var(--text-primary);
+    font-family: system-ui, -apple-system, sans-serif;
+    margin: 0;
+}
+
+a {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+a:hover {
+    color: var(--accent-hover);
+}
+
+
+.error-text {
+    color: red;
+}

static/layout.css

@@ -0,0 +1,159 @@
+
+body {
+    margin: 0px;
+}
+
+main {
+    margin: 20px;
+}
+
+header {
+    padding: 20px;
+}
+
+header h1 {
+    margin: 0px;
+}
+
+header nav {
+    text-align: center;
+}
+
+header nav a, .user-account-btn {
+    padding: 5px;
+    margin-left: 5px;
+    margin-right: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 10px;
+    text-decoration: none;
+}
+
+button {
+    margin-left: 15px;
+    padding: 5px 10px;
+}
+
+textarea {
+    box-sizing: border-box;
+    width: calc(100% - 10px);
+    margin-top: 25px;
+    margin-left: 5px;
+    margin-right: 5px;
+    padding: 5px;
+}
+
+.user-account-btn {
+    position: absolute;
+    right: 0px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+form.account-input {
+    margin-bottom: 50px;
+}
+
+form.account-input input {
+    display: block;
+    margin-bottom: 10px;
+    min-width: 250px;
+}
+
+form.account-input button {
+    margin-top: 15px;
+}
+
+
+#review-table th {
+    text-align: right;
+}
+
+#review-table td {
+    padding-left: 10px;
+}
+
+#review-table * {
+    padding: 2px;
+}
+
+
+
+
+
+
+.segmented-control {
+	display: inline-flex;
+	border-radius: 6px;
+	overflow: hidden;
+}
+
+
+.segmented-control input[type="checkbox"] {
+	display: none;
+}
+
+.segmented-control label {
+	padding: 8px 16px;
+	cursor: pointer;
+	user-select: none;
+	transition: background-color 0.2s, color 0.2s;
+}
+
+.segmented-control label:last-child {
+	border-right: none;
+}
+
+.segmented-control input[type="checkbox"]:checked + label {
+	font-weight: bold;
+}
+
+
+.segmented-control input[type="checkbox"]:disabled + label {
+  cursor: not-allowed;
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+
+label {
+    display:block;
+    margin-bottom:5px;
+    font-weight:600;
+}
+
+form div {
+    margin-bottom: 10px;
+
+}
+
+form * button {
+    margin-top: 30px;
+}
+
+table {
+    border-spacing: 0px;
+}
+table td {
+    padding: 2px 20px;
+    text-align: center;
+    outline: none;
+}
+
+
+table.vertical-table th {
+    text-align: right;
+}
+
+table.vertical-table td {
+    text-align: left;
+}
+
+
+
+.clickable {
+    cursor: pointer;
+}
+
+
+

static/utils/clickable.js

@@ -0,0 +1,13 @@
+
+
+
+document.addEventListener("DOMContentLoaded", () => {
+
+    const rows = document.querySelectorAll(".clickable");
+
+    rows.forEach(row => {
+        row.addEventListener("click", () => {
+            window.location.href = row.dataset.href;
+        })
+    })
+})

static/utils/validation.js

@@ -0,0 +1,48 @@
+
+const VALID = true;
+const INVALID = false;
+
+
+class validation {
+
+    static mac_addr(addr) {
+
+        const VALID_MAC_CHARS = "0123456789abcdefABCDEF";
+
+        if (addr.length !== 17) {
+            return INVALID;
+        }
+
+        const COLON_START_IDX = 2;
+        const COLON_STEP = 3;
+        for (let idx = COLON_START_IDX; idx < addr.length; idx += COLON_STEP) {
+            if (addr[idx] != ":") {
+                return INVALID;
+            }
+        }
+
+        const mac_sections = addr.split(":");
+        if (mac_sections.length !== 6) {
+            return INVALID;
+        }
+
+        for (const mac_byte of mac_sections) {
+
+            if (mac_byte.length !== 2) {
+                return INVALID;
+            }
+
+            for (const char of mac_byte) {
+                if (!VALID_MAC_CHARS.includes(char)) {
+                    return INVALID;
+                }
+            }
+        }
+
+        return VALID;
+
+    }
+
+}
+
+