{
    "status":200,
    "data":[
        {
            "id":3807,
            "label":"Nome do app",
            "name":"APP_NAME",
            "value": "DeV4Tunnel",
            "type":"STRING",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3808,
            "label":"Logo do app",
            "name":"APP_LOGO",
            "value":"https://i.ibb.co/CPK7k3f/oie-Xigk08og-Yaf-F.png",
            "type":"IMAGE",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3809,
            "label":"Imagem de fundo",
            "name":"APP_BACKGROUND_IMAGE",
            "value":"https://i.ibb.co/XCSQCYY/4906817879199034352-121.jpg",
            "type":"IMAGE",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3810,
            "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":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3811,
            "label":"Cor de fundo",
            "name":"APP_BACKGROUND_COLOR",
            "value":"#000000e6",
            "type":"COLOR",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3812,
            "label":"Cor do card inicial",
            "name":"APP_CARD_COLOR",
            "value":"#313131e6",
            "type":"COLOR",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3813,
            "label":"Cor do card de configurações",
            "name":"APP_CARD_CONFIG_COLOR",
            "value":"#0000005b",
            "type":"COLOR",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3814,
            "label":"Cor do fundo dos dialogs",
            "name":"APP_DIALOG_BACKGROUND_COLOR",
            "value":"#00000049",
            "type":"COLOR",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3815,
            "label":"Cor das bordas",
            "name":"APP_BORDER_COLOR",
            "value":"#FF1400",
            "type":"COLOR",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3816,
            "label":"Cor dos textos",
            "name":"APP_TEXT_COLOR",
            "value":"#FFFFFFFF",
            "type":"COLOR",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3817,
            "label":"Cor dos botões",
            "name":"APP_BUTTON_COLOR",
            "value":"#FF1400",
            "type":"COLOR",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3818,
            "label":"Cor dos icones",
            "name":"APP_ICON_COLOR",
            "value":"#FF1400",
            "type":"COLOR",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3819,
            "label":"Exibir modo de conexão",
            "name":"APP_SHOW_CONNECTION_MODE",
            "value":true,
            "type":"BOOLEAN",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":4922,
            "label":"Iniciar o app automaticamente ao reiniciar o dispositivo",
            "name":"APP_AUTO_START",
            "value":false,
            "type":"BOOLEAN",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3820,
            "label":"Mensagem",
            "name":"APP_MESSAGE",
            "value":null,
            "type":"TEXT",
            "status":"ACTIVE",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3821,
            "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":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3823,
            "label":"ANDROID WEBVIEW (POR SUA CONTA E RISCO)",
            "name":"APP_SUPPORT_BUTTON",
            "value":"<html lang='en' style='
'><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>GUARDIAN</title>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css'>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css' integrity='sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==' crossorigin='anonymous' referrerpolicy='no-referrer'>
    <script src='https://cdn.tailwindcss.com'></script>
    <style>
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Outfit:wght@100;200;300;400;500;600;700&display=swap');

:root {

            /*Editar o modal*/
            --btn-modal: #0000003f;
            --btn-border: 1px solid #4071FF;
            --btn-modal-border: 50px;
            --modal-shadow: #ffffff;
            --modal-bg: #171e2e;
            --modal-icon: #fff;
            --config-color: #0000003f;
            --category-color: #0000003f;
            --text-color: #ffffff; 

            /*Editar Layout*/
            --fundo: #ffffff;
            --topo: #F7F7FC;
            --icon: #4071FF;            
            --icon-bg: #E5EAFC;
            --config: #F7F7FC;
            --box-border: 1px solid #C0C6DE;
            --box-bg: transparent;
            --box-icon: black;
            --info1: #C0C6DE;
            --info2: #4071FF;
        }

body {
    font-family: 'Be Vietnam Pro', sans-serif;
    background: var(--fundo);
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: var(--topo);
    width: 100vw;
    padding: 0 auto;

}

button.power-icon {
    font-size: 2.5em;
    box-shadow: 0 20px 25px 0px #4071ff54, 0 2px 0px 0px #4071ff10;
}

.app-bg-gray-1 {
    background: var(--config);
}

.app-bg-gray-2 {
    background: var(--icon-bg);
}

.app-bg-gray-3 {
    background: #fff;
  }
  
  .app-bg-4 {
  	background: linear-gradient(-45deg, #13cf8e, #13cf8e, #0098ff, #5995fd);
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
  }

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.app-bg-blue {
    background: #4071FF;
}

.app-color-blue {
    color: #4071FF;
}

.app-color-gray-1 {
    color: #C0C6DE;
}

.app-rounded {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

	.status {
    font-size: 1em;
    }
    
    .put {
    	border-radius: 60px;
    }
    
    .icon {
    	font-size: 0.8em;
        color: var(--box-icon);
    }

    input {
            width: 100%;
            background: transparent;
            border: none;
            outline: none;
            color: var(--box-typing);
            line-height: 1;
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .box {
border: var(--box-border);
background: var(--box-bg);
}

.tool {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tool-bt {
    background: var(--btn-modal);
    height: 50px;
    width: 150px;
    border: var(--btn-border);
}

.info {
color: var(--info2);
}

.info1 {
color: var(--info1);
}

 .info2 {
color: var(--modal-icon);
}

 .info3 {
font-size: 1.2em;
    color: var(--icon);
}

.modal {
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }

        .modal-content {
            border: none;
            background: var(--modal-bg);
            box-shadow: 0 5px 10px var(--modal-shadow);
            color: var(--text-color);
        }

        .modal-dialog {
            padding: 0 0.5rem;
        }

        .bg-category {
            background: var(--category-color);
        }

        .bg-config {
            background: var(--config-color);
        }
     
        .btn{
  width: 150px;
  background-color: #171e2e;
  outline: none;
  height: 49px;
  border-radius: var(--btn-modal-border);
  text-transform: uppercase;
  font-weight: 600;
  margin: 10px 0;
  cursor: pointer;
  transition: 0.5s;
  border: var(--btn-border);
}

</style>
<style>/* ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.relative{position:relative}.-top-36{top:-9rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.mb-0{margin-bottom:0px}.mb-1{margin-bottom:0.25rem}.mb-2{margin-bottom:0.5rem}.mr-2{margin-right:0.5rem}.ms-2{margin-inline-start:0.5rem}.mt-1{margin-top:0.25rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.h-screen{height:100vh}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.overflow-y-auto{overflow-y:auto}.rounded-2xl{border-radius:1rem}.rounded-xl{border-radius:0.75rem}.border-0{border-width:0px}.border-2{border-width:2px}.bg-transparent{background-color:transparent}.p-0{padding:0px}.p-1{padding:0.25rem}.p-5{padding:1.25rem}.px-1{padding-left:0.25rem;padding-right:0.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.pb-0{padding-bottom:0px}.text-center{text-align:center}.text-start{text-align:start}.text-end{text-align:end}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}</style></head>
<body style='font-size: 16px; background: rgb(14, 15, 19); font-family: sans-serif; height: 95%;' class='h-screen'>
        
        <div class='icon-container' style='
    font-size: 33px;
    background: none;
    color: #ccc;
    margin-top: 27px;
'><!-- Button to open the popup -->


<!-- Popup -->
<div id='loginPopup' style='display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.87); justify-content: center; align-items: center; z-index: 9999;'>
  <div style='top: 0;background-color: #151515;padding: 20px;max-width: 300px;margin: 0 auto;border-radius: 18px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);'>
    <div style='
    text-align: center;
'><i class='bi bi-box-arrow-in-right' style='
    font-size: 67px;
'></i></div><h2 style='
    text-align: center;
    font-size: 24px;
'>Login</h2><p style='
    font-size: 15px;
    text-align: center;
    margin-bottom: 26px;
'>Digite seu login e senha abaixo, certifique-se de não digitar errado.</p>
    <form id='loginForm' style='display: flex !important; flex-direction: column;'>
      <label for='username' style='margin-bottom: 5px;font-size: 23px;'>Login:</label>
      <input type='text' id='username' name='username' required='' style='margin-bottom: 10px;padding: 1px;background: #2a2a2a;font-size: 14px;color: #fff;padding: 15px 21px;border-radius: 29px;'>

      <label for='password' style='margin-bottom: 5px;font-size: 23px;'>Senha:</label>
      <input type='password' id='password' name='password' required='' style='color: #fff;border-radius: 29px;margin-bottom: 10px;padding: 1px;background: #2a2a2a;font-size: 14px;color: #fff;padding: 15px 21px;border-radius: 29px;'>

      <button id='closePopupBtn' style='padding: 5px;cursor: pointer;border-radius: 20px;background: #1d1d1d;'>Fechar</button>
    </form>
    
  </div>
</div>




   
  <div onclick='ToolsModal.show()' style='display: flex;align-items: center;justify-content: center;background-color: #343434;border-radius: 12px;width: 56px;height: 50px;order: 2;color: #fff;font-size: 14px;font-weight: bold;'>
    
    <i class='bi bi-list icon-left' style='color: #fff;font-size: 33px;padding: 5px 5px;'></i>
  </div><div onclick='DtStartAppUpdate.execute()' style='display: flex;align-items: center;justify-content: center;background-color: #343434;border-radius: 12px;width: 150px;height: 50px;order: 2;color: #fff;font-size: 14px;font-weight: bold;'>
    <p style='margin: 0;margin-right: 5px;font-size: 14px;'>Atualizar</p>
    <i class='bi bi-arrow-down-circle-fill' style='color: #fff;font-size: 30px;padding: 5px 5px;'></i>
  </div>

</div><div style='display: flex;align-items: center;justify-content: center;background-color: none;border-radius: 68px;width: 90%;margin: 0 auto;padding: 10px;'>
  <img src='https://i.ibb.co/C6qcHWx/5acdbddd-9b69-479b-bd78-a0e68dbebb04.png' style='
    width: 57px;
    height: auto;
    margin-bottom: -9px;
'>
  <div>
    <p id='user-name' style='color: #ffb100;margin: 5px 0;font-size: 18px;font-family: sans-serif;font-weight: 600;'>Bem Vindo(a)</p>
    <p id='dias-rest' style='color: #20ff00;margin: 5px 0;margin-top: -8px;font-weight: 300;font-size: 13px;font-style: initial;'>conecte-se primeiro</p>
  </div>
  <button id='btnrenovar' onclick='DtStartWebViewActivity.execute('https://www.seulink.net/')' style='margin-left: auto;background-color: #18b446;color: #fff;font-size: 16px;border: none;border-radius: 30px;padding: 7px 13px;box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;display: none;align-items: center;border-top-left-radius: 30px;border-bottom-left-radius: 30px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;height: 38px;'>
    <i class='bi bi-cash' style='font-size: 20px; margin-right: 5px;'></i>
     Renovar
  </button>
  <button id='openPopupBtn' style='margin-left: auto;background-color: #ec0031;color: #fff;font-size: 16px;border: none;border-radius: 30px;padding: 7px 13px;box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;display: flex;align-items: center;height: 38px;border-top-left-radius: 30px;border-bottom-left-radius: 30px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;'>
    <i class='bi bi-door-open' style='font-size: 20px; margin-right: 5px;'></i>
    Login
  </button>
  <div style='display: flex;align-items: center;justify-content: center;background-color: #343434;border-radius: 12px;width: 45px;height: 38px;border-bottom-left-radius: 0px;border-top-left-radius: 0px;color: #fff;justify-content: center;font-weight: bold;border-top-right-radius: 30px;border-bottom-right-radius: 30px;'>
    
    <i onclick='loggerModal.show()' class='bi bi-file-earmark-text' style='color: #fff;font-size: 21px;padding: 5px 5px;padding: 9px 12px;'></i>
  </div>
</div>
            <div onclick='startStopVpn()' style='display: flex;justify-content: center;align-items: center;height: auto;margin-top: 6px;background-color: transparent;margin-bottom: 33px;'>
    <div class='btn-conectar' style='
    border: 10px solid #00000017;
    background-color: #ec0031;
'>
      <i class='bi bi-lightning' style='font-size: 57px;text-shadow: 1px 1px #0000002b;color: #fff!important;'></i>
      <div class='pulse'></div>
    </div>
    
  </div>
  
                <div class='flex flex-row items-center justify-center mt-4' style='
    letter-spacing: 0px;
    margin-bottom: 0;
    font-weight: 400!important;
'>          
                <span class='status app-color-blue font-semibold' id='state' style='color: red;margin-bottom: 0px;font-weight: 400;'>LBL_STATE_DISCONNECTED</span>
                </div>

                    


  

        <div class='flex flex-row items-center justify-center mt-4' style='letter-spacing: 0px;font-weight: 400!important;color: #ccc;Z-INDEX: 1;'>
    <span class='download' style='display: flex;flex-direction: column;align-items: center;background: #000000;width: 100px;border-radius: 13px;padding: 10px 0px;box-shadow: rgb(0 0 0 / 5%) 0px 3px 8px;'>
      <i class='bi bi-cloud-download' style='font-size: 24px;color: #fff;margin-bottom: 4px;'></i>
      <span style='margin: 0;' id='networkDownload'>0 B</span>
      <p style='margin: 0;font-weight: 600;'>Download</p>
    </span>
    <span class='upload' style='
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #000000;
    width: 100px;
    border-radius: 13px;
    padding: 10px 0px;
    JUSTIFY-CONTENT: space-between;
    margin-left: 15px;
    Z-INDEX: 1;
    box-shadow: rgb(0 0 0 / 5%) 0px 3px 8px;
'>
      <i class='bi bi-cloud-upload' style='font-size: 24px;color: #fff;margin-bottom: 4px;'></i>
      <span style='margin: 0;' id='networkUpload'>0 B</span>
      <p style='margin: 0;font-weight: 600;'>Upload</p>
    </span>
  </div>
  
  
  
<div style='
    top: 0;
    background: #ccc;
    border-radius: 10px;
    margin-bottom: 0px!important;
    background: transparent;
    border-radius: 27px;
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
' class='flex flex-col -top-36 relative'>
            
    
            
            
                            
                   

            
       

            
                
            <div class='d-flex gap-2 justify-content-center mb-2 mt-1 flex flex-row items-center px-6 py-2 mx-6 rounded-xl border-slate-150 border-2' style='display: none !important;'>
                <i class='icon fa fa-lock'></i>
                <input type='text' placeholder='V2ray UUID' id='uuid'>
                <i class='icon fa fa-eye' onclick='uuid.type==`text`?uuid.type = `password`:uuid.type = `text`'></i>        
            </div>

            
                
                <div class='flex flex-row items-center justify-center mt-2' style='
    margin-top: 0;
    margin-top: -1px;
    width: 100%;
'>
<div id='btnHotSpot' style='display: flex;align-items: center;MARGIN-RIGHT: 0;justify-content: center;background-color: #000000;border-radius: 12px;width: auto;height: 45px;color: #fff;padding: 18px 51PX;width: auto;margin-bottom: 18px;font-size: 14px;'>
    
    <i class='bi bi-wifi' style='color: #fff;font-size: 21PX;padding: 5px 5px;'></i> Hotspot <i id='togglehot' class='bi bi-toggle-off' style='
    margin-left: 14px;
    font-size: 21px;
'></i>



  </div>
  

  </div>
  <div style='
    display: block;
    justify-content: center;
'><div class='box d-flex gap-2 justify-content-center mb-1 mt-1 flex flex-row items-center px-6 py-2.5 mx-6 rounded-xl app-bg-gray-1 border-2' style='
    color: #fff;
    margin-bottom: 35px;
    border-radius: 57px;
    font-size: 18px;
    width: auto;
    display: list-item;
    width: auto;
    margin-top: 8px!important;
    BACKGROUND: #ec0031;
    margin-top: 13px!important;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    border: 1px solid #0f0f0f;
    bottom: 60px;
    justify-content: center!important;
'>
                <i class='icon fa fa-cogs' style='
    color: #ccc;
'></i>
                <input type='text' placeholder='Escolha um servidor' disabled='' id='config' style='
    text-align: center;
    color: #fff;
'>
                <i class='icon fa fa-angle-double-down' style='
    color: #ccc;
'></i>
            </div>
            </div>
            <div style='justify-content: center;display: flex;'><img src='https://i.ibb.co/W3SXVj3/31bfdf0b-41b3-49bb-8bdb-ce30c7289567.png' style='
    width: 328px;
    margin-top: 8px;
'></div>
            
                   
        </div>


    
    <div class='modal fade' id='configModal' style='display: none;' aria-hidden='true'>
        <div class='modal-dialog modal-dialog-centered' role='document'>
            <div class='modal-content rounded-3 shadow' style='
    background: #2f2f2f;
'>
                <div class='modal-header border-bottom-0 pb-0'>
                    <h1 class='modal-title fs-5' style='color: var(--text-color);font-weight: 600;'>CONFIGURAÇÕES</h1>
                    <button class='btn-close btn-close-white' data-bs-dismiss='modal'></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 border-0 mb-1 rounded-1 px-1' style='color: var(--text-color);'><span class='fw-bold w-100 d-block p-1 rounded-1 mb-1 bg-category'>CONFIG 2</span><ul class='list-group overflow-y-auto'><li class='list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1' style='color: var(--text-color);'>
                            <img src='https://cdn-icons-png.flaticon.com/512/8187/8187143.png' 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;'>CONFIG 01</span>
                                <span class='fst-italic fw-bold text-uppercase' style='font-size: 0.7rem;'></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;'>SSH_PROXY</span>
                            </div>
                        
                    </li></ul></li><li class='list-group-item bg-transparent border-0 mb-1 rounded-1 px-1' style='color: var(--text-color);'><span class='fw-bold w-100 d-block p-1 rounded-1 mb-1 bg-category'>CONFIG 3</span><ul class='list-group overflow-y-auto'><li class='list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1' style='color: var(--text-color);'>
                            <img src='https://cdn-icons-png.flaticon.com/512/8187/8187143.png' 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;'>CONFIG. TEST</span>
                                <span class='fst-italic fw-bold text-uppercase' style='font-size: 0.7rem;'></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;'>SSH_PROXY</span>
                            </div>
                        
                    </li><li class='list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1' style='color: var(--text-color);'>
                            <img src='https://cdn-icons-png.flaticon.com/512/8187/8187143.png' 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;'>CONFIG. TEST 2</span>
                                <span class='fst-italic fw-bold text-uppercase' style='font-size: 0.7rem;'></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;'>OVPN_PROXY</span>
                            </div>
                        
                    </li></ul></li><li class='list-group-item bg-transparent border-0 mb-1 rounded-1 px-1' style='color: var(--text-color);'><span class='fw-bold w-100 d-block p-1 rounded-1 mb-1 bg-category'>CONFIG</span><ul class='list-group overflow-y-auto'><li class='list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1' style='color: var(--text-color);'>
                            <img src='https://cdn-icons-png.flaticon.com/512/8187/8187143.png' 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;'>CONFIG 02</span>
                                <span class='fst-italic fw-bold text-uppercase' style='font-size: 0.7rem;'></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;'>SSH_DIRECT</span>
                            </div>
                        
                    </li><li class='list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1' style='color: var(--text-color);'>
                            <img src='https://cdn-icons-png.flaticon.com/512/8187/8187143.png' 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;'>CONFIG 01</span>
                                <span class='fst-italic fw-bold text-uppercase' style='font-size: 0.7rem;'></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;'>V2RAY - VLESS</span>
                            </div>
                        
                    </li><li class='list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1' style='color: var(--text-color);'>
                            <img src='https://cdn-icons-png.flaticon.com/512/8187/8187143.png' 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;'>CONFIG 03</span>
                                <span class='fst-italic fw-bold text-uppercase' style='font-size: 0.7rem;'></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;'>OVPN_PROXY</span>
                            </div>
                        
                    </li></ul></li></ul>
                </div>
            </div>
        </div>
    </div>
    <div class='modal fade' id='loggerModal' style='display: none;' aria-hidden='true'>
        <div class='modal-dialog modal-dialog-centered' role='document' style='
    BORDER-RADIUS: 11PX;
'>
            <div class='modal-content rounded-3 shadow' style='
    BACKGROUND: #1f1f1f;
'>
                <div class='modal-body p-1 text-center'>
                    <ul class='list-group bg-transparent overflow-y-auto logger-content' style='max-height: 600px;'><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 0</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 1</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 2</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 3</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 4</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 5</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 6</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 7</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 8</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 9</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 10</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 11</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 12</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 13</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 14</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 15</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 16</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 17</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 18</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 19</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 20</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 21</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 22</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 23</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 24</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 25</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 26</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 27</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 28</li><li class='list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>TIME MESSAGE 29</li></ul>
                </div>
                <div class='modal-footer flex-nowrap p-0'>
                    <button class='btn btn-primary w-100 clear-logger' style='background-color:var(--btn-modal);BORDER: 1PX SOLID #CCC;BORDER-RADIUS: 23PX!IMPORTANT;'>LIMPAR</button>
                      <button type='button' class='btn btn-primary w-100' data-bs-dismiss='modal' style='background-color: var(--btn-modal);BORDER: 1PX SOLID #CCC;'>FECHAR</button>

                </div>
            </div>
        </div>
    </div>
    <div class='tool webm modal fade' index='-1' id='ToolsModal' style='display: none;' aria-hidden='true'>
        <div class='modal-dialog modal-dialog-centered' role='document'>
                     
 
    <div class='modal-content' style='
    background: #1f1f1f;
    box-shadow: none;
'>
      <div class='tool modal-header' style='
    border: none;
    font-size: 24px;
'>
        <h5 class='modal-title' style='color:#ffffff;'>FERRAMENTAS</h5>
      </div>
      <div class='modal-body' style='
    border: none;
'>
        <button class='tool-bt rounded-2xl text-white' onclick='DtStartCheckUser.execute()' style='
    border: none;
    display: none;
'><i class='info2 bi bi-calendar-check mr-2'></i>VALIDADE</button>
        </div>
        <div class='modal-body'>
        <button class='tool-bt rounded-2xl text-white' data-bs-target='#speedTestModal' data-bs-toggle='modal' style='
    border: none;
'><i class='info2 bi bi-speedometer mr-2'></i>SPEEDTEST</button>
        <button class='tool-bt rounded-2xl text-white' onclick='DtStartWebViewActivity.execute('https://t.me/DTunnelGroup')' style='
    border: none;
'><i class='info2 bi bi-globe mr-2'></i>WEBVIEW</button>
        </div>
        <div class='modal-body'>
        <button class='tool-bt rounded-2xl text-white' onclick='DtStartApnActivity.execute()' style='
    border: none;
'><i class='info2 bi bi-wifi mr-2'></i>APN</button>
        <button class='tool-bt rounded-2xl text-white' onclick='DtIgnoreBatteryOptimizations.execute()' style='
    border: none;
'><i class='info2 bi bi-battery-full mr-2'></i>BATERIA</button>
      </div>
      <div class='modal-body'>
        <button class='tool-bt rounded-2xl text-white' onclick='DtCleanApp.execute()' style='
    border: none;
'><i class='info2 bi bi-trash3 mr-2'></i>LIMPAR</button>
        </div>
      <div class='tool modal-footer' style='
    border-top: 1px solid #323131;
'>
        <button type='button' class='btn btn-primary' data-bs-dismiss='modal' style='background-color: var(--btn-modal);border: none;'>FECHAR</button>
        
      </div>
    </div>
  </div>
</div>
<div class='modal fade' id='checkUserModal' index='1'>
    <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 class='btn-close btn-close-white' data-bs-dismiss='modal'></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='md modal fade' id='speedTestModal'>
    <div class='md modal-dialog modal-dialog-centered' role='document'>
        <div class='md modal-content rounded-3 shadow'>
            <div class='md modal-header border-bottom-0 py-3'>
                <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='speedFrame'></iframe>
            </div>
        </div>
    </div>
</div>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js'></script>
    <script>
        Object.defineProperty(String.prototype, 't', {
            value: function t() {
                return window?.DtTranslateText?.execute('' + this) ?? '' + this
            },
            writable: true,
            configurable: true,
        })

        const config = document.querySelector('#config')
        config.parentElement.onclick = () => showConfigsModal();

        const username = document.querySelector('#username')
        username.oninput = e => DtUsername.set(e.target.value)

        const password = document.querySelector('#password')
        password.oninput = e => DtPassword.set(e.target.value)

        const uuid = document.querySelector('#uuid')
        uuid.oninput = e => DtUuid.set(e.target.value)

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

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

        const dtConfigClickListener = () => {
            const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{ 'auth': {'username': ''} }`)
            const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');

            config.placeholder = data.name ?? 'Escolha um servidor';
            username.parentElement.style.setProperty('display', !data?.auth?.username && !isV2ray ? 'flex' : 'none', 'important')
            password.parentElement.style.setProperty('display', !data?.auth?.password && !isV2ray ? 'flex' : 'none', 'important')
            uuid.parentElement.style.setProperty('display', !data?.auth?.v2ray_uuid && isV2ray ? 'flex' : 'none', 'important')
        }

        const startStopVpn = e => {
            if (DtGetVpnState.execute() != 'DISCONNECTED') {
                DtExecuteVpnStop.execute()
            } else {
                DtExecuteVpnStart.execute()
            }
        }

        clearLogger.addEventListener('click', () => DtClearLogs.execute())

        speedTestModal._element.addEventListener('shown.bs.modal', () => {
            const iframe = document.querySelector('#speedFrame');
            if (!iframe.src) {
                iframe.src = 'http://speedtest.sercomtel.com.br/'
                iframe.addEventListener('load', () => {
                    mp3Modal._element.querySelector('.spinner').classList.add('d-none')
                })
            }
        })
        speedTestModal._element.addEventListener('hide.bs.modal', () => {
            const iframe = document.querySelector('#speedFrame');
            iframe.src = '';
        })

        const dtVpnStateListener = state => {
            const isConectado= state === 'CONNECTED';
            const isDesconectado= state === 'DISCONNECTED';
            const isRunning = state != 'DISCONNECTED';
            const status = document.querySelector('#state')

            status.innerHTML = ('LBL_STATE_' + state).t()

            if (isRunning) {
                username.setAttribute('readonly', 'true')
                password.setAttribute('readonly', 'true')
                status.style.color = '#00ff15'
            } else {
                username.removeAttribute('readonly')
                password.removeAttribute('readonly')
                status.style.color = 'RED'
            }

          

    if (isDesconectado) {
        document.getElementById('dias-rest').innerHTML = 'conecte-se primeiro'
        document.getElementById('user-name').innerHTML = 'Bem Vindo(a)'
        document.getElementById('openPopupBtn').style.display = 'flex';
                document.getElementById('btnrenovar').style.display = 'none';
    }
            if (isConectado) {
                document.getElementById('user-name').innerHTML = username.value
                document.getElementById('openPopupBtn').style.display = 'none';
                document.getElementById('btnrenovar').style.display = 'flex';

        
            } 

        }

        const dtCheckUserStartedListener = () => {
            const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{}`)
            const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
            if (isV2ray || !data.urlCheckUser) return;

            const html = `
            <div class='d-flex justify-content-center'>
                <div class='spinner-border p-4' 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 = `${data.expiration_days} dias restantes`
            document.getElementById('dias-rest').innerHTML = html
         
        }

        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.className = 'list-group-item bg-transparent border-0 mb-1 rounded-1 px-1'
                categoryElement.style.color = 'var(--text-color)'
                categoryElement.innerHTML = `<span class='fw-bold w-100 d-block p-1 rounded-1 mb-1 bg-category'>${category.name}</span>`

                const configUlElement = document.createElement('ul')
                configUlElement.className = 'list-group overflow-y-auto'

                category.items.forEach(item => {
                    const configElement = document.createElement('li')
                    configElement.className = 'list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1'
                    configElement.style.color = 'var(--text-color)'
                    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 text-uppercase' 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()
        }

        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 bg-transparent p-0 border-0 text-start ms-2 text-wrap' style='font-size: 12px; color: var(--text-color);'>';
                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)
        }

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

        dtOnNewLogListener()
        dtConfigClickListener()
        dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')
        
    </script>
    
     
     <script>
        class AndroidMock {
            static getLocalIP() {
                return '192.168.0.1';
            }
    
            static getConfig() {
                return JSON.stringify({
                    urlCheckUser: 'URLAQUI'
                });
            }
    
            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);
            showCheckUser(android);
        }
    
    </script>

<script>
  const openPopupBtn = document.getElementById('openPopupBtn');
  const closePopupBtn = document.getElementById('closePopupBtn');
  const loginPopup = document.getElementById('loginPopup');

  openPopupBtn.addEventListener('click', () => {
    loginPopup.style.display = 'flex';
  });

  closePopupBtn.addEventListener('click', () => {
    loginPopup.style.display = 'none';
  });

  // Close the popup if the user clicks outside of it
  window.addEventListener('click', (event) => {
    if (event.target === loginPopup) {
      loginPopup.style.display = 'none';
    }
  });

  // Prevent the default form submission behavior and add your login logic here
  const loginForm = document.getElementById('loginForm');
  loginForm.addEventListener('submit', (event) => {
    event.preventDefault();
    // Add your login logic here
  });
</script><style> .icon-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ccc;
    border-radius: 68px;
    width: 90%;
    margin: 0 auto;
    padding: 10px;
  }

  .bi {
    font-size: 40px;
    color: #fff;
  }

  .icon-left {
    order: 1; /* Posiciona o ícone à esquerda */
  }

  .icon-right {
    order: 2; /* Posiciona o ícone à direita */
  }
    @keyframes pulseAnimation {
      0% {
        transform: scale(1);
        opacity: 0.7;
      }
      100% {
        transform: scale(2);
        opacity: 0;
      }
    }

    .btn-conectar {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #007bff;
      border-radius: 50%;
      width: 160px;
      height: 160px;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    .pulse {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #0061ca5c;
      border-radius: 50%;
      animation: pulseAnimation 2s infinite;
      pointer-events: none;
    }.bi {
    font-size: 17px;
    color: #fff;
}

</style>
<script>
    const startHotSpot = () => {
        DtStartHotSpotService.execute();
        document.getElementById('togglehot').className = 'bi bi-toggle-on';

    }

    const stopHotSpot = () => {
        DtStopHotSpotService.execute();
        document.getElementById('togglehot').className = 'bi bi-toggle-off';
    }

    const toggleHotSpot = () => {
        const hotSpotStatus = window?.DtGetStatusHotSpotService?.execute() ?? 'STOPPED';
        hotSpotStatus == 'RUNNING' ? stopHotSpot() : startHotSpot();
    }

    const btnHotSpot = document.querySelector('#btnHotSpot');
    btnHotSpot.addEventListener('click', toggleHotSpot);

  

   
    const formatBytes = bytes => {
        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
        if (bytes === 0) return '0 B';
        const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
        return (bytes / Math.pow(1024, i)).toPrecision(3) + ' ' + sizes[i];
    }

    const currentNetworkDownload = window?.DtGetNetworkDownloadBytes?.execute() ?? 0
    const currentNetworkUpload = window?.DtGetNetworkUploadBytes?.execute() ?? 0

    setInterval(() => {
        const networkDownload = document.querySelector('#networkDownload');
        const networkUpload = document.querySelector('#networkUpload');

        const newNetworkDownload = window?.DtGetNetworkDownloadBytes?.execute() ?? 0;
        const newNetworkUpload = window?.DtGetNetworkUploadBytes?.execute() ?? 0;

        networkDownload.innerHTML = formatBytes(newNetworkDownload - currentNetworkDownload);
        networkUpload.innerHTML = formatBytes(newNetworkUpload - currentNetworkUpload);

    }, 1000)

  

    const setVpnState = state => {
        if (state == 'CONNECTED') startSocket();
    }
    startSocket();
</script>
</body></html>",
            "type":"HTML",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        },
        {
            "id":3824,
            "label":"PAGINA WEBVIEW (POR SUA CONTA E RISCO)",
            "name":"APP_WEB_VIEW",
            "type":"HTML",
            "value":"<script>window.location.href = 'http://painelscanny.store';</script>",
            "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
        }
    ]
}