diff --git a/src/client/assets/css/index.css b/src/client/assets/css/index.css index 64fd7c0..3f9af57 100644 --- a/src/client/assets/css/index.css +++ b/src/client/assets/css/index.css @@ -7,34 +7,59 @@ src: url("../Roboto-Regular.ttf") format("truetype"); } +@font-face { + font-family: "French-Press"; + src: url("../fonts/Frenchpress.otf") format("OpenType"); +} + html{ height: 100%; } body{ - background: white; + background: black; margin:0; height:100%; font-family: "Roboto"; + color: black; } #content{ - display: flex; height:100%; padding-top:28px; } #sidebar{ - flex:20%; - background-color: rgb(43, 43, 43); - color: white; - padding:5px; + position:absolute; + top: 50px; + left: 20px; + background-image: url("../images/svg/chapters_scroll.svg"); + background-repeat: no-repeat; + background-size: 100%; + width: 322px; + height: 398px; +} + +#media { + position: absolute; + top: 475px; + left:20px; + width: 322px; + display: flex; +} + +#media > div { + background-image: url("../images/svg/buttons.svg"); + background-size: 100%; + background-repeat: no-repeat; + padding: 9px; + flex: 33%; + cursor: pointer; } #main{ - flex: 80%; - background-color: rgb(216, 216, 216); - padding: 0px; + width: 100%; + height:100%; } #main-img { @@ -46,31 +71,25 @@ h3 { margin-block-end: 0.5em; } -#launch{ - position: absolute; - bottom:0; - right:0; - width:80%; - height:70px; - background-color:rgb(49, 49, 49); +#launch-text { + font-family: "French-Press"; + font-size: 52px; + font-weight: bold; } #launch-btn { - position: relative; - top: 50%; - left:50%; - transform: translate(-50%, -50%); - width: 20%; - max-width:200px; - height:50px; + background-color: transparent; + position: absolute; + bottom: 20px; + right: 25px; + background-image: url("../images/svg/play_button.svg"); + background-repeat: no-repeat; + background-size: 100%; + width:312px; + height:122px; padding:10px; text-align: center; - color:white; - font-weight: bold; - font-size:1.2rem; - background-color: green; - border: 1px solid black; - border-radius: 3px; + border-width: 0px; } .hidden{ @@ -92,9 +111,63 @@ h3 { } #loading-message{ - width:80%; + width:100%; position:relative; margin: 0 auto; height:28px; + font-family: "French-Press"; + font-size: 24px; color:white; +} + +#account { + width:312px; + height: 105px; + background-image: url('../images/svg/nickname_scroll.svg'); + background-repeat: no-repeat; + background-size: 100%; + position: absolute; + right: 25px; + top: 50px; + padding: 0px 30px; +} + +#nick { + font-family: "French-Press"; + font-size: 28px; + position: relative; + top:45%; + transform: translateY(-45%); +} + +#fullscreen { + position:absolute; + top: 28px; + left: 0; + width: 100%; + height: calc(100% - 28px); + background-color: rgba(0, 0, 0, 0.6); + display: none; + z-index: 10; +} + +#close { + position: absolute; + top: 28px; + left: 5px; + color: white; + cursor: pointer; +} + +#settings { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 400px; + min-height: 470px; + background-image: url("../images/svg/chapters_scroll.svg"); + background-repeat: no-repeat; + background-size: 100%; + padding: 10px 50px; } \ No newline at end of file diff --git a/src/client/assets/css/menubar.css b/src/client/assets/css/menubar.css index 3f10f02..c047c84 100644 --- a/src/client/assets/css/menubar.css +++ b/src/client/assets/css/menubar.css @@ -1,4 +1,4 @@ -#menubar{ +#menubar { position:fixed; top:0; left:0; @@ -9,9 +9,9 @@ cursor: move; -webkit-app-region: drag; -webkit-user-select: none; + z-index: 100; } - #menubar ul{ margin:0; padding:0; @@ -21,7 +21,6 @@ float:left; } - #menubar .right{ float: right; -webkit-app-region: no-drag; diff --git a/src/client/assets/fonts/DarkerGrotesque-Black.ttf b/src/client/assets/fonts/DarkerGrotesque-Black.ttf new file mode 100644 index 0000000..1745a7c Binary files /dev/null and b/src/client/assets/fonts/DarkerGrotesque-Black.ttf differ diff --git a/src/client/assets/fonts/DarkerGrotesque-Bold.ttf b/src/client/assets/fonts/DarkerGrotesque-Bold.ttf new file mode 100644 index 0000000..995ddf9 Binary files /dev/null and b/src/client/assets/fonts/DarkerGrotesque-Bold.ttf differ diff --git a/src/client/assets/fonts/DarkerGrotesque-ExtraBold.ttf b/src/client/assets/fonts/DarkerGrotesque-ExtraBold.ttf new file mode 100644 index 0000000..a96541e Binary files /dev/null and b/src/client/assets/fonts/DarkerGrotesque-ExtraBold.ttf differ diff --git a/src/client/assets/fonts/DarkerGrotesque-Light.ttf b/src/client/assets/fonts/DarkerGrotesque-Light.ttf new file mode 100644 index 0000000..aeeed57 Binary files /dev/null and b/src/client/assets/fonts/DarkerGrotesque-Light.ttf differ diff --git a/src/client/assets/fonts/DarkerGrotesque-Medium.ttf b/src/client/assets/fonts/DarkerGrotesque-Medium.ttf new file mode 100644 index 0000000..4102196 Binary files /dev/null and b/src/client/assets/fonts/DarkerGrotesque-Medium.ttf differ diff --git a/src/client/assets/fonts/DarkerGrotesque-Regular.ttf b/src/client/assets/fonts/DarkerGrotesque-Regular.ttf new file mode 100644 index 0000000..2102ac7 Binary files /dev/null and b/src/client/assets/fonts/DarkerGrotesque-Regular.ttf differ diff --git a/src/client/assets/fonts/DarkerGrotesque-SemiBold.ttf b/src/client/assets/fonts/DarkerGrotesque-SemiBold.ttf new file mode 100644 index 0000000..89a0fd9 Binary files /dev/null and b/src/client/assets/fonts/DarkerGrotesque-SemiBold.ttf differ diff --git a/src/client/assets/fonts/Frenchpress.otf b/src/client/assets/fonts/Frenchpress.otf new file mode 100644 index 0000000..aeba13d Binary files /dev/null and b/src/client/assets/fonts/Frenchpress.otf differ diff --git a/src/client/assets/fonts/Znikomit.otf b/src/client/assets/fonts/Znikomit.otf new file mode 100644 index 0000000..d6d982a Binary files /dev/null and b/src/client/assets/fonts/Znikomit.otf differ diff --git a/src/client/assets/fonts/ZnikomitNo24.otf b/src/client/assets/fonts/ZnikomitNo24.otf new file mode 100644 index 0000000..d9766f8 Binary files /dev/null and b/src/client/assets/fonts/ZnikomitNo24.otf differ diff --git a/src/client/assets/fonts/ZnikomitNo24Thin.otf b/src/client/assets/fonts/ZnikomitNo24Thin.otf new file mode 100644 index 0000000..0ae26a5 Binary files /dev/null and b/src/client/assets/fonts/ZnikomitNo24Thin.otf differ diff --git a/src/client/assets/fonts/ZnikomitNo25.otf b/src/client/assets/fonts/ZnikomitNo25.otf new file mode 100644 index 0000000..235260b Binary files /dev/null and b/src/client/assets/fonts/ZnikomitNo25.otf differ diff --git a/src/client/assets/fonts/ZnikomitSC.otf b/src/client/assets/fonts/ZnikomitSC.otf new file mode 100644 index 0000000..5d471aa Binary files /dev/null and b/src/client/assets/fonts/ZnikomitSC.otf differ diff --git a/src/client/assets/images/svg/buttons.svg b/src/client/assets/images/svg/buttons.svg new file mode 100644 index 0000000..943768f --- /dev/null +++ b/src/client/assets/images/svg/buttons.svg @@ -0,0 +1,900 @@ + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/client/assets/images/svg/chapters_scroll.svg b/src/client/assets/images/svg/chapters_scroll.svg new file mode 100644 index 0000000..ab49c84 --- /dev/null +++ b/src/client/assets/images/svg/chapters_scroll.svg @@ -0,0 +1,232 @@ + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/client/assets/images/svg/discord.svg b/src/client/assets/images/svg/discord.svg new file mode 100644 index 0000000..4eeb7bb --- /dev/null +++ b/src/client/assets/images/svg/discord.svg @@ -0,0 +1,23 @@ + + + + + + + + + diff --git a/src/client/assets/images/svg/nickname_scroll.svg b/src/client/assets/images/svg/nickname_scroll.svg new file mode 100644 index 0000000..008c618 --- /dev/null +++ b/src/client/assets/images/svg/nickname_scroll.svg @@ -0,0 +1,188 @@ + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/client/assets/images/svg/play_button.svg b/src/client/assets/images/svg/play_button.svg new file mode 100644 index 0000000..63cefda --- /dev/null +++ b/src/client/assets/images/svg/play_button.svg @@ -0,0 +1,771 @@ + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/client/assets/images/svg/settings.svg b/src/client/assets/images/svg/settings.svg new file mode 100644 index 0000000..0342aa6 --- /dev/null +++ b/src/client/assets/images/svg/settings.svg @@ -0,0 +1,21 @@ + + + + + + + + diff --git a/src/client/assets/images/svg/web.svg b/src/client/assets/images/svg/web.svg new file mode 100644 index 0000000..4170a4b --- /dev/null +++ b/src/client/assets/images/svg/web.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/client/assets/js/index.js b/src/client/assets/js/index.js index c49bfaf..aefe145 100644 --- a/src/client/assets/js/index.js +++ b/src/client/assets/js/index.js @@ -1,9 +1,12 @@ -const os = require('os'); -const launchBtn = document.querySelector('#launch-btn'); +const { shell } = require('electron') +const os = require('os') +const launchBtn = document.querySelector('#launch-btn') +const launchText = document.querySelector("#launch-text") const fullProgressBar = document.querySelector('#fullprogressbar') const progressBar = document.querySelector('#progressbar') const loadingMessage = document.querySelector('#loading-message') const disconnectBtn = document.querySelector('#disconnect-btn') +const fullscreen = document.querySelector('#fullscreen') const minMem = document.querySelector('#minMem') const maxMem = document.querySelector('#maxMem') const outputMinMem = document.querySelector('#outputMinMem') @@ -21,13 +24,13 @@ document.body.onload = (e) => { ipcRenderer.on("nick", (event, args) => { console.log(args) - document.querySelector("#nick-span").innerHTML = args.name + document.querySelector("#nick").innerHTML = args.name }) launchBtn.addEventListener("click", e => { - launchBtn.classList.add('hidden'); - fullProgressBar.classList.remove('hidden'); - loadingMessage.classList.remove('hidden'); + launchText.classList.add('hidden') + fullProgressBar.classList.remove('hidden') + loadingMessage.classList.remove('hidden') if(Number(minMem.value) <= Number(maxMem.value)){ ipcRenderer.send('launch', { minMem: minMem.value + "M", @@ -45,23 +48,39 @@ launchBtn.addEventListener("click", e => { }) +document.querySelector("#web").addEventListener("click", e => { + shell.openExternal("https://altarik.fr") +}) + +document.querySelector("#options").addEventListener("click", e => { + fullscreen.style.display = "block" +}) + +document.querySelector("#discord").addEventListener("click", e => { + shell.openExternal("https://discord.gg/b923tMhmRE") +}) + +document.querySelector("#close").addEventListener("click", e => { + fullscreen.style.display = "none" +}); + ipcRenderer.on("progress", (e, args) => { - progressBar.style.width = (args.task / args.total) * 100 + "%" - loadingMessage.innerHTML = "Téléchargement de " + args.type + ": " + args.task + " sur " + args.total; + progressBar.style.width = (args.task / Math.max(args.total, args.task)) * 100 + "%" + loadingMessage.innerHTML = "Téléchargement de " + args.type + ": " + args.task + " sur " + Math.max(args.total, args.task) }) ipcRenderer.on("close", (e, args) => { - launchBtn.classList.remove('hidden'); - fullProgressBar.classList.add('hidden'); - loadingMessage.classList.add('hidden'); + launchText.classList.remove('hidden') + fullProgressBar.classList.add('hidden') + loadingMessage.classList.add('hidden') loadingMessage.innerHTML = "Chargement de Minecraft en cours..." progressBar.style.width = "0" launchBtn.disabled = false }) ipcRenderer.on('launch', (e, args) => { - fullProgressBar.classList.add('hidden'); - loadingMessage.classList.add('hidden'); + fullProgressBar.classList.add('hidden') + loadingMessage.classList.add('hidden') }) disconnectBtn.addEventListener('click', e => { diff --git a/src/client/assets/js/script.js b/src/client/assets/js/script.js index c0d1f9e..8cd26f8 100644 --- a/src/client/assets/js/script.js +++ b/src/client/assets/js/script.js @@ -1,5 +1,5 @@ 'use strict'; -const { ipcRenderer } = require('electron'); +const { ipcRenderer, shell } = require('electron'); window.addEventListener("DOMContentLoaded", () => { const minimizeButton = document.getElementById("minimize-btn") diff --git a/src/client/index.html b/src/client/index.html index 3696168..92b841b 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -18,27 +18,44 @@
  • minimize
  • close
    • +
    +
    close
    +
    +

    Modifier la configuration

    + +

    Allocation mémoire

    + + + + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    -
    - +
    +
    +
    +
    +

    diff --git a/src/server/main.js b/src/server/main.js index debf063..d8c6ef9 100644 --- a/src/server/main.js +++ b/src/server/main.js @@ -35,7 +35,7 @@ function createWindow () { }, frame: false, }) - Menu.setApplicationMenu(null) + // Menu.setApplicationMenu(null) win.loadFile('src/client/login.html') }