mirror of
https://github.com/khairul169/honey.git
synced 2025-04-28 14:59:32 +07:00
UI: Lots of improvements
This commit is contained in:
Daniel
parent
326c8f3352
commit
be33eae53b
@ -43,3 +43,10 @@ a {
|
||||
background: #36F;
|
||||
box-shadow: 2px 2px 8px #36F8;
|
||||
}
|
||||
.hostedby {
|
||||
color: #FFF7;
|
||||
margin: 12px 0 24px;
|
||||
}
|
||||
.hostedby b {
|
||||
color: #79F;
|
||||
}
|
||||
27
css/main.css
27
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;
|
||||
}
|
||||
@ -363,3 +370,11 @@ a.box {
|
||||
background: #56F;
|
||||
box-shadow: 2px 2px 8px #56F8;
|
||||
}
|
||||
.hostedby {
|
||||
font-size: 13px;
|
||||
color: #0007;
|
||||
margin: 12px 0 24px;
|
||||
}
|
||||
.hostedby b {
|
||||
color: #56F;
|
||||
}
|
||||
33
index.html
33
index.html
@ -11,7 +11,7 @@
|
||||
<script type="text/javascript" src="js/main.js"></script>
|
||||
</head>
|
||||
<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)">
|
||||
</div>
|
||||
@ -70,36 +70,25 @@
|
||||
<div class="icon fancy">shield</div>
|
||||
<div class="right">
|
||||
<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 class="hostedby">
|
||||
<div>All services hosted by <b>nobody</b></div>
|
||||
</div>
|
||||
<div class="boxes static">
|
||||
<div class="box">
|
||||
<div class="icon" style="--color: 0deg">code</div>
|
||||
<div class="icon" style="--color: 144deg">lock</div>
|
||||
<div>
|
||||
<div class="name">Open Source</div>
|
||||
<div class="desc">Code is publicly available. Download, modify, collaborate, whatever.</div>
|
||||
<div class="name">Enryption?</div>
|
||||
<div class="desc">HTTPS ensures data is transferred securely, that nobody can monitor your traffic.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="icon" style="--color: 144deg">mop</div>
|
||||
<div class="icon" style="--color: 272deg">dns</div>
|
||||
<div>
|
||||
<div class="name">Simple & Clean</div>
|
||||
<div class="desc">Interface is meant to be uncomplicated and pleasant in sight.</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 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
24
js/dom.js
24
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 `
|
||||
<a class="box" href="${safe_text(app["href"])}">
|
||||
@ -34,3 +40,19 @@ function mk_entry(app) {
|
||||
</div>
|
||||
</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
40
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";
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user