From cec930beaf3df606d7336988a6629edb13c8221e Mon Sep 17 00:00:00 2001
From: Daniel <daniel.jank@protonmail.com>
Date: Tue, 9 May 2023 22:02:54 +0200
Subject: [PATCH] settings: Add blur switch

---
 config/config.json |  1 +
 css/main.css       | 11 ++++++++---
 index.html         |  8 ++++++++
 js/dom.js          |  1 +
 js/main.js         | 16 ++++++++++++++++
 5 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/config/config.json b/config/config.json
index f01c184..af5da46 100644
--- a/config/config.json
+++ b/config/config.json
@@ -7,6 +7,7 @@
 		"wallpaper_dark": "img/background-dark.jpg",
 		"dark_mode": false,
 		"open_new_tab": false,
+		"blur": true,
 		"hosted_by": "somebody"
 	},
 	"services": [
diff --git a/css/main.css b/css/main.css
index 8c28fd4..4bd2dc4 100644
--- a/css/main.css
+++ b/css/main.css
@@ -14,6 +14,7 @@ html {
 	--bg2: #FFF8;
 	--hover: #0001;
 	--scale-factor: 1.15;
+	--blur: blur(16px);
 }
 
 body {
@@ -26,6 +27,10 @@ body {
 	font-size: 14px;
 	-webkit-tap-highlight-color: transparent;
 }
+.noblur {
+	--blur: blur(0);
+}
+
 ::-webkit-scrollbar {
 	display: none;
 }
@@ -128,7 +133,7 @@ a {
 	box-shadow: 2px 2px 8px #0003;
 	background: var(--background);
 	padding: 3px;
-	backdrop-filter: blur(16px);
+	backdrop-filter: var(--blur);
 	border-radius: 24px;
 	margin: -4px 12px 16px;
 	text-align: center;
@@ -153,7 +158,7 @@ a {
 	box-shadow: 2px 2px 8px #0002;
 	display: flex;
 	margin: 16px auto 0;
-	backdrop-filter: blur(16px);
+	backdrop-filter: var(--blur);
 	border-radius: 24px;
 	max-width: 480px;
 	background: var(--background);
@@ -184,7 +189,7 @@ a {
 	border-radius: 24px;
 	background: var(--background);
 	margin: 20px;
-	backdrop-filter: blur(16px);
+	backdrop-filter: var(--blur);
 	transition: background .2s;
 }
 
diff --git a/index.html b/index.html
index b47513d..58bbe8e 100644
--- a/index.html
+++ b/index.html
@@ -106,6 +106,14 @@
 								</div>
 								<div class="switch"></div>
 							</div>
+							<div class="setting" onclick="blur_toggle()" id="setting-blur">
+								<div class="icon">blur_on</div>
+								<div class="text">
+									<div class="name">Enable blur</div>
+									<div class="desc">Improves UI sweetness but has a huge impact on performance</div>
+								</div>
+								<div class="switch"></div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/js/dom.js b/js/dom.js
index 60a8468..fa6c772 100644
--- a/js/dom.js
+++ b/js/dom.js
@@ -88,6 +88,7 @@ function load_config(conf) {
 	load_apps();
 	switch_theme(get_bool("dark_mode"));
 	new_tab_toggle(get_bool("open_new_tab"));
+	blur_toggle(get_bool("blur"));
 }
 
 function is_secure(uri) {
diff --git a/js/main.js b/js/main.js
index bada089..fe8029c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -76,6 +76,22 @@ function new_tab_toggle(value) {
 	load_apps();
 }
 
+function blur_toggle(value) {
+	let v = get_bool("blur");
+	if (value === undefined) v = !v; 
+	config("blur", v);
+	setting = get("setting-blur").classList;
+	let body = document.body.classList;
+	if (v) {
+		setting.add("checked");
+		body.remove("noblur");
+	}
+	else {
+		setting.remove("checked");
+		body.add("noblur");
+	}
+}
+
 function reset_all_settings() {
 	if (check_cookies()) localStorage.clear();
 	load_config(CONFIG_DEFAULT);