"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\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\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: '100%',\n maxWidth: '350px',\n gap: '10px',\n margin: '20px',\n padding: '5px',\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: '5px',\n height: '40px',\n borderRadius: '10px',\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: '35px',\n height: '35px',\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 Person2IconComponent extends IconComponent {\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 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 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: '150px',\n width: '150px',\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 Component {\n constructor() {\n super(document.createElement('div'));\n this.element.style.position = 'absolute';\n this.element.style.top = '0';\n this.element.style.bottom = '0';\n this.element.style.left = '0';\n this.element.style.right = '0';\n this.element.style.height = '100vh';\n this.element.style.background = 'rgba(0, 0, 0, 0.5)';\n this.element.style.backdropFilter = 'blur(5px)';\n this.element.style.display = 'flex';\n this.element.style.alignItems = 'center';\n this.element.style.justifyContent = 'center';\n this.element.style.visibility = 'hidden';\n this.element.style.opacity = '0';\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 this.append(content);\n }\n\n show() {\n this.element.style.opacity = '1';\n this.element.style.visibility = 'visible';\n this.element.style.display = 'flex';\n this.element.style.animation = 'fade-in 0.3s forwards';\n this.element.style.pointerEvents = 'auto';\n\n if (!document.body.contains(this.element)) {\n document.body.append(this.element);\n }\n }\n\n close() {\n this.element.style.opacity = '0';\n this.element.style.animation = 'fade-out 0.3s forwards';\n\n setTimeout(() => {\n this.element.style.display = 'none';\n this.element.style.pointerEvents = 'none';\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: '350px',\n width: '80%',\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() {\n this.dialog = new DialogComponent();\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() {\n return new DialogBuilder();\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: '600px',\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: '600px',\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: '#FFFFFF',\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: '24px',\n fontFamily: 'sans-serif',\n fontWeight: 'bold',\n color: '#FFF',\n marginTop: '50px',\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: '16px',\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: '16px',\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.pingGoogle());\n setInterval(async () => this.setPing(await this.pingGoogle()), 1000);\n }\n\n setPing(ping) {\n this.element.textContent = `PING: ${ping}ms`;\n\n const pingValue = parseInt(ping, 10);\n if (pingValue <= 50) {\n this.setStyles({ color: '#00ff00' });\n } else if (pingValue <= 100) {\n this.setStyles({ color: '#ffff00' });\n } else {\n this.setStyles({ color: '#ff0000' });\n }\n }\n\n async pingGoogle() {\n const startTime = new Date().getTime();\n try {\n const response = await fetch('https://www.google.com');\n const endTime = new Date().getTime();\n return endTime - startTime;\n } catch (error) {\n const endTime = new Date().getTime();\n return endTime - startTime;\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.append(this.iframeElement)\n this.append(this.spinner)\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\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({}, 'https://fast.com'))\n .show()\n })\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.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 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\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 DialogBodyComponent {\n constructor() {\n super({\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 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() {\n super(document.createElement('div'), {\n display: 'flex',\n flexDirection: 'column',\n position: 'absolute',\n alignItems: 'center',\n justifyContent: 'center',\n top: '20%',\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 }\n\n class CardToolsComponent extends CardComponent {\n constructor() {\n super({\n flexDirection: 'row',\n justifyContent: 'space-between',\n position: 'absolute',\n bottom: '12%',\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.addPersonIcon();\n this.addMoreButton();\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 addPersonIcon() {\n const person2IconComponent = new Person2IconComponent();\n person2IconComponent.addEventListener('click', () => startDialogAccess());\n this.append(person2IconComponent);\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 TermsStyledButtonComponent()\n )\n .addRowButtons(\n new BatteryStyledButtonComponent(),\n new SupportStyledButtonComponent()\n )\n .addRowButtons(\n new SpeedTestStyledButtonComponent(),\n new CleanAppStyledButtonComponent()\n )\n )\n .show();\n });\n this.append(moreButton);\n }\n }\n\n const rootComponent = new AppComponent(document.querySelector('#root'), { background: BACKGROUND_COLOR });\n const cardComponent = new CardComponent({ position: 'absolute', bottom: '20%' });\n\n const configInput = new ConfigInputComponent();\n cardComponent.append(configInput);\n\n const buttonAndStateContainer = new ButtonAndStateContainerComponent();\n const cardToolsComponent = new CardToolsComponent();\n\n rootComponent.append(new LocalIPComponent());\n rootComponent.append(buttonAndStateContainer);\n rootComponent.append(cardComponent);\n rootComponent.append(cardToolsComponent);\n\n const startDialogAccess = () => {\n const dialog = DialogBuilder.create()\n .setTitle('DADOS DE ACESSO')\n .setAutoRemove(true)\n .setBody(new UserPassInputComponent())\n .addFooterButton('SAIR', () => dialog.close())\n .addFooterButton('SALVAR', () => dialog.close())\n .show();\n }\n\n const dialogCheckuser = DialogBuilder.create()\n .setAutoRemove(true)\n .setTitle('CHECKUSER')\n .setBody(new Spinner())\n\n const dtCheckUserStartedListener = () => dialogCheckuser.show()\n\n const dtCheckUserModelListener = model => {\n const data = JSON.parse(model ?? `{\"username\": \"test\"}`)\n dialogCheckuser\n .setTitle(`📆 Olá, ${data.username}`)\n .setBody(new CheckUserBodyComponent(data))\n }\n\n const dtConfigClickListener = () => configInput.configure()\n\n const dtVpnStateListener = state => {\n const isRunning = state != 'DISCONNECTED';\n\n buttonAndStateContainer.vpnStateComponent.setState((window?.DtTranslateText?.execute('LBL_STATE_' + state) ?? 'UNKNOWN').toUpperCase())\n\n if (state == 'DISCONNECTED') {\n buttonAndStateContainer.vpnStateComponent.setStyles({ color: VPN_STOPPED_COLOR })\n buttonAndStateContainer.startOrStopButtonComponent.setStyles({ fill: VPN_STOPPED_COLOR })\n }\n\n if (state != 'DISCONNECTED' && state != 'CONNECTED') {\n buttonAndStateContainer.vpnStateComponent.setStyles({ color: VPN_STARTING_COLOR })\n buttonAndStateContainer.startOrStopButtonComponent.setStyles({ fill: VPN_STARTING_COLOR })\n }\n\n if (state == 'CONNECTED') {\n buttonAndStateContainer.vpnStateComponent.setStyles({ color: VPN_RUNNING_COLOR })\n buttonAndStateContainer.startOrStopButtonComponent.setStyles({ fill: VPN_RUNNING_COLOR })\n }\n }\n\n const dtOnNewLogListener = () => {\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 cardToolsComponent.loggerBody.setItems(items)\n }\n\n dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')\n dtOnNewLogListener()\n </script>\n</body>\n\n</html>",
