khairul169/honey
1
0
Fork 0
mirror of https://github.com/khairul169/honey.git synced 2025-04-28 14:59:32 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

UI: Lots of improvements

Browse Source
This commit is contained in:
Daniel 2023-01-15 14:12:55 +01:00
parent 326c8f3352
commit be33eae53b
5 changed files with 78 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/dark.css
View File

@ -43,3 +43,10 @@ a {
background: #36F; background: #36F;
box-shadow: 2px 2px 8px #36F8; box-shadow: 2px 2px 8px #36F8;
} }
.hostedby {
color: #FFF7;
margin: 12px 0 24px;
}
.hostedby b {
color: #79F;
}

27
css/main.css
View File

@ -52,15 +52,22 @@ a {
object-fit: cover; object-fit: cover;
transition: all .45s !important; transition: all .45s !important;
} }
#background .scaled { #background.scaled img {
transform: scale(1.14); transform: scale(1.14);
} }
#background.dark > img:last-child { #background.dark > img:first-child {
opacity: 0; opacity: 0;
transform: scale(1); transform: none;
} }
#background:not(.dark) > img:first-child { #background:not(.dark) > img:last-child {
transform: scale(1); 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 { .unloaded {
opacity: 0; opacity: 0;
@ -299,7 +306,7 @@ a.box {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
text-align: right; text-align: right;
padding: 80px 24px; padding: 80px 24px 60px;
max-width: 480px; max-width: 480px;
margin: 0 auto; margin: 0 auto;
} }
@ -363,3 +370,11 @@ a.box {
background: #56F; background: #56F;
box-shadow: 2px 2px 8px #56F8; box-shadow: 2px 2px 8px #56F8;
} }
.hostedby {
font-size: 13px;
color: #0007;
margin: 12px 0 24px;
}
.hostedby b {
color: #56F;
}

33
index.html
View File

@ -11,7 +11,7 @@
<script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/main.js"></script>
</head> </head>
<body onload="onload()" class="init"> <body onload="onload()" class="init">
<div id="background"> <div id="background" class="scaled">
<img class="unloaded" onload="load_img(this)"> <img class="unloaded" onload="load_img(this)">
<img class="unloaded" onload="load_img(this)"> <img class="unloaded" onload="load_img(this)">
</div> </div>
@ -70,36 +70,25 @@
<div class="icon fancy">shield</div> <div class="icon fancy">shield</div>
<div class="right"> <div class="right">
<div class="pp"><b id="security-pp">85</b>%</div> <div class="pp"><b id="security-pp">85</b>%</div>
<div class="text">6 out of 7 listed services use encrypted connections</div> <div class="text">6 out of 7 listed services use secure connections</div>
</div> </div>
</div> </div>
<div class="hostedby">
<div>All services hosted by <b>nobody</b></div>
</div>
<div class="boxes static"> <div class="boxes static">
<div class="box"> <div class="box">
<div class="icon" style="--color: 0deg">code</div> <div class="icon" style="--color: 144deg">lock</div>
<div> <div>
<div class="name">Open Source</div> <div class="name">Enryption?</div>
<div class="desc">Code is publicly available. Download, modify, collaborate, whatever.</div> <div class="desc">HTTPS ensures data is transferred securely, that nobody can monitor your traffic.</div>
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<div class="icon" style="--color: 144deg">mop</div> <div class="icon" style="--color: 272deg">dns</div>
<div> <div>
<div class="name">Simple & Clean</div> <div class="name">Self-hosted</div>
<div class="desc">Interface is meant to be uncomplicated and pleasant in sight.</div> <div class="desc">Little server serving for a small group of people. All data is stored only here.</div>
</div>
</div>
<div class="box">
<div class="icon" style="--color: 240deg">language</div>
<div>
<div class="name">Static</div>
<div class="desc">Requires no dynamic backend as it's built with plain HTML/CSS/JS.</div>
</div>
</div>
<div class="box">
<div class="icon" style="--color: 36deg">auto_awesome</div>
<div>
<div class="name">Responsive</div>
<div class="desc">Layout is automatically adjusted depending on device you are using.</div>
</div> </div>
</div> </div>
</div> </div>

24
js/dom.js
View File

@ -1,29 +1,35 @@
function get(id) { function get(id) {
return document.getElementById(id); return document.getElementById(id);
} }
function get_class(class_name, parent) { function get_class(class_name, parent) {
if (!parent) parent = document; if (!parent) parent = document;
return parent.getElementsByClassName(class_name); return parent.getElementsByClassName(class_name);
} }
function for_all(class_name, func, parent) { function for_all(class_name, func, parent) {
let a = get_class(class_name, parent); let a = get_class(class_name, parent);
for (let i = 0; i < a.length; i++) { for (let i = 0; i < a.length; i++) {
func(a[i]); func(a[i]);
} }
} }
function load_img(img) { function load_img(img) {
img.classList.remove("unloaded"); img.classList.remove("unloaded");
} }
function get_background() { function get_background() {
let bg = 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) { function safe_text(text) {
text = text.replaceAll("<", "&lt;"); text = text.replaceAll("<", "&lt;");
text = text.replaceAll(">", "&gt;"); text = text.replaceAll(">", "&gt;");
text = text.replaceAll("&", "&amp;"); text = text.replaceAll("&", "&amp;");
return text; return text;
} }
function mk_entry(app) { function mk_entry(app) {
return ` return `
<a class="box" href="${safe_text(app["href"])}"> <a class="box" href="${safe_text(app["href"])}">
@ -34,3 +40,19 @@ function mk_entry(app) {
</div> </div>
</a>`; </a>`;
} }
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";
}

40
js/main.js
View File

@ -1,6 +1,7 @@
var UI = { var UI = {
"dark_mode": false "dark_mode": false
} }
var SERVICES = [ var SERVICES = [
{ {
"name": "CalDav", "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() { function onload() {
for_all("back", (btn) => { for_all("back", (btn) => {
btn.onclick = back; btn.onclick = back;
@ -78,30 +67,33 @@ function show(id) {
}); });
get(id).classList.remove("hidden"); get(id).classList.remove("hidden");
get(id).scrollTop = 0; 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() { function back() {
show("page-home"); show("page-home");
get_background().classList.add("scaled");
} }
function switch_theme(value) { function switch_theme(value) {
let is_dark = config("dark_mode") == "true"; let is_dark = get_bool("dark_mode");
if (value === undefined) value = !is_dark; if (value === undefined) is_dark = !is_dark;
is_dark = value;
config("dark_mode", is_dark); config("dark_mode", is_dark);
get("css_dark").disabled = !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) { if (is_dark) {
get("setting-theme").classList.add("checked"); setting.classList.add("checked");
get("theme-indicator").innerText = "dark_mode"; icon.innerText = "dark_mode";
bg_box.add("dark"); bg.add("dark");
get_background().src = "img/background-dark.jpg"; get_background().src = "img/background-dark.jpg";
} }
else { else {
get("setting-theme").classList.remove("checked"); setting.classList.remove("checked");
get("theme-indicator").innerText = "light_mode"; icon.innerText = "light_mode";
bg_box.remove("dark"); bg.remove("dark");
get_background().src = "img/background.jpg"; get_background().src = "img/background.jpg";
} }
} }