Merge remote-tracking branch 'origin/feature/new_identity_nui' into dev

2026-08-29 01:08:54 +00:00 · 2024-11-08 22:26:38 +00:00
parent 5943f5764a 1ed860e802
commit b712717506
5 changed files with 351 additions and 72 deletions
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

 body {
    font-family: sans-serif;
@@ -11,21 +11,166 @@ body {
 }

 .dialog {
-    width: 332px;
-    opacity: 0.95;
-    padding: 20px;
+    width: 477px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
-    background-color: #152029;
-    border-radius: 10px;
-    box-shadow: 0 -5px 3px -3px #21303d, 0 5px 3px -3px #21303d;
+    background-color: #080808;
+    border-radius: 8px;
    border: none;
    color: #ffffff;
+    font-family: "Poppins", sans-serif;
 }

-.title {
+.dialog__header {
+    background-color: #040404;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    padding: 20px;
+    text-align: center;
+}
+
+.dialog__header h1 {
+    font-weight: 700;
+    margin-bottom: 0;
+    font-size: 30px;
+}
+
+.dialog__header span {
+    color: #FD9800;
+}
+
+.dialog__body {
+    padding-block: 20px;
+    padding-inline: 65px;
+}
+
+.dialog__body-hint {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.dialog__body-form {
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
+    font-weight: 600;
+    font-size: 15px;
+}
+
+.dialog__form-submit {
+    border:none;
+    background-color: #FD9800;
+    color: #fff;
+    font-size: 18px;
+    font-weight:bold;
+    border-radius: 4px;
+    padding-block: 5px;
+}
+
+.dialog__form-submit i {
+    margin-right: 5px;
+}
+
+.dialog__form-group {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 30px;
+    background-color: #040404;
+    position: relative;
+}
+
+.dialog__form-group--radio {
+    gap: 0;
+}
+
+.dialog__form-group label {
+    text-align: center;
+    flex-grow: 1; /* Label will expand to fill available space */
+    flex-shrink: 1; /* Allows the label to shrink if necessary */
+    padding-inline: 20px; /* Horizontal padding */
+}
+
+.dialog__form-group input {
+    background-color: transparent;
+    border: none;
+    height: 30px;
+    width: 180px; /* Fixed width for input */
+    flex-shrink: 0; /* Prevent input from shrinking */
+    color: white;
+}
+
+
+.dialog__form-group input:focus {
+    background-color: rgba(15, 15, 15, 0.9);
+    border: none;
+    border-radius: 5px;
+    color: #ffffff;
+    outline: none;
+    box-shadow: none;
+}
+
+.dialog__form-validation {
+    position: relative;
+}
+
+.dialog__form-validation i {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+
+.dialog__form-radio {
+    display: flex;
+    align-items: center;
+}
+
+.dialog__form-radio input {
+    display: none;
+}
+
+.dialog__form-radio label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+}
+
+.dialog__form-radio input + label {
+    height: 30px;
+    display: flex;
+    align-items: center;
+}
+
+.dialog__form-radio input:checked + label {
+    color: #30A1FD;
+    height: 30px;
+}
+
+.dialog__form-message {
+    position: absolute;
+    top: 35px;
+    right: 0;
+    font-size: 9px;
+}
+
+.dialog__form-message--error {
+    color: #733838;
+}
+
+#male:checked + label {
+    color: #30A1FD; /* Blue color */
+}
+
+/* For the female radio button */
+#female:checked + label {
+    color: #FF69B4; /* Pink color */
+}
+
+/* .title {
    font-family: "Oswald", sans-serif;
    font-size: 22px;
    text-align: center;
@@ -48,12 +193,10 @@ input {
 }

 ::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"] {
@@ -102,7 +245,6 @@ input {
 button {
    display: block;
    margin-top: 35px;
-    /*padding: 10px;*/
    background-color: #4569c6;
    outline: none;
    border: 2px double rgba(40, 40, 40, 0.9);
@@ -150,4 +292,4 @@ h1 {
    color: black;
    top: -1px;
    left: 50%;
-}
+} */
@@ -1,49 +1,85 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
-        <link href="css/style.css" rel="stylesheet" />

-        <title>ESX Identity</title>
-    </head>
+<head>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link href="css/style.css" rel="stylesheet" />

-    <body class="none" 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>
+    <title>ESX Identity</title>
+</head>

-                        <input type="radio" id="radiof" name="sex" value="f" />
-                        <label for="radiof">Female</label>
+<body class="none" onkeydown="TriggeredKey(this)">
+    <div class="dialog">
+        <div class="dialog__header">
+            <h1>CHARACTER <span>IDENTITY</span></h1>
+        </div>
+        <div class="dialog__body">
+            <p class="dialog__body-hint">Start by creating your identity</p>
+            <form class="dialog__body-form" id="register" action="#">
+                <div class="dialog__form-group">
+                    <label for="firstname">Firstname</label>
+                    <div class="dialog__form-validation">
+                        <input id="firstname" type="text" placeholder="Firstname" />
+                        <!-- <i class="fas fa-check-circle" style="color: #478444;"></i> -->
                    </div>
