diff --git a/css/dark.css b/css/dark.css index 214fa18..ffb281d 100644 --- a/css/dark.css +++ b/css/dark.css @@ -42,4 +42,11 @@ a { .setting.checked { background: #36F; box-shadow: 2px 2px 8px #36F8; +} +.hostedby { + color: #FFF7; + margin: 12px 0 24px; +} +.hostedby b { + color: #79F; } \ No newline at end of file diff --git a/css/main.css b/css/main.css index 1590191..60ce1ec 100644 --- a/css/main.css +++ b/css/main.css @@ -52,15 +52,22 @@ a { object-fit: cover; transition: all .45s !important; } -#background .scaled { +#background.scaled img { transform: scale(1.14); } -#background.dark > img:last-child { +#background.dark > img:first-child { opacity: 0; - transform: scale(1); + transform: none; } -#background:not(.dark) > img:first-child { - transform: scale(1); +#background:not(.dark) > img:last-child { + opacity: 0; + transform: none; +} +#background.dark:not(.scaled) > img:first-child { + transform: scale(1.14); +} +#background:not(.dark):not(.scaled) > img:last-child { + transform: scale(1.14); } .unloaded { opacity: 0; @@ -299,7 +306,7 @@ a.box { align-items: center; justify-content: space-between; text-align: right; - padding: 80px 24px; + padding: 80px 24px 60px; max-width: 480px; margin: 0 auto; } @@ -362,4 +369,12 @@ a.box { color: #EEE; background: #56F; box-shadow: 2px 2px 8px #56F8; +} +.hostedby { + font-size: 13px; + color: #0007; + margin: 12px 0 24px; +} +.hostedby b { + color: #56F; } \ No newline at end of file diff --git a/index.html b/index.html index aaabfda..05d8a8d 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ -
+
@@ -70,36 +70,25 @@
shield
85%
-
6 out of 7 listed services use encrypted connections
+
6 out of 7 listed services use secure connections
+
+
All services hosted by nobody
+
-
code
+
lock
-
Open Source
-
Code is publicly available. Download, modify, collaborate, whatever.
+
Enryption?
+
HTTPS ensures data is transferred securely, that nobody can monitor your traffic.
-
mop
+
dns
-
Simple & Clean
-
Interface is meant to be uncomplicated and pleasant in sight.
-
-
-
-
language
-
-
Static
-
Requires no dynamic backend as it's built with plain HTML/CSS/JS.
-
-
-
-
auto_awesome
-
-
Responsive
-
Layout is automatically adjusted depending on device you are using.
+
Self-hosted
+
Little server serving for a small group of people. All data is stored only here.
diff --git a/js/dom.js b/js/dom.js index a30ecbe..45fc684 100644 --- a/js/dom.js +++ b/js/dom.js @@ -1,29 +1,35 @@ function get(id) { return document.getElementById(id); } + function get_class(class_name, parent) { if (!parent) parent = document; return parent.getElementsByClassName(class_name); } + function for_all(class_name, func, parent) { let a = get_class(class_name, parent); for (let i = 0; i < a.length; i++) { func(a[i]); } } + function load_img(img) { img.classList.remove("unloaded"); } + function get_background() { let bg = get("background"); - return bg.children[1-bg.classList.contains("dark")]; + return bg.children[1-1+bg.classList.contains("dark")]; } + function safe_text(text) { text = text.replaceAll("<", "<"); text = text.replaceAll(">", ">"); text = text.replaceAll("&", "&"); return text; } + function mk_entry(app) { return ` @@ -33,4 +39,20 @@ function mk_entry(app) {
${safe_text(app["desc"])}
`; +} + +function config(key, value) { + let def = UI[key]; + let val = localStorage.getItem(key); + if (def == value && !val) return; + if (value !== undefined) { + localStorage.setItem(key, value); + return; + } + if (!val) val = UI[key].toString(); + return val; +} + +function get_bool(key) { + return config(key) == "true"; } \ No newline at end of file diff --git a/js/main.js b/js/main.js index ff1bc3f..d34fa95 100644 --- a/js/main.js +++ b/js/main.js @@ -1,6 +1,7 @@ var UI = { "dark_mode": false } + var SERVICES = [ { "name": "CalDav", @@ -46,18 +47,6 @@ var SERVICES = [ } ] -function config(key, value) { - let def = UI[key]; - let val = localStorage.getItem(key); - if (def == value && !val) return; - if (value !== undefined) { - localStorage.setItem(key, value); - return; - } - if (!val) val = UI[key].toString(); - return val; -} - function onload() { for_all("back", (btn) => { btn.onclick = back; @@ -78,30 +67,33 @@ function show(id) { }); get(id).classList.remove("hidden"); get(id).scrollTop = 0; - get_background().classList.remove("scaled"); + let bg = get("background").classList; + if (CURRENT_VIEW == "page-home") bg.add("scaled"); + else bg.remove("scaled"); } + function back() { show("page-home"); - get_background().classList.add("scaled"); } function switch_theme(value) { - let is_dark = config("dark_mode") == "true"; - if (value === undefined) value = !is_dark; - is_dark = value; + let is_dark = get_bool("dark_mode"); + if (value === undefined) is_dark = !is_dark; config("dark_mode", is_dark); get("css_dark").disabled = !is_dark; - let bg_box = get("background").classList; + let bg = get("background").classList; + let setting = get("setting-theme"); + let icon = get("theme-indicator"); if (is_dark) { - get("setting-theme").classList.add("checked"); - get("theme-indicator").innerText = "dark_mode"; - bg_box.add("dark"); + setting.classList.add("checked"); + icon.innerText = "dark_mode"; + bg.add("dark"); get_background().src = "img/background-dark.jpg"; } else { - get("setting-theme").classList.remove("checked"); - get("theme-indicator").innerText = "light_mode"; - bg_box.remove("dark"); + setting.classList.remove("checked"); + icon.innerText = "light_mode"; + bg.remove("dark"); get_background().src = "img/background.jpg"; } }