starred/esx_core
1
0
Fork 0
mirror of https://github.com/esx-framework/esx_core.git synced 2026-09-03 03:38:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

udpate design

Browse Source
This commit is contained in:
Henric Backman
2020-04-29 21:38:25 +02:00
parent aaf65fed75
commit 556277f692
3 changed files with 203 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
esx_kashacters/html/css/main.css
+168 -33
View File
@@ -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;
}
esx_kashacters/html/js/app.js
+15 -4
View File
@@ -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('<h3 class="character-fullname">'+ char.firstname +' '+ char.lastname +'</h3><div class="character-info"><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>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");
}
});
}
};
Kashacter.CloseUI = function() {
$('body').css({"display":"none"});
$('.main-container').css({"display":"none"});
$(".character-box").removeClass('active-char');
$("#delete").css({"display":"none"});
esx_kashacters/html/ui.html
+20 -29
View File
@@ -10,55 +10,44 @@
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body style="background-color: rgba(0,0,0,0); font-family: 'Roboto', sans-serif !important;">
<div class="main-container">
<div>
<body style="background-color: rgba(0, 0, 0, 0.11);font-family: 'Roboto', sans-serif !important;display: block;">
<div class="top1"></div>
<div class="top2"></div>
<div class="weiß">
<div class="main-container">
<div class="character-container">
<div class="character-box" data-ischar="false" data-charid="1">
<h3 class="character-fullname">Empty Slot</h3>
<div class="character-info">
<p class="character-info-new">Create new character</p>
<p class="character-info-new"></p>
</div>
</div>
<div class="character-box" data-ischar="false" data-charid="2">
<h3 class="character-fullname">Empty Slot</h3>
<div class="character-info">
<p class="character-info-new">Create new character</p>
<p class="character-info-new"></p>
</div>
</div>
<div class="character-box" data-ischar="false" data-charid="3">
<h3 class="character-fullname">Empty Slot</h3>
<div class="character-info">
<p class="character-info-new">Create new character</p>
<p class="character-info-new"></p>
</div>
</div>
<div class="character-box" data-ischar="false" data-charid="4">
<h3 class="character-fullname">Empty Slot</h3>
<div class="character-info">
<p class="character-info-new">Create new character</p>
</div>
</div>
<div class="character-box" data-ischar="false" data-charid="5">
<h3 class="character-fullname">Empty Slot</i></h3>
<div class="character-info">
<p class="character-info-new">Create new character</p>
</div>
</div>
<div class="character-box" data-ischar="false" data-charid="6">
<h3 class="character-fullname">Empty Slot</i></h3>
<div class="character-info">
<p class="character-info-new">Create new character</p>
<p class="character-info-new"></p>
</div>
</div>
</div>
</div>
<br>
<center>
<div class="character-buttons" >
<div class="character-buttons" >
<button class="btn btn-play" id="play-char">PLAY</button>
<button class="btn btn-delete" id="delete" data-toggle="modal" data-target="#delete-char">DELETE</button>
</div>
</center>
</div>
</div>
<div id="delete-char" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
@@ -77,10 +66,12 @@
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/app.js" type="text/javascript"></script>
</div>
</div>
<div class="bottom1"></div>
<div class="bottom2"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>