Some modifications

This commit is contained in:
Maxime Roque 2023-05-02 14:24:39 +02:00
parent f45af45717
commit bcc26de19d
18 changed files with 577 additions and 182 deletions

17
app/animation.ejs Normal file
View File

@ -0,0 +1,17 @@
<div class="animation">
<section>
<div class="container">
<div id="cube" class="show-front animate">
<figure class="front"></figure>
<figure class="back"></figure>
<figure class="right"></figure>
<figure class="left"></figure>
<figure class="top"></figure>
<figure class="bottom"></figure>
</div>
</div>
</section>
</div>

View File

@ -1,15 +1,21 @@
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta charset="utf-8" http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-In6B8teKZQll5heMl9bS7CESTbGvuAt3VVV86BUQBDk='"/> <meta charset="utf-8" http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-In6B8teKZQll5heMl9bS7CESTbGvuAt3VVV86BUQBDk='"/>
<title>BTCV Launcher</title> <title>Helios Launcher</title>
<script src="./assets/js/scripts/uicore.js"></script> <script src="./assets/js/scripts/uicore.js"></script>
<script src="./assets/js/scripts/uibinder.js"></script> <script src="./assets/js/scripts/uibinder.js"></script>
<script src="./assets/js/tailwind.js"></script>
<link type="text/css" rel="stylesheet" href="./assets/css/launcher.css"> <link type="text/css" rel="stylesheet" href="./assets/css/launcher.css">
<link type="text/css" rel="stylesheet" href="./assets/css/animation.css">
<link type="text/css" rel="stylesheet" href="./assets/css/bat.css">
<style> <style>
body { body {
/*background: url('assets/images/backgrounds/<%=bkid%>.jpg') no-repeat center center fixed;*/ background: url('assets/images/backgrounds/main.svg') no-repeat center center fixed;
background-color: #192231;
transition: background-image 1s ease; transition: background-image 1s ease;
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA+Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2ODApLCBkZWZhdWx0IHF1YWxpdHkK/9sAQwAIBgYHBgUIBwcHCQkICgwUDQwLCwwZEhMPFB0aHx4dGhwcICQuJyAiLCMcHCg3KSwwMTQ0NB8nOT04MjwuMzQy/9sAQwEJCQkMCwwYDQ0YMiEcITIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy/8AAEQgAPwBwAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A8VooopDCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9k='); /* background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA+Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2ODApLCBkZWZhdWx0IHF1YWxpdHkK/9sAQwAIBgYHBgUIBwcHCQkICgwUDQwLCwwZEhMPFB0aHx4dGhwcICQuJyAiLCMcHCg3KSwwMTQ0NB8nOT04MjwuMzQy/9sAQwEJCQkMCwwYDQ0YMiEcITIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy/8AAEQgAPwBwAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A8VooopDCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9k='); */
background-size: cover; background-size: cover;
-webkit-user-select: none; -webkit-user-select: none;
} }
@ -29,7 +35,7 @@
<body bkid="<%=bkid%>"> <body bkid="<%=bkid%>">
<%- include('frame') %> <%- include('frame') %>
<div id="main"> <div id="main">
<%- include('welcome') %>
<%- include('login') %> <%- include('login') %>
<%- include('waiting') %> <%- include('waiting') %>
<%- include('loginOptions') %> <%- include('loginOptions') %>
@ -41,6 +47,7 @@
<div id="loadingContent"> <div id="loadingContent">
<div id="loadSpinnerContainer"> <div id="loadSpinnerContainer">
<img id="loadCenterImage" src="assets/images/LoadingSeal.png"> <img id="loadCenterImage" src="assets/images/LoadingSeal.png">
<img id="loadSpinnerImage" class="opacity-0">
</div> </div>
</div> </div>
</div> </div>

View File

