[
{
"id": 23759,
"label": "Nome do app",
"name": "APP_NAME",
"value": "",
"type": "STRING",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23760,
"label": "Logo do app",
"name": "APP_LOGO",
"value": "https://i.imgur.com/7EYlzpa.png",
"type": "IMAGE",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23761,
"label": "Imagem de fundo",
"name": "APP_BACKGROUND_IMAGE",
"value": "https://i.imgur.com/hvNeyZB.jpg",
"type": "IMAGE",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23762,
"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": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23763,
"label": "Cor de fundo",
"name": "APP_BACKGROUND_COLOR",
"value": "#080e16c7",
"type": "COLOR",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23764,
"label": "Cor do card inicial",
"name": "APP_CARD_COLOR",
"value": "#00000030",
"type": "COLOR",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23765,
"label": "Raio do card inicial",
"name": "APP_CARD_RADIUS",
"value": 30,
"type": "INTEGER",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23766,
"label": "Cor do card de status",
"name": "APP_CARD_STATUS_COLOR",
"value": "#00000030",
"type": "COLOR",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23767,
"label": "Raio do card de status",
"name": "APP_CARD_STATUS_RADIUS",
"value": 35,
"type": "INTEGER",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23768,
"label": "Cor do card de configurações",
"name": "APP_CARD_CONFIG_COLOR",
"value": "#00000080",
"type": "COLOR",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23769,
"label": "Cor do fundo dos dialogs",
"name": "APP_DIALOG_BACKGROUND_COLOR",
"value": "#24242463",
"type": "COLOR",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23770,
"label": "Cor do fundo do dialog de log",
"name": "APP_DIALOG_LOGGER_COLOR",
"value": "#24242463",
"type": "COLOR",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23771,
"label": "Cor das bordas",
"name": "APP_BORDER_COLOR",
"value": "#24242463",
"type": "COLOR",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23772,
"label": "Cor dos inputs",
"name": "APP_INPUT_COLOR",
"value": "#24242463",
"type": "COLOR",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23773,
"label": "Raio dos inputs",
"name": "APP_INPUT_RADIUS",
"value": 35,
"type": "INTEGER",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23774,
"label": "Cor dos textos",
"name": "APP_TEXT_COLOR",
"value": "#ffffff",
"type": "COLOR",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23775,
"label": "Cor dos botões",
"name": "APP_BUTTON_COLOR",
"value": "#24242463",
"type": "COLOR",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23776,
"label": "Raio dos botões",
"name": "APP_BUTTON_RADIUS",
"value": 35,
"type": "INTEGER",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23777,
"label": "Cor dos icones",
"name": "APP_ICON_COLOR",
"value": "#ffffffff",
"type": "COLOR",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23778,
"label": "Exibir modo de conexão",
"name": "APP_SHOW_CONNECTION_MODE",
"value": true,
"type": "BOOLEAN",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23779,
"label": "Atualizar automaticamente as configurações ao lançar uma atualização.",
"name": "APP_CONFIG_AUTO_UPDATE",
"value": false,
"type": "BOOLEAN",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23780,
"label": "Iniciar o app automaticamente ao reiniciar o dispositivo",
"name": "APP_AUTO_START",
"value": false,
"type": "BOOLEAN",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23781,
"label": "Usar limiter de conexão",
"name": "APP_CONNECTION_LIMITER",
"value": true,
"type": "BOOLEAN",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23782,
"label": "Usar botão de atualizações",
"name": "APP_BTN_UPDATE_ENABLED",
"value": true,
"type": "BOOLEAN",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23783,
"label": "Usar botão de registros",
"name": "APP_BTN_LOGGER_ENABLED",
"value": true,
"type": "BOOLEAN",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23784,
"label": "Usar botão de pagina webview",
"name": "APP_BTN_PAGE_ENABLED",
"value": false,
"type": "BOOLEAN",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23785,
"label": "Ativar dialog de erros",
"name": "APP_DIALOG_ERROR_ENABLED",
"value": true,
"type": "BOOLEAN",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23786,
"label": "Ativar dialog de checkuser",
"name": "APP_CHECKUSER_DIALOG_ENABLED",
"value": true,
"type": "BOOLEAN",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23787,
"label": "Ativar toast de sucesso",
"name": "APP_SUCCESS_TOAST_ENABLED",
"value": true,
"type": "BOOLEAN",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23788,
"label": "Ativar toast de erro",
"name": "APP_ERROR_TOAST_ENABLED",
"value": true,
"type": "BOOLEAN",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23789,
"label": "Usar layout webview",
"name": "APP_LAYOUT_WEBVIEW_ENABLED",
"value": true,
"type": "BOOLEAN",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23790,
"label": "Mensagem",
"name": "APP_MESSAGE",
"value": null,
"type": "TEXT",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23791,
"label": "URL de atualização do aplicativo",
"name": "APP_UPDATE_URL",
"value": null,
"type": "URL",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23792,
"label": "Tipo de mensagem",
"name": "APP_MESSAGE_TYPE",
"value": {
"options": [
{
"label": "Alerta",
"value": "ALERT"
},
{
"label": "Informação",
"value": "INFO"
},
{
"label": "Boas vindas",
"value": "WELCOME"
},
{
"label": "Sem mensagem",
"value": "NONE"
}
],
"selected": "NONE"
},
"type": "SELECT",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23793,
"label": "LAYOUT WEBVIEW (POR SUA CONTA E RISCO)",
"name": "APP_LAYOUT_WEBVIEW",
"value": "<!DOCTYPE html>\n<html class=\"w-full h-full\" lang=\"pt-BR\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n\n <title>780890715 - @RagnarVps | @alexdsgmoura</title>\n\n <style>\n *,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:\"\"}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-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:initial}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:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-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}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}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}*,::backdrop,:after,:before{--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:#3b82f680;--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: }.absolute{position:absolute}.relative{position:relative}.bottom-1{bottom:.25rem}.left-1\\/2{left:50%}.right-1{right:.25rem}.top-1{top:.25rem}.top-1\\/2{top:50%}.my-3{margin-top:.75rem;margin-bottom:.75rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.ml-auto{margin-left:auto}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-2\\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-5{margin-top:1.25rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-1\\/5{height:20%}.h-10{height:2.5rem}.h-12{height:3rem}.h-2\\/3{height:66.666667%}.h-2\\/4{height:50%}.h-20{height:5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\\[100\\%\\]{height:100%}.h-\\[40px\\]{height:40px}.h-\\[90\\%\\]{height:90%}.h-\\[calc\\(100\\%-160px\\)\\]{height:calc(100% - 160px)}.h-auto{height:auto}.h-full{height:100%}.max-h-8{max-height:2rem}.max-h-\\[10\\%\\]{max-height:10%}.max-h-\\[66\\.666667\\%\\]{max-height:66.666667%}.min-h-\\[40px\\]{min-height:40px}.w-10{width:2.5rem}.w-11\\/12{width:91.666667%}.w-14{width:3.5rem}.w-2\\/4{width:50%}.w-20{width:5rem}.w-4{width:1rem}.w-4\\/5{width:80%}.w-5{width:1.25rem}.w-5\\/6{width:83.333333%}.w-6{width:1.5rem}.w-8{width:2rem}.w-\\[40px\\]{width:40px}.w-\\[calc\\(100\\%-30px\\)\\]{width:calc(100% - 30px)}.w-\\[calc\\(100\\%-40px\\)\\]{width:calc(100% - 40px)}.w-auto{width:auto}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-x-1\\/2{--tw-translate-x:-50%}.-translate-x-1\\/2,.-translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-full{--tw-translate-x:-100%}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.scale-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-0{--tw-scale-x:0;--tw-scale-y:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-none{cursor:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-items-center{justify-items:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-5{gap:1.25rem}.overflow-auto{overflow:auto}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-\\[\\#01010342\\]{border-color:#01010342}.border-\\[\\#767881\\]{--tw-border-opacity:1;border-color:rgb(118 120 129/var(--tw-border-opacity))}.bg-\\[\\#070610\\]{--tw-bg-opacity:1;background-color:rgb(7 6 16/var(--tw-bg-opacity))}.bg-\\[\\#0a0c17ab\\]{background-color:#0a0c17ab}.bg-\\[\\#0c0d18e0\\]{background-color:#0c0d18e0}.bg-\\[\\#121c28\\]{--tw-bg-opacity:1;background-color:rgb(18 28 40/var(--tw-bg-opacity))}.bg-\\[\\#14141489\\]{background-color:#14141489}.bg-\\[\\#414cb8\\]{--tw-bg-opacity:1;background-color:rgb(65 76 184/var(--tw-bg-opacity))}.bg-\\[\\#575e81\\]{--tw-bg-opacity:1;background-color:rgb(87 94 129/var(--tw-bg-opacity))}.bg-red-900{--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\\[\\#0a0c17ab\\]{--tw-gradient-from:#0a0c17ab var(--tw-gradient-from-position);--tw-gradient-to:#0a0c1700 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.stroke-\\[\\#FFFFFF\\],.stroke-white{stroke:#fff}.p-2{padding:.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-\\[10\\%\\]{padding-left:10%;padding-right:10%}.px-\\[10px\\]{padding-left:10px;padding-right:10px}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.pb-\\[30px\\]{padding-bottom:30px}.pl-1{padding-left:.25rem}.pr-6{padding-right:1.5rem}.pt-\\[10px\\]{padding-top:10px}.text-center{text-align:center}.text-\\[0\\.5rem\\]{font-size:.5rem}.text-\\[0\\.65rem\\]{font-size:.65rem}.text-\\[0\\.6rem\\]{font-size:.6rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.leading-7{line-height:1.75rem}.text-\\[\\#11c9ff\\]{--tw-text-opacity:1;color:rgb(17 201 255/var(--tw-text-opacity))}.text-\\[\\#767881\\]{--tw-text-opacity:1;color:rgb(118 120 129/var(--tw-text-opacity))}.text-\\[\\#7d7f81\\]{--tw-text-opacity:1;color:rgb(125 127 129/var(--tw-text-opacity))}.text-\\[\\#FF0000\\]{--tw-text-opacity:1;color:rgb(255 0 0/var(--tw-text-opacity))}.text-\\[\\#FFFFFF\\],.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-\\[0px_0px_10px_0px_rgba\\(18\\2c 22\\2c 34\\2c 1\\)\\]{--tw-shadow:0px 0px 10px 0px #121622;--tw-shadow-colored:0px 0px 10px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid #0000;outline-offset:2px}.transition-\\[max-height\\]{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-1000{transition-duration:1s}@media (max-width:300px){.max-\\[300px\\]\\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:280px){.min-\\[280px\\]\\:text-sm{font-size:.875rem;line-height:1.25rem}.min-\\[280px\\]\\:text-xs{font-size:.75rem;line-height:1rem}}\n </style>\n </head>\n\n <body class=\"w-full h-full\">\n <main class=\"w-full h-full flex flex-col relative\">\n <section class=\"w-full h-full flex flex-col px-[10px] pt-[10px] pb-[30px] overflow-hidden\" id=\"container-home\">\n <section class=\"flex justify-between items-center relative\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"text-[#FFFFFF] w-8 h-8\" id=\"open-menu\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5\" />\n </svg>\n\n <div class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\">\n <span class=\"text-[#FFFFFF] min-[280px]:text-xs text-sm\" id=\"carrier-details\">Buscando informações da rede...</span>\n </div>\n\n <div>\n <span class=\"text-[#FFFFFF] min-[280px]:text-xs text-sm\" id=\"vpn-status\">Inativo</span>\n </div>\n </section>\n\n <section class=\"w-full h-1/5 flex justify-center\">\n <img class=\"w-4/5\" id=\"app-logo\" src=\"https://i.ibb.co/DWFmFLh/DTsa3hwchn.png\" alt=\"logo\" />\n </section>\n\n <section class=\"w-full h-[40px] flex justify-between items-center gap-2 mt-2.5\">\n <button class=\"w-[calc(100%-40px)] h-full flex items-center justify-between gap-1 px-1 rounded-md cursor-none outline-none bg-[#070610]\" id=\"button-of-list-carrier\" type=\"button\" title=\"Selecionar Configuração\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"w-6 h-6 text-[#FFFFFF]\" viewBox=\"0 0 16 16\">\n <path d=\"M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6\" />\n </svg>\n\n <span class=\"w-full text-[#FFFFFF] text-xs truncate\" id=\"value-of-carrier\">ESCOLHA UMA CONFIGURAÇÃO</span>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"text-[#FFFFFF] w-5 h-5\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button class=\"w-[40px] h-full flex items-center justify-center rounded-md cursor-none outline-none bg-[#070610]\" id=\"button-open-checkuser\" type=\"button\" title=\"checkuser\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"text-[#FFFFFF]\" viewBox=\"0 0 16 16\">\n <path d=\"M4.684 11.523v-2.3h2.261v-.61H4.684V6.801h2.464v-.61H4v5.332zm3.296 0h.676V8.98c0-.554.227-1.007.953-1.007.125 0 .258.004.329.015v-.613a1.806 1.806 0 0 0-.254-.02c-.582 0-.891.32-1.012.567h-.02v-.504H7.98v4.105zm2.805-5.093c0 .238.192.425.43.425a.428.428 0 1 0 0-.855.426.426 0 0 0-.43.43m.094 5.093h.672V7.418h-.672z\" />\n <path d=\"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z\" />\n </svg>\n </button>\n </section>\n\n <section class=\"w-full h-auto flex flex-col items-center gap-3 mt-2.5 py-2.5 bg-[#14141489] rounded-md\">\n <h1 class=\"text-[#7d7f81] text-lg font-medium\">Dados de Acesso</h1>\n\n <div class=\"w-11/12 h-9 overflow-hidden border border-[#01010342] rounded-md bg-gradient-to-r from-[#0a0c17ab] to-transparent\" id=\"container-input-username\">\n <input class=\"w-full h-full pl-1 outline-none text-[#FFFFFF] bg-transparent\" id=\"input-username\" type=\"text\" placeholder=\"Usuário\" />\n </div>\n\n <div class=\"w-11/12 h-9 flex items-center relative overflow-hidden border border-[#01010342] rounded-md bg-gradient-to-r from-[#0a0c17ab] to-transparent\" id=\"container-input-password\">\n <input class=\"w-[calc(100%-30px)] h-full pl-1 outline-none text-[#FFFFFF] bg-transparent\" id=\"input-password\" type=\"password\" placeholder=\"Senha\" />\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"w-5 h-5 absolute right-1 text-[#FFFFFF]\" id=\"eye-view-password\" viewBox=\"0 0 16 16\">\n <path d=\"M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z\" />\n <path d=\"M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0\" />\n </svg>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"w-5 h-5 absolute right-1 text-[#FFFFFF] hidden\" id=\"eye-not-view-password\" viewBox=\"0 0 16 16\">\n <path d=\"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486z\" />\n <path d=\"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829\" />\n <path d=\"M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708\" />\n </svg>\n </div>\n\n <div class=\"w-11/12 h-9 hidden items-center relative overflow-hidden border border-[#01010342] rounded-md bg-gradient-to-r from-[#0a0c17ab] to-transparent\" id=\"container-input-uuid\">\n <input class=\"w-[calc(100%-30px)] h-full pl-1 outline-none text-[#FFFFFF] bg-transparent\" id=\"input-uuid\" type=\"password\" placeholder=\"UUID\" />\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"w-5 h-5 absolute right-1 text-[#FFFFFF]\" id=\"eye-view-uuid\" viewBox=\"0 0 16 16\">\n <path d=\"M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z\" />\n <path d=\"M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0\" />\n </svg>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"w-5 h-5 absolute right-1 text-[#FFFFFF] hidden\" id=\"eye-not-view-uuid\" viewBox=\"0 0 16 16\">\n <path d=\"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486z\" />\n <path d=\"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829\" />\n <path d=\"M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708\" />\n </svg>\n </div>\n\n <button class=\"w-11/12 h-9 rounded-md shadow-[0px_0px_10px_0px_rgba(18,22,34,1)] bg-[#0a0c17ab] cursor-none\" id=\"button-vpn-start-stop\" type=\"button\" title=\"conectar ou desconectar vpn\">\n <span class=\"text-sm font-medium text-[#FFFFFF]\" id=\"status-button-vpn\">Conectar</span>\n </button>\n </section>\n\n <section class=\"w-full h-auto grid grid-cols-2 justify-items-center mt-auto py-2.5\">\n <span class=\"text-[#FFFFFF]\">Download</span>\n\n <span class=\"text-[#FFFFFF]\">Upload</span>\n\n <span class=\"text-[#FFFFFF]\" id=\"download-value\">0 B/s</span>\n\n <span class=\"text-[#FFFFFF]\" id=\"upload-value\">0 B/s</span>\n </section>\n\n <section class=\"w-full h-10 flex items-center justify-center gap-2 mt-auto rounded-md bg-[#070610]\" id=\"button-logs\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"text-[#FFFFFF] w-4 h-4\" viewBox=\"0 0 16 16\">\n <path d=\"M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5\" />\n <path d=\"M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z\" />\n </svg>\n\n <span class=\"text-[#FFFFFF] text-sm font-medium\">REGISTRO</span>\n </section>\n </section>\n\n <section class=\"w-5/6 h-full flex flex-col items-center absolute transition-all bg-[#0c0d18e0] -translate-x-full\" id=\"container-menu\">\n <section class=\"w-full h-10 flex justify-between items-center px-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"ml-auto text-[#FFFFFF] w-8 h-8\" id=\"hidden-menu\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5\" />\n </svg>\n </section>\n\n <section class=\"w-full h-20 flex justify-center items-center mt-5\">\n <div class=\"w-20 h-20 flex justify-center items-center rounded-full bg-[#575e81]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"h-2/4 stroke-[#FFFFFF]\">\n <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\" />\n </svg>\n </div>\n </section>\n\n <section class=\"w-full h-10 flex items-center justify-center\">\n <span class=\"text-[#767881] text-sm font-medium px-[10%] border-b border-[#767881]\" id=\"expires-date-user-in-menu\">Expira em: 24/12/2023</span>\n </section>\n\n <section class=\"w-full h-[calc(100%-160px)] flex flex-col mt-5 px-2\">\n <nav class=\"w-11/12 h-5 flex items-center gap-3\" class=\"w-11/12 h-5 flex items-center gap-1\" id=\"nav-checkuser\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"text-[#FFFFFF] w-5 h-5\" viewBox=\"0 0 16 16\">\n <path d=\"M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6\" />\n </svg>\n\n <span class=\"text-[#FFFFFF] font-medium\">Informações do perfil</span>\n </nav>\n\n <nav class=\"w-11/12 h-5 flex items-center gap-3 mt-8\" id=\"nav-whatsapp\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"text-[#FFFFFF]\" viewBox=\"0 0 16 16\">\n <path d=\"M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z\" />\n </svg>\n\n <span class=\"text-[#FFFFFF] font-medium\">Whatsapp</span>\n </nav>\n\n <nav class=\"w-11/12 h-5 flex items-center gap-3 mt-8\" id=\"nav-telegram\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"text-[#FFFFFF]\" viewBox=\"0 0 16 16\">\n <path d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09\" />\n </svg>\n\n <span class=\"text-[#FFFFFF] font-medium\">Telegram</span>\n </nav>\n\n <nav class=\"w-11/12 h-5 flex items-center gap-3 mt-8\" id=\"nav-renew\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"stroke-[#FFFFFF] w-5 h-5\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z\" />\n </svg>\n\n <span class=\"text-[#FFFFFF] font-medium\">Renovar</span>\n </nav>\n\n <nav class=\"w-11/12 h-5 flex items-center gap-3 mt-8\" id=\"nav-test\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"text-[#FFFFFF] w-5 h-5\" viewBox=\"0 0 16 16\">\n <path d=\"M6.5 0a.5.5 0 0 0 0 1H7v1.07A7.001 7.001 0 0 0 8 16a7 7 0 0 0 5.29-11.584.531.531 0 0 0 .013-.012l.354-.354.353.354a.5.5 0 1 0 .707-.707l-1.414-1.415a.5.5 0 1 0-.707.707l.354.354-.354.354a.717.717 0 0 0-.012.012A6.973 6.973 0 0 0 9 2.071V1h.5a.5.5 0 0 0 0-1zm2 5.6V9a.5.5 0 0 1-.5.5H4.5a.5.5 0 0 1 0-1h3V5.6a.5.5 0 1 1 1 0\" />\n </svg>\n\n <span class=\"text-[#FFFFFF] font-medium\">Gerar teste</span>\n </nav>\n\n <nav class=\"w-11/12 h-5 flex items-center gap-3 mt-8\" id=\"nav-update\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"text-[#FFFFFF] w-5 h-5\" viewBox=\"0 0 16 16\">\n <path d=\"M11.473 9a4.5 4.5 0 0 0-8.72-.99A3 3 0 0 0 3 14h8.5a2.5 2.5 0 1 0-.027-5\" />\n <path d=\"M14.544 9.772a3.506 3.506 0 0 0-2.225-1.676 5.502 5.502 0 0 0-6.337-4.002 4.002 4.002 0 0 1 7.392.91 2.5 2.5 0 0 1 1.17 4.769z\" />\n </svg>\n\n <span class=\"text-[#FFFFFF] font-medium\">Verificar atualizações</span>\n </nav>\n\n <nav class=\"w-11/12 h-5 flex items-center gap-3 mt-8\" id=\"nav-terms\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"text-[#FFFFFF] w-5 h-5\" viewBox=\"0 0 16 16\">\n <path d=\"M8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783\" />\n </svg>\n\n <span class=\"text-[#FFFFFF] font-medium\">Termos de uso</span>\n </nav>\n\n <nav class=\"w-11/12 h-5 flex items-center gap-3 mt-8\" id=\"nav-hotspot\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"text-[#FFFFFF] w-5 h-5\" viewBox=\"0 0 16 16\">\n <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\" />\n <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.707Z\" />\n <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.342ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m4.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m1.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0\" />\n <path d=\"M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0\" />\n </svg>\n\n <span class=\"text-[#FFFFFF] font-medium\">Hostshare</span>\n </nav>\n\n <nav class=\"w-11/12 h-5 flex items-center gap-3 mt-8\" id=\"nav-access-point\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"text-[#FFFFFF] w-5 h-5\" viewBox=\"0 0 16 16\">\n <path d=\"M16 4.5a4.492 4.492 0 0 1-1.703 3.526L13 5l2.959-1.11c.027.2.041.403.041.61\" />\n <path d=\"M11.5 9c.653 0 1.273-.139 1.833-.39L12 5.5 11 3l3.826-1.53A4.5 4.5 0 0 0 7.29 6.092l-6.116 5.096a2.583 2.583 0 1 0 3.638 3.638L9.908 8.71A4.49 4.49 0 0 0 11.5 9m-1.292-4.361-.596.893.809-.27a.25.25 0 0 1 .287.377l-.596.893.809-.27.158.475-1.5.5a.25.25 0 0 1-.287-.376l.596-.893-.809.27a.25.25 0 0 1-.287-.377l.596-.893-.809.27-.158-.475 1.5-.5a.25.25 0 0 1 .287.376M3 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2\" />\n </svg>\n\n <span class=\"text-[#FFFFFF] font-medium\">Ajustes de APN</span>\n </nav>\n\n <nav class=\"w-11/12 h-5 flex items-center gap-3 mt-8\" id=\"nav-app-clean-data\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"text-[#FFFFFF] w-5 h-5\" viewBox=\"0 0 16 16\">\n <path d=\"M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5\" />\n </svg>\n\n <span class=\"text-[#FFFFFF] font-medium\">Limpar dados</span>\n </nav>\n </section>\n </section>\n\n <section class=\"w-full h-full flex flex-col items-center justify-center absolute transition-all scale-0 bg-[#0c0d18e0]\" id=\"container-terms\">\n <section class=\"w-11/12 h-2/3 flex flex-col relative rounded-md bg-[#121c28]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"absolute top-1 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-[#FF0000] w-20 h-20\" viewBox=\"0 0 16 16\">\n <path d=\"M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353L11.46.146zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2\" />\n </svg>\n\n <h1 class=\"w-full mt-14 text-[#FF0000] text-center text-lg font-medium\">TERMOS DE USO</h1>\n\n <section class=\"w-full h-full mt-3 mb-3 px-3 overflow-auto text-center\">\n <p class=\"text-[#FFFFFF]\">A SSHPLUSPRO envidará esforços razoáveis para garantir a disponibilidade contínua de nossos serviços de VPN. No entanto, o Cliente reconhece que, devido à natureza da Internet e de outros fatores que estão além do nosso controle, não podemos garantir que os serviços de VPN estarão livres de interrupções ou quedas de conexão. O Cliente entende e concorda que quedas de conexão ou interrupções podem ocorrer devido a circunstâncias imprevistas, manutenção de rotina, atualizações de software, eventos de força maior ou outras situações semelhantes. A SSHPLUSPRO não assume qualquer responsabilidade por perdas, danos ou inconveniências que o Cliente possa sofrer como resultado de quedas de conexão ou interrupções nos serviços de VPN. O Cliente concorda em isentar a SSHPLUSPRO de qualquer responsabilidade relacionada a tais eventos.</p>\n </section>\n\n <section class=\"w-full h-auto flex items-center justify-center my-3\">\n <button class=\"w-2/4 h-9 rounded-md cursor-none bg-[#414cb8]\" id=\"close-terms-container\" type=\"button\">\n <span class=\"text-[#FFFFFF]\">CONCORDO</span>\n </button>\n </section>\n </section>\n </section>\n\n <section class=\"w-full h-full flex flex-col items-center justify-center absolute transition-all scale-0 bg-[#0c0d18e0]\" id=\"container-hotspot\">\n <section class=\"w-11/12 h-auto flex flex-col relative rounded-md bg-[#121c28]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"absolute top-1 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-[#11c9ff] w-20 h-20\" viewBox=\"0 0 16 16\">\n <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\" />\n <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.707Z\" />\n <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.342ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m4.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m1.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0\" />\n <path d=\"M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0\" />\n </svg>\n\n <h1 class=\"w-full mt-14 text-[#11c9ff] text-center text-lg font-medium\">ROTEAMENTO POR PROXY</h1>\n\n <section class=\"w-full h-full mt-3 mb-3 px-3 overflow-auto text-center\">\n <p class=\"text-[#FFFFFF]\">Essa função serve para rotear para outros dispositivos o hotspot, caso queira ativar ou precise desativar é só apertar no botão a baixo.</p>\n </section>\n\n <section class=\"w-full h-auto flex items-center justify-center gap-5 my-3\">\n <button class=\"w-auto h-9 px-2 rounded-md cursor-none bg-[#414cb8]\" id=\"button-hotspot\" type=\"button\">\n <span class=\"text-[#FFFFFF]\" id=\"value-of-button-hotspot\">ATIVAR HOTSPOT</span>\n </button>\n\n <button class=\"w-auto h-9 px-2 rounded-md cursor-none bg-red-900\" id=\"close-hotspot-container\" type=\"button\">\n <span class=\"text-[#FFFFFF]\">FECHAR</span>\n </button>\n </section>\n </section>\n </section>\n\n <section class=\"w-full h-full flex flex-col items-center justify-center absolute transition-all scale-0 bg-[#0c0d18e0]\" id=\"container-configs\">\n <section class=\"w-11/12 max-h-[66.666667%] flex flex-col relative rounded-md bg-[#121c28]\">\n <header class=\"w-full min-h-[40px] max-h-[10%] flex items-center mb-2 border-b border-[#01010342] rounded-t-md\">\n <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 stroke-white\" id=\"hidden-container-configs\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" />\n </svg>\n\n <h1 class=\"flex-1 pr-6 text-white text-center text-sm font-medium\">CONFIGURAÇÕES</h1>\n </header>\n\n <section class=\"w-full h-[90%] overflow-auto px-1 mb-1 rounded-md\">\n <section class=\"w-full h-auto flex flex-col gap-2\" id=\"area-carrier-list\">\n <div class=\"flex items-center\">\n <input class=\"peer hidden\" type=\"radio\" name=\"config\" id=\"tim-premium-cf\" />\n <label class=\"w-full max-h-8 p-2 border border-[#01010342] rounded-md transition-[max-height] duration-1000 overflow-hidden\" for=\"tim-premium-cf\">\n <header class=\"w-full h-3 flex items-center justify-center p-2\">\n <h1 class=\"text-xs font-medium text-white truncate\">VIVO PREMIUM ACF</h1>\n </header>\n\n <ul class=\"w-full h-auto flex flex-col gap-2 mt-3 overflow-hidden\">\n <li class=\"w-full h-12 flex items-center gap-2 px-1 rounded-md overflow-hidden bg-[#0c0d18e0]\">\n <div class=\"w-10 h-[100%] flex items-center\">\n <img src=\"https://i.ibb.co/TkC0rCH/DT7ixvcjh0.png\" alt=\"icon\" />\n </div>\n\n <div class=\"flex-1 flex flex-col gap-1 truncate\">\n <h1 class=\"text-white text-xs truncate\">TIM 1 ➜ CONFIG 1 ➜ SV01.OCI (COPY)</h1>\n\n <span class=\"text-white text-[0.65rem] truncate\">SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA </span>\n </div>\n\n <div class=\"w-14 h-[100%] flex gap-1 items-end truncate\">\n <span class=\"text-white text-[0.5rem] leading-7 truncate\">OVPN_SSL_PROXY</span>\n </div>\n </li>\n\n <li class=\"w-full h-12 flex items-center gap-2 px-1 rounded-md overflow-hidden bg-[#0c0d18e0]\">\n <div class=\"w-10 h-[100%] flex items-center\">\n <img src=\"https://i.ibb.co/TkC0rCH/DT7ixvcjh0.png\" alt=\"icon\" />\n </div>\n\n <div class=\"flex-1 flex flex-col gap-1 truncate\">\n <h1 class=\"text-white text-xs truncate\">TIM 1 ➜ CONFIG 1 ➜ SV01.OCI (COPY)</h1>\n\n <span class=\"text-white text-[0.65rem] truncate\">SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA </span>\n </div>\n\n <div class=\"w-14 h-[100%] relative truncate\">\n <span class=\"text-white text-[0.6rem] truncate absolute bottom-1 right-1\">SSH_PROXY</span>\n </div>\n </li>\n </ul>\n </label>\n </div>\n\n <div class=\"flex items-center\">\n <input class=\"peer hidden\" type=\"radio\" name=\"config\" id=\"vivo-premium-cf\" />\n <label class=\"w-full max-h-8 p-2 border border-[#01010342] rounded-md transition-[max-height] duration-1000 overflow-hidden\" for=\"vivo-premium-cf\">\n <header class=\"w-full h-3 flex items-center justify-center p-2\">\n <h1 class=\"text-sm text-white truncate\">TIM PREMIUM ACF</h1>\n </header>\n\n <section class=\"w-full h-auto\"></section>\n </label>\n </div>\n </section>\n </section>\n </section>\n </section>\n </main>\n\n <!-- FUNÇÕES DO APP -->\n <script>\n function appGetStatusbarHeightSize() {\n if (window?.DtGetStatusBarHeight?.execute && typeof window?.DtGetStatusBarHeight.execute === \"function\") {\n return DtGetStatusBarHeight.execute();\n }\n\n return 0;\n }\n\n function appGetNavbarHeightSize() {\n if (window?.DtGetNavigationBarHeight?.execute && typeof window?.DtGetNavigationBarHeight?.execute === \"function\") {\n return DtGetNavigationBarHeight.execute();\n }\n\n return 0;\n }\n\n function appTranslateText(label) {\n if (window?.DtTranslateText?.execute && typeof window?.DtTranslateText?.execute === \"function\") {\n return DtTranslateText.execute(label);\n }\n\n return null;\n }\n\n function appGetConfigLabel(label) {\n if (window?.DtGetAppConfig?.execute && typeof window?.DtGetAppConfig?.execute === \"function\") {\n return DtGetAppConfig.execute(label);\n }\n\n return null;\n }\n\n function appGetCarrierName() {\n if (window?.Android?.getNetworkName && typeof window?.Android?.getNetworkName === \"function\") {\n return Android.getNetworkName();\n }\n\n return null;\n }\n\n function appGetLocalIp() {\n if (window?.Android?.getLocalIP && typeof window?.Android.getLocalIP === \"function\") {\n return Android.getLocalIP();\n }\n\n return null;\n }\n\n function appGetConfigVersion() {\n if (window?.DtGetLocalConfigVersion?.execute && typeof window?.DtGetLocalConfigVersion?.execute === \"function\") {\n return DtGetLocalConfigVersion.execute();\n }\n\n return null;\n }\n\n function appOpenDialogConfig() {\n if (window?.DtExecuteDialogConfig?.execute && typeof window?.DtExecuteDialogConfig?.execute === \"function\") {\n return DtExecuteDialogConfig.execute();\n }\n\n return null;\n }\n\n function appGetDefaultConfig() {\n if (window?.DtGetDefaultConfig?.execute && typeof window?.DtGetDefaultConfig?.execute) {\n return DtGetDefaultConfig.execute();\n }\n\n return null;\n }\n\n function appGetAllConfigs() {\n if (window?.DtGetConfigs?.execute && typeof window?.DtGetConfigs?.execute === \"function\") {\n return JSON.parse(DtGetConfigs.execute());\n }\n\n return null;\n }\n\n function appSetConfig(id) {\n if (window?.DtSetConfig?.execute && typeof window?.DtSetConfig?.execute === \"function\") {\n window?.DtSetConfig?.execute(id);\n }\n\n return null;\n }\n\n function appOpenDialogDialogs() {\n if (window?.DtShowLoggerDialog?.execute && typeof window?.DtShowLoggerDialog?.execute === \"function\") {\n return window?.DtShowLoggerDialog.execute();\n }\n\n return null;\n }\n\n function appGetUsername() {\n if (window?.DtUsername && typeof window?.DtUsername.get === \"function\") {\n return DtUsername.get();\n }\n\n return \"\";\n }\n\n function appGetPassword() {\n if (window?.DtPassword && typeof window?.DtPassword?.get === \"function\") {\n return DtPassword.get();\n }\n\n return \"\";\n }\n\n function appGetUUID() {\n if (window?.DtUuid?.get && typeof window?.DtUuid.get === \"function\") {\n return DtUuid.get();\n }\n\n return \"\";\n }\n\n function appSetUsername(username) {\n if (window?.DtUsername?.set && typeof window?.DtUsername?.set === \"function\") {\n return window.DtUsername.set(username);\n }\n\n return null;\n }\n\n function appSetPassword(password) {\n if (window?.DtPassword?.set && typeof window?.DtPassword?.set === \"function\") {\n return window.DtPassword.set(password);\n }\n\n return null;\n }\n\n function appSetUUID(UUID) {\n if (window?.DtUuid.set && typeof window?.DtUuid?.set === \"function\") {\n return window.DtUuid.set(UUID);\n }\n\n return null;\n }\n\n function appGetConnectionState() {\n if (window?.DtGetVpnState?.execute && typeof window?.DtGetVpnState?.execute === \"function\") {\n return DtGetVpnState.execute();\n }\n\n return null;\n }\n\n function appStartConnection() {\n if (window?.DtExecuteVpnStart?.execute && typeof window?.DtExecuteVpnStart?.execute === \"function\") {\n return DtExecuteVpnStart.execute();\n }\n\n return null;\n }\n\n function appStopConnection() {\n if (window?.DtExecuteVpnStop?.execute && typeof window?.DtExecuteVpnStop?.execute === \"function\") {\n return DtExecuteVpnStop.execute();\n }\n\n return null;\n }\n\n function appGetDownloadBytes() {\n if (window?.DtGetNetworkDownloadBytes?.execute && typeof window?.DtGetNetworkDownloadBytes?.execute === \"function\") {\n return window?.DtGetNetworkDownloadBytes?.execute();\n }\n\n return \"0 B/s\";\n }\n\n function appGetUploadBytes() {\n if (window?.DtGetNetworkUploadBytes?.execute && typeof window?.DtGetNetworkUploadBytes?.execute === \"function\") {\n return Number(window?.DtGetNetworkUploadBytes?.execute());\n }\n\n return \"0 B/s\";\n }\n\n function appGetStatusHotspot() {\n if (window?.DtGetStatusHotSpotService?.execute && typeof window?.DtGetStatusHotSpotService?.execute === \"function\") {\n return window?.DtGetStatusHotSpotService.execute();\n }\n\n return null;\n }\n\n function appStartHotspot() {\n if (window?.DtStartHotSpotService?.execute && typeof window?.DtStartHotSpotService?.execute === \"function\") {\n return window.DtStartHotSpotService.execute();\n }\n\n return null;\n }\n\n function appStopHotspot() {\n if (window?.DtStopHotSpotService?.execute && typeof window?.DtStopHotSpotService?.execute === \"function\") {\n return window?.DtStopHotSpotService.execute();\n }\n\n return null;\n }\n\n function AppUpdate() {\n if (window?.DtStartAppUpdate?.execute && typeof window?.DtStartAppUpdate?.execute === \"function\") {\n return window.DtStartAppUpdate.execute();\n }\n\n return null;\n }\n\n function appIntoBrowser(url) {\n if (window?.DtStartWebViewActivity?.execute && typeof window?.DtStartWebViewActivity?.execute === \"function\") {\n return DtStartWebViewActivity.execute(url);\n }\n\n window.open(url, \"_blank\");\n }\n\n function appCheckuser() {\n if (window?.DtStartCheckUser?.execute && typeof window?.DtStartCheckUser?.execute === \"function\") {\n return window.DtStartCheckUser.execute();\n }\n\n return null;\n }\n\n function appApnConfiguration() {\n if (window?.DtStartApnActivity?.execute && typeof window?.DtStartApnActivity?.execute == \"function\") {\n return window?.DtStartApnActivity.execute();\n }\n\n return null;\n }\n\n function appBatteryOptimize() {\n if (window?.DtIgnoreBatteryOptimizations?.execute && typeof window?.DtIgnoreBatteryOptimizations?.execute === \"function\") {\n return DtIgnoreBatteryOptimizations.execute();\n }\n\n return null;\n }\n\n function appClearData() {\n if (window?.DtCleanApp?.execute && typeof window?.DtCleanApp?.execute === \"function\") {\n return DtCleanApp.execute();\n }\n\n return null;\n }\n\n function networkName() {\n if (window?.Android?.getNetworkName && typeof window?.Android?.getNetworkName === \"function\") {\n return Android.getNetworkName();\n }\n\n return null;\n }\n\n function internetProtocol() {\n if (window?.Android?.getLocalIP && typeof window?.Android?.getLocalIP === \"function\") {\n return Android.getLocalIP();\n }\n\n return null;\n }\n </script>\n\n <!-- DOM WRAPPER -->\n <script>\n const Dom = (selector) => {\n const _elements = document.querySelectorAll(selector);\n\n const wrapper = {\n on(listeners) {\n for (const [event, listener] of Object.entries(listeners)) {\n _elements.forEach((element) => {\n element.addEventListener(event, listener);\n });\n }\n\n return wrapper;\n },\n addClass: (...tokens) => {\n _elements.forEach((element) => {\n element.classList.add(...tokens);\n });\n\n return wrapper;\n },\n removeClass: (...tokens) => {\n _elements.forEach((element) => {\n element.classList.remove(...tokens);\n });\n\n return wrapper;\n },\n toggleClass: (token, force) => {\n _elements.forEach((element) => {\n element.classList.toggle(token, force);\n });\n\n return wrapper;\n },\n style(styles) {\n for (const [property, value] of Object.entries(styles)) {\n _elements.forEach((element) => {\n element.style[property] = value;\n });\n }\n\n return wrapper;\n },\n attr(attrs) {\n for (const [name, value] of Object.entries(attrs)) {\n _elements.forEach((element) => element.setAttribute(name, value));\n }\n\n return wrapper;\n },\n html(value) {\n _elements.forEach((element) => (element.innerHTML = value));\n return wrapper;\n },\n /**\n * @return {Element|null}\n */\n element() {\n return _elements.length > 0 ? _elements[0] : null;\n },\n allElements: _elements,\n };\n\n return wrapper;\n };\n </script>\n\n <!-- VÁRIAVIES -->\n <script>\n const body = Dom(\"body\");\n\n const containerHome = Dom(\"#container-home\");\n\n const openMenuButton = Dom(\"#open-menu\");\n const carrierDetails = Dom(\"#carrier-details\");\n const vpnStatusValue = Dom(\"#vpn-status\");\n\n const appLogo = Dom(\"#app-logo\");\n\n const buttonOfListCarrier = Dom(\"#button-of-list-carrier\");\n const valueOnButtonOfCarrierList = Dom(\"#value-of-carrier\");\n const buttonOfCheckUser = Dom(\"#button-open-checkuser\");\n\n const containerInputUsername = Dom(\"#container-input-username\");\n const containerInputPassword = Dom(\"#container-input-password\");\n const containerInputUUID = Dom(\"#container-input-uuid\");\n\n const inputUsername = Dom(\"#input-username\");\n const inputPassword = Dom(\"#input-password\");\n const inputUUID = Dom(\"#input-uuid\");\n\n const eyeViewPasswordInput = Dom(\"#eye-view-password\");\n const eyeNotViewPasswordInput = Dom(\"#eye-not-view-password\");\n\n const eyeViewUUID = Dom(\"#eye-view-uuid\");\n const eyeNotViewUUID = Dom(\"#eye-not-view-uuid\");\n\n const buttonStartStopVpn = Dom(\"#button-vpn-start-stop\");\n const buttonStartStopValue = Dom(\"#status-button-vpn\");\n\n const downloadValue = Dom(\"#download-value\");\n const uploadValue = Dom(\"#upload-value\");\n\n const buttonLogs = Dom(\"#button-logs\");\n\n const containerMenu = Dom(\"#container-menu\");\n const hiddenContainerMenuButton = Dom(\"#hidden-menu\");\n\n const expiresDateUserInMenu = Dom(\"#expires-date-user-in-menu\");\n\n const navCheckuser = Dom(\"#nav-checkuser\");\n const navWhatsapp = Dom(\"#nav-whatsapp\");\n const navTelegram = Dom(\"#nav-telegram\");\n const navRenew = Dom(\"#nav-renew\");\n const navTest = Dom(\"#nav-test\");\n const navUpdate = Dom(\"#nav-update\");\n const navTerms = Dom(\"#nav-terms\");\n const navHotspot = Dom(\"#nav-hotspot\");\n const navAccessPoint = Dom(\"#nav-access-point\");\n const navAppCleanData = Dom(\"#nav-app-clean-data\");\n\n const containerTerms = Dom(\"#container-terms\");\n const closeContainerTerms = Dom(\"#close-terms-container\");\n\n const containerHotspot = Dom(\"#container-hotspot\");\n const closeContainerHotspotButton = Dom(\"#close-hotspot-container\");\n const buttonStartOrStopHotspot = Dom(\"#button-hotspot\");\n const valueOfButtonHotspot = Dom(\"#value-of-button-hotspot\");\n\n const containerConfigs = Dom(\"#container-configs\");\n const closeContainerConfigs = Dom(\"#hidden-container-configs\");\n\n const containerAreaCarrierList = Dom(\"#area-carrier-list\");\n\n const inputsPeer = Dom(\"input.peer\");\n const labelsFor = Dom(\"label[for]\");\n </script>\n\n <!-- VÁRIAVEIS DO SISTEMA -->\n <script>\n const currentNetworkDownload = parseFloat(localStorage.getItem(\"networkDownload\") ?? appGetDownloadBytes());\n const currentNetworkUpload = parseFloat(localStorage.getItem(\"networkUpload\") ?? appGetUploadBytes());\n </script>\n\n <!-- FUNÇÕES -->\n <script>\n function getAppBackground() {\n const background_type = appGetConfigLabel(\"APP_BACKGROUND_TYPE\");\n const background_color = appGetConfigLabel(\"APP_BACKGROUND_COLOR\");\n const background_image = appGetConfigLabel(\"APP_BACKGROUND_IMAGE\");\n\n if (!background_type) {\n return \"url('../dist/bg.jpeg')\";\n }\n\n if (JSON.parse(background_type)?.value === \"COLOR\") {\n return JSON.parse(background_color).value;\n }\n\n return `url(${JSON.parse(background_image).value})`;\n }\n\n function getAppLogo() {\n const logo = appGetConfigLabel(\"APP_LOGO\");\n\n if (!logo) {\n return \"../dist/logo.png\";\n }\n\n return JSON.parse(logo)?.value;\n }\n\n function getConfigName() {\n const config = appGetDefaultConfig();\n\n if (!config) {\n return {\n name: appTranslateText(\"LBL_CHOOSE_CONFIG\"),\n mode: \"\",\n };\n }\n\n if (JSON.parse(config)?.name && JSON.parse(config)?.mode) {\n return {\n name: JSON.parse(config)?.name,\n mode: JSON.parse(config)?.mode,\n };\n }\n\n return {\n name: appTranslateText(\"LBL_CHOOSE_CONFIG\"),\n mode: \"\",\n };\n }\n\n function writeConfigValueOnButton() {\n valueOnButtonOfCarrierList.html(getConfigName()?.name);\n }\n\n function writeCarrierStatus() {\n setInterval(() => {\n carrierDetails.html(`${appGetCarrierName()}: ${internetProtocol()}`);\n });\n }\n\n function connectionState(state) {\n const connectionValue = `${state || appGetConnectionState()}`;\n\n switch (connectionValue) {\n case \"DISCONNECTED\":\n buttonStartStopValue.html(appTranslateText(\"LBL_BTN_START\"));\n vpnStatusValue.html(appTranslateText(\"LBL_STATE_DISCONNECTED\"));\n break;\n case \"CONNECTING\":\n buttonStartStopValue.html(appTranslateText(\"LBL_BTN_STOP\"));\n vpnStatusValue.html(appTranslateText(\"LBL_STATE_CONNECTING\"));\n break;\n case \"CONNECTED\":\n buttonStartStopValue.html(appTranslateText(\"LBL_BTN_STOP\"));\n vpnStatusValue.html(appTranslateText(\"LBL_STATE_CONNECTED\"));\n break;\n case \"STOPPING\":\n buttonStartStopValue.html(appTranslateText(\"LBL_BTN_STOPPING\"));\n vpnStatusValue.html(appTranslateText(\"LBL_STATE_STOPPING\"));\n break;\n case \"NO_NETWORK\":\n buttonStartStopValue.html(appTranslateText(\"LBL_BTN_STOP\"));\n vpnStatusValue.html(appTranslateText(\"LBL_STATE_NO_NETWORK\"));\n break;\n case \"AUTH\":\n buttonStartStopValue.html(appTranslateText(\"LBL_BTN_STOP\"));\n vpnStatusValue.html(appTranslateText(\"LBL_STATE_AUTH\"));\n break;\n case \"AUTH_FAILED\":\n buttonStartStopValue.html(appTranslateText(\"LBL_BTN_START\"));\n vpnStatusValue.html(appTranslateText(\"LBL_STATE_AUTH_FAILED\"));\n break;\n }\n }\n\n function startStopConnection() {\n const state = appGetConnectionState();\n state !== \"CONNECTED\" ? appStartConnection() : appStopConnection();\n }\n\n function startHotspot() {\n appStartHotspot();\n\n valueOfButtonHotspot.html(\"DESATIVAR HOTSPOT\");\n\n return;\n }\n\n function stopHotspot() {\n appStopHotspot();\n\n valueOfButtonHotspot.html(\"ATIVAR HOTSPOT\");\n\n return;\n }\n\n function toggleHotspot() {\n appGetStatusHotspot() === \"STOPPED\" ? startHotspot() : stopHotspot();\n\n return;\n }\n\n function setStatusHotspot() {\n if (appGetStatusHotspot() === \"STOPPED\") {\n valueOfButtonHotspot.html(\"ATIVAR HOTSPOT\");\n\n return;\n } else {\n valueOfButtonHotspot.html(\"DESATIVAR HOTSPOT\");\n\n return;\n }\n\n return;\n }\n\n function showInputPasswordValue() {\n eyeViewPasswordInput.addClass(\"hidden\");\n eyeNotViewPasswordInput.removeClass(\"hidden\");\n inputPassword.attr({ type: \"text\" });\n }\n function hiddenInputPasswordValue() {\n eyeViewPasswordInput.removeClass(\"hidden\");\n eyeNotViewPasswordInput.addClass(\"hidden\");\n inputPassword.attr({ type: \"password\" });\n }\n\n function showInputUUIDValue() {\n eyeViewUUID.addClass(\"hidden\");\n eyeNotViewUUID.removeClass(\"hidden\");\n inputUUID.attr({ type: \"text\" });\n }\n function hiddenInputUUIDValue() {\n eyeViewUUID.removeClass(\"hidden\");\n eyeNotViewUUID.addClass(\"hidden\");\n inputUUID.attr({ type: \"password\" });\n }\n\n function showContainerMenu() {\n containerMenu.removeClass(\"-translate-x-full\");\n\n return;\n }\n function hiddenContainerMenu() {\n containerMenu.addClass(\"-translate-x-full\");\n\n return;\n }\n\n function showContainerTerms() {\n containerTerms.removeClass(\"scale-0\");\n\n return;\n }\n function hiddenContainerTerms() {\n containerTerms.addClass(\"scale-0\");\n\n return;\n }\n\n function showContainerHotspot() {\n containerHotspot.removeClass(\"scale-0\");\n\n return;\n }\n function hiddenContainerHotspot() {\n containerHotspot.addClass(\"scale-0\");\n\n return;\n }\n\n function writeCarrierList() {\n const data = appGetAllConfigs();\n\n if (data) {\n containerAreaCarrierList.html(\"\");\n\n data.sort((a, b) => a.sorter - b.sorter);\n\n data.forEach((item, index) => item.items.sort((a, b) => a.sorter - b.sorter));\n\n const labels = [];\n let selectedLabel = null;\n\n data.forEach((category) => {\n const div = document.createElement(\"div\");\n const input = document.createElement(\"input\");\n const label = document.createElement(\"label\");\n const header = document.createElement(\"header\");\n const h1 = document.createElement(\"h1\");\n const ul = document.createElement(\"ul\");\n\n div.classList.add(\"flex\", \"items-center\");\n input.classList.add(\"hidden\");\n label.classList.add(\"w-full\", \"max-h-8\", \"p-2\", \"border\", \"border-[#01010342]\", \"rounded-md\", \"transition-[max-height]\", \"duration-1000\", \"overflow-hidden\");\n header.classList.add(\"w-full\", \"h-3\", \"flex\", \"items-center\", \"justify-center\", \"p-2\");\n h1.classList.add(\"text-xs\", \"font-medium\", \"text-white\", \"truncate\");\n ul.classList.add(\"w-full\", \"h-auto\", \"flex\", \"flex-col\", \"gap-2\", \"mt-3\", \"overflow-hidden\");\n\n input.type = \"radio\";\n input.name = \"config\";\n input.id = category.name.trim();\n label.htmlFor = category.name.trim();\n\n h1.textContent = category.name;\n\n category.items.forEach((item) => {\n const li = document.createElement(\"li\");\n const liDivLeft = document.createElement(\"div\");\n const carrierIcon = document.createElement(\"img\");\n const liDivCenter = document.createElement(\"div\");\n const configTitle = document.createElement(\"h1\");\n const configDescription = document.createElement(\"span\");\n const liDivRight = document.createElement(\"div\");\n const configType = document.createElement(\"span\");\n\n li.classList.add(\"w-full\", \"h-12\", \"flex\", \"items-center\", \"gap-2\", \"px-1\", \"rounded-md\", \"overflow-hidden\", \"bg-[#0c0d18e0]\");\n liDivLeft.classList.add(\"w-10\", \"h-[100%]\", \"flex\", \"items-center\");\n liDivCenter.classList.add(\"flex-1\", \"flex\", \"flex-col\", \"gap-1\", \"truncate\");\n configTitle.classList.add(\"text-white\", \"text-xs\", \"truncate\");\n configDescription.classList.add(\"text-white\", \"text-[0.65rem]\", \"truncate\");\n liDivRight.classList.add(\"w-14\", \"h-[100%]\", \"flex\", \"items-end\", \"truncate\");\n configType.classList.add(\"text-white\", \"text-[0.5rem]\", \"leading-7\", \"truncate\");\n\n carrierIcon.src = item.icon;\n carrierIcon.alt = item.name;\n\n configTitle.textContent = item.name;\n configDescription.textContent = item.description;\n\n configType.textContent = item.mode;\n\n liDivLeft.appendChild(carrierIcon);\n\n liDivCenter.appendChild(configTitle);\n liDivCenter.appendChild(configDescription);\n\n liDivRight.appendChild(configType);\n\n li.appendChild(liDivLeft);\n li.appendChild(liDivCenter);\n li.appendChild(liDivRight);\n\n li.addEventListener(\"click\", () => {\n appSetConfig(item.id);\n hiddenContainerConfigs();\n });\n\n ul.appendChild(li);\n });\n\n header.appendChild(h1);\n\n label.appendChild(header);\n label.appendChild(ul);\n\n input.addEventListener(\"change\", () => {\n if (input.checked) {\n labels.forEach((otherLabel) => {\n if (otherLabel !== label) {\n otherLabel.style.maxHeight = \"32px\";\n }\n });\n\n label.style.maxHeight = label.scrollHeight + \"px\";\n\n selectedLabel = label;\n }\n });\n\n labels.push(label);\n\n div.appendChild(input);\n div.appendChild(label);\n\n containerAreaCarrierList.element().appendChild(div);\n });\n }\n }\n function showContainerConfigs() {\n writeCarrierList();\n containerConfigs.removeClass(\"scale-0\");\n\n return;\n }\n function hiddenContainerConfigs() {\n containerConfigs.addClass(\"scale-0\");\n\n return;\n }\n\n function checkV2ray() {\n const data = JSON.parse(appGetDefaultConfig());\n\n if (!data) {\n return false;\n }\n\n if (data.mode?.toLowerCase().startsWith(\"v2ray\")) {\n if (data.auth?.v2ray_uuid) {\n return \"exists v2ray config\";\n }\n return true;\n }\n\n return false;\n }\n\n function toggleInput() {\n const v2rayUUID = checkV2ray();\n\n if (v2rayUUID === \"exists v2ray config\") {\n containerInputUsername.addClass(\"hidden\");\n containerInputPassword.addClass(\"hidden\");\n containerInputUUID.addClass(\"hidden\");\n } else if (v2rayUUID) {\n containerInputUsername.addClass(\"hidden\");\n containerInputPassword.addClass(\"hidden\");\n containerInputUUID.removeClass(\"hidden\");\n containerInputUUID.addClass(\"flex\");\n } else {\n containerInputUsername.removeClass(\"hidden\");\n containerInputPassword.removeClass(\"hidden\");\n containerInputUUID.addClass(\"flex\");\n containerInputUUID.addClass(\"hidden\");\n }\n }\n\n function formatBytes(bytes) {\n const sizes = [\"B/s\", \"KB/s\", \"MB/s\", \"GB/s\", \"TB/s\"];\n\n if (bytes === 0) return \"0 B/s\";\n\n const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));\n\n return (bytes / Math.pow(1024, i)).toPrecision(3) + \" \" + sizes[i];\n }\n\n function updateNetworkStats() {\n setInterval(() => {\n const newNetworkDownload = appGetDownloadBytes();\n const newNetworkUpload = appGetUploadBytes();\n\n downloadValue.html(formatBytes(newNetworkDownload - currentNetworkDownload));\n uploadValue.html(formatBytes(newNetworkUpload - currentNetworkUpload));\n\n localStorage.setItem(\"networkDownload\", formatBytes(newNetworkDownload - currentNetworkDownload));\n localStorage.setItem(\"networkUpload\", formatBytes(newNetworkUpload - currentNetworkUpload));\n }, 500);\n }\n\n function getExpirationDateOfUser() {\n const expirationDate = localStorage.getItem(\"expirationDate\");\n\n if (expirationDate) {\n expiresDateUserInMenu.style({ display: \"block\" });\n\n return `Expira em: ${expirationDate}`;\n }\n\n expiresDateUserInMenu.style({ display: \"none\" });\n\n return \"\";\n }\n\n function toggleLabelHeight(inputId) {\n const input = document.getElementById(inputId);\n const label = document.querySelector(`label[for=\"${inputId}\"]`);\n\n if (input.checked) {\n // Se o input estiver selecionado, ajuste a altura máxima do label\n label.style.maxHeight = label.scrollHeight + \"px\";\n } else {\n // Se o input não estiver selecionado, redefina a altura máxima\n label.style.maxHeight = \"32px\";\n }\n }\n\n function toggleMoreInputs() {\n const data = JSON.parse(appGetDefaultConfig());\n\n if (!data) return null;\n\n containerInputUsername.removeClass(\"hidden\");\n containerInputPassword.removeClass(\"hidden\");\n containerInputUUID.addClass(\"hidden\");\n\n if (data?.auth?.username) {\n containerInputUsername.addClass(\"hidden\");\n }\n\n if (data?.auth?.password) {\n containerInputPassword.addClass(\"hidden\");\n }\n\n if (!data?.auth?.username) {\n containerInputUsername.removeClass(\"hidden\");\n }\n\n if (!data?.auth?.password) {\n containerInputPassword.removeClass(\"hidden\");\n }\n\n if (data.mode?.toLowerCase().startsWith(\"v2ray\")) {\n if (data?.auth?.v2ray_uuid) {\n containerInputUUID.addClass(\"hidden\");\n containerInputUsername.addClass(\"hidden\");\n containerInputPassword.addClass(\"hidden\");\n }\n\n if (!data?.auth?.v2ray_uuid) {\n containerInputUUID.removeClass(\"hidden\");\n containerInputUsername.addClass(\"hidden\");\n containerInputPassword.addClass(\"hidden\");\n }\n }\n }\n </script>\n\n <!-- AÇÕES -->\n <script>\n body.style({\n background: getAppBackground(),\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n backgroundRepeat: \"no-repeat\",\n });\n\n containerHome.style({\n padding: `${appGetStatusbarHeightSize() + 10}px 10px ${appGetNavbarHeightSize() + 10}px 10px`,\n });\n\n appLogo.attr({ src: getAppLogo() });\n\n appLogo.on({ click: () => AppUpdate() });\n\n buttonOfListCarrier.on({ click: () => showContainerConfigs() });\n valueOnButtonOfCarrierList.html(getConfigName()?.name);\n closeContainerConfigs.on({ click: () => hiddenContainerConfigs() });\n\n buttonOfCheckUser.on({ click: () => appCheckuser() });\n\n inputUsername.attr({ placeholder: appTranslateText(\"LBL_USERNAME\") });\n inputPassword.attr({ placeholder: appTranslateText(\"LBL_PASSWORD\") });\n inputUUID.attr({ placeholder: appTranslateText(\"LBL_UUID\") });\n\n inputUsername.attr({ value: appGetUsername() });\n inputPassword.attr({ value: appGetPassword() });\n inputUUID.attr({ value: appGetUUID() });\n\n inputUsername.on({ input: (e) => appSetUsername(e.target.value) });\n inputPassword.on({ input: (e) => appSetPassword(e.target.value) });\n inputUUID.on({ input: (e) => appSetUUID(e.target.value) });\n\n eyeViewPasswordInput.on({ click: () => showInputPasswordValue() });\n eyeNotViewPasswordInput.on({ click: () => hiddenInputPasswordValue() });\n\n eyeViewUUID.on({ click: () => showInputUUIDValue() });\n eyeNotViewUUID.on({ click: () => hiddenInputUUIDValue() });\n\n buttonStartStopVpn.on({ click: () => startStopConnection() });\n\n buttonLogs.on({ click: () => appOpenDialogDialogs() });\n\n containerMenu.style({\n padding: `${appGetStatusbarHeightSize() + 10}px 10px ${appGetNavbarHeightSize() + 10}px 10px`,\n });\n\n openMenuButton.on({ click: () => showContainerMenu() });\n\n hiddenContainerMenuButton.on({ click: () => hiddenContainerMenu() });\n\n expiresDateUserInMenu.html(getExpirationDateOfUser());\n\n navCheckuser.on({ click: () => appCheckuser() });\n\n navWhatsapp.on({ click: () => appIntoBrowser(\"https://wa.me/40701041801\") });\n\n navTelegram.on({ click: () => appIntoBrowser(\"https://t.me/SSHPLUSPROGroup\") });\n\n navRenew.on({ click: () => appIntoBrowser(\"https://painelwebpro.site/renovar.php\") });\n\n navTest.on({ click: () => appIntoBrowser(\"https://painelwebpro.site/criarteste.php?token=459474065105\") });\n\n navUpdate.on({ click: () => AppUpdate() });\n\n navTerms.on({ click: () => showContainerTerms() });\n closeContainerTerms.on({ click: () => hiddenContainerTerms() });\n\n navHotspot.on({ click: () => showContainerHotspot() });\n buttonStartOrStopHotspot.on({ click: () => toggleHotspot() });\n closeContainerHotspotButton.on({ click: () => hiddenContainerHotspot() });\n\n navAccessPoint.on({ click: () => appApnConfiguration() });\n\n navAppCleanData.on({ click: () => appClearData() });\n\n connectionState();\n setStatusHotspot();\n updateNetworkStats();\n toggleMoreInputs();\n writeCarrierStatus();\n </script>\n\n <!-- FUNÇÕES PARA O APP -->\n <script>\n function dtConfigClickListener() {\n writeConfigValueOnButton();\n\n toggleMoreInputs();\n\n inputUsername.attr({ value: appGetUsername() });\n inputPassword.attr({ value: appGetPassword() });\n inputUUID.attr({ value: appGetUUID() });\n }\n\n function dtVpnStateListener(state) {\n connectionState(state);\n }\n\n const dtCheckUserModelListener = (model) => {\n const data = JSON.parse(model);\n\n expiresDateUserInMenu.html(`Expira em: ${data.expiration_date}`);\n\n expiresDateUserInMenu.style({ display: \"block\" });\n\n localStorage.setItem(\"expirationDate\", data.expiration_date);\n };\n </script>\n </body>\n</html>\n",
"type": "HTML",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23794,
"label": "ANDROID WEBVIEW (POR SUA CONTA E RISCO)",
"name": "APP_SUPPORT_BUTTON",
"value": null,
"type": "HTML",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
},
{
"id": 23795,
"label": "PAGINA WEBVIEW (POR SUA CONTA E RISCO)",
"name": "APP_WEB_VIEW",
"value": null,
"type": "HTML",
"status": "ACTIVE",
"user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
}
]