"value": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>DTunnel</title>\n</head>\n<style>\n * {\n font-family: 'roboto';\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n }\n\n ::placeholder {\n color: #FFF;\n }\n\n body {\n height: 100vh;\n }\n\n @keyframes fade-in {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n @keyframes fade-out {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n }\n\n @keyframes pulse {\n 0% {\n transform: scale(1);\n box-shadow: none;\n }\n\n 50% {\n transform: scale(1.2);\n box-shadow: 0 0 20px 5px #ffffff5d;\n }\n\n 100% {\n transform: scale(1);\n box-shadow: none;\n }\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n</style>\n\n<body>\n <div id=\"root\"></div>\n <script>\n const BACKGROUND_IMAGE = JSON.parse(window?.DtGetAppConfig?.execute('APP_BACKGROUND_IMAGE') ?? '{\"value\": \"https://i.ibb.co/0XyvpHx/DT7xsqhdau.jpg\"}').value;\n const BACKGROUND_COLOR = BACKGROUND_IMAGE\n ? `url(${BACKGROUND_IMAGE}) center center / cover rgb(32, 32, 32)`\n : '#404258'\n\n const INPUT_COLOR = '#36374959'\n const BUTTON_BACKGROUND_COLOR = '#36374959'\n const ICON_COLOR = '#FFFFFF'\n const TEXT_COLOR = '#FFFFFF'\n\n const TOOLS_BUTTON_BACKGROUND_COLOR = '#36374959'\n\n const VPN_BUTTON_BACKGROUND_COLOR = '#36374959'\n\n const VPN_STOPPED_COLOR = '#ff0000'\n const VPN_STARTING_COLOR = '#ffff00'\n const VPN_RUNNING_COLOR = '#00ff00'\n\n const CHECKUSER_TEXT_COLOR = '#FFFFFF'\n const LOGGER_TEXT_COLOR = '#FFFFFF'\n\n const DIALOG_HEADER_TITLE_COLOR = '#FFFFFF'\n const DIALOG_HEADER_CLOSE_BUTTON_COLOR = '#FFFFFF'\n const DIALOG_CONTENT_BACKGROUND_COLOR = '#36374959'\n const DIALOG_FOOTER_BUTTON_COLOR = '#36374959'\n const DIALOG_FOOTER_BUTTON_TEXT_COLOR = '#FFFFFF'\n\n const LINK_SUPPORT = 'https://t.me/DTunnelGroup'\n const TERMS_URL = 'https://t.me/DTunnelGroup'\n const URL_SPEEDTEST = 'https://fast.com'\n const URL_YOUTUBE = 'https://www.youtube.com/embed/g9JLURIh9lE'\n const URL_MP3 = 'https://www.palcomp3.com.br'\n\n class Component {\n constructor(element) {\n this.element = element;\n }\n\n addEventListener(event, listener) {\n this.element.addEventListener(event, listener);\n }\n\n append(component) {\n if (component instanceof Component) {\n this.element.appendChild(component.element);\n } else {\n this.element.append(component);\n }\n }\n\n appendChild(component) {\n if (component instanceof Component) {\n this.element.appendChild(component.element);\n } else {\n this.element.appendChild(component);\n }\n }\n\n remove() {\n this.element.remove();\n }\n\n contains(component) {\n if (component instanceof Component) {\n return this.element.contains(component.element);\n } else {\n return this.element.contains(component);\n }\n }\n }\n\n class StyledComponent extends Component {\n constructor(element, styles = {}) {\n super(element);\n this.styles = styles;\n this.setStyles(styles);\n }\n\n setStyles(styles) {\n Object.keys(styles).forEach((key) => {\n if (this.element.style.hasOwnProperty(key)) {\n this.element.style[key] = styles[key];\n }\n });\n }\n }\n\n class AppComponent extends StyledComponent {\n constructor(element, styles = {}) {\n const defaultStyles = {\n width: '100%',\n height: '100%',\n background: '#404258',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n };\n\n super(element, { ...defaultStyles, ...styles });\n }\n }\n\n class CardComponent extends StyledComponent {\n constructor(styles = {}) {\n const defaultStyles = {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n width: '85%',\n maxWidth: '23rem',\n margin: '1.2rem',\n borderRadius: '5px',\n border: 'none',\n };\n\n super(document.createElement('div'), { ...defaultStyles, ...styles });\n }\n }\n\n class InputGroupComponent extends StyledComponent {\n constructor(styles = {}) {\n const defaultStyles = {\n display: 'flex',\n width: '100%',\n alignItems: 'center',\n background: '#363749',\n color: '#FFF',\n padding: '0.2rem',\n borderRadius: '5px',\n boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\n };\n\n super(document.createElement('div'), { ...defaultStyles, ...styles });\n }\n\n append(...components) {\n components.forEach((component) => super.append(component));\n }\n }\n\n class InputComponent extends StyledComponent {\n constructor(styles = {}) {\n const defaultStyles = {\n background: 'transparent',\n border: 'none',\n width: '100%',\n outline: 'none',\n color: TEXT_COLOR,\n fontSize: '15px',\n };\n\n super(document.createElement('input'), { ...defaultStyles, ...styles });\n }\n\n setEnabled(value) {\n this.element.disabled = !value;\n }\n }\n\n class InputText extends InputComponent {\n constructor(styles = {}) {\n super(styles);\n this.element.type = 'text';\n }\n\n get value() {\n return this.element.value;\n }\n\n setPlaceholder(text) {\n this.element.placeholder = text;\n }\n\n setOnInputListener(callback) {\n this.addEventListener('input', callback);\n }\n\n setValue(value) {\n this.element.value = value;\n }\n\n setOnInputListener(callback) {\n this.addEventListener('input', callback);\n }\n }\n\n class InputPassword extends InputText {\n constructor(styles = {}) {\n super(styles);\n this.element.type = 'password';\n }\n\n setShowing(value) {\n this.element.type = !value ? 'password' : 'text';\n }\n\n get isShowing() { return this.element.type != 'password' }\n }\n\n class SvgComponent extends StyledComponent {\n constructor(styles = {}, ...paths) {\n const defaultStyles = {\n fill: '#FFFFFF',\n padding: '5px',\n width: '2.2rem',\n height: '2.2rem',\n };\n\n super(document.createElementNS('http://www.w3.org/2000/svg', 'svg'), {\n ...defaultStyles,\n ...styles,\n });\n\n this.applyOptions();\n\n paths.forEach((p) => this.addPath(p));\n }\n\n applyOptions() {\n this.setFill(this.styles.fill || 'currentColor');\n this.setWidth(this.styles.width || '16');\n this.setHeight(this.styles.height || '16');\n this.setViewBox(this.styles.viewBox || '0 0 16 16');\n this.setXmlns(this.styles.xmlns || 'http://www.w3.org/2000/svg');\n }\n\n setFill(color) {\n this.element.setAttribute('fill', color);\n }\n\n setWidth(width) {\n this.element.setAttribute('width', width);\n }\n\n setHeight(height) {\n this.element.setAttribute('height', height);\n }\n\n setViewBox(viewBox) {\n this.element.setAttribute('viewBox', viewBox);\n }\n\n setXmlns(xmlns) {\n this.element.setAttribute('xmlns', xmlns);\n }\n\n addPath(...path) {\n path.forEach((item) => {\n const pathElement = document.createElementNS(\n 'http://www.w3.org/2000/svg',\n 'path'\n );\n pathElement.setAttribute('d', item);\n this.element.appendChild(pathElement);\n });\n }\n }\n\n class Spinner extends StyledComponent {\n constructor() {\n super(document.createElement('div'), {\n display: 'flex',\n width: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n padding: '20px'\n });\n this.createSpinnerElements();\n }\n\n createSpinnerElements() {\n const spinnerElement = new StyledComponent(document.createElement('div'));\n spinnerElement.setStyles({\n borderTop: '4px solid transparent',\n borderRight: '4px solid #ccc',\n borderBottom: '4px solid #ccc',\n borderLeft: '4px solid #ccc',\n borderRadius: '50%',\n width: '45px',\n height: '45px',\n animation: 'spin 1s linear infinite',\n });\n\n this.append(spinnerElement)\n }\n }\n\n class IconComponent extends SvgComponent {\n constructor(styles = {}, ...iconPath) {\n super({\n cursor: 'pointer',\n background: TOOLS_BUTTON_BACKGROUND_COLOR,\n borderRadius: '20%',\n height: '45px',\n width: '45px',\n padding: '10px',\n boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\n fill: ICON_COLOR,\n ...styles,\n },\n ...iconPath,\n );\n }\n }\n\n class CalanderIconComponent extends IconComponent {\n constructor(styles = {}) {\n super(styles,\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',\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'\n );\n }\n }\n\n class LoggerIconComponent extends IconComponent {\n constructor(styles = {}) {\n super(styles,\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',\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'\n )\n }\n }\n\n class ArrowRepeatIconComponent extends IconComponent {\n constructor(styles = {}) {\n super(styles,\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',\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'\n );\n }\n }\n\n class MoreIconComponent extends IconComponent {\n constructor(styles = {}) {\n super(styles,\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'\n );\n }\n }\n\n class BatteryIconComponent extends SvgComponent {\n constructor(styles = {}) {\n super(styles,\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'\n );\n }\n }\n\n class HeadsetIconComponent extends SvgComponent {\n constructor(styles = {}) {\n super(styles,\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'\n );\n }\n }\n\n class SpeedMeterIconComponent extends SvgComponent {\n constructor(styles = {}) {\n super(styles,\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',\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'\n );\n }\n }\n\n class YouTubeIconComponent extends SvgComponent {\n constructor(styles = {}) {\n super(styles,\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'\n );\n }\n }\n\n class Mp3IconComponent extends SvgComponent {\n constructor(styles = {}) {\n super(styles,\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',\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',\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',\n );\n }\n }\n\n class TrashIconComponent extends SvgComponent {\n constructor(styles = {}) {\n super(styles,\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',\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'\n );\n }\n }\n\n class ReceptionIconComponent extends SvgComponent {\n constructor(styles = {}) {\n super(styles,\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'\n );\n }\n }\n\n class InfoIconComponent extends SvgComponent {\n constructor(styles = {}) {\n super(styles,\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',\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'\n );\n }\n }\n\n class ArrowDownIconComponent extends SvgComponent {\n constructor(style = {}) {\n super({\n fill: ICON_COLOR,\n ...style,\n },\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'\n );\n }\n }\n\n class NetworkIconComponent extends SvgComponent {\n constructor(style = {}) {\n super({\n fill: ICON_COLOR,\n ...style,\n },\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',\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'\n );\n }\n }\n\n class PersonIconComponent extends SvgComponent {\n constructor(style = {}) {\n super({\n fill: ICON_COLOR,\n ...style,\n },\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'\n );\n }\n }\n\n class LockIconComponent extends SvgComponent {\n constructor(style = {}) {\n super({\n fill: ICON_COLOR,\n ...style,\n },\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'\n );\n }\n }\n\n class EyeIconComponent extends SvgComponent {\n constructor(style = {}) {\n super({\n fill: ICON_COLOR,\n ...style,\n },\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',\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',\n );\n }\n }\n\n class PowerIconComponent extends SvgComponent {\n constructor(style = {}) {\n super({\n cursor: 'pointer',\n height: '8.5rem',\n width: '8.5rem',\n background: VPN_BUTTON_BACKGROUND_COLOR,\n borderRadius: '100%',\n boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\n padding: '20px',\n animation: 'pulse 2.5s infinite',\n fill: ICON_COLOR,\n ...style,\n },\n 'M7.5 1v7h1V1h-1z',\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',\n );\n\n }\n }\n\n class DialogComponent extends StyledComponent {\n constructor(styles = {}) {\n super(document.createElement('div'), {\n position: 'absolute',\n top: '0',\n bottom: '0',\n left: '0',\n right: '0',\n height: '100vh',\n background: 'rgba(0, 0, 0, 0.5)',\n backdropFilter: 'blur(5px)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n visibility: 'hidden',\n opacity: '0',\n ...styles,\n });\n\n this.element.addEventListener('click', (event) => {\n if (event.target === this.element) {\n this.close();\n }\n });\n\n this.onCloseEvent = null\n }\n\n setOnCloseEventListener(callback) {\n this.onCloseEvent = callback\n }\n\n setContent(content) {\n if (!(content instanceof DialogContentComponent)) {\n throw new TypeError('Content must be a DialogContentComponent');\n }\n\n if (!this.contains(content)) {\n this.append(content);\n }\n }\n\n show() {\n this.setStyles({\n opacity: '1',\n visibility: 'visible',\n display: 'flex',\n animation: 'fade-in 0.3s forwards',\n pointerEvents: 'auto',\n })\n\n if (!document.body.contains(this.element)) {\n document.body.append(this.element);\n }\n }\n\n close() {\n this.setStyles({\n opacity: '0',\n animation: 'fade-out 0.3s forwards',\n })\n\n setTimeout(() => {\n this.setStyles({\n display: 'none',\n pointerEvents: 'none',\n })\n\n if (this.onCloseEvent != null) {\n this.onCloseEvent()\n }\n }, 300);\n }\n\n remove() {\n if (document.body.contains(this.element)) {\n this.element.remove();\n }\n }\n }\n\n class DialogContentComponent extends StyledComponent {\n constructor(styles = {}) {\n super(document.createElement('div'), {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n background: DIALOG_CONTENT_BACKGROUND_COLOR,\n borderRadius: '5px',\n maxWidth: '30rem',\n width: '85%',\n ...styles,\n });\n\n this.lastHeader = null;\n this.lastBody = null;\n this.lastFooter = null;\n }\n\n setHeader(component) {\n this?.lastHeader?.remove()\n this.lastHeader = component\n this.append(component);\n }\n\n setBody(component) {\n this?.lastBody?.remove()\n this.lastBody = component\n this.append(component);\n }\n\n setFooter(component) {\n this?.lastFooter?.remove()\n this.lastFooter = component\n this.append(component);\n }\n }\n\n class DialogHeaderComponent extends StyledComponent {\n constructor(styles = {}) {\n super(document.createElement('div'), {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n width: '100%',\n padding: '5px',\n ...styles,\n });\n\n this.title = new StyledComponent(document.createElement('span'), {\n fontSize: '16px',\n color: DIALOG_HEADER_TITLE_COLOR,\n fontFamily: 'sans-serif',\n fontWeight: 'bold',\n padding: '5px',\n });\n\n this.closeButton = new SvgComponent({\n cursor: 'pointer',\n height: '35px',\n width: '35px',\n fill: DIALOG_HEADER_CLOSE_BUTTON_COLOR,\n },\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'\n );\n\n this.initialize();\n }\n\n setTitleText(title) {\n this.title.element.innerText = title;\n }\n\n setCloseButtonClickListener(callback) {\n this.closeButton.addEventListener('click', callback);\n }\n\n initialize() {\n this.append(this.title);\n this.append(this.closeButton);\n }\n }\n\n class DialogBodyComponent extends StyledComponent {\n constructor(styles = {}) {\n super(document.createElement('div'), {\n display: 'flex',\n width: '100%',\n padding: '5px',\n ...styles,\n });\n }\n }\n\n class DialogFooterComponent extends StyledComponent {\n constructor(styles = {}) {\n super(document.createElement('div'), {\n display: 'flex',\n justifyContent: 'space-between',\n gap: '5px',\n alignItems: 'center',\n width: '100%',\n padding: '5px',\n ...styles,\n });\n }\n\n addButton(button) {\n if (!(button instanceof DialogFooterButtonComponent)) {\n throw new TypeError('Button must be a DialogFooterButtonComponent instance');\n }\n\n this.append(button);\n return this;\n }\n }\n\n class DialogFooterButtonComponent extends StyledComponent {\n constructor(text, onclick, styles = {}) {\n super(document.createElement('button'), {\n fontSize: '14px',\n fontWeight: 'bold',\n color: DIALOG_FOOTER_BUTTON_TEXT_COLOR,\n background: DIALOG_FOOTER_BUTTON_COLOR,\n border: 'none',\n borderRadius: '3px',\n padding: '10px',\n width: '100%',\n cursor: 'pointer',\n boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\n ...styles,\n });\n\n\n this.setText(text)\n this.setClickListener(onclick);\n }\n\n setText(text) {\n this.element.innerText = text;\n }\n\n setClickListener(callback) {\n this.addEventListener('click', callback);\n }\n }\n\n class DialogBuilder {\n constructor(styles = {}) {\n this.dialog = new DialogComponent(styles);\n this.header = new DialogHeaderComponent();\n this.content = new DialogContentComponent();\n\n this.footer = new DialogFooterComponent();\n this.footerButtons = [];\n\n this.content.setHeader(this.header);\n this.header.setCloseButtonClickListener(() => this.dialog.close());\n\n }\n\n static create(styles = {}) {\n return new DialogBuilder(styles);\n }\n\n setTitle(title) {\n this.header.setTitleText(title);\n return this;\n }\n\n setAutoRemove(autoRemove) {\n this.dialog.setOnCloseEventListener(() => {\n if (autoRemove) {\n this.dialog.remove();\n }\n });\n return this;\n }\n\n setBody(bodyComponent) {\n this.content.setBody(bodyComponent);\n return this;\n }\n\n addFooterButton(text, callback) {\n const button = new DialogFooterButtonComponent(text, callback);\n this.footerButtons.push(button);\n return this;\n }\n\n show() {\n this.dialog.setContent(this.content);\n\n if (this.footerButtons.length > 0) {\n this.content.setFooter(this.footer);\n this.footerButtons.forEach((button) => {\n this.footer.addButton(button);\n });\n }\n\n this.dialog.show();\n return this;\n }\n\n close() {\n this.dialog.close();\n }\n }\n\n class ConfigComponent extends StyledComponent {\n constructor(styles = {}) {\n super(document.createElement('div'), {\n display: 'flex',\n gap: '5px',\n alignItems: 'center',\n textAlign: 'left',\n marginTop: '5px',\n padding: '5px',\n background: 'rgba(255, 255, 255, 0.1)',\n width: '100%',\n borderRadius: '5px',\n ...styles\n });\n\n this.image = document.createElement('img');\n this.name = document.createElement('span');\n this.description = document.createElement('span');\n this.mode = document.createElement('span');\n\n this.initialize();\n }\n\n setImage(url) {\n this.image.src = url;\n }\n\n setName(name) {\n this.name.innerHTML = name;\n }\n\n setDescription(description) {\n this.description.innerHTML = description;\n }\n\n setMode(mode) {\n this.mode.innerHTML = mode;\n }\n\n initialize() {\n this.setImageStyles();\n this.setNameStyles();\n this.setDescriptionStyles();\n this.setModeStyles();\n const startArea = this.createStartArea();\n const endArea = this.createEndArea();\n this.appendElements(startArea, endArea);\n }\n\n setImageStyles() {\n this.image.style.width = '40px';\n this.image.style.height = '40px';\n }\n\n setNameStyles() {\n this.name.style.fontSize = '12px';\n this.name.style.fontFamily = 'sans-serif';\n this.name.style.color = '#FFFFFF';\n this.name.style.fontWeight = 'bold';\n }\n\n setDescriptionStyles() {\n this.description.style.fontSize = '10px';\n this.description.style.fontFamily = 'sans-serif';\n this.description.style.color = '#FFFFFF';\n this.description.style.fontWeight = 'bold';\n this.description.style.fontStyle = 'italic';\n }\n\n setModeStyles() {\n this.mode.style.fontSize = '10px';\n this.mode.style.fontFamily = 'sans-serif';\n this.mode.style.color = '#FFFFFF';\n this.mode.style.fontWeight = 'bold';\n this.mode.style.fontStyle = 'italic';\n this.mode.style.whiteSpace = 'nowrap';\n }\n\n createStartArea() {\n const startArea = document.createElement('div');\n startArea.style.display = 'flex';\n startArea.style.width = '100%';\n startArea.style.gap = '10px';\n startArea.style.flexDirection = 'column';\n startArea.appendChild(this.name);\n startArea.appendChild(this.description);\n return startArea;\n }\n\n createEndArea() {\n const endArea = document.createElement('div');\n endArea.style.display = 'flex';\n endArea.style.flexDirection = 'column';\n endArea.style.alignItems = 'end';\n endArea.style.alignSelf = 'end';\n endArea.style.width = '50%';\n endArea.appendChild(this.mode);\n return endArea;\n }\n\n appendElements(startArea, endArea) {\n this.appendChild(this.image);\n this.appendChild(startArea);\n this.appendChild(endArea);\n }\n }\n\n class CategoryComponent extends StyledComponent {\n constructor(styles = {}, items = []) {\n super(document.createElement('div'), {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n textAlign: 'center',\n padding: '2px',\n width: '100%',\n ...styles\n });\n\n this.items = items;\n this.name = document.createElement('span');\n this.setNameStyles();\n\n this.initialize();\n this.setItems(items);\n }\n\n setNameStyles() {\n this.name.style.width = '100%';\n this.name.style.borderRadius = '5px';\n this.name.style.fontSize = '12px';\n this.name.style.fontFamily = 'sans-serif';\n this.name.style.color = '#FFFFFF';\n this.name.style.background = 'rgba(255, 255, 255, 0.1)';\n this.name.style.padding = '5px';\n this.name.style.fontWeight = 'bold';\n }\n\n setName(value) {\n this.name.innerHTML = value;\n }\n\n setItems(items) {\n items.forEach(item => this.append(item));\n }\n\n initialize() {\n this.appendChild(this.name);\n }\n }\n\n class ConfigBodyComponent extends DialogBodyComponent {\n constructor(items) {\n super({\n flexDirection: 'column',\n gap: '5px',\n maxHeight: '65vh',\n overflowY: 'auto'\n });\n items.forEach(item => this.append(item));\n }\n }\n\n class LoggerItemComponent extends StyledComponent {\n constructor(styles = {}, message) {\n super(document.createElement('span'), {\n fontFamily: 'monospace',\n width: '100%',\n fontSize: '12px',\n color: LOGGER_TEXT_COLOR,\n ...styles,\n });\n\n this.element.innerHTML = message\n }\n }\n\n class LoggerBodyComponent extends DialogBodyComponent {\n constructor(styles = {}, items = []) {\n super({\n flexDirection: 'column',\n maxHeight: '65vh',\n overflowY: 'auto',\n width: '100%',\n ...styles,\n });\n\n this.setItems(items);\n }\n\n setItems(items) {\n this.element.innerHTML = '';\n items.forEach(item => this.append(item));\n this.scrollDown();\n }\n\n scrollDown() {\n this.element.scrollTop = this.element.scrollHeight;\n }\n }\n\n class CheckUserBodyComponent extends DialogBodyComponent {\n constructor(data = {}) {\n super()\n const component = new StyledComponent(document.createElement('div'), {\n display: 'flex',\n flexDirection: 'column',\n color: TEXT_COLOR,\n fontFamily: 'sans-serif',\n gap: '2px',\n textAlign: 'center',\n width: '100%',\n });\n\n component.element.innerHTML = `\n <span style=\"color: ${CHECKUSER_TEXT_COLOR}\">?Nome de usuario: ${data.username}</span>\n <span style=\"color: ${CHECKUSER_TEXT_COLOR}\">?Expira em: ${data.expiration_date}</span>\n <span style=\"color: ${CHECKUSER_TEXT_COLOR}\">?Dias restantes: ${data.expiration_days}</span>\n <span style=\"color: ${CHECKUSER_TEXT_COLOR}\">?Conexoes: ${data.count_connections}|${data.limit_connections}</span>\n `\n\n this.append(component)\n }\n }\n\n class VpnStateComponent extends StyledComponent {\n constructor(style = {}) {\n super(document.createElement('span'), {\n fontSize: '1.5rem',\n fontFamily: 'sans-serif',\n fontWeight: 'bold',\n color: '#FFF',\n marginTop: '2rem',\n ...style,\n })\n\n this.setState('DISCONNECTED')\n }\n\n setState(state) {\n this.element.innerHTML = state\n }\n }\n\n class LocalIPComponent extends StyledComponent {\n constructor(styles = {}) {\n super(document.createElement('span'), {\n position: 'absolute',\n fontSize: '1rem',\n fontFamily: 'Helvetica',\n fontWeight: 'bold',\n whiteSpace: 'nowrap',\n color: TEXT_COLOR,\n top: `${window?.DtGetStatusBarHeight?.execute() ?? '30'}px`,\n left: '10px',\n ...styles,\n })\n\n this.setIP(window?.DtGetLocalIP?.execute() ?? '127.0.0.1')\n setInterval(() => {\n this.setIP(window?.DtGetLocalIP?.execute() ?? '127.0.0.1')\n }, 1000)\n }\n\n setIP(ip) {\n this.element.innerHTML = `IP: ${ip}`\n }\n }\n\n class PingComponent extends StyledComponent {\n constructor(styles = {}) {\n super(document.createElement('span'), {\n position: 'absolute',\n fontSize: '1rem',\n fontFamily: 'Helvetica',\n fontWeight: 'bold',\n whiteSpace: 'nowrap',\n top: `${window?.DtGetStatusBarHeight?.execute() ?? '30'}px`,\n right: '10px',\n ...styles,\n });\n\n this.startPing();\n }\n\n async startPing() {\n this.setPing(await this.ping());\n setInterval(async () => this.setPing(await this.ping()), 1000);\n }\n\n setPing(ping) {\n this.element.textContent = `PING: ${ping}ms`;\n\n const pingValue = parseInt(ping, 10);\n const color = this.getColorFromPing(pingValue);\n\n this.setStyles({ color });\n }\n\n getColorFromPing(ping) {\n const pingValue = parseInt(ping, 10);\n const color = pingValue >= 0 && pingValue <= 50 ? '#00ff00' :\n pingValue > 50 && pingValue <= 100 ? '#ffff00' :\n '#ff0000';\n return color;\n }\n\n async ping() {\n const startTime = new Date().getTime();\n const url = `https://cdn-icons-png.flaticon.com/512/7517/7517373.png?${startTime}`\n\n try {\n const data = await fetch(url)\n return new Date().getTime() - startTime;\n } catch (err) {\n console.log(err);\n return -1;\n }\n }\n }\n\n class IframeBodyComponent extends DialogBodyComponent {\n constructor(styles = {}, url = null) {\n super({\n minHeight: '600px',\n ...styles\n })\n\n this.iframeElement = new StyledComponent(document.createElement('iframe'), {\n width: '100%',\n border: 'none',\n borderRadius: '5px',\n display: 'none',\n })\n\n this.spinner = new Spinner()\n\n this.iframeElement.addEventListener('load', () => {\n this.iframeElement.setStyles({ display: 'block' })\n this.spinner.setStyles({ display: 'none' })\n })\n\n this.setUrl(url)\n this.applyOptions()\n this.append(this.iframeElement)\n this.append(this.spinner)\n\n }\n\n setUrl(url) {\n this.iframeElement.element.src = url\n }\n\n setOnLoadListener(callback) {\n this.iframeElement.addEventListener('load', callback)\n }\n\n applyOptions() {\n this.iframeElement.element.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share')\n this.iframeElement.element.setAttribute('allowfullscreen', '')\n this.iframeElement.element.setAttribute('frameborder', '0')\n }\n }\n\n class CleanAppMessageBodyComponent extends DialogBodyComponent {\n constructor(styles = {}, url = null) {\n super({\n height: 'auto',\n ...styles\n })\n\n this.spanComponent = new StyledComponent(document.createElement('span'), {\n fontSize: '16px',\n fontFamily: 'Helvetica',\n fontWeight: 'bold',\n color: TEXT_COLOR,\n })\n\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?'\n\n this.append(this.spanComponent)\n }\n }\n\n class StyledButtonComponent extends StyledComponent {\n constructor(text, icon, onclick, styles = {}) {\n super(document.createElement('button'), {\n width: '100%',\n borderRadius: '5px',\n padding: '10px',\n border: 'none',\n color: TEXT_COLOR,\n background: BUTTON_BACKGROUND_COLOR,\n boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center',\n ...styles\n });\n\n this.textComponent = new StyledComponent(document.createElement('span'), {\n fontSize: '16px',\n fontWeight: 'bold',\n });\n\n this.textComponent.element.innerHTML = text;\n this.element.addEventListener('click', onclick)\n\n this.append(icon ?? '')\n this.append(this.textComponent);\n }\n }\n\n class ApnSettingStyledButtonComponent extends StyledButtonComponent {\n constructor() {\n super(\n 'APN',\n new ReceptionIconComponent(),\n () => window?.DtStartApnActivity?.execute()\n )\n }\n }\n\n class TermsStyledButtonComponent extends StyledButtonComponent {\n constructor() {\n super(\n 'TERMOS',\n new InfoIconComponent(),\n () => window?.DtStartWebViewActivity?.execute(TERMS_URL)\n )\n }\n }\n\n class BatteryStyledButtonComponent extends StyledButtonComponent {\n constructor() {\n super(\n 'BATERIA',\n new BatteryIconComponent(),\n () => window?.DtIgnoreBatteryOptimizations?.execute(),\n )\n }\n }\n\n class SupportStyledButtonComponent extends StyledButtonComponent {\n constructor() {\n super(\n 'SUPORTE',\n new HeadsetIconComponent(),\n () => window?.DtStartWebViewActivity?.execute(LINK_SUPPORT)\n );\n }\n }\n\n class SpeedTestStyledButtonComponent extends StyledButtonComponent {\n constructor() {\n super(\n 'SPEEDTEST',\n new SpeedMeterIconComponent(),\n () => {\n DialogBuilder.create()\n .setTitle('SPEEDTEST')\n .setAutoRemove(true)\n .setBody(new IframeBodyComponent({}, URL_SPEEDTEST))\n .show()\n })\n }\n }\n\n class YouTubeStyledButtonComponent extends StyledButtonComponent {\n static dialog = DialogBuilder.create({ zIndex: 1 })\n .setTitle('YOUTUBE')\n .setBody(new IframeBodyComponent({}, URL_YOUTUBE))\n\n constructor() {\n super(\n 'YOUTUBE',\n new YouTubeIconComponent(),\n () => this.dialog.show(),\n )\n }\n\n get dialog() {\n return YouTubeStyledButtonComponent.dialog;\n }\n }\n\n class Mp3StyledButtonComponent extends StyledButtonComponent {\n static dialog = DialogBuilder.create({ zIndex: 1 })\n .setTitle('MP3')\n .setBody(new IframeBodyComponent({}, URL_MP3))\n\n constructor() {\n super(\n 'MP3',\n new Mp3IconComponent(),\n () => this.dialog.show(),\n )\n }\n\n get dialog() {\n return Mp3StyledButtonComponent.dialog;\n }\n }\n\n class CleanAppStyledButtonComponent extends StyledButtonComponent {\n constructor() {\n super(\n 'LIMPAR',\n new TrashIconComponent(),\n () => {\n const dialog = DialogBuilder.create()\n .setTitle('LIMPAR DADOS')\n .setAutoRemove(true)\n .setBody(new CleanAppMessageBodyComponent())\n .addFooterButton('NÃO', () => dialog.close())\n .addFooterButton('SIM', () => window?.DtCleanApp?.execute())\n .show();\n })\n }\n }\n\n class MenuDialogBodyComponent extends DialogBodyComponent {\n constructor() {\n super({\n display: 'flex',\n flexDirection: 'column',\n gap: '5px'\n })\n }\n addRowButtons(...buttons) {\n const element = new StyledComponent(document.createElement('div'), {\n display: 'flex',\n gap: '5px',\n width: '100%'\n });\n buttons.forEach(button => element.append(button));\n this.append(element);\n return this;\n }\n }\n\n class ConfigInputComponent extends InputGroupComponent {\n constructor() {\n super({ cursor: 'pointer', background: INPUT_COLOR });\n\n this.configInput = new InputText({ cursor: 'pointer', fontFamily: 'roboto' });\n this.configInput.setEnabled(false);\n this.configInput.setPlaceholder('SELECIONE UM SERVIDOR');\n this.configInput.setValue(JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{}').name ?? '');\n\n this.append(new NetworkIconComponent(), this.configInput, new ArrowDownIconComponent());\n this.configure()\n\n this.addEventListener('click', () => {\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\"}]}]';\n const items = JSON.parse(window?.DtGetConfigs?.execute() || mock);\n items.sort((a, b) => a.sorter - b.sorter);\n items.forEach((item) => item.items.sort((a, b) => a.sorter - b.sorter));\n\n const dialog = DialogBuilder.create()\n .setTitle('CONFIGURAÇÕES')\n .setAutoRemove(true)\n .setBody(\n new ConfigBodyComponent(\n items.map((item) => {\n const category = new CategoryComponent();\n category.setName(item.name);\n category.setItems(\n item.items.map((item) => {\n const config = new ConfigComponent();\n config.setName(item.name);\n config.setDescription(item.description ?? '');\n config.setMode(item.mode);\n config.setImage(item.icon);\n config.addEventListener('click', () => {\n window?.DtSetConfig?.execute(item.id);\n dialog.close();\n });\n return config;\n })\n );\n return category;\n })\n )\n )\n .show();\n });\n\n const originalClickListener = window.dtConfigClickListener;\n window.dtConfigClickListener = () => {\n if (originalClickListener) {\n originalClickListener();\n }\n this.configure();\n };\n this.configure();\n }\n\n configure() {\n const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{\"auth\":{\"password\": \"\"}, \"mode\": \"v2ra\"}')\n this.configInput.setValue(config.name ?? '')\n }\n }\n\n class UserPassInputComponent extends StyledComponent {\n constructor() {\n super(document.createElement('div'), {\n display: 'flex',\n marginTop: '5px',\n width: '100%',\n display: 'flex',\n gap: '5px',\n });\n\n this.usernameGroupComponent = new InputGroupComponent({ background: INPUT_COLOR });\n const personIconComponent = new PersonIconComponent();\n this.usernameInput = new InputText();\n this.usernameInput.setPlaceholder('Nome de usuário');\n this.usernameInput.setValue(window?.DtUsername?.get() ?? '');\n this.usernameInput.setOnInputListener(() => window?.DtUsername?.set(this.usernameInput.value));\n this.usernameGroupComponent.append(personIconComponent, this.usernameInput);\n this.append(this.usernameGroupComponent);\n\n this.passwordGroupComponent = new InputGroupComponent({ background: INPUT_COLOR });\n this.passwordInput = new InputPassword();\n const eyeIconComponent = new EyeIconComponent();\n eyeIconComponent.addEventListener('click', () => this.passwordInput.setShowing(!this.passwordInput.isShowing));\n this.passwordInput.setPlaceholder('Senha');\n this.passwordInput.setValue(window?.DtPassword?.get() ?? '');\n this.passwordInput.setOnInputListener(() => { window?.DtPassword?.set(this.passwordInput.value) });\n this.passwordGroupComponent.append(new LockIconComponent(), this.passwordInput, eyeIconComponent);\n this.append(this.passwordGroupComponent);\n\n this.v2rayUuidGroupComponent = new InputGroupComponent({ background: INPUT_COLOR });\n this.v2rayUuidInput = new InputPassword();\n this.v2rayUuidInput.setPlaceholder('V2Ray UUID');\n this.v2rayUuidInput.setValue(window?.DtUuid?.get() ?? '');\n this.v2rayUuidInput.setOnInputListener(() => window?.DtUuid?.set(this.v2rayUuidInput.value));\n this.v2rayUuidGroupComponent.append(new LockIconComponent(), this.v2rayUuidInput);\n\n this.append(this.v2rayUuidGroupComponent);\n\n const originalClickListener = window.dtConfigClickListener;\n window.dtConfigClickListener = () => {\n if (originalClickListener) {\n originalClickListener();\n }\n this.configure();\n };\n\n this.configure();\n }\n\n configure() {\n const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{\"auth\":{\"password\": \"\"}, \"mode\": \"v2ra\"}')\n const isV2ray = config?.mode?.toLowerCase()?.startsWith('v2ray');\n\n this.usernameGroupComponent.setStyles({\n display: isV2ray || config?.auth?.username ? 'none' : 'flex',\n })\n\n this.passwordGroupComponent.setStyles({\n display: isV2ray || config?.auth?.password ? 'none' : 'flex',\n })\n\n this.v2rayUuidGroupComponent.setStyles({\n display: !isV2ray || config?.auth?.v2ray_uuid ? 'none' : 'flex',\n })\n\n const isRunning = (window?.DtGetVpnState?.execute() ?? 'DISCONNECTED') != 'DISCONNECTED';\n this.usernameInput.setEnabled(!isRunning)\n this.passwordInput.setEnabled(!isRunning)\n this.v2rayUuidInput.setEnabled(!isRunning)\n }\n }\n\n class ButtonAndStateContainerComponent extends StyledComponent {\n constructor(styles = {}) {\n super(document.createElement('div'), {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n width: '100%',\n ...styles,\n });\n\n this.startOrStopButtonComponent = new PowerIconComponent();\n this.startOrStopButtonComponent.addEventListener('click', () => {\n const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{}')\n const isV2ray = config?.mode?.toLowerCase()?.startsWith('v2ray');\n\n const username = window?.DtUsername?.get() ?? config.auth.username\n const password = window?.DtPassword?.get() ?? config.auth.password\n const v2rayUuid = window?.DtUuid?.get() ?? config.auth.v2ray_uuid\n\n if (!isV2ray && (!username || !password) || isV2ray && !v2rayUuid) {\n startDialogAccess()\n return\n }\n\n if (DtGetVpnState.execute() !== 'DISCONNECTED') {\n DtExecuteVpnStop.execute();\n } else {\n DtExecuteVpnStart.execute();\n }\n });\n this.append(this.startOrStopButtonComponent);\n\n this.vpnStateComponent = new VpnStateComponent();\n this.append(this.vpnStateComponent);\n\n window.dtVpnStateListener = state => this.configureState(state);\n this.configureState(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED');\n }\n\n configureState(state) {\n const isRunning = state != 'DISCONNECTED';\n\n this.vpnStateComponent.setState((window?.DtTranslateText?.execute('LBL_STATE_' + state) ?? 'UNKNOWN').toUpperCase())\n\n if (state == 'DISCONNECTED') {\n this.vpnStateComponent.setStyles({ color: VPN_STOPPED_COLOR })\n this.startOrStopButtonComponent.setStyles({ fill: VPN_STOPPED_COLOR })\n }\n\n if (state != 'DISCONNECTED' && state != 'CONNECTED') {\n this.vpnStateComponent.setStyles({ color: VPN_STARTING_COLOR })\n this.startOrStopButtonComponent.setStyles({ fill: VPN_STARTING_COLOR })\n }\n\n if (state == 'CONNECTED') {\n this.vpnStateComponent.setStyles({ color: VPN_RUNNING_COLOR })\n this.startOrStopButtonComponent.setStyles({ fill: VPN_RUNNING_COLOR })\n }\n }\n }\n\n class CardToolsComponent extends CardComponent {\n constructor() {\n super({\n margin: '20px 0',\n width: '100%',\n flexDirection: 'row',\n justifyContent: 'space-between',\n background: 'transparent',\n boxShadow: 'none',\n });\n\n this.loggerBody = new LoggerBodyComponent({});\n\n this.addArrowRepeatIcon();\n this.addLoggerIcon();\n this.addCalanderIcon();\n this.addMoreButton();\n\n window.dtOnNewLogListener = () => this.renderizeLogger();\n this.renderizeLogger();\n }\n\n addCalanderIcon() {\n const calanderIconComponent = new CalanderIconComponent();\n calanderIconComponent.addEventListener('click', () =>\n window?.DtStartCheckUser?.execute()\n );\n this.append(calanderIconComponent);\n }\n\n addLoggerIcon() {\n const loggerIconComponent = new LoggerIconComponent();\n loggerIconComponent.addEventListener('click', () => {\n const loggerDialog = DialogBuilder.create()\n .setTitle('REGISTRO')\n .setBody(this.loggerBody)\n .setAutoRemove(true)\n .addFooterButton('LIMPAR', () => window?.DtClearLogs?.execute())\n .addFooterButton('FECHAR', () => loggerDialog.close())\n .show();\n this.loggerBody.scrollDown();\n });\n this.append(loggerIconComponent);\n }\n\n addArrowRepeatIcon() {\n const arrowRepeatIconComponent = new ArrowRepeatIconComponent();\n arrowRepeatIconComponent.addEventListener('click', () =>\n window?.DtStartAppUpdate?.execute()\n );\n this.append(arrowRepeatIconComponent);\n }\n\n addMoreButton() {\n const moreButton = new MoreIconComponent();\n moreButton.addEventListener('click', () => {\n DialogBuilder.create()\n .setTitle('FERRAMENTAS')\n .setAutoRemove(true)\n .setBody(\n new MenuDialogBodyComponent()\n .addRowButtons(\n new ApnSettingStyledButtonComponent(),\n new BatteryStyledButtonComponent(),\n )\n .addRowButtons(\n new SpeedTestStyledButtonComponent(),\n new CleanAppStyledButtonComponent()\n )\n .addRowButtons(\n new YouTubeStyledButtonComponent(),\n new Mp3StyledButtonComponent(),\n )\n )\n .show();\n });\n this.append(moreButton);\n }\n\n renderizeLogger() {\n const mock = Array.from({ length: 300 }, (_, i) => ({ TIME: `MESSAGE ${i}` }));\n const data = JSON.parse(window?.DtGetLogs?.execute() ?? JSON.stringify(mock))\n const items = data.map(log => {\n const message = Object.keys(log)[0] + ' ' + log[Object.keys(log)]\n return new LoggerItemComponent({}, message)\n })\n this.loggerBody.setItems(items)\n }\n }\n\n class CheckUserDialog {\n constructor() {\n this.dialog = DialogBuilder.create()\n .setAutoRemove(true)\n .setTitle('CHECKUSER')\n .setBody(new Spinner());\n }\n\n initialize() {\n window.dtCheckUserStartedListener = () => this.checkUserStartedListener();\n window.dtCheckUserModelListener = model => this.checkUserModelListener(model);\n }\n\n checkUserStartedListener() {\n const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{}');\n if (!config.url_check_user) return;\n this.dialog.show();\n }\n\n checkUserModelListener(model) {\n const data = JSON.parse(model ?? `{\"username\": \"test\"}`);\n this.dialog\n .setTitle(`? Olá, ${data.username}`)\n .setBody(new CheckUserBodyComponent(data));\n }\n }\n\n const rootComponent = new AppComponent(document.querySelector('#root'), { background: BACKGROUND_COLOR });\n const cardComponent = new CardComponent({ position: 'absolute', top: '15%' });\n\n const configInput = new ConfigInputComponent();\n cardComponent.append(configInput);\n\n const userPassInputComponent = new UserPassInputComponent()\n cardComponent.append(userPassInputComponent);\n\n const cardToolsComponent = new CardToolsComponent();\n cardComponent.append(cardToolsComponent);\n\n const buttonAndStateContainer = new ButtonAndStateContainerComponent({ marginTop: '3rem' });\n cardComponent.append(buttonAndStateContainer);\n\n rootComponent.append(new LocalIPComponent());\n rootComponent.append(new PingComponent());\n rootComponent.append(cardComponent);\n\n const checkUserDialog = new CheckUserDialog();\n checkUserDialog.initialize();\n </script>\n</body>\n\n</html>",
