new design rollout, function still not given
This commit is contained in:
parent
2b12654825
commit
3edf2ce8a3
2
app.js
2
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');
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
const appName = "EZPPLauncher"
|
||||
const appVersion = "1.0.0";
|
||||
const appVersion = "1.1.0";
|
||||
|
||||
module.exports = { appName, appVersion };
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
<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" />
|
||||
<link href="../assets/launcher.css" rel="stylesheet" />
|
||||
<style>
|
||||
* {
|
||||
user-select: none;
|
||||
|
|
@ -19,36 +20,68 @@
|
|||
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"
|
||||
<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;">
|
||||
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3">
|
||||
<div class="container py-2 h-100">
|
||||
<div class="launcher-window position-relative overflow-hidden">
|
||||
<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="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 id="launch-page" class="sections col col-xl-10">
|
||||
<div class="account-section">
|
||||
<div class="user-image">
|
||||
<img id="user-img" src="https://a.ez-pp.farm/0">
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="welcome-text" id="welcome-text">
|
||||
Nice to see you!
|
||||
</div>
|
||||
<div class="account-action" id="account-action">
|
||||
Click to login
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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($('<link href="../assets/sweetalert2.dark.css" rel="stylesheet" />'));
|
||||
})
|
||||
Loading…
Reference in New Issue