☰

Deep Space Client

Deep Space Client for bloxd.io

目前为 2024-11-18 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Deep Space Client
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Deep Space Client for bloxd.io
  6. // @author       GEORGECR
  7. // @match        https://bloxd.io/
  8. // @match        https://bloxd.io/?utm_source=pwa
  9. // @match        https://staging.bloxd.io/
  10. // @icon         https://i.postimg.cc/NMG91FWH/space-BG-loco.jpg
  11. // @license      MIT
  12. // @grant        none
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     //copyright Deep Space Client
  17.     'use strict';
  18.     let crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/7be1c5f3-9ad1-11ef-b170-45e28d82b1ad.gif';
  19.     let CrossSize = '19';
  20.     let colorPicker1Value = '#000000';
  21.     let colorPicker2Value = '#FFFFFF';
  22.  
  23.  
  24.  
  25.     function fast_refresh() {
  26.                         document.title = "Bloxd.io - Deep Space Client";
  27.         const maintext = document.querySelector('.Title.FullyFancyText');
  28.         if (maintext) {
  29.             maintext.style.webkitTextStroke = "0px";
  30.             maintext.textContent = "DEEP SPACE";
  31.             maintext.style.textShadow = "10px 5px 5px #000000";
  32.         }
  33.  
  34.         const background = document.querySelector(".HomeBackground");
  35.         if (background) {
  36.             background.style.backgroundImage = 'url(https://i.postimg.cc/v8rFjRWq/MAINBACKGROUND.jpg)';
  37.         }
  38.  
  39.                 const crosshair = document.querySelector(".CrossHair");
  40.         if (crosshair) {
  41.             crosshair.textContent = "";
  42.             crosshair.style.backgroundImage = `url(${crosshairvalue})`;
  43.             crosshair.style.backgroundRepeat = "no-repeat";
  44.             crosshair.style.backgroundSize = "contain";
  45.             crosshair.style.width = CrossSize + "px";
  46.             crosshair.style.height = CrossSize + "px";
  47.         }
  48.  
  49.         document.querySelectorAll(".HotBarItem").forEach(hotbar => {
  50.             hotbar.style.borderRadius = "12px";
  51.             hotbar.style.borderColor = colorPicker1Value;
  52.             hotbar.style.backgroundColor = "transparent";
  53.             hotbar.style.boxShadow = "none";
  54.             hotbar.style.outline = "transparent";
  55.         });
  56.  
  57.         document.querySelectorAll(".SelectedItem").forEach(slot => {
  58.             slot.style.backgroundColor = "transparent";
  59.             slot.style.boxShadow = "none";
  60.             slot.style.borderRadius = "15px";
  61.             slot.style.borderColor = colorPicker2Value;
  62.             slot.style.outline = "transparent";
  63.         });
  64.  
  65.  
  66.     }
  67.     setInterval(fast_refresh, 70 );
  68.  
  69.     const UI_aesthetics = () => {
  70.  
  71.         ['LogoContainer', 'cube' , 'HomeScreenBottomLeft'].forEach(className => {
  72.             document.querySelectorAll('.' + className).forEach(el => el.remove());
  73.         });
  74.  
  75.         ['GameAdsBanner', 'HomeBannerInner'].forEach(className => {
  76.             document.querySelectorAll('.' + className).forEach(ads => {
  77.                 ads.style.opacity = '0';
  78.                 ads.style.transform = 'translateX(100%)';
  79.             });
  80.         });
  81.  
  82.  
  83.                 ['HeaderRight'].forEach(className => {
  84.             document.querySelectorAll('.' + className).forEach(optionsTR => {
  85.                 optionsTR.style.backgroundColor = "rgba(136, 50, 64,0.45)";
  86.             });
  87.         });
  88.                         ['PlayerNamePreview'].forEach(className => {
  89.             document.querySelectorAll('.' + className).forEach(optionsTL => {
  90.                 optionsTL.style.backgroundColor = "rgba(136, 50, 64 ,0.45)";
  91.                 optionsTL.style.color = "white";
  92.                 optionsTL.style.textShadow = "none";
  93.             });
  94.         });
  95.                ['SocialBarInner'].forEach(className => {
  96.             document.querySelectorAll('.' + className).forEach(socialbox => {
  97.                 socialbox.style.backgroundColor = "rgba(0,0,0,1)";
  98.                 socialbox.style.opacity = '1';
  99.             });
  100.         });
  101.  
  102. document.querySelectorAll('.InvenItem[data-inven-idx="46"], .InvenItem[data-inven-idx="47"], .InvenItem[data-inven-idx="48"], .InvenItem[data-inven-idx="49"], .InvenItem[data-inven-idx="50"]').forEach(ARMOR => {
  103.     ARMOR.style.backgroundColor = "transparent";
  104.     ARMOR.style.boxShadow = "none";
  105.     ARMOR.style.borderColor = "transparent";
  106.     ARMOR.style.outline = "transparent";
  107. });
  108.         document.querySelectorAll('.InvenItem[data-inven-idx="46"] .InvenItemUnfilled').forEach(armor => {
  109.             armor.style.backgroundImage = 'url(https://piskel-imgstore-b.appspot.com/img/f7c20a66-3491-11ef-911f-9f3fc6109f85.gif)';
  110. });
  111. document.querySelectorAll('.InvenItem[data-inven-idx="47"] .InvenItemUnfilled').forEach(armor => {
  112.             armor.style.backgroundImage = 'url(https://piskel-imgstore-b.appspot.com/img/bb5b78a8-3498-11ef-bcaf-9f3fc6109f85.gif)';
  113. });
  114.         document.querySelectorAll('.InvenItem[data-inven-idx="48"] .InvenItemUnfilled').forEach(armor => {
  115.             armor.style.backgroundImage = 'url(https://piskel-imgstore-b.appspot.com/img/ab8a4be8-3491-11ef-8f57-9f3fc6109f85.gif)';
  116. });
  117. document.querySelectorAll('.InvenItem[data-inven-idx="49"] .InvenItemUnfilled').forEach(armor => {
  118.             armor.style.backgroundImage = 'url(https://piskel-imgstore-b.appspot.com/img/f1d6cc85-3493-11ef-a098-9f3fc6109f85.gif)';
  119. });
  120. document.querySelectorAll('.InvenItem[data-inven-idx="50"] .InvenItemUnfilled').forEach(armor => {
  121.             armor.style.backgroundImage = 'url(https://piskel-imgstore-b.appspot.com/img/840035a8-3491-11ef-879a-9f3fc6109f85.gif)';
  122. });
  123.  
  124.         document.querySelectorAll('.AvailableGame').forEach(item => {
  125.             item.style.border = "none";
  126.             item.style.borderRadius = "0px";
  127.             item.style.boxShadow = "0px 10px 20px rgba(0, 0, 0, 0.4)";
  128.         });
  129.  
  130.         document.querySelectorAll('.AvailableGameTextInner').forEach(name => {
  131.             name.style.textShadow = "none";
  132.         });
  133.         document.querySelectorAll('.AvailableGameTextWrapperBackground').forEach(removebox => {
  134.             removebox.style.opacity= "0";
  135.         });
  136.  
  137.  
  138.     };
  139.  
  140.     document.addEventListener('DOMContentLoaded', UI_aesthetics);
  141.     setInterval(UI_aesthetics, 1000);
  142.  
  143.  
  144.  
  145. const createhud = (id, zIndex) => {
  146.     const hud = document.createElement('div');
  147.     hud.id = id;
  148.     hud.style.position = 'fixed';
  149.     hud.style.width = '100%';
  150.     hud.style.height = '114%';
  151.     hud.style.display = 'block';
  152.     hud.style.zIndex = zIndex;
  153.  
  154.     hud.style.pointerEvents = 'none';
  155.  
  156.     hud.addEventListener('mouseover', (event) => {
  157.         if (event.target !== hud) {
  158.             event.target.style.pointerEvents = 'auto';
  159.         }
  160.     });
  161.  
  162.     const observer = new MutationObserver((mutations) => {
  163.         mutations.forEach((mutation) => {
  164.             mutation.addedNodes.forEach((node) => {
  165.                 if (node.nodeType === 1) {
  166.                     node.style.pointerEvents = 'auto';
  167.                 }
  168.             });
  169.         });
  170.     });
  171.  
  172.     observer.observe(hud, { childList: true, subtree: true });
  173.  
  174.     document.body.appendChild(hud);
  175.     return hud;
  176. };
  177.     const mainHud = createhud('toggleHud', '1003');
  178.  
  179.     const createBox = (id, zIndex) => {
  180.         const box = document.createElement('div');
  181.         box.id = id;
  182.         box.style.position = 'fixed';
  183.         box.style.top = '50%';
  184.         box.style.left = '50%';
  185.         box.style.transform = 'translate(-50%, -50%)';
  186.         box.style.width = '800px';
  187.         box.style.height = '600px';
  188.         box.style.backgroundColor = 'rgb(40, 40, 40)';
  189.         box.style.color = 'white';
  190.         box.style.borderRadius = '20px';
  191.         box.style.display = 'none';
  192.         box.style.padding = '20px';
  193.         box.style.overflowY = 'auto';
  194.         box.style.zIndex = zIndex;
  195.         mainHud.appendChild(box);
  196.         return box;
  197.     };
  198.         const createmenu = (id, zIndex) => {
  199.         const menu = document.createElement('div');
  200.         menu.id = id;
  201.         menu.style.position = 'fixed';
  202.         menu.style.top = '50%';
  203.         menu.style.left = '50%';
  204.         menu.style.transform = 'translate(-50%, -50%)';
  205.         menu.style.width = '500px';
  206.         menu.style.height = '250px';
  207.         menu.style.color = 'white';
  208.         menu.style.display = 'none';
  209.         menu.style.justifyContent = 'space-between';
  210.         menu.style.flexDirection = 'column';
  211.         menu.style.padding = '20px';
  212.         menu.style.alignItems = 'center';
  213.         menu.style.zIndex = zIndex;
  214.         mainHud.appendChild(menu);
  215.         return menu;
  216.     };
  217.     const mainMenu = createmenu('toggleMenu', '1000');
  218.     const mainBox = createBox('toggleBox', '1000');
  219.     const settingsModal = createBox('settingsModal', '1001');
  220.     settingsModal.style.backgroundColor = 'rgb(40, 40, 40)';
  221.  
  222.     const crosshairSettingsModal = createBox('crosshairSettingsModal', '1002');
  223.     crosshairSettingsModal.style.backgroundColor = 'rgb(40, 40, 40)';
  224.  
  225.                         const hotbarSettingsModal = createBox('hotbarSettingsModal', '1002');
  226.     hotbarSettingsModal.style.backgroundColor = 'rgb(40, 40, 40)'
  227.  
  228.                     const toggleshiftSettingsModal = createBox('toggleshiftSettingsModal', '1002');
  229.     toggleshiftSettingsModal.style.backgroundColor = 'rgb(40, 40, 40)'
  230.  
  231.                            const Cosmetics = createBox('Cosmetics', '1002');
  232.     Cosmetics.style.backgroundColor = 'rgb(40, 40, 40)'
  233.  
  234.                          const EditHud = createBox('EditHud', '1002');
  235.     EditHud.style.backgroundColor = 'transparent'
  236.     EditHud.style.justifyContent = 'space-between';
  237.     EditHud.style.flexDirection = 'column';
  238.     EditHud.style.alignItems = 'center';
  239.  
  240.                             const resolutionSettingsModal = createBox('resolutionSettingsModal', '1002');
  241.     resolutionSettingsModal.style.backgroundColor = 'rgb(40, 40, 40)'
  242.  
  243.     const closeIcon = document.createElement('button');
  244.     closeIcon.textContent = '✖';
  245.     closeIcon.style.position = 'absolute';
  246.     closeIcon.style.width = '30px';
  247.     closeIcon.style.height = '30px';
  248.     closeIcon.style.backgroundColor = 'transparent';
  249.     closeIcon.style.top = '20px';
  250.     closeIcon.style.right = '20px';
  251.     closeIcon.style.border = 'none';
  252.     closeIcon.style.color = 'white';
  253.     closeIcon.style.cursor = 'pointer';
  254.     closeIcon.addEventListener('click', function() {
  255.     mainBox.style.display = 'none';
  256.     });
  257.     mainBox.appendChild(closeIcon);
  258.  
  259.     const settingsContainer = document.createElement('div');
  260.     settingsContainer.style.display = 'flex';
  261.     mainBox.appendChild(settingsContainer);
  262.  
  263.         const DSLogo = document.createElement('div');
  264. DSLogo.style.backgroundImage = 'url(https://i.postimg.cc/k53nGY3S/Deep-Space-Logo-v02.png)';
  265. DSLogo.style.backgroundRepeat = "no-repeat";
  266. DSLogo.style.backgroundSize = "contain";
  267. DSLogo.style.width = '180px';
  268. DSLogo.style.height = '150px';
  269. mainMenu.appendChild(DSLogo);
  270.  
  271.     const MenuText = document.createElement('button');
  272.     MenuText.textContent = 'DEEP SPACE CLIENT';
  273.     MenuText.style.textShadow = "10px 5px 5px #000000";
  274.     MenuText.style.fontFamily = "'Bungee', sans-serif";
  275.     MenuText.style.width = '350px';
  276.     MenuText.style.heght = '50px';
  277.     MenuText.style.marginBottom = '10px';
  278.     MenuText.style.fontSize = '27px';
  279.     MenuText.style.fontWeight = '700';
  280.     MenuText.style.color = 'white';
  281.     MenuText.style.backgroundColor = 'transparent';
  282.     MenuText.style.border = 'none';
  283.     mainMenu.appendChild(MenuText);
  284.  
  285.     const menuButtonsCon = document.createElement('div');
  286.     menuButtonsCon.style.flexDirection = 'row';
  287.     menuButtonsCon.style.alignItems = 'center';
  288.     menuButtonsCon.style.display = 'flex';
  289.     mainMenu.appendChild(menuButtonsCon);
  290.  
  291.         const settingsButton = document.createElement('button');
  292.     settingsButton.style.fontSize = '20px';
  293.     settingsButton.style.fontWeight = 'bold';
  294.     settingsButton.style.width = '60px';
  295.     settingsButton.style.height = '60px';
  296.     settingsButton.style.backgroundColor = 'rgba(40, 40, 40, 0.97)';
  297.     settingsButton.style.borderRadius = '10px';
  298.     settingsButton.style.border = '2px solid rgba(50, 50, 50, 0.97)';
  299.     settingsButton.style.outline = '2px solid rgb(30,30,30)';
  300.     settingsButton.style.color = 'white';
  301.     settingsButton.style.cursor = 'pointer';
  302.     settingsButton.style.display = 'flex';
  303.     settingsButton.style.alignItems = 'center';
  304.     settingsButton.style.justifyContent = 'center';
  305.     settingsButton.style.position = 'relative';
  306.  
  307.         const settingsImage = document.createElement('div');
  308. settingsImage.style.backgroundImage = 'url(https://i.postimg.cc/MGRs1QCR/settings-icon-1964x2048-8nigtrtt.png)';
  309. settingsImage.style.backgroundRepeat = "no-repeat";
  310. settingsImage.style.backgroundSize = "contain";
  311. settingsImage.style.width = '40px';
  312. settingsImage.style.height = '40px';
  313. settingsImage.style.opacity = '0.6';
  314. settingsImage.style.position = 'absolute';
  315. settingsImage.style.top = '50%';
  316. settingsImage.style.left = '50%';
  317. settingsImage.style.transform = 'translate(-50%, -50%)';
  318.  
  319. settingsButton.appendChild(settingsImage);
  320.  
  321.     settingsButton.addEventListener('mouseover', function() {
  322.     settingsButton.style.outline = '2px solid rgb(255, 255, 255)';
  323.     settingsImage.style.opacity = '0.9';
  324.     });
  325.  
  326.     settingsButton.addEventListener('mouseout', function() {
  327.     settingsButton.style.outline = '2px solid rgb(30, 30, 30)';
  328.     settingsImage.style.opacity = '0.6';
  329.     });
  330.  
  331.     settingsButton.addEventListener('click', function() {
  332.         settingsModal.style.display = 'block';
  333.     });
  334.  
  335.     menuButtonsCon.appendChild(settingsButton);
  336.  
  337.  
  338.     const ModsButton = document.createElement('button');
  339.     ModsButton.textContent = 'MODS';
  340.     ModsButton.style.marginBottom = '10px';
  341.     ModsButton.style.backgroundColor = 'rgba(40, 40, 40, 0.97)';
  342.     ModsButton.style.borderRadius = '10px';
  343.     ModsButton.style.outline = '2px solid rgb(30,30,30)';
  344.     ModsButton.style.border = '2px solid rgba(50, 50, 50, 0.97)';
  345.     ModsButton.style.color = 'white';
  346.     ModsButton.style.width = '180px';
  347.     ModsButton.style.height = '60px';
  348.     ModsButton.style.margin = '0px 10px 0px 10px';
  349.     ModsButton.style.fontSize = '20px';
  350.     ModsButton.style.fontWeight = '300';
  351.     ModsButton.style.cursor = 'pointer';
  352.  
  353.     ModsButton.addEventListener('mouseover', function() {
  354.     ModsButton.style.outline = '2px solid rgb(255, 255, 255)';
  355.     });
  356.  
  357.     ModsButton.addEventListener('mouseout', function() {
  358.     ModsButton.style.outline = '2px solid rgb(30, 30, 30)';
  359.     });
  360.  
  361.     ModsButton.addEventListener('click', function() {
  362.         mainBox.style.display = 'block';
  363.     });
  364.     menuButtonsCon.appendChild(ModsButton);
  365.  
  366.  
  367.     const CosmeticsButton = document.createElement('button');
  368.     CosmeticsButton.style.backgroundColor = 'rgba(40, 40, 40, 0.97)';
  369.     CosmeticsButton.style.borderRadius = '10px';
  370.     CosmeticsButton.style.border = '2px solid rgba(50, 50, 50, 0.97)';
  371.     CosmeticsButton.style.outline = '2px solid rgb(30,30,30)';
  372.     CosmeticsButton.style.color = 'white';
  373.     CosmeticsButton.style.width = '60px';
  374.     CosmeticsButton.style.height = '60px';
  375.     CosmeticsButton.style.fontSize = '20px';
  376.     CosmeticsButton.style.fontWeight = 'bold';
  377.     CosmeticsButton.style.cursor = 'pointer';
  378.     CosmeticsButton.style.display = 'flex';
  379. CosmeticsButton.style.alignItems = 'center';
  380. CosmeticsButton.style.justifyContent = 'center';
  381. CosmeticsButton.style.position = 'relative';
  382.  
  383.     const CosmeticsImage = document.createElement('div');
  384. CosmeticsImage.style.backgroundImage = 'url(https://i.postimg.cc/t4RkYc5K/yellow-t-shirt-icon-mds.png)';
  385. CosmeticsImage.style.backgroundRepeat = "no-repeat";
  386. CosmeticsImage.style.backgroundSize = "contain";
  387. CosmeticsImage.style.width = '45px';
  388. CosmeticsImage.style.height = '45px';
  389. CosmeticsImage.style.opacity = '0.6';
  390. CosmeticsImage.style.position = 'absolute';
  391. CosmeticsImage.style.top = '58%';
  392. CosmeticsImage.style.left = '50%';
  393. CosmeticsImage.style.transform = 'translate(-50%, -50%)'; // Center the image exactly
  394.  
  395. CosmeticsButton.appendChild(CosmeticsImage);
  396.  
  397. CosmeticsButton.addEventListener('mouseover', function() {
  398.         CosmeticsButton.style.outline = '2px solid rgb(255,255,255)';
  399.       CosmeticsImage.style.opacity = '0.9';
  400. });
  401.  
  402. CosmeticsButton.addEventListener('mouseout', function() {
  403.         CosmeticsButton.style.outline = '2px solid rgb(30,30,30)';
  404.       CosmeticsImage.style.opacity = '0.6';
  405. });
  406.  
  407. CosmeticsButton.addEventListener('click', function() {
  408.         Cosmetics.style.display = 'block';
  409. });
  410.     menuButtonsCon.appendChild(CosmeticsButton);
  411.  
  412.  
  413.  
  414.         const ALLButton = document.createElement('button');
  415.     ALLButton.textContent = 'All';
  416.     ALLButton.style.marginRight = '5px';
  417.     ALLButton.style.backgroundColor = '#A52D2D';
  418.     ALLButton.style.borderRadius = '5px';
  419.     ALLButton.style.border = 'none';
  420.     ALLButton.style.color = 'white';
  421.     ALLButton.style.width = '60px';
  422.     ALLButton.style.height = '30px';
  423.     ALLButton.style.fontsize = '18px';
  424.     ALLButton.style.cursor = 'pointer';
  425.     settingsContainer.appendChild(ALLButton);
  426.  
  427.  
  428.                 const EditHUDButton = document.createElement('button');
  429.     EditHUDButton.textContent = 'Edit Hud';
  430.     EditHUDButton.style.marginRight = '5px';
  431.     EditHUDButton.style.backgroundColor = 'rgb(50, 50, 50)';
  432.     EditHUDButton.style.borderRadius = '5px';
  433.     EditHUDButton.style.border = 'none';
  434.     EditHUDButton.style.color = 'white';
  435.     EditHUDButton.style.width = '100px';
  436.     EditHUDButton.style.height = '30px';
  437.     EditHUDButton.style.fontsize = '18px';
  438.     EditHUDButton.style.cursor = 'pointer';
  439.     EditHUDButton.addEventListener('click', function() {
  440.     EditHud.style.display = 'flex';
  441.     mainBox.style.display = 'none';
  442.     mainMenu.style.display = 'none';
  443.     });
  444.     settingsContainer.appendChild(EditHUDButton);
  445.  
  446.     const separator = document.createElement('hr');
  447.     separator.style.border = '1px solid rgb(60, 60, 60)';
  448.     separator.style.margin = '5px -5px';
  449.     mainBox.appendChild(separator);
  450.  
  451.     const row1 = document.createElement('div');
  452.     row1.style.display = 'flex';
  453.     row1.style.gap = '15px';
  454.     row1.style.marginTop = '15px';
  455.     mainBox.appendChild(row1);
  456.  
  457.      const row2 = document.createElement('div');
  458.     row2.style.display = 'flex';
  459.     row2.style.gap = '15px';
  460.     row2.style.marginTop = '15px';
  461.     mainBox.appendChild(row2);
  462.  
  463.      const row3 = document.createElement('div');
  464.     row3.style.display = 'flex';
  465.     row3.style.gap = '15px';
  466.     row3.style.marginTop = '15px';
  467.     mainBox.appendChild(row3);
  468.  
  469. const armourViewBox = document.createElement('div');
  470. armourViewBox.style.width = '170px';
  471. armourViewBox.style.height = '170px';
  472. armourViewBox.style.backgroundColor = 'rgb(50, 50, 50)';
  473. armourViewBox.style.display = 'flex';
  474. armourViewBox.style.border = '2px solid rgb(60, 60, 60)';
  475. armourViewBox.style.flexDirection = 'column';
  476. armourViewBox.style.justifyContent = 'space-between';
  477. armourViewBox.style.alignItems = 'center';
  478. armourViewBox.style.padding = '10px';
  479. armourViewBox.style.borderRadius = '10px';
  480.  
  481. const armourViewText = document.createElement('span');
  482. armourViewText.textContent = 'ARMOR VIEW';
  483. armourViewBox.appendChild(armourViewText);
  484.  
  485. const armourViewToggleButton = document.createElement('button');
  486. armourViewToggleButton.textContent = 'Enabled';
  487. armourViewToggleButton.style.backgroundColor = 'rgb(40, 40, 40)';
  488. armourViewToggleButton.style.borderRadius = '10px';
  489. armourViewToggleButton.style.border = 'none';
  490. armourViewToggleButton.style.color = 'white';
  491. armourViewToggleButton.style.width = '160px';
  492. armourViewToggleButton.style.height = '40px';
  493. armourViewToggleButton.style.fontSize = '18px';
  494. armourViewToggleButton.style.cursor = 'pointer';
  495. armourViewBox.appendChild(armourViewToggleButton);
  496. row1.appendChild(armourViewBox);
  497.  
  498. let selectedItemBoxInterval;
  499.  
  500. function createSelectedItemBox() {
  501.     const selectedItemBox = document.createElement('div');
  502.     selectedItemBox.id = 'selected-item-box';
  503.     selectedItemBox.style.position = 'fixed';
  504.     selectedItemBox.style.bottom = '100px';
  505.     selectedItemBox.style.left = '31%';
  506.     selectedItemBox.style.transformX = 'translateX(-28%)';
  507.     selectedItemBox.style.width = '400px';
  508.     selectedItemBox.style.height = '70px';
  509.     selectedItemBox.style.zIndex = '9999';
  510.     selectedItemBox.style.overflow = 'hidden';
  511.     selectedItemBox.style.display = 'flex';
  512.     selectedItemBox.style.alignItems = 'center';
  513.     selectedItemBox.style.justifyContent = 'center';
  514.  
  515.     mainHud.appendChild(selectedItemBox);
  516.  
  517.     let isMoving = false;
  518. let OffsetAX = 0;
  519. let OffsetAY = 0;
  520.  
  521. selectedItemBox.addEventListener('mousedown', (e) => {
  522.     if (armourViewToggleButton.textContent === 'Enabled'&& EditHud.style.display === 'flex' && e.target.nodeName !== 'INPUT') {
  523.         isMoving = true;
  524.         OffsetAX = e.clientX;
  525.         OffsetAY = e.clientY;
  526.     }
  527. });
  528.  
  529. document.addEventListener('mousemove', (e) => {
  530.     if (armourViewToggleButton.textContent === 'Enabled' && isMoving) {
  531.         selectedItemBox.style.left = `${e.clientX}px`;
  532.         selectedItemBox.style.top = `${e.clientY}px`;
  533.     }
  534. });
  535.  
  536. document.addEventListener('mouseup', () => isMoving = false);
  537.  
  538.  
  539.     function updateSelectedItems() {
  540.         const indices = [46, 47, 48, 49, 50];
  541.         const selectedItemBox = document.getElementById('selected-item-box');
  542.         if (selectedItemBox) {
  543.             selectedItemBox.innerHTML = '';
  544.  
  545.             indices.forEach(idx => {
  546.                 const selectedItem = document.querySelector(`.InvenItem[data-inven-idx="${idx}"]`);
  547.                 if (selectedItem) {
  548.                     const clonedItem = selectedItem.cloneNode(true);
  549.                     clonedItem.removeAttribute('id');
  550.                     clonedItem.querySelectorAll('[id]').forEach(element => element.removeAttribute('id'));
  551.  
  552.                     const itemImage = clonedItem.querySelector('.BlockItemWrapper img');
  553.                     if (itemImage) {
  554.                         itemImage.style.maxWidth = '100%';
  555.                         itemImage.style.maxHeight = '100%';
  556.                         itemImage.style.display = 'block';
  557.                         itemImage.style.margin = 'auto';
  558.                     }
  559.  
  560.                     selectedItemBox.appendChild(clonedItem);
  561.                 }
  562.             });
  563.         }
  564.     }
  565.  
  566.     selectedItemBoxInterval = setInterval(updateSelectedItems, 1000);
  567. }
  568.  
  569. function removeSelectedItemBox() {
  570.     clearInterval(selectedItemBoxInterval);
  571.     const selectedItemBox = document.getElementById('selected-item-box');
  572.     if (selectedItemBox) {
  573.         selectedItemBox.remove();
  574.     }
  575. }
  576.  
  577. armourViewToggleButton.addEventListener('click', function() {
  578.     if (armourViewToggleButton.textContent === 'Enabled') {
  579.         armourViewToggleButton.textContent = 'Disabled';
  580.         removeSelectedItemBox();
  581.     } else {
  582.         armourViewToggleButton.textContent = 'Enabled';
  583.         createSelectedItemBox();
  584.     }
  585. });
  586.  
  587. if (armourViewToggleButton.textContent === 'Enabled') {
  588.     createSelectedItemBox();
  589. }
  590.  
  591.  
  592. const toggleshiftBox = document.createElement('div');
  593. toggleshiftBox.style.width = '170px';
  594. toggleshiftBox.style.height = '170px';
  595. toggleshiftBox.style.backgroundColor = 'rgb(50, 50, 50)';
  596. toggleshiftBox.style.display = 'flex';
  597. toggleshiftBox.style.border = '2px solid rgb(60, 60, 60)';
  598. toggleshiftBox.style.flexDirection = 'column';
  599. toggleshiftBox.style.justifyContent = 'space-between';
  600. toggleshiftBox.style.alignItems = 'center';
  601. toggleshiftBox.style.padding = '10px';
  602. toggleshiftBox.style.borderRadius = '10px';
  603.  
  604. const toggleshiftText = document.createElement('span');
  605. toggleshiftText.textContent = 'TOGGLE SPRINT';
  606. toggleshiftBox.appendChild(toggleshiftText);
  607.  
  608. const toggleshiftButtonContainer = document.createElement('div');
  609. toggleshiftButtonContainer.style.display = 'flex';
  610. toggleshiftButtonContainer.style.justifyContent = 'space-between';
  611. toggleshiftButtonContainer.style.width = '100%';
  612.  
  613. const toggleshiftToggleButton = document.createElement('button');
  614. toggleshiftToggleButton.textContent = 'Disabled';
  615. toggleshiftToggleButton.style.backgroundColor = 'rgb(40, 40, 40)';
  616. toggleshiftToggleButton.style.borderRadius = '10px';
  617. toggleshiftToggleButton.style.border = 'none';
  618. toggleshiftToggleButton.style.color = 'white';
  619. toggleshiftToggleButton.style.width = '100px';
  620. toggleshiftToggleButton.style.height = '40px';
  621. toggleshiftToggleButton.style.fontSize = '18px';
  622. toggleshiftToggleButton.style.cursor = 'pointer';
  623. toggleshiftToggleButton.addEventListener('click', function() {
  624.     if (toggleshiftToggleButton.textContent === 'Enabled') {
  625.         toggleshiftToggleButton.textContent = 'Disabled';
  626.         isRunning = '';
  627.         isKeepingRunning = false;
  628.         document.dispatchEvent(shiftUp);
  629.     } else {//9956074932
  630.         toggleshiftToggleButton.textContent = 'Enabled';
  631.     }
  632. });
  633. toggleshiftButtonContainer.appendChild(toggleshiftToggleButton);
  634.  
  635. const toggleshiftSettingsButton = document.createElement('button');
  636. toggleshiftSettingsButton.innerHTML = '⚙';
  637. toggleshiftSettingsButton.style.backgroundColor = 'rgb(40, 40, 40)';
  638. toggleshiftSettingsButton.style.borderRadius = '10px';
  639. toggleshiftSettingsButton.style.border = 'none';
  640. toggleshiftSettingsButton.style.color = 'white';
  641. toggleshiftSettingsButton.style.fontSize = '24px';
  642. toggleshiftSettingsButton.style.width = '40px';
  643. toggleshiftSettingsButton.style.height = '40px';
  644. toggleshiftSettingsButton.style.cursor = 'pointer';
  645. toggleshiftSettingsButton.addEventListener('click', function() {
  646.     toggleshiftSettingsModal.style.display = 'block';
  647. });
  648. toggleshiftButtonContainer.appendChild(toggleshiftSettingsButton);
  649.  
  650. toggleshiftBox.appendChild(toggleshiftButtonContainer);
  651. row1.appendChild(toggleshiftBox);
  652.  
  653. let togglesprintKey = 'KeyF';
  654. let isRunning = '';
  655. let isKeepingRunning = false;
  656.  
  657. const shiftKeyData = {
  658.     key: 'Shift',
  659.     code: 'ShiftLeft',
  660.     keyCode: 16,
  661.     which: 16,
  662.     shiftKey: true,
  663.     ControlKey: false,
  664.     altKey: false,
  665.     metaKey: false,
  666.     repeat: false,
  667.     bubbles: true,
  668.     cancelable: true
  669. };
  670.  
  671. const shiftDown = new KeyboardEvent('keydown', shiftKeyData);
  672. const shiftUp = new KeyboardEvent('keyup', shiftKeyData);
  673.  
  674. document.addEventListener('keyup', e => {
  675.     if (toggleshiftToggleButton.textContent === 'Enabled') {
  676.         if (e.code === togglesprintKey) {
  677.             if (isRunning === '') {
  678.                 isRunning = 'Shift';
  679.                 isKeepingRunning = true;
  680.                 document.dispatchEvent(shiftDown);
  681.             } else if (isRunning === 'Shift') {
  682.                 isRunning = '';
  683.                 isKeepingRunning = false;
  684.                 document.dispatchEvent(shiftUp);
  685.             }
  686.         } else if (e.code === 'ShiftLeft' && isRunning === 'Shift') {
  687.             if (isKeepingRunning) {
  688.                 e.stopImmediatePropagation();
  689.                 return;
  690.             }
  691.             isRunning = '';
  692.         }
  693.     }
  694. });
  695.  
  696. document.addEventListener('keydown', e => {
  697.     if (toggleshiftToggleButton.textContent === 'Enabled') {
  698.         if (e.code === 'ShiftLeft' && isRunning === '') {
  699.             isRunning = 'Shift';
  700.         }
  701.     }
  702. });
  703.  
  704. setInterval(() => {
  705.     if (isKeepingRunning && toggleshiftToggleButton.textContent === 'Enabled') {
  706.         document.dispatchEvent(shiftDown);
  707.     }
  708. }, 100);
  709.  
  710.     const crosshairBox = document.createElement('div');
  711.     crosshairBox.style.width = '170px';
  712.     crosshairBox.style.height = '170px';
  713.     crosshairBox.style.backgroundColor = 'rgb(50, 50, 50)';
  714.     crosshairBox.style.display = 'flex';
  715.     crosshairBox.style.border = '2px solid rgb(60, 60, 60)';
  716.     crosshairBox.style.flexDirection = 'column';
  717.     crosshairBox.style.justifyContent = 'space-between';
  718.     crosshairBox.style.alignItems = 'center';
  719.     crosshairBox.style.padding = '10px';
  720.     crosshairBox.style.borderRadius = '10px';
  721.  
  722.     const crosshairText = document.createElement('span');
  723.     crosshairText.textContent = 'CROSSHAIR';
  724.     crosshairBox.appendChild(crosshairText);
  725.  
  726.     const crosshairSettingsButton = document.createElement('button');
  727.     crosshairSettingsButton.textContent = 'Customize'
  728.     crosshairSettingsButton.style.backgroundColor = 'rgb(40, 40, 40)';
  729.     crosshairSettingsButton.style.borderRadius = '10px';
  730.     crosshairSettingsButton.style.border = 'none';
  731.     crosshairSettingsButton.style.color = 'white';
  732.     crosshairSettingsButton.style.fontSize = '18px';
  733.     crosshairSettingsButton.style.width = '160px';
  734.     crosshairSettingsButton.style.height = '40px';
  735.     crosshairSettingsButton.style.cursor = 'pointer';
  736.     crosshairSettingsButton.addEventListener('click', function() {
  737.         crosshairSettingsModal.style.display = 'block';
  738.     });
  739.     crosshairBox.appendChild(crosshairSettingsButton);
  740.  
  741.     row1.appendChild(crosshairBox);
  742.  
  743.         const cpsBox = document.createElement('div');
  744.     cpsBox.style.width = '170px';
  745.     cpsBox.style.height = '170px';
  746.     cpsBox.style.backgroundColor = 'rgb(50, 50, 50)';
  747.     cpsBox.style.display = 'flex';
  748.     cpsBox.style.border = '2px solid rgb(60, 60, 60)';
  749.     cpsBox.style.flexDirection = 'column';
  750.     cpsBox.style.justifyContent = 'space-between';
  751.     cpsBox.style.alignItems = 'center';
  752.     cpsBox.style.padding = '10px';
  753.     cpsBox.style.borderRadius = '10px';
  754.  
  755.     const cpsText = document.createElement('span');
  756.     cpsText.textContent = 'CPS COUNTER';
  757.     cpsBox.appendChild(cpsText);
  758.  
  759.     const cpsButtonContainer = document.createElement('div');
  760.     cpsButtonContainer.style.display = 'flex';
  761.     cpsButtonContainer.style.justifyContent = 'space-between';
  762.     cpsButtonContainer.style.width = '100%';
  763.  
  764.     const cpsToggleButton = document.createElement('button');
  765.     cpsToggleButton.textContent = 'Disabled';
  766.     cpsToggleButton.style.backgroundColor = 'rgb(40, 40, 40)';
  767.     cpsToggleButton.style.borderRadius = '10px';
  768.     cpsToggleButton.style.border = 'none';
  769.     cpsToggleButton.style.color = 'white';
  770.     cpsToggleButton.style.width = '160px';
  771.     cpsToggleButton.style.height = '40px';
  772.     cpsToggleButton.style.fontSize = '18px';
  773.     cpsToggleButton.style.cursor = 'pointer';
  774. let cpsCounter;
  775. function createCPSCounter() {
  776.     cpsCounter = document.createElement('div');
  777.     cpsCounter.style.position = 'fixed';
  778.     cpsCounter.style.top = '96%';
  779.     cpsCounter.style.left = '96%';
  780.     cpsCounter.style.padding = '5px 10px';
  781.     cpsCounter.style.backgroundColor = '#00000066';
  782.     cpsCounter.style.color = 'white';
  783.     cpsCounter.style.fontSize = '16px';
  784.     cpsCounter.style.zIndex = '1000';
  785.     cpsCounter.innerText = 'CPS: 0';
  786.     cpsCounter.style.cursor = 'pointer';
  787.     mainHud.appendChild(cpsCounter);
  788.  
  789. let isMoving = false;
  790. let OffsetCX = 0;
  791. let OffsetCY = 0;
  792.  
  793. cpsCounter.addEventListener('mousedown', (e) => {
  794.     if (cpsToggleButton.textContent === 'Enabled'&& EditHud.style.display === 'flex' && e.target.nodeName !== 'INPUT') {
  795.         isMoving = true;
  796.         OffsetCX = e.clientX;
  797.         OffsetCY = e.clientY;
  798.     }
  799. });
  800.  
  801. document.addEventListener('mousemove', (e) => {
  802.     if (cpsToggleButton.textContent === 'Enabled' && isMoving) {
  803.         cpsCounter.style.left = `${e.clientX}px`;
  804.         cpsCounter.style.top = `${e.clientY}px`;
  805.     }
  806. });
  807.  
  808. document.addEventListener('mouseup', () => isMoving = false);
  809. }
  810.  
  811. let clickTimes = [];
  812. let cpsInterval = null;
  813. let clickListener = null;
  814.  
  815. cpsToggleButton.addEventListener('click', function() {
  816.     if (cpsToggleButton.textContent === 'Disabled') {
  817.         cpsToggleButton.textContent = 'Enabled';
  818.         createCPSCounter();
  819.  
  820.         function countClick() {
  821.             var currentTime = new Date().getTime();
  822.             clickTimes.push(currentTime);
  823.             updateCPS();
  824.         }
  825.  
  826.         function updateCPS() {
  827.             var currentTime = new Date().getTime();
  828.             var oneSecondAgo = currentTime - 1000;
  829.  
  830.             clickTimes = clickTimes.filter(time => time >= oneSecondAgo);
  831.  
  832.             cpsCounter.innerText = 'CPS: ' + clickTimes.length;
  833.         }
  834.  
  835.         clickListener = function() {
  836.             countClick();
  837.         };
  838.  
  839.         document.addEventListener('click', clickListener);
  840.  
  841.         cpsInterval = setInterval(updateCPS, 1000);
  842.  
  843.     } else {
  844.         cpsToggleButton.textContent = 'Disabled';
  845.  
  846.         if (cpsInterval) {
  847.             clearInterval(cpsInterval);
  848.             cpsInterval = null;
  849.         }
  850.         if (clickListener) {
  851.             document.removeEventListener('click', clickListener);
  852.             clickListener = null;
  853.         }
  854.         if (cpsCounter) {
  855.             cpsCounter.remove();
  856.             cpsCounter = null;
  857.         }
  858.         clickTimes = [];
  859.     }
  860. });
  861.  
  862.  
  863.  
  864.     cpsBox.appendChild(cpsToggleButton);
  865.  
  866.     row2.appendChild(cpsBox);
  867.  
  868. const pingBox = document.createElement('div');
  869. pingBox.style.width = '170px';
  870. pingBox.style.height = '170px';
  871. pingBox.style.backgroundColor = 'rgb(50, 50, 50)';
  872. pingBox.style.display = 'flex';
  873. pingBox.style.border = '2px solid rgb(60, 60, 60)';
  874. pingBox.style.flexDirection = 'column';
  875. pingBox.style.justifyContent = 'space-between';
  876. pingBox.style.alignItems = 'center';
  877. pingBox.style.padding = '10px';
  878. pingBox.style.borderRadius = '10px';
  879.  
  880. const pingText = document.createElement('span');
  881. pingText.textContent = 'PING COUNTER';
  882. pingBox.appendChild(pingText);
  883.  
  884. const pingToggleButton = document.createElement('button');
  885. pingToggleButton.textContent = 'Disabled'; // Start as disabled
  886. pingToggleButton.style.backgroundColor = 'rgb(40, 40, 40)';
  887. pingToggleButton.style.borderRadius = '10px';
  888. pingToggleButton.style.border = 'none';
  889. pingToggleButton.style.color = 'white';
  890. pingToggleButton.style.width = '160px';
  891. pingToggleButton.style.height = '40px';
  892. pingToggleButton.style.fontSize = '18px';
  893. pingToggleButton.style.cursor = 'pointer';
  894.  
  895. // Initialize pinging state
  896. let isPinging = false; // Variable to track pinging status
  897. let pingInterval; // Variable to store the interval ID
  898.  
  899. pingToggleButton.addEventListener('click', () => {
  900.     isPinging = !isPinging; // Toggle pinging state
  901.  
  902.     if (isPinging) {
  903.         pingToggleButton.textContent = 'Enabled';
  904.         pingCounter.startPinging(1500); // Start pinging every 1.5 seconds
  905.         pingCounter.pingTimeDisplay.style.display = 'block'; // Show ping time display
  906.     } else {
  907.         pingToggleButton.textContent = 'Disabled';
  908.         clearInterval(pingInterval); // Stop pinging
  909.         pingCounter.pingTimeDisplay.style.display = 'none'; // Hide ping time display
  910.     }
  911. });
  912. pingBox.appendChild(pingToggleButton); // Add the toggle button to the container
  913. row2.appendChild(pingBox); // Assuming row2 is defined elsewhere
  914.  
  915. class PingCounter {
  916.     constructor(url) {
  917.         // Store variables as local constants
  918.         this.pingCount = 0; // Change from const to this to access in methods
  919.         this.url = url;
  920.  
  921.         // Create an element to display ping time
  922.         this.pingTimeDisplay = document.createElement('div');
  923.         this.pingTimeDisplay.id = 'pingTimeDisplay';
  924.         this.pingTimeDisplay.innerText = 'Ping : ';
  925.         this.pingTimeDisplay.style.display = 'none'; // Hide by default
  926.  
  927.         // Style the ping time display
  928.         this.pingTimeDisplay.style.position = 'fixed';
  929.         this.pingTimeDisplay.style.top = '96%';
  930.         this.pingTimeDisplay.style.left = '89%';
  931.         this.pingTimeDisplay.style.padding = '5px 10px';
  932.         this.pingTimeDisplay.style.backgroundColor = '#00000066' ;
  933.         this.pingTimeDisplay.style.color = 'white';
  934.         this.pingTimeDisplay.style.fontSize = '16px';
  935.         this.pingTimeDisplay.style.zIndex = '1000';
  936.  
  937.         mainHud.appendChild(this.pingTimeDisplay);
  938.     }
  939.  
  940.     ping() {
  941.         const start = new Date().getTime();
  942.         fetch(this.url, { method: 'HEAD', mode: 'no-cors' })
  943.             .then(() => {
  944.                 const end = new Date().getTime();
  945.                 const pingTime = end - start;
  946.  
  947.                 // Update ping time on screen
  948.                 this.pingTimeDisplay.innerText = `Ping : ${pingTime} ms`;
  949.                 this.pingCount++;
  950.             })
  951.             .catch((error) => {
  952.                 console.error('Ping failed:', error);
  953.             });
  954.     }
  955.  
  956.     // Start pinging
  957.     startPinging(interval) {
  958.         this.ping(); // Initial ping
  959.         pingInterval = setInterval(() => this.ping(), interval); // Repeat pinging
  960.     }
  961. }
  962.  
  963. // Initialize PingCounter
  964. const pingCounter = new PingCounter('https://bloxd.io');
  965.  
  966.  
  967.  
  968. const HandItemBox = document.createElement('div');
  969. HandItemBox.style.width = '170px';
  970. HandItemBox.style.height = '170px';
  971. HandItemBox.style.backgroundColor = 'rgb(50, 50, 50)';
  972. HandItemBox.style.display = 'flex';
  973. HandItemBox.style.border = '2px solid rgb(60, 60, 60)';
  974. HandItemBox.style.flexDirection = 'column';
  975. HandItemBox.style.justifyContent = 'space-between';
  976. HandItemBox.style.alignItems = 'center';
  977. HandItemBox.style.padding = '10px';
  978. HandItemBox.style.borderRadius = '10px';
  979.  
  980. const HandItemText = document.createElement('span');
  981. HandItemText.textContent = 'HANDITEM VIEW';
  982. HandItemBox.appendChild(HandItemText);
  983.  
  984.     const HandItemToggleButton = document.createElement('button');
  985. HandItemToggleButton.textContent = 'Disabled';
  986. HandItemToggleButton.style.backgroundColor = 'rgb(40, 40, 40)';
  987. HandItemToggleButton.style.borderRadius = '10px';
  988. HandItemToggleButton.style.border = 'none';
  989. HandItemToggleButton.style.color = 'white';
  990. HandItemToggleButton.style.width = '160px';
  991. HandItemToggleButton.style.height = '40px';
  992. HandItemToggleButton.style.fontSize = '18px';
  993. HandItemToggleButton.style.cursor = 'pointer';
  994. HandItemBox.appendChild(HandItemToggleButton);
  995. row1.appendChild(HandItemBox);
  996.  
  997.  
  998. function createHandItemBox() {
  999.     const HandItemBox = document.createElement('div');
  1000.     HandItemBox.id = 'hand-item-box';
  1001.     HandItemBox.style.position = 'fixed';
  1002.     HandItemBox.style.bottom = '105px';
  1003.     HandItemBox.style.left = '28%';
  1004.     HandItemBox.style.width = '60px';
  1005.     HandItemBox.style.height = '60px';
  1006.     HandItemBox.style.zIndex = '9999';
  1007.     HandItemBox.style.overflow = 'hidden';
  1008.     HandItemBox.style.display = 'flex';
  1009.     HandItemBox.style.alignItems = 'center';
  1010.     HandItemBox.style.justifyContent = 'center';
  1011.  
  1012.     mainHud.appendChild(HandItemBox);
  1013.  
  1014.         let isMoving = false;
  1015. let OffsetHX = 0;
  1016. let OffsetHY = 0;
  1017.  
  1018. HandItemBox.addEventListener('mousedown', (e) => {
  1019.     if (HandItemToggleButton.textContent === 'Enabled'&& EditHud.style.display === 'flex' && e.target.nodeName !== 'INPUT') {
  1020.         isMoving = true;
  1021.         OffsetHX = e.clientX;
  1022.         OffsetHY = e.clientY;
  1023.     }
  1024. });
  1025.  
  1026. document.addEventListener('mousemove', (e) => {
  1027.     if (HandItemToggleButton.textContent === 'Enabled' && isMoving) {
  1028.         HandItemBox.style.left = `${e.clientX}px`;
  1029.         HandItemBox.style.top = `${e.clientY}px`;
  1030.     }
  1031. });
  1032.  
  1033. document.addEventListener('mouseup', () => isMoving = false);
  1034. }
  1035.  
  1036. function updateHandItems() {
  1037.     const HandItemBox = document.getElementById('hand-item-box');
  1038.     if (HandItemBox) {
  1039.         HandItemBox.innerHTML = '';
  1040.  
  1041.         const HandItems = document.querySelectorAll('.SelectedItem');
  1042.         HandItems.forEach(HandItem => {
  1043.             const clonedHItem = HandItem.cloneNode(true);
  1044.             clonedHItem.removeAttribute('id');
  1045.             clonedHItem.querySelectorAll('[id]').forEach(element => element.removeAttribute('id'));
  1046.             Object.assign(clonedHItem.style, {
  1047.                 position: 'static',
  1048.                 margin: '0',
  1049.                 padding: '0',
  1050.                 width: '100%',
  1051.                 height: '100%',
  1052.                 boxSizing: 'border-box'
  1053.             });
  1054.  
  1055.             HandItemBox.appendChild(clonedHItem);
  1056.         });
  1057.     }
  1058. }
  1059.  
  1060. let isHandItemBoxEnabled = false;
  1061.  
  1062. HandItemToggleButton.addEventListener('click', function() {
  1063.     isHandItemBoxEnabled = !isHandItemBoxEnabled;
  1064.     if (isHandItemBoxEnabled) {
  1065.         HandItemToggleButton.textContent = 'Enabled';
  1066.         createHandItemBox();
  1067.         setInterval(updateHandItems, 1000);
  1068.     } else {
  1069.         HandItemToggleButton.textContent = 'Disabled';
  1070.         const existingBox = document.getElementById('hand-item-box');
  1071.         if (existingBox) {
  1072.             existingBox.remove();
  1073.         }
  1074.     }
  1075. });
  1076.  
  1077. if (isHandItemBoxEnabled) {
  1078.     createHandItemBox();
  1079.     setInterval(updateHandItems, 1000);
  1080. }
  1081.  
  1082.     const cinematicBox = document.createElement('div');
  1083. cinematicBox.style.width = '170px';
  1084. cinematicBox.style.height = '170px';
  1085. cinematicBox.style.backgroundColor = 'rgb(50, 50, 50)';
  1086. cinematicBox.style.display = 'flex';
  1087. cinematicBox.style.border = '2px solid rgb(60, 60, 60)';
  1088. cinematicBox.style.flexDirection = 'column';
  1089. cinematicBox.style.justifyContent = 'space-between';
  1090. cinematicBox.style.alignItems = 'center';
  1091. cinematicBox.style.padding = '10px';
  1092. cinematicBox.style.borderRadius = '10px';
  1093.  
  1094. const cinematicText = document.createElement('span');
  1095. cinematicText.textContent = 'CINEMATIC MODE';
  1096. cinematicBox.appendChild(cinematicText);
  1097.  
  1098.     const cinematicToggleButton = document.createElement('button');
  1099. cinematicToggleButton.textContent = 'Disabled';
  1100. cinematicToggleButton.style.backgroundColor = 'rgb(40, 40, 40)';
  1101. cinematicToggleButton.style.borderRadius = '10px';
  1102. cinematicToggleButton.style.border = 'none';
  1103. cinematicToggleButton.style.color = 'white';
  1104. cinematicToggleButton.style.width = '160px';
  1105. cinematicToggleButton.style.height = '40px';
  1106. cinematicToggleButton.style.fontSize = '18px';
  1107. cinematicToggleButton.style.cursor = 'pointer';
  1108. cinematicToggleButton.addEventListener('click', function() {
  1109.     if (cinematicToggleButton.textContent === 'Enabled') {
  1110.         cinematicToggleButton.textContent = 'Disabled';
  1111.     } else {
  1112.         cinematicToggleButton.textContent = 'Enabled';
  1113.     }
  1114. });
  1115. cinematicBox.appendChild(cinematicToggleButton);
  1116.  
  1117. row2.appendChild(cinematicBox);
  1118.  
  1119.  
  1120. document.addEventListener('keydown', function(event) {
  1121.     var key = event.key;
  1122.     var wholeAppWrapper = document.querySelector('.WholeAppWrapper');
  1123.     if (cinematicToggleButton.textContent === 'Enabled' && (key === 'h' || key === 'H')) {
  1124.         wholeAppWrapper.style.visibility = wholeAppWrapper.style.visibility === 'hidden' ? 'visible' : 'hidden';
  1125.             mainHud.style.visibility = mainHud.style.visibility === 'hidden' ? 'visible' : 'hidden';
  1126.     }
  1127. });
  1128.  
  1129. const keystrokeBox = document.createElement('div');
  1130. keystrokeBox.style.width = '170px';
  1131. keystrokeBox.style.height = '170px';
  1132. keystrokeBox.style.backgroundColor = 'rgb(50, 50, 50)';
  1133. keystrokeBox.style.display = 'flex';
  1134. keystrokeBox.style.border = '2px solid rgb(60, 60, 60)';
  1135. keystrokeBox.style.flexDirection = 'column';
  1136. keystrokeBox.style.justifyContent = 'space-between';
  1137. keystrokeBox.style.alignItems = 'center';
  1138. keystrokeBox.style.padding = '10px';
  1139. keystrokeBox.style.borderRadius = '10px';
  1140.  
  1141. const keystrokeText = document.createElement('span');
  1142. keystrokeText.textContent = 'KEYSTROKES';
  1143. keystrokeBox.appendChild(keystrokeText);
  1144.  
  1145. const keystrokeToggleButton = document.createElement('button');
  1146. keystrokeToggleButton.textContent = 'Disabled'; // Set default state to 'Disabled'
  1147. keystrokeToggleButton.style.backgroundColor = 'rgb(40, 40, 40)';
  1148. keystrokeToggleButton.style.borderRadius = '10px';
  1149. keystrokeToggleButton.style.border = 'none';
  1150. keystrokeToggleButton.style.color = 'white';
  1151. keystrokeToggleButton.style.width = '160px';
  1152. keystrokeToggleButton.style.height = '40px';
  1153. keystrokeToggleButton.style.fontSize = '18px';
  1154. keystrokeToggleButton.style.cursor = 'pointer';
  1155.  
  1156. keystrokeToggleButton.addEventListener('click', function() {
  1157.     if (keystrokeToggleButton.textContent === 'Enabled') {
  1158.         keystrokeToggleButton.textContent = 'Disabled';
  1159.         resetKeyStyles();
  1160.         setKeysVisibility(false);
  1161.     } else {
  1162.         keystrokeToggleButton.textContent = 'Enabled';
  1163.         setKeysVisibility(true);
  1164.     }
  1165. });
  1166.  
  1167. keystrokeBox.appendChild(keystrokeToggleButton);
  1168. row2.appendChild(keystrokeBox);
  1169.  
  1170. const keys = [
  1171.     { key: 'W', top: '5px', left: '50%' },
  1172.     { key: 'A', top: '60px', left: '31.5%' },
  1173.     { key: 'S', top: '60px', left: '50%' },
  1174.     { key: 'D', top: '60px', left: '68%' },
  1175.     { key: 'LMB', top: '115px', left: '35.5%', width: '77px' },
  1176.     { key: 'RMB', top: '115px', left: '64%', width: '77px' },
  1177.     { key: '―――', top: '170px', left: '50%', height: '25px', width: '160px', fontSize: '18px' }
  1178. ];
  1179.  
  1180. const container = document.createElement("div");
  1181. Object.assign(container.style, {
  1182.     zIndex: "10000",
  1183.     width: "300px",
  1184.     height: "300px",
  1185.     transform: "translate(-50%, -50%)",
  1186.     top: "91%",
  1187.     left: "4.7%",
  1188.     position: "fixed",
  1189.     opacity: "70%",
  1190.     cursor : 'pointer'
  1191. });
  1192. mainHud.appendChild(container);
  1193.  
  1194. let isMoving = false;
  1195. let offsetX = 0;
  1196. let offsetY = 0;
  1197.  
  1198. container.addEventListener('mousedown', (event) => {
  1199.     if (keystrokeToggleButton.textContent === 'Enabled' && EditHud.style.display === 'flex' && event.target.nodeName !== 'INPUT') {
  1200.         isMoving = true;
  1201.         offsetX = event.clientX;
  1202.         offsetY = event.clientY;
  1203.     }
  1204. });
  1205.  
  1206. document.addEventListener('mousemove', (event) => {
  1207.     if (keystrokeToggleButton.textContent === 'Enabled' && isMoving) {
  1208.         container.style.left = `${event.clientX}px`;
  1209.         container.style.top = `${event.clientY}px`;
  1210.     }
  1211. });
  1212.  
  1213. document.addEventListener('mouseup', () => isMoving = false);
  1214.  
  1215. const createKeyElement = ({ key, top, left, width = '50px', height = '50px', fontSize = '24px' }) => {
  1216.     const element = document.createElement('div');
  1217.     Object.assign(element.style, {
  1218.         position: 'fixed',
  1219.         color: 'white',
  1220.         top,
  1221.         left,
  1222.         transform: 'translateX(-50%)',
  1223.         zIndex: '10000',
  1224.         fontWeight: 'bold',
  1225.         backgroundColor: 'rgba(0, 0, 0, 0.6)',
  1226.         fontSize,
  1227.         height,
  1228.         width,
  1229.         textAlign: 'center',
  1230.         lineHeight: height
  1231.     });
  1232.     element.textContent = key;
  1233.     container.appendChild(element);
  1234.     return element;
  1235. };
  1236.  
  1237. const keyElements = keys.reduce((acc, keyConfig) => {
  1238.     acc[keyConfig.key] = createKeyElement(keyConfig);
  1239.     return acc;
  1240. }, {});
  1241.  
  1242. const updateKeyStyle = (key, active) => {
  1243.     if (keystrokeToggleButton.textContent === 'Enabled') {
  1244.         keyElements[key].style.backgroundColor = active ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)";
  1245.         keyElements[key].style.color = active ? "black" : "white";
  1246.     }
  1247. };
  1248.  
  1249. const resetKeyStyles = () => {
  1250.     Object.keys(keyElements).forEach(key => {
  1251.         keyElements[key].style.backgroundColor = "rgba(0, 0, 0, 0.6)";
  1252.         keyElements[key].style.color = "white";
  1253.     });
  1254. };
  1255.  
  1256. const setKeysVisibility = (visible) => {
  1257.     Object.values(keyElements).forEach(element => {
  1258.         element.style.display = visible ? 'block' : 'none';
  1259.     });
  1260. };
  1261.  
  1262. if (keystrokeToggleButton.textContent === 'Disabled') {
  1263.     setKeysVisibility(false);
  1264. }
  1265.  
  1266. document.addEventListener('keydown', ({ key }) => {
  1267.     if (keystrokeToggleButton.textContent === 'Enabled') {
  1268.         const upperKey = key.toUpperCase();
  1269.         if (keyElements[upperKey]) updateKeyStyle(upperKey, true);
  1270.         if (key === ' ') updateKeyStyle('―――', true);
  1271.     }
  1272. });
  1273.  
  1274. document.addEventListener('keyup', ({ key }) => {
  1275.     if (keystrokeToggleButton.textContent === 'Enabled') {
  1276.         const upperKey = key.toUpperCase();
  1277.         if (keyElements[upperKey]) updateKeyStyle(upperKey, false);
  1278.         if (key === ' ') updateKeyStyle('―――', false);
  1279.     }
  1280. });
  1281.  
  1282. document.addEventListener('mousedown', ({ button }) => {
  1283.     if (keystrokeToggleButton.textContent === 'Enabled') {
  1284.         if (button === 0) updateKeyStyle('LMB', true);
  1285.         if (button === 2) updateKeyStyle('RMB', true);
  1286.     }
  1287. });
  1288.  
  1289. document.addEventListener('mouseup', ({ button }) => {
  1290.     if (keystrokeToggleButton.textContent === 'Enabled') {
  1291.         if (button === 0) updateKeyStyle('LMB', false);
  1292.         if (button === 2) updateKeyStyle('RMB', false);
  1293.     }
  1294. });
  1295.  
  1296.  
  1297.             const hotbarBox = document.createElement('div');
  1298.     hotbarBox.style.width = '161px';
  1299.     hotbarBox.style.height = '170px';
  1300.     hotbarBox.style.backgroundColor = 'rgb(50, 50, 50)';
  1301.     hotbarBox.style.display = 'flex';
  1302.     hotbarBox.style.border = '2px solid rgb(60, 60, 60)';
  1303.     hotbarBox.style.flexDirection = 'column';
  1304.     hotbarBox.style.justifyContent = 'space-between';
  1305.     hotbarBox.style.alignItems = 'center';
  1306.     hotbarBox.style.padding = '10px';
  1307.     hotbarBox.style.borderRadius = '10px';
  1308.  
  1309.     const hotbarText = document.createElement('span');
  1310.     hotbarText.textContent = 'HOTBAR';
  1311.     hotbarBox.appendChild(hotbarText);
  1312.  
  1313.     const hotbarSettingsButton = document.createElement('button');
  1314.     hotbarSettingsButton.textContent = 'Customize';
  1315.     hotbarSettingsButton.style.backgroundColor = 'rgb(40, 40, 40)';
  1316.     hotbarSettingsButton.style.borderRadius = '10px';
  1317.     hotbarSettingsButton.style.border = 'none';
  1318.     hotbarSettingsButton.style.color = 'white';
  1319.     hotbarSettingsButton.style.fontSize = '18px';
  1320.     hotbarSettingsButton.style.width = '160px';
  1321.     hotbarSettingsButton.style.height = '40px';
  1322.     hotbarSettingsButton.style.cursor = 'pointer';
  1323.     hotbarSettingsButton.addEventListener('click', function() {
  1324.         hotbarSettingsModal.style.display = 'block';
  1325.     });
  1326.     hotbarBox.appendChild(hotbarSettingsButton);
  1327.  
  1328.     row3.appendChild(hotbarBox);
  1329.  
  1330.            const resolutionBox = document.createElement('div');
  1331.     resolutionBox.style.width = '161px';
  1332.     resolutionBox.style.height = '170px';
  1333.     resolutionBox.style.backgroundColor = 'rgb(50, 50, 50)';
  1334.     resolutionBox.style.display = 'flex';
  1335.     resolutionBox.style.border = '2px solid rgb(60, 60, 60)';
  1336.     resolutionBox.style.flexDirection = 'column';
  1337.     resolutionBox.style.justifyContent = 'space-between';
  1338.     resolutionBox.style.alignItems = 'center';
  1339.     resolutionBox.style.padding = '10px';
  1340.     resolutionBox.style.borderRadius = '10px';
  1341.  
  1342.  
  1343.  
  1344.     const resolutionText = document.createElement('span');
  1345.     resolutionText.textContent = 'RESOLUTION';
  1346.     resolutionBox.appendChild(resolutionText);
  1347.  
  1348.         const resolution2Text = document.createElement('span');
  1349.     resolution2Text.textContent = 'ADJUSTER';
  1350.     resolution2Text.style.marginTop = '-95px';
  1351.     resolutionBox.appendChild(resolution2Text);
  1352.  
  1353.     const resolutionButtonContainer = document.createElement('div');
  1354.     resolutionButtonContainer.style.display = 'flex';
  1355.     resolutionButtonContainer.style.justifyContent = 'space-between';
  1356.     resolutionButtonContainer.style.width = '100%';
  1357.  
  1358.     const resolutionToggleButton = document.createElement('button');
  1359.     resolutionToggleButton.textContent = 'Enabled';
  1360.     resolutionToggleButton.style.backgroundColor = 'rgb(40, 40, 40)';
  1361.     resolutionToggleButton.style.borderRadius = '10px';
  1362.     resolutionToggleButton.style.border = 'none';
  1363.     resolutionToggleButton.style.color = 'white';
  1364.     resolutionToggleButton.style.width = '100px';
  1365.     resolutionToggleButton.style.height = '40px';
  1366.     resolutionToggleButton.style.fontSize = '18px';
  1367.     resolutionToggleButton.style.cursor = 'pointer';
  1368.     resolutionToggleButton.addEventListener('click', function() {
  1369.         if (resolutionToggleButton.textContent === 'Enabled') {
  1370.             resolutionToggleButton.textContent = 'Disabled';
  1371.         } else {
  1372.             resolutionToggleButton.textContent = 'Enabled';
  1373.         }
  1374.     });
  1375.     resolutionButtonContainer.appendChild(resolutionToggleButton);
  1376.  
  1377.     const resolutionSettingsButton = document.createElement('button');
  1378.     resolutionSettingsButton.innerHTML = '⚙';
  1379.     resolutionSettingsButton.style.backgroundColor = 'rgb(40, 40, 40)';
  1380.     resolutionSettingsButton.style.borderRadius = '10px';
  1381.     resolutionSettingsButton.style.border = 'none';
  1382.     resolutionSettingsButton.style.color = 'white';
  1383.     resolutionSettingsButton.style.fontSize = '24px';
  1384.     resolutionSettingsButton.style.width = '40px';
  1385.     resolutionSettingsButton.style.height = '40px';
  1386.     resolutionSettingsButton.style.cursor = 'pointer';
  1387.     resolutionSettingsButton.addEventListener('click', function() {
  1388.        resolutionSettingsModal.style.display = 'block';
  1389.     });
  1390.     resolutionButtonContainer.appendChild(resolutionSettingsButton);
  1391.  
  1392.     resolutionBox.appendChild(resolutionButtonContainer);
  1393.  
  1394.     row3.appendChild(resolutionBox);
  1395.  
  1396.     resolutionSettingsModal.innerHTML = `
  1397.         <label>RESOLUTION REDUCER</label>
  1398.         <button id="closeResolutionSettings" style="float: right; background: transparent; border: none; color: white; cursor: pointer;">✖</button>
  1399.         <br>
  1400.         <input type="range" id="resolutionSlider" min="0.1" max="1.0" step="0.1" value="1.0" style="width: 30%;">
  1401.         <label id="resolutionValueLabel">Resolution: 1.0x</label>
  1402.     `;
  1403.  
  1404.  
  1405.     Cosmetics.innerHTML = `
  1406.             <label>COSMETICS</label>
  1407.     <button id="closeCosmetics" style="float: right; background: transparent; border: none; color: white; cursor: pointer;">✖</button>
  1408.     <p style="color:red; font-weight:900;font-size:15px;">COMING SOON<p>
  1409.     `;
  1410.  
  1411. hotbarSettingsModal.innerHTML = `
  1412.     <label>HOTBAR</label>
  1413.     <button id="closeHotbarSettings" style="float: right; background: transparent; border: none; color: white; cursor: pointer;">✖</button>
  1414.     <div>
  1415.         <label for="colorPicker1">Item:</label>
  1416.         <input type="color" id="colorPicker1" name="colorPicker1" value="#0000000">
  1417.  
  1418.     </div>
  1419.     <div>
  1420.         <label for="colorPicker2">Selected item :</label>
  1421.         <input type="color" id="colorPicker2" name="colorPicker2" value="#ffffff">
  1422.     </div>
  1423. `;
  1424.  
  1425.         EditHud.innerHTML = `
  1426.     <label style="font-size :30px; font-weight:bolder;">✎EDIT THE HUD✎</label>
  1427.     <button id="CommitChanges" style=" background: rgba(40, 40, 40, 0.97) ; width:300px; height :60px; border: 2px solid rgba(50, 50, 50, 0.97); outline :2px solid rgb(30,30,30); border-radius :10px; color: white; cursor: pointer; font-size :15px; font-weight:bolder;">COMMIT CHANGES</button>
  1428.     `;
  1429.  
  1430.              toggleshiftSettingsModal.innerHTML = `
  1431.     <label>TOGGLE SPRINT</label>
  1432.     <button id="closetoggleshiftSettings" style="float: right; background: transparent; border: none; color: white; cursor: pointer;">✖</button>
  1433.     <div style="display: flex; flex-direction: column; align-items: center; width: 385px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1434.     <label style="margin-bottom: 10px; font-weight: 700;">TOGGLE KEY</label>
  1435.     <label style="margin-bottom: 5px;">Set toggle key for toggle Sprint</label>
  1436.         <input type="text" id="customSprintKey" style="width: 75px; text-align: center; margin-bottom: 10px;" readonly>
  1437.     </div>
  1438.         `;
  1439.  
  1440.  
  1441.     settingsModal.innerHTML = `
  1442.          <label">SETTINGS</label>
  1443.         <button id="closeSettings" style="float: right; background: transparent; border: none; color: white; cursor: pointer;">✖</button>
  1444.         <div style="display: flex; flex-direction: row; gap: 15px; margin-top : 5px; margin-bottom : 10px;">
  1445.         <div style="display: flex; flex-direction: column; align-items: center; width: 385px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px; margin-top: 5px;">
  1446. <label style="margin-bottom: 10px; font-weight: 700;">TOGGLE KEY</label>
  1447.         <label for="customKey" style="margin-bottom: 5px;">Set toggle key for the client menu:</label>
  1448.         <input type="text" id="customKey" style="width: 75px; text-align: center; margin-bottom: 10px;" readonly>
  1449.         </div>
  1450.         <div style="display: flex; flex-direction: column; align-items: center; width: 385px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px; margin-top: 5px;">
  1451.         <label style=" font-size: 15px; margin-bottom: 10px; font-weight: 700;" >DEEP SPACE CONTROLS</label>
  1452.         <label>Client Menu : Right Shift</label>
  1453.         <label>Toggle Sprint : F</label>
  1454.         <label>Cinematic Mode : H</label>
  1455.         </div>
  1456.         </div>
  1457.          <div style="display: flex; flex-direction: row; gap: 15px; margin-top : 5px; margin-bottom : 10px;">
  1458.         <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px; margin-top: 5px;">
  1459.         <label style=" font-size: 15px; margin-bottom: 10px; font-weight: 700;" >CURRENT VERSION</label>
  1460.         <label>Version : 1.1 </label>
  1461.         <button id="UpdateButton" style="margin-top: 80px; width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Update</button>
  1462.         </div>
  1463.         </div>
  1464.     `;
  1465. ;
  1466. crosshairSettingsModal.innerHTML = `
  1467.     <label>CROSSHAIR</label>
  1468.     <button id="closeCrosshairSettings" style="float: right; background: transparent; border: none; color: white; cursor: pointer;">✖</button>
  1469. <div style="display: flex; flex-direction: row; gap: 15px; margin-top : 15px;">
  1470.     <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1471.         <label>CROSSHAIR</label>
  1472.         <img src="https://piskel-imgstore-b.appspot.com/img/7be1c5f3-9ad1-11ef-b170-45e28d82b1ad.gif" style="width: 115px; height: 115px;">
  1473.         <button id="option3Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1474.     </div>
  1475.     <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1476.         <label>CROSSHAIR</label>
  1477.         <img src="https://piskel-imgstore-b.appspot.com/img/3a948891-4a8f-11ef-8140-5b4c5fd8c3dd.gif" style="width: 115px; height: 115px;">
  1478.         <button id="option5Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1479.     </div>
  1480.     <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1481.         <label>CROSSHAIR</label>
  1482.         <img src="https://piskel-imgstore-b.appspot.com/img/354b6bd7-1cd8-11ef-8822-bbb60d940ece.gif" style="width: 115px; height: 115px;">
  1483.         <button id="option1Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1484.     </div>
  1485.     <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1486.         <label>CROSSHAIR</label>
  1487.         <img src="https://piskel-imgstore-b.appspot.com/img/18315826-1cd8-11ef-a2e5-bbb60d940ece.gif" style="width: 115px; height: 115px;">
  1488.         <button id="option2Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1489.     </div>
  1490. </div>
  1491. <div style="display: flex; flex-direction: row; gap: 15px; margin-top : 15px;">
  1492.   <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1493.         <label>CROSSHAIR</label>
  1494.         <img src="https://piskel-imgstore-b.appspot.com/img/1904aeee-9ad2-11ef-b197-45e28d82b1ad.gif" style="width: 115px; height: 115px;">
  1495.         <button id="option4Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1496.     </div>
  1497.       <div style="display: flex; flex-direction: column; align-items: center; width: 385px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1498.          <label>CROSSHAIR SETTINGS</label>
  1499.          <label style="font-size : 12px;">CROSSHAIR SIZE</label>
  1500.          <input type="range" id="crosshairSizeSlider" min="0" max="38" value="19">
  1501.                <div id="sliderValue">19</div>
  1502.     </div>
  1503.       <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1504.         <label>CROSSHAIR</label>
  1505.         <img src="https://piskel-imgstore-b.appspot.com/img/3f1093ca-4a8d-11ef-92cc-5b4c5fd8c3dd.gif" style="width: 115px; height: 115px;">
  1506.         <button id="option6Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1507.     </div>
  1508.  </div>
  1509.  <div style="display: flex; flex-direction: row; gap: 15px; margin-top : 15px;">
  1510.        <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1511.         <label>CROSSHAIR</label>
  1512.         <img src="https://piskel-imgstore-b.appspot.com/img/d46740e1-4a92-11ef-9ed7-5b4c5fd8c3dd.gif" style="width: 115px; height: 115px;">
  1513.         <button id="option7Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1514.     </div>
  1515.            <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1516.         <label>CROSSHAIR</label>
  1517.         <img src="https://piskel-imgstore-b.appspot.com/img/42579dc0-99cd-11ef-808f-0b01a4cf3689.gif" style="width: 115px; height: 115px;">
  1518.         <button id="option8Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1519.     </div>
  1520.     </div>
  1521. `;
  1522.  
  1523.  
  1524. document.getElementById('option1Button').addEventListener('click', function() {
  1525.     crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/354b6bd7-1cd8-11ef-8822-bbb60d940ece.gif';
  1526. });
  1527.  
  1528. document.getElementById('option2Button').addEventListener('click', function() {
  1529.     crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/18315826-1cd8-11ef-a2e5-bbb60d940ece.gif';
  1530. });
  1531. document.getElementById('option3Button').addEventListener('click', function() {
  1532.     crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/7be1c5f3-9ad1-11ef-b170-45e28d82b1ad.gif';
  1533. });
  1534.     document.getElementById('option4Button').addEventListener('click', function() {
  1535.     crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/1904aeee-9ad2-11ef-b197-45e28d82b1ad.gif';
  1536. });
  1537.         document.getElementById('option5Button').addEventListener('click', function() {
  1538.     crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/3a948891-4a8f-11ef-8140-5b4c5fd8c3dd.gif)';
  1539. })
  1540.         document.getElementById('option6Button').addEventListener('click', function() {
  1541.     crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/3f1093ca-4a8d-11ef-92cc-5b4c5fd8c3dd.gif';
  1542. })
  1543.                 document.getElementById('option7Button').addEventListener('click', function() {
  1544.     crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/3ed96675-4a93-11ef-9811-5b4c5fd8c3dd.gif';
  1545. })
  1546.                     document.getElementById('option8Button').addEventListener('click', function() {
  1547.     crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/e5874b87-99cc-11ef-a284-0b01a4cf3689.gif';
  1548. })
  1549.  
  1550.  
  1551. document.getElementById('crosshairSizeSlider').addEventListener('input', function() {
  1552.         CrossSize = parseInt(this.value);
  1553.             document.getElementById('sliderValue').textContent = this.value;
  1554.     })
  1555.  
  1556.     document.getElementById('colorPicker1').addEventListener('input', function() {
  1557.     colorPicker1Value = this.value;
  1558.     document.querySelectorAll(".item").forEach(hotbar => {
  1559.         hotbar.style.backgroundColor = colorPicker1Value;
  1560.     });
  1561. });
  1562.  
  1563. document.getElementById('colorPicker2').addEventListener('input', function() {
  1564.     colorPicker2Value = this.value;
  1565.     document.querySelectorAll(".item").forEach(hotbar => {
  1566.         hotbar.style.borderColor = colorPicker2Value;
  1567.     });
  1568. });
  1569.  
  1570.                     document.getElementById('UpdateButton').addEventListener('click', function() {
  1571.      window.open('https://georgecr0.github.io/DeepSpaceClient/index.html', '_blank');
  1572. })
  1573.  
  1574.  
  1575.     const zoomSlider = document.getElementById('zoomSlider');
  1576.     const zoomValueLabel = document.getElementById('zoomValueLabel');
  1577.  
  1578.     let resolutionScale = 1.0;
  1579.  
  1580.     // Function to adjust the canvas resolution
  1581.     function adjustCanvasResolution(scale) {
  1582.         const canvas = document.querySelector('canvas');
  1583.         if (!canvas) return;
  1584.  
  1585.         // Set the resolution scale based on the slider value
  1586.         resolutionScale = scale;
  1587.  
  1588.         // Adjust the internal resolution of the canvas
  1589.         const originalWidth = canvas.offsetWidth;
  1590.         const originalHeight = canvas.offsetHeight;
  1591.  
  1592.         // Set the canvas width and height based on the scale
  1593.         canvas.width = originalWidth * resolutionScale;
  1594.         canvas.height = originalHeight * resolutionScale;
  1595.  
  1596.         // Adjust the scaling in the rendering context to fit the new resolution
  1597.         const ctx = canvas.getContext('2d');
  1598.         if (ctx) {
  1599.             ctx.setTransform(resolutionScale, 0, 0, resolutionScale, 0, 0);
  1600.         }
  1601.     }
  1602.  
  1603.     // Get references to the resolution slider and resolution value label
  1604.     const resolutionSlider = document.getElementById('resolutionSlider');
  1605.     const resolutionValueLabel = document.getElementById('resolutionValueLabel');
  1606.  
  1607.     // Event listener for the resolution slider
  1608.     resolutionSlider.addEventListener('input', function() {
  1609.         // Update the resolution scale based on the slider value
  1610.         const scaleValue = parseFloat(resolutionSlider.value);
  1611.         adjustCanvasResolution(scaleValue);
  1612.  
  1613.         // Update the resolution value label
  1614.         resolutionValueLabel.textContent = `Resolution: ${scaleValue.toFixed(1)}x`;
  1615.     });
  1616.  
  1617. let toggleKey = 'ShiftRight';
  1618. let boxVisible = false;
  1619. let isSettingKey = false;
  1620.  
  1621. document.addEventListener('keydown', function(event) {
  1622.     if (isSettingKey) {
  1623.         if (document.pointerLockElement) document.exitPointerLock();
  1624.         toggleKey = event.code;
  1625.         document.getElementById('customKey').value = toggleKey;
  1626.         isSettingKey = false;
  1627.     } else if (event.code === toggleKey) {
  1628.         boxVisible = !boxVisible;
  1629.  
  1630.         mainBox.style.display = boxVisible ? 'none' : 'none';
  1631.         Cosmetics.style.display = boxVisible ? 'none' : 'none';
  1632.         mainMenu.style.display = boxVisible ? 'flex' : 'none';
  1633.         settingsModal.style.display = boxVisible ? 'none' : 'none';
  1634.         crosshairSettingsModal.style.display = boxVisible ? 'none' : 'none';
  1635.         toggleshiftSettingsModal.style.display = boxVisible ? 'none' : 'none';
  1636.         resolutionSettingsModal.style.display = boxVisible ? 'none' : 'none';
  1637.         hotbarSettingsModal.style.display = boxVisible ? 'none' : 'none';
  1638.         if (boxVisible) {
  1639.             if (document.pointerLockElement) {
  1640.                 document.exitPointerLock();
  1641.             }
  1642.         } else {
  1643.             const canvas = document.querySelector('canvas');
  1644.             if (canvas) {
  1645.                 canvas.requestPointerLock();
  1646.             }
  1647.         }
  1648.     }
  1649. });
  1650.  
  1651. document.addEventListener('pointerlockchange', () => {
  1652.     if (document.pointerLockElement) {
  1653.         console.log("Pointer locked to game");
  1654.     } else {
  1655.         console.log("Pointer unlocked from game");
  1656.     }
  1657. });
  1658.  
  1659.      document.getElementById('CommitChanges').addEventListener('click', function() {
  1660.         EditHud.style.display = 'none';
  1661.         mainMenu.style.display = 'flex';
  1662.         mainBox.style.display = 'block';
  1663.     });
  1664.  
  1665.     const customSprintKeyInput = document.getElementById('customSprintKey');
  1666. customSprintKeyInput.addEventListener('keydown', (e) => {
  1667.     e.preventDefault();
  1668.     togglesprintKey = e.code;
  1669.     customSprintKeyInput.value = e.key.toUpperCase();
  1670. });
  1671.         document.getElementById('customSprintKey').addEventListener('click', function() {
  1672.         this.value = 'PRESS A KEY';
  1673.     });
  1674.  
  1675. settingsButton.addEventListener('click', function() {
  1676.     settingsModal.style.display = 'block';
  1677. });
  1678.  
  1679.     closeIcon.addEventListener('click', function() {
  1680.     mainBox.style.display = 'none';
  1681. });
  1682.  
  1683.     document.getElementById('closeCosmetics').addEventListener('click', function() {
  1684.         Cosmetics.style.display = 'none';
  1685.     });
  1686.  
  1687.               document.getElementById('closeResolutionSettings').addEventListener('click', function() {
  1688.         resolutionSettingsModal.style.display = 'none';
  1689.     });
  1690.  
  1691.     document.getElementById('customKey').addEventListener('click', function() {
  1692.         isSettingKey = true;
  1693.         this.value = 'PRESS A KEY';
  1694.     });
  1695.         document.getElementById('closeHotbarSettings').addEventListener('click', function() {
  1696.         hotbarSettingsModal.style.display = 'none';
  1697.     });
  1698.     document.getElementById('closeSettings').addEventListener('click', function() {
  1699.         settingsModal.style.display = 'none';
  1700.     });
  1701.  
  1702.     document.getElementById('closeCrosshairSettings').addEventListener('click', function() {
  1703.         crosshairSettingsModal.style.display = 'none';
  1704.  
  1705.     });
  1706.                                 document.getElementById('closetoggleshiftSettings').addEventListener('click', function() {
  1707.        toggleshiftSettingsModal.style.display = 'none';
  1708.     });
  1709.  
  1710. })();