diff --git a/[core]/esx_notify/nui/css/style.css b/[core]/esx_notify/nui/css/style.css
index e86093e3..f1022a6d 100644
--- a/[core]/esx_notify/nui/css/style.css
+++ b/[core]/esx_notify/nui/css/style.css
@@ -1,88 +1,84 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins:wght@300;400;500;600;800&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins:wght@300;400;500;600;800&display=swap");
:root {
- --color: #919191;
+ --color: #919191;
}
* {
- border: 0;
- margin: 0;
- padding: 0;
- box-sizing: border-box;
+ border: 0;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
}
body {
- width: 100vw;
- height: 100vh;
- color: var(--color);
- font-weight: 100;
- font-family: 'Poppins', sans-serif;
- overflow: hidden;
+ width: 100vw;
+ height: 100vh;
+ color: var(--color);
+ font-weight: 100;
+ font-family: "Poppins", sans-serif;
+ overflow: hidden;
}
#root {
- display: grid;
- justify-content: center;
+ display: grid;
+ justify-content: center;
}
#root .notify {
- display: flex;
- position: relative;
- flex: auto;
- min-width: 20rem;
- width: fit-content;
- height: 3.5rem;
- background: rgba(5,5, 5, 0.9);
- border-radius: .5rem;
- margin-top: .5rem;
- animation: anim 300ms ease-in-out;
- align-items: center;
+ display: flex;
+ position: relative;
+ flex: auto;
+ min-width: 20rem;
+ width: fit-content;
+ height: 3.5rem;
+ background: rgba(5, 5, 5, 0.9);
+ border-radius: 0.5rem;
+ margin-top: 0.5rem;
+ animation: anim 300ms ease-in-out;
+ align-items: center;
}
#root .innerText {
- padding-left: .4rem;
- padding-right: .4rem;
- width: 100%;
+ padding-left: 0.4rem;
+ padding-right: 0.4rem;
+ width: 100%;
}
#root .icon {
- float: left;
- color: #fff;
+ float: left;
+ color: #fff;
}
#root .text {
- display: inline-block;
- margin-left: .5rem;
+ display: inline-block;
+ margin-left: 0.5rem;
}
#root .error {
- border-bottom: 3px solid #c0392b;
+ border-bottom: 3px solid #c0392b;
}
#root .success {
- border-bottom: 3px solid #2ecc71;
+ border-bottom: 3px solid #2ecc71;
}
#root .info {
- border-bottom: 3px solid #2980b9;
+ border-bottom: 3px solid #2980b9;
}
.material-symbols-outlined {
- font-variation-settings:
- 'FILL' 0,
- 'wght' 400,
- 'GRAD' 0,
- 'opsz' 48
+ font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}
@keyframes anim {
- 0% {
- transform: scaleY(0);
- }
- 80% {
- transform: scaleY(1.1)
- }
- 100% {
- transform: scaleY(1)
- }
+ 0% {
+ transform: scaleY(0);
+ }
+ 80% {
+ transform: scaleY(1.1);
+ }
+ 100% {
+ transform: scaleY(1);
+ }
}
diff --git a/[core]/esx_notify/nui/index.html b/[core]/esx_notify/nui/index.html
index 2852ba79..01c1ff39 100644
--- a/[core]/esx_notify/nui/index.html
+++ b/[core]/esx_notify/nui/index.html
@@ -1,15 +1,18 @@
-
+
-
-
+
+
ESX Notify
-
-
+
+
-
+
-
+
diff --git a/[core]/esx_notify/nui/js/script.js b/[core]/esx_notify/nui/js/script.js
index 55591a8a..9ca5648c 100644
--- a/[core]/esx_notify/nui/js/script.js
+++ b/[core]/esx_notify/nui/js/script.js
@@ -1,74 +1,76 @@
-const w = window
+const w = window;
// Gets the current icon it needs to use.
const types = {
- ["success"]: {
- ["icon"]: "check_circle",
- },
- ["error"]: {
- ["icon"]: "error",
- },
- ["info"]: {
- ["icon"]: "info",
- }
-}
+ ["success"]: {
+ ["icon"]: "check_circle",
+ },
+ ["error"]: {
+ ["icon"]: "error",
+ },
+ ["info"]: {
+ ["icon"]: "info",
+ },
+};
// the color codes example `i ~r~love~s~ donuts`
const codes = {
- "~r~": "red",
- "~b~": "#378cbf",
- "~g~": "green",
- "~y~": "yellow",
- "~p~": "purple",
- "~c~": "grey",
- "~m~": "#212121",
- "~u~": "black",
- "~o~": "orange"
-}
+ "~r~": "red",
+ "~b~": "#378cbf",
+ "~g~": "green",
+ "~y~": "yellow",
+ "~p~": "purple",
+ "~c~": "grey",
+ "~m~": "#212121",
+ "~u~": "black",
+ "~o~": "orange",
+};
w.addEventListener("message", (event) => {
- notification({
- type: event.data.type,
- message: event.data.message,
- length: event.data.length,
- });
+ notification({
+ type: event.data.type,
+ message: event.data.message,
+ length: event.data.length,
+ });
});
const replaceColors = (str, obj) => {
- let strToReplace = str;
+ let strToReplace = str;
- for (let id in obj) {
- strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
- }
+ for (let id in obj) {
+ strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
+ }
- return strToReplace
-}
+ return strToReplace;
+};
notification = (data) => {
- for (color in codes) {
- if (data["message"].includes(color)) {
- let objArr = {};
- objArr[color] = ``;
- objArr["~s~"] = "";
+ for (color in codes) {
+ if (data["message"].includes(color)) {
+ let objArr = {};
+ objArr[color] = ``;
+ objArr["~s~"] = "";
- let newStr = replaceColors(data["message"], objArr);
+ let newStr = replaceColors(data["message"], objArr);
- data["message"] = newStr
- }
+ data["message"] = newStr;
}
+ }
- const notification = $(`
+ const notification = $(`
-
${types[data.type]["icon"]}
+
${
+ types[data.type]["icon"]
+ }
${data["message"]}
`).appendTo(`#root`);
- setTimeout(() => {
- notification.fadeOut(700);
- }, data.length);
+ setTimeout(() => {
+ notification.fadeOut(700);
+ }, data.length);
- return notification;
-}
+ return notification;
+};