[
    {
        "id": 14253,
        "label": "Nome do app",
        "name": "APP_NAME",
        "value": null,
        "type": "STRING",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14254,
        "label": "Logo do app",
        "name": "APP_LOGO",
        "value": "https://atlantus.com.br/miracle/update/drawing/heKKjOTX7Ij5AAD94RHwauipYdHEH4hcj2pgoJlpS7VFr9AkTwXpvDqnSrXRc0bhXT3BeQvw92JUsPtLGj5lGhidnAf8zVVG7MacA0av3HfCJQqYFDK1tYCBddSGNPdKA5DAIaMQnrYZa28EXSWl75TH6f4sCg0Elz8GpXHYO793JnCcv1Om6A6m8HgtK7Q5dVuEnlUPgwaUKWliL5FmeJTZnFg3yksmRzL1yCGc6Ct04P3x.png",
        "type": "IMAGE",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14255,
        "label": "Imagem de fundo",
        "name": "APP_BACKGROUND_IMAGE",
        "value": "https://i.pinimg.com/originals/0c/8b/7d/0c8b7dbbaa53f94e56fd597c482cba96.jpg",
        "type": "IMAGE",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14256,
        "label": "Tipo do fundo do app",
        "name": "APP_BACKGROUND_TYPE",
        "value": {
            "options": [
                {
                    "label": "Imagem",
                    "value": "IMAGE"
                },
                {
                    "label": "Cor",
                    "value": "COLOR"
                }
            ],
            "selected": "COLOR"
        },
        "type": "SELECT",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14257,
        "label": "Cor de fundo",
        "name": "APP_BACKGROUND_COLOR",
        "value": "#080e16c7",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14258,
        "label": "Cor do card inicial",
        "name": "APP_CARD_COLOR",
        "value": "#b0a7ae00",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14259,
        "label": "Raio do card inicial",
        "name": "APP_CARD_RADIUS",
        "value": 20,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14260,
        "label": "Cor do card de status",
        "name": "APP_CARD_STATUS_COLOR",
        "value": "#ffa72b00",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14261,
        "label": "Raio do card de status",
        "name": "APP_CARD_STATUS_RADIUS",
        "value": 25,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14262,
        "label": "Cor do card de configurações",
        "name": "APP_CARD_CONFIG_COLOR",
        "value": "#7d7775c9",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14263,
        "label": "Cor do fundo dos dialogs",
        "name": "APP_DIALOG_BACKGROUND_COLOR",
        "value": "#000000e8",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14264,
        "label": "Cor do fundo do dialog de log",
        "name": "APP_DIALOG_LOGGER_COLOR",
        "value": "#080e16c7",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14265,
        "label": "Cor das bordas",
        "name": "APP_BORDER_COLOR",
        "value": "#1d242e73",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14266,
        "label": "Cor dos inputs",
        "name": "APP_INPUT_COLOR",
        "value": "#1d242e73",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14267,
        "label": "Raio dos inputs",
        "name": "APP_INPUT_RADIUS",
        "value": 25,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14268,
        "label": "Cor dos textos",
        "name": "APP_TEXT_COLOR",
        "value": "#f9fff2ff",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14269,
        "label": "Cor dos botões",
        "name": "APP_BUTTON_COLOR",
        "value": "#2b2b2b9e",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14270,
        "label": "Raio dos botões",
        "name": "APP_BUTTON_RADIUS",
        "value": 25,
        "type": "INTEGER",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14271,
        "label": "Cor dos icones",
        "name": "APP_ICON_COLOR",
        "value": "#fff7fbff",
        "type": "COLOR",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14272,
        "label": "Exibir modo de conexão",
        "name": "APP_SHOW_CONNECTION_MODE",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 22645,
        "label": "Atualizar automaticamente as configurações ao lançar uma atualização.",
        "name": "APP_CONFIG_AUTO_UPDATE",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14273,
        "label": "Iniciar o app automaticamente ao reiniciar o dispositivo",
        "name": "APP_AUTO_START",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14274,
        "label": "Usar limiter de conexão",
        "name": "APP_CONNECTION_LIMITER",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14275,
        "label": "Usar botão de atualizações",
        "name": "APP_BTN_UPDATE_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14276,
        "label": "Usar botão de registros",
        "name": "APP_BTN_LOGGER_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14277,
        "label": "Usar botão de pagina webview",
        "name": "APP_BTN_PAGE_ENABLED",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14278,
        "label": "Ativar dialog de erros",
        "name": "APP_DIALOG_ERROR_ENABLED",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14279,
        "label": "Ativar dialog de checkuser",
        "name": "APP_CHECKUSER_DIALOG_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14280,
        "label": "Ativar toast de sucesso",
        "name": "APP_SUCCESS_TOAST_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14281,
        "label": "Ativar toast de erro",
        "name": "APP_ERROR_TOAST_ENABLED",
        "value": true,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14282,
        "label": "Usar layout webview",
        "name": "APP_LAYOUT_WEBVIEW_ENABLED",
        "value": false,
        "type": "BOOLEAN",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14283,
        "label": "Mensagem",
        "name": "APP_MESSAGE",
        "value": null,
        "type": "TEXT",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14284,
        "label": "URL de atualização do aplicativo",
        "name": "APP_UPDATE_URL",
        "value": null,
        "type": "URL",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14285,
        "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": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14286,
        "label": "LAYOUT WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_LAYOUT_WEBVIEW",
        "value": null,
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14287,
        "label": "ANDROID WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_SUPPORT_BUTTON",
        "value": "<!DOCTYPE html>
<html class="w-full h-full" lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>780890715 - @RagnarVps | @alexdsgmoura</title>

    <style>
      *,: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}}
    </style>
  </head>

  <body class="w-full h-full">
    <main class="w-full h-full flex flex-col relative">
      <section class="w-full h-full flex flex-col px-[10px] pt-[10px] pb-[30px] overflow-hidden" id="container-home">
        <section class="flex justify-between items-center relative">
          <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">
            <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" />
          </svg>

          <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
            <span class="text-[#FFFFFF] min-[280px]:text-xs text-sm" id="carrier-details">AG SSH BRAZIL </span>
          </div>

          <div>
            <span class="text-[#FFFFFF] min-[280px]:text-xs text-sm" id="vpn-status">Inativo</span>
          </div>
        </section>

        <section class="w-full h-1/5 flex justify-center">
          <img class="w-4/5" id="app-logo" src="https://s13.gifyu.com/images/S05Y3.gif" alt="logo" />
        </section>

        <section class="w-full h-[40px] flex justify-between items-center gap-2 mt-2.5">
          <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">
            <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">
              <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" />
            </svg>

            <span class="w-full text-[#FFFFFF] text-xs truncate" id="value-of-carrier">ESCOLHA UMA CONFIGURAÇÃO</span>

            <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">
              <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" />
            </svg>
          </button>

          <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">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF]" viewBox="0 0 16 16">
              <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" />
              <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" />
            </svg>
          </button>
        </section>

        <section class="w-full h-auto flex flex-col items-center gap-3 mt-2.5 py-2.5 bg-[#14141489] rounded-md">
          <h1 class="text-[#7d7f81] text-lg font-medium">Dados de Acesso</h1>

          <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">
            <input class="w-full h-full pl-1 outline-none text-[#FFFFFF] bg-transparent" id="input-username" type="text" placeholder="Usuário" />
          </div>

          <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">
            <input class="w-[calc(100%-30px)] h-full pl-1 outline-none text-[#FFFFFF] bg-transparent" id="input-password" type="password" placeholder="Senha" />

            <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">
              <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" />
              <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" />
            </svg>

            <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">
              <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" />
              <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" />
              <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" />
            </svg>
          </div>

          <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">
            <input class="w-[calc(100%-30px)] h-full pl-1 outline-none text-[#FFFFFF] bg-transparent" id="input-uuid" type="password" placeholder="UUID" />

            <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">
              <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" />
              <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" />
            </svg>

            <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">
              <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" />
              <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" />
              <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" />
            </svg>
          </div>

          <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">
            <span class="text-sm font-medium text-[#FFFFFF]" id="status-button-vpn">Conectar</span>
          </button>
        </section>

        <section class="w-full h-auto grid grid-cols-2 justify-items-center mt-auto py-2.5">
          <span class="text-[#FFFFFF]">Download</span>

          <span class="text-[#FFFFFF]">Upload</span>

          <span class="text-[#FFFFFF]" id="download-value">0 B/s</span>

          <span class="text-[#FFFFFF]" id="upload-value">0 B/s</span>
        </section>

        <section class="w-full h-10 flex items-center justify-center gap-2 mt-auto rounded-md bg-[#070610]" id="button-logs">
          <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">
            <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" />
            <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" />
          </svg>

          <span class="text-[#FFFFFF] text-sm font-medium">V 1.2 REGISTRO </span>
        </section>
      </section>

      <section class="w-5/6 h-full flex flex-col items-center absolute transition-all bg-[#0c0d18e0] -translate-x-full" id="container-menu">
        <section class="w-full h-10 flex justify-between items-center px-1">
          <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">
            <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" />
          </svg>
        </section>

        <section class="w-full h-20 flex justify-center items-center mt-5">
          <div class="w-20 h-20 flex justify-center items-center rounded-full bg-[#575e81]">
            <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]">
              <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" />
            </svg>
          </div>
        </section>

        <section class="w-full h-10 flex items-center justify-center">
          <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>
        </section>

        <section class="w-full h-[calc(100%-160px)] flex flex-col mt-5 px-2">
          <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">
            <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">
              <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" />
            </svg>

            <span class="text-[#FFFFFF] font-medium">Informações do perfil</span>
          </nav>

          <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-whatsapp">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF]" viewBox="0 0 16 16">
              <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" />
            </svg>

            <span class="text-[#FFFFFF] font-medium">Whatsapp</span>
          </nav>

          <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-telegram">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF]" viewBox="0 0 16 16">
              <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" />
            </svg>

            <span class="text-[#FFFFFF] font-medium">Suporte</span>
          </nav>

          <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-renew">
            <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">
              <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" />
            </svg>

            <span class="text-[#FFFFFF] font-medium">Renovar</span>
          </nav>

          <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-test">
            <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">
              <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" />
            </svg>

            <span class="text-[#FFFFFF] font-medium">Gerar teste</span>
          </nav>

          <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-update">
            <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">
              <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" />
              <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" />
            </svg>

            <span class="text-[#FFFFFF] font-medium">Verificar atualizações</span>
          </nav>

          <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-terms">
            <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">
              <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" />
            </svg>

            <span class="text-[#FFFFFF] font-medium">Termos de uso</span>
          </nav>

          <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-hotspot">
            <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">
              <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" />
              <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" />
              <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" />
              <path d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0" />
            </svg>

            <span class="text-[#FFFFFF] font-medium">ROTEAR VPN </span>
          </nav>

          <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-access-point">
            <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">
              <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" />
              <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" />
            </svg>

            <span class="text-[#FFFFFF] font-medium">Ajustes de APN</span>
          </nav>

          <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-app-clean-data">
            <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">
              <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" />
            </svg>

            <span class="text-[#FFFFFF] font-medium">Limpar dados</span>
          </nav>
        </section>
      </section>

      <section class="w-full h-full flex flex-col items-center justify-center absolute transition-all scale-0 bg-[#0c0d18e0]" id="container-terms">
        <section class="w-11/12 h-2/3 flex flex-col relative rounded-md bg-[#121c28]">
          <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">
            <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" />
          </svg>

          <h1 class="w-full mt-14 text-[#FF0000] text-center text-lg font-medium">TERMOS DE USO</h1>

          <section class="w-full h-full mt-3 mb-3 px-3 overflow-auto text-center">
            <p class="text-[#FFFFFF]">A AGSSHBR 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 AGSSHBR 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 AGSSHBR de qualquer responsabilidade relacionada a tais eventos.</p>
          </section>

          <section class="w-full h-auto flex items-center justify-center my-3">
            <button class="w-2/4 h-9 rounded-md cursor-none bg-[#414cb8]" id="close-terms-container" type="button">
              <span class="text-[#FFFFFF]">CONCORDO</span>
            </button>
          </section>
        </section>
      </section>

      <section class="w-full h-full flex flex-col items-center justify-center absolute transition-all scale-0 bg-[#0c0d18e0]" id="container-hotspot">
        <section class="w-11/12 h-auto flex flex-col relative rounded-md bg-[#121c28]">
          <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">
            <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" />
            <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" />
            <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" />
            <path d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0" />
          </svg>

          <h1 class="w-full mt-14 text-[#11c9ff] text-center text-lg font-medium">ROTEAMENTO POR PROXY</h1>

          <section class="w-full h-full mt-3 mb-3 px-3 overflow-auto text-center">
            <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>
          </section>

          <section class="w-full h-auto flex items-center justify-center gap-5 my-3">
            <button class="w-auto h-9 px-2 rounded-md cursor-none bg-[#414cb8]" id="button-hotspot" type="button">
              <span class="text-[#FFFFFF]" id="value-of-button-hotspot">ATIVAR HOTSPOT</span>
            </button>

            <button class="w-auto h-9 px-2 rounded-md cursor-none bg-red-900" id="close-hotspot-container" type="button">
              <span class="text-[#FFFFFF]">FECHAR</span>
            </button>
          </section>
        </section>
      </section>

      <section class="w-full h-full flex flex-col items-center justify-center absolute transition-all scale-0 bg-[#0c0d18e0]" id="container-configs">
        <section class="w-11/12 max-h-[66.666667%] flex flex-col relative rounded-md bg-[#121c28]">
          <header class="w-full min-h-[40px] max-h-[10%] flex items-center mb-2 border-b border-[#01010342] rounded-t-md">
            <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">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
            </svg>

            <h1 class="flex-1 pr-6 text-white text-center text-sm font-medium">CONFIGURAÇÕES</h1>
          </header>

          <section class="w-full h-[90%] overflow-auto px-1 mb-1 rounded-md">
            <section class="w-full h-auto flex flex-col gap-2" id="area-carrier-list">
              <div class="flex items-center">
                <input class="peer hidden" type="radio" name="config" id="tim-premium-cf" />
                <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">
                  <header class="w-full h-3 flex items-center justify-center p-2">
                    <h1 class="text-xs font-medium text-white truncate">VIVO PREMIUM ACF</h1>
                  </header>

                  <ul class="w-full h-auto flex flex-col gap-2 mt-3 overflow-hidden">
                    <li class="w-full h-12 flex items-center gap-2 px-1 rounded-md overflow-hidden bg-[#0c0d18e0]">
                      <div class="w-10 h-[100%] flex items-center">
                        <img src="https://i.ibb.co/TkC0rCH/DT7ixvcjh0.png" alt="icon" />
                      </div>

                      <div class="flex-1 flex flex-col gap-1 truncate">
                        <h1 class="text-white text-xs truncate">TIM 1 ➜ CONFIG 1 ➜ SV01.OCI (COPY)</h1>

                        <span class="text-white text-[0.65rem] truncate">SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA </span>
                      </div>

                      <div class="w-14 h-[100%] flex gap-1 items-end truncate">
                        <span class="text-white text-[0.5rem] leading-7 truncate">OVPN_SSL_PROXY</span>
                      </div>
                    </li>

                    <li class="w-full h-12 flex items-center gap-2 px-1 rounded-md overflow-hidden bg-[#0c0d18e0]">
                      <div class="w-10 h-[100%] flex items-center">
                        <img src="https://i.ibb.co/TkC0rCH/DT7ixvcjh0.png" alt="icon" />
                      </div>

                      <div class="flex-1 flex flex-col gap-1 truncate">
                        <h1 class="text-white text-xs truncate">TIM 1 ➜ CONFIG 1 ➜ SV01.OCI (COPY)</h1>

                        <span class="text-white text-[0.65rem] truncate">SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA </span>
                      </div>

                      <div class="w-14 h-[100%] relative truncate">
                        <span class="text-white text-[0.6rem] truncate absolute bottom-1 right-1">SSH_PROXY</span>
                      </div>
                    </li>
                  </ul>
                </label>
              </div>

              <div class="flex items-center">
                <input class="peer hidden" type="radio" name="config" id="vivo-premium-cf" />
                <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">
                  <header class="w-full h-3 flex items-center justify-center p-2">
                    <h1 class="text-sm text-white truncate">TIM PREMIUM ACF</h1>
                  </header>

                  <section class="w-full h-auto"></section>
                </label>
              </div>
            </section>
          </section>
        </section>
      </section>
    </main>

    <!-- FUNÇÕES DO APP -->
    <script>
      function appGetStatusbarHeightSize() {
        if (window?.DtGetStatusBarHeight?.execute && typeof window?.DtGetStatusBarHeight.execute === "function") {
          return DtGetStatusBarHeight.execute();
        }

        return 0;
      }

      function appGetNavbarHeightSize() {
        if (window?.DtGetNavigationBarHeight?.execute && typeof window?.DtGetNavigationBarHeight?.execute === "function") {
          return DtGetNavigationBarHeight.execute();
        }

        return 0;
      }

      function appTranslateText(label) {
        if (window?.DtTranslateText?.execute && typeof window?.DtTranslateText?.execute === "function") {
          return DtTranslateText.execute(label);
        }

        return null;
      }

      function appGetConfigLabel(label) {
        if (window?.DtGetAppConfig?.execute && typeof window?.DtGetAppConfig?.execute === "function") {
          return DtGetAppConfig.execute(label);
        }

        return null;
      }

      function appGetCarrierName() {
        if (window?.Android?.getNetworkName && typeof window?.Android?.getNetworkName === "function") {
          return Android.getNetworkName();
        }

        return null;
      }

      function appGetLocalIp() {
        if (window?.Android?.getLocalIP && typeof window?.Android.getLocalIP === "function") {
          return Android.getLocalIP();
        }

        return null;
      }

      function appGetConfigVersion() {
        if (window?.DtGetLocalConfigVersion?.execute && typeof window?.DtGetLocalConfigVersion?.execute === "function") {
          return DtGetLocalConfigVersion.execute();
        }

        return null;
      }

      function appOpenDialogConfig() {
        if (window?.DtExecuteDialogConfig?.execute && typeof window?.DtExecuteDialogConfig?.execute === "function") {
          return DtExecuteDialogConfig.execute();
        }

        return null;
      }

      function appGetDefaultConfig() {
        if (window?.DtGetDefaultConfig?.execute && typeof window?.DtGetDefaultConfig?.execute) {
          return DtGetDefaultConfig.execute();
        }

        return null;
      }

      function appGetAllConfigs() {
        if (window?.DtGetConfigs?.execute && typeof window?.DtGetConfigs?.execute === "function") {
          return JSON.parse(DtGetConfigs.execute());
        }

        return null;
      }

      function appSetConfig(id) {
        if (window?.DtSetConfig?.execute && typeof window?.DtSetConfig?.execute === "function") {
          window?.DtSetConfig?.execute(id);
        }

        return null;
      }

      function appOpenDialogDialogs() {
        if (window?.DtShowLoggerDialog?.execute && typeof window?.DtShowLoggerDialog?.execute === "function") {
          return window?.DtShowLoggerDialog.execute();
        }

        return null;
      }

      function appGetUsername() {
        if (window?.DtUsername && typeof window?.DtUsername.get === "function") {
          return DtUsername.get();
        }

        return "";
      }

      function appGetPassword() {
        if (window?.DtPassword && typeof window?.DtPassword?.get === "function") {
          return DtPassword.get();
        }

        return "";
      }

      function appGetUUID() {
        if (window?.DtUuid?.get && typeof window?.DtUuid.get === "function") {
          return DtUuid.get();
        }

        return "";
      }

      function appSetUsername(username) {
        if (window?.DtUsername?.set && typeof window?.DtUsername?.set === "function") {
          return window.DtUsername.set(username);
        }

        return null;
      }

      function appSetPassword(password) {
        if (window?.DtPassword?.set && typeof window?.DtPassword?.set === "function") {
          return window.DtPassword.set(password);
        }

        return null;
      }

      function appSetUUID(UUID) {
        if (window?.DtUuid.set && typeof window?.DtUuid?.set === "function") {
          return window.DtUuid.set(UUID);
        }

        return null;
      }

      function appGetConnectionState() {
        if (window?.DtGetVpnState?.execute && typeof window?.DtGetVpnState?.execute === "function") {
          return DtGetVpnState.execute();
        }

        return null;
      }

      function appStartConnection() {
        if (window?.DtExecuteVpnStart?.execute && typeof window?.DtExecuteVpnStart?.execute === "function") {
          return DtExecuteVpnStart.execute();
        }

        return null;
      }

      function appStopConnection() {
        if (window?.DtExecuteVpnStop?.execute && typeof window?.DtExecuteVpnStop?.execute === "function") {
          return DtExecuteVpnStop.execute();
        }

        return null;
      }

      function appGetDownloadBytes() {
        if (window?.DtGetNetworkDownloadBytes?.execute && typeof window?.DtGetNetworkDownloadBytes?.execute === "function") {
          return window?.DtGetNetworkDownloadBytes?.execute();
        }

        return "0 B/s";
      }

      function appGetUploadBytes() {
        if (window?.DtGetNetworkUploadBytes?.execute && typeof window?.DtGetNetworkUploadBytes?.execute === "function") {
          return Number(window?.DtGetNetworkUploadBytes?.execute());
        }

        return "0 B/s";
      }

      function appGetStatusHotspot() {
        if (window?.DtGetStatusHotSpotService?.execute && typeof window?.DtGetStatusHotSpotService?.execute === "function") {
          return window?.DtGetStatusHotSpotService.execute();
        }

        return null;
      }

      function appStartHotspot() {
        if (window?.DtStartHotSpotService?.execute && typeof window?.DtStartHotSpotService?.execute === "function") {
          return window.DtStartHotSpotService.execute();
        }

        return null;
      }

      function appStopHotspot() {
        if (window?.DtStopHotSpotService?.execute && typeof window?.DtStopHotSpotService?.execute === "function") {
          return window?.DtStopHotSpotService.execute();
        }

        return null;
      }

      function AppUpdate() {
        if (window?.DtStartAppUpdate?.execute && typeof window?.DtStartAppUpdate?.execute === "function") {
          return window.DtStartAppUpdate.execute();
        }

        return null;
      }

      function appIntoBrowser(url) {
        if (window?.DtStartWebViewActivity?.execute && typeof window?.DtStartWebViewActivity?.execute === "function") {
          return DtStartWebViewActivity.execute(url);
        }

        window.open(url, "_blank");
      }

      function appCheckuser() {
        if (window?.DtStartCheckUser?.execute && typeof window?.DtStartCheckUser?.execute === "function") {
          return window.DtStartCheckUser.execute();
        }

        return null;
      }

      function appApnConfiguration() {
        if (window?.DtStartApnActivity?.execute && typeof window?.DtStartApnActivity?.execute == "function") {
          return window?.DtStartApnActivity.execute();
        }

        return null;
      }

      function appBatteryOptimize() {
        if (window?.DtIgnoreBatteryOptimizations?.execute && typeof window?.DtIgnoreBatteryOptimizations?.execute === "function") {
          return DtIgnoreBatteryOptimizations.execute();
        }

        return null;
      }

      function appClearData() {
        if (window?.DtCleanApp?.execute && typeof window?.DtCleanApp?.execute === "function") {
          return DtCleanApp.execute();
        }

        return null;
      }

      function networkName() {
        if (window?.Android?.getNetworkName && typeof window?.Android?.getNetworkName === "function") {
          return Android.getNetworkName();
        }

        return null;
      }

      function internetProtocol() {
        if (window?.Android?.getLocalIP && typeof window?.Android?.getLocalIP === "function") {
          return Android.getLocalIP();
        }

        return null;
      }
    </script>

    <!-- DOM WRAPPER -->
    <script>
      const Dom = (selector) => {
        const _elements = document.querySelectorAll(selector);

        const wrapper = {
          on(listeners) {
            for (const [event, listener] of Object.entries(listeners)) {
              _elements.forEach((element) => {
                element.addEventListener(event, listener);
              });
            }

            return wrapper;
          },
          addClass: (...tokens) => {
            _elements.forEach((element) => {
              element.classList.add(...tokens);
            });

            return wrapper;
          },
          removeClass: (...tokens) => {
            _elements.forEach((element) => {
              element.classList.remove(...tokens);
            });

            return wrapper;
          },
          toggleClass: (token, force) => {
            _elements.forEach((element) => {
              element.classList.toggle(token, force);
            });

            return wrapper;
          },
          style(styles) {
            for (const [property, value] of Object.entries(styles)) {
              _elements.forEach((element) => {
                element.style[property] = value;
              });
            }

            return wrapper;
          },
          attr(attrs) {
            for (const [name, value] of Object.entries(attrs)) {
              _elements.forEach((element) => element.setAttribute(name, value));
            }

            return wrapper;
          },
          html(value) {
            _elements.forEach((element) => (element.innerHTML = value));
            return wrapper;
          },
          /**
           * @return {Element|null}
           */
          element() {
            return _elements.length > 0 ? _elements[0] : null;
          },
          allElements: _elements,
        };

        return wrapper;
      };
    </script>

    <!-- VÁRIAVIES -->
    <script>
      const body = Dom("body");

      const containerHome = Dom("#container-home");

      const openMenuButton = Dom("#open-menu");
      const carrierDetails = Dom("#carrier-details");
      const vpnStatusValue = Dom("#vpn-status");

      const appLogo = Dom("#app-logo");

      const buttonOfListCarrier = Dom("#button-of-list-carrier");
      const valueOnButtonOfCarrierList = Dom("#value-of-carrier");
      const buttonOfCheckUser = Dom("#button-open-checkuser");

      const containerInputUsername = Dom("#container-input-username");
      const containerInputPassword = Dom("#container-input-password");
      const containerInputUUID = Dom("#container-input-uuid");

      const inputUsername = Dom("#input-username");
      const inputPassword = Dom("#input-password");
      const inputUUID = Dom("#input-uuid");

      const eyeViewPasswordInput = Dom("#eye-view-password");
      const eyeNotViewPasswordInput = Dom("#eye-not-view-password");

      const eyeViewUUID = Dom("#eye-view-uuid");
      const eyeNotViewUUID = Dom("#eye-not-view-uuid");

      const buttonStartStopVpn = Dom("#button-vpn-start-stop");
      const buttonStartStopValue = Dom("#status-button-vpn");

      const downloadValue = Dom("#download-value");
      const uploadValue = Dom("#upload-value");

      const buttonLogs = Dom("#button-logs");

      const containerMenu = Dom("#container-menu");
      const hiddenContainerMenuButton = Dom("#hidden-menu");

      const expiresDateUserInMenu = Dom("#expires-date-user-in-menu");

      const navCheckuser = Dom("#nav-checkuser");
      const navWhatsapp = Dom("#nav-whatsapp");
      const navTelegram = Dom("#nav-telegram");
      const navRenew = Dom("#nav-renew");
      const navTest = Dom("#nav-test");
      const navUpdate = Dom("#nav-update");
      const navTerms = Dom("#nav-terms");
      const navHotspot = Dom("#nav-hotspot");
      const navAccessPoint = Dom("#nav-access-point");
      const navAppCleanData = Dom("#nav-app-clean-data");

      const containerTerms = Dom("#container-terms");
      const closeContainerTerms = Dom("#close-terms-container");

      const containerHotspot = Dom("#container-hotspot");
      const closeContainerHotspotButton = Dom("#close-hotspot-container");
      const buttonStartOrStopHotspot = Dom("#button-hotspot");
      const valueOfButtonHotspot = Dom("#value-of-button-hotspot");

      const containerConfigs = Dom("#container-configs");
      const closeContainerConfigs = Dom("#hidden-container-configs");

      const containerAreaCarrierList = Dom("#area-carrier-list");

      const inputsPeer = Dom("input.peer");
      const labelsFor = Dom("label[for]");
    </script>

    <!-- VÁRIAVEIS DO SISTEMA -->
    <script>
      const currentNetworkDownload = parseFloat(localStorage.getItem("networkDownload") ?? appGetDownloadBytes());
      const currentNetworkUpload = parseFloat(localStorage.getItem("networkUpload") ?? appGetUploadBytes());
    </script>

    <!-- FUNÇÕES -->
    <script>
      function getAppBackground() {
        const background_type = appGetConfigLabel("APP_BACKGROUND_TYPE");
        const background_color = appGetConfigLabel("APP_BACKGROUND_COLOR");
        const background_image = appGetConfigLabel("APP_BACKGROUND_IMAGE");

        if (!background_type) {
          return "url('../dist/bg.jpeg')";
        }

        if (JSON.parse(background_type)?.value === "COLOR") {
          return JSON.parse(background_color).value;
        }

        return `url(${JSON.parse(background_image).value})`;
      }

      function getAppLogo() {
        const logo = appGetConfigLabel("APP_LOGO");

        if (!logo) {
          return "../dist/logo.png";
        }

        return JSON.parse(logo)?.value;
      }

      function getConfigName() {
        const config = appGetDefaultConfig();

        if (!config) {
          return {
            name: appTranslateText("LBL_CHOOSE_CONFIG"),
            mode: "",
          };
        }

        if (JSON.parse(config)?.name && JSON.parse(config)?.mode) {
          return {
            name: JSON.parse(config)?.name,
            mode: JSON.parse(config)?.mode,
          };
        }

        return {
          name: appTranslateText("LBL_CHOOSE_CONFIG"),
          mode: "",
        };
      }

      function writeConfigValueOnButton() {
        valueOnButtonOfCarrierList.html(getConfigName()?.name);
      }

      function writeCarrierStatus() {
        setInterval(() => {
          carrierDetails.html(`${appGetCarrierName()}: ${internetProtocol()}`);
        });
      }

      function connectionState(state) {
        const connectionValue = `${state || appGetConnectionState()}`;

        switch (connectionValue) {
          case "DISCONNECTED":
            buttonStartStopValue.html(appTranslateText("LBL_BTN_START"));
            vpnStatusValue.html(appTranslateText("LBL_STATE_DISCONNECTED"));
            break;
          case "CONNECTING":
            buttonStartStopValue.html(appTranslateText("LBL_BTN_STOP"));
            vpnStatusValue.html(appTranslateText("LBL_STATE_CONNECTING"));
            break;
          case "CONNECTED":
            buttonStartStopValue.html(appTranslateText("LBL_BTN_STOP"));
            vpnStatusValue.html(appTranslateText("LBL_STATE_CONNECTED"));
            break;
          case "STOPPING":
            buttonStartStopValue.html(appTranslateText("LBL_BTN_STOPPING"));
            vpnStatusValue.html(appTranslateText("LBL_STATE_STOPPING"));
            break;
          case "NO_NETWORK":
            buttonStartStopValue.html(appTranslateText("LBL_BTN_STOP"));
            vpnStatusValue.html(appTranslateText("LBL_STATE_NO_NETWORK"));
            break;
          case "AUTH":
            buttonStartStopValue.html(appTranslateText("LBL_BTN_STOP"));
            vpnStatusValue.html(appTranslateText("LBL_STATE_AUTH"));
            break;
          case "AUTH_FAILED":
            buttonStartStopValue.html(appTranslateText("LBL_BTN_START"));
            vpnStatusValue.html(appTranslateText("LBL_STATE_AUTH_FAILED"));
            break;
        }
      }

      function startStopConnection() {
        const state = appGetConnectionState();
        state !== "CONNECTED" ? appStartConnection() : appStopConnection();
      }

      function startHotspot() {
        appStartHotspot();

        valueOfButtonHotspot.html("DESATIVAR HOTSPOT");

        return;
      }

      function stopHotspot() {
        appStopHotspot();

        valueOfButtonHotspot.html("ATIVAR HOTSPOT");

        return;
      }

      function toggleHotspot() {
        appGetStatusHotspot() === "STOPPED" ? startHotspot() : stopHotspot();

        return;
      }

      function setStatusHotspot() {
        if (appGetStatusHotspot() === "STOPPED") {
          valueOfButtonHotspot.html("ATIVAR HOTSPOT");

          return;
        } else {
          valueOfButtonHotspot.html("DESATIVAR HOTSPOT");

          return;
        }

        return;
      }

      function showInputPasswordValue() {
        eyeViewPasswordInput.addClass("hidden");
        eyeNotViewPasswordInput.removeClass("hidden");
        inputPassword.attr({ type: "text" });
      }
      function hiddenInputPasswordValue() {
        eyeViewPasswordInput.removeClass("hidden");
        eyeNotViewPasswordInput.addClass("hidden");
        inputPassword.attr({ type: "password" });
      }

      function showInputUUIDValue() {
        eyeViewUUID.addClass("hidden");
        eyeNotViewUUID.removeClass("hidden");
        inputUUID.attr({ type: "text" });
      }
      function hiddenInputUUIDValue() {
        eyeViewUUID.removeClass("hidden");
        eyeNotViewUUID.addClass("hidden");
        inputUUID.attr({ type: "password" });
      }

      function showContainerMenu() {
        containerMenu.removeClass("-translate-x-full");

        return;
      }
      function hiddenContainerMenu() {
        containerMenu.addClass("-translate-x-full");

        return;
      }

      function showContainerTerms() {
        containerTerms.removeClass("scale-0");

        return;
      }
      function hiddenContainerTerms() {
        containerTerms.addClass("scale-0");

        return;
      }

      function showContainerHotspot() {
        containerHotspot.removeClass("scale-0");

        return;
      }
      function hiddenContainerHotspot() {
        containerHotspot.addClass("scale-0");

        return;
      }

      function writeCarrierList() {
        const data = appGetAllConfigs();

        if (data) {
          containerAreaCarrierList.html("");

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

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

          const labels = [];
          let selectedLabel = null;

          data.forEach((category) => {
            const div = document.createElement("div");
            const input = document.createElement("input");
            const label = document.createElement("label");
            const header = document.createElement("header");
            const h1 = document.createElement("h1");
            const ul = document.createElement("ul");

            div.classList.add("flex", "items-center");
            input.classList.add("hidden");
            label.classList.add("w-full", "max-h-8", "p-2", "border", "border-[#01010342]", "rounded-md", "transition-[max-height]", "duration-1000", "overflow-hidden");
            header.classList.add("w-full", "h-3", "flex", "items-center", "justify-center", "p-2");
            h1.classList.add("text-xs", "font-medium", "text-white", "truncate");
            ul.classList.add("w-full", "h-auto", "flex", "flex-col", "gap-2", "mt-3", "overflow-hidden");

            input.type = "radio";
            input.name = "config";
            input.id = category.name.trim();
            label.htmlFor = category.name.trim();

            h1.textContent = category.name;

            category.items.forEach((item) => {
              const li = document.createElement("li");
              const liDivLeft = document.createElement("div");
              const carrierIcon = document.createElement("img");
              const liDivCenter = document.createElement("div");
              const configTitle = document.createElement("h1");
              const configDescription = document.createElement("span");
              const liDivRight = document.createElement("div");
              const configType = document.createElement("span");

              li.classList.add("w-full", "h-12", "flex", "items-center", "gap-2", "px-1", "rounded-md", "overflow-hidden", "bg-[#0c0d18e0]");
              liDivLeft.classList.add("w-10", "h-[100%]", "flex", "items-center");
              liDivCenter.classList.add("flex-1", "flex", "flex-col", "gap-1", "truncate");
              configTitle.classList.add("text-white", "text-xs", "truncate");
              configDescription.classList.add("text-white", "text-[0.65rem]", "truncate");
              liDivRight.classList.add("w-14", "h-[100%]", "flex", "items-end", "truncate");
              configType.classList.add("text-white", "text-[0.5rem]", "leading-7", "truncate");

              carrierIcon.src = item.icon;
              carrierIcon.alt = item.name;

              configTitle.textContent = item.name;
              configDescription.textContent = item.description;

              configType.textContent = item.mode;

              liDivLeft.appendChild(carrierIcon);

              liDivCenter.appendChild(configTitle);
              liDivCenter.appendChild(configDescription);

              liDivRight.appendChild(configType);

              li.appendChild(liDivLeft);
              li.appendChild(liDivCenter);
              li.appendChild(liDivRight);

              li.addEventListener("click", () => {
                appSetConfig(item.id);
                hiddenContainerConfigs();
              });

              ul.appendChild(li);
            });

            header.appendChild(h1);

            label.appendChild(header);
            label.appendChild(ul);

            input.addEventListener("change", () => {
              if (input.checked) {
                labels.forEach((otherLabel) => {
                  if (otherLabel !== label) {
                    otherLabel.style.maxHeight = "32px";
                  }
                });

                label.style.maxHeight = label.scrollHeight + "px";

                selectedLabel = label;
              }
            });

            labels.push(label);

            div.appendChild(input);
            div.appendChild(label);

            containerAreaCarrierList.element().appendChild(div);
          });
        }
      }
      function showContainerConfigs() {
        writeCarrierList();
        containerConfigs.removeClass("scale-0");

        return;
      }
      function hiddenContainerConfigs() {
        containerConfigs.addClass("scale-0");

        return;
      }

      function checkV2ray() {
        const data = JSON.parse(appGetDefaultConfig());

        if (!data) {
          return false;
        }

        if (data.mode?.toLowerCase().startsWith("v2ray")) {
          if (data.auth?.v2ray_uuid) {
            return "exists v2ray config";
          }
          return true;
        }

        return false;
      }

      function toggleInput() {
        const v2rayUUID = checkV2ray();

        if (v2rayUUID === "exists v2ray config") {
          containerInputUsername.addClass("hidden");
          containerInputPassword.addClass("hidden");
          containerInputUUID.addClass("hidden");
        } else if (v2rayUUID) {
          containerInputUsername.addClass("hidden");
          containerInputPassword.addClass("hidden");
          containerInputUUID.removeClass("hidden");
          containerInputUUID.addClass("flex");
        } else {
          containerInputUsername.removeClass("hidden");
          containerInputPassword.removeClass("hidden");
          containerInputUUID.addClass("flex");
          containerInputUUID.addClass("hidden");
        }
      }

      function formatBytes(bytes) {
        const sizes = ["B/s", "KB/s", "MB/s", "GB/s", "TB/s"];

        if (bytes === 0) return "0 B/s";

        const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));

        return (bytes / Math.pow(1024, i)).toPrecision(3) + " " + sizes[i];
      }

      function updateNetworkStats() {
        setInterval(() => {
          const newNetworkDownload = appGetDownloadBytes();
          const newNetworkUpload = appGetUploadBytes();

          downloadValue.html(formatBytes(newNetworkDownload - currentNetworkDownload));
          uploadValue.html(formatBytes(newNetworkUpload - currentNetworkUpload));

          localStorage.setItem("networkDownload", formatBytes(newNetworkDownload - currentNetworkDownload));
          localStorage.setItem("networkUpload", formatBytes(newNetworkUpload - currentNetworkUpload));
        }, 500);
      }

      function getExpirationDateOfUser() {
        const expirationDate = localStorage.getItem("expirationDate");

        if (expirationDate) {
          expiresDateUserInMenu.style({ display: "block" });

          return `Expira em: ${expirationDate}`;
        }

        expiresDateUserInMenu.style({ display: "none" });

        return "";
      }

      function toggleLabelHeight(inputId) {
        const input = document.getElementById(inputId);
        const label = document.querySelector(`label[for="${inputId}"]`);

        if (input.checked) {
          // Se o input estiver selecionado, ajuste a altura máxima do label
          label.style.maxHeight = label.scrollHeight + "px";
        } else {
          // Se o input não estiver selecionado, redefina a altura máxima
          label.style.maxHeight = "32px";
        }
      }

      function toggleMoreInputs() {
        const data = JSON.parse(appGetDefaultConfig());

        if (!data) return null;

        containerInputUsername.removeClass("hidden");
        containerInputPassword.removeClass("hidden");
        containerInputUUID.addClass("hidden");

        if (data?.auth?.username) {
          containerInputUsername.addClass("hidden");
        }

        if (data?.auth?.password) {
          containerInputPassword.addClass("hidden");
        }

        if (!data?.auth?.username) {
          containerInputUsername.removeClass("hidden");
        }

        if (!data?.auth?.password) {
          containerInputPassword.removeClass("hidden");
        }

        if (data.mode?.toLowerCase().startsWith("v2ray")) {
          if (data?.auth?.v2ray_uuid) {
            containerInputUUID.addClass("hidden");
            containerInputUsername.addClass("hidden");
            containerInputPassword.addClass("hidden");
          }

          if (!data?.auth?.v2ray_uuid) {
            containerInputUUID.removeClass("hidden");
            containerInputUsername.addClass("hidden");
            containerInputPassword.addClass("hidden");
          }
        }
      }
    </script>

    <!-- AÇÕES -->
    <script>
      body.style({
        background: getAppBackground(),
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
      });

      containerHome.style({
        padding: `${appGetStatusbarHeightSize() + 10}px 10px ${appGetNavbarHeightSize() + 10}px 10px`,
      });

      appLogo.attr({ src: getAppLogo() });

      appLogo.on({ click: () => AppUpdate() });

      buttonOfListCarrier.on({ click: () => showContainerConfigs() });
      valueOnButtonOfCarrierList.html(getConfigName()?.name);
      closeContainerConfigs.on({ click: () => hiddenContainerConfigs() });

      buttonOfCheckUser.on({ click: () => appCheckuser() });

      inputUsername.attr({ placeholder: appTranslateText("LBL_USERNAME") });
      inputPassword.attr({ placeholder: appTranslateText("LBL_PASSWORD") });
      inputUUID.attr({ placeholder: appTranslateText("LBL_UUID") });

      inputUsername.attr({ value: appGetUsername() });
      inputPassword.attr({ value: appGetPassword() });
      inputUUID.attr({ value: appGetUUID() });

      inputUsername.on({ input: (e) => appSetUsername(e.target.value) });
      inputPassword.on({ input: (e) => appSetPassword(e.target.value) });
      inputUUID.on({ input: (e) => appSetUUID(e.target.value) });

      eyeViewPasswordInput.on({ click: () => showInputPasswordValue() });
      eyeNotViewPasswordInput.on({ click: () => hiddenInputPasswordValue() });

      eyeViewUUID.on({ click: () => showInputUUIDValue() });
      eyeNotViewUUID.on({ click: () => hiddenInputUUIDValue() });

      buttonStartStopVpn.on({ click: () => startStopConnection() });

      buttonLogs.on({ click: () => appOpenDialogDialogs() });

      containerMenu.style({
        padding: `${appGetStatusbarHeightSize() + 10}px 10px ${appGetNavbarHeightSize() + 10}px 10px`,
      });

      openMenuButton.on({ click: () => showContainerMenu() });

      hiddenContainerMenuButton.on({ click: () => hiddenContainerMenu() });

      expiresDateUserInMenu.html(getExpirationDateOfUser());

      navCheckuser.on({ click: () => appCheckuser() });

      navWhatsapp.on({ click: () => appIntoBrowser("https://wa.me/15996311570") });

      navTelegram.on({ click: () => appIntoBrowser("https://t.me/wesley898") });

      navRenew.on({ click: () => appIntoBrowser("https://t.me/agvendasbr_bot") });

      navTest.on({ click: () => appIntoBrowser("https://t.me/agvendasbr_bot") });

      navUpdate.on({ click: () => AppUpdate() });

      navTerms.on({ click: () => showContainerTerms() });
      closeContainerTerms.on({ click: () => hiddenContainerTerms() });

      navHotspot.on({ click: () => showContainerHotspot() });
      buttonStartOrStopHotspot.on({ click: () => toggleHotspot() });
      closeContainerHotspotButton.on({ click: () => hiddenContainerHotspot() });

      navAccessPoint.on({ click: () => appApnConfiguration() });

      navAppCleanData.on({ click: () => appClearData() });

      connectionState();
      setStatusHotspot();
      updateNetworkStats();
      toggleMoreInputs();
      writeCarrierStatus();
    </script>

    <!-- FUNÇÕES PARA O APP -->
    <script>
      function dtConfigClickListener() {
        writeConfigValueOnButton();

        toggleMoreInputs();

        inputUsername.attr({ value: appGetUsername() });
        inputPassword.attr({ value: appGetPassword() });
        inputUUID.attr({ value: appGetUUID() });
      }

      function dtVpnStateListener(state) {
        connectionState(state);
      }

      const dtCheckUserModelListener = (model) => {
        const data = JSON.parse(model);

        expiresDateUserInMenu.html(`Expira em: ${data.expiration_date}`);

        expiresDateUserInMenu.style({ display: "block" });

        localStorage.setItem("expirationDate", data.expiration_date);
      };
    </script>
  </body>
</html>
",
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    },
    {
        "id": 14288,
        "label": "PAGINA WEBVIEW (POR SUA CONTA E RISCO)",
        "name": "APP_WEB_VIEW",
        "value": null,
        "type": "HTML",
        "status": "ACTIVE",
        "user_id": "2a6b1d78-e6f3-4956-be98-29d1d70278fe"
    }
]