mirror of
https://github.com/khairul169/honey.git
synced 2025-04-28 14:59:32 +07:00
Turn About page into a very fancy playground
This commit is contained in:
Daniel
parent
d100e582b9
commit
326c8f3352
19
css/dark.css
19
css/dark.css
@ -23,6 +23,23 @@ a {
|
|||||||
background: #FFF1;
|
background: #FFF1;
|
||||||
}
|
}
|
||||||
.box .icon {
|
.box .icon {
|
||||||
background: hsl(var(--color), 100%, 22%);
|
background: hsl(var(--color), 100%, 18%);
|
||||||
color: hsl(var(--color), 100%, 85%);
|
color: hsl(var(--color), 100%, 85%);
|
||||||
|
}
|
||||||
|
.selector {
|
||||||
|
position: relative;
|
||||||
|
background: #0008;
|
||||||
|
}
|
||||||
|
.selector .bg {
|
||||||
|
background: #FFF1;
|
||||||
|
}
|
||||||
|
.setting {
|
||||||
|
background: #1118;
|
||||||
|
}
|
||||||
|
.setting:hover {
|
||||||
|
background: #2228;
|
||||||
|
}
|
||||||
|
.setting.checked {
|
||||||
|
background: #36F;
|
||||||
|
box-shadow: 2px 2px 8px #36F8;
|
||||||
}
|
}
|
||||||
116
css/main.css
116
css/main.css
@ -21,10 +21,10 @@ body {
|
|||||||
a {
|
a {
|
||||||
color: #44F;
|
color: #44F;
|
||||||
}
|
}
|
||||||
body.init * {
|
.init * {
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
body.init .page {
|
.init .page {
|
||||||
transition: opacity .3s, top .3s !important;
|
transition: opacity .3s, top .3s !important;
|
||||||
}
|
}
|
||||||
.icon {
|
.icon {
|
||||||
@ -116,6 +116,7 @@ body.init .page {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-width: 340px;
|
min-width: 340px;
|
||||||
|
transition: background .2s;
|
||||||
}
|
}
|
||||||
.home .wrapper {
|
.home .wrapper {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
@ -169,6 +170,7 @@ body.init .page {
|
|||||||
background: #EEE8;
|
background: #EEE8;
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
backdrop-filter: blur(16px);
|
backdrop-filter: blur(16px);
|
||||||
|
transition: background .2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back .icon {
|
.back .icon {
|
||||||
@ -196,7 +198,7 @@ body.init .page {
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.static {
|
.static {
|
||||||
margin: 24px 6px 16px;
|
margin: 16px 6px;
|
||||||
}
|
}
|
||||||
.static .box:hover {
|
.static .box:hover {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@ -252,4 +254,112 @@ a.box {
|
|||||||
}
|
}
|
||||||
.header .text {
|
.header .text {
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector {
|
||||||
|
position: relative;
|
||||||
|
background: #FFF8;
|
||||||
|
margin: 18px auto;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
max-width: 640px;
|
||||||
|
transition: color .2s, background .2s;
|
||||||
|
}
|
||||||
|
.selector .bg {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% / var(--screens) - 8px);
|
||||||
|
height: calc(100% - 8px);
|
||||||
|
background: #0001;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
margin-left: 4px;
|
||||||
|
border-radius: 12px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
transition: all .4s;
|
||||||
|
}
|
||||||
|
.selector .entry {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 14px;
|
||||||
|
margin: 2px;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.selector .entry > div {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
text-align: right;
|
||||||
|
padding: 80px 24px;
|
||||||
|
max-width: 480px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.split .fancy {
|
||||||
|
font-size: 80px;
|
||||||
|
}
|
||||||
|
.split .pp > b {
|
||||||
|
font-size: 48px;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
.split .text {
|
||||||
|
max-width: 240px;
|
||||||
|
margin-left: auto;
|
||||||
|
opacity: .6;
|
||||||
|
}
|
||||||
|
.split .right {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screens {
|
||||||
|
display: flex;
|
||||||
|
width: calc(100% * var(--screens));
|
||||||
|
align-items: flex-start;
|
||||||
|
transition: all .4s;
|
||||||
|
}
|
||||||
|
.screen {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.screen.hidden {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings {
|
||||||
|
margin: 12px 16px 32px;
|
||||||
|
}
|
||||||
|
.setting {
|
||||||
|
background: #FFF8;
|
||||||
|
max-width: 640px;
|
||||||
|
border-radius: 16px;
|
||||||
|
margin: 8px auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background .2s, color .2s, box-shadow .2s;
|
||||||
|
}
|
||||||
|
.setting:hover {
|
||||||
|
background: #DDD8;
|
||||||
|
}
|
||||||
|
.setting .icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
.setting .desc {
|
||||||
|
opacity: .6;
|
||||||
|
}
|
||||||
|
.setting.checked {
|
||||||
|
color: #EEE;
|
||||||
|
background: #56F;
|
||||||
|
box-shadow: 2px 2px 8px #56F8;
|
||||||
}
|
}
|
||||||
147
index.html
147
index.html
@ -32,9 +32,9 @@
|
|||||||
<div class="icon">apps</div>
|
<div class="icon">apps</div>
|
||||||
<div class="text">Services</div>
|
<div class="text">Services</div>
|
||||||
</div>
|
</div>
|
||||||
<div onclick="show('page-about')">
|
<div onclick="show('page-more')">
|
||||||
<div class="icon">info</div>
|
<div class="icon">more</div>
|
||||||
<div class="text">About</div>
|
<div class="text">More</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -49,44 +49,125 @@
|
|||||||
<div class="boxes" id="applist"></div>
|
<div class="boxes" id="applist"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page hidden" id="page-about">
|
<div class="page hidden" id="page-more" style="--screens: 3">
|
||||||
<div class="back"><div class="icon"></div></div>
|
<div class="back"><div class="icon"></div></div>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="header">
|
<div class="selector">
|
||||||
<div class="icon">info</div>
|
<div class="bg"></div>
|
||||||
<div class="text">About</div>
|
<div class="entry" onclick="open_screen(this)">
|
||||||
|
<div>Security</div>
|
||||||
|
</div>
|
||||||
|
<div class="entry" onclick="open_screen(this)">
|
||||||
|
<div>Settings</div>
|
||||||
|
</div>
|
||||||
|
<div class="entry" onclick="open_screen(this)">
|
||||||
|
<div>About</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img src="img/appicon.png" class="appicon">
|
<div class="screens">
|
||||||
<div class="appname about">honey</div>
|
<div class="screen">
|
||||||
<div class="appdesc">Nice and sweet place for all your self-hosted services.</div>
|
<div class="split">
|
||||||
<div class="appdesc">Source: <a href="https://gitlab.com/dani3l0/honey" target="_blank">gitlab.com/dani3l0/honey</a></div>
|
<div class="icon fancy">shield</div>
|
||||||
<div class="boxes static">
|
<div class="right">
|
||||||
<div class="box">
|
<div class="pp"><b id="security-pp">85</b>%</div>
|
||||||
<div class="icon" style="--color: 0deg">code</div>
|
<div class="text">6 out of 7 listed services use encrypted connections</div>
|
||||||
<div>
|
</div>
|
||||||
<div class="name">Open Source</div>
|
</div>
|
||||||
<div class="desc">Code is publicly available. Download, modify, collaborate, whatever.</div>
|
<div class="boxes static">
|
||||||
|
<div class="box">
|
||||||
|
<div class="icon" style="--color: 0deg">code</div>
|
||||||
|
<div>
|
||||||
|
<div class="name">Open Source</div>
|
||||||
|
<div class="desc">Code is publicly available. Download, modify, collaborate, whatever.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="icon" style="--color: 144deg">mop</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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box">
|
<div class="screen hidden">
|
||||||
<div class="icon" style="--color: 144deg">mop</div>
|
<div class="settings">
|
||||||
<div>
|
<div class="setting checked" onclick="switch_theme()" id="setting-theme">
|
||||||
<div class="name">Simple & Clean</div>
|
<div class="icon">dark_mode</div>
|
||||||
<div class="desc">Interface is meant to be uncomplicated and pleasant in sight.</div>
|
<div class="text">
|
||||||
|
<div class="name">Dark mode</div>
|
||||||
|
<div class="desc">Whether to show dark background & wallpaper.</div>
|
||||||
|
</div>
|
||||||
|
<div class="value"></div>
|
||||||
|
</div>
|
||||||
|
<div class="setting">
|
||||||
|
<div class="icon">open_in_new</div>
|
||||||
|
<div class="text">
|
||||||
|
<div class="name">Open in new tab</div>
|
||||||
|
<div class="desc">Whether to open services in new tab by default.</div>
|
||||||
|
</div>
|
||||||
|
<div class="value"></div>
|
||||||
|
</div>
|
||||||
|
<div class="setting">
|
||||||
|
<div class="icon">restart_alt</div>
|
||||||
|
<div class="text">
|
||||||
|
<div class="name">Reset settings</div>
|
||||||
|
<div class="desc">This will reset all preferences to default.</div>
|
||||||
|
</div>
|
||||||
|
<div class="value"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box">
|
<div class="screen hidden">
|
||||||
<div class="icon" style="--color: 240deg">language</div>
|
<div style="margin: 72px 0 56px">
|
||||||
<div>
|
<img src="img/appicon.png" class="appicon">
|
||||||
<div class="name">Static</div>
|
<div class="appname about">honey</div>
|
||||||
<div class="desc">Requires no dynamic backend as it's built with plain HTML/CSS/JS.</div>
|
<div class="appdesc">Nice and sweet place for all your self-hosted services.</div>
|
||||||
|
<div class="appdesc">Source: <a href="https://gitlab.com/dani3l0/honey" target="_blank">gitlab.com/dani3l0/honey</a></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="boxes static">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="icon" style="--color: 36deg">auto_awesome</div>
|
<div class="icon" style="--color: 0deg">code</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="name">Responsive</div>
|
<div class="name">Open Source</div>
|
||||||
<div class="desc">Layout is automatically adjusted depending on device you are using.</div>
|
<div class="desc">Code is publicly available. Download, modify, collaborate, whatever.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="icon" style="--color: 144deg">mop</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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,8 +1,12 @@
|
|||||||
function get(id) {
|
function get(id) {
|
||||||
return document.getElementById(id);
|
return document.getElementById(id);
|
||||||
}
|
}
|
||||||
function for_all(class_name, func) {
|
function get_class(class_name, parent) {
|
||||||
let a = document.getElementsByClassName(class_name);
|
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++) {
|
for (let i = 0; i < a.length; i++) {
|
||||||
func(a[i]);
|
func(a[i]);
|
||||||
}
|
}
|
||||||
|
|||||||
35
js/main.js
35
js/main.js
@ -70,7 +70,9 @@ function onload() {
|
|||||||
}, 50)
|
}, 50)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let CURRENT_VIEW;
|
||||||
function show(id) {
|
function show(id) {
|
||||||
|
CURRENT_VIEW = id;
|
||||||
for_all("page", (page) => {
|
for_all("page", (page) => {
|
||||||
page.classList.add("hidden");
|
page.classList.add("hidden");
|
||||||
});
|
});
|
||||||
@ -84,7 +86,6 @@ function back() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function switch_theme(value) {
|
function switch_theme(value) {
|
||||||
back();
|
|
||||||
let is_dark = config("dark_mode") == "true";
|
let is_dark = config("dark_mode") == "true";
|
||||||
if (value === undefined) value = !is_dark;
|
if (value === undefined) value = !is_dark;
|
||||||
is_dark = value;
|
is_dark = value;
|
||||||
@ -92,11 +93,13 @@ function switch_theme(value) {
|
|||||||
get("css_dark").disabled = !is_dark;
|
get("css_dark").disabled = !is_dark;
|
||||||
let bg_box = get("background").classList;
|
let bg_box = get("background").classList;
|
||||||
if (is_dark) {
|
if (is_dark) {
|
||||||
|
get("setting-theme").classList.add("checked");
|
||||||
get("theme-indicator").innerText = "dark_mode";
|
get("theme-indicator").innerText = "dark_mode";
|
||||||
bg_box.add("dark");
|
bg_box.add("dark");
|
||||||
get_background().src = "img/background-dark.jpg";
|
get_background().src = "img/background-dark.jpg";
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
get("setting-theme").classList.remove("checked");
|
||||||
get("theme-indicator").innerText = "light_mode";
|
get("theme-indicator").innerText = "light_mode";
|
||||||
bg_box.remove("dark");
|
bg_box.remove("dark");
|
||||||
get_background().src = "img/background.jpg";
|
get_background().src = "img/background.jpg";
|
||||||
@ -110,4 +113,34 @@ function load_apps() {
|
|||||||
final += app;
|
final += app;
|
||||||
}
|
}
|
||||||
get("applist").innerHTML = final;
|
get("applist").innerHTML = final;
|
||||||
|
}
|
||||||
|
|
||||||
|
function open_screen(button) {
|
||||||
|
let parent = button.parentNode;
|
||||||
|
let cursor = parent.getElementsByClassName("bg")[0];
|
||||||
|
let items = parent.getElementsByClassName("entry");
|
||||||
|
let clicked_id = 0;
|
||||||
|
for (let i = 0; i < items.length; i++) {
|
||||||
|
if (items[i] === button) {
|
||||||
|
clicked_id = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
cursor.style.left = `${100 * clicked_id / items.length}%`;
|
||||||
|
let wrapper = parent.parentNode.parentNode;
|
||||||
|
let screens = get_class("screens", wrapper)[0];
|
||||||
|
let from_height = screens.clientHeight;
|
||||||
|
for_all("screen", (screen) => {
|
||||||
|
screen.classList.add("hidden");
|
||||||
|
}, wrapper);
|
||||||
|
screens.children[clicked_id].classList.remove("hidden");
|
||||||
|
let to_height = screens.children[clicked_id].clientHeight;
|
||||||
|
screens.style.transform = `translateX(calc(-${clicked_id}% * (100 / var(--screens))))`;
|
||||||
|
screens.style.height = `${from_height}px`;
|
||||||
|
setTimeout(() => {
|
||||||
|
screens.style.height = `${to_height}px`;
|
||||||
|
}, 10);
|
||||||
|
setTimeout(() => {
|
||||||
|
screens.style.height = null;
|
||||||
|
}, 420);
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user