@ -0,0 +1,306 @@
.animation {
width: 200px;
height: 200px;
}
@charset "UTF-8";
@-webkit-keyframes rotateCube {
0% {
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
}
5.55% {
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
}
11.1% {
transform: translateZ(-200px) rotateY(0deg) rotateX(90deg);
}
16.55% {
transform: translateZ(-200px) rotateY(0deg) rotateX(90deg);
}
22.22% {
transform: translateZ(-200px) rotateY(90deg) rotateX(90deg);
}
27.75% {
transform: translateZ(-200px) rotateY(90deg) rotateX(90deg);
}
33.3% {
transform: translateZ(-200px) rotateY(180deg) rotateX(90deg);
}
38.85% {
transform: translateZ(-200px) rotateY(180deg) rotateX(90deg);
}
44.4% {
transform: translateZ(-200px) rotateY(270deg) rotateX(90deg);
}
49.95% {
transform: translateZ(-200px) rotateY(270deg) rotateX(90deg);
}
55.5% {
transform: translateZ(-200px) rotateY(360deg) rotateX(90deg);
}
61.05% {
transform: translateZ(-200px) rotateY(360deg) rotateX(90deg);
}
61.055% {
transform: translateZ(-200px) rotateY(0deg) rotateX(90deg);
}
66.6% {
transform: translateZ(-200px) rotateY(0deg) rotateX(180deg);
}
72.15% {
transform: translateZ(-200px) rotateY(0deg) rotateX(180deg);
}
77.7% {
transform: translateZ(-200px) rotateY(0deg) rotateX(270deg);
}
83.25% {
transform: translateZ(-200px) rotateY(0deg) rotateX(270deg);
}
88.8% {
transform: translateZ(-200px) rotateY(0deg) rotateX(360deg);
}
94.35% {
transform: translateZ(-200px) rotateY(0deg) rotateX(360deg);
}
94.355% {
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
}
99.9% {
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
}
}
@keyframes rotateCube {
0% {
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
}
5.55% {
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
}
11.1% {
transform: translateZ(-200px) rotateY(0deg) rotateX(90deg);
}
16.55% {
transform: translateZ(-200px) rotateY(0deg) rotateX(90deg);
}
22.22% {
transform: translateZ(-200px) rotateY(90deg) rotateX(90deg);
}
27.75% {
transform: translateZ(-200px) rotateY(90deg) rotateX(90deg);
}
33.3% {
transform: translateZ(-200px) rotateY(180deg) rotateX(90deg);
}
38.85% {
transform: translateZ(-200px) rotateY(180deg) rotateX(90deg);
}
44.4% {
transform: translateZ(-200px) rotateY(270deg) rotateX(90deg);
}
49.95% {
transform: translateZ(-200px) rotateY(270deg) rotateX(90deg);
}
55.5% {
transform: translateZ(-200px) rotateY(360deg) rotateX(90deg);
}
61.05% {
transform: translateZ(-200px) rotateY(360deg) rotateX(90deg);
}
61.055% {
transform: translateZ(-200px) rotateY(0deg) rotateX(90deg);
}
66.6% {
transform: translateZ(-200px) rotateY(0deg) rotateX(180deg);
}
72.15% {
transform: translateZ(-200px) rotateY(0deg) rotateX(180deg);
}
77.7% {
transform: translateZ(-200px) rotateY(0deg) rotateX(270deg);
}
83.25% {
transform: translateZ(-200px) rotateY(0deg) rotateX(270deg);
}
88.8% {
transform: translateZ(-200px) rotateY(0deg) rotateX(360deg);
}
94.35% {
transform: translateZ(-200px) rotateY(0deg) rotateX(360deg);
}
94.355% {
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
}
99.9% {
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
}
}
@font-face {
font-family: minecrafft;
src: url(https://assets.codepen.io/751678/MinecraftFont.ttf);
}
.animation section {
position: relative;
width: 100%;
height: 100%;
}
.animation .container {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: auto;
perspective: 600px;
margin: 0;
}
.animation .container h1 {
position: absolute;
width: 200%;
bottom: 0;
left: 100%;
right: auto;
transform: translateX(25px) translatey(0px);
transform-origin: bottom left;
margin: 0;
color: #dddddd;
font-size: 16px;
}
@media all and (min-width: 768px) {
.animation .container h1 {
width: 300%;
font-size: 24px;
}
}
.animation .container #cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
-webkit-transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
-moz-transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
-ms-trasform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
transition: transform 1s;
-webkit-transition: transform 1s;
-moz-transition: transform 1s;
-ms-transition: transform 1s;
}
.animation .container #cube.animate {
-webkit-animation: rotateCube 8s linear 0s infinite forwards;
animation: rotateCube 8s linear 0s infinite forwards;
}
.animation .container #cube.hover {
-webkit-animation: rotateCube 6s linear 0s infinite forwards;
animation: rotateCube 6s linear 0s infinite forwards;
}
.animation .container #cube.hover figure.front {
transform: rotateY(0deg) translateZ(75px);
-webkit-transform: rotateY(0deg) translateZ(75px);
-moz-transform: rotateY(0deg) translateZ(75px);
-ms-trasform: rotateY(0deg) translateZ(75px);
}
.animation .container #cube.hover figure.back {
transform: rotateX(180deg) translateZ(75px);
-webkit-transform: rotateX(180deg) translateZ(75px);
-moz-transform: rotateX(180deg) translateZ(75px);
-ms-trasform: rotateX(180deg) translateZ(75px);
}
.animation .container #cube.hover figure.right {
transform: rotateY(90deg) translateZ(75px);
-webkit-transform: rotateY(90deg) translateZ(75px);
-moz-transform: rotateY(90deg) translateZ(75px);
-ms-trasform: rotateY(90deg) translateZ(75px);
}
.animation .container #cube.hover figure.left {
transform: rotateY(-90deg) translateZ(75px);
-webkit-transform: rotateY(-90deg) translateZ(75px);
-moz-transform: rotateY(-90deg) translateZ(75px);
-ms-trasform: rotateY(-90deg) translateZ(75px);
}
.animation .container #cube.hover figure.top {
transform: rotateX(90deg) translateZ(75px);
-webkit-transform: rotateX(90deg) translateZ(75px);
-moz-transform: rotateX(90deg) translateZ(75px);
-ms-trasform: rotateX(90deg) translateZ(75px);
}
.animation .container #cube.hover figure.bottom {
transform: rotateX(-90deg) translateZ(75px);
-webkit-transform: rotateX(-90deg) translateZ(75px);
-moz-transform: rotateX(-90deg) translateZ(75px);
-ms-trasform: rotateX(-90deg) translateZ(75px);
}
.animation .container #cube figure {
margin: 0;
width: 200px;
height: 200px;
display: block;
position: absolute;
background-color: rgba(0, 0, 0, 0.05);
background-size: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transition: transform 0.6s ease-in-out;
-webkit-transition: transform 0.6s ease-in-out;
-moz-transition: transform 0.6s ease-in-out;
-ms-transition: transform 0.6s ease-in-out;
}
.animation .container #cube figure.front {
transform: rotateY(0deg) translateZ(100px);
-webkit-transform: rotateY(0deg) translateZ(100px);
-moz-transform: rotateY(0deg) translateZ(100px);
-ms-trasform: rotateY(0deg) translateZ(100px);
}
.animation .container #cube figure.back {
transform: rotateX(180deg) translateZ(100px);
-webkit-transform: rotateX(180deg) translateZ(100px);
-moz-transform: rotateX(180deg) translateZ(100px);
-ms-trasform: rotateX(180deg) translateZ(100px);
}
.animation .container #cube figure.right {
transform: rotateY(90deg) translateZ(100px);
-webkit-transform: rotateY(90deg) translateZ(100px);
-moz-transform: rotateY(90deg) translateZ(100px);
-ms-trasform: rotateY(90deg) translateZ(100px);
}
.animation .container #cube figure.left {
transform: rotateY(-90deg) translateZ(100px);
-webkit-transform: rotateY(-90deg) translateZ(100px);
-moz-transform: rotateY(-90deg) translateZ(100px);
-ms-trasform: rotateY(-90deg) translateZ(100px);
}
.animation .container #cube figure.top {
transform: rotateX(90deg) translateZ(100px);
-webkit-transform: rotateX(90deg) translateZ(100px);
-moz-transform: rotateX(90deg) translateZ(100px);
-ms-trasform: rotateX(90deg) translateZ(100px);
}
.animation .container #cube figure.bottom {
transform: rotateX(-90deg) translateZ(100px);
-webkit-transform: rotateX(-90deg) translateZ(100px);
-moz-transform: rotateX(-90deg) translateZ(100px);
-ms-trasform: rotateX(-90deg) translateZ(100px);
}
.animation .container #cube figure.front {
background-image: url('../images/fifes/demzer.jpg');
}
.animation .container #cube figure.back {
background-image: url('../images/fifes/tantan.jpg');
}
.animation .container #cube figure.right {
background-image: url('../images/fifes/toto.jpg');
}
.animation .container #cube figure.left {
background-image: url('../images/fifes/demeyann.jpg');
}
.animation .container #cube figure.top {
background-image: url('../images/fifes/hugzer.jpg');
}
.animation .container #cube figure.bottom {
background-image: url('../images/fifes/znacks.jpg');
}

