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

UI: Fancier load animations

Browse Source
This commit is contained in:
Daniel 2023-10-15 01:48:58 +02:00
parent 12c2e7a79c
commit dcc5632cd1
11 changed files with 121 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/Background.css
View File

@ -31,3 +31,8 @@ body.dark #background.scaled img:first-child,
body:not(.dark) #background.scaled img:last-child {
transform: none;
}
#background .notloaded {
transform: scale(1) !important;
opacity: 0 !important;
}

1
css/Flags/Flags.css
View File

@ -1,3 +1,4 @@
@import url(Loaded.css);
@import url(Dark.css);
body {

16
css/Flags/Loaded.css Normal file
View File

@ -0,0 +1,16 @@
body {
transition: opacity .3s;
}
body:not(.loaded) {
opacity: 0;
transition: none;
}
body:not(.loaded) * {
transition: none !important;
}
body:not(.loaded) .page .wrapper {
transform: scale(.8) translateY(50%);
}

78
css/PageManager.css
View File

@ -1,78 +0,0 @@
.page {
position: fixed;
top: 0;
left: 50%;
width: 100%;
max-width: 920px;
height: 100vh;
transform: translateX(-50%);
overflow-y: scroll;
transition: top .4s, opacity .4s, visibility .4s, color .3s;
}
.page:not(.current) {
top: 240px;
visibility: hidden;
opacity: 0;
}
.wrapper {
box-shadow: 2px 2px 8px #0003;
background: var(--background);
padding: 3px;
backdrop-filter: var(--blur);
border-radius: 24px;
margin: -4px 12px 16px;
text-align: center;
overflow: hidden;
min-width: 340px;
transition: background .2s;
}
.back {
box-shadow: 2px 2px 8px #0002;
position: relative;
width: 64px;
height: 64px;
border-radius: 24px;
background: var(--background);
margin: 20px;
backdrop-filter: var(--blur);
transition: background .2s;
}
.back i {
margin: 4px;
width: 56px;
height: 56px;
cursor: pointer;
border-radius: 20px;
transition: background .2s;
}
.back i:hover {
background: var(--hover);
}
.back i:after {
content: "chevron_left";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header {
display: flex;
align-items: center;
margin: 20px 20px 16px;
}
.header i {
margin-top: 1px;
margin-right: 10px;
}
.header .text {
font-size: 26px;
}

6
css/Pages/Home.css
View File

@ -10,6 +10,12 @@
width: 192px;
height: 192px;
object-fit: cover;
transition: transform .4s, opacity .4s;
}
.appicon.notloaded {
transform: scale(.8);
opacity: 0;
}
#theme-switcher i::after {

79
css/Pages/Pages.css
View File

@ -1,3 +1,82 @@
@import url(Home.css);
@import url(Services.css);
@import url(Settings.css);
.page {
position: fixed;
top: 0;
left: 50%;
width: 100%;
max-width: 920px;
height: 100vh;
transform: translateX(-50%);
overflow-y: scroll;
transition: top .4s, opacity .4s, visibility .4s, color .3s;
}
.page:not(.current) {
top: 240px;
visibility: hidden;
opacity: 0;
}
.wrapper {
box-shadow: 2px 2px 8px #0003;
background: var(--background);
padding: 3px;
backdrop-filter: var(--blur);
border-radius: 24px;
margin: -4px 12px 16px;
text-align: center;
overflow: hidden;
min-width: 340px;
transition: background .2s, transform .4s, backdrop-filter .6s;
}
.back {
box-shadow: 2px 2px 8px #0002;
position: relative;
width: 64px;
height: 64px;
border-radius: 24px;
background: var(--background);
margin: 20px;
backdrop-filter: var(--blur);
transition: background .2s;
}
.back i {
margin: 4px;
width: 56px;
height: 56px;
cursor: pointer;
border-radius: 20px;
transition: background .2s;
}
.back i:hover {
background: var(--hover);
}
.back i:after {
content: "chevron_left";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header {
display: flex;
align-items: center;
margin: 20px 20px 16px;
}
.header i {
margin-top: 1px;
margin-right: 10px;
}
.header .text {
font-size: 26px;
}

6
css/Pages/Settings.css
View File

@ -12,7 +12,7 @@
border-radius: 16px;
align-items: center;
text-align: left;
transition: background .4s;
transition: background .3s;
}
.setting i {
@ -37,7 +37,7 @@
background: #8886;
border-radius: 100px;
margin: 0 4px 0 auto;
transition: border .4s, background .4s;
transition: border .4s, background .3s;
}
.setting .switch:after {
@ -50,7 +50,7 @@
top: 50%;
border-radius: 10px;
transform: translateY(-50%);
transition: left .2s, background .4s;
transition: left .2s, background .3s;
}
.setting.checked .switch {

2
index.html
View File

@ -7,7 +7,7 @@
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/main.js" type="module"></script>
</head>
<body class="init">
<body>
<div id="background"></div>
<div class="main">

2
js/App.js
View File

@ -12,7 +12,6 @@ export default class App {
constructor(config) {
if (App.instance) return App.instance
App.instance = this
document.body.classList.remove("init")
this.config = new Config(config)
this.init()
}
@ -24,5 +23,6 @@ export default class App {
this.settings = new Settings()
showPage("home")
document.body.classList.add("loaded")
}
}

4
js/UI/Home/Home.js
View File

@ -35,6 +35,10 @@ export default class Home {
initHomeUI() {
let logo = document.getElementById("app-icon")
logo.src = this.config.get("icon")
logo.classList.add("notloaded")
logo.addEventListener("load", () => {
logo.classList.remove("notloaded")
})
let name = document.getElementById("app-name")
name.innerText = this.config.get("name")

4
js/UI/Main/Main.js
View File

@ -17,6 +17,10 @@ export default class Main {
this.backgrounds = document.getElementById("background")
for (let i = 0; i < 2; i++) {
let img = document.createElement("img")
img.classList.add("notloaded")
img.addEventListener("load", () => {
img.classList.remove("notloaded")
})
this.backgrounds.appendChild(img)
}