feat(html): missing ui

Qbox-project · Oct 21, 2024 · 3f371e5 · 3f371e5
1 parent a8aa021
commit 3f371e5
Show file tree

Hide file tree

Showing 4 changed files with 189 additions and 0 deletions.
diff --git a/fxmanifest.lua b/fxmanifest.lua
@@ -20,7 +20,14 @@ client_scripts {
 
 server_script 'server/main.lua'
 
+ui_page 'html/index.html'
+
 files {
+    'html/index.html',
+    'html/vue.min.js',
+    'html/script.js',
+    'html/fingerprint.png',
+    'html/main.css',
     'config/client.lua',
     'locales/*.json',
 }

diff --git a/html/index.html b/html/index.html
@@ -0,0 +1,33 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="main.css">
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+    </head>
+    <body style="background:rgb(0,0,0,0.0)">
+        <div id="helicontainer">
+            <div class="vehicleinfo">
+                <div class="heli-model">
+                    <p>MODEL: COSAGNETTI</p>
+                </div>
+                <div class="heli-street">
+                    <p>Spanish Ave | Lagunas Pl</p>
+                </div>
+                <div class="heli-plate">
+                    <p>PLATE: 01AGB123</p>
+                </div>
+                <div class="heli-speed">
+                    <p>420 KM/U</p>
+                </div>
+                <div class="heli-rectangle"></div>
+            </div>
+            <div class="scan">
+                <div class="scanBar"></div>
+            </div>
+        </div>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+        <script src="vue.min.js"></script>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/html/main.css b/html/main.css
@@ -0,0 +1,94 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
+
+html {
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+#helicontainer {
+  font-family: 'Poppins';
+  display:none;
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  background-color: transparent !important;
+  color: #ffffff;
+  text-transform: uppercase;
+}
+
+.vehicleinfo {
+  display:none;
+}
+
+.heli-model {
+  position:absolute;
+  left: 50%;
+  top: 35%;
+  transform: translate(-50%, -50%);
+  text-shadow:
+  -1px -1px 0 #000,
+      1px -1px 0 #000,
+      -1px 1px 0 #000,
+      1px 1px 0 #000;
+}
+
+.heli-plate {
+  position:absolute;
+  left: 50%;
+  bottom: 30%;
+  transform: translate(-50%, -50%);
+  text-shadow:
+  -1px -1px 0 #000,
+      1px -1px 0 #000,
+      -1px 1px 0 #000,
+      1px 1px 0 #000;
+}
+
+.heli-street {
+  position:absolute;
+  left: 70%;
+  top: 50.7%;
+  transform: translate(-50%, -50%);
+  text-shadow:
+  -1px -1px 0 #000,
+      1px -1px 0 #000,
+      -1px 1px 0 #000,
+      1px 1px 0 #000;
+}
+
+.heli-speed {
+  position:absolute;
+  left: 35%;
+  top: 35%;
+  text-shadow:
+  -1px -1px 0 #000,
+      1px -1px 0 #000,
+      -1px 1px 0 #000,
+      1px 1px 0 #000;
+  font-size: 22px;
+}
+
+.heli-rectangle {
+  position:absolute;
+  left: 50%;
+  top: 50%;
+  width: 70px;
+  height: 70px;
+  background: transparent;
+  border: 1px solid #ab0c0c;
+  transform: translate(-50%, -50%);
+}
+
+.scan {
+  position:absolute;
+  left: 37%;
+  bottom: 39%;
+  border: 2px solid #cccccc;
+  background: rgba(155, 155, 155, 0.0);
+  height: 20vh;
+  width: 1vw;
+}
+
+.scanBar {
+  background: #cccccc;
+}
diff --git a/html/script.js b/html/script.js
@@ -0,0 +1,55 @@
+HeliCam = {};
+
+HeliCam.Open = () => {
+  $("#helicontainer").css("display", "block");
+  $(".scanBar").css("height", "0%");
+}
+
+HeliCam.UpdateScan = (data) => {
+  $(".scanBar").css("height", data.scanvalue + "%");
+}
+
+HeliCam.UpdateVehicleInfo = (data) => {
+  $(".vehicleinfo").css("display", "block");
+  $(".scanBar").css("height", "100%");
+  $(".heli-model").find("p").html("MODEL: " + data.model);
+  $(".heli-plate").find("p").html("PLATE: " + data.plate);
+  $(".heli-street").find("p").html(data.street);
+  $(".heli-speed").find("p").html(data.speed + " KM/U");
+}
+
+HeliCam.DisableVehicleInfo = () => {
+  $(".vehicleinfo").css("display", "none");
+}
+
+HeliCam.Close = () => {
+  $("#helicontainer").css("display", "none");
+  $(".vehicleinfo").css("display", "none");
+  $(".scanBar").css("height", "0%");
+}
+
+document.onreadystatechange = () => {
+  if (document.readyState === "complete") {
+      window.addEventListener('message', (event) => {
+          if (event.data.type == "heliopen") {
+              HeliCam.Open();
+          } else if (event.data.type == "heliclose") {
+              HeliCam.Close();
+          } else if (event.data.type == "heliscan") {
+              HeliCam.UpdateScan(event.data);
+          } else if (event.data.type == "heliupdateinfo") {
+              HeliCam.UpdateVehicleInfo(event.data);
+          } else if (event.data.type == "disablescan") {
+              HeliCam.DisableVehicleInfo();
+          }
+      });
+  };
+};
+
+$(document).on('keydown', (event) => {
+  switch(event.which) {
+      case 27: // ESC
+          Fingerprint.Close();
+          break;
+  }
+});