72
app/assets/css/bat.css Normal file
View File

@ -0,0 +1,72 @@
.text-bat{
color : #e7ba1f !important;
}
.hover\:text-bat{
transition: all ease .15s;
}
.hover\:text-bat:hover{
color : #e7ba1f !important;
}
.bg-bat{
background-color : #e7ba1f !important;
}
#image_seal_container,
#image_seal,
#avatarContainer
{
margin: 0;
width: 50px;
height : 50px;
box-shadow:none;
}
#user_text{
position: relative;
right: 0;
text-shadow: none;
}
#user_content{
gap : 10px;
}
#mediaContent{
display: none;
}
#server_selection_button{
text-shadow: none !important;
/* width: 100%;
text-align: center; */
}
#mojang_status_icon{
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}
#mojang_status_icon::after{
content : '';
width: 10px;
height: 10px;
border-radius: 50%;
display: block;
background-color: currentColor;
}
.frameButton {
display: inline-flex;
align-items: center;
justify-content: center;
}
#image_seal{
border: none !important;
}

View File

@ -64,7 +64,7 @@ body, button {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: background-color 1s ease; transition: background-color 1s ease;
background-color: rgba(0, 0, 0, 0); /*background-color: rgba(0, 0, 0, 0.5);*/
-webkit-user-select: none; -webkit-user-select: none;
} }
@ -273,8 +273,12 @@ body, button {
*/ */
#welcomeImageSeal { #welcomeImageSeal {
border-radius: 50%;
border: 2px solid #cad7e1;
background: rgba(1, 2, 1, 0.5);
height: 125px; height: 125px;
width: 125px; width: 125px;
box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
margin-bottom: 5%; margin-bottom: 5%;
margin-top: 10%; margin-top: 10%;
} }
@ -2854,6 +2858,9 @@ input:checked + .toggleSwitchSlider:before {
height: 70px; height: 70px;
width: auto; width: auto;
position: relative; position: relative;
border: 2px solid white;
box-sizing: border-box;
border-radius: 50%;
} }
/* Logo container styles. */ /* Logo container styles. */
@ -3173,12 +3180,6 @@ input:checked + .toggleSwitchSlider:before {
******************************************************************************/ ******************************************************************************/
/* Style for a general label on the bottom of the landing view. */ /* Style for a general label on the bottom of the landing view. */
.bot_label {
font-size: 9px;
letter-spacing: 1px;
font-weight: bold;
text-shadow: 0px 0px 0px #bebcbb;
}
/* Divider used on the bottom of the landing view. */ /* Divider used on the bottom of the landing view. */
.bot_divider { .bot_divider {
@ -3195,18 +3196,13 @@ input:checked + .toggleSwitchSlider:before {
/* Maintains maximum width on the status bar. */ /* Maintains maximum width on the status bar. */
#server_status_wrapper { #server_status_wrapper {
display: inline-flex; display: flex;
width: 75px; align-items: center;
gap: 10px;
} }
/* Span which displays the player count of the selected server. */ /* Span which displays the player count of the selected server. */
#player_count {
color: #949494;
font-size: 8px;
font-weight: 900;
text-shadow: 0px 0px 20px #949494;
margin-left: 10px;
}
/* Wrapper container for the mojang status bar. */ /* Wrapper container for the mojang status bar. */
#mojangStatusWrapper { #mojangStatusWrapper {
@ -3215,14 +3211,6 @@ input:checked + .toggleSwitchSlider:before {
cursor: pointer; cursor: pointer;
} }
/* Icon which displays the status of the mojang services. */
#mojang_status_icon {
font-size: 30px;
color: #848484;
margin-left: 15px;
font-family: 'sans-serif';
}
/* Tooltip which displays more details about the mojang statuses. */ /* Tooltip which displays more details about the mojang statuses. */
#mojangStatusTooltip { #mojangStatusTooltip {
position: absolute; position: absolute;
@ -3387,42 +3375,19 @@ input:checked + .toggleSwitchSlider:before {
} }
/* The launch button. */ /* The launch button. */
#launch_button {
background: none;
border: none;
cursor: pointer;
font-weight: 900;
letter-spacing: 2px;
text-shadow: 0px 0px 0px #bebcbb;
font-size: 20px;
padding: 0px;
transition: 0.25s ease;
outline: none;
}
#launch_button:hover,
#launch_button:focus {
text-shadow: 0px 0px 20px #fff, 0px 0px 20px #fff;
}
#launch_button:active {
color: #c7c7c7;
text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7;
}
#launch_button:disabled {
color: #c7c7c7;
cursor: default;
pointer-events: none;
}
/* Launch details main container, hidden until launch processing begins. */ /* Launch details main container, hidden until launch processing begins. */
#launch_details { #launch_details {
position: relative; position: relative;
top: 25px;
display: none; display: none;
} }
/* Left side of launch details container, displays percentage and a divider. */ /* Left side of launch details container, displays percentage and a divider. */
#launch_details_left { #launch_details_left {
display: flex; display: block;
width: 100%;
text-align: center;
} }
/* Span which displays percentage complete. */ /* Span which displays percentage complete. */
@ -3441,26 +3406,11 @@ input:checked + .toggleSwitchSlider:before {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center;
} }
/* Button which opens the server selection view. */ /* Button which opens the server selection view. */
#server_selection_button {
background: none;
border: none;
outline: none;
cursor: pointer;
line-height: 24px;
padding: 0px;
transition: 0.25s ease;
}
#server_selection_button:hover,
#server_selection_button:focus {
text-shadow: 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff;
}
#server_selection_button:active {
color: #c7c7c7;
text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7;
}
/* Progress bar styles. */ /* Progress bar styles. */
#launch_progress[value] { #launch_progress[value] {
@ -3959,30 +3909,3 @@ input:checked + .toggleSwitchSlider:before {
.rotating { .rotating {
animation: rotating 10s linear infinite; animation: rotating 10s linear infinite;
} }
#test {
background-color: #04AA6D;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 15px;
}
#container {
height: 200px;
position: relative;
border: 3px solid green;
}
#vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

