<!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</title>
</head>
<style>
* {
font-family: 'roboto';
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
::placeholder {
color: #FFF;
}
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 20px 5px #ffffff5d;
}
100% {
transform: scale(1);
box-shadow: none;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<body>
<div id="root"></div>
<script>
const BACKGROUND_IMAGE = JSON.parse(window?.DtGetAppConfig?.execute('APP_BACKGROUND_IMAGE') ?? '{"value": "https://i.ibb.co/pjtTQC8/487f7b22f68312d2c1bbc93b1aea445b-1702526703602.jpg"}').value;
const BACKGROUND_COLOR = BACKGROUND_IMAGE
? `url(${BACKGROUND_IMAGE}) center center / cover rgb(0, 0, 0)`
: 'linear-gradient(45deg, #000000, #000000 25%, #000000 25%, #000000 50%, #000000 50%, #000000 75%, #000000 75%, #000000)'
const INPUT_COLOR = '#36374959'
const BUTTON_BACKGROUND_COLOR = '#36374959'
const ICON_COLOR = '#FFFFFF'
const TEXT_COLOR = '#FFFFFF'
const TOOLS_BUTTON_BACKGROUND_COLOR = '#36374959'
const VPN_BUTTON_BACKGROUND_COLOR = '#36374959'
const VPN_STOPPED_COLOR = '#ff0000'
const VPN_STARTING_COLOR = '#ffff00'
const VPN_RUNNING_COLOR = '#00ff00'
const CHECKUSER_TEXT_COLOR = '#FFFFFF'
const LOGGER_TEXT_COLOR = '#FFFFFF'
const DIALOG_HEADER_TITLE_COLOR = '#FFFFFF'
const DIALOG_HEADER_CLOSE_BUTTON_COLOR = '#FFFFFF'
const DIALOG_CONTENT_BACKGROUND_COLOR = '#36374959'
const DIALOG_FOOTER_BUTTON_COLOR = '#36374959'
const DIALOG_FOOTER_BUTTON_TEXT_COLOR = '#FFFFFF'
const LINK_SUPPORT = 'https://wa.me/+5579991996384'
const TERMS_URL = 'https://laranjo.gestorssh.com.br/views/home/criar_teste.php?id=ptu&byid=1&mainid=971963'
const URL_RENOVAR = 'https://laranjo.gestorssh.com.br/index.php'
const URL_TESTE = 'https://laranjo.gestorssh.com.br/views/home/criar_teste.php?id=zw6&byid=1&mainid=760653'
const URL_MP3 = 'https://temp-mail.org/pt/'
const URL_FILMES = 'https://tvonline.fan/'
const URL_GPT = 'https://talkai.info/pt/chat/'
const URL_TV = 'https://megatvonline.biz/'
const URL_JOGOS = 'https://centerforyoung.org/?gad_source=1&gclid=Cj0KCQjw3ZayBhDRARIsAPWzx8o_53Q2gGhB8G1MN9dCiH9Orwfl0Lwker5A-hmP0gs45RObyd7jOxsaAqbbEALw_wcB'
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);
}
}
remove() {
this.element.remove();
}
contains(component) {
if (component instanceof Component) {
return this.element.contains(component.element);
} else {
return this.element.contains(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 Toast extends StyledComponent {
constructor(element, styles = {}) {
super(element, styles);
}
showToast(message, type, duration = 3000) {
this.element.innerHTML = message;
this.element.style.wordWrap = 'break-word';
this.element.style.width = '90%';
this.element.style.maxWidth = '400px';
this.element.style.textAlign = 'center';
this.element.style.display = 'block';
this.element.style.position = 'fixed';
this.element.style.bottom = '10%';
this.element.style.left = '50%';
this.element.style.transform = 'translateX(-50%)';
this.element.style.opacity = '0';
this.element.style.color = '#FFFFFF';
switch (type) {
case 'success':
this.element.style.background = 'linear-gradient(135deg, #4CAF50, #009688)';
break;
case 'error':
this.element.style.background = 'linear-gradient(135deg, #F44336, #FF5722)';
break;
case 'info':
default:
this.element.style.background = 'linear-gradient(135deg, #2196F3, #03A9F4)';
break;
}
this.element.style.padding = '10px';
this.element.style.borderRadius = '4px';
this.element.style.opacity = '0';
this.element.style.transition = 'opacity 0.3s ease-in-out';
setTimeout(() => {
this.element.style.opacity = '1';
}, 100);
setTimeout(() => this.hideToast(), duration);
this.element.addEventListener('click', () => this.hideToast());
}
hideToast() {
this.element.style.transition = 'opacity 0.3s ease-in-out';
this.element.style.opacity = '0';
setTimeout(() => {
this.element.remove();
}, 300);
}
static success(message, duration = 3000) {
const toastElement = document.createElement('div');
document.body.appendChild(toastElement);
const toast = new Toast(toastElement);
toast.showToast(message, 'success', duration);
}
static error(message, duration = 3000) {
const toastElement = document.createElement('div');
document.body.appendChild(toastElement);
const toast = new Toast(toastElement);
toast.showToast(message, 'error', duration);
}
static info(message, duration = 3000) {
const toastElement = document.createElement('div');
document.body.appendChild(toastElement);
const toast = new Toast(toastElement);
toast.showToast(message, 'info', duration);
}
}
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: '85%',
maxWidth: '23rem',
margin: '1.2rem',
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: '#FFF',
padding: '0.2rem',
borderRadius: '5px',
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: '#FFFFFF',
padding: '5px',
width: '2.2rem',
height: '2.2rem',
};
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 Spinner extends StyledComponent {
constructor() {
super(document.createElement('div'), {
display: 'flex',
width: '100%',
alignItems: 'center',
justifyContent: 'center',
padding: '20px'
});
this.createSpinnerElements();
}
createSpinnerElements() {
const spinnerElement = new StyledComponent(document.createElement('div'));
spinnerElement.setStyles({
borderTop: '4px solid transparent',
borderRight: '4px solid #ccc',
borderBottom: '4px solid #ccc',
borderLeft: '4px solid #ccc',
borderRadius: '50%',
width: '45px',
height: '45px',
animation: 'spin 1s linear infinite',
});
this.append(spinnerElement)
}
}
class IconComponent extends SvgComponent {
constructor(styles = {}, ...iconPath) {
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,
},
...iconPath,
);
}
}
class CalanderIconComponent extends IconComponent {
constructor(styles = {}) {
super(styles,
'M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z',
'M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'
);
}
}
class LoggerIconComponent extends IconComponent {
constructor(styles = {}) {
super(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 IconComponent {
constructor(styles = {}) {
super(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 MoreIconComponent extends IconComponent {
constructor(styles = {}) {
super(styles,
'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'
);
}
}
class BatteryIconComponent extends SvgComponent {
constructor(styles = {}) {
super(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 HeadsetIconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'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'
);
}
}
class RenovarIconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8m5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0',
'M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1h-.003zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195l.054.012z',
'M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083c.058-.344.145-.678.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1z',
'M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 5.982 5.982 0 0 1 3.13-1.567z'
);
}
}
class testeIconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z'
);
}
}
class Mp3IconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2m9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2',
'M14 11V2h1v9zM6 3v10H5V3z',
'M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4z',
);
}
}
class TrashIconComponent extends SvgComponent {
constructor(styles = {}) {
super(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 ReceptionIconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'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'
);
}
}
class InfoIconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'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'
);
}
}
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 RouterIconComponent extends SvgComponent {
constructor(style = {}) {
super({
fill: ICON_COLOR,
...style,
},
'M5.525 3.025a3.5 3.5 0 0 1 4.95 0 .5.5 0 1 0 .707-.707 4.5 4.5 0 0 0-6.364 0 .5.5 0 0 0 .707.707Z',
'M6.94 4.44a1.5 1.5 0 0 1 2.12 0 .5.5 0 0 0 .708-.708 2.5 2.5 0 0 0-3.536 0 .5.5 0 0 0 .707.707ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5-.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Zm2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm1.5-.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Zm2 0a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Z',
'M2.974 2.342a.5.5 0 1 0-.948.316L3.806 8H1.5A1.5 1.5 0 0 0 0 9.5v2A1.5 1.5 0 0 0 1.5 13H2a.5.5 0 0 0 .5.5h2A.5.5 0 0 0 5 13h6a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5h.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 14.5 8h-2.306l1.78-5.342a.5.5 0 1 0-.948-.316L11.14 8H4.86L2.974 2.342ZM14.5 9a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h13Z',
'M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z'
);
}
}
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'
);
}
}
////////////NOVOS////////
class FilmesIconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'M13.218 4.246L7.087 6.238a.502.502 0 0 1-.24.079L4.741 7H13.5a.5.5 0 0 1 .5.5v5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 12.5v-5c0-.106.033-.205.09-.287l-.195-.602A2.5 2.5 0 0 1 3.5 3.461l6.657-2.163a2.5 2.5 0 0 1 3.15 1.605l.232.713a.5.5 0 0 1-.321.63Zm-3.744.165l1.285-2.226a1.508 1.508 0 0 0-.293.064l-1.245.404l-1.308 2.265l1.56-.507Zm2.295-1.979a.515.515 0 0 1-.02.037l-.854 1.48l1.538-.5l-.077-.237a1.494 1.494 0 0 0-.587-.78Zm-3.97.683l-1.56.507L4.93 5.887l1.56-.507L7.8 3.115ZM2.923 6.54l.587-.19l1.307-2.266l-1.008.328a1.5 1.5 0 0 0-.963 1.89l.077.238Z'
);
}
}
class TicketPerforatedIconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'M4 4.85v.9h1v-.9zm7 0v.9h1v-.9zm-7 1.8v.9h1v-.9zm7 0v.9h1v-.9zm-7 1.8v.9h1v-.9zm7 0v.9h1v-.9zm-7 1.8v.9h1v-.9zm7 0v.9h1v-.9z',
'M1.5 3A1.5 1.5 0 0 0 0 4.5V6a.5.5 0 0 0 .5.5 1.5 1.5 0 1 1 0 3 .5.5 0 0 0-.5.5v1.5A1.5 1.5 0 0 0 1.5 13h13a1.5 1.5 0 0 0 1.5-1.5V10a.5.5 0 0 0-.5-.5 1.5 1.5 0 0 1 0-3A.5.5 0 0 0 16 6V4.5A1.5 1.5 0 0 0 14.5 3zM1 4.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v1.05a2.5 2.5 0 0 0 0 4.9v1.05a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-1.05a2.5 2.5 0 0 0 0-4.9z'
);
}
}
class RobotIconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135',
'M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5'
);
}
}
class GptIconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2',
'M9 11c0 1.105-1.12 2-2.5 2S4 12.105 4 11c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2',
'M14 11V2h1v9zM6 3v10H5V3',
'M5 2.905a1 1 0 0 1 .9-.9');
}
}
class Gpt2IconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z'
);
}
}
class JogosIconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'M11.5 6.027a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m2.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m-6.5-3h1v1h1v1h-1v1h-1v-1h-1v-1h1z',
'M3.051 3.26a.5.5 0 0 1 .354-.613l1.932-.518a.5.5 0 0 1 .62.39c.655-.079 1.35-.117 2.043-.117.72 0 1.443.041 2.12.126a.5.5 0 0 1 .622-.399l1.932.518a.5.5 0 0 1 .306.729q.211.136.373.297c.408.408.78 1.05 1.095 1.772.32.733.599 1.591.805 2.466s.34 1.78.364 2.606c.024.816-.059 1.602-.328 2.21a1.42 1.42 0 0 1-1.445.83c-.636-.067-1.115-.394-1.513-.773-.245-.232-.496-.526-.739-.808-.126-.148-.25-.292-.368-.423-.728-.804-1.597-1.527-3.224-1.527s-2.496.723-3.224 1.527c-.119.131-.242.275-.368.423-.243.282-.494.575-.739.808-.398.38-.877.706-1.513.773a1.42 1.42 0 0 1-1.445-.83c-.27-.608-.352-1.395-.329-2.21.024-.826.16-1.73.365-2.606.206-.875.486-1.733.805-2.466.315-.722.687-1.364 1.094-1.772a2.3 2.3 0 0 1 .433-.335l-.028-.079zm2.036.412c-.877.185-1.469.443-1.733.708-.276.276-.587.783-.885 1.465a14 14 0 0 0-.748 2.295 12.4 12.4 0 0 0-.339 2.406c-.022.755.062 1.368.243 1.776a.42.42 0 0 0 .426.24c.327-.034.61-.199.929-.502.212-.202.4-.423.615-.674.133-.156.276-.323.44-.504C4.861 9.969 5.978 9.027 8 9.027s3.139.942 3.965 1.855c.164.181.307.348.44.504.214.251.403.472.615.674.318.303.601.468.929.503a.42.42 0 0 0 .426-.241c.18-.408.265-1.02.243-1.776a12.4 12.4 0 0 0-.339-2.406 14 14 0 0 0-.748-2.295c-.298-.682-.61-1.19-.885-1.465-.264-.265-.856-.523-1.733-.708-.85-.179-1.877-.27-2.913-.27s-2.063.091-2.913.27'
);
}
}
class TvIconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'M2.5 13.5A.5.5 0 0 1 3 13h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5M13.991 3l.024.001a1.5 1.5 0 0 1 .538.143.76.76 0 0 1 .302.254c.067.1.145.277.145.602v5.991l-.001.024a1.5 1.5 0 0 1-.143.538.76.76 0 0 1-.254.302c-.1.067-.277.145-.602.145H2.009l-.024-.001a1.5 1.5 0 0 1-.538-.143.76.76 0 0 1-.302-.254C1.078 10.502 1 10.325 1 10V4.009l.001-.024a1.5 1.5 0 0 1 .143-.538.76.76 0 0 1 .254-.302C1.498 3.078 1.675 3 2 3zM14 2H2C0 2 0 4 0 4v6c0 2 2 2 2 2h12c2 0 2-2 2-2V4c0-2-2-2-2-2'
);
}
}
class MenuIconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'M2 10h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1m9-9h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1m0 9a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zm0-10a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM2 9a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2zm7 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2zM0 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5.354.854a.5.5 0 1 0-.708-.708L3 3.793l-.646-.647a.5.5 0 1 0-.708.708l1 1a.5.5 0 0 0 .708 0z'
);
}
}
class AjudaIconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10s10-4.486 10-10S17.514 2 12 2zm1 16h-2v-2h2v2zm.976-4.885c-.196.158-.385.309-.535.459c-.408.407-.44.777-.441.793v.133h-2v-.167c0-.118.029-1.177 1.026-2.174c.195-.195.437-.393.691-.599c.734-.595 1.216-1.029 1.216-1.627a1.934 1.934 0 0 0-3.867.001h-2C8.066 7.765 9.831 6 12 6s3.934 1.765 3.934 3.934c0 1.597-1.179 2.55-1.958 3.181z'
);
}
}
class Menu2IconComponent extends SvgComponent {
constructor(styles = {}) {
super(styles,
'M18 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 24H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V30a2 2 0 0 0-2-2ZM42 4H30a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z',
'M28 28h16m-8 8h8m-16 8h16'
);
}
}
class PowerIconComponent extends SvgComponent {
constructor(style = {}) {
super({
cursor: 'pointer',
height: '8.5rem',
width: '8.5rem',
background: VPN_BUTTON_BACKGROUND_COLOR,
borderRadius: '100%',
boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
padding: '20px',
animation: 'pulse 2.5s 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 StyledComponent {
constructor(styles = {}) {
super(document.createElement('div'), {
position: 'absolute',
top: '0',
bottom: '0',
left: '0',
right: '0',
height: '100vh',
background: 'rgba(0, 0, 0, 0.5)',
backdropFilter: 'blur(5px)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
visibility: 'hidden',
opacity: '0',
...styles,
});
this.element.addEventListener('click', (event) => {
if (event.target === this.element) {
this.close();
}
});
this.onCloseEvent = null
}
setOnCloseEventListener(callback) {
this.onCloseEvent = callback
}
setContent(content) {
if (!(content instanceof DialogContentComponent)) {
throw new TypeError('Content must be a DialogContentComponent');
}
if (!this.contains(content)) {
this.append(content);
}
}
show() {
this.setStyles({
opacity: '1',
visibility: 'visible',
display: 'flex',
animation: 'fade-in 0.3s forwards',
pointerEvents: 'auto',
})
if (!document.body.contains(this.element)) {
document.body.append(this.element);
}
}
close() {
this.setStyles({
opacity: '0',
animation: 'fade-out 0.3s forwards',
})
setTimeout(() => {
this.setStyles({
display: 'none',
pointerEvents: 'none',
})
if (this.onCloseEvent != null) {
this.onCloseEvent()
}
}, 300);
}
remove() {
if (document.body.contains(this.element)) {
this.element.remove();
}
}
}
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,
});
this.lastHeader = null;
this.lastBody = null;
this.lastFooter = null;
}
setHeader(component) {
this?.lastHeader?.remove()
this.lastHeader = component
this.append(component);
}
setBody(component) {
this?.lastBody?.remove()
this.lastBody = component
this.append(component);
}
setFooter(component) {
this?.lastFooter?.remove()
this.lastFooter = component
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: 'sans-serif',
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);
return this;
}
}
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: '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 DialogBuilder {
constructor(styles = {}) {
this.dialog = new DialogComponent(styles);
this.header = new DialogHeaderComponent();
this.content = new DialogContentComponent();
this.footer = new DialogFooterComponent();
this.footerButtons = [];
this.content.setHeader(this.header);
this.header.setCloseButtonClickListener(() => this.dialog.close());
}
static create(styles = {}) {
return new DialogBuilder(styles);
}
setTitle(title) {
this.header.setTitleText(title);
return this;
}
setAutoRemove(autoRemove) {
this.dialog.setOnCloseEventListener(() => {
if (autoRemove) {
this.dialog.remove();
}
});
return this;
}
setBody(bodyComponent) {
this.content.setBody(bodyComponent);
return this;
}
addFooterButton(text, callback) {
const button = new DialogFooterButtonComponent(text, callback);
this.footerButtons.push(button);
return this;
}
show() {
this.dialog.setContent(this.content);
if (this.footerButtons.length > 0) {
this.content.setFooter(this.footer);
this.footerButtons.forEach((button) => {
this.footer.addButton(button);
});
}
this.dialog.show();
return this;
}
close() {
this.dialog.close();
}
}
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',
...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 = 'sans-serif';
this.name.style.color = '#FFFFFF';
this.name.style.fontWeight = 'bold';
}
setDescriptionStyles() {
this.description.style.fontSize = '10px';
this.description.style.fontFamily = 'sans-serif';
this.description.style.color = '#FFFFFF';
this.description.style.fontWeight = 'bold';
this.description.style.fontStyle = 'italic';
}
setModeStyles() {
this.mode.style.fontSize = '10px';
this.mode.style.fontFamily = 'sans-serif';
this.mode.style.color = '#FFFFFF';
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 = 'sans-serif';
this.name.style.color = '#FFFFFF';
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: '65vh',
overflowY: 'auto'
});
items.forEach(item => this.append(item));
}
}
class LoggerItemComponent extends StyledComponent {
constructor(styles = {}, message) {
super(document.createElement('span'), {
fontFamily: 'monospace',
width: '100%',
fontSize: '12px',
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();
// Container principal
const mainContainer = new StyledComponent(document.createElement('div'), {
display: 'flex',
flexDirection: 'column',
height: '300px',
});
// Container do texto com rolagem
const textContainer = new StyledComponent(document.createElement('div'), {
display: 'flex',
flexDirection: 'column',
color: TEXT_COLOR,
fontFamily: 'sans-serif',
gap: '10px',
textAlign: 'center',
width: '100%',
padding: '10px',
maxHeight: '270px',
overflowY: 'auto',
});
textContainer.element.innerHTML =
`<b><span style="color: red">Informações básicas sobre o seu plano.</span></b>
<span></span>
<span style="color: ${CHECKUSER_TEXT_COLOR}">Seu plano vence no dia <b><span style="color: #4dff00">${data.expiration_date}</span></b> você ainda tem <b><span style="color: #4dff00">${data.expiration_days}</span></b> Dia(s) de acesso, seu limite máximo é de <b><span style="color: #4dff00">${data.limit_connections}</span></b> usuário(s) conectado(s), limite em uso: <b><span style="color: #4dff00">${data.count_connections}</span></b> de <b><span style="color: #4dff00">${data.limit_connections}</span></span></b>
<span></span>
<span>⚠️Se seu limite for excedido seu acesso será suspenso, caso isso aconteça você deverá entrar em contato com o adm para resolver.</span>
<span></span>
<span>Fique atento à validade do seu plano e renove sempre antes de vencer para evitar a interrupção do serviço, você pode renovar seu acesso clicando no botão abaixo ou clicando no ícone de <b>ferramentas.</b></span>
<span></span>
<span>Use seu usuário e senha vpn para entrar no painel</span>`;
const buttonContainer = new StyledComponent(document.createElement('div'), {
width: '100%',
textAlign: 'center',
marginTop: '10px',
paddingBottom: '1px'
});
// Botão "Renovar Acesso" com caixa
const renovarButtonContainer = new StyledComponent(document.createElement('div'), {
display: 'block',
width: '100%',
padding: '12px 0',
backgroundColor: '#36374959',
borderRadius: '5px'
});
const renovarButton = new StyledComponent(document.createElement('a'), {
style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '45px',
backgroundColor: '#4dff00',
color: 'white',
textDecoration: 'none',
borderRadius: '5px',
cursor: 'pointer',
transition: 'opacity 0.5s ease-in-out',
}
});
// Cria o elemento SVG
const svgIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgIcon.setAttribute('fill', '#4dff00');
svgIcon.setAttribute('class', 'bi bi-arrow-repeat');
svgIcon.setAttribute('viewBox', '0 0 16 16');
// Adicione os paths do SVG aqui dentro do svgIcon
svgIcon.innerHTML = `
<path d="M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8m5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0"></path>
<path d="M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1h-.003zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195l.054.012z"></path>
<path d="M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083c.058-.344.145-.678.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1z"></path>
<path d="M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 5.982 5.982 0 0 1 3.13-1.567z"></path>
`;
// Cria um span para o texto com a cor desejada
const textSpan = document.createElement('span');
textSpan.style.color = '#4dff00';
textSpan.style.fontWeight = 'bold'; // Adiciona negrito
textSpan.textContent = "RENOVAR ACESSO";
// Adiciona o SVG e o span do texto ao botão
renovarButton.element.appendChild(svgIcon);
renovarButton.element.appendChild(textSpan);
renovarButton.element.onclick = () => {
window?.DtStartWebViewActivity?.execute('https://laranjo.gestorssh.com.br/index.php');
};
renovarButton.element.classList.add('blink');
// Adiciona o botão ao container
renovarButtonContainer.append(renovarButton);
buttonContainer.append(renovarButtonContainer);
mainContainer.append(textContainer);
mainContainer.append(buttonContainer);
this.append(mainContainer);
}
}
// CSS
const style = document.createElement('style');
style.innerHTML = `
.blink {
animation: blinker 1.9s linear infinite;
}
@keyframes blinker {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Estilos para o SVG */
.bi-arrow-repeat {
width: 20px; /* Ajuste o tamanho aqui */
height: 20px; /* Ajuste o tamanho aqui */
margin-right: 10px; /* Ajuste o espaçamento aqui */
/* Propriedades para controlar a elevação */
position: relative; /* Permite o uso de top/bottom */
top: 6px; /* Ajuste a posição vertical aqui */
}
`;
document.head.appendChild(style);
class VpnStateComponent extends StyledComponent {
constructor(style = {}) {
super(document.createElement('span'), {
fontSize: '1.5rem',
fontFamily: 'sans-serif',
fontWeight: 'bold',
color: '#FFF',
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: 'Helvetica',
fontWeight: 'bold',
whiteSpace: 'nowrap',
color: TEXT_COLOR,
top: `${window?.DtGetStatusBarHeight?.execute() ?? '30'}px`,
left: '10px',
...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: ${ip}`
}
}
class NetworkStatsComponent extends StyledComponent {
constructor(styles = {}) {
super(document.createElement('div'), {
display: 'flex',
position: 'absolute',
gap: '5px',
top: `${(window?.DtGetStatusBarHeight?.execute() ?? 30) + 20}px`,
left: '-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();
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: `${window?.DtGetStatusBarHeight?.execute() ?? '30'}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({
minHeight: '600px',
...styles
})
this.iframeElement = new StyledComponent(document.createElement('iframe'), {
width: '100%',
border: 'none',
borderRadius: '5px',
display: 'none',
})
this.spinner = new Spinner()
this.iframeElement.addEventListener('load', () => {
this.iframeElement.setStyles({ display: 'block' })
this.spinner.setStyles({ display: 'none' })
})
this.setUrl(url)
this.applyOptions()
this.append(this.iframeElement)
this.append(this.spinner)
}
setUrl(url) {
this.iframeElement.element.src = url
}
setOnLoadListener(callback) {
this.iframeElement.addEventListener('load', callback)
}
applyOptions() {
this.iframeElement.element.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share')
this.iframeElement.element.setAttribute('allowfullscreen', '')
this.iframeElement.element.setAttribute('frameborder', '0')
}
}
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 AssistirTvMessageBodyComponent 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ê será redirecionado(a) a um site de tv grátis com vários canais abertos e fechados, porém vai ter alguns anúncios, deseja continuar?'
this.append(this.spanComponent)
}
}
class AssistirFilmesMessageBodyComponent 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ê será redirecionado(a) a um site de filmes e séries grátis, porém vai ter alguns anúncios, deseja continuar?'
this.append(this.spanComponent)
}
}
class JogosMessageBodyComponent 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ê será redirecionado(a) a um site com varios jogos para navegadores para que você possa está se divertindo em seu tempo livre, deseja continuar?'
this.append(this.spanComponent)
}
}
class GPTMessageBodyComponent 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ê será redirecionado(a) a um site com o chat GPT, você poderá usar para estidos e etc, o aite é totalmente grátis e por isso vai ter alguns anúncios, deseja continuar?'
this.append(this.spanComponent)
}
}
class StyledButtonComponent extends StyledComponent {
constructor(text, icon, onclick, 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',
display: 'flex',
alignItems: 'center',
...styles
});
this.textComponent = new StyledComponent(document.createElement('span'), {
fontSize: '16px',
fontWeight: 'bold',
});
this.textComponent.element.innerHTML = text;
this.element.addEventListener('click', onclick)
this.append(icon ?? '')
this.append(this.textComponent);
}
}
class ApnSettingStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'APN',
new ReceptionIconComponent(),
() => window?.DtStartApnActivity?.execute()
)
}
}
class TermsStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'TUTORIAL',
new InfoIconComponent(),
() => window?.DtStartWebViewActivity?.execute(TERMS_URL)
)
}
}
class BatteryStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'BATERIA',
new BatteryIconComponent(),
() => window?.DtIgnoreBatteryOptimizations?.execute(),
)
}
}
class SupportStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'SUPORTE',
new HeadsetIconComponent(),
() => window?.DtStartWebViewActivity?.execute(LINK_SUPPORT)
);
}
}
class SpeedTestStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'RENOVAR',
new RenovarIconComponent(),
() => window?.DtStartWebViewActivity?.execute(URL_RENOVAR)
)
}
}
class testeStyledButtonComponent extends StyledButtonComponent {
static dialog = DialogBuilder.create({ zIndex: 1 })
.setTitle('GERAR TESTE')
.setBody(new IframeBodyComponent({}, URL_TESTE))
constructor() {
super(
'GERAR TESTE',
new testeIconComponent(),
() => this.dialog.show(),
)
}
get dialog() {
return testeStyledButtonComponent.dialog;
}
}
class Mp3StyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'MÚSICA$',
new Mp3IconComponent(),
() => window?.DtStartWebViewActivity?.execute(URL_MP3)
)
}
}
class filmesOnlineStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'BOTAO TESTE 1',
new Mp3IconComponent(),
() => window?.DtStartWebViewActivity?.execute(URL_FILMES)
)
}
}
class TVOnlineStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'BOTAO TESTE 2',
new Mp3IconComponent(),
() => window?.DtStartWebViewActivity?.execute(URL_TV)
)
}
}
class OpenAiStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'BOTAO TESTE 3',
new Mp3IconComponent(),
() => window?.DtStartWebViewActivity?.execute(URL_GPT)
)
}
}
class JogosStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'BOTAO TESTE 4',
new Mp3IconComponent(),
() => window?.DtStartWebViewActivity?.execute(URL_JOGOS)
)
}
}
class CleanAppStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'RESETAR APP',
new TrashIconComponent(),
() => {
const dialog = DialogBuilder.create()
.setTitle('LIMPAR DADOS')
.setAutoRemove(true)
.setBody(new CleanAppMessageBodyComponent())
.addFooterButton('NÃO', () => dialog.close())
.addFooterButton('SIM', () => window?.DtCleanApp?.execute())
.show();
})
}
}
class MsgTVStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'TV',
new TvIconComponent(),
() => {
const dialog = DialogBuilder.create()
.setTitle('ASSISTA TV GRÁTIS')
.setAutoRemove(true)
.setBody(new AssistirTvMessageBodyComponent())
.addFooterButton('SAIR', () => dialog.close())
.addFooterButton('CONTINUAR', () => {
window?.DtStartWebViewActivity?.execute(URL_TV);
})
.show();
});
}
}
class MsgFILMESStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'FILMES',
new FilmesIconComponent(),
() => {
const dialog = DialogBuilder.create()
.setTitle('ASSISTA FILMES GRÁTIS')
.setAutoRemove(true)
.setBody(new AssistirFilmesMessageBodyComponent())
.addFooterButton('SAIR', () => dialog.close())
.addFooterButton('CONTINUAR', () => {
window?.DtStartWebViewActivity?.execute(URL_FILMES);
})
.show();
});
}
}
class MsgJOGOSStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'JOGOS',
new JogosIconComponent(),
() => {
const dialog = DialogBuilder.create()
.setTitle('JOGOS PARA PASSAR O TEMPO')
.setAutoRemove(true)
.setBody(new JogosMessageBodyComponent())
.addFooterButton('SAIR', () => dialog.close())
.addFooterButton('CONTINUAR', () => {
window?.DtStartWebViewActivity?.execute(URL_JOGOS);
})
.show();
});
}
}
class MsgGPTStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'GPT',
new RobotIconComponent(),
() => {
const dialog = DialogBuilder.create()
.setTitle('CHAT GPT GRÁTIS')
.setAutoRemove(true)
.setBody(new GPTMessageBodyComponent())
.addFooterButton('SAIR', () => dialog.close())
.addFooterButton('CONTINUAR', () => {
window?.DtStartWebViewActivity?.execute(URL_GPT);
})
.show();
});
}
}
class HotSpotStyledButtonComponent extends StyledButtonComponent {
constructor() {
super(
'ROTEAR VPN',
new RouterIconComponent(),
() => this.toggleHotSpot())
this.setStyles({ display: 'flex', justifyContent: 'center' });
}
startHotSpot() {
window?.DtStartHotSpotService?.execute();
Toast.success('Proxy iniciado!')
}
stopHotSpot() {
window?.DtStopHotSpotService?.execute();
Toast.success('Proxy parado!')
}
toggleHotSpot() {
const hotSpotStatus = window?.DtGetStatusHotSpotService?.execute() ?? 'STOPPED';
hotSpotStatus == 'RUNNING' ? this.stopHotSpot() : this.startHotSpot();
}
}
class MenuDialogBodyComponent extends DialogBodyComponent {
constructor() {
super({
display: 'flex',
flexDirection: 'column',
gap: '5px'
})
}
addRowButtons(...buttons) {
const element = new StyledComponent(document.createElement('div'), {
display: 'flex',
gap: '5px',
width: '100%'
});
buttons.forEach(button => element.append(button));
this.append(element);
return this;
}
}
class ConfigInputComponent extends InputGroupComponent {
constructor() {
super({ cursor: 'pointer', background: INPUT_COLOR });
this.configInput = new InputText({ cursor: 'pointer', fontFamily: 'roboto' });
this.configInput.setEnabled(false);
this.configInput.setPlaceholder('SELECIONE UM SERVIDOR');
this.configInput.setValue(JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{}').name ?? '');
this.append(new NetworkIconComponent(), this.configInput, new ArrowDownIconComponent());
this.configure()
this.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 dialog = DialogBuilder.create()
.setTitle('CONEXÕES')
.setAutoRemove(true)
.setBody(
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);
dialog.close();
});
return config;
})
);
return category;
})
)
)
.show();
});
const originalClickListener = window.dtConfigClickListener;
window.dtConfigClickListener = () => {
if (originalClickListener) {
originalClickListener();
}
this.configure();
};
this.configure();
}
configure() {
const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{"auth":{"password": ""}, "mode": "v2ra"}')
this.configInput.setValue(config.name ?? '')
}
}
class UserPassInputComponent extends StyledComponent {
constructor() {
super(document.createElement('div'), {
display: 'flex',
marginTop: '5px',
width: '100%',
display: 'flex',
gap: '5px',
});
this.usernameGroupComponent = new InputGroupComponent({ background: INPUT_COLOR });
const personIconComponent = new PersonIconComponent();
this.usernameInput = new InputText();
this.usernameInput.setPlaceholder('Nome de usuário');
this.usernameInput.setValue(window?.DtUsername?.get() ?? '');
this.usernameInput.setOnInputListener(() => window?.DtUsername?.set(this.usernameInput.value));
this.usernameGroupComponent.append(personIconComponent, this.usernameInput);
this.append(this.usernameGroupComponent);
this.passwordGroupComponent = new InputGroupComponent({ background: INPUT_COLOR });
this.passwordInput = new InputPassword();
const eyeIconComponent = new EyeIconComponent();
eyeIconComponent.addEventListener('click', () => this.passwordInput.setShowing(!this.passwordInput.isShowing));
this.passwordInput.setPlaceholder('Senha');
this.passwordInput.setValue(window?.DtPassword?.get() ?? '');
this.passwordInput.setOnInputListener(() => { window?.DtPassword?.set(this.passwordInput.value) });
this.passwordGroupComponent.append(new LockIconComponent(), this.passwordInput, eyeIconComponent);
this.append(this.passwordGroupComponent);
this.v2rayUuidGroupComponent = new InputGroupComponent({ background: INPUT_COLOR });
this.v2rayUuidInput = new InputPassword();
this.v2rayUuidInput.setPlaceholder('V2Ray UUID');
this.v2rayUuidInput.setValue(window?.DtUuid?.get() ?? '');
this.v2rayUuidInput.setOnInputListener(() => window?.DtUuid?.set(this.v2rayUuidInput.value));
this.v2rayUuidGroupComponent.append(new LockIconComponent(), this.v2rayUuidInput);
this.append(this.v2rayUuidGroupComponent);
const originalClickListener = window.dtConfigClickListener;
window.dtConfigClickListener = () => {
if (originalClickListener) {
originalClickListener();
}
this.configure();
};
this.configure();
}
configure() {
const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{"auth":{"password": ""}, "mode": "v2ra"}')
const isV2ray = config?.mode?.toLowerCase()?.startsWith('v2ray');
this.usernameGroupComponent.setStyles({
display: isV2ray || config?.auth?.username ? 'none' : 'flex',
})
this.passwordGroupComponent.setStyles({
display: isV2ray || config?.auth?.password ? 'none' : 'flex',
})
this.v2rayUuidGroupComponent.setStyles({
display: !isV2ray || config?.auth?.v2ray_uuid ? 'none' : 'flex',
})
const isRunning = (window?.DtGetVpnState?.execute() ?? 'DISCONNECTED') != 'DISCONNECTED';
this.usernameInput.setEnabled(!isRunning)
this.passwordInput.setEnabled(!isRunning)
this.v2rayUuidInput.setEnabled(!isRunning)
}
}
class ButtonAndStateContainerComponent extends StyledComponent {
constructor(styles = {}) {
super(document.createElement('div'), {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
...styles,
});
this.startOrStopButtonComponent = new PowerIconComponent();
this.startOrStopButtonComponent.addEventListener('click', () => {
if (window?.DtGetVpnState?.execute() !== 'DISCONNECTED') {
window?.DtExecuteVpnStop?.execute();
} else {
window?.DtExecuteVpnStart?.execute();
}
});
this.append(this.startOrStopButtonComponent);
this.vpnStateComponent = new VpnStateComponent();
this.append(this.vpnStateComponent);
window.dtVpnStateListener = state => this.configureState(state);
this.configureState(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED');
}
configureState(state) {
const isRunning = state != 'DISCONNECTED';
this.vpnStateComponent.setState((window?.DtTranslateText?.execute('LBL_STATE_' + state) ?? 'UNKNOWN').toUpperCase())
if (state == 'DISCONNECTED') {
this.vpnStateComponent.setStyles({ color: VPN_STOPPED_COLOR })
this.startOrStopButtonComponent.setStyles({ fill: VPN_STOPPED_COLOR })
}
if (state != 'DISCONNECTED' && state != 'CONNECTED') {
this.vpnStateComponent.setStyles({ color: VPN_STARTING_COLOR })
this.startOrStopButtonComponent.setStyles({ fill: VPN_STARTING_COLOR })
}
if (state == 'CONNECTED') {
this.vpnStateComponent.setStyles({ color: VPN_RUNNING_COLOR })
this.startOrStopButtonComponent.setStyles({ fill: VPN_RUNNING_COLOR })
}
}
}
class CardToolsComponent extends CardComponent {
constructor() {
super({
margin: '20px 0',
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between',
background: 'transparent',
boxShadow: 'none',
});
this.loggerBody = new LoggerBodyComponent({});
this.addArrowRepeatIcon();
this.addLoggerIcon();
this.addCalanderIcon();
this.addMoreButton();
window.dtOnNewLogListener = () => this.renderizeLogger();
this.renderizeLogger();
}
addCalanderIcon() {
const calanderIconComponent = new CalanderIconComponent();
calanderIconComponent.addEventListener('click', () =>
window?.DtStartCheckUser?.execute()
);
this.append(calanderIconComponent);
}
addLoggerIcon() {
const loggerIconComponent = new LoggerIconComponent();
loggerIconComponent.addEventListener('click', () => {
const loggerDialog = DialogBuilder.create()
.setTitle('REGISTRO')
.setBody(this.loggerBody)
.setAutoRemove(true)
.addFooterButton('LIMPAR', () => window?.DtClearLogs?.execute())
.addFooterButton('FECHAR', () => loggerDialog.close())
.show();
this.loggerBody.scrollDown();
});
this.append(loggerIconComponent);
}
addArrowRepeatIcon() {
const arrowRepeatIconComponent = new ArrowRepeatIconComponent();
arrowRepeatIconComponent.addEventListener('click', () =>
window?.DtStartAppUpdate?.execute()
);
this.append(arrowRepeatIconComponent);
}
addMoreButton() {
const moreButton = new MoreIconComponent();
moreButton.addEventListener('click', () => {
DialogBuilder.create()
.setTitle('FERRAMENTAS')
.setAutoRemove(true)
.setBody(
new MenuDialogBodyComponent()
.addRowButtons(
new ApnSettingStyledButtonComponent(),
new BatteryStyledButtonComponent(),
)
.addRowButtons(
new SpeedTestStyledButtonComponent(),
new testeStyledButtonComponent(),
)
.addRowButtons(
new TermsStyledButtonComponent(),
new Mp3StyledButtonComponent(),
)
.addRowButtons(
new CleanAppStyledButtonComponent(),
new SupportStyledButtonComponent(),
)
.addRowButtons(
new MsgJOGOSStyledButtonComponent(),
new MsgGPTStyledButtonComponent(),
)
.addRowButtons(
new MsgTVStyledButtonComponent(),
new MsgFILMESStyledButtonComponent(),
)
.addRowButtons(
new HotSpotStyledButtonComponent(),
)
)
.show();
});
this.append(moreButton);
}
renderizeLogger() {
const mock = Array.from({ length: 300 }, (_, i) => ({ TIME: `MESSAGE ${i}` }));
const data = JSON.parse(window?.DtGetLogs?.execute() ?? JSON.stringify(mock))
const items = data.map(log => {
const message = Object.keys(log)[0] + ' ' + log[Object.keys(log)]
return new LoggerItemComponent({}, message)
})
this.loggerBody.setItems(items)
}
}
class CheckUserDialog {
constructor() {
this.dialog = DialogBuilder.create()
.setAutoRemove(true)
.setTitle('CHECKUSER')
.setBody(new Spinner());
}
initialize() {
window.dtCheckUserStartedListener = () => this.checkUserStartedListener();
window.dtCheckUserModelListener = model => this.checkUserModelListener(model);
}
checkUserStartedListener() {
const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{}');
if (!config.url_check_user) return;
this.dialog.show();
}
checkUserModelListener(model) {
const data = JSON.parse(model ?? '{"username": "test"}');
const now = new Date();
const hour = now.getUTCHours();
let greeting;
if (hour >= 5 && hour < 12) {
greeting = Math.random() < 0.5 ? 'bom dia' : 'bom dia, hoje está um belo dia';
} else if (hour >= 12 && hour < 18) {
greeting = Math.random() < 0.5 ? 'boa tarde' : 'boa tarde, como está se sentindo?';
} else {
greeting = Math.random() < 0.5 ? 'boa noite' : 'boa noite, a noite hoje está linda!';
}
this.dialog
.setTitle(`🟢 Olá ${data.username}, ${greeting}`)
.setBody(new CheckUserBodyComponent(data));
}
}
const rootComponent = new AppComponent(document.querySelector('#root'), { background: BACKGROUND_COLOR });
window.onerror = e => {
rootComponent.element.style.color = '#FFFFFF';
rootComponent.element.style.fontSize = '18px';
rootComponent.element.innerHTML = e
return false;
};
const cardComponent = new CardComponent({ position: 'absolute', top: '15%' });
const configInput = new ConfigInputComponent();
cardComponent.append(configInput);
const userPassInputComponent = new UserPassInputComponent()
cardComponent.append(userPassInputComponent);
const cardToolsComponent = new CardToolsComponent();
cardComponent.append(cardToolsComponent);
const buttonAndStateContainer = new ButtonAndStateContainerComponent({ marginTop: '3rem' });
cardComponent.append(buttonAndStateContainer);
rootComponent.append(new LocalIPComponent());
rootComponent.append(new PingComponent());
rootComponent.append(new NetworkStatsComponent());
rootComponent.append(cardComponent);
const checkUserDialog = new CheckUserDialog();
checkUserDialog.initialize();
</script>
</body>
</html>
