☰

Deep Space Client

Deep Space Client for bloxd.io

当前为 2025-01-12 提交的版本，查看 最新版本。

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