diff --git a/README.md b/README.md index eb2e885..3ba6832 100644 --- a/README.md +++ b/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. diff --git a/css/Pages/More/More.css b/css/Pages/More/More.css index bd60dbc..99f01a1 100644 --- a/css/Pages/More/More.css +++ b/css/Pages/More/More.css @@ -1,4 +1,4 @@ -@import url(Privacy.css); +@import url(Overview.css); @import url(Settings.css); .subpages { diff --git a/css/Pages/More/Overview.css b/css/Pages/More/Overview.css new file mode 100644 index 0000000..986a3d5 --- /dev/null +++ b/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; +} diff --git a/css/Pages/More/Privacy.css b/css/Pages/More/Privacy.css deleted file mode 100644 index 62eb81c..0000000 --- a/css/Pages/More/Privacy.css +++ /dev/null @@ -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; -} diff --git a/css/Pages/More/Settings.css b/css/Pages/More/Settings.css index 35b961d..c00c69d 100644 --- a/css/Pages/More/Settings.css +++ b/css/Pages/More/Settings.css @@ -1,4 +1,4 @@ -.settings { +#settings { margin: 32px auto; padding: 0 16px; } diff --git a/css/Pages/Pages.css b/css/Pages/Pages.css index 655f598..2877c4a 100644 --- a/css/Pages/Pages.css +++ b/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; diff --git a/css/main.css b/css/main.css index e5676d8..9627737 100644 --- a/css/main.css +++ b/css/main.css @@ -16,6 +16,10 @@ body { -webkit-tap-highlight-color: transparent; } +* { + scrollbar-width: 0; +} + ::-webkit-scrollbar { display: none; } \ No newline at end of file diff --git a/index.html b/index.html index eb41044..0fd611d 100644 --- a/index.html +++ b/index.html @@ -15,9 +15,9 @@
- -
-
+ +
+
@@ -52,28 +52,28 @@
-
-
Privacy
+
+
Overview
Settings
-
+
- +
-
- shield +
+ rocket_launch
-
-
+
+
Available services
-
+
WARNING: due to blocked cookies, all settings will be lost after page reload
-
+
diff --git a/js/UI/Drawer/Drawer.js b/js/UI/Drawer/Drawer.js index 37892f3..28c306d 100644 --- a/js/UI/Drawer/Drawer.js +++ b/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 += ` diff --git a/js/UI/Home/Home.js b/js/UI/Home/Home.js index 970ec0d..53f53c0 100644 --- a/js/UI/Home/Home.js +++ b/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") } } \ No newline at end of file diff --git a/js/UI/Main/Main.js b/js/UI/Main/Main.js index 3d1ccef..e4e5676 100644 --- a/js/UI/Main/Main.js +++ b/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") diff --git a/js/UI/More/More.js b/js/UI/More/More.js index 53e1d2a..73aef86 100644 --- a/js/UI/More/More.js +++ b/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] diff --git a/js/UI/More/Overview/Overview.js b/js/UI/More/Overview/Overview.js new file mode 100644 index 0000000..60a2f4c --- /dev/null +++ b/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) + } +} diff --git a/js/UI/More/Privacy/analyzer.js b/js/UI/More/Overview/analyzer.js similarity index 100% rename from js/UI/More/Privacy/analyzer.js rename to js/UI/More/Overview/analyzer.js diff --git a/js/UI/More/Overview/tiles.js b/js/UI/More/Overview/tiles.js new file mode 100644 index 0000000..e232c1a --- /dev/null +++ b/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 = `${icon} +
+
${name}
+
${desc}
+
` + + document.querySelector(".privacy-boxes").appendChild(item) + return item +} diff --git a/js/UI/More/Privacy/Privacy.js b/js/UI/More/Privacy/Privacy.js deleted file mode 100644 index 42ce68a..0000000 --- a/js/UI/More/Privacy/Privacy.js +++ /dev/null @@ -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) - } -} diff --git a/js/UI/More/Privacy/tiles.js b/js/UI/More/Privacy/tiles.js deleted file mode 100644 index 5bd2a3d..0000000 --- a/js/UI/More/Privacy/tiles.js +++ /dev/null @@ -1,11 +0,0 @@ -export function privacyBox(icon, name, desc) { - let item = document.createElement("div") - item.innerHTML = ` -
-
${name}
-
${desc}
-
` - - document.getElementById("report-boxes").appendChild(item) - return item -} diff --git a/js/UI/More/Settings/Settings.js b/js/UI/More/Settings/Settings.js index 9fb743b..21fa54c 100644 --- a/js/UI/More/Settings/Settings.js +++ b/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") } } \ No newline at end of file diff --git a/js/UI/More/Settings/events.js b/js/UI/More/Settings/events.js index 8b9f6f8..289348b 100644 --- a/js/UI/More/Settings/events.js +++ b/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") diff --git a/js/UI/More/Settings/tiles.js b/js/UI/More/Settings/tiles.js index 5340066..4189ad1 100644 --- a/js/UI/More/Settings/tiles.js +++ b/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 } \ No newline at end of file diff --git a/js/Utils/DOMUtils.js b/js/Utils/DOMUtils.js index d2c9fbd..37873f7 100644 --- a/js/Utils/DOMUtils.js +++ b/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") } + } diff --git a/js/Utils/StringUtils.js b/js/Utils/StringUtils.js new file mode 100644 index 0000000..5dc2e9b --- /dev/null +++ b/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" +} diff --git a/package-lock.json b/package-lock.json index ee03609..0b83984 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { - "name": "vite-project", - "version": "0.0.0", + "name": "honey", + "version": "2.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "vite-project", - "version": "0.0.0", + "name": "honey", + "version": "2.2.0", "devDependencies": { "vite": "^4.4.5" }