app_layout

<?xml version="1.0" encoding="UTF-8"?>

<root>

<element>

<id number="true">22166</id>

<label>Nome do app</label>

<name>APP_NAME</name>

<value null="true"/>

<type>STRING</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22167</id>

<label>Logo do app</label>

<name>APP_LOGO</name>

<value>https://i.ibb.co/j4Q48sG/DT040a9i8j.png</value>

<type>IMAGE</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22168</id>

<label>Imagem de fundo</label>

<name>APP_BACKGROUND_IMAGE</name>

<value null="true"/>

<type>IMAGE</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22169</id>

<label>Tipo do fundo do app</label>

<name>APP_BACKGROUND_TYPE</name>

<value>

<options>

<label>Imagem</label>

<value>IMAGE</value>

</options>

<options>

<label>Cor</label>

<value>COLOR</value>

</options>

<selected>COLOR</selected>

</value>

<type>SELECT</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22170</id>

<label>Cor de fundo</label>

<name>APP_BACKGROUND_COLOR</name>

<value>#080e16c7</value>

<type>COLOR</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22171</id>

<label>Cor do card inicial</label>

<name>APP_CARD_COLOR</name>

<value>#1d242e73</value>

<type>COLOR</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22172</id>

<label>Raio do card inicial</label>

<name>APP_CARD_RADIUS</name>

<value number="true">20</value>

<type>INTEGER</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22173</id>

<label>Cor do card de status</label>

<name>APP_CARD_STATUS_COLOR</name>

<value>#1d242e73</value>

<type>COLOR</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22174</id>

<label>Raio do card de status</label>

<name>APP_CARD_STATUS_RADIUS</name>

<value number="true">25</value>

<type>INTEGER</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22175</id>

<label>Cor do card de configurações</label>

<name>APP_CARD_CONFIG_COLOR</name>

<value>#4298e182</value>

<type>COLOR</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22176</id>

<label>Cor do fundo dos dialogs</label>

<name>APP_DIALOG_BACKGROUND_COLOR</name>

<value>#4298e182</value>

<type>COLOR</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22177</id>

<label>Cor do fundo do dialog de log</label>

<name>APP_DIALOG_LOGGER_COLOR</name>

<value>#4298e182</value>

<type>COLOR</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22178</id>

<label>Cor das bordas</label>

<name>APP_BORDER_COLOR</name>

<value>#1d242e73</value>

<type>COLOR</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22179</id>

<label>Cor dos inputs</label>

<name>APP_INPUT_COLOR</name>

<value>#1d242e73</value>

<type>COLOR</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22180</id>

<label>Raio dos inputs</label>

<name>APP_INPUT_RADIUS</name>

<value number="true">25</value>

<type>INTEGER</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22181</id>

<label>Cor dos textos</label>

<name>APP_TEXT_COLOR</name>

<value>#FFFFFFFF</value>

<type>COLOR</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22182</id>

<label>Cor dos botões</label>

<name>APP_BUTTON_COLOR</name>

<value>#1d242e73</value>

<type>COLOR</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22183</id>

<label>Raio dos botões</label>

<name>APP_BUTTON_RADIUS</name>

<value number="true">25</value>

<type>INTEGER</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22184</id>

<label>Cor dos icones</label>

<name>APP_ICON_COLOR</name>

<value>#FFFFFFFF</value>

<type>COLOR</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22185</id>

<label>Exibir modo de conexão</label>

<name>APP_SHOW_CONNECTION_MODE</name>

<value boolean="true">true</value>

<type>BOOLEAN</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22871</id>

<label>Atualizar automaticamente as configurações ao lançar uma atualização.</label>

<name>APP_CONFIG_AUTO_UPDATE</name>

<value boolean="true">true</value>

<type>BOOLEAN</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22186</id>

<label>Iniciar o app automaticamente ao reiniciar o dispositivo</label>

<name>APP_AUTO_START</name>

<value boolean="true">false</value>

<type>BOOLEAN</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22187</id>

<label>Usar limiter de conexão</label>

<name>APP_CONNECTION_LIMITER</name>

<value boolean="true">false</value>

<type>BOOLEAN</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22188</id>

<label>Usar botão de atualizações</label>

<name>APP_BTN_UPDATE_ENABLED</name>

<value boolean="true">false</value>

<type>BOOLEAN</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22189</id>

<label>Usar botão de registros</label>

<name>APP_BTN_LOGGER_ENABLED</name>

<value boolean="true">false</value>

<type>BOOLEAN</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22190</id>

<label>Usar botão de pagina webview</label>

<name>APP_BTN_PAGE_ENABLED</name>

<value boolean="true">false</value>

<type>BOOLEAN</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22191</id>

<label>Ativar dialog de erros</label>

<name>APP_DIALOG_ERROR_ENABLED</name>

<value boolean="true">false</value>

<type>BOOLEAN</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22192</id>

<label>Ativar dialog de checkuser</label>

<name>APP_CHECKUSER_DIALOG_ENABLED</name>

<value boolean="true">false</value>

<type>BOOLEAN</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22193</id>

<label>Ativar toast de sucesso</label>

<name>APP_SUCCESS_TOAST_ENABLED</name>

<value boolean="true">true</value>

<type>BOOLEAN</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22194</id>

<label>Ativar toast de erro</label>

<name>APP_ERROR_TOAST_ENABLED</name>

<value boolean="true">false</value>

<type>BOOLEAN</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22195</id>

<label>Usar layout webview</label>

<name>APP_LAYOUT_WEBVIEW_ENABLED</name>

<value boolean="true">true</value>

<type>BOOLEAN</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22196</id>

<label>Mensagem</label>

<name>APP_MESSAGE</name>

<value null="true"/>

<type>TEXT</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22197</id>

<label>URL de atualização do aplicativo</label>

<name>APP_UPDATE_URL</name>

<value null="true"/>

<type>URL</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22198</id>

<label>Tipo de mensagem</label>

<name>APP_MESSAGE_TYPE</name>

<value>

<options>

<label>Alerta</label>

<value>ALERT</value>

</options>

<options>

<label>Informação</label>

<value>INFO</value>

</options>

<options>

<label>Boas vindas</label>

<value>WELCOME</value>

</options>

<options>

<label>Sem mensagem</label>

<value>NONE</value>

</options>

<selected>NONE</selected>

</value>

<type>SELECT</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22199</id>

<label>LAYOUT WEBVIEW (POR SUA CONTA E RISCO)</label>

<name>APP_LAYOUT_WEBVIEW</name>

<value>&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

&lt;title&gt;Document&lt;/title&gt;

&lt;meta charset="UTF-8" /&gt;

&lt;meta

name="viewport"

content="width=device-width, initial-scale=1.0, user-scalable=no"

/&gt;

&lt;style&gt;

