[
    {
        "id": 8739,
        "label": "Nome do app",
        "name": "APP_NAME",
        "value": "PICAPAUTEMAS",
        "type": "STRING",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8740,
        "label": "Logo do app",
        "name": "APP_LOGO",
        "value": "https://i.ibb.co/h2z1xZW/1699837053384.gif",
        "type": "IMAGE",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8741,
        "label": "Imagem de fundo",
        "name": "APP_BACKGROUND_IMAGE",
        "value": "https://i.ibb.co/WBcZNmM/1006194-adapted-1080x2340.jpg",
        "type": "IMAGE",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8742,
        "label": "Tipo do fundo do app",
        "name": "APP_BACKGROUND_TYPE",
        "value": {
            "options": [
                {
                    "label": "Imagem",
                    "value": "IMAGE"
                },
                {
                    "label": "Cor",
                    "value": "COLOR"
                }
            ],
            "selected": "COLOR"
        },
        "type": "SELECT",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8743,
        "label": "Cor de fundo",
        "name": "APP_BACKGROUND_COLOR",
        "value": "#080e16c7",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8744,
        "label": "Cor do card inicial",
        "name": "APP_CARD_COLOR",
        "value": "#1d242e73",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8745,
        "label": "Raio do card inicial",
        "name": "APP_CARD_RADIUS",
        "value": 20,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8746,
        "label": "Cor do card de status",
        "name": "APP_CARD_STATUS_COLOR",
        "value": "#1d242e73",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8747,
        "label": "Raio do card de status",
        "name": "APP_CARD_STATUS_RADIUS",
        "value": 25,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8748,
        "label": "Cor do card de configurações",
        "name": "APP_CARD_CONFIG_COLOR",
        "value": "#0E171EC9",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8749,
        "label": "Cor do fundo dos dialogs",
        "name": "APP_DIALOG_BACKGROUND_COLOR",
        "value": "#050C5AE4",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 11633,
        "label": "Cor do fundo do dialog de log",
        "name": "APP_DIALOG_LOGGER_COLOR",
        "value": "#080e16c7",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8750,
        "label": "Cor das bordas",
        "name": "APP_BORDER_COLOR",
        "value": "#1d242e73",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8751,
        "label": "Cor dos inputs",
        "name": "APP_INPUT_COLOR",
        "value": "#1d242e73",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8752,
        "label": "Raio dos inputs",
        "name": "APP_INPUT_RADIUS",
        "value": 25,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8753,
        "label": "Cor dos textos",
        "name": "APP_TEXT_COLOR",
        "value": "#FFFFFFFF",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8754,
        "label": "Cor dos botões",
        "name": "APP_BUTTON_COLOR",
        "value": "#1d242e73",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8755,
        "label": "Raio dos botões",
        "name": "APP_BUTTON_RADIUS",
        "value": 25,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8756,
        "label": "Cor dos icones",
        "name": "APP_ICON_COLOR",
        "value": "#FFFFFFFF",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8757,
        "label": "Exibir modo de conexão",
        "name": "APP_SHOW_CONNECTION_MODE",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 22651,
        "label": "Atualizar automaticamente as configurações ao lançar uma atualização.",
        "name": "APP_CONFIG_AUTO_UPDATE",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8758,
        "label": "Iniciar o app automaticamente ao reiniciar o dispositivo",
        "name": "APP_AUTO_START",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8759,
        "label": "Usar limiter de conexão",
        "name": "APP_CONNECTION_LIMITER",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 12404,
        "label": "Usar botão de atualizações",
        "name": "APP_BTN_UPDATE_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 12405,
        "label": "Usar botão de registros",
        "name": "APP_BTN_LOGGER_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 12406,
        "label": "Usar botão de pagina webview",
        "name": "APP_BTN_PAGE_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 13825,
        "label": "Ativar dialog de erros",
        "name": "APP_DIALOG_ERROR_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 13826,
        "label": "Ativar dialog de checkuser",
        "name": "APP_CHECKUSER_DIALOG_ENABLED",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 13827,
        "label": "Ativar toast de sucesso",
        "name": "APP_SUCCESS_TOAST_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 13828,
        "label": "Ativar toast de erro",
        "name": "APP_ERROR_TOAST_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 18285,
        "label": "Usar layout webview",
        "name": "APP_LAYOUT_WEBVIEW_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8760,
        "label": "Mensagem",
        "name": "APP_MESSAGE",
        "value": "BOM APROVEITO IRUUUUUULLLLLLLLL!",
        "type": "TEXT",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8761,
        "label": "URL de atualização do aplicativo",
        "name": "APP_UPDATE_URL",
        "value": null,
        "type": "URL",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8762,
        "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": "INFO"
        },
        "type": "SELECT",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 18286,
        "label": "LAYOUT WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_LAYOUT_WEBVIEW",
        "value": "<!DOCTYPE html>\n<html lang=\"pt-BR\">\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\n    <title>PicaPau</title>\n\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css\">\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n        integrity=\"sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ\" crossorigin=\"anonymous\">\n    <script type=\"text/javascript\"\n        src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js\"\n        integrity=\"sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe\"\n        crossorigin=\"anonymous\"></script>\n    <link rel='stylesheet'\n        href='https://cdn-uicons.flaticon.com/2.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css'>\n\n    <style>\n        @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');\n\n        :root {\n/*------------------------------------------------------------------------EDITE SOMENTE AQUI INICIAL-----------------------------------------------------------------------------*/\n\n            --background-img: url(https://i.ibb.co/4FdBxhq/960402-adapted-1080x2340.jpg);\n            /* URL da Fundo de vocês... pode ser Gif tambem */\n            --logo-img-url: url(https://i.ibb.co/jbCDXXC/coollogo-com-27815824.png);\n            /* URL da Logo de vocês... pode ser Gif tambem... recomendo acima de 256px por 256px no tamanho preferencia sempre padrão quadrado  */\n\n\n            --blur-amount: 5px;\n            /* Valor padrão para o desfoque do vidro */\n\n            --cor-gradiente-nav-inicial: #f76c6c21;\n            /* Cor inicial do gradiente */\n            --cor-gradiente-nav-final: #f76c6c00;\n            /* Cor final do gradiente */\n            --cor-gradiente-btstart-incial: #f76c6c21;\n            /* Cor Botão Start inicial do gradiente */\n            --cor-gradiente-btstart-final: #f76c6c00;\n            /* Cor Botão Start final do gradiente */\n/*------------------------------------------------------------------------EDITE SOMENTE AQUI FINALLLL-----------------------------------------------------------------------------*/\n\n\n            --input-border-radius: 5px;\n            --input-background-color: #0a091a55;\n\n            --card-border-radius: 5px;\n            --card-background-color: #0b092868;\n\n            --btn-background-color: #0a091a55;\n            --btn-border-radius: 5px;\n\n            --modal-background-color: #0b092868;\n\n            --text-color: #ffffff;\n            --icon-color: #FFFFFF;\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            font-family: 'Roboto', sans-serif;\n        }\n\n        body {\n            height: 100vh;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            background-repeat: no-repeat;\n            background-size: cover;\n        }\n\n        .container {\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            max-width: 465px;\n            background: var(--background-img);\n            background-position: center;\n            background-repeat: no-repeat;\n            background-size: cover;\n        }\n\n        .logo {\n            width: 100%;\n            display: block;\n            margin-top: -89px;\n            margin-bottom: -65px;\n            margin-left: auto;\n            margin-right: auto;\n            content: var(--logo-img-url);\n        }\n\n\n        .card {\n            backdrop-filter: blur(var(--blur-amount));\n            background: #0808083f;\n            border-radius: 20px;\n            border: 1px solid #1e1e1e !important;\n            box-shadow: -8px 12px 20px 0 rgb(13 15 18 / 63%) !important;\n            padding: 15px !important;\n            max-width: 450px;\n            height: auto;\n            position: relative;\n        }\n\n        .btn-dark {\n            border: none;\n            background: linear-gradient(var(--cor-gradiente-btstart-incial), var(--cor-gradiente-btstart-final));\n            border-radius: 15px;\n        }\n\n        .modal-content {\n            background-color: transparent;\n            backdrop-filter: blur(25px);\n        }\n\n        .tool {\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n        }\n\n        .tool-bt {\n            background: linear-gradient(to top right, #ff00003f, #1212123f);\n            border-radius: 20px;\n            color: #ffffff !important;\n            height: 35px;\n            width: 100%;\n            border: var(--btn-border);\n        }\n\n        .input-group,\n        .form-control,\n        .input-group-text {\n            background: #0808083f;\n            color: var(--icon-color);\n            border: none;\n            border-radius: 15px;\n            outline: none;\n        }\n\n        .form-control::placeholder {\n            color: var(--text-color);\n        }\n\n        .form-control:focus {\n            color: var(--text-color);\n            outline: none;\n            box-shadow: none;\n        }\n\n        .input-group-text {\n            padding-right: 0;\n        }\n\n\n        .fs-5 {\n            font-size: 1rem !important;\n        }\n\n        nav {\n\n            background: linear-gradient(var(--cor-gradiente-nav-inicial), var(--cor-gradiente-nav-final));\n            border-radius: 20px;\n            font-size: 0;\n            width: 100%;\n            max-width: 450px;\n            height: auto;\n            position: sticky;\n            margin-top: 20px;\n            margin-bottom: 10px;\n            display: flex;\n            justify-content: space-around;\n            align-items: center;\n        }\n\n        nav span {\n            line-height: 45px;\n            height: 100%;\n            position: relative;\n            z-index: 1;\n            text-decoration: none;\n            text-align: center;\n            color: white !important;\n            cursor: alias;\n        }\n\n        nav span svg {\n            fill: rgb(255, 255, 255);\n        }\n\n        nav .animation {\n            position: absolute;\n            height: 100%;\n            top: 0;\n            z-index: 0;\n            transition: all .5s ease 0s;\n            border-radius: 8px;\n        }\n\n        a:nth-child(1) {\n            width: 30%;\n        }\n\n        a:nth-child(2) {\n            width: 30%;\n        }\n\n        a:nth-child(3) {\n            width: 40%;\n        }\n\n        nav .start-home,\n        a:nth-child(1):hover~.animation {\n            width: 30%;\n            left: 0;\n            background-color: #1212123f;\n            border-radius: 20px;\n        }\n\n        nav .start-about,\n        a:nth-child(2):hover~.animation {\n            width: 30%;\n            ;\n            left: 30%;\n            background-color: #1212123f;\n            border-radius: 20px;\n        }\n\n        nav .start-blog,\n        a:nth-child(3):hover~.animation {\n            width: 40%;\n            left: 60%;\n            background-color: #1212123f;\n            border-radius: 20px;\n        }\n\n        body {\n            font-size: 12px;\n            font-family: sans-serif;\n            background: color #1212123f;\n        }\n\n        @media (min-width: 768px) {\n\n            .container,\n            .container-md,\n            .container-sm {\n                max-width: 100%;\n            }\n        }\n\n        .rede {\n            color: #ff0000;\n        }\n\n        .iplocal {\n            color: #ffffff;\n        }\n\n        .containerlocal {\n            background: #0808083f;\n            border-radius: 20px;\n            border: 1px solid #1e1e1e !important;\n            padding: 15px !important;\n            width: 95%;\n            max-width: 450px;\n            height: initial;\n            position: absolute;\n            margin-top: 700px;\n            margin-bottom: -66px;\n        }\n\n\n        .hidden {\n            display: none;\n        }\n    </style>\n</head>\n\n<body>\n    <div class=\"containerlocal\">\n        <span class=\"font-semibold text-xs mr-2\"\n            style=\"color: #ffffff;\"\">📢\tIP Local da sua operadora:</span><span class=\" rede font-semibold text-xs mr-2\"\n            id=\"name\">REDE</span> <span class=\"iplocal font-semibold text-xs\" id=\"ip\">127.0.0.1</span>\n    </div>\n\n    <div class=\"container\">\n        <div class=\"card border-0 p-2 shadow mb-3 w-100\">\n\n            <img class=\"logo\">\n\n            <!-- Atualize o atributo src usando JavaScript -->\n            <script>\n                document.documentElement.style.setProperty('--logo-img-url',);\n            </script>\n\n\n            <div class=\"input-group mb-2 shadow\" id=\"config-area\">\n                <input class=\"form-control\" type=\"text\" placeholder=\"CONFIGURAÇÃO\" readonly title=\"configurações\"\n                    id=\"config\" style=\"background-color: #0808083f;\" />\n                <span class=\"input-group-text me-2\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\"\n                        class=\"bi bi:bar-chart\" viewBox=\"0 0 16 16\">\n                        <path\n                            d=\"M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z\" />\n                    </svg>\n                </span>\n            </div>\n            <div class=\"input-group input mb-2 shadow\">\n                <span class=\"input-group-text\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\"\n                        class=\"bi bi:file-person\" viewBox=\"0 0 16 16\">\n                        <path\n                            d=\"M12 1a1 1 0 0 1 1 1v10.755S12 11 8 11s-5 1.755-5 1.755V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z\" />\n                        <path d=\"M8 10a3 3 0 1 0 0-6a3 3 0 0 0 0 6z\" />\n                        </g>\n                    </svg>\n                </span>\n                <input class=\"form-control\" type=\"text\" placeholder=\"usuario\" id=\"username\"\n                    style=\"background-color: #0808083f;\" />\n            </div>\n            <div class=\"input-group input mb-2 shadow\">\n                <span class=\"input-group-text\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\"\n                        class=\"bi bi:file-earmark-lock\" viewBox=\"0 0 16 16\">\n                        <path\n                            d=\"M10 7v1.076c.54.166 1 .597 1 1.224v2.4c0 .816-.781 1.3-1.5 1.3h-3c-.719 0-1.5-.484-1.5-1.3V9.3c0-.627.46-1.058 1-1.224V7a2 2 0 1 1 4 0zM7 7v1h2V7a1 1 0 0 0-2 0zM6 9.3v2.4c0 .042.02.107.105.175A.637.637 0 0 0 6.5 12h3a.64.64 0 0 0 .395-.125c.085-.068.105-.133.105-.175V9.3c0-.042-.02-.107-.105-.175A.637.637 0 0 0 9.5 9h-3a.637.637 0 0 0-.395.125C6.02 9.193 6 9.258 6 9.3z\" />\n                        <path\n                            d=\"M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z\" />\n                        </g>\n                    </svg>\n                </span>\n                <input class=\"form-control\" type=\"password\" placeholder=\"senha\" id=\"password\"\n                    style=\"background-color: #0808083f;\" />\n                <span class=\"input-group-text me-2\"\n                    onclick=\"password.type==`text`?password.type = `password`:password.type = `text`\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-eye\"\n                        viewBox=\"0 0 16 16\">\n                        <path\n                            d=\"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                        <path\n                            d=\"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                    </svg>\n                </span>\n            </div>\n            <div class=\"input-group input mb-2 shadow\">\n                <span class=\"input-group-text\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" class=\"bi bi-key\"\n                        viewBox=\"0 0 16 16\">\n                        <path\n                            d=\"M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z\" />\n                        <path d=\"M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" />\n                    </svg>\n                </span>\n                <input class=\"form-control\" type=\"text\" placeholder=\"V2ray UUID\" id=\"uuid\"\n                    style=\"background: #0808083f;\" />\n                <span class=\"input-group-text me-2\"\n                    onclick=\"uuid.type==`text`?uuid.type = `password`:uuid.type = `text`\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-eye\"\n                        viewBox=\"0 0 16 16\">\n                        <path\n                            d=\"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                        <path\n                            d=\"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                    </svg>\n                </span>\n            </div>\n            <button class=\"btn btn-dark w-100 shadow\" id=\"start-stop\">INICIAR</button>\n            <nav>\n\n                <span id=\"sync\" onclick=\"DtStartAppUpdate.execute()\" class=\"fi fi-rr-refresh\">\n                    <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" id=\"Outline\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n                        <path\n                            d=\"M12,2a10.032,10.032,0,0,1,7.122,3H16a1,1,0,0,0-1,1h0a1,1,0,0,0,1,1h4.143A1.858,1.858,0,0,0,22,5.143V1a1,1,0,0,0-1-1h0a1,1,0,0,0-1,1V3.078A11.981,11.981,0,0,0,.05,10.9a1.007,1.007,0,0,0,1,1.1h0a.982.982,0,0,0,.989-.878A10.014,10.014,0,0,1,12,2Z\" />\n                        <path\n                            d=\"M22.951,12a.982.982,0,0,0-.989.878A9.986,9.986,0,0,1,4.878,19H8a1,1,0,0,0,1-1H9a1,1,0,0,0-1-1H3.857A1.856,1.856,0,0,0,2,18.857V23a1,1,0,0,0,1,1H3a1,1,0,0,0,1-1V20.922A11.981,11.981,0,0,0,23.95,13.1a1.007,1.007,0,0,0-1-1.1Z\" />\n                    </svg>\n                </span>\n\n\n\n                <span id=\"logger\" class=\"fi fi-rs-clipboard-list\">\n                    <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" id=\"Outline\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n\n                        <path\n                            d=\"M11,12h6v2h-6v-2ZM21,2V21c0,1.654-1.346,3-3,3H6c-1.654,0-3-1.346-3-3V2h5.171c.413-1.164,1.525-2,2.829-2h2c1.304,0,2.416,.836,2.829,2h5.171Zm-2,2h-5v-1c0-.552-.449-1-1-1h-2c-.551,0-1,.448-1,1v1H5V21c0,.552,.449,1,1,1h12c.551,0,1-.448,1-1V4Zm-8,6h6v-2h-6v2Zm0,8h6v-2h-6v2ZM7,10h2v-2h-2v2Zm0,4h2v-2h-2v2Zm0,4h2v-2h-2v2Z\" />\n                    </svg>\n                </span>\n\n                <span aria-hidden=\"true\" onclick=\"ToolsModal.show()\" class=\"fi fi-rr-settings\">\n                    <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n                    <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" id=\"Outline\" viewBox=\"0 0 24 24\"\n                        width=\"24\" height=\"24\">\n                        <path d=\"M12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z\" />\n                        <path\n                            d=\"M21.294,13.9l-.444-.256a9.1,9.1,0,0,0,0-3.29l.444-.256a3,3,0,1,0-3-5.2l-.445.257A8.977,8.977,0,0,0,15,3.513V3A3,3,0,0,0,9,3v.513A8.977,8.977,0,0,0,6.152,5.159L5.705,4.9a3,3,0,0,0-3,5.2l.444.256a9.1,9.1,0,0,0,0,3.29l-.444.256a3,3,0,1,0,3,5.2l.445-.257A8.977,8.977,0,0,0,9,20.487V21a3,3,0,0,0,6,0v-.513a8.977,8.977,0,0,0,2.848-1.646l.447.258a3,3,0,0,0,3-5.2Zm-2.548-3.776a7.048,7.048,0,0,1,0,3.75,1,1,0,0,0,.464,1.133l1.084.626a1,1,0,0,1-1,1.733l-1.086-.628a1,1,0,0,0-1.215.165,6.984,6.984,0,0,1-3.243,1.875,1,1,0,0,0-.751.969V21a1,1,0,0,1-2,0V19.748a1,1,0,0,0-.751-.969A6.984,6.984,0,0,1,7.006,16.9a1,1,0,0,0-1.215-.165l-1.084.627a1,1,0,1,1-1-1.732l1.084-.626a1,1,0,0,0,.464-1.133,7.048,7.048,0,0,1,0-3.75A1,1,0,0,0,4.79,8.992L3.706,8.366a1,1,0,0,1,1-1.733l1.086.628A1,1,0,0,0,7.006,7.1a6.984,6.984,0,0,1,3.243-1.875A1,1,0,0,0,11,4.252V3a1,1,0,0,1,2,0V4.252a1,1,0,0,0,.751.969A6.984,6.984,0,0,1,16.994,7.1a1,1,0,0,0,1.215.165l1.084-.627a1,1,0,1,1,1,1.732l-1.084.626A1,1,0,0,0,18.746,10.125Z\" />\n                    </svg>\n                </span>\n\n            </nav>\n        </div>\n\n        <div class=\"card my-3 w-100 text-center border-0 p-2 shadow text-light fs-5 text-uppercase fw-bold\" id=\"state\"\n            style=\"padding: 5px !important; font-size: 15px !important;\">\n        </div>\n        <div class=\"modal fade\" id=\"checkUserModal\">\n            <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n                <div class=\"modal-content rounded-3 shadow\">\n                    <div class=\"modal-header border-bottom-0 pb-0\">\n                        <h1 class=\"modal-title fs-5 chk-title text-light\"></h1>\n                        <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\"\n                            aria-label=\"Close\"></button>\n                    </div>\n                    <div class=\"modal-body text-center\">\n                        <p class=\"fs-5 mb-0 chk-message text-light\"></p>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"modal fade\" id=\"errorModal\">\n            <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n                <div class=\"modal-content rounded-3 shadow\">\n                    <div class=\"modal-header border-bottom-0 pb-0\">\n                        <h1 class=\"modal-title fs-5 err-title text-light\"></h1>\n                        <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\"\n                            aria-label=\"Close\"></button>\n                    </div>\n                    <div class=\"modal-body text-center\">\n                        <p class=\"fs-5 mb-0 err-message text-light\"></p>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"modal fade\" id=\"loggerModal\">\n            <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n                <div class=\"modal-content rounded-3 shadow\">\n                    <div class=\"modal-body p-1 text-center\">\n                        <ul class=\"list-group bg-transparent overflow-y-auto logger-content\" style=\"max-height: 600px;\">\n                        </ul>\n                    </div>\n                    <div class=\"modal-footer flex-nowrap p-0\">\n                        <button type=\"button\" class=\"btn btn-lg btn-dark text-light w-100 clear-logger\">LIMPAR</button>\n                        <button type=\"button\" class=\"btn btn-lg btn-dark text-light w-100\"\n                            data-bs-dismiss=\"modal\">FECHAR</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"tool webm modal fade\" index=\"-1\" id=\"ToolsModal\">\n            <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n                <div class=\"modal-content\">\n                    <div class=\"tool modal-header\">\n                        <h5 class=\"modal-title\" style=\"color:#ffffff;\">Configurações do aplicativo</h5>\n                    </div>\n                    <div class=\"modal-body\">\n                        <button class=\"tool-bt rounded-2xl text-white\" onclick=\"DtStartApnActivity.execute()\"><i\n                                class=\"info2 bi bi-wifi mr-2\"></i>Alterar protocolo de APN</button>\n                    </div>\n                    <div class=\"modal-body\">\n                        <button class=\"tool-bt rounded-2xl text-white\"\n                            onclick=\"DtIgnoreBatteryOptimizations.execute()\"><i\n                                class=\"info2 bi bi-battery-full mr-2\"></i>Otimizar Bateria</button>\n                    </div>\n                    <div class=\"modal-body\">\n                        <button class=\"tool-bt rounded-2xl text-white\" onclick=\"DtCleanApp.execute()\"><i\n                                class=\"info2 bi bi-trash3 mr-2\"></i>Limpar cachê e dados</button>\n                    </div>\n\n                    <div class=\"tool modal-footer\">\n                        <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\"\n                            style=\"background-color: var(--btn-modal);\">FECHAR</button>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"modal fade\" id=\"configModal\">\n            <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n                <div class=\"modal-content rounded-3 shadow\">\n                    <div class=\"modal-header border-bottom-0 pb-0\">\n                        <h1 class=\"modal-title fs-5 text-white\">CONFIGURAÇÕES</h1>\n                        <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\"\n                            aria-label=\"Close\"></button>\n                    </div>\n                    <div class=\"modal-body p-1 text-center\">\n                        <ul class=\"list-group bg-transparent overflow-y-auto config-body\" style=\"max-height: 600px;\">\n                            <li class=\"list-group-item bg-transparent text-white border-0\">\n                                <p>CATEGORIA</p>\n                                <ul class=\"list-group bg-transparent overflow-y-auto text-start\">\n                                    <li\n                                        class=\"list-group-item d-flex bg-transparent text-white border-0 border-bottom rounded-0\">\n                                        <img src=\"https://cdn-icons-png.flaticon.com/512/3686/3686811.png\" width=\"40\"\n                                            height=\"40\">\n                                        <div class=\"d-flex flex-column ms-2 w-100\">\n                                            <span>CONFIG 01</span>\n                                            <span>DESC 01</span>\n                                        </div>\n                                        <div class=\"d-flex flex-column ms-2 w-100\">\n                                            <span class=\"text-end\">CONFIG_MODE</span>\n                                        </div>\n                                    </li>\n                                </ul>\n                            </li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"modal fade\" id=\"RenovarModal\">\n            <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n                <div class=\"modal-content rounded-3 shadow\">\n                    <div class=\"modal-header border-bottom-0 py-3\">\n                        <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\"\n                            aria-label=\"Close\"></button>\n                    </div>\n                    <div class=\"modal-body ratio rounded-bottom-3\" style=\"height: 600px;\">\n                        <div class=\"spinner d-flex w-100 h-100 align-items-center justify-content-center\">\n                            <div class=\"spinner-border text-light p-5\" role=\"status\">\n                                <span class=\"visually-hidden\">Loading...</span>\n                            </div>\n                        </div>\n                        <iframe class=\"rounded-bottom-3\" id=\"RenovarFrame\"></iframe>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/toastify-js\"></script>\n\n        <script>\n            class AndroidMock {\n                static getLocalIP() {\n                    return '192.168.0.1';\n                }\n\n                static getConfig() {\n                    return JSON.stringify({\n                        urlCheckUser: 'URLAQUI'\n                    });\n                }\n\n                static getNetworkName() {\n                    return 'REDE';\n                }\n\n                static openRadioInfo() {\n                    console.log('openRadioInfo');\n                }\n            }\n        </script>\n\n        <script>\n            function showLocalIP(android) {\n                console.log(android.getNetworkName());\n                document.getElementById('name').innerHTML = ' ' + android.getNetworkName() + ':';\n                document.getElementById('ip').innerHTML = android.getLocalIP();\n\n                setInterval(() => {\n                    document.getElementById('name').innerHTML =\n                        ' ' + android.getNetworkName() + ':';\n                    document.getElementById('ip').innerHTML = android.getLocalIP();\n                }, 2000)\n            }\n\n            window.onload = function () {\n                const android = window.Android || AndroidMock;\n                showLocalIP(android);\n            }\n\n            function mostrar(id) {\n                if (document.getElementById(id).style.display !== \"none\") {\n                    document.getElementById(id).style.display = \"none\";\n                    return;\n                }\n                Array.from(document.getElementsByClassName(\"hidden\")).forEach(\n                    div => (div.style.display = \"none\")\n                );\n                document.getElementById(id).style.display = \"block\";\n            }\n\n        </script>\n\n        <script>\n            const configArea = document.querySelector('#config-area')\n            const config = document.querySelector('#config')\n            const username = document.querySelector('#username')\n            const password = document.querySelector('#password')\n            const uuid = document.querySelector('#uuid')\n            const logger = document.querySelector('#logger')\n\n            const networkStatus = document.querySelector('#section.local-ip')\n\n            const startStopVpn = document.querySelector('#start-stop')\n            const stateStatus = document.querySelector('#state')\n\n            const loggerModal = new bootstrap.Modal(document.querySelector('#loggerModal'))\n            const checkUserModal = new bootstrap.Modal(document.querySelector('#checkUserModal'))\n            const errorModal = new bootstrap.Modal(document.querySelector('#errorModal'))\n            const configModal = new bootstrap.Modal(document.querySelector('#configModal'))\n\n            const ToolsModal = new bootstrap.Modal(document.querySelector('#ToolsModal'))\n\n            const clearLogger = document.querySelector('.clear-logger')\n\n            const RenovarModal = new bootstrap.Modal(document.querySelector('#RenovarModal'))\n\n            configArea.addEventListener('click', e => showConfigsModal())\n            username.addEventListener('input', e => DtUsername.set(e.target.value))\n            password.addEventListener('input', e => DtPassword.set(e.target.value))\n            uuid.addEventListener('input', e => DtUuid.set(e.target.value))\n            logger.addEventListener('click', e => loggerModal.show())\n\n            startStopVpn.addEventListener('click', (e) => {\n                if (DtGetVpnState.execute() != 'DISCONNECTED') {\n                    DtExecuteVpnStop.execute()\n                } else {\n                    DtExecuteVpnStart.execute()\n                }\n            })\n            clearLogger.addEventListener('click', () => DtClearLogs.execute())\n\n            RenovarModal._element.addEventListener('shown.bs.modal', () => {\n                const iframe = document.querySelector('#RenovarFrame');\n                if (!iframe.src) {\n                    iframe.src = 'https://painel.plenonet.com.br/renovar.php'\n                    iframe.addEventListener('load', () => {\n                        mp3Modal._element.querySelector('.spinner').classList.add('d-none')\n                    })\n                }\n            })\n            RenovarModal._element.addEventListener('hide.bs.modal', () => {\n                const iframe = document.querySelector('#RenovarFrame');\n                iframe.src = '';\n            })\n\n            Object.defineProperty(String.prototype, 't', {\n                value: function t() {\n                    return window?.DtTranslateText?.execute('' + this) ?? '' + this\n                },\n                writable: true,\n                configurable: true,\n            })\n\n            const dtConfigClickListener = () => {\n                const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{ \"auth\": {}, \"mode\": \"v2ray\" }`)\n                const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');\n                config.placeholder = data.name ?? 'LBL_CHOOSE_CONFIG'.t()\n                username.parentElement.style.display = !data?.auth?.username && !isV2ray ? 'flex' : 'none';\n                password.parentElement.style.display = !data?.auth?.password && !isV2ray ? 'flex' : 'none';\n                uuid.parentElement.style.display = !data?.auth?.v2ray_uuid && isV2ray ? 'flex' : 'none';\n            }\n\n            const dtVpnStateListener = state => {\n                const isRunning = state != 'DISCONNECTED';\n\n                stateStatus.innerHTML = ('LBL_STATE_' + state).t()\n                startStopVpn.innerHTML = isRunning ? 'LBL_BTN_STOP'.t() : 'LBL_BTN_START'.t()\n\n                if (isRunning) {\n                    username.setAttribute('readonly', 'true')\n                    password.setAttribute('readonly', 'true')\n                } else {\n                    username.removeAttribute('readonly')\n                    password.removeAttribute('readonly')\n                }\n\n                if (state == 'CONNECTING') dtShowSuccessToastListener('Conectando...')\n            }\n\n            const dtCheckUserStartedListener = () => {\n                const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{}`)\n                const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');\n                if (isV2ray) return;\n                const html = `\n            <div class=\"d-flex justify-content-center\">\n                <div class=\"spinner-border p-5\" role=\"status\">\n                    <span class=\"visually-hidden\">Loading...</span>\n                </div>\n            </div>\n            `\n\n                checkUserModal._element.querySelector('.chk-title').textContent = 'CHECK USER'\n                checkUserModal._element.querySelector('.chk-message').innerHTML = html;\n                checkUserModal.show()\n            }\n\n            const dtCheckUserModelListener = model => {\n                const data = JSON.parse(model ?? `{\"username\": \"test\"}`)\n                const html = `\n                <div class=\"d-flex flex-column text-white\">\n                    <span>👤Nome de usuario: ${data.username}</span>\n                    <span>📆Expira em: ${data.expiration_date}</span>\n                    <span>📆Dias restantes: ${data.expiration_days}</span>\n                    <span>🚫Conexoes: ${data.count_connections}|${data.limit_connections}</span>\n                </div>\n            `\n\n                checkUserModal._element.querySelector('.chk-title').textContent = '📆 Olá, ' + data.username.toUpperCase() + '👤'\n                checkUserModal._element.querySelector('.chk-message').innerHTML = html;\n                checkUserModal.show()\n            }\n\n            const dtMessageErrorListener = message => {\n                const data = JSON.parse(message)\n                errorModal._element.querySelector('.err-title').textContent = data.title;\n                errorModal._element.querySelector('.err-message').innerHTML = data.content;\n                errorModal.show()\n            }\n\n            const dtOnNewLogListener = () => {\n                const mock = [];\n                for (let i = 0; i < 30; i++) {\n                    mock.push({ 'TIME': 'MESSAGE ' + i })\n                }\n\n                const log = window?.DtGetLogs?.execute() || JSON.stringify(mock)\n                const data = JSON.parse(log)\n\n                let content = '';\n                data.forEach(item => {\n                    content += '<li class=\"list-group-item fs-6 bg-transparent text-white p-0 border-0 text-start ms-2 text-wrap\">';\n                    content += Object.keys(item)[0] + \" \" + item[Object.keys(item)]\n                    content += '</li>';\n                })\n\n                loggerModal._element.querySelector('.logger-content').innerHTML = content;\n                const listGroup = loggerModal._element.querySelector('.list-group')\n                listGroup.scrollTo(0, listGroup.scrollHeight)\n            }\n\n            const dtVpnStartedSuccessListener = () => dtShowSuccessToastListener('Conectado com sucesso')\n\n            const dtVpnStoppedSuccessListener = () => dtShowSuccessToastListener('Desconectado com sucesso')\n\n            const dtShowSuccessToastListener = text => {\n                Toastify({\n                    text: text,\n                    close: true,\n                    style: {\n                        background: 'linear-gradient(to right, #00b09b, #96c93d)',\n                        marginTop: '35px',\n                    }\n                }).showToast()\n            }\n\n            const dtShowErrorToastListener = text => {\n                Toastify({\n                    text: text,\n                    close: true,\n                    style: {\n                        background: 'linear-gradient(to right, #ff5c33, #e69900)',\n                        marginTop: '35px',\n                    }\n                }).showToast()\n            }\n\n            const showConfigsModal = () => {\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 data = JSON.parse(window?.DtGetConfigs?.execute() || mock)\n\n                data.sort((a, b) => a.sorter - b.sorter)\n                data.forEach(item => item.items.sort((a, b) => a.sorter - b.sorter))\n\n                const body = configModal._element.querySelector('.config-body')\n                body.innerHTML = ''\n\n                data.forEach(category => {\n                    const categoryElement = document.createElement('li')\n                    categoryElement.classList.add('list-group-item', 'bg-transparent', 'text-white', 'border-0', 'mb-1', 'rounded-1', 'px-1')\n                    categoryElement.innerHTML = `<span class=\"fw-bold btn-dark w-100 d-block p-1 rounded-1 mb-1\">${category.name}</span>`\n\n                    const configUlElement = document.createElement('ul')\n                    configUlElement.classList.add('list-group', 'bg-transparent', 'overflow-y-auto')\n\n                    category.items.forEach(item => {\n                        const configElement = document.createElement('li')\n                        configElement.classList.add('list-group-item', 'd-flex', 'btn-dark', 'text-white', 'border-0', 'rounded-2', 'px-1', 'py-2', 'mb-1')\n                        configElement.innerHTML = `\n                            <img src=\"${item.icon}\" width=\"40\" height=\"40\">\n                            <div class=\"text-start d-flex flex-column ms-2 w-100 text-truncate\">\n                         <span class=\"fw-bold text-uppercase\" style=\"font-size: 0.8rem;\">${item.name}</span>\n\t\t\t\t\t\t<span class=\"fst-italic fw-bold\" style=\"font-size: 0.7rem;\">${item.description || ''}</span>                                \n                            </div>\n                            <div class=\"d-flex flex-column ms-2\">\n                                <span class=\"fst-italic fw-bold text-end text-uppercase text-nowrap\" style=\"font-size: 0.8rem;\">${item.mode}</span>\n                            </div>\n                        </li>\n                    `\n                        configElement.addEventListener('click', e => {\n                            window?.DtSetConfig?.execute(item.id)\n                            configModal.hide()\n                        })\n                        configUlElement.appendChild(configElement)\n                    })\n\n                    categoryElement.appendChild(configUlElement)\n                    body.appendChild(categoryElement)\n                })\n\n                configModal.show()\n            }\n\n            username.value = window?.DtUsername?.get() ?? ''\n            password.value = window?.DtPassword?.get() ?? ''\n            uuid.value = window?.DtUuid?.get() ?? ''\n\n            username.placeholder = 'LBL_USERNAME'.t()\n            password.placeholder = 'LBL_PASSWORD'.t()\n            uuid.placeholder = 'LBL_UUID'.t()\n\n            dtOnNewLogListener()\n            dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')\n            dtConfigClickListener()\n\n            console.log('ODAIR.Dev!🚀')\n        </script>\n\n</body>\n\n</html>
        "label": "ANDROID WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_SUPPORT_BUTTON",
        "value": null,
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    },
    {
        "id": 8764,
        "label": "PAGINA WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_WEB_VIEW",
        "value": null,
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "acff48c5-0c40-4493-847a-a48a2807318d"
    }
]