ed
This commit is contained in:
Nordi98
parent
9e03784b6e
commit
53578d1af6
32 changed files with 1857 additions and 0 deletions
BIN
resources/[tools]/um-idcard/web/badges/examplebadge.png
Normal file
BIN
resources/[tools]/um-idcard/web/badges/examplebadge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 580 KiB |
131
resources/[tools]/um-idcard/web/css/style.css
Normal file
131
resources/[tools]/um-idcard/web/css/style.css
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Inter:wght@100&display=swap');
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Poppins", sans-serif;;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
padding-right: 3vh;
|
||||
}
|
||||
#badge {
|
||||
display: none;
|
||||
flex-direction: inherit;
|
||||
align-items: center;
|
||||
}
|
||||
#badge img {
|
||||
width: 100%;
|
||||
height: 145px;
|
||||
}
|
||||
#badge #badgegrade {
|
||||
background-image: linear-gradient(to right, #bbbbbb, #f3f3f3);
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
font-size: 13px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
#um-idcard {
|
||||
visibility: hidden;
|
||||
width: 43vh;
|
||||
height: auto;
|
||||
border-radius: 1.3vh;
|
||||
background: #ebebeb;
|
||||
display: flex;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#um-idcard .header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.8vh;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
padding: 0.5vh;
|
||||
border-bottom: 1px solid #0000001f;
|
||||
}
|
||||
#um-idcard .header img {
|
||||
width: 3.5vh;
|
||||
margin-left: -1.2vh;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
#um-idcard .header span {
|
||||
margin: 0 0.5vh;
|
||||
}
|
||||
#um-idcard .content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
#um-idcard .icon {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#um-idcard .icon #mugshot {
|
||||
width: 10vh;
|
||||
border: 0.1vh solid rgb(0 0 0 / 19%);
|
||||
border-radius: 0.8vh;
|
||||
height: 10vh;
|
||||
}
|
||||
#um-idcard .text {
|
||||
flex: 1.6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
padding: 1.5vh;
|
||||
}
|
||||
#um-idcard .text ul {
|
||||
width: 100%;
|
||||
}
|
||||
#um-idcard .text ul li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
font-size: 1.2vh;
|
||||
font-weight: 900;
|
||||
border-bottom: 0.1vh solid rgba(0, 0, 0, 0.07);
|
||||
padding: 0.3vh 0;
|
||||
}
|
||||
#um-idcard .text ul span.info {
|
||||
font-size: 1vh;
|
||||
font-weight: 800;
|
||||
padding-left: 2vh;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
}
|
||||
.signature {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
margin-left: 4vh;
|
||||
font-family: 'Alex Brush', cursive;
|
||||
text-transform: capitalize;
|
||||
font-weight: bold;
|
||||
font-size: 1.5vh;
|
||||
}
|
||||
.signature, .flagsandimg img{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.flagsandimg #smallmugshot {
|
||||
filter: grayscale(1);
|
||||
border-radius: 40px;
|
||||
}
|
||||
.flagsandimg {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
margin-right: 2vh;
|
||||
justify-content: revert;
|
||||
}
|
||||
BIN
resources/[tools]/um-idcard/web/flags/32.png
Normal file
BIN
resources/[tools]/um-idcard/web/flags/32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 B |
61
resources/[tools]/um-idcard/web/index.html
Normal file
61
resources/[tools]/um-idcard/web/index.html
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="um-idcard" class="anim">
|
||||
<div id="badge">
|
||||
<img id="badgeimg" src="">
|
||||
<span id="badgegrade"></span>
|
||||
</div>
|
||||
<div class="header">
|
||||
<span id="lang_header"></span>
|
||||
<span id="cardtype"></span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="icon">
|
||||
<img id="mugshot" src="">
|
||||
</div>
|
||||
<div class="text">
|
||||
<ul>
|
||||
<li>
|
||||
<span id="lang_lastname"></span>
|
||||
<span id="lastname" class="info"></span>
|
||||
</li>
|
||||
<li>
|
||||
<span id="lang_firstname"></span>
|
||||
<span id="name" class="info"></span>
|
||||
</li>
|
||||
<li>
|
||||
<span id="lang_dob"></span>
|
||||
<span id="dob" class="info"></span>
|
||||
</li>
|
||||
<li>
|
||||
<span id="lang_sex"></span>
|
||||
<span id="sex" class="info"></span>
|
||||
</li>
|
||||
<li>
|
||||
<span id="lang_nat"></span>
|
||||
<span id="nationality" class="info"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="signature">
|
||||
<span id="sign"></span>
|
||||
</div>
|
||||
<div class="flagsandimg">
|
||||
<img id="smallmugshot" src="">
|
||||
<img src="flags/32.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" defer src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
18
resources/[tools]/um-idcard/web/js/fetchNui.js
Normal file
18
resources/[tools]/um-idcard/web/js/fetchNui.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
const resource = GetParentResourceName();
|
||||
|
||||
export async function fetchNui(eventName, data) {
|
||||
try {
|
||||
const resp = await fetch(`https://${resource}/${eventName}`, {
|
||||
method: 'post',
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=UTF-8',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
return await resp.json();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
92
resources/[tools]/um-idcard/web/js/main.js
Normal file
92
resources/[tools]/um-idcard/web/js/main.js
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import { fetchNui } from './fetchNui.js';
|
||||
import { Global } from '../../lang/global.js';
|
||||
|
||||
let config;
|
||||
|
||||
/**
|
||||
* Get element by id
|
||||
* @param id {string}
|
||||
**/
|
||||
const getElementById = (id) => document.getElementById(id);
|
||||
|
||||
/**
|
||||
* Set visibility
|
||||
* @param visibility {string}
|
||||
**/
|
||||
const setVisibility = (visibility) => getElementById('um-idcard').style.visibility = visibility;
|
||||
|
||||
/**
|
||||
* Set visibility of badge
|
||||
* @param badge {string|Object|null}
|
||||
**/
|
||||
const setBadgeVisibility = (badge) => {
|
||||
const badgeElement = getElementById('badge');
|
||||
if (!badge || badge === 'none') {
|
||||
badgeElement.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
getElementById('badgeimg').src = `badges/${badge.img}.png`;
|
||||
getElementById('badgegrade').textContent = badge.grade;
|
||||
badgeElement.style.display = 'flex';
|
||||
};
|
||||
|
||||
const closeFunction = () => {
|
||||
getElementById('um-idcard').classList.remove('animate__animated', 'animate__fadeInLeft', 'animate__faster');
|
||||
setVisibility('hidden');
|
||||
setBadgeVisibility('none');
|
||||
fetchNui('closeIdCard');
|
||||
};
|
||||
|
||||
/**
|
||||
* Open id card
|
||||
* @param playerData {Object}
|
||||
**/
|
||||
const openIdCard = (playerData) => {
|
||||
const license = config.Licenses[playerData.cardtype];
|
||||
const elements = {
|
||||
lastname: playerData.lastname,
|
||||
name: playerData.firstname,
|
||||
sign: `${playerData.lastname} ${playerData.firstname}`,
|
||||
dob: playerData.birthdate,
|
||||
sex: playerData.sex,
|
||||
nationality: playerData.nationality,
|
||||
cardtype: license.header,
|
||||
};
|
||||
|
||||
Object.entries(elements).forEach(([key, value]) => {
|
||||
getElementById(key).textContent = value;
|
||||
});
|
||||
|
||||
getElementById('mugshot').src = playerData.mugShot;
|
||||
getElementById('smallmugshot').src = playerData.mugShot;
|
||||
getElementById('um-idcard').style.backgroundColor = license.background;
|
||||
getElementById('um-idcard').classList.add('animate__animated', 'animate__fadeInLeft', 'animate__faster');
|
||||
setBadgeVisibility(playerData.badge);
|
||||
setVisibility('visible');
|
||||
autoClose();
|
||||
};
|
||||
|
||||
const autoClose = () => {
|
||||
if (!config.IdCardSettings.autoClose.status) return;
|
||||
setTimeout(closeFunction, config.IdCardSettings.autoClose.time);
|
||||
};
|
||||
|
||||
window.addEventListener('message', (event) => {
|
||||
const { type, playerData, configData } = event.data;
|
||||
if (type === 'playerData') {
|
||||
openIdCard(playerData);
|
||||
} else if (type === 'configData') {
|
||||
config = configData;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
Object.entries(Global).forEach(([key, value]) => {
|
||||
getElementById(key).textContent = value;
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key !== config.IdCardSettings.closeKey) return;
|
||||
closeFunction();
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue