🎉 欢迎访问GreasyFork.Org 镜像站!本镜像站由公众号【爱吃馍】搭建,用于分享脚本。联系邮箱📮

Greasy fork 爱吃馍镜像

Greasy Fork is available in English.

📂 缓存分发状态(共享加速已生效)
🕒 页面同步时间:2025/12/27 14:10:58
🔄 下次更新时间:2025/12/27 15:10:58
手动刷新缓存

Vortex Client

Vortex Client for Bloxd.io

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Greasemonkey lub Violentmonkey.

You will need to install an extension such as Tampermonkey to install this script.

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Violentmonkey.

Aby zainstalować ten skrypt, wymagana będzie instalacja rozszerzenia Tampermonkey lub Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

Aby zainstalować ten skrypt, musisz zainstalować rozszerzenie menedżera skryptów użytkownika.

(Mam już menedżera skryptów użytkownika, pozwól mi to zainstalować!)

🚀 安装遇到问题?关注公众号获取帮助

公众号二维码

扫码关注【爱吃馍】

回复【脚本】获取最新教程和防失联地址

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Musisz zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

(Mam już menedżera stylów użytkownika, pozwól mi to zainstalować!)

🚀 安装遇到问题?关注公众号获取帮助

公众号二维码

扫码关注【爱吃馍】

回复【脚本】获取最新教程和防失联地址

