Tema dt mod

SUBMITTED BY: Buganet

DATE: Aug. 1, 2022, 9:15 p.m.

UPDATED: May 27, 2024, 11:20 a.m.

FORMAT: Text only

SIZE: 83.2 kB

History Raw Download

HITS: 2405

Report
  1. <html lang="pt-br">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>LAYOUT_APP_WEBVIEW</title>
  8. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
  9. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">
  10. <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-Q2HPLXNHN0"></script>
  11. <script>
  12. window.dataLayer = window.dataLayer || [];
  14. function gtag() {
  15. dataLayer.push(arguments);
  16. }
  17. gtag('js', new Date());
  18. gtag('config', 'G-Q2HPLXNHN0');
  19. </script>
  20. <style>
  21. * {
  22. margin: 0;
  23. padding: 0;
  24. box-sizing: border-box;
  25. -webkit-tap-highlight-color: transparent;
  26. font-family: 'Ubuntu';
  27. }
  29. ::placeholder {
  30. color: #b0a8ffff;
  32. }
  34. body {
  35. height: 100vh;
  37. }
  39. @keyframes fade-in {
  40. from {
  41. opacity: 0;
  42. }
  44. to {
  45. opacity: 1;
  46. }
  47. }
  49. @keyframes fade-out {
  50. from {
  51. opacity: 1;
  52. }
  54. to {
  55. opacity: 0;
  56. }
  57. }
  59. @keyframes pulse {
  60. 0% {
  61. transform: scale(1);
  62. box-shadow: none;
  63. }
  65. 50% {
  66. transform: scale(1.2);
  67. box-shadow: 0 0 10px 5px #b0a8ffff;
  68. }
  70. 100% {
  71. transform: scale(1);
  72. box-shadow: none;
  73. }
  74. }
  75. </style>
  76. </head>
  79. <body>
  80. <div id="root" style="width: 100%; height: 100%; background: linear-gradient(45deg, rgb(20, 20, 44), rgb(27, 27, 27), rgb(31, 28, 58)); display: flex; flex-direction: column; justify-content: center; align-items: center;">
  81. <span style="position: absolute; font-size: 1rem; font-family: Ubuntu; font-weight: bold; white-space: nowrap; color: rgb(176, 168, 255); top: 30px; left: 10px;">IP:
  82. 127.0.0.1</span>
  83. <div style="display: flex; position: absolute; gap: 5px; top: 50px; left: -5px;">
  84. <div style="display: flex; align-items: center;"><svg fill="#6205D5" width="2.2rem" height="2.2rem" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(98, 5, 213); padding: 5px; width: 2.2rem; height: 2.2rem;">
  85. <path d="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">
  86. </path>
  87. </svg><span style="font-size: 1rem; margin-left: -5px; font-family: Ubuntu; font-weight: bold; white-space: nowrap; color: rgb(255, 255, 255);">0
  88. B</span></div>
  89. <div style="display: flex; align-items: center;"><svg fill="#6205D5" width="2.2rem" height="2.2rem" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(98, 5, 213); padding: 5px; width: 2.2rem; height: 2.2rem;">
  90. <path d="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">
  91. </path>
  92. </svg><span style="font-size: 1rem; margin-left: -5px; font-family: Ubuntu; font-weight: bold; white-space: nowrap; color: rgb(255, 255, 255);">0
  93. B</span></div>
  94. </div>
  95. <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 85%; max-width: 23rem; margin: 1.2rem; border-radius: 5px; border: none; position: absolute; top: 45%;">
  96. <div style="display: flex; width: 100%; align-items: center; background: rgba(30, 28, 47, 0.314); color: rgb(255, 255, 255); padding: 0.2rem; border-radius: 50px; top: 90%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; cursor: pointer;">
  97. <svg fill="#6205D5" width="2.2rem" height="2.2rem" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(98, 5, 213); padding: 5px; width: 2.2rem; height: 2.2rem;">
  98. <path d="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"></path>
  99. <path d="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">
  100. </path>
  101. </svg><input type="text" disabled="" placeholder="SELECIONE UM SERVIDOR" style="background: transparent; border: none; width: 100%; outline: none; color: rgb(176, 168, 255); font-size: 15px; cursor: pointer; font-family: Ubuntu;"><svg fill="#6205D5" width="2.2rem" height="2.2rem" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(98, 5, 213); padding: 5px; width: 2.2rem; height: 2.2rem;">
  102. <path d="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">
  103. </path>
  104. </svg>
  105. </div>
  106. <div style="display: flex; margin-top: 5px; width: 100%; gap: 5px;">
  107. <div style="display: flex; width: 100%; align-items: center; background: rgba(30, 28, 47, 0.314); color: rgb(255, 255, 255); padding: 0.2rem; border-radius: 50px; top: 90%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
  108. <svg fill="#6205D5" width="2.2rem" height="2.2rem" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(98, 5, 213); padding: 5px; width: 2.2rem; height: 2.2rem;">
  109. <path d="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">
  110. </path>
  111. </svg><input type="text" placeholder="Nome de usuário" style="background: transparent; border: none; width: 100%; outline: none; color: rgb(176, 168, 255); font-size: 15px;">
  112. </div>
  113. <div style="display: flex; width: 100%; align-items: center; background: rgba(30, 28, 47, 0.314); color: rgb(255, 255, 255); padding: 0.2rem; border-radius: 50px; top: 90%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
  114. <svg fill="#6205D5" width="2.2rem" height="2.2rem" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(98, 5, 213); padding: 5px; width: 2.2rem; height: 2.2rem;">
  115. <path d="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">
  116. </path>
  117. </svg><input type="password" placeholder="Senha" style="background: transparent; border: none; width: 100%; outline: none; color: rgb(176, 168, 255); font-size: 15px;"><svg fill="#6205D5" width="2.2rem" height="2.2rem" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(98, 5, 213); padding: 5px; width: 2.2rem; height: 2.2rem;">
  118. <path d="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">
  119. </path>
  120. <path d="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">
  121. </path>
  122. </svg>
  123. </div>
  124. <div style="display: none; width: 100%; align-items: center; background: rgba(30, 28, 47, 0.314); color: rgb(255, 255, 255); padding: 0.2rem; border-radius: 50px; top: 90%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
  125. <svg fill="#6205D5" width="2.2rem" height="2.2rem" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(98, 5, 213); padding: 5px; width: 2.2rem; height: 2.2rem;">
  126. <path d="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">
  127. </path>
  128. </svg><input type="password" placeholder="V2Ray UUID" style="background: transparent; border: none; width: 100%; outline: none; color: rgb(176, 168, 255); font-size: 15px;">
  129. </div>
  130. </div>
  131. <div style="display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; max-width: 23rem; margin: 50px 0px; border-radius: 5px; border: none; background: transparent; box-shadow: none; filter: drop-shadow(rgba(0, 0, 0, 0.1) 2px 2px 4px);">
  132. <svg fill="#6205D5" width="45px" height="45px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(98, 5, 213); padding: 10px; width: 45px; height: 45px; cursor: pointer; background: rgba(30, 28, 47, 0.314); border-radius: 20%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
  133. <path d="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">
  134. </path>
  135. <path d="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">
  136. </path>
  137. </svg><svg fill="#6205D5" width="45px" height="45px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(98, 5, 213); padding: 10px; width: 45px; height: 45px; cursor: pointer; background: rgba(30, 28, 47, 0.314); border-radius: 20%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
  138. <path d="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">
  139. </path>
  140. <path d="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">
  141. </path>
  142. </svg><svg fill="#6205D5" width="45px" height="45px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(98, 5, 213); padding: 10px; width: 45px; height: 45px; cursor: pointer; background: rgba(30, 28, 47, 0.314); border-radius: 20%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
  143. <path d="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">
  144. </path>
  145. <path d="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">
  146. </path>
  147. </svg><svg fill="#6205D5" width="45px" height="45px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(98, 5, 213); padding: 10px; width: 45px; height: 45px; cursor: pointer; background: rgba(30, 28, 47, 0.314); border-radius: 20%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
  148. <path d="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">
  149. </path>
  150. </svg>
  151. </div>
  152. <div style="display: flex; flex-direction: column; align-items: center; position: absolute; bottom: 120%; margin-top: 3rem;">
  153. <svg fill="#6205D5" width="7.5rem" height="7.5rem" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(98, 5, 213); padding: 20px; width: 7.5rem; height: 7.5rem; cursor: pointer; background: rgba(30, 28, 47, 0.314); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; filter: drop-shadow(rgba(0, 0, 0, 0.1) 2px 2px 4px);">
  154. <path d="M7.5 1v7h1V1h-1z"></path>
  155. <path d="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">
  156. </path>
  157. </svg><span style="font-size: 1.4rem; font-family: Ubuntu; font-weight: bold; color: rgb(98, 5, 213); margin-top: 2rem;">UNKNOWN</span>
  158. </div>
  159. </div>
  160. </div>
  161. <script>
  162. const BACKGROUND_IMAGE = null // JSON.parse(window?.DtGetAppConfig?.execute('APP_BACKGROUND_IMAGE') ?? '{"value": "https://i.ibb.co/0XyvpHx/DT7xsqhdau.jpg"}').value;
  163. const BACKGROUND_COLOR = BACKGROUND_IMAGE ?
  164. `url(${BACKGROUND_IMAGE}) center center / cover rgb(32, 32, 32)` :
  165. 'linear-gradient(45deg, rgba(20, 20, 44, 1), rgb(27, 27, 27), rgba(31, 28, 58, 1))'
  167. const INPUT_COLOR = '#1e1c2f50'
  168. const BUTTON_BACKGROUND_COLOR = '#1e1c2f50'
  169. const ICON_COLOR = '#6205D5'
  170. const TEXT_COLOR = '#b0a8ffff'
  172. const TOOLS_BUTTON_BACKGROUND_COLOR = '#1e1c2f50'
  174. const VPN_BUTTON_BACKGROUND_COLOR = '#1e1c2f50'
  176. const VPN_STOPPED_COLOR = '#6205D5'
  177. const VPN_STARTING_COLOR = '#6205D5'
  178. const VPN_RUNNING_COLOR = '#6205D5'
  180. const CHECKUSER_TEXT_COLOR = '#b0a8ffff'
  181. const LOGGER_TEXT_COLOR = '#b0a8ffff'
  183. const DIALOG_HEADER_TITLE_COLOR = '#b0a8ffff'
  184. const DIALOG_HEADER_CLOSE_BUTTON_COLOR = '#b0a8ffff'
  185. const DIALOG_CONTENT_BACKGROUND_COLOR = 'linear-gradient(45deg, rgba(20, 20, 44, 1), rgb(27, 27, 27), rgba(31, 28, 58, 1))'
  186. const DIALOG_FOOTER_BUTTON_COLOR = '#1e1c2f50'
  187. const DIALOG_FOOTER_BUTTON_TEXT_COLOR = '#b0a8ffff'
  191. const URL_SPEEDTEST = 'https://fast.com'
  192. const URL_YOUTUBE = 'https://www.youtube.com/embed/g9JLURIh9lE'
  193. const URL_MP3 = 'https://www.palcomp3.com.br'
  196. const POLITC_URL = 'https://sshtproject.com/privacidade/'
  197. const TERMS_URL = 'https://sshtproject.com/termos/'
  198. const SERVER_URL = 'http://sshtproject.com/servers/'
  199. const TUTO_URL = 'https://sshtproject.com/tutoriais/'
  200. const PREMIUM_URL = 'https://sshtproject.com/premium/'
  204. class Component {
  205. constructor(element) {
  206. this.element = element;
  207. }
  209. addEventListener(event, listener) {
  210. this.element.addEventListener(event, listener);
  211. }
  213. append(component) {
  214. if (component instanceof Component) {
  215. this.element.appendChild(component.element);
  216. } else {
  217. this.element.append(component);
  218. }
  219. }
  221. appendChild(component) {
  222. if (component instanceof Component) {
  223. this.element.appendChild(component.element);
  224. } else {
  225. this.element.appendChild(component);
  226. }
  227. }
  229. remove() {
  230. this.element.remove();
  231. }
  233. contains(component) {
  234. if (component instanceof Component) {
  235. return this.element.contains(component.element);
  236. } else {
  237. return this.element.contains(component);
  238. }
  239. }
  240. }
  242. class StyledComponent extends Component {
  243. constructor(element, styles = {}) {
  244. super(element);
  245. this.styles = styles;
  246. this.setStyles(styles);
  247. }
  249. setStyles(styles) {
  250. Object.keys(styles).forEach((key) => {
  251. if (this.element.style.hasOwnProperty(key)) {
  252. this.element.style[key] = styles[key];
  253. }
  254. });
  255. }
  256. }
  258. class Toast extends StyledComponent {
  259. constructor(element, styles = {}) {
  260. super(element, styles);
  261. }
  263. showToast(message, type, duration = 3000) {
  264. this.element.innerHTML = message;
  265. this.element.style.wordWrap = 'break-word';
  266. this.element.style.width = '90%';
  267. this.element.style.maxWidth = '400px';
  268. this.element.style.textAlign = 'center';
  269. this.element.style.display = 'block';
  270. this.element.style.position = 'fixed';
  271. this.element.style.bottom = '10%';
  272. this.element.style.left = '50%';
  273. this.element.style.transform = 'translateX(-50%)';
  274. this.element.style.opacity = '0';
  275. this.element.style.color = '#FFFFFF';
  277. switch (type) {
  278. case 'success':
  279. this.element.style.background = 'linear-gradient(135deg, #4CAF50, #009688)';
  280. break;
  281. case 'error':
  282. this.element.style.background = 'linear-gradient(135deg, #F44336, #FF5722)';
  283. break;
  284. case 'info':
  285. default:
  286. this.element.style.background = 'linear-gradient(135deg, #2196F3, #03A9F4)';
  287. break;
  288. }
  290. this.element.style.padding = '10px';
  291. this.element.style.borderRadius = '4px';
  292. this.element.style.opacity = '0';
  294. this.element.style.transition = 'opacity 0.3s ease-in-out';
  295. setTimeout(() => {
  296. this.element.style.opacity = '1';
  297. }, 100);
  299. setTimeout(() => this.hideToast(), duration);
  301. this.element.addEventListener('click', () => this.hideToast());
  302. }
  304. hideToast() {
  305. this.element.style.transition = 'opacity 0.3s ease-in-out';
  306. this.element.style.opacity = '0';
  308. setTimeout(() => {
  309. this.element.remove();
  310. }, 300);
  311. }
  313. static success(message, duration = 3000) {
  314. const toastElement = document.createElement('div');
  315. document.body.appendChild(toastElement);
  316. const toast = new Toast(toastElement);
  317. toast.showToast(message, 'success', duration);
  318. }
  320. static error(message, duration = 3000) {
  321. const toastElement = document.createElement('div');
  322. document.body.appendChild(toastElement);
  323. const toast = new Toast(toastElement);
  324. toast.showToast(message, 'error', duration);
  325. }
  327. static info(message, duration = 3000) {
  328. const toastElement = document.createElement('div');
  329. document.body.appendChild(toastElement);
  330. const toast = new Toast(toastElement);
  331. toast.showToast(message, 'info', duration);
  332. }
  333. }
  335. class AppComponent extends StyledComponent {
  336. constructor(element, styles = {}) {
  337. const defaultStyles = {
  338. width: '100%',
  339. height: '100%',
  340. background: '#404258',
  341. display: 'flex',
  342. flexDirection: 'column',
  343. justifyContent: 'center',
  344. alignItems: 'center',
  345. };
  347. super(element, {
  348. ...defaultStyles,
  349. ...styles
  350. });
  351. }
  352. }
  354. class CardComponent extends StyledComponent {
  355. constructor(styles = {}) {
  356. const defaultStyles = {
  357. display: 'flex',
  358. flexDirection: 'column',
  359. alignItems: 'center',
  360. justifyContent: 'center',
  361. width: '85%',
  362. maxWidth: '23rem',
  363. margin: '1.2rem',
  364. borderRadius: '5px',
  365. border: 'none',
  366. };
  368. super(document.createElement('div'), {
  369. ...defaultStyles,
  370. ...styles
  371. });
  372. }
  373. }
  375. class InputGroupComponent extends StyledComponent {
  376. constructor(styles = {}) {
  377. const defaultStyles = {
  378. display: 'flex',
  379. width: '100%',
  380. alignItems: 'center',
  381. background: '#363749',
  382. color: '#FFF',
  383. padding: '0.2rem',
  384. borderRadius: '50px',
  385. top: '90%',
  386. boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
  387. };
  389. super(document.createElement('div'), {
  390. ...defaultStyles,
  391. ...styles
  392. });
  393. }
  395. append(...components) {
  396. components.forEach((component) => super.append(component));
  397. }
  398. }
  400. class InputComponent extends StyledComponent {
  401. constructor(styles = {}) {
  402. const defaultStyles = {
  403. background: 'transparent',
  404. border: 'none',
  405. width: '100%',
  406. outline: 'none',
  407. color: TEXT_COLOR,
  408. fontSize: '15px',
  409. };
  411. super(document.createElement('input'), {
  412. ...defaultStyles,
  413. ...styles
  414. });
  415. }
  417. setEnabled(value) {
  418. this.element.disabled = !value;
  419. }
  420. }
  422. class InputText extends InputComponent {
  423. constructor(styles = {}) {
  424. super(styles);
  425. this.element.type = 'text';
  426. }
  428. get value() {
  429. return this.element.value;
  430. }
  432. setPlaceholder(text) {
  433. this.element.placeholder = text;
  434. }
  436. setOnInputListener(callback) {
  437. this.addEventListener('input', callback);
  438. }
  440. setValue(value) {
  441. this.element.value = value;
  442. }
  444. setOnInputListener(callback) {
  445. this.addEventListener('input', callback);
  446. }
  447. }
  449. class InputPassword extends InputText {
  450. constructor(styles = {}) {
  451. super(styles);
  452. this.element.type = 'password';
  453. }
  455. setShowing(value) {
  456. this.element.type = !value ? 'password' : 'text';
  457. }
  459. get isShowing() {
  460. return this.element.type != 'password'
  461. }
  462. }
  464. class SvgComponent extends StyledComponent {
  465. constructor(styles = {}, ...paths) {
  466. const defaultStyles = {
  467. fill: '#FFFFFF',
  468. padding: '5px',
  469. width: '2.2rem',
  470. height: '2.2rem',
  471. };
  473. super(document.createElementNS('http://www.w3.org/2000/svg', 'svg'), {
  474. ...defaultStyles,
  475. ...styles,
  476. });
  478. this.applyOptions();
  480. paths.forEach((p) => this.addPath(p));
  481. }
  483. applyOptions() {
  484. this.setFill(this.styles.fill || 'currentColor');
  485. this.setWidth(this.styles.width || '16');
  486. this.setHeight(this.styles.height || '16');
  487. this.setViewBox(this.styles.viewBox || '0 0 16 16');
  488. this.setXmlns(this.styles.xmlns || 'http://www.w3.org/2000/svg');
  489. }
  491. setFill(color) {
  492. this.element.setAttribute('fill', color);
  493. }
  495. setWidth(width) {
  496. this.element.setAttribute('width', width);
  497. }
  499. setHeight(height) {
  500. this.element.setAttribute('height', height);
  501. }
  503. setViewBox(viewBox) {
  504. this.element.setAttribute('viewBox', viewBox);
  505. }
  507. setXmlns(xmlns) {
  508. this.element.setAttribute('xmlns', xmlns);
  509. }
  511. addPath(...path) {
  512. path.forEach((item) => {
  513. const pathElement = document.createElementNS(
  514. 'http://www.w3.org/2000/svg',
  515. 'path'
  516. );
  517. pathElement.setAttribute('d', item);
  518. this.element.appendChild(pathElement);
  519. });
  520. }
  521. }
  523. class Spinner extends StyledComponent {
  524. constructor() {
  525. super(document.createElement('div'), {
  526. display: 'flex',
  527. width: '100%',
  528. alignItems: 'center',
  529. justifyContent: 'center',
  530. padding: '20px'
  531. });
  532. this.createSpinnerElements();
  533. }
  535. createSpinnerElements() {
  536. const spinnerElement = new StyledComponent(document.createElement('div'));
  537. spinnerElement.setStyles({
  538. borderTop: '4px solid transparent',
  539. borderRight: '4px solid #ccc',
  540. borderBottom: '4px solid #ccc',
  541. borderLeft: '4px solid #ccc',
  542. borderRadius: '50%',
  543. width: '45px',
  544. height: '45px',
  545. animation: 'spin 1s linear infinite',
  546. });
  548. this.append(spinnerElement)
  549. }
  550. }
  552. class IconComponent extends SvgComponent {
  553. constructor(styles = {}, ...iconPath) {
  554. super({
  555. cursor: 'pointer',
  556. background: TOOLS_BUTTON_BACKGROUND_COLOR,
  557. borderRadius: '20%',
  558. height: '45px',
  559. width: '45px',
  560. padding: '10px',
  561. boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
  562. fill: ICON_COLOR,
  563. ...styles,
  564. },
  565. ...iconPath,
  566. );
  567. }
  568. }
  570. class CalanderIconComponent extends IconComponent {
  571. constructor(styles = {}) {
  572. super(styles,
  573. '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',
  574. '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'
  575. );
  576. }
  577. }
  579. class LoggerIconComponent extends IconComponent {
  580. constructor(styles = {}) {
  581. super(styles,
  582. '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',
  583. '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'
  584. )
  585. }
  586. }
  588. class ArrowRepeatIconComponent extends IconComponent {
  589. constructor(styles = {}) {
  590. super(styles,
  591. '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',
  592. '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'
  593. );
  594. }
  595. }
  597. class MoreIconComponent extends IconComponent {
  598. constructor(styles = {}) {
  599. super(styles,
  600. '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'
  601. );
  602. }
  603. }
  605. class BatteryIconComponent extends IconComponent {
  606. constructor(styles = {}) {
  607. super(styles,
  608. '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'
  609. );
  610. }
  611. }
  613. class HeadsetIconComponent extends IconComponent {
  614. constructor(styles = {}) {
  615. super(styles,
  616. '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'
  617. );
  618. }
  619. }
  621. class ServerIconComponet extends IconComponent {
  622. constructor(styles = {}) {
  623. super(styles,
  624. 'M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm2 7a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-2.5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z',
  625. 'M2 2a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h1v2H2a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-1V7h1a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2zm13 2v1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm0 7v1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm-3-4v2H4V7h8z'
  626. );
  627. }
  628. }
  630. class policyIconComponet extends IconComponent {
  631. constructor(styles = {}) {
  632. super(styles,
  633. 'M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0z',
  634. 'M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z',
  635. 'M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z'
  637. );
  638. }
  639. }
  642. class BuyIconComponet extends IconComponent {
  643. constructor(styles = {}) {
  644. super(styles,
  645. 'M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z'
  647. );
  648. }
  649. }
  651. class TutorialIconComponet extends IconComponent {
  652. constructor(styles = {}) {
  653. super(styles,
  654. 'M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm6.258-6.437a.5.5 0 0 1 .507.013l4 2.5a.5.5 0 0 1 0 .848l-4 2.5A.5.5 0 0 1 6 12V7a.5.5 0 0 1 .258-.437z'
  655. );
  656. }
  657. }
  659. class SpeedMeterIconComponent extends IconComponent {
  660. constructor(styles = {}) {
  661. super(styles,
  662. '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',
  663. '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'
  664. );
  665. }
  666. }
  668. class YouTubeIconComponent extends IconComponent {
  669. constructor(styles = {}) {
  670. super(styles,
  671. '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'
  672. );
  673. }
  674. }
  676. class Mp3IconComponent extends IconComponent {
  677. constructor(styles = {}) {
  678. super(styles,
  679. 'M4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3zm1 0v3h6V3H5zm3 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
  680. 'M11 11a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm-3 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z',
  681. 'M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4z',
  682. );
  683. }
  684. }
  686. class TrashIconComponent extends IconComponent {
  687. constructor(styles = {}) {
  688. super(styles,
  689. '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',
  690. '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'
  691. );
  692. }
  693. }
  695. class ReceptionIconComponent extends IconComponent {
  696. constructor(styles = {}) {
  697. super(styles,
  698. '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'
  699. );
  700. }
  701. }
  705. class InfoIconComponent extends SvgComponent {
  706. constructor(styles = {}) {
  707. super(styles,
  708. 'M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z',
  709. 'm8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'
  710. );
  711. }
  712. }
  714. class ArrowDownIconComponent extends SvgComponent {
  715. constructor(style = {}) {
  716. super({
  717. fill: ICON_COLOR,
  718. ...style,
  719. },
  720. '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'
  721. );
  722. }
  723. }
  725. class NetworkIconComponent extends SvgComponent {
  726. constructor(style = {}) {
  727. super({
  728. fill: ICON_COLOR,
  729. ...style,
  730. },
  731. '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',
  732. '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'
  733. );
  734. }
  735. }
  737. class RouterIconComponent extends IconComponent {
  738. constructor(style = {}) {
  739. super({
  740. fill: ICON_COLOR,
  741. ...style,
  742. },
  743. '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',
  744. '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',
  745. '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',
  746. 'M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z'
  747. );
  748. }
  749. }
  751. class PersonIconComponent extends SvgComponent {
  752. constructor(style = {}) {
  753. super({
  754. fill: ICON_COLOR,
  755. ...style,
  756. },
  757. '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'
  758. );
  759. }
  760. }
  762. class LockIconComponent extends SvgComponent {
  763. constructor(style = {}) {
  764. super({
  765. fill: ICON_COLOR,
  766. ...style,
  767. },
  768. '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'
  769. );
  770. }
  771. }
  773. class EyeIconComponent extends SvgComponent {
  774. constructor(style = {}) {
  775. super({
  776. fill: ICON_COLOR,
  777. ...style,
  778. },
  779. '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',
  780. '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',
  781. );
  782. }
  783. }
  785. class ArrowDownShortIconComponent extends SvgComponent {
  786. constructor(style = {}) {
  787. super({
  788. fill: ICON_COLOR,
  789. ...style,
  790. },
  791. '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'
  792. );
  793. }
  794. }
  796. class ArrowUpShortIconComponent extends SvgComponent {
  797. constructor(style = {}) {
  798. super({
  799. fill: ICON_COLOR,
  800. ...style,
  801. },
  802. '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'
  803. );
  804. }
  805. }
  807. class PowerIconComponent extends SvgComponent {
  808. constructor(style = {}) {
  809. super({
  810. cursor: 'pointer',
  811. height: '7.5rem',
  812. width: '7.5rem',
  813. background: VPN_BUTTON_BACKGROUND_COLOR,
  814. borderRadius: '50%',
  815. boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
  816. padding: '20px',
  817. filter: 'drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1))',
  818. fill: ICON_COLOR,
  819. ...style,
  820. },
  821. 'M7.5 1v7h1V1h-1z',
  822. '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',
  823. );
  825. }
  826. }
  828. class DialogComponent extends StyledComponent {
  829. constructor(styles = {}) {
  830. super(document.createElement('div'), {
  831. position: 'absolute',
  832. top: '0',
  833. bottom: '0',
  834. left: '0',
  835. right: '0',
  836. height: '100vh',
  837. background: 'rgba(0, 0, 0, 0.5)',
  838. backdropFilter: 'blur(5px)',
  839. display: 'flex',
  840. alignItems: 'center',
  841. justifyContent: 'center',
  842. visibility: 'hidden',
  843. opacity: '0',
  844. ...styles,
  845. });
  847. this.element.addEventListener('click', (event) => {
  848. if (event.target === this.element) {
  849. this.close();
  850. }
  851. });
  853. this.onCloseEvent = null
  854. }
  856. setOnCloseEventListener(callback) {
  857. this.onCloseEvent = callback
  858. }
  860. setContent(content) {
  861. if (!(content instanceof DialogContentComponent)) {
  862. throw new TypeError('Content must be a DialogContentComponent');
  863. }
  865. if (!this.contains(content)) {
  866. this.append(content);
  867. }
  868. }
  870. show() {
  871. this.setStyles({
  872. opacity: '1',
  873. visibility: 'visible',
  874. display: 'flex',
  875. animation: 'fade-in 0.3s forwards',
  876. pointerEvents: 'auto',
  877. })
  879. if (!document.body.contains(this.element)) {
  880. document.body.append(this.element);
  881. }
  882. }
  884. close() {
  885. this.setStyles({
  886. opacity: '0',
  887. animation: 'fade-out 0.3s forwards',
  888. })
  890. setTimeout(() => {
  891. this.setStyles({
  892. display: 'none',
  893. pointerEvents: 'none',
  894. })
  896. if (this.onCloseEvent != null) {
  897. this.onCloseEvent()
  898. }
  899. }, 300);
  900. }
  902. remove() {
  903. if (document.body.contains(this.element)) {
  904. this.element.remove();
  905. }
  906. }
  907. }
  909. class DialogContentComponent extends StyledComponent {
  910. constructor(styles = {}) {
  911. super(document.createElement('div'), {
  912. display: 'flex',
  913. flexDirection: 'column',
  914. justifyContent: 'center',
  915. alignItems: 'center',
  916. background: DIALOG_CONTENT_BACKGROUND_COLOR,
  917. borderRadius: '5px',
  918. maxWidth: '30rem',
  919. width: '85%',
  920. ...styles,
  921. });
  923. this.lastHeader = null;
  924. this.lastBody = null;
  925. this.lastFooter = null;
  926. }
  928. setHeader(component) {
  929. this?.lastHeader?.remove()
  930. this.lastHeader = component
  931. this.append(component);
  932. }
  934. setBody(component) {
  935. this?.lastBody?.remove()
  936. this.lastBody = component
  937. this.append(component);
  938. }
  940. setFooter(component) {
  941. this?.lastFooter?.remove()
  942. this.lastFooter = component
  943. this.append(component);
  944. }
  945. }
  947. class DialogHeaderComponent extends StyledComponent {
  948. constructor(styles = {}) {
  949. super(document.createElement('div'), {
  950. display: 'flex',
  951. justifyContent: 'space-between',
  952. alignItems: 'center',
  953. width: '100%',
  954. padding: '5px',
  955. ...styles,
  956. });
  958. this.title = new StyledComponent(document.createElement('span'), {
  959. fontSize: '16px',
  960. color: DIALOG_HEADER_TITLE_COLOR,
  961. fontFamily: 'Ubuntu',
  962. fontWeight: 'bold',
  963. padding: '5px',
  964. });
  966. this.closeButton = new SvgComponent({
  967. cursor: 'pointer',
  968. height: '35px',
  969. width: '35px',
  970. fill: DIALOG_HEADER_CLOSE_BUTTON_COLOR,
  971. },
  972. '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'
  973. );
  975. this.initialize();
  976. }
  978. setTitleText(title) {
  979. this.title.element.innerText = title;
  980. }
  982. setCloseButtonClickListener(callback) {
  983. this.closeButton.addEventListener('click', callback);
  984. }
  986. initialize() {
  987. this.append(this.title);
  988. this.append(this.closeButton);
  989. }
  990. }
  992. class DialogBodyComponent extends StyledComponent {
  993. constructor(styles = {}) {
  994. super(document.createElement('div'), {
  995. display: 'flex',
  996. width: '100%',
  997. padding: '5px',
  998. ...styles,
  999. });
  1000. }
  1001. }
  1003. class DialogFooterComponent extends StyledComponent {
  1004. constructor(styles = {}) {
  1005. super(document.createElement('div'), {
  1006. display: 'flex',
  1007. justifyContent: 'space-between',
  1008. gap: '5px',
  1009. alignItems: 'center',
  1010. width: '100%',
  1011. padding: '5px',
  1012. ...styles,
  1013. });
  1014. }
  1016. addButton(button) {
  1017. if (!(button instanceof DialogFooterButtonComponent)) {
  1018. throw new TypeError('Button must be a DialogFooterButtonComponent instance');
  1019. }
  1021. this.append(button);
  1022. return this;
  1023. }
  1024. }
  1026. class DialogFooterButtonComponent extends StyledComponent {
  1027. constructor(text, onclick, styles = {}) {
  1028. super(document.createElement('button'), {
  1029. fontSize: '14px',
  1030. fontWeight: 'bold',
  1031. color: DIALOG_FOOTER_BUTTON_TEXT_COLOR,
  1032. background: DIALOG_FOOTER_BUTTON_COLOR,
  1033. border: 'none',
  1034. borderRadius: '3px',
  1035. padding: '10px',
  1036. width: '100%',
  1037. cursor: 'pointer',
  1038. boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
  1039. ...styles,
  1040. });
  1043. this.setText(text)
  1044. this.setClickListener(onclick);
  1045. }
  1047. setText(text) {
  1048. this.element.innerText = text;
  1049. }
  1051. setClickListener(callback) {
  1052. this.addEventListener('click', callback);
  1053. }
  1054. }
  1056. class DialogBuilder {
  1057. constructor(styles = {}) {
  1058. this.dialog = new DialogComponent(styles);
  1059. this.header = new DialogHeaderComponent();
  1060. this.content = new DialogContentComponent();
  1062. this.footer = new DialogFooterComponent();
  1063. this.footerButtons = [];
  1065. this.content.setHeader(this.header);
  1066. this.header.setCloseButtonClickListener(() => this.dialog.close());
  1068. }
  1070. static create(styles = {}) {
  1071. return new DialogBuilder(styles);
  1072. }
  1074. setTitle(title) {
  1075. this.header.setTitleText(title);
  1076. return this;
  1077. }
  1079. setAutoRemove(autoRemove) {
  1080. this.dialog.setOnCloseEventListener(() => {
  1081. if (autoRemove) {
  1082. this.dialog.remove();
  1083. }
  1084. });
  1085. return this;
  1086. }
  1088. setBody(bodyComponent) {
  1089. this.content.setBody(bodyComponent);
  1090. return this;
  1091. }
  1093. addFooterButton(text, callback) {
  1094. const button = new DialogFooterButtonComponent(text, callback);
  1095. this.footerButtons.push(button);
  1096. return this;
  1097. }
  1099. show() {
  1100. this.dialog.setContent(this.content);
  1102. if (this.footerButtons.length > 0) {
  1103. this.content.setFooter(this.footer);
  1104. this.footerButtons.forEach((button) => {
  1105. this.footer.addButton(button);
  1106. });
  1107. }
  1109. this.dialog.show();
  1110. return this;
  1111. }
  1113. close() {
  1114. this.dialog.close();
  1115. }
  1116. }
  1118. class ConfigComponent extends StyledComponent {
  1119. constructor(styles = {}) {
  1120. super(document.createElement('div'), {
  1121. display: 'flex',
  1122. gap: '5px',
  1123. alignItems: 'center',
  1124. textAlign: 'left',
  1125. marginTop: '5px',
  1126. padding: '5px',
  1127. background: 'rgba(116, 35, 217, 0.1)',
  1128. width: '100%',
  1129. borderRadius: '15px',
  1130. filter: 'drop-shadow rgba(0, 0, 0, 0.1)',
  1131. ...styles
  1132. });
  1134. this.image = document.createElement('img');
  1135. this.name = document.createElement('span');
  1136. this.description = document.createElement('span');
  1137. this.mode = document.createElement('span');
  1139. this.initialize();
  1140. }
  1142. setImage(url) {
  1143. this.image.src = url;
  1144. }
  1146. setName(name) {
  1147. this.name.innerHTML = name;
  1148. }
  1150. setDescription(description) {
  1151. this.description.innerHTML = description;
  1152. }
  1154. setMode(mode) {
  1155. this.mode.innerHTML = mode;
  1156. }
  1158. initialize() {
  1159. this.setImageStyles();
  1160. this.setNameStyles();
  1161. this.setDescriptionStyles();
  1162. this.setModeStyles();
  1163. const startArea = this.createStartArea();
  1164. const endArea = this.createEndArea();
  1165. this.appendElements(startArea, endArea);
  1166. }
  1168. setImageStyles() {
  1169. this.image.style.width = '40px';
  1170. this.image.style.height = '40px';
  1171. }
  1173. setNameStyles() {
  1174. this.name.style.fontSize = '12px';
  1175. this.name.style.fontFamily = 'Ubuntu', 'Ubuntu;';
  1176. this.name.style.color = '#b0a8ffff';
  1177. this.name.style.fontWeight = 'bold';
  1178. }
  1180. setDescriptionStyles() {
  1181. this.description.style.fontSize = '12px';
  1182. this.description.style.fontFamily = 'Ubuntu', 'Ubuntu;';
  1183. this.description.style.color = '#b0a8ffff';
  1184. this.description.style.fontWeight = 'bold';
  1186. }
  1188. setModeStyles() {
  1189. this.mode.style.fontSize = '12px';
  1190. this.mode.style.fontFamily = 'Ubuntu', 'Ubuntu;';
  1191. this.mode.style.color = '#b0a8ffff'
  1192. this.mode.style.fontWeight = 'bold';
  1193. this.mode.style.whiteSpace = 'nowrap';
  1194. }
  1196. createStartArea() {
  1197. const startArea = document.createElement('div');
  1198. startArea.style.display = 'flex';
  1199. startArea.style.width = '100%';
  1200. startArea.style.gap = '10px';
  1201. startArea.style.flexDirection = 'column';
  1202. startArea.appendChild(this.name);
  1203. startArea.appendChild(this.description);
  1204. return startArea;
  1205. }
  1207. createEndArea() {
  1208. const endArea = document.createElement('div');
  1209. endArea.style.display = 'flex';
  1210. endArea.style.flexDirection = 'column';
  1211. endArea.style.alignItems = 'end';
  1212. endArea.style.alignSelf = 'end';
  1213. endArea.style.width = '50%';
  1214. endArea.appendChild(this.mode);
  1215. return endArea;
  1216. }
  1218. appendElements(startArea, endArea) {
  1219. this.appendChild(this.image);
  1220. this.appendChild(startArea);
  1221. this.appendChild(endArea);
  1222. }
  1223. }
  1225. class CategoryComponent extends StyledComponent {
  1226. constructor(styles = {}, items = []) {
  1227. super(document.createElement('div'), {
  1228. display: 'flex',
  1229. justifyContent: 'center',
  1230. alignItems: 'center',
  1231. flexDirection: 'column',
  1232. textAlign: 'center',
  1233. padding: '1px',
  1234. width: '100%',
  1235. ...styles
  1236. });
  1238. this.items = items;
  1239. this.name = document.createElement('span');
  1240. this.setNameStyles();
  1242. this.initialize();
  1243. this.setItems(items);
  1244. }
  1246. setNameStyles() {
  1247. this.name.style.width = '100%';
  1249. this.name.style.fontSize = '16px'
  1250. this.name.style.fontFamily = 'Ubuntu';
  1251. this.name.style.color = '#b0a8ffff';
  1252. this.name.style.background = 'rgba(116, 35, 217, 0.1)';
  1253. this.name.style.padding = '5px';
  1254. this.name.style.fontWeight = 'bold';
  1255. this.name.style.filter = 'drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1))';
  1256. }
  1258. setName(value) {
  1259. this.name.innerHTML = value;
  1260. }
  1262. setItems(items) {
  1263. items.forEach(item => this.append(item));
  1264. }
  1266. initialize() {
  1267. this.appendChild(this.name);
  1268. }
  1269. }
  1271. class ConfigBodyComponent extends DialogBodyComponent {
  1272. constructor(items) {
  1273. super({
  1274. flexDirection: 'column',
  1275. gap: '15px',
  1276. maxHeight: '80vh',
  1277. overflowY: 'auto'
  1278. });
  1279. items.forEach(item => this.append(item));
  1280. }
  1281. }
  1283. class LoggerItemComponent extends StyledComponent {
  1284. constructor(styles = {}, message) {
  1285. super(document.createElement('span'), {
  1286. fontFamily: 'monospace',
  1287. width: '100%',
  1288. fontSize: '15px',
  1289. color: LOGGER_TEXT_COLOR,
  1290. ...styles,
  1291. });
  1293. this.element.innerHTML = message
  1294. }
  1295. }
  1297. class LoggerBodyComponent extends DialogBodyComponent {
  1298. constructor(styles = {}, items = []) {
  1299. super({
  1300. flexDirection: 'column',
  1301. maxHeight: '65vh',
  1302. overflowY: 'auto',
  1303. width: '100%',
  1304. ...styles,
  1305. });
  1307. this.setItems(items);
  1308. }
  1310. setItems(items) {
  1311. this.element.innerHTML = '';
  1312. items.forEach(item => this.append(item));
  1313. this.scrollDown();
  1314. }
  1316. scrollDown() {
  1317. this.element.scrollTop = this.element.scrollHeight;
  1318. }
  1319. }
  1321. class CheckUserBodyComponent extends DialogBodyComponent {
  1322. constructor(data = {}) {
  1323. super()
  1324. const component = new StyledComponent(document.createElement('div'), {
  1325. display: 'flex',
  1326. flexDirection: 'column',
  1327. color: TEXT_COLOR,
  1328. fontFamily: 'Ubuntu',
  1329. gap: '2px',
  1330. textAlign: 'center',
  1331. width: '100%',
  1332. });
  1334. component.element.innerHTML = `
  1335. <span style="color: ${CHECKUSER_TEXT_COLOR}">=dNome de usuario: ${data.username}</span>
  1336. <span style="color: ${CHECKUSER_TEXT_COLOR}">=ÆExpira em: ${data.expiration_date}</span>
  1337. <span style="color: ${CHECKUSER_TEXT_COLOR}">=ÆDias restantes: ${data.expiration_days}</span>
  1338. <span style="color: ${CHECKUSER_TEXT_COLOR}">=«Conexoes: ${data.count_connections}|${data.limit_connections}</span>
  1339. `
  1341. this.append(component)
  1342. }
  1343. }
  1345. class VpnStateComponent extends StyledComponent {
  1346. constructor(style = {}) {
  1347. super(document.createElement('span'), {
  1348. fontSize: '1.4rem',
  1349. fontFamily: 'Ubuntu',
  1350. fontWeight: 'bold',
  1351. color: '#FFF',
  1352. marginTop: '2rem',
  1353. ...style,
  1354. })
  1356. this.setState('DISCONNECTED')
  1357. }
  1359. setState(state) {
  1360. this.element.innerHTML = state
  1361. }
  1362. }
  1364. class LocalIPComponent extends StyledComponent {
  1365. constructor(styles = {}) {
  1366. super(document.createElement('span'), {
  1367. position: 'absolute',
  1368. fontSize: '1rem',
  1369. fontFamily: 'Ubuntu',
  1370. fontWeight: 'bold',
  1371. whiteSpace: 'nowrap',
  1372. color: TEXT_COLOR,
  1373. top: `${window?.DtGetStatusBarHeight?.execute() ?? '30'}px`,
  1374. left: '10px',
  1375. ...styles,
  1376. })
  1378. this.setIP(window?.DtGetLocalIP?.execute() ?? '127.0.0.1')
  1379. setInterval(() => {
  1380. this.setIP(window?.DtGetLocalIP?.execute() ?? '127.0.0.1')
  1381. }, 1000)
  1382. }
  1384. setIP(ip) {
  1385. this.element.innerHTML = `IP: ${ip}`
  1386. }
  1387. }
  1389. class NetworkStatsComponent extends StyledComponent {
  1390. constructor(styles = {}) {
  1391. super(document.createElement('div'), {
  1392. display: 'flex',
  1393. position: 'absolute',
  1394. gap: '5px',
  1395. top: `${(window?.DtGetStatusBarHeight?.execute() ?? 30) + 20}px`,
  1396. left: '-5px',
  1397. ...styles,
  1398. });
  1400. this.meterDownContainer = this.createMeterContainer();
  1401. this.meterDownText = this.createMeterText();
  1402. this.arrowDownShortIcon = new ArrowDownShortIconComponent();
  1403. this.meterDownContainer.append(this.arrowDownShortIcon);
  1404. this.meterDownContainer.append(this.meterDownText);
  1406. this.meterUpContainer = this.createMeterContainer();
  1407. this.meterUpText = this.createMeterText();
  1408. this.arrowUpShortIcon = new ArrowUpShortIconComponent();
  1409. this.meterUpContainer.append(this.arrowUpShortIcon);
  1410. this.meterUpContainer.append(this.meterUpText);
  1412. this.append(this.meterDownContainer);
  1413. this.append(this.meterUpContainer);
  1415. this.getNetworkDownloadFn = () => window?.DtGetNetworkDownloadBytes?.execute() ?? 0;
  1416. this.getNetworkUploadFn = () => window?.DtGetNetworkUploadBytes?.execute() ?? 0;
  1418. this.currentNetworkDownload = parseFloat(localStorage.getItem('networkDownload') ?? this.getNetworkDownloadFn());
  1419. this.currentNetworkUpload = parseFloat(localStorage.getItem('networkUpload') ?? this.getNetworkUploadFn());
  1421. localStorage.setItem('networkDownload', this.currentNetworkDownload);
  1422. localStorage.setItem('networkUpload', this.currentNetworkUpload);
  1424. this.showMeter();
  1425. setInterval(() => this.showMeter(), 1000);
  1426. }
  1428. createMeterContainer() {
  1429. return new StyledComponent(document.createElement('div'), {
  1430. display: 'flex',
  1431. alignItems: 'center',
  1432. });
  1433. }
  1435. createMeterText() {
  1436. return new StyledComponent(document.createElement('span'), {
  1437. fontSize: '1rem',
  1438. marginLeft: '-5px',
  1439. fontFamily: 'Ubuntu',
  1440. fontWeight: 'bold',
  1441. whiteSpace: 'nowrap',
  1442. color: '#fff',
  1443. });
  1444. }
  1446. formatBytes(bytes) {
  1447. const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
  1448. if (bytes === 0) return '0 B';
  1449. const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
  1450. return (bytes / Math.pow(1024, i)).toPrecision(3) + ' ' + sizes[i];
  1451. }
  1453. showMeter() {
  1454. const newNetworkDownload = this.getNetworkDownloadFn();
  1455. const newNetworkUpload = this.getNetworkUploadFn();
  1457. this.meterDownText.element.innerHTML = this.formatBytes(newNetworkDownload - this.currentNetworkDownload);
  1458. this.meterUpText.element.innerHTML = this.formatBytes(newNetworkUpload - this.currentNetworkUpload);
  1459. }
  1460. }
  1463. class IframeBodyComponent extends DialogBodyComponent {
  1464. constructor(styles = {}, url = null) {
  1465. super({
  1466. minHeight: '600px',
  1467. ...styles
  1468. })
  1470. this.iframeElement = new StyledComponent(document.createElement('iframe'), {
  1471. width: '100%',
  1472. border: 'none',
  1473. borderRadius: '5px',
  1474. display: 'none',
  1475. })
  1477. this.spinner = new Spinner()
  1479. this.iframeElement.addEventListener('load', () => {
  1480. this.iframeElement.setStyles({
  1481. display: 'block'
  1482. })
  1483. this.spinner.setStyles({
  1484. display: 'none'
  1485. })
  1486. })
  1488. this.setUrl(url)
  1489. this.applyOptions()
  1490. this.append(this.iframeElement)
  1491. this.append(this.spinner)
  1493. }
  1495. setUrl(url) {
  1496. this.iframeElement.element.src = url
  1497. }
  1499. setOnLoadListener(callback) {
  1500. this.iframeElement.addEventListener('load', callback)
  1501. }
  1503. applyOptions() {
  1504. this.iframeElement.element.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share')
  1505. this.iframeElement.element.setAttribute('allowfullscreen', '')
  1506. this.iframeElement.element.setAttribute('frameborder', '0')
  1507. }
  1508. }
  1510. class CleanAppMessageBodyComponent extends DialogBodyComponent {
  1511. constructor(styles = {}, url = null) {
  1512. super({
  1513. height: 'auto',
  1514. ...styles
  1515. })
  1517. this.spanComponent = new StyledComponent(document.createElement('span'), {
  1518. fontSize: '16px',
  1519. fontFamily: 'Ubuntu',
  1520. fontWeight: 'bold',
  1521. color: TEXT_COLOR,
  1522. })
  1524. 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?'
  1526. this.append(this.spanComponent)
  1527. }
  1528. }
  1530. class StyledButtonComponent extends StyledComponent {
  1531. constructor(text, icon, onclick, styles = {}) {
  1532. super(document.createElement('button'), {
  1533. width: '100%',
  1534. borderRadius: '5px',
  1535. padding: '10px',
  1536. border: 'none',
  1537. color: TEXT_COLOR,
  1538. background: BUTTON_BACKGROUND_COLOR,
  1539. boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
  1540. cursor: 'pointer',
  1541. display: 'flex',
  1542. alignItems: 'center',
  1543. filter: 'drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1))',
  1544. ...styles
  1545. });
  1547. this.textComponent = new StyledComponent(document.createElement('span'), {
  1548. fontSize: '16px',
  1549. fontWeight: 'bold',
  1550. });
  1552. this.textComponent.element.innerHTML = text;
  1553. this.element.addEventListener('click', onclick)
  1555. this.append(icon ?? '')
  1556. this.append(this.textComponent);
  1557. }
  1558. }
  1560. class ApnSettingStyledButtonComponent extends StyledButtonComponent {
  1561. constructor() {
  1562. super(
  1563. 'APN',
  1564. new ReceptionIconComponent(),
  1565. () => window?.DtStartApnActivity?.execute()
  1566. )
  1567. }
  1568. }
  1571. class BatteryStyledButtonComponent extends StyledButtonComponent {
  1572. constructor() {
  1573. super(
  1574. 'BATERIA',
  1575. new BatteryIconComponent(),
  1576. () => window?.DtIgnoreBatteryOptimizations?.execute(),
  1577. )
  1578. }
  1579. }
  1581. class SupportStyledButtonComponent extends StyledButtonComponent {
  1582. constructor() {
  1583. super(
  1584. 'SUPORTE',
  1585. new HeadsetIconComponent(),
  1586. () => window?.DtStartWebViewActivity?.execute(LINK_SUPPORT)
  1587. );
  1588. }
  1589. }
  1591. class SpeedTestStyledButtonComponent extends StyledButtonComponent {
  1592. constructor() {
  1593. super(
  1594. 'SPEEDTEST',
  1595. new SpeedMeterIconComponent(),
  1596. () => {
  1597. DialogBuilder.create()
  1598. .setTitle('SPEEDTEST')
  1599. .setAutoRemove(true)
  1600. .setBody(new IframeBodyComponent({}, URL_SPEEDTEST))
  1601. .show()
  1604. })
  1606. }
  1608. }
  1610. class ButtonServersComponent extends StyledButtonComponent {
  1611. constructor() {
  1612. super(
  1613. 'SERVIDORES',
  1614. new ServerIconComponet(),
  1615. () => window?.DtStartWebViewActivity?.execute(SERVER_URL)
  1616. );
  1617. }
  1618. }
  1620. class PolicyServersComponent extends StyledButtonComponent {
  1621. constructor() {
  1622. super(
  1623. 'PRIVACIDADE',
  1624. new policyIconComponet(),
  1625. () => window?.DtStartWebViewActivity?.execute(POLITC_URL)
  1626. );
  1627. }
  1628. }
  1630. class TermosComponent extends StyledButtonComponent {
  1631. constructor() {
  1632. super(
  1633. 'TERMOS',
  1634. new policyIconComponet(),
  1635. () => window?.DtStartWebViewActivity?.execute(TERMS_URL)
  1636. );
  1637. }
  1638. }
  1640. class BuyComponent extends StyledButtonComponent {
  1641. constructor() {
  1642. super(
  1643. 'COMPRAR LOGIN',
  1644. new BuyIconComponet(),
  1645. () => window?.DtStartWebViewActivity?.execute(PREMIUM_URL)
  1646. );
  1647. }
  1648. }
  1650. class ButtonTutorialComponent extends StyledButtonComponent {
  1651. constructor() {
  1652. super(
  1653. 'TUTORIAIS',
  1654. new TutorialIconComponet(),
  1655. () => window?.DtStartWebViewActivity?.execute(TUTO_URL)
  1656. );
  1657. }
  1658. }
  1660. class YouTubeStyledButtonComponent extends StyledButtonComponent {
  1661. static dialog = DialogBuilder.create({
  1662. zIndex: 1
  1663. })
  1664. .setTitle('YOUTUBE')
  1665. .setBody(new IframeBodyComponent({}, URL_YOUTUBE))
  1667. constructor() {
  1668. super(
  1669. 'YOUTUBE',
  1670. new YouTubeIconComponent(),
  1671. () => this.dialog.show(),
  1672. )
  1673. }
  1675. get dialog() {
  1676. return YouTubeStyledButtonComponent.dialog;
  1677. }
  1678. }
  1680. class Mp3StyledButtonComponent extends StyledButtonComponent {
  1681. static dialog = DialogBuilder.create({
  1682. zIndex: 1
  1683. })
  1684. .setTitle('MP3')
  1685. .setBody(new IframeBodyComponent({}, URL_MP3))
  1687. constructor() {
  1688. super(
  1689. 'MP3',
  1690. new Mp3IconComponent(),
  1691. () => this.dialog.show(),
  1692. )
  1693. }
  1695. get dialog() {
  1696. return Mp3StyledButtonComponent.dialog;
  1697. }
  1698. }
  1700. class CleanAppStyledButtonComponent extends StyledButtonComponent {
  1701. constructor() {
  1702. super(
  1703. 'LIMPAR',
  1704. new TrashIconComponent(),
  1705. () => {
  1706. const dialog = DialogBuilder.create()
  1707. .setTitle('LIMPAR DADOS')
  1708. .setAutoRemove(true)
  1709. .setBody(new CleanAppMessageBodyComponent())
  1710. .addFooterButton('NÃO', () => dialog.close())
  1711. .addFooterButton('SIM', () => window?.DtCleanApp?.execute())
  1712. .show();
  1713. })
  1714. }
  1715. }
  1717. class HotSpotStyledButtonComponent extends StyledButtonComponent {
  1718. constructor() {
  1719. super(
  1720. 'HOTSPOT',
  1721. new RouterIconComponent(),
  1722. () => this.toggleHotSpot())
  1724. }
  1726. startHotSpot() {
  1727. window?.DtStartHotSpotService?.execute();
  1728. Toast.success('HotSpot iniciado com sucesso!')
  1729. }
  1731. stopHotSpot() {
  1732. window?.DtStopHotSpotService?.execute();
  1733. Toast.success('HotSpot parado com sucesso!')
  1734. }
  1736. toggleHotSpot() {
  1737. const hotSpotStatus = window?.DtGetStatusHotSpotService?.execute() ?? 'STOPPED';
  1738. hotSpotStatus == 'RUNNING' ? this.stopHotSpot() : this.startHotSpot();
  1739. }
  1740. }
  1742. class MenuDialogBodyComponent extends DialogBodyComponent {
  1743. constructor() {
  1744. super({
  1745. display: 'flex',
  1746. flexDirection: 'column',
  1747. gap: '5px'
  1748. })
  1749. }
  1750. addRowButtons(...buttons) {
  1751. const element = new StyledComponent(document.createElement('div'), {
  1752. display: 'flex',
  1753. gap: '5px',
  1754. width: '100%'
  1755. });
  1756. buttons.forEach(button => element.append(button));
  1757. this.append(element);
  1758. return this;
  1759. }
  1760. }
  1762. class ConfigInputComponent extends InputGroupComponent {
  1763. constructor() {
  1764. super({
  1765. cursor: 'pointer',
  1766. background: INPUT_COLOR
  1767. });
  1769. this.configInput = new InputText({
  1770. cursor: 'pointer',
  1771. fontFamily: 'Ubuntu'
  1772. });
  1773. this.configInput.setEnabled(false);
  1774. this.configInput.setPlaceholder('SELECIONE UM SERVIDOR');
  1775. this.configInput.setValue(JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{}').name ?? '');
  1777. this.append(new NetworkIconComponent(), this.configInput, new ArrowDownIconComponent());
  1778. this.configure()
  1780. this.addEventListener('click', () => {
  1781. 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"}]}]';
  1782. const items = JSON.parse(window?.DtGetConfigs?.execute() || mock);
  1783. items.sort((a, b) => a.sorter - b.sorter);
  1784. items.forEach((item) => item.items.sort((a, b) => a.sorter - b.sorter));
  1786. const dialog = DialogBuilder.create()
  1787. .setTitle('CONFIGURAÇÕES')
  1788. .setAutoRemove(true)
  1789. .setBody(
  1790. new ConfigBodyComponent(
  1791. items.map((item) => {
  1792. const category = new CategoryComponent();
  1793. category.setName(item.name);
  1794. category.setItems(
  1795. item.items.map((item) => {
  1796. const config = new ConfigComponent();
  1797. config.setName(item.name);
  1798. config.setDescription(item.description ?? '');
  1799. config.setMode(item.mode);
  1800. config.setImage(item.icon);
  1801. config.addEventListener('click', () => {
  1802. window?.DtSetConfig?.execute(item.id);
  1803. dialog.close();
  1804. });
  1805. return config;
  1806. })
  1807. );
  1808. return category;
  1809. })
  1810. )
  1811. )
  1812. .show();
  1813. });
  1815. const originalClickListener = window.dtConfigClickListener;
  1816. window.dtConfigClickListener = () => {
  1817. if (originalClickListener) {
  1818. originalClickListener();
  1819. }
  1820. this.configure();
  1821. };
  1822. this.configure();
  1823. }
  1825. configure() {
  1826. const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{"auth":{"password": ""}, "mode": "v2ra"}')
  1827. this.configInput.setValue(config.name ?? '')
  1828. }
  1829. }
  1831. class UserPassInputComponent extends StyledComponent {
  1832. constructor() {
  1833. super(document.createElement('div'), {
  1834. display: 'flex',
  1835. marginTop: '5px',
  1836. width: '100%',
  1837. display: 'flex',
  1838. gap: '5px',
  1839. });
  1841. this.usernameGroupComponent = new InputGroupComponent({
  1842. background: INPUT_COLOR
  1843. });
  1844. const personIconComponent = new PersonIconComponent();
  1845. this.usernameInput = new InputText();
  1846. this.usernameInput.setPlaceholder('Nome de usuário');
  1847. this.usernameInput.setValue(window?.DtUsername?.get() ?? '');
  1848. this.usernameInput.setOnInputListener(() => window?.DtUsername?.set(this.usernameInput.value));
  1849. this.usernameGroupComponent.append(personIconComponent, this.usernameInput);
  1850. this.append(this.usernameGroupComponent);
  1852. this.passwordGroupComponent = new InputGroupComponent({
  1853. background: INPUT_COLOR
  1854. });
  1855. this.passwordInput = new InputPassword();
  1856. const eyeIconComponent = new EyeIconComponent();
  1857. eyeIconComponent.addEventListener('click', () => this.passwordInput.setShowing(!this.passwordInput.isShowing));
  1858. this.passwordInput.setPlaceholder('Senha');
  1859. this.passwordInput.setValue(window?.DtPassword?.get() ?? '');
  1860. this.passwordInput.setOnInputListener(() => {
  1861. window?.DtPassword?.set(this.passwordInput.value)
  1862. });
  1863. this.passwordGroupComponent.append(new LockIconComponent(), this.passwordInput, eyeIconComponent);
  1864. this.append(this.passwordGroupComponent);
  1866. this.v2rayUuidGroupComponent = new InputGroupComponent({
  1867. background: INPUT_COLOR
  1868. });
  1869. this.v2rayUuidInput = new InputPassword();
  1870. this.v2rayUuidInput.setPlaceholder('V2Ray UUID');
  1871. this.v2rayUuidInput.setValue(window?.DtUuid?.get() ?? '');
  1872. this.v2rayUuidInput.setOnInputListener(() => window?.DtUuid?.set(this.v2rayUuidInput.value));
  1873. this.v2rayUuidGroupComponent.append(new LockIconComponent(), this.v2rayUuidInput);
  1875. this.append(this.v2rayUuidGroupComponent);
  1877. const originalClickListener = window.dtConfigClickListener;
  1878. window.dtConfigClickListener = () => {
  1879. if (originalClickListener) {
  1880. originalClickListener();
  1881. }
  1882. this.configure();
  1883. };
  1885. this.configure();
  1886. }
  1888. configure() {
  1889. const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{"auth":{"password": ""}, "mode": "v2ra"}')
  1890. const isV2ray = config?.mode?.toLowerCase()?.startsWith('v2ray');
  1892. this.usernameGroupComponent.setStyles({
  1893. display: isV2ray || config?.auth?.username ? 'none' : 'flex',
  1894. })
  1896. this.passwordGroupComponent.setStyles({
  1897. display: isV2ray || config?.auth?.password ? 'none' : 'flex',
  1898. })
  1900. this.v2rayUuidGroupComponent.setStyles({
  1901. display: !isV2ray || config?.auth?.v2ray_uuid ? 'none' : 'flex',
  1902. })
  1904. const isRunning = (window?.DtGetVpnState?.execute() ?? 'DISCONNECTED') != 'DISCONNECTED';
  1905. this.usernameInput.setEnabled(!isRunning)
  1906. this.passwordInput.setEnabled(!isRunning)
  1907. this.v2rayUuidInput.setEnabled(!isRunning)
  1908. }
  1909. }
  1911. class ButtonAndStateContainerComponent extends StyledComponent {
  1912. constructor(styles = {}) {
  1913. super(document.createElement('div'), {
  1914. display: 'flex',
  1915. flexDirection: 'column',
  1916. alignItems: 'center',
  1917. position: 'absolute',
  1918. bottom: '120%',
  1919. ...styles,
  1920. });
  1922. this.startOrStopButtonComponent = new PowerIconComponent();
  1923. this.startOrStopButtonComponent.addEventListener('click', () => {
  1924. if (window?.DtGetVpnState?.execute() !== 'DISCONNECTED') {
  1925. window?.DtExecuteVpnStop?.execute();
  1926. } else {
  1927. window?.DtExecuteVpnStart?.execute();
  1928. }
  1929. });
  1930. this.append(this.startOrStopButtonComponent);
  1932. this.vpnStateComponent = new VpnStateComponent();
  1933. this.append(this.vpnStateComponent);
  1935. window.dtVpnStateListener = state => this.configureState(state);
  1936. this.configureState(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED');
  1937. }
  1939. configureState(state) {
  1940. const isRunning = state != 'DISCONNECTED';
  1942. this.vpnStateComponent.setState((window?.DtTranslateText?.execute('LBL_STATE_' + state) ?? 'UNKNOWN').toUpperCase())
  1944. if (state == 'DISCONNECTED') {
  1945. this.vpnStateComponent.setStyles({
  1946. color: VPN_STOPPED_COLOR
  1947. })
  1948. this.startOrStopButtonComponent.setStyles({
  1949. fill: VPN_STOPPED_COLOR
  1950. })
  1951. }
  1953. if (state != 'DISCONNECTED' && state != 'CONNECTED') {
  1954. this.vpnStateComponent.setStyles({
  1955. color: VPN_STARTING_COLOR
  1956. })
  1957. this.startOrStopButtonComponent.setStyles({
  1958. fill: VPN_STARTING_COLOR
  1959. })
  1960. }
  1962. if (state == 'CONNECTED') {
  1963. this.vpnStateComponent.setStyles({
  1964. color: VPN_RUNNING_COLOR
  1965. })
  1966. this.startOrStopButtonComponent.setStyles({
  1967. fill: VPN_RUNNING_COLOR
  1968. })
  1969. }
  1970. }
  1971. }
  1973. class CardToolsComponent extends CardComponent {
  1974. constructor() {
  1975. super({
  1976. margin: '50px 0',
  1977. width: '100%',
  1978. flexDirection: 'row',
  1979. justifyContent: 'space-between',
  1980. background: 'transparent',
  1981. boxShadow: 'none',
  1982. filter: 'drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1))',
  1984. });
  1986. this.loggerBody = new LoggerBodyComponent({});
  1988. this.addArrowRepeatIcon();
  1989. this.addLoggerIcon();
  1990. this.addCalanderIcon();
  1991. this.addMoreButton();
  1993. window.dtOnNewLogListener = () => this.renderizeLogger();
  1994. this.renderizeLogger();
  1995. }
  1997. addCalanderIcon() {
  1998. const calanderIconComponent = new CalanderIconComponent();
  1999. calanderIconComponent.addEventListener('click', () =>
  2000. window?.DtStartCheckUser?.execute()
  2001. );
  2002. this.append(calanderIconComponent);
  2003. }
  2005. addLoggerIcon() {
  2006. const loggerIconComponent = new LoggerIconComponent();
  2007. loggerIconComponent.addEventListener('click', () => {
  2008. const loggerDialog = DialogBuilder.create()
  2009. .setTitle('REGISTRO')
  2010. .setBody(this.loggerBody)
  2011. .setAutoRemove(true)
  2012. .addFooterButton('LIMPAR', () => window?.DtClearLogs?.execute())
  2013. .addFooterButton('FECHAR', () => loggerDialog.close())
  2014. .show();
  2015. this.loggerBody.scrollDown();
  2016. });
  2017. this.append(loggerIconComponent);
  2018. }
  2020. addArrowRepeatIcon() {
  2021. const arrowRepeatIconComponent = new ArrowRepeatIconComponent();
  2022. arrowRepeatIconComponent.addEventListener('click', () =>
  2023. window?.DtStartAppUpdate?.execute()
  2024. );
  2025. this.append(arrowRepeatIconComponent);
  2026. }
  2028. addMoreButton() {
  2029. const moreButton = new MoreIconComponent();
  2030. moreButton.addEventListener('click', () => {
  2031. DialogBuilder.create()
  2032. .setTitle('FERRAMENTAS')
  2033. .setAutoRemove(true)
  2034. .setBody(
  2035. new MenuDialogBodyComponent()
  2036. .addRowButtons(
  2037. new BuyComponent(),
  2038. new ButtonServersComponent(),
  2039. )
  2040. .addRowButtons(
  2041. new ButtonTutorialComponent(),
  2042. new SpeedTestStyledButtonComponent(),
  2045. )
  2046. .addRowButtons(
  2047. new HotSpotStyledButtonComponent(),
  2048. new BatteryStyledButtonComponent(),
  2049. )
  2050. .addRowButtons(
  2051. new ApnSettingStyledButtonComponent(),
  2052. new CleanAppStyledButtonComponent()
  2053. )
  2054. .addRowButtons(
  2055. new PolicyServersComponent(),
  2056. new TermosComponent(),
  2057. )
  2058. )
  2059. .show();
  2060. });
  2061. this.append(moreButton);
  2062. }
  2064. renderizeLogger() {
  2065. const mock = Array.from({
  2066. length: 300
  2067. }, (_, i) => ({
  2068. TIME: `MESSAGE ${i}`
  2069. }));
  2070. const data = JSON.parse(window?.DtGetLogs?.execute() ?? JSON.stringify(mock))
  2072. const items = data.map(log => {
  2073. const message = Object.keys(log)[0] + ' ' + log[Object.keys(log)]
  2074. return new LoggerItemComponent({}, message)
  2075. })
  2076. this.loggerBody.setItems(items)
  2077. }
  2078. }
  2080. class CheckUserDialog {
  2081. constructor() {
  2082. this.dialog = DialogBuilder.create()
  2083. .setAutoRemove(true)
  2084. .setTitle('CHECKUSER')
  2085. .setBody(new Spinner());
  2086. }
  2088. initialize() {
  2089. window.dtCheckUserStartedListener = () => this.checkUserStartedListener();
  2090. window.dtCheckUserModelListener = model => this.checkUserModelListener(model);
  2091. }
  2093. checkUserStartedListener() {
  2094. const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? '{}');
  2095. if (!config.url_check_user) return;
  2096. this.dialog.show();
  2097. }
  2099. checkUserModelListener(model) {
  2100. const data = JSON.parse(model ?? `{"username": "test"}`);
  2101. this.dialog
  2102. .setTitle(` Olá, ${data.username}`)
  2103. .setBody(new CheckUserBodyComponent(data));
  2104. }
  2105. }
  2107. const rootComponent = new AppComponent(document.querySelector('#root'), {
  2108. background: BACKGROUND_COLOR
  2109. });
  2110. window.onerror = e => {
  2111. rootComponent.element.style.color = '#FFFFFF';
  2112. rootComponent.element.style.fontSize = '18px';
  2113. rootComponent.element.innerHTML = e
  2114. return false;
  2115. };
  2117. const cardComponent = new CardComponent({
  2118. position: 'absolute',
  2119. top: '45%'
  2120. });
  2122. const configInput = new ConfigInputComponent();
  2123. cardComponent.append(configInput);
  2125. const userPassInputComponent = new UserPassInputComponent()
  2126. cardComponent.append(userPassInputComponent);
  2128. const cardToolsComponent = new CardToolsComponent();
  2129. cardComponent.append(cardToolsComponent);
  2131. const buttonAndStateContainer = new ButtonAndStateContainerComponent({
  2132. marginTop: '3rem'
  2133. });
  2134. cardComponent.append(buttonAndStateContainer);
  2136. rootComponent.append(new LocalIPComponent());
  2138. rootComponent.append(new NetworkStatsComponent());
  2139. rootComponent.append(cardComponent);
  2141. const checkUserDialog = new CheckUserDialog();
  2142. checkUserDialog.initialize();
  2144. function createElements() {
  2145. const container = document.createElement("div");
  2146. container.classList.add("container");
  2147. container.style.position = 'absolute';
  2149. const content = document.createElement("div");
  2150. content.classList.add("content");
  2152. const background = document.createElement("div");
  2154. const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  2155. svg.setAttribute("width", "16");
  2156. svg.setAttribute("height", "16");
  2157. svg.setAttribute("fill", "currentColor");
  2158. svg.classList.add("bi", "bi-git");
  2159. svg.setAttribute("viewBox", "0 0 16 16");
  2161. const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  2162. 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");
  2163. svg.appendChild(path);
  2165. const span = document.createElement("span");
  2166. span.classList.add("ms-2");
  2167. span.setAttribute("id", "version");
  2168. span.textContent = ' 1.1';
  2170. // Montando a estrutura
  2171. background.appendChild(svg);
  2172. background.appendChild(span);
  2173. content.appendChild(background);
  2174. container.appendChild(content);
  2176. // Aplicando estilos
  2177. container.style.fontSize = '1.4rem';
  2178. container.style.fontFamily = 'Verdana';
  2179. container.style.color = TEXT_COLOR;
  2180. const statusBarHeight = window?.DtGetStatusBarHeight?.execute();
  2181. const extraPixels = 0; // Number of extra pixels you want to add
  2182. const defaultHeight = 60; // Default height if statusBarHeight is undefined
  2184. const totalTopValue = (statusBarHeight !== undefined ? statusBarHeight : defaultHeight) + extraPixels;
  2186. container.style.top = `${totalTopValue}px`;
  2188. container.style.right = '10px';
  2192. // Adicionando ao DOM
  2193. document.body.appendChild(container);
  2195. // Atualizar a versão a cada 2 segundos
  2196. setInterval(updateVersion, 2000);
  2197. }
  2199. // Função para atualizar a versão
  2200. function updateVersion() {
  2201. const versionElement = document.getElementById('version');
  2202. const version = window?.DtGetLocalConfigVersion?.execute() ?? ' 1.0';
  2203. versionElement.textContent = version;
  2204. }
  2206. // Chamar a função para criar elementos e configurar a versão inicial
  2207. createElements();
  2208. updateVersion();
  2209. </script>
  2210. <div class="container" style="position: absolute; font-size: 1.4rem; font-family: Verdana; color: rgb(176, 168, 255); top: 60px; right: 10px;">
  2211. <div class="content">
  2212. <div><svg width="16" height="16" fill="currentColor" class="bi bi-git" viewBox="0 0 16 16">
  2213. <path 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">
  2214. </path>
  2215. </svg><span class="ms-2" id="version"> 1.0</span></div>
  2216. </div>
  2217. </div>
  2220. </body>
  2222. </html>
comments powered by Disqus