diff --git a/css/Pages/Home.css b/css/Pages/Home.css index 71c0eac..e764270 100644 --- a/css/Pages/Home.css +++ b/css/Pages/Home.css @@ -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; } diff --git a/index.html b/index.html index c31e7a3..2a9a592 100644 --- a/index.html +++ b/index.html @@ -1,84 +1,88 @@ - - - - - - - - - -
-
+ + + + + + + + + +
+
+ +
+
+ +
+
+   +
Theme
+
+
+ apps +
Services
+
+
+ more +
More
+
+
+
+
- -
-
-
- -
-
-
-
-
-   -
Theme
-
-
- apps -
Services
-
-
- more -
More
-
-
-
-
+ +
+
+
+
+ apps +
Services
+
+
+
+
- -
-
-
-
- apps -
Services
-
-
-
-
+ +
+
+
+
+
Overview
+
Settings
+
+
+ +
+
+ rocket_launch +
+
+
+
+
+
+
- -
-
-
-
-
Overview
-
Settings
-
-
- - -
-
- rocket_launch -
-
-
-
-
-
-
- - -
-
WARNING: due to blocked cookies, all settings will be lost after page reload
-
-
-
-
-
-
- + +
+
+ WARNING: due to blocked cookies, all settings will be lost after + page reload +
+
+
+
+
+
+
+ diff --git a/js/UI/Home/Home.js b/js/UI/Home/Home.js index 53f53c0..5b62413 100644 --- a/js/UI/Home/Home.js +++ b/js/UI/Home/Home.js @@ -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") - } -} \ No newline at end of file + let desc = document.querySelector(".appdesc"); + desc.innerText = this.config.get("desc"); + } +} diff --git a/public/config/config.json b/public/config/config.json index 585da43..56f3a8b 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -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, diff --git a/public/img/gdt_xv_ma_yaauhi9_hUoR1tSITv.jpeg b/public/img/gdt_xv_ma_yaauhi9_hUoR1tSITv.jpeg new file mode 100644 index 0000000..fa4e4f5 Binary files /dev/null and b/public/img/gdt_xv_ma_yaauhi9_hUoR1tSITv.jpeg differ