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

116
css/Pages/Home.css
View File

@ -1,103 +1,105 @@
.main { .main {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.appicon { .appicon {
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;
} }
#theme-switcher i { #theme-switcher i {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
#theme-switcher i::before, #theme-switcher i::after { #theme-switcher i::before,
position: absolute; #theme-switcher i::after {
top: 50%; position: absolute;
left: 50%; top: 50%;
--hidden: 1; left: 50%;
opacity: calc(1 - var(--hidden)); --hidden: 1;
transform: translate(-50%, -50%) rotateZ(calc(var(--hidden) * 360deg)) scale(calc(1 - var(--hidden) / 2)); opacity: calc(1 - var(--hidden));
transition: transform .3s, opacity .3s; transform: translate(-50%, -50%) rotateZ(calc(var(--hidden) * 360deg))
scale(calc(1 - var(--hidden) / 2));
transition: transform 0.3s, opacity 0.3s;
} }
#theme-switcher i::before { #theme-switcher i::before {
--hidden: 0; --hidden: 0;
--dark: 0; --dark: 0;
content: "light_mode"; content: "light_mode";
} }
#theme-switcher i::after { #theme-switcher i::after {
--dark: 1; --dark: 1;
content: "dark_mode"; content: "dark_mode";
} }
.home.page { .home.page {
top: 50%; top: 90%;
left: 50%; left: 50%;
width: 100%; width: 100%;
height: auto; height: auto;
overflow: hidden; overflow: hidden;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.home.page:not(.current) { .home.page:not(.current) {
top: calc(50% - 64px); top: calc(50% - 64px);
} }
.home .wrapper { .home .wrapper {
box-shadow: none; box-shadow: none;
background: transparent; background: transparent;
backdrop-filter: none; backdrop-filter: none;
} }
.appname { .appname {
font-size: 48px; font-size: 48px;
} }
.appdesc { .appdesc {
opacity: .6; opacity: 0.6;
margin: 2px 12px; margin: 2px 12px;
} }
.buttons { .buttons {
box-shadow: 2px 2px 8px #0002; box-shadow: 2px 2px 8px #0002;
display: flex; display: flex;
margin: 16px auto 0; margin: 16px auto 0;
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
border-radius: 24px; border-radius: 24px;
max-width: 480px; max-width: 480px;
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 {
padding: 16px; padding: 16px;
margin: 2px; margin: 2px;
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 {
background: var(--hover); background: var(--hover);
} }
.buttons .text { .buttons .text {
margin-top: -2px; margin-top: -2px;
} }

160
index.html
View File

@ -1,84 +1,88 @@
<!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"
<script src="js/main.js" type="module"></script> />
<link rel="manifest" href="config/manifest.json" /> <link rel="icon" id="favicon" />
</head> <link rel="stylesheet" type="text/css" href="css/main.css" />
<body> <script src="js/main.js" type="module"></script>
<div id="background"></div> <link rel="manifest" href="config/manifest.json" />
<div class="main"> </head>
<body>
<div id="background"></div>
<div class="main">
<!-- Home page -->
<div class="page home" p="home">
<div class="wrapper">
<!-- <div class="home">
<img class="appicon" />
<div class="appname"></div>
<div class="appdesc"></div>
</div> -->
<div class="buttons">
<div id="theme-switcher">
<i>&nbsp;</i>
<div class="text">Theme</div>
</div>
<div t="services">
<i>apps</i>
<div class="text">Services</div>
</div>
<div t="more">
<i>more</i>
<div class="text">More</div>
</div>
</div>
</div>
</div>
<!-- Home page --> <!-- App list -->
<div class="page home" p="home"> <div class="page" p="services">
<div class="wrapper"> <div class="back"><i></i></div>
<div class="home"> <div class="wrapper">
<img class="appicon"> <div class="header">
<div class="appname"></div> <i>apps</i>
<div class="appdesc"></div> <div class="text">Services</div>
</div> </div>
<div class="buttons"> <div class="boxes" id="app-list"></div>
<div id="theme-switcher"> </div>
<i>&nbsp;</i> </div>
<div class="text">Theme</div>
</div>
<div t="services">
<i>apps</i>
<div class="text">Services</div>
</div>
<div t="more">
<i>more</i>
<div class="text">More</div>
</div>
</div>
</div>
</div>
<!-- App list --> <!-- More -->
<div class="page" p="services"> <div class="page" p="more">
<div class="back"><i></i></div> <div class="back"><i></i></div>
<div class="wrapper"> <div class="wrapper">
<div class="header"> <div class="subswitch">
<i>apps</i> <div>Overview</div>
<div class="text">Services</div> <div>Settings</div>
</div> </div>
<div class="boxes" id="app-list"></div> <div class="subpages">
</div> <!-- Overview -->
</div> <div>
<div class="overview">
<i>rocket_launch</i>
<div>
<div class="big"></div>
<div class="small"></div>
</div>
</div>
<div class="privacy-boxes"></div>
</div>
<!-- More --> <!-- Settings -->
<div class="page" p="more"> <div>
<div class="back"><i></i></div> <div id="no-cookies">
<div class="wrapper"> WARNING: due to blocked cookies, all settings will be lost after
<div class="subswitch"> page reload
<div>Overview</div> </div>
<div>Settings</div> <div id="settings"></div>
</div> </div>
<div class="subpages"> </div>
</div>
<!-- Overview --> </div>
<div> </div>
<div class="overview"> </body>
<i>rocket_launch</i>
<div>
<div class="big"></div>
<div class="small"></div>
</div>
</div>
<div class="privacy-boxes"></div>
</div>
<!-- Settings -->
<div>
<div id="no-cookies">WARNING: due to blocked cookies, all settings will be lost after page reload</div>
<div id="settings"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html> </html>

89
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