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

feat: hide appicon & appname, place on bottom

Browse Source
This commit is contained in:
Khairul Hidayat 2024-08-11 03:16:31 +07:00
parent dc48c53aa2
commit 9ab145d23d
5 changed files with 187 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/Pages/Home.css
View File

@ -10,11 +10,11 @@
width: 192px; width: 192px;
height: 192px; height: 192px;
object-fit: cover; object-fit: cover;
transition: transform .4s, opacity .4s; transition: transform 0.4s, opacity 0.4s;
} }
.appicon.notloaded { .appicon.notloaded {
transform: scale(.8); transform: scale(0.8);
opacity: 0; opacity: 0;
} }
@ -23,14 +23,16 @@
overflow: hidden; overflow: hidden;
} }
#theme-switcher i::before, #theme-switcher i::after { #theme-switcher i::before,
#theme-switcher i::after {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
--hidden: 1; --hidden: 1;
opacity: calc(1 - var(--hidden)); opacity: calc(1 - var(--hidden));
transform: translate(-50%, -50%) rotateZ(calc(var(--hidden) * 360deg)) scale(calc(1 - var(--hidden) / 2)); transform: translate(-50%, -50%) rotateZ(calc(var(--hidden) * 360deg))
transition: transform .3s, opacity .3s; scale(calc(1 - var(--hidden) / 2));
transition: transform 0.3s, opacity 0.3s;
} }
#theme-switcher i::before { #theme-switcher i::before {
@ -45,7 +47,7 @@
} }
.home.page { .home.page {
top: 50%; top: 90%;
left: 50%; left: 50%;
width: 100%; width: 100%;
height: auto; height: auto;
@ -68,7 +70,7 @@
} }
.appdesc { .appdesc {
opacity: .6; opacity: 0.6;
margin: 2px 12px; margin: 2px 12px;
} }
@ -82,7 +84,7 @@
background: var(--background); background: var(--background);
padding: 2px; padding: 2px;
justify-content: space-between; justify-content: space-between;
transition: background .3s; transition: background 0.3s;
} }
.buttons > div { .buttons > div {
@ -91,7 +93,7 @@
cursor: pointer; cursor: pointer;
border-radius: 20px; border-radius: 20px;
width: 100%; width: 100%;
transition: background .2s; transition: background 0.2s;
} }
.buttons > div:hover { .buttons > div:hover {

24
index.html
View File

@ -1,25 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta
<link rel="icon" id="favicon"> name="viewport"
<link rel="stylesheet" type="text/css" href="css/main.css"> content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<link rel="icon" id="favicon" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/main.js" type="module"></script> <script src="js/main.js" type="module"></script>
<link rel="manifest" href="config/manifest.json" /> <link rel="manifest" href="config/manifest.json" />
</head> </head>
<body> <body>
<div id="background"></div> <div id="background"></div>
<div class="main"> <div class="main">
<!-- Home page --> <!-- Home page -->
<div class="page home" p="home"> <div class="page home" p="home">
<div class="wrapper"> <div class="wrapper">
<div class="home"> <!-- <div class="home">
<img class="appicon"> <img class="appicon" />
<div class="appname"></div> <div class="appname"></div>
<div class="appdesc"></div> <div class="appdesc"></div>
</div> </div> -->
<div class="buttons"> <div class="buttons">
<div id="theme-switcher"> <div id="theme-switcher">
<i>&nbsp;</i> <i>&nbsp;</i>
@ -58,7 +60,6 @@
<div>Settings</div> <div>Settings</div>
</div> </div>
<div class="subpages"> <div class="subpages">
<!-- Overview --> <!-- Overview -->
<div> <div>
<div class="overview"> <div class="overview">
@ -73,7 +74,10 @@
<!-- Settings --> <!-- Settings -->
<div> <div>
<div id="no-cookies">WARNING: due to blocked cookies, all settings will be lost after page reload</div> <div id="no-cookies">
WARNING: due to blocked cookies, all settings will be lost after
page reload
</div>
<div id="settings"></div> <div id="settings"></div>
</div> </div>
</div> </div>

49
js/UI/Home/Home.js
View File

@ -1,53 +1,52 @@
import App from "../../App" import App from "../../App";
import { showPage } from "../../Utils/DOMUtils" import { showPage } from "../../Utils/DOMUtils";
export default class Home { export default class Home {
constructor() { constructor() {
this.app = new App() this.app = new App();
this.config = this.app.config this.config = this.app.config;
this.init() this.init();
} }
init() { init() {
this.initButtons() this.initButtons();
this.initHomeUI() // this.initHomeUI();
this.initBackButtons() this.initBackButtons();
} }
initButtons() { initButtons() {
let buttons = document.querySelector(".buttons").children let buttons = document.querySelector(".buttons").children;
for (let button of buttons) { for (let button of buttons) {
let target = button.getAttribute("t") let target = button.getAttribute("t");
if (target) { if (target) {
button.addEventListener("click", () => { button.addEventListener("click", () => {
showPage(target) showPage(target);
}) });
} }
} }
} }
initBackButtons() { initBackButtons() {
let backButtons = document.querySelectorAll(".back") let backButtons = document.querySelectorAll(".back");
for (let button of backButtons) { for (let button of backButtons) {
button.addEventListener("click", () => { button.addEventListener("click", () => {
showPage("home") showPage("home");
}) });
} }
} }
initHomeUI() { initHomeUI() {
let logo = document.querySelector(".appicon") let logo = document.querySelector(".appicon");
logo.src = this.config.get("icon") logo.src = this.config.get("icon");
logo.classList.add("notloaded") logo.classList.add("notloaded");
logo.addEventListener("load", () => { logo.addEventListener("load", () => {
logo.classList.remove("notloaded") logo.classList.remove("notloaded");
}) });
let name = document.querySelector(".appname") let name = document.querySelector(".appname");
name.innerText = this.config.get("name") name.innerText = this.config.get("name");
let desc = document.querySelector(".appdesc") let desc = document.querySelector(".appdesc");
desc.innerText = this.config.get("desc") desc.innerText = this.config.get("desc");
} }
} }

4
public/config/config.json
View File

@ -3,8 +3,8 @@
"name": "Eclair", "name": "Eclair",
"desc": "Nice and sweet place for all your self-hosted services.", "desc": "Nice and sweet place for all your self-hosted services.",
"icon": "img/icon.png", "icon": "img/icon.png",
"wallpaper": "img/background.jpg", "wallpaper": "img/gdt_xv_ma_yaauhi9_hUoR1tSITv.jpeg",
"wallpaper_dark": "img/background-dark.jpg", "wallpaper_dark": "img/gdt_xv_ma_yaauhi9_hUoR1tSITv.jpeg",
"dark_mode": true, "dark_mode": true,
"open_new_tab": false, "open_new_tab": false,
"blur": true, "blur": true,

BIN
public/img/gdt_xv_ma_yaauhi9_hUoR1tSITv.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 592 KiB