[
    {
        "id": 1725,
        "label": "Nome do app",
        "name": "APP_NAME",
        "value": null,
        "type": "STRING",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1726,
        "label": "Logo do app",
        "name": "APP_LOGO",
        "value": "https://i.ibb.co/KjtLm3G/IMG-20241002-201235-539.png",
        "type": "IMAGE",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1727,
        "label": "Imagem de fundo",
        "name": "APP_BACKGROUND_IMAGE",
        "value": "https://i.ibb.co/HDcxXk2/IMG-20241002-201235-539.png",
        "type": "IMAGE",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1728,
        "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": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1729,
        "label": "Cor de fundo",
        "name": "APP_BACKGROUND_COLOR",
        "value": "#62137ac6",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1730,
        "label": "Cor do card inicial",
        "name": "APP_CARD_COLOR",
        "value": "#373A3E35",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 7561,
        "label": "Raio do card inicial",
        "name": "APP_CARD_RADIUS",
        "value": 20,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 7562,
        "label": "Cor do card de status",
        "name": "APP_CARD_STATUS_COLOR",
        "value": "#73737300",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 7563,
        "label": "Raio do card de status",
        "name": "APP_CARD_STATUS_RADIUS",
        "value": 9,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1731,
        "label": "Cor do card de configurações",
        "name": "APP_CARD_CONFIG_COLOR",
        "value": "#9b1dc400",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1732,
        "label": "Cor do fundo dos dialogs",
        "name": "APP_DIALOG_BACKGROUND_COLOR",
        "value": "#59595900",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 11667,
        "label": "Cor do fundo do dialog de log",
        "name": "APP_DIALOG_LOGGER_COLOR",
        "value": "#00000000",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1733,
        "label": "Cor das bordas",
        "name": "APP_BORDER_COLOR",
        "value": "#737373ff",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 7564,
        "label": "Cor dos inputs",
        "name": "APP_INPUT_COLOR",
        "value": "#269aff00",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 7565,
        "label": "Raio dos inputs",
        "name": "APP_INPUT_RADIUS",
        "value": 15,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1734,
        "label": "Cor dos textos",
        "name": "APP_TEXT_COLOR",
        "value": "#FFFFFFFF",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1735,
        "label": "Cor dos botões",
        "name": "APP_BUTTON_COLOR",
        "value": "#737373ff",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 7566,
        "label": "Raio dos botões",
        "name": "APP_BUTTON_RADIUS",
        "value": 0,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1736,
        "label": "Cor dos icones",
        "name": "APP_ICON_COLOR",
        "value": "#737373ff",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1738,
        "label": "Exibir modo de conexão",
        "name": "APP_SHOW_CONNECTION_MODE",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 22971,
        "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": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 4208,
        "label": "Iniciar o app automaticamente ao reiniciar o dispositivo",
        "name": "APP_AUTO_START",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 7567,
        "label": "Usar limiter de conexão",
        "name": "APP_CONNECTION_LIMITER",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 12732,
        "label": "Usar botão de atualizações",
        "name": "APP_BTN_UPDATE_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 12733,
        "label": "Usar botão de registros",
        "name": "APP_BTN_LOGGER_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 12734,
        "label": "Usar botão de pagina webview",
        "name": "APP_BTN_PAGE_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 14119,
        "label": "Ativar dialog de erros",
        "name": "APP_DIALOG_ERROR_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 14120,
        "label": "Ativar dialog de checkuser",
        "name": "APP_CHECKUSER_DIALOG_ENABLED",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 14121,
        "label": "Ativar toast de sucesso",
        "name": "APP_SUCCESS_TOAST_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 14122,
        "label": "Ativar toast de erro",
        "name": "APP_ERROR_TOAST_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 14158,
        "label": "Usar layout webview",
        "name": "APP_LAYOUT_WEBVIEW_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1739,
        "label": "Mensagem",
        "name": "APP_MESSAGE",
        "value": "URGENTE!! <BR><BR/>\nATUALIZAÇÃO DISPONÍVEL NA PLAYSTORE, ATUALIZEM!<BR><BR/> CASO O CAMPO DA OPERADORA ESTEJA EM BRANCO, FAVOR SELECIONAR OPERADORA<BR><BR/> DIFICULDADE PARA SE CONECTAR ENTREM EM CONTATO!",
        "type": "TEXT",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 8117,
        "label": "URL de atualização do aplicativo",
        "name": "APP_UPDATE_URL",
        "value": null,
        "type": "URL",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 1740,
        "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": "ALERT"
        },
        "type": "SELECT",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 14159,
        "label": "LAYOUT WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_LAYOUT_WEBVIEW",
        "value": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>Document</title>\n\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\n\n    <style>\n      :root {\n        --background-color-main: #171717;\n        --background-image-main: url('');\n\n        --header-container-color: linear-gradient(to right, #f2295b, #712de0);\n        --background-container-color: #171717;\n\n        --border-color: linear-gradient(to right, #f2295b, #712de0);\n        --border-loading-color: #ffffff;\n\n        --text-color: #ffffff;\n        --text-alert-color: #ff0000;\n\n        --icons-color: #ffffff;\n\n        --background-buttons-color: linear-gradient(to right, #712de0, #f2295b);\n\n        --margem-do-topo-do-modal: 10px;\n        --margem-do-bottom-do-modal: 10px;\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-color: var(--background-color-main);\n        background-image: var(--background-image-main);\n        background-position: center;\n        background-repeat: no-repeat;\n        background-size: cover;\n      }\n\n      main {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 20px;\n\n        position: relative;\n\n        transition: padding-bottom 0.3s ease 0.2s;\n\n        overflow: hidden;\n      }\n\n      .container-logo {\n        width: 95%;\n        height: auto;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        margin-top: 40px;\n\n        padding: 5px 3px;\n      }\n\n      .container-logo img {\n        width: 50%;\n        max-width: 300px;\n      }\n\n      .container {\n        width: 95%;\n        max-width: 450px;\n        height: auto;\n\n        position: relative;\n\n        border-radius: 5px;\n\n        background: transparent;\n      }\n\n      .container header {\n        width: 100%;\n        height: 45px;\n\n        display: flex;\n        align-items: center;\n        gap: 10px;\n\n        border-top-left-radius: 5px;\n        border-top-right-radius: 5px;\n\n        padding: 5px 3px;\n\n        background: var(--header-container-color);\n      }\n\n      .container header button:first-child {\n        visibility: hidden;\n      }\n\n      .container header button {\n        flex: 1;\n        height: 100%;\n\n        border: 0;\n        border-radius: 20px;\n\n        color: var(--text-color);\n        font-family: 'Roboto', sans-serif;\n\n        background: #171717;\n      }\n\n      .container form {\n        width: 100%;\n        height: calc(100% - 45px);\n\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 10px;\n\n        margin: 10px 0px;\n        padding: 0px 3px;\n      }\n\n      .container form div {\n        width: 95%;\n        height: 45px;\n\n        display: flex;\n        align-items: center;\n\n        border-radius: 50px;\n\n        padding: 0px 10px;\n\n        background: #000;\n      }\n\n      .container form div#uuid-container {\n        display: none;\n      }\n\n      .container form div svg {\n        width: 38px;\n        height: 100%;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        align-content: center;\n\n        padding: 0px 10px;\n\n        border-right: 1px solid var(--border-color);\n\n        color: var(--icons-color);\n      }\n\n      .container form div svg path {\n        transform: scale(1);\n      }\n\n      .container form div input {\n        width: 100%;\n        height: 100%;\n\n        border: 0;\n        outline: none;\n\n        padding-left: 5px;\n\n        color: var(--text-color);\n        font-family: 'Roboto', sans-serif;\n        font-size: 1rem;\n\n        background: transparent;\n      }\n\n      .container form div input::placeholder {\n        color: #dddddd;\n      }\n\n      .form-buttons {\n        width: 100%;\n\n        display: flex;\n        flex-wrap: wrap;\n        gap: 10px;\n\n        margin-top: 10px;\n        padding: 0px 5px;\n      }\n\n      .form-buttons button {\n        flex: 1;\n        height: 45px;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 5px;\n\n        border: 0;\n        border-radius: 20px;\n\n        color: var(--text-color);\n        font-family: 'Roboto', sans-serif;\n\n        background: #000;\n      }\n\n      .form-buttons button:last-child {\n        width: 50%;\n        flex-basis: 100%;\n\n        margin-top: 10px;\n      }\n\n      .menu {\n        width: 100%;\n        height: calc(100% - 45px);\n\n        position: absolute;\n        top: 45px;\n        left: 0;\n        right: 0;\n        bottom: 0;\n\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 13px;\n\n        padding: 10px 5px;\n\n        border-bottom-left-radius: 5px;\n        border-bottom-right-radius: 5px;\n\n        opacity: 0;\n        transform: perspective(800px) rotateX(90deg) rotateY(0deg);\n        transform-origin: 100% 100%;\n\n        background: #171717;\n      }\n\n      .menu button {\n        width: 95%;\n        height: 45px;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        border: 0;\n        border-radius: 17.5px;\n\n        background: var(--background-buttons-color);\n      }\n\n      .menu button svg {\n        color: var(--icons-color);\n\n        margin-right: 5px;\n      }\n\n      .menu button span {\n        color: var(--text-color);\n        font-family: 'Roboto', sans-serif;\n      }\n\n      .home-menu {\n        width: 95%;\n        max-width: 450px;\n        height: auto;\n\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        gap: 10px;\n\n        position: absolute;\n        bottom: 20px;\n\n        padding: 0px 10px;\n      }\n\n      .home-menu button {\n        width: auto;\n        height: 45px;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 5px;\n\n        padding: 0px 10px;\n\n        border: 0px;\n        border-radius: 20px;\n\n        background: var(--background-buttons-color);\n      }\n\n      .home-menu button svg {\n        height: 100%;\n        color: var(--icons-color);\n      }\n\n      .home-menu button span {\n        color: var(--text-color);\n      }\n\n      .modal-speedtest,\n      .modal-configs,\n      .modal-logs,\n      .modal-alert-clear-data,\n      .modal-error-alert,\n      .modal-status-vpn,\n      .modal-checkuser,\n      .modal-loading,\n      .modal-gen-test,\n      .modal-buy-access,\n      .modal-call-support {\n        width: 98%;\n        max-width: 450px;\n        height: calc(100% - var(--margem-do-bottom-do-modal) - var(--margem-do-topo-do-modal));\n\n        position: absolute;\n        top: var(--margem-do-topo-do-modal);\n        left: auto;\n        right: auto;\n        bottom: var(--margem-do-bottom-do-modal);\n        z-index: 2;\n\n        display: flex;\n        flex-direction: column;\n\n        border-radius: 5px;\n\n        overflow: hidden;\n\n        opacity: 0;\n        transform: scale(0);\n        transform-origin: center;\n        transition: all 0.3s ease 0.1s;\n      }\n\n      .show {\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      .modal-speedtest header,\n      .modal-configs header,\n      .modal-logs header,\n      .modal-alert-clear-data header,\n      .modal-error-alert header,\n      .modal-status-vpn header,\n      .modal-checkuser header,\n      .modal-loading header,\n      .modal-gen-test header,\n      .modal-buy-access header,\n      .modal-call-support header {\n        width: 100%;\n        height: 40px;\n\n        display: flex;\n        align-items: center;\n\n        padding: 0px 10px;\n\n        background: var(--header-container-color);\n      }\n\n      .modal-speedtest header svg,\n      .modal-configs header svg,\n      .modal-logs header svg,\n      .modal-alert-clear-data header svg,\n      .modal-error-alert header svg,\n      .modal-status-vpn header svg,\n      .modal-checkuser header svg,\n      .modal-loading header svg,\n      .modal-gen-test header svg,\n      .modal-buy-access header svg,\n      .modal-call-support header svg {\n        margin-left: auto;\n\n        color: var(--icons-color);\n      }\n\n      .modal-speedtest section,\n      .modal-configs section,\n      .modal-logs section,\n      .modal-alert-clear-data section,\n      .modal-error-alert section,\n      .modal-status-vpn section,\n      .modal-checkuser section,\n      .modal-loading section,\n      .modal-gen-test section,\n      .modal-buy-access section,\n      .modal-call-support section {\n        background: var(--background-container-color);\n      }\n\n      .modal-speedtest section,\n      .modal-gen-test section,\n      .modal-buy-access section,\n      .modal-call-support section {\n        width: 100%;\n        height: calc(100% - 40px);\n\n        position: relative;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      .modal-logs section,\n      .modal-checkuser section {\n        width: 100%;\n        height: calc(100% - 40px);\n\n        position: relative;\n\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      .modal-logs section p {\n        width: 100%;\n        height: auto;\n        max-height: calc(100% - 65px);\n\n        margin: 10px 0px;\n        padding: 0px 10px;\n\n        overflow-y: auto;\n\n        color: var(--text-color);\n        font-family: 'Roboto', sans-serif;\n        font-size: 0.7rem;\n      }\n\n      .modal-logs section button {\n        width: 80%;\n        height: 45px;\n\n        margin-top: auto;\n        margin-bottom: 5px;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        border: 0;\n        border-radius: 17.5px;\n\n        background: var(--background-buttons-color);\n      }\n\n      .modal-logs section button svg {\n        color: var(--icons-color);\n\n        margin-right: 5px;\n      }\n\n      .modal-logs section button span {\n        color: var(--text-color);\n        font-family: 'Roboto', sans-serif;\n      }\n\n      .modal-speedtest section iframe,\n      .modal-gen-test section iframe,\n      .modal-buy-access section iframe,\n      .modal-call-support section iframe {\n        width: 100%;\n        height: 100%;\n\n        border: 0;\n\n        overflow: hidden;\n      }\n\n      .modal-checkuser section {\n        padding: 10px;\n\n        justify-content: center;\n      }\n\n      .modal-checkuser section h1 {\n        width: 100%;\n        height: 40px;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        margin: 20px;\n\n        border-bottom: 2px solid var(--background-buttons-color);\n\n        color: var(--text-color);\n        font-family: 'Roboto', sans-serif;\n        font-weight: 400;\n      }\n\n      .modal-checkuser section div {\n        width: 100%;\n        height: 40px;\n\n        display: flex;\n        align-items: center;\n\n        margin: 10px 0px;\n\n        border-radius: 20px;\n\n        background: var(--background-buttons-color);\n\n        overflow: hidden;\n      }\n\n      .modal-checkuser section div i {\n        width: 40px;\n        height: 40px;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        color: var(--icons-color);\n      }\n\n      .modal-checkuser section div span {\n        width: calc(100% - 40px);\n        height: 100%;\n\n        display: flex;\n        align-items: center;\n\n        color: var(--text-color);\n        font-family: 'Roboto', sans-serif;\n      }\n\n      .modal-configs section {\n        width: 100%;\n        height: calc(100% - 40px);\n\n        overflow-y: auto;\n      }\n\n      .modal-configs section div {\n        width: 100%;\n        height: auto;\n\n        margin-top: 10px;\n\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      .modal-configs section div h1.title {\n        width: 90%;\n        min-height: 30px;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        margin: 10px 0px;\n        margin-top: 10px;\n\n        border-radius: 15px;\n\n        color: var(--text-color);\n        font-family: 'Roboto', sans-serif;\n        font-size: 0.9rem;\n\n        background: var(--background-buttons-color);\n      }\n\n      .modal-configs section div ul {\n        width: 100%;\n        height: auto;\n\n        margin-top: 5px;\n\n        padding: 0px 10px;\n\n        border-radius: 15px;\n      }\n\n      .modal-configs section div ul li {\n        width: 100%;\n        height: 60px;\n        min-height: 60px;\n\n        display: flex;\n        align-items: center;\n\n        margin: 0px 0px 10px 0px;\n\n        padding: 5px;\n        padding-left: 15px;\n\n        border-radius: 30px;\n\n        overflow: hidden;\n\n        background: #000;\n      }\n\n      .modal-configs section ul li img {\n        width: 30px;\n        height: 30px;\n      }\n\n      .modal-configs section ul li div {\n        width: calc(100% - 40px);\n        height: 40px;\n\n        margin-left: 5px;\n\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n\n        overflow: hidden;\n      }\n\n      .modal-configs section ul li div h1 {\n        color: var(--text-color);\n        font-size: 0.7rem;\n        font-weight: 600;\n        font-family: 'Roboto', sans-serif;\n      }\n\n      .modal-configs section ul li div p {\n        color: var(--text-color);\n        font-family: 'Roboto', sans-serif;\n        font-size: 0.6rem;\n        font-weight: 400;\n      }\n\n      .modal-alert-clear-data section,\n      .modal-error-alert section,\n      .modal-status-vpn section,\n      .modal-loading section {\n        width: 100%;\n        height: calc(100% - 40px);\n\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .modal-alert-clear-data section svg,\n      .modal-error-alert section svg {\n        width: 128px;\n        height: auto;\n\n        color: var(--text-alert-color);\n      }\n\n      .modal-alert-clear-data section h1,\n      .modal-error-alert section h1 {\n        margin: 10px 0px;\n\n        color: var(--text-alert-color);\n        font-family: 'Roboto', sans-serif;\n      }\n\n      .modal-alert-clear-data section p,\n      .modal-error-alert section p {\n        height: 145px;\n        max-height: 145px;\n\n        overflow-y: auto;\n\n        margin-bottom: 10px;\n\n        padding: 10px;\n\n        color: var(--text-color);\n        font-family: 'Roboto', sans-serif;\n        font-weight: 300;\n      }\n\n      .modal-error-alert section p {\n        text-align: center;\n      }\n\n      .modal-alert-clear-data section div {\n        width: 95%;\n        height: auto;\n\n        margin-top: 10px;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n      }\n\n      .modal-alert-clear-data section div button {\n        width: 150px;\n        height: 45px;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        padding: 0px 5px;\n\n        border: 0;\n        border-radius: 20px;\n\n        background: var(--background-buttons-color);\n      }\n\n      .modal-alert-clear-data section div button svg {\n        width: 16px;\n        height: auto;\n\n        margin-left: 6px;\n\n        color: var(--icons-color);\n      }\n\n      .modal-alert-clear-data section div button span {\n        margin-left: 5px;\n\n        color: var(--text-color);\n        font-family: 'Roboto', sans-serif;\n        font-size: 0.7rem;\n      }\n\n      .modal-status-vpn section {\n        position: relative;\n      }\n\n      .modal-status-vpn section div.loading-status,\n      .modal-loading section div {\n        width: 70px;\n        height: 70px;\n\n        position: relative;\n\n        border: 4px solid var(--border-loading-color);\n        border-radius: 50%;\n        border-top: 4px solid transparent;\n\n        animation: spin 1s infinite linear;\n      }\n\n      .modal-status-vpn section div.loading-status svg,\n      .modal-loading section svg {\n        width: 100%;\n        height: 100%;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        color: var(--icons-color);\n        padding: 15px;\n\n        position: absolute;\n        top: auto;\n        left: auto;\n        right: auto;\n        bottom: auto;\n\n        animation: spin 1s infinite linear reverse;\n      }\n\n      .modal-status-vpn section h1 {\n        margin-top: 15%;\n\n        color: var(--text-color);\n        font-family: 'Roboto', sans-serif;\n      }\n\n      @keyframes spin {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n      .boingInUp {\n        -webkit-animation-name: boingInUp;\n        animation-name: boingInUp;\n      }\n      @-webkit-keyframes boingInUp {\n        0% {\n          opacity: 0;\n          transform: perspective(800px) rotateX(-90deg);\n          transform-origin: 50% 0;\n        }\n        50% {\n          opacity: 1;\n          transform: perspective(800px) rotateX(50deg);\n          transform-origin: 50% 0;\n        }\n        to {\n          opacity: 1;\n          transform: perspective(800px) rotateX(0deg);\n          transform-origin: 50% 0;\n        }\n      }\n      @keyframes boingInUp {\n        0% {\n          opacity: 0;\n          transform: perspective(800px) rotateX(-90deg);\n          transform-origin: 50% 0;\n        }\n        50% {\n          opacity: 1;\n          transform: perspective(800px) rotateX(50deg);\n          transform-origin: 50% 0;\n        }\n        to {\n          opacity: 1;\n          transform: perspective(800px) rotateX(0deg);\n          transform-origin: 50% 0;\n        }\n      }\n      .boingOutDown {\n        -webkit-animation-name: boingOutDown;\n        animation-name: boingOutDown;\n      }\n      @-webkit-keyframes boingOutDown {\n        0% {\n          opacity: 1;\n          transform: perspective(800px) rotateX(0deg) rotateY(0deg);\n          transform-origin: 100% 100%;\n        }\n        20% {\n          opacity: 1;\n          transform: perspective(800px) rotateX(0deg) rotateY(10deg);\n          transform-origin: 100% 100%;\n        }\n        30% {\n          opacity: 1;\n          transform: perspective(800px) rotateX(0deg) rotateY(0deg);\n          transform-origin: 0 100%;\n        }\n        40% {\n          opacity: 1;\n          transform: perspective(800px) rotateX(10deg) rotateY(10deg);\n          transform-origin: 0 100%;\n        }\n        to {\n          opacity: 0;\n          transform: perspective(800px) rotateX(90deg) rotateY(0deg);\n          transform-origin: 100% 100%;\n        }\n      }\n      @keyframes boingOutDown {\n        0% {\n          opacity: 1;\n          transform: perspective(800px) rotateX(0deg) rotateY(0deg);\n          transform-origin: 100% 100%;\n        }\n        20% {\n          opacity: 1;\n          transform: perspective(800px) rotateX(0deg) rotateY(10deg);\n          transform-origin: 100% 100%;\n        }\n        30% {\n          opacity: 1;\n          transform: perspective(800px) rotateX(0deg) rotateY(0deg);\n          transform-origin: 0 100%;\n        }\n        40% {\n          opacity: 1;\n          transform: perspective(800px) rotateX(10deg) rotateY(10deg);\n          transform-origin: 0 100%;\n        }\n        to {\n          opacity: 0;\n          transform: perspective(800px) rotateX(90deg) rotateY(0deg);\n          transform-origin: 100% 100%;\n        }\n      }\n      .magictime {\n        -webkit-animation-duration: 1s;\n        animation-duration: 1s;\n        -webkit-animation-fill-mode: both;\n        animation-fill-mode: both;\n      }\n      @media (prefers-reduced-motion), (print) {\n        .magictime {\n          -webkit-animation: unset !important;\n          animation: unset !important;\n          transition: none !important;\n        }\n      }\n    </style>\n  </head>\n  <body>\n    <main>\n      <section class=\"container-logo\">\n        <!-- PARA TROCAR A LOGO É SÓ COLOCAR UM LINK COM A IMAGEM DIRETO NO SRC -->\n        <img src=\"https://i.ibb.co/Sv7T9cd/DTsj7bolvy.png\" alt=\"Logo do app\" />\n      </section>\n\n      <section class=\"container\">\n        <header>\n          <button>Log-in</button>\n          <button id=\"configuracao\">Configuração</button>\n        </header>\n\n        <form>\n          <div id=\"operadora\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"currentColor\"\n              class=\"bi bi-ethernet\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                d=\"M14 13.5v-7a.5.5 0 0 0-.5-.5H12V4.5a.5.5 0 0 0-.5-.5h-1v-.5A.5.5 0 0 0 10 3H6a.5.5 0 0 0-.5.5V4h-1a.5.5 0 0 0-.5.5V6H2.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5ZM3.75 11h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25Zm2 0h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25Zm1.75.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5ZM9.75 11h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25Zm1.75.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5Z\"\n              />\n              <path\n                d=\"M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2ZM1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2Z\"\n              />\n            </svg>\n\n            <input\n              id=\"operator-selected\"\n              type=\"text\"\n              placeholder=\"Escolha sua operadora\"\n              readonly\n            />\n          </div>\n\n          <div id=\"user-container\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-person\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                d=\"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            </svg>\n\n            <input id=\"user\" type=\"text\" placeholder=\"Usuário\" />\n          </div>\n\n          <div id=\"password-container\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-key\"\n              viewBox=\"0 0 16 16\"\n            >\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              />\n              <path d=\"M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" />\n            </svg>\n\n            <input id=\"password\" type=\"password\" placeholder=\"Senha\" />\n          </div>\n\n          <div id=\"uuid-container\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-fingerprint\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                d=\"M8.06 6.5a.5.5 0 0 1 .5.5v.776a11.5 11.5 0 0 1-.552 3.519l-1.331 4.14a.5.5 0 0 1-.952-.305l1.33-4.141a10.5 10.5 0 0 0 .504-3.213V7a.5.5 0 0 1 .5-.5Z\"\n              />\n              <path\n                d=\"M6.06 7a2 2 0 1 1 4 0 .5.5 0 1 1-1 0 1 1 0 1 0-2 0v.332c0 .409-.022.816-.066 1.221A.5.5 0 0 1 6 8.447c.04-.37.06-.742.06-1.115V7Zm3.509 1a.5.5 0 0 1 .487.513 11.5 11.5 0 0 1-.587 3.339l-1.266 3.8a.5.5 0 0 1-.949-.317l1.267-3.8a10.5 10.5 0 0 0 .535-3.048A.5.5 0 0 1 9.569 8Zm-3.356 2.115a.5.5 0 0 1 .33.626L5.24 14.939a.5.5 0 1 1-.955-.296l1.303-4.199a.5.5 0 0 1 .625-.329Z\"\n              />\n              <path\n                d=\"M4.759 5.833A3.501 3.501 0 0 1 11.559 7a.5.5 0 0 1-1 0 2.5 2.5 0 0 0-4.857-.833.5.5 0 1 1-.943-.334Zm.3 1.67a.5.5 0 0 1 .449.546 10.72 10.72 0 0 1-.4 2.031l-1.222 4.072a.5.5 0 1 1-.958-.287L4.15 9.793a9.72 9.72 0 0 0 .363-1.842.5.5 0 0 1 .546-.449Zm6 .647a.5.5 0 0 1 .5.5c0 1.28-.213 2.552-.632 3.762l-1.09 3.145a.5.5 0 0 1-.944-.327l1.089-3.145c.382-1.105.578-2.266.578-3.435a.5.5 0 0 1 .5-.5Z\"\n              />\n              <path\n                d=\"M3.902 4.222a4.996 4.996 0 0 1 5.202-2.113.5.5 0 0 1-.208.979 3.996 3.996 0 0 0-4.163 1.69.5.5 0 0 1-.831-.556Zm6.72-.955a.5.5 0 0 1 .705-.052A4.99 4.99 0 0 1 13.059 7v1.5a.5.5 0 1 1-1 0V7a3.99 3.99 0 0 0-1.386-3.028.5.5 0 0 1-.051-.705ZM3.68 5.842a.5.5 0 0 1 .422.568c-.029.192-.044.39-.044.59 0 .71-.1 1.417-.298 2.1l-1.14 3.923a.5.5 0 1 1-.96-.279L2.8 8.821A6.531 6.531 0 0 0 3.058 7c0-.25.019-.496.054-.736a.5.5 0 0 1 .568-.422Zm8.882 3.66a.5.5 0 0 1 .456.54c-.084 1-.298 1.986-.64 2.934l-.744 2.068a.5.5 0 0 1-.941-.338l.745-2.07a10.51 10.51 0 0 0 .584-2.678.5.5 0 0 1 .54-.456Z\"\n              />\n              <path\n                d=\"M4.81 1.37A6.5 6.5 0 0 1 14.56 7a.5.5 0 1 1-1 0 5.5 5.5 0 0 0-8.25-4.765.5.5 0 0 1-.5-.865Zm-.89 1.257a.5.5 0 0 1 .04.706A5.478 5.478 0 0 0 2.56 7a.5.5 0 0 1-1 0c0-1.664.626-3.184 1.655-4.333a.5.5 0 0 1 .706-.04ZM1.915 8.02a.5.5 0 0 1 .346.616l-.779 2.767a.5.5 0 1 1-.962-.27l.778-2.767a.5.5 0 0 1 .617-.346Zm12.15.481a.5.5 0 0 1 .49.51c-.03 1.499-.161 3.025-.727 4.533l-.07.187a.5.5 0 0 1-.936-.351l.07-.187c.506-1.35.634-2.74.663-4.202a.5.5 0 0 1 .51-.49Z\"\n              />\n            </svg>\n\n            <input id=\"uuid\" type=\"password\" placeholder=\"UUID\" />\n          </div>\n\n          <section class=\"form-buttons\">\n            <button id=\"update-config\" type=\"button\" title=\"Atualizar\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                class=\"bi bi-arrow-clockwise\"\n                viewBox=\"0 0 16 16\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z\"\n                />\n                <path\n                  d=\"M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z\"\n                />\n              </svg>\n\n              <span>ATUALIZAR</span>\n            </button>\n\n            <button id=\"logs-button\" type=\"button\" title=\"Registro\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                class=\"bi bi-journal\"\n                viewBox=\"0 0 16 16\"\n              >\n                <path\n                  d=\"M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z\"\n                />\n                <path\n                  d=\"M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z\"\n                />\n              </svg>\n\n              <span>REGISTRO</span>\n            </button>\n\n            <button id=\"vpn-start\" type=\"button\" title=\"Conectar\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                class=\"bi bi-plug\"\n                viewBox=\"0 0 16 16\"\n              >\n                <path\n                  d=\"M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0zM5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4H5z\"\n                />\n              </svg>\n\n              <span>CONECTAR</span>\n            </button>\n          </section>\n        </form>\n\n        <section class=\"menu\">\n          <button id=\"battery-optimization\">\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\n            <span>OTIMIZAÇÃO DE BATERIA</span>\n          </button>\n\n          <button id=\"apn-configuration\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-wrench-adjustable\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                d=\"M16 4.5a4.492 4.492 0 0 1-1.703 3.526L13 5l2.959-1.11c.027.2.041.403.041.61Z\"\n              />\n              <path\n                d=\"M11.5 9c.653 0 1.273-.139 1.833-.39L12 5.5 11 3l3.826-1.53A4.5 4.5 0 0 0 7.29 6.092l-6.116 5.096a2.583 2.583 0 1 0 3.638 3.638L9.908 8.71A4.49 4.49 0 0 0 11.5 9Zm-1.292-4.361-.596.893.809-.27a.25.25 0 0 1 .287.377l-.596.893.809-.27.158.475-1.5.5a.25.25 0 0 1-.287-.376l.596-.893-.809.27a.25.25 0 0 1-.287-.377l.596-.893-.809.27-.158-.475 1.5-.5a.25.25 0 0 1 .287.376ZM3 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"\n              />\n            </svg>\n\n            <span>CONFIGURAR APN</span>\n          </button>\n\n          <button id=\"checkuser\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-person-lines-fill\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                d=\"M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z\"\n              />\n            </svg>\n\n            <span>DETALHES DO USUÁRIO</span>\n          </button>\n\n          <button id=\"speedtest-button\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-router\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                d=\"M5.525 3.025a3.5 3.5 0 0 1 4.95 0 .5.5 0 1 0 .707-.707 4.5 4.5 0 0 0-6.364 0 .5.5 0 0 0 .707.707Z\"\n              />\n              <path\n                d=\"M6.94 4.44a1.5 1.5 0 0 1 2.12 0 .5.5 0 0 0 .708-.708 2.5 2.5 0 0 0-3.536 0 .5.5 0 0 0 .707.707ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5-.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Zm2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm1.5-.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Zm2 0a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Z\"\n              />\n              <path\n                d=\"M2.974 2.342a.5.5 0 1 0-.948.316L3.806 8H1.5A1.5 1.5 0 0 0 0 9.5v2A1.5 1.5 0 0 0 1.5 13H2a.5.5 0 0 0 .5.5h2A.5.5 0 0 0 5 13h6a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5h.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 14.5 8h-2.306l1.78-5.342a.5.5 0 1 0-.948-.316L11.14 8H4.86L2.974 2.342ZM14.5 9a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h13Z\"\n              />\n              <path d=\"M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z\" />\n            </svg>\n\n            <span>TESTAR REDE</span>\n          </button>\n\n          <button id=\"clean-data-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\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                d=\"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              />\n              <path\n                d=\"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            </svg>\n\n            <span>LIMPAR DADOS</span>\n          </button>\n        </section>\n      </section>\n\n      <section class=\"home-menu\">\n        <button id=\"renew-access\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-wallet2\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499L12.136.326zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484L5.562 3zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z\"\n            />\n          </svg>\n\n          <span>Renovar Acesso</span>\n        </button>\n      </section>\n\n      <section class=\"modal-speedtest\">\n        <header>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-x-lg\"\n            id=\"close\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\"\n            />\n          </svg>\n        </header>\n\n        <section>\n          <div class=\"loading\"></div>\n          <iframe title=\"fast\" id=\"iframe-speedtest\"></iframe>\n        </section>\n      </section>\n\n      <section class=\"modal-configs\">\n        <header>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-x-lg\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\"\n            />\n          </svg>\n        </header>\n\n        <section>\n          <div>\n            <h1 class=\"title\">VIVO</h1>\n\n            <ul>\n              <li>\n                <img src=\"https://basteon.me/assets/images/app/operadoras/VIVO.png\" alt=\"icon\" />\n\n                <div>\n                  <h1>VIVO 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>\n                  <p>SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA</p>\n                </div>\n              </li>\n\n              <li>\n                <img src=\"https://basteon.me/assets/images/app/operadoras/VIVO.png\" alt=\"icon\" />\n\n                <div>\n                  <h1>VIVO 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>\n                  <p>SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA</p>\n                </div>\n              </li>\n\n              <li>\n                <img src=\"https://basteon.me/assets/images/app/operadoras/VIVO.png\" alt=\"icon\" />\n\n                <div>\n                  <h1>VIVO 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>\n                  <p>SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA</p>\n                </div>\n              </li>\n            </ul>\n          </div>\n\n          <div>\n            <h1 class=\"title\">TIM</h1>\n\n            <ul>\n              <li>\n                <img src=\"https://basteon.me/assets/images/app/operadoras/VIVO.png\" alt=\"icon\" />\n\n                <div>\n                  <h1>TIM 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>\n                  <p>SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA</p>\n                </div>\n              </li>\n\n              <li>\n                <img src=\"https://basteon.me/assets/images/app/operadoras/VIVO.png\" alt=\"icon\" />\n\n                <div>\n                  <h1>TIM 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>\n                  <p>SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA</p>\n                </div>\n              </li>\n\n              <li>\n                <img src=\"https://basteon.me/assets/images/app/operadoras/VIVO.png\" alt=\"icon\" />\n\n                <div>\n                  <h1>TIM 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>\n                  <p>SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA</p>\n                </div>\n              </li>\n            </ul>\n          </div>\n\n          <div>\n            <h1 class=\"title\">CLARO</h1>\n\n            <ul>\n              <li>\n                <img src=\"https://basteon.me/assets/images/app/operadoras/VIVO.png\" alt=\"icon\" />\n\n                <div>\n                  <h1>CLARO 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>\n                  <p>SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA</p>\n                </div>\n              </li>\n\n              <li>\n                <img src=\"https://basteon.me/assets/images/app/operadoras/VIVO.png\" alt=\"icon\" />\n\n                <div>\n                  <h1>CLARO 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>\n                  <p>SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA</p>\n                </div>\n              </li>\n\n              <li>\n                <img src=\"https://basteon.me/assets/images/app/operadoras/VIVO.png\" alt=\"icon\" />\n\n                <div>\n                  <h1>CLARO 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>\n                  <p>SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA</p>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </section>\n      </section>\n\n      <section class=\"modal-logs\">\n        <header>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-x-lg\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\"\n            />\n          </svg>\n        </header>\n\n        <section>\n          <p></p>\n\n          <button class=\"clear-logs\" type=\"button\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-stars\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                d=\"M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z\"\n              />\n            </svg>\n            <span>Limpar Registro</span>\n          </button>\n        </section>\n      </section>\n\n      <section class=\"modal-alert-clear-data\">\n        <header>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-x-lg\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\"\n            />\n          </svg>\n        </header>\n\n        <section>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-exclamation-triangle\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z\"\n            />\n            <path\n              d=\"M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z\"\n            />\n          </svg>\n\n          <h1>ATENÇÃO</h1>\n\n          <p>\n            Ao limpar os dados do aplicativo, o aplicativo será redefinido como se estivesse sendo\n            instalado pela primeira vez! Essa ação é irreversível. Será necessário inserir o usuário\n            e senha novamente e atualizar o aplicativo para carregar as configurações atuais de\n            conexão VPN.\n          </p>\n\n          <div>\n            <button type=\"button\" id=\"back-clear-data-button\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                class=\"bi bi-caret-left\"\n                viewBox=\"0 0 16 16\"\n              >\n                <path\n                  d=\"M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z\"\n                />\n              </svg>\n              <span>VOLTAR</span>\n            </button>\n\n            <button type=\"button\" id=\"clear-data-button-confirm\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                class=\"bi bi-trash\"\n                viewBox=\"0 0 16 16\"\n              >\n                <path\n                  d=\"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                />\n                <path\n                  d=\"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              </svg>\n              <span>LIMPAR DADOS</span>\n            </button>\n          </div>\n        </section>\n      </section>\n\n      <section class=\"modal-error-alert\">\n        <header>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-x-lg\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\"\n            />\n          </svg>\n        </header>\n\n        <section></section>\n      </section>\n\n      <section class=\"modal-status-vpn\">\n        <header>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-x-lg\"\n            id=\"close-modal-status-vpn\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\"\n            />\n          </svg>\n        </header>\n\n        <section class=\"modal-status-content\">\n          <div class=\"loading-status\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-shield-x\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                d=\"M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z\"\n              />\n              <path\n                d=\"M6.146 5.146a.5.5 0 0 1 .708 0L8 6.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 7l1.147 1.146a.5.5 0 0 1-.708.708L8 7.707 6.854 8.854a.5.5 0 1 1-.708-.708L7.293 7 6.146 5.854a.5.5 0 0 1 0-.708z\"\n              />\n            </svg>\n          </div>\n\n          <h1 id=\"modal-status-text\">CONECTADO!</h1>\n        </section>\n      </section>\n\n      <section class=\"modal-checkuser\">\n        <header>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-x-lg\"\n            id=\"close-modal-checkuser\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\"\n            />\n          </svg>\n        </header>\n\n        <section></section>\n      </section>\n\n      <section class=\"modal-loading\">\n        <header>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-x-lg\"\n            id=\"close-modal-loading\"\n            id=\"close-modal-checkuser\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\"\n            />\n          </svg>\n        </header>\n\n        <section>\n          <div>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-calendar3\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                d=\"M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z\"\n              />\n              <path\n                d=\"M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\"\n              />\n            </svg>\n          </div>\n        </section>\n      </section>\n    </main>\n\n    <!-- FUNÇÕES DO APP -->\n    <script>\n      const dtStatusBarHeight = () => DtGetStatusBarHeight.execute()\n      const dtNavbarHeight = () => DtGetNavigationBarHeight.execute()\n\n      const dtVpnState = () => DtGetVpnState.execute()\n\n      const dtTranslateText = (label) => DtTranslateText.execute(label)\n\n      const dtAllConfigs = () => DtGetConfigs.execute()\n      const dtSetConfig = (id) => DtSetConfig.execute(id)\n      const dtGetDefaultConfig = () => DtGetDefaultConfig.execute()\n\n      const dtGetLogs = () => DtGetLogs.execute()\n      const dtClearLogs = () => DtClearLogs.execute()\n\n      const dtGetUsername = () => DtUsername.get()\n      const dtSetUsername = (username) => DtUsername.set(username)\n      const dtGetPassword = () => DtPassword.get()\n      const dtSetPassword = (password) => DtPassword.set(password)\n      const dtGetUUID = () => DtUuid.get()\n      const dtSetUUID = (uuid) => DtUuid.set(uuid)\n\n      const dtUpdate = () => DtStartAppUpdate.execute()\n\n      const dtStartVpn = () => DtExecuteVpnStart.execute()\n      const dtStopVpn = () => DtExecuteVpnStop.execute()\n\n      const dtBatteryOptimization = () => DtIgnoreBatteryOptimizations.execute()\n      const dtApnConfiguration = () => DtStartApnActivity.execute()\n      const dtStartCheckUser = () => DtStartCheckUser.execute()\n      const dtCleanDataApp = () => DtCleanApp.execute()\n\n      const dtStartWebView = (url) => DtStartWebViewActivity.execute(url)\n    </script>\n\n    <!-- FUNÇÕES PARA O APP -->\n    <script>\n      const dtOnNewLogListener = () => writeModalContent()\n      const dtConfigClickListener = () => writeInputCarrierList()\n      const dtCheckUserStartedListener = () => showModalLoading()\n      const dtVpnStateListener = (state) => vpnState(state)\n      const dtCheckUserModelListener = (model) => writeModalCheckUser(model)\n\n      const dtMessageErrorListener = (model) => writeModalError(model)\n    </script>\n\n    <!-- FUNÇÕES DE AJUDA -->\n    <script>\n      const createSvgIcon = (iconPath, Class = '') => {\n        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n        svg.setAttribute('width', '16')\n        svg.setAttribute('height', '16')\n        svg.setAttribute('fill', 'currentColor')\n        svg.setAttribute('viewBox', '0 0 16 16')\n        svg.setAttribute('class', Class)\n\n        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n        path.setAttribute('d', iconPath)\n\n        svg.appendChild(path)\n        return svg\n      }\n\n      const createListItem = (iconPath, Class = '', text) => {\n        const li = document.createElement('li')\n        const svg = createSvgIcon(iconPath, Class)\n        const span = document.createElement('span')\n        span.setAttribute('class', Class)\n        span.innerHTML = text\n        li.appendChild(svg)\n        li.appendChild(span)\n        return li\n      }\n    </script>\n\n    <!-- FUNÇÕES DO LAYOUT -->\n    <script>\n      const vpnState = (state) => {\n        const stateLabel = state || dtVpnState()\n\n        switch (stateLabel) {\n          case 'DISCONNECTED':\n            StartStopVPNButton.html(dtTranslateText('LBL_BTN_START'))\n            writeModalVpnState(disconnected())\n            hiddenModalVpnState()\n            return disconnected()\n          case 'CONNECTING':\n            StartStopVPNButton.html(dtTranslateText('LBL_BTN_STOP'))\n            writeModalVpnState(connecting())\n            return connecting()\n          case 'CONNECTED':\n            StartStopVPNButton.html(dtTranslateText('LBL_BTN_STOP'))\n            writeModalVpnState(connected())\n            return connected()\n          case 'STOPPING':\n            StartStopVPNButton.html(dtTranslateText('LBL_BTN_STOPPING'))\n            writeModalVpnState(stopping())\n            return stopping()\n          case 'NO_NETWORK':\n            StartStopVPNButton.html(dtTranslateText('LBL_BTN_STOP'))\n            writeModalVpnState(noNetwork())\n            return noNetwork()\n          case 'AUTH':\n            StartStopVPNButton.html(dtTranslateText('LBL_BTN_STOP'))\n            writeModalVpnState(auth())\n            return auth()\n          case 'AUTH_FAILED':\n            StartStopVPNButton.html(dtTranslateText('LBL_BTN_STOP'))\n            writeModalVpnState(authFailed())\n            return authFailed()\n          default:\n            return 'Não foi possível obter o status da conexão'\n        }\n      }\n\n      const showConfigMenu = () => {\n        const menu = document.querySelector('section.menu')\n\n        if (!menu.className.includes('boingInUp') && !menu.className.includes('boingOutDown')) {\n          menu.classList.add('magictime', 'boingInUp')\n          HomeMenu.style({ visibility: `hidden` })\n        } else if (menu.className.includes('boingInUp')) {\n          menu.classList.remove('magictime', 'boingInUp')\n          menu.classList.add('magictime', 'boingOutDown')\n          HomeMenu.style({ visibility: `visible` })\n        } else if (menu.className.includes('boingOutDown')) {\n          menu.classList.remove('magictime', 'boingOutDown')\n          menu.classList.add('magictime', 'boingInUp')\n          HomeMenu.style({ visibility: `hidden` })\n        } else {\n          console.log('ocorreu um erro')\n        }\n      }\n\n      const showModalSpeedtest = () => {\n        ModalSpeedtest.addClass('show')\n\n        IframeSpeedtest.attr({ src: 'https://fast.com/pt/' })\n      }\n      const hiddenModalSpeedtest = () => {\n        IframeSpeedtest.attr({ src: '' })\n\n        ModalSpeedtest.removeClass('show')\n      }\n\n      const writeCarrierList = () => {\n        const writeCarrierList = document.querySelector('section.modal-configs section')\n\n        writeCarrierList.innerHTML = ''\n\n        const data = JSON.parse(dtAllConfigs())\n        data.sort((a, b) => a.sorter - b.sorter)\n        data.forEach((item, index) => item.items.sort((a, b) => a.sorter - b.sorter))\n        data.forEach((category) => {\n          const div = document.createElement('div')\n          const h1 = document.createElement('h1')\n\n          h1.classList.add('title')\n          h1.innerHTML = category.name\n\n          const ul = document.createElement('ul')\n\n          category.items.forEach((item) => {\n            const li = document.createElement('li')\n            li.innerHTML = `<img src=\"${item.icon}\" alt=\"icon\" /><div><h1>${item.name}</h1><p>${\n              item.description ?? ''\n            }</p></div>`\n\n            li.addEventListener('click', () => {\n              dtSetConfig(item.id)\n\n              ModalCarrierList.removeClass('show')\n            })\n\n            ul.appendChild(li)\n          })\n\n          div.appendChild(h1)\n          div.appendChild(ul)\n\n          writeCarrierList.appendChild(div)\n        })\n      }\n      const writeInputCarrierList = () => {\n        const data = JSON.parse(dtGetDefaultConfig())\n\n        const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray')\n\n        InputCarrierValue.attr({ placeholder: data.name ?? 'Escolha sua operadora' })\n\n        if (!data?.auth?.v2ray_uuid && isV2ray) {\n          ContainerInputUser.style({ display: 'none' })\n          ContainerInputPassword.style({ display: 'none' })\n          ContainerInputUUID.style({ display: 'flex' })\n          InputUUIDValue.attr({ value: dtGetUUID() ?? '' })\n        } else {\n          ContainerInputPassword.style({ display: 'flex' })\n          ContainerInputUUID.style({ display: 'none' })\n          InputUserValue.attr({ value: dtGetUsername() ?? '' })\n          InputPasswordValue.attr({ value: dtGetPassword() ?? '' })\n        }\n      }\n      const showModalCarrierList = () => {\n        writeCarrierList()\n\n        ModalCarrierList.addClass('show')\n      }\n      const hiddenModalCarrierList = () => {\n        ModalCarrierList.removeClass('show')\n      }\n\n      const writeModalContent = () => {\n        const data = JSON.parse(dtGetLogs())\n\n        let content = ''\n\n        data.forEach((item) => {\n          content += `${Object.keys(item)} ${item[Object.keys(item)]} <br>`\n        })\n\n        ModalLoggerContent.html(content)\n      }\n      const showModalLogger = () => {\n        dtOnNewLogListener()\n\n        const modal = document.querySelector('section.modal-logs')\n\n        if (!modal.className.includes('show')) {\n          ModalLogger.addClass('show')\n        }\n      }\n      const hiddenModalLogger = () => {\n        ModalLogger.removeClass('show')\n      }\n\n      const startStopVpn = () => {\n        const state = dtVpnState()\n\n        if (state !== 'CONNECTED') {\n          dtStartVpn()\n          showModalVpnState()\n        } else {\n          dtStopVpn()\n        }\n      }\n\n      const writeModalVpnState = (state) => {\n        ContentModalVpnState.html(state)\n      }\n      const showModalVpnState = () => {\n        const data = JSON.parse(dtGetDefaultConfig())\n\n        if (!data || !dtGetUsername() || !dtGetPassword()) {\n          return\n        } else {\n          ModalVpnState.addClass('show')\n        }\n      }\n      const hiddenModalVpnState = () => {\n        ModalVpnState.removeClass('show')\n      }\n\n      const showModalLoading = () => {\n        hiddenModalVpnState()\n        ModalLoading.addClass('show')\n      }\n      const hiddenModalLoading = () => {\n        ModalLoading.removeClass('show')\n      }\n\n      const writeModalCheckUser = (model) => {\n        const data = JSON.parse(model)\n\n        ContentModalCheckUser.html(`\n          <h1>DETALHES DO USUÁRIO</h1>\n\n          <div>\n            <i class=\"bi bi-person\"></i>\n            <span>Nome do usuário: ${data.username}</span>\n          </div>\n\n          <div>\n            <i class=\"bi bi-calendar-week\"></i>\n            <span>Expiração: ${data.expiration_date}</span>\n          </div>\n\n          <div>\n            <i class=\"bi bi-hourglass-split\"></i>\n            <span>Dias restantes: ${data.expiration_days}</span>\n          </div>\n\n          <div>\n            <i class=\"bi bi-people\"></i>\n            <span>Dispositivos: ${data.count_connections}|${data.limit_connections}</span>\n          </div>\n        `)\n\n        showModalCheckUser()\n      }\n      const showModalCheckUser = () => {\n        hiddenModalLoading()\n        ModalCheckUser.addClass('show')\n      }\n      const hiddenModalCheckUser = () => {\n        ModalCheckUser.removeClass('show')\n      }\n\n      const showModalAlertClearData = () => {\n        ModalAlertClearData.addClass('show')\n      }\n      const hiddenModalAlertClearData = () => {\n        ModalAlertClearData.removeClass('show')\n      }\n\n      const writeModalError = (model) => {\n        const data = JSON.parse(model)\n\n        const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-exclamation-triangle\" viewBox=\"0 0 16 16\"><path d=\"M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z\"/><path d=\"M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z\"/></svg>`\n        const h1 = `<h1 id=\"title-error-alert-title\">${data.title}</h1>`\n        const p = `<p id=\"title-error-alert-description\">${data.content}</p>`\n\n        ContentModalError.html(svg + h1 + p)\n        hiddenModalSpeedtest()\n        hiddenModalCarrierList()\n        hiddenModalLogger()\n        hiddenModalVpnState()\n        hiddenModalLoading()\n        hiddenModalCheckUser()\n\n        showModalError()\n      }\n      const showModalError = () => {\n        ModalError.addClass('show')\n      }\n      const hiddenModalError = () => {\n        ModalError.removeClass('show')\n      }\n\n      const openRenewLink = () => dtStartWebView('https://t.me/starkvpnjarvis_bot')\n    </script>\n\n    <!-- ESTADOS DE CONEXÃO -->\n    <script>\n      const disconnected = () => {\n        const icon = `<div class=\"loading-status\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-outlet\" viewBox=\"0 0 16 16\"><path d=\"M3.34 2.994c.275-.338.68-.494 1.074-.494h7.172c.393 0 .798.156 1.074.494.578.708 1.84 2.534 1.84 5.006 0 2.472-1.262 4.297-1.84 5.006-.276.338-.68.494-1.074.494H4.414c-.394 0-.799-.156-1.074-.494C2.762 12.297 1.5 10.472 1.5 8c0-2.472 1.262-4.297 1.84-5.006zm1.074.506a.376.376 0 0 0-.299.126C3.599 4.259 2.5 5.863 2.5 8c0 2.137 1.099 3.74 1.615 4.374.06.073.163.126.3.126h7.17c.137 0 .24-.053.3-.126.516-.633 1.615-2.237 1.615-4.374 0-2.137-1.099-3.74-1.615-4.374a.376.376 0 0 0-.3-.126h-7.17z\"/><path d=\"M6 5.5a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zM7 10v1h2v-1a1 1 0 0 0-2 0z\"/></svg></div>`\n        const text = `<h1>${dtTranslateText('LBL_STATE_DISCONNECTED')}</h1>`\n\n        return icon + text\n      }\n\n      const connecting = () => {\n        const icon = `<div class=\"loading-status\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-plug\" viewBox=\"0 0 16 16\"><path d=\"M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0zM5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4H5z\"/></svg></div>`\n        const text = `<h1>${dtTranslateText('LBL_STATE_CONNECTING')}</h1>`\n\n        return icon + text\n      }\n\n      const connected = () => {\n        const icon = `<div class=\"loading-status\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-plugin\" viewBox=\"0 0 16 16\"><path fill-rule=\"evenodd\" d=\"M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z\"/></svg></div>`\n        const text = `<h1>${dtTranslateText('LBL_STATE_CONNECTED')}</h1>`\n\n        return icon + text\n      }\n\n      const stopping = () => {\n        const icon = `<div class=\"loading-status\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-stop\" viewBox=\"0 0 16 16\"><path d=\"M3.5 5A1.5 1.5 0 0 1 5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5zM5 4.5a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5V5a.5.5 0 0 0-.5-.5H5z\"/></svg></div>`\n        const text = `<h1>${dtTranslateText('LBL_STATE_STOPPING')}</h1>`\n\n        return icon + text\n      }\n\n      const noNetwork = () => {\n        const icon = `<div class=\"loading-status\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-wifi-off\" viewBox=\"0 0 16 16\"><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\"/></svg></div>`\n        const text = `<h1>${dtTranslateText('LBL_STATE_NO_NETWORK')}</h1>`\n\n        return icon + text\n      }\n\n      const auth = () => {\n        const icon = `<div class=\"loading-status\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-person-lock\" viewBox=\"0 0 16 16\"><path d=\"M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 5.996V14H3s-1 0-1-1 1-4 6-4c.564 0 1.077.038 1.544.107a4.524 4.524 0 0 0-.803.918A10.46 10.46 0 0 0 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h5ZM9 13a1 1 0 0 1 1-1v-1a2 2 0 1 1 4 0v1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2Zm3-3a1 1 0 0 0-1 1v1h2v-1a1 1 0 0 0-1-1Z\"/></svg></div>`\n        const text = `<h1>${dtTranslateText('LBL_STATE_AUTH')}</h1>`\n\n        return icon + text\n      }\n\n      const authFailed = () => {\n        const icon = `<div class=\"loading-status\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-person-slash\" viewBox=\"0 0 16 16\"><path d=\"M13.879 10.414a2.501 2.501 0 0 0-3.465 3.465l3.465-3.465Zm.707.707-3.465 3.465a2.501 2.501 0 0 0 3.465-3.465Zm-4.56-1.096a3.5 3.5 0 1 1 4.949 4.95 3.5 3.5 0 0 1-4.95-4.95ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm.256 7a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z\"/></svg></div>`\n        const text = `<h1>${dtTranslateText('LBL_STATE_AUTH_FAILED')}</h1>`\n\n        return icon + text\n      }\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          addClass: (...tokens) => {\n            _elements.forEach((element) => {\n              element.classList.add(...tokens)\n            })\n\n            return wrapper\n          },\n          removeClass: (...tokens) => {\n            _elements.forEach((element) => {\n              element.classList.remove(...tokens)\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          style(styles) {\n            for (const [property, value] of Object.entries(styles)) {\n              console.log(value)\n              _elements.forEach((element) => {\n                element.style[property] = value\n              })\n            }\n\n            return wrapper\n          },\n          attr(attrs) {\n            for (const [name, value] of Object.entries(attrs)) {\n              _elements.forEach((element) => element.setAttribute(name, value))\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 Main = Dom('main')\n\n      const ConfigMenu = Dom('#configuracao')\n      const ContainerConfigMenu = Dom('section.menu')\n\n      const BatteryOptimizationButton = Dom('#battery-optimization')\n      const ApnConfigurationButton = Dom('#apn-configuration')\n      const CheckuserButton = Dom('#checkuser')\n      const SpeedtestButton = Dom('#speedtest-button')\n      const ClearDataAppButton = Dom('#clean-data-app')\n\n      const RenewAccessButton = Dom('#renew-access')\n\n      const ModalSpeedtest = Dom('section.modal-speedtest')\n      const CloseModalSpeedtest = Dom('section.modal-speedtest header svg')\n      const LoadingSpeedtest = Dom('section.modal-speedtest section div.loading')\n      const IframeSpeedtest = Dom('#iframe-speedtest')\n\n      const SelectCarrierButton = Dom('#operadora')\n      const ModalCarrierList = Dom('section.modal-configs')\n      const CloseModalCarrierList = Dom('section.modal-configs header svg')\n      const ModalContentCarrierList = Dom('section.modal-configs section')\n\n      const ContainerInputUser = Dom('#user-container')\n      const ContainerInputPassword = Dom('#password-container')\n      const ContainerInputUUID = Dom('#uuid-container')\n\n      const InputCarrierValue = Dom('#operadora input')\n      const InputUserValue = Dom('#user-container input')\n      const InputPasswordValue = Dom('#password-container input')\n      const InputUUIDValue = Dom('#uuid-container input')\n\n      const RefreshButton = Dom('#update-config')\n      const LoggerButton = Dom('#logs-button')\n      const StartStopVPNButton = Dom('#vpn-start')\n\n      const ModalVpnState = Dom('section.modal-status-vpn')\n      const CloseModalVpnState = Dom('section.modal-status-vpn header svg')\n      const ContentModalVpnState = Dom('section.modal-status-vpn section.modal-status-content')\n\n      const ModalLogger = Dom('section.modal-logs')\n      const CloseModalLogger = Dom('section.modal-logs header svg')\n      const ModalLoggerContent = Dom('section.modal-logs section p')\n      const CleanLoggerContent = Dom('section.modal-logs section button')\n\n      const ModalLoading = Dom('section.modal-loading')\n      const CloseModalLoading = Dom('section.modal-loading header svg')\n\n      const ModalCheckUser = Dom('section.modal-checkuser')\n      const CloseModalCheckUser = Dom('section.modal-checkuser header svg')\n      const ContentModalCheckUser = Dom('section.modal-checkuser section')\n\n      const ModalAlertClearData = Dom('section.modal-alert-clear-data')\n      const CloseModalAlertClearData = Dom('section.modal-alert-clear-data header svg')\n      const BackModalAlertClearData = Dom('#back-clear-data-button')\n      const ConfirmModalAlertClearData = Dom('#clear-data-button-confirm')\n\n      const ModalError = Dom('section.modal-error-alert')\n      const CloseModalError = Dom('section.modal-error-alert header svg')\n      const ContentModalError = Dom('section.modal-error-alert section')\n\n      const HomeMenu = Dom('section.home-menu')\n    </script>\n\n    <!-- VARIAVEIS ROOT -->\n    <script>\n      document.documentElement.style.setProperty(\n        '--margem-do-topo-do-modal',\n        `${dtStatusBarHeight() + 10}px`\n      )\n\n      document.documentElement.style.setProperty(\n        '--margem-do-bottom-do-modal',\n        `${dtNavbarHeight() + 10}px`\n      )\n    </script>\n\n    <!-- AÇÕES -->\n    <script>\n      Main.style({ padding: `${dtStatusBarHeight() + 10}px 0px 0px 0px` })\n      HomeMenu.style({ bottom: `${dtNavbarHeight() + 10}px` })\n\n      ConfigMenu.on({ click: () => showConfigMenu() })\n\n      BatteryOptimizationButton.on({ click: () => dtBatteryOptimization() })\n      ApnConfigurationButton.on({ click: () => dtApnConfiguration() })\n\n      SpeedtestButton.on({ click: () => showModalSpeedtest() })\n      CloseModalSpeedtest.on({ click: () => hiddenModalSpeedtest() })\n\n      SelectCarrierButton.on({ click: () => showModalCarrierList() })\n      CloseModalCarrierList.on({ click: () => hiddenModalCarrierList() })\n\n      InputUserValue.on({ input: (e) => dtSetUsername(e.target.value) })\n      InputPasswordValue.on({ input: (e) => dtSetPassword(e.target.value) })\n      InputUUIDValue.on({ input: (e) => dtSetUUID(e.target.value) })\n\n      RefreshButton.on({ click: () => dtUpdate() })\n\n      LoggerButton.on({ click: () => showModalLogger() })\n      CloseModalLogger.on({ click: () => hiddenModalLogger() })\n      CleanLoggerContent.on({ click: () => dtClearLogs() })\n\n      StartStopVPNButton.on({ click: () => startStopVpn() })\n\n      ContentModalVpnState.html(vpnState())\n      CloseModalVpnState.on({ click: () => hiddenModalVpnState() })\n\n      CloseModalLoading.on({ click: () => hiddenModalLoading() })\n\n      CloseModalCheckUser.on({ click: () => hiddenModalCheckUser() })\n\n      CheckuserButton.on({ click: () => dtStartCheckUser() })\n\n      ClearDataAppButton.on({ click: () => showModalAlertClearData() })\n      CloseModalAlertClearData.on({ click: () => hiddenModalAlertClearData() })\n      BackModalAlertClearData.on({ click: () => hiddenModalAlertClearData() })\n      ConfirmModalAlertClearData.on({ click: () => dtCleanDataApp() })\n\n      CloseModalError.on({ click: () => hiddenModalError() })\n\n      RenewAccessButton.on({ click: () => openRenewLink() })\n\n      writeInputCarrierList()\n    </script>\n  </body>\n</html>\n",
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 3637,
        "label": "ANDROID WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_SUPPORT_BUTTON",
        "value": "<!DOCTYPE html>\n<html lang=\"pt-BR\">\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    <link\n      rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css\"\n    />\n\n    <title>Document</title>\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      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      body {\n        width: 100%;\n        height: 100vh;\n\n        display: flex;\n\n        background-color: transparent;\n      }\n\n      body div.container {\n        width: 100%;\n        height: 40px;\n\n        margin-top: auto;\n        margin-bottom: 60px;\n\n        display: flex;\n        align-items: center;\n\n        padding: 0px 10px;\n      }\n\n      body div.container div.btn-area {\n        width: 0;\n        height: inherit;\n\n        margin-right: 10px;\n\n        border-radius: 10px;\n\n        overflow-x: auto;\n        overflow-y: hidden;\n        white-space: nowrap;\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n        scroll-behavior: smooth;\n\n        background-color: #2e344040;\n\n        transition: width 0.5s ease;\n      }\n\n      body div.container div.btn-area.closed {\n        width: calc(100% - 50px);\n      }\n\n      body div.container div.btn-area::-webkit-scrollbar {\n        display: none;\n      }\n\n      body div.container div.btn-area button {\n        width: auto;\n        height: 40px;\n\n        border: 0;\n        border-radius: 10px;\n\n        margin-right: 5px;\n        padding: 0px 10px;\n\n        background-color: #2e3440cc;\n      }\n\n      body div.container div.btn-area button:last-child {\n        margin: 0;\n      }\n\n      body div.container div.btn-area button i {\n        color: #ffffff;\n        margin-right: 3px;\n\n        font-size: 0.9rem;\n      }\n\n      body div.container div.btn-area button span {\n        color: #ffffff;\n        font-family: 'Roboto';\n        font-weight: 300;\n      }\n\n      body div.container button.menu {\n        width: 40px;\n        height: 40px;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        margin-left: auto;\n\n        border: 0;\n        border-radius: 10px;\n        outline: none;\n\n        background-color: #2e344040;\n      }\n\n      body div.container button.menu i {\n        color: #ffffff;\n        font-size: 1rem;\n\n        transform: rotate(0deg);\n        transition: transform 0.5s ease-in-out;\n      }\n\n      body div.container button.menu i.menu-openned {\n        transform: scaleX(-1);\n        transition: transform 0.5s ease-in-out;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"container\">\n      <div class=\"btn-area\">\n        <button class=\"apn\">\n          <i class=\"bi bi-sliders\"></i>\n\n          <span>CONFIGURAR APN</span>\n        </button>\n\n        <button class=\"checkuser\">\n          <i class=\"bi bi-person\"></i>\n\n          <span>VERIFICAR USUÁRIO</span>\n        </button>\n\n        <button class=\"settings\">\n          <i class=\"bi bi-cloud-fog2\"></i>\n\n          <span>MAIS CONFIGURAÇÕES</span>\n        </button>\n      </div>\n\n      <button title=\"menu\" class=\"menu\">\n        <i class=\"bi bi-caret-left\"></i>\n      </button>\n    </div>\n\n    <script>\n      const menu = document.querySelector('body div.container button.menu')\n      const menuIcon = document.querySelector('div.container button.menu i')\n      const buttonArea = document.querySelector('.btn-area')\n\n      menu.addEventListener('click', (e) => {\n        menuIcon.classList.toggle('menu-openned')\n\n        buttonArea.classList.toggle('closed')\n      })\n\n      const apn = document.querySelector('.apn')\n      const checkuser = document.querySelector('.checkuser')\n      const config = document.querySelector('.settings')\n\n      apn.addEventListener('click', (e) => DtStartApnActivity.execute())\n\n      checkuser.addEventListener('click', (e) => DtStartCheckUser.execute())\n\n      config.addEventListener('click', (e) => DtStartWebViewActivity.execute())\n    </script>\n  </body>\n</html>\n",
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    },
    {
        "id": 3638,
        "label": "PAGINA WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_WEB_VIEW",
        "value": "<!DOCTYPE html>\n<html lang=\"pt-BR\">\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    <link\n      rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css\"\n    />\n\n    <title>STARKVPN</title>\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      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      body {\n        width: 100%;\n        min-height: 100vh;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        /* background-color: #222431;\n        background-image: url('https://basteon.me/assets/images/LOGO5.png');\n        background-size: 150px;\n        background-repeat: no-repeat;\n        background-position: 10px 10px; */\n\n        background: linear-gradient(to top right, #2b0045, white);\n        box-shadow: 0px 0px 100px 0px rgba(200, 0, 255, 0.5) inset;\n      }\n\n      body div.container {\n        width: 95%;\n        height: auto;\n\n        border-radius: 10px;\n\n        padding: 10px;\n\n        background-color: #2b004540;\n      }\n\n      body div.container ul,\n      body div.container ul li {\n        list-style: none;\n      }\n\n      body div.container ul {\n        width: 100%;\n        height: auto;\n      }\n\n      body div.container ul li {\n        width: 100%;\n        height: 40px;\n\n        background-color: #2b0045cc;\n\n        margin: 10px 0px;\n\n        border-radius: 10px;\n      }\n\n      body div.container ul li a {\n        width: 100%;\n        height: inherit;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        text-decoration: none;\n\n        outline: none;\n        user-select: none;\n        -webkit-user-select: none;\n        cursor: default;\n      }\n\n      body div.container ul li a i {\n        color: #ffffff;\n        margin-right: 5px;\n      }\n\n      body div.container ul li a span {\n        color: #ffffff;\n        font-family: 'Roboto';\n        font-weight: 300;\n      }\n\n      body div.renew-payment {\n        width: 95%;\n        height: 95vh;\n\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n\n        position: absolute;\n\n        border-radius: 10px;\n\n        background-color: #620496ff;\n\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);\n\n        z-index: 1;\n\n        opacity: 0;\n        visibility: hidden;\n\n        transition: all 0.2s linear;\n      }\n\n      body div.renew-payment.visible {\n        display: flex;\n        visibility: visible;\n\n        opacity: 1;\n        transition: all 0.2s linear;\n      }\n\n      body div.renew-payment div.close-renew-payment {\n        width: 40px;\n        height: 40px;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        border-radius: 10px;\n        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);\n\n        position: absolute;\n\n        top: 5px;\n        right: 5px;\n\n        background-color: #62049640;\n      }\n\n      body div.renew-payment div.close-renew-payment i {\n        color: #ffffff;\n        font-size: 1.6rem;\n      }\n\n      body div.renew-payment div.container-payment {\n        width: 95%;\n        height: auto;\n\n        display: flex; /*=*/\n        flex-direction: column;\n        align-items: center;\n\n        border-radius: 7px;\n\n        padding: 40px 10px;\n\n        background-color: #2e344040;\n      }\n\n      body div.renew-payment div.container-payment.off {\n        display: none;\n      }\n\n      body div.renew-payment div.container-payment h1 {\n        margin: 0;\n        margin-bottom: 20px;\n        padding: 0;\n\n        color: #ffffff;\n        font-family: 'Roboto', sans-serif;\n        text-align: center;\n        font-weight: 400;\n        font-size: 1.2rem;\n      }\n\n      body div.renew-payment div.container-payment p {\n        width: 100%;\n        height: 200px;\n\n        margin-bottom: 20px;\n\n        overflow-y: auto;\n        overflow-x: hidden;\n\n        color: #ffffff;\n        font-family: 'Roboto', sans-serif;\n        font-weight: 300;\n        text-align: center;\n\n        scroll-behavior: smooth;\n      }\n\n      body div.renew-payment div.container-payment div {\n        width: 98%;\n        height: 40px;\n\n        display: flex;\n        align-items: center;\n\n        margin-bottom: 10px;\n\n        border: 1px solid #6f12a9cc;\n        border-radius: 10px;\n        padding: 0 10px;\n        padding-right: 0px;\n\n        background-color: #3f0c59cc;\n      }\n\n      body div.renew-payment div.container-payment div i {\n        padding-right: 10px;\n        padding-top: 5px;\n        padding-bottom: 5px;\n\n        color: #ffffff;\n        font-size: 1rem;\n      }\n\n      body div.renew-payment div.container-payment div input {\n        width: 100%;\n        height: inherit;\n\n        border: 1px solid #6f12a9cc;\n        border-right: none;\n        border-top-right-radius: 10px;\n        border-bottom-right-radius: 10px;\n        outline: none;\n\n        padding-left: 10px;\n\n        color: #ffffff;\n        font-family: 'Roboto', sans-serif;\n        font-size: 1rem;\n\n        background-color: inherit;\n      }\n\n      body div.renew-payment div.container-payment div input::placeholder {\n        color: #cccccc;\n      }\n\n      body div.renew-payment div.container-payment button {\n        width: 80%;\n        height: 40px;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        margin-top: 5px;\n\n        border: 1px solid #6f12a9cc;\n        border-radius: 10px;\n\n        background-color: #3f0c59cc;\n      }\n\n      body div.renew-payment div.container-payment button i {\n        margin-right: 6px;\n        color: #ffffff;\n      }\n\n      body div.renew-payment div.container-payment button span {\n        color: #ffffff;\n        font-family: 'Roboto', sans-serif;\n        font-size: 0.9rem;\n      }\n\n      body div.renew-payment div.loading {\n        width: 100%;\n        height: 100%;\n\n        display: none;\n        justify-content: center;\n        align-items: center;\n      }\n\n      body div.renew-payment div.loading.on {\n        width: 100%;\n        height: 100%;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      @keyframes spin {\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n      body div.renew-payment div.loading i {\n        color: #ffffff;\n        font-size: 5rem;\n\n        animation: spin 1s linear infinite;\n      }\n\n      body div.renew-payment div.alert {\n        width: 90%;\n        height: auto;\n\n        display: none;\n        justify-content: center;\n        align-content: center;\n\n        position: absolute;\n        bottom: 10px;\n\n        margin-top: 10px;\n        padding: 10px;\n\n        border-radius: 7px;\n\n        background-color: #3f0c59cc;\n      }\n\n      body div.renew-payment div.alert.on {\n        display: flex;\n      }\n\n      body div.renew-payment div.alert span {\n        width: 90%;\n        height: 30px;\n\n        padding-top: 8px;\n\n        display: flex;\n        justify-content: center;\n\n        color: #ffffff;\n        font-family: 'Roboto', sans-serif;\n        font-weight: 300;\n        text-align: center;\n        white-space: break-spaces;\n        overflow-y: auto;\n        overflow-x: hidden;\n      }\n\n      body div.renew-payment div.container-payment-confirm {\n        width: 95%;\n        max-width: 700px;\n        height: auto;\n\n        display: none; /*==*/\n        flex-direction: column;\n        align-items: center;\n\n        border-radius: 7px;\n\n        padding: 40px 10px;\n\n        background-color: #2e344040;\n      }\n\n      body div.renew-payment div.container-payment-confirm.on {\n        display: flex;\n      }\n\n      body div.renew-payment div.container-payment-confirm h1 {\n        margin: 0;\n        margin-bottom: 10px;\n        padding: 0;\n\n        color: #ffffff;\n        font-family: 'Roboto', sans-serif;\n        text-align: center;\n        font-weight: 400;\n        font-size: 1.2rem;\n      }\n\n      body div.renew-payment div.container-payment-confirm p {\n        width: 100%;\n        max-height: 200px;\n\n        margin: 20px 0px;\n\n        overflow-y: auto;\n        overflow-x: hidden;\n\n        color: #ffffff;\n        font-family: 'Roboto', sans-serif;\n        font-weight: 300;\n        text-align: center;\n\n        scroll-behavior: smooth;\n      }\n\n      body div.renew-payment div.container-payment-confirm img {\n        width: 80%;\n        max-width: 400px;\n        height: auto;\n\n        padding: 10px;\n\n        border: 1px solid #6f12a9cc;\n        border-radius: 10px;\n\n        -webkit-user-select: none;\n        user-select: none;\n        pointer-events: none;\n\n        background-color: #3f0c59cc;\n      }\n\n      body div.renew-payment div.container-payment-confirm div {\n        width: 90%;\n        height: 40px;\n\n        display: flex;\n        align-items: center;\n\n        padding: 0px 5px;\n\n        border: 1px solid #6f12a9cc;\n        border-radius: 10px;\n\n        background-color: #3f0c59cc;\n      }\n\n      body div.renew-payment div.container-payment-confirm div i {\n        width: 40px;\n        height: inherit;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        padding-right: 4px;\n\n        border-top-left-radius: 10px;\n        border-bottom-left-radius: 10px;\n\n        color: #ffffff;\n        font-size: 1.2rem;\n\n        background-color: inherit;\n      }\n\n      body div.renew-payment div.container-payment-confirm div input {\n        width: calc(100% - 40px);\n        height: inherit;\n        padding: 0px 5px;\n\n        border: 0;\n        border-left: 1px solid #6f12a9cc;\n        border-top-right-radius: 10px;\n        border-bottom-right-radius: 10px;\n        outline: none;\n\n        color: #ffffff;\n        font-family: 'Roboto', sans-serif;\n        font-weight: 400;\n        font-size: 0.8rem;\n\n        background-color: inherit;\n      }\n\n      body div.renew-payment div.container-payment-success {\n        width: 95%;\n        max-width: 700px;\n        height: auto;\n\n        display: none; /*===*/\n        flex-direction: column;\n        align-items: center;\n\n        border-radius: 7px;\n\n        padding: 40px 10px;\n\n        background-color: #2e344040;\n      }\n\n      body div.renew-payment div.container-payment-success.on {\n        display: flex;\n      }\n\n      body div.renew-payment div.container-payment-success h1 {\n        margin: 0;\n        margin-bottom: 10px;\n        padding: 0;\n\n        color: #ffffff;\n        font-family: 'Roboto', sans-serif;\n        text-align: center;\n        font-weight: 400;\n        font-size: 1.2rem;\n      }\n\n      @keyframes pulse-shadow {\n        0% {\n          box-shadow: 0 0 0 0 rgb(0, 255, 0);\n        }\n        100% {\n          box-shadow: 0 0 0 7px rgba(0, 128, 0, 0);\n        }\n      }\n\n      body div.renew-payment div.container-payment-success i.bi-check2 {\n        width: 30vw;\n        max-width: 150px;\n        height: 30vw;\n        max-height: 150px;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        margin: 15px 0px;\n\n        border-radius: 50%;\n        box-shadow: 0 0 0 0 rgba(0, 128, 0, 0.7);\n\n        background-color: #3f0c59cc;\n\n        color: #00ff00;\n        font-size: 3rem;\n\n        animation: pulse-shadow 1.3s infinite;\n      }\n\n      body div.renew-payment div.container-payment-success p {\n        width: 100%;\n        max-height: 200px;\n\n        margin: 10px 0px;\n\n        overflow-y: auto;\n        overflow-x: hidden;\n\n        color: #ffffff;\n        font-family: 'Roboto', sans-serif;\n        font-weight: 300;\n        text-align: center;\n\n        scroll-behavior: smooth;\n      }\n\n      body div.renew-payment div.container-payment-success div {\n        width: 90%;\n        height: 40px;\n\n        display: flex;\n        align-items: center;\n\n        padding: 0px 5px;\n\n        border: 1px solid #6f12a9cc;\n        border-radius: 10px;\n\n        background-color: #3f0c59cc;\n      }\n\n      body div.renew-payment div.container-payment-success div i {\n        width: 40px;\n        height: inherit;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        padding-right: 4px;\n\n        border-top-left-radius: 10px;\n        border-bottom-left-radius: 10px;\n\n        color: #ffffff;\n        font-size: 1.2rem;\n\n        background-color: transparent;\n      }\n\n      body div.renew-payment div.container-payment-success div input {\n        width: calc(100% - 40px);\n        height: inherit;\n        padding: 0px 5px;\n\n        border: 0;\n        border-left: 1px solid #6f12a9cc;\n        border-top-right-radius: 10px;\n        border-bottom-right-radius: 10px;\n        outline: none;\n\n        color: #ffffff;\n        font-family: 'Roboto', sans-serif;\n        font-weight: 400;\n        font-size: 0.8rem;\n\n        background-color: transparent;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"container\">\n      <ul>\n        <!-- <li>\n          <a href=\"\">\n            <i class=\"bi bi-box-arrow-up-right\"></i>\n            <span>Acessar site</span>\n          </a>\n        </li> -->\n\n        <!-- <li>\n          <a href=\"\">\n            <i class=\"bi bi-file-text\"></i>\n            <span>Termos de uso</span>\n          </a>\n        </li> -->\n\n        <li id=\"renovar\">\n          <a href=\"\">\n            <i class=\"bi bi-wallet2\"></i>\n            <span>Renovar acesso</span>\n          </a>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"renew-payment\" id=\"renew-payment-area\">\n      <div class=\"close-renew-payment\" id=\"close-renew-payment\">\n        <i class=\"bi bi-x\"></i>\n      </div>\n\n      <div class=\"container-payment\">\n        <h1>RENOVAR USUÁRIO</h1>\n\n        <p>\n          Insira o seu usuário e senha abaixo para renovar o pagamento do seu\n          acesso. <br /><br />\n          Após confirmar o envio das informações corretamente, será gerado um\n          código QR do Pix para você copiar e colar no aplicativo do seu banco e\n          efetuar a transferência. <br /><br />\n          Após o pagamento ser confirmado, o seu acesso ao aplicativo será\n          estendido por mais 30 dias.<br /><br />\n          Caso o usuário não exista mais no sistema, entre em contato com um\n          vendedor para adquirir um novo login/usuário para acessar o\n          BasteonVPN.\n        </p>\n\n        <div>\n          <i class=\"bi bi-person\"></i>\n          <input type=\"text\" placeholder=\"usuario\" id=\"input-user\" />\n        </div>\n        <div>\n          <i class=\"bi bi-key\"></i>\n          <input type=\"password\" placeholder=\"senha\" id=\"input-password\" />\n        </div>\n\n        <button id=\"renew-button\">\n          <i class=\"bi bi-wallet\"></i>\n          <span>RENOVAR</span>\n        </button>\n      </div>\n\n      <div class=\"container-payment-confirm\" id=\"pay-confirm-area\">\n        <h1>RENOVAR USUÁRIO</h1>\n        <p>Escaneie o QR Code abaixo e efetue a transferência.</p>\n        <img src=\"\" alt=\"QR Code\" id=\"qr-code-image\" />\n        <p>\n          Caso queira o QR Code copiar e colar, é só tocar no código QR Code\n          abaixo que já será copiado.\n        </p>\n        <div class=\"input\" id=\"container-input-area\">\n          <i class=\"bi bi-qr-code\"></i>\n          <input type=\"text\" id=\"qr-code-image-value\" readonly />\n        </div>\n      </div>\n\n      <div class=\"container-payment-success\" id=\"success-pay-area\">\n        <h1>PAGAMENTO CONFIRMADO</h1>\n\n        <i class=\"bi bi-check2\"></i>\n\n        <p>Seu id de pagamento</p>\n\n        <div class=\"input\" id=\"input-id-area\">\n          <i class=\"bi bi-filetype-txt\"></i>\n          <input type=\"text\" id=\"payment-id\" readonly />\n        </div>\n      </div>\n\n      <div class=\"loading\">\n        <i class=\"bi bi-arrow-clockwise\"></i>\n      </div>\n\n      <div class=\"alert\">\n        <span></span>\n      </div>\n    </div>\n\n    <script>\n      const renewPayment = document.querySelector('#renovar')\n      const renewPaymentArea = document.querySelector('#renew-payment-area')\n      const closePaymentArea = document.querySelector('#close-renew-payment')\n\n      renewPayment.addEventListener('click', (e) => {\n        e.preventDefault()\n        renewPaymentArea.classList.add('visible')\n      })\n\n      closePaymentArea.addEventListener('click', (e) => {\n        e.preventDefault()\n        renewPaymentArea.classList.remove('visible')\n      })\n\n      const containerPaymentArea = document.querySelector('.container-payment')\n      const inputUser = document.querySelector('#input-user')\n      const inputUserPassword = document.querySelector('#input-password')\n      const inputButton = document.querySelector('#renew-button')\n      const alert = document.querySelector('.alert')\n      const alertText = document.querySelector('.alert span')\n      const loadingIcon = document.querySelector('div.loading')\n\n      const containerPayConfirm = document.querySelector('#pay-confirm-area')\n      const containerInputArea = document.querySelector('#container-input-area')\n      const qrCodeImage = document.querySelector('#qr-code-image')\n      const inputQrCodePixValue = document.querySelector('#qr-code-image-value')\n\n      const successPaymentArea = document.querySelector('#success-pay-area')\n      const paymentSuccessInputArea = document.querySelector('#input-id-area')\n      const inputIdPaymentPixValue = document.querySelector('#payment-id')\n\n      inputButton.addEventListener('click', async (e) => {\n        e.preventDefault()\n\n        loadingIcon.classList.add('on')\n        containerPaymentArea.classList.add('off')\n\n        try {\n          const response = await fetch(\n            'https://pay.rabelossh.xyz/criar_pagamento',\n            {\n              method: 'POST',\n              headers: {\n                'content-type': 'application/json',\n              },\n              body: JSON.stringify({\n                usuario: inputUser.value.trim(),\n                senha: inputUserPassword.value.trim(),\n              }),\n            }\n          )\n\n          const json = await response.json()\n\n          console.log(json)\n\n          if (!json.txId) {\n            loadingIcon.classList.remove('on')\n            containerPaymentArea.classList.remove('off')\n            alert.classList.add('on')\n            alertText.innerHTML = json.message\n\n            setTimeout(() => {\n              alert.classList.remove('on')\n            }, 5000)\n          } else if (json.txId) {\n            inputIdPaymentPixValue.setAttribute('value', json.txId)\n            qrCodeImage.setAttribute('src', json.imagemQrcode)\n            inputQrCodePixValue.setAttribute('value', json.qrcode)\n\n            loadingIcon.classList.remove('on')\n            containerPaymentArea.classList.add('off')\n            containerPayConfirm.classList.add('on')\n\n            const interval = setInterval(async () => {\n              const response = await fetch(\n                'https://pay.rabelossh.xyz/verificar_pagamento',\n                {\n                  method: 'POST',\n                  headers: { 'content-type': 'application/json' },\n                  body: JSON.stringify({ txId: json.txId }),\n                }\n              )\n\n              const value = await response.json()\n              console.log(value)\n\n              if (value.status_do_pagamento === true) {\n                containerPayConfirm.classList.remove('on')\n                successPaymentArea.classList.add('on')\n                clearInterval(interval)\n              }\n            }, 1000)\n          }\n        } catch (e) {\n          loadingIcon.classList.remove('on')\n          containerPaymentArea.classList.remove('off')\n          alert.classList.add('on')\n          alertText.innerHTML = e\n\n          setTimeout(() => {\n            alert.classList.remove('on')\n          }, 5000)\n        }\n      })\n\n      containerInputArea.addEventListener('click', (e) => {\n        inputQrCodePixValue.select()\n        document.execCommand('copy')\n      })\n\n      paymentSuccessInputArea.addEventListener('click', (e) => {\n        inputIdPaymentPixValue.select()\n        document.execCommand('copy')\n      })\n    </script>\n  </body>\n</html>\n",
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "c00b0e23-ef88-46be-9c75-f214b67c888a"
    }
]