Redesign

insiration taken from:  https://github.com/2nd-Life/esx_kashacters

esx_kashacters/html/css/main.css

@@ -63,17 +63,16 @@ p {
 
 .character-box {
     background: rgba(44, 51, 69, 0.6);
-    color: #fff;
     padding: 10px;
     text-align: center;
     border: 2px solid transparent;
     border-radius: 2px;
     margin-top: 15%;
-    width: 20%;
+    width: 17.5%;
 }
 
 .character-box:hover {
-    background-color: rgb(44, 51, 69); 
+    background-color: rgb(34, 31, 39); 
     color: #fff;
 }
 
@@ -95,6 +94,7 @@ p {
 
 .character-info {
     text-align: left!important;
+    color: rgb(255, 255, 255);
 }
 
 .character-buttons {

esx_kashacters/html/js/app.js

@@ -1,7 +1,7 @@
 $(".character-box").hover(
     function() {
         $(this).css({
-            "background": "rgb(44, 51, 69)",
+            "background": "rgb(34, 31, 39)",
             "transition": "200ms",
         });
     }, function() {
@@ -12,6 +12,13 @@ $(".character-box").hover(
     }
 );
 
+$(document).ready(() => {
+	$(".character-info-new").html(translate.new)
+	$(".btn-delete").html(translate.delete);
+	$(".modalTitle").html(translate.modalTitle);
+	$(".modalText").html(translate.modalText);
+});
+
 $(".character-box").click(function () {
     $(".character-box").removeClass('active-char');
     $(this).addClass('active-char');
@@ -25,9 +32,9 @@ $(".character-box").click(function () {
 
 $(".character-box").click(function () {
     if ($(this).attr("data-ischar") === "true") {
-        $("#play-char").html('PLAY');
+        $("#play-char").html(translate.play);
     } else {
-        $("#play-char").html('CREATE CHARACTER');
+        $("#play-char").html(translate.playNew);
     }
 });
 
@@ -57,7 +64,7 @@ $("#deletechar").click(function () {
             $.each(data.characters, function (index, char) {
                 if (char.charid !== 0) {
                     var charid = char.identifier.charAt(4);
-                    $('[data-charid=' + charid + ']').html('<h3 class="character-fullname">'+ char.firstname +'</h3><div class="character-info"><p class="character-info-name"><strong>Name: </strong><span>'+ char.firstname +' '+ char.lastname +'</span></p><p class="character-info-work"><strong>Work: </strong><span>'+ char.job +' '+ char.job_grade +'</span></p><p class="character-info-money"><strong>Cash: </strong><span>'+ char.money +'</span></p><p class="character-info-bank"><strong>Bank: </strong><span>'+ char.bank +'</span></p> <p class="character-info-dateofbirth"><strong>Date of birth: </strong><span>'+ char.dateofbirth +'</span></p> <p class="character-info-gender"><strong>Gender: </strong><span>'+ char.sex +'</span></p></div>').attr("data-ischar", "true");
+                    $('[data-charid=' + charid + ']').html('<h3 class="character-fullname">'+ char.firstname +'</h3><div class="character-info"><p class="character-info-name"><strong>' + `${translate.name}: ` + '</strong><span>' + char.firstname +' '+ char.lastname +'</span></p><p class="character-info-work"><strong>' + `${translate.job}: ` + '</strong><span>'+ char.job +' '+ char.job_grade +'</span></p><p class="character-info-money"><strong>' + `${translate.money}: ` + '</strong><span> $'+ char.money +'</span></p><p class="character-info-bank"><strong>' + `${translate.bank}: ` + '</strong><span> $'+ char.bank +'</span></p> <p class="character-info-dateofbirth"><strong>' + `${translate.dob}: ` + '</strong><span>'+ char.dateofbirth +'</span></p> <p class="character-info-gender"><strong>' + `${translate.gender}: ` + '</strong><span>'+ char.sex +'</span></p></div>').attr("data-ischar", "true");
                 }
             });
         }
@@ -68,7 +75,7 @@ $("#deletechar").click(function () {
         $('.main-container').css({"display":"none"});
         $(".character-box").removeClass('active-char');
         $("#delete").css({"display":"none"});
-		$(".character-box").html('<h3 class="character-fullname"><i class="fas fa-plus"></i></h3><div class="character-info"><p class="character-info-new">Create new character</p></div>').attr("data-ischar", "false");
+		$(".character-box").html('<h3 class="character-fullname">Empty Slot</h3><div class="character-info"><p class="character-info-new">' + `${translate.new}` + '</p></div>').attr("data-ischar", "false");
     };
     window.onload = function(e) {
         window.addEventListener('message', function(event) {

esx_kashacters/html/locales/en.js

@@ -1,12 +1,14 @@
 const translate = new Object();
 
+translate.name = "Name";
 translate.job = "Job";
 translate.bank = "Bank";
 translate.money = "Cash";
 translate.gender = "Gender";
 translate.dob = "Date of birth";
-translate.new = "Create new character";
+translate.new = "";
 translate.delete = "DELETE";
 translate.play = "PLAY";
+translate.playNew = "CREATE CHARACTER";
 translate.modalTitle = "Are You Sure?";
 translate.modalText = "By deleting your account we won't be able to recover it, all properties, cars etc. will be deleted";

esx_kashacters/html/ui.html

@@ -7,7 +7,9 @@
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
         <!-- Bootstrap CSS -->
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-        <!-- Google Fonts -->
+        <!-- Locales -->
+		<script src="locales/en.js"></script>
+		<!-- Google Fonts -->
         <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
     </head>
     <body style="background-color: rgba(0, 0, 0, 0.11);font-family: 'Roboto', sans-serif !important;display: block;">
@@ -40,7 +42,6 @@
                         <p class="character-info-new"></p>
                     </div>
                 </div>
-
             </div>
             <div class="character-buttons" >
                 <button class="btn btn-play" id="play-char">PLAY</button>
@@ -55,9 +56,9 @@
                         <button type="button" class="close" data-dismiss="modal">&times;</button>
                     </div>
                     <div class="modal-body">
-                        <h5>Are You Sure?</h5>
+                        <h5 class="modalTitle">Are You Sure?</h5>
                         <hr>
-                        <p>By deleting your account we won't be able to recover it, all properties, cars etc. will be deleted</p>
+                        <p class="modalText">By deleting your account we won't be able to recover it, all properties, cars etc. will be deleted</p>
                         <hr>
                         <div class="modal-footer">
                             <button id="deletechar" class="btn btn-delete" data-toggle="modal" data-dismiss="modal">DELETE</button>