[{"id":26680,"label":"Nome do app","name":"APP_NAME","value":"","type":"STRING","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":26681,"label":"Logo do app","name":"APP_LOGO","value":"https://i.ibb.co/d65bpJV/487f7b22f68312d2c1bbc93b1aea445b-1692893795293.png","type":"IMAGE","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":26682,"label":"Imagem de fundo","name":"APP_BACKGROUND_IMAGE","value":"","type":"IMAGE","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3810,"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":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3811,"label":"Cor de fundo","name":"APP_BACKGROUND_COLOR","value":"#080E16C7","type":"COLOR","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3812,"label":"Cor do card inicial","name":"APP_CARD_COLOR","value":"#1D242E73","type":"COLOR","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":7979,"label":"Raio do card inicial","name":"APP_CARD_RADIUS","value":30,"type":"INTEGER","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":7980,"label":"Cor do card de status","name":"APP_CARD_STATUS_COLOR","value":"#1D242E73","type":"COLOR","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":7981,"label":"Raio do card de status","name":"APP_CARD_STATUS_RADIUS","value":25,"type":"INTEGER","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3813,"label":"Cor do card de configurações","name":"APP_CARD_CONFIG_COLOR","value":"#1D242E73","type":"COLOR","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3814,"label":"Cor do fundo dos dialogs","name":"APP_DIALOG_BACKGROUND_COLOR","value":"#0E171EC9","type":"COLOR","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":11850,"label":"Cor do fundo do dialog de log","name":"APP_DIALOG_LOGGER_COLOR","value":"#1D242E73","type":"COLOR","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3815,"label":"Cor das bordas","name":"APP_BORDER_COLOR","value":"#1D242E73","type":"COLOR","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":7982,"label":"Cor dos inputs","name":"APP_INPUT_COLOR","value":"#00000000","type":"COLOR","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":7983,"label":"Raio dos inputs","name":"APP_INPUT_RADIUS","value":30,"type":"INTEGER","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3816,"label":"Cor dos textos","name":"APP_TEXT_COLOR","value":"#CBBFDFFF","type":"COLOR","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3817,"label":"Cor dos botões","name":"APP_BUTTON_COLOR","value":"#1D242E73","type":"COLOR","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":7984,"label":"Raio dos botões","name":"APP_BUTTON_RADIUS","value":30,"type":"INTEGER","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3818,"label":"Cor dos icones","name":"APP_ICON_COLOR","value":"#CBBFDFFF","type":"COLOR","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3819,"label":"Exibir modo de conexão","name":"APP_SHOW_CONNECTION_MODE","value":"true","type":"BOOLEAN","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":22784,"label":"Atualizar automaticamente as configurações ao lançar uma atualização.","name":"APP_CONFIG_AUTO_UPDATE","value":false,"type":"BOOLEAN","status":"INACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":4922,"label":"Iniciar o app automaticamente ao reiniciar o dispositivo","name":"APP_AUTO_START","value":false,"type":"BOOLEAN","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":7985,"label":"Usar limiter de conexão","name":"APP_CONNECTION_LIMITER","value":false,"type":"BOOLEAN","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":12836,"label":"Usar botão de atualizações","name":"APP_BTN_UPDATE_ENABLED","value":true,"type":"BOOLEAN","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":12837,"label":"Usar botão de registros","name":"APP_BTN_LOGGER_ENABLED","value":true,"type":"BOOLEAN","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":12838,"label":"Usar botão de pagina webview","name":"APP_BTN_PAGE_ENABLED","value":false,"type":"BOOLEAN","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":14425,"label":"Ativar dialog de erros","name":"APP_DIALOG_ERROR_ENABLED","value":true,"type":"BOOLEAN","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":14426,"label":"Ativar dialog de checkuser","name":"APP_CHECKUSER_DIALOG_ENABLED","value":"false","type":"BOOLEAN","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":14427,"label":"Ativar toast de sucesso","name":"APP_SUCCESS_TOAST_ENABLED","value":true,"type":"BOOLEAN","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":14428,"label":"Ativar toast de erro","name":"APP_ERROR_TOAST_ENABLED","value":true,"type":"BOOLEAN","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":14429,"label":"Usar layout webview","name":"APP_LAYOUT_WEBVIEW_ENABLED","value":"true","type":"BOOLEAN","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3820,"label":"Mensagem","name":"APP_MESSAGE","value":"Bem vindo ao DTunnel Mod","type":"TEXT","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3822,"label":"URL de atualização do aplicativo","name":"APP_UPDATE_URL","value":null,"type":"URL","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3821,"label":"Tipo de mensagem","name":"APP_MESSAGE_TYPE","value":{"options":[{"label":"Alerta","value":"ALERT"},{"label":"Informação","value":"INFO"},{"label":"Boas vindas","value":"WELCOME"},{"label":"Sem mensagem","value":"NONE"}],"selected":"WELCOME"},"type":"SELECT","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":14430,"label":"LAYOUT WEBVIEW (POR SUA CONTA E RISCO)","name":"APP_LAYOUT_WEBVIEW","value":"<html lang=\"pt-br\">\r\n\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>LAYOUT_APP_WEBVIEW</title>\r\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Ubuntu\">\r\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Orbitron\">\r\n  <script async=\"\" src=\"https://www.googletagmanager.com/gtag/js?id=G-Q2HPLXNHN0\"></script>\r\n  <script>\r\n    window.dataLayer = window.dataLayer || [];\r\n\r\n    function gtag() {\r\n      dataLayer.push(arguments);\r\n    }\r\n    gtag('js', new Date());\r\n    gtag('config', 'G-Q2HPLXNHN0');\r\n  </script>\r\n  <style>\r\n    * {\r\n      margin: 0;\r\n      padding: 0;\r\n      box-sizing: border-box;\r\n      -webkit-tap-highlight-color: transparent;\r\n      font-family: 'Ubuntu';\r\n    }\r\n\r\n    ::placeholder {\r\n      color: #888888d9;\r\n\r\n    }\r\n\r\n    body {\r\n      height: 100vh;\r\n      background-color: #000000;\r\n      background-image: url(\"data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='%236200ff' fill-opacity='0.47' fill-rule='evenodd'/%3E%3C/svg%3E\");\r\n    }\r\n\r\n    @keyframes fade-in {\r\n      from {\r\n        opacity: 0;\r\n      }\r\n\r\n      to {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    @keyframes fade-out {\r\n      from {\r\n        opacity: 1;\r\n      }\r\n\r\n      to {\r\n        opacity: 0;\r\n      }\r\n    }\r\n\r\n    @keyframes pulse {\r\n      0% {\r\n        transform: scale(1);\r\n        box-shadow: none;\r\n      }\r\n\r\n      50% {\r\n        transform: scale(1.2);\r\n        box-shadow: 0 0 10px 5px #888888d9;\r\n      }\r\n\r\n      100% {\r\n        transform: scale(1);\r\n        box-shadow: none;\r\n      }\r\n    }\r\n  </style>\r\n</head>\r\n\r\n\r\n<body>\r\n  <div id=\"root\"></div>\r\n  <script>\r\n    // const BACKGROUND_IMAGE = null;\r\n    // const BACKGROUND_COLOR = null;\r\n    const BACKGROUND_IMAGE = 'https://i.ibb.co/z73kfPx/download-4.jpg';\r\n    const BACKGROUND_COLOR = BACKGROUND_IMAGE ?\r\n      `url(${BACKGROUND_IMAGE}) center center / cover rgb(32, 32, 32)` :\r\n      'linear-gradient(45deg, rgba(20, 20, 44, 1), rgb(27, 27, 27), rgba(31, 28, 58, 1))'\r\n\r\n    const INPUT_COLOR = '#0000009C'\r\n    const BUTTON_BACKGROUND_COLOR = '#00000073'\r\n    const ICON_COLOR = '#4F4F4FD9'\r\n    const TEXT_COLOR = '#666666D9'\r\n\r\n    const TOOLS_BUTTON_BACKGROUND_COLOR = '#0000009C'\r\n\r\n    const VPN_BUTTON_BACKGROUND_COLOR = '#0000009C'\r\n\r\n    const VPN_STOPPED_COLOR = '#4F4F4FD9'\r\n    const VPN_STARTING_COLOR = '#AFB002A6'\r\n    const VPN_RUNNING_COLOR = '#666666D9'\r\n\r\n    const CHECKUSER_TEXT_COLOR = '#666666D9'\r\n    const LOGGER_TEXT_COLOR = '#666666D9'\r\n\r\n    const DIALOG_HEADER_TITLE_COLOR = '#666666D9'\r\n    const DIALOG_HEADER_CLOSE_BUTTON_COLOR = '#666666D9'\r\n    const DIALOG_CONTENT_BACKGROUND_COLOR = '#0000009C'\r\n    const DIALOG_FOOTER_BUTTON_COLOR = '#000000ff'\r\n    const DIALOG_FOOTER_BUTTON_TEXT_COLOR = '#666666D9'\r\n\r\n\r\n\r\n    const URL_SPEEDTEST = 'https://fast.com'\r\n    const URL_YOUTUBE = ''\r\n    const URL_MP3 = ''\r\n\r\n\r\n    const POLITC_URL = ''\r\n    const TERMS_URL = ''\r\n    const SERVER_URL = ''\r\n    const TUTO_URL = ''\r\n    const PREMIUM_URL = ''\r\n\r\n\r\n\r\n    class Component {\r\n      constructor(element) {\r\n        this.element = element;\r\n      }\r\n\r\n      addEventListener(event, listener) {\r\n        this.element.addEventListener(event, listener);\r\n      }\r\n\r\n      append(component) {\r\n        if (component instanceof Component) {\r\n          this.element.appendChild(component.element);\r\n        } else {\r\n          this.element.append(component);\r\n        }\r\n      }\r\n\r\n      appendChild(component) {\r\n        if (component instanceof Component) {\r\n          this.element.appendChild(component.element);\r\n        } else {\r\n          this.element.appendChild(component);\r\n        }\r\n      }\r\n\r\n      remove() {\r\n        this.element.remove();\r\n      }\r\n\r\n      contains(component) {\r\n        if (component instanceof Component) {\r\n          return this.element.contains(component.element);\r\n        } else {\r\n          return this.element.contains(component);\r\n        }\r\n      }\r\n    }\r\n\r\n    class StyledComponent extends Component {\r\n      constructor(element, styles = {}) {\r\n        super(element);\r\n        this.styles = styles;\r\n        this.setStyles(styles);\r\n      }\r\n\r\n      setStyles(styles) {\r\n        Object.keys(styles).forEach((key) => {\r\n          if (this.element.style.hasOwnProperty(key)) {\r\n            this.element.style[key] = styles[key];\r\n          }\r\n        });\r\n      }\r\n    }\r\n\r\n    class Toast extends StyledComponent {\r\n      constructor(element, styles = {}) {\r\n        super(element, styles);\r\n      }\r\n\r\n      showToast(message, type, duration = 3000) {\r\n        this.element.innerHTML = message;\r\n        this.element.style.wordWrap = 'break-word';\r\n        this.element.style.width = '90%';\r\n        this.element.style.maxWidth = '400px';\r\n        this.element.style.textAlign = 'center';\r\n        this.element.style.display = 'block';\r\n        this.element.style.position = 'fixed';\r\n        this.element.style.bottom = '10%';\r\n        this.element.style.left = '50%';\r\n        this.element.style.transform = 'translateX(-50%)';\r\n        this.element.style.opacity = '0';\r\n        this.element.style.color = '#FFFFFF';\r\n\r\n        switch (type) {\r\n          case 'success':\r\n            this.element.style.background = 'linear-gradient(135deg, #4CAF50, #009688)';\r\n            break;\r\n          case 'error':\r\n            this.element.style.background = 'linear-gradient(135deg, #F44336, #FF5722)';\r\n            break;\r\n          case 'info':\r\n          default:\r\n            this.element.style.background = 'linear-gradient(135deg, #2196F3, #03A9F4)';\r\n            break;\r\n        }\r\n\r\n        this.element.style.padding = '10px';\r\n        this.element.style.borderRadius = '4px';\r\n        this.element.style.opacity = '0';\r\n\r\n        this.element.style.transition = 'opacity 0.3s ease-in-out';\r\n        setTimeout(() => {\r\n          this.element.style.opacity = '1';\r\n        }, 100);\r\n\r\n        setTimeout(() => this.hideToast(), duration);\r\n\r\n        this.element.addEventListener('click', () => this.hideToast());\r\n      }\r\n\r\n      hideToast() {\r\n        this.element.style.transition = 'opacity 0.3s ease-in-out';\r\n        this.element.style.opacity = '0';\r\n\r\n        setTimeout(() => {\r\n          this.element.remove();\r\n        }, 300);\r\n      }\r\n\r\n      static success(message, duration = 3000) {\r\n        const toastElement = document.createElement('div');\r\n        document.body.appendChild(toastElement);\r\n        const toast = new Toast(toastElement);\r\n        toast.showToast(message, 'success', duration);\r\n      }\r\n\r\n      static error(message, duration = 3000) {\r\n        const toastElement = document.createElement('div');\r\n        document.body.appendChild(toastElement);\r\n        const toast = new Toast(toastElement);\r\n        toast.showToast(message, 'error', duration);\r\n      }\r\n\r\n      static info(message, duration = 3000) {\r\n        const toastElement = document.createElement('div');\r\n        document.body.appendChild(toastElement);\r\n        const toast = new Toast(toastElement);\r\n        toast.showToast(message, 'info', duration);\r\n      }\r\n    }\r\n\r\n    class AppComponent extends StyledComponent {\r\n      constructor(element, styles = {}) {\r\n        const defaultStyles = {\r\n          width: '100%',\r\n          height: '100%',\r\n          background: '#404258',\r\n          display: 'flex',\r\n          flexDirection: 'column',\r\n          justifyContent: 'center',\r\n          alignItems: 'center',\r\n        };\r\n\r\n        super(element, {\r\n          ...defaultStyles,\r\n          ...styles\r\n        });\r\n      }\r\n    }\r\n\r\n    class CardComponent extends StyledComponent {\r\n      constructor(styles = {}) {\r\n        const defaultStyles = {\r\n          display: 'flex',\r\n          flexDirection: 'column',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          width: '85%',\r\n          maxWidth: '23rem',\r\n          margin: '1.2rem',\r\n          borderRadius: '5px',\r\n          border: 'none',\r\n        };\r\n\r\n        super(document.createElement('div'), {\r\n          ...defaultStyles,\r\n          ...styles\r\n        });\r\n      }\r\n    }\r\n\r\n    class InputGroupComponent extends StyledComponent {\r\n      constructor(styles = {}) {\r\n        const defaultStyles = {\r\n          display: 'flex',\r\n          width: '100%',\r\n          alignItems: 'center',\r\n          background: '#363749',\r\n          color: '#FFF',\r\n          padding: '0.2rem',\r\n          borderRadius: '50px',\r\n          top: '90%',\r\n          boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\r\n        };\r\n\r\n        super(document.createElement('div'), {\r\n          ...defaultStyles,\r\n          ...styles\r\n        });\r\n      }\r\n\r\n      append(...components) {\r\n        components.forEach((component) => super.append(component));\r\n      }\r\n    }\r\n\r\n    class InputComponent extends StyledComponent {\r\n      constructor(styles = {}) {\r\n        const defaultStyles = {\r\n          background: 'transparent',\r\n          border: 'none',\r\n          width: '100%',\r\n          outline: 'none',\r\n          color: TEXT_COLOR,\r\n          fontSize: '15px',\r\n        };\r\n\r\n        super(document.createElement('input'), {\r\n          ...defaultStyles,\r\n          ...styles\r\n        });\r\n      }\r\n\r\n      setEnabled(value) {\r\n        this.element.disabled = !value;\r\n      }\r\n    }\r\n\r\n    class InputText extends InputComponent {\r\n      constructor(styles = {}) {\r\n        super(styles);\r\n        this.element.type = 'text';\r\n      }\r\n\r\n      get value() {\r\n        return this.element.value;\r\n      }\r\n\r\n      setPlaceholder(text) {\r\n        this.element.placeholder = text;\r\n      }\r\n\r\n      setOnInputListener(callback) {\r\n        this.addEventListener('input', callback);\r\n      }\r\n\r\n      setValue(value) {\r\n        this.element.value = value;\r\n      }\r\n\r\n      setOnInputListener(callback) {\r\n        this.addEventListener('input', callback);\r\n      }\r\n    }\r\n\r\n    class InputPassword extends InputText {\r\n      constructor(styles = {}) {\r\n        super(styles);\r\n        this.element.type = 'password';\r\n      }\r\n\r\n      setShowing(value) {\r\n        this.element.type = !value ? 'password' : 'text';\r\n      }\r\n\r\n      get isShowing() {\r\n        return this.element.type != 'password'\r\n      }\r\n    }\r\n\r\n    class SvgComponent extends StyledComponent {\r\n      constructor(styles = {}, ...paths) {\r\n        const defaultStyles = {\r\n          fill: '#FFFFFF',\r\n          padding: '5px',\r\n          width: '2.2rem',\r\n          height: '2.2rem',\r\n        };\r\n\r\n        super(document.createElementNS('http://www.w3.org/2000/svg', 'svg'), {\r\n          ...defaultStyles,\r\n          ...styles,\r\n        });\r\n\r\n        this.applyOptions();\r\n\r\n        paths.forEach((p) => this.addPath(p));\r\n      }\r\n\r\n      applyOptions() {\r\n        this.setFill(this.styles.fill || 'currentColor');\r\n        this.setWidth(this.styles.width || '16');\r\n        this.setHeight(this.styles.height || '16');\r\n        this.setViewBox(this.styles.viewBox || '0 0 16 16');\r\n        this.setXmlns(this.styles.xmlns || 'http://www.w3.org/2000/svg');\r\n      }\r\n\r\n      setFill(color) {\r\n        this.element.setAttribute('fill', color);\r\n      }\r\n\r\n      setWidth(width) {\r\n        this.element.setAttribute('width', width);\r\n      }\r\n\r\n      setHeight(height) {\r\n        this.element.setAttribute('height', height);\r\n      }\r\n\r\n      setViewBox(viewBox) {\r\n        this.element.setAttribute('viewBox', viewBox);\r\n      }\r\n\r\n      setXmlns(xmlns) {\r\n        this.element.setAttribute('xmlns', xmlns);\r\n      }\r\n\r\n      addPath(...path) {\r\n        path.forEach((item) => {\r\n          const pathElement = document.createElementNS(\r\n            'http://www.w3.org/2000/svg',\r\n            'path'\r\n          );\r\n          pathElement.setAttribute('d', item);\r\n          this.element.appendChild(pathElement);\r\n        });\r\n      }\r\n    }\r\n\r\n    class Spinner extends StyledComponent {\r\n      constructor() {\r\n        super(document.createElement('div'), {\r\n          display: 'flex',\r\n          width: '100%',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          padding: '20px'\r\n        });\r\n        this.createSpinnerElements();\r\n      }\r\n\r\n      createSpinnerElements() {\r\n        const spinnerElement = new StyledComponent(document.createElement('div'));\r\n        spinnerElement.setStyles({\r\n          borderTop: '4px solid transparent',\r\n          borderRight: '4px solid #ccc',\r\n          borderBottom: '4px solid #ccc',\r\n          borderLeft: '4px solid #ccc',\r\n          borderRadius: '50%',\r\n          width: '45px',\r\n          height: '45px',\r\n          animation: 'spin 1s linear infinite',\r\n        });\r\n\r\n        this.append(spinnerElement)\r\n      }\r\n    }\r\n\r\n    class IconComponent extends SvgComponent {\r\n      constructor(styles = {}, ...iconPath) {\r\n        super({\r\n          cursor: 'pointer',\r\n          background: TOOLS_BUTTON_BACKGROUND_COLOR,\r\n          borderRadius: '20%',\r\n          height: '45px',\r\n          width: '45px',\r\n          padding: '10px',\r\n          boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\r\n          fill: ICON_COLOR,\r\n          ...styles,\r\n        },\r\n          ...iconPath,\r\n        );\r\n      }\r\n    }\r\n\r\n    class CalanderIconComponent extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M4.684 11.523v-2.3h2.261v-.61H4.684V6.801h2.464v-.61H4v5.332h.684zm3.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.43zm.094 5.093h.672V7.418h-.672v4.105z',\r\n          '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-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class LoggerIconComponent extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zM5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1H5z',\r\n          'M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z'\r\n        )\r\n      }\r\n    }\r\n\r\n    class ArrowRepeatIconComponent extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z',\r\n          'M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class MoreIconComponent extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class BatteryIconComponent extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M2 6h10v4H2V6z', 'M2 4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2zm10 1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h10zm4 3a1.5 1.5 0 0 1-1.5 1.5v-3A1.5 1.5 0 0 1 16 8z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class HeadsetIconComponent extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v6a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866.5h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 .866.5H11.5A1.5 1.5 0 0 0 13 12h-1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class ServerIconComponet extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm2 7a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-2.5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z',\r\n          'M2 2a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h1v2H2a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-1V7h1a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2zm13 2v1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm0 7v1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm-3-4v2H4V7h8z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class policyIconComponet extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0z',\r\n          'M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z',\r\n          'M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z'\r\n\r\n        );\r\n      }\r\n    }\r\n\r\n\r\n    class BuyIconComponet extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z'\r\n\r\n        );\r\n      }\r\n    }\r\n\r\n    class TutorialIconComponet extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm6.258-6.437a.5.5 0 0 1 .507.013l4 2.5a.5.5 0 0 1 0 .848l-4 2.5A.5.5 0 0 1 6 12V7a.5.5 0 0 1 .258-.437z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class SpeedMeterIconComponent extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z',\r\n          'M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class YouTubeIconComponent extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class Mp3IconComponent extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3zm1 0v3h6V3H5zm3 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',\r\n          'M11 11a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm-3 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z',\r\n          'M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4z',\r\n        );\r\n      }\r\n    }\r\n\r\n    class TrashIconComponent extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z',\r\n          'M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class ReceptionIconComponent extends IconComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M0 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-5zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-8zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-11z'\r\n        );\r\n      }\r\n    }\r\n\r\n\r\n\r\n    class InfoIconComponent extends SvgComponent {\r\n      constructor(styles = {}) {\r\n        super(styles,\r\n          'M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z',\r\n          'm8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class ArrowDownIconComponent extends SvgComponent {\r\n      constructor(style = {}) {\r\n        super({\r\n          fill: ICON_COLOR,\r\n          ...style,\r\n        },\r\n          'M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM8 6a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L7.5 12.293V6.5A.5.5 0 0 1 8 6z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class NetworkIconComponent extends SvgComponent {\r\n      constructor(style = {}) {\r\n        super({\r\n          fill: ICON_COLOR,\r\n          ...style,\r\n        },\r\n          'M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z',\r\n          'M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H8.5v3a1.5 1.5 0 0 1 1.5 1.5h5.5a.5.5 0 0 1 0 1H10A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5H.5a.5.5 0 0 1 0-1H6A1.5 1.5 0 0 1 7.5 10V7H2a2 2 0 0 1-2-2V4zm1 0v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1zm6 7.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class RouterIconComponent extends IconComponent {\r\n      constructor(style = {}) {\r\n        super({\r\n          fill: ICON_COLOR,\r\n          ...style,\r\n        },\r\n          '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',\r\n          'M6.94 4.44a1.5 1.5 0 0 1 2.12 0 .5.5 0 0 0 .708-.708 2.5 2.5 0 0 0-3.536 0 .5.5 0 0 0 .707.707ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5-.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Zm2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm1.5-.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Zm2 0a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Z',\r\n          'M2.974 2.342a.5.5 0 1 0-.948.316L3.806 8H1.5A1.5 1.5 0 0 0 0 9.5v2A1.5 1.5 0 0 0 1.5 13H2a.5.5 0 0 0 .5.5h2A.5.5 0 0 0 5 13h6a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5h.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 14.5 8h-2.306l1.78-5.342a.5.5 0 1 0-.948-.316L11.14 8H4.86L2.974 2.342ZM14.5 9a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h13Z',\r\n          'M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class PersonIconComponent extends SvgComponent {\r\n      constructor(style = {}) {\r\n        super({\r\n          fill: ICON_COLOR,\r\n          ...style,\r\n        },\r\n          'M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class LockIconComponent extends SvgComponent {\r\n      constructor(style = {}) {\r\n        super({\r\n          fill: ICON_COLOR,\r\n          ...style,\r\n        },\r\n          'M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class EyeIconComponent extends SvgComponent {\r\n      constructor(style = {}) {\r\n        super({\r\n          fill: ICON_COLOR,\r\n          ...style,\r\n        },\r\n          'M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z',\r\n          'M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z',\r\n        );\r\n      }\r\n    }\r\n\r\n    class ArrowDownShortIconComponent extends SvgComponent {\r\n      constructor(style = {}) {\r\n        super({\r\n          fill: ICON_COLOR,\r\n          ...style,\r\n        },\r\n          'M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class ArrowUpShortIconComponent extends SvgComponent {\r\n      constructor(style = {}) {\r\n        super({\r\n          fill: ICON_COLOR,\r\n          ...style,\r\n        },\r\n          'M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z'\r\n        );\r\n      }\r\n    }\r\n\r\n    class PowerIconComponent extends SvgComponent {\r\n      constructor(style = {}) {\r\n        super({\r\n          cursor: 'pointer',\r\n          height: '7.5rem',\r\n          width: '7.5rem',\r\n          background: VPN_BUTTON_BACKGROUND_COLOR,\r\n          borderRadius: '50%',\r\n          boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\r\n          padding: '20px',\r\n          filter: 'drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1))',\r\n          fill: ICON_COLOR,\r\n          ...style,\r\n        },\r\n          'M7.5 1v7h1V1h-1z',\r\n          'M3 8.812a4.999 4.999 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812z',\r\n        );\r\n\r\n      }\r\n    }\r\n\r\n    class DialogComponent extends StyledComponent {\r\n      constructor(styles = {}) {\r\n        super(document.createElement('div'), {\r\n          position: 'absolute',\r\n          top: '0',\r\n          bottom: '0',\r\n          left: '0',\r\n          right: '0',\r\n          height: '100vh',\r\n          background: 'rgba(0, 0, 0, 0.5)',\r\n          backdropFilter: 'blur(5px)',\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          visibility: 'hidden',\r\n          opacity: '0',\r\n          ...styles,\r\n        });\r\n\r\n        this.element.addEventListener('click', (event) => {\r\n          if (event.target === this.element) {\r\n            this.close();\r\n          }\r\n        });\r\n\r\n        this.onCloseEvent = null\r\n      }\r\n\r\n      setOnCloseEventListener(callback) {\r\n        this.onCloseEvent = callback\r\n      }\r\n\r\n      setContent(content) {\r\n        if (!(content instanceof DialogContentComponent)) {\r\n          throw new TypeError('Content must be a DialogContentComponent');\r\n        }\r\n\r\n        if (!this.contains(content)) {\r\n          this.append(content);\r\n        }\r\n      }\r\n\r\n      show() {\r\n        this.setStyles({\r\n          opacity: '1',\r\n          visibility: 'visible',\r\n          display: 'flex',\r\n          animation: 'fade-in 0.3s forwards',\r\n          pointerEvents: 'auto',\r\n        })\r\n\r\n        if (!document.body.contains(this.element)) {\r\n          document.body.append(this.element);\r\n        }\r\n      }\r\n\r\n      close() {\r\n        this.setStyles({\r\n          opacity: '0',\r\n          animation: 'fade-out 0.3s forwards',\r\n        })\r\n\r\n        setTimeout(() => {\r\n          this.setStyles({\r\n            display: 'none',\r\n            pointerEvents: 'none',\r\n          })\r\n\r\n          if (this.onCloseEvent != null) {\r\n            this.onCloseEvent()\r\n          }\r\n        }, 300);\r\n      }\r\n\r\n      remove() {\r\n        if (document.body.contains(this.element)) {\r\n          this.element.remove();\r\n        }\r\n      }\r\n    }\r\n\r\n    class DialogContentComponent extends StyledComponent {\r\n      constructor(styles = {}) {\r\n        super(document.createElement('div'), {\r\n          display: 'flex',\r\n          flexDirection: 'column',\r\n          justifyContent: 'center',\r\n          alignItems: 'center',\r\n          background: DIALOG_CONTENT_BACKGROUND_COLOR,\r\n          borderRadius: '5px',\r\n          maxWidth: '30rem',\r\n          width: '85%',\r\n          ...styles,\r\n        });\r\n\r\n        this.lastHeader = null;\r\n        this.lastBody = null;\r\n        this.lastFooter = null;\r\n      }\r\n\r\n      setHeader(component) {\r\n        this?.lastHeader?.remove()\r\n        this.lastHeader = component\r\n        this.append(component);\r\n      }\r\n\r\n      setBody(component) {\r\n        this?.lastBody?.remove()\r\n        this.lastBody = component\r\n        this.append(component);\r\n      }\r\n\r\n      setFooter(component) {\r\n        this?.lastFooter?.remove()\r\n        this.lastFooter = component\r\n        this.append(component);\r\n      }\r\n    }\r\n\r\n    class DialogHeaderComponent extends StyledComponent {\r\n      constructor(styles = {}) {\r\n        super(document.createElement('div'), {\r\n          display: 'flex',\r\n          justifyContent: 'space-between',\r\n          alignItems: 'center',\r\n          width: '100%',\r\n          padding: '5px',\r\n          ...styles,\r\n        });\r\n\r\n        this.title = new StyledComponent(document.createElement('span'), {\r\n          fontSize: '16px',\r\n          color: DIALOG_HEADER_TITLE_COLOR,\r\n          fontFamily: 'Ubuntu',\r\n          fontWeight: 'bold',\r\n          padding: '5px',\r\n        });\r\n\r\n        this.closeButton = new SvgComponent({\r\n          cursor: 'pointer',\r\n          height: '35px',\r\n          width: '35px',\r\n          fill: DIALOG_HEADER_CLOSE_BUTTON_COLOR,\r\n        },\r\n          'M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'\r\n        );\r\n\r\n        this.initialize();\r\n      }\r\n\r\n      setTitleText(title) {\r\n        this.title.element.innerText = title;\r\n      }\r\n\r\n      setCloseButtonClickListener(callback) {\r\n        this.closeButton.addEventListener('click', callback);\r\n      }\r\n\r\n      initialize() {\r\n        this.append(this.title);\r\n        this.append(this.closeButton);\r\n      }\r\n    }\r\n\r\n    class DialogBodyComponent extends StyledComponent {\r\n      constructor(styles = {}) {\r\n        super(document.createElement('div'), {\r\n          display: 'flex',\r\n          width: '100%',\r\n          padding: '5px',\r\n          ...styles,\r\n        });\r\n      }\r\n    }\r\n\r\n    class DialogFooterComponent extends StyledComponent {\r\n      constructor(styles = {}) {\r\n        super(document.createElement('div'), {\r\n          display: 'flex',\r\n          justifyContent: 'space-between',\r\n          gap: '5px',\r\n          alignItems: 'center',\r\n          width: '100%',\r\n          padding: '5px',\r\n          ...styles,\r\n        });\r\n      }\r\n\r\n      addButton(button) {\r\n        if (!(button instanceof DialogFooterButtonComponent)) {\r\n          throw new TypeError('Button must be a DialogFooterButtonComponent instance');\r\n        }\r\n\r\n        this.append(button);\r\n        return this;\r\n      }\r\n    }\r\n\r\n    class DialogFooterButtonComponent extends StyledComponent {\r\n      constructor(text, onclick, styles = {}) {\r\n        super(document.createElement('button'), {\r\n          fontSize: '14px',\r\n          fontWeight: 'bold',\r\n          color: DIALOG_FOOTER_BUTTON_TEXT_COLOR,\r\n          background: DIALOG_FOOTER_BUTTON_COLOR,\r\n          border: 'none',\r\n          borderRadius: '3px',\r\n          padding: '10px',\r\n          width: '100%',\r\n          cursor: 'pointer',\r\n          boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\r\n          ...styles,\r\n        });\r\n\r\n\r\n        this.setText(text)\r\n        this.setClickListener(onclick);\r\n      }\r\n\r\n      setText(text) {\r\n        this.element.innerText = text;\r\n      }\r\n\r\n      setClickListener(callback) {\r\n        this.addEventListener('click', callback);\r\n      }\r\n    }\r\n\r\n    class DialogBuilder {\r\n      constructor(styles = {}) {\r\n        this.dialog = new DialogComponent(styles);\r\n        this.header = new DialogHeaderComponent();\r\n        this.content = new DialogContentComponent();\r\n\r\n        this.footer = new DialogFooterComponent();\r\n        this.footerButtons = [];\r\n\r\n        this.content.setHeader(this.header);\r\n        this.header.setCloseButtonClickListener(() => this.dialog.close());\r\n\r\n      }\r\n\r\n      static create(styles = {}) {\r\n        return new DialogBuilder(styles);\r\n      }\r\n\r\n      setTitle(title) {\r\n        this.header.setTitleText(title);\r\n        return this;\r\n      }\r\n\r\n      setAutoRemove(autoRemove) {\r\n        this.dialog.setOnCloseEventListener(() => {\r\n          if (autoRemove) {\r\n            this.dialog.remove();\r\n          }\r\n        });\r\n        return this;\r\n      }\r\n\r\n      setBody(bodyComponent) {\r\n        this.content.setBody(bodyComponent);\r\n        return this;\r\n      }\r\n\r\n      addFooterButton(text, callback) {\r\n        const button = new DialogFooterButtonComponent(text, callback);\r\n        this.footerButtons.push(button);\r\n        return this;\r\n      }\r\n\r\n      show() {\r\n        this.dialog.setContent(this.content);\r\n\r\n        if (this.footerButtons.length > 0) {\r\n          this.content.setFooter(this.footer);\r\n          this.footerButtons.forEach((button) => {\r\n            this.footer.addButton(button);\r\n          });\r\n        }\r\n\r\n        this.dialog.show();\r\n        return this;\r\n      }\r\n\r\n      close() {\r\n        this.dialog.close();\r\n      }\r\n    }\r\n\r\n    class ConfigComponent extends StyledComponent {\r\n      constructor(styles = {}) {\r\n        super(document.createElement('div'), {\r\n          display: 'flex',\r\n          gap: '5px',\r\n          alignItems: 'center',\r\n          textAlign: 'left',\r\n          marginTop: '5px',\r\n          padding: '5px',\r\n          background: '#0000009C',\r\n          width: '100%',\r\n          borderRadius: '15px',\r\n          filter: 'drop-shadow rgba(0, 0, 0, 0.1)',\r\n          ...styles\r\n        });\r\n\r\n        this.image = document.createElement('img');\r\n        this.name = document.createElement('span');\r\n        this.description = document.createElement('span');\r\n        this.mode = document.createElement('span');\r\n\r\n        this.initialize();\r\n      }\r\n\r\n      setImage(url) {\r\n        this.image.src = url;\r\n      }\r\n\r\n      setName(name) {\r\n        this.name.innerHTML = name;\r\n      }\r\n\r\n      setDescription(description) {\r\n        this.description.innerHTML = description;\r\n      }\r\n\r\n      setMode(mode) {\r\n        this.mode.innerHTML = mode;\r\n      }\r\n\r\n      initialize() {\r\n        this.setImageStyles();\r\n        this.setNameStyles();\r\n        this.setDescriptionStyles();\r\n        this.setModeStyles();\r\n        const startArea = this.createStartArea();\r\n        const endArea = this.createEndArea();\r\n        this.appendElements(startArea, endArea);\r\n      }\r\n\r\n      setImageStyles() {\r\n        this.image.style.width = '40px';\r\n        this.image.style.height = '40px';\r\n      }\r\n\r\n      setNameStyles() {\r\n        this.name.style.fontSize = '12px';\r\n        this.name.style.fontFamily = 'Ubuntu', 'Ubuntu;';\r\n        this.name.style.color = '#666666D9';\r\n        this.name.style.fontWeight = 'bold';\r\n      }\r\n\r\n      setDescriptionStyles() {\r\n        this.description.style.fontSize = '12px';\r\n        this.description.style.fontFamily = 'Ubuntu', 'Ubuntu;';\r\n        this.description.style.color = '#666666D9';\r\n        this.description.style.fontWeight = 'bold';\r\n\r\n      }\r\n\r\n      setModeStyles() {\r\n        this.mode.style.fontSize = '12px';\r\n        this.mode.style.fontFamily = 'Ubuntu', 'Ubuntu;';\r\n        this.mode.style.color = '#666666D9'\r\n        this.mode.style.fontWeight = 'bold';\r\n        this.mode.style.whiteSpace = 'nowrap';\r\n      }\r\n\r\n      createStartArea() {\r\n        const startArea = document.createElement('div');\r\n        startArea.style.display = 'flex';\r\n        startArea.style.width = '100%';\r\n        startArea.style.gap = '10px';\r\n        startArea.style.flexDirection = 'column';\r\n        startArea.appendChild(this.name);\r\n        startArea.appendChild(this.description);\r\n        return startArea;\r\n      }\r\n\r\n      createEndArea() {\r\n        const endArea = document.createElement('div');\r\n        endArea.style.display = 'flex';\r\n        endArea.style.flexDirection = 'column';\r\n        endArea.style.alignItems = 'end';\r\n        endArea.style.alignSelf = 'end';\r\n        endArea.style.width = '50%';\r\n        endArea.appendChild(this.mode);\r\n        return endArea;\r\n      }\r\n\r\n      appendElements(startArea, endArea) {\r\n        this.appendChild(this.image);\r\n        this.appendChild(startArea);\r\n        this.appendChild(endArea);\r\n      }\r\n    }\r\n\r\n    class CategoryComponent extends StyledComponent {\r\n      constructor(styles = {}, items = []) {\r\n        super(document.createElement('div'), {\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n          alignItems: 'center',\r\n          flexDirection: 'column',\r\n          textAlign: 'center',\r\n          padding: '1px',\r\n          width: '100%',\r\n          ...styles\r\n        });\r\n\r\n        this.items = items;\r\n        this.name = document.createElement('span');\r\n        this.setNameStyles();\r\n\r\n        this.initialize();\r\n        this.setItems(items);\r\n      }\r\n\r\n      setNameStyles() {\r\n        this.name.style.width = '100%';\r\n\r\n        this.name.style.fontSize = '16px'\r\n        this.name.style.fontFamily = 'Ubuntu';\r\n        this.name.style.color = '#666666D9';\r\n        this.name.style.background = '#0000009C';\r\n        this.name.style.padding = '5px';\r\n        this.name.style.fontWeight = 'bold';\r\n        this.name.style.filter = 'drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1))';\r\n      }\r\n\r\n      setName(value) {\r\n        this.name.innerHTML = value;\r\n      }\r\n\r\n      setItems(items) {\r\n        items.forEach(item => this.append(item));\r\n      }\r\n\r\n      initialize() {\r\n        this.appendChild(this.name);\r\n      }\r\n    }\r\n\r\n    class ConfigBodyComponent extends DialogBodyComponent {\r\n      constructor(items) {\r\n        super({\r\n          flexDirection: 'column',\r\n          gap: '15px',\r\n          maxHeight: '80vh',\r\n          overflowY: 'auto'\r\n        });\r\n        items.forEach(item => this.append(item));\r\n      }\r\n    }\r\n\r\n    class LoggerItemComponent extends StyledComponent {\r\n      constructor(styles = {}, message) {\r\n        super(document.createElement('span'), {\r\n          fontFamily: 'monospace',\r\n          width: '100%',\r\n          fontSize: '15px',\r\n          color: LOGGER_TEXT_COLOR,\r\n          ...styles,\r\n        });\r\n\r\n        this.element.innerHTML = message\r\n      }\r\n    }\r\n\r\n    class LoggerBodyComponent extends DialogBodyComponent {\r\n      constructor(styles = {}, items = []) {\r\n        super({\r\n          flexDirection: 'column',\r\n          maxHeight: '65vh',\r\n          overflowY: 'auto',\r\n          width: '100%',\r\n          ...styles,\r\n        });\r\n\r\n        this.setItems(items);\r\n      }\r\n\r\n      setItems(items) {\r\n        this.element.innerHTML = '';\r\n        items.forEach(item => this.append(item));\r\n        this.scrollDown();\r\n      }\r\n\r\n      scrollDown() {\r\n        this.element.scrollTop = this.element.scrollHeight;\r\n      }\r\n    }\r\n\r\n    class CheckUserBodyComponent extends DialogBodyComponent {\r\n      constructor(data = {}) {\r\n        super()\r\n        const component = new StyledComponent(document.createElement('div'), {\r\n          display: 'flex',\r\n          flexDirection: 'column',\r\n          color: TEXT_COLOR,\r\n          fontFamily: 'Ubuntu',\r\n          gap: '2px',\r\n          textAlign: 'center',\r\n          width: '100%',\r\n        });\r\n\r\n        component.element.innerHTML = `\r\n                    <span style=\"color: ${CHECKUSER_TEXT_COLOR}\">👤Nome de usuario: ${data.username}</span>\r\n                    <span style=\"color: ${CHECKUSER_TEXT_COLOR}\">📆Expira em: ${data.expiration_date}</span>\r\n                    <span style=\"color: ${CHECKUSER_TEXT_COLOR}\">📆Dias restantes: ${data.expiration_days}</span>\r\n                    <span style=\"color: ${CHECKUSER_TEXT_COLOR}\">🚫Conexoes: ${data.count_connections}|${data.limit_connections}</span>\r\n                `\r\n\r\n        this.append(component)\r\n      }\r\n    }\r\n\r\n    class VpnStateComponent extends StyledComponent {\r\n      constructor(style = {}) {\r\n        super(document.createElement('span'), {\r\n          fontSize: '1.4rem',\r\n          fontFamily: 'Ubuntu',\r\n          fontWeight: 'bold',\r\n          color: '#FFF',\r\n          marginTop: '2rem',\r\n          ...style,\r\n        })\r\n\r\n        this.setState('DISCONNECTED')\r\n      }\r\n\r\n      setState(state) {\r\n        this.element.innerHTML = state\r\n      }\r\n    }\r\n\r\n    class LocalIPComponent extends StyledComponent {\r\n      constructor(styles = {}) {\r\n        super(document.createElement('span'), {\r\n          position: 'absolute',\r\n          fontSize: '1rem',\r\n          fontFamily: 'Ubuntu',\r\n          fontWeight: 'bold',\r\n          whiteSpace: 'nowrap',\r\n          color: TEXT_COLOR,\r\n          top: `${window?.DtGetStatusBarHeight?.execute() ?? '30'}px`,\r\n          left: '10px',\r\n          ...styles,\r\n        })\r\n\r\n        this.setIP(window?.DtGetLocalIP?.execute() ?? '127.0.0.1')\r\n        setInterval(() => {\r\n          this.setIP(window?.DtGetLocalIP?.execute() ?? '127.0.0.1')\r\n        }, 1000)\r\n      }\r\n\r\n      setIP(ip) {\r\n        this.element.innerHTML = ip\r\n      }\r\n    }\r\n\r\n    class NetworkStatsComponent extends StyledComponent {\r\n      constructor(styles = {}) {\r\n        super(document.createElement('div'), {\r\n          display: 'flex',\r\n          position: 'absolute',\r\n          gap: '5px',\r\n          top: `${(window?.DtGetStatusBarHeight?.execute() ?? 30) + 20}px`,\r\n          left: '-5px',\r\n          ...styles,\r\n        });\r\n\r\n        this.meterDownContainer = this.createMeterContainer();\r\n        this.meterDownText = this.createMeterText();\r\n        this.arrowDownShortIcon = new ArrowDownShortIconComponent();\r\n        this.meterDownContainer.append(this.arrowDownShortIcon);\r\n        this.meterDownContainer.append(this.meterDownText);\r\n\r\n        this.meterUpContainer = this.createMeterContainer();\r\n        this.meterUpText = this.createMeterText();\r\n        this.arrowUpShortIcon = new ArrowUpShortIconComponent();\r\n        this.meterUpContainer.append(this.arrowUpShortIcon);\r\n        this.meterUpContainer.append(this.meterUpText);\r\n\r\n        this.append(this.meterDownContainer);\r\n        this.append(this.meterUpContainer);\r\n\r\n        this.getNetworkDownloadFn = () => window?.DtGetNetworkDownloadBytes?.execute() ?? 0;\r\n        this.getNetworkUploadFn = () => window?.DtGetNetworkUploadBytes?.execute() ?? 0;\r\n\r\n        this.currentNetworkDownload = parseFloat(localStorage.getItem('networkDownload') ?? this.getNetworkDownloadFn());\r\n        this.currentNetworkUpload = parseFloat(localStorage.getItem('networkUpload') ?? this.getNetworkUploadFn());\r\n\r\n        localStorage.setItem('networkDownload', this.currentNetworkDownload);\r\n        localStorage.setItem('networkUpload', this.currentNetworkUpload);\r\n\r\n        this.showMeter();\r\n        setInterval(() => this.showMeter(), 1000);\r\n      }\r\n\r\n      createMeterContainer() {\r\n        return new StyledComponent(document.createElement('div'), {\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n        });\r\n      }\r\n\r\n      createMeterText() {\r\n        return new StyledComponent(document.createElement('span'), {\r\n          fontSize: '1rem',\r\n          marginLeft: '-5px',\r\n          fontFamily: 'Ubuntu',\r\n          fontWeight: 'bold',\r\n          whiteSpace: 'nowrap',\r\n          color: '#666666D9',\r\n        });\r\n      }\r\n\r\n      formatBytes(bytes) {\r\n        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\r\n        if (bytes === 0) return '0 B';\r\n        const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));\r\n        return (bytes / Math.pow(1024, i)).toPrecision(3) + ' ' + sizes[i];\r\n      }\r\n\r\n      showMeter() {\r\n        const newNetworkDownload = this.getNetworkDownloadFn();\r\n        const newNetworkUpload = this.getNetworkUploadFn();\r\n\r\n        this.meterDownText.element.innerHTML = this.formatBytes(newNetworkDownload - this.currentNetworkDownload);\r\n        this.meterUpText.element.innerHTML = this.formatBytes(newNetworkUpload - this.currentNetworkUpload);\r\n      }\r\n    }\r\n\r\n\r\n    class IframeBodyComponent extends DialogBodyComponent {\r\n      constructor(styles = {}, url = null) {\r\n        super({\r\n          minHeight: '600px',\r\n          ...styles\r\n        })\r\n\r\n        this.iframeElement = new StyledComponent(document.createElement('iframe'), {\r\n          width: '100%',\r\n          border: 'none',\r\n          borderRadius: '5px',\r\n          display: 'none',\r\n        })\r\n\r\n        this.spinner = new Spinner()\r\n\r\n        this.iframeElement.addEventListener('load', () => {\r\n          this.iframeElement.setStyles({\r\n            display: 'block'\r\n          })\r\n          this.spinner.setStyles({\r\n            display: 'none'\r\n          })\r\n        })\r\n\r\n        this.setUrl(url)\r\n        this.applyOptions()\r\n        this.append(this.iframeElement)\r\n        this.append(this.spinner)\r\n\r\n      }\r\n\r\n      setUrl(url) {\r\n        this.iframeElement.element.src = url\r\n      }\r\n\r\n      setOnLoadListener(callback) {\r\n        this.iframeElement.addEventListener('load', callback)\r\n      }\r\n\r\n      applyOptions() {\r\n        this.iframeElement.element.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share')\r\n        this.iframeElement.element.setAttribute('allowfullscreen', '')\r\n        this.iframeElement.element.setAttribute('frameborder', '0')\r\n      }\r\n    }\r\n\r\n    class CleanAppMessageBodyComponent extends DialogBodyComponent {\r\n      constructor(styles = {}, url = null) {\r\n        super({\r\n          height: 'auto',\r\n          ...styles\r\n        })\r\n\r\n        this.spanComponent = new StyledComponent(document.createElement('span'), {\r\n          fontSize: '16px',\r\n          fontFamily: 'Ubuntu',\r\n          fontWeight: 'bold',\r\n          color: TEXT_COLOR,\r\n        })\r\n\r\n        this.spanComponent.element.innerHTML = 'Você gostaria de limpar os dados do aplicativo? Por favor, esteja ciente de que essa ação resultará na remoção permanente de todas as informações armazenadas. Você tem certeza de que deseja prosseguir com essa operação?'\r\n\r\n        this.append(this.spanComponent)\r\n      }\r\n    }\r\n\r\n    class StyledButtonComponent extends StyledComponent {\r\n      constructor(text, icon, onclick, styles = {}) {\r\n        super(document.createElement('button'), {\r\n          width: '100%',\r\n          borderRadius: '5px',\r\n          padding: '10px',\r\n          border: 'none',\r\n          color: TEXT_COLOR,\r\n          background: BUTTON_BACKGROUND_COLOR,\r\n          boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\r\n          cursor: 'pointer',\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          filter: 'drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1))',\r\n          ...styles\r\n        });\r\n\r\n        this.textComponent = new StyledComponent(document.createElement('span'), {\r\n          fontSize: '16px',\r\n          fontWeight: 'bold',\r\n        });\r\n\r\n        this.textComponent.element.innerHTML = text;\r\n        this.element.addEventListener('click', onclick)\r\n\r\n        this.append(icon ?? '')\r\n        this.append(this.textComponent);\r\n      }\r\n    }\r\n\r\n    class ApnSettingStyledButtonComponent extends StyledButtonComponent {\r\n      constructor() {\r\n        super(\r\n          'APN',\r\n          new ReceptionIconComponent(),\r\n          () => window?.DtStartApnActivity?.execute()\r\n        )\r\n      }\r\n    }\r\n\r\n\r\n    class BatteryStyledButtonComponent extends StyledButtonComponent {\r\n      constructor() {\r\n        super(\r\n          'BATERIA',\r\n          new BatteryIconComponent(),\r\n          () => window?.DtIgnoreBatteryOptimizations?.execute(),\r\n        )\r\n      }\r\n    }\r\n\r\n    class SupportStyledButtonComponent extends StyledButtonComponent {\r\n      constructor() {\r\n        super(\r\n          'SUPORTE',\r\n          new HeadsetIconComponent(),\r\n          () => window?.DtStartWebViewActivity?.execute(LINK_SUPPORT)\r\n        );\r\n      }\r\n    }\r\n\r\n    class SpeedTestStyledButtonComponent extends StyledButtonComponent {\r\n      constructor() {\r\n        super(\r\n          'SPEEDTEST',\r\n          new SpeedMeterIconComponent(),\r\n          () => {\r\n            DialogBuilder.create()\r\n              .setTitle('SPEEDTEST')\r\n              .setAutoRemove(true)\r\n              .setBody(new IframeBodyComponent({}, URL_SPEEDTEST))\r\n              .show()\r\n\r\n\r\n          })\r\n\r\n      }\r\n\r\n    }\r\n\r\n    class ButtonServersComponent extends StyledButtonComponent {\r\n      constructor() {\r\n        super(\r\n          'SERVIDORES',\r\n          new ServerIconComponet(),\r\n          () => window?.DtStartWebViewActivity?.execute(SERVER_URL)\r\n        );\r\n      }\r\n    }\r\n\r\n    class PolicyServersComponent extends StyledButtonComponent {\r\n      constructor() {\r\n        super(\r\n          'PRIVACIDADE',\r\n          new policyIconComponet(),\r\n          () => window?.DtStartWebViewActivity?.execute(POLITC_URL)\r\n        );\r\n      }\r\n    }\r\n\r\n    class TermosComponent extends StyledButtonComponent {\r\n      constructor() {\r\n        super(\r\n          'TERMOS',\r\n          new policyIconComponet(),\r\n          () => window?.DtStartWebViewActivity?.execute(TERMS_URL)\r\n        );\r\n      }\r\n    }\r\n\r\n    class BuyComponent extends StyledButtonComponent {\r\n      constructor() {\r\n        super(\r\n          'COMPRAR LOGIN',\r\n          new BuyIconComponet(),\r\n          () => window?.DtStartWebViewActivity?.execute(PREMIUM_URL)\r\n        );\r\n      }\r\n    }\r\n\r\n    class ButtonTutorialComponent extends StyledButtonComponent {\r\n      constructor() {\r\n        super(\r\n          'TUTORIAIS',\r\n          new TutorialIconComponet(),\r\n          () => window?.DtStartWebViewActivity?.execute(TUTO_URL)\r\n        );\r\n      }\r\n    }\r\n\r\n    class YouTubeStyledButtonComponent extends StyledButtonComponent {\r\n      static dialog = DialogBuilder.create({\r\n        zIndex: 1\r\n      })\r\n        .setTitle('YOUTUBE')\r\n        .setBody(new IframeBodyComponent({}, URL_YOUTUBE))\r\n\r\n      constructor() {\r\n        super(\r\n          'YOUTUBE',\r\n          new YouTubeIconComponent(),\r\n          () => this.dialog.show(),\r\n        )\r\n      }\r\n\r\n      get dialog() {\r\n        return YouTubeStyledButtonComponent.dialog;\r\n      }\r\n    }\r\n\r\n    class Mp3StyledButtonComponent extends StyledButtonComponent {\r\n      static dialog = DialogBuilder.create({\r\n        zIndex: 1\r\n      })\r\n        .setTitle('MP3')\r\n        .setBody(new IframeBodyComponent({}, URL_MP3))\r\n\r\n      constructor() {\r\n        super(\r\n          'MP3',\r\n          new Mp3IconComponent(),\r\n          () => this.dialog.show(),\r\n        )\r\n      }\r\n\r\n      get dialog() {\r\n        return Mp3StyledButtonComponent.dialog;\r\n      }\r\n    }\r\n\r\n    class CleanAppStyledButtonComponent extends StyledButtonComponent {\r\n      constructor() {\r\n        super(\r\n          'LIMPAR',\r\n          new TrashIconComponent(),\r\n          () => {\r\n            const dialog = DialogBuilder.create()\r\n              .setTitle('LIMPAR DADOS')\r\n              .setAutoRemove(true)\r\n              .setBody(new CleanAppMessageBodyComponent())\r\n              .addFooterButton('NÃO', () => dialog.close())\r\n              .addFooterButton('SIM', () => window?.DtCleanApp?.execute())\r\n              .show();\r\n          })\r\n      }\r\n    }\r\n\r\n    class HotSpotStyledButtonComponent extends StyledButtonComponent {\r\n      constructor() {\r\n        super(\r\n          'HOTSPOT',\r\n          new RouterIconComponent(),\r\n          () => this.toggleHotSpot())\r\n\r\n      }\r\n\r\n      startHotSpot() {\r\n        window?.DtStartHotSpotService?.execute();\r\n        Toast.success('HotSpot iniciado com sucesso!')\r\n      }\r\n\r\n      stopHotSpot() {\r\n        window?.DtStopHotSpotService?.execute();\r\n        Toast.success('HotSpot parado com sucesso!')\r\n      }\r\n\r\n      toggleHotSpot() {\r\n        const hotSpotStatus = window?.DtGetStatusHotSpotService?.execute() ?? 'STOPPED';\r\n        hotSpotStatus == 'RUNNING' ? this.stopHotSpot() : this.startHotSpot();\r\n      }\r\n    }\r\n\r\n    class MenuDialogBodyComponent extends DialogBodyComponent {\r\n      constructor() {\r\n        super({\r\n          display: 'flex',\r\n          flexDirection: 'column',\r\n          gap: '5px'\r\n        })\r\n      }\r\n      addRowButtons(...buttons) {\r\n        const element = new StyledComponent(document.createElement('div'), {\r\n          display: 'flex',\r\n          gap: '5px',\r\n          width: '100%'\r\n        });\r\n        buttons.forEach(button => element.append(button));\r\n        this.append(element);\r\n        return this;\r\n      }\r\n    }\r\n\r\n    class ConfigInputComponent extends InputGroupComponent {\r\n      constructor() {\r\n        super({\r\n          cursor: 'pointer',\r\n          background: INPUT_COLOR\r\n        });\r\n\r\n        this.configInput = new InputText({\r\n          cursor: 'pointer',\r\n          fontFamily: 'Ubuntu'\r\n        });\r\n        this.configInput.setEnabled(false);\r\n        this.configInput.setPlaceholder('SELECIONE UM SERVIDOR');\r\n        this.configInput.setValue(JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{}').name ?? '');\r\n\r\n        this.append(new NetworkIconComponent(), this.configInput, new ArrowDownIconComponent());\r\n        this.configure()\r\n\r\n        this.addEventListener('click', () => {\r\n          const mock = '[{\"sorter\":6,\"color\":\"#6D08041C\",\"name\":\"CONFIG\",\"id\":1393,\"items\":[{\"mode\":\"V2RAY - VLESS\",\"sorter\":4,\"tlsVersion\":\"TLSv1.2\",\"name\":\"CONFIG 01\",\"icon\":\"https://cdn-icons-png.flaticon.com/512/8187/8187143.png\",\"id\":11803,\"status\":\"ACTIVE\"},{\"mode\":\"SSH_DIRECT\",\"sorter\":2,\"tlsVersion\":\"TLSv1.2\",\"name\":\"CONFIG 02\",\"icon\":\"https://cdn-icons-png.flaticon.com/512/8187/8187143.png\",\"id\":28627,\"status\":\"ACTIVE\"},{\"mode\":\"OVPN_PROXY\",\"sorter\":23,\"tlsVersion\":\"TLSv1.2\",\"name\":\"CONFIG 03\",\"icon\":\"https://cdn-icons-png.flaticon.com/512/8187/8187143.png\",\"id\":30001,\"status\":\"ACTIVE\"}]},{\"sorter\":2,\"color\":\"#6D08041C\",\"name\":\"CONFIG 2\",\"id\":1846,\"items\":[{\"mode\":\"SSH_PROXY\",\"sorter\":1,\"tlsVersion\":\"TLSv1.2\",\"name\":\"CONFIG 01\",\"icon\":\"https://cdn-icons-png.flaticon.com/512/8187/8187143.png\",\"id\":26295,\"status\":\"ACTIVE\"}]},{\"sorter\":4,\"color\":\"#80000000\",\"name\":\"CONFIG 3\",\"id\":3310,\"items\":[{\"mode\":\"SSH_PROXY\",\"sorter\":1,\"tlsVersion\":\"TLSv1.2\",\"name\":\"CONFIG. TEST\",\"icon\":\"https://cdn-icons-png.flaticon.com/512/8187/8187143.png\",\"id\":29997,\"status\":\"ACTIVE\"},{\"mode\":\"OVPN_PROXY\",\"sorter\":1,\"tlsVersion\":\"TLSv1.2\",\"name\":\"CONFIG. TEST 2\",\"icon\":\"https://cdn-icons-png.flaticon.com/512/8187/8187143.png\",\"id\":29998,\"status\":\"ACTIVE\"}]}]';\r\n          const items = JSON.parse(window?.DtGetConfigs?.execute() || mock);\r\n          items.sort((a, b) => a.sorter - b.sorter);\r\n          items.forEach((item) => item.items.sort((a, b) => a.sorter - b.sorter));\r\n\r\n          const dialog = DialogBuilder.create()\r\n            .setTitle('CONFIGURAÇÕES')\r\n            .setAutoRemove(true)\r\n            .setBody(\r\n              new ConfigBodyComponent(\r\n                items.map((item) => {\r\n                  const category = new CategoryComponent();\r\n                  category.setName(item.name);\r\n                  category.setItems(\r\n                    item.items.map((item) => {\r\n                      const config = new ConfigComponent();\r\n                      config.setName(item.name);\r\n                      config.setDescription(item.description ?? '');\r\n                      config.setMode(item.mode);\r\n                      config.setImage(item.icon);\r\n                      config.addEventListener('click', () => {\r\n                        window?.DtSetConfig?.execute(item.id);\r\n                        dialog.close();\r\n                      });\r\n                      return config;\r\n                    })\r\n                  );\r\n                  return category;\r\n                })\r\n              )\r\n            )\r\n            .show();\r\n        });\r\n\r\n        const originalClickListener = window.dtConfigClickListener;\r\n        window.dtConfigClickListener = () => {\r\n          if (originalClickListener) {\r\n            originalClickListener();\r\n          }\r\n          this.configure();\r\n        };\r\n        this.configure();\r\n      }\r\n\r\n      configure() {\r\n        const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{\"auth\":{\"password\": \"\"}, \"mode\": \"v2ra\"}')\r\n        this.configInput.setValue(config.name ?? '')\r\n      }\r\n    }\r\n\r\n    class UserPassInputComponent extends StyledComponent {\r\n      constructor() {\r\n        super(document.createElement('div'), {\r\n          display: 'flex',\r\n          marginTop: '5px',\r\n          width: '100%',\r\n          display: 'flex',\r\n          gap: '5px',\r\n        });\r\n\r\n        this.usernameGroupComponent = new InputGroupComponent({\r\n          background: INPUT_COLOR\r\n        });\r\n        const personIconComponent = new PersonIconComponent();\r\n        this.usernameInput = new InputText();\r\n        this.usernameInput.setPlaceholder('Usuário');\r\n        this.usernameInput.setValue(window?.DtUsername?.get() ?? '');\r\n        this.usernameInput.setOnInputListener(() => window?.DtUsername?.set(this.usernameInput.value));\r\n        this.usernameGroupComponent.append(personIconComponent, this.usernameInput);\r\n        this.append(this.usernameGroupComponent);\r\n\r\n        this.passwordGroupComponent = new InputGroupComponent({\r\n          background: INPUT_COLOR\r\n        });\r\n        this.passwordInput = new InputPassword();\r\n        const eyeIconComponent = new EyeIconComponent();\r\n        eyeIconComponent.addEventListener('click', () => this.passwordInput.setShowing(!this.passwordInput.isShowing));\r\n        this.passwordInput.setPlaceholder('Senha');\r\n        this.passwordInput.setValue(window?.DtPassword?.get() ?? '');\r\n        this.passwordInput.setOnInputListener(() => {\r\n          window?.DtPassword?.set(this.passwordInput.value)\r\n        });\r\n        this.passwordGroupComponent.append(new LockIconComponent(), this.passwordInput, eyeIconComponent);\r\n        this.append(this.passwordGroupComponent);\r\n\r\n        this.v2rayUuidGroupComponent = new InputGroupComponent({\r\n          background: INPUT_COLOR\r\n        });\r\n        this.v2rayUuidInput = new InputPassword();\r\n        this.v2rayUuidInput.setPlaceholder('V2Ray UUID');\r\n        this.v2rayUuidInput.setValue(window?.DtUuid?.get() ?? '');\r\n        this.v2rayUuidInput.setOnInputListener(() => window?.DtUuid?.set(this.v2rayUuidInput.value));\r\n        this.v2rayUuidGroupComponent.append(new LockIconComponent(), this.v2rayUuidInput);\r\n\r\n        this.append(this.v2rayUuidGroupComponent);\r\n\r\n        const originalClickListener = window.dtConfigClickListener;\r\n        window.dtConfigClickListener = () => {\r\n          if (originalClickListener) {\r\n            originalClickListener();\r\n          }\r\n          this.configure();\r\n        };\r\n\r\n        this.configure();\r\n      }\r\n\r\n      configure() {\r\n        const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{\"auth\":{\"password\": \"\"}, \"mode\": \"v2ra\"}')\r\n        const isV2ray = config?.mode?.toLowerCase()?.startsWith('v2ray');\r\n\r\n        this.usernameGroupComponent.setStyles({\r\n          display: isV2ray || config?.auth?.username ? 'none' : 'flex',\r\n        })\r\n\r\n        this.passwordGroupComponent.setStyles({\r\n          display: isV2ray || config?.auth?.password ? 'none' : 'flex',\r\n        })\r\n\r\n        this.v2rayUuidGroupComponent.setStyles({\r\n          display: !isV2ray || config?.auth?.v2ray_uuid ? 'none' : 'flex',\r\n        })\r\n\r\n        const isRunning = (window?.DtGetVpnState?.execute() ?? 'DISCONNECTED') != 'DISCONNECTED';\r\n        this.usernameInput.setEnabled(!isRunning)\r\n        this.passwordInput.setEnabled(!isRunning)\r\n        this.v2rayUuidInput.setEnabled(!isRunning)\r\n      }\r\n    }\r\n\r\n    class ButtonAndStateContainerComponent extends StyledComponent {\r\n      constructor(styles = {}) {\r\n        super(document.createElement('div'), {\r\n          display: 'flex',\r\n          flexDirection: 'column',\r\n          alignItems: 'center',\r\n          position: 'absolute',\r\n          bottom: '120%',\r\n          ...styles,\r\n        });\r\n\r\n        this.startOrStopButtonComponent = new PowerIconComponent();\r\n        this.startOrStopButtonComponent.addEventListener('click', () => {\r\n          if (window?.DtGetVpnState?.execute() !== 'DISCONNECTED') {\r\n            window?.DtExecuteVpnStop?.execute();\r\n          } else {\r\n            window?.DtExecuteVpnStart?.execute();\r\n          }\r\n        });\r\n        this.append(this.startOrStopButtonComponent);\r\n\r\n        this.vpnStateComponent = new VpnStateComponent();\r\n        this.append(this.vpnStateComponent);\r\n\r\n        window.dtVpnStateListener = state => this.configureState(state);\r\n        this.configureState(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED');\r\n      }\r\n\r\n      configureState(state) {\r\n        const isRunning = state != 'DISCONNECTED';\r\n\r\n        this.vpnStateComponent.setState((window?.DtTranslateText?.execute('LBL_STATE_' + state) ?? 'UNKNOWN').toUpperCase())\r\n\r\n        if (state == 'DISCONNECTED') {\r\n          this.vpnStateComponent.setStyles({\r\n            color: VPN_STOPPED_COLOR\r\n          })\r\n          this.startOrStopButtonComponent.setStyles({\r\n            fill: VPN_STOPPED_COLOR\r\n          })\r\n        }\r\n\r\n        if (state != 'DISCONNECTED' && state != 'CONNECTED') {\r\n          this.vpnStateComponent.setStyles({\r\n            color: VPN_STARTING_COLOR\r\n          })\r\n          this.startOrStopButtonComponent.setStyles({\r\n            fill: VPN_STARTING_COLOR\r\n          })\r\n        }\r\n\r\n        if (state == 'CONNECTED') {\r\n          this.vpnStateComponent.setStyles({\r\n            color: VPN_RUNNING_COLOR\r\n          })\r\n          this.startOrStopButtonComponent.setStyles({\r\n            fill: VPN_RUNNING_COLOR\r\n          })\r\n        }\r\n      }\r\n    }\r\n\r\n    class CardToolsComponent extends CardComponent {\r\n      constructor() {\r\n        super({\r\n          margin: '50px 0',\r\n          width: '100%',\r\n          flexDirection: 'row',\r\n          justifyContent: 'space-between',\r\n          background: 'transparent',\r\n          boxShadow: 'none',\r\n          filter: 'drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1))',\r\n\r\n        });\r\n\r\n        this.loggerBody = new LoggerBodyComponent({});\r\n\r\n        this.addArrowRepeatIcon();\r\n        this.addLoggerIcon();\r\n        this.addCalanderIcon();\r\n        this.addMoreButton();\r\n\r\n        window.dtOnNewLogListener = () => this.renderizeLogger();\r\n        this.renderizeLogger();\r\n      }\r\n\r\n      addCalanderIcon() {\r\n        const calanderIconComponent = new CalanderIconComponent();\r\n        calanderIconComponent.addEventListener('click', () =>\r\n          window?.DtStartCheckUser?.execute()\r\n        );\r\n        this.append(calanderIconComponent);\r\n      }\r\n\r\n      addLoggerIcon() {\r\n        const loggerIconComponent = new LoggerIconComponent();\r\n        loggerIconComponent.addEventListener('click', () => {\r\n          const loggerDialog = DialogBuilder.create()\r\n            .setTitle('REGISTRO')\r\n            .setBody(this.loggerBody)\r\n            .setAutoRemove(true)\r\n            .addFooterButton('LIMPAR', () => window?.DtClearLogs?.execute())\r\n            .addFooterButton('FECHAR', () => loggerDialog.close())\r\n            .show();\r\n          this.loggerBody.scrollDown();\r\n        });\r\n        this.append(loggerIconComponent);\r\n      }\r\n\r\n      addArrowRepeatIcon() {\r\n        const arrowRepeatIconComponent = new ArrowRepeatIconComponent();\r\n        arrowRepeatIconComponent.addEventListener('click', () =>\r\n          window?.DtStartAppUpdate?.execute()\r\n        );\r\n        this.append(arrowRepeatIconComponent);\r\n      }\r\n\r\n      addMoreButton() {\r\n        const moreButton = new MoreIconComponent();\r\n        moreButton.addEventListener('click', () => {\r\n          DialogBuilder.create()\r\n            .setTitle('FERRAMENTAS')\r\n            .setAutoRemove(true)\r\n            .setBody(\r\n              new MenuDialogBodyComponent()\r\n                .addRowButtons(\r\n                //new BuyComponent(),\r\n                //new ButtonServersComponent(),\r\n              )\r\n                .addRowButtons(\r\n                  //new ButtonTutorialComponent(),\r\n                  new SpeedTestStyledButtonComponent(),\r\n\r\n\r\n                )\r\n                .addRowButtons(\r\n                  new HotSpotStyledButtonComponent(),\r\n                  new BatteryStyledButtonComponent(),\r\n                )\r\n                .addRowButtons(\r\n                  new ApnSettingStyledButtonComponent(),\r\n                  new CleanAppStyledButtonComponent()\r\n                )\r\n                .addRowButtons(\r\n                //new PolicyServersComponent(),\r\n                //new TermosComponent(),\r\n              )\r\n            )\r\n            .show();\r\n        });\r\n        this.append(moreButton);\r\n      }\r\n\r\n      renderizeLogger() {\r\n        const mock = Array.from({\r\n          length: 1\r\n        }, (_, i) => ({\r\n          RESPONSE: `MESSAGE ${i}`\r\n        }));\r\n        const data = JSON.parse(window?.DtGetLogs?.execute() ?? JSON.stringify(mock))\r\n\r\n        const items = data.map(log => {\r\n          const message = Object.keys(log)[0] + ' ' + log[Object.keys(log)]\r\n          return new LoggerItemComponent({}, message)\r\n        })\r\n        this.loggerBody.setItems(items)\r\n      }\r\n    }\r\n\r\n    class CheckUserDialog {\r\n      constructor() {\r\n        this.dialog = DialogBuilder.create()\r\n          .setAutoRemove(true)\r\n          .setTitle('CHECKUSER')\r\n          .setBody(new Spinner());\r\n      }\r\n\r\n      initialize() {\r\n        window.dtCheckUserStartedListener = () => this.checkUserStartedListener();\r\n        window.dtCheckUserModelListener = model => this.checkUserModelListener(model);\r\n      }\r\n\r\n      checkUserStartedListener() {\r\n        const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{}');\r\n        if (!config.url_check_user) return;\r\n        this.dialog.show();\r\n      }\r\n\r\n      checkUserModelListener(model) {\r\n        const data = JSON.parse(model ?? `{\"username\": \"test\"}`);\r\n        this.dialog\r\n          .setTitle(` Olá, ${data.username}`)\r\n          .setBody(new CheckUserBodyComponent(data));\r\n      }\r\n    }\r\n\r\n    const rootComponent = new AppComponent(document.querySelector('#root'), {\r\n      background: BACKGROUND_COLOR\r\n    });\r\n    window.onerror = e => {\r\n      rootComponent.element.style.color = '#FFFFFF';\r\n      rootComponent.element.style.fontSize = '18px';\r\n      rootComponent.element.innerHTML = e\r\n      return false;\r\n    };\r\n\r\n    const cardComponent = new CardComponent({\r\n      position: 'absolute',\r\n      top: '45%'\r\n    });\r\n\r\n    const configInput = new ConfigInputComponent();\r\n    cardComponent.append(configInput);\r\n\r\n    const userPassInputComponent = new UserPassInputComponent()\r\n    cardComponent.append(userPassInputComponent);\r\n\r\n    const cardToolsComponent = new CardToolsComponent();\r\n    cardComponent.append(cardToolsComponent);\r\n\r\n    const buttonAndStateContainer = new ButtonAndStateContainerComponent({\r\n      marginTop: '3rem'\r\n    });\r\n    cardComponent.append(buttonAndStateContainer);\r\n\r\n    rootComponent.append(new LocalIPComponent());\r\n\r\n    rootComponent.append(new NetworkStatsComponent());\r\n    rootComponent.append(cardComponent);\r\n\r\n    const checkUserDialog = new CheckUserDialog();\r\n    checkUserDialog.initialize();\r\n\r\n    function createElements() {\r\n      const container = document.createElement(\"div\");\r\n      container.classList.add(\"container\");\r\n      container.style.position = 'absolute';\r\n\r\n      const content = document.createElement(\"div\");\r\n      content.classList.add(\"content\");\r\n\r\n      const background = document.createElement(\"div\");\r\n\r\n      const svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\r\n      svg.setAttribute(\"width\", \"16\");\r\n      svg.setAttribute(\"height\", \"16\");\r\n      svg.setAttribute(\"fill\", \"currentColor\");\r\n      svg.classList.add(\"bi\", \"bi-git\");\r\n      svg.setAttribute(\"viewBox\", \"0 0 16 16\");\r\n\r\n      const path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\r\n      path.setAttribute(\"d\", \"M15.698 7.287 8.712.302a1.03 1.03 0 0 0-1.457 0l-1.45 1.45 1.84 1.84a1.223 1.223 0 0 1 1.55 1.56l1.773 1.774a1.224 1.224 0 0 1 1.267 2.025 1.226 1.226 0 0 1-2.002-1.334L8.58 5.963v4.353a1.226 1.226 0 1 1-1.008-.036V5.887a1.226 1.226 0 0 1-.666-1.608L5.093 2.465l-4.79 4.79a1.03 1.03 0 0 0 0 1.457l6.986 6.986a1.03 1.03 0 0 0 1.457 0l6.953-6.953a1.031 1.031 0 0 0 0-1.457\");\r\n      svg.appendChild(path);\r\n\r\n      const span = document.createElement(\"span\");\r\n      span.classList.add(\"ms-2\");\r\n      span.setAttribute(\"id\", \"version\");\r\n      span.textContent = ' 1.1';\r\n\r\n      // Montando a estrutura\r\n      background.appendChild(svg);\r\n      background.appendChild(span);\r\n      content.appendChild(background);\r\n      container.appendChild(content);\r\n\r\n      // Aplicando estilos\r\n      container.style.fontSize = '1.4rem';\r\n      container.style.fontFamily = 'Verdana';\r\n      container.style.color = TEXT_COLOR;\r\n      const statusBarHeight = window?.DtGetStatusBarHeight?.execute();\r\n      const extraPixels = 0; // Number of extra pixels you want to add\r\n      const defaultHeight = 60; // Default height if statusBarHeight is undefined\r\n\r\n      const totalTopValue = (statusBarHeight !== undefined ? statusBarHeight : defaultHeight) + extraPixels;\r\n\r\n      container.style.top = `${totalTopValue}px`;\r\n\r\n      container.style.right = '10px';\r\n\r\n\r\n\r\n      // Adicionando ao DOM\r\n      document.body.appendChild(container);\r\n\r\n      // Atualizar a versão a cada 2 segundos\r\n      //setInterval(updateVersion, 2000);\r\n    }\r\n\r\n    // Função para atualizar a versão\r\n    function updateVersion() {\r\n      const versionElement = document.getElementById('version');\r\n      const version = window?.DtGetLocalConfigVersion?.execute() ?? ' 1.0';\r\n      versionElement.textContent = version;\r\n    }\r\n\r\n    // Chamar a função para criar elementos e configurar a versão inicial\r\n    //createElements();\r\n    //updateVersion();\r\n  </script>\r\n  <!-- <div class=\"container\"\r\n    style=\"position: absolute; font-size: 1.4rem; font-family: Verdana; color: rgb(176, 168, 255); top: 60px; right: 10px;\">\r\n    <div class=\"content\">\r\n      <div><svg width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-git\" viewBox=\"0 0 16 16\">\r\n          <path\r\n            d=\"M15.698 7.287 8.712.302a1.03 1.03 0 0 0-1.457 0l-1.45 1.45 1.84 1.84a1.223 1.223 0 0 1 1.55 1.56l1.773 1.774a1.224 1.224 0 0 1 1.267 2.025 1.226 1.226 0 0 1-2.002-1.334L8.58 5.963v4.353a1.226 1.226 0 1 1-1.008-.036V5.887a1.226 1.226 0 0 1-.666-1.608L5.093 2.465l-4.79 4.79a1.03 1.03 0 0 0 0 1.457l6.986 6.986a1.03 1.03 0 0 0 1.457 0l6.953-6.953a1.031 1.031 0 0 0 0-1.457\">\r\n          </path>\r\n        </svg><span class=\"ms-2\" id=\"version\"> 1.0</span></div>\r\n    </div>\r\n  </div> -->\r\n\r\n\r\n</body>\r\n\r\n</html>","type":"HTML","status":"ACTIVE","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3823,"label":"ANDROID WEBVIEW (POR SUA CONTA E RISCO)","name":"APP_SUPPORT_BUTTON","value":"","type":"HTML","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"},{"id":3824,"label":"PAGINA WEBVIEW (POR SUA CONTA E RISCO)","name":"APP_WEB_VIEW","type":"HTML","value":"","user_id":"R3X0FCAV-EKRY-ANWR-QVGN-J4NDQZYABT5U"}]