Refactor Privacy to Overview, code cleanup

README.md

@@ -81,13 +81,6 @@ Example:
 ```
 
 
-## 🛡️ Privacy Panel
-
-**How does it work?**
-- Checks how many listed services use `HTTPS` for secure connections
-- Checks if listed services are on the same origin (like domain, subdomain or IP address), otherwise are considered as third-party
-
-
 ## 🛠️ Development
 
 honey is built on top of [Vite.js](https://vitejs.dev/). This tool allows faster development and offers various optimizations.

css/Pages/More/More.css

@@ -1,4 +1,4 @@
-@import url(Privacy.css);
+@import url(Overview.css);
 @import url(Settings.css);
 
 .subpages {

css/Pages/More/Overview.css

@@ -0,0 +1,54 @@
+.overview {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	max-width: 640px;
+	padding: 0 20px;
+	margin: 128px auto 88px;
+	text-align: right;
+}
+
+.overview > i {
+	font-size: 80px;
+}
+
+.overview .big {
+	font-size: 64px;
+	margin-bottom: -4px;
+}
+
+.overview .small {
+	opacity: .5;
+}
+
+.privacy-boxes {
+	display: flex;
+	text-align: left;
+	flex-wrap: wrap;
+	margin-bottom: 10px;
+}
+
+.privacy-boxes > div {
+	display: flex;
+	width: 50%;
+	min-width: 256px;
+	flex: 1;
+	padding: 8px;
+	align-items: center;
+}
+
+.privacy-boxes i {
+	color: var(--color);
+	text-shadow: 0 0 48px var(--color);
+	padding: 16px;
+	font-size: 28px;
+	border-radius: 32px;
+}
+
+.privacy-boxes .title {
+	font-size: 16px;
+}
+
+.privacy-boxes .subtitle {
+	opacity: .5;
+}

css/Pages/More/Privacy.css

@@ -1,75 +0,0 @@
-#report-boxes {
-	display: flex;
-	text-align: left;
-	flex-wrap: wrap;
-	margin-bottom: 8px;
-}
-
-#report-boxes i::after {
-	color: var(--color);
-	text-shadow: 0 0 48px var(--color);
-	padding: 16px;
-	font-size: 28px;
-	border-radius: 32px;
-}
-
-#report-boxes .icon-https::after {
-	--color: #0C7;
-	content: "lock";
-}
-
-#report-boxes .icon-rocket::after {
-	--color: #68F;
-	content: "rocket";
-}
-
-#report-boxes .prewarn i::after {
-	--color: #EA0;
-}
-
-#report-boxes .warn i::after {
-	--color: #F60;
-}
-
-#report-boxes .error i::after {
-	--color: #F22;
-}
-
-#report-boxes > div {
-	display: flex;
-	width: 50%;
-	min-width: 256px;
-	flex: 1;
-	padding: 20px 8px;
-	align-items: center;
-}
-
-#report-boxes .title {
-	font-size: 16px;
-}
-
-#report-boxes .subtitle {
-	opacity: .6;
-}
-
-.security {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	max-width: 540px;
-	padding: 24px;
-	margin: 120px auto 80px;
-	text-align: right;
-}
-
-.security i {
-	font-size: 80px;
-}
-
-.security #report-score {
-	font-size: 48px;
-}
-
-.security #report {
-	opacity: .6;
-}

css/Pages/More/Settings.css

@@ -1,4 +1,4 @@
-.settings {
+#settings {
 	margin: 32px auto;
 	padding: 0 16px;
 }

css/Pages/Pages.css

@@ -81,7 +81,7 @@
 	font-size: 26px;
 }
 
-.sub-switch {
+.subswitch {
 	display: flex;
 	background: var(--bg2);
 	transition: background .2s;
@@ -94,7 +94,7 @@
 	--id: inherit;
 }
 
-.sub-switch::before {
+.subswitch::before {
 	content: " ";
 	z-index: -1;
 	position: absolute;
@@ -108,7 +108,7 @@
 	transition: left .3s, background .3s;
 }
 
-.sub-switch div {
+.subswitch div {
 	padding: 12px;
 	width: 50%;
 	cursor: pointer;

css/main.css

@@ -16,6 +16,10 @@ body {
 	-webkit-tap-highlight-color: transparent;
 }
 
+* {
+	scrollbar-width: 0;
+}
+
 ::-webkit-scrollbar {
 	display: none;
 }

index.html

@@ -15,9 +15,9 @@
 		<div class="page home" p="home">
 			<div class="wrapper">
 				<div class="home">
-					<img class="appicon" id="app-icon">
+					<img class="appicon">
-					<div class="appname" id="app-name"></div>
+					<div class="appname"></div>
-					<div class="appdesc" id="app-desc"></div>
+					<div class="appdesc"></div>
 				</div>
 				<div class="buttons">
 					<div id="theme-switcher">
@@ -52,28 +52,28 @@
 		<div class="page" p="more">
 			<div class="back"><i></i></div>
 			<div class="wrapper">
-				<div class="sub-switch" id="switch">
+				<div class="subswitch">
-					<div>Privacy</div>
+					<div>Overview</div>
 					<div>Settings</div>
 				</div>
-				<div class="subpages" id="subsettings">
+				<div class="subpages">
 
-					<!-- Privacy report -->
+					<!-- Overview -->
 					<div>
-						<div class="security">
+						<div class="overview">
-							<i>shield</i>
+							<i>rocket_launch</i>
 							<div>
-								<div class="score"><b id="report-score"></b></div>
+								<div class="big"></div>
-								<div id="report"></div>
+								<div class="small">Available services</div>
 							</div>
 						</div>
-						<div id="report-boxes"></div>
+						<div class="privacy-boxes"></div>
 					</div>
 
 					<!-- Settings -->
 					<div>
 						<div id="no-cookies">WARNING: due to blocked cookies, all settings will be lost after page reload</div>
-						<div class="settings" id="settings"></div>
+						<div id="settings"></div>
 					</div>
 				</div>
 			</div>

js/UI/Drawer/Drawer.js

@@ -13,7 +13,7 @@ export default class Drawer {
 	
 	importApps() {
 		let apps = this.config.getServices()
-		let applist = document.getElementById("app-list");
+		let applist = document.querySelector("#app-list");
 		for (let app of apps) {
 			applist.innerHTML += `<a class="box" href="${app.href}">
 				<img src="${app.icon}">

