[
    {
        "id": 29098,
        "label": "Nome do app",
        "name": "APP_NAME",
        "value": null,
        "type": "STRING",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29099,
        "label": "Logo do app",
        "name": "APP_LOGO",
        "value": null,
        "type": "IMAGE",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29100,
        "label": "Imagem de fundo",
        "name": "APP_BACKGROUND_IMAGE",
        "value": "https://i.ibb.co/9VhYsnR/DTm7d4evnp.jpg",
        "type": "IMAGE",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29101,
        "label": "Tipo do fundo do app",
        "name": "APP_BACKGROUND_TYPE",
        "value": {
            "options": [
                {
                    "label": "Imagem",
                    "value": "IMAGE"
                },
                {
                    "label": "Cor",
                    "value": "COLOR"
                }
            ],
            "selected": "IMAGE"
        },
        "type": "SELECT",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29102,
        "label": "Cor de fundo",
        "name": "APP_BACKGROUND_COLOR",
        "value": "#292d32c7",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29103,
        "label": "Cor do card inicial",
        "name": "APP_CARD_COLOR",
        "value": "#15b00030",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29104,
        "label": "Raio do card inicial",
        "name": "APP_CARD_RADIUS",
        "value": 22,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29105,
        "label": "Cor do card de status",
        "name": "APP_CARD_STATUS_COLOR",
        "value": "#40b6ff00",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29106,
        "label": "Raio do card de status",
        "name": "APP_CARD_STATUS_RADIUS",
        "value": 25,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29107,
        "label": "Cor do card de configurações",
        "name": "APP_CARD_CONFIG_COLOR",
        "value": "#055e00db",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29108,
        "label": "Cor do fundo dos dialogs",
        "name": "APP_DIALOG_BACKGROUND_COLOR",
        "value": "#292d32cf",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29109,
        "label": "Cor do fundo do dialog de log",
        "name": "APP_DIALOG_LOGGER_COLOR",
        "value": "#139e00f4",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29110,
        "label": "Cor das bordas",
        "name": "APP_BORDER_COLOR",
        "value": "#15b000ea",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29111,
        "label": "Cor dos inputs",
        "name": "APP_INPUT_COLOR",
        "value": "#1d242e00",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29112,
        "label": "Raio dos inputs",
        "name": "APP_INPUT_RADIUS",
        "value": 25,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29113,
        "label": "Cor dos textos",
        "name": "APP_TEXT_COLOR",
        "value": "#FFFFFFFF",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29114,
        "label": "Cor dos botões",
        "name": "APP_BUTTON_COLOR",
        "value": "#15b000ea",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29115,
        "label": "Raio dos botões",
        "name": "APP_BUTTON_RADIUS",
        "value": 25,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29116,
        "label": "Cor dos icones",
        "name": "APP_ICON_COLOR",
        "value": "#15b000ea",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29117,
        "label": "Exibir modo de conexão",
        "name": "APP_SHOW_CONNECTION_MODE",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29118,
        "label": "Atualizar automaticamente as configurações ao lançar uma atualização.",
        "name": "APP_CONFIG_AUTO_UPDATE",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29119,
        "label": "Iniciar o app automaticamente ao reiniciar o dispositivo",
        "name": "APP_AUTO_START",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29120,
        "label": "Usar limiter de conexão",
        "name": "APP_CONNECTION_LIMITER",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29121,
        "label": "Usar botão de atualizações",
        "name": "APP_BTN_UPDATE_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29122,
        "label": "Usar botão de registros",
        "name": "APP_BTN_LOGGER_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29123,
        "label": "Usar botão de pagina webview",
        "name": "APP_BTN_PAGE_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29124,
        "label": "Ativar dialog de erros",
        "name": "APP_DIALOG_ERROR_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29125,
        "label": "Ativar dialog de checkuser",
        "name": "APP_CHECKUSER_DIALOG_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29126,
        "label": "Ativar toast de sucesso",
        "name": "APP_SUCCESS_TOAST_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29127,
        "label": "Ativar toast de erro",
        "name": "APP_ERROR_TOAST_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29128,
        "label": "Usar layout webview",
        "name": "APP_LAYOUT_WEBVIEW_ENABLED",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29129,
        "label": "Mensagem",
        "name": "APP_MESSAGE",
        "value": "V2RAYBRASIL<br>\nQue sua experiência conosco seja excelente e duradora.",
        "type": "TEXT",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29130,
        "label": "URL de atualização do aplicativo",
        "name": "APP_UPDATE_URL",
        "value": null,
        "type": "URL",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29131,
        "label": "Tipo de mensagem",
        "name": "APP_MESSAGE_TYPE",
        "value": {
            "options": [
                {
                    "label": "Alerta",
                    "value": "ALERT"
                },
                {
                    "label": "Informação",
                    "value": "INFO"
                },
                {
                    "label": "Boas vindas",
                    "value": "WELCOME"
                },
                {
                    "label": "Sem mensagem",
                    "value": "NONE"
                }
            ],
            "selected": "WELCOME"
        },
        "type": "SELECT",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29132,
        "label": "LAYOUT WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_LAYOUT_WEBVIEW",
        "value": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>DTunnel</title>\n</head>\n<style>\n    * {\n        font-family: 'roboto';\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n        -webkit-tap-highlight-color: transparent;\n    }\n\n    ::placeholder {\n        color: #FFF;\n    }\n\n    body {\n        height: 100vh;\n    }\n\n    @keyframes fade-in {\n        from {\n            opacity: 0;\n        }\n\n        to {\n            opacity: 1;\n        }\n    }\n\n    @keyframes fade-out {\n        from {\n            opacity: 1;\n        }\n\n        to {\n            opacity: 0;\n        }\n    }\n\n    @keyframes pulse {\n        0% {\n            transform: scale(1);\n            box-shadow: none;\n        }\n\n        50% {\n            transform: scale(1.2);\n            box-shadow: 0 0 20px 5px #ffffff5d;\n        }\n\n        100% {\n            transform: scale(1);\n            box-shadow: none;\n        }\n    }\n\n    @keyframes spin {\n        from {\n            transform: rotate(0deg);\n        }\n\n        to {\n            transform: rotate(360deg);\n        }\n    }\n</style>\n\n<body>\n    <div id=\"root\"></div>\n    <script>\n        const BACKGROUND_IMAGE = JSON.parse(window?.DtGetAppConfig?.execute('APP_BACKGROUND_IMAGE') ?? '{\"value\": \"https://i.ibb.co/0XyvpHx/DT7xsqhdau.jpg\"}').value;\n        const BACKGROUND_COLOR = BACKGROUND_IMAGE\n            ? `url(${BACKGROUND_IMAGE}) center center / cover rgb(32, 32, 32)`\n            : '#404258'\n\n        const INPUT_COLOR = '#36374959'\n        const BUTTON_BACKGROUND_COLOR = '#36374959'\n        const ICON_COLOR = '#FFFFFF'\n        const TEXT_COLOR = '#FFFFFF'\n\n        const TOOLS_BUTTON_BACKGROUND_COLOR = '#36374959'\n\n        const VPN_BUTTON_BACKGROUND_COLOR = '#36374959'\n\n        const VPN_STOPPED_COLOR = '#ff0000'\n        const VPN_STARTING_COLOR = '#ffff00'\n        const VPN_RUNNING_COLOR = '#00ff00'\n\n        const CHECKUSER_TEXT_COLOR = '#FFFFFF'\n        const LOGGER_TEXT_COLOR = '#FFFFFF'\n\n        const DIALOG_HEADER_TITLE_COLOR = '#FFFFFF'\n        const DIALOG_HEADER_CLOSE_BUTTON_COLOR = '#FFFFFF'\n        const DIALOG_CONTENT_BACKGROUND_COLOR = '#36374959'\n        const DIALOG_FOOTER_BUTTON_COLOR = '#36374959'\n        const DIALOG_FOOTER_BUTTON_TEXT_COLOR = '#FFFFFF'\n\n        const LINK_SUPPORT = 'https://t.me/DTunnelGroup'\n        const TERMS_URL = 'https://t.me/DTunnelGroup'\n        const URL_SPEEDTEST = 'https://fast.com'\n        const URL_YOUTUBE = 'https://www.youtube.com/embed/g9JLURIh9lE'\n        const URL_MP3 = 'https://www.palcomp3.com.br'\n\n        class Component {\n            constructor(element) {\n                this.element = element;\n            }\n\n            addEventListener(event, listener) {\n                this.element.addEventListener(event, listener);\n            }\n\n            append(component) {\n                if (component instanceof Component) {\n                    this.element.appendChild(component.element);\n                } else {\n                    this.element.append(component);\n                }\n            }\n\n            appendChild(component) {\n                if (component instanceof Component) {\n                    this.element.appendChild(component.element);\n                } else {\n                    this.element.appendChild(component);\n                }\n            }\n\n            remove() {\n                this.element.remove();\n            }\n\n            contains(component) {\n                if (component instanceof Component) {\n                    return this.element.contains(component.element);\n                } else {\n                    return this.element.contains(component);\n                }\n            }\n        }\n\n        class StyledComponent extends Component {\n            constructor(element, styles = {}) {\n                super(element);\n                this.styles = styles;\n                this.setStyles(styles);\n            }\n\n            setStyles(styles) {\n                Object.keys(styles).forEach((key) => {\n                    if (this.element.style.hasOwnProperty(key)) {\n                        this.element.style[key] = styles[key];\n                    }\n                });\n            }\n        }\n\n        class AppComponent extends StyledComponent {\n            constructor(element, styles = {}) {\n                const defaultStyles = {\n                    width: '100%',\n                    height: '100%',\n                    background: '#404258',\n                    display: 'flex',\n                    flexDirection: 'column',\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                };\n\n                super(element, { ...defaultStyles, ...styles });\n            }\n        }\n\n        class CardComponent extends StyledComponent {\n            constructor(styles = {}) {\n                const defaultStyles = {\n                    display: 'flex',\n                    flexDirection: 'column',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    width: '85%',\n                    maxWidth: '23rem',\n                    margin: '1.2rem',\n                    borderRadius: '5px',\n                    border: 'none',\n                };\n\n                super(document.createElement('div'), { ...defaultStyles, ...styles });\n            }\n        }\n\n        class InputGroupComponent extends StyledComponent {\n            constructor(styles = {}) {\n                const defaultStyles = {\n                    display: 'flex',\n                    width: '100%',\n                    alignItems: 'center',\n                    background: '#363749',\n                    color: '#FFF',\n                    padding: '0.2rem',\n                    borderRadius: '5px',\n                    boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\n                };\n\n                super(document.createElement('div'), { ...defaultStyles, ...styles });\n            }\n\n            append(...components) {\n                components.forEach((component) => super.append(component));\n            }\n        }\n\n        class InputComponent extends StyledComponent {\n            constructor(styles = {}) {\n                const defaultStyles = {\n                    background: 'transparent',\n                    border: 'none',\n                    width: '100%',\n                    outline: 'none',\n                    color: TEXT_COLOR,\n                    fontSize: '15px',\n                };\n\n                super(document.createElement('input'), { ...defaultStyles, ...styles });\n            }\n\n            setEnabled(value) {\n                this.element.disabled = !value;\n            }\n        }\n\n        class InputText extends InputComponent {\n            constructor(styles = {}) {\n                super(styles);\n                this.element.type = 'text';\n            }\n\n            get value() {\n                return this.element.value;\n            }\n\n            setPlaceholder(text) {\n                this.element.placeholder = text;\n            }\n\n            setOnInputListener(callback) {\n                this.addEventListener('input', callback);\n            }\n\n            setValue(value) {\n                this.element.value = value;\n            }\n\n            setOnInputListener(callback) {\n                this.addEventListener('input', callback);\n            }\n        }\n\n        class InputPassword extends InputText {\n            constructor(styles = {}) {\n                super(styles);\n                this.element.type = 'password';\n            }\n\n            setShowing(value) {\n                this.element.type = !value ? 'password' : 'text';\n            }\n\n            get isShowing() { return this.element.type != 'password' }\n        }\n\n        class SvgComponent extends StyledComponent {\n            constructor(styles = {}, ...paths) {\n                const defaultStyles = {\n                    fill: '#FFFFFF',\n                    padding: '5px',\n                    width: '2.2rem',\n                    height: '2.2rem',\n                };\n\n                super(document.createElementNS('http://www.w3.org/2000/svg', 'svg'), {\n                    ...defaultStyles,\n                    ...styles,\n                });\n\n                this.applyOptions();\n\n                paths.forEach((p) => this.addPath(p));\n            }\n\n            applyOptions() {\n                this.setFill(this.styles.fill || 'currentColor');\n                this.setWidth(this.styles.width || '16');\n                this.setHeight(this.styles.height || '16');\n                this.setViewBox(this.styles.viewBox || '0 0 16 16');\n                this.setXmlns(this.styles.xmlns || 'http://www.w3.org/2000/svg');\n            }\n\n            setFill(color) {\n                this.element.setAttribute('fill', color);\n            }\n\n            setWidth(width) {\n                this.element.setAttribute('width', width);\n            }\n\n            setHeight(height) {\n                this.element.setAttribute('height', height);\n            }\n\n            setViewBox(viewBox) {\n                this.element.setAttribute('viewBox', viewBox);\n            }\n\n            setXmlns(xmlns) {\n                this.element.setAttribute('xmlns', xmlns);\n            }\n\n            addPath(...path) {\n                path.forEach((item) => {\n                    const pathElement = document.createElementNS(\n                        'http://www.w3.org/2000/svg',\n                        'path'\n                    );\n                    pathElement.setAttribute('d', item);\n                    this.element.appendChild(pathElement);\n                });\n            }\n        }\n\n        class Spinner extends StyledComponent {\n            constructor() {\n                super(document.createElement('div'), {\n                    display: 'flex',\n                    width: '100%',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    padding: '20px'\n                });\n                this.createSpinnerElements();\n            }\n\n            createSpinnerElements() {\n                const spinnerElement = new StyledComponent(document.createElement('div'));\n                spinnerElement.setStyles({\n                    borderTop: '4px solid transparent',\n                    borderRight: '4px solid #ccc',\n                    borderBottom: '4px solid #ccc',\n                    borderLeft: '4px solid #ccc',\n                    borderRadius: '50%',\n                    width: '45px',\n                    height: '45px',\n                    animation: 'spin 1s linear infinite',\n                });\n\n                this.append(spinnerElement)\n            }\n        }\n\n        class IconComponent extends SvgComponent {\n            constructor(styles = {}, ...iconPath) {\n                super({\n                    cursor: 'pointer',\n                    background: TOOLS_BUTTON_BACKGROUND_COLOR,\n                    borderRadius: '20%',\n                    height: '45px',\n                    width: '45px',\n                    padding: '10px',\n                    boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\n                    fill: ICON_COLOR,\n                    ...styles,\n                },\n                    ...iconPath,\n                );\n            }\n        }\n\n        class CalanderIconComponent extends IconComponent {\n            constructor(styles = {}) {\n                super(styles,\n                    'M4.684 11.523v-2.3h2.261v-.61H4.684V6.801h2.464v-.61H4v5.332h.684zm3.296 0h.676V8.98c0-.554.227-1.007.953-1.007.125 0 .258.004.329.015v-.613a1.806 1.806 0 0 0-.254-.02c-.582 0-.891.32-1.012.567h-.02v-.504H7.98v4.105zm2.805-5.093c0 .238.192.425.43.425a.428.428 0 1 0 0-.855.426.426 0 0 0-.43.43zm.094 5.093h.672V7.418h-.672v4.105z',\n                    'M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'\n                );\n            }\n        }\n\n        class LoggerIconComponent extends IconComponent {\n            constructor(styles = {}) {\n                super(styles,\n                    'M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zM5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1H5z',\n                    'M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z'\n                )\n            }\n        }\n\n        class ArrowRepeatIconComponent extends IconComponent {\n            constructor(styles = {}) {\n                super(styles,\n                    'M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z',\n                    'M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z'\n                );\n            }\n        }\n\n        class MoreIconComponent extends IconComponent {\n            constructor(styles = {}) {\n                super(styles,\n                    'M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'\n                );\n            }\n        }\n\n        class BatteryIconComponent extends SvgComponent {\n            constructor(styles = {}) {\n                super(styles,\n                    'M2 6h10v4H2V6z', 'M2 4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2zm10 1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h10zm4 3a1.5 1.5 0 0 1-1.5 1.5v-3A1.5 1.5 0 0 1 16 8z'\n                );\n            }\n        }\n\n        class HeadsetIconComponent extends SvgComponent {\n            constructor(styles = {}) {\n                super(styles,\n                    'M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v6a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866.5h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 .866.5H11.5A1.5 1.5 0 0 0 13 12h-1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5z'\n                );\n            }\n        }\n\n        class SpeedMeterIconComponent extends SvgComponent {\n            constructor(styles = {}) {\n                super(styles,\n                    'M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z',\n                    'M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z'\n                );\n            }\n        }\n\n        class YouTubeIconComponent extends SvgComponent {\n            constructor(styles = {}) {\n                super(styles,\n                    'M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z'\n                );\n            }\n        }\n\n        class Mp3IconComponent extends SvgComponent {\n            constructor(styles = {}) {\n                super(styles,\n                    'M4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3zm1 0v3h6V3H5zm3 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',\n                    'M11 11a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm-3 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z',\n                    'M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4z',\n                );\n            }\n        }\n\n        class TrashIconComponent extends SvgComponent {\n            constructor(styles = {}) {\n                super(styles,\n                    'M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z',\n                    'M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z'\n                );\n            }\n        }\n\n        class ReceptionIconComponent extends SvgComponent {\n            constructor(styles = {}) {\n                super(styles,\n                    'M0 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-5zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-8zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-11z'\n                );\n            }\n        }\n\n        class InfoIconComponent extends SvgComponent {\n            constructor(styles = {}) {\n                super(styles,\n                    'M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z',\n                    'm8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'\n                );\n            }\n        }\n\n        class ArrowDownIconComponent extends SvgComponent {\n            constructor(style = {}) {\n                super({\n                    fill: ICON_COLOR,\n                    ...style,\n                },\n                    'M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM8 6a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L7.5 12.293V6.5A.5.5 0 0 1 8 6z'\n                );\n            }\n        }\n\n        class NetworkIconComponent extends SvgComponent {\n            constructor(style = {}) {\n                super({\n                    fill: ICON_COLOR,\n                    ...style,\n                },\n                    'M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z',\n                    'M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H8.5v3a1.5 1.5 0 0 1 1.5 1.5h5.5a.5.5 0 0 1 0 1H10A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5H.5a.5.5 0 0 1 0-1H6A1.5 1.5 0 0 1 7.5 10V7H2a2 2 0 0 1-2-2V4zm1 0v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1zm6 7.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5z'\n                );\n            }\n        }\n\n        class PersonIconComponent extends SvgComponent {\n            constructor(style = {}) {\n                super({\n                    fill: ICON_COLOR,\n                    ...style,\n                },\n                    'M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'\n                );\n            }\n        }\n\n        class LockIconComponent extends SvgComponent {\n            constructor(style = {}) {\n                super({\n                    fill: ICON_COLOR,\n                    ...style,\n                },\n                    'M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'\n                );\n            }\n        }\n\n        class EyeIconComponent extends SvgComponent {\n            constructor(style = {}) {\n                super({\n                    fill: ICON_COLOR,\n                    ...style,\n                },\n                    'M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z',\n                    'M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z',\n                );\n            }\n        }\n\n        class PowerIconComponent extends SvgComponent {\n            constructor(style = {}) {\n                super({\n                    cursor: 'pointer',\n                    height: '8.5rem',\n                    width: '8.5rem',\n                    background: VPN_BUTTON_BACKGROUND_COLOR,\n                    borderRadius: '100%',\n                    boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\n                    padding: '20px',\n                    animation: 'pulse 2.5s infinite',\n                    fill: ICON_COLOR,\n                    ...style,\n                },\n                    'M7.5 1v7h1V1h-1z',\n                    'M3 8.812a4.999 4.999 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812z',\n                );\n\n            }\n        }\n\n        class DialogComponent extends StyledComponent {\n            constructor(styles = {}) {\n                super(document.createElement('div'), {\n                    position: 'absolute',\n                    top: '0',\n                    bottom: '0',\n                    left: '0',\n                    right: '0',\n                    height: '100vh',\n                    background: 'rgba(0, 0, 0, 0.5)',\n                    backdropFilter: 'blur(5px)',\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    visibility: 'hidden',\n                    opacity: '0',\n                    ...styles,\n                });\n\n                this.element.addEventListener('click', (event) => {\n                    if (event.target === this.element) {\n                        this.close();\n                    }\n                });\n\n                this.onCloseEvent = null\n            }\n\n            setOnCloseEventListener(callback) {\n                this.onCloseEvent = callback\n            }\n\n            setContent(content) {\n                if (!(content instanceof DialogContentComponent)) {\n                    throw new TypeError('Content must be a DialogContentComponent');\n                }\n\n                if (!this.contains(content)) {\n                    this.append(content);\n                }\n            }\n\n            show() {\n                this.setStyles({\n                    opacity: '1',\n                    visibility: 'visible',\n                    display: 'flex',\n                    animation: 'fade-in 0.3s forwards',\n                    pointerEvents: 'auto',\n                })\n\n                if (!document.body.contains(this.element)) {\n                    document.body.append(this.element);\n                }\n            }\n\n            close() {\n                this.setStyles({\n                    opacity: '0',\n                    animation: 'fade-out 0.3s forwards',\n                })\n\n                setTimeout(() => {\n                    this.setStyles({\n                        display: 'none',\n                        pointerEvents: 'none',\n                    })\n\n                    if (this.onCloseEvent != null) {\n                        this.onCloseEvent()\n                    }\n                }, 300);\n            }\n\n            remove() {\n                if (document.body.contains(this.element)) {\n                    this.element.remove();\n                }\n            }\n        }\n\n        class DialogContentComponent extends StyledComponent {\n            constructor(styles = {}) {\n                super(document.createElement('div'), {\n                    display: 'flex',\n                    flexDirection: 'column',\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                    background: DIALOG_CONTENT_BACKGROUND_COLOR,\n                    borderRadius: '5px',\n                    maxWidth: '30rem',\n                    width: '85%',\n                    ...styles,\n                });\n\n                this.lastHeader = null;\n                this.lastBody = null;\n                this.lastFooter = null;\n            }\n\n            setHeader(component) {\n                this?.lastHeader?.remove()\n                this.lastHeader = component\n                this.append(component);\n            }\n\n            setBody(component) {\n                this?.lastBody?.remove()\n                this.lastBody = component\n                this.append(component);\n            }\n\n            setFooter(component) {\n                this?.lastFooter?.remove()\n                this.lastFooter = component\n                this.append(component);\n            }\n        }\n\n        class DialogHeaderComponent extends StyledComponent {\n            constructor(styles = {}) {\n                super(document.createElement('div'), {\n                    display: 'flex',\n                    justifyContent: 'space-between',\n                    alignItems: 'center',\n                    width: '100%',\n                    padding: '5px',\n                    ...styles,\n                });\n\n                this.title = new StyledComponent(document.createElement('span'), {\n                    fontSize: '16px',\n                    color: DIALOG_HEADER_TITLE_COLOR,\n                    fontFamily: 'sans-serif',\n                    fontWeight: 'bold',\n                    padding: '5px',\n                });\n\n                this.closeButton = new SvgComponent({\n                    cursor: 'pointer',\n                    height: '35px',\n                    width: '35px',\n                    fill: DIALOG_HEADER_CLOSE_BUTTON_COLOR,\n                },\n                    'M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'\n                );\n\n                this.initialize();\n            }\n\n            setTitleText(title) {\n                this.title.element.innerText = title;\n            }\n\n            setCloseButtonClickListener(callback) {\n                this.closeButton.addEventListener('click', callback);\n            }\n\n            initialize() {\n                this.append(this.title);\n                this.append(this.closeButton);\n            }\n        }\n\n        class DialogBodyComponent extends StyledComponent {\n            constructor(styles = {}) {\n                super(document.createElement('div'), {\n                    display: 'flex',\n                    width: '100%',\n                    padding: '5px',\n                    ...styles,\n                });\n            }\n        }\n\n        class DialogFooterComponent extends StyledComponent {\n            constructor(styles = {}) {\n                super(document.createElement('div'), {\n                    display: 'flex',\n                    justifyContent: 'space-between',\n                    gap: '5px',\n                    alignItems: 'center',\n                    width: '100%',\n                    padding: '5px',\n                    ...styles,\n                });\n            }\n\n            addButton(button) {\n                if (!(button instanceof DialogFooterButtonComponent)) {\n                    throw new TypeError('Button must be a DialogFooterButtonComponent instance');\n                }\n\n                this.append(button);\n                return this;\n            }\n        }\n\n        class DialogFooterButtonComponent extends StyledComponent {\n            constructor(text, onclick, styles = {}) {\n                super(document.createElement('button'), {\n                    fontSize: '14px',\n                    fontWeight: 'bold',\n                    color: DIALOG_FOOTER_BUTTON_TEXT_COLOR,\n                    background: DIALOG_FOOTER_BUTTON_COLOR,\n                    border: 'none',\n                    borderRadius: '3px',\n                    padding: '10px',\n                    width: '100%',\n                    cursor: 'pointer',\n                    boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\n                    ...styles,\n                });\n\n\n                this.setText(text)\n                this.setClickListener(onclick);\n            }\n\n            setText(text) {\n                this.element.innerText = text;\n            }\n\n            setClickListener(callback) {\n                this.addEventListener('click', callback);\n            }\n        }\n\n        class DialogBuilder {\n            constructor(styles = {}) {\n                this.dialog = new DialogComponent(styles);\n                this.header = new DialogHeaderComponent();\n                this.content = new DialogContentComponent();\n\n                this.footer = new DialogFooterComponent();\n                this.footerButtons = [];\n\n                this.content.setHeader(this.header);\n                this.header.setCloseButtonClickListener(() => this.dialog.close());\n\n            }\n\n            static create(styles = {}) {\n                return new DialogBuilder(styles);\n            }\n\n            setTitle(title) {\n                this.header.setTitleText(title);\n                return this;\n            }\n\n            setAutoRemove(autoRemove) {\n                this.dialog.setOnCloseEventListener(() => {\n                    if (autoRemove) {\n                        this.dialog.remove();\n                    }\n                });\n                return this;\n            }\n\n            setBody(bodyComponent) {\n                this.content.setBody(bodyComponent);\n                return this;\n            }\n\n            addFooterButton(text, callback) {\n                const button = new DialogFooterButtonComponent(text, callback);\n                this.footerButtons.push(button);\n                return this;\n            }\n\n            show() {\n                this.dialog.setContent(this.content);\n\n                if (this.footerButtons.length > 0) {\n                    this.content.setFooter(this.footer);\n                    this.footerButtons.forEach((button) => {\n                        this.footer.addButton(button);\n                    });\n                }\n\n                this.dialog.show();\n                return this;\n            }\n\n            close() {\n                this.dialog.close();\n            }\n        }\n\n        class ConfigComponent extends StyledComponent {\n            constructor(styles = {}) {\n                super(document.createElement('div'), {\n                    display: 'flex',\n                    gap: '5px',\n                    alignItems: 'center',\n                    textAlign: 'left',\n                    marginTop: '5px',\n                    padding: '5px',\n                    background: 'rgba(255, 255, 255, 0.1)',\n                    width: '100%',\n                    borderRadius: '5px',\n                    ...styles\n                });\n\n                this.image = document.createElement('img');\n                this.name = document.createElement('span');\n                this.description = document.createElement('span');\n                this.mode = document.createElement('span');\n\n                this.initialize();\n            }\n\n            setImage(url) {\n                this.image.src = url;\n            }\n\n            setName(name) {\n                this.name.innerHTML = name;\n            }\n\n            setDescription(description) {\n                this.description.innerHTML = description;\n            }\n\n            setMode(mode) {\n                this.mode.innerHTML = mode;\n            }\n\n            initialize() {\n                this.setImageStyles();\n                this.setNameStyles();\n                this.setDescriptionStyles();\n                this.setModeStyles();\n                const startArea = this.createStartArea();\n                const endArea = this.createEndArea();\n                this.appendElements(startArea, endArea);\n            }\n\n            setImageStyles() {\n                this.image.style.width = '40px';\n                this.image.style.height = '40px';\n            }\n\n            setNameStyles() {\n                this.name.style.fontSize = '12px';\n                this.name.style.fontFamily = 'sans-serif';\n                this.name.style.color = '#FFFFFF';\n                this.name.style.fontWeight = 'bold';\n            }\n\n            setDescriptionStyles() {\n                this.description.style.fontSize = '10px';\n                this.description.style.fontFamily = 'sans-serif';\n                this.description.style.color = '#FFFFFF';\n                this.description.style.fontWeight = 'bold';\n                this.description.style.fontStyle = 'italic';\n            }\n\n            setModeStyles() {\n                this.mode.style.fontSize = '10px';\n                this.mode.style.fontFamily = 'sans-serif';\n                this.mode.style.color = '#FFFFFF';\n                this.mode.style.fontWeight = 'bold';\n                this.mode.style.fontStyle = 'italic';\n                this.mode.style.whiteSpace = 'nowrap';\n            }\n\n            createStartArea() {\n                const startArea = document.createElement('div');\n                startArea.style.display = 'flex';\n                startArea.style.width = '100%';\n                startArea.style.gap = '10px';\n                startArea.style.flexDirection = 'column';\n                startArea.appendChild(this.name);\n                startArea.appendChild(this.description);\n                return startArea;\n            }\n\n            createEndArea() {\n                const endArea = document.createElement('div');\n                endArea.style.display = 'flex';\n                endArea.style.flexDirection = 'column';\n                endArea.style.alignItems = 'end';\n                endArea.style.alignSelf = 'end';\n                endArea.style.width = '50%';\n                endArea.appendChild(this.mode);\n                return endArea;\n            }\n\n            appendElements(startArea, endArea) {\n                this.appendChild(this.image);\n                this.appendChild(startArea);\n                this.appendChild(endArea);\n            }\n        }\n\n        class CategoryComponent extends StyledComponent {\n            constructor(styles = {}, items = []) {\n                super(document.createElement('div'), {\n                    display: 'flex',\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                    flexDirection: 'column',\n                    textAlign: 'center',\n                    padding: '2px',\n                    width: '100%',\n                    ...styles\n                });\n\n                this.items = items;\n                this.name = document.createElement('span');\n                this.setNameStyles();\n\n                this.initialize();\n                this.setItems(items);\n            }\n\n            setNameStyles() {\n                this.name.style.width = '100%';\n                this.name.style.borderRadius = '5px';\n                this.name.style.fontSize = '12px';\n                this.name.style.fontFamily = 'sans-serif';\n                this.name.style.color = '#FFFFFF';\n                this.name.style.background = 'rgba(255, 255, 255, 0.1)';\n                this.name.style.padding = '5px';\n                this.name.style.fontWeight = 'bold';\n            }\n\n            setName(value) {\n                this.name.innerHTML = value;\n            }\n\n            setItems(items) {\n                items.forEach(item => this.append(item));\n            }\n\n            initialize() {\n                this.appendChild(this.name);\n            }\n        }\n\n        class ConfigBodyComponent extends DialogBodyComponent {\n            constructor(items) {\n                super({\n                    flexDirection: 'column',\n                    gap: '5px',\n                    maxHeight: '65vh',\n                    overflowY: 'auto'\n                });\n                items.forEach(item => this.append(item));\n            }\n        }\n\n        class LoggerItemComponent extends StyledComponent {\n            constructor(styles = {}, message) {\n                super(document.createElement('span'), {\n                    fontFamily: 'monospace',\n                    width: '100%',\n                    fontSize: '12px',\n                    color: LOGGER_TEXT_COLOR,\n                    ...styles,\n                });\n\n                this.element.innerHTML = message\n            }\n        }\n\n        class LoggerBodyComponent extends DialogBodyComponent {\n            constructor(styles = {}, items = []) {\n                super({\n                    flexDirection: 'column',\n                    maxHeight: '65vh',\n                    overflowY: 'auto',\n                    width: '100%',\n                    ...styles,\n                });\n\n                this.setItems(items);\n            }\n\n            setItems(items) {\n                this.element.innerHTML = '';\n                items.forEach(item => this.append(item));\n                this.scrollDown();\n            }\n\n            scrollDown() {\n                this.element.scrollTop = this.element.scrollHeight;\n            }\n        }\n\n        class CheckUserBodyComponent extends DialogBodyComponent {\n            constructor(data = {}) {\n                super()\n                const component = new StyledComponent(document.createElement('div'), {\n                    display: 'flex',\n                    flexDirection: 'column',\n                    color: TEXT_COLOR,\n                    fontFamily: 'sans-serif',\n                    gap: '2px',\n                    textAlign: 'center',\n                    width: '100%',\n                });\n\n                component.element.innerHTML = `\n                    <span style=\"color: ${CHECKUSER_TEXT_COLOR}\">?Nome de usuario: ${data.username}</span>\n                    <span style=\"color: ${CHECKUSER_TEXT_COLOR}\">?Expira em: ${data.expiration_date}</span>\n                    <span style=\"color: ${CHECKUSER_TEXT_COLOR}\">?Dias restantes: ${data.expiration_days}</span>\n                    <span style=\"color: ${CHECKUSER_TEXT_COLOR}\">?Conexoes: ${data.count_connections}|${data.limit_connections}</span>\n                `\n\n                this.append(component)\n            }\n        }\n\n        class VpnStateComponent extends StyledComponent {\n            constructor(style = {}) {\n                super(document.createElement('span'), {\n                    fontSize: '1.5rem',\n                    fontFamily: 'sans-serif',\n                    fontWeight: 'bold',\n                    color: '#FFF',\n                    marginTop: '2rem',\n                    ...style,\n                })\n\n                this.setState('DISCONNECTED')\n            }\n\n            setState(state) {\n                this.element.innerHTML = state\n            }\n        }\n\n        class LocalIPComponent extends StyledComponent {\n            constructor(styles = {}) {\n                super(document.createElement('span'), {\n                    position: 'absolute',\n                    fontSize: '1rem',\n                    fontFamily: 'Helvetica',\n                    fontWeight: 'bold',\n                    whiteSpace: 'nowrap',\n                    color: TEXT_COLOR,\n                    top: `${window?.DtGetStatusBarHeight?.execute() ?? '30'}px`,\n                    left: '10px',\n                    ...styles,\n                })\n\n                this.setIP(window?.DtGetLocalIP?.execute() ?? '127.0.0.1')\n                setInterval(() => {\n                    this.setIP(window?.DtGetLocalIP?.execute() ?? '127.0.0.1')\n                }, 1000)\n            }\n\n            setIP(ip) {\n                this.element.innerHTML = `IP: ${ip}`\n            }\n        }\n\n        class PingComponent extends StyledComponent {\n            constructor(styles = {}) {\n                super(document.createElement('span'), {\n                    position: 'absolute',\n                    fontSize: '1rem',\n                    fontFamily: 'Helvetica',\n                    fontWeight: 'bold',\n                    whiteSpace: 'nowrap',\n                    top: `${window?.DtGetStatusBarHeight?.execute() ?? '30'}px`,\n                    right: '10px',\n                    ...styles,\n                });\n\n                this.startPing();\n            }\n\n            async startPing() {\n                this.setPing(await this.ping());\n                setInterval(async () => this.setPing(await this.ping()), 1000);\n            }\n\n            setPing(ping) {\n                this.element.textContent = `PING: ${ping}ms`;\n\n                const pingValue = parseInt(ping, 10);\n                const color = this.getColorFromPing(pingValue);\n\n                this.setStyles({ color });\n            }\n\n            getColorFromPing(ping) {\n                const pingValue = parseInt(ping, 10);\n                const color = pingValue >= 0 && pingValue <= 50 ? '#00ff00' :\n                    pingValue > 50 && pingValue <= 100 ? '#ffff00' :\n                        '#ff0000';\n                return color;\n            }\n\n            async ping() {\n                const startTime = new Date().getTime();\n                const url = `https://cdn-icons-png.flaticon.com/512/7517/7517373.png?${startTime}`\n\n                try {\n                    const data = await fetch(url)\n                    return new Date().getTime() - startTime;\n                } catch (err) {\n                    console.log(err);\n                    return -1;\n                }\n            }\n        }\n\n        class IframeBodyComponent extends DialogBodyComponent {\n            constructor(styles = {}, url = null) {\n                super({\n                    minHeight: '600px',\n                    ...styles\n                })\n\n                this.iframeElement = new StyledComponent(document.createElement('iframe'), {\n                    width: '100%',\n                    border: 'none',\n                    borderRadius: '5px',\n                    display: 'none',\n                })\n\n                this.spinner = new Spinner()\n\n                this.iframeElement.addEventListener('load', () => {\n                    this.iframeElement.setStyles({ display: 'block' })\n                    this.spinner.setStyles({ display: 'none' })\n                })\n\n                this.setUrl(url)\n                this.applyOptions()\n                this.append(this.iframeElement)\n                this.append(this.spinner)\n\n            }\n\n            setUrl(url) {\n                this.iframeElement.element.src = url\n            }\n\n            setOnLoadListener(callback) {\n                this.iframeElement.addEventListener('load', callback)\n            }\n\n            applyOptions() {\n                this.iframeElement.element.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share')\n                this.iframeElement.element.setAttribute('allowfullscreen', '')\n                this.iframeElement.element.setAttribute('frameborder', '0')\n            }\n        }\n\n        class CleanAppMessageBodyComponent extends DialogBodyComponent {\n            constructor(styles = {}, url = null) {\n                super({\n                    height: 'auto',\n                    ...styles\n                })\n\n                this.spanComponent = new StyledComponent(document.createElement('span'), {\n                    fontSize: '16px',\n                    fontFamily: 'Helvetica',\n                    fontWeight: 'bold',\n                    color: TEXT_COLOR,\n                })\n\n                this.spanComponent.element.innerHTML = 'Você gostaria de limpar os dados do aplicativo? Por favor, esteja ciente de que essa ação resultará na remoção permanente de todas as informações armazenadas. Você tem certeza de que deseja prosseguir com essa operação?'\n\n                this.append(this.spanComponent)\n            }\n        }\n\n        class StyledButtonComponent extends StyledComponent {\n            constructor(text, icon, onclick, styles = {}) {\n                super(document.createElement('button'), {\n                    width: '100%',\n                    borderRadius: '5px',\n                    padding: '10px',\n                    border: 'none',\n                    color: TEXT_COLOR,\n                    background: BUTTON_BACKGROUND_COLOR,\n                    boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\n                    cursor: 'pointer',\n                    display: 'flex',\n                    alignItems: 'center',\n                    ...styles\n                });\n\n                this.textComponent = new StyledComponent(document.createElement('span'), {\n                    fontSize: '16px',\n                    fontWeight: 'bold',\n                });\n\n                this.textComponent.element.innerHTML = text;\n                this.element.addEventListener('click', onclick)\n\n                this.append(icon ?? '')\n                this.append(this.textComponent);\n            }\n        }\n\n        class ApnSettingStyledButtonComponent extends StyledButtonComponent {\n            constructor() {\n                super(\n                    'APN',\n                    new ReceptionIconComponent(),\n                    () => window?.DtStartApnActivity?.execute()\n                )\n            }\n        }\n\n        class TermsStyledButtonComponent extends StyledButtonComponent {\n            constructor() {\n                super(\n                    'TERMOS',\n                    new InfoIconComponent(),\n                    () => window?.DtStartWebViewActivity?.execute(TERMS_URL)\n                )\n            }\n        }\n\n        class BatteryStyledButtonComponent extends StyledButtonComponent {\n            constructor() {\n                super(\n                    'BATERIA',\n                    new BatteryIconComponent(),\n                    () => window?.DtIgnoreBatteryOptimizations?.execute(),\n                )\n            }\n        }\n\n        class SupportStyledButtonComponent extends StyledButtonComponent {\n            constructor() {\n                super(\n                    'SUPORTE',\n                    new HeadsetIconComponent(),\n                    () => window?.DtStartWebViewActivity?.execute(LINK_SUPPORT)\n                );\n            }\n        }\n\n        class SpeedTestStyledButtonComponent extends StyledButtonComponent {\n            constructor() {\n                super(\n                    'SPEEDTEST',\n                    new SpeedMeterIconComponent(),\n                    () => {\n                        DialogBuilder.create()\n                            .setTitle('SPEEDTEST')\n                            .setAutoRemove(true)\n                            .setBody(new IframeBodyComponent({}, URL_SPEEDTEST))\n                            .show()\n                    })\n            }\n        }\n\n        class YouTubeStyledButtonComponent extends StyledButtonComponent {\n            static dialog = DialogBuilder.create({ zIndex: 1 })\n                .setTitle('YOUTUBE')\n                .setBody(new IframeBodyComponent({}, URL_YOUTUBE))\n\n            constructor() {\n                super(\n                    'YOUTUBE',\n                    new YouTubeIconComponent(),\n                    () => this.dialog.show(),\n                )\n            }\n\n            get dialog() {\n                return YouTubeStyledButtonComponent.dialog;\n            }\n        }\n\n        class Mp3StyledButtonComponent extends StyledButtonComponent {\n            static dialog = DialogBuilder.create({ zIndex: 1 })\n                .setTitle('MP3')\n                .setBody(new IframeBodyComponent({}, URL_MP3))\n\n            constructor() {\n                super(\n                    'MP3',\n                    new Mp3IconComponent(),\n                    () => this.dialog.show(),\n                )\n            }\n\n            get dialog() {\n                return Mp3StyledButtonComponent.dialog;\n            }\n        }\n\n        class CleanAppStyledButtonComponent extends StyledButtonComponent {\n            constructor() {\n                super(\n                    'LIMPAR',\n                    new TrashIconComponent(),\n                    () => {\n                        const dialog = DialogBuilder.create()\n                            .setTitle('LIMPAR DADOS')\n                            .setAutoRemove(true)\n                            .setBody(new CleanAppMessageBodyComponent())\n                            .addFooterButton('NÃO', () => dialog.close())\n                            .addFooterButton('SIM', () => window?.DtCleanApp?.execute())\n                            .show();\n                    })\n            }\n        }\n\n        class MenuDialogBodyComponent extends DialogBodyComponent {\n            constructor() {\n                super({\n                    display: 'flex',\n                    flexDirection: 'column',\n                    gap: '5px'\n                })\n            }\n            addRowButtons(...buttons) {\n                const element = new StyledComponent(document.createElement('div'), {\n                    display: 'flex',\n                    gap: '5px',\n                    width: '100%'\n                });\n                buttons.forEach(button => element.append(button));\n                this.append(element);\n                return this;\n            }\n        }\n\n        class ConfigInputComponent extends InputGroupComponent {\n            constructor() {\n                super({ cursor: 'pointer', background: INPUT_COLOR });\n\n                this.configInput = new InputText({ cursor: 'pointer', fontFamily: 'roboto' });\n                this.configInput.setEnabled(false);\n                this.configInput.setPlaceholder('SELECIONE UM SERVIDOR');\n                this.configInput.setValue(JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{}').name ?? '');\n\n                this.append(new NetworkIconComponent(), this.configInput, new ArrowDownIconComponent());\n                this.configure()\n\n                this.addEventListener('click', () => {\n                    const mock = '[{\"sorter\":6,\"color\":\"#6D08041C\",\"name\":\"CONFIG\",\"id\":1393,\"items\":[{\"mode\":\"V2RAY - VLESS\",\"sorter\":4,\"tlsVersion\":\"TLSv1.2\",\"name\":\"CONFIG 01\",\"icon\":\"https://cdn-icons-png.flaticon.com/512/8187/8187143.png\",\"id\":11803,\"status\":\"ACTIVE\"},{\"mode\":\"SSH_DIRECT\",\"sorter\":2,\"tlsVersion\":\"TLSv1.2\",\"name\":\"CONFIG 02\",\"icon\":\"https://cdn-icons-png.flaticon.com/512/8187/8187143.png\",\"id\":28627,\"status\":\"ACTIVE\"},{\"mode\":\"OVPN_PROXY\",\"sorter\":23,\"tlsVersion\":\"TLSv1.2\",\"name\":\"CONFIG 03\",\"icon\":\"https://cdn-icons-png.flaticon.com/512/8187/8187143.png\",\"id\":30001,\"status\":\"ACTIVE\"}]},{\"sorter\":2,\"color\":\"#6D08041C\",\"name\":\"CONFIG 2\",\"id\":1846,\"items\":[{\"mode\":\"SSH_PROXY\",\"sorter\":1,\"tlsVersion\":\"TLSv1.2\",\"name\":\"CONFIG 01\",\"icon\":\"https://cdn-icons-png.flaticon.com/512/8187/8187143.png\",\"id\":26295,\"status\":\"ACTIVE\"}]},{\"sorter\":4,\"color\":\"#80000000\",\"name\":\"CONFIG 3\",\"id\":3310,\"items\":[{\"mode\":\"SSH_PROXY\",\"sorter\":1,\"tlsVersion\":\"TLSv1.2\",\"name\":\"CONFIG. TEST\",\"icon\":\"https://cdn-icons-png.flaticon.com/512/8187/8187143.png\",\"id\":29997,\"status\":\"ACTIVE\"},{\"mode\":\"OVPN_PROXY\",\"sorter\":1,\"tlsVersion\":\"TLSv1.2\",\"name\":\"CONFIG. TEST 2\",\"icon\":\"https://cdn-icons-png.flaticon.com/512/8187/8187143.png\",\"id\":29998,\"status\":\"ACTIVE\"}]}]';\n                    const items = JSON.parse(window?.DtGetConfigs?.execute() || mock);\n                    items.sort((a, b) => a.sorter - b.sorter);\n                    items.forEach((item) => item.items.sort((a, b) => a.sorter - b.sorter));\n\n                    const dialog = DialogBuilder.create()\n                        .setTitle('CONFIGURAÇÕES')\n                        .setAutoRemove(true)\n                        .setBody(\n                            new ConfigBodyComponent(\n                                items.map((item) => {\n                                    const category = new CategoryComponent();\n                                    category.setName(item.name);\n                                    category.setItems(\n                                        item.items.map((item) => {\n                                            const config = new ConfigComponent();\n                                            config.setName(item.name);\n                                            config.setDescription(item.description ?? '');\n                                            config.setMode(item.mode);\n                                            config.setImage(item.icon);\n                                            config.addEventListener('click', () => {\n                                                window?.DtSetConfig?.execute(item.id);\n                                                dialog.close();\n                                            });\n                                            return config;\n                                        })\n                                    );\n                                    return category;\n                                })\n                            )\n                        )\n                        .show();\n                });\n\n                const originalClickListener = window.dtConfigClickListener;\n                window.dtConfigClickListener = () => {\n                    if (originalClickListener) {\n                        originalClickListener();\n                    }\n                    this.configure();\n                };\n                this.configure();\n            }\n\n            configure() {\n                const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{\"auth\":{\"password\": \"\"}, \"mode\": \"v2ra\"}')\n                this.configInput.setValue(config.name ?? '')\n            }\n        }\n\n        class UserPassInputComponent extends StyledComponent {\n            constructor() {\n                super(document.createElement('div'), {\n                    display: 'flex',\n                    marginTop: '5px',\n                    width: '100%',\n                    display: 'flex',\n                    gap: '5px',\n                });\n\n                this.usernameGroupComponent = new InputGroupComponent({ background: INPUT_COLOR });\n                const personIconComponent = new PersonIconComponent();\n                this.usernameInput = new InputText();\n                this.usernameInput.setPlaceholder('Nome de usuário');\n                this.usernameInput.setValue(window?.DtUsername?.get() ?? '');\n                this.usernameInput.setOnInputListener(() => window?.DtUsername?.set(this.usernameInput.value));\n                this.usernameGroupComponent.append(personIconComponent, this.usernameInput);\n                this.append(this.usernameGroupComponent);\n\n                this.passwordGroupComponent = new InputGroupComponent({ background: INPUT_COLOR });\n                this.passwordInput = new InputPassword();\n                const eyeIconComponent = new EyeIconComponent();\n                eyeIconComponent.addEventListener('click', () => this.passwordInput.setShowing(!this.passwordInput.isShowing));\n                this.passwordInput.setPlaceholder('Senha');\n                this.passwordInput.setValue(window?.DtPassword?.get() ?? '');\n                this.passwordInput.setOnInputListener(() => { window?.DtPassword?.set(this.passwordInput.value) });\n                this.passwordGroupComponent.append(new LockIconComponent(), this.passwordInput, eyeIconComponent);\n                this.append(this.passwordGroupComponent);\n\n                this.v2rayUuidGroupComponent = new InputGroupComponent({ background: INPUT_COLOR });\n                this.v2rayUuidInput = new InputPassword();\n                this.v2rayUuidInput.setPlaceholder('V2Ray UUID');\n                this.v2rayUuidInput.setValue(window?.DtUuid?.get() ?? '');\n                this.v2rayUuidInput.setOnInputListener(() => window?.DtUuid?.set(this.v2rayUuidInput.value));\n                this.v2rayUuidGroupComponent.append(new LockIconComponent(), this.v2rayUuidInput);\n\n                this.append(this.v2rayUuidGroupComponent);\n\n                const originalClickListener = window.dtConfigClickListener;\n                window.dtConfigClickListener = () => {\n                    if (originalClickListener) {\n                        originalClickListener();\n                    }\n                    this.configure();\n                };\n\n                this.configure();\n            }\n\n            configure() {\n                const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{\"auth\":{\"password\": \"\"}, \"mode\": \"v2ra\"}')\n                const isV2ray = config?.mode?.toLowerCase()?.startsWith('v2ray');\n\n                this.usernameGroupComponent.setStyles({\n                    display: isV2ray || config?.auth?.username ? 'none' : 'flex',\n                })\n\n                this.passwordGroupComponent.setStyles({\n                    display: isV2ray || config?.auth?.password ? 'none' : 'flex',\n                })\n\n                this.v2rayUuidGroupComponent.setStyles({\n                    display: !isV2ray || config?.auth?.v2ray_uuid ? 'none' : 'flex',\n                })\n\n                const isRunning = (window?.DtGetVpnState?.execute() ?? 'DISCONNECTED') != 'DISCONNECTED';\n                this.usernameInput.setEnabled(!isRunning)\n                this.passwordInput.setEnabled(!isRunning)\n                this.v2rayUuidInput.setEnabled(!isRunning)\n            }\n        }\n\n        class ButtonAndStateContainerComponent extends StyledComponent {\n            constructor(styles = {}) {\n                super(document.createElement('div'), {\n                    display: 'flex',\n                    flexDirection: 'column',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    width: '100%',\n                    ...styles,\n                });\n\n                this.startOrStopButtonComponent = new PowerIconComponent();\n                this.startOrStopButtonComponent.addEventListener('click', () => {\n                    const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{}')\n                    const isV2ray = config?.mode?.toLowerCase()?.startsWith('v2ray');\n\n                    const username = window?.DtUsername?.get() ?? config.auth.username\n                    const password = window?.DtPassword?.get() ?? config.auth.password\n                    const v2rayUuid = window?.DtUuid?.get() ?? config.auth.v2ray_uuid\n\n                    if (!isV2ray && (!username || !password) || isV2ray && !v2rayUuid) {\n                        startDialogAccess()\n                        return\n                    }\n\n                    if (DtGetVpnState.execute() !== 'DISCONNECTED') {\n                        DtExecuteVpnStop.execute();\n                    } else {\n                        DtExecuteVpnStart.execute();\n                    }\n                });\n                this.append(this.startOrStopButtonComponent);\n\n                this.vpnStateComponent = new VpnStateComponent();\n                this.append(this.vpnStateComponent);\n\n                window.dtVpnStateListener = state => this.configureState(state);\n                this.configureState(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED');\n            }\n\n            configureState(state) {\n                const isRunning = state != 'DISCONNECTED';\n\n                this.vpnStateComponent.setState((window?.DtTranslateText?.execute('LBL_STATE_' + state) ?? 'UNKNOWN').toUpperCase())\n\n                if (state == 'DISCONNECTED') {\n                    this.vpnStateComponent.setStyles({ color: VPN_STOPPED_COLOR })\n                    this.startOrStopButtonComponent.setStyles({ fill: VPN_STOPPED_COLOR })\n                }\n\n                if (state != 'DISCONNECTED' && state != 'CONNECTED') {\n                    this.vpnStateComponent.setStyles({ color: VPN_STARTING_COLOR })\n                    this.startOrStopButtonComponent.setStyles({ fill: VPN_STARTING_COLOR })\n                }\n\n                if (state == 'CONNECTED') {\n                    this.vpnStateComponent.setStyles({ color: VPN_RUNNING_COLOR })\n                    this.startOrStopButtonComponent.setStyles({ fill: VPN_RUNNING_COLOR })\n                }\n            }\n        }\n\n        class CardToolsComponent extends CardComponent {\n            constructor() {\n                super({\n                    margin: '20px 0',\n                    width: '100%',\n                    flexDirection: 'row',\n                    justifyContent: 'space-between',\n                    background: 'transparent',\n                    boxShadow: 'none',\n                });\n\n                this.loggerBody = new LoggerBodyComponent({});\n\n                this.addArrowRepeatIcon();\n                this.addLoggerIcon();\n                this.addCalanderIcon();\n                this.addMoreButton();\n\n                window.dtOnNewLogListener = () => this.renderizeLogger();\n                this.renderizeLogger();\n            }\n\n            addCalanderIcon() {\n                const calanderIconComponent = new CalanderIconComponent();\n                calanderIconComponent.addEventListener('click', () =>\n                    window?.DtStartCheckUser?.execute()\n                );\n                this.append(calanderIconComponent);\n            }\n\n            addLoggerIcon() {\n                const loggerIconComponent = new LoggerIconComponent();\n                loggerIconComponent.addEventListener('click', () => {\n                    const loggerDialog = DialogBuilder.create()\n                        .setTitle('REGISTRO')\n                        .setBody(this.loggerBody)\n                        .setAutoRemove(true)\n                        .addFooterButton('LIMPAR', () => window?.DtClearLogs?.execute())\n                        .addFooterButton('FECHAR', () => loggerDialog.close())\n                        .show();\n                    this.loggerBody.scrollDown();\n                });\n                this.append(loggerIconComponent);\n            }\n\n            addArrowRepeatIcon() {\n                const arrowRepeatIconComponent = new ArrowRepeatIconComponent();\n                arrowRepeatIconComponent.addEventListener('click', () =>\n                    window?.DtStartAppUpdate?.execute()\n                );\n                this.append(arrowRepeatIconComponent);\n            }\n\n            addMoreButton() {\n                const moreButton = new MoreIconComponent();\n                moreButton.addEventListener('click', () => {\n                    DialogBuilder.create()\n                        .setTitle('FERRAMENTAS')\n                        .setAutoRemove(true)\n                        .setBody(\n                            new MenuDialogBodyComponent()\n                                .addRowButtons(\n                                    new ApnSettingStyledButtonComponent(),\n                                    new BatteryStyledButtonComponent(),\n                                )\n                                .addRowButtons(\n                                    new SpeedTestStyledButtonComponent(),\n                                    new CleanAppStyledButtonComponent()\n                                )\n                                .addRowButtons(\n                                    new YouTubeStyledButtonComponent(),\n                                    new Mp3StyledButtonComponent(),\n                                )\n                        )\n                        .show();\n                });\n                this.append(moreButton);\n            }\n\n            renderizeLogger() {\n                const mock = Array.from({ length: 300 }, (_, i) => ({ TIME: `MESSAGE ${i}` }));\n                const data = JSON.parse(window?.DtGetLogs?.execute() ?? JSON.stringify(mock))\n                const items = data.map(log => {\n                    const message = Object.keys(log)[0] + ' ' + log[Object.keys(log)]\n                    return new LoggerItemComponent({}, message)\n                })\n                this.loggerBody.setItems(items)\n            }\n        }\n\n        class CheckUserDialog {\n            constructor() {\n                this.dialog = DialogBuilder.create()\n                    .setAutoRemove(true)\n                    .setTitle('CHECKUSER')\n                    .setBody(new Spinner());\n            }\n\n            initialize() {\n                window.dtCheckUserStartedListener = () => this.checkUserStartedListener();\n                window.dtCheckUserModelListener = model => this.checkUserModelListener(model);\n            }\n\n            checkUserStartedListener() {\n                const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{}');\n                if (!config.url_check_user) return;\n                this.dialog.show();\n            }\n\n            checkUserModelListener(model) {\n                const data = JSON.parse(model ?? `{\"username\": \"test\"}`);\n                this.dialog\n                    .setTitle(`? Olá, ${data.username}`)\n                    .setBody(new CheckUserBodyComponent(data));\n            }\n        }\n\n        const rootComponent = new AppComponent(document.querySelector('#root'), { background: BACKGROUND_COLOR });\n        const cardComponent = new CardComponent({ position: 'absolute', top: '15%' });\n\n        const configInput = new ConfigInputComponent();\n        cardComponent.append(configInput);\n\n        const userPassInputComponent = new UserPassInputComponent()\n        cardComponent.append(userPassInputComponent);\n\n        const cardToolsComponent = new CardToolsComponent();\n        cardComponent.append(cardToolsComponent);\n\n        const buttonAndStateContainer = new ButtonAndStateContainerComponent({ marginTop: '3rem' });\n        cardComponent.append(buttonAndStateContainer);\n\n        rootComponent.append(new LocalIPComponent());\n        rootComponent.append(new PingComponent());\n        rootComponent.append(cardComponent);\n\n        const checkUserDialog = new CheckUserDialog();\n        checkUserDialog.initialize();\n    </script>\n</body>\n\n</html>",
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29133,
        "label": "ANDROID WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_SUPPORT_BUTTON",
        "value": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n\n    <title>1429503272 - @v2raybrasil | design by @alexdsgmoura</title>\n\n    <style>\n      :root {\n        font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n        line-height: 1.5;\n        font-weight: 400;\n        font-synthesis: none;\n        text-rendering: optimizeLegibility;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        text-size-adjust: 100%;\n        -webkit-text-size-adjust: 100%;\n\n        --space-status-bar: 10px;\n        --space-android-nav-bar: 33px;\n      }\n\n      @-webkit-keyframes onePulse {\n        0% {\n          box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.5);\n        }\n        50% {\n          box-shadow: 0px 0px 4px 8px rgba(255, 255, 255, 0.1);\n        }\n        100% {\n          box-shadow: 0px 0px 4px 4px rgba(255, 255, 255, 0.5);\n        }\n      }\n\n      @keyframes onePulse {\n        0% {\n          box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.5);\n        }\n        50% {\n          box-shadow: 0px 0px 4px 8px rgba(255, 255, 255, 0.1);\n        }\n        100% {\n          box-shadow: 0px 0px 4px 4px rgba(255, 255, 255, 0.5);\n        }\n      }\n\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      html,\n      body,\n      main {\n        width: 100%;\n        height: 100%;\n      }\n\n      body {\n        background: transparent;\n      }\n\n      section.home {\n        width: 100%;\n        height: 100%;\n\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: space-between;\n\n        padding: var(--space-status-bar) 10px var(--space-android-nav-bar) 10px;\n      }\n\n      section.home header {\n        width: 100%;\n        height: auto;\n\n        display: flex;\n        flex-direction: column;\n        gap: 5px;\n      }\n\n      section.home header div.row {\n        width: auto;\n        height: auto;\n\n        display: flex;\n        gap: 10px;\n\n        margin: 0px 0px 0px auto;\n      }\n\n      section.home header div.row button {\n        width: 40px;\n        height: 40px;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        border: 1px solid #ffffff;\n        border-radius: 50%;\n\n        box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5);\n\n        background: transparent;\n      }\n\n      section.home header div.row button svg {\n        color: #000;\n      }\n\n      /* ICONE DE NOVO VIDEO */\n      section.home header div.row button:nth-child(1) {\n        border: 1px solid #00ECFF;\n\n        box-shadow: 0px 0px 10px 0px rgba(255, 171, 0, 0.5);\n      }\n\n      section.home header div.row button:nth-child(1) svg {\n        color: #00ECFF;\n      }\n\n      /* ICONE DE MUSICA */\n      section.home header div.row button:nth-child(2) {\n        border: 1px solid #FF8D00;\n\n        box-shadow: 0px 0px 10px 0px rgba(33, 150, 243, 0.5);\n      }\n\n      section.home header div.row button:nth-child(2) svg {\n        color: #FF8D00;\n      }\n\n      /* ICONE DO YOUTUBE */\n      section.home header div.row button:nth-child(3) {\n        border: 1px solid #d50000;\n\n        box-shadow: 0px 0px 10px 0px rgba(213, 0, 0, 0.5);\n      }\n\n      section.home header div.row button:nth-child(3) svg {\n        color: #d50000;\n      }\n\n      /* ICONE DE RENOVAR */\n      section.home header div.row button:nth-child(4) {\n        border: 1px solid #00FF57;\n\n        box-shadow: 0px 0px 10px 0px rgba(149, 117, 205, 0.5);\n      }\n\n      section.home header div.row button:nth-child(4) svg {\n        color: #00FF57;\n      }\n\n      /* ICONE DE ADMINISTRADOR */\n      section.home header div.row button:nth-child(5) {\n        border: 1px solid #FF00D9;\n\n        box-shadow: 0px 0px 10px 0px rgba(49, 27, 146, 0.5);\n      }\n\n      section.home header div.row button:nth-child(5) svg {\n        color: #FF00D9;\n      }\n\n      section.home section {\n        width: 100%;\n        height: auto;\n\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 1rem;\n      }\n\n      section.home section div.container-local-ip {\n        width: auto;\n        height: auto;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n\n        padding: 10px 10%;\n\n        border-radius: 25px;\n\n        background: rgba(0, 0, 0, 0.5);\n\n        transition: all 0.3s ease 0.1s;\n      }\n\n      section.home section div.container-local-ip span {\n        color: #ffffff;\n      }\n\n      section.home section div.container-tools {\n        width: 100%;\n        height: auto;\n\n        display: flex;\n        justify-content: center;\n\n        position: relative;\n      }\n\n      section.home section div.container-tools button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n\n        margin: auto 0px 0px 0px;\n        padding: 10px 8%;\n\n        border: 0;\n        border-radius: 50px;\n\n        box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.5);\n\n        color: #ffffff;\n\n        background: rgba(0, 0, 0, 0.5);\n\n        transition: all linear;\n      }\n\n      section.home section div.container-tools button svg {\n        color: #9e9e9e;\n      }\n\n      section.home section div.container-tools ul {\n        width: 90%;\n        max-width: 300px;\n        height: 55px;\n\n        display: flex;\n        align-items: center;\n        justify-content: space-around;\n        gap: 5px;\n\n        position: absolute;\n        top: -190%;\n\n        padding: 0 5px;\n\n        border-radius: 50px;\n        box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.5);\n\n        opacity: 0;\n        transform: scale(0);\n        transform-origin: bottom center;\n\n        transition: all 0.3s ease 0.1s;\n\n        background: rgba(0, 0, 0, 0.5);\n      }\n\n      section.home section div.container-tools ul li {\n        width: 40px;\n        height: 40px;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        border: 1px solid #ffffff;\n        border-radius: 50%;\n\n        box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5);\n\n        background: transparent;\n      }\n\n      @media (max-width: 320px) {\n        section.home section div.container-tools ul li {\n          width: 30px;\n          height: 30px;\n\n          display: flex;\n          justify-content: center;\n          align-items: center;\n\n          border: 1px solid #ffffff;\n          border-radius: 50%;\n\n          box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5);\n\n          background: transparent;\n        }\n\n        section.home section div.container-tools ul li svg {\n          transform: scale(0.9);\n        }\n      }\n\n      section.home section div.container-tools ul li svg {\n        color: #ffffff;\n      }\n\n      /* ICONE DO CHECKUSER */\n      section.home section div.container-tools ul li:nth-child(1) {\n        border-color: #fff176;\n\n        box-shadow: 0px 0px 10px 0px rgba(255, 241, 118, 0.5);\n      }\n\n      section.home section div.container-tools ul li:nth-child(1) svg {\n        color: #fff176;\n      }\n\n      /* ICONE DE BATERIA */\n      section.home section div.container-tools ul li:nth-child(2) {\n        border-color: #8bc34a;\n\n        box-shadow: 0px 0px 10px 0px rgba(139, 195, 74, 0.5);\n      }\n\n      section.home section div.container-tools ul li:nth-child(2) svg {\n        color: #8bc34a;\n      }\n\n      /* ICONE DE APN */\n      section.home section div.container-tools ul li:nth-child(3) {\n        border-color: #F2FF00;\n\n        box-shadow: 0px 0px 10px 0px rgba(148, 143, 168, 0.5);\n      }\n\n      section.home section div.container-tools ul li:nth-child(3) svg {\n        color: #F2FF00;\n      }\n\n      /* ICONE DE LIMPAR DADOS */\n      section.home section div.container-tools ul li:nth-child(4) {\n        border-color: #847ea7;\n\n        box-shadow: 0px 0px 10px 0px rgba(132, 126, 167, 0.5);\n      }\n\n      section.home section div.container-tools ul li:nth-child(4) svg {\n        color: #847ea7;\n      }\n\n      /* ICONE DE SPEEDTEST */\n      section.home section div.container-tools ul li:nth-child(5) {\n        border-color: #1a237e;\n        border-radius: 50%;\n\n        box-shadow: 0px 0px 10px 0px rgba(26, 35, 126, 0.5);\n      }\n\n      section.home section div.container-tools ul li:nth-child(5) svg {\n        color: #1a237e;\n      }\n\n      /* ICONE DE HOTSPOT */\n      section.home section div.container-tools ul li:nth-child(6) {\n        border-color: #00FF3F;\n        border-radius: 50%;\n\n        box-shadow: 0px 0px 10px 0px rgba(26, 35, 126, 0.5);\n      }\n\n      section.home section div.container-tools ul li:nth-child(6) svg {\n        color: #FFFFFF;\n      }\n\n      section.home section div.container-tools.active button {\n        -webkit-animation: onePulse 0.6s forwards linear;\n        animation: onePulse 0.6s forwards linear;\n      }\n\n      section.home section div.container-tools.active ul {\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      .hidden {\n        opacity: 0;\n        visibility: hidden;\n      }\n\n      .display-none {\n        display: none;\n      }\n    </style>\n  </head>\n\n  <body>\n    <main>\n      <section class=\"home\">\n        <header>\n          <div class=\"row\">\n            <button type=\"button\" title=\"Vídeo novo\" id=\"new-video\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                class=\"bi bi-play-fill\"\n                viewBox=\"0 0 16 16\"\n              >\n                <path\n                  d=\"m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z\"\n                />\n              </svg>\n            </button>\n\n            <button type=\"button\" title=\"musica\" id=\"music\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                class=\"bi bi-music-note-beamed\"\n                viewBox=\"0 0 16 16\"\n              >\n                <path\n                  d=\"M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z\"\n                />\n                <path fill-rule=\"evenodd\" d=\"M14 11V2h1v9h-1zM6 3v10H5V3h1z\" />\n                <path d=\"M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z\" />\n              </svg>\n            </button>\n\n            <button type=\"button\" title=\"Youtube\" id=\"youtube\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                class=\"bi bi-youtube\"\n                viewBox=\"0 0 16 16\"\n              >\n                <path\n                  d=\"M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z\"\n                />\n              </svg>\n            </button>\n\n            <button type=\"button\" title=\"renovação\" id=\"renew\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                class=\"bi bi-bag-check-fill\"\n                viewBox=\"0 0 16 16\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0zm-.646 5.354a.5.5 0 0 0-.708-.708L7.5 10.793 6.354 9.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z\"\n                />\n              </svg>\n            </button>\n\n            <button type=\"button\" title=\"admin\" id=\"admin-acess\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                class=\"bi bi-person-fill-up\"\n                viewBox=\"0 0 16 16\"\n              >\n                <path\n                  d=\"M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.354-5.854 1.5 1.5a.5.5 0 0 1-.708.708L13 11.707V14.5a.5.5 0 0 1-1 0v-2.793l-.646.647a.5.5 0 0 1-.708-.708l1.5-1.5a.5.5 0 0 1 .708 0ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\n                />\n                <path\n                  d=\"M2 13c0 1 1 1 1 1h5.256A4.493 4.493 0 0 1 8 12.5a4.49 4.49 0 0 1 1.544-3.393C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4Z\"\n                />\n              </svg>\n            </button>\n          </div>\n        </header>\n\n        <section>\n          <div class=\"container-local-ip\">\n            <span>IP: 0.0.0.0</span>\n          </div>\n\n          <div class=\"container-tools\">\n            <button type=\"button\" title=\"ferramentas\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                class=\"bi bi-nut-fill\"\n                viewBox=\"0 0 16 16\"\n              >\n                <path\n                  d=\"M4.58 1a1 1 0 0 0-.868.504l-3.428 6a1 1 0 0 0 0 .992l3.428 6A1 1 0 0 0 4.58 15h6.84a1 1 0 0 0 .868-.504l3.429-6a1 1 0 0 0 0-.992l-3.429-6A1 1 0 0 0 11.42 1H4.58zm5.018 9.696a3 3 0 1 1-3-5.196 3 3 0 0 1 3 5.196z\"\n                />\n              </svg>\n\n              <span>Ferramentas</span>\n            </button>\n\n            <ul>              \n              <li id=\"checkuser\" title=\"Perfil\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"16\"\n                  height=\"16\"\n                  fill=\"currentColor\"\n                  class=\"bi bi-person-fill\"\n                  viewBox=\"0 0 16 16\"\n                >\n                  <path\n                    d=\"M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z\"\n                  />\n                </svg>\n              </li>\n\n              <li id=\"battery\" title=\"Bateria\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"16\"\n                  height=\"16\"\n                  fill=\"currentColor\"\n                  class=\"bi bi-battery-half\"\n                  viewBox=\"0 0 16 16\"\n                >\n                  <path d=\"M2 6h5v4H2V6z\" />\n                  <path\n                    d=\"M2 4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2zm10 1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h10zm4 3a1.5 1.5 0 0 1-1.5 1.5v-3A1.5 1.5 0 0 1 16 8z\"\n                  />\n                </svg>\n              </li>\n\n              <li id=\"apn\" title=\"Configuração de nome de ponto de acesso (APN)\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"16\"\n                  height=\"16\"\n                  fill=\"currentColor\"\n                  class=\"bi bi-wrench\"\n                  viewBox=\"0 0 16 16\"\n                >\n                  <path\n                    d=\"M.102 2.223A3.004 3.004 0 0 0 3.78 5.897l6.341 6.252A3.003 3.003 0 0 0 13 16a3 3 0 1 0-.851-5.878L5.897 3.781A3.004 3.004 0 0 0 2.223.1l2.141 2.142L4 4l-1.757.364L.102 2.223zm13.37 9.019.528.026.287.445.445.287.026.529L15 13l-.242.471-.026.529-.445.287-.287.445-.529.026L13 15l-.471-.242-.529-.026-.287-.445-.445-.287-.026-.529L11 13l.242-.471.026-.529.445-.287.287-.445.529-.026L13 11l.471.242z\"\n                  />\n                </svg>\n              </li>\n\n              <li id=\"clean-data-app\" title=\"Limpar dados do app\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"16\"\n                  height=\"16\"\n                  fill=\"currentColor\"\n                  class=\"bi bi-trash-fill\"\n                  viewBox=\"0 0 16 16\"\n                >\n                  <path\n                    d=\"M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z\"\n                  />\n                </svg>\n              </li>\n\n              <li id=\"speedtest\" title=\"teste de velocidade de internet\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"16\"\n                  height=\"16\"\n                  fill=\"currentColor\"\n                  class=\"bi bi-speedometer2\"\n                  viewBox=\"0 0 16 16\"\n                >\n                  <path\n                    d=\"M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z\"\n                  />\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z\"\n                  />\n                </svg>\n              </li>\n\n              <li id=\"hotspot\" title=\"Hotspot\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" id=\"hotspot-on\" class=\"bi bi-wifi\" viewBox=\"0 0 16 16\">\n                  <path d=\"M15.384 6.115a.485.485 0 0 0-.047-.736A12.444 12.444 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c2.507 0 4.827.802 6.716 2.164.205.148.49.13.668-.049z\"/>\n                  <path d=\"M13.229 8.271a.482.482 0 0 0-.063-.745A9.455 9.455 0 0 0 8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065A8.46 8.46 0 0 1 8 7a8.46 8.46 0 0 1 4.576 1.336c.206.132.48.108.653-.065zm-2.183 2.183c.226-.226.185-.605-.1-.75A6.473 6.473 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.407.19.611.09A5.478 5.478 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.61-.091l.016-.015zM9.06 12.44c.196-.196.198-.52-.04-.66A1.99 1.99 0 0 0 8 11.5a1.99 1.99 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .707 0l.707-.707z\"/>\n                </svg>\n\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" id=\"hotspot-off\" class=\"bi bi-wifi-off display-none\" viewBox=\"0 0 16 16\">\n                  <path d=\"M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z\"/>\n                </svg>\n              </li>\n            </ul>\n          </div>\n        </section>\n      </section>\n    </main>\n\n    <!-- FUNÇÕES DO APP -->\n    <script>\n      const appStatusBar = () => DtGetStatusBarHeight.execute()\n      const appNavBar = () => DtGetNavigationBarHeight.execute()\n\n      const appCarrier = () => Android.getNetworkName()\n      const appLocalIp = () => Android.getLocalIP()\n\n      const appBattery = () => DtIgnoreBatteryOptimizations.execute()\n      const appApn = () => DtStartApnActivity.execute()\n      const appLink = (value) => DtStartWebViewActivity.execute(value)\n      const appClean = () => DtCleanApp.execute()\n      const appCheckUser = () => DtStartCheckUser.execute()\n\n      const appGetStatusHotspot = () => DtGetStatusHotSpotService.execute()\n      const appStartHotspot = () => DtStartHotSpotService.execute()\n      const appStopHotspot = () => DtStopHotSpotService.execute()\n    </script>\n\n    <!-- DOM WRAPPER -->\n    <script>\n      const Dom = (selector) => {\n        const _elements = document.querySelectorAll(selector)\n\n        const wrapper = {\n          on(listeners) {\n            for (const [event, listener] of Object.entries(listeners)) {\n              _elements.forEach((element) => {\n                element.addEventListener(event, listener)\n              })\n            }\n\n            return wrapper\n          },\n          toggleClass: (token, force) => {\n            _elements.forEach((element) => {\n              element.classList.toggle(token, force)\n            })\n\n            return wrapper\n          },\n          html(value) {\n            _elements.forEach((element) => (element.innerHTML = value))\n            return wrapper\n          },\n        }\n\n        return wrapper\n      }\n    </script>\n\n    <!-- VÁRIAVEIS -->\n    <script>\n      const video = Dom('#new-video')\n      const music = Dom('#music')\n      const youtube = Dom('#youtube')\n      const renew = Dom('#renew')\n      const adminAcess = Dom('#admin-acess')\n\n      const containerLocalIp = Dom('section.home section div.container-local-ip')\n      const localIp = Dom('section.home section div.container-local-ip span')\n\n      const containerTools = Dom('section.home section div.container-tools')\n      const toolsButton = Dom('section.home section div.container-tools button')\n      const tools = Dom('section.home section div.container-tools ul')\n\n      const hotspot = Dom('#hotspot')\n      const checkuser = Dom('#checkuser')\n      const battery = Dom('#battery')\n      const apn = Dom('#apn')\n      const CleanDataApp = Dom('#clean-data-app')\n      const speedtest = Dom('#speedtest')\n\n      const hotspotIconOn = Dom('#hotspot-on')\n      const hotspotIconOff = Dom('#hotspot-off')\n    </script>\n\n    <!-- FUNÇÕES -->\n    <script>\n      document.documentElement.style.setProperty('--space-status-bar', `${appStatusBar() + 10}px`)\n\n      document.documentElement.style.setProperty('--space-android-nav-bar', `${appNavBar() + 10}px`)\n\n      const toggleTools = () => {\n        containerLocalIp.toggleClass('hidden')\n        containerTools.toggleClass('active')\n      }\n\n      const carrierNameAndLocalIp = () => {\n        setInterval(() => {\n          const carrierName = appCarrier()\n          const carrierLocalIp = appLocalIp()\n\n          if (!carrierName || !carrierLocalIp) {\n            localIp.html('IP: 0.0.0.0')\n          } else {\n            localIp.html(`${carrierName}: ${carrierLocalIp}`)\n          }\n        }, 500)\n      }\n\n      carrierNameAndLocalIp()\n\n      const startHotspot = () => {\n        appStartHotspot()\n\n        hotspotIconOff.toggleClass('display-none')\n        hotspotIconOn.toggleClass('display-none')\n      }\n\n      const stopHotspot = () => {\n        appStopHotspot()\n\n        hotspotIconOn.toggleClass('display-none')\n        hotspotIconOff.toggleClass('display-none')\n      }\n\n      const toggleHotspot = () => {\n        appGetStatusHotspot() === 'STOPPED' ? startHotspot() : stopHotspot()\n      }\n    </script>\n\n    <!-- AÇÕES -->\n    <script>\n      video.on({ click: () => appLink('https://radiosaovivo.net') })\n      music.on({ click: () => appLink('https://m.soundcloud.com') })\n      youtube.on({ click: () => appLink('https://www.cxtv.com.br') })\n      renew.on({ click: () => appLink('https://painel.v2raybrasil.com.br/renovar.php') })\n      adminAcess.on({ click: () => appLink('https://painel.v2raybrasil.com.br/criarteste.php?token=554306427835') })\n\n      toolsButton.on({ click: () => toggleTools() })\n\n      hotspot.on({click: () => toggleHotspot()})\n      checkuser.on({ click: () => appCheckUser() })\n      battery.on({ click: () => appBattery() })\n      apn.on({ click: () => appApn() })\n      CleanDataApp.on({ click: () => appClean() })\n      speedtest.on({ click: () => appLink('https://fast.com') })\n    </script>\n  </body>\n</html>\n",
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    },
    {
        "id": 29134,
        "label": "PAGINA WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_WEB_VIEW",
        "value": "<html>\n    <script>\n        window.location.href = 'https://m.soundcloud.com/';\n    </script>\n</html>",
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "6ad8460c-cb7b-4be2-8393-c06ce62fb0cf"
    }
]