mirror of
https://github.com/AltarikMC/Launcher
synced 2024-11-22 06:19:50 +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/
|
||||
|
||||
out/
|
@ -1 +1,7 @@
|
||||
# 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">
|
||||
<title>Launcher Projet Secret</title>
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
@ -18,15 +19,12 @@
|
||||
</div>
|
||||
<div id="content">
|
||||
<div id="sidebar">
|
||||
<h3>Connexion</h3>
|
||||
<h3>Compte</h3>
|
||||
<hr>
|
||||
<form style="display:flex;align-items: center;flex-direction: column;">
|
||||
<div><label for="nickname">Pseudonyme:</label><br />
|
||||
<input type="text" name="nickname" id="nickname"><br /></div>
|
||||
<div><label for="password">Mot de passe:</label><br />
|
||||
<input type="password" name="password" id="password"><br /></div>
|
||||
<input type="submit" value="Se connecter">
|
||||
</form>
|
||||
<span id="nick-span"></span>
|
||||
<h3>Modifier la configuration</h3>
|
||||
<hr>
|
||||
Contenu
|
||||
</div>
|
||||
<div id="main">
|
||||
<img id="main-img" src="./maxresdefault.jpg">
|
||||
@ -37,5 +35,6 @@
|
||||
</p>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
<script src="include/index.js"></script>
|
||||
</body>
|
||||
</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 path = require('path');
|
||||
const { app, BrowserWindow, Menu, ipcMain, Notification } = require('electron')
|
||||
const path = require('path')
|
||||
const { Client, Authenticator } = require('minecraft-launcher-core')
|
||||
|
||||
const launcher = new Client();
|
||||
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 () {
|
||||
const win = new BrowserWindow({
|
||||
win = new BrowserWindow({
|
||||
width: 1000,
|
||||
height: 600,
|
||||
icon: iconPath,
|
||||
@ -13,8 +22,8 @@ function createWindow () {
|
||||
},
|
||||
frame: false
|
||||
})
|
||||
//Menu.setApplicationMenu(null)
|
||||
win.loadFile('index.html')
|
||||
Menu.setApplicationMenu(null)
|
||||
win.loadFile('login.html')
|
||||
}
|
||||
|
||||
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",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"start": "electron .",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"start": "electron-forge start",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"package": "electron-forge package",
|
||||
"make": "electron-forge make"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Topeka_",
|
||||
"license": "ISC",
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.0",
|
||||
"electron-squirrel-startup": "^1.0.0",
|
||||
"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');
|
||||
const {Menu, BrowserWindow, MenuItem, shell} = remote;
|
||||
|
||||
'use strict';
|
||||
const {remote, ipcRenderer} = require('electron');
|
||||
const {
|
||||
getCurrentWindow,
|
||||
minimizeWindow,
|
||||
@ -8,39 +7,39 @@ const {
|
||||
maxUnmaxWindow,
|
||||
isWindowMaximized,
|
||||
closeWindow,
|
||||
} = require("./menubar.js");
|
||||
} = require("./include/menubar.js");
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
window.getCurrentWindow = getCurrentWindow;
|
||||
window.minimizeWindow = minimizeWindow;
|
||||
window.unmaximizeWindow = unmaximizeWindow;
|
||||
window.maxUnmaxWindow = maxUnmaxWindow;
|
||||
window.isWindowMaximized = isWindowMaximized;
|
||||
window.closeWindow = closeWindow;
|
||||
const minimizeButton = document.getElementById("minimize-btn");
|
||||
const maxUnmaxButton = document.getElementById("max-unmax-btn");
|
||||
const closeButton = document.getElementById("close-btn");
|
||||
window.getCurrentWindow = getCurrentWindow
|
||||
window.minimizeWindow = minimizeWindow
|
||||
window.unmaximizeWindow = unmaximizeWindow
|
||||
window.maxUnmaxWindow = maxUnmaxWindow
|
||||
window.isWindowMaximized = isWindowMaximized
|
||||
window.closeWindow = closeWindow
|
||||
const minimizeButton = document.getElementById("minimize-btn")
|
||||
const maxUnmaxButton = document.getElementById("max-unmax-btn")
|
||||
const closeButton = document.getElementById("close-btn")
|
||||
|
||||
minimizeButton.addEventListener("click", e => {
|
||||
window.minimizeWindow();
|
||||
});
|
||||
window.minimizeWindow()
|
||||
})
|
||||
|
||||
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.
|
||||
if (window.isWindowMaximized()) {
|
||||
icon.classList.remove("icon-square");
|
||||
icon.classList.add("icon-clone");
|
||||
icon.classList.remove("icon-square")
|
||||
icon.classList.add("icon-clone")
|
||||
} else {
|
||||
icon.classList.add("icon-square");
|
||||
icon.classList.remove("icon-clone");
|
||||
icon.classList.add("icon-square")
|
||||
icon.classList.remove("icon-clone")
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
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