goto
diff --git a/static/style.css b/static/style.css
index 5cda833..701f071 100644
--- a/static/style.css
+++ b/static/style.css
@@ -10,6 +10,7 @@
padding: 0;
margin: 0;
appearance: none;
+ -webkit-appearance: none;
outline: none;
}
@@ -228,4 +229,80 @@ nav {
#registration a:hover {
color: var(--fg_color);
+}
+
+#theme_accordion summary {
+ text-align: right;
+}
+
+input[type=range] {
+ -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+ width: 100%; /* Specific width is required for Firefox. */
+ background: transparent; /* Otherwise white in Chrome */
+}
+
+input[type=range]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+}
+
+input[type=range]:focus {
+ outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
+}
+
+input[type=range]::-ms-track {
+ width: 100%;
+ cursor: pointer;
+
+ /* Hides the slider so custom styles can be added */
+ background: transparent;
+ border-color: transparent;
+ color: transparent;
+}
+
+input[type=range]::-webkit-slider-thumb {
+ height: 16px;
+ width: 16px;
+ border: none;
+ border-radius: 0px;
+ background: var(--main_color);
+ cursor: pointer;
+}
+
+/* All the same stuff for Firefox */
+input[type=range]::-moz-range-thumb {
+ height: 16px;
+ width: 16px;
+ border-radius: 0px;
+ border: none;
+ background: var(--main_color);
+ cursor: pointer;
+}
+
+/* All the same stuff for IE */
+input[type=range]::-ms-thumb {
+ height: 16px;
+ width: 16px;
+ border-radius: 0px;
+ border: none;
+ background: var(--main_color);
+ cursor: pointer;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+ width: 100%;
+ height: 16px;
+ cursor: pointer;
+ background: var(--sub_color);
+ border-radius: 0;
+ border: solid 1px var(--sub_color);
+}
+
+
+input[type=range]::-moz-range-track {
+ background: var(--sub_color);
+ height: 16px;
+}
+
+.error {
+ border-bottom: solid 2px crimson;
}
\ No newline at end of file
diff --git a/static/util.js b/static/util.js
index f4ea810..29e2b01 100644
--- a/static/util.js
+++ b/static/util.js
@@ -3,6 +3,16 @@ const errWrapper = document.getElementById("errWrapper");
const defaultTheme = [ "#000000cc", "#ccccccff", "#1f9b92ff", "#002b36ff" ];
+const bgCol_input = document.getElementById("bg_col_input");
+const fgCol_input = document.getElementById("fg_col_input");
+const mainCol_input = document.getElementById("main_col_input");
+const subCol_input = document.getElementById("sub_col_input");
+
+const bgOp_input = document.getElementById("bg_col_opacity");
+const fgOp_input = document.getElementById("fg_col_opacity");
+const mainOp_input = document.getElementById("main_col_opacity");
+const subOp_input = document.getElementById("sub_col_opacity");
+
const saveData = {
username: "",
theme: defaultTheme,
@@ -25,8 +35,8 @@ function closeErr() {
function loadStorage() {
saveData.username = localStorage.getItem("username");
- saveData.theme = JSON.parse(localStorage.getItem("theme"));
-
+ savedTheme = JSON.parse(localStorage.getItem("theme"));
+ saveData.theme = savedTheme || defaultTheme;
const username = document.getElementById("name_entry");
if (username) {
username.value = saveData.username;
@@ -34,7 +44,6 @@ function loadStorage() {
}
function saveName() {
- console.log("saving username");
const username = document.getElementById("name_entry");
if (username) {
saveData.username = username.value;
@@ -44,13 +53,82 @@ function saveName() {
function setupDiceAutoScroll() {
const diceWin = document.getElementById("dice_win");
- diceWin.addEventListener("toggle", e => {
- if (diceWin.open) {
- const diceLog = document.getElementById("dice_log");
- diceLog.children[diceLog.children.length - 1].scrollIntoView();
- }
- });
+ if (diceWin) {
+ diceWin.addEventListener("toggle", e => {
+ if (diceWin.open) {
+ const diceLog = document.getElementById("dice_log");
+ diceLog.children[diceLog.children.length - 1].scrollIntoView();
+ }
+ });
+ }
+}
+
+function hexToBytes(hex) {
+ let bytes = [];
+ for (let c = 0; c < hex.length; c += 2)
+ bytes.push(parseInt(hex.substr(c, 2), 16));
+ return bytes;
+}
+
+function toByte(v) {
+ return ('0' +
+ Math.min(Math.max(parseInt(v), 0), 255).toString(16)
+ ).slice(-2);
+}
+
+function resetTheme(theme) {
+ try{
+ let bg_col = theme[0];
+ let fg_col = theme[1];
+ let main_col = theme[2];
+ let sub_col = theme[3];
+
+ let fg_opacity = hexToBytes(fg_col.substr(7));
+ fg_col = fg_col.substr(0,7);
+ let bg_opacity = hexToBytes(bg_col.substr(7));
+ bg_col = bg_col.substr(0,7);
+ let main_opacity = hexToBytes(main_col.substr(7));
+ main_col = main_col.substr(0,7);
+ let sub_opacity = hexToBytes(sub_col.substr(7));
+ sub_col = sub_col.substr(0,7);
+
+ bgCol_input.value = bg_col;
+ bgOp_input.value = bg_opacity;
+ fgCol_input.value = fg_col;
+ fgOp_input.value = fg_opacity;
+ mainCol_input.value = main_col;
+ mainOp_input.value = main_opacity;
+ subCol_input.value = sub_col;
+ subOp_input.value = sub_opacity;
+ } catch {}
+}
+
+function setTheme() {
+ try{
+ let bg_col = bgCol_input.value;
+ let bg_opacity = toByte(bgOp_input.value);
+ let fg_col = fgCol_input.value;
+ let fg_opacity =(toByte(fgOp_input.value));
+ let main_col = mainCol_input.value;
+ let main_opacity = (toByte(mainOp_input.value));
+ let sub_col = subCol_input.value;
+ let sub_opacity = (toByte(subOp_input.value));
+
+ saveData.theme[0] = bg_col + bg_opacity;
+ saveData.theme[1] = fg_col + fg_opacity;
+ saveData.theme[2] = main_col + main_opacity;
+ saveData.theme[3] = sub_col + sub_opacity;
+
+ localStorage.setItem("theme", JSON.stringify(saveData.theme));
+ } catch {} finally {
+ document.body.style.setProperty("--bg_color", saveData.theme[0]);
+ document.body.style.setProperty("--fg_color", saveData.theme[1]);
+ document.body.style.setProperty("--main_color", saveData.theme[2]);
+ document.body.style.setProperty("--sub_color", saveData.theme[3]);
+ }
}
setupDiceAutoScroll();
-loadStorage();
\ No newline at end of file
+loadStorage();
+resetTheme(saveData.theme);
+setTheme();
\ No newline at end of file
diff --git a/templates/register.html b/templates/register.html
index b1e3960..cbbd229 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -13,13 +13,14 @@
Felt Admin Registration
{{ if $valid }}
{{ else }}
- The registration token you provided is invalid
+ The registration token you provided is invalid;
obtain a new one.
{{end}}