More overall improvements

README.md

@@ -9,11 +9,11 @@ This will be a dashboard hosted on my homeserver with self-hosted stuff. But, fo
 - [x] External config loaded with XHR (app list)
 - [x] Apply config for the rest stuff (data shown in More page, default user settings)
 - [ ] Make 'Security' module functional
-- [ ] Security screen on/off
 - [x] CSS global color variables for easier theming
 - [ ] Fix blur flicker on showing/hiding pages
 - [x] Open in new tab setting
 - [x] Better icon colors in 'More' page
+- [ ] Work with blocked cookies
 - [ ] Minor code optimizations
 
 blah blah blah

css/dark.css

@@ -1,5 +1,6 @@
 html {
 	--color: #EEE;
+	--color2: #EEE9;
 	--background: #1118;
 	--bg2: #0008;
 	--hover: #FFF1;
@@ -13,11 +14,9 @@ html {
 }
 .setting.checked {
 	background: #36F;
-	box-shadow: 2px 2px 8px #36F8;
 }
 .hostedby {
 	color: #FFF7;
-	margin: 12px 0 24px;
 }
 .hostedby b {
 	color: #79F;

css/main.css

@@ -7,6 +7,7 @@
 
 html {
 	--color: #222;
+	--color2: #2229;
 	--background: #EEE8;
 	--bg2: #FFF8;
 	--hover: #0001;
@@ -27,7 +28,7 @@ body {
 	display: none;
 }
 a {
-	color: #44F;
+	color: #68F;
 }
 .init * {
 	transition: none !important;
@@ -146,6 +147,10 @@ a {
 	opacity: .6;
 	margin: 2px 12px;
 }
+.source {
+	opacity: 1;
+	color: var(--color2);
+}
 .appname.about {
 	font-size: 36px;
 }
@@ -314,7 +319,7 @@ a.box {
 	align-items: center;
 	justify-content: space-between;
 	text-align: right;
-	padding: 80px 24px 60px;
+	padding: 96px 24px 68px;
 	max-width: 480px;
 	margin: 0 auto;
 }
@@ -376,12 +381,11 @@ a.box {
 .setting.checked {
 	color: #EEE;
 	background: #56F;
-	box-shadow: 2px 2px 8px #56F8;
 }
 .hostedby {
 	font-size: 13px;
 	color: #0007;
-	margin: 12px 0 24px;
+	margin: 18px 0 20px;
 }
 .hostedby b {
 	color: #56F;

index.html

@@ -73,12 +73,11 @@
 								<div class="text">6 out of 7 listed services use secure connections</div>
 							</div>
 						</div>
-						<div class="hostedby">All services hosted by <b id="app-hostedby"></b></div>
 						<div class="boxes static">
 							<div class="box">
 								<div class="icon" style="--color: 144deg">lock</div>
 								<div>
-									<div class="name">Enryption</div>
+									<div class="name">Encryption</div>
 									<div class="desc">HTTPS ensures data is transferred securely, so nobody can monitor your traffic.</div>
 								</div>
 							</div>
@@ -86,10 +85,11 @@
 								<div class="icon" style="--color: 272deg">dns</div>
 								<div>
 									<div class="name">Self-hosted</div>
-									<div class="desc">Little server serving for a small group of people. All data is stored only here.</div>
+									<div class="desc">Everything is running on this server. No more relying on centralized data-harvesters.</div>
 								</div>
 							</div>
 						</div>
+						<div class="hostedby">All services hosted by <b id="app-hostedby"></b></div>
 					</div>
 					<div class="screen hidden">
 						<div class="settings">
@@ -101,7 +101,7 @@
 								</div>
 								<div class="value"></div>
 							</div>
-							<div class="setting" onclick="new_tab_toggle(this)">
+							<div class="setting" onclick="new_tab_toggle()" id="setting-newtab">
 								<div class="icon">open_in_new</div>
 								<div class="text">
 									<div class="name">Open in new tab</div>
@@ -109,7 +109,7 @@
 								</div>
 								<div class="value"></div>
 							</div>
-							<div class="setting">
+							<div class="setting" onclick="reset_all_settings()" id="setting-reset">
 								<div class="icon">restart_alt</div>
 								<div class="text">
 									<div class="name">Reset settings</div>
@@ -124,7 +124,7 @@
 							<img src="img/appicon.png" class="appicon">
 							<div class="appname about">honey</div>
 							<div class="appdesc">Nice and sweet place for all your self-hosted services.</div>
-							<div class="appdesc">Source: <a href="https://gitlab.com/dani3l0/honey" target="_blank">gitlab.com/dani3l0/honey</a></div>
+							<div class="appdesc source">Source: <a href="https://gitlab.com/dani3l0/honey" target="_blank">gitlab.com/dani3l0/honey</a></div>
 						</div>
 						<div class="boxes static">
 							<div class="box">

js/dom.js

@@ -63,7 +63,7 @@ function get_bool(key) {
 }
 
 function load_config(conf) {
-	CONFIG = JSON.parse(conf);
+	if (conf) CONFIG = JSON.parse(conf);
 	let ui = CONFIG.ui;
 	set("app-name", ui.name);
 	set("app-desc", ui.desc);
@@ -71,4 +71,13 @@ function load_config(conf) {
 	if (ui.hosted_by) set("app-hostedby", ui.hosted_by);
 	else get("app-hostedby").parentNode.style.display = "none";
 	load_apps();
+	switch_theme(get_bool("dark_mode"));
+	new_tab_toggle(get_bool("open_new_tab"));
+}
+
+function is_secure(uri) {
+	if (uri.includes("tp://")) return false;
+	if (!uri.startsWith("https://")) {
+		uri = location.href;
+	}
 }

js/main.js

@@ -6,7 +6,6 @@ function onload() {
 		for_all("back", (btn) => {
 			btn.onclick = show;
 		});
-		switch_theme(config("dark_mode") == "true");
 		setTimeout(() => {
 			show();
 			document.body.classList.remove("init");
@@ -59,14 +58,20 @@ function load_apps() {
 	get("applist").innerHTML = final;
 }
 
-function new_tab_toggle(setting) {
-	let v = !get_bool("open_new_tab");
+function new_tab_toggle(value) {
+	let v = get_bool("open_new_tab");
+	if (value === undefined) v = !v; 
 	config("open_new_tab", v);
-	setting = setting.classList;
+	setting = get("setting-newtab").classList;
 	v ? setting.add("checked") : setting.remove("checked");
 	load_apps();
 }
 
+function reset_all_settings() {
+	localStorage.clear();
+	load_config();
+}
+
 let S_TAP_LOCK;
 function open_screen(button) {
 	if (S_TAP_LOCK) return;