-                </center>
-                <button id="submit" type="submit">
-                    <font size="4px">CREATE</font>
+                    <div class="dialog__form-message dialog__form-message--error"></div>
+                </div>
+                <div class="dialog__form-group">
+                    <label for="lastname">Lastname</label>
+                    <div class="dialog__form-validation">
+                        <input id="lastname" type="text" placeholder="Lastname" />
+                        <!-- <i class="fas fa-times-circle" style="color: #733838;"></i> -->
+                    </div>
+                    <div class="dialog__form-message dialog__form-message--error"></div>
+                </div>
+                <div class="dialog__form-group">
+                    <label for="dob">Date of birth</label>
+                    <input id="dob" type="text" placeholder="dd/mm/yy" />
+                    <div class="dialog__form-message dialog__form-message--error"></div>
+                </div>
+                <div class="dialog__form-group">
+                    <label for="gender">Gender</label>
+                    <div class="dialog__form-group dialog__form-group--radio">
+                        <div class="dialog__form-radio">
+                            <input type="radio" id="male" value="m" name="gender">
+                            <label for="male">
+                                <i class="fas fa-mars"></i>
+                                Male
+                            </label>
+                        </div>
+                        <div class="dialog__form-radio">
+                            <input type="radio" id="female" value="f" name="gender">
+                            <label for="female">
+                                <i class="fas fa-venus"></i>Female
+                            </label>
+                        </div>
+                    </div>
+                    <div class="dialog__form-message dialog__form-message--error"></div>
+                </div>
+                <div class="dialog__form-group">
+                    <label for="height">Height</label>
+                    <input id="height" type="text" placeholder="175" />
+                    <div class="dialog__form-message dialog__form-message--error"></div>
+                </div>
+                <button class="dialog__form-submit" id="submit" type="submit">
+                    <i class="fas fa-user-plus"></i>CREATE
                </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>
+    </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" defer></script>
-    </body>
-</html>
+    <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" defer></script>
+</body>
+
+</html>
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
+        <link href="css/style.css" rel="stylesheet" />
+
+        <title>ESX Identity</title>
+    </head>
+
+    <body class="none" 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" defer></script>
+    </body>
+</html>
@@ -1,4 +1,9 @@
+let devMode = false
+
 window.addEventListener("message", (event) => {
+    if (devMode) {
+        document.body.classList.remove('none')
+    }
    if (event.data.type === "enableui") {
        document.body.classList[event.data.enable ? "remove" : "add"]("none");
    }
@@ -7,33 +12,32 @@ window.addEventListener("message", (event) => {
 document.querySelector("#register").addEventListener("submit", (event) => {
    event.preventDefault();

-    const dofVal = document.querySelector("#dateofbirth").value;
+    const dofVal = document.querySelector("#dob").value;
    if (!dofVal) return;

-    const dateCheck = new Date(dofVal);
+    const formattedDate = 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 formattedDate = `${day}/${month}/${year}`;
-    fetch("http://esx_identity/register", {
-        method: "POST",
-        body: JSON.stringify({
-            firstname: document.querySelector("#firstname").value,
-            lastname: document.querySelector("#lastname").value,
-            dateofbirth: formattedDate,
-            sex: document.querySelector("input[type='radio'][name='sex']:checked").value,
-            height: document.querySelector("#height").value,
-        }),
-    });
+    if (!devMode) {
+        fetch("http://esx_identity/register", {
+            method: "POST",
+            body: JSON.stringify({
+                firstname: document.querySelector("#firstname").value,
+                lastname: document.querySelector("#lastname").value,
+                dateofbirth: formattedDate,
+                sex: document.querySelector("input[type='radio'][name='gender']:checked").value,
+                height: document.querySelector("#height").value,
+            }),
+        });
+    }

    document.querySelector("#register").reset();
 });

 document.addEventListener("DOMContentLoaded", () => {
-    fetch("http://esx_identity/ready", {
-        method: "POST",
-        body: JSON.stringify({}),
-    });
+    if (!devMode) {
+        fetch("http://esx_identity/ready", {
+            method: "POST",
+            body: JSON.stringify({}),
+        });
+    }
 });
@@ -0,0 +1,48 @@
+let devMode = true
+
+window.addEventListener("message", (event) => {
+    if (devMode) {
+        document.body.classList.remove('none')
+    }
+    if (event.data.type === "enableui") {
+        document.body.classList[event.data.enable ? "remove" : "add"]("none");
+    }
+});
+
+document.querySelector("#register").addEventListener("submit", (event) => {
+    event.preventDefault();
+
+    const dofVal = document.querySelector("#dateofbirth").value;
+    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 formattedDate = `${day}/${month}/${year}`;
+    if (!devMode) {
+        fetch("http://esx_identity/register", {
+            method: "POST",
+            body: JSON.stringify({
+                firstname: document.querySelector("#firstname").value,
+                lastname: document.querySelector("#lastname").value,
+                dateofbirth: formattedDate,
+                sex: document.querySelector("input[type='radio'][name='sex']:checked").value,
+                height: document.querySelector("#height").value,
+            }),
+        });
+    }
+
+    document.querySelector("#register").reset();
+});
+
+document.addEventListener("DOMContentLoaded", () => {
+    if (!devMode) {
+        fetch("http://esx_identity/ready", {
+            method: "POST",
+            body: JSON.stringify({}),
+        });
+    }
+});