☰

UI MASTER

A Bloxd.io custom client.

  1. // ==UserScript==
  2. // @name         UI MASTER
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  A Bloxd.io custom client.
  6. // @author       my_name_chinese
  7. // @match        http://staging.bloxd.io/
  8. // @match        https://bloxd.io/
  9. // @icon         https://imgur.com/NLAKmI9.png
  10. // @grant        none
  11. // @license      GPLv3
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.  
  18.     // Define Main Menu
  19.     let clientMainMenu;
  20.     clientMainMenu = document.createElement("div");
  21.     clientMainMenu.textContent = "UI MASTER";
  22.     clientMainMenu.style.position = "fixed";
  23.     clientMainMenu.style.color = "#1B4F72";
  24.     clientMainMenu.style.textShadow = "3px 3px 4px white";
  25.     clientMainMenu.style.top = "50%";
  26.     clientMainMenu.style.left = "50%";
  27.     clientMainMenu.style.transform = "translate(-50%, -50%)";
  28.     clientMainMenu.style.zIndex = "10000";
  29.     clientMainMenu.style.borderRadius = "10px";
  30.     clientMainMenu.style.backgroundImage = "url(https://i.postimg.cc/9FxdHSZc/NLAKmI9.png)";
  31.     clientMainMenu.style.backgroundRepeat = "no-repeat";
  32.     clientMainMenu.style.backgroundSize = "cover";
  33.     clientMainMenu.style.backgroundPosition = "center";
  34.     clientMainMenu.style.boxShadow = "0px 0px 20px rgba(0, 0, 0, 0.5)";
  35.     clientMainMenu.style.fontSize = "24px";
  36.     clientMainMenu.style.height = "600px";
  37.     clientMainMenu.style.width = "500px";
  38.     clientMainMenu.style.textAlign = "center";
  39.     clientMainMenu.style.lineHeight = "50px";
  40.     clientMainMenu.style.visibility = "hidden";
  41.     clientMainMenu.style.opacity = "99%";
  42.     clientMainMenu.style.userSelect = "none";
  43.  
  44.  
  45.     let bindMainMenu;
  46.     bindMainMenu = document.createElement("div");
  47.     bindMainMenu.style.position = "fixed";
  48.     bindMainMenu.style.backgroundcolor = "#2E86C1"
  49.     bindMainMenu.style.opacity = '0.1';
  50.     bindMainMenu.style.color = "#1B4F72";
  51.     bindMainMenu.style.textShadow = "3px 3px 4px white";
  52.     bindMainMenu.style.top = "50%";
  53.     bindMainMenu.style.left = "50%";
  54.     bindMainMenu.style.transform = "translate(-50%, -50%)";
  55.     bindMainMenu.style.zIndex = "10000";
  56.     bindMainMenu.style.borderRadius = "10px";
  57.     bindMainMenu.style.backgroundRepeat = "no-repeat";
  58.     bindMainMenu.style.backgroundSize = "cover";
  59.     bindMainMenu.style.backgroundPosition = "center";
  60.     bindMainMenu.style.fontSize = "24px";
  61.     bindMainMenu.style.height = "300px";
  62.     bindMainMenu.style.width = "400px";
  63.     bindMainMenu.style.textAlign = "center";
  64.     bindMainMenu.style.lineHeight = "50px";
  65.     bindMainMenu.style.visibility = "hidden";
  66.     bindMainMenu.style.opacity = "99%";
  67.     bindMainMenu.style.userSelect = "none";
  68.  
  69.  
  70.     // Define Button Elements
  71.     let wkey;
  72.     wkey = document.createElement('div');
  73.     wkey.style.position = "relative";
  74.     wkey.style.color = "#ffffff";
  75.     wkey.textContent = "W";
  76.     wkey.style.top = "-5px";
  77.     wkey.style.left = "160px";
  78.     wkey.style.zIndex = "10000";
  79.     wkey.style.fontWeight = "bold";
  80.     wkey.style.borderRadius = "10px";
  81.     wkey.style.backgroundColor = "#66ccff";
  82.     wkey.style.fontSize = "24px";
  83.     wkey.style.height = "50px";
  84.     wkey.style.width = "50px";
  85.     wkey.style.textAlign = "center";
  86.     wkey.style.lineHeight = "50px";
  87.     wkey.style.filter = "blur(1px)";
  88.     bindMainMenu.appendChild(wkey);
  89.  
  90.  
  91.     let skey;
  92.     skey = document.createElement('div');
  93.     skey.style.position = "relative";
  94.     skey.style.color = "#ffffff";
  95.     skey.textContent = "S";
  96.     skey.style.top = "0px";
  97.     skey.style.left = "50%";
  98.     skey.style.transform = "translateX(-50%)";
  99.     skey.style.zIndex = "10000";
  100.     skey.style.fontWeight = "bold";
  101.     skey.style.borderRadius = "10px";
  102.     skey.style.backgroundColor = "#66ccff";
  103.     skey.style.fontSize = "24px";
  104.     skey.style.height = "50px";
  105.     skey.style.width = "50px";
  106.     skey.style.textAlign = "center";
  107.     skey.style.lineHeight = "50px";
  108.     skey.style.filter = "blur(1px)";
  109.     bindMainMenu.appendChild(skey);
  110.  
  111.     let akey;
  112.     akey = document.createElement('div');
  113.     akey.style.position = "relative";
  114.     akey.style.color = "#ffffff";
  115.     akey.textContent = "A";
  116.     akey.style.top = "-50px";
  117.     akey.style.left = "140px";
  118.     akey.style.transform = "translateX(-50%)";
  119.     akey.style.zIndex = "10000";
  120.     akey.style.fontWeight = "bold";
  121.     akey.style.borderRadius = "10px";
  122.     akey.style.backgroundColor = "#66ccff";
  123.     akey.style.fontSize = "24px";
  124.     akey.style.height = "50px";
  125.     akey.style.width = "50px";
  126.     akey.style.textAlign = "center";
  127.     akey.style.lineHeight = "50px";
  128.     akey.style.filter = "blur(1px)";
  129.     bindMainMenu.appendChild(akey);
  130.  
  131.     let dkey;
  132.     dkey = document.createElement('div');
  133.     dkey.style.position = "relative";
  134.     dkey.style.color = "#ffffff";
  135.     dkey.textContent = "D";
  136.     dkey.style.top = "-100px";
  137.     dkey.style.left = "260px";
  138.     dkey.style.transform = "translateX(-50%)";
  139.     dkey.style.zIndex = "10000";
  140.     dkey.style.fontWeight = "bold";
  141.     dkey.style.borderRadius = "10px";
  142.     dkey.style.backgroundColor = "#66ccff";
  143.     dkey.style.fontSize = "24px";
  144.     dkey.style.height = "50px";
  145.     dkey.style.width = "50px";
  146.     dkey.style.textAlign = "center";
  147.     dkey.style.lineHeight = "50px";
  148.     dkey.style.filter = "blur(1px)";
  149.     bindMainMenu.appendChild(dkey);
  150.  
  151.     let lmb;
  152.     lmb = document.createElement('div');
  153.     lmb.style.position = "relative";
  154.     lmb.style.color = "#ffffff";
  155.     lmb.textContent = "LMB";
  156.     lmb.style.top = "-90px";
  157.     lmb.style.left = "140px";
  158.     lmb.style.transform = "translateX(-50%)";
  159.     lmb.style.zIndex = "10000";
  160.     lmb.style.fontWeight = "bold";
  161.     lmb.style.borderRadius = "10px";
  162.     lmb.style.backgroundColor = "#66ccff";
  163.     lmb.style.fontSize = "18px";
  164.     lmb.style.height = "50px";
  165.     lmb.style.width = "100px";
  166.     lmb.style.textAlign = "center";
  167.     lmb.style.lineHeight = "50px";
  168.     lmb.style.filter = "blur(1px)";
  169.     bindMainMenu.appendChild(lmb);
  170.  
  171.     let rmb;
  172.     rmb = document.createElement('div');
  173.     rmb.style.position = "relative";
  174.     rmb.style.color = "#ffffff";
  175.     rmb.textContent = "RMB";
  176.     rmb.style.top = "-140px";
  177.     rmb.style.left = "260px";
  178.     rmb.style.transform = "translateX(-50%)";
  179.     rmb.style.zIndex = "10000";
  180.     rmb.style.fontWeight = "bold";
  181.     rmb.style.borderRadius = "10px";
  182.     rmb.style.backgroundColor = "#66ccff";
  183.     rmb.style.fontSize = "18px";
  184.     rmb.style.height = "50px";
  185.     rmb.style.width = "100px";
  186.     rmb.style.textAlign = "center";
  187.     rmb.style.lineHeight = "50px";
  188.     rmb.style.filter = "blur(1px)";
  189.     bindMainMenu.appendChild(rmb);
  190.  
  191.     let space;
  192.     space = document.createElement('div');
  193.     space.style.position = "relative";
  194.     space.style.color = "#ffffff";
  195.     space.textContent = "SPACE";
  196.     space.style.top = "-125px";
  197.     space.style.left = "200px";
  198.     space.style.transform = "translateX(-50%)";
  199.     space.style.zIndex = "10000";
  200.     space.style.fontWeight = "bold";
  201.     space.style.borderRadius = "10px";
  202.     space.style.backgroundColor = "#66ccff";
  203.     space.style.fontSize = "18px";
  204.     space.style.height = "50px";
  205.     space.style.width = "220px";
  206.     space.style.textAlign = "center";
  207.     space.style.lineHeight = "50px";
  208.     space.style.filter = "blur(1px)";
  209.     bindMainMenu.appendChild(space);
  210.  
  211.     let shift;
  212.     shift = document.createElement('div');
  213.     shift.style.position = "relative";
  214.     shift.style.color = "#ffffff";
  215.     shift.textContent = "SHIFT";
  216.     shift.style.top = "-240px";
  217.     shift.style.left = "50px";
  218.     shift.style.transform = "translateX(-50%)";
  219.     shift.style.zIndex = "10000";
  220.     shift.style.fontWeight = "bold";
  221.     shift.style.borderRadius = "10px";
  222.     shift.style.backgroundColor = "#66ccff";
  223.     shift.style.fontSize = "18px";
  224.     shift.style.height = "100px";
  225.     shift.style.width = "50px";
  226.     shift.style.textAlign = "center";
  227.     shift.style.lineHeight = "100px";
  228.     shift.style.filter = "blur(1px)";
  229.     bindMainMenu.appendChild(shift);
  230.  
  231.     let caps;
  232.     caps = document.createElement('div');
  233.     caps.style.position = "relative";
  234.     caps.style.color = "#ffffff";
  235.     caps.textContent = "CAPS";
  236.     caps.style.top = "-340px";
  237.     caps.style.left = "350px";
  238.     caps.style.transform = "translateX(-50%)";
  239.     caps.style.zIndex = "10000";
  240.     caps.style.fontWeight = "bold";
  241.     caps.style.borderRadius = "10px";
  242.     caps.style.backgroundColor = "#66ccff";
  243.     caps.style.fontSize = "18px";
  244.     caps.style.height = "100px";
  245.     caps.style.width = "50px";
  246.     caps.style.textAlign = "center";
  247.     caps.style.lineHeight = "100px";
  248.     caps.style.filter = "blur(1px)";
  249.     bindMainMenu.appendChild(caps);
  250.  
  251.  
  252.     // Add the elements to the body and the clientMainMenu
  253.     document.body.appendChild(bindMainMenu);
  254.     document.body.appendChild(clientMainMenu);
  255.  
  256.     // Add Event Listeners for the Keybinds
  257.  
  258.     document.addEventListener('keydown', function(event) {
  259.         if (event.key === 'w') {
  260.             wkey.style.backgroundColor = "#3366ff";
  261.         }
  262.         if (event.key === 's') {
  263.             skey.style.backgroundColor = "#3366ff";
  264.         }
  265.         if (event.key === 'a') {
  266.             akey.style.backgroundColor = "#3366ff";
  267.         }
  268.         if (event.key === 'd') {
  269.             dkey.style.backgroundColor = "#3366ff";
  270.         }
  271.         if (event.key === ' ') {
  272.             space.style.backgroundColor = "#3366ff";
  273.         }
  274.         if (event.key === 'Shift') {
  275.             shift.style.backgroundColor = "#3366ff";
  276.         }
  277.         if (event.key === 'CapsLock') {
  278.             caps.style.backgroundColor = "#3366ff";
  279.         }
  280.     });
  281.  
  282.     document.addEventListener('keyup', function(event) {
  283.         if (event.key === 'w') {
  284.             wkey.style.backgroundColor = "#66ccff";
  285.         }
  286.         if (event.key === 's') {
  287.             skey.style.backgroundColor = "#66ccff";
  288.         }
  289.         if (event.key === 'a') {
  290.             akey.style.backgroundColor = "#66ccff";
  291.         }
  292.         if (event.key === 'd') {
  293.             dkey.style.backgroundColor = "#66ccff";
  294.         }
  295.         if (event.key === ' ') {
  296.             space.style.backgroundColor = "#66ccff";
  297.         }
  298.         if (event.key === 'Shift') {
  299.             shift.style.backgroundColor = "#66ccff";
  300.         }
  301.         if (event.key === 'CapsLock') {
  302.             caps.style.backgroundColor = "#66ccff";
  303.         }
  304.     });
  305.  
  306.     document.addEventListener('mousedown', function(event) {
  307.         if (event.button === 0) {
  308.             lmb.style.backgroundColor = "#3366ff";
  309.         }
  310.         if (event.button === 2) {
  311.             rmb.style.backgroundColor = "#3366ff";
  312.         }
  313.     });
  314.  
  315.     document.addEventListener('mouseup', function(event) {
  316.         if (event.button === 0) {
  317.             lmb.style.backgroundColor = "#66ccff";
  318.         }
  319.         if (event.button === 2) {
  320.             rmb.style.backgroundColor = "#66ccff";
  321.         }
  322.     });
  323.  
  324.     // Define Main Menu dragging
  325.  
  326.     let mainisDragging = false;
  327.     let offsetX = 0;
  328.     let offsetY = 0;
  329.  
  330.     clientMainMenu.addEventListener('mousedown', function(event) {
  331.         if (event.target.nodeName !== 'INPUT') {
  332.             mainisDragging = true;
  333.             offsetX = event.clientX;
  334.             offsetY = event.clientY;
  335.         }
  336.     });
  337.  
  338.     document.addEventListener('mousemove', function(event) {
  339.         if (mainisDragging) {
  340.             const left = event.clientX;
  341.             const top = event.clientY;
  342.  
  343.             clientMainMenu.style.left = left + "px";
  344.             clientMainMenu.style.top = top + "px";
  345.         }
  346.     });
  347.  
  348.     document.addEventListener('mouseup', function() {
  349.         mainisDragging = false;
  350.     });
  351.  
  352.     let bindisDragging = false;
  353.     let offsetX1 = 0;
  354.     let offsetY1 = 0;
  355.  
  356.     bindMainMenu.addEventListener('mousedown', function(event) {
  357.         if (event.target.nodeName !== 'INPUT') {
  358.             bindisDragging = true;
  359.             offsetX = event.clientX;
  360.             offsetY = event.clientY;
  361.         }
  362.     });
  363.  
  364.     document.addEventListener('mousemove', function(event) {
  365.         if (bindisDragging) {
  366.             const left = event.clientX;
  367.             const top = event.clientY;
  368.  
  369.             bindMainMenu.style.left = left + "px";
  370.             bindMainMenu.style.top = top + "px";
  371.         }
  372.     });
  373.  
  374.     document.addEventListener('mouseup', function() {
  375.         bindisDragging = false;
  376.     });
  377.     document.addEventListener('keydown', function(event) {
  378.         if (event.key === 'U' || event.key === 'u') {
  379.             clientMainMenu.style.visibility = clientMainMenu.style.visibility === "hidden" ? "visible" : "hidden";
  380.         }
  381.     });
  382.  
  383.     // Define imputs and main menu text
  384.  
  385.     let clientheader
  386.     clientheader = document.createElement("div");
  387.     clientheader.textContent = "Made By my_name_chinese";
  388.     clientheader.style.position = "absolute";
  389.     clientheader.style.top = "20px";
  390.     clientheader.style.left = "50%";
  391.     clientheader.style.transform = "translateX(-50%)";
  392.     clientheader.style.fontSize = "15px";
  393.     clientMainMenu.appendChild(clientheader);
  394.  
  395.     // Create the button element
  396.     const bilibutton = document.createElement("div");
  397.     bilibutton.style.position = "absolute";
  398.     bilibutton.style.top = "60px";
  399.     bilibutton.style.left = "50%";
  400.     bilibutton.style.transform = "translateX(-50%)";
  401.     bilibutton.style.cursor = "pointer";
  402.     bilibutton.style.backgroundColor = "#66ccff";
  403.     bilibutton.style.backgroundImage = "linear-gradient(to bottom, #2E86C1, #AED6F1)";
  404.     bilibutton.style.color = "#1B4F72";
  405.     bilibutton.style.borderRadius = "10px";
  406.     bilibutton.style.height = "40px";
  407.     bilibutton.style.padding = "8px";
  408.     bilibutton.addEventListener("click", function() {
  409.         window.location.href = "https://space.bilibili.com/3546388900088449?spm_id_from=333.1007.0.0";
  410.     });
  411.  
  412.     // Create the text element
  413.     const bilibuttonText = document.createElement("div");
  414.     bilibuttonText.textContent = "my_name_bilibili_acc";
  415.     bilibuttonText.style.fontSize = "20px";
  416.     bilibuttonText.style.textAlign = "center";
  417.     bilibuttonText.style.top = "50%";
  418.     bilibuttonText.style.transform = "translateY(-25%)";
  419.  
  420.     // Append the text element to the button element
  421.     bilibutton.appendChild(bilibuttonText);
  422.  
  423.     // Append the button element to the desired parent element
  424.     clientMainMenu.appendChild(bilibutton);
  425.  
  426.  
  427.     let clientsettingstext;
  428.     clientsettingstext = document.createElement("div");
  429.     clientsettingstext.textContent = "- Client Settings -";
  430.     clientsettingstext.style.position = "absolute";
  431.     clientsettingstext.style.color = "#1B4F72"
  432.     clientsettingstext.style.top = "120px";
  433.     clientsettingstext.style.left = "50%";
  434.     clientsettingstext.style.transform = "translateX(-50%)";
  435.     clientsettingstext.style.fontSize = "20px";
  436.     clientMainMenu.appendChild(clientsettingstext);
  437.  
  438.     let clientsettingsinput
  439.     clientsettingsinput = document.createElement("input");
  440.     clientsettingsinput.type = "text";
  441.     clientsettingsinput.placeholder = "Client Background URL";
  442.     clientsettingsinput.style.backgroundColor = '#AED6F1';
  443.     clientsettingsinput.style.border = '3px double #1B4F72';
  444.     clientsettingsinput.style.position = "absolute";
  445.     clientsettingsinput.style.top = "160px";
  446.     clientsettingsinput.style.left = "50%";
  447.     clientsettingsinput.style.transform = "translateX(-50%)";
  448.     clientMainMenu.appendChild(clientsettingsinput);
  449.  
  450.     clientsettingsinput.addEventListener('input', function() {
  451.         clientMainMenu.style.backgroundImage = `url(${clientsettingsinput.value})`;
  452.     });
  453.  
  454.     clientsettingsinput.addEventListener('mousedown', function(event) {
  455.         event.stopPropagation();
  456.     });
  457.  
  458.     let hotbarsettingstext;
  459.     hotbarsettingstext = document.createElement("div");
  460.     hotbarsettingstext.textContent = "- HotBar Settings -";
  461.     hotbarsettingstext.style.position = "absolute";
  462.     hotbarsettingstext.style.top = "220px";
  463.     hotbarsettingstext.style.left = "50%";
  464.     hotbarsettingstext.style.transform = "translateX(-50%)";
  465.     hotbarsettingstext.style.fontSize = "20px";
  466.     clientMainMenu.appendChild(hotbarsettingstext);
  467.  
  468.     let hotbarmaincolorinput
  469.     hotbarmaincolorinput = document.createElement("input");
  470.     hotbarmaincolorinput.type = "color";
  471.     hotbarmaincolorinput.value = "#3d4b79"
  472.     hotbarmaincolorinput.style.top = "250px";
  473.     hotbarmaincolorinput.style.marginTop = "15px";
  474.     hotbarmaincolorinput.style.position = "absolute";
  475.     hotbarmaincolorinput.style.left = "44%";
  476.     hotbarmaincolorinput.style.transform = "translateX(-50%)";
  477.     clientMainMenu.appendChild(hotbarmaincolorinput);
  478.  
  479.     hotbarmaincolorinput.addEventListener("input", function() {
  480.         const color = hotbarmaincolorinput.value;
  481.         hotbarmaincolorinput.value = color;
  482.         const hotbars = document.querySelectorAll(".item");
  483.  
  484.         hotbars.forEach(function(hotbar) {
  485.             hotbar.style.backgroundColor = color;
  486.         });
  487.     });
  488.  
  489.     let hotbarbordercolorinput;
  490.     hotbarbordercolorinput = document.createElement("input");
  491.     hotbarbordercolorinput.type = "color";
  492.     hotbarbordercolorinput.style.top = "250px";
  493.     hotbarbordercolorinput.value = "#303a59";
  494.     hotbarbordercolorinput.style.marginTop = "15px";
  495.     hotbarbordercolorinput.style.position = "absolute";
  496.     hotbarbordercolorinput.style.left = "56%";
  497.     hotbarbordercolorinput.style.transform = "translateX(-50%)";
  498.     clientMainMenu.appendChild(hotbarbordercolorinput);
  499.  
  500.     hotbarbordercolorinput.addEventListener("input", function() {
  501.         const color = hotbarbordercolorinput.value;
  502.         hotbarbordercolorinput.value = color;
  503.         const hotbars = document.querySelectorAll(".item");
  504.  
  505.         hotbars.forEach(function(hotbar) {
  506.             hotbar.style.borderColor = color;
  507.         });
  508.     });
  509.  
  510.     let hotbarborderradiusinput;
  511.     hotbarborderradiusinput = document.createElement("input");
  512.     hotbarborderradiusinput.type = "range";
  513.     hotbarborderradiusinput.style.top = "280px";
  514.     hotbarborderradiusinput.style.marginTop = "10px";
  515.     hotbarborderradiusinput.style.position = "absolute";
  516.     hotbarborderradiusinput.value = "0";
  517.     hotbarborderradiusinput.style.left = "50%";
  518.     hotbarborderradiusinput.min = "0";
  519.     hotbarborderradiusinput.max = "30";
  520.     hotbarborderradiusinput.style.transform = "translateX(-50%)";
  521.     clientMainMenu.appendChild(hotbarborderradiusinput);
  522.  
  523.     hotbarborderradiusinput.addEventListener("input", function() {
  524.         const hotbarrounding = hotbarborderradiusinput.value;
  525.         const hotbars = document.querySelectorAll(".item");
  526.  
  527.         hotbars.forEach(function(hotbar) {
  528.             hotbar.style.borderRadius = hotbarrounding + "px";
  529.         });
  530.     });
  531.  
  532.     let crosshairsettingstext
  533.     crosshairsettingstext = document.createElement("div");
  534.     crosshairsettingstext.textContent = "- Crosshair Settings -";
  535.     crosshairsettingstext.style.position = "absolute";
  536.     crosshairsettingstext.style.top = "320px";
  537.     crosshairsettingstext.style.left = "50%";
  538.     crosshairsettingstext.style.transform = "translateX(-50%)";
  539.     crosshairsettingstext.style.fontSize = "20px";
  540.     clientMainMenu.appendChild(crosshairsettingstext);
  541.  
  542.     let crosshairsettingsinput;
  543.     crosshairsettingsinput = document.createElement("input");
  544.     crosshairsettingsinput.type = "text";
  545.     crosshairsettingsinput.placeholder = "Crosshair URL";
  546.     crosshairsettingsinput.style.backgroundColor = '#AED6F1';
  547.     crosshairsettingsinput.style.border = '3px double #1B4F72';
  548.     crosshairsettingsinput.style.position = "absolute";
  549.     crosshairsettingsinput.style.top = "360px";
  550.     crosshairsettingsinput.value = "https://cdn-icons-png.flaticon.com/512/1527/1527735.png";
  551.     crosshairsettingsinput.style.left = "50%";
  552.     crosshairsettingsinput.style.transform = "translateX(-50%)";
  553.     clientMainMenu.appendChild(crosshairsettingsinput);
  554.  
  555.     let crosshairurl;
  556.  
  557.     crosshairsettingsinput.addEventListener('input', function() {
  558.         const crosshair = document.querySelector(".CrossHair");
  559.         if (crosshair) {
  560.             crosshair.style.backgroundImage = `url(${crosshairsettingsinput.value})`;
  561.             crosshairurl = `url(${crosshairsettingsinput.value})`;
  562.         }
  563.     });
  564.  
  565.     crosshairsettingsinput.addEventListener('mousedown', function(event) {
  566.         event.stopPropagation();
  567.     });
  568.  
  569.     let keybindsettingstext;
  570.     keybindsettingstext = document.createElement("div");
  571.     keybindsettingstext.textContent = "- Keybind Settings -";
  572.     keybindsettingstext.style.position = "absolute";
  573.     keybindsettingstext.style.top = "420px";
  574.     keybindsettingstext.style.left = "50%";
  575.     keybindsettingstext.style.transform = "translateX(-50%)";
  576.     keybindsettingstext.style.fontSize = "20px";
  577.     clientMainMenu.appendChild(keybindsettingstext);
  578.  
  579.     let keybindsettingbotton;
  580.     keybindsettingbotton = document.createElement("div");
  581.     keybindsettingbotton.textContent = "- Keybind Settings -";
  582.     keybindsettingbotton.style.position = "absolute";
  583.     keybindsettingbotton.style.top = "420px";
  584.     keybindsettingbotton.style.left = "50%";
  585.     keybindsettingbotton.style.transform = "translateX(-50%)";
  586.     keybindsettingbotton.style.fontSize = "20px";
  587.     clientMainMenu.appendChild(keybindsettingbotton);
  588.  
  589.         // Create the button element
  590.     const bindbutton = document.createElement("div");
  591.     bindbutton.style.position = "absolute";
  592.     bindbutton.style.top = "470px";
  593.     bindbutton.style.fontSize = "20px";
  594.     bindbutton.style.left = "50%";
  595.     bindbutton.style.transform = "translateX(-50%)";
  596.     bindbutton.style.cursor = "pointer";
  597.     bindbutton.style.borderRadius = "10px";
  598.     bindbutton.style.backgroundColor = "#AED6F1";
  599.     bindbutton.style.color = "#1B4F72";
  600.     bindbutton.style.borderRadius = "10px";
  601.     bindbutton.style.height = "40px";
  602.     bindbutton.style.padding = "8px";
  603.     bindbutton.innerHTML = 'keybind:OFF'; // 初始文本为"ON"
  604.     var isOn = false; // 初始状态为true
  605.     wkey.style.visibility = 'hidden';
  606.     skey.style.visibility = 'hidden';
  607.     akey.style.visibility = 'hidden';
  608.     dkey.style.visibility = 'hidden';
  609.     lmb.style.visibility = 'hidden';
  610.     rmb.style.visibility = 'hidden';
  611.     bindbutton.addEventListener("click", function() {
  612.         isOn = !isOn; // 切换状态
  613.         bindbutton.innerHTML = isOn ? 'keybind:ON' : 'keybind:OFF'; // 根据状态设置按钮文本
  614.  
  615.         // 根据状态显示或隐藏元素
  616.         wkey.style.visibility = isOn ? 'visible' : 'hidden';
  617.         skey.style.visibility = isOn ? 'visible' : 'hidden';
  618.         akey.style.visibility = isOn ? 'visible' : 'hidden';
  619.         dkey.style.visibility = isOn ? 'visible' : 'hidden';
  620.         lmb.style.visibility = isOn ? 'visible' : 'hidden';
  621.         rmb.style.visibility = isOn ? 'visible' : 'hidden';
  622.         bindMainMenu.style.visibility = isOn ? 'visible' : 'hidden';
  623.     });
  624.  
  625.     // Append the button element to the desired parent element
  626.     clientMainMenu.appendChild(bindbutton);
  627.  
  628.  
  629.  
  630.  
  631.  
  632.     setInterval(function() {
  633.         const color1 = hotbarmaincolorinput.value;
  634.         const color2 = hotbarbordercolorinput.value
  635.         const hotbarrounding = hotbarborderradiusinput.value;
  636.         const hotbars = document.querySelectorAll(".item");
  637.         hotbars.forEach(function(hotbar) {
  638.             hotbar.style.borderRadius = hotbarrounding + "px";
  639.             hotbar.style.borderColor = color2;
  640.             hotbar.style.backgroundColor = color1;
  641.         });
  642.         const crosshair = document.querySelector(".CrossHair");
  643.         if (crosshair) {
  644.             crosshair.textContent = "";
  645.             crosshair.style.backgroundImage = crosshairurl; // Use the crosshairurl variable here
  646.             crosshair.style.backgroundRepeat = "no-repeat";
  647.             crosshair.style.backgroundSize = "contain";
  648.             crosshair.style.width = "30px";
  649.             crosshair.style.height = "30px";
  650.         }
  651.     }, 1000);
  652. })();