From 556277f6925f36b9757a0d8445c40a238ef94f5d Mon Sep 17 00:00:00 2001 From: Henric Backman Date: Wed, 29 Apr 2020 21:38:25 +0200 Subject: [PATCH] udpate design --- esx_kashacters/html/css/main.css | 201 ++++++++++++++++++++++++++----- esx_kashacters/html/js/app.js | 19 ++- esx_kashacters/html/ui.html | 49 +++----- 3 files changed, 203 insertions(+), 66 deletions(-) diff --git a/esx_kashacters/html/css/main.css b/esx_kashacters/html/css/main.css index 1093ac5a..63f743fc 100644 --- a/esx_kashacters/html/css/main.css +++ b/esx_kashacters/html/css/main.css @@ -6,33 +6,91 @@ p { margin: 0 !important; } +.top1 { + display:flex; + width: 100%; + height: 45px; + background-color: rgb(0, 0, 0); +} +.top2 { + display:flex; + width: 100%; + height: 5px; + background-color: rgb(161, 52, 52); +} +.bottom1 { + display:flex; + width: 100%; + height: 5px; + position: fixed; + bottom: 55; + background-color: rgb(161, 52, 52); +} +.bottom2 { + display:flex; + width: 100%; + height: 55px; + position: fixed; + bottom: 0; + background-color: rgb(0, 0, 0); +} + +.weiß { + background-color: rgba(1, 9, 30, 0.0); + font-size: 18px; + background-size: cover; + position: absolute; + width: 100%; + height: 90%; + top: 10%; + overflow: hidden; +} + .main-container { - display:none; - width: 70vw; - margin: auto; + display:flex; + width: 100%; position: relative; - top: 35vh; + top: 0%; } .character-container { - width: 100%; - margin: auto; + width: 90%; + height: 54%; + margin-left: 5%; display: flex; justify-content: space-between; } .character-box { - color: #FFFFFF; - background: rgba(0,0,0,0.6); - padding: 20px; + 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%; } .character-box:hover { - background: rgba(42, 125, 193,1.0); - border-radius: 5px; - transition: 200ms; + background-color: rgb(44, 51, 69); + color: #fff; +} + +.character-box:active { + background-color: rgb(42, 42, 52); + color: #fff; +} + +.character-fullname { + border-bottom: 3px solid; + border-color: rgba(161, 52, 52, 0.8); + padding-bottom: 5px; + color: rgb(113, 234, 255); +} + +.h3 .fas fa-plus { + color: #fff; } .character-info { @@ -45,27 +103,104 @@ p { margin:15px auto; } -.btn-play { - background: #43A047; - color: #FFFFFF; - - margin-right: 10px; -} - -.btn-play:hover { - background: #2eb72c; -} - .btn-delete { - background: #930b0b; - color: #FFFFFF; -} + float: left; + font-size: 24px; + letter-spacing: 2px; + text-transform: uppercase; + display: inline-block; + background-color: rgba(0,0,0,0); + color: #fff; + text-align: center; + width: 270px; + font-weight: bold; + padding: 20px 10px; + border: 3px solid #fe8b30; + color: #2c3345; + border-radius: 2px; + position: relative; + z-index: 2; + margin-top: 4%; + } + .btn-delete:before { + -webkit-transition: 0.5s all ease; + transition: 0.5s all ease; + position: absolute; + top: 0; + left: 50%; + right: 50%; + bottom: 0; + opacity: 0; + content: ''; + background-color: #fe8b30; + color: #fff; + z-index: -1; + } + .btn-delete:hover:before { + -webkit-transition: 0.5s all ease; + transition: 0.5s all ease; + left: 0; + right: 0; + opacity: 1; + } + .btn-delete:focus:before { + -webkit-transition: 0.5s all ease; + transition: 0.5s all ease; + left: 0; + right: 0; + opacity: 1; + } + + .btn-play { + float: left; + background-color: rgba(0, 0, 0, 0.3); + font-size: 24px; + letter-spacing: 2px; + text-transform: uppercase; + display: inline-block; + text-align: center; + width: 270px; + font-weight: bold; + padding: 2 0px 10px; + border: 3px solid #4ED84C; + color: #ffffff; + border-radius: 2px; + position: relative; + z-index: 2; + margin-right: 7.5%; + margin-left: 32%; + margin-top: 4%; + } + .btn-play:before { + -webkit-transition: 0.5s all ease; + transition: 0.5s all ease; + position: absolute; + top: 0; + left: 50%; + right: 50%; + bottom: 0; + opacity: 0; + content: ''; + background-color: #4ED84C; + color: #fff; + z-index: -1; + } + .btn-play:hover:before { + -webkit-transition: 0.5s all ease; + transition: 0.5s all ease; + left: 0; + right: 0; + opacity: 1; + } + .btn-play:focus:before { + -webkit-transition: 0.5s all ease; + transition: 0.5s all ease; + left: 0; + right: 0; + opacity: 1; + } -.btn-delete:hover { - background: #b50c0c; -} - -.active-char { - border: 2px solid rgba(0,0,0,0.4); -} + .active-char { + border: 3px solid #a13434; + } diff --git a/esx_kashacters/html/js/app.js b/esx_kashacters/html/js/app.js index 841b5fad..153d2cf1 100644 --- a/esx_kashacters/html/js/app.js +++ b/esx_kashacters/html/js/app.js @@ -1,13 +1,13 @@ $(".character-box").hover( function() { $(this).css({ - "background": "rgba(42, 125, 193, 1.0)", + "background": "rgb(44, 51, 69)", "transition": "200ms", }); }, function() { $(this).css({ - "background": "rgba(0,0,0,0.6)", - "transition": "200ms", + "background": "rgba(44, 51, 69, 0.6)", + "transition": "200ms", }); } ); @@ -23,6 +23,15 @@ $(".character-box").click(function () { } }); +$(".character-box").click(function () { + if ($(this).attr("data-ischar") === "true") { + $("#play-char").html('PLAY'); + } else { + $("#play-char").html('CREATE CHARACTER'); + } +}); + + $("#play-char").click(function () { $.post("http://esx_kashacters/CharacterChosen", JSON.stringify({ charid: $('.active-char').attr("data-charid"), @@ -42,18 +51,20 @@ $("#deletechar").click(function () { Kashacter = {}; Kashacter.ShowUI = function(data) { + $('body').css({"display":"block"}); $('.main-container').css({"display":"block"}); if(data.characters !== null) { $.each(data.characters, function (index, char) { if (char.charid !== 0) { var charid = char.identifier.charAt(4); - $('[data-charid=' + charid + ']').html('

'+ char.firstname +' '+ char.lastname +'

Work: '+ char.job +' '+ char.job_grade +'

Cash: '+ char.money +'

Bank: '+ char.bank +'

Date of birth: '+ char.dateofbirth +'

Gender: '+ char.sex +'

').attr("data-ischar", "true"); + $('[data-charid=' + charid + ']').html('

'+ char.firstname +'

Name: '+ char.firstname +' '+ char.lastname +'

Work: '+ char.job +' '+ char.job_grade +'

Cash: '+ char.money +'

Bank: '+ char.bank +'

Date of birth: '+ char.dateofbirth +'

Gender: '+ char.sex +'

').attr("data-ischar", "true"); } }); } }; Kashacter.CloseUI = function() { + $('body').css({"display":"none"}); $('.main-container').css({"display":"none"}); $(".character-box").removeClass('active-char'); $("#delete").css({"display":"none"}); diff --git a/esx_kashacters/html/ui.html b/esx_kashacters/html/ui.html index d8c481d5..e566692d 100644 --- a/esx_kashacters/html/ui.html +++ b/esx_kashacters/html/ui.html @@ -10,55 +10,44 @@ - -
-
+ +
+
+
+

Empty Slot

-

Create new character

+

Empty Slot

-

Create new character

+

Empty Slot

-

Create new character

+

Empty Slot

-

Create new character

-
-
-
-

Empty Slot

-
-

Create new character

-
-
-
-

Empty Slot

-
-

Create new character

+

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