From 7cdcdf5528695ac45bb7a23cbdcb824e4506e4dd Mon Sep 17 00:00:00 2001 From: Derek Stevens Date: Tue, 11 Jul 2023 00:34:13 -0600 Subject: [PATCH] implement themes --- register/register.go | 1 - static/index.html | 13 ++++++ static/style.css | 77 ++++++++++++++++++++++++++++++ static/util.js | 98 +++++++++++++++++++++++++++++++++++---- templates/register.html | 7 +-- templates/registered.html | 3 +- 6 files changed, 184 insertions(+), 15 deletions(-) diff --git a/register/register.go b/register/register.go index 70f4e2e..7cf15ab 100644 --- a/register/register.go +++ b/register/register.go @@ -57,7 +57,6 @@ func (self *SymmetricCrypt) Decode(s string) []byte { } func (self *SymmetricCrypt) Encrypt(text string) (string, error) { - fmt.Println(text) block, err := aes.NewCipher([]byte(self.Secret)) if err != nil { return "", err diff --git a/static/index.html b/static/index.html index 52dcf3b..acc7486 100644 --- a/static/index.html +++ b/static/index.html @@ -17,6 +17,19 @@
identity +
theme +
+
+
+
+
+
+
+
+
+ +
+

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}} + \ No newline at end of file diff --git a/templates/registered.html b/templates/registered.html index 37ba3c3..6d0f983 100644 --- a/templates/registered.html +++ b/templates/registered.html @@ -14,8 +14,9 @@

Success! Let's game!

{{ else }}

Error

-

Something went wrong; please try a different username or obtain a new registration code.

+ Something went wrong; please try a different username or obtain a new registration code. {{end}} + \ No newline at end of file