[
    {
        "id": 3542,
        "label": "Nome do app",
        "name": "APP_NAME",
        "value": "DTunnel VPN",
        "type": "STRING",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3543,
        "label": "Logo do app",
        "name": "APP_LOGO",
        "value": "https://i.ibb.co/72Wkx7M/DTxbe2wsre.png",
        "type": "IMAGE",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3544,
        "label": "Imagem de fundo",
        "name": "APP_BACKGROUND_IMAGE",
        "value": "https://i.ibb.co/HH6wyzB/DTzdltarix.jpg",
        "type": "IMAGE",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3545,
        "label": "Tipo do fundo do app",
        "name": "APP_BACKGROUND_TYPE",
        "value": {
            "options": [
                {
                    "label": "Imagem",
                    "value": "IMAGE"
                },
                {
                    "label": "Cor",
                    "value": "COLOR"
                }
            ],
            "selected": "IMAGE"
        },
        "type": "SELECT",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3546,
        "label": "Cor de fundo",
        "name": "APP_BACKGROUND_COLOR",
        "value": "#080e16c7",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3547,
        "label": "Cor do card inicial",
        "name": "APP_CARD_COLOR",
        "value": "#a1c8ff00",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 8050,
        "label": "Raio do card inicial",
        "name": "APP_CARD_RADIUS",
        "value": 20,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 8051,
        "label": "Cor do card de status",
        "name": "APP_CARD_STATUS_COLOR",
        "value": "#a1c8ff00",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 8052,
        "label": "Raio do card de status",
        "name": "APP_CARD_STATUS_RADIUS",
        "value": 25,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3548,
        "label": "Cor do card de configurações",
        "name": "APP_CARD_CONFIG_COLOR",
        "value": "#0d7a34ff",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3549,
        "label": "Cor do fundo dos dialogs",
        "name": "APP_DIALOG_BACKGROUND_COLOR",
        "value": "#0d7a34ff",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 15111,
        "label": "Cor do fundo do dialog de log",
        "name": "APP_DIALOG_LOGGER_COLOR",
        "value": "#000000ff",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3550,
        "label": "Cor das bordas",
        "name": "APP_BORDER_COLOR",
        "value": "#f7fdffff",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 8053,
        "label": "Cor dos inputs",
        "name": "APP_INPUT_COLOR",
        "value": "#000000ff",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 8054,
        "label": "Raio dos inputs",
        "name": "APP_INPUT_RADIUS",
        "value": 25,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3551,
        "label": "Cor dos textos",
        "name": "APP_TEXT_COLOR",
        "value": "#FFFFFFFF",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3552,
        "label": "Cor dos botões",
        "name": "APP_BUTTON_COLOR",
        "value": "#008a00ff",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 8055,
        "label": "Raio dos botões",
        "name": "APP_BUTTON_RADIUS",
        "value": 25,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3553,
        "label": "Cor dos icones",
        "name": "APP_ICON_COLOR",
        "value": "#FFFFFFFF",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3554,
        "label": "Exibir modo de conexão",
        "name": "APP_SHOW_CONNECTION_MODE",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 26008,
        "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": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 8056,
        "label": "Iniciar o app automaticamente ao reiniciar o dispositivo",
        "name": "APP_AUTO_START",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 8057,
        "label": "Usar limiter de conexão",
        "name": "APP_CONNECTION_LIMITER",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 15112,
        "label": "Usar botão de atualizações",
        "name": "APP_BTN_UPDATE_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 15113,
        "label": "Usar botão de registros",
        "name": "APP_BTN_LOGGER_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 15114,
        "label": "Usar botão de pagina webview",
        "name": "APP_BTN_PAGE_ENABLED",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 15115,
        "label": "Ativar dialog de erros",
        "name": "APP_DIALOG_ERROR_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 15116,
        "label": "Ativar dialog de checkuser",
        "name": "APP_CHECKUSER_DIALOG_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 15117,
        "label": "Ativar toast de sucesso",
        "name": "APP_SUCCESS_TOAST_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 15118,
        "label": "Ativar toast de erro",
        "name": "APP_ERROR_TOAST_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 15119,
        "label": "Usar layout webview",
        "name": "APP_LAYOUT_WEBVIEW_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3555,
        "label": "Mensagem Teste",
        "name": "APP_MESSAGE",
        "value": null,
        "type": "TEXT",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3557,
        "label": "URL de atualização do aplicativo",
        "name": "APP_UPDATE_URL",
        "value": null,
        "type": "URL",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 3556,
        "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": "NONE"
        },
        "type": "SELECT",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 15120,
        "label": "LAYOUT WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_LAYOUT_WEBVIEW",
        "value": "<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>DTunnel</title>

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>

    <style>
        @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');

        :root {
            --background-img: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0, 148, 20, 1) 100%);
            --logo-img-url: url(https://plenonet.com.br/assets/images/plenonet-512512px-2-512x512.webp);

            --input-border-radius: 5px;
            --input-background-color: #0a091a55;

            --card-border-radius: 5px;
            --card-background-color: #0b092868;

            --btn-background-color: #0a091a55;
            --btn-border-radius: 5px;

            --modal-background-color: #0b092868;

            --text-color: #ffffff;
            --icon-color: #FFFFFF;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Roboto', sans-serif;
        }

        body {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 465px;
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0, 148, 20, 1) 100%);
}

