mirror of
https://github.com/esx-framework/esx_core.git
synced 2026-08-30 09:48:52 +00:00
style(esx_identity): run prettier
This commit is contained in:
MoskalykA
@@ -1,152 +1,152 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
width: 332px;
|
||||
opacity : 0.95;
|
||||
position : absolute;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
top : 30.0%;
|
||||
padding: 20px;
|
||||
left : 50%; /* à 50%/50% du parent référent */
|
||||
transform : translate(-50%); /* décalage de 50% de sa propre taille */
|
||||
background-color: #152029;
|
||||
border-radius : 10px;
|
||||
box-shadow: 0 -5px 3px -3px #21303d, 0 5px 3px -3px #21303d;
|
||||
border:none;
|
||||
margin:5px;
|
||||
margin-bottom:20px;
|
||||
color: #ffffff;
|
||||
width: 332px;
|
||||
opacity: 0.95;
|
||||
position: absolute;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
top: 30%;
|
||||
padding: 20px;
|
||||
left: 50%; /* à 50%/50% du parent référent */
|
||||
transform: translate(-50%); /* décalage de 50% de sa propre taille */
|
||||
background-color: #152029;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 -5px 3px -3px #21303d, 0 5px 3px -3px #21303d;
|
||||
border: none;
|
||||
margin: 5px;
|
||||
margin-bottom: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
margin-bottom: 20px;
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-bottom: 15px;
|
||||
border: none;
|
||||
border-bottom: 2px solid #58636c;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
padding-left:0;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
color: #ffffff;
|
||||
text-align:left;
|
||||
background-color: #152029;
|
||||
margin-bottom: 15px;
|
||||
border: none;
|
||||
border-bottom: 2px solid #58636c;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
padding-left: 0;
|
||||
font-family: "Oswald", sans-serif;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
background-color: #152029;
|
||||
}
|
||||
|
||||
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: rgba(84,97,105,255);
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 200;
|
||||
opacity: 1; /* Firefox */
|
||||
::placeholder {
|
||||
/* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: rgba(84, 97, 105, 255);
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-weight: 200;
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
|
||||
.radio-toolbar input[type="radio"] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 36%;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.radio-toolbar label {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
background-color: rgba(15,15,15,0.9);
|
||||
padding: 10px 20px;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
width: 36%;
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
background-color: rgba(15, 15, 15, 0.9);
|
||||
padding: 10px 20px;
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.radio-toolbar input[type="radio"]:checked + label {
|
||||
width: 36%;
|
||||
background-color:rgba(15,15,15,0.9);
|
||||
border: none;
|
||||
border-bottom: 1px solid #93a3b6;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
width: 36%;
|
||||
background-color: rgba(15, 15, 15, 0.9);
|
||||
border: none;
|
||||
border-bottom: 1px solid #93a3b6;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.radio-toolbar input[type="radio"]:focus + label {
|
||||
background-color:rgba(15,15,15,0.9);
|
||||
border: none;
|
||||
border-bottom: 1px solid #93a3b6;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
background-color: rgba(15, 15, 15, 0.9);
|
||||
border: none;
|
||||
border-bottom: 1px solid #93a3b6;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.radio-toolbar label:hover {
|
||||
background-color: rgba(28, 24, 24, 0.931);
|
||||
width: 36%;
|
||||
color: #ffffff;
|
||||
background-color: rgba(28, 24, 24, 0.931);
|
||||
width: 36%;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin-top: 35px;
|
||||
/*padding: 10px;*/
|
||||
background-color: #4569c6;
|
||||
outline: none;
|
||||
border: 2px double rgba(40, 40, 40, 0.9);
|
||||
color: #FFFFFF;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-top: 35px;
|
||||
/*padding: 10px;*/
|
||||
background-color: #4569c6;
|
||||
outline: none;
|
||||
border: 2px double rgba(40, 40, 40, 0.9);
|
||||
color: #ffffff;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
padding: 10px;
|
||||
background-color: rgba(15,15,15,0.9);
|
||||
color: #ffffff;
|
||||
width: 93%;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
padding: 10px;
|
||||
background-color: rgba(15, 15, 15, 0.9);
|
||||
color: #ffffff;
|
||||
width: 93%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.range-wrap {
|
||||
position: relative;
|
||||
margin: 0 auto 3rem;
|
||||
position: relative;
|
||||
margin: 0 auto 3rem;
|
||||
}
|
||||
|
||||
.range {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
background: rgba(15,15,15,0.9);
|
||||
color: #ffffff;
|
||||
padding: 4px 12px;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(15, 15, 15, 0.9);
|
||||
color: #ffffff;
|
||||
padding: 4px 12px;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
|
||||
.bubble::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: rgba(15,15,15,0.9);
|
||||
color: black;
|
||||
top: -1px;
|
||||
left: 50%;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: rgba(15, 15, 15, 0.9);
|
||||
color: black;
|
||||
top: -1px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
@@ -1,45 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script src="nui://game/ui/jquery.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<head>
|
||||
<script src="nui://game/ui/jquery.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
||||
<link href="css/style.css" rel="stylesheet" />
|
||||
|
||||
<title>ESX Identity</title>
|
||||
</head>
|
||||
<title>ESX Identity</title>
|
||||
</head>
|
||||
|
||||
<body onkeydown="TriggeredKey(this)">
|
||||
<div class="dialog">
|
||||
<div class="title"><b>IDENTITY</b></div>
|
||||
<form id="register" name="register" action="#">
|
||||
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif">First Name</div>
|
||||
<input id="firstname" type="text" class="" name="firstname" placeholder="First Name" minlength="3" maxlength="8" pattern="[a-zA-Z]*"><br>
|
||||
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif">Last Name</div>
|
||||
<input id="lastname" type="text" class="" name="lastname" placeholder="Last Name" minlength="3" maxlength="10" pattern="[a-zA-Z]*"><br>
|
||||
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif">Date of Birth (MM/DD/YYYY)</div>
|
||||
<input id="dateofbirth" type="date" name="dateofbirth" class="" min="1900-01-01" max="2010-01-01" onfocus="(this.type='date')"><br>
|
||||
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif">Height</div>
|
||||
<input id="height" type="number" class="" name="height" min="120" max="220" placeholder="Height (cm)"><br>
|
||||
<center>
|
||||
<div class="radio-toolbar">
|
||||
<input type="radio" id="radiom" name="sex" value="m" checked>
|
||||
<label for="radiom">Male</label>
|
||||
|
||||
<input type="radio" id="radiof" name="sex" value="f">
|
||||
<label for="radiof">Female</label>
|
||||
</div>
|
||||
</center>
|
||||
<button id="submit" type="submit"><font size="4px">CREATE</font></button>
|
||||
</form>
|
||||
<center><font size="1px" color="green">If the submit button doesn't work, please ensure that you've entered the fields correctly.</font></center>
|
||||
</div>
|
||||
<script>
|
||||
function TriggeredKey(e) {
|
||||
var keycode;
|
||||
if (window.event) keycode = window.event.keyCode;
|
||||
if (window.event.keyCode == 13 || window.event.keyCode == 27) return false;
|
||||
}
|
||||
</script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
<body onkeydown="TriggeredKey(this)">
|
||||
<div class="dialog">
|
||||
<div class="title"><b>IDENTITY</b></div>
|
||||
<form id="register" name="register" action="#">
|
||||
<div
|
||||
style="
|
||||
color: rgb(46, 187, 205);
|
||||
font-size: 12px;
|
||||
font-family: 'Gill Sans', sans-serif;
|
||||
"
|
||||
>
|
||||
First Name
|
||||
</div>
|
||||
<input
|
||||
id="firstname"
|
||||
type="text"
|
||||
class=""
|
||||
name="firstname"
|
||||
placeholder="First Name"
|
||||
minlength="3"
|
||||
maxlength="8"
|
||||
pattern="[a-zA-Z]*"
|
||||
/><br />
|
||||
<div
|
||||
style="
|
||||
color: rgb(46, 187, 205);
|
||||
font-size: 12px;
|
||||
font-family: 'Gill Sans', sans-serif;
|
||||
"
|
||||
>
|
||||
Last Name
|
||||
</div>
|
||||
<input
|
||||
id="lastname"
|
||||
type="text"
|
||||
class=""
|
||||
name="lastname"
|
||||
placeholder="Last Name"
|
||||
minlength="3"
|
||||
maxlength="10"
|
||||
pattern="[a-zA-Z]*"
|
||||
/><br />
|
||||
<div
|
||||
style="
|
||||
color: rgb(46, 187, 205);
|
||||
font-size: 12px;
|
||||
font-family: 'Gill Sans', sans-serif;
|
||||
"
|
||||
>
|
||||
Date of Birth (MM/DD/YYYY)
|
||||
</div>
|
||||
<input
|
||||
id="dateofbirth"
|
||||
type="date"
|
||||
name="dateofbirth"
|
||||
class=""
|
||||
min="1900-01-01"
|
||||
max="2010-01-01"
|
||||
onfocus="(this.type='date')"
|
||||
/><br />
|
||||
<div
|
||||
style="
|
||||
color: rgb(46, 187, 205);
|
||||
font-size: 12px;
|
||||
font-family: 'Gill Sans', sans-serif;
|
||||
"
|
||||
>
|
||||
Height
|
||||
</div>
|
||||
<input
|
||||
id="height"
|
||||
type="number"
|
||||
class=""
|
||||
name="height"
|
||||
min="120"
|
||||
max="220"
|
||||
placeholder="Height (cm)"
|
||||
/><br />
|
||||
<center>
|
||||
<div class="radio-toolbar">
|
||||
<input type="radio" id="radiom" name="sex" value="m" checked />
|
||||
<label for="radiom">Male</label>
|
||||
|
||||
<input type="radio" id="radiof" name="sex" value="f" />
|
||||
<label for="radiof">Female</label>
|
||||
</div>
|
||||
</center>
|
||||
<button id="submit" type="submit">
|
||||
<font size="4px">CREATE</font>
|
||||
</button>
|
||||
</form>
|
||||
<center>
|
||||
<font size="1px" color="green"
|
||||
>If the submit button doesn't work, please ensure that you've entered
|
||||
the fields correctly.</font
|
||||
>
|
||||
</center>
|
||||
</div>
|
||||
<script>
|
||||
function TriggeredKey(e) {
|
||||
var keycode;
|
||||
if (window.event) keycode = window.event.keyCode;
|
||||
if (window.event.keyCode == 13 || window.event.keyCode == 27)
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,37 +1,43 @@
|
||||
$(document).ready(function () {
|
||||
$.post('http://esx_identity/ready', JSON.stringify({}));
|
||||
$.post("http://esx_identity/ready", JSON.stringify({}));
|
||||
|
||||
window.addEventListener('message', function (event) {
|
||||
if (event.data.type === 'enableui') {
|
||||
window.addEventListener("message", function (event) {
|
||||
if (event.data.type === "enableui") {
|
||||
event.data.enable ? $(document.body).show() : $(document.body).hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('#register').submit(function (event) {
|
||||
$("#register").submit(function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const dofVal = $('#dateofbirth').val();
|
||||
const dofVal = $("#dateofbirth").val();
|
||||
if (!dofVal) return;
|
||||
|
||||
const dateCheck = new Date(dofVal);
|
||||
|
||||
const year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(dateCheck);
|
||||
const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(dateCheck);
|
||||
const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(dateCheck);
|
||||
const year = new Intl.DateTimeFormat("en", { year: "numeric" }).format(
|
||||
dateCheck
|
||||
);
|
||||
const month = new Intl.DateTimeFormat("en", { month: "2-digit" }).format(
|
||||
dateCheck
|
||||
);
|
||||
const day = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(
|
||||
dateCheck
|
||||
);
|
||||
|
||||
const formattedDate = `${day}/${month}/${year}`;
|
||||
|
||||
$.post(
|
||||
'http://esx_identity/register',
|
||||
"http://esx_identity/register",
|
||||
JSON.stringify({
|
||||
firstname: $('#firstname').val(),
|
||||
lastname: $('#lastname').val(),
|
||||
firstname: $("#firstname").val(),
|
||||
lastname: $("#lastname").val(),
|
||||
dateofbirth: formattedDate,
|
||||
sex: $("input[type='radio'][name='sex']:checked").val(),
|
||||
height: $('#height').val(),
|
||||
height: $("#height").val(),
|
||||
})
|
||||
);
|
||||
|
||||
$('#register').trigger('reset');
|
||||
$("#register").trigger("reset");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user