diff --git a/[core]/esx_identity/html/css/style.css b/[core]/esx_identity/html/css/style.css index 5915443e..939753f7 100644 --- a/[core]/esx_identity/html/css/style.css +++ b/[core]/esx_identity/html/css/style.css @@ -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%; } diff --git a/[core]/esx_identity/html/index.html b/[core]/esx_identity/html/index.html index d9ca6d93..0e38d430 100644 --- a/[core]/esx_identity/html/index.html +++ b/[core]/esx_identity/html/index.html @@ -1,45 +1,119 @@ - - - - + + + + - ESX Identity - + ESX Identity + - -
-
IDENTITY
-
-
First Name
-
-
Last Name
-
-
Date of Birth (MM/DD/YYYY)
-
-
Height
-
-
-
- - - - - -
-
- -
-
If the submit button doesn't work, please ensure that you've entered the fields correctly.
-
- - - + +
+
IDENTITY
+
+
+ First Name +
+
+
+ Last Name +
+
+
+ Date of Birth (MM/DD/YYYY) +
+
+
+ Height +
+
+
+
+ + + + + +
+
+ +
+
+ If the submit button doesn't work, please ensure that you've entered + the fields correctly. +
+
+ + + diff --git a/[core]/esx_identity/html/js/script.js b/[core]/esx_identity/html/js/script.js index 5364f8c8..e5ffea11 100644 --- a/[core]/esx_identity/html/js/script.js +++ b/[core]/esx_identity/html/js/script.js @@ -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"); }); });