From 3edf2ce8a3ece907bcd538f66dd6d52d4a9369b1 Mon Sep 17 00:00:00 2001 From: HorizonCode Date: Mon, 17 Oct 2022 12:47:47 +0200 Subject: [PATCH] new design rollout, function still not given --- app.js | 2 +- appInfo.js | 2 +- assets/launcher.css | 161 ++++++++++++++++++++++++++++++++++++++++++++ html/index.html | 83 ++++++++++++++++------- html/index_old.html | 62 +++++++++++++++++ preload/preload.js | 29 +++++++- 6 files changed, 311 insertions(+), 28 deletions(-) create mode 100644 assets/launcher.css create mode 100644 html/index_old.html diff --git a/app.js b/app.js index b0df21e..703d0bc 100644 --- a/app.js +++ b/app.js @@ -121,7 +121,7 @@ async function doUpdateCheck(window) { function createWindow() { // Create the browser window. - const win = windowManager.createWindow(520, 350); + const win = windowManager.createWindow(700, 420); win.loadFile('./html/index.html'); diff --git a/appInfo.js b/appInfo.js index 072057d..608cb5b 100644 --- a/appInfo.js +++ b/appInfo.js @@ -1,4 +1,4 @@ const appName = "EZPPLauncher" -const appVersion = "1.0.0"; +const appVersion = "1.1.0"; module.exports = { appName, appVersion }; \ No newline at end of file diff --git a/assets/launcher.css b/assets/launcher.css new file mode 100644 index 0000000..5f486bb --- /dev/null +++ b/assets/launcher.css @@ -0,0 +1,161 @@ +@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); + +:root { + --main-accent: 335deg; +} + +* { + font-family: 'Exo 2', 'Roboto' !important; +} + +.sections { + display: flex; + flex-flow: column; +} + +.app-name { + font-size: 40px; + font-weight: 500; + text-shadow: 0 0 15px rgba(255, 255, 255, 0.37); +} + +.launcher-window { + width: 100%; +} + +.login-section { + margin-top: 35px; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; +} + +.folder-section { + margin-top: 80px; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + color: #aaa; + font-weight: 500; +} + +.folder-action { + font-style: italic; + cursor: pointer; + width: fit-content; + line-height: .9; +} + +.launch-section { + width: 100%; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; +} + +.btn.btn-launch { + margin-top: 10px; + width: 300px; + font-size: 23px; + text-transform: none; +} + +.account-section { + display: flex; + align-items: center; + gap: 20px; +} + +.user-info { + text-align: start; + display: flex; + flex-flow: column; + justify-content: center; + align-content: center; + overflow: hidden; + text-overflow: ellipsis; +} + +.user-info .welcome-text { + font-size: 31px; + letter-spacing: .02rem; + height: 30px; + line-height: .8; + text-shadow: 0 0 10px rgba(0, 0, 0, 0.349); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.user-info .account-action { + font-size: 21px; + letter-spacing: .05rem; + font-weight: 500; + font-style: italic; + color: #aaa; + text-shadow: 0 0 10px rgba(0, 0, 0, 0.349); + cursor: pointer; + line-height: 1.2; + width: fit-content; +} + +#user-img { + border-radius: .2rem; + width: 80px; + border: 3px solid white; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.349); +} + +.form-outline .form-control:focus~.form-notch .form-notch-leading { + border-color: hsl(var(--main-accent), 93%, 48%); + box-shadow: -1px 0 0 0 hsl(var(--main-accent), 93%, 48%), 0 1px 0 0 hsl(var(--main-accent), 93%, 48%), 0 -1px 0 0 hsl(var(--main-accent), 93%, 48%); +} + +.form-outline .form-control:focus~.form-notch .form-notch-middle { + border-color: hsl(var(--main-accent), 93%, 48%); + box-shadow: 0 1px 0 0 hsl(var(--main-accent), 93%, 48%); + border-top: 1px solid transparent; +} + +.form-outline .form-control:focus~.form-notch .form-notch-trailing { + border-color: hsl(var(--main-accent), 93%, 48%); + box-shadow: 1px 0 0 0 hsl(var(--main-accent), 93%, 48%), 0 -1px 0 0 hsl(var(--main-accent), 93%, 48%), 0 1px 0 0 hsl(var(--main-accent), 93%, 48%); +} + +.form-outline .form-control:focus~.form-label { + color: hsl(var(--main-accent), 93%, 48%); +} + +.btn-accent, +.btn-accent:active { + background: hsl(var(--main-accent), 93%, 48%); + color: #fff; +} + +.btn-accent:hover { + background: hsl(var(--main-accent), 93%, 42%); + color: #fff; +} + +.btn-grey, +.btn-grey:active { + background: #727272; + color: #fff; +} + +.btn-grey:hover { + background: #626262; + color: #fff; +} + +.btn-grouped { + display: flex; + gap: 50px; +} + +.clickable { + cursor: pointer; +} \ No newline at end of file diff --git a/html/index.html b/html/index.html index c893c02..130cc96 100644 --- a/html/index.html +++ b/html/index.html @@ -7,6 +7,7 @@ + + + + +
+
+
+
+
+
+
+
+
+
+
+ EZPPLauncher +
+
+ Launch osu! with connection to the EZPPFarm server +
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/preload/preload.js b/preload/preload.js index 240c164..cd7e80e 100644 --- a/preload/preload.js +++ b/preload/preload.js @@ -14,10 +14,24 @@ window.addEventListener('DOMContentLoaded', () => { titlebar.updateTitle(`${appInfo.appName} ${appInfo.appVersion}`); const $ = require('jquery'); + const axios = require('axios').default; const Swal = require('sweetalert2'); - let currentState; + const loggedIn = false; + $('#account-action').on('click', () => { + if (!loggedIn) { + changePage('login'); + } + }); + + $('#action-cancel').on('click', () => { + if (!loggedIn) { + changePage('launch'); + } + }); + + let currentState; $("#launch-btn").on('click', async () => { switch (currentState) { case "up-to-date": @@ -103,6 +117,19 @@ window.addEventListener('DOMContentLoaded', () => { } }) + function changePage(page) { + switch (page) { + case "login": + $("#launch-page").hide(); + $("#login-page").fadeIn(350); + break; + case "launch": + $("#login-page").hide(); + $("#launch-page").fadeIn(350); + break; + } + } + // workaround for the dark theme $('head').append($('')); }) \ No newline at end of file