js/UI/Home/Home.js

@@ -16,7 +16,7 @@ export default class Home {
 	}
 
 	initButtons() {
-		let buttons = document.getElementsByClassName("buttons")[0].children
+		let buttons = document.querySelector(".buttons").children
 		for (let button of buttons) {
 			let target = button.getAttribute("t")
 			if (target) {
@@ -28,7 +28,7 @@ export default class Home {
 	}
 
 	initBackButtons() {
-		let backButtons = document.getElementsByClassName("back")
+		let backButtons = document.querySelectorAll(".back")
 		for (let button of backButtons) {
 			button.addEventListener("click", () => {
 				showPage("home")
@@ -37,17 +37,17 @@ export default class Home {
 	}
 
 	initHomeUI() {
-		let logo = document.getElementById("app-icon")
+		let logo = document.querySelector(".appicon")
 		logo.src = this.config.get("icon")
 		logo.classList.add("notloaded")
 		logo.addEventListener("load", () => {
 			logo.classList.remove("notloaded")
 		})
 
-		let name = document.getElementById("app-name")
+		let name = document.querySelector(".appname")
 		name.innerText = this.config.get("name")
 
-		let desc = document.getElementById("app-desc")
+		let desc = document.querySelector(".appdesc")
 		desc.innerText = this.config.get("desc")
 	}
 }

js/UI/Main/Main.js

@@ -9,12 +9,12 @@ export default class Main {
 
 	init() {
 		document.title = this.config.get("name")
-		document.getElementById("favicon").href = this.config.get("icon")
+		document.querySelector("#favicon").href = this.config.get("icon")
 		this.initBackgrounds()
 	}
 
 	initBackgrounds() {
-		this.backgrounds = document.getElementById("background")
+		this.backgrounds = document.querySelector("#background")
 		for (let i = 0; i < 2; i++) {
 			let img = document.createElement("img")
 			img.classList.add("notloaded")

js/UI/More/More.js

@@ -1,5 +1,5 @@
 import App from "../../App";
-import Privacy from "./Privacy/Privacy";
+import Overview from "./Overview/Overview";
 import Settings from "./Settings/Settings";
 
 
@@ -7,21 +7,21 @@ export default class More {
 	constructor() {
 		this.app = new App()
 		this.config = this.app.config
-		this.privacy = new Privacy()
+		this.overview = new Overview()
 		this.settings = new Settings()
 		this.init()
 	}
 
 	init() {
-		this.privacy.init()
+		this.overview.init()
 		this.settings.init()
 		this.initPager()
 	}
 
 	initPager() {
-		let switcher = document.getElementById("switch")
+		let switcher = document.querySelector(".subswitch")
 		let buttons = switcher.children
-		let subsettings = document.getElementById("subsettings")
+		let subsettings = document.querySelector(".subpages")
 
 		for (let i = 0; i < buttons.length; i++) {
 			let button = buttons[i]

js/UI/More/Overview/Overview.js

@@ -0,0 +1,53 @@
+import App from "../../../App";
+import { analyzeService } from "./analyzer";
+import { privacyBox } from "./tiles";
+import { s, isare } from "../../../Utils/StringUtils";
+
+
+export default class Overview {
+	constructor() {
+		this.app = new App()
+		this.config = this.app.config
+		this.div = document.querySelector(".overview").parentNode
+	}
+
+	init() {
+		this.initPrivacyBoxes()
+	}
+
+	initPrivacyBoxes() {
+		let stats = {
+			total: 0,
+			secure: 0,
+			thirdParties: 0
+		}
+		for (let service of this.config.getServices()) {
+			let analysis = analyzeService(service.href)
+			stats.total++
+			stats.secure += analysis.isSecure
+			stats.thirdParties += analysis.isThirdParty
+		}
+		this.div.querySelector(".big").innerText = stats.total
+
+		let encryption_t
+		let donot = ""
+		if (stats.secure == stats.total) encryption_t = "All"
+		else if (stats.secure == 0) encryption_t = "None of"
+		else {
+			encryption_t = stats.total - stats.secure
+			donot = "do not"
+		}
+		encryption_t = `${encryption_t} service${s(encryption_t)} ${donot} use secure connections (HTTPS).`
+
+		let indepencence_t
+		if (stats.thirdParties == 0) indepencence_t =
+			"This server is free of 3rd party services."
+		else if (stats.thirdParties == stats.total) indepencence_t =
+			"It seems only 3rd-party services are listed."
+		else indepencence_t = 
+			`${stats.thirdParties} service${s(stats.thirdParties)} ${isare(stats.thirdParties)} provided by 3rd-parties.`
+
+		privacyBox("lock", "#0D6", "Encryption", encryption_t, stats.secure / stats.total)
+		privacyBox("home", "#68F", "Independence", indepencence_t, 1 - stats.thirdParties / stats.total)
+	}
+}

js/UI/More/Overview/tiles.js

@@ -0,0 +1,18 @@
+export function privacyBox(icon, color, name, desc, pp) {
+	if (pp == 1) {}
+	else if (pp > 0.7) color = "#EA0"
+	else if (pp > 0.25) color = "#F72"
+	else color = "#F33"
+
+	let item = document.createElement("div")
+	item.setAttribute("style", `--color: ${color}`)
+
+	item.innerHTML = `<i>${icon}</i>
+		<div>
+			<div class="title">${name}</div>
+			<div class="subtitle">${desc}</div>
+		</div>`
+
+	document.querySelector(".privacy-boxes").appendChild(item)
+	return item
+}

js/UI/More/Privacy/Privacy.js

@@ -1,81 +0,0 @@
-import App from "../../../App";
-import { analyzeService } from "./analyzer";
-import { privacyBox } from "./tiles";
-
-
-export default class Privacy {
-	constructor() {
-		this.app = new App()
-		this.config = this.app.config
-	}
-
-	init() {
-		this.initPrivacyPanel()
-	}
-
-	initPrivacyPanel() {
-		let stats = {
-			total: 0,
-			secure: 0,
-			thirdParties: 0
-		}
-		for (let service of this.config.getServices()) {
-			let analysis = analyzeService(service.href)
-			stats.total++
-			stats.secure += analysis.isSecure
-			stats.thirdParties += analysis.isThirdParty
-		}
-
-		let encryption = stats.secure / stats.total
-		let encryption_t
-		if (encryption == 1) encryption_t = "All"
-		else if (encryption >= 0.9) encryption_t = "Most"
-		else if (encryption > 0.5) encryption_t = "Many"
-		else if (encryption > 0.2) encryption_t = "Some"
-		else if (encryption > 0) encryption_t = "Few"
-		else encryption_t = "No"
-		encryption_t = `${encryption_t} listed services use secure connections.`
-
-		let indepencence = (stats.total - stats.thirdParties) / stats.total
-		let indepencence_t
-		if (indepencence == 1) indepencence_t = "no"
-		else if (indepencence > 0.7) indepencence_t = "some"
-		else if (indepencence > 0.4) indepencence_t = "many"
-		else if (indepencence > 0) indepencence_t = "a lot of"
-		else indepencence_t = "only"
-		indepencence_t = `There are ${indepencence_t} 3rd-party services here.`
-
-		let score = (encryption + indepencence) / 2
-		let score_t, score_d
-		if (score == 1) {
-			score_t = "Superb"
-			score_d = "All data is sent securely and no 3rd-party services are involved."
-		}
-		else if (score >= 0.9) {
-			score_t = "Great"
-			score_d = "Awesome privacy practices, but still not perfect."
-		}
-		else if (score >= 0.6) {
-			score_t = "Good"
-			score_d = "Acceptable privacy practices, but still not perfect."
-		}
-		else if (score >= 0.3) {
-			score_t = "Fair"
-			score_d = "Definitely not a vault, but self-hosted at least."
-		}
-		else if (score > 0) {
-			score_t = "Dangerous"
-			score_d = "You should really pay attention what you're doing here."
-		}
-		else {
-			score_t = ":0"
-			score_d = "You're just testing, right?"
-		}
-
-		document.getElementById("report-score").innerText = score_t
-		document.getElementById("report").innerText = score_d
-
-		privacyBox("icon-https", "Encryption", encryption_t)
-		privacyBox("icon-rocket", "Independence", indepencence_t)
-	}
-}

js/UI/More/Privacy/tiles.js

@@ -1,11 +0,0 @@
-export function privacyBox(icon, name, desc) {
-	let item = document.createElement("div")
-	item.innerHTML = `<i class="${icon}"></i>
-		<div>
-			<div class="title">${name}</div>
-			<div class="subtitle">${desc}</div>
-		</div>`
-
-	document.getElementById("report-boxes").appendChild(item)
-	return item
-}

js/UI/More/Settings/Settings.js

@@ -39,13 +39,13 @@ export default class Settings {
 			"animations", EVENTS.onAnimationChange
 		)
 
-		document.getElementById("theme-switcher").addEventListener("click", () => {
+		document.querySelector("#theme-switcher").addEventListener("click", () => {
 			darkMode.click()
 		})
 	}
 
 	checkLocalStorage() {
-		let warn = document.getElementById("no-cookies").classList
+		let warn = document.querySelector("#no-cookies").classList
 		if (this.config.storageAvailable) warn.add("hidden")
 	}
 }

js/UI/More/Settings/events.js

@@ -7,7 +7,7 @@ export function onThemeChange(config) {
 
 export function onNewTabChange(config) {
 	let openNewTab = config.get("open_new_tab")
-	let appList = document.getElementById("app-list").children
+	let appList = document.querySelector("#app-list").children
 
 	for (let app of appList) {
 		if (openNewTab) app.setAttribute("target", "_blank")

js/UI/More/Settings/tiles.js

@@ -29,6 +29,6 @@ export function addOnOffTile(conf, icon, name, desc, key, func) {
 	handleState()
 	if (func) f()
 
-	document.getElementById("settings").appendChild(item)
+	document.querySelector("#settings").appendChild(item)
 	return item
 }

js/Utils/DOMUtils.js

@@ -1,12 +1,13 @@
 export function showPage(target) {
-	let bg = document.getElementById("background").classList
+	let bg = document.querySelector("#background").classList
 	if (target == "home") bg.add("scaled")
 	else bg.remove("scaled")
+	let pages = document.querySelectorAll(".page")
 
-	let pages = document.getElementsByClassName("page")
 	for (let page of pages) {
 		let p = page.getAttribute("p")
 		if (p == target) page.classList.add("current")
 		else page.classList.remove("current")
 	}
+
 }

js/Utils/StringUtils.js

@@ -0,0 +1,9 @@
+export function s(number) {
+	if (number == 1) return ""
+	return "s"
+}
+
+export function isare(number) {
+	if (number == 1) return "is"
+	return "are"
+}

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "vite-project",
+  "name": "honey",
-  "version": "0.0.0",
+  "version": "2.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "vite-project",
+      "name": "honey",
-      "version": "0.0.0",
+      "version": "2.2.0",
       "devDependencies": {
         "vite": "^4.4.5"
       }