☰

Deep Space Client

Deep Space Client for bloxd.io

目前為 2025-02-15 提交的版本，檢視 最新版本。

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