:root {

--background-color-main: #001432;

--background-image-main: url("");

--header-container-color: linear-gradient(

to top right,

#3762b4,

#55afea

);

--background-container-color: #001432;

--border-color: linear-gradient(to top right, #3762b4, #55afea);

--border-loading-color: #ffffff;

--text-color: #ffffff;

--text-alert-color: #ff0000;

--icons-color: #ffffff;

--background-buttons-color: linear-gradient(

to top right,

#3762b4,

#55afea

);

--margem-do-topo-do-modal: 10px;

--margem-do-bottom-do-modal: 10px;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html,

body,

main {

width: 100%;

height: 100%;

}

body {

background: var(--background-color-main);

background-image: var(--background-image-main);

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

main {

display: flex;

flex-direction: column;

align-items: center;

gap: 20px;

position: relative;

transition: padding-bottom 0.3s ease 0.2s;

overflow: hidden;

}

.container-logo {

width: 95%;

height: auto;

display: flex;

justify-content: center;

align-items: center;

margin-top: 40px;

padding: 5px 3px;

}

.container-logo img {

width: 50%;

max-width: 300px;

}

.container {

width: 95%;

max-width: 450px;

height: auto;

position: relative;

border-radius: 5px;

background: transparent;

}

.container header {

width: 95%;

height: 45px;

display: flex;

align-items: center;

gap: 10px;

border-top-left-radius: 5px;

border-top-right-radius: 5px;

margin: auto;

padding: 5px 10px;

background: transparent;

}

.container header button:first-child {

visibility: hidden;

}

.container header button {

flex: 1;

height: 100%;

border: 0;

border-radius: 20px;

color: var(--text-color);

font-family: "Roboto", sans-serif;

background: var(--background-buttons-color);

}

.container form {

width: 100%;

height: calc(100% - 45px);

display: flex;

flex-direction: column;

align-items: center;

gap: 10px;

margin: 10px 0px;

padding: 0px 3px;

}

.container form div {

width: 95%;

height: 45px;

display: flex;

align-items: center;

border-radius: 50px;

padding: 0px 10px;

background: #021b50;

}

.container form div#uuid-container {

display: none;

}

.container form div svg {

width: 38px;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

align-content: center;

padding: 0px 10px;

border-right: 1px solid var(--border-color);

color: var(--icons-color);

}

.container form div svg path {

transform: scale(1);

}

.container form div input {

width: 100%;

height: 100%;

border: 0;

outline: none;

padding-left: 5px;

color: var(--text-color);

font-family: "Roboto", sans-serif;

font-size: 1rem;

background: transparent;

}

.container form div input::placeholder {

color: #dddddd;

}

.form-buttons {

width: 100%;

display: flex;

flex-wrap: wrap;

gap: 10px;

margin-top: 10px;

padding: 0px 5px;

}

.form-buttons button {

flex: 1;

height: 45px;

display: flex;

align-items: center;

justify-content: center;

gap: 5px;

border: 0;

border-radius: 20px;

color: var(--text-color);

font-family: "Roboto", sans-serif;

background: var(--background-buttons-color);

&amp; &gt; svg {

width: 16px;

height: 16px;

}

}

.form-buttons button:last-child {

width: 50%;

flex-basis: 100%;

margin-top: 10px;

}

.menu {

width: 100%;

height: calc(100% - 45px);

position: absolute;

top: 45px;

left: 0;

right: 0;

bottom: 0;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

gap: 13px;

padding: 10px 5px;

border-bottom-left-radius: 5px;

border-bottom-right-radius: 5px;

opacity: 0;

transform: perspective(800px) rotateX(90deg) rotateY(0deg);

transform-origin: 100% 100%;

background: var(--background-color-main);

}

.menu button {

width: 95%;

height: 45px;

display: flex;

align-items: center;

justify-content: center;

border: 0;

border-radius: 17.5px;

background: var(--background-buttons-color);

}

.menu button svg {

width: 20px;

height: 20px;

color: var(--icons-color);

margin-right: 5px;

}

.menu button span {

color: var(--text-color);

font-family: "Roboto", sans-serif;

}

.status-vpn {

width: 100%;

max-width: 450px;

height: auto;

}

.status-vpn section {

width: 90%;

height: 40px;

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

margin: 0 auto;

border-radius: 20px;

background: #021b50;

}

.status-vpn section svg {

color: #ffffff;

}

.status-vpn section h1 {

color: #ffffff;

font-family: "Roboto", sans-serif;

font-weight: 400;

font-size: 1rem;

}

.home-menu {

width: 95%;

max-width: 450px;

height: auto;

display: flex;

flex-direction: column;

justify-content: center;

gap: 10px;

position: absolute;

bottom: 20px;

padding: 0px 10px;

}

.home-menu button {

width: auto;

height: 45px;

display: flex;

justify-content: center;

align-items: center;

gap: 5px;

padding: 0px 10px;

border: 0px;

border-radius: 20px;

background: var(--background-buttons-color);

}

.home-menu button svg {

width: 20px;

height: 20px;

color: var(--icons-color);

}

.home-menu button span {

color: var(--text-color);

}

.modal-speedtest,

.modal-configs,

.modal-logs,

.modal-alert-clear-data,

.modal-error-alert,

.modal-status-vpn,

.modal-checkuser,

.modal-loading,

.modal-gen-test,

.modal-buy-access,

.modal-call-support {

width: 98%;

max-width: 450px;

height: calc(

100% - var(--margem-do-bottom-do-modal) -

var(--margem-do-topo-do-modal)

);

position: absolute;

top: var(--margem-do-topo-do-modal);

left: auto;

right: auto;

bottom: var(--margem-do-bottom-do-modal);

z-index: 2;

display: flex;

flex-direction: column;

border-radius: 5px;

overflow: hidden;

opacity: 0;

transform: scale(0);

transform-origin: center;

transition: all 0.3s ease 0.1s;

}

.show {

opacity: 1;

transform: scale(1);

}

.modal-speedtest header,

.modal-configs header,

.modal-logs header,

.modal-alert-clear-data header,

.modal-error-alert header,

.modal-status-vpn header,

.modal-checkuser header,

.modal-loading header,

.modal-gen-test header,

.modal-buy-access header,

.modal-call-support header {

width: 100%;

height: 40px;

display: flex;

align-items: center;

padding: 0px 10px;

background: var(--header-container-color);

}

.modal-speedtest header svg,

.modal-configs header svg,

.modal-logs header svg,

.modal-alert-clear-data header svg,

.modal-error-alert header svg,

.modal-status-vpn header svg,

.modal-checkuser header svg,

.modal-loading header svg,

.modal-gen-test header svg,

.modal-buy-access header svg,

.modal-call-support header svg {

margin-left: auto;

color: var(--icons-color);

}

.modal-speedtest section,

.modal-configs section,

.modal-logs section,

.modal-alert-clear-data section,

.modal-error-alert section,

.modal-status-vpn section,

.modal-checkuser section,

.modal-loading section,

.modal-gen-test section,

.modal-buy-access section,

.modal-call-support section {

background: var(--background-container-color);

}

.modal-speedtest section,

.modal-gen-test section,

.modal-buy-access section,

.modal-call-support section {

width: 100%;

height: calc(100% - 40px);

position: relative;

display: flex;

justify-content: center;

align-items: center;

}

.modal-logs section,

.modal-checkuser section {

width: 100%;

height: calc(100% - 40px);

position: relative;

display: flex;

flex-direction: column;

align-items: center;

}

.modal-logs section p {

width: 100%;

height: auto;

max-height: calc(100% - 65px);

margin: 10px 0px;

padding: 0px 10px;

overflow-y: auto;

color: var(--text-color);

font-family: "Roboto", sans-serif;

font-size: 0.7rem;

}

.modal-logs section button {

width: 80%;

height: 45px;

margin-top: auto;

margin-bottom: 5px;

display: flex;

align-items: center;

justify-content: center;

border: 0;

border-radius: 17.5px;

background: var(--background-buttons-color);

}

.modal-logs section button svg {

color: var(--icons-color);

margin-right: 5px;

}

.modal-logs section button span {

color: var(--text-color);

font-family: "Roboto", sans-serif;

}

.modal-speedtest section iframe,

.modal-gen-test section iframe,

.modal-buy-access section iframe,

.modal-call-support section iframe {

width: 100%;

height: 100%;

border: 0;

overflow: hidden;

}

.modal-checkuser section {

padding: 10px;

justify-content: center;

}

.modal-checkuser section h1 {

width: 100%;

height: 40px;

display: flex;

align-items: center;

justify-content: center;

margin: 20px;

border-bottom: 2px solid var(--background-buttons-color);

color: var(--text-color);

font-family: "Roboto", sans-serif;

font-weight: 400;

}

.modal-checkuser section div {

width: 100%;

height: 40px;

display: flex;

align-items: center;

margin: 10px 0px;

border-radius: 20px;

background: var(--background-buttons-color);

overflow: hidden;

}

.modal-checkuser section div i {

width: 40px;

height: 40px;

display: flex;

justify-content: center;

align-items: center;

color: var(--icons-color);

}

.modal-checkuser section div span {

width: calc(100% - 40px);

height: 100%;

display: flex;

align-items: center;

color: var(--text-color);

font-family: "Roboto", sans-serif;

}

.modal-configs section {

width: 100%;

height: calc(100% - 40px);

overflow-y: auto;

}

.modal-configs section div {

width: 100%;

height: auto;

margin-top: 10px;

display: flex;

flex-direction: column;

align-items: center;

}

.modal-configs section div h1.title {

width: 90%;

min-height: 30px;

display: flex;

justify-content: center;

align-items: center;

margin: 10px 0px;

margin-top: 10px;

border-radius: 15px;

color: var(--text-color);

font-family: "Roboto", sans-serif;

font-size: 0.9rem;

background: var(--background-buttons-color);

}

.modal-configs section div ul {

width: 100%;

height: auto;

margin-top: 5px;

padding: 0px 10px;

border-radius: 15px;

}

.modal-configs section div ul li {

width: 100%;

height: 60px;

min-height: 60px;

display: flex;

align-items: center;

margin: 0px 0px 10px 0px;

padding: 5px;

padding-left: 15px;

border-radius: 30px;

overflow: hidden;

background: #000;

}

.modal-configs section ul li img {

width: 30px;

height: 30px;

}

.modal-configs section ul li div {

width: calc(100% - 40px);

height: 40px;

margin-left: 5px;

display: flex;

flex-direction: column;

align-items: flex-start;

overflow: hidden;

}

.modal-configs section ul li div h1 {

color: var(--text-color);

font-size: 0.7rem;

font-weight: 600;

font-family: "Roboto", sans-serif;

}

.modal-configs section ul li div p {

color: var(--text-color);

font-family: "Roboto", sans-serif;

font-size: 0.6rem;

font-weight: 400;

}

.modal-alert-clear-data section,

.modal-error-alert section,

.modal-status-vpn section,

.modal-loading section {

width: 100%;

height: calc(100% - 40px);

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.modal-alert-clear-data section svg,

.modal-error-alert section svg {

width: 128px;

height: auto;

color: var(--text-alert-color);

}

.modal-alert-clear-data section h1,

.modal-error-alert section h1 {

margin: 10px 0px;

color: var(--text-alert-color);

font-family: "Roboto", sans-serif;

}

.modal-alert-clear-data section p,

.modal-error-alert section p {

height: 145px;

max-height: 145px;

overflow-y: auto;

margin-bottom: 10px;

padding: 10px;

color: var(--text-color);

font-family: "Roboto", sans-serif;

font-weight: 300;

}

.modal-error-alert section p {

text-align: center;

}

.modal-alert-clear-data section div {

width: 95%;

height: auto;

margin-top: 10px;

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

}

.modal-alert-clear-data section div button {

width: 150px;

height: 45px;

display: flex;

align-items: center;

justify-content: center;

padding: 0px 5px;

border: 0;

border-radius: 20px;

background: var(--background-buttons-color);

}

.modal-alert-clear-data section div button svg {

width: 16px;

height: auto;

margin-left: 6px;

color: var(--icons-color);

}

.modal-alert-clear-data section div button span {

margin-left: 5px;

color: var(--text-color);

font-family: "Roboto", sans-serif;

font-size: 0.7rem;

}

.modal-status-vpn section {

position: relative;

}

.modal-status-vpn section div.loading-status,

.modal-loading section div {

width: 70px;

height: 70px;

position: relative;

border: 4px solid var(--border-loading-color);

border-radius: 50%;

border-top: 4px solid transparent;

animation: spin 1s infinite linear;

}

.modal-status-vpn section div.loading-status svg,

.modal-loading section svg {

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

color: var(--icons-color);

padding: 15px;

position: absolute;

top: auto;

left: auto;

right: auto;

bottom: auto;

animation: spin 1s infinite linear reverse;

}

.modal-status-vpn section h1 {

margin-top: 15%;

color: var(--text-color);

font-family: "Roboto", sans-serif;

}

@keyframes spin {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}

.boingInUp {

-webkit-animation-name: boingInUp;

animation-name: boingInUp;

}

@-webkit-keyframes boingInUp {

0% {

opacity: 0;

transform: perspective(800px) rotateX(-90deg);

transform-origin: 50% 0;

}

50% {

opacity: 1;

transform: perspective(800px) rotateX(50deg);

transform-origin: 50% 0;

}

to {

opacity: 1;

transform: perspective(800px) rotateX(0deg);

transform-origin: 50% 0;

}

}

@keyframes boingInUp {

0% {

opacity: 0;

transform: perspective(800px) rotateX(-90deg);

transform-origin: 50% 0;

}

50% {

opacity: 1;

transform: perspective(800px) rotateX(50deg);

transform-origin: 50% 0;

}

to {

opacity: 1;

transform: perspective(800px) rotateX(0deg);

transform-origin: 50% 0;

}

}

.boingOutDown {

-webkit-animation-name: boingOutDown;

animation-name: boingOutDown;

}

@-webkit-keyframes boingOutDown {

0% {

opacity: 1;

transform: perspective(800px) rotateX(0deg) rotateY(0deg);

transform-origin: 100% 100%;

}

20% {

opacity: 1;

transform: perspective(800px) rotateX(0deg) rotateY(10deg);

transform-origin: 100% 100%;

}

30% {

opacity: 1;

transform: perspective(800px) rotateX(0deg) rotateY(0deg);

transform-origin: 0 100%;

}

40% {

opacity: 1;

transform: perspective(800px) rotateX(10deg) rotateY(10deg);

transform-origin: 0 100%;

}

to {

opacity: 0;

transform: perspective(800px) rotateX(90deg) rotateY(0deg);

transform-origin: 100% 100%;

}

}

@keyframes boingOutDown {

0% {

opacity: 1;

transform: perspective(800px) rotateX(0deg) rotateY(0deg);

transform-origin: 100% 100%;

}

20% {

opacity: 1;

transform: perspective(800px) rotateX(0deg) rotateY(10deg);

transform-origin: 100% 100%;

}

30% {

opacity: 1;

transform: perspective(800px) rotateX(0deg) rotateY(0deg);

transform-origin: 0 100%;

}

40% {

opacity: 1;

transform: perspective(800px) rotateX(10deg) rotateY(10deg);

transform-origin: 0 100%;

}

to {

opacity: 0;

transform: perspective(800px) rotateX(90deg) rotateY(0deg);

transform-origin: 100% 100%;

}

}

.magictime {

-webkit-animation-duration: 1s;

animation-duration: 1s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

@media (prefers-reduced-motion), (print) {

.magictime {

-webkit-animation: unset !important;

animation: unset !important;

transition: none !important;

}

}

@media (max-width: 375px) {

.container form div {

height: 35px;

}

.form-buttons button {

height: 35px;

}

.home-menu button {

height: 35px;

}

}

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;main&gt;

&lt;section class="container-logo"&gt;

&lt;!-- PARA TROCAR A LOGO É SÓ COLOCAR UM LINK COM A IMAGEM DIRETO NO SRC --&gt;

&lt;img id="app-logo" src="" alt="Logo do app" /&gt;

&lt;/section&gt;

&lt;section class="container"&gt;

&lt;header&gt;

&lt;button&gt;Log-in&lt;/button&gt;

&lt;button id="configuracao"&gt;Configurações&lt;/button&gt;

&lt;/header&gt;

&lt;form&gt;

&lt;div id="operadora"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

fill="currentColor"

class="bi bi-ethernet"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M14 13.5v-7a.5.5 0 0 0-.5-.5H12V4.5a.5.5 0 0 0-.5-.5h-1v-.5A.5.5 0 0 0 10 3H6a.5.5 0 0 0-.5.5V4h-1a.5.5 0 0 0-.5.5V6H2.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5ZM3.75 11h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25Zm2 0h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25Zm1.75.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5ZM9.75 11h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25Zm1.75.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5Z"

/&gt;

&lt;path

d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2ZM1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2Z"

/&gt;

&lt;/svg&gt;

&lt;input

id="operator-selected"

type="text"

placeholder="Escolha sua operadora"

readonly

/&gt;

&lt;/div&gt;

&lt;div id="user-container"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

fill="none"

viewBox="0 0 24 24"

stroke-width="1.5"

stroke="currentColor"

class="w-6 h-6"

&gt;

&lt;path

stroke-linecap="round"

stroke-linejoin="round"

d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"

/&gt;

&lt;/svg&gt;

&lt;input id="user" type="text" placeholder="Usuário" /&gt;

&lt;/div&gt;

&lt;div id="password-container"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

fill="none"

viewBox="0 0 24 24"

stroke-width="1.5"

stroke="currentColor"

class="w-6 h-6"

&gt;

&lt;path

stroke-linecap="round"

stroke-linejoin="round"

d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"

/&gt;

&lt;/svg&gt;

&lt;input id="password" type="password" placeholder="Senha" /&gt;

&lt;/div&gt;

&lt;div id="uuid-container"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-fingerprint"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M8.06 6.5a.5.5 0 0 1 .5.5v.776a11.5 11.5 0 0 1-.552 3.519l-1.331 4.14a.5.5 0 0 1-.952-.305l1.33-4.141a10.5 10.5 0 0 0 .504-3.213V7a.5.5 0 0 1 .5-.5Z"

/&gt;

&lt;path

d="M6.06 7a2 2 0 1 1 4 0 .5.5 0 1 1-1 0 1 1 0 1 0-2 0v.332c0 .409-.022.816-.066 1.221A.5.5 0 0 1 6 8.447c.04-.37.06-.742.06-1.115V7Zm3.509 1a.5.5 0 0 1 .487.513 11.5 11.5 0 0 1-.587 3.339l-1.266 3.8a.5.5 0 0 1-.949-.317l1.267-3.8a10.5 10.5 0 0 0 .535-3.048A.5.5 0 0 1 9.569 8Zm-3.356 2.115a.5.5 0 0 1 .33.626L5.24 14.939a.5.5 0 1 1-.955-.296l1.303-4.199a.5.5 0 0 1 .625-.329Z"

/&gt;

&lt;path

d="M4.759 5.833A3.501 3.501 0 0 1 11.559 7a.5.5 0 0 1-1 0 2.5 2.5 0 0 0-4.857-.833.5.5 0 1 1-.943-.334Zm.3 1.67a.5.5 0 0 1 .449.546 10.72 10.72 0 0 1-.4 2.031l-1.222 4.072a.5.5 0 1 1-.958-.287L4.15 9.793a9.72 9.72 0 0 0 .363-1.842.5.5 0 0 1 .546-.449Zm6 .647a.5.5 0 0 1 .5.5c0 1.28-.213 2.552-.632 3.762l-1.09 3.145a.5.5 0 0 1-.944-.327l1.089-3.145c.382-1.105.578-2.266.578-3.435a.5.5 0 0 1 .5-.5Z"

/&gt;

&lt;path

d="M3.902 4.222a4.996 4.996 0 0 1 5.202-2.113.5.5 0 0 1-.208.979 3.996 3.996 0 0 0-4.163 1.69.5.5 0 0 1-.831-.556Zm6.72-.955a.5.5 0 0 1 .705-.052A4.99 4.99 0 0 1 13.059 7v1.5a.5.5 0 1 1-1 0V7a3.99 3.99 0 0 0-1.386-3.028.5.5 0 0 1-.051-.705ZM3.68 5.842a.5.5 0 0 1 .422.568c-.029.192-.044.39-.044.59 0 .71-.1 1.417-.298 2.1l-1.14 3.923a.5.5 0 1 1-.96-.279L2.8 8.821A6.531 6.531 0 0 0 3.058 7c0-.25.019-.496.054-.736a.5.5 0 0 1 .568-.422Zm8.882 3.66a.5.5 0 0 1 .456.54c-.084 1-.298 1.986-.64 2.934l-.744 2.068a.5.5 0 0 1-.941-.338l.745-2.07a10.51 10.51 0 0 0 .584-2.678.5.5 0 0 1 .54-.456Z"

/&gt;

&lt;path

d="M4.81 1.37A6.5 6.5 0 0 1 14.56 7a.5.5 0 1 1-1 0 5.5 5.5 0 0 0-8.25-4.765.5.5 0 0 1-.5-.865Zm-.89 1.257a.5.5 0 0 1 .04.706A5.478 5.478 0 0 0 2.56 7a.5.5 0 0 1-1 0c0-1.664.626-3.184 1.655-4.333a.5.5 0 0 1 .706-.04ZM1.915 8.02a.5.5 0 0 1 .346.616l-.779 2.767a.5.5 0 1 1-.962-.27l.778-2.767a.5.5 0 0 1 .617-.346Zm12.15.481a.5.5 0 0 1 .49.51c-.03 1.499-.161 3.025-.727 4.533l-.07.187a.5.5 0 0 1-.936-.351l.07-.187c.506-1.35.634-2.74.663-4.202a.5.5 0 0 1 .51-.49Z"

/&gt;

&lt;/svg&gt;

&lt;input id="uuid" type="password" placeholder="UUID" /&gt;

&lt;/div&gt;

&lt;section class="form-buttons"&gt;

&lt;button id="update-config" type="button" title="Atualizar"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-arrow-clockwise"

viewBox="0 0 16 16"

&gt;

&lt;path

fill-rule="evenodd"

d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"

/&gt;

&lt;path

d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"

/&gt;

&lt;/svg&gt;

&lt;span&gt;ATUALIZAR&lt;/span&gt;

&lt;/button&gt;

&lt;button id="logs-button" type="button" title="Registro"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

fill="none"

viewBox="0 0 24 24"

stroke-width="1.5"

stroke="currentColor"

class="w-6 h-6"

&gt;

&lt;path

stroke-linecap="round"

stroke-linejoin="round"

d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0112 12.75zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 01-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 002.248-2.354M12 12.75a2.25 2.25 0 01-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 00-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 01.4-2.253M12 8.25a2.25 2.25 0 00-2.248 2.146M12 8.25a2.25 2.25 0 012.248 2.146M8.683 5a6.032 6.032 0 01-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0115.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 00-.575-1.752M4.921 6a24.048 24.048 0 00-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 01-5.223 1.082"

/&gt;

&lt;/svg&gt;

&lt;span&gt;REGISTRO&lt;/span&gt;

&lt;/button&gt;

&lt;button id="vpn-start" type="button" title="Conectar"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-plug"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0zM5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4H5z"

/&gt;

&lt;/svg&gt;

&lt;span&gt;CONECTAR&lt;/span&gt;

&lt;/button&gt;

&lt;/section&gt;

&lt;/form&gt;

&lt;section class="menu"&gt;

&lt;button id="battery-optimization"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

fill="none"

viewBox="0 0 24 24"

stroke-width="1.5"

stroke="currentColor"

class="w-6 h-6"

&gt;

&lt;path

stroke-linecap="round"

stroke-linejoin="round"

d="M21 10.5h.375c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125H21M4.5 10.5h6.75V15H4.5v-4.5zM3.75 18h15A2.25 2.25 0 0021 15.75v-6a2.25 2.25 0 00-2.25-2.25h-15A2.25 2.25 0 001.5 9.75v6A2.25 2.25 0 003.75 18z"

/&gt;

&lt;/svg&gt;

&lt;span&gt;OTIMIZAÇÃO DE BATERIA&lt;/span&gt;

&lt;/button&gt;

&lt;button id="apn-configuration"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

fill="none"

viewBox="0 0 24 24"

stroke-width="1.5"

stroke="currentColor"

class="w-6 h-6"

&gt;

&lt;path

stroke-linecap="round"

stroke-linejoin="round"

d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"

/&gt;

&lt;path

stroke-linecap="round"

stroke-linejoin="round"

d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"

/&gt;

&lt;/svg&gt;

&lt;span&gt;CONFIGURAR APN&lt;/span&gt;

&lt;/button&gt;

&lt;button id="checkuser"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-person-lines-fill"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"

/&gt;

&lt;/svg&gt;

&lt;span&gt;DETALHES DO USUÁRIO&lt;/span&gt;

&lt;/button&gt;

&lt;button id="speedtest-button"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-router"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M5.525 3.025a3.5 3.5 0 0 1 4.95 0 .5.5 0 1 0 .707-.707 4.5 4.5 0 0 0-6.364 0 .5.5 0 0 0 .707.707Z"

/&gt;

&lt;path

d="M6.94 4.44a1.5 1.5 0 0 1 2.12 0 .5.5 0 0 0 .708-.708 2.5 2.5 0 0 0-3.536 0 .5.5 0 0 0 .707.707ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5-.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Zm2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm1.5-.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Zm2 0a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Z"

/&gt;

&lt;path

d="M2.974 2.342a.5.5 0 1 0-.948.316L3.806 8H1.5A1.5 1.5 0 0 0 0 9.5v2A1.5 1.5 0 0 0 1.5 13H2a.5.5 0 0 0 .5.5h2A.5.5 0 0 0 5 13h6a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5h.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 14.5 8h-2.306l1.78-5.342a.5.5 0 1 0-.948-.316L11.14 8H4.86L2.974 2.342ZM14.5 9a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h13Z"

/&gt;

&lt;path d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" /&gt;

&lt;/svg&gt;

&lt;span&gt;TESTAR REDE&lt;/span&gt;

&lt;/button&gt;

&lt;button id="clean-data-app"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

fill="none"

viewBox="0 0 24 24"

stroke-width="1.5"

stroke="currentColor"

class="w-6 h-6"

&gt;

&lt;path

stroke-linecap="round"

stroke-linejoin="round"

d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"

/&gt;

&lt;/svg&gt;

&lt;span&gt;LIMPAR DADOS&lt;/span&gt;

&lt;/button&gt;

&lt;/section&gt;

&lt;/section&gt;

&lt;section class="status-vpn"&gt;

&lt;section&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-outlet"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M3.34 2.994c.275-.338.68-.494 1.074-.494h7.172c.393 0 .798.156 1.074.494.578.708 1.84 2.534 1.84 5.006 0 2.472-1.262 4.297-1.84 5.006-.276.338-.68.494-1.074.494H4.414c-.394 0-.799-.156-1.074-.494C2.762 12.297 1.5 10.472 1.5 8c0-2.472 1.262-4.297 1.84-5.006zm1.074.506a.376.376 0 0 0-.299.126C3.599 4.259 2.5 5.863 2.5 8c0 2.137 1.099 3.74 1.615 4.374.06.073.163.126.3.126h7.17c.137 0 .24-.053.3-.126.516-.633 1.615-2.237 1.615-4.374 0-2.137-1.099-3.74-1.615-4.374a.376.376 0 0 0-.3-.126h-7.17z"

/&gt;

&lt;path

d="M6 5.5a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zM7 10v1h2v-1a1 1 0 0 0-2 0z"

/&gt;

&lt;/svg&gt;

&lt;h1&gt;DESCONECTADO&lt;/h1&gt;

&lt;/section&gt;

&lt;/section&gt;

&lt;section class="home-menu"&gt;

&lt;button type="button" id="buy-access"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

fill="none"

viewBox="0 0 24 24"

stroke-width="1.5"

stroke="currentColor"

class="w-6 h-6"

&gt;

&lt;path

stroke-linecap="round"

stroke-linejoin="round"

d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"

/&gt;

&lt;/svg&gt;

&lt;span&gt;Comprar Acesso&lt;/span&gt;

&lt;/button&gt;

&lt;/section&gt;

&lt;section class="modal-speedtest"&gt;

&lt;header&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-x-lg"

id="close"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"

/&gt;

&lt;/svg&gt;

&lt;/header&gt;

&lt;section&gt;

&lt;div class="loading"&gt;&lt;/div&gt;

&lt;iframe title="fast" id="iframe-speedtest"&gt;&lt;/iframe&gt;

&lt;/section&gt;

&lt;/section&gt;

&lt;section class="modal-configs"&gt;

&lt;header&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-x-lg"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"

/&gt;

&lt;/svg&gt;

&lt;/header&gt;

&lt;section&gt;

&lt;div&gt;

&lt;h1 class="title"&gt;VIVO&lt;/h1&gt;

&lt;ul&gt;

&lt;li&gt;

&lt;img

src="https://basteon.me/assets/images/app/operadoras/VIVO.png"

alt="icon"

/&gt;

&lt;div&gt;

&lt;h1&gt;VIVO 1 ➜ CONFIG 1 ➜ SV01.QFN&lt;/h1&gt;

&lt;p&gt;SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA&lt;/p&gt;

&lt;/div&gt;

&lt;/li&gt;

&lt;li&gt;

&lt;img

src="https://basteon.me/assets/images/app/operadoras/VIVO.png"

alt="icon"

/&gt;

&lt;div&gt;

&lt;h1&gt;VIVO 1 ➜ CONFIG 1 ➜ SV01.QFN&lt;/h1&gt;

&lt;p&gt;SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA&lt;/p&gt;

&lt;/div&gt;

&lt;/li&gt;

&lt;li&gt;

&lt;img

src="https://basteon.me/assets/images/app/operadoras/VIVO.png"

alt="icon"

/&gt;

&lt;div&gt;

&lt;h1&gt;VIVO 1 ➜ CONFIG 1 ➜ SV01.QFN&lt;/h1&gt;

&lt;p&gt;SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA&lt;/p&gt;

&lt;/div&gt;

&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;div&gt;

&lt;h1 class="title"&gt;TIM&lt;/h1&gt;

&lt;ul&gt;

&lt;li&gt;

&lt;img

src="https://basteon.me/assets/images/app/operadoras/VIVO.png"

alt="icon"

/&gt;

&lt;div&gt;

&lt;h1&gt;TIM 1 ➜ CONFIG 1 ➜ SV01.QFN&lt;/h1&gt;

&lt;p&gt;SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA&lt;/p&gt;

&lt;/div&gt;

&lt;/li&gt;

&lt;li&gt;

&lt;img

src="https://basteon.me/assets/images/app/operadoras/VIVO.png"

alt="icon"

/&gt;

&lt;div&gt;

&lt;h1&gt;TIM 1 ➜ CONFIG 1 ➜ SV01.QFN&lt;/h1&gt;

&lt;p&gt;SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA&lt;/p&gt;

&lt;/div&gt;

&lt;/li&gt;

&lt;li&gt;

&lt;img

src="https://basteon.me/assets/images/app/operadoras/VIVO.png"

alt="icon"

/&gt;

&lt;div&gt;

&lt;h1&gt;TIM 1 ➜ CONFIG 1 ➜ SV01.QFN&lt;/h1&gt;

&lt;p&gt;SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA&lt;/p&gt;

&lt;/div&gt;

&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;div&gt;

&lt;h1 class="title"&gt;CLARO&lt;/h1&gt;

&lt;ul&gt;

&lt;li&gt;

&lt;img

src="https://basteon.me/assets/images/app/operadoras/VIVO.png"

alt="icon"

/&gt;

&lt;div&gt;

&lt;h1&gt;CLARO 1 ➜ CONFIG 1 ➜ SV01.QFN&lt;/h1&gt;

&lt;p&gt;SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA&lt;/p&gt;

&lt;/div&gt;

&lt;/li&gt;

&lt;li&gt;

&lt;img

src="https://basteon.me/assets/images/app/operadoras/VIVO.png"

alt="icon"

/&gt;

&lt;div&gt;

&lt;h1&gt;CLARO 1 ➜ CONFIG 1 ➜ SV01.QFN&lt;/h1&gt;

&lt;p&gt;SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA&lt;/p&gt;

&lt;/div&gt;

&lt;/li&gt;

&lt;li&gt;

&lt;img

src="https://basteon.me/assets/images/app/operadoras/VIVO.png"

alt="icon"

/&gt;

&lt;div&gt;

&lt;h1&gt;CLARO 1 ➜ CONFIG 1 ➜ SV01.QFN&lt;/h1&gt;

&lt;p&gt;SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA&lt;/p&gt;

&lt;/div&gt;

&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;/section&gt;

&lt;/section&gt;

&lt;section class="modal-logs"&gt;

&lt;header&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-x-lg"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"

/&gt;

&lt;/svg&gt;

&lt;/header&gt;

&lt;section&gt;

&lt;p&gt;&lt;/p&gt;

&lt;button class="clear-logs" type="button"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-stars"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"

/&gt;

&lt;/svg&gt;

&lt;span&gt;Limpar Registro&lt;/span&gt;

&lt;/button&gt;

&lt;/section&gt;

&lt;/section&gt;

&lt;section class="modal-alert-clear-data"&gt;

&lt;header&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-x-lg"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"

/&gt;

&lt;/svg&gt;

&lt;/header&gt;

&lt;section&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-exclamation-triangle"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"

/&gt;

&lt;path

d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"

/&gt;

&lt;/svg&gt;

&lt;h1&gt;ATENÇÃO&lt;/h1&gt;

&lt;p&gt;

Ao limpar os dados do aplicativo, o aplicativo será redefinido como

se estivesse sendo instalado pela primeira vez! Essa ação é

irreversível. Será necessário inserir o usuário e senha novamente e

atualizar o aplicativo para carregar as configurações atuais de

conexão VPN.

&lt;/p&gt;

&lt;div&gt;

&lt;button type="button" id="back-clear-data-button"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-caret-left"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z"

/&gt;

&lt;/svg&gt;

&lt;span&gt;VOLTAR&lt;/span&gt;

&lt;/button&gt;

&lt;button type="button" id="clear-data-button-confirm"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-trash"

viewBox="0 0 16 16"

&gt;

&lt;path

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"

/&gt;

&lt;path

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"

/&gt;

&lt;/svg&gt;

&lt;span&gt;LIMPAR DADOS&lt;/span&gt;

&lt;/button&gt;

&lt;/div&gt;

&lt;/section&gt;

&lt;/section&gt;

&lt;section class="modal-error-alert"&gt;

&lt;header&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-x-lg"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"

/&gt;

&lt;/svg&gt;

&lt;/header&gt;

&lt;section&gt;&lt;/section&gt;

&lt;/section&gt;

&lt;section class="modal-status-vpn"&gt;

&lt;header&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-x-lg"

id="close-modal-status-vpn"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"

/&gt;

&lt;/svg&gt;

&lt;/header&gt;

&lt;section class="modal-status-content"&gt;

&lt;div class="loading-status"&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-shield-x"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"

/&gt;

&lt;path

d="M6.146 5.146a.5.5 0 0 1 .708 0L8 6.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 7l1.147 1.146a.5.5 0 0 1-.708.708L8 7.707 6.854 8.854a.5.5 0 1 1-.708-.708L7.293 7 6.146 5.854a.5.5 0 0 1 0-.708z"

/&gt;

&lt;/svg&gt;

&lt;/div&gt;

&lt;h1 id="modal-status-text"&gt;CONECTADO!&lt;/h1&gt;

&lt;/section&gt;

&lt;/section&gt;

&lt;section class="modal-checkuser"&gt;

&lt;header&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-x-lg"

id="close-modal-checkuser"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"

/&gt;

&lt;/svg&gt;

&lt;/header&gt;

&lt;section&gt;&lt;/section&gt;

&lt;/section&gt;

&lt;section class="modal-loading"&gt;

&lt;header&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-x-lg"

id="close-modal-loading"

id="close-modal-checkuser"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"

/&gt;

&lt;/svg&gt;

&lt;/header&gt;

&lt;section&gt;

&lt;div&gt;

&lt;svg

xmlns="http://www.w3.org/2000/svg"

width="16"

height="16"

fill="currentColor"

class="bi bi-calendar3"

viewBox="0 0 16 16"

&gt;

&lt;path

d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"

/&gt;

&lt;path

d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"

/&gt;

&lt;/svg&gt;

&lt;/div&gt;

&lt;/section&gt;

&lt;/section&gt;

&lt;/main&gt;

&lt;!-- FUNÇÕES DO APP --&gt;

&lt;script&gt;

const dtStatusBarHeight = () =&gt; DtGetStatusBarHeight.execute()

const dtNavbarHeight = () =&gt; DtGetNavigationBarHeight.execute()

const dtAppLogo = () =&gt; DtGetAppConfig.execute("APP_LOGO")

const dtVpnState = () =&gt; DtGetVpnState.execute()

const dtTranslateText = (label) =&gt; DtTranslateText.execute(label)

const dtAllConfigs = () =&gt; DtGetConfigs.execute()

const dtSetConfig = (id) =&gt; DtSetConfig.execute(id)

const dtGetDefaultConfig = () =&gt; DtGetDefaultConfig.execute()

const dtGetLogs = () =&gt; DtGetLogs.execute()

const dtClearLogs = () =&gt; DtClearLogs.execute()

const dtGetUsername = () =&gt; DtUsername.get()

const dtSetUsername = (username) =&gt; DtUsername.set(username)

const dtGetPassword = () =&gt; DtPassword.get()

const dtSetPassword = (password) =&gt; DtPassword.set(password)

const dtGetUUID = () =&gt; DtUuid.get()

const dtSetUUID = (uuid) =&gt; DtUuid.set(uuid)

const dtUpdate = () =&gt; DtStartAppUpdate.execute()

const dtStartVpn = () =&gt; DtExecuteVpnStart.execute()

const dtStopVpn = () =&gt; DtExecuteVpnStop.execute()

const dtBatteryOptimization = () =&gt; DtIgnoreBatteryOptimizations.execute()

const dtApnConfiguration = () =&gt; DtStartApnActivity.execute()

const dtStartCheckUser = () =&gt; DtStartCheckUser.execute()

const dtCleanDataApp = () =&gt; DtCleanApp.execute()

const dtStartWebView = (url) =&gt; DtStartWebViewActivity.execute(url)

const dtOpenBrowser = (url) =&gt; DtOpenExternalUrl.execute(url)

&lt;/script&gt;

&lt;!-- FUNÇÕES PARA O APP --&gt;

&lt;script&gt;

const dtOnNewLogListener = () =&gt; writeModalContent()

const dtConfigClickListener = () =&gt; writeInputCarrierList()

const dtCheckUserStartedListener = () =&gt; showModalLoading()

const dtVpnStateListener = (state) =&gt; vpnState(state)

const dtCheckUserModelListener = (model) =&gt; writeModalCheckUser(model)

const dtMessageErrorListener = (model) =&gt; writeModalError(model)

&lt;/script&gt;

&lt;!-- FUNÇÕES DE AJUDA --&gt;

&lt;script&gt;

const createSvgIcon = (iconPath, Class = "") =&gt; {

const svg = document.createElementNS(

"http://www.w3.org/2000/svg",

"svg"

)

svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")

svg.setAttribute("width", "16")

svg.setAttribute("height", "16")

svg.setAttribute("fill", "currentColor")

svg.setAttribute("viewBox", "0 0 16 16")

svg.setAttribute("class", Class)

const path = document.createElementNS(

"http://www.w3.org/2000/svg",

"path"

)

path.setAttribute("d", iconPath)

svg.appendChild(path)

return svg

}

const createListItem = (iconPath, Class = "", text) =&gt; {

const li = document.createElement("li")

const svg = createSvgIcon(iconPath, Class)

const span = document.createElement("span")

span.setAttribute("class", Class)

span.innerHTML = text

li.appendChild(svg)

li.appendChild(span)

return li

}

&lt;/script&gt;

&lt;!-- FUNÇÕES DO LAYOUT --&gt;

&lt;script&gt;

const vpnState = (state) =&gt; {

const stateLabel = state || dtVpnState()

switch (stateLabel) {

case "DISCONNECTED":

StartStopVPNButton.html(dtTranslateText("LBL_BTN_START"))

writeModalVpnState(disconnected())

hiddenModalVpnState()

writeStatusVpn(disconnected())

return disconnected()

case "CONNECTING":

StartStopVPNButton.html(dtTranslateText("LBL_BTN_STOP"))

writeModalVpnState(connecting())

writeStatusVpn(connecting())

return connecting()

case "CONNECTED":

StartStopVPNButton.html(dtTranslateText("LBL_BTN_STOP"))

writeModalVpnState(connected())

writeStatusVpn(connected())

return connected()

case "STOPPING":

StartStopVPNButton.html(dtTranslateText("LBL_BTN_STOPPING"))

writeModalVpnState(stopping())

writeStatusVpn(stopping())

return stopping()

case "NO_NETWORK":

StartStopVPNButton.html(dtTranslateText("LBL_BTN_STOP"))

writeModalVpnState(noNetwork())

writeStatusVpn(noNetwork())

return noNetwork()

case "AUTH":

StartStopVPNButton.html(dtTranslateText("LBL_BTN_STOP"))

writeModalVpnState(auth())

writeStatusVpn(auth())

return auth()

case "AUTH_FAILED":

StartStopVPNButton.html(dtTranslateText("LBL_BTN_STOP"))

writeModalVpnState(authFailed())

writeStatusVpn(authFailed())

return authFailed()

default:

return "Não foi possível obter o status da conexão"

}

}

const showConfigMenu = () =&gt; {

const menu = document.querySelector("section.menu")

if (

!menu.className.includes("boingInUp") &amp;&amp;

!menu.className.includes("boingOutDown")

) {

menu.classList.add("magictime", "boingInUp")

HomeMenu.style({ visibility: `hidden` })

} else if (menu.className.includes("boingInUp")) {

menu.classList.remove("magictime", "boingInUp")

menu.classList.add("magictime", "boingOutDown")

HomeMenu.style({ visibility: `visible` })

} else if (menu.className.includes("boingOutDown")) {

menu.classList.remove("magictime", "boingOutDown")

menu.classList.add("magictime", "boingInUp")

HomeMenu.style({ visibility: `hidden` })

} else {

console.log("ocorreu um erro")

}

}

const showModalSpeedtest = () =&gt; {

ModalSpeedtest.addClass("show")

IframeSpeedtest.attr({ src: "https://fast.com/pt/" })

}

const hiddenModalSpeedtest = () =&gt; {

IframeSpeedtest.attr({ src: "" })

ModalSpeedtest.removeClass("show")

}

const writeCarrierList = () =&gt; {

const writeCarrierList = document.querySelector(

"section.modal-configs section"

)

writeCarrierList.innerHTML = ""

const data = JSON.parse(dtAllConfigs())

data.sort((a, b) =&gt; a.sorter - b.sorter)

data.forEach((item, index) =&gt;

item.items.sort((a, b) =&gt; a.sorter - b.sorter)

)

data.forEach((category) =&gt; {

const div = document.createElement("div")

const h1 = document.createElement("h1")

h1.classList.add("title")

h1.innerHTML = category.name

const ul = document.createElement("ul")

category.items.forEach((item) =&gt; {

const li = document.createElement("li")

li.innerHTML = `&lt;img src="${item.icon}" alt="icon" /&gt;&lt;div&gt;&lt;h1&gt;${

item.name

}&lt;/h1&gt;&lt;p&gt;${item.description ?? ""}&lt;/p&gt;&lt;/div&gt;`

li.addEventListener("click", () =&gt; {

dtSetConfig(item.id)

ModalCarrierList.removeClass("show")

})

ul.appendChild(li)

})

div.appendChild(h1)

div.appendChild(ul)

writeCarrierList.appendChild(div)

})

}

const writeInputCarrierList = () =&gt; {

const data = JSON.parse(dtGetDefaultConfig())

const isV2ray = data?.mode?.toLowerCase()?.startsWith("v2ray")

InputCarrierValue.attr({

placeholder: data.name ?? "Escolha sua operadora",

})

if (!data?.auth?.v2ray_uuid &amp;&amp; isV2ray) {

ContainerInputUser.style({ display: "none" })

ContainerInputPassword.style({ display: "none" })

ContainerInputUUID.style({ display: "flex" })

InputUUIDValue.attr({ value: dtGetUUID() ?? "" })

} else {

ContainerInputPassword.style({ display: "flex" })

ContainerInputUUID.style({ display: "none" })

InputUserValue.attr({ value: dtGetUsername() ?? "" })

InputPasswordValue.attr({ value: dtGetPassword() ?? "" })

}

}

const showModalCarrierList = () =&gt; {

writeCarrierList()

ModalCarrierList.addClass("show")

}

const hiddenModalCarrierList = () =&gt; {

ModalCarrierList.removeClass("show")

}

const writeModalContent = () =&gt; {

const data = JSON.parse(dtGetLogs())

let content = ""

data.forEach((item) =&gt; {

content += `${Object.keys(item)} ${item[Object.keys(item)]} &lt;br&gt;`

})

ModalLoggerContent.html(content)

}

const showModalLogger = () =&gt; {

dtOnNewLogListener()

const modal = document.querySelector("section.modal-logs")

if (!modal.className.includes("show")) {

ModalLogger.addClass("show")

}

}

const hiddenModalLogger = () =&gt; {

ModalLogger.removeClass("show")

}

const startStopVpn = () =&gt; {

const state = dtVpnState()

if (state !== "CONNECTED") {

dtStartVpn()

showModalVpnState()

} else {

dtStopVpn()

}

}

const writeStatusVpn = (state) =&gt; {

const icon = state.icon

const text = `&lt;h1 style="color: ${state.color}"&gt;${state.text}&lt;/h1&gt;`

ContentContainerSVpnState.html(icon + text)

return icon + text

}

const writeModalVpnState = (state) =&gt; {

const divIcon = `&lt;div class="loading-status"&gt;${state.icon}&lt;/div&gt;`

const titleStatus = `&lt;h1&gt;${state.text}&lt;/h1&gt;`

ContentModalVpnState.html(divIcon + titleStatus)

return divIcon + titleStatus

}

const showModalVpnState = () =&gt; {

const data = JSON.parse(dtGetDefaultConfig())

if (!data || !dtGetUsername() || !dtGetPassword()) {

return

} else {

ModalVpnState.addClass("show")

}

}

const hiddenModalVpnState = () =&gt; {

ModalVpnState.removeClass("show")

}

const showModalLoading = () =&gt; {

if (!JSON.parse(dtGetDefaultConfig())?.urlCheckUser) {

hiddenModalVpnState()

} else {

hiddenModalVpnState()

ModalLoading.addClass("show")

}

}

const hiddenModalLoading = () =&gt; {

ModalLoading.removeClass("show")

}

const writeModalCheckUser = (model) =&gt; {

const data = JSON.parse(model)

ContentModalCheckUser.html(`

&lt;h1&gt;DETALHES DO USUÁRIO&lt;/h1&gt;

&lt;div&gt;

&lt;i class="bi bi-person"&gt;&lt;/i&gt;

&lt;span&gt;Nome do usuário: ${data.username}&lt;/span&gt;

&lt;/div&gt;

&lt;div&gt;

&lt;i class="bi bi-calendar-week"&gt;&lt;/i&gt;

&lt;span&gt;Expiração: ${data.expiration_date}&lt;/span&gt;

&lt;/div&gt;

&lt;div&gt;

&lt;i class="bi bi-hourglass-split"&gt;&lt;/i&gt;

&lt;span&gt;Dias restantes: ${data.expiration_days}&lt;/span&gt;

&lt;/div&gt;

&lt;div&gt;

&lt;i class="bi bi-people"&gt;&lt;/i&gt;

&lt;span&gt;Dispositivos: ${data.count_connections}|${data.limit_connections}&lt;/span&gt;

&lt;/div&gt;

`)

showModalCheckUser()

}

const showModalCheckUser = () =&gt; {

hiddenModalLoading()

ModalCheckUser.addClass("show")

}

const hiddenModalCheckUser = () =&gt; {

ModalCheckUser.removeClass("show")

}

const showModalAlertClearData = () =&gt; {

ModalAlertClearData.addClass("show")

}

const hiddenModalAlertClearData = () =&gt; {

ModalAlertClearData.removeClass("show")

}

const writeModalError = (model) =&gt; {

const data = JSON.parse(model)

const svg = `&lt;svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16"&gt;&lt;path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/&gt;&lt;path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/&gt;&lt;/svg&gt;`

const h1 = `&lt;h1 id="title-error-alert-title"&gt;${data.title}&lt;/h1&gt;`

const p = `&lt;p id="title-error-alert-description"&gt;${data.content}&lt;/p&gt;`

ContentModalError.html(svg + h1 + p)

hiddenModalSpeedtest()

hiddenModalCarrierList()

hiddenModalLogger()

hiddenModalVpnState()

hiddenModalLoading()

hiddenModalCheckUser()

showModalError()

}

const showModalError = () =&gt; {

ModalError.addClass("show")

}

const hiddenModalError = () =&gt; {

ModalError.removeClass("show")

}

const openBrowserIntoRenew = () =&gt; {

dtStartWebView("https://luxenet.com.br/")

}

const getAppLogo = () =&gt; {

const logo = dtAppLogo()

if (!logo) {

return false

} else {

return JSON.parse(logo).value

}

}

&lt;/script&gt;

&lt;!-- ESTADOS DE CONEXÃO --&gt;

&lt;script&gt;

const disconnected = () =&gt; {

const state = {

icon: `&lt;svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-outlet" viewBox="0 0 16 16"&gt;&lt;path d="M3.34 2.994c.275-.338.68-.494 1.074-.494h7.172c.393 0 .798.156 1.074.494.578.708 1.84 2.534 1.84 5.006 0 2.472-1.262 4.297-1.84 5.006-.276.338-.68.494-1.074.494H4.414c-.394 0-.799-.156-1.074-.494C2.762 12.297 1.5 10.472 1.5 8c0-2.472 1.262-4.297 1.84-5.006zm1.074.506a.376.376 0 0 0-.299.126C3.599 4.259 2.5 5.863 2.5 8c0 2.137 1.099 3.74 1.615 4.374.06.073.163.126.3.126h7.17c.137 0 .24-.053.3-.126.516-.633 1.615-2.237 1.615-4.374 0-2.137-1.099-3.74-1.615-4.374a.376.376 0 0 0-.3-.126h-7.17z"/&gt;&lt;path d="M6 5.5a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zM7 10v1h2v-1a1 1 0 0 0-2 0z"/&gt;&lt;/svg&gt;`,

color: "#FFFFFF",

text: dtTranslateText("LBL_STATE_DISCONNECTED"),

}

return state

}

const connecting = () =&gt; {

const state = {

icon: `&lt;svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plug" viewBox="0 0 16 16"&gt;&lt;path d="M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0zM5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4H5z"/&gt;&lt;/svg&gt;`,

color: "#FFFF00",

text: dtTranslateText("LBL_STATE_CONNECTING"),

}

return state

}

const connected = () =&gt; {

const state = {

icon: `&lt;svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plugin" viewBox="0 0 16 16"&gt;&lt;path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/&gt;&lt;/svg&gt;`,

color: "#00FF00",

text: dtTranslateText("LBL_STATE_CONNECTED"),

}

return state

}

const stopping = () =&gt; {

const state = {

icon: `&lt;svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stop" viewBox="0 0 16 16"&gt;&lt;path d="M3.5 5A1.5 1.5 0 0 1 5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5zM5 4.5a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5V5a.5.5 0 0 0-.5-.5H5z"/&gt;&lt;/svg&gt;`,

color: "#FFFF00",

text: dtTranslateText("LBL_STATE_STOPPING"),

}

return state

}

const noNetwork = () =&gt; {

const state = {

icon: `&lt;svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wifi-off" viewBox="0 0 16 16"&gt;&lt;path d="M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z"/&gt;&lt;/svg&gt;`,

color: "#FF0000",

text: dtTranslateText("LBL_STATE_NO_NETWORK"),

}

return state

}

const auth = () =&gt; {

const state = {

icon: `&lt;svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-lock" viewBox="0 0 16 16"&gt;&lt;path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 5.996V14H3s-1 0-1-1 1-4 6-4c.564 0 1.077.038 1.544.107a4.524 4.524 0 0 0-.803.918A10.46 10.46 0 0 0 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h5ZM9 13a1 1 0 0 1 1-1v-1a2 2 0 1 1 4 0v1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2Zm3-3a1 1 0 0 0-1 1v1h2v-1a1 1 0 0 0-1-1Z"/&gt;&lt;/svg&gt;`,

color: "#FFFF00",

text: dtTranslateText("LBL_STATE_AUTH"),

}

return state

}

const authFailed = () =&gt; {

const state = {

icon: `&lt;svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-slash" viewBox="0 0 16 16"&gt;&lt;path d="M13.879 10.414a2.501 2.501 0 0 0-3.465 3.465l3.465-3.465Zm.707.707-3.465 3.465a2.501 2.501 0 0 0 3.465-3.465Zm-4.56-1.096a3.5 3.5 0 1 1 4.949 4.95 3.5 3.5 0 0 1-4.95-4.95ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm.256 7a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"/&gt;&lt;/svg&gt;`,

color: "#FF0000",

text: dtTranslateText("LBL_STATE_AUTH_FAILED"),

}

return state

}

&lt;/script&gt;

&lt;!-- DOM WRAPPER --&gt;

&lt;script&gt;

const Dom = (selector) =&gt; {

const _elements = document.querySelectorAll(selector)

const wrapper = {

on(listeners) {

for (const [event, listener] of Object.entries(listeners)) {

_elements.forEach((element) =&gt; {

element.addEventListener(event, listener)

})

}

return wrapper

},

addClass: (...tokens) =&gt; {

_elements.forEach((element) =&gt; {

element.classList.add(...tokens)

})

return wrapper

},

removeClass: (...tokens) =&gt; {

_elements.forEach((element) =&gt; {

element.classList.remove(...tokens)

})

return wrapper

},

toggleClass: (token, force) =&gt; {

_elements.forEach((element) =&gt; {

element.classList.toggle(token, force)

})

return wrapper

},

style(styles) {

for (const [property, value] of Object.entries(styles)) {

console.log(value)

_elements.forEach((element) =&gt; {

element.style[property] = value

})

}

return wrapper

},

attr(attrs) {

for (const [name, value] of Object.entries(attrs)) {

_elements.forEach((element) =&gt; element.setAttribute(name, value))

}

return wrapper

},

html(value) {

_elements.forEach((element) =&gt; (element.innerHTML = value))

return wrapper

},

}

return wrapper

}

&lt;/script&gt;

&lt;!-- VÁRIAVEIS --&gt;

&lt;script&gt;

const Main = Dom("main")

const AppLogo = Dom("#app-logo")

const ConfigMenu = Dom("#configuracao")

const ContainerConfigMenu = Dom("section.menu")

const BatteryOptimizationButton = Dom("#battery-optimization")

const ApnConfigurationButton = Dom("#apn-configuration")

const CheckuserButton = Dom("#checkuser")

const SpeedtestButton = Dom("#speedtest-button")

const ClearDataAppButton = Dom("#clean-data-app")

const BuyAccessButton = Dom("#buy-access")

const ModalSpeedtest = Dom("section.modal-speedtest")

const CloseModalSpeedtest = Dom("section.modal-speedtest header svg")

const LoadingSpeedtest = Dom(

"section.modal-speedtest section div.loading"

)

const IframeSpeedtest = Dom("#iframe-speedtest")

const SelectCarrierButton = Dom("#operadora")

const ModalCarrierList = Dom("section.modal-configs")

const CloseModalCarrierList = Dom("section.modal-configs header svg")

const ModalContentCarrierList = Dom("section.modal-configs section")

const ContainerInputUser = Dom("#user-container")

const ContainerInputPassword = Dom("#password-container")

const ContainerInputUUID = Dom("#uuid-container")

const InputCarrierValue = Dom("#operadora input")

const InputUserValue = Dom("#user-container input")

const InputPasswordValue = Dom("#password-container input")

const InputUUIDValue = Dom("#uuid-container input")

const RefreshButton = Dom("#update-config")

const LoggerButton = Dom("#logs-button")

const StartStopVPNButton = Dom("#vpn-start")

const ContainerSVpnState = Dom("section.status-vpn")

const ContentContainerSVpnState = Dom("section.status-vpn section")

const ModalVpnState = Dom("section.modal-status-vpn")

const CloseModalVpnState = Dom("section.modal-status-vpn header svg")

const ContentModalVpnState = Dom(

"section.modal-status-vpn section.modal-status-content"

)

const ModalLogger = Dom("section.modal-logs")

const CloseModalLogger = Dom("section.modal-logs header svg")

const ModalLoggerContent = Dom("section.modal-logs section p")

const CleanLoggerContent = Dom("section.modal-logs section button")

const ModalLoading = Dom("section.modal-loading")

const CloseModalLoading = Dom("section.modal-loading header svg")

const ModalCheckUser = Dom("section.modal-checkuser")

const CloseModalCheckUser = Dom("section.modal-checkuser header svg")

const ContentModalCheckUser = Dom("section.modal-checkuser section")

const ModalAlertClearData = Dom("section.modal-alert-clear-data")

const CloseModalAlertClearData = Dom(

"section.modal-alert-clear-data header svg"

)

const BackModalAlertClearData = Dom("#back-clear-data-button")

const ConfirmModalAlertClearData = Dom("#clear-data-button-confirm")

const ModalError = Dom("section.modal-error-alert")

const CloseModalError = Dom("section.modal-error-alert header svg")

const ContentModalError = Dom("section.modal-error-alert section")

const HomeMenu = Dom("section.home-menu")

&lt;/script&gt;

&lt;!-- VARIAVEIS ROOT --&gt;

&lt;script&gt;

document.documentElement.style.setProperty(

"--margem-do-topo-do-modal",

`${dtStatusBarHeight() + 10}px`

)

document.documentElement.style.setProperty(

"--margem-do-bottom-do-modal",

`${dtNavbarHeight() + 10}px`

)

&lt;/script&gt;

&lt;!-- AÇÕES --&gt;

&lt;script&gt;

Main.style({ padding: `${dtStatusBarHeight() + 10}px 0px 0px 0px` })

HomeMenu.style({ bottom: `${dtNavbarHeight() + 10}px` })

AppLogo.attr({ src: getAppLogo() })

ConfigMenu.on({ click: () =&gt; showConfigMenu() })

BatteryOptimizationButton.on({ click: () =&gt; dtBatteryOptimization() })

ApnConfigurationButton.on({ click: () =&gt; dtApnConfiguration() })

SpeedtestButton.on({ click: () =&gt; showModalSpeedtest() })

CloseModalSpeedtest.on({ click: () =&gt; hiddenModalSpeedtest() })

SelectCarrierButton.on({ click: () =&gt; showModalCarrierList() })

CloseModalCarrierList.on({ click: () =&gt; hiddenModalCarrierList() })

InputUserValue.on({ input: (e) =&gt; dtSetUsername(e.target.value) })

InputPasswordValue.on({ input: (e) =&gt; dtSetPassword(e.target.value) })

InputUUIDValue.on({ input: (e) =&gt; dtSetUUID(e.target.value) })

RefreshButton.on({ click: () =&gt; dtUpdate() })

LoggerButton.on({ click: () =&gt; showModalLogger() })

CloseModalLogger.on({ click: () =&gt; hiddenModalLogger() })

CleanLoggerContent.on({ click: () =&gt; dtClearLogs() })

StartStopVPNButton.on({ click: () =&gt; startStopVpn() })

ContentContainerSVpnState.html(vpnState())

ContentModalVpnState.html(vpnState())

CloseModalVpnState.on({ click: () =&gt; hiddenModalVpnState() })

CloseModalLoading.on({ click: () =&gt; hiddenModalLoading() })

CloseModalCheckUser.on({ click: () =&gt; hiddenModalCheckUser() })

CheckuserButton.on({ click: () =&gt; dtStartCheckUser() })

ClearDataAppButton.on({ click: () =&gt; showModalAlertClearData() })

CloseModalAlertClearData.on({ click: () =&gt; hiddenModalAlertClearData() })

BackModalAlertClearData.on({ click: () =&gt; hiddenModalAlertClearData() })

ConfirmModalAlertClearData.on({ click: () =&gt; dtCleanDataApp() })

CloseModalError.on({ click: () =&gt; hiddenModalError() })

BuyAccessButton.on({ click: () =&gt; openBrowserIntoRenew() })

writeInputCarrierList()

&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

</value>

<type>HTML</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22200</id>

<label>ANDROID WEBVIEW (POR SUA CONTA E RISCO)</label>

<name>APP_SUPPORT_BUTTON</name>

<value null="true"/>

<type>HTML</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

<element>

<id number="true">22201</id>

<label>PAGINA WEBVIEW (POR SUA CONTA E RISCO)</label>

<name>APP_WEB_VIEW</name>

<value null="true"/>

<type>HTML</type>

<status>ACTIVE</status>

<user_id>d37036c7-833d-4246-8b45-c0ce6e8daaa2</user_id>

</element>

</root>