EZPPFarm/EZPPLauncher
2
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases 14 Activity

new design rollout, function still not given

Browse Source
This commit is contained in:
HorizonCode 2022-10-17 12:47:47 +02:00
parent 2b12654825
commit 3edf2ce8a3
6 changed files with 311 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.js
View File

@ -121,7 +121,7 @@ async function doUpdateCheck(window) {
function createWindow() { function createWindow() {
// Create the browser window. // Create the browser window.
const win = windowManager.createWindow(520, 350); const win = windowManager.createWindow(700, 420);
win.loadFile('./html/index.html'); win.loadFile('./html/index.html');

2
appInfo.js
View File

@ -1,4 +1,4 @@
const appName = "EZPPLauncher" const appName = "EZPPLauncher"
const appVersion = "1.0.0"; const appVersion = "1.1.0";
module.exports = { appName, appVersion }; module.exports = { appName, appVersion };

161
assets/launcher.css Normal file
View File

@ -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;
}

83
html/index.html
View File

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="../assets/logo.png" /> <link rel="icon" type="image/png" href="../assets/logo.png" />
<link href="../assets/mdb.min.css" rel="stylesheet" /> <link href="../assets/mdb.min.css" rel="stylesheet" />
<link href="../assets/launcher.css" rel="stylesheet" />
<style> <style>
* { * {
user-select: none; user-select: none;
@ -19,36 +20,68 @@
oncontextmenu="return false;"> oncontextmenu="return false;">
<main> <main>
<div class="noselect"> <div class="noselect">
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center text-lg-end d-flex align-items-center justify-content-center" <div class="position-relative overflow-hidden p-1 w-100 text-center text-lg-end d-flex align-items-center justify-content-center"
style="border-radius: 0.5em;"> style="border-radius: 0.5em;">
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3"> <div class="launcher-window position-relative overflow-hidden">
<div class="container py-2 h-100"> <div class="container px-1 py-2 w-100 mw-100 h-100">
<div class="row d-flex justify-content-center align-items-center h-100"> <div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10"> <div id="launch-page" class="sections col col-xl-10">
<div class="card" style="border-radius: 1rem;"> <div class="account-section">
<div class="row g-0"> <div class="user-image">
<div class="card-body p-4 p-lg-5 text-black"> <img id="user-img" src="https://a.ez-pp.farm/0">
<div class="d-flex align-items-center mb-2 pb-1 text-white"> </div>
<span class="h1 fw-bold mb-0">EZPPLauncher</span> <div class="user-info">
</div> <div class="welcome-text" id="welcome-text">
<h5 class="fw-lighter fs-5 mb-3 pb-3 text-white text-start" Nice to see you!
style="letter-spacing: 1px;"> </div>
Launch osu! with connection to the EZPPFarm server <div class="account-action" id="account-action">
</h5> Click to login
<div class="pt-1 mb-4">
<button id="launch-btn" class="btn btn-primary btn-lg btn-block"
type="button" style="background-color:#d6016f" disabled>Looking for
updates...</button>
</div>
<button class="btn btn-dark btn-sm float-start" id="account-btn" disabled>
set account
</button>
<button class="btn btn-dark btn-sm float-end" id="folder-btn">
set osu! directory
</button>
</div> </div>
</div> </div>
</div> </div>
<div class="launch-section">
<div class="server-logo">
<img src="../assets/logo.png" height="120">
</div>
<div class="launch-button">
<button class="btn btn-lg btn-launch btn-accent">Launch</button>
</div>
</div>
<div class="folder-section">
<div class="folder-location">
Current osu! directory: C:\Users\Thomas\AppData\Local\osu!
</div>
<div class="folder-action">
Not right?
</div>
</div>
</div>
<div id="login-page" class="sections col col-xl-10" style="display: none;">
<div class="launch-section flex-row">
<div class="server-logo">
<img src="../assets/logo.png" height="120">
</div>
<div class="app-name">EZPPLauncher</div>
</div>
<div class="login-section">
<div class="form-outline mb-3 w-50">
<input type="text" id="username" class="form-control form-control-lg" />
<label class="form-label" for="username">Username</label>
</div>
<div class="form-outline mb-3 w-50">
<input type="password" id="password" class="form-control form-control-lg" />
<label class="form-label" for="password">Password</label>
</div>
<div class="pt-1 mb-4">
<div class="btn-grouped">
<button id="action-cancel" class="btn btn-grey btn-lg"
type="button">Cancel</button>
<button id="login" class="btn btn-accent btn-lg"
type="button">Login</button>
</div>
</div>
<p class="text-muted clickable" id="register">Don't have an account?</p>
</div>
</div> </div>
</div> </div>
</div> </div>

62
html/index_old.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>EZPPLauncher</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="../assets/logo.png" />
<link href="../assets/mdb.min.css" rel="stylesheet" />
<style>
* {
user-select: none;
-webkit-user-select: none;
}
</style>
</head>
<body class="fixed-sn mdb-skin-custom" data-spy="scroll" data-target="#scrollspy" data-offset="15"
oncontextmenu="return false;">
<main>
<div class="noselect">
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center text-lg-end d-flex align-items-center justify-content-center"
style="border-radius: 0.5em;">
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3">
<div class="container py-2 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10">
<div class="card" style="border-radius: 1rem;">
<div class="row g-0">
<div class="card-body p-4 p-lg-5 text-black">
<div class="d-flex align-items-center mb-2 pb-1 text-white">
<span class="h1 fw-bold mb-0">EZPPLauncher</span>
</div>
<h5 class="fw-lighter fs-5 mb-3 pb-3 text-white text-start"
style="letter-spacing: 1px;">
Launch osu! with connection to the EZPPFarm server
</h5>
<div class="pt-1 mb-4">
<button id="launch-btn" class="btn btn-primary btn-lg btn-block"
type="button" style="background-color:#d6016f" disabled>Looking for
updates...</button>
</div>
<button class="btn btn-dark btn-sm float-start" id="account-btn" disabled>
set account
</button>
<button class="btn btn-dark btn-sm float-end" id="folder-btn">
set osu! directory
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
<script type="text/javascript" src="../assets/mdb.min.js"></script>
</html>

29
preload/preload.js
View File

@ -14,10 +14,24 @@ window.addEventListener('DOMContentLoaded', () => {
titlebar.updateTitle(`${appInfo.appName} ${appInfo.appVersion}`); titlebar.updateTitle(`${appInfo.appName} ${appInfo.appVersion}`);
const $ = require('jquery'); const $ = require('jquery');
const axios = require('axios').default;
const Swal = require('sweetalert2'); 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 () => { $("#launch-btn").on('click', async () => {
switch (currentState) { switch (currentState) {
case "up-to-date": 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 // workaround for the dark theme
$('head').append($('<link href="../assets/sweetalert2.dark.css" rel="stylesheet" />')); $('head').append($('<link href="../assets/sweetalert2.dark.css" rel="stylesheet" />'));
}) })