settings: Add blur switch

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": [

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;
 }
 

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>

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) {

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);