0.0.1

2026-07-07 21:08:52 +02:00
commit 4c20cfc716
2613 changed files with 318021 additions and 0 deletions
--- a/resources/[core]/esx_textui/nui/css/style.css
+++ b/resources/[core]/esx_textui/nui/css/style.css
@@ -0,0 +1,99 @@
+:root {
+    --color: white;
+    --bgColor: rgba(15, 15, 15, 0.9);
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    box-sizing: border-box;
+}
+
+body {
+    color: var(--color);
+    font-family: sans-serif;
+}
+
+.notify {
+    display: none;
+    position: absolute;
+    right: 2%;
+    bottom: 50%;
+    flex: auto;
+    min-width: 15%;
+    width: fit-content;
+    height: 50px;
+    background: rgba(15, 15, 15, 0.9);
+    border-radius: 0.5rem;
+    align-items: center;
+}
+
+.fadeIn {
+    animation: growUp 300ms ease-in-out;
+}
+
+.fadeOut {
+    animation: growDown 300ms ease-in-out;
+}
+
+.error {
+    border-left: 3px solid #c0392b;
+    border-right: 3px solid #c0392b;
+}
+
+.success {
+    border-left: 3px solid #2ecc71;
+    border-right: 3px solid #2ecc71;
+}
+
+.info {
+    border-left: 3px solid #fb9b04;
+    border-right: 3px solid #fb9b04;
+}
+
+.innerText {
+    padding-left: 0.4rem;
+    padding-right: 0.4rem;
+    padding-top: 12.5px;
+    width: 100%;
+    height: 100%;
+}
+
+.innerText .icon {
+    float: left;
+}
+
+.innerText .text {
+    display: inline-block;
+    margin-left: 0.5rem;
+    margin-top: 4px;
+}
+
+@keyframes growDown {
+    0% {
+        transform: scaleY(1);
+    }
+    50% {
+        transform: scaleY(1.1);
+    }
+    100% {
+        transform: scaleY(0);
+    }
+}
+
+@keyframes growUp {
+    0% {
+        transform: scaleY(0);
+    }
+    50% {
+        transform: scaleY(1.1);
+    }
+    100% {
+        transform: scaleY(1);
+    }
+}
+
+.material-symbols-outlined {
+    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+}
--- a/resources/[core]/esx_textui/nui/index.html
+++ b/resources/[core]/esx_textui/nui/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+        <script src="https://kit.fontawesome.com/a81368914c.js"></script>
+        <link rel="stylesheet" href="css/style.css" />
+        <script src="js/script.js"></script>
+    </head>
+    <body>
+        <div id="notifyInfo" class="notify info">
+            <div class="innerText">
+                <span class="material-symbols-outlined icon">info</span>
+                <p class="text" id="infoMessage"></p>
+            </div>
+        </div>
+        <div id="notifySuccess" class="notify success">
+            <div class="innerText">
+                <span class="material-symbols-outlined icon">check_circle</span>
+                <p class="text" id="successMessage"></p>
+            </div>
+        </div>
+        <div id="notifyError" class="notify error">
+            <div class="innerText">
+                <span class="material-symbols-outlined icon">error</span>
+                <p class="text" id="errorMessage"></p>
+            </div>
+        </div>
+    </body>
+</html>
--- a/resources/[core]/esx_textui/nui/js/script.js
+++ b/resources/[core]/esx_textui/nui/js/script.js
@@ -0,0 +1,92 @@
+const w = window;
+const doc = document;
+let lastType = {};
+
+// Gets the current icon it needs to use.
+const types = {
+    ["success"]: {
+        ["message"]: "successMessage",
+        ["id"]: "notifySuccess",
+    },
+    ["error"]: {
+        ["message"]: "errorMessage",
+        ["id"]: "notifyError",
+    },
+    ["info"]: {
+        ["message"]: "infoMessage",
+        ["id"]: "notifyInfo",
+    },
+};
+
+// the color codes example `i ~r~love~s~ donuts`
+const codes = {
+    "~r~": "#c0392b",
+    "~b~": "#378cbf",
+    "~g~": "#2ecc71",
+    "~y~": "yellow",
+    "~p~": "purple",
+    "~c~": "grey",
+    "~m~": "#212121",
+    "~u~": "black",
+    "~o~": "#fb9b04",
+};
+
+w.addEventListener("message", (event) => {
+    if (event.data.action === "show") {
+        if (lastType.id !== undefined) {
+            doc.getElementById(lastType["id"]).style.display = "none";
+            notification({
+                type: event.data.type,
+                message: event.data.message,
+            });
+        } else {
+            notification({
+                type: event.data.type,
+                message: event.data.message,
+            });
+        }
+    } else if (event.data.action === "hide") {
+        if (lastType !== "") {
+            doc.getElementById(lastType["id"]).classList.add("fadeOut");
+            setTimeout(() => {
+                doc.getElementById(lastType["id"]).classList.remove("fadeOut");
+                doc.getElementById(lastType["id"]).style.display = "none";
+                doc.getElementById(lastType["message"]).innerHTML = "";
+            }, 300);
+        } else {
+            console.log("There isn't a textUI displaying!?");
+        }
+    }
+});
+
+const replaceColors = (str, obj) => {
+    let strToReplace = str;
+
+    for (let id in obj) {
+        strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
+    }
+
+    return strToReplace;
+};
+
+notification = (data) => {
+    for (color in codes) {
+        if (data["message"].includes(color)) {
+            let objArr = {};
+            objArr[color] = `<span style="color: ${codes[color]}">`;
+            objArr["~s~"] = "</span>";
+
+            let newStr = replaceColors(data["message"], objArr);
+
+            data["message"] = newStr;
+        }
+    }
+
+    doc.getElementById(types[data.type]["id"]).style.display = "block";
+    doc.getElementById(types[data.type]["id"]).classList.add("fadeIn");
+    setTimeout(() => {
+        doc.getElementById(types[data.type]["id"]).classList.remove("fadeIn");
+        lastType = types[data.type];
+        doc.getElementById(types[data.type]["message"]).innerHTML = data["message"];
+    }, 300);
+};