mirror of
https://github.com/AltarikMC/Launcher
synced 2024-11-21 06:09:51 +01:00
Refactored project + added login to mojang + launch can start the modded game + added a font
This commit is contained in:
parent
44586dd303
commit
09ee3e175e
2
.gitignore
vendored
2
.gitignore
vendored
@ -1 +1,3 @@
|
|||||||
node_modules/
|
node_modules/
|
||||||
|
|
||||||
|
out/
|
@ -1 +1,7 @@
|
|||||||
# Launcher
|
# Launcher
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
<https://www.npmjs.com/package/electron>
|
||||||
|
<https://www.npmjs.com/package/minecraft-launcher-core>
|
||||||
|
|
||||||
|
BIN
include/Roboto-Regular.ttf
Normal file
BIN
include/Roboto-Regular.ttf
Normal file
Binary file not shown.
16
include/index.js
Normal file
16
include/index.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
minMem= "2G"
|
||||||
|
maxMem = "4G"
|
||||||
|
|
||||||
|
|
||||||
|
ipcRenderer.on("nick", (event, args) => {
|
||||||
|
console.log(args)
|
||||||
|
document.querySelector("#nick-span").innerHTML = args.name
|
||||||
|
})
|
||||||
|
|
||||||
|
document.querySelector('#launch-btn').addEventListener("click", e => {
|
||||||
|
ipcRenderer.send('launch', {
|
||||||
|
minMem: minMem,
|
||||||
|
maxMem: maxMem
|
||||||
|
})
|
||||||
|
document.querySelector('#launch-btn').disabled = true
|
||||||
|
})
|
18
include/login.js
Normal file
18
include/login.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
user = document.querySelector('#nickname')
|
||||||
|
password = document.querySelector('#password')
|
||||||
|
|
||||||
|
document.querySelector('#login-form').addEventListener("submit", (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if(user.value){
|
||||||
|
ipcRenderer.send("login", {
|
||||||
|
user: user.value,
|
||||||
|
pass: password.value
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
ipcRenderer.send("notification", {
|
||||||
|
title: "error",
|
||||||
|
body: "Veuillez entrer des identifiants"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
42
include/menubar.js
Normal file
42
include/menubar.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
const {remote} = require('electron')
|
||||||
|
const {Menu, BrowserWindow, MenuItem, shell} = remote
|
||||||
|
|
||||||
|
function getCurrentWindow() {
|
||||||
|
return remote.getCurrentWindow()
|
||||||
|
}
|
||||||
|
|
||||||
|
function minimizeWindow(browserWindow = getCurrentWindow()) {
|
||||||
|
if (browserWindow.minimizable) {
|
||||||
|
// browserWindow.isMinimizable() for old electron versions
|
||||||
|
browserWindow.minimize()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function unmaximizeWindow(browserWindow = getCurrentWindow()) {
|
||||||
|
browserWindow.unmaximize()
|
||||||
|
}
|
||||||
|
|
||||||
|
function maxUnmaxWindow(browserWindow = getCurrentWindow()) {
|
||||||
|
if (browserWindow.isMaximized()) {
|
||||||
|
browserWindow.unmaximize()
|
||||||
|
} else {
|
||||||
|
browserWindow.maximize()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeWindow(browserWindow = getCurrentWindow()) {
|
||||||
|
browserWindow.close()
|
||||||
|
}
|
||||||
|
|
||||||
|
function isWindowMaximized(browserWindow = getCurrentWindow()) {
|
||||||
|
return browserWindow.isMaximized()
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
getCurrentWindow,
|
||||||
|
minimizeWindow,
|
||||||
|
unmaximizeWindow,
|
||||||
|
maxUnmaxWindow,
|
||||||
|
isWindowMaximized,
|
||||||
|
closeWindow,
|
||||||
|
}
|
69
index.css
Normal file
69
index.css
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
background: white;
|
||||||
|
margin:0;
|
||||||
|
height:100%;
|
||||||
|
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content{
|
||||||
|
display: flex;
|
||||||
|
height:100%;
|
||||||
|
padding-top:28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar{
|
||||||
|
flex:20%;
|
||||||
|
background-color: rgb(43, 43, 43);
|
||||||
|
color: white;
|
||||||
|
padding:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main{
|
||||||
|
flex: 80%;
|
||||||
|
background-color: rgb(216, 216, 216);
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-img {
|
||||||
|
height:100%;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-block-end: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#launch{
|
||||||
|
position: absolute;
|
||||||
|
bottom:0;
|
||||||
|
right:0;
|
||||||
|
width:80%;
|
||||||
|
height:70px;
|
||||||
|
background-color:rgb(49, 49, 49);
|
||||||
|
}
|
||||||
|
|
||||||
|
#launch-btn {
|
||||||
|
position: relative;
|
||||||
|
top: -25px;
|
||||||
|
left:50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 20%;
|
||||||
|
max-width:200px;
|
||||||
|
height:50px;
|
||||||
|
padding:10px;
|
||||||
|
text-align: center;
|
||||||
|
color:white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size:1.2rem;
|
||||||
|
background-color: green;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
17
index.html
17
index.html
@ -4,7 +4,8 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Launcher Projet Secret</title>
|
<title>Launcher Projet Secret</title>
|
||||||
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
||||||
<link href="style.css" rel="stylesheet" />
|
<link href="index.css" rel="stylesheet" />
|
||||||
|
<link href="menubar.css" rel="stylesheet" />
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -18,15 +19,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="content">
|
<div id="content">
|
||||||
<div id="sidebar">
|
<div id="sidebar">
|
||||||
<h3>Connexion</h3>
|
<h3>Compte</h3>
|
||||||
<hr>
|
<hr>
|
||||||
<form style="display:flex;align-items: center;flex-direction: column;">
|
<span id="nick-span"></span>
|
||||||
<div><label for="nickname">Pseudonyme:</label><br />
|
<h3>Modifier la configuration</h3>
|
||||||
<input type="text" name="nickname" id="nickname"><br /></div>
|
<hr>
|
||||||
<div><label for="password">Mot de passe:</label><br />
|
Contenu
|
||||||
<input type="password" name="password" id="password"><br /></div>
|
|
||||||
<input type="submit" value="Se connecter">
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<img id="main-img" src="./maxresdefault.jpg">
|
<img id="main-img" src="./maxresdefault.jpg">
|
||||||
@ -37,5 +35,6 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
|
<script src="include/index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
54
login.css
Normal file
54
login.css
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Roboto";
|
||||||
|
src: url("./include/Roboto-Regular.ttf") format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
html{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
background: rgb(48, 48, 48);
|
||||||
|
margin:0;
|
||||||
|
height:100%;
|
||||||
|
font-family: "Roboto";
|
||||||
|
}
|
||||||
|
|
||||||
|
#content{
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login {
|
||||||
|
position:relative;
|
||||||
|
width: 300px;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: white;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login input[type="text"],
|
||||||
|
#login input[type="password"]{
|
||||||
|
width:100%;
|
||||||
|
padding: 5px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login input[type="submit"] {
|
||||||
|
padding: 5px;
|
||||||
|
width: 70%;
|
||||||
|
height: 25px;
|
||||||
|
margin: 10px 15%;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid lightgrey;
|
||||||
|
transition: background 0.1s linear, border 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login h3 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
37
login.html
Normal file
37
login.html
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Launcher Projet Secret</title>
|
||||||
|
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
||||||
|
<link href="login.css" rel="stylesheet" />
|
||||||
|
<link href="menubar.css" rel="stylesheet" />
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="menubar">
|
||||||
|
<ul class="left">
|
||||||
|
</ul>
|
||||||
|
<ul class="right">
|
||||||
|
<!-- Mettre ce code en ligne pour éviter que chrome ne met un espace automatiquement entre les éléments -->
|
||||||
|
<li id="minimize-btn"><i class="material-icons">minimize</i></li><li id="max-unmax-btn"><i class="material-icons">crop_square</i></li><li id="close-btn"><i class="material-icons">close</i></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="content">
|
||||||
|
<div id="login">
|
||||||
|
<h3>Connexion</h3>
|
||||||
|
<hr>
|
||||||
|
<form id="login-form">
|
||||||
|
<label for="nickname">Email:</label><br />
|
||||||
|
<input type="text" name="nickname" id="nickname"><br />
|
||||||
|
<label for="password">Mot de passe:</label><br />
|
||||||
|
<input type="password" name="password" id="password"><br />
|
||||||
|
<input type="submit" value="Se connecter">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
<script src="include/login.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
70
main.js
70
main.js
@ -1,9 +1,18 @@
|
|||||||
const { app, BrowserWindow, Menu } = require('electron')
|
const { app, BrowserWindow, Menu, ipcMain, Notification } = require('electron')
|
||||||
const path = require('path');
|
const path = require('path')
|
||||||
|
const { Client, Authenticator } = require('minecraft-launcher-core')
|
||||||
|
|
||||||
|
const launcher = new Client();
|
||||||
const iconPath = path.join(__dirname, "icon.png");
|
const iconPath = path.join(__dirname, "icon.png");
|
||||||
|
let win = null
|
||||||
|
let auth = null
|
||||||
|
|
||||||
|
let Minecraftpath = "projet-secret"
|
||||||
|
let clientPackage = "https://www.dropbox.com/s/ww6a052nzzgojdm/modpack.zip?dl=1"
|
||||||
|
let version = "fabric-loader-0.10.8-1.16.4"
|
||||||
|
|
||||||
function createWindow () {
|
function createWindow () {
|
||||||
const win = new BrowserWindow({
|
win = new BrowserWindow({
|
||||||
width: 1000,
|
width: 1000,
|
||||||
height: 600,
|
height: 600,
|
||||||
icon: iconPath,
|
icon: iconPath,
|
||||||
@ -13,8 +22,8 @@ function createWindow () {
|
|||||||
},
|
},
|
||||||
frame: false
|
frame: false
|
||||||
})
|
})
|
||||||
//Menu.setApplicationMenu(null)
|
Menu.setApplicationMenu(null)
|
||||||
win.loadFile('index.html')
|
win.loadFile('login.html')
|
||||||
}
|
}
|
||||||
|
|
||||||
app.whenReady().then(() => {
|
app.whenReady().then(() => {
|
||||||
@ -33,3 +42,54 @@ app.on('activate', () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
ipcMain.on("login", (event, args) => {
|
||||||
|
auth = Authenticator.getAuth(args.user, args.pass)
|
||||||
|
auth.then(v => {
|
||||||
|
win.loadFile('index.html')
|
||||||
|
setTimeout(() => {
|
||||||
|
event.sender.send("nick", {
|
||||||
|
name: v.name
|
||||||
|
})
|
||||||
|
}, 1000)
|
||||||
|
|
||||||
|
}).catch((err) => {
|
||||||
|
console.warn(err)
|
||||||
|
showNotification("Erreur de connexion")
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
function showNotification(title="", body="") {
|
||||||
|
const notification = {
|
||||||
|
title: title,
|
||||||
|
body: body
|
||||||
|
}
|
||||||
|
new Notification(notification).show()
|
||||||
|
}
|
||||||
|
|
||||||
|
ipcMain.on("notification", (event, args) => {
|
||||||
|
showNotification(args.title, args.body)
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.on("launch", (event, args) => {
|
||||||
|
let opts = {
|
||||||
|
clientPackage: clientPackage,
|
||||||
|
authorization: auth,
|
||||||
|
root: Minecraftpath,
|
||||||
|
//forge: fabricmc,
|
||||||
|
version: {
|
||||||
|
number: "1.16.4",
|
||||||
|
type: "release",
|
||||||
|
custom: version
|
||||||
|
},
|
||||||
|
memory: {
|
||||||
|
max: args.maxMem,
|
||||||
|
min: args.minMem
|
||||||
|
}
|
||||||
|
}
|
||||||
|
launcher.launch(opts)
|
||||||
|
launcher.on('debug', (e) => console.log(e));
|
||||||
|
launcher.on('data', (e) => console.log(e));
|
||||||
|
launcher.on('progress', (e) => console.log(e));
|
||||||
|
launcher.on('close', (e) => console.log(e));
|
||||||
|
|
||||||
|
})
|
55
menubar.css
Normal file
55
menubar.css
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
#menubar{
|
||||||
|
position:fixed;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
width:100%;
|
||||||
|
height:28px;
|
||||||
|
background-color:rgb(37, 37, 37);
|
||||||
|
color:white;
|
||||||
|
cursor: move;
|
||||||
|
-webkit-app-region: drag;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#menubar ul{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menubar .left{
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#menubar .right{
|
||||||
|
float: right;
|
||||||
|
-webkit-app-region: no-drag;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menubar .right li,
|
||||||
|
#menubar .left li {
|
||||||
|
display: inline-block;
|
||||||
|
height:28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menubar .right li:hover,
|
||||||
|
#menubar .left li:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#minimize-btn:hover,
|
||||||
|
#max-unmax-btn:hover{
|
||||||
|
background-color: rgb(55, 55, 55);
|
||||||
|
transition: 0.3s background-color ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#close-btn:hover{
|
||||||
|
background-color:red;
|
||||||
|
transition: 0.3s background-color ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons{
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
}
|
42
menubar.js
42
menubar.js
@ -1,42 +0,0 @@
|
|||||||
const {remote} = require('electron');
|
|
||||||
const {Menu, BrowserWindow, MenuItem, shell} = remote;
|
|
||||||
|
|
||||||
function getCurrentWindow() {
|
|
||||||
return remote.getCurrentWindow();
|
|
||||||
}
|
|
||||||
|
|
||||||
function minimizeWindow(browserWindow = getCurrentWindow()) {
|
|
||||||
if (browserWindow.minimizable) {
|
|
||||||
// browserWindow.isMinimizable() for old electron versions
|
|
||||||
browserWindow.minimize();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function unmaximizeWindow(browserWindow = getCurrentWindow()) {
|
|
||||||
browserWindow.unmaximize();
|
|
||||||
}
|
|
||||||
|
|
||||||
function maxUnmaxWindow(browserWindow = getCurrentWindow()) {
|
|
||||||
if (browserWindow.isMaximized()) {
|
|
||||||
browserWindow.unmaximize();
|
|
||||||
} else {
|
|
||||||
browserWindow.maximize();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeWindow(browserWindow = getCurrentWindow()) {
|
|
||||||
browserWindow.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
function isWindowMaximized(browserWindow = getCurrentWindow()) {
|
|
||||||
return browserWindow.isMaximized();
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
getCurrentWindow,
|
|
||||||
minimizeWindow,
|
|
||||||
unmaximizeWindow,
|
|
||||||
maxUnmaxWindow,
|
|
||||||
isWindowMaximized,
|
|
||||||
closeWindow,
|
|
||||||
};
|
|
4023
package-lock.json
generated
4023
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
40
package.json
40
package.json
@ -4,17 +4,51 @@
|
|||||||
"description": "Launcher Projet Secret",
|
"description": "Launcher Projet Secret",
|
||||||
"main": "main.js",
|
"main": "main.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "electron .",
|
"start": "electron-forge start",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"package": "electron-forge package",
|
||||||
|
"make": "electron-forge make"
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "Topeka_",
|
"author": "Topeka_",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@electron-forge/cli": "^6.0.0-beta.54",
|
||||||
|
"@electron-forge/maker-deb": "^6.0.0-beta.54",
|
||||||
|
"@electron-forge/maker-rpm": "^6.0.0-beta.54",
|
||||||
|
"@electron-forge/maker-squirrel": "^6.0.0-beta.54",
|
||||||
|
"@electron-forge/maker-zip": "^6.0.0-beta.54",
|
||||||
"electron": "^11.0.3"
|
"electron": "^11.0.3"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.21.0",
|
"electron-squirrel-startup": "^1.0.0",
|
||||||
"minecraft-launcher-core": "^3.15.6"
|
"minecraft-launcher-core": "^3.15.6"
|
||||||
|
},
|
||||||
|
"config": {
|
||||||
|
"forge": {
|
||||||
|
"packagerConfig": {},
|
||||||
|
"makers": [
|
||||||
|
{
|
||||||
|
"name": "@electron-forge/maker-squirrel",
|
||||||
|
"config": {
|
||||||
|
"name": "launcher"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "@electron-forge/maker-zip",
|
||||||
|
"platforms": [
|
||||||
|
"darwin"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "@electron-forge/maker-deb",
|
||||||
|
"config": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "@electron-forge/maker-rpm",
|
||||||
|
"config": {}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
49
script.js
49
script.js
@ -1,6 +1,5 @@
|
|||||||
const {remote} = require('electron');
|
'use strict';
|
||||||
const {Menu, BrowserWindow, MenuItem, shell} = remote;
|
const {remote, ipcRenderer} = require('electron');
|
||||||
|
|
||||||
const {
|
const {
|
||||||
getCurrentWindow,
|
getCurrentWindow,
|
||||||
minimizeWindow,
|
minimizeWindow,
|
||||||
@ -8,39 +7,39 @@ const {
|
|||||||
maxUnmaxWindow,
|
maxUnmaxWindow,
|
||||||
isWindowMaximized,
|
isWindowMaximized,
|
||||||
closeWindow,
|
closeWindow,
|
||||||
} = require("./menubar.js");
|
} = require("./include/menubar.js");
|
||||||
|
|
||||||
window.addEventListener("DOMContentLoaded", () => {
|
window.addEventListener("DOMContentLoaded", () => {
|
||||||
window.getCurrentWindow = getCurrentWindow;
|
window.getCurrentWindow = getCurrentWindow
|
||||||
window.minimizeWindow = minimizeWindow;
|
window.minimizeWindow = minimizeWindow
|
||||||
window.unmaximizeWindow = unmaximizeWindow;
|
window.unmaximizeWindow = unmaximizeWindow
|
||||||
window.maxUnmaxWindow = maxUnmaxWindow;
|
window.maxUnmaxWindow = maxUnmaxWindow
|
||||||
window.isWindowMaximized = isWindowMaximized;
|
window.isWindowMaximized = isWindowMaximized
|
||||||
window.closeWindow = closeWindow;
|
window.closeWindow = closeWindow
|
||||||
const minimizeButton = document.getElementById("minimize-btn");
|
const minimizeButton = document.getElementById("minimize-btn")
|
||||||
const maxUnmaxButton = document.getElementById("max-unmax-btn");
|
const maxUnmaxButton = document.getElementById("max-unmax-btn")
|
||||||
const closeButton = document.getElementById("close-btn");
|
const closeButton = document.getElementById("close-btn")
|
||||||
|
|
||||||
minimizeButton.addEventListener("click", e => {
|
minimizeButton.addEventListener("click", e => {
|
||||||
window.minimizeWindow();
|
window.minimizeWindow()
|
||||||
});
|
})
|
||||||
|
|
||||||
maxUnmaxButton.addEventListener("click", e => {
|
maxUnmaxButton.addEventListener("click", e => {
|
||||||
const icon = maxUnmaxButton.querySelector("#icon-maxUnmax");
|
const icon = maxUnmaxButton.querySelector("#icon-maxUnmax")
|
||||||
|
|
||||||
window.maxUnmaxWindow();
|
window.maxUnmaxWindow()
|
||||||
|
|
||||||
// Change the middle maximize-unmaximize icons.
|
// Change the middle maximize-unmaximize icons.
|
||||||
if (window.isWindowMaximized()) {
|
if (window.isWindowMaximized()) {
|
||||||
icon.classList.remove("icon-square");
|
icon.classList.remove("icon-square")
|
||||||
icon.classList.add("icon-clone");
|
icon.classList.add("icon-clone")
|
||||||
} else {
|
} else {
|
||||||
icon.classList.add("icon-square");
|
icon.classList.add("icon-square")
|
||||||
icon.classList.remove("icon-clone");
|
icon.classList.remove("icon-clone")
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
closeButton.addEventListener("click", e => {
|
closeButton.addEventListener("click", e => {
|
||||||
window.closeWindow();
|
window.closeWindow()
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
142
style.css
142
style.css
@ -1,142 +0,0 @@
|
|||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html{
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body{
|
|
||||||
background: white;
|
|
||||||
margin:0;
|
|
||||||
height:100%;
|
|
||||||
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menubar{
|
|
||||||
position:fixed;
|
|
||||||
top:0;
|
|
||||||
left:0;
|
|
||||||
width:100%;
|
|
||||||
height:28px;
|
|
||||||
background-color:rgb(37, 37, 37);
|
|
||||||
color:white;
|
|
||||||
cursor: move;
|
|
||||||
-webkit-app-region: drag;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#menubar ul{
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menubar .left{
|
|
||||||
float:left;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#menubar .right{
|
|
||||||
float: right;
|
|
||||||
-webkit-app-region: no-drag;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menubar .right li,
|
|
||||||
#menubar .left li {
|
|
||||||
display: inline-block;
|
|
||||||
height:28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menubar .right li:hover,
|
|
||||||
#menubar .left li:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#minimize-btn:hover,
|
|
||||||
#max-unmax-btn:hover{
|
|
||||||
background-color: rgb(55, 55, 55);
|
|
||||||
transition: 0.3s background-color ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#close-btn:hover{
|
|
||||||
background-color:red;
|
|
||||||
transition: 0.3s background-color ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-icons{
|
|
||||||
position: relative;
|
|
||||||
top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content{
|
|
||||||
display: flex;
|
|
||||||
height:100%;
|
|
||||||
padding-top:28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar{
|
|
||||||
flex:20%;
|
|
||||||
background-color: rgb(43, 43, 43);
|
|
||||||
color: white;
|
|
||||||
padding:5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar input[type="text"],
|
|
||||||
#sidebar input[type="password"]{
|
|
||||||
width:95%;
|
|
||||||
padding: 5px 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="submit"] {
|
|
||||||
padding: 5px;
|
|
||||||
width: 70%;
|
|
||||||
height: 25px;
|
|
||||||
margin: 10px 15%;
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid lightgrey;
|
|
||||||
transition: background 0.1s linear, border 0.2s;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main{
|
|
||||||
flex: 80%;
|
|
||||||
background-color: rgb(216, 216, 216);
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-img {
|
|
||||||
height:100%;
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin-block-end: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#launch{
|
|
||||||
position: absolute;
|
|
||||||
bottom:0;
|
|
||||||
right:0;
|
|
||||||
width:80%;
|
|
||||||
height:70px;
|
|
||||||
background-color:rgb(49, 49, 49);
|
|
||||||
}
|
|
||||||
|
|
||||||
#launch-btn {
|
|
||||||
position: relative;
|
|
||||||
top: -25px;
|
|
||||||
left:50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 20%;
|
|
||||||
max-width:200px;
|
|
||||||
height:50px;
|
|
||||||
padding:10px;
|
|
||||||
text-align: center;
|
|
||||||
color:white;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size:1.2rem;
|
|
||||||
background-color: green;
|
|
||||||
border: 1px solid black;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user