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 @@ <!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> 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