// ==UserScript==
// @name         Vortex Client
// @namespace    http://tampermonkey.net/
// @version      Beta
// @description  Vortex Client for Bloxd.io
// @author       GEORGECR
// @homepageURL  https://georgecr0.github.io/Vortex-Client/
// @icon         https://i.postimg.cc/fRpcmPqN/Vortex-Logo.png
// @match        https://bloxd.io/*
// @license      All Rights Reserved – Permission Required
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    // No copyright.
    // If you have questions about the code or want to use parts of it, feel free to DM me on Discord: ge0rgecr_

    const storageKey = 'vortexClientModuleStates';
    const settingsStorageKey = 'vortexClientModuleSettings';

    //MODULES (this is not ai bruh its just so its more clean)
    const modules = {
        'Combat': [
            {
                name: 'Keystrokes', description: '(coming soon)', hasSettings: true, enabled: false,
                onEnable: () => { },
                onDisable: () => { },
                settings: [

                ]
            },
            {
                name: 'Combat Log Timer', description: '(coming soon)', enabled: false,
                onEnable: () => { },
                onDisable: () => { },
            },
            {
                name: 'Anti Shake', description: '(coming soon)', enabled: false,
                onEnable: () => { },
                onDisable: () => { },
            },
        ],
        'Visual': [
            {
                name: 'Armour View', description: 'Shows your armor status\nand durability.', hasSettings: true, enabled: true,
                onEnable: () => { armorDisplayModule.start() },
                onDisable: () => { armorDisplayModule.stop() },
                settings: [
                    { id: 'armourview_scale', label: 'Scale', type: 'slider', min: 0.5, max: 2.0, step: 0.1, defaultValue: 1.0 },
                    { id: 'armourview_orientation', label: 'Orientation', type: 'dropdown', options: ['Horizontal', 'Vertical'], defaultValue: 'Horizontal' }
                ]
            },
            {
                name: 'Cps Counter', description: 'Displays your clicks per\nsecond (CPS).', enabled: true,
                onEnable: () => { cpsModule.start() },
                onDisable: () => { cpsModule.stop() }
            },
            {
                name: 'Ping Counter', description: 'Shows your current ping\nto the server.', enabled: true,
                onEnable: () => { pingModule.start() },
                onDisable: () => { pingModule.stop() }
            },
            {
                name: 'Custom Crosshair', description: 'Customize your crosshair\nstyle and color.', hasSettings: true, enabled: false,
                onEnable: () => { crosshairModule.start() },
                onDisable: () => { crosshairModule.stop() },
                settings: [
                    { id: 'crosshair_color', label: 'Color', type: 'color', defaultValue: '#ffffff' },
                    { id: 'crosshair_size', label: 'Size', type: 'slider', min: 1, max: 10, step: 1, defaultValue: 4 },
                    { id: 'crosshair_shape', label: 'Shape', type: 'dropdown', options: ['Default', 'Cross', 'Square', 'Dot', 'Arrow', 'Crossed'], defaultValue: 'Default' }
                ]
            }

        ],
        'Player': [
            {
                name: 'Cinematic Mode', description: '(coming soon)', hasSettings: true, enabled: false,
                onEnable: () => { },
                onDisable: () => { },
                settings: [

                ]
            }
        ],

        'Utility': [
            {
                name: 'Resolution Adjuster', description: 'Change game resolution\nwithout restarting.', hasSettings: true, enabled: false,
                onEnable: () => {resolutionAdjusterModule.start()},
                onDisable: () => {resolutionAdjusterModule.stop() },
                settings: [
                    { id: 'resolution_value', label: 'Resolution', type: 'slider', min: 0.1, max: 1.0, step: 0.1, defaultValue: 1.0 },
                ]
            },
            {
                name: 'Snap Look', description: '(coming soon)', hasSettings: true, enabled: false,
                onEnable: () => {},
                onDisable: () => { },
                settings: [

                ]
            },
            {
                name: 'Better Zoom', description: '(coming soon)', hasSettings: true, enabled: false,
                onEnable: () => {},
                onDisable: () => {},
                settings: [

                ]
            },
        ],
        'Cosmetics': [
            {
                name: 'Nametags', description: 'Customize appearance\nof player nametags.', hasSettings: true, enabled: false,
                onEnable: () => nametagsModule.start(),
                onDisable: () => nametagsModule.stop(),
                settings: [
                    { id: 'nametags_custom_ui', type: 'custom' }
                ]
            },
            {
                name: 'Custom Capes', description:'(coming soon)', hasSettings: true, enabled: false,
                onEnable: () => nametagsModule.start(),
                onDisable: () => nametagsModule.stop(),
                settings: [

                ]
            },
        ],
        'Settings': [

        ]
    };


    function getModuleByName(moduleName) {
        for (const category of Object.values(modules)) {
            const foundModule = category.find(m => m.name === moduleName);
            if (foundModule) {
                return foundModule;
            }
        }
        return null;
    }
    function initializeModules() {
        const savedStates = JSON.parse(localStorage.getItem(storageKey)) || {};
        Object.values(modules).flat().forEach(module => {
            const isEnabled = savedStates[module.name] !== undefined ? savedStates[module.name] : module.enabled;
            if (isEnabled && typeof module.onEnable === 'function') {
                module.onEnable();
            }
        });
    }

    //CLIENT UI & SHIT (this is not ai bruh its just so its more clean)
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css';
    document.head.appendChild(link);

    const gameui = document.querySelector('.WholeAppWrapper');
    gameui.style.display = 'block';
    gameui.style.filter = 'grayscale(80%) brightness(0.6)';
    gameui.style.transition = 'all 0.2s ease';

    let menuInterval, gameInterval;
    const ClientHud = document.createElement('div');
    ClientHud.style.position = 'fixed';
    ClientHud.style.left = '0px';
    ClientHud.style.top = '0px';
    ClientHud.style.backgroundColor = 'transparent';
    ClientHud.style.width = '100%';
    ClientHud.style.height = '100%';
    ClientHud.style.display = 'block';
    ClientHud.style.zIndex = '1';
    ClientHud.style.pointerEvents = 'none';
    document.body.appendChild(ClientHud);

    function inMenu() {
        ClientHud.style.display = 'none';

        ['LogoLoaderOuter' , 'LogoLoaderInner' , 'AdBannerContainer' ,'HomeHeaderRight LinkIconList'].forEach(className => {
            document.querySelectorAll('.' + className).forEach(el => el.remove());
        });

        document.title = "Bloxd.io - Vortex Client";
        const MainTitle = document.querySelector('.Title');
        if (MainTitle) {
            MainTitle.style.webkitTextStroke = "0px";
            MainTitle.textContent = "VORTEX CLIENT";
            MainTitle.style.textShadow = "none";
            MainTitle.style.fontSize = "55px";
        }

        const background = document.querySelector(".HomePageBackground");
        if (background) {
            background.style.backgroundImage = 'url(https://i.postimg.cc/dQZ3BwG5/194693-Minecraft-video-games-shaders-748x421.png)';
        }

        const TitleContainer = document.querySelector('.TitleContainer');
        TitleContainer.style.width = '70%';


        document.querySelectorAll('.AvailableGameText.SmallTextBold').forEach(CardText => {
            CardText.style.backgroundColor = 'transparent';
            CardText.style.textShadow = '1px 1px 2px black';
        });

        document.querySelectorAll('.AvailableGame').forEach(GameCardContainer => {
            GameCardContainer.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.2)";
        });

    }

    function inGame() {
        ClientHud.style.display = 'block';
        document.querySelectorAll(".AdBannerContainer").forEach(adHolder => {
            adHolder.remove();
        });
        const GameHeader = document.querySelector('.InGameHeader');
        if (GameHeader) {
            GameHeader.style.backgroundColor = 'rgba(30, 33, 41, 0.85)';
            GameHeader.style.padding = '23px 5px';
            GameHeader.style.borderRadius = '9px';

            function makeMessagesTransparent() {
                document.querySelectorAll('.MessageWrapper').forEach(msg => {
                    msg.style.backgroundColor = 'transparent';
                });
            }
            makeMessagesTransparent();
            const chatContainer = document.querySelector('.Chat');
            if (chatContainer) {
                const observer = new MutationObserver(() => {
                    makeMessagesTransparent();
                });
                observer.observe(chatContainer, {
                    childList: true,
                    subtree: true
                });
            }
            const InGameChat = document.querySelector('.Chat');
            InGameChat.style.backgroundColor = 'rgba(30, 33, 41 ,0.85)';
            InGameChat.style.borderRadius = '9px';
            InGameChat.style.maxHeight = '350px';
            InGameChat.style.width = '400px';
            InGameChat.style.maxWidth = '400px';
            InGameChat.style.padding = '10px 0px';
            if (GameHeader && InGameChat) {
                const headerRect = GameHeader.getBoundingClientRect();
                InGameChat.style.position = "absolute";
                InGameChat.style.top = `${headerRect.bottom + 5 + window.scrollY}px`;
            }

            if (!document.querySelector('.VortexInGameLogo')) {
                const InGameLogoHolder = document.createElement('div');
                InGameLogoHolder.classList.add('VortexInGameLogo');
                InGameLogoHolder.style.display = 'flex';
                InGameLogoHolder.style.alignItems = 'center';
                InGameLogoHolder.style.marginRight = '0px';
                const VortexInGameLogo = document.createElement('div');
                VortexInGameLogo.style.backgroundImage = 'url(https://i.postimg.cc/WpkLShLM/Vortex-Client-Logo-Bigger.png)';
                VortexInGameLogo.style.backgroundRepeat = 'no-repeat';
                VortexInGameLogo.style.backgroundSize = 'contain';
                VortexInGameLogo.style.backgroundPosition = 'center';
                VortexInGameLogo.style.color = '#fff';
                VortexInGameLogo.style.width = '2em';
                VortexInGameLogo.style.height = '1.5em';
                VortexInGameLogo.style.display = 'flex';
                VortexInGameLogo.style.alignItems = 'center';
                VortexInGameLogo.style.justifyContent = 'center';
                VortexInGameLogo.style.margin = '0 0 0 3px';
                const text = document.createElement('span');
                text.textContent = 'ortex';
                text.style.fontSize = '1.1em';
                text.style.fontWeight = 'bolder';
                text.style.color = '#fff';
                text.style.display = 'flex';
                text.style.alignItems = 'center';
                text.style.marginLeft = '-10px';
                text.style.marginTop = '-2px';
                InGameLogoHolder.appendChild(VortexInGameLogo);
                InGameLogoHolder.appendChild(text);
                GameHeader.prepend(InGameLogoHolder);
            } ['LikeButton', 'InGameHeaderLogo', 'InGameHeaderSpacer'].forEach(className => {
                document.querySelectorAll('.' + className).forEach(Hidden => {
                    Hidden.style.display = 'none';
                    Hidden.style.opacity = '0';
                });
            });
            const LobbyName = document.querySelector('.InGameHeaderLobbyName');
            if (LobbyName) {
                LobbyName.style.color = 'gray';
                LobbyName.style.borderRadius = '8px';
            } ['FpsWrapperDiv', 'CoordinateUI'].forEach(className => {
                document.querySelectorAll('.' + className).forEach(headerbox => {
                    headerbox.style.backgroundColor = 'rgba(30, 33, 41 ,0.85)';
                    headerbox.style.borderRadius = '9px';
                    headerbox.style.paddingTop = '23px';
                    headerbox.style.paddingBottom = '23px';
                });
            });
            ['FpsCanvas', 'CoordinateCanvas'].forEach(className => {
                document.querySelectorAll('.' + className).forEach(canvasstyle => {
                    canvasstyle.style.height = '14px';
                });
            })
        }
    }

    function checkState() {
        const homePage = document.querySelector(".HomePage");
        if (homePage && window.getComputedStyle(homePage).display !== "none") {
            if (!menuInterval) {
                menuInterval = setInterval(inMenu, 1000);
            }
            if (gameInterval) {
                clearInterval(gameInterval);
                gameInterval = null;
            }
        } else {
            if (!gameInterval) {
                gameInterval = setInterval(inGame, 1000);
            }
            if (menuInterval) {
                clearInterval(menuInterval);
                menuInterval = null;
            }
        }
    }
    checkState();
    setInterval(checkState, 1000);

    const hud = document.createElement('div');
    hud.style.position = 'fixed';
    hud.style.top = '0';
    hud.style.left = '0';
    hud.style.width = '100%';
    hud.style.height = '100%';
    hud.style.zIndex = '999999';
    hud.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    hud.style.pointerEvents = 'auto';
    hud.style.backdropFilter = 'blur(5px)';
    hud.style.transition = 'all 0.2s ease';
    document.body.appendChild(hud);

    const menu = document.createElement('div');
    menu.style.position = 'fixed';
    menu.style.top = '50%';
    menu.style.left = '50%';
    menu.style.transform = 'translate(-50%, -50%)';
    menu.style.width = '30vw';
    menu.style.height = '40vh';
    menu.style.maxWidth = '500px';
    menu.style.maxHeight = '400px';
    menu.style.minWidth = '300px';
    menu.style.minHeight = '250px';
    menu.style.zIndex = '1000000';
    menu.style.display = 'flex';
    menu.style.flexDirection = 'column';
    menu.style.justifyContent = 'center';
    menu.style.alignItems = 'center';
    menu.style.backgroundImage = 'url(https://i.postimg.cc/fyR7DMPB/Vortex-Client-png.png)';
    menu.style.backgroundRepeat = 'no-repeat';
    menu.style.backgroundSize = '265px 230px';
    menu.style.backgroundPosition = 'center calc(50% - 70px)';
    hud.appendChild(menu);

    const mainMenuCon = document.createElement('div');
    mainMenuCon.style.width = '50vw';
    mainMenuCon.style.height = '65vh';
    mainMenuCon.style.position = 'fixed';
    mainMenuCon.style.top = '50%';
    mainMenuCon.style.left = '50%';
    mainMenuCon.style.transform = 'translate(-50%, -50%)';
    mainMenuCon.style.display = 'none';
    mainMenuCon.style.flexDirection = 'column';
    mainMenuCon.style.justifyContent = 'center';
    mainMenuCon.style.alignItems = 'center';
    mainMenuCon.style.maxWidth = '1000px';
    mainMenuCon.style.maxHeight = '800px';
    mainMenuCon.style.minWidth = '900px';
    mainMenuCon.style.minHeight = '700px';
    hud.appendChild(mainMenuCon);

    const mainMenu = document.createElement('div');
    mainMenu.style.width = '50vw';
    mainMenu.style.height = '45vh';
    mainMenu.style.zIndex = '999999';
    mainMenu.style.position = 'relative';
    mainMenu.style.backdropFilter = 'blur(0.45rem)';
    mainMenu.style.backgroundColor = 'rgba(10, 12, 16, 0.6)';
    mainMenu.style.borderRadius = '1rem';
    mainMenu.style.padding = '20px';
    mainMenu.style.border = '1px solid rgba(255, 255, 255, 0.07)';
    mainMenu.style.display = 'flex';
    mainMenu.style.justifyContent = 'center';
    mainMenu.style.alignItems = 'center';
    mainMenu.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.1)';
    mainMenu.style.maxWidth = '1000px';
    mainMenu.style.maxHeight = '550px';
    mainMenu.style.minWidth = '900px';
    mainMenu.style.minHeight = '550px';
    mainMenuCon.appendChild(mainMenu);

    const contentArea = document.createElement('div');
    contentArea.style.marginLeft = '230px';
    contentArea.style.padding = '20px';
    contentArea.style.width = 'calc(100% - 230px)';
    contentArea.style.height = '100%';
    contentArea.style.display = 'flex';
    contentArea.style.flexDirection = 'column';
    contentArea.style.alignItems = 'flex-start';
    contentArea.style.justifyContent = 'flex-start';
    contentArea.style.color = 'white';
    contentArea.style.fontSize = '18px';
    contentArea.style.fontWeight = 'bold';
    mainMenu.appendChild(contentArea);

    const tabBar = document.createElement('div');
    tabBar.style.width = '240px';
    tabBar.style.height = '100%';
    tabBar.style.display = 'flex';
    tabBar.style.flexDirection = 'column';
    tabBar.style.justifyContent = 'flex-start';
    tabBar.style.alignItems = 'center';
    tabBar.style.gap = '15px';
    tabBar.style.position = 'absolute';
    tabBar.style.top = '0';
    tabBar.style.left = '0';
    tabBar.style.borderRight = '1.4px solid rgba(255, 255, 255, 0.07)';
    tabBar.style.backgroundColor = 'rgba(0, 4, 9, 0.7)';
    tabBar.style.borderTopLeftRadius = '1rem';
    tabBar.style.borderBottomLeftRadius = '1rem';
    mainMenu.appendChild(tabBar);

    const logoWrapper = document.createElement('div');
    logoWrapper.style.display = 'flex';
    logoWrapper.style.flexDirection = 'column';
    logoWrapper.style.alignItems = 'center';
    logoWrapper.style.marginTop = '20px';
    tabBar.appendChild(logoWrapper);

    const sidebarLogo = document.createElement('img');
    sidebarLogo.src = 'https://i.postimg.cc/rwqnpQbv/logo-v2.png';
    sidebarLogo.style.width = '200px';
    sidebarLogo.style.height = 'auto';
    sidebarLogo.style.borderRadius = '0.4rem';
    logoWrapper.appendChild(sidebarLogo);

    const versionLabel = document.createElement('div');
    versionLabel.textContent = 'Version Beta';
    versionLabel.style.fontSize = '13px';
    versionLabel.style.fontWeight = 'lighter';
    versionLabel.style.color = 'rgba(255, 255, 255, 0.3)';
    versionLabel.style.marginTop = '-2px';
    logoWrapper.appendChild(versionLabel);

    const separator = document.createElement('div');
    separator.style.width = '85%';
    separator.style.height = '1px';
    separator.style.backgroundColor = 'rgba(255, 255, 255, 0.07)';
    separator.style.marginBottom = '5px';
    tabBar.appendChild(separator);

    const tabs = [
        { name: 'Combat', icon: 'ri-sword-fill', description: '#Modules for fighting and attacks (coming soon)' },
        { name: 'Visual', icon: 'ri-eye-fill', description: '#Modules for graphics and effects' },
        { name: 'Player', icon: 'ri-walk-fill', description: '#Modules for movement and stats (coming soon)' },
        { name: 'Utility', icon: 'ri-tools-fill', description: '#Modules for extra tools and functions' },
        { name: 'Cosmetics', icon: 'ri-magic-fill', description: '#Modules for skins and appearance' }
    ];

    const tabButtons = [];
    let currentTabName = tabs[0].name;
    let currentTabDescription = tabs[0].description;

    tabs.forEach((tab, index) => {
        const tabBtn = document.createElement('button');
        tabBtn.innerHTML = `<i class="${tab.icon}" style="margin-right:8px; font-size:18px;"></i> ${tab.name}`;
        tabBtn.style.width = '80%';
        tabBtn.style.height = '48px';
        tabBtn.style.display = 'flex';
        tabBtn.style.alignItems = 'center';
        tabBtn.style.justifyContent = 'flex-start';
        tabBtn.style.gap = '8px';
        tabBtn.style.padding = '10px';
        tabBtn.style.borderRadius = '8px';
        tabBtn.style.cursor = 'pointer';
        tabBtn.style.fontSize = '14px';
        tabBtn.style.fontWeight = 'bold';
        tabBtn.style.color = 'rgba(255, 255, 255, 0.35)';
        tabBtn.style.transition = 'all 0.35s ease';
        tabBtn.style.backgroundColor = 'transparent';
        tabBtn.style.border = 'none';
        tabBtn.style.boxShadow = 'none';
        if (index === 0) setActive(tabBtn);
        tabBtn.addEventListener('mouseover', () => { if (!tabBtn.classList.contains('active')) { tabBtn.style.border = '1px solid rgba(255, 255, 255, 0.1)'; tabBtn.style.backgroundColor = 'rgba(255, 255, 255, 0.05)'; tabBtn.style.color = 'rgba(255, 255, 255, 0.6)'; } });
        tabBtn.addEventListener('mouseout', () => { if (!tabBtn.classList.contains('active')) { tabBtn.style.border = 'none'; tabBtn.style.backgroundColor = 'transparent'; tabBtn.style.color = 'rgba(255, 255, 255, 0.35)'; } });
        tabBtn.addEventListener('click', () => {
            tabButtons.forEach(btn => { btn.classList.remove('active'); btn.style.backgroundColor = 'transparent'; btn.style.border = 'none'; btn.style.boxShadow = 'none'; btn.style.color = 'rgba(255, 255, 255, 0.35)'; });
            setActive(tabBtn);
            setContent(tab.name, tab.description);
        });
        tabButtons.push(tabBtn);
        tabBar.appendChild(tabBtn);
    });

    function setActive(btn) {
        btn.classList.add('active');
        btn.style.backgroundColor = 'rgba(110, 40, 40, 0.8)';
        btn.style.border = '1px solid rgba(255, 255, 255, 0.1)';
        btn.style.boxShadow = '0px 0px 15px 0px rgb(110, 40, 40)';
        btn.style.color = 'white';
    }

    const bottomSeparator = document.createElement('div');
    bottomSeparator.style.width = '85%';
    bottomSeparator.style.height = '1.5px';
    bottomSeparator.style.backgroundColor = 'rgba(255, 255, 255, 0.07)';
    bottomSeparator.style.margin = '7px 0 7px 0';
    tabBar.appendChild(bottomSeparator);

    const footerButtons = [{ name: 'Settings', icon: 'ri-settings-5-fill' }, { name: 'Exit', icon: 'ri-logout-box-r-fill' }];
    footerButtons.forEach(footer => {
        const fBtn = document.createElement('button');
        fBtn.innerHTML = `<i class="${footer.icon}" style="margin-right:8px; font-size:18px;"></i> ${footer.name}`;
        fBtn.style.width = '80%';
        fBtn.style.height = '48px';
        fBtn.style.display = 'flex';
        fBtn.style.alignItems = 'center';
        fBtn.style.justifyContent = 'flex-start';
        fBtn.style.gap = '8px';
        fBtn.style.padding = '8px';
        fBtn.style.borderRadius = '8px';
        fBtn.style.cursor = 'pointer';
        fBtn.style.fontSize = '14px';
        fBtn.style.fontWeight = 'bold';
        fBtn.style.color = 'rgba(255, 255, 255, 0.35)';
        fBtn.style.transition = 'all 0.3s ease';
        fBtn.style.backgroundColor = 'transparent';
        fBtn.style.border = 'none';
        fBtn.addEventListener('mouseover', () => { if (!fBtn.classList.contains('active')) { fBtn.style.backgroundColor = 'rgba(255, 255, 255, 0.05)'; fBtn.style.color = 'rgba(255, 255, 255, 0.6)'; fBtn.style.border = '1px solid rgba(255, 255, 255, 0.1)'; } });
        fBtn.addEventListener('mouseout', () => { if (!fBtn.classList.contains('active')) { fBtn.style.backgroundColor = 'transparent'; fBtn.style.color = 'rgba(255, 255, 255, 0.35)'; fBtn.style.border = 'none'; } });
        if (footer.name === 'Exit') { fBtn.addEventListener('click', () => { mainMenuCon.style.display = 'none'; menu.style.display = 'flex'; }); }
        else if (footer.name === 'Settings') {
            fBtn.addEventListener('click', () => {
                tabButtons.forEach(btn => { btn.classList.remove('active'); btn.style.backgroundColor = 'transparent'; btn.style.border = 'none'; btn.style.boxShadow = 'none'; btn.style.color = 'rgba(255, 255, 255, 0.35)'; });
                setContent('Settings', '#Configure client settings');
                fBtn.classList.remove('active');
                fBtn.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
                fBtn.style.color = 'rgba(255, 255, 255, 0.6)';
                fBtn.style.border = '1px solid rgba(255, 255, 255, 0.1)';
            });
        }
        tabBar.appendChild(fBtn);
    });

    function createModuleCard(moduleName, iconClass, descriptionText, hasSettings = false, isEnabled = false) {
        const card = document.createElement('div');
        card.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
        card.style.borderRadius = '12px';
        card.style.padding = '20px';
        card.style.border = '1px solid rgba(255, 255, 255, 0.1)';
        card.style.textAlign = 'center';
        card.style.cursor = 'pointer';
        card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
        card.style.display = 'flex';
        card.style.flexDirection = 'column';
        card.style.justifyContent = 'space-between';
        const textWrapper = document.createElement('div');
        const name = document.createElement('div');
        name.textContent = moduleName;
        name.style.marginTop = '10px';
        name.style.fontSize = '16px';
        name.style.fontWeight = 'bold';
        name.style.color = 'white';
        textWrapper.appendChild(name);
        const desc = document.createElement('div');
        desc.textContent = descriptionText;
        desc.style.fontSize = '12px';
        desc.style.color = 'rgba(255, 255, 255, 0.6)';
        desc.style.marginTop = '5px';
        textWrapper.appendChild(desc);
        card.appendChild(textWrapper);
        const controls = document.createElement('div');
        controls.style.display = 'flex';
        controls.style.justifyContent = 'center';
        controls.style.alignItems = 'center';
        controls.style.marginTop = '15px';
        controls.style.gap = '10px';
        const switchLabel = document.createElement('label');
        switchLabel.style.position = 'relative';
        switchLabel.style.display = 'inline-block';
        switchLabel.style.width = '54px';
        switchLabel.style.height = '28px';
        controls.appendChild(switchLabel);
        const switchInput = document.createElement('input');
        switchInput.type = 'checkbox';
        switchInput.style.opacity = '0';
        switchInput.style.width = '0';
        switchInput.style.height = '0';
        switchLabel.appendChild(switchInput);
        const slider = document.createElement('span');
        slider.style.position = 'absolute';
        slider.style.cursor = 'pointer';
        slider.style.top = '0';
        slider.style.left = '0';
        slider.style.right = '0';
        slider.style.bottom = '0';
        slider.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
        slider.style.transition = '.4s';
        slider.style.borderRadius = '34px';
        switchLabel.appendChild(slider);
        const sliderKnob = document.createElement('span');
        sliderKnob.style.position = 'absolute';
        sliderKnob.style.content = '""';
        sliderKnob.style.height = '20px';
        sliderKnob.style.width = '20px';
        sliderKnob.style.left = '4px';
        sliderKnob.style.bottom = '4px';
        sliderKnob.style.backgroundColor = 'white';
        sliderKnob.style.transition = '.4s';
        sliderKnob.style.borderRadius = '50%';
        slider.appendChild(sliderKnob);
        if (isEnabled) {
            switchInput.checked = true;
            slider.style.backgroundColor = 'rgba(110, 40, 40, 0.8)';
            sliderKnob.style.transform = 'translateX(26px)';
        }
        switchInput.addEventListener('change', () => {
            const isChecked = switchInput.checked;
            if (isChecked) {
                slider.style.backgroundColor = 'rgba(110, 40, 40, 0.8)';
                sliderKnob.style.transform = 'translateX(26px)';
            } else {
                slider.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
                sliderKnob.style.transform = 'translateX(0)';
            }
            let savedStates = JSON.parse(localStorage.getItem(storageKey)) || {};
            savedStates[moduleName] = isChecked;
            localStorage.setItem(storageKey, JSON.stringify(savedStates));
            const module = getModuleByName(moduleName);
            if (!module) return;
            if (isChecked && typeof module.onEnable === 'function') {
                module.onEnable();
            } else if (!isChecked && typeof module.onDisable === 'function') {
                module.onDisable();
            }
        });
        if (hasSettings) {
            const settingsBtn = document.createElement('button');
            settingsBtn.innerHTML = '<i class="ri-settings-4-fill"></i>';
            settingsBtn.style.width = '28px';
            settingsBtn.style.height = '28px';
            settingsBtn.style.borderRadius = '10px';
            settingsBtn.style.border = 'none';
            settingsBtn.style.cursor = 'pointer';
            settingsBtn.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
            settingsBtn.style.color = 'white';
            settingsBtn.style.fontSize = '18px';
            settingsBtn.style.transition = 'background-color 0.3s ease';
            settingsBtn.style.display = 'flex';
            settingsBtn.style.alignItems = 'center';
            settingsBtn.style.justifyContent = 'center';
            settingsBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                const module = getModuleByName(moduleName);
                if (module) { showSettingsPanel(module); }
            });
            settingsBtn.addEventListener('mouseover', () => { settingsBtn.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; });
            settingsBtn.addEventListener('mouseout', () => { settingsBtn.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'; });
            controls.appendChild(settingsBtn);
        }
        card.appendChild(controls);
        card.addEventListener('mouseover', () => { card.style.transform = 'translateY(-5px) scale(1.02)'; });
        card.addEventListener('mouseout', () => { card.style.transform = 'translateY(0) scale(1)'; });
        return card;
    }

    function showSettingsPanel(module) {
        contentArea.innerHTML = '';
        contentArea.style.display = 'flex';
        contentArea.style.flexDirection = 'column';
        contentArea.style.alignItems = 'flex-start';

        const headerContainer = document.createElement('div');
        headerContainer.style.display = 'flex';
        headerContainer.style.alignItems = 'center';
        headerContainer.style.width = '100%';
        headerContainer.style.marginBottom = '15px';
        contentArea.appendChild(headerContainer);

        const backButton = document.createElement('button');
        backButton.innerHTML = `<i class="ri-arrow-left-line"></i>`;
        backButton.style.fontSize = '20px';
        backButton.style.color = 'white';
        backButton.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
        backButton.style.border = '1px solid rgba(255, 255, 255, 0.15)';
        backButton.style.borderRadius = '8px';
        backButton.style.width = '40px';
        backButton.style.height = '40px';
        backButton.style.cursor = 'pointer';
        backButton.style.marginRight = '15px';
        backButton.style.transition = 'background-color 0.3s ease';
        backButton.style.display = 'flex';
        backButton.style.alignItems = 'center';
        backButton.style.justifyContent = 'center';
        backButton.addEventListener('mouseover', () => { backButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; });
        backButton.addEventListener('mouseout', () => { backButton.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'; });
        backButton.addEventListener('click', () => { setContent(currentTabName, currentTabDescription); });
        headerContainer.appendChild(backButton);

        const title = document.createElement('div');
        title.textContent = `${module.name} Settings`;
        title.style.fontSize = '22px';
        title.style.fontWeight = 'bold';
        headerContainer.appendChild(title);

        const separator = document.createElement('div');
        separator.style.width = '100%';
        separator.style.height = '1px';
        separator.style.backgroundColor = 'rgba(255, 255, 255, 0.07)';
        separator.style.marginBottom = '20px';
        contentArea.appendChild(separator);

        if (module.name === 'Nametags') {
            const settingsContentArea = document.createElement('div');
            settingsContentArea.style.width = '100%';
            settingsContentArea.style.height = 'calc(100% - 100px)';
            settingsContentArea.style.overflowY = 'auto';
            settingsContentArea.style.display = 'flex';
            settingsContentArea.style.flexDirection = 'column';
            settingsContentArea.style.gap = '20px';
            contentArea.appendChild(settingsContentArea);

            const nameWrapper = document.createElement('div');
            nameWrapper.style.fontSize = '16px';
            nameWrapper.style.padding = '10px';
            nameWrapper.style.backgroundColor = 'rgba(0,0,0,0.2)';
            nameWrapper.style.borderRadius = '8px';

            const nameLabel = document.createElement('span');
            nameLabel.textContent = 'Bloxd Username: ';
            nameLabel.style.color = 'rgba(255,255,255,0.7)';

            const nameValue = document.createElement('span');
            nameValue.id = 'vortex_nametag_username';
            nameValue.textContent = nametagsModule.getUsername() || 'loading...';
            nameValue.style.fontWeight = 'bold';
            nameValue.style.color = 'white';

            nameWrapper.appendChild(nameLabel);
            nameWrapper.appendChild(nameValue);
            settingsContentArea.appendChild(nameWrapper);

            const gridTitle = document.createElement('div');
            gridTitle.textContent = 'Select a Nametag Image';
            gridTitle.style.fontSize = '18px';
            gridTitle.style.fontWeight = 'bold';
            gridTitle.style.marginTop = '10px';
            settingsContentArea.appendChild(gridTitle);

            const imageGrid = document.createElement('div');
            imageGrid.style.display = 'grid';
            imageGrid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(120px, 1fr))';
            imageGrid.style.gap = '15px';
            imageGrid.style.marginTop = '10px';
            settingsContentArea.appendChild(imageGrid);

            const nametagImageUrls = [
                'https://i.postimg.cc/NMG91FWH/space-BG-loco.jpg',
                'https://i.postimg.cc/1XzTTzhW/galaxy.png',
                'https://i.postimg.cc/NfRTSvBt/custom-moving-skies-1-androidioswin10fps-friendly-5.webp',
                'https://i.postimg.cc/J4Q0jrRs/14896441-xl.webp',
                'https://i.postimg.cc/tC9CqKFp/banner.jpg',
                'https://i.postimg.cc/906dTW28/15220236-xl.webp',
                'https://i.postimg.cc/1RfHnC6F/2023-12-19-11-14-34.png',
                'https://i.postimg.cc/ZKNxjWwK/6843ea27816c80d1186125192cbf582ece88036e-2-690x326.jpg',
                'https://i.postimg.cc/GhjHcr2x/swirling-clouds-create-captivating-natural-vortex-sky-138943-2179.avif',
                'https://i.postimg.cc/bwb6mgmr/1.webp'
            ];

            nametagImageUrls.forEach(url => {
                const imgContainer = document.createElement('div');
                imgContainer.style.cursor = 'pointer';
                imgContainer.style.border = '2px solid transparent';
                imgContainer.style.borderRadius = '8px';
                imgContainer.style.transition = 'all 0.2s ease';
                imgContainer.style.padding = '4px';
                imgContainer.style.backgroundColor = 'rgba(255,255,255,0.05)';
                const img = document.createElement('img');
                img.src = url;
                img.style.width = '100%';
                img.style.height = '100%';
                img.style.display = 'block';
                img.style.borderRadius = '6px';
                img.style.objectFit = 'cover';
                imgContainer.appendChild(img);
                imgContainer.addEventListener('mouseover', () => { imgContainer.style.borderColor = 'rgba(110, 40, 40, 0.8)'; imgContainer.style.transform = 'scale(1.05)'; });
                imgContainer.addEventListener('mouseout', () => { imgContainer.style.borderColor = 'transparent'; imgContainer.style.transform = 'scale(1.0)'; });
                imgContainer.addEventListener('click', () => {
                    nametagsModule.setNametag(url);
                    document.querySelectorAll('.nametag-img-container').forEach(c => c.style.borderColor = 'transparent');
                    imgContainer.style.borderColor = 'rgb(110, 40, 40)';
                });
                imgContainer.className = 'nametag-img-container';
                imageGrid.appendChild(imgContainer);
            });
            return;
        }

        const settingsContentArea = document.createElement('div');
        settingsContentArea.style.width = '100%';
        settingsContentArea.style.display = 'flex';
        settingsContentArea.style.flexDirection = 'column';
        settingsContentArea.style.gap = '20px';
        contentArea.appendChild(settingsContentArea);

        if (!module.settings || module.settings.length === 0) {
            settingsContentArea.textContent = 'No configurable settings are available for this module.';
            settingsContentArea.style.color = 'rgba(255, 255, 255, 0.5)';
            settingsContentArea.style.fontSize = '14px';
            return;
        }

        const savedSettings = JSON.parse(localStorage.getItem(settingsStorageKey)) || {};

        function saveSetting(id, value) {
            savedSettings[id] = value;
            localStorage.setItem(settingsStorageKey, JSON.stringify(savedSettings));
        }

        module.settings.forEach(setting => {
            const value = savedSettings[setting.id] !== undefined ? savedSettings[setting.id] : setting.defaultValue;
            const settingWrapper = document.createElement('div');
            settingWrapper.style.display = 'flex';
            settingWrapper.style.justifyContent = 'space-between';
            settingWrapper.style.alignItems = 'center';
            settingWrapper.style.width = '100%';

            const label = document.createElement('label');
            label.textContent = setting.label;
            label.style.fontSize = '16px';
            settingWrapper.appendChild(label);

            switch (setting.type) {
                case 'slider': {
                    const controlWrapper = document.createElement('div');
                    controlWrapper.style.display = 'flex';
                    controlWrapper.style.alignItems = 'center';
                    controlWrapper.style.gap = '10px';
                    const slider = document.createElement('input');
                    slider.type = 'range';
                    slider.min = setting.min;
                    slider.max = setting.max;
                    slider.step = setting.step;
                    slider.value = value;
                    const valueLabel = document.createElement('span');
                    valueLabel.textContent = parseFloat(value).toFixed(1);
                    valueLabel.style.minWidth = '30px';
                    slider.addEventListener('input', () => {
                        valueLabel.textContent = parseFloat(slider.value).toFixed(1);
                        saveSetting(setting.id, parseFloat(slider.value));
                    });
                    controlWrapper.appendChild(slider);
                    controlWrapper.appendChild(valueLabel);
                    settingWrapper.appendChild(controlWrapper);
                    break;
                }
                case 'toggle': {
                    const switchLabel = document.createElement('label');
                    switchLabel.style.position = 'relative';
                    switchLabel.style.display = 'inline-block';
                    switchLabel.style.width = '54px';
                    switchLabel.style.height = '28px';
                    const switchInput = document.createElement('input');
                    switchInput.type = 'checkbox';
                    switchInput.style.opacity = '0';
                    switchInput.style.width = '0';
                    switchInput.style.height = '0';
                    const sliderSpan = document.createElement('span');
                    sliderSpan.style.position = 'absolute';
                    sliderSpan.style.cursor = 'pointer';
                    sliderSpan.style.top = '0';
                    sliderSpan.style.left = '0';
                    sliderSpan.style.right = '0';
                    sliderSpan.style.bottom = '0';
                    sliderSpan.style.transition = '.4s';
                    sliderSpan.style.borderRadius = '34px';
                    const sliderKnob = document.createElement('span');
                    sliderKnob.style.position = 'absolute';
                    sliderKnob.style.height = '20px';
                    sliderKnob.style.width = '20px';
                    sliderKnob.style.left = '4px';
                    sliderKnob.style.bottom = '4px';
                    sliderKnob.style.backgroundColor = 'white';
                    sliderKnob.style.transition = '.4s';
                    sliderKnob.style.borderRadius = '50%';

                    function updateToggle(checked) {
                        if (checked) {
                            sliderSpan.style.backgroundColor = 'rgba(110, 40, 40, 0.8)';
                            sliderKnob.style.transform = 'translateX(26px)';
                        } else {
                            sliderSpan.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
                            sliderKnob.style.transform = 'translateX(0)';
                        }
                    }
                    switchInput.checked = value;
                    updateToggle(value);
                    switchInput.addEventListener('change', () => {
                        updateToggle(switchInput.checked);
                        saveSetting(setting.id, switchInput.checked);
                    });
                    sliderSpan.appendChild(sliderKnob);
                    switchLabel.appendChild(switchInput);
                    switchLabel.appendChild(sliderSpan);
                    settingWrapper.appendChild(switchLabel);
                    break;
                }
                case 'color': {
                    const colorInput = document.createElement('input');
                    colorInput.type = 'color';
                    colorInput.value = value;
                    colorInput.style.border = 'none';
                    colorInput.style.background = 'none';
                    colorInput.style.width = '40px';
                    colorInput.style.height = '40px';
                    colorInput.addEventListener('input', () => {
                        saveSetting(setting.id, colorInput.value);
                    });
                    settingWrapper.appendChild(colorInput);
                    break;
                }
                case 'dropdown': {
                    const select = document.createElement('select');
                    select.id = setting.id;
                    select.style.backgroundColor = 'rgba(0,0,0,0.3)';
                    select.style.color = 'white';
                    select.style.border = '1px solid rgba(255,255,255,0.1)';
                    select.style.borderRadius = '5px';
                    select.style.padding = '5px';
                    setting.options.forEach(opt => {
                        const option = document.createElement('option');
                        option.value = opt;
                        option.textContent = opt;
                        select.appendChild(option);
                    });
                    select.value = value;
                    select.addEventListener('change', () => {
                        saveSetting(setting.id, select.value);
                    });
                    settingWrapper.appendChild(select);
                    break;
                }
                case 'text': {
                    const textInput = document.createElement('input');
                    textInput.type = 'text';
                    textInput.placeholder = setting.placeholder;
                    textInput.value = value;
                    textInput.style.backgroundColor = 'rgba(0,0,0,0.3)';
                    textInput.style.color = 'white';
                    textInput.style.border = '1px solid rgba(255,255,255,0.1)';
                    textInput.style.borderRadius = '5px';
                    textInput.style.padding = '8px';
                    textInput.style.textAlign = 'right';
                    textInput.addEventListener('change', () => {
                        saveSetting(setting.id, textInput.value);
                    });
                    settingWrapper.appendChild(textInput);
                    break;
                }
            }
            settingsContentArea.appendChild(settingWrapper);
        });
    }

    function setContent(tabName, tabDescription) {
        currentTabName = tabName;
        currentTabDescription = tabDescription;
        contentArea.innerHTML = '';
        contentArea.style.position = 'relative';
        const headerContainer = document.createElement('div');
        headerContainer.style.textAlign = 'center';
        headerContainer.style.width = '100%';
        headerContainer.style.marginBottom = '15px';
        contentArea.appendChild(headerContainer);
        const tabLabel = document.createElement('div');
        tabLabel.textContent = tabName;
        tabLabel.style.fontSize = '22px';
        tabLabel.style.fontWeight = 'bold';
        tabLabel.style.color = 'white';
        tabLabel.style.marginBottom = '5px';
        tabLabel.style.textShadow = '0 0 10px rgba(255, 255, 255, 0.2)';
        tabLabel.style.transition = 'all 0.4s ease-in-out';
        headerContainer.appendChild(tabLabel);
        const description = document.createElement('div');
        description.textContent = tabDescription;
        description.style.fontSize = '11px';
        description.style.fontWeight = 'normal';
        description.style.color = 'rgba(255, 255, 255, 0.5)';
        description.style.textTransform = 'uppercase';
        headerContainer.appendChild(description);
        const separator = document.createElement('div');
        separator.style.width = '100%';
        separator.style.height = '1px';
        separator.style.backgroundColor = 'rgba(255, 255, 255, 0.07)';
        separator.style.marginBottom = '20px';
        contentArea.appendChild(separator);
        const gridContainer = document.createElement('div');
        gridContainer.style.width = '100%';
        gridContainer.style.maxHeight = 'calc(100% - 100px)';
        gridContainer.style.overflowY = 'auto';
        gridContainer.style.display = 'grid';
        gridContainer.style.gridTemplateColumns = 'repeat(auto-fill, minmax(180px, 1fr))';
        gridContainer.style.gap = '20px';
        gridContainer.style.padding = '10px';
        contentArea.appendChild(gridContainer);
        let savedStates = JSON.parse(localStorage.getItem(storageKey)) || {};
        const currentModules = modules[tabName] || [];
        currentModules.forEach(module => {
            const isEnabled = savedStates[module.name] !== undefined ? savedStates[module.name] : module.enabled;
            const card = createModuleCard(module.name, module.icon, module.description, module.hasSettings, isEnabled);
            gridContainer.appendChild(card);
        });
    }

    const createStyledButton = (options = {}) => {
        const btn = document.createElement('button');
        btn.style.width = options.width || '60px';
        btn.style.height = options.height || '60px';
        btn.style.backgroundImage = 'linear-gradient(45deg, rgba(0, 4, 9, 1) 40%, rgba(14, 14, 19, 1) 100%)';
        btn.style.backgroundSize = 'cover';
        btn.style.backgroundPosition = '0% 0%';
        btn.style.backgroundRepeat = 'repeat';
        btn.style.backgroundColor = 'transparent';
        btn.style.border = 'none';
        btn.style.borderRadius = '0.7rem';
        btn.style.cursor = 'pointer';
        btn.style.boxShadow = 'none';
        btn.style.fontSize = options.fontSize || '20px';
        btn.style.color = 'white';
        btn.style.transition = 'box-shadow 0.3s ease';
        btn.addEventListener('mouseover', function () { btn.style.transition = 'background-image 0.3s ease, box-shadow 0.3s ease'; btn.style.backgroundImage = 'linear-gradient(45deg, rgba(110, 40, 40, 1) 40%, rgba(124, 54, 59, 1) 100%)'; btn.style.boxShadow = '0px 0px 29px 0px rgb(110, 40, 40)'; });
        btn.addEventListener('mouseout', function () { btn.style.transition = 'none'; btn.style.backgroundImage = 'linear-gradient(45deg, rgba(0, 4, 9, 1) 40%, rgba(14, 14, 19, 1) 100%)'; btn.style.boxShadow = 'none'; });
        if (options.text) btn.textContent = options.text;
        if (options.html) btn.innerHTML = options.html;
        return btn;
    };

    const VortexContainer = document.createElement('div');
    VortexContainer.style.display = 'flex';
    VortexContainer.style.flexDirection = 'column';
    VortexContainer.style.alignItems = 'center';
    VortexContainer.style.gap = '10px';
    menu.appendChild(VortexContainer);

    const VortexSettingsBtn = createStyledButton({ width: '250px', height: '60px', fontSize: '16px', text: 'Vortex Settings' });
    VortexSettingsBtn.style.marginTop = '120px';
    VortexSettingsBtn.addEventListener('click', function () { mainMenuCon.style.display = 'flex'; menu.style.display = 'none'; gameui.style.display = ''; });
    VortexContainer.appendChild(VortexSettingsBtn);

    const VortexMenuBtnDiv = document.createElement('div');
    VortexMenuBtnDiv.style.width = '250px';
    VortexMenuBtnDiv.style.height = '60px';
    VortexMenuBtnDiv.style.display = 'flex';
    VortexMenuBtnDiv.style.flexDirection = 'row';
    VortexMenuBtnDiv.style.alignItems = 'center';
    VortexMenuBtnDiv.style.marginTop = '10px';
    VortexMenuBtnDiv.style.gap = '10px';
    menu.appendChild(VortexMenuBtnDiv);

    const icons = ['ri-pencil-fill', 'ri-group-fill', 'ri-magic-fill', 'ri-settings-5-fill'];
    icons.forEach(icon => {
        const btn = createStyledButton({ html: `<i class="${icon}"></i>` });
        VortexMenuBtnDiv.appendChild(btn);
        if (icon === 'ri-pencil-fill') {
            btn.addEventListener('click', startHudEditMode);
        }
    });

    let hudEditOverlay = null;
    function startHudEditMode() {
        if (hudEditOverlay && hudEditOverlay.style.display === 'flex') return;
        hud.style.backgroundColor = 'transparent';
        hud.style.backdropFilter = 'blur(0px)';
        gameui.style.filter = 'grayscale(0%) brightness(1)';
        menu.style.display = 'none';
        hud.style.pointerEvents = 'none';
        if (!hudEditOverlay) {
            hudEditOverlay = document.createElement('div');
            Object.assign(hudEditOverlay.style, { position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', zIndex: '999998', display: 'flex', justifyContent: 'center', alignItems: 'center', paddingBottom: '30px', pointerEvents: 'none' });
            const doneButton = document.createElement('button');
            doneButton.textContent = 'Done';
            Object.assign(doneButton.style, { padding: '12px 25px', fontSize: '18px', cursor: 'pointer', color: 'white', boxShadow : '0px 0px 15px 0px rgb(20, 20, 20)', border: '1px solid rgba(125, 125, 125, 0.5)', borderRadius: '8px', backgroundColor: 'rgb(20, 20, 20)', transition: 'transform 0.2s ease', pointerEvents: 'auto' });
            doneButton.addEventListener('mouseover', () => doneButton.style.transform = 'scale(1.05)');
            doneButton.addEventListener('mouseout', () => doneButton.style.transform = 'scale(1.0)');
            doneButton.addEventListener('click', endHudEditMode);
            hudEditOverlay.appendChild(doneButton);
            document.body.appendChild(hudEditOverlay);
        }
        hudEditOverlay.style.display = 'flex';
        if (typeof armorDisplayModule.setEditable === 'function') armorDisplayModule.setEditable(true);
    }
    function endHudEditMode() {
        if (hudEditOverlay) hudEditOverlay.style.display = 'none';
        menu.style.display = 'flex';
        hud.style.pointerEvents = 'auto';
        hud.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        hud.style.backdropFilter = 'blur(5px)';
        gameui.style.filter = 'grayscale(80%) brightness(0.6))';
        if (typeof armorDisplayModule.setEditable === 'function') armorDisplayModule.setEditable(false);
    }

    let menuVisible = true;
    const toggleMenuKey = 'ShiftRight';
    window.addEventListener('keydown', function (e) {
        if (e.code === toggleMenuKey) {
            if (hudEditOverlay && hudEditOverlay.style.display === 'flex') {endHudEditMode();return;}
            menuVisible = !menuVisible;
            menu.style.display = menuVisible ? 'flex' : 'none';
            hud.style.backgroundColor = menuVisible ? 'rgba(0, 0, 0, 0.8)' : 'transparent';
            hud.style.backdropFilter = menuVisible ? 'blur(5px)' : 'blur(0px)';
            hud.style.pointerEvents = menuVisible ? 'auto' : 'none';
            mainMenuCon.style.display = 'none';
            gameui.style.display = 'block';
            gameui.style.filter = menuVisible ? 'grayscale(80%) brightness(0.6)' : 'grayscale(0%) brightness(1)';
            if (menuVisible && document.pointerLockElement) { document.exitPointerLock(); }
        }
    });

    setContent(tabs[0].name, tabs[0].description);
    setTimeout(initializeModules, 2000);

    //CPS COUNTER MODULE (this is not ai bruh its just so its more clean)
    const cpsModule = (function () {
        let cpsHud = null;
        let clicksTextSpan = null;
        let clickListener = null;
        let updateIntervalId = null;
        let positionIntervalId = null;

        let leftClicks = 0;
        let rightClicks = 0;
        let lastLeftClickTime = 0;
        let lastRightClickTime = 0;

        const start = () => {
            if (cpsHud) return;
            cpsHud = document.createElement("div");
            cpsHud.style.position = "fixed";
            cpsHud.id = 'cpsDisplay';
            cpsHud.style.background = "rgba(0, 0, 0, 0.6)";
            cpsHud.style.color = "#fff";
            cpsHud.style.alignItems = 'center';
            cpsHud.style.justifyContent = 'center';
            cpsHud.style.fontWeight = '500';
            cpsHud.style.zIndex = '0.5';
            cpsHud.style.display = 'none';
            const cpsTextSpan = document.createElement("span");
            cpsTextSpan.style.color = "#cfcfcf";
            cpsTextSpan.innerText = "CPS ";
            cpsTextSpan.style.marginRight = '5px';
            clicksTextSpan = document.createElement("span");
            clicksTextSpan.style.color = "#fff";
            clicksTextSpan.innerText = "0 │ 0";
            cpsHud.appendChild(cpsTextSpan);
            cpsHud.appendChild(clicksTextSpan);
            ClientHud.appendChild(cpsHud);
            lastLeftClickTime = Date.now();
            lastRightClickTime = Date.now();
            clickListener = (e) => {
                if (e.button === 0) {
                    leftClicks++;
                } else if (e.button === 2) {
                    rightClicks++;
                }
            };
            document.addEventListener("mousedown", clickListener);

            const updateBoxPosition = () => {
                if (!cpsHud) return;

                const header = document.querySelector('.InGameHeader');
                if (!header || header.offsetHeight === 0) {
                    cpsHud.style.display = 'none';
                    return;
                }
                cpsHud.style.display = 'flex';

                const fps = document.querySelector('.FpsWrapperDiv');
                const coords = document.querySelectorAll('.CoordinateUI');
                const fpsVisible = fps && window.getComputedStyle(fps).display !== 'none';
                const visibleCoords = Array.from(coords).filter(c => window.getComputedStyle(c).display !== 'none');
                let targetRect = null;

                if (visibleCoords.length > 0) {
                    const rightmostCoord = visibleCoords.reduce((a, b) => a.getBoundingClientRect().right > b.getBoundingClientRect().right ? a : b);
                    targetRect = rightmostCoord.getBoundingClientRect();
                } else if (fpsVisible) {
                    targetRect = fps.getBoundingClientRect();
                } else {
                    targetRect = header.getBoundingClientRect();
                }

                cpsHud.style.top = `${targetRect.top}px`;
                cpsHud.style.left = `${targetRect.right + 5}px`;
                cpsHud.style.height = `${header.offsetHeight}px`;
                const headerStyle = window.getComputedStyle(header);
                cpsHud.style.background = headerStyle.backgroundColor;
                cpsHud.style.border = headerStyle.border;
                cpsHud.style.borderRadius = headerStyle.borderRadius;
                cpsHud.style.width = 'auto';
                cpsHud.style.width = `${cpsHud.offsetWidth + 10}px`;
            };

            setInterval(() => {
                clicksTextSpan.innerText = `${leftClicks} │ ${rightClicks}`;
                leftClicks = 0;
                rightClicks = 0;
            }, 1000);

            positionIntervalId = setInterval(updateBoxPosition, 250);
        };

        const stop = () => {
            clearInterval(updateIntervalId);
            clearInterval(positionIntervalId);
            updateIntervalId = positionIntervalId = null;

            if (clickListener) {
                document.removeEventListener("mousedown", clickListener);
                clickListener = null;
            }

            if (cpsHud) {
                cpsHud.remove();
                cpsHud = null;
            }

            leftClicks = 0;
            rightClicks = 0;
        };

        return {
            start,
            stop
        };
    })();

    //PING COUNTER MODULE (this is not ai bruh its just so its more clean)
    const pingModule = (function () {
        let pingHud = null;
        let msTextSpan = null;
        let pingUpdateIntervalId = null;
        let textUpdateIntervalId = null;
        let positionIntervalId = null;
        let ping = 0;

        const start = () => {
            if (pingHud) return;
            pingHud = document.createElement("div");
            pingHud.style.position = "fixed";
            pingHud.style.color = "#fff";
            pingHud.style.display = 'none';
            pingHud.style.alignItems = 'center';
            pingHud.style.justifyContent = 'center';
            pingHud.style.fontWeight = '500';
            pingHud.style.zIndex = '0.5';
            const pingTextSpan = document.createElement("span");
            pingTextSpan.style.color = "#cfcfcf";
            pingTextSpan.innerText = "PING ";
            pingTextSpan.style.marginRight = '5px';
            msTextSpan = document.createElement("span");
            msTextSpan.style.color = "#fff";
            msTextSpan.innerText = "--ms";
            pingHud.appendChild(pingTextSpan);
            pingHud.appendChild(msTextSpan);
            ClientHud.appendChild(pingHud);

            const updatePing = () => {
                const startTime = Date.now();
                fetch(window.location.origin, { method: 'HEAD', mode: 'no-cors', cache: 'no-store' })
                    .then(() => {
                    ping = Date.now() - startTime;
                })
                    .catch(() => {
                    ping = -1;
                });
            };
            const updateBoxPosition = () => {
                if (!pingHud) return;

                const header = document.querySelector('.InGameHeader');
                if (!header || header.offsetHeight === 0) {
                    pingHud.style.display = 'none';
                    return;
                }
                pingHud.style.display = 'flex';

                const fps = document.querySelector('.FpsWrapperDiv');
                const coords = document.querySelectorAll('.CoordinateUI');
                const cpsElement = document.getElementById('cpsDisplay');

                const fpsVisible = fps && window.getComputedStyle(fps).display !== 'none';
                const visibleCoords = Array.from(coords).filter(c => window.getComputedStyle(c).display !== 'none');
                const cpsVisible = cpsElement && window.getComputedStyle(cpsElement).display !== 'none';

                let targetRect = null;

                if (cpsVisible) {
                    targetRect = cpsElement.getBoundingClientRect();
                } else if (visibleCoords.length > 0) {
                    targetRect = visibleCoords.reduce((rightmost, c) => {
                        const rect = c.getBoundingClientRect();
                        return !rightmost || rect.right > rightmost.right ? rect : rightmost;
                    }, null);
                } else if (fpsVisible) {
                    targetRect = fps.getBoundingClientRect();
                } else {
                    targetRect = header.getBoundingClientRect();
                }

                pingHud.style.top = `${targetRect.top}px`;
                pingHud.style.left = `${targetRect.right + 5}px`;
                pingHud.style.height = `${header.offsetHeight}px`;

                const headerStyle = window.getComputedStyle(header);
                pingHud.style.background = headerStyle.backgroundColor;
                pingHud.style.border = headerStyle.border;
                pingHud.style.borderRadius = headerStyle.borderRadius;
                pingHud.style.width = 'auto';
                pingHud.style.width = `${pingHud.offsetWidth + 10}px`;
            };

            textUpdateIntervalId = setInterval(() => {
                if (msTextSpan) {
                    msTextSpan.innerText = ping >= 0 ? `${ping}ms` : "--";
                }
            }, 1000);
            pingUpdateIntervalId = setInterval(updatePing, 2500);
            positionIntervalId = setInterval(updateBoxPosition, 300);
            updatePing();
            updateBoxPosition();
        };

        const stop = () => {
            clearInterval(pingUpdateIntervalId);
            clearInterval(textUpdateIntervalId);
            clearInterval(positionIntervalId);
            pingUpdateIntervalId = textUpdateIntervalId = positionIntervalId = null;
            if (pingHud) {
                pingHud.remove();
                pingHud = null;
            }

            msTextSpan = null;
            ping = 0;
        };

        return {
            start,
            stop
        };


    })();

    // ARMOUR VIEW  MODULE (this is not ai bruh its just so its more clean)
    const armorDisplayModule = (function() {
        const ARMOR_IMG_URL = 'https://i.postimg.cc/5t7RH0NN/Untitledyjffggggg.png';
        const ARMOR_INDEXES = [46, 47, 48, 49, 50];
        const POSITION_STORAGE_KEY = 'armorDisplayPosition';
        let displayBox = null;
        let overrideStyleSheet = null;
        let updateIntervalId = null;
        let isEditable = false;
        let isDragging = false;
        let dragOffsetX = 0;
        let dragOffsetY = 0;

        const setStyles = (element, styles) => {
            Object.assign(element.style, styles);
        };

        const getSettings = () => {
            const savedSettings = JSON.parse(localStorage.getItem(settingsStorageKey)) || {};
            return {
                scale: savedSettings.armourview_scale !== undefined ? savedSettings.armourview_scale : 1.0,
                orientation: savedSettings.armourview_orientation || 'Horizontal'
            };
        };

        const savePosition = () => {
            if (!displayBox) return;
            const position = { top: displayBox.style.top, left: displayBox.style.left };
            localStorage.setItem(POSITION_STORAGE_KEY, JSON.stringify(position));
        };

        const loadPosition = () => {
            const savedPosition = localStorage.getItem(POSITION_STORAGE_KEY);
            return savedPosition ? JSON.parse(savedPosition) : null;
        };

        const onMouseDown = (e) => {
            if (!isEditable || e.button !== 0) return;
            isDragging = true;
            e.preventDefault();
            const rect = displayBox.getBoundingClientRect();
            setStyles(displayBox, {
                top: `${rect.top}px`,
                left: `${rect.left}px`,
                bottom: 'auto',
                right: 'auto',
                transformOrigin: 'top left'
            });

            dragOffsetX = e.clientX - rect.left;
            dragOffsetY = e.clientY - rect.top;
            displayBox.style.cursor = 'move';
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        };

        const onMouseMove = (e) => {
            if (!isDragging) return;
            e.preventDefault();
            let newLeft = e.clientX - dragOffsetX;
            let newTop = e.clientY - dragOffsetY;
            newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - displayBox.offsetWidth));
            newTop = Math.max(0, Math.min(newTop, window.innerHeight - displayBox.offsetHeight));
            displayBox.style.left = `${newLeft}px`;
            displayBox.style.top = `${newTop}px`;
        };

        const onMouseUp = () => {
            if (!isDragging) return;
            isDragging = false;
            displayBox.style.cursor = 'grab';
            savePosition();
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        };
        const setEditable = (editable) => {
            isEditable = editable;
            if (!displayBox) return;
            if (editable) {
                setStyles(displayBox, {cursor: 'grab', border: '2px dashed rgba(30, 33, 41 ,0.85)', pointerEvents: 'auto'});
                displayBox.addEventListener('mousedown', onMouseDown);
            } else {
                setStyles(displayBox, {cursor: 'default', border: 'none', pointerEvents: 'none'});
                displayBox.removeEventListener('mousedown', onMouseDown);
                if (isDragging) onMouseUp();
            }
        };

        const injectOverrideCSS = () => {
            if (overrideStyleSheet) return;
            overrideStyleSheet = document.createElement('style');
            overrideStyleSheet.innerHTML = `
                .InvenItem.inven-item-clone {
                    background: none !important;
                    background-color: transparent !important;
                    border: none !important;
                    outline: none !important;
                    background-image: none !important;
                }
            `;
            document.head.appendChild(overrideStyleSheet);
        };

        const createDisplayBox = () => {
            displayBox = document.createElement('div');
            const savedPosition = loadPosition();
            const initialStyles = {
                position: 'fixed', zIndex: '0.5', display: 'flex', padding: '5px',
                backgroundColor: 'transparent', pointerEvents: 'none'
            };

            if (savedPosition) {
                Object.assign(initialStyles, {
                    top: savedPosition.top,
                    left: savedPosition.left,
                    transformOrigin: 'top left'
                });
            } else {
                Object.assign(initialStyles, {
                    bottom: '20px',
                    right: '20px',
                    transformOrigin: 'bottom right'
                });
            }
            setStyles(displayBox, initialStyles);
            ClientHud.appendChild(displayBox);
        };

        const applyStylesFromSettings = () => {
            if (!displayBox) return;
            const settings = getSettings();

            if (settings.orientation === 'Horizontal') {
                setStyles(displayBox, { flexDirection: 'row', width: 'auto', height: '60px', alignItems: 'center' });
            } else {
                setStyles(displayBox, { flexDirection: 'column', width: '60px', height: 'auto', alignItems: 'center' });
            }
            displayBox.style.transform = `scale(${settings.scale})`;
        };

        const updateItems = () => {
            if (!displayBox) return;
            applyStylesFromSettings();
            displayBox.querySelectorAll('.inven-item-clone').forEach(item => item.remove());
            ARMOR_INDEXES.forEach(idx => {
                const originalItem = document.querySelector(`.InvenItem[data-inven-idx="${idx}"]`);
                if (!originalItem) return;
                const clone = originalItem.cloneNode(true);
                clone.className = 'InvenItem inven-item-clone';
                clone.removeAttribute('id');
                setStyles(clone, { backgroundColor: 'transparent', border: 'none', marginBottom: '-7px', transform: 'scale(1.0)' });
                const unfilledSlot = clone.querySelector('.InvenItemUnfilled');
                if (unfilledSlot) {
                    unfilledSlot.style.backgroundImage = `url("${ARMOR_IMG_URL}")`;
                }
                displayBox.appendChild(clone);
            });
        };

        const start = () => {
            if (displayBox) return;
            injectOverrideCSS();
            createDisplayBox();
            updateItems();
            updateIntervalId = setInterval(updateItems, 500);
        };

        const stop = () => {
            clearInterval(updateIntervalId);
            updateIntervalId = null;
            if (displayBox) {
                displayBox.remove();
                displayBox = null;
            }
            if (overrideStyleSheet) {
                overrideStyleSheet.remove();
                overrideStyleSheet = null;
            }
        };

        return {
            start,
            stop,
            setEditable
        };
    })();

    // NAMETAG MODULE (this is not ai bruh its just so its more clean)
    const nametagsModule = (function() {
        let username = 'unknown';
        let getNameIntervalId = null;
        let originalGetContext = null;
        let db = null;
        let patterns = {};
        let unsubscribeSnapshot = null;

        function GetBloxdName() {
            const playername = document.querySelector(".PlayerNamePreview")?.textContent.trim();
            if (playername && playername !== username) {
                username = playername;
                const nameUIElement = document.getElementById("vortex_nametag_username");
                if (nameUIElement) {
                    nameUIElement.textContent = username;
                }
            }
        }

        function loadFirebaseScripts(callback) {
            if (window.firebase && window.firebase.firestore) {
                return callback();
            }
            const scripts = [
                "https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js",
                "https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore-compat.js"
            ];
            let loaded = 0;
            scripts.forEach(src => {
                const script = document.createElement('script');
                script.src = src;
                script.onload = () => {
                    loaded++;
                    if (loaded === scripts.length) callback();
                };
                document.head.appendChild(script);
            });
        }

        function patchCanvas(patterns) {
            const originalGetContext = HTMLCanvasElement.prototype.getContext;
            HTMLCanvasElement.prototype.getContext = function (type, ...args) {
                const ctx = originalGetContext.call(this, type, ...args);
                if (type === '2d') hookCanvas(ctx, patterns);
                return ctx;
            };

            function hookCanvas(ctx, patterns) {
                if (ctx._hooked) return;
                ctx._hooked = true;

                const originalFillText = ctx.fillText;
                ctx.fillText = function (text, x, y, maxWidth) {
                    const isInsideNametagBox = x >= 0 && x <= 800 && y >= 30 && y <= 300;
                    if (typeof text === "string" && text.length > 1 && isInsideNametagBox && patterns[text]) {
                        const cfg = patterns[text];
                        this.save();
                        this.globalCompositeOperation = 'source-over';
                        originalFillText.call(this, text, x, y, maxWidth);

                        const originalFillRect = this.fillRect;
                        this.fillRect = function (x, y, w, h) {
                            const isBoxForNametag = w > 30 && w < 200 && h >= 10 && h <= 25 && y >= 30 && y <= 300;
                            if (isBoxForNametag) return;
                            this.save();
                            this.globalAlpha = 0.8;
                            this.globalCompositeOperation = 'screen';
                            try {
                                if (cfg.img.complete && cfg.img.naturalWidth > 0) {
                                    if (!cfg.pattern) {
                                        cfg.pattern = this.createPattern(cfg.img, 'repeat');
                                    }
                                    this.fillStyle = cfg.pattern;
                                }
                            } catch (e) {}

                            originalFillRect.call(this, x, y, w, h);
                            this.restore();
                        };
                        this.restore();
                    } else {
                        this.save();
                        originalFillText.call(this, text, x, y, maxWidth);
                        this.restore();
                    }
                };
            }
        }

        const start = () => {
            if (originalGetContext) return;
            originalGetContext = HTMLCanvasElement.prototype.getContext;
            loadFirebaseScripts(() => {
                if (firebase.apps.length === 0) {
                    const firebaseConfig = {
                        apiKey: "AIzaSyDmvmcxP55DQ0guGF81rLf5XCpArEr2mQs",
                        authDomain: "vortex-client-database.firebaseapp.com",
                        projectId: "vortex-client-database",
                    };
                    firebase.initializeApp(firebaseConfig);
                }
                db = firebase.firestore();
                unsubscribeSnapshot = db.collection("nametags").onSnapshot((snapshot) => {
                    snapshot.forEach(doc => {
                        const { name, imgUrl } = doc.data();
                        const img = new Image();
                        img.crossOrigin = "anonymous";
                        img.src = imgUrl;
                        patterns[name] = { img, pattern: null };
                    });
                });
                patchCanvas(patterns);
            });
            getNameIntervalId = setInterval(GetBloxdName, 500);
        };

        const stop = () => {
            if (getNameIntervalId) clearInterval(getNameIntervalId);
            if (unsubscribeSnapshot) unsubscribeSnapshot();
            if (originalGetContext) HTMLCanvasElement.prototype.getContext = originalGetContext;
            getNameIntervalId = unsubscribeSnapshot = originalGetContext = db = null;
            patterns = {};
        };

        return {
            start,
            stop,
            setNametag: function(imageUrl) {
                if (!db || username === 'unknown' || !imageUrl) {
                    alert("You have to be in menu to set your nametag");
                    return;
                }
                const name = username;
                db.collection("nametags").doc(name).set({ name, imgUrl: imageUrl })
                    .then(() => { /* Yay it sented */ })
                    .catch(err => {

                });
            },
            getUsername: () => username,
        };
    })();

    const crosshairModule = (function () {
        let crosshairElement = null;
        let hideStyle = null;
        let updateIntervalId = null;

        const getSettings = () => {
            const savedSettings = JSON.parse(localStorage.getItem(settingsStorageKey)) || {};
            return {
                crosshair_color: savedSettings.crosshair_color || '#ffffff',
                crosshair_size: savedSettings.crosshair_size !== undefined ? savedSettings.crosshair_size : 4,
                crosshair_shape: savedSettings.crosshair_shape || 'Default'
            };
        };

        const renderCrosshair = () => {
            if (!crosshairElement) return;

            const { crosshair_color, crosshair_size, crosshair_shape } = getSettings();
            const size = parseInt(crosshair_size, 10);

            let html = "";
            if (crosshair_shape === "Dot") {
                html = `<div style="width:${size * 2}px;height:${size * 2}px;background:${crosshair_color};border-radius:50%;position:absolute;top:-${size}px;left:-${size}px;"></div>`;
            } else if (crosshair_shape === "Arrow") {
                html = `
                <div style="width:2px;height:${size * 2.5}px;background:${crosshair_color};position:absolute;top:0;left:-1px;transform-origin:top center;transform:rotate(-35deg);"></div>
                <div style="width:2px;height:${size * 2.5}px;background:${crosshair_color};position:absolute;top:0;left:-1px;transform-origin:top center;transform:rotate(35deg);"></div>
            `;
            } else if (crosshair_shape === "Crossed") {
                html = `
                <div style="width:2px;height:${size * 2.2}px;background:${crosshair_color};position:absolute;top:0;left:-1px;transform-origin:top center;transform:rotate(-40deg);"></div>
                <div style="width:2px;height:${size * 2.2}px;background:${crosshair_color};position:absolute;top:0;left:-1px;transform-origin:top center;transform:rotate(40deg);"></div>
                <div style="width:2px;height:${size * 2.2}px;background:${crosshair_color};position:absolute;top:-${size * 2.2}px;left:-1px;transform-origin:bottom center;transform:rotate(40deg);"></div>
                <div style="width:2px;height:${size * 2.2}px;background:${crosshair_color};position:absolute;top:-${size * 2.2}px;left:-1px;transform-origin:bottom center;transform:rotate(-40deg);"></div>
            `;
            } else if (crosshair_shape === "Cross") {
                html = `
                <div style="position:absolute;width:2px;height:${size * 2}px;background:${crosshair_color};top:-${size * 3}px;left:-1px;"></div>
                <div style="position:absolute;width:2px;height:${size * 2}px;background:${crosshair_color};top:${size + 1}px;left:-1px;"></div>
                <div style="position:absolute;width:${size * 2}px;height:2px;background:${crosshair_color};top:-1px;left:-${size * 3}px;"></div>
                <div style="position:absolute;width:${size * 2}px;height:2px;background:${crosshair_color};top:-1px;left:${size + 1}px;"></div>
            `;
            } else if (crosshair_shape === "Square") {
                const squareSide = size * 3;
                const offset = squareSide / 2;
                html = `<div style="position:absolute; width:${squareSide}px; height:${squareSide}px; background:${crosshair_color}; top:-${offset}px; left:-${offset}px;"></div>`;
            } else {
                html = `
                <div style="position:absolute;width:2px;height:${size * 4}px;background:${crosshair_color};top:-${size * 2}px;left:-1px;"></div>
                <div style="position:absolute;width:${size * 4}px;height:2px;background:${crosshair_color};top:-1px;left:-${size * 2}px;"></div>
            `;
            }

            crosshairElement.innerHTML = html;
        };

        const start = () => {
            if (crosshairElement) return;

            hideStyle = document.createElement("style");
            hideStyle.innerHTML = `.CrossHair { opacity: 0 !important; }`;
            document.head.appendChild(hideStyle);

            crosshairElement = document.createElement("div");
            Object.assign(crosshairElement.style, {
                position: "fixed",
                top: "50%",
                left: "50%",
                zIndex: "0.5",
                pointerEvents: "none"
            });
            ClientHud.appendChild(crosshairElement);

            renderCrosshair();
            updateIntervalId = setInterval(renderCrosshair, 250);
        };

        const stop = () => {
            clearInterval(updateIntervalId);
            updateIntervalId = null;

            if (crosshairElement) {
                crosshairElement.remove();
                crosshairElement = null;
            }
            if (hideStyle) {
                hideStyle.remove();
                hideStyle = null;
            }
        };

        return { start, stop };
    })();

    const resolutionAdjusterModule = (function() {
        const UPDATE_INTERVAL_MS = 2000;
        const FIND_CANVAS_INTERVAL_MS = 1000;
        let findCanvasInterval = null;
        let updateIntervalId = null;
        let gameCanvas = null;
        const getResolutionSetting = () => {
            const savedSettings = JSON.parse(localStorage.getItem(settingsStorageKey)) || {};
            return savedSettings.resolution_value !== undefined ? savedSettings.resolution_value : 1.0;
        };
        const resizeCanvas = (scale) => {
            if (!gameCanvas) return;
            const newWidth = Math.round(window.innerWidth * scale);
            const newHeight = Math.round(window.innerHeight * scale);
            if (gameCanvas.width !== newWidth || gameCanvas.height !== newHeight) {
                gameCanvas.width = newWidth;
                gameCanvas.height = newHeight;
            }
        };

        const start = () => {
            if (findCanvasInterval || updateIntervalId) return;

            findCanvasInterval = setInterval(() => {
                gameCanvas = document.getElementById('noa-canvas');
                if (gameCanvas && gameCanvas.width > 0) {
                    clearInterval(findCanvasInterval);
                    findCanvasInterval = null;
                    const updateResolution = () => {
                        const currentScale = getResolutionSetting();
                        resizeCanvas(currentScale);
                    };
                    updateResolution();
                    updateIntervalId = setInterval(updateResolution, UPDATE_INTERVAL_MS);
                }
            }, FIND_CANVAS_INTERVAL_MS);
        };

        const stop = () => {
            if (findCanvasInterval) {
                clearInterval(findCanvasInterval);
                findCanvasInterval = null;
            }
            if (updateIntervalId) {
                clearInterval(updateIntervalId);
                updateIntervalId = null;
            }
            if (gameCanvas) {
                resizeCanvas(1.0);
            }
            gameCanvas = null;
        };

        return {
            start,
            stop
        };
    })();


})();