<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DTunnel_s
_t_project_edit</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
font-family: 'Verdana', sans-serif;
}
::placeholder {
color: #b0a8ffff;
}
body {
height: 100vh;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: none;
}
50% {
transform: scale(1.2);
box-shadow: 0 0 10px 5px #b0a8ffff;
}
100% {
transform: scale(1);
box-shadow: none;
}
}
</style>
<body>
<div id="root">
</div>
<script>
const BACKGROUND_COLOR = `linear-gradient(45deg, #14142c, #14142c 25%, #1210246b 25%, #1210246b 50%, #14142c 50%, #14142c 75%, #1210246b 75%, #1210246b), #14142c`;
const INPUT_COLOR = '#1210246b'
const BUTTON_BACKGROUND_COLOR = '#1210246b'
const ICON_COLOR = '#6205d5'
const TEXT_COLOR = '#b0a8ffff'
const TOOLS_BUTTON_BACKGROUND_COLOR = '#1210246b'
const VPN_STATE_TEXT_COLOR = '#b0a8ffff'
const VPN_BUTTON_BACKGROUND_COLOR = '#1210246b'
const CHECKUSER_TEXT_COLOR = '#b0a8ffff'
const LOGGER_TEXT_COLOR = '#b0a8ffff'
const DIALOG_HEADER_TITLE_COLOR = '#b0a8ffff'
const DIALOG_HEADER_CLOSE_BUTTON_COLOR = '#b0a8ffff'
const DIALOG_CONTENT_BACKGROUND_COLOR = '#14142c'
const DIALOG_FOOTER_BUTTON_COLOR = '#1210246b'
const DIALOG_FOOTER_BUTTON_TEXT_COLOR = '#b0a8ffff'
const TERMS_URL = 'https://telksbr.github.io/SSH_T_PROJECT_TERMOS/'
class Component {
constructor(element) {
this.element = element;
}
addEventListener(event, listener) {
this.element.addEventListener(event, listener);
}
append(component) {
if (component instanceof Component) {
this.element.appendChild(component.element);
} else {
this.element.append(component);
}
}
appendChild(component) {
if (component instanceof Component) {
this.element.appendChild(component.element);
} else {
this.element.appendChild(component);
}
}
}
class StyledComponent extends Component {
constructor(element, styles = {}) {
super(element);
this.styles = styles;
this.setStyles(styles);
}
setStyles(styles) {
Object.keys(styles).forEach((key) => {
if (this.element.style.hasOwnProperty(key)) {
this.element.style[key] = styles[key];
}
});
}
}
class AppComponent extends StyledComponent {
constructor(element, styles = {}) {
const defaultStyles = {
width: '100%',
height: '100%',
background: '#404258',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
};
super(element, { ...defaultStyles, ...styles });
}
}
class CardComponent extends StyledComponent {
constructor(styles = {}) {
const defaultStyles = {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
maxWidth: '23rem',
gap: '10px',
margin: '1.2rem',
padding: '5px',
borderRadius: '5px',
border: 'none',
};
super(document.createElement('div'), { ...defaultStyles, ...styles });
}
}
class InputGroupComponent extends StyledComponent {
constructor(styles = {}) {
const defaultStyles = {
display: 'flex',
width: '100%',
alignItems: 'center',
background: '#363749',
color: '#b0a8ffff',
padding: '0.2rem',
height: '40px',
borderRadius: '10px',
boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
};
super(document.createElement('div'), { ...defaultStyles, ...styles });
}
append(...components) {
components.forEach((component) => super.append(component));
}
}
class InputComponent extends StyledComponent {
constructor(styles = {}) {
const defaultStyles = {
background: 'transparent',
border: 'none',
width: '100%',
outline: 'none',
color: TEXT_COLOR,
fontSize: '15px',
};
super(document.createElement('input'), { ...defaultStyles, ...styles });
}
setEnabled(value) {
this.element.disabled = !value;
}
}
class InputText extends InputComponent {
constructor(styles = {}) {
super(styles);
this.element.type = 'text';
}
get value() {
return this.element.value;
}
setPlaceholder(text) {
this.element.placeholder = text;
}
setOnInputListener(callback) {
this.addEventListener('input', callback);
}
setValue(value) {
this.element.value = value;
}
setOnInputListener(callback) {
this.addEventListener('input', callback);
}
}
class InputPassword extends InputText {
constructor(styles = {}) {
super(styles);
this.element.type = 'password';
}
setShowing(value) {
this.element.type = !value ? 'password' : 'text';
}
get isShowing() { return this.element.type != 'password' }
}
class SvgComponent extends StyledComponent {
constructor(styles = {}, ...paths) {
const defaultStyles = {
fill: '#1210246b',
padding: '5px',
width: '35px',
height: '35px',
filter: 'drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5))',
};
super(document.createElementNS('http://www.w3.org/2000/svg', 'svg'), {
...defaultStyles,
...styles,
});
this.applyOptions();
paths.forEach((p) => this.addPath(p));
}
applyOptions() {
this.setFill(this.styles.fill || 'currentColor');
this.setWidth(this.styles.width || '16');
this.setHeight(this.styles.height || '16');
this.setViewBox(this.styles.viewBox || '0 0 16 16');
this.setXmlns(this.styles.xmlns || 'http://www.w3.org/2000/svg');
}
setFill(color) {
this.element.setAttribute('fill', color);
}
setWidth(width) {
this.element.setAttribute('width', width);
}
setHeight(height) {
this.element.setAttribute('height', height);
}
setViewBox(viewBox) {
this.element.setAttribute('viewBox', viewBox);
}
setXmlns(xmlns) {
this.element.setAttribute('xmlns', xmlns);
}
addPath(...path) {
path.forEach((item) => {
const pathElement = document.createElementNS(
'http://www.w3.org/2000/svg',
'path'
);
pathElement.setAttribute('d', item);
this.element.appendChild(pathElement);
});
}
}
class CalanderIconComponent extends SvgComponent {
constructor(styles = {}) {
super({
cursor: 'pointer',
background: TOOLS_BUTTON_BACKGROUND_COLOR,
borderRadius: '20%',
height: '45px',
width: '45px',
padding: '10px',
boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
fill: ICON_COLOR,
...styles,
},
'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',
'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'
);
}
}
class LoggerIconComponent extends SvgComponent {
constructor(styles = {}) {
super({
cursor: 'pointer',
background: TOOLS_BUTTON_BACKGROUND_COLOR,
borderRadius: '20%',
height: '45px',
width: '45px',
padding: '10px',
boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
fill: ICON_COLOR,
...styles,
},
'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',
'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'
);
}
}
class ArrowRepeatIconComponent extends SvgComponent {
constructor(styles = {}) {
super({
cursor: 'pointer',
background: TOOLS_BUTTON_BACKGROUND_COLOR,
borderRadius: '20%',
height: '45px',
width: '45px',
padding: '10px',
boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
fill: ICON_COLOR,
...styles,
},
'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',
'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'
);
}
}
class BatteryIconComponent extends SvgComponent {
constructor(styles = {}) {
super({
cursor: 'pointer',
background: TOOLS_BUTTON_BACKGROUND_COLOR,
borderRadius: '20%',
height: '45px',
width: '45px',
padding: '10px',
boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
fill: ICON_COLOR,
...styles,
},
'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'
);
}
}
class SpeedMeterIconComponent extends SvgComponent {
constructor(styles = {}) {
super({
cursor: 'pointer',
background: TOOLS_BUTTON_BACKGROUND_COLOR,
borderRadius: '20%',
height: '45px',
width: '45px',
padding: '10px',
boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
fill: ICON_COLOR,
...styles,
},
'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',
'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'
);
}
}
class TrashIconComponent extends SvgComponent {
constructor(styles = {}) {
super({
cursor: 'pointer',
background: TOOLS_BUTTON_BACKGROUND_COLOR,
borderRadius: '20%',
height: '45px',
width: '45px',
padding: '10px',
boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
fill: ICON_COLOR,
...styles,
},
'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',
'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'
);
}
}
class ArrowDownIconComponent extends SvgComponent {
constructor(style = {}) {
super({
fill: ICON_COLOR,
...style,
},
'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'
);
}
}
class NetworkIconComponent extends SvgComponent {
constructor(style = {}) {
super({
fill: ICON_COLOR,
...style,
},
'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',
'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'
);
}
}
class PersonIconComponent extends SvgComponent {
constructor(style = {}) {
super({
fill: ICON_COLOR,
...style,
},
'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'
);
}
}
class LockIconComponent extends SvgComponent {
constructor(style = {}) {
super({
fill: ICON_COLOR,
...style,
},
'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'
);
}
}
class EyeIconComponent extends SvgComponent {
constructor(style = {}) {
super({
fill: ICON_COLOR,
...style,
},
'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',
'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',
);
}
}
class ArrowDownShortIconComponent extends SvgComponent {
constructor(style = {}) {
super({
fill: ICON_COLOR,
...style,
},
'M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z'
);
}
}
class ArrowUpShortIconComponent extends SvgComponent {
constructor(style = {}) {
super({
fill: ICON_COLOR,
...style,
},
'M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z'
);
}
}
class PowerIconComponent extends SvgComponent {
constructor(style = {}) {
super({
cursor: 'pointer',
height: '7.5rem',
width: '7.5rem',
background: VPN_BUTTON_BACKGROUND_COLOR,
borderRadius: '50%',
boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
padding: '20px',
// animation: 'pulse 4s infinite',
fill: ICON_COLOR,
...style,
},
'M7.5 1v7h1V1h-1z',
'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',
);
}
}
class DialogComponent extends Component {
constructor() {
super(document.createElement('div'));
this.element.style.position = 'absolute';
this.element.style.top = '0';
this.element.style.bottom = '0';
this.element.style.left = '0';
this.element.style.right = '0';
this.element.style.height = '100vh';
this.element.style.background = 'rgba(0, 0, 0, 0.5)';
this.element.style.backdropFilter = 'blur(5px)';
this.element.style.display = 'flex';
this.element.style.alignItems = 'center';
this.element.style.justifyContent = 'center';
this.element.style.visibility = 'hidden';
this.element.style.opacity = '0';
this.element.addEventListener('click', (event) => {
if (event.target === this.element) {
this.close();
}
});
this.onCloseEvent = null
}
setOnCloseEvent(callback) {
this.onCloseEvent = callback
}
setContent(content) {
if (!(content instanceof DialogContentComponent)) {
throw new TypeError('Content must be a DialogContentComponent');
}
this.append(content);
}
close() {
this.element.style.opacity = '0';
this.element.style.animation = 'fade-out 0.3s forwards';
setTimeout(() => {
this.element.style.display = 'none';
this.element.style.pointerEvents = 'none';
if (this.onCloseEvent != null) {
this.onCloseEvent()
}
}, 300);
}
show() {
this.element.style.opacity = '1';
this.element.style.visibility = 'visible';
this.element.style.display = 'flex';
this.element.style.animation = 'fade-in 0.3s forwards';
this.element.style.pointerEvents = 'auto';
if (!document.body.contains(this.element)) {
document.body.append(this.element);
}
}
}
class DialogContentComponent extends StyledComponent {
constructor(styles = {}) {
super(document.createElement('div'), {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
background: DIALOG_CONTENT_BACKGROUND_COLOR,
borderRadius: '5px',
maxWidth: '30rem',
width: '85%',
...styles,
});
}
setHeader(component) {
if (!(component instanceof DialogHeaderComponent)) {
throw new TypeError('Component must be a DialogHeaderComponent instance');
}
this.append(component);
}
setBody(component) {
if (!(component instanceof DialogBodyComponent)) {
throw new TypeError('Component must be a DialogBodyComponent instance');
}
this.append(component);
}
setFooter(component) {
if (!(component instanceof DialogFooterComponent)) {
throw new TypeError('Component must be a DialogFooterComponent instance');
}
this.append(component);
}
}
class DialogHeaderComponent extends StyledComponent {
constructor(styles = {}) {
super(document.createElement('div'), {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
padding: '5px',
...styles,
});
this.title = new StyledComponent(document.createElement('span'), {
fontSize: '16px',
color: DIALOG_HEADER_TITLE_COLOR,
fontFamily: 'Verdana',
fontWeight: 'bold',
padding: '5px',
});
this.closeButton = new SvgComponent({
cursor: 'pointer',
height: '35px',
width: '35px',
fill: DIALOG_HEADER_CLOSE_BUTTON_COLOR,
},
'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'
);
this.initialize();
}
setTitleText(title) {
this.title.element.innerText = title;
}
setCloseButtonClickListener(callback) {
this.closeButton.addEventListener('click', callback);
}
initialize() {
this.append(this.title);
this.append(this.closeButton);
}
}
class DialogBodyComponent extends StyledComponent {
constructor(styles = {}) {
super(document.createElement('div'), {
display: 'flex',
width: '100%',
padding: '5px',
...styles,
});
}
}
class DialogFooterComponent extends StyledComponent {
constructor(styles = {}) {
super(document.createElement('div'), {
display: 'flex',
justifyContent: 'space-between',
gap: '5px',
alignItems: 'center',
width: '100%',
padding: '5px',
...styles,
});
}
addButton(button) {
if (!(button instanceof DialogFooterButtonComponent)) {
throw new TypeError('Button must be a DialogFooterButtonComponent instance');
}
this.append(button);
}
}
class DialogFooterButtonComponent extends StyledComponent {
constructor(text, onclick, styles = {}) {
super(document.createElement('button'), {
fontSize: '14px',
fontWeight: 'bold',
color: DIALOG_FOOTER_BUTTON_TEXT_COLOR,
background: DIALOG_FOOTER_BUTTON_COLOR,
border: 'none',
borderRadius: '3px',
padding: '5px 10px',
width: '100%',
cursor: 'pointer',
boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
...styles,
});
this.setText(text)
this.setClickListener(onclick);
}
setText(text) {
this.element.innerText = text;
}
setClickListener(callback) {
this.addEventListener('click', callback);
}
}
class ConfigComponent extends StyledComponent {
constructor(styles = {}) {
super(document.createElement('div'), {
display: 'flex',
gap: '5px',
alignItems: 'center',
textAlign: 'left',
marginTop: '5px',
padding: '5px',
background: 'rgba(255, 255, 255, 0.1)',
width: '100%',
borderRadius: '5px',
filter: 'drop-shadow rgba(0, 0, 0, 0.5)',
...styles
});
this.image = document.createElement('img');
this.name = document.createElement('span');
this.description = document.createElement('span');
this.mode = document.createElement('span');
this.initialize();
}
setImage(url) {
this.image.src = url;
}
setName(name) {
this.name.innerHTML = name;
}
setDescription(description) {
this.description.innerHTML = description;
}
setMode(mode) {
this.mode.innerHTML = mode;
}
initialize() {
this.setImageStyles();
this.setNameStyles();
this.setDescriptionStyles();
this.setModeStyles();
const startArea = this.createStartArea();
const endArea = this.createEndArea();
this.appendElements(startArea, endArea);
}
setImageStyles() {
this.image.style.width = '40px';
this.image.style.height = '40px';
}
setNameStyles() {
this.name.style.fontSize = '12px';
this.name.style.fontFamily = 'Verdana', 'sans-serif;';
this.name.style.color = '#b0a8ffff';
this.name.style.fontWeight = 'bold';
}
setDescriptionStyles() {
this.description.style.fontSize = '10px';
this.description.style.fontFamily = 'Verdana', 'sans-serif;';
this.description.style.color = '#b0a8ffff';
this.description.style.fontWeight = 'bold';
this.description.style.fontStyle = 'italic';
}
setModeStyles() {
this.mode.style.fontSize = '10px';
this.mode.style.fontFamily = 'Verdana', 'sans-serif;';
this.mode.style.color = '#b0a8ffff'
this.mode.style.fontWeight = 'bold';
this.mode.style.fontStyle = 'italic';
this.mode.style.whiteSpace = 'nowrap';
}
createStartArea() {
const startArea = document.createElement('div');
startArea.style.display = 'flex';
startArea.style.width = '100%';
startArea.style.gap = '10px';
startArea.style.flexDirection = 'column';
startArea.appendChild(this.name);
startArea.appendChild(this.description);
return startArea;
}
createEndArea() {
const endArea = document.createElement('div');
endArea.style.display = 'flex';
endArea.style.flexDirection = 'column';
endArea.style.alignItems = 'end';
endArea.style.alignSelf = 'end';
endArea.style.width = '50%';
endArea.appendChild(this.mode);
return endArea;
}
appendElements(startArea, endArea) {
this.appendChild(this.image);
this.appendChild(startArea);
this.appendChild(endArea);
}
}
class CategoryComponent extends StyledComponent {
constructor(styles = {}, items = []) {
super(document.createElement('div'), {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
textAlign: 'center',
padding: '2px',
width: '100%',
...styles
});
this.items = items;
this.name = document.createElement('span');
this.setNameStyles();
this.initialize();
this.setItems(items);
}
setNameStyles() {
this.name.style.width = '100%';
this.name.style.borderRadius = '5px';
this.name.style.fontSize = '12px'
this.name.style.fontFamily = 'Verdana';
this.name.style.color = '#b0a8ffff';
this.name.style.background = 'rgba(255, 255, 255, 0.1)';
this.name.style.padding = '5px';
this.name.style.fontWeight = 'bold';
}
setName(value) {
this.name.innerHTML = value;
}
setItems(items) {
items.forEach(item => this.append(item));
}
initialize() {
this.appendChild(this.name);
}
}
class ConfigBodyComponent extends DialogBodyComponent {
constructor(items) {
super({
flexDirection: 'column',
gap: '5px',
maxHeight: '70vh',
overflowY: 'auto'
});
items.forEach(item => this.append(item));
}
}
class LoggerItemComponent extends StyledComponent {
constructor(styles = {}, message) {
super(document.createElement('span'), {
fontFamily: 'monospace',
width: '100%',
fontSize: '15px',
color: LOGGER_TEXT_COLOR,
...styles,
});
this.element.innerHTML = message
}
}
class LoggerBodyComponent extends DialogBodyComponent {
constructor(styles = {}, items = []) {
super({
flexDirection: 'column',
maxHeight: '65vh',
overflowY: 'auto',
width: '100%',
...styles,
});
this.setItems(items);
}
setItems(items) {
this.element.innerHTML = '';
items.forEach(item => this.append(item));
this.scrollDown();
}
scrollDown() {
this.element.scrollTop = this.element.scrollHeight;
}
}
class CheckUserBodyComponent extends DialogBodyComponent {
constructor(data = {}) {
super()
const component = new StyledComponent(document.createElement('div'), {
display: 'flex',
flexDirection: 'column',
color: '#b0a8ffff',
fontFamily: 'Verdana',
gap: '2px',
textAlign: 'center',
width: '100%',
});
component.element.innerHTML = `
<span style="color: ${CHECKUSER_TEXT_COLOR}">👤Nome de usuario: ${data.username}</span>
<span style="color: ${CHECKUSER_TEXT_COLOR}">📆Expira em: ${data.expiration_date}</span>
<span style="color: ${CHECKUSER_TEXT_COLOR}">📆Dias restantes: ${data.expiration_days}</span>
<span style="color: ${CHECKUSER_TEXT_COLOR}">🚫Conexoes: ${data.count_connections}|${data.limit_connections}</span>
`
this.append(component)
}
}
class VpnStateComponent extends StyledComponent {
constructor(style = {}) {
super(document.createElement('span'), {
fontSize: '1.5tem',
fontFamily: 'Verdana',
fontWeight: 'bold',
color: VPN_STATE_TEXT_COLOR,
marginTop: '2rem',
...style,
})
this.setState('DISCONNECTED')
}
setState(state) {
this.element.innerHTML = state
}
}
class LocalIPComponent extends StyledComponent {
constructor(styles = {}) {
super(document.createElement('span'), {
position: 'absolute',
fontSize: '1rem',
fontFamily: 'Verdana',
color: TEXT_COLOR,
top: `${totalTopValue}px`,
left: '10px',
display: 'flex', // Adicionando display: flex para ativar o flexbox
justifyContent: 'center', // Centralizar horizontalmente
alignItems: 'center', // Centralizar verticalmente
...styles,
});
this.setIP(window?.DtGetLocalIP?.execute() ?? '127.0.0.1');
setInterval(() => {
this.setIP(window?.DtGetLocalIP?.execute() ?? '127.0.0.1');
}, 1000);
}
setIP(ip) {
this.element.innerHTML = `IP Local: ${ip}`;
}
}
const statusBarHeight = window?.DtGetStatusBarHeight?.execute();
const extraPixels = 3; // Number of extra pixels you want to add
const defaultHeight = 60; // Default height if statusBarHeight is undefined
const totalTopValue = (statusBarHeight !== undefined ? statusBarHeight : defaultHeight) + extraPixels;
class NetworkStatsComponent extends StyledComponent {
constructor(styles = {}) {
super(document.createElement('div'), {
display: 'flex',
position: 'absolute',
gap: '10px',
top: `${(totalTopValue) + 10}px`,
right: '5px',
...styles,
});
this.meterDownContainer = this.createMeterContainer();
this.meterDownText = this.createMeterText();
this.arrowDownShortIcon = new ArrowDownShortIconComponent();
this.meterDownContainer.append(this.arrowDownShortIcon);
this.meterDownContainer.append(this.meterDownText);
this.meterUpContainer = this.createMeterContainer();
this.meterUpText = this.createMeterText();
this.arrowUpShortIcon = new ArrowUpShortIconComponent();
this.meterUpContainer.append(this.arrowUpShortIcon);
this.meterUpContainer.append(this.meterUpText);
this.append(this.meterDownContainer);
this.append(this.meterUpContainer);
this.getNetworkDownloadFn = () => window?.DtGetNetworkDownloadBytes?.execute() ?? 0;
this.getNetworkUploadFn = () => window?.DtGetNetworkUploadBytes?.execute() ?? 0;
this.currentNetworkDownload = parseFloat(localStorage.getItem('networkDownload') ?? this.getNetworkDownloadFn());
this.currentNetworkUpload = parseFloat(localStorage.getItem('networkUpload') ?? this.getNetworkUploadFn());
localStorage.setItem('networkDownload', this.currentNetworkDownload);
localStorage.setItem('networkUpload', this.currentNetworkUpload);
this.showMeter();
setInterval(() => this.showMeter(), 1000);
}
createMeterContainer() {
return new StyledComponent(document.createElement('div'), {
display: 'flex',
alignItems: 'center',
});
}
createMeterText() {
return new StyledComponent(document.createElement('span'), {
fontSize: '1rem',
marginLeft: '-5px',
fontFamily: 'Helvetica',
fontWeight: 'bold',
whiteSpace: 'nowrap',
color: '#fff',
});
}
formatBytes(bytes) {
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
if (bytes === 0) return '0 B';
const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return (bytes / Math.pow(1024, i)).toPrecision(3) + ' ' + sizes[i];
}
showMeter() {
const newNetworkDownload = this.getNetworkDownloadFn();
const newNetworkUpload = this.getNetworkUploadFn();
if (!isNaN(newNetworkDownload) && !isNaN(newNetworkUpload)) {
this.meterDownText.element.innerHTML = this.formatBytes(newNetworkDownload - this.currentNetworkDownload);
this.meterUpText.element.innerHTML = this.formatBytes(newNetworkUpload - this.currentNetworkUpload);
}
}
}
class PingComponent extends StyledComponent {
constructor(styles = {}) {
super(document.createElement('span'), {
position: 'absolute',
fontSize: '1rem',
fontFamily: 'Helvetica',
fontWeight: 'bold',
whiteSpace: 'nowrap',
top: `${totalTopValue}px`,
right: '10px',
...styles,
});
this.startPing();
}
async startPing() {
this.setPing(await this.ping());
setInterval(async () => this.setPing(await this.ping()), 1000);
}
setPing(ping) {
this.element.textContent = `PING: ${ping}ms`;
const pingValue = parseInt(ping, 10);
const color = this.getColorFromPing(pingValue);
this.setStyles({ color });
}
getColorFromPing(ping) {
const pingValue = parseInt(ping, 10);
const color = pingValue >= 0 && pingValue <= 50 ? '#00ff00' :
pingValue > 50 && pingValue <= 100 ? '#ffff00' :
'#ff0000';
return color;
}
async ping() {
const startTime = new Date().getTime();
const url = `https://cdn-icons-png.flaticon.com/512/7517/7517373.png?${startTime}`
try {
const data = await fetch(url)
return new Date().getTime() - startTime;
} catch (err) {
console.log(err);
return -1;
}
}
}
class IframeBodyComponent extends DialogBodyComponent {
constructor(styles = {}, url = null) {
super({
height: '600px',
...styles
})
this.iframeElement = new StyledComponent(document.createElement('iframe'), {
width: '100%',
border: 'none',
borderRadius: '5px'
})
this.setUrl(url)
this.append(this.iframeElement)
}
setUrl(url) {
this.iframeElement.element.src = url
}
}
class CleanAppMessageBodyComponent extends DialogBodyComponent {
constructor(styles = {}, url = null) {
super({
height: 'auto',
...styles
})
this.spanComponent = new StyledComponent(document.createElement('span'), {
fontSize: '16px',
fontFamily: 'Helvetica',
fontWeight: 'bold',
color: TEXT_COLOR,
})
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?'
this.append(this.spanComponent)
}
}
class StyledButtonComponent extends StyledComponent {
constructor(text, styles = {}) {
super(document.createElement('button'), {
width: '100%',
borderRadius: '5px',
padding: '10px',
border: 'none',
color: TEXT_COLOR,
background: BUTTON_BACKGROUND_COLOR,
boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
cursor: 'pointer',
filter: 'drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5))',
...styles
});
this.textComponent = new StyledComponent(document.createElement('span'), {
fontSize: '16px',
fontWeight: 'bold',
});
this.textComponent.element.innerHTML = text;
this.appendChild(this.textComponent);
}
}
class ButtonDonateComponent extends StyledButtonComponent {
constructor(styles = {}) {
super('PREMIUM', styles);
this.addEventListener('click', () => window?.DtStartWebViewActivity?.execute())
}
}
class ButtonApnSettingsComponent extends StyledButtonComponent {
constructor(styles = {}) {
super('APN', styles);
this.addEventListener('click', () => window?.DtStartApnActivity?.execute())
}
}
class ButtonTermsComponent extends StyledButtonComponent {
constructor(styles = {}) {
super('TERMOS', styles);
this.addEventListener('click', () => {
window?.DtStartWebViewActivity?.execute(TERMS_URL)
})
}
}
class ButtonHostPotComponent extends StyledButtonComponent {
constructor(styles = {}) {
super('HOTSPOT', styles);
// Flag para controlar o estado do hotspot
this.hotSpotRunning = false;
this.addEventListener('click', () => {
// Função para iniciar o hotspot
const startHotSpot = () => {
DtStartHotSpotService.execute();
this.textContent = 'HOTSPOT';
this.hotSpotRunning = true;
};
// Função para parar o hotspot
const stopHotSpot = () => {
DtStopHotSpotService.execute();
this.textContent = 'HOTSPOT';
this.hotSpotRunning = false;
};
// Função para alternar o estado do hotspot
const toggleHotSpot = () => {
this.hotSpotRunning ? stopHotSpot() : startHotSpot();
};
// Chama a função para alternar o estado do hotspot
toggleHotSpot();
});
}
}
const rootComponent = new AppComponent(document.querySelector('#root'), { background: BACKGROUND_COLOR });
rootComponent.append(new LocalIPComponent());
rootComponent.append(new PingComponent());
rootComponent.append(new NetworkStatsComponent());
const cardComponent = new CardComponent({
position: 'absolute',
bottom: '45%',
background: 'transparent',
boxShadow: 'none',
filter: 'drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5))',
})
const configInputGroup = new InputGroupComponent({ cursor: 'pointer', background: INPUT_COLOR });
configInputGroup.addEventListener('click', () => {
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"}]}]'
const items = JSON.parse(window?.DtGetConfigs?.execute() || mock)
items.sort((a, b) => a.sorter - b.sorter)
items.forEach(item => item.items.sort((a, b) => a.sorter - b.sorter))
const dialogComponent = new DialogComponent()
const dialogContentComponent = new DialogContentComponent()
const dialogHeaderComponent = new DialogHeaderComponent()
dialogHeaderComponent.setTitleText('CONFIGURAÇÕES')
dialogHeaderComponent.setCloseButtonClickListener(() => dialogComponent.close())
const configBodyComponent = new ConfigBodyComponent(items.map(item => {
const category = new CategoryComponent()
category.setName(item.name)
category.setItems(item.items.map(item => {
const config = new ConfigComponent()
config.setName(item.name)
config.setDescription(item.description ?? '')
config.setMode(item.mode)
config.setImage(item.icon)
config.addEventListener('click', () => {
window?.DtSetConfig?.execute(item.id)
dialogComponent.close()
})
return config
}))
return category
}))
dialogContentComponent.setHeader(dialogHeaderComponent)
dialogContentComponent.setBody(configBodyComponent)
dialogComponent.setContent(dialogContentComponent)
dialogComponent.show()
})
cardComponent.append(configInputGroup)
const arrowDownIconComponent = new ArrowDownIconComponent()
const networkIconComponent = new NetworkIconComponent()
const configInput = new InputText({ cursor: 'pointer' })
configInput.setEnabled(false)
configInput.setPlaceholder('SELECIONE UMA CONFIG.')
configInput.setValue(JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{}').name ?? '')
configInputGroup.append(networkIconComponent, configInput, arrowDownIconComponent)
const userPassContainer = new StyledComponent(document.createElement('div'), {
width: '100%',
display: 'flex',
gap: '5px',
})
cardComponent.append(userPassContainer)
const usernameGroupComponent = new InputGroupComponent({ background: INPUT_COLOR });
const personIconComponent = new PersonIconComponent()
const usernameInput = new InputText()
usernameInput.setPlaceholder('Nome de usuario')
usernameInput.setValue(window?.DtUsername?.get() ?? '')
usernameInput.setOnInputListener(() => { window?.DtUsername?.set(usernameInput.value) })
usernameGroupComponent.append(personIconComponent, usernameInput)
userPassContainer.append(usernameGroupComponent)
const passwordGroupComponent = new InputGroupComponent({ background: INPUT_COLOR });
const lockIconComponent = new LockIconComponent()
const passwordInput = new InputPassword()
const eyeIconComponent = new EyeIconComponent()
eyeIconComponent.addEventListener('click', () => { passwordInput.setShowing(!passwordInput.isShowing) })
passwordInput.setPlaceholder('Senha')
passwordInput.setValue(window?.DtPassword?.get() ?? '')
passwordInput.setOnInputListener(() => { window?.DtPassword?.set(passwordInput.value) })
passwordGroupComponent.append(lockIconComponent, passwordInput, eyeIconComponent)
userPassContainer.append(passwordGroupComponent)
const v2rayUuidGroupComponent = new InputGroupComponent({ background: INPUT_COLOR });
const v2rayLockIconComponent = new LockIconComponent();
const v2rayUuidInput = new InputPassword()
v2rayUuidInput.setPlaceholder('V2Ray UUID')
v2rayUuidInput.setValue(window?.DtUuid?.get() ?? '')
v2rayUuidInput.setOnInputListener(() => { window?.DtUuid?.set(v2rayUuidInput.value) })
v2rayUuidGroupComponent.append(v2rayLockIconComponent, v2rayUuidInput)
cardComponent.append(v2rayUuidGroupComponent)
const buttonAndStateContainer = new StyledComponent(document.createElement('div'), {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
position: 'absolute',
top: '10%',
})
const startOrStopButtonComponent = new PowerIconComponent()
startOrStopButtonComponent.addEventListener('click', () => {
if (DtGetVpnState.execute() != 'DISCONNECTED') {
DtExecuteVpnStop.execute()
} else {
DtExecuteVpnStart.execute()
}
})
buttonAndStateContainer.append(startOrStopButtonComponent)
const vpnStateComponent = new VpnStateComponent()
buttonAndStateContainer.append(vpnStateComponent)
const cardToolsComponent = new CardComponent({
flexDirection: 'row',
justifyContent: 'space-between',
position: 'absolute',
bottom: '13%',
background: 'transparent',
boxShadow: 'none',
})
const calanderIconComponent = new CalanderIconComponent()
calanderIconComponent.addEventListener('click', () => window?.DtStartCheckUser?.execute())
cardToolsComponent.append(calanderIconComponent)
const dialogComponent = new DialogComponent()
const dialogContentComponent = new DialogContentComponent()
const dialogHeaderComponent = new DialogHeaderComponent()
const dialogFooterComponent = new DialogFooterComponent()
const loggerBodyComponent = new LoggerBodyComponent({})
dialogHeaderComponent.setTitleText('REGISTRO')
dialogHeaderComponent.setCloseButtonClickListener(() => dialogComponent.close())
dialogFooterComponent.addButton(new DialogFooterButtonComponent(
'LIMPAR',
() => window?.DtClearLogs?.execute()
))
dialogFooterComponent.addButton(new DialogFooterButtonComponent(
'FECHAR',
() => dialogComponent.close()
))
dialogContentComponent.setHeader(dialogHeaderComponent)
dialogContentComponent.setBody(loggerBodyComponent)
dialogContentComponent.setFooter(dialogFooterComponent)
dialogComponent.setContent(dialogContentComponent)
const loggerIconComponent = new LoggerIconComponent()
loggerIconComponent.addEventListener('click', () => dialogComponent.show())
cardToolsComponent.append(loggerIconComponent)
const arrowRepeatIconComponent = new ArrowRepeatIconComponent()
arrowRepeatIconComponent.addEventListener('click', () => window?.DtStartAppUpdate?.execute());
cardToolsComponent.append(arrowRepeatIconComponent)
const batteryIconComponent = new BatteryIconComponent()
batteryIconComponent.addEventListener('click', () => window?.DtIgnoreBatteryOptimizations?.execute());
cardToolsComponent.append(batteryIconComponent)
const speedMeterComponent = new SpeedMeterIconComponent()
speedMeterComponent.addEventListener('click', () => {
const dialog = new DialogComponent()
const content = new DialogContentComponent()
const header = new DialogHeaderComponent()
header.setTitleText('SPEEDTEST')
header.setCloseButtonClickListener(() => dialog.close())
const body = new IframeBodyComponent({}, 'https://fast.com')
content.setHeader(header)
content.setBody(body)
dialog.setOnCloseEvent(() => body.setUrl(""))
dialog.setContent(content)
dialog.show()
})
cardToolsComponent.append(speedMeterComponent)
const trashIconComponent = new TrashIconComponent()
trashIconComponent.addEventListener('click', () => {
const dialog = new DialogComponent()
const content = new DialogContentComponent()
const header = new DialogHeaderComponent()
const footer = new DialogFooterComponent()
footer.addButton(new DialogFooterButtonComponent('NÃO', () => dialog.close()))
footer.addButton(new DialogFooterButtonComponent('SIM', () => window?.DtCleanApp?.execute()))
header.setTitleText('LIMPAR DADOS')
header.setCloseButtonClickListener(() => dialog.close())
content.setHeader(header)
content.setBody(new CleanAppMessageBodyComponent())
content.setFooter(footer)
dialog.setContent(content)
dialog.show()
})
cardToolsComponent.append(trashIconComponent)
const buttonsCard = new CardComponent({
flexDirection: 'row',
justifyContent: 'space-between',
position: 'absolute',
bottom: '5%',
background: 'transparent',
boxShadow: 'none',
})
const buttonHostPotCard = new CardComponent({
flexDirection: 'row',
justifyContent: 'space-between',
position: 'absolute',
bottom: '22%',
background: 'transparent',
boxShadow: 'none',
})
buttonsCard.append(new ButtonDonateComponent())
buttonsCard.append(new ButtonApnSettingsComponent())
buttonsCard.append(new ButtonTermsComponent())
buttonHostPotCard.append(new ButtonHostPotComponent())
rootComponent.append(buttonAndStateContainer)
rootComponent.append(cardComponent)
rootComponent.append(cardToolsComponent)
rootComponent.append(buttonsCard)
rootComponent.append(buttonHostPotCard)
const dtCheckUserModelListener = model => {
const data = JSON.parse(model ?? `{"username": "test"}`)
const dialogComponent = new DialogComponent()
const dialogContentComponent = new DialogContentComponent()
const dialogHeaderComponent = new DialogHeaderComponent()
dialogHeaderComponent.setTitleText(`📆 Olá, ${data.username}`)
dialogHeaderComponent.setCloseButtonClickListener(() => dialogComponent.close())
dialogContentComponent.setHeader(dialogHeaderComponent)
dialogContentComponent.setBody(new CheckUserBodyComponent(data))
dialogComponent.setContent(dialogContentComponent)
dialogComponent.show()
}
const dtConfigClickListener = () => {
const data = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{"auth":{"password": ""}, "mode": "v2ra"}')
configInput.setValue(data.name ?? '')
const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
usernameGroupComponent.setStyles({
display: isV2ray || data?.auth?.username ? 'none' : 'flex',
})
passwordGroupComponent.setStyles({
display: isV2ray || data?.auth?.password ? 'none' : 'flex',
})
v2rayUuidGroupComponent.setStyles({
display: !isV2ray || data?.auth?.v2ray_uuid ? 'none' : 'flex',
})
}
const dtVpnStateListener = state => {
const isRunning = state != 'DISCONNECTED';
vpnStateComponent.setState((window?.DtTranslateText?.execute('LBL_STATE_' + state) ?? 'UNKNOWN').toUpperCase())
usernameInput.setEnabled(!isRunning)
passwordInput.setEnabled(!isRunning)
}
const dtOnNewLogListener = () => {
const mock = [];
for (let i = 0; i < 300; i++) {
mock.push({ 'TIME': 'MESSAGE ' + i })
}
const data = JSON.parse(window?.DtGetLogs?.execute() ?? JSON.stringify(mock))
loggerBodyComponent.setItems(data.map(log => {
return new LoggerItemComponent({}, Object.keys(log)[0] + ' ' + log[Object.keys(log)])
}))
}
dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')
dtOnNewLogListener()
dtConfigClickListener()
function createElements() {
const container = document.createElement("div");
container.classList.add("container");
container.style.position = 'absolute';
const content = document.createElement("div");
content.classList.add("content");
const background = document.createElement("div");
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "16");
svg.setAttribute("height", "16");
svg.setAttribute("fill", "currentColor");
svg.classList.add("bi", "bi-git");
svg.setAttribute("viewBox", "0 0 16 16");
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", "M15.698 7.287 8.712.302a1.03 1.03 0 0 0-1.457 0l-1.45 1.45 1.84 1.84a1.223 1.223 0 0 1 1.55 1.56l1.773 1.774a1.224 1.224 0 0 1 1.267 2.025 1.226 1.226 0 0 1-2.002-1.334L8.58 5.963v4.353a1.226 1.226 0 1 1-1.008-.036V5.887a1.226 1.226 0 0 1-.666-1.608L5.093 2.465l-4.79 4.79a1.03 1.03 0 0 0 0 1.457l6.986 6.986a1.03 1.03 0 0 0 1.457 0l6.953-6.953a1.031 1.031 0 0 0 0-1.457");
svg.appendChild(path);
const span = document.createElement("span");
span.classList.add("ms-2");
span.setAttribute("id", "version");
span.textContent = ' 1.1';
// Montando a estrutura
background.appendChild(svg);
background.appendChild(span);
content.appendChild(background);
container.appendChild(content);
// Aplicando estilos
container.style.fontSize = '1rem';
container.style.fontFamily = 'Verdana';
container.style.color = TEXT_COLOR;
const statusBarHeight = window?.DtGetStatusBarHeight?.execute();
const extraPixels = 25; // Number of extra pixels you want to add
const defaultHeight = 60; // Default height if statusBarHeight is undefined
const totalTopValue = (statusBarHeight !== undefined ? statusBarHeight : defaultHeight) + extraPixels;
container.style.top = `${totalTopValue}px`;
container.style.left = '10px';
// Adicionando ao DOM
document.body.appendChild(container);
// Atualizar a versão a cada 2 segundos
setInterval(updateVersion, 2000);
}
// Função para atualizar a versão
function updateVersion() {
const versionElement = document.getElementById('version');
const version = window?.DtGetLocalConfigVersion?.execute() ?? ' 1.0';
versionElement.textContent = version;
}
// Chamar a função para criar elementos e configurar a versão inicial
createElements();
updateVersion();
</script>
</body>
</html>