.logo {
    width: 100%;
	margin-bottom: 10px;
}

.card {
    background: #080808;
    border-radius: 20px;
    border: 1px solid #1e1e1e !important;
    box-shadow: -8px 12px 20px 0 rgb(13 15 18 / 63%) !important;
    padding: 15px !important;
    max-width: 450px;
    height: auto;
    position: relative;
}

        .btn-dark {
    border: none;
    background: linear-gradient( to top right, #00ad17, #121212 );
    border-radius: 15px;
}

.modal-content {
    background-color: transparent;
    backdrop-filter: blur(25px);
}
		
		.tool {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tool-bt {
    background: linear-gradient( to top right, #00ad17, #121212 );
    border-radius: 20px;
    color: #ffffff !important;
    height: 35px;
    width: 100%;
    border: var(--btn-border);
}

.input-group, .form-control, .input-group-text {
    background: #00ad17;
    color: var(--icon-color);
    border: none;
    border-radius: 15px;
    outline: none;
}

        .form-control::placeholder {
            color: var(--text-color);
        }

        .form-control:focus {
            color: var(--text-color);
            outline: none;
            box-shadow: none;
        }

        .input-group-text {
            padding-right: 0;
        }
		

.fs-5 {
    font-size: 1rem!important;
}

nav {
    background: linear-gradient( to top right, #00ad17, #121212 );
    border-radius: 20px;
    font-size: 0;
    width: 100%;
    max-width: 450px;
    height: auto;
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
}

nav a {
  line-height: 35px;
  height: 100%;
  font-size: 15px;
  display: inline-block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-align: center;
  color: white !important;
  cursor: pointer;
}
nav .animation {
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  transition: all .5s ease 0s;
  border-radius: 8px;
}
a:nth-child(1) {
  width: 30%;
}
a:nth-child(2) {
  width: 30%;
}
a:nth-child(3) {
  width: 40%;
}

nav .start-home, a:nth-child(1):hover~.animation {
  width: 30%;
  left: 0;
  background-color: #121212;
  border-radius: 20px;
}
nav .start-about, a:nth-child(2):hover~.animation {
  width: 30%;;
  left: 30%;
  background-color: #121212;
  border-radius: 20px;
}
nav .start-blog, a:nth-child(3):hover~.animation {
  width: 40%;
  left: 60%;
  background-color: #121212;
  border-radius: 20px;
}

body {
  font-size: 12px;
  font-family: sans-serif;
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0, 148, 22, 1) 100%);
}

@media (min-width: 768px) {
.container, .container-md, .container-sm {
    max-width: 100%;
}
}

.rede {
color: #007506;
}

.iplocal {
color: #ffffff;
}

.containerlocal {
    background: #080808;
    border-radius: 20px;
    border: 1px solid #1e1e1e !important;
    padding: 15px !important;
    width: 95%;
    max-width: 450px;
    height: auto;
    position: relative;
    margin-top: 50px;
    margin-bottom: -70px;
}

.hidden {
  display: none;
}

    </style>
</head>

<body>
    <div class="containerlocal"> 	
<span class="font-semibold text-xs mr-2" style="color: #ffffff;"">📢	IP Local da sua operadora:</span><span class="rede font-semibold text-xs mr-2" id="name">REDE</span> <span class="iplocal font-semibold text-xs" id="ip">127.0.0.1</span>	
</div>
                
    <div class="container">    
<div class="card border-0 p-2 shadow mb-3 w-100">
<span style="color:#ffffff;font-size: 18px;border-radius: 15px;padding: 0px 0px 0px 5px;margin-bottom: 10px;display: block !important;text-align: start;">MatrixNet® - Versão: 10.1.1</span>
<img class="logo" src="https://a.imagem.app/oJvM03.png">
            <div class="input-group mb-2 shadow" id="config-area">
                <input class="form-control" type="text" placeholder="CONFIGURAÇÃO" readonly title="configurações"
                    id="config" style="background-color: #080808;" />
                <span class="input-group-text me-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
                        class="bi bi:bar-chart" viewBox="0 0 16 16">
                        <path
                            d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/></svg>
							</span>
            </div>
            <div class="input-group input mb-2 shadow">
                <span class="input-group-text">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
                        class="bi bi:file-person" viewBox="0 0 16 16">
                        <path
                            d="M12 1a1 1 0 0 1 1 1v10.755S12 11 8 11s-5 1.755-5 1.755V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"/><path d="M8 10a3 3 0 1 0 0-6a3 3 0 0 0 0 6z"/></g></svg>
                </span>
                <input class="form-control" type="text" placeholder="usuario" id="username" style="background-color: #080808;" />
            </div>
            <div class="input-group input mb-2 shadow">
                <span class="input-group-text">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi:file-earmark-lock"
                        viewBox="0 0 16 16">
                        <path
                           d="M10 7v1.076c.54.166 1 .597 1 1.224v2.4c0 .816-.781 1.3-1.5 1.3h-3c-.719 0-1.5-.484-1.5-1.3V9.3c0-.627.46-1.058 1-1.224V7a2 2 0 1 1 4 0zM7 7v1h2V7a1 1 0 0 0-2 0zM6 9.3v2.4c0 .042.02.107.105.175A.637.637 0 0 0 6.5 12h3a.64.64 0 0 0 .395-.125c.085-.068.105-.133.105-.175V9.3c0-.042-.02-.107-.105-.175A.637.637 0 0 0 9.5 9h-3a.637.637 0 0 0-.395.125C6.02 9.193 6 9.258 6 9.3z"/><path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/></g></svg>
						   </span>
                <input class="form-control" type="password" placeholder="senha" id="password" style="background-color: #080808;" />
                <span class="input-group-text me-2"
                    onclick="password.type==`text`?password.type = `password`:password.type = `text`">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
                        viewBox="0 0 16 16">
                        <path
                            d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                        <path
                            d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
                    </svg>
                </span>
            </div>
			     <div class="input-group input mb-2 shadow">
                <span class="input-group-text">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-key"
                        viewBox="0 0 16 16">
                        <path
                            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" />
                        <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
                    </svg>
                </span>
                <input class="form-control" type="text" placeholder="V2ray UUID" id="uuid" style="background: #080808;" />
                <span class="input-group-text me-2"
                    onclick="uuid.type==`text`?uuid.type = `password`:uuid.type = `text`">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
                        viewBox="0 0 16 16">
                        <path
                            d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                        <path
                            d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
                    </svg>
                </span>
            </div>
            <button class="btn btn-dark w-100 shadow" id="start-stop">INICIAR</button>
			      <nav>
  <a id="sync" onclick="DtStartAppUpdate.execute()">Atualizar</a>
  <a id="logger">Registro</a>
  <a onclick="ToolsModal.show()">Ajustes</a>
  <div class="animation start-home"></div>
</nav>
        </div>
  
        <div class="card my-3 w-100 text-center border-0 p-2 shadow text-light fs-5 text-uppercase fw-bold" id="state" style="padding: 5px !important; font-size: 15px !important;">
        </div>
<p style="color: #5e9ca0;"><span style="color: #ffffff; font-size: 17px;">MatrixNet®- Conex&otilde;es @2020-2024</span></p>
  </div>
    </div>
    <div class="modal fade" id="checkUserModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content rounded-3 shadow">
                <div class="modal-header border-bottom-0 pb-0">
                    <h1 class="modal-title fs-5 chk-title text-light"></h1>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p class="fs-5 mb-0 chk-message text-light"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="errorModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content rounded-3 shadow">
                <div class="modal-header border-bottom-0 pb-0">
                    <h1 class="modal-title fs-5 err-title text-light"></h1>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p class="fs-5 mb-0 err-message text-light"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="loggerModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content rounded-3 shadow">
                <div class="modal-body p-1 text-center">
                    <ul class="list-group bg-transparent overflow-y-auto logger-content" style="max-height: 600px;">
                    </ul>
                </div>
                <div class="modal-footer flex-nowrap p-0">
                    <button type="button" class="btn btn-lg btn-dark text-light w-100 clear-logger">LIMPAR</button>
                    <button type="button" class="btn btn-lg btn-dark text-light w-100"
                        data-bs-dismiss="modal">FECHAR</button>
                </div>
            </div>
        </div>
    </div>
	    <div class="tool webm modal fade" index="-1" id="ToolsModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="tool modal-header">
        <h5 class="modal-title" style="color:#ffffff;">Configurações do aplicativo</h5>
      </div>
      <div class="modal-body">
        <button class="tool-bt rounded-2xl text-white" onclick="DtStartWebViewActivity.execute('https://painelwebatlas23.shop/renovar.php')"><i class="info2 bi bi-globe mr-2"></i>Renovar meu Plano</button>
        </div>
        <div class="modal-body">
        <button class="tool-bt rounded-2xl text-white" onclick="DtStartWebViewActivity.execute('https://docs.plenonet.com.br/instalacao-e-conexao/tutoriais-plenonet')"><i class="info2 bi bi-globe mr-2"></i>Acessar turoriais</button>
        </div>	
		<div class="modal-body">
         <button class="tool-bt rounded-2xl text-white" onclick="DtStartApnActivity.execute()"><i class="info2 bi bi-wifi mr-2"></i>Alterar protocolo de APN</button>
        </div>
        <div class="modal-body">
        <button class="tool-bt rounded-2xl text-white" onclick="DtIgnoreBatteryOptimizations.execute()"><i class="info2 bi bi-battery-full mr-2"></i>Otimizar Bateria</button>
      </div>
      <div class="modal-body">
        <button class="tool-bt rounded-2xl text-white" onclick="DtCleanApp.execute()"><i class="info2 bi bi-trash3 mr-2"></i>Limpar cachê e dados</button>
        </div>
		<div class="modal-body">
		<button class="tool-bt rounded-2xl text-white" onclick="DtStartWebViewActivity.execute('https://docs.plenonet.com.br/termos-de-uso/termos-de-uso-do-aplicativo')"><i class="info2 bi bi-globe mr-2"></i>Termos de uso do aplicativo</button>
        </div>
      <div class="tool modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" style="background-color: var(--btn-modal);">FECHAR</button>
        
      </div>
    </div>
  </div>
</div>
    <div class="modal fade" id="configModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content rounded-3 shadow">
                <div class="modal-header border-bottom-0 pb-0">
                    <h1 class="modal-title fs-5 text-white">CONFIGURAÇÕES</h1>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body p-1 text-center">
                    <ul class="list-group bg-transparent overflow-y-auto config-body" style="max-height: 600px;">
                        <li class="list-group-item bg-transparent text-white border-0">
                            <p>CATEGORIA</p>
                            <ul class="list-group bg-transparent overflow-y-auto text-start">
                                <li
                                    class="list-group-item d-flex bg-transparent text-white border-0 border-bottom rounded-0">
                                    <img src="https://cdn-icons-png.flaticon.com/512/3686/3686811.png" width="40"
                                        height="40">
                                    <div class="d-flex flex-column ms-2 w-100">
                                        <span>CONFIG 01</span>
                                        <span>DESC 01</span>
                                    </div>
                                    <div class="d-flex flex-column ms-2 w-100">
                                        <span class="text-end">CONFIG_MODE</span>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
		   <div class="modal fade" id="RenovarModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content rounded-3 shadow">
                <div class="modal-header border-bottom-0 py-3">
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body ratio rounded-bottom-3" style="height: 600px;">
                    <div class="spinner d-flex w-100 h-100 align-items-center justify-content-center">
                        <div class="spinner-border text-light p-5" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                    <iframe class="rounded-bottom-3" id="RenovarFrame"></iframe>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
		
		     <script>
        class AndroidMock {
            static getLocalIP() {
                return '192.168.0.1';
            }
    
            static getConfig() {
                return JSON.stringify({
                    urlCheckUser: ' http://134.65.228.107:5454'
                });
            }
    
            static getNetworkName() {
                return 'REDE';
            }
    
            static openRadioInfo() {
                console.log('openRadioInfo');
            }
        }
    </script>
	
	    <script>
        function showLocalIP(android) {
            console.log(android.getNetworkName());
            document.getElementById('name').innerHTML = ' ' + android.getNetworkName() + ':';
            document.getElementById('ip').innerHTML = android.getLocalIP();
    
            setInterval(() => {
                document.getElementById('name').innerHTML =
                    ' ' + android.getNetworkName() + ':';
                document.getElementById('ip').innerHTML = android.getLocalIP();
            }, 2000)
        }
		
		        window.onload = function () {
            const android = window.Android || AndroidMock;
            showLocalIP(android);
        }
		
		function mostrar(id) {
  if (document.getElementById(id).style.display !== "none") {
    document.getElementById(id).style.display = "none";
    return;
  }
  Array.from(document.getElementsByClassName("hidden")).forEach(
    div => (div.style.display = "none")
  );
  document.getElementById(id).style.display = "block";
}
		
		    </script>
		
    <script>
        const configArea = document.querySelector('#config-area')
        const config = document.querySelector('#config')
        const username = document.querySelector('#username')
        const password = document.querySelector('#password')
		const uuid = document.querySelector('#uuid')
        const logger = document.querySelector('#logger')
		
		const networkStatus = document.querySelector('#section.local-ip')
		
        const startStopVpn = document.querySelector('#start-stop')
        const stateStatus = document.querySelector('#state')

        const loggerModal = new bootstrap.Modal(document.querySelector('#loggerModal'))
        const checkUserModal = new bootstrap.Modal(document.querySelector('#checkUserModal'))
        const errorModal = new bootstrap.Modal(document.querySelector('#errorModal'))
        const configModal = new bootstrap.Modal(document.querySelector('#configModal'))
		
		const ToolsModal = new bootstrap.Modal(document.querySelector('#ToolsModal'))

        const clearLogger = document.querySelector('.clear-logger')

        const RenovarModal = new bootstrap.Modal(document.querySelector('#RenovarModal'))

        configArea.addEventListener('click', e => showConfigsModal())
        username.addEventListener('input', e => DtUsername.set(e.target.value))
        password.addEventListener('input', e => DtPassword.set(e.target.value))
		uuid.addEventListener('input', e => DtUuid.set(e.target.value))
        logger.addEventListener('click', e => loggerModal.show())

        startStopVpn.addEventListener('click', (e) => {
            if (DtGetVpnState.execute() != 'DISCONNECTED') {
                DtExecuteVpnStop.execute()
            } else {
                DtExecuteVpnStart.execute()
            }
        })
        clearLogger.addEventListener('click', () => DtClearLogs.execute())

        RenovarModal._element.addEventListener('shown.bs.modal', () => {
            const iframe = document.querySelector('#RenovarFrame');
            if (!iframe.src) {
                iframe.src = 'https://painel.plenonet.com.br/renovar.php'
                iframe.addEventListener('load', () => {
                    mp3Modal._element.querySelector('.spinner').classList.add('d-none')
                })
            }
        })
        RenovarModal._element.addEventListener('hide.bs.modal', () => {
            const iframe = document.querySelector('#RenovarFrame');
            iframe.src = '';
        })

        Object.defineProperty(String.prototype, 't', {
            value: function t() {
                return window?.DtTranslateText?.execute('' + this) ?? '' + this
            },
            writable: true,
            configurable: true,
        })

        const dtConfigClickListener = () => {
            const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{ "auth": {}, "mode": "v2ray" }`)
			const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
            config.placeholder = data.name ?? 'LBL_CHOOSE_CONFIG'.t()
            username.parentElement.style.display = !data?.auth?.username && !isV2ray ? 'flex' : 'none';
            password.parentElement.style.display = !data?.auth?.password && !isV2ray ? 'flex' : 'none';
			uuid.parentElement.style.display = !data?.auth?.v2ray_uuid && isV2ray ? 'flex' : 'none';
        }

        const dtVpnStateListener = state => {
            const isRunning = state != 'DISCONNECTED';

            stateStatus.innerHTML = ('LBL_STATE_' + state).t()
            startStopVpn.innerHTML = isRunning ? 'LBL_BTN_STOP'.t() : 'LBL_BTN_START'.t()

            if (isRunning) {
                username.setAttribute('readonly', 'true')
                password.setAttribute('readonly', 'true')
            } else {
                username.removeAttribute('readonly')
                password.removeAttribute('readonly')
            }

            if (state == 'CONNECTING') dtShowSuccessToastListener('Conectando...')
        }

        const dtCheckUserStartedListener = () => {
		const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{}`)
		const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
            if (isV2ray) return;
            const html = `
            <div class="d-flex justify-content-center">
                <div class="spinner-border p-5" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
            `

            checkUserModal._element.querySelector('.chk-title').textContent = 'CHECK USER'
            checkUserModal._element.querySelector('.chk-message').innerHTML = html;
            checkUserModal.show()
        }

        const dtCheckUserModelListener = model => {
            const data = JSON.parse(model ?? `{"username": "test"}`)
            const html = `
                <div class="d-flex flex-column text-white">
                    <span>👤Nome de usuario: ${data.username}</span>
                    <span>📆Expira em: ${data.expiration_date}</span>
                    <span>📆Dias restantes: ${data.expiration_days}</span>
                    <span>🚫Conexoes: ${data.count_connections}|${data.limit_connections}</span>
                </div>
            `

            checkUserModal._element.querySelector('.chk-title').textContent = '📆 Olá, ' + data.username.toUpperCase() + '👤'
            checkUserModal._element.querySelector('.chk-message').innerHTML = html;
            checkUserModal.show()
        }

        const dtMessageErrorListener = message => {
            const data = JSON.parse(message)
            errorModal._element.querySelector('.err-title').textContent = data.title;
            errorModal._element.querySelector('.err-message').innerHTML = data.content;
            errorModal.show()
        }

        const dtOnNewLogListener = () => {
            const mock = [];
            for (let i = 0; i < 30; i++) {
                mock.push({ 'TIME': 'MESSAGE ' + i })
            }

            const log = window?.DtGetLogs?.execute() || JSON.stringify(mock)
            const data = JSON.parse(log)

            let content = '';
            data.forEach(item => {
                content += '<li class="list-group-item fs-6 bg-transparent text-white p-0 border-0 text-start ms-2 text-wrap">';
                content += Object.keys(item)[0] + " " + item[Object.keys(item)]
                content += '</li>';
            })

            loggerModal._element.querySelector('.logger-content').innerHTML = content;
            const listGroup = loggerModal._element.querySelector('.list-group')
            listGroup.scrollTo(0, listGroup.scrollHeight)
        }

        const dtVpnStartedSuccessListener = () => dtShowSuccessToastListener('Conectado com sucesso')

        const dtVpnStoppedSuccessListener = () => dtShowSuccessToastListener('Desconectado com sucesso')

        const dtShowSuccessToastListener = text => {
            Toastify({
                text: text,
                close: true,
                style: {
                    background: 'linear-gradient(to right, #00b09b, #96c93d)',
                    marginTop: '35px',
                }
            }).showToast()
        }

        const dtShowErrorToastListener = text => {
            Toastify({
                text: text,
                close: true,
                style: {
                    background: 'linear-gradient(to right, #00610d, #75ff88)',
                    marginTop: '35px',
                }
            }).showToast()
        }

        const showConfigsModal = () => {
			const mock = '[{"sorter":6,"color":"#6D08041C","name":"CONFIG","id":1393,"items":[{"mode":"V2RAY - VLESS","sorter":4,"tlsVersion":"TLSv1.2","name":"CONFIG 01","icon":"https://cdn-icons-png.flaticon.com/512/8187/8187143.png","id":11803,"status":"ACTIVE"},{"mode":"SSH_DIRECT","sorter":2,"tlsVersion":"TLSv1.2","name":"CONFIG 02","icon":"https://cdn-icons-png.flaticon.com/512/8187/8187143.png","id":28627,"status":"ACTIVE"},{"mode":"OVPN_PROXY","sorter":23,"tlsVersion":"TLSv1.2","name":"CONFIG 03","icon":"https://cdn-icons-png.flaticon.com/512/8187/8187143.png","id":30001,"status":"ACTIVE"}]},{"sorter":2,"color":"#6D08041C","name":"CONFIG 2","id":1846,"items":[{"mode":"SSH_PROXY","sorter":1,"tlsVersion":"TLSv1.2","name":"CONFIG 01","icon":"https://cdn-icons-png.flaticon.com/512/8187/8187143.png","id":26295,"status":"ACTIVE"}]},{"sorter":4,"color":"#80000000","name":"CONFIG 3","id":3310,"items":[{"mode":"SSH_PROXY","sorter":1,"tlsVersion":"TLSv1.2","name":"CONFIG. TEST","icon":"https://cdn-icons-png.flaticon.com/512/8187/8187143.png","id":29997,"status":"ACTIVE"},{"mode":"OVPN_PROXY","sorter":1,"tlsVersion":"TLSv1.2","name":"CONFIG. TEST 2","icon":"https://cdn-icons-png.flaticon.com/512/8187/8187143.png","id":29998,"status":"ACTIVE"}]}]' 
			const data = JSON.parse(window?.DtGetConfigs?.execute() || mock)

            data.sort((a, b) => a.sorter - b.sorter)
            data.forEach(item => item.items.sort((a, b) => a.sorter - b.sorter))

            const body = configModal._element.querySelector('.config-body')
            body.innerHTML = ''

            data.forEach(category => {
                const categoryElement = document.createElement('li')
                categoryElement.classList.add('list-group-item', 'bg-transparent', 'text-white', 'border-0', 'mb-1', 'rounded-1', 'px-1')
                categoryElement.innerHTML = `<span class="fw-bold btn-dark w-100 d-block p-1 rounded-1 mb-1">${category.name}</span>`

                const configUlElement = document.createElement('ul')
                configUlElement.classList.add('list-group', 'bg-transparent', 'overflow-y-auto')

                category.items.forEach(item => {
                    const configElement = document.createElement('li')
                    configElement.classList.add('list-group-item', 'd-flex', 'btn-dark', 'text-white', 'border-0', 'rounded-2', 'px-1', 'py-2', 'mb-1')
                    configElement.innerHTML = `
                            <img src="${item.icon}" width="40" height="40">
                            <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
                         <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">${item.name}</span>
						<span class="fst-italic fw-bold" style="font-size: 0.7rem;">${item.description || ''}</span>                                
                            </div>
                            <div class="d-flex flex-column ms-2">
                                <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">${item.mode}</span>
                            </div>
                        </li>
                    `
                    configElement.addEventListener('click', e => {
                        window?.DtSetConfig?.execute(item.id)
                        configModal.hide()
                    })
                    configUlElement.appendChild(configElement)
                })

                categoryElement.appendChild(configUlElement)
                body.appendChild(categoryElement)
            })

            configModal.show()
        }

        username.value = window?.DtUsername?.get() ?? ''
        password.value = window?.DtPassword?.get() ?? ''
		uuid.value = window?.DtUuid?.get() ?? ''

        username.placeholder = 'LBL_USERNAME'.t()
        password.placeholder = 'LBL_PASSWORD'.t()
		uuid.placeholder = 'LBL_UUID'.t()

        dtOnNewLogListener()
        dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')
        dtConfigClickListener()
		
		console.log('Pleno Layouts!🚀')
    </script>

</body>
</html>",
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 8058,
        "label": "ANDROID WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_SUPPORT_BUTTON",
        "value": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n\n    <title>5362162935 - @GRUPOCONECTASSH | @alexdsgmoura</title>\n\n    <style>\n      :root {\n        font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n        line-height: 1.5;\n        font-weight: 420;\n        font-synthesis: none;\n        text-rendering: optimizeLegibility;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        text-size-adjust: 100%;\n        -webkit-text-size-adjust: 100%;\n\n        --space-status-bar: 10px;\n        --space-navigation-android-bar: 33px;\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      main {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 35px;\n\n        padding-top: var(--space-status-bar);\n        padding-bottom: var(--space-navigation-android-bar);\n      }\n\n      section.container {\n        width: 100%;\n        max-width: 800px;\n        height: aut0;\n\n        margin-top: auto;\n      }\n\n      section.container div.container-button {\n        width: 100%;\n        height: auto;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 5px;\n\n        margin: 0px auto;\n        padding: 0px 5px;\n      }\n\n      section.container div.container-button button {\n        width: 20%;\n        min-width: 30px;\n        max-width: 60px;\n        height: 50px;\n\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: space-around;\n\n        padding: 2px;\n\n        border: 1px solid #ffffff;\n        border-radius: 8px;\n\n        background-color: transparent;\n      }\n\n      section.container div.container-button button svg {\n        width: 20px;\n        height: 27px;\n\n        color: #ffffff;\n\n        transform: scale(1.3);\n      }\n\n      section.container div.container-button button span {\n        width: 100%;\n\n        color: #ffffff;\n        font-size: 6px;\n        text-transform: uppercase;\n      }\n\n      section.container-network {\n        width: 100%;\n        height: auto;\n\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 5px;\n      }\n\n      section.container-network div {\n        width: 100%;\n        height: auto;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 5px;\n      }\n\n      section.container-network span {\n        color: #ffffff;\n      }\n\n      section.container-network div svg {\n        color: #ffffff;\n      }\n\n      @media (min-width: 281px) {\n        section.container div.container-button button span {\n          font-size: 7px;\n        }\n      }\n\n      @media (min-width: 361px) {\n        section.container div.container-button button span {\n          font-size: 9px;\n        }\n      }\n\n      @media (min-width: 376px) {\n        section.container div.container-button button svg {\n          width: 25px;\n          height: 25px;\n        }\n\n        section.container div.container-button button span {\n          font-size: 9px;\n        }\n      }\n    </style>\n  </head>\n  <body>\n    <main>\n      <section class=\"container\">\n        <div class=\"container-button\">\n          <button type=\"button\" title=\"Limpar dados do app\" id=\"clear-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 APP</span>\n          </button>\n\n          <button type=\"button\" title=\"renovação\" id=\"renew\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-credit-card\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                d=\"M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1H2zm13 4H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V7z\"\n              />\n              <path d=\"M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-1z\" />\n            </svg>\n\n            <span>RENOVAR</span>\n          </button>\n\n          <button type=\"button\" title=\"configurar apn\" id=\"configuration-apn\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-gear\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                d=\"M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z\"\n              />\n              <path\n                d=\"M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z\"\n              />\n            </svg>\n\n            <span>Config APN</span>\n          </button>\n\n          <button type=\"button\" title=\"forçar 4G\" id=\"force-4g\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-lightning\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                d=\"M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641l2.5-8.5zM6.374 1 4.168 8.5H7.5a.5.5 0 0 1 .478.647L6.78 13.04 11.478 7H8a.5.5 0 0 1-.474-.658L9.306 1H6.374z\"\n              />\n            </svg>\n\n            <span>Forçar 4G</span>\n          </button>\n        </div>\n      </section>\n\n      <section class=\"container-network\">\n        <span>Seu IP:</span>\n\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-bar-chart-fill\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z\"\n            />\n          </svg>\n\n          <span id=\"local-ip\">192.168.0.1</span>\n        </div>\n      </section>\n    </main>\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          html(value) {\n            _elements.forEach((element) => (element.innerHTML = value))\n            return wrapper\n          },\n        }\n\n        return wrapper\n      }\n    </script>\n\n    <!-- FUNÇÕES DO APP -->\n    <script>\n      const dtStatusBarHeight = () => DtGetStatusBarHeight.execute()\n      const dtNavHeight = () => DtGetNavigationBarHeight.execute()\n\n      const dtApnConfig = () => DtStartApnActivity.execute()\n      const dtBatteryOptimization = () => DtIgnoreBatteryOptimizations.execute()\n      const dtCleanApp = () => DtCleanApp.execute()\n\n      const dtRadioInfo = () => {\n        if (typeof Android?.openRadioInfo === 'function') {\n          Android.openRadioInfo()\n        } else {\n          DtStartRadioInfoActivity.execute()\n        }\n      }\n      const dtGetNetworkName = () => Android.getNetworkName()\n      const dtGetNetworkLocalIp = () => Android.getLocalIP()\n\n      const dtWebView = () => DtStartWebViewActivity.execute()\n      const dtUrlWebview = (url) => {\n        if (typeof DtStartWebViewActivity?.execute === 'function') {\n          DtStartWebViewActivity?.execute(url)\n        } else {\n          document.location.href = url\n        }\n      }\n    </script>\n\n    <!-- VARIAVEIS ROOT -->\n    <script>\n      document.documentElement.style.setProperty(\n        '--space-status-bar',\n        `${dtStatusBarHeight() + 10}px`\n      )\n\n      document.documentElement.style.setProperty(\n        '--space-navigation-android-bar',\n        `${dtNavHeight() + 25}px`\n      )\n    </script>\n\n    <!-- VARIAVEIS -->\n    <script>\n      const clearDataAppButton = Dom('#clear-data-app')\n      const renewButton = Dom('#renew')\n      const speedtestButton = Dom('#speedtest')\n      const apnConfigButton = Dom('#configuration-apn')\n      const force4GButton = Dom('#force-4g')\n\n      const localIp = Dom('#local-ip')\n    </script>\n\n    <!-- FUNÇÕES DO LAYOUT -->\n    <script>\n      const writeLocalIp = () => {\n        let ip = 'Localizando IP'\n\n        setInterval(() => {\n          ip = dtGetNetworkLocalIp() ?? 'Localizando IP'\n          localIp.html(dtGetNetworkLocalIp())\n        }, 500)\n\n        return ip\n      }\n    </script>\n\n    <!-- AÇÕES -->\n    <script>\n      clearDataAppButton.on({ click: () => dtCleanApp() })\n      renewButton.on({ click: () => dtUrlWebview('https://painelwebatlas23.shop/renovar.php') })\n      speedtestButton.on({ click: () => dtUrlWebview('https://fast.com/pt/') })\n      apnConfigButton.on({ click: () => dtApnConfig() })\n      force4GButton.on({ click: () => dtRadioInfo() })\n\n      localIp.html(writeLocalIp())\n    </script>\n  </body>\n</html>",
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    },
    {
        "id": 8059,
        "label": "PAGINA WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_WEB_VIEW",
        "value": null,
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "98512a31-3f84-4240-8919-957ca444cb66"
    }
]