diff --git a/[core]/esx_multicharacter/html/css/main.css b/[core]/esx_multicharacter/html/css/main.css index c8b969f1..11c38dff 100644 --- a/[core]/esx_multicharacter/html/css/main.css +++ b/[core]/esx_multicharacter/html/css/main.css @@ -1,76 +1,76 @@ -@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;600&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;600&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap"); * { - margin: 0; - padding: 0; - user-select: none; - color: rgb(255, 255, 255); - border-radius: 15px; - font-weight: 300; - font-size: 1.6vh; - font-family: Calibri, "Helvetica", san-serif; + margin: 0; + padding: 0; + user-select: none; + color: rgb(255, 255, 255); + border-radius: 15px; + font-weight: 300; + font-size: 1.6vh; + font-family: Calibri, "Helvetica", san-serif; } html { - overflow: hidden; + overflow: hidden; } p { - margin: 0 !important; + margin: 0 !important; } body { - background: transparent; + background: transparent; } .main-container { - display:none; - position: absolute; - top: 50%; - right: 150; - transform: translate(0, -50%); - border-radius: 15px; - background: rgba(15,15,15, 0.9); + display: none; + position: absolute; + top: 50%; + right: 150; + transform: translate(0, -50%); + border-radius: 15px; + background: rgba(15, 15, 15, 0.9); } .header { - font-family: 'Oswald', sans-serif; - position: absolute; - background: rgba(10, 10, 10, 0.9); - border-radius: 15px 15px 0px 0px; - height: 10%; - width: 100%; - left: 50%; - text-align: center; - transform: translate(-50%); - font-weight: 700; - padding-bottom: 5px; - font-size: 1.6rem; + font-family: "Oswald", sans-serif; + position: absolute; + background: rgba(10, 10, 10, 0.9); + border-radius: 15px 15px 0px 0px; + height: 10%; + width: 100%; + left: 50%; + text-align: center; + transform: translate(-50%); + font-weight: 700; + padding-bottom: 5px; + font-size: 1.6rem; } .footer { - position: absolute; - font-size: 0rem; + position: absolute; + font-size: 0rem; } .character-box { - display: flex; - right: 0; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - line-height: 1.4rem; - height: calc(30rem); - width: 17rem; - border: 1px rgba(10,10,10,0.7) solid; - box-shadow: 2px 1px 9px 3px rgba(10,10,10,0.7); + display: flex; + right: 0; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + line-height: 1.4rem; + height: calc(30rem); + width: 17rem; + border: 1px rgba(10, 10, 10, 0.7) solid; + box-shadow: 2px 1px 9px 3px rgba(10, 10, 10, 0.7); } h1 { - font-family: 'Oswald', sans-serif; - font-size: 22px; - padding-top: 1.3rem; - display: block; - font-weight: 0; + font-family: "Oswald", sans-serif; + font-size: 22px; + padding-top: 1.3rem; + display: block; + font-weight: 0; } diff --git a/[core]/esx_multicharacter/html/js/app.js b/[core]/esx_multicharacter/html/js/app.js index 22b5c92c..20b2a0b9 100644 --- a/[core]/esx_multicharacter/html/js/app.js +++ b/[core]/esx_multicharacter/html/js/app.js @@ -1,35 +1,68 @@ -var money = Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', - minimumFractionDigits: 0 +var money = Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + minimumFractionDigits: 0, }); (() => { - Kashacter = {}; + Kashacter = {}; - Kashacter.ShowUI = function(data) { - $('body').css({"display":"block"}); - $('.main-container').css({"display":"block"}); - $('[data-charid=1]').html('

' + `${translate.name} ` + '

' + data.firstname +' '+ data.lastname +'

' + `${translate.job} ` + '

'+ data.job +' '+ data.job_grade +'

' + `${translate.money} ` + '

'+ money.format(data.money) +'

' + `${translate.bank} ` + '

'+ money.format(data.bank) +'

' + `${translate.dob} ` + '

'+ data.dateofbirth +'

' + `${translate.gender} ` + '

'+ data.sex +'

').attr("data-ischar", "true"); - }; + Kashacter.ShowUI = function (data) { + $("body").css({ display: "block" }); + $(".main-container").css({ display: "block" }); + $("[data-charid=1]") + .html( + '

' + + `${translate.name} ` + + "

" + + data.firstname + + " " + + data.lastname + + '

' + + `${translate.job} ` + + "

" + + data.job + + " " + + data.job_grade + + '

' + + `${translate.money} ` + + "

" + + money.format(data.money) + + '

' + + `${translate.bank} ` + + "

" + + money.format(data.bank) + + '

' + + `${translate.dob} ` + + "

" + + data.dateofbirth + + '

' + + `${translate.gender} ` + + "

" + + data.sex + + "

" + ) + .attr("data-ischar", "true"); + }; - Kashacter.CloseUI = function() { - $('body').css({"display":"none"}); - $('.main-container').css({"display":"none"}); - $('[data-charid=1]').html('

'); - }; - - window.onload = function(e) { - window.addEventListener('message', function(event) { - switch(event.data.action) { - case 'openui': - Kashacter.ShowUI(event.data.character); - break; - case 'closeui': - Kashacter.CloseUI(); - break; - } - }) - } + Kashacter.CloseUI = function () { + $("body").css({ display: "none" }); + $(".main-container").css({ display: "none" }); + $("[data-charid=1]").html( + '

' + ); + }; + window.onload = function (e) { + window.addEventListener("message", function (event) { + switch (event.data.action) { + case "openui": + Kashacter.ShowUI(event.data.character); + break; + case "closeui": + Kashacter.CloseUI(); + break; + } + }); + }; })(); diff --git a/[core]/esx_multicharacter/html/ui.html b/[core]/esx_multicharacter/html/ui.html index 3ca18eed..5f6a489c 100644 --- a/[core]/esx_multicharacter/html/ui.html +++ b/[core]/esx_multicharacter/html/ui.html @@ -1,24 +1,29 @@ - - - - - - - - - -
-
Character Info
-
-

-
-
-
Multicharacter
-
- + + + + + + + + + +
+
Character Info
+
+

+
+
+
Multicharacter
- + - - \ No newline at end of file + +