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() {
|
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');
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
161
assets/launcher.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -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
62
html/index_old.html
Normal 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>
|
||||||
|
|
@ -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" />'));
|
||||||
})
|
})
|
||||||
Loading…
Reference in New Issue
Block a user