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_progressbar/nui/css/style.css
+++ b/resources/[core]/esx_progressbar/nui/css/style.css
@@ -0,0 +1,14 @@
+:root {
+    --color: white;
+    --bgColor: #212121;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    color: var(--color);
+    font-family: sans-serif;
+}
--- a/resources/[core]/esx_progressbar/nui/index.html
+++ b/resources/[core]/esx_progressbar/nui/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <script src="https://kit.fontawesome.com/a81368914c.js"></script>
+        <link rel="stylesheet" href="css/style.css" />
+    </head>
+    <body>
+        <div id="notifyInfo" class="notify">
+            <div class="innerText">
+                <i class="fas fa-info-circle icon info"></i>
+                <p class="text" id="infoMessage"></p>
+            </div>
+            <div id="progline" class="progline"></div>
+        </div>
+    </body>
+    <script src="js/script.js"></script>
+</html>
+
+<style>
+    .notify {
+        flex: auto;
+        display: none;
+        position: absolute;
+        margin: 0 auto;
+        left: 0;
+        right: 0;
+        bottom: 100px;
+        min-width: 15%;
+        width: fit-content;
+        height: 45px;
+        background-color: rgba(15, 15, 15, 0.9);
+        border-radius: 5px;
+        animation: growDown 300ms ease-in-out;
+        padding-right: 10px;
+    }
+
+    .progline {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        width: 100%;
+        border-radius: 15px;
+        background: linear-gradient(to right, #b84f05, #de7301, #fb9b04); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    }
+
+    .icon {
+        border: 0;
+    }
+
+    .innerText {
+        flex: auto;
+        margin-top: 15px;
+        width: 100%;
+    }
+
+    .innerText {
+        margin-left: 10px;
+    }
+    p {
+        flex: auto;
+        word-wrap: break-word;
+        margin-left: 35px;
+        margin-top: 15px;
+    }
+
+    .innerText .icon {
+        float: left;
+        margin-left: 5px;
+        font-size: 20px;
+        color: #fb9b04;
+    }
+
+    @keyframes growDown {
+        0% {
+            transform: scaleY(0);
+        }
+        80% {
+            transform: scaleY(1.1);
+        }
+        100% {
+            transform: scaleY(1);
+        }
+    }
+</style>
--- a/resources/[core]/esx_progressbar/nui/js/script.js
+++ b/resources/[core]/esx_progressbar/nui/js/script.js
@@ -0,0 +1,69 @@
+const codes = {
+    "~r~": "#c0392b",
+    "~b~": "#378cbf",
+    "~g~": "#2ecc71",
+    "~y~": "yellow",
+    "~p~": "purple",
+    "~c~": "grey",
+    "~m~": "#212121",
+    "~u~": "black",
+    "~o~": "#fb9b04",
+};
+
+const elems = {
+    infoMessage: document.getElementById("infoMessage"),
+    notifyInfo: document.getElementById("notifyInfo"),
+    progline: document.getElementById("progline"),
+};
+
+const replaceColors = (str, obj) => {
+    let strToReplace = str;
+
+    for (let id in obj) {
+        strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
+    }
+
+    return strToReplace;
+};
+
+window.addEventListener("message", function ({ data }) {
+    if (data.type === "Progressbar") {
+        let { message } = data;
+
+        for (color in codes) {
+            if (message.includes(color)) {
+                let objArr = {};
+                objArr[color] = `<span style="color: ${codes[color]}">`;
+                objArr["~s~"] = "</span>";
+
+                let newStr = replaceColors(message, objArr);
+
+                message = newStr;
+            }
+        }
+
+        elems.infoMessage.innerHTML = message;
+        elems.notifyInfo.style.display = "block";
+
+        const start = new Date();
+        const maxTime = data.length;
+        const timeoutValue = Math.floor(maxTime / 100);
+        animUpdate();
+
+        function animUpdate() {
+            const now = new Date();
+            const timeoutDiff = now.getTime() - start.getTime();
+            const prc = Math.round((timeoutDiff / maxTime) * 100);
+            if (prc <= 100) {
+                elems.progline.style.width = prc + "%";
+                this.timeoutID = setTimeout(animUpdate, timeoutValue);
+            } else {
+                elems.notifyInfo.style.display = "none";
+            }
+        }
+    } else {
+        elems.notifyInfo.style.display = "none";
+        clearTimeout(this.timeoutID);
+        timeoutValue = 0;
+    }
+});