mirror of
https://github.com/khairul169/honey.git
synced 2025-04-28 14:59:32 +07:00
feat: hide appicon & appname, place on bottom
This commit is contained in:
parent
dc48c53aa2
commit
9ab145d23d
@ -1,103 +1,105 @@
|
||||
.main {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.appicon {
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
object-fit: cover;
|
||||
transition: transform .4s, opacity .4s;
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
object-fit: cover;
|
||||
transition: transform 0.4s, opacity 0.4s;
|
||||
}
|
||||
|
||||
.appicon.notloaded {
|
||||
transform: scale(.8);
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#theme-switcher i {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#theme-switcher i::before, #theme-switcher i::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
--hidden: 1;
|
||||
opacity: calc(1 - var(--hidden));
|
||||
transform: translate(-50%, -50%) rotateZ(calc(var(--hidden) * 360deg)) scale(calc(1 - var(--hidden) / 2));
|
||||
transition: transform .3s, opacity .3s;
|
||||
#theme-switcher i::before,
|
||||
#theme-switcher i::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
--hidden: 1;
|
||||
opacity: calc(1 - var(--hidden));
|
||||
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 {
|
||||
--hidden: 0;
|
||||
--dark: 0;
|
||||
content: "light_mode";
|
||||
--hidden: 0;
|
||||
--dark: 0;
|
||||
content: "light_mode";
|
||||
}
|
||||
|
||||
#theme-switcher i::after {
|
||||
--dark: 1;
|
||||
content: "dark_mode";
|
||||
--dark: 1;
|
||||
content: "dark_mode";
|
||||
}
|
||||
|
||||
.home.page {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 90%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.home.page:not(.current) {
|
||||
top: calc(50% - 64px);
|
||||
top: calc(50% - 64px);
|
||||
}
|
||||
|
||||
.home .wrapper {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.appname {
|
||||
font-size: 48px;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.appdesc {
|
||||
opacity: .6;
|
||||
margin: 2px 12px;
|
||||
opacity: 0.6;
|
||||
margin: 2px 12px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
box-shadow: 2px 2px 8px #0002;
|
||||
display: flex;
|
||||
margin: 16px auto 0;
|
||||
backdrop-filter: var(--blur);
|
||||
border-radius: 24px;
|
||||
max-width: 480px;
|
||||
background: var(--background);
|
||||
padding: 2px;
|
||||
justify-content: space-between;
|
||||
transition: background .3s;
|
||||
box-shadow: 2px 2px 8px #0002;
|
||||
display: flex;
|
||||
margin: 16px auto 0;
|
||||
backdrop-filter: var(--blur);
|
||||
border-radius: 24px;
|
||||
max-width: 480px;
|
||||
background: var(--background);
|
||||
padding: 2px;
|
||||
justify-content: space-between;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.buttons > div {
|
||||
padding: 16px;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
transition: background .2s;
|
||||
padding: 16px;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.buttons > div:hover {
|
||||
background: var(--hover);
|
||||
background: var(--hover);
|
||||
}
|
||||
|
||||
.buttons .text {
|
||||
margin-top: -2px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
160
index.html
160
index.html
@ -1,84 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" 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>
|
||||
<link rel="manifest" href="config/manifest.json" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="background"></div>
|
||||
<div class="main">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
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>
|
||||
<link rel="manifest" href="config/manifest.json" />
|
||||
</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> </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 -->
|
||||
<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> </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>
|
||||
<!-- App list -->
|
||||
<div class="page" p="services">
|
||||
<div class="back"><i></i></div>
|
||||
<div class="wrapper">
|
||||
<div class="header">
|
||||
<i>apps</i>
|
||||
<div class="text">Services</div>
|
||||
</div>
|
||||
<div class="boxes" id="app-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App list -->
|
||||
<div class="page" p="services">
|
||||
<div class="back"><i></i></div>
|
||||
<div class="wrapper">
|
||||
<div class="header">
|
||||
<i>apps</i>
|
||||
<div class="text">Services</div>
|
||||
</div>
|
||||
<div class="boxes" id="app-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- More -->
|
||||
<div class="page" p="more">
|
||||
<div class="back"><i></i></div>
|
||||
<div class="wrapper">
|
||||
<div class="subswitch">
|
||||
<div>Overview</div>
|
||||
<div>Settings</div>
|
||||
</div>
|
||||
<div class="subpages">
|
||||
<!-- Overview -->
|
||||
<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 -->
|
||||
<div class="page" p="more">
|
||||
<div class="back"><i></i></div>
|
||||
<div class="wrapper">
|
||||
<div class="subswitch">
|
||||
<div>Overview</div>
|
||||
<div>Settings</div>
|
||||
</div>
|
||||
<div class="subpages">
|
||||
|
||||
<!-- Overview -->
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
@ -1,53 +1,52 @@
|
||||
import App from "../../App"
|
||||
import { showPage } from "../../Utils/DOMUtils"
|
||||
|
||||
import App from "../../App";
|
||||
import { showPage } from "../../Utils/DOMUtils";
|
||||
|
||||
export default class Home {
|
||||
constructor() {
|
||||
this.app = new App()
|
||||
this.config = this.app.config
|
||||
this.init()
|
||||
}
|
||||
constructor() {
|
||||
this.app = new App();
|
||||
this.config = this.app.config;
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.initButtons()
|
||||
this.initHomeUI()
|
||||
this.initBackButtons()
|
||||
}
|
||||
init() {
|
||||
this.initButtons();
|
||||
// this.initHomeUI();
|
||||
this.initBackButtons();
|
||||
}
|
||||
|
||||
initButtons() {
|
||||
let buttons = document.querySelector(".buttons").children
|
||||
for (let button of buttons) {
|
||||
let target = button.getAttribute("t")
|
||||
if (target) {
|
||||
button.addEventListener("click", () => {
|
||||
showPage(target)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
initButtons() {
|
||||
let buttons = document.querySelector(".buttons").children;
|
||||
for (let button of buttons) {
|
||||
let target = button.getAttribute("t");
|
||||
if (target) {
|
||||
button.addEventListener("click", () => {
|
||||
showPage(target);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
initBackButtons() {
|
||||
let backButtons = document.querySelectorAll(".back")
|
||||
for (let button of backButtons) {
|
||||
button.addEventListener("click", () => {
|
||||
showPage("home")
|
||||
})
|
||||
}
|
||||
}
|
||||
initBackButtons() {
|
||||
let backButtons = document.querySelectorAll(".back");
|
||||
for (let button of backButtons) {
|
||||
button.addEventListener("click", () => {
|
||||
showPage("home");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
initHomeUI() {
|
||||
let logo = document.querySelector(".appicon")
|
||||
logo.src = this.config.get("icon")
|
||||
logo.classList.add("notloaded")
|
||||
logo.addEventListener("load", () => {
|
||||
logo.classList.remove("notloaded")
|
||||
})
|
||||
initHomeUI() {
|
||||
let logo = document.querySelector(".appicon");
|
||||
logo.src = this.config.get("icon");
|
||||
logo.classList.add("notloaded");
|
||||
logo.addEventListener("load", () => {
|
||||
logo.classList.remove("notloaded");
|
||||
});
|
||||
|
||||
let name = document.querySelector(".appname")
|
||||
name.innerText = this.config.get("name")
|
||||
let name = document.querySelector(".appname");
|
||||
name.innerText = this.config.get("name");
|
||||
|
||||
let desc = document.querySelector(".appdesc")
|
||||
desc.innerText = this.config.get("desc")
|
||||
}
|
||||
}
|
||||
let desc = document.querySelector(".appdesc");
|
||||
desc.innerText = this.config.get("desc");
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
"name": "Eclair",
|
||||
"desc": "Nice and sweet place for all your self-hosted services.",
|
||||
"icon": "img/icon.png",
|
||||
"wallpaper": "img/background.jpg",
|
||||
"wallpaper_dark": "img/background-dark.jpg",
|
||||
"wallpaper": "img/gdt_xv_ma_yaauhi9_hUoR1tSITv.jpeg",
|
||||
"wallpaper_dark": "img/gdt_xv_ma_yaauhi9_hUoR1tSITv.jpeg",
|
||||
"dark_mode": true,
|
||||
"open_new_tab": false,
|
||||
"blur": true,
|
||||
|
||||
BIN
public/img/gdt_xv_ma_yaauhi9_hUoR1tSITv.jpeg
Normal file
BIN
public/img/gdt_xv_ma_yaauhi9_hUoR1tSITv.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 592 KiB |
Loading…
x
Reference in New Issue
Block a user