diff --git a/static/style.css b/static/style.css
index ecce73c..03ffbaf 100644
--- a/static/style.css
+++ b/static/style.css
@@ -4,6 +4,9 @@
--main_color: #1f9b92;
--sub_color: #00000000;
--err_color: #DC143C;
+
+ --main_bg: '/static/bg2.png';
+ --login_bg: '/static/bg.png';
}
* { scrollbar-color:var(--main_color) var(--sub_color); }
@@ -21,6 +24,7 @@ body {
background: var(--bg_color);
color: var(--fg_color);
background: url('/static/bg2.png');
+ background: url(var(--main_bg));
background-size: cover;
background-position: top left;
background-attachment: fixed;
@@ -28,6 +32,7 @@ body {
.login-body {
background: url('/static/bg.png');
+ background: url(var(--login_bg));
background-size: cover;
background-position: center center;
height: 100vh;
diff --git a/static/theme.js b/static/theme.js
index 554204a..abfe56f 100644
--- a/static/theme.js
+++ b/static/theme.js
@@ -1,4 +1,6 @@
const defaultTheme = [ "#000000cc", "#ffffffff", "#1f9b92ff", "#00000000", "#DC143Cff" ];
+const loginBgReader = new FileReader();
+const mainBgReader = new FileReader();
const saveData = {
theme: defaultTheme,
@@ -28,7 +30,7 @@ function toByte(v) {
).slice(-2);
}
-function resetTheme(theme) {
+function resetTheme(theme, bg = false) {
try{
let bg_col = theme[0];
let fg_col = theme[1];
@@ -58,6 +60,13 @@ function resetTheme(theme) {
$("err_col_input").value = err_col;
$("err_col_opacity").value = err_opacity;
} catch {}
+
+ if (bg) {
+ localStorage.setItem("loginScreen", '/static/bg.png');
+ localStorage.setItem("mainScreen", '/static/bg2.png');
+ resetBG("login");
+ resetBG("main");
+ }
}
function setTheme() {
@@ -87,23 +96,65 @@ function setTheme() {
document.body.style.setProperty("--sub_color", saveData.theme[3]);
document.body.style.setProperty("--err_color", saveData.theme[4]);
}
+
+ setBG("login");
+ setBG("main");
}
function setBG(screen) {
- // get the input element based on screen
- // create the reader
- // save dataURL into localstorage
-
- // resetBG(screen)
+ let reader = null;
+ switch(screen) {
+ case "login":
+ reader = loginBgReader;
+ break;
+ case "main":
+ reader = mainBgReader;
+ break;
+ }
+ const imgPath = $(`${screen}_bg_upload`)?.files[0];
+ if (imgPath) {
+ reader.readAsDataURL(imgPath);
+ }
}
function resetBG(screen) {
// set dataURL from localstorage to theme state
+ saveData[screen + "Screen"] = localStorage.getItem(screen + "Screen");
// bind reader load -> body background set dataURL
+ let selector = null;
+ switch (screen) {
+ case "login":
+ selector = ".login-body";
+ break;
+ case "main":
+ selector = "body";
+ break;
+ }
+ const rules = document.styleSheets[0].cssRules;
+ let rule = null;
+ for (var i = 0; i < rules.length; i++) {
+ if (rules[i].selectorText == selector) {
+ rule = rules[i];
+ break;
+ }
+ }
+
+ rule.style.setProperty("background", `url('${saveData[screen + "Screen"]}`);
+ rule.style.setProperty("background-size", "cover");
+ rule.style.setProperty("background-attachment", "fixed");
}
-loadStorage();
-resetTheme(saveData.theme);
-setTheme();
+function initializeReaders() {
+ loginBgReader.addEventListener("load", () => {
+ localStorage.setItem("loginScreen", loginBgReader.result);
+ resetBG("login");
+ }, false);
+ mainBgReader.addEventListener("load", () => {
+ localStorage.setItem("mainScreen", mainBgReader.result);
+ resetBG("main");
+ }, false);
+}
+
+initializeReaders();
resetBG("login");
-resetBG("main");
\ No newline at end of file
+resetBG("main");
diff --git a/static/theme2.js b/static/theme2.js
new file mode 100644
index 0000000..f908d91
--- /dev/null
+++ b/static/theme2.js
@@ -0,0 +1,4 @@
+
+loadStorage();
+resetTheme(saveData.theme);
+setTheme();
\ No newline at end of file
diff --git a/templates/config.html b/templates/config.html
index 63f1256..7bdb6fa 100644
--- a/templates/config.html
+++ b/templates/config.html
@@ -28,7 +28,7 @@
-
+
diff --git a/templates/footer.html b/templates/footer.html
index ee324c8..1354ab6 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,6 +1,6 @@
{{define "footer"}}