View File

@ -76,8 +76,9 @@ function setLaunchDetails(details){
* @param {number} percent Percentage (0-100) * @param {number} percent Percentage (0-100)
*/ */
function setLaunchPercentage(percent){ function setLaunchPercentage(percent){
launch_progress.setAttribute('max', 100) // launch_progress.setAttribute('max', 100)
launch_progress.setAttribute('value', percent) // launch_progress.setAttribute('value', percent)
launch_progress.style.width = percent+'%'
launch_progress_label.innerHTML = percent + '%' launch_progress_label.innerHTML = percent + '%'
} }
@ -151,7 +152,7 @@ function updateSelectedAccount(authUser){
username = authUser.displayName username = authUser.displayName
} }
if(authUser.uuid != null){ if(authUser.uuid != null){
document.getElementById('avatarContainer').style.backgroundImage = `url('https://mc-heads.net/head/${authUser.uuid}')` document.getElementById('avatarContainer').style.backgroundImage = `url('https://mc-heads.net/body/${authUser.uuid}/right')`
} }
} }
user_text.innerHTML = username user_text.innerHTML = username
@ -165,14 +166,14 @@ function updateSelectedServer(serv){
} }
ConfigManager.setSelectedServer(serv != null ? serv.rawServer.id : null) ConfigManager.setSelectedServer(serv != null ? serv.rawServer.id : null)
ConfigManager.save() ConfigManager.save()
server_selection_button.innerHTML = '\u2022 ' + (serv != null ? serv.rawServer.name : 'No Server Selected') server_selection_button.innerHTML = (serv != null ? serv.rawServer.name : 'No Server Selected')
if(getCurrentView() === VIEWS.settings){ if(getCurrentView() === VIEWS.settings){
animateSettingsTabRefresh() animateSettingsTabRefresh()
} }
setLaunchEnabled(serv != null) setLaunchEnabled(serv != null)
} }
// Real text is set in uibinder.js on distributionIndexDone. // Real text is set in uibinder.js on distributionIndexDone.
server_selection_button.innerHTML = '\u2022 Loading..' server_selection_button.innerHTML = 'Loading..'
server_selection_button.onclick = async e => { server_selection_button.onclick = async e => {
e.target.blur() e.target.blur()
await toggleServerSelection(true) await toggleServerSelection(true)
@ -203,12 +204,12 @@ const refreshMojangStatuses = async function(){
if(service.essential){ if(service.essential){
tooltipEssentialHTML += `<div class="mojangStatusContainer"> tooltipEssentialHTML += `<div class="mojangStatusContainer">
<span class="mojangStatusIcon" style="color: ${MojangRestAPI.statusToHex(service.status)};">&#8226;</span> <span class="mojangStatusIcon" style="color: ${MojangRestAPI.statusToHex(service.status).replace('#a5c325','#16a34a')};">&#8226;</span>
<span class="mojangStatusName">${service.name}</span> <span class="mojangStatusName">${service.name}</span>
</div>` </div>`
} else { } else {
tooltipNonEssentialHTML += `<div class="mojangStatusContainer"> tooltipNonEssentialHTML += `<div class="mojangStatusContainer">
<span class="mojangStatusIcon" style="color: ${MojangRestAPI.statusToHex(service.status)};">&#8226;</span> <span class="mojangStatusIcon" style="color: ${MojangRestAPI.statusToHex(service.status).replace('#a5c325','#16a34a')};">&#8226;</span>
<span class="mojangStatusName">${service.name}</span> <span class="mojangStatusName">${service.name}</span>
</div>` </div>`
} }
@ -236,22 +237,27 @@ const refreshMojangStatuses = async function(){
document.getElementById('mojangStatusEssentialContainer').innerHTML = tooltipEssentialHTML document.getElementById('mojangStatusEssentialContainer').innerHTML = tooltipEssentialHTML
document.getElementById('mojangStatusNonEssentialContainer').innerHTML = tooltipNonEssentialHTML document.getElementById('mojangStatusNonEssentialContainer').innerHTML = tooltipNonEssentialHTML
document.getElementById('mojang_status_icon').style.color = MojangRestAPI.statusToHex(status) document.getElementById('mojang_status_icon').style.color = MojangRestAPI.statusToHex(status).replace('#a5c325','#16a34a')
} }
const refreshServerStatus = async (fade = false) => { const refreshServerStatus = async (fade = false) => {
loggerLanding.info('Refreshing Server Status') loggerLanding.info('Refreshing Server Status')
const serv = (await DistroAPI.getDistribution()).getServerById(ConfigManager.getSelectedServer()) const serv = (await DistroAPI.getDistribution()).getServerById(ConfigManager.getSelectedServer())
let pLabel = 'SERVEUR' let pLabel = ''
let pVal = 'HORS LIGNE' let pVal = '<span class="text-red-600">Serveur hors ligne</span>'
try { try {
const servStat = await getServerStatus(47, serv.hostname, serv.port) const servStat = await getServerStatus(47, serv.hostname, serv.port)
console.log(servStat) console.log(servStat)
pLabel = 'JOUEURS' pLabel = 'Sac a crottes connectés'
pVal = servStat.players.online + '/' + servStat.players.max if(!servStat.players.online){
pVal = 'Pas de sacs à crottes connectés'
}
else{
pVal = servStat.players.online +' sac'+(servStat.players.online>1 ? 's' : '')+' à crottes connecté'+(servStat.players.online>1 ? 's' : '')
}
} catch (err) { } catch (err) {
loggerLanding.warn('Unable to refresh server status, assuming offline.') loggerLanding.warn('Unable to refresh server status, assuming offline.')

View File

@ -70,7 +70,7 @@ async function showMainUI(data){
refreshServerStatus() refreshServerStatus()
setTimeout(() => { setTimeout(() => {
document.getElementById('frameBar').style.backgroundColor = 'rgba(0, 0, 0, 0.5)' document.getElementById('frameBar').style.backgroundColor = 'rgba(0, 0, 0, 0.5)'
document.body.style.backgroundImage = `url('assets/images/backgrounds/8.png')` // document.body.style.backgroundImage = `url('assets/images/backgrounds/8.png')`
$('#main').show() $('#main').show()
const isLoggedIn = Object.keys(ConfigManager.getAuthAccounts()).length > 0 const isLoggedIn = Object.keys(ConfigManager.getAuthAccounts()).length > 0
@ -99,7 +99,7 @@ async function showMainUI(data){
setTimeout(() => { setTimeout(() => {
$('#loadingContainer').fadeOut(500, () => { $('#loadingContainer').fadeOut(500, () => {
$('#loadSpinnerImage').removeClass('rotating') // $('#loadSpinnerImage').removeClass('rotating')
}) })
}, 250) }, 250)

65
app/assets/js/tailwind.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,101 +1,87 @@
<div id="landingContainer" style="display: none;"> <div id="landingContainer" style="display: none;">
<div id="upper">
<div id="left">
<div class="absolute inset-0 flex flex-col z-50 p-4">
<div class="flex w-full items-center justify-between">
<div id="image_seal_container"> <div id="image_seal_container">
<!-- <img id="image_seal" src="assets/images/SealCircle.png"/>--> <img src="assets/images/SealCircle.png"/>
<div id="updateAvailableTooltip">Update Available</div> <div id="updateAvailableTooltip">Update Available</div>
</div> </div>
</div> <div>
<div id="content">
</div>
<div id="right">
<div id="rightContainer">
<div id="user_content"> <div id="user_content">
<span id="user_text">Username</span> <span id="user_text">Username</span>
<div id="avatarContainer"> <div id="avatarContainer">
<button id="avatarOverlay"> <svg id="settingsSVG" class="mediaSVG" viewBox="0 0 141.36 137.43"> <button id="avatarOverlay">
<svg id="settingsSVG" class="mediaSVG" viewBox="0 0 141.36 137.43">
<path d="M70.70475616319865,83.36934004916053 a15.320781354859122,15.320781354859122 0 1 1 14.454501310561755,-15.296030496450625 A14.850515045097694,14.850515045097694 0 0 1 70.70475616319865,83.36934004916053 M123.25082856443602,55.425620905968366 h-12.375429204248078 A45.54157947163293,45.54157947163293 0 0 0 107.21227231573047,46.243052436416285 l8.613298726156664,-9.108315894326587 a9.727087354538993,9.727087354538993 0 0 0 0,-13.167456673319956 l-3.465120177189462,-3.6631270444574313 a8.489544434114185,8.489544434114185 0 0 0 -12.375429204248078,0 l-8.613298726156664,9.108315894326587 A40.442902639482725,40.442902639482725 0 0 0 81.99114759747292,25.427580514871032 V12.532383284044531 a9.108315894326587,9.108315894326587 0 0 0 -8.811305593424633,-9.306322761594556 h-4.950171681699231 a9.108315894326587,9.108315894326587 0 0 0 -8.811305593424633,9.306322761594556 v12.895197230826497 a40.17064319698927,40.17064319698927 0 0 0 -9.331073620003052,4.0591407789933704 l-8.613298726156664,-9.108315894326587 a8.489544434114185,8.489544434114185 0 0 0 -12.375429204248078,0 L25.58394128451018,23.967279868769744 a9.727087354538993,9.727087354538993 0 0 0 0,13.167456673319956 L34.19724001066683,46.243052436416285 a45.07131316187151,45.07131316187151 0 0 0 -3.6631270444574313,9.083565035918088 h-12.375429204248078 a9.083565035918088,9.083565035918088 0 0 0 -8.811305593424633,9.306322761594556 v5.197680265784193 a9.108315894326587,9.108315894326587 0 0 0 8.811305593424633,9.306322761594556 h11.979415469712139 a45.69008462208391,45.69008462208391 0 0 0 4.0591407789933704,10.642869115653347 l-8.613298726156664,9.108315894326587 a9.727087354538993,9.727087354538993 0 0 0 0,13.167456673319956 l3.465120177189462,3.6631270444574313 a8.489544434114185,8.489544434114185 0 0 0 12.375429204248078,0 l8.613298726156664,-9.108315894326587 a40.49240435629971,40.49240435629971 0 0 0 9.331073620003052,4.0591407789933704 v12.895197230826497 a9.083565035918088,9.083565035918088 0 0 0 8.811305593424633,9.306322761594556 h4.950171681699231 A9.083565035918088,9.083565035918088 0 0 0 81.99114759747292,123.68848839660077 V110.79329116577425 a40.78941465720167,40.78941465720167 0 0 0 9.331073620003052,-4.0591407789933704 l8.613298726156664,9.108315894326587 a8.489544434114185,8.489544434114185 0 0 0 12.375429204248078,0 l3.465120177189462,-3.6631270444574313 a9.727087354538993,9.727087354538993 0 0 0 0,-13.167456673319956 l-8.613298726156664,-9.108315894326587 a45.665333763675406,45.665333763675406 0 0 0 4.034389920584874,-10.642869115653347 h12.004166328120636 a9.108315894326587,9.108315894326587 0 0 0 8.811305593424633,-9.306322761594556 v-5.197680265784193 a9.083565035918088,9.083565035918088 0 0 0 -8.811305593424633,-9.306322761594556 " id="svg_3" class=""/> <path d="M70.70475616319865,83.36934004916053 a15.320781354859122,15.320781354859122 0 1 1 14.454501310561755,-15.296030496450625 A14.850515045097694,14.850515045097694 0 0 1 70.70475616319865,83.36934004916053 M123.25082856443602,55.425620905968366 h-12.375429204248078 A45.54157947163293,45.54157947163293 0 0 0 107.21227231573047,46.243052436416285 l8.613298726156664,-9.108315894326587 a9.727087354538993,9.727087354538993 0 0 0 0,-13.167456673319956 l-3.465120177189462,-3.6631270444574313 a8.489544434114185,8.489544434114185 0 0 0 -12.375429204248078,0 l-8.613298726156664,9.108315894326587 A40.442902639482725,40.442902639482725 0 0 0 81.99114759747292,25.427580514871032 V12.532383284044531 a9.108315894326587,9.108315894326587 0 0 0 -8.811305593424633,-9.306322761594556 h-4.950171681699231 a9.108315894326587,9.108315894326587 0 0 0 -8.811305593424633,9.306322761594556 v12.895197230826497 a40.17064319698927,40.17064319698927 0 0 0 -9.331073620003052,4.0591407789933704 l-8.613298726156664,-9.108315894326587 a8.489544434114185,8.489544434114185 0 0 0 -12.375429204248078,0 L25.58394128451018,23.967279868769744 a9.727087354538993,9.727087354538993 0 0 0 0,13.167456673319956 L34.19724001066683,46.243052436416285 a45.07131316187151,45.07131316187151 0 0 0 -3.6631270444574313,9.083565035918088 h-12.375429204248078 a9.083565035918088,9.083565035918088 0 0 0 -8.811305593424633,9.306322761594556 v5.197680265784193 a9.108315894326587,9.108315894326587 0 0 0 8.811305593424633,9.306322761594556 h11.979415469712139 a45.69008462208391,45.69008462208391 0 0 0 4.0591407789933704,10.642869115653347 l-8.613298726156664,9.108315894326587 a9.727087354538993,9.727087354538993 0 0 0 0,13.167456673319956 l3.465120177189462,3.6631270444574313 a8.489544434114185,8.489544434114185 0 0 0 12.375429204248078,0 l8.613298726156664,-9.108315894326587 a40.49240435629971,40.49240435629971 0 0 0 9.331073620003052,4.0591407789933704 v12.895197230826497 a9.083565035918088,9.083565035918088 0 0 0 8.811305593424633,9.306322761594556 h4.950171681699231 A9.083565035918088,9.083565035918088 0 0 0 81.99114759747292,123.68848839660077 V110.79329116577425 a40.78941465720167,40.78941465720167 0 0 0 9.331073620003052,-4.0591407789933704 l8.613298726156664,9.108315894326587 a8.489544434114185,8.489544434114185 0 0 0 12.375429204248078,0 l3.465120177189462,-3.6631270444574313 a9.727087354538993,9.727087354538993 0 0 0 0,-13.167456673319956 l-8.613298726156664,-9.108315894326587 a45.665333763675406,45.665333763675406 0 0 0 4.034389920584874,-10.642869115653347 h12.004166328120636 a9.108315894326587,9.108315894326587 0 0 0 8.811305593424633,-9.306322761594556 v-5.197680265784193 a9.083565035918088,9.083565035918088 0 0 0 -8.811305593424633,-9.306322761594556 " id="svg_3" class=""/>
</svg></button> </svg>
</button>
</div> </div>
</div> </div>
<div id="mediaContent"> <div id="mediaContent">
<div id="internalMedia"> <div id="internalMedia">
<div class="mediaContainer" id="settingsMediaContainer"> <div class="mediaContainer" id="settingsMediaContainer">
<button class="mediaButton" id="settingsMediaButton"> <button class="mediaButton" id="settingsMediaButton">
<svg id="settingsSVG" class="mediaSVG" viewBox="0 0 141.36 137.43">
<path d="M70.70475616319865,83.36934004916053 a15.320781354859122,15.320781354859122 0 1 1 14.454501310561755,-15.296030496450625 A14.850515045097694,14.850515045097694 0 0 1 70.70475616319865,83.36934004916053 M123.25082856443602,55.425620905968366 h-12.375429204248078 A45.54157947163293,45.54157947163293 0 0 0 107.21227231573047,46.243052436416285 l8.613298726156664,-9.108315894326587 a9.727087354538993,9.727087354538993 0 0 0 0,-13.167456673319956 l-3.465120177189462,-3.6631270444574313 a8.489544434114185,8.489544434114185 0 0 0 -12.375429204248078,0 l-8.613298726156664,9.108315894326587 A40.442902639482725,40.442902639482725 0 0 0 81.99114759747292,25.427580514871032 V12.532383284044531 a9.108315894326587,9.108315894326587 0 0 0 -8.811305593424633,-9.306322761594556 h-4.950171681699231 a9.108315894326587,9.108315894326587 0 0 0 -8.811305593424633,9.306322761594556 v12.895197230826497 a40.17064319698927,40.17064319698927 0 0 0 -9.331073620003052,4.0591407789933704 l-8.613298726156664,-9.108315894326587 a8.489544434114185,8.489544434114185 0 0 0 -12.375429204248078,0 L25.58394128451018,23.967279868769744 a9.727087354538993,9.727087354538993 0 0 0 0,13.167456673319956 L34.19724001066683,46.243052436416285 a45.07131316187151,45.07131316187151 0 0 0 -3.6631270444574313,9.083565035918088 h-12.375429204248078 a9.083565035918088,9.083565035918088 0 0 0 -8.811305593424633,9.306322761594556 v5.197680265784193 a9.108315894326587,9.108315894326587 0 0 0 8.811305593424633,9.306322761594556 h11.979415469712139 a45.69008462208391,45.69008462208391 0 0 0 4.0591407789933704,10.642869115653347 l-8.613298726156664,9.108315894326587 a9.727087354538993,9.727087354538993 0 0 0 0,13.167456673319956 l3.465120177189462,3.6631270444574313 a8.489544434114185,8.489544434114185 0 0 0 12.375429204248078,0 l8.613298726156664,-9.108315894326587 a40.49240435629971,40.49240435629971 0 0 0 9.331073620003052,4.0591407789933704 v12.895197230826497 a9.083565035918088,9.083565035918088 0 0 0 8.811305593424633,9.306322761594556 h4.950171681699231 A9.083565035918088,9.083565035918088 0 0 0 81.99114759747292,123.68848839660077 V110.79329116577425 a40.78941465720167,40.78941465720167 0 0 0 9.331073620003052,-4.0591407789933704 l8.613298726156664,9.108315894326587 a8.489544434114185,8.489544434114185 0 0 0 12.375429204248078,0 l3.465120177189462,-3.6631270444574313 a9.727087354538993,9.727087354538993 0 0 0 0,-13.167456673319956 l-8.613298726156664,-9.108315894326587 a45.665333763675406,45.665333763675406 0 0 0 4.034389920584874,-10.642869115653347 h12.004166328120636 a9.108315894326587,9.108315894326587 0 0 0 8.811305593424633,-9.306322761594556 v-5.197680265784193 a9.083565035918088,9.083565035918088 0 0 0 -8.811305593424633,-9.306322761594556 " id="svg_3" class=""/>
</svg>
<div id="settingsTooltip">Settings</div>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="lower"> <div class="flex h-full items-center justify-center"><%- include('animation') %></div>
<div id="left"> <div class="grid grid-cols-3">
<div class="bot_wrapper"> <div>
<div id="content"> <div id="server_status_wrapper">
<div id="server_status_wrapper"> <span id="landingPlayerLabel" class="hidden"></span>
<span class="bot_label" id="landingPlayerLabel">SERVER</span> <span id="player_count"><span class="text-red-600">Serveur hors ligne</span></span>
<span id="player_count">OFFLINE</span> </div>
</div> <div id="mojangStatusWrapper">
<div class="bot_divider"></div> <span class="bot_label">Mojang status</span>
<div id="mojangStatusWrapper"> <span id="mojang_status_icon"></span>
<span class="bot_label">MOJANG STATUS</span> <div id="mojangStatusTooltip">
<span id="mojang_status_icon">&#8226;</span> <div id="mojangStatusTooltipTitle">Services</div>
<div id="mojangStatusTooltip"> <div id="mojangStatusEssentialContainer">
<div id="mojangStatusTooltipTitle">Services</div> </div>
<div id="mojangStatusEssentialContainer"> <div id="mojangStatusNEContainer">
<!-- Essential Mojang services are populated here. --> <div class="mojangStatusNEBar"></div>
</div> <div id="mojangStatusNETitle">Non&nbsp;Essential</div>
<div id="mojangStatusNEContainer"> <div class="mojangStatusNEBar"></div>
<div class="mojangStatusNEBar"></div> </div>
<div id="mojangStatusNETitle">Non&nbsp;Essential</div> <div id="mojangStatusNonEssentialContainer">
<div class="mojangStatusNEBar"></div>
</div>
<div id="mojangStatusNonEssentialContainer">
<!-- Non Essential Mojang services are populated here. -->
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="flex items-center justify-center">
<div id="center">
<div class="bot_wrapper"> <div class="rounded-full bg-bat px-7 py-1.5 font-bold text-xl w-max cursor-pointer hover:transform hover:scale-110 transition-all" id="launch_button">Jouer</div>
<div id="content">
<button id="newsButton"> <div id="launch_details" class="w-40">
<!--<img src="assets/images/icons/arrow.svg" id="newsButtonSVG"/>-->
<div id="newsButtonAlert" style="display: none;"></div>
<svg id="newsButtonSVG" viewBox="0 0 24.87 13.97">
<defs>
<style>.arrowLine{fill:none;stroke:#FFF;stroke-width:2px;}</style>
</defs>
<polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
</svg>
&#10;<span id="newsButtonText">NEWS</span>
</button>
</div>
</div>
</div>
<div id="right">
<div class="bot_wrapper">
<div id="launch_content">
<button id="launch_button">PLAY</button>
<div class="bot_divider"></div>
<button id="server_selection_button" class="bot_label">&#8226; No Server Selected</button>
</div>
<div id="launch_details">
<div id="launch_details_left"> <div id="launch_details_left">
<span id="launch_progress_label">0%</span> <span id="launch_progress_label">0%</span>
<div class="bot_divider"></div>
</div> </div>
<div id="launch_details_right"> <div id="launch_details_right">
<progress id="launch_progress" value="22" max="100"></progress> <div class="h-1 rounded-full bg-bat" style="width:25%"></div>
<span id="launch_details_text" class="bot_label">Please wait..</span> <!-- <progress id="launch_progress" value="22" max="100"></progress> -->
<span id="launch_details_text" class="bot_label mt-1">Please wait..</span>
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-col items-end justify-center">
<div class="font-semibold text-sm">Serveur sélectionné</div>
<button id="server_selection_button" class="text-sm hover:text-bat">No Server Selected</button>
</div>
</div> </div>
</div> </div>
<div id="newsContainer"> <div id="newsContainer">
<div id="newsContent" article="-1" style="display: none;"> <div id="newsContent" article="-1" style="display: none;">
@ -137,7 +123,6 @@
<div id="newsArticleContainer"> <div id="newsArticleContainer">
<div id="newsArticleContent"> <div id="newsArticleContent">
<div id="newsArticleContentScrollable"> <div id="newsArticleContentScrollable">
<!-- Article Content -->
</div> </div>
</div> </div>
</div> </div>

View File

@ -227,6 +227,7 @@ function createWindow() {
height: 552, height: 552,
icon: getPlatformIcon('SealCircle'), icon: getPlatformIcon('SealCircle'),
frame: false, frame: false,
resizable: false,
webPreferences: { webPreferences: {
preload: path.join(__dirname, 'app', 'assets', 'js', 'preloader.js'), preload: path.join(__dirname, 'app', 'assets', 'js', 'preloader.js'),
nodeIntegration: true, nodeIntegration: true,
@ -246,7 +247,19 @@ function createWindow() {
win.removeMenu() win.removeMenu()
win.resizable = true console.log(process.argv)
if(process.argv.includes('--dev')){
win.webContents.on('before-input-event', (event, input) => {
if (input['type'] == 'keyUp' && input['key'] == 'F5') {
win.reload()
event.preventDefault()
}
})
win.webContents.openDevTools()
}
win.resizable = false
win.on('closed', () => { win.on('closed', () => {
win = null win = null

View File

@ -12,7 +12,7 @@
"private": false, "private": false,
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"start": "electron .", "start": "electron . --dev",
"dist": "electron-builder build", "dist": "electron-builder build",
"dist:win": "npm run dist -- -w", "dist:win": "npm run dist -- -w",
"dist:mac": "npm run dist -- -m", "dist:mac": "npm run dist -- -m",