Layout DT

SUBMITTED BY: terrorxdroid

DATE: March 27, 2024, 5:31 p.m.

UPDATED: Oct. 2, 2024, 8:18 p.m.

FORMAT: Text only

SIZE: 225.5 kB

History Raw Download

HITS: 605

Report
  1. [
  2. {
  3. "id": 23759,
  4. "label": "Nome do app",
  5. "name": "APP_NAME",
  6. "value": "MisterVPN Tunnel",
  7. "type": "STRING",
  8. "status": "ACTIVE",
  9. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  10. },
  11. {
  12. "id": 23760,
  13. "label": "Logo do app",
  14. "name": "APP_LOGO",
  15. "value": null,
  16. "type": "IMAGE",
  17. "status": "ACTIVE",
  18. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  19. },
  20. {
  21. "id": 23761,
  22. "label": "Imagem de fundo",
  23. "name": "APP_BACKGROUND_IMAGE",
  24. "value": null,
  25. "type": "IMAGE",
  26. "status": "ACTIVE",
  27. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  28. },
  29. {
  30. "id": 23762,
  31. "label": "Tipo do fundo do app",
  32. "name": "APP_BACKGROUND_TYPE",
  33. "value": {
  34. "options": [
  35. {
  36. "label": "Imagem",
  37. "value": "IMAGE"
  38. },
  39. {
  40. "label": "Cor",
  41. "value": "COLOR"
  42. }
  43. ],
  44. "selected": "COLOR"
  45. },
  46. "type": "SELECT",
  47. "status": "ACTIVE",
  48. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  49. },
  50. {
  51. "id": 23763,
  52. "label": "Cor de fundo",
  53. "name": "APP_BACKGROUND_COLOR",
  54. "value": "#080e16c7",
  55. "type": "COLOR",
  56. "status": "ACTIVE",
  57. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  58. },
  59. {
  60. "id": 23764,
  61. "label": "Cor do card inicial",
  62. "name": "APP_CARD_COLOR",
  63. "value": "#1d242e73",
  64. "type": "COLOR",
  65. "status": "ACTIVE",
  66. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  67. },
  68. {
  69. "id": 23765,
  70. "label": "Raio do card inicial",
  71. "name": "APP_CARD_RADIUS",
  72. "value": 20,
  73. "type": "INTEGER",
  74. "status": "ACTIVE",
  75. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  76. },
  77. {
  78. "id": 23766,
  79. "label": "Cor do card de status",
  80. "name": "APP_CARD_STATUS_COLOR",
  81. "value": "#1d242e73",
  82. "type": "COLOR",
  83. "status": "ACTIVE",
  84. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  85. },
  86. {
  87. "id": 23767,
  88. "label": "Raio do card de status",
  89. "name": "APP_CARD_STATUS_RADIUS",
  90. "value": 25,
  91. "type": "INTEGER",
  92. "status": "ACTIVE",
  93. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  94. },
  95. {
  96. "id": 23768,
  97. "label": "Cor do card de configurações",
  98. "name": "APP_CARD_CONFIG_COLOR",
  99. "value": "#000000ff",
  100. "type": "COLOR",
  101. "status": "ACTIVE",
  102. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  103. },
  104. {
  105. "id": 23769,
  106. "label": "Cor do fundo dos dialogs",
  107. "name": "APP_DIALOG_BACKGROUND_COLOR",
  108. "value": "#000000ff",
  109. "type": "COLOR",
  110. "status": "ACTIVE",
  111. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  112. },
  113. {
  114. "id": 23770,
  115. "label": "Cor do fundo do dialog de log",
  116. "name": "APP_DIALOG_LOGGER_COLOR",
  117. "value": "#000000ff",
  118. "type": "COLOR",
  119. "status": "ACTIVE",
  120. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  121. },
  122. {
  123. "id": 23771,
  124. "label": "Cor das bordas",
  125. "name": "APP_BORDER_COLOR",
  126. "value": "#1d242e73",
  127. "type": "COLOR",
  128. "status": "ACTIVE",
  129. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  130. },
  131. {
  132. "id": 23772,
  133. "label": "Cor dos inputs",
  134. "name": "APP_INPUT_COLOR",
  135. "value": "#1d242e73",
  136. "type": "COLOR",
  137. "status": "ACTIVE",
  138. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  139. },
  140. {
  141. "id": 23773,
  142. "label": "Raio dos inputs",
  143. "name": "APP_INPUT_RADIUS",
  144. "value": 25,
  145. "type": "INTEGER",
  146. "status": "ACTIVE",
  147. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  148. },
  149. {
  150. "id": 23774,
  151. "label": "Cor dos textos",
  152. "name": "APP_TEXT_COLOR",
  153. "value": "#FFFFFFFF",
  154. "type": "COLOR",
  155. "status": "ACTIVE",
  156. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  157. },
  158. {
  159. "id": 23775,
  160. "label": "Cor dos botões",
  161. "name": "APP_BUTTON_COLOR",
  162. "value": "#1d242e73",
  163. "type": "COLOR",
  164. "status": "ACTIVE",
  165. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  166. },
  167. {
  168. "id": 23776,
  169. "label": "Raio dos botões",
  170. "name": "APP_BUTTON_RADIUS",
  171. "value": 25,
  172. "type": "INTEGER",
  173. "status": "ACTIVE",
  174. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  175. },
  176. {
  177. "id": 23777,
  178. "label": "Cor dos icones",
  179. "name": "APP_ICON_COLOR",
  180. "value": "#FFFFFFFF",
  181. "type": "COLOR",
  182. "status": "ACTIVE",
  183. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  184. },
  185. {
  186. "id": 23778,
  187. "label": "Exibir modo de conexão",
  188. "name": "APP_SHOW_CONNECTION_MODE",
  189. "value": true,
  190. "type": "BOOLEAN",
  191. "status": "ACTIVE",
  192. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  193. },
  194. {
  195. "id": 23779,
  196. "label": "Atualizar automaticamente as configurações ao lançar uma atualização.",
  197. "name": "APP_CONFIG_AUTO_UPDATE",
  198. "value": false,
  199. "type": "BOOLEAN",
  200. "status": "ACTIVE",
  201. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  202. },
  203. {
  204. "id": 23780,
  205. "label": "Iniciar o app automaticamente ao reiniciar o dispositivo",
  206. "name": "APP_AUTO_START",
  207. "value": false,
  208. "type": "BOOLEAN",
  209. "status": "ACTIVE",
  210. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  211. },
  212. {
  213. "id": 23781,
  214. "label": "Usar limiter de conexão",
  215. "name": "APP_CONNECTION_LIMITER",
  216. "value": true,
  217. "type": "BOOLEAN",
  218. "status": "ACTIVE",
  219. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  220. },
  221. {
  222. "id": 23782,
  223. "label": "Usar botão de atualizações",
  224. "name": "APP_BTN_UPDATE_ENABLED",
  225. "value": true,
  226. "type": "BOOLEAN",
  227. "status": "ACTIVE",
  228. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  229. },
  230. {
  231. "id": 23783,
  232. "label": "Usar botão de registros",
  233. "name": "APP_BTN_LOGGER_ENABLED",
  234. "value": true,
  235. "type": "BOOLEAN",
  236. "status": "ACTIVE",
  237. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  238. },
  239. {
  240. "id": 23784,
  241. "label": "Usar botão de pagina webview",
  242. "name": "APP_BTN_PAGE_ENABLED",
  243. "value": true,
  244. "type": "BOOLEAN",
  245. "status": "ACTIVE",
  246. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  247. },
  248. {
  249. "id": 23785,
  250. "label": "Ativar dialog de erros",
  251. "name": "APP_DIALOG_ERROR_ENABLED",
  252. "value": true,
  253. "type": "BOOLEAN",
  254. "status": "ACTIVE",
  255. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  256. },
  257. {
  258. "id": 23786,
  259. "label": "Ativar dialog de checkuser",
  260. "name": "APP_CHECKUSER_DIALOG_ENABLED",
  261. "value": true,
  262. "type": "BOOLEAN",
  263. "status": "ACTIVE",
  264. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  265. },
  266. {
  267. "id": 23787,
  268. "label": "Ativar toast de sucesso",
  269. "name": "APP_SUCCESS_TOAST_ENABLED",
  270. "value": true,
  271. "type": "BOOLEAN",
  272. "status": "ACTIVE",
  273. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  274. },
  275. {
  276. "id": 23788,
  277. "label": "Ativar toast de erro",
  278. "name": "APP_ERROR_TOAST_ENABLED",
  279. "value": true,
  280. "type": "BOOLEAN",
  281. "status": "ACTIVE",
  282. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  283. },
  284. {
  285. "id": 23789,
  286. "label": "Usar layout webview",
  287. "name": "APP_LAYOUT_WEBVIEW_ENABLED",
  288. "value": true,
  289. "type": "BOOLEAN",
  290. "status": "ACTIVE",
  291. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  292. },
  293. {
  294. "id": 23790,
  295. "label": "Mensagem",
  296. "name": "APP_MESSAGE",
  297. "value": "<font color=\"golden\"><b>📡 Situação Atual<br>\n<br>\n📱 VIVO:<br>\nEstá funcionando apenas nas configurações:<br><br>\n➜ VIVO WSS<br>\n➜ VIVO EASY<br>\n<br>\n🌐 As opções CDN funcionam apenas para usuários VIVO EASY e alguns com pacote WPP ilimitado.<br>\n<br>\n🔵 TIM:<br>\nFunciona somente com saldo válido.<br>\n<br>\n🔴 CLARO:<br>\nPlanos ativos: FLEX, MIX e CONTROLE.<br>\n<br>\n🙏 OBRIGADO PELA ATENÇÃO...</b></font>",
  298. "type": "TEXT",
  299. "status": "ACTIVE",
  300. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  301. },
  302. {
  303. "id": 23791,
  304. "label": "URL de atualização do aplicativo",
  305. "name": "APP_UPDATE_URL",
  306. "value": null,
  307. "type": "URL",
  308. "status": "ACTIVE",
  309. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  310. },
  311. {
  312. "id": 23792,
  313. "label": "Tipo de mensagem",
  314. "name": "APP_MESSAGE_TYPE",
  315. "value": {
  316. "options": [
  317. {
  318. "label": "Alerta",
  319. "value": "ALERT"
  320. },
  321. {
  322. "label": "Informação",
  323. "value": "INFO"
  324. },
  325. {
  326. "label": "Boas vindas",
  327. "value": "WELCOME"
  328. },
  329. {
  330. "label": "Sem mensagem",
  331. "value": "NONE"
  332. }
  333. ],
  334. "selected": "INFO"
  335. },
  336. "type": "SELECT",
  337. "status": "ACTIVE",
  338. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  339. },
  340. {
  341. "id": 23793,
  342. "label": "LAYOUT WEBVIEW (POR SUA CONTA E RISCO)",
  343. "name": "APP_LAYOUT_WEBVIEW",
  344. "value": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css\">\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css\"\n integrity=\"sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==\"\n crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\">\n <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css\">\n\n <title>@MRSILENT1</title>\n\n <style>\n :root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n font-synthesis: none;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n\n --space-status-bar: 10px;\n --space-nav-bar: 33px;\n\n --default-background-color: linear-gradient(135deg,\n #6f0fd4,\n #007a94,\n #5417a0,\n #008686,\n #540fd1,\n #299c9f,\n #005d5d,\n #5417a0,\n #6f0fd4,\n #007a94,\n #5417a0,\n #008686,\n #540fd1,\n #299c9f);\n --connected-background-color: linear-gradient(135deg,\n #05b76d,\n #01ac66,\n #008e52,\n #30704b,\n #00ff00,\n #29ab87,\n #00a86b,\n #2e8b57,\n #3f7046,\n #3f7,\n #008e52,\n #30704b,\n #00ff00,\n #29ab87,\n #00a86b,\n #2e8b57,\n #3f7046,\n #3f7);\n --connecting-background-color: linear-gradient(135deg,\n #ffc823,\n #f4b007,\n #fff14a,\n #eaa700,\n #fc9200,\n #ffcb05,\n #feb308,\n #ecc218,\n #ffc823,\n #f4b007,\n #fff14a,\n #eaa700,\n #fc9200,\n #ffcb05,\n #feb308,\n #ecc218);\n --error-background-color: linear-gradient(135deg,\n #e20807,\n #d40000,\n #9a001a,\n #65100d,\n #e20807,\n #d40000,\n #9a001a,\n #65100d,\n #e20807,\n #d40000,\n #9a001a,\n #65100d,\n #000000,\n #ff0000,\n #9a001a,\n #e20807,\n #65100d);\n }\n\n @keyframes ButtonStartVpnAnimation {\n 0% {\n background-position: 0;\n }\n\n 100% {\n background-position: 300%;\n }\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n *,\n *::after,\n *::before {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html,\n body {\n width: 100%;\n height: 100%;\n }\n\n body {\n background: linear-gradient(to bottom, #200d45, #55058c, #c49fdf);\n padding-bottom: var(--space-nav-bar);\n }\n\n main {\n width: auto;\n height: 89%;\n display: flex;\n position: relative;\n padding: 0 0 0 0;\n overflow: hidden;\n }\n\n section.home {\n width: 100vw;\n min-width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n\n position: absolute;\n top: 0;\n left: 0;\n\n opacity: 0;\n transform: translateX(100%);\n\n transition: opacity 0.3s ease, transform 0.3s ease;\n\n overflow: hidden;\n }\n\n section.home header {\n width: 100%;\n height: 20%;\n max-height: 135px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n padding: var(--space-status-bar) 10px 0 10px;\n\n background-image: url();\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n\n section.home header img {\n width: 80%;\n }\n\n section.home span#version {\n background: #881f9a67;\n font-size: 14px;\n position: absolute;\n bottom: 3%;\n left: 3%;\n color: #ffffff;\n }\n\n section.container-carrier-selector-button {\n width: 100%;\n height: 10%;\n max-height: 60px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n margin: 10% 0 0 0;\n }\n\n section.container-carrier-selector-button button {\n width: 90%;\n height: 70%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n position: relative;\n border: 0px;\n border-radius: 6px;\n background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);\n background-size: 300%;\n animation: 15s infinite ButtonStartVpnAnimation;\n }\n\n section.container-carrier-selector-button button svg {\n color: #ffffff;\n }\n\n section.container-carrier-selector-button button span {\n color: #ffffff;\n font-size: 14px;\n }\n\n section.container-button-start-stop-vpn {\n width: 100%;\n height: auto;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n margin: 20% 0 0 0;\n }\n\n section.container-button-start-stop-vpn button {\n width: 135px;\n height: 135px;\n margin-top: -80px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n position: relative;\n\n border: 0;\n border-radius: 50%;\n\n background: linear-gradient(to top left, #05596a, #4d0a87 85%);\n }\n\n section.container-button-start-stop-vpn button svg {\n width: 50%;\n height: 50%;\n\n color: #ffffff;\n }\n\n section.container-button-start-stop-vpn button::before,\n section.container-button-start-stop-vpn button::after {\n width: calc(100% + 10px);\n height: calc(100% + 10px);\n\n content: \"\";\n\n position: absolute;\n z-index: -1;\n\n border-radius: 50%;\n\n background: var(--default-background-color);\n background-size: 300%;\n\n animation: 8s infinite ButtonStartVpnAnimation;\n }\n\n section.container-button-start-stop-vpn button::after {\n filter: blur(30px);\n }\n\n section.renew-alert {\n width: 100%;\n height: auto;\n\n display: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n margin: auto 0 auto 0;\n }\n\n section.renew-alert.active {\n display: flex;\n }\n\n section.renew-alert button {\n padding: 2.5% 10%;\n\n border: 0;\n border-radius: 60px;\n\n background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);\n background-size: 300%;\n\n animation: 8s infinite ButtonStartVpnAnimation;\n }\n\n section.renew-alert button span {\n color: #ffffff;\n }\n\n section.profile,\n section.carrier-list,\n section.container-tools,\n section.container-logs,\n section.container-error {\n width: 100%;\n min-width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n\n position: absolute;\n top: 0;\n left: 0;\n\n padding: var(--space-status-bar) 0 0 0;\n\n opacity: 0;\n\n transform: translateX(100%);\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n\n section.carrier-list {\n height: 97%;\n }\n\n section.container-tools {\n gap: 1px;\n }\n\n section.loading,\n section.checkuser,\n section.clean-data-app,\n section.hotspot-container,\n section.terms-container {\n width: 100%;\n min-width: 100%;\n height: 100%;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: absolute;\n top: 0;\n left: 0;\n z-index: 999999999;\n\n padding-top: 15%;\n\n background: rgba(0, 0, 0, 0.3);\n\n opacity: 0;\n transform: scale(0);\n transform-origin: center;\n\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n\n section.hotspot-container {\n padding-top: 0;\n }\n\n section.loading.active,\n section.checkuser.active,\n section.clean-data-app.active,\n section.hotspot-container.active,\n section.terms-container.active {\n opacity: 1;\n transform: scale(1);\n }\n\n section.loading section,\n section.checkuser section,\n section.clean-data-app section,\n section.hotspot-container section,\n section.terms-container section {\n width: 80%;\n height: auto;\n min-height: 50%;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n\n border-radius: 10px;\n\n background: #200d45;\n\n overflow: hidden;\n }\n\n section.loading section header,\n section.checkuser section header,\n section.clean-data-app section header,\n section.hotspot-container section header,\n section.terms-container section header {\n width: 100%;\n height: auto;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n position: relative;\n\n padding: 4% 2% 4% 2%;\n\n border-bottom: 2px solid #03142d;\n }\n\n section.loading section header h1,\n section.checkuser section header h1,\n section.clean-data-app section header h1,\n section.hotspot-container section header h1,\n section.terms-container section header h1 {\n margin-left: auto;\n\n color: #ffffff;\n font-size: 0.8rem;\n }\n\n @media (max-width: 280px) {\n section.clean-data-app section header h1 {\n font-size: 0.7rem;\n }\n }\n\n section.loading section header svg,\n section.checkuser section header svg,\n section.clean-data-app section header svg,\n section.hotspot-container section header svg,\n section.terms-container section header svg {\n margin-left: auto;\n\n color: #ffffff;\n }\n\n section.terms-container section p {\n width: 95%;\n height: auto;\n max-height: 350px;\n\n padding: 5% 0;\n\n color: #ffffff;\n text-align: center;\n\n overflow: auto;\n }\n\n section.loading section div.loading {\n width: 150px;\n height: 150px;\n\n margin-top: auto;\n margin-bottom: auto;\n\n border-top: 4px solid #ffffff;\n border-right: 4px solid #ffffff;\n border-bottom: 4px solid #ffffff;\n border-left: 4px solid transparent;\n border-radius: 50%;\n\n background-color: transparent;\n\n animation: spin 1s linear infinite;\n }\n\n section.checkuser section section {\n width: 100%;\n height: auto;\n min-height: 100%;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n margin: auto 0 auto 0;\n padding: 3% 0;\n\n border-radius: 0;\n }\n\n section.checkuser section section div:first-child {\n margin: 0;\n }\n\n section.checkuser section section div {\n width: 90%;\n height: auto;\n\n display: flex;\n align-items: center;\n gap: 10px;\n\n margin: 5% 0 0 0;\n padding: 3% 3%;\n\n border-radius: 10px;\n\n background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);\n background-size: 300%;\n\n animation: 8s infinite ButtonStartVpnAnimation;\n }\n\n section.checkuser section section div svg,\n section.checkuser section section div span {\n color: #ffffff;\n }\n\n section.checkuser section section div span {\n font-size: 0.8rem;\n }\n\n section.clean-data-app section section,\n section.hotspot-container section section {\n width: 100%;\n height: auto;\n min-height: 100%;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n margin: auto 0 auto 0;\n padding: 8% 0;\n\n border-radius: 0;\n }\n\n section.clean-data-app section section svg,\n section.hotspot-container section section svg {\n width: 30%;\n height: auto;\n\n color: #ffff00;\n font-size: 8rem;\n }\n\n section.hotspot-container section section svg {\n width: 20%;\n height: auto;\n\n color: #ffffff;\n }\n\n section.clean-data-app section section h1,\n section.hotspot-container section section h1 {\n color: #ffffff;\n font-size: 1rem;\n }\n\n section.clean-data-app section section p,\n section.hotspot-container section section p {\n margin: 5% 0 8% 0;\n padding: 0 3%;\n\n color: #ffffff;\n text-align: center;\n font-family: Arial, sans-serif;\n }\n\n section.hotspot-container section section p {\n width: 100%;\n height: 10%;\n max-height: 300px;\n\n overflow: auto;\n }\n\n section.clean-data-app section section button,\n section.hotspot-container section section button {\n display: flex;\n align-items: center;\n justify-content: center;\n\n padding: 4% 10%;\n\n border: 0;\n border-radius: 60px;\n\n background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);\n background-size: 300%;\n\n animation: 8s infinite ButtonStartVpnAnimation;\n }\n\n section.clean-data-app section section button span,\n section.hotspot-container section section button span {\n color: #ffffff;\n }\n\n section.profile header,\n section.carrier-list header,\n section.container-tools header,\n section.container-logs header,\n section.container-error header {\n width: 100%;\n height: 10%;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n\n padding: 0 20px 0 20px;\n\n background: #200d45;\n }\n\n section.profile header::before,\n section.profile header::after,\n section.carrier-list header::before,\n section.carrier-list header::after,\n section.container-tools header::before,\n section.container-tools header::after,\n section.container-logs header::before,\n section.container-logs header::after,\n section.container-error header::before,\n section.container-error header::after {\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n\n content: \"\";\n\n position: absolute;\n z-index: -1;\n\n background: linear-gradient(135deg,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf,\n #76fcfc,\n #7f47cb,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf);\n background-size: 300%;\n\n animation: 15s infinite ButtonStartVpnAnimation;\n }\n\n section.profile header::after,\n section.carrier-list header::after,\n section.container-tools header::after,\n section.container-logs header::after,\n section.container-error header::after {\n filter: blur(5px);\n }\n\n section.profile header svg,\n section.carrier-list header svg,\n section.container-tools header svg,\n section.container-logs header svg,\n section.container-error header svg {\n width: 20px;\n height: 20px;\n\n margin: 0 auto 0 0;\n\n fill: url(#grad);\n }\n\n section.profile header h1,\n section.carrier-list header h1,\n section.container-tools header h1,\n section.container-logs header h1,\n section.container-error header h1 {\n margin: 0 auto 0 0;\n\n color: #ffffff;\n font-size: 0.9rem;\n }\n\n section.profile form {\n width: 100%;\n height: auto;\n\n padding: 0px 10px;\n\n display: flex;\n flex-direction: column;\n }\n\n section.profile form fieldset {\n width: 100%;\n height: auto;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n position: relative;\n\n margin: 0% 0px;\n padding: 5px 10px;\n\n border: 0px solid #00ff00;\n border-radius: 5px;\n\n background: #200d45;\n }\n\n section.profile form fieldset::before,\n section.profile form fieldset::after {\n width: calc(100% + 2px);\n height: calc(100% + 17px);\n\n content: \"\";\n\n position: absolute;\n top: -16px;\n right: 0;\n bottom: 0;\n left: -1px;\n z-index: -1;\n\n border-radius: 5px;\n\n background: radial-gradient(circle,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf,\n #76fcfc,\n #7f47cb,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf);\n background-size: 300%;\n\n animation: 20s infinite ButtonStartVpnAnimation;\n }\n\n section.profile form fieldset::after {\n filter: blur(3px);\n }\n\n section.profile form fieldset legend {\n padding: 0px 7px 0px 5px;\n background: #200d45;\n }\n\n section.profile form fieldset legend svg {\n width: auto;\n height: 1.563rem;\n\n fill: url(#grad);\n }\n\n section.profile form fieldset p {\n color: #ffffff;\n font-size: 0.9rem;\n font-style: italic;\n }\n\n section.profile form fieldset:nth-child(2) {\n margin-top: 5%;\n\n padding: 0px 10px 20px 10px;\n }\n\n section.profile form fieldset:nth-child(2)::after,\n section.profile form fieldset:nth-child(2)::before {\n height: calc(100% + 15px);\n top: -14px;\n }\n\n section.profile form fieldset:nth-child(2) legend {\n color: #ffffff;\n }\n\n section.profile form fieldset:nth-child(2) label {\n margin-right: auto;\n color: #ffffff;\n }\n\n section.profile form fieldset:nth-child(2) label.hidden {\n display: none;\n }\n\n section.profile form fieldset:nth-child(2) div {\n width: 100%;\n height: 40px;\n\n display: flex;\n align-items: center;\n\n margin: 0 0 0 auto;\n\n border: 1px solid #ffffff;\n border-radius: 5px;\n\n overflow: hidden;\n }\n\n section.profile form fieldset:nth-child(2) div.hidden {\n display: none;\n }\n\n section.profile form fieldset:nth-child(2) div svg {\n width: 15%;\n max-width: 40px;\n height: 100%;\n max-height: 40px;\n\n padding: 3%;\n\n color: #ffffff;\n }\n\n section.profile form fieldset:nth-child(2) div svg.hidden {\n display: none;\n }\n\n section.profile form fieldset:nth-child(2) div input {\n width: 100%;\n height: 100%;\n\n padding: 0px 5px;\n\n border: 0px;\n border-left: 1px solid #ffffff;\n outline: none;\n\n color: #ffffff;\n\n background: transparent;\n }\n\n section.profile form fieldset:nth-child(2) label[for=\"passworddiv\"] {\n margin-top: 4%;\n }\n\n section.profile form fieldset:nth-child(2) label[for=\"uuiddiv\"] {\n margin-top: 4%;\n }\n\n section.profile form fieldset:nth-child(2) button {\n width: 80%;\n min-width: 200px;\n height: 20%;\n min-height: 30px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n margin: 6% auto 0px auto;\n\n border: 0px;\n border-radius: 20px;\n\n background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);\n background-size: 300%;\n\n animation: 5s infinite ButtonStartVpnAnimation;\n }\n\n section.profile form fieldset:nth-child(2) button svg {\n color: #ffffff;\n\n filter: drop-shadow(1px 1px 2px rgba(72, 79, 87, 0.5));\n }\n\n section.profile form fieldset:nth-child(2) button span {\n color: #ffffff;\n font-family: Arial, sans-serif;\n font-weight: 500;\n\n text-shadow: 1px 1px 2px rgba(72, 79, 87, 0.5);\n }\n\n section.carrier-list section {\n width: 100%;\n height: 90%;\n\n overflow-y: auto;\n }\n\n section.carrier-list section div:first-child {\n margin: 0;\n }\n\n section.carrier-list section div {\n width: 100%;\n height: auto;\n\n display: flex;\n flex-direction: column;\n }\n\n section.carrier-list section div h1 {\n width: 100%;\n height: 50px;\n\n display: flex;\n align-items: center;\n\n padding: 0px 3%;\n\n color: #ffffff;\n font-size: 0.9rem;\n\n background: #200d45;\n }\n\n section.carrier-list section div ul {\n width: 100%;\n height: auto;\n list-style: none;\n }\n\n section.carrier-list section div ul li {\n width: 100%;\n height: 60px;\n\n display: flex;\n align-items: center;\n gap: 5px;\n\n position: relative;\n\n margin: 1% 0;\n padding: 0 2%;\n\n background: #07214b;\n\n color: #ffffff;\n\n /* overflow: hidden; */\n /* REMOVER CASO QUEIRA A BORDA ANIMADA E COLORIDA */\n }\n\n section.carrier-list section div ul li::before,\n section.carrier-list section div ul li::after {\n width: 100%;\n height: calc(100% + 2px);\n\n content: \"\";\n\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n\n background: radial-gradient(circle,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf,\n #76fcfc,\n #7f47cb,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf);\n background-size: 300%;\n\n animation: 15s infinite ButtonStartVpnAnimation;\n }\n\n section.carrier-list section div ul li img {\n width: 30px;\n }\n\n section.carrier-list section div ul li span {\n width: calc(100% - 30px);\n\n white-space: nowrap;\n overflow: auto;\n }\n\n section.carrier-list section div ul li svg {\n width: 30px;\n\n display: none;\n }\n\n section.carrier-list section div ul li.active svg {\n display: block;\n }\n\n section.container-tools section {\n width: 100%;\n height: 89%;\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n\n margin: 0 auto 0 auto;\n padding: 2% 0 0 0;\n\n background: transparent;\n\n overflow: auto;\n }\n\n section.container-tools section button {\n width: 100%;\n height: auto;\n\n display: flex;\n align-items: center;\n gap: 5px;\n\n padding: 10px;\n\n border: 0px solid transparent;\n border-bottom: 1px solid #ddd;\n\n background: transparent;\n }\n\n section.container-tools section button svg:first-child {\n width: 20px;\n height: 100%;\n\n margin: 0 10px 0 0;\n\n color: #ffffff;\n }\n\n section.container-tools section button div {\n max-width: 83%;\n height: auto;\n\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 5px;\n }\n\n section.container-tools section button div h3 {\n color: #ffffff;\n }\n\n section.container-tools section button div p {\n color: #ffffff;\n text-align: left;\n }\n\n section.container-tools section button svg:last-child {\n width: 16px;\n height: 100%;\n\n margin: 0 0 0 auto;\n\n color: #ffffff;\n }\n\n section.container-logs section {\n width: 100%;\n height: 85%;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n }\n\n section.container-logs section p {\n width: 100%;\n height: 90%;\n\n padding: 3% 2% 0 2%;\n outline: none;\n\n border: 0;\n\n color: #ffffff;\n font-family: Arial, sans-serif;\n font-size: 0.7rem;\n\n overflow: auto;\n }\n\n section.container-logs section button {\n width: auto;\n height: auto;\n\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n\n padding: 3% 7%;\n\n position: relative;\n\n border: 0px;\n border-radius: 20px;\n\n background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);\n background-size: 300%;\n\n animation: 8s infinite ButtonStartVpnAnimation;\n }\n\n section.container-logs section button svg {\n color: #ffffff;\n }\n\n section.container-logs section button span {\n color: #ffffff;\n }\n\n section.container-error section {\n width: 100%;\n height: 85%;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n section.container-error section h1 {\n margin: 1% 0 0 0;\n color: #ffffff;\n font-size: 0.9rem;\n }\n\n section.container-error section p {\n margin: 3% 0 0 0;\n padding: 0 3%;\n\n color: #ffffff;\n text-align: center;\n font-size: 0.8rem;\n font-family: Arial, sans-serif;\n overflow: auto;\n }\n\n section.active {\n opacity: 1;\n transform: translateX(0%);\n }\n\n section.container-menu {\n width: 100%;\n height: 10%;\n display: flex;\n align-items: center;\n justify-content: center;\n /*gap: 10px;*/\n position: relative;\n margin: auto 0px 0px 0px;\n padding: 0px 10px;\n background: linear-gradient(to bottom, #4807c9, #7703c5);\n }\n\n section.container-menu::before,\n section.container-menu::after {\n width: calc(100%);\n height: calc(100% + 4px);\n\n content: \"\";\n\n position: absolute;\n left: 0;\n right: 0;\n bottom: -2px;\n z-index: -1;\n\n background: linear-gradient(135deg,\n #6f0fd4,\n #007a94,\n #5417a0,\n #008686,\n #540fd1,\n #299c9f,\n #005d5d,\n #5417a0,\n #6f0fd4,\n #007a94,\n #5417a0,\n #008686,\n #540fd1,\n #299c9f);\n background-size: 300%;\n\n animation: 30s infinite alternate-reverse ButtonStartVpnAnimation;\n }\n\n section.container-menu::after {\n filter: blur(10px);\n }\n\n section.container-menu button {\n flex: 1;\n width: 60px;\n height: 50%;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n\n position: relative;\n z-index: 5;\n\n border: 0px;\n\n background: transparent;\n }\n\n section.container-menu button:nth-child(2) {\n margin-right: 10px;\n }\n\n section.container-menu button:nth-child(3) {\n margin-right: 10px;\n }\n\n section.container-menu button:last-child {\n margin-right: 5px;\n }\n\n section.container-menu button svg {\n color: #ffffff;\n }\n\n section.container-menu button span {\n color: #ffffff;\n text-transform: uppercase;\n font-size: 0.7rem;\n }\n\n section.container-toast {\n width: 100%;\n height: auto;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: absolute;\n left: 0;\n bottom: 2.5%;\n right: 0;\n z-index: 99999999;\n\n padding: 10px 10px;\n\n transform: scale(0);\n }\n\n section.container-toast div.toast {\n width: auto;\n height: auto;\n\n display: flex;\n align-items: center;\n\n position: relative;\n\n padding: 0px 5px 0px 0px;\n\n border: 1px solid transparent;\n border-radius: 10px;\n\n overflow: hidden;\n\n background: #192f62;\n }\n\n section.container-toast div.toast::before,\n section.container-toast div.toast::after {\n width: calc(100% + 5px);\n height: calc(100% + 5px);\n\n content: \"\";\n\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n\n background: radial-gradient(circle,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf,\n #76fcfc,\n #7f47cb,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf);\n background-size: 300%;\n\n animation: 15s infinite ButtonStartVpnAnimation;\n }\n\n section.container-toast div.toast.error {\n border: 1px solid #ff0000;\n }\n\n section.container-toast div.toast div.icon {\n width: auto;\n height: 100%;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n padding: 5px 4px 5px 7px;\n\n overflow: hidden;\n\n background: #152039;\n }\n\n section.container-toast div.toast.error div.icon {\n border-right: 1px solid #ff0000;\n }\n\n section.container-toast div.toast div.icon img {\n width: auto;\n height: 100%;\n min-height: 30px;\n }\n\n section.container-toast div.toast span {\n margin-left: 5px;\n\n color: #ffffff;\n font-family: Arial, sans-serif;\n font-size: 0.8rem;\n font-weight: 300;\n }\n\n @media (max-width: 280px) {\n section.container-menu button {\n flex: 1;\n width: 60px;\n max-width: 60px;\n height: 50%;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n\n position: relative;\n z-index: 5;\n\n border: 0px;\n\n background: transparent;\n }\n\n section.container-menu button:last-child {\n margin-right: 10px;\n }\n\n section.container-menu button span {\n font-size: 0.5rem;\n }\n }\n\n @media only screen and (max-width: 576px) {\n section.container-menu button {\n flex: 1;\n width: 60px;\n max-width: 60px;\n height: 50%;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n\n position: relative;\n z-index: 5;\n\n border: 0px;\n\n background: transparent;\n }\n\n section.container-menu button:last-child {\n margin-right: 10px;\n }\n\n section.container-menu button span {\n font-size: 0.6rem;\n }\n }\n\n .spaceInDown {\n -webkit-animation-name: spaceInDown;\n animation-name: spaceInDown;\n }\n\n @-webkit-keyframes spaceInDown {\n 0% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0.2) translate(0%, 200%);\n }\n\n 100% {\n opacity: 1;\n transform-origin: 50% 100%;\n transform: scale(1) translate(0%, 0%);\n }\n }\n\n @keyframes spaceInDown {\n 0% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0.2) translate(0%, 200%);\n }\n\n 100% {\n opacity: 1;\n transform-origin: 50% 100%;\n transform: scale(1) translate(0%, 0%);\n }\n }\n\n .spaceOutDown {\n -webkit-animation-name: spaceOutDown;\n animation-name: spaceOutDown;\n }\n\n @-webkit-keyframes spaceOutDown {\n 0% {\n opacity: 1;\n transform-origin: 50% 100%;\n transform: scale(1) translate(0%, 0%);\n }\n\n 100% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0.2) translate(0%, 200%);\n }\n }\n\n @keyframes spaceOutDown {\n 0% {\n opacity: 1;\n transform-origin: 50% 100%;\n transform: scale(1) translate(0%, 0%);\n }\n\n 100% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0.2) translate(0%, 200%);\n }\n }\n\n .misterVpnAnimatedTime {\n -webkit-animation-duration: 1s;\n animation-duration: 1s;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n }\n\n @media (print),\n (prefers-reduced-motion) {\n .misterVpnAnimatedTime {\n -webkit-animation: unset !important;\n animation: unset !important;\n transition: none !important;\n }\n }\n\n .flex {\n display: flex;\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .items-center {\n align-items: center;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .mt-4 {\n margin-top: 1rem;\n }\n\n .-top-36 {\n top: -9rem;\n }\n\n .relative {\n position: relative;\n }\n\n .bi {\n font-size: 24px;\n color: #fff;\n margin-bottom: 4px;\n }\n\n\n .flex-col {\n top: 0;\n background: transparent;\n border-radius: 27px;\n width: 100%;\n justify-content: center;\n text-align: center;\n margin-left: auto;\n margin-right: auto;\n }\n\n .icon-text-container {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 700;\n font-size: 1.9rem;\n }\n\n .icon-text-container i {\n color: #FFD700;\n }\n\n @keyframes slideGradient {\n 0% {\n background-position: 100% 0;\n }\n\n 100% {\n background-position: -100% 0;\n }\n }\n\n .gradient-text {\n background: linear-gradient(90deg, #FF8C00, #F0F0F0, #FFD700);\n background-size: 200% auto;\n -webkit-background-clip: text;\n color: transparent;\n animation: slideGradient 5s infinite;\n }\n\n\n .bi-shield-lock-fill {\n font-size: 24px;\n color: #051d40;\n }\n\n .container-carrier-selector-button {\n transform: translateY(-50px);\n }\n\n .icon-text-container {\n transform: translateY(-35px);\n }\n\n .hotspot-on {\n background-color: rgb(0, 142, 19);\n }\n\n .hotspot-off {\n background-color: rgb(147, 0, 0);\n }\n\n.custom-section {\n padding: 10px;\n border: 2px solid transparent;\n border-radius: 5px;\n max-width: 300px;\n margin: 20px auto;\n box-shadow: 0 10px 20px #6f0fd4;\n background: linear-gradient(to bottom, #200d4561, #56058c48, #c49fdf5f);\n position: relative;\n animation: borderAnim 10s linear infinite;\n}\n\n@keyframes borderAnim {\n 0% { border-color: #6f0fd4; }\n 7% { border-color: #007a94; }\n 14% { border-color: #5417a0; }\n 21% { border-color: #008686; }\n 28% { border-color: #540fd1; }\n 35% { border-color: #299c9f; }\n 42% { border-color: #005d5d; }\n 49% { border-color: #5417a0; }\n 56% { border-color: #6f0fd4; }\n 63% { border-color: #007a94; }\n 70% { border-color: #5417a0; }\n 77% { border-color: #008686; }\n 84% { border-color: #540fd1; }\n 91% { border-color: #299c9f; }\n 100% { border-color: #6f0fd4; }\n}\n\n\n\n.custom-section label {\n display: block;\n margin-bottom: 2px;\n font-weight: bold;\n color: #ffffff;\n}\n\n\n.custom-section div {\n position: relative;\n margin-bottom: 12px;\n}\n\n.custom-section svg {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n fill: #ffffff;\n}\n\n.custom-section input {\n width: 100%;\n padding: 10px 15px 10px 35px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 16px;\n outline: none;\n}\n\n.custom-section input:focus {\n border-color: #007BFF;\n box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);\n}\n\n.custom-section input {\n background: #ffffff28;\n color: white;\n}\n\n.custom-section #eye-view,\n.custom-section #eye-not-view {\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n cursor: pointer; \n}\n\n.hidden {\n display: none;\n}\n\nlabel {\n margin-bottom: 1px;\n}\n\n#usernamediv, #passworddiv, #uuiddiv {\n margin-top: 1px; \n}\n\n </style>\n</head>\n\n<body class=\"bg-gradient-to-b from-purple-900 via-purple-700 to-purple-300\">\n <main>\n <section class=\"home active d-flex justify-content-center align-items-center\">\n <div class=\"icon-text-container\">\n <i class=\"bi bi-shield-lock-fill\"></i>\n <span class=\"gradient-text\">MisterVPN Tunnel</span>\n </div>\n <section class=\"container-carrier-selector-button\">\n <button type=\"button\" id=\"carrier-list-button\">\n <span id=\"value-of-carrier-list-button\">SELECIONE UMA CONFIGURAÇÃO</span>\n </button>\n </section>\n\n <section class=\"container-button-start-stop-vpn\">\n <button type=\"button\" title=\"Iniciar ou Parar conexão VPN\" id=\"start-stop-vpn-button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-power\"\n viewBox=\"0 0 16 16\">\n <path d=\"M7.5 1v7h1V1h-1z\" />\n <path\n 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\" />\n </svg>\n </button>\n </section>\n <section class=\"nd\">\n </section>\n <span id=\"version\">Carregando versão...</span>\n <section class=\"custom-section\">\n \t<h1 style=\"text-align: center; color: white; font-size: 20px; background-color: rgba(0, 0, 0, 0.1); font-weight: bold;\">Suas credenciais</h1><br>\n <label for=\"usernamediv\">Usuário</label>\n\n <div id=\"usernamediv\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-person\"\n viewBox=\"0 0 16 16\">\n <path\n 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\" />\n </svg>\n\n <input id=\"username\" type=\"text\" name=\"username\" placeholder=\"Digite seu login\" />\n </div>\n\n <label for=\"passworddiv\">Senha</label>\n\n <div id=\"passworddiv\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-key\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z\" />\n <path d=\"M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" />\n </svg>\n\n <input id=\"password\" type=\"password\" name=\"password\" placeholder=\"Digite sua senha\" />\n </div>\n\n <label for=\"uuiddiv\" class=\"hidden\"></label>\n\n <div id=\"uuiddiv\" class=\"hidden\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-fingerprint\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M8.06 6.5a.5.5 0 0 1 .5.5v.776a11.5 11.5 0 0 1-.552 3.519l-1.331 4.14a.5.5 0 0 1-.952-.305l1.33-4.141a10.5 10.5 0 0 0 .504-3.213V7a.5.5 0 0 1 .5-.5Z\" />\n <path\n d=\"M6.06 7a2 2 0 1 1 4 0 .5.5 0 1 1-1 0 1 1 0 1 0-2 0v.332c0 .409-.022.816-.066 1.221A.5.5 0 0 1 6 8.447c.04-.37.06-.742.06-1.115V7Zm3.509 1a.5.5 0 0 1 .487.513 11.5 11.5 0 0 1-.587 3.339l-1.266 3.8a.5.5 0 0 1-.949-.317l1.267-3.8a10.5 10.5 0 0 0 .535-3.048A.5.5 0 0 1 9.569 8Zm-3.356 2.115a.5.5 0 0 1 .33.626L5.24 14.939a.5.5 0 1 1-.955-.296l1.303-4.199a.5.5 0 0 1 .625-.329Z\" />\n <path\n d=\"M4.759 5.833A3.501 3.501 0 0 1 11.559 7a.5.5 0 0 1-1 0 2.5 2.5 0 0 0-4.857-.833.5.5 0 1 1-.943-.334Zm.3 1.67a.5.5 0 0 1 .449.546 10.72 10.72 0 0 1-.4 2.031l-1.222 4.072a.5.5 0 1 1-.958-.287L4.15 9.793a9.72 9.72 0 0 0 .363-1.842.5.5 0 0 1 .546-.449Zm6 .647a.5.5 0 0 1 .5.5c0 1.28-.213 2.552-.632 3.762l-1.09 3.145a.5.5 0 0 1-.944-.327l1.089-3.145c.382-1.105.578-2.266.578-3.435a.5.5 0 0 1 .5-.5Z\" />\n <path\n d=\"M3.902 4.222a4.996 4.996 0 0 1 5.202-2.113.5.5 0 0 1-.208.979 3.996 3.996 0 0 0-4.163 1.69.5.5 0 0 1-.831-.556Zm6.72-.955a.5.5 0 0 1 .705-.052A4.99 4.99 0 0 1 13.059 7v1.5a.5.5 0 1 1-1 0V7a3.99 3.99 0 0 0-1.386-3.028.5.5 0 0 1-.051-.705ZM3.68 5.842a.5.5 0 0 1 .422.568c-.029.192-.044.39-.044.59 0 .71-.1 1.417-.298 2.1l-1.14 3.923a.5.5 0 1 1-.96-.279L2.8 8.821A6.531 6.531 0 0 0 3.058 7c0-.25.019-.496.054-.736a.5.5 0 0 1 .568-.422Zm8.882 3.66a.5.5 0 0 1 .456.54c-.084 1-.298 1.986-.64 2.934l-.744 2.068a.5.5 0 0 1-.941-.338l.745-2.07a10.51 10.51 0 0 0 .584-2.678.5.5 0 0 1 .54-.456Z\" />\n <path\n d=\"M4.81 1.37A6.5 6.5 0 0 1 14.56 7a.5.5 0 1 1-1 0 5.5 5.5 0 0 0-8.25-4.765.5.5 0 0 1-.5-.865Zm-.89 1.257a.5.5 0 0 1 .04.706A5.478 5.478 0 0 0 2.56 7a.5.5 0 0 1-1 0c0-1.664.626-3.184 1.655-4.333a.5.5 0 0 1 .706-.04ZM1.915 8.02a.5.5 0 0 1 .346.616l-.779 2.767a.5.5 0 1 1-.962-.27l.778-2.767a.5.5 0 0 1 .617-.346Zm12.15.481a.5.5 0 0 1 .49.51c-.03 1.499-.161 3.025-.727 4.533l-.07.187a.5.5 0 0 1-.936-.351l.07-.187c.506-1.35.634-2.74.663-4.202a.5.5 0 0 1 .51-.49Z\" />\n </svg>\n\n <input id=\"uuid\" type=\"text\" placeholder=\"UUID\" />\n </div>\n </fieldset>\n </form>\n </section>\n\n </section>\n </section>\n\n <section class=\"carrier-list\">\n <header>\n <svg id=\"back-carrier-container\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-arrow-return-left\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z\" />\n </svg>\n\n <h1>SELECIONE UMA OPÇÃO</h1>\n </header>\n <section></section>\n </section>\n\n\n <section class=\"profile\">\n\n <header>\n <svg id=\"renew-alert\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-arrow-return-left\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z\" />\n </svg>\n\n <h1>LOGIN</h1>\n </header>\n\n <!--<form>\n <fieldset>\n <legend>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-person-exclamation\" viewBox=\"0 0 16 16\">\n <path\n d=\"M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm.256 7a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z\" />\n <path\n d=\"M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-3.5-2a.5.5 0 0 0-.5.5v1.5a.5.5 0 0 0 1 0V11a.5.5 0 0 0-.5-.5Zm0 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z\" />\n </svg>\n </legend>\n\n <p>\n Insira suas credenciais nos campos abaixo e clique no botão\n \"Salvar credenciais\". Isso o levará de volta à página inicial do\n aplicativo, onde você poderá se conectar e desfrutar da conexão.\n </p>\n </fieldset>\n\n <fieldset>\n <legend>Informe suas credenciais</legend>\n\n <label for=\"usernamediv\">Nome de usuário</label>\n\n <div id=\"usernamediv\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-person\"\n viewBox=\"0 0 16 16\">\n <path\n 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\" />\n </svg>\n\n <input id=\"username\" type=\"text\" name=\"username\" placeholder=\"Usuário\" />\n </div>\n\n <label for=\"passworddiv\">Senha</label>\n\n <div id=\"passworddiv\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-key\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z\" />\n <path d=\"M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" />\n </svg>\n\n <input id=\"password\" type=\"password\" name=\"password\" placeholder=\"Senha\" />\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-eye-slash hidden\" id=\"eye-not-view\" viewBox=\"0 0 16 16\">\n <path\n d=\"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z\" />\n <path\n d=\"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z\" />\n <path\n d=\"M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z\" />\n </svg>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-eye\"\n id=\"eye-view\" viewBox=\"0 0 16 16\">\n <path\n 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\" />\n <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\" />\n </svg>\n </div>\n\n <label for=\"uuiddiv\" class=\"hidden\">UUID</label>\n\n <div id=\"uuiddiv\" class=\"hidden\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-fingerprint\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M8.06 6.5a.5.5 0 0 1 .5.5v.776a11.5 11.5 0 0 1-.552 3.519l-1.331 4.14a.5.5 0 0 1-.952-.305l1.33-4.141a10.5 10.5 0 0 0 .504-3.213V7a.5.5 0 0 1 .5-.5Z\" />\n <path\n d=\"M6.06 7a2 2 0 1 1 4 0 .5.5 0 1 1-1 0 1 1 0 1 0-2 0v.332c0 .409-.022.816-.066 1.221A.5.5 0 0 1 6 8.447c.04-.37.06-.742.06-1.115V7Zm3.509 1a.5.5 0 0 1 .487.513 11.5 11.5 0 0 1-.587 3.339l-1.266 3.8a.5.5 0 0 1-.949-.317l1.267-3.8a10.5 10.5 0 0 0 .535-3.048A.5.5 0 0 1 9.569 8Zm-3.356 2.115a.5.5 0 0 1 .33.626L5.24 14.939a.5.5 0 1 1-.955-.296l1.303-4.199a.5.5 0 0 1 .625-.329Z\" />\n <path\n d=\"M4.759 5.833A3.501 3.501 0 0 1 11.559 7a.5.5 0 0 1-1 0 2.5 2.5 0 0 0-4.857-.833.5.5 0 1 1-.943-.334Zm.3 1.67a.5.5 0 0 1 .449.546 10.72 10.72 0 0 1-.4 2.031l-1.222 4.072a.5.5 0 1 1-.958-.287L4.15 9.793a9.72 9.72 0 0 0 .363-1.842.5.5 0 0 1 .546-.449Zm6 .647a.5.5 0 0 1 .5.5c0 1.28-.213 2.552-.632 3.762l-1.09 3.145a.5.5 0 0 1-.944-.327l1.089-3.145c.382-1.105.578-2.266.578-3.435a.5.5 0 0 1 .5-.5Z\" />\n <path\n d=\"M3.902 4.222a4.996 4.996 0 0 1 5.202-2.113.5.5 0 0 1-.208.979 3.996 3.996 0 0 0-4.163 1.69.5.5 0 0 1-.831-.556Zm6.72-.955a.5.5 0 0 1 .705-.052A4.99 4.99 0 0 1 13.059 7v1.5a.5.5 0 1 1-1 0V7a3.99 3.99 0 0 0-1.386-3.028.5.5 0 0 1-.051-.705ZM3.68 5.842a.5.5 0 0 1 .422.568c-.029.192-.044.39-.044.59 0 .71-.1 1.417-.298 2.1l-1.14 3.923a.5.5 0 1 1-.96-.279L2.8 8.821A6.531 6.531 0 0 0 3.058 7c0-.25.019-.496.054-.736a.5.5 0 0 1 .568-.422Zm8.882 3.66a.5.5 0 0 1 .456.54c-.084 1-.298 1.986-.64 2.934l-.744 2.068a.5.5 0 0 1-.941-.338l.745-2.07a10.51 10.51 0 0 0 .584-2.678.5.5 0 0 1 .54-.456Z\" />\n <path\n d=\"M4.81 1.37A6.5 6.5 0 0 1 14.56 7a.5.5 0 1 1-1 0 5.5 5.5 0 0 0-8.25-4.765.5.5 0 0 1-.5-.865Zm-.89 1.257a.5.5 0 0 1 .04.706A5.478 5.478 0 0 0 2.56 7a.5.5 0 0 1-1 0c0-1.664.626-3.184 1.655-4.333a.5.5 0 0 1 .706-.04ZM1.915 8.02a.5.5 0 0 1 .346.616l-.779 2.767a.5.5 0 1 1-.962-.27l.778-2.767a.5.5 0 0 1 .617-.346Zm12.15.481a.5.5 0 0 1 .49.51c-.03 1.499-.161 3.025-.727 4.533l-.07.187a.5.5 0 0 1-.936-.351l.07-.187c.506-1.35.634-2.74.663-4.202a.5.5 0 0 1 .51-.49Z\" />\n </svg>\n\n <input id=\"uuid\" type=\"text\" placeholder=\"UUID\" />\n </div>-->\n\n <button id=\"save-creds\" type=\"button\" title=\"Salvar informações de usuario e senha\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-save\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9.5a1 1 0 0 0-1 1v7.293l2.646-2.647a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L7.5 9.293V2a2 2 0 0 1 2-2H14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h2.5a.5.5 0 0 1 0 1H2z\" />\n </svg>\n\n <span>Salvar credenciais</span>\n </button>\n </fieldset>\n </form>\n </section>\n\n <section class=\"container-tools\">\n <header>\n <svg id=\"back-tools-container\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-arrow-return-left\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z\" />\n </svg>\n\n <h1>FERRAMENTAS</h1>\n </header>\n\n <section>\n <button type=\"button\" id=\"register-button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-list-columns\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M0 .5A.5.5 0 0 1 .5 0h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 0 .5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 2h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 4h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 6h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 8h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z\" />\n </svg>\n\n <div>\n <h3>REGISTRO</h3>\n <p>\n Verifica todos os detalhes do registro de logs ao se conectar, isso e importante para ajudar o fornecedor\n a compreender o erro que se passa.\n </p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"speedtest-tool\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-activity\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z\" />\n </svg>\n\n <div>\n <h3>SPEEDTEST</h3>\n <p>Teste a velocidade da sua conexão.</p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"hotspot-button-tools\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-broadcast\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707zm2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708zm5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708zm2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0z\" />\n </svg>\n\n <div>\n <h3>HOTSPOT</h3>\n <p>\n Aqui você pode compartilar sua conexão VPN usando o roteador do\n seu celular.\n </p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"apn-tool\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-broadcast-pin\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707zm2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708zm5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708zm2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM6 8a2 2 0 1 1 2.5 1.937V15.5a.5.5 0 0 1-1 0V9.937A2 2 0 0 1 6 8z\" />\n </svg>\n\n <div>\n <h3>CONFIGURAR APN</h3>\n <p>Por aqui você sera redirecionado para as configurações de apn de seu aparelho android e fara as edições\n que desejar.</p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"battery-tool\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-battery-charging\" viewBox=\"0 0 16 16\">\n <path\n d=\"M9.585 2.568a.5.5 0 0 1 .226.58L8.677 6.832h1.99a.5.5 0 0 1 .364.843l-5.334 5.667a.5.5 0 0 1-.842-.49L5.99 9.167H4a.5.5 0 0 1-.364-.843l5.333-5.667a.5.5 0 0 1 .616-.09z\" />\n <path d=\"M2 4h4.332l-.94 1H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h2.38l-.308 1H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z\" />\n <path\n d=\"M2 6h2.45L2.908 7.639A1.5 1.5 0 0 0 3.313 10H2V6zm8.595-2-.308 1H12a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H9.276l-.942 1H12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.405z\" />\n <path\n d=\"M12 10h-1.783l1.542-1.639c.097-.103.178-.218.241-.34V10zm0-3.354V6h-.646a1.5 1.5 0 0 1 .646.646zM16 8a1.5 1.5 0 0 1-1.5 1.5v-3A1.5 1.5 0 0 1 16 8z\" />\n </svg>\n\n <div>\n <h3>OTIMIZAÇÃO DE BATERIA</h3>\n <p>\n Aqui você consegue desativar a otimização de bateria que acaba\n encerrando o aplicativo sem a sua permissão!\n </p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"checkuser-tool\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-person-lines-fill\" viewBox=\"0 0 16 16\">\n <path\n d=\"M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z\" />\n </svg>\n\n <div>\n <h3>DETALHES DO LOGIN</h3>\n <p>\n Aqui você consegue visualizar alguns detalhes do seu perfil.\n </p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"button-open-clear-data-app\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-trash\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z\" />\n <path\n d=\"M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z\" />\n </svg>\n\n <div>\n <h3>LIMPAR DADOS</h3>\n <p>\n Aqui você pode fazer a limpeza do cache e dados do aplicativo, lembre-se de ter internet para atualizar o\n aplicativo novamente.\n </p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"button-open-terms-app\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-journal-medical\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M8 4a.5.5 0 0 1 .5.5v.634l.549-.317a.5.5 0 1 1 .5.866L9 6l.549.317a.5.5 0 1 1-.5.866L8.5 6.866V7.5a.5.5 0 0 1-1 0v-.634l-.549.317a.5.5 0 1 1-.5-.866L7 6l-.549-.317a.5.5 0 0 1 .5-.866l.549.317V4.5A.5.5 0 0 1 8 4zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z\" />\n <path\n d=\"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\" />\n <path\n d=\"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\" />\n </svg>\n\n <div>\n <h3>TERMOS DE USO</h3>\n <p>\n Aqui você consegue ler os termos de uso e licença do aplicativo.\n </p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n </section>\n </section>\n\n <section class=\"container-logs\">\n <header>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-arrow-return-left\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z\" />\n </svg>\n\n <h1>REGISTRO</h1>\n </header>\n\n <section>\n <p></p>\n\n <button type=\"button\" id=\"clear-logs\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-trash\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z\" />\n <path\n d=\"M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z\" />\n </svg>\n\n <span>LIMPAR REGISTRO</span>\n </button>\n </section>\n </section>\n\n <!-- <section class=\"loading\">\n <section>\n <header>\n <h1>CARREGANDO INFORMAÇÕES</h1>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x-lg\"\n id=\"loading-container-close\" viewBox=\"0 0 16 16\">\n <path\n d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\" />\n </svg>\n </header>\n\n <div class=\"loading\"></div>\n </section>\n </section>\n\n <section class=\"checkuser\">\n <section>\n <header>\n <h1>DETALHES DO USUÁRIO</h1>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x-lg\"\n id=\"checkuser-close\" viewBox=\"0 0 16 16\">\n <path\n d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\" />\n </svg>\n </header>\n\n <section>\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-person-fill\"\n viewBox=\"0 0 16 16\">\n <path d=\"M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z\" />\n </svg>\n\n <span id=\"checkuser-name\">USUÁRIO: A@MRSILENT1</span>\n </div>\n\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-calendar-fill\" viewBox=\"0 0 16 16\">\n <path\n 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-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z\" />\n </svg>\n\n <span id=\"checkuser-expires\">EXPIRA EM: 25/09/2023</span>\n </div>\n\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-clock-fill\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z\" />\n </svg>\n\n <span id=\"checkuser-remaing-days\">RESTA: 30 DIAS</span>\n </div>\n\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-phone-fill\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M3 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V2zm6 11a1 1 0 1 0-2 0 1 1 0 0 0 2 0z\" />\n </svg>\n\n <span id=\"checkuser-total-conection\">CONEXÕES: 1/10</span>\n </div>\n </section>\n </section>\n </section>\n--> \n <section class=\"clean-data-app\">\n <section>\n <header>\n <h1>DESEJA CONFIRMAR ESSA AÇÃO ?</h1>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x-lg\"\n id=\"hidden-clear-data-app\" viewBox=\"0 0 16 16\">\n <path\n d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\" />\n </svg>\n </header>\n\n <section>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-exclamation-lg\" viewBox=\"0 0 16 16\">\n <path\n d=\"M7.005 3.1a1 1 0 1 1 1.99 0l-.388 6.35a.61.61 0 0 1-1.214 0L7.005 3.1ZM7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z\" />\n </svg>\n\n <h1>TEM CERTEZA DA AÇÃO ?</h1>\n\n <p>\n Ao efetuar a ação de limpar os dados do aplicativo, será possível\n carregar somente as configurações mais recentes mediante uma\n conexão ativa com a internet.\n </p>\n\n <button type=\"button\" id=\"confirm-clean-data-app\">\n <span>CONFIRMAR</span>\n </button>\n </section>\n </section>\n </section>\n\n <section class=\"hotspot-container\">\n <section>\n <header>\n <h1>ROTEADOR WIFI - HOTSPOT</h1>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x-lg\"\n id=\"hidden-hotspot-container\" viewBox=\"0 0 16 16\">\n <path\n d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\" />\n </svg>\n </header>\n\n <section>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-router-fill\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"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\" />\n <path d=\"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.707Z\" />\n <path\n d=\"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.342ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm1.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z\" />\n <path d=\"M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z\" />\n </svg>\n\n <h1 id=\"title-hotspot\">ROTEAMENTO DESLIGADO</h1>\n\n <p>\n Ao ativar o hotspot com compartilhamento de VPN do seu celular, um\n IP local é gerado no seu dispositivo. Este IP é usado como proxy\n no dispositivo conectado à sua rede Wi-Fi.\n <br />\n <br />\n\n <b>SIGA ESTES PASSOS IMPORTANTES</b>\n\n <br />\n <br />\n 1 - Ligue o roteador do celular primeiro.\n <br /><br />\n 2 - Ative o compartilhamento de VPN.\n <br /><br />\n 3 - Use o botão para controlar o roteador.\n <br /><br />\n 4 - Encontre o segundo IP na barra de notificações.\n <br /><br />\n 5 - Copie o segundo IP e use como proxy no dispositivo conectado à\n rede.\n <br />\n <br />\n\n Lembre-se: O segundo IP é seu proxy. Isso garantirá o correto\n funcionamento do compartilhamento de VPN via hotspot do celular.\n </p>\n\n <button type=\"button\" id=\"enable-hotspot\">\n <span id=\"value-button-hotspot\">LIGAR HOTSPOT</span>\n </button>\n </section>\n </section>\n </section>\n\n <section class=\"terms-container\">\n <section>\n <header>\n <h1>TERMOS DE USO</h1>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x-lg\"\n id=\"hidden-terms-container\" viewBox=\"0 0 16 16\">\n <path\n d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\" />\n </svg>\n </header>\n\n <p>\n Importante: Ao utilizar o nosso aplicativo, é fundamental que você\n esteja ciente e concorde com os seguintes pontos:\n\n <br /><br /><br />\n\n 1° - Nosso suporte está disponível para ajudar clientes que\n enfrentam problemas como dificuldades de conexão, informações\n incorretas, ou se o aplicativo não está instalado corretamente.\n\n <br /><br />\n\n 2° - Não somos responsáveis por questões relacionadas à manutenção\n da sua operadora, quedas na conexão causadas por fatores externos ou\n problemas climáticos que possam afetar a velocidade da sua internet\n através da VPN.\n\n <br /><br />\n\n 3° - Caso haja uma interrupção no serviço devido à operadora, não\n efetuamos reembolsos.\n <br /><br />\n\n 4° - Não nos responsabilizamos por sites e jogos que impeçam o uso\n de VPN.\n\n <br /><br />\n\n 5° - É permitido usar apenas o número de dispositivos estipulado no\n seu contrato com o revendedor autorizado.\n\n <br /><br />\n\n 6° - É estritamente proibido o uso de aplicativos torrent ou P2P,\n pois eles podem prejudicar o desempenho dos nossos servidores.\n\n <br /><br />\n\n 7° - É importante que, independentemente da sua operadora, você faça\n uma recarga a cada 2 meses para garantir um serviço contínuo.\n\n <br /><br />\n\n 8° - Mantenha o aplicativo sempre atualizado, pois as atualizações\n são necessárias para garantir o bom funcionamento do serviço.\n\n <br /><br /><br /><br />\n\n Agradecemos por escolher o nosso aplicativo e desejamos a você uma\n ótima experiência de navegação!<br><br><b>Atenciosamente,\n <br>Equipe MisterVPN.</b>\n </p>\n </section>\n </section>\n\n <section class=\"container-error\">\n <header>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-arrow-return-left\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z\" />\n </svg>\n\n <h1>ERROR</h1>\n </header>\n\n <section>\n <h1 id=\"error-title\"></h1>\n\n <p id=\"error-log\"></p>\n </section>\n </section>\n\n <section class=\"container-toast misterVpnAnimatedTime\">\n <div class=\"toast\">\n <div class=\"icon\">\n <img\n src=\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Camada_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 255.17 400'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%239f2eff;%7D.cls-3%7Bfill:none;stroke:url(%23Gradiente_sem_nome_253-3);%7D.cls-3,.cls-4%7Bstroke-miterlimit:10;%7D.cls-4%7Bfill:url(%23Gradiente_sem_nome_253);stroke:url(%23Gradiente_sem_nome_253-2);%7D.cls-5%7Bfill:%230ab1d3;%7D%3C/style%3E%3ClinearGradient id='Gradiente_sem_nome_253' x1='76.24' y1='76.85' x2='139.38' y2='76.85' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230bb1d3'/%3E%3Cstop offset='1' stop-color='%239f2fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='Gradiente_sem_nome_253-2' x1='75.93' x2='139.69' xlink:href='%23Gradiente_sem_nome_253'/%3E%3ClinearGradient id='Gradiente_sem_nome_253-3' x1='72.44' y1='201.84' x2='127.55' y2='201.84' xlink:href='%23Gradiente_sem_nome_253'/%3E%3C/defs%3E%3Ccircle class='cls-5' cx='167.12' cy='32.88' r='32.88'/%3E%3Ccircle class='cls-1' cx='42.09' cy='132.11' r='42.09'/%3E%3Ccircle class='cls-2' cx='169.67' cy='314.5' r='85.5'/%3E%3Cline class='cls-4' x1='139.38' y1='51.86' x2='76.24' y2='101.85'/%3E%3Cline class='cls-3' x1='72.84' y1='165.78' x2='127.15' y2='237.9'/%3E%3C/svg%3E\"\n alt=\"Icone do toast\" />\n </div>\n\n <span class=\"text\">Procurando atualizações</span>\n </div>\n </section>\n </main>\n\n <section class=\"container-menu\">\n <button id=\"home\" type=\"button\" title=\"Inicio\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-house\"\n viewBox=\"0 0 16 16\">\n <defs>\n <linearGradient id=\"grad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" stop-color=\"#0bb1d3\" />\n <stop offset=\"100%\" stop-color=\"#9f2fff\" />\n </linearGradient>\n </defs>\n <path\n d=\"M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z\" />\n </svg>\n\n <span>Inicio</span>\n </button>\n\n <!--<button id=\"login\" type=\"button\" title=\"Login\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-person\"\n viewBox=\"0 0 16 16\">\n <path\n 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\" />\n </svg>\n\n <span>LOGIN</span>\n </button>-->\n\n\n\n <button id=\"register-button\" type=\"button\" title=\"Logs\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-list-columns\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M0 .5A.5.5 0 0 1 .5 0h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 0 .5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 2h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 4h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 6h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 8h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z\" />\n </svg>\n\n <span>Logs</span>\n </button>\n\n\n <button id=\"tools\" type=\"button\" title=\"Ferramentas\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-nut\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"m11.42 2 3.428 6-3.428 6H4.58L1.152 8 4.58 2h6.84zM4.58 1a1 1 0 0 0-.868.504l-3.428 6a1 1 0 0 0 0 .992l3.428 6A1 1 0 0 0 4.58 15h6.84a1 1 0 0 0 .868-.504l3.429-6a1 1 0 0 0 0-.992l-3.429-6A1 1 0 0 0 11.42 1H4.58z\" />\n <path\n d=\"M6.848 5.933a2.5 2.5 0 1 0 2.5 4.33 2.5 2.5 0 0 0-2.5-4.33zm-1.78 3.915a3.5 3.5 0 1 1 6.061-3.5 3.5 3.5 0 0 1-6.062 3.5z\" />\n </svg>\n\n <span>Ajustes</span>\n </button>\n \n <button id=\"update\" type=\"button\" title=\"Atualizar\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-arrow-clockwise\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z\" />\n <path d=\"M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z\" />\n </svg>\n\n <span>Atualizar</span>\n </button>\n </section>\n\n <!-- FUNÇÕES DO APP -->\n <script>\n \n const appGetStatusbarHeightSize = () => DtGetStatusBarHeight.execute()\n const appGetNavbarHeightSize = () => DtGetNavigationBarHeight.execute()\n\n const appTranslateText = (label) => DtTranslateText.execute(label)\n const appGetConfigLabel = (label) => DtGetAppConfig.execute(label)\n\n const AppUpdate = () => DtStartAppUpdate.execute()\n\n const appAllConfigs = () => DtGetConfigs.execute()\n const appSetConfig = (id) => DtSetConfig.execute(id)\n const appGetDefaultConfig = () => DtGetDefaultConfig.execute()\n const appGetConfigVersion = () => `${DtGetLocalConfigVersion.execute() ?? \"1.0\"}`;\n\n const appGetUsername = () => DtUsername.get()\n const appSetUsername = (username) => DtUsername.set(username)\n const appGetPassword = () => DtPassword.get()\n const appSetPassword = (password) => DtPassword.set(password)\n const appGetUUID = () => DtUuid.get()\n const appSetUUID = (uuid) => DtUuid.set(uuid)\n\n const appGetConnectionState = () => DtGetVpnState.execute()\n const appStartConnection = () => DtExecuteVpnStart.execute()\n const appStopConnection = () => DtExecuteVpnStop.execute()\n\n const appGetStatusHotspot = () => DtGetStatusHotSpotService.execute()\n const appStartHotspot = () => DtStartHotSpotService.execute()\n const appStopHotspot = () => DtStopHotSpotService.execute()\n\n const appGetLogs = () => DtGetLogs.execute()\n const appCleanLogs = () => DtClearLogs.execute()\n\n const appBatteryOptimize = () => DtIgnoreBatteryOptimizations.execute()\n const appApnConfiguration = () => DtStartApnActivity.execute()\n const appStartCheckUser = () => DtStartCheckUser.execute()\n const appIntoBrowser = (url) => DtStartWebViewActivity.execute(url)\n const appClearData = () => DtCleanApp.execute()\n </script>\n\n <!-- VARIAVEIS LET -->\n <script>\n let timeoutId\n </script>\n\n <!-- DOM WRAPPER -->\n <script>\n const Dom = (selector) => {\n const _elements = document.querySelectorAll(selector)\n\n const wrapper = {\n on(listeners) {\n for (const [event, listener] of Object.entries(listeners)) {\n _elements.forEach((element) => {\n element.addEventListener(event, listener)\n })\n }\n\n return wrapper\n },\n addClass: (...tokens) => {\n _elements.forEach((element) => {\n element.classList.add(...tokens)\n })\n\n return wrapper\n },\n removeClass: (...tokens) => {\n _elements.forEach((element) => {\n element.classList.remove(...tokens)\n })\n\n return wrapper\n },\n toggleClass: (token, force) => {\n _elements.forEach((element) => {\n element.classList.toggle(token, force)\n })\n\n return wrapper\n },\n style(styles) {\n for (const [property, value] of Object.entries(styles)) {\n console.log(value)\n _elements.forEach((element) => {\n element.style[property] = value\n })\n }\n\n return wrapper\n },\n attr(attrs) {\n for (const [name, value] of Object.entries(attrs)) {\n _elements.forEach((element) => element.setAttribute(name, value))\n }\n\n return wrapper\n },\n html(value) {\n _elements.forEach((element) => (element.innerHTML = value))\n return wrapper\n },\n }\n\n return wrapper\n }\n </script>\n\n <!-- AÇÕES EM VARIAVEIS ROOT -->\n <script>\n document.documentElement.style.setProperty(\n \"--space-status-bar\",\n `${appGetStatusbarHeightSize() + 10}px`\n )\n document.documentElement.style.setProperty(\n \"--space-nav-bar\",\n `${appGetNavbarHeightSize() + 10}px`\n )\n </script>\n\n <!-- VARIAVEIS -->\n <script>\n const Body = Dom(\"body\")\n\n const HomeHeader = Dom(\"section.home header\")\n const LogoHeader = Dom(\"#app_logo\")\n\n const HomeContainer = Dom(\"section.home\")\n const CarrierContainer = Dom(\"section.carrier-list\")\n const ProfileContainer = Dom(\"section.profile\")\n const ToolsContainer = Dom(\"section.container-tools\")\n const RegisterContainer = Dom(\"section.container-logs\")\n const ErrorContainer = Dom(\"section.container-error\")\n const LoadingContainer = Dom(\"section.loading\")\n //const CheckuserContainer = Dom(\"section.checkuser\")\n const ClearDataContainer = Dom(\"section.clean-data-app\")\n const HotspotContainer = Dom(\"section.hotspot-container\")\n const TermsContainer = Dom(\"section.terms-container\")\n\n const BackButtonCarrierContainer = Dom(\"#back-carrier-container\")\n const BackProfileContainer = Dom(\"#back-profile-container\")\n const BackToolsContainer = Dom(\"#back-tools-container\")\n const BackRegisterContainer = Dom(\"section.container-logs header svg\")\n const BackErrorContainer = Dom(\"section.container-error header svg\")\n const BackLoadingContainer = Dom(\"#loading-container-close\")\n const BackCheckuserContainer = Dom(\"#checkuser-close\")\n const BackClearDataContainer = Dom(\"#hidden-clear-data-app\")\n const BackHotspotContainer = Dom(\"#hidden-hotspot-container\")\n const BackTermsContainer = Dom(\"#hidden-terms-container\")\n\n const RenewContainer = Dom(\"section.renew-alert\")\n const ButtonRenew = Dom(\"#renew-button\")\n\n const ConfigVersion = Dom(\"#version\")\n\n const ButtonOfCarrierList = Dom(\"#carrier-list-button\")\n const ValueOfCarrierListButton = Dom(\"#value-of-carrier-list-button\")\n\n const ButtonVpnStartOrStop = Dom(\"#start-stop-vpn-button\")\n\n const LabelDivUser = Dom(\"label[for='usernamediv']\")\n const LabelDivPassword = Dom(\"label[for='passworddiv']\")\n const LabelUUID = Dom(\"label[for='uuiddiv']\")\n const DivUsername = Dom(\"#usernamediv\")\n const DivPassword = Dom(\"#passworddiv\")\n const DivUUID = Dom(\"#uuiddiv\")\n const InputUsername = Dom(\"#username\")\n const InputPassword = Dom(\"#password\")\n const InputUUID = Dom(\"#uuid\")\n const EyeViewPasswordInput = Dom(\"#eye-view\")\n const EyeNotViewPasswordInput = Dom(\"#eye-not-view\")\n const ButtonSaveCreds = Dom(\"#save-creds\")\n\n const CheckuserName = Dom(\"#checkuser-name\")\n const CheckuserExpires = Dom(\"#checkuser-expires\")\n const CheckuserRemainingDays = Dom(\"#checkuser-remaing-days\")\n const CheckuserTotalConnection = Dom(\"#checkuser-total-conection\")\n\n const LogsTextarea = Dom(\"section.container-logs section p\")\n\n const ToastContainer = Dom(\"section.container-toast\")\n const Toast = Dom(\"section.container-toast div.toast\")\n const ToastIcon = Dom(\"section.container-toast div.toast div.icon\")\n const ToastText = Dom(\"section.container-toast div.toast span.text\")\n\n const HomeButton = Dom(\"#home\")\n const LoginButton = Dom(\"#login\")\n const ToolsButton = Dom(\"#tools\")\n const UpdateButton = Dom(\"#update\")\n\n const ButtonRegister = Dom(\"#register-button\")\n const ButtonCleanRegisterLogs = Dom(\"#clear-logs\")\n\n const ButtonStartStopHotspot = Dom(\"#enable-hotspot\")\n const ButtonOpenHotspotContainer = Dom(\"#hotspot-button-tools\")\n const TitleHotspotContainer = Dom(\"#title-hotspot\")\n const ValueOfButtonHotspotContainer = Dom(\"#value-button-hotspot\")\n\n const ButtonOpenClearDataContainer = Dom(\"#button-open-clear-data-app\")\n const ButtonConfirmClearData = Dom(\"#confirm-clean-data-app\")\n\n const ButtonOpenSpeedtest = Dom(\"#speedtest-tool\")\n const ButtonOpenApnConfig = Dom(\"#apn-tool\")\n const ButtonOpenBatteryOptimization = Dom(\"#battery-tool\")\n const ButtonOpenCheckuser = Dom(\"#checkuser-tool\")\n const ButtonOpenTerms = Dom(\"#button-open-terms-app\")\n\n const ErrorTitle = Dom(\"#error-title\")\n const ErrorDescription = Dom(\"#error-log\")\n </script>\n\n <!-- FUNÇÕES PARA O APP -->\n <script>\n const dtShowSuccessToastListener = (value) => showToastContainer(value)\n const dtShowErrorToastListener = (value) =>\n showToastContainerWithError(value)\n const dtConfigClickListener = () => {\n toggleInput()\n writeInputValue()\n }\n const dtVpnStateListener = (state) => connectionState(state)\n const dtOnNewLogListener = () => writeLogsRegister()\n const dtMessageErrorListener = (model) => writeErrorContainer(model)\n const dtCheckUserStartedListener = () => showLoadingContainer()\n const dtCheckUserModelListener = (model) => writeCheckuserContainer(model)\n </script>\n\n <!-- FUNÇÕES DO LAYOUT -->\n <script>\n const appLogo = () => {\n const logo = appGetConfigLabel(\"APP_LOGO\")\n\n if (!logo) {\n return \"\"\n } else {\n return `${JSON.parse(logo).value}`\n }\n }\n const appBackground = () => {\n const background_type = appGetConfigLabel(\"APP_BACKGROUND_TYPE\")\n const background_color = appGetConfigLabel(\"APP_BACKGROUND_COLOR\")\n const background_image = appGetConfigLabel(\"APP_BACKGROUND_IMAGE\")\n\n if (!background_type) {\n return \"\"\n } else if (JSON.parse(background_type)?.value === \"COLOR\") {\n return `${JSON.parse(background_color).value}`\n } else {\n return `url(${JSON.parse(background_image).value})`\n }\n }\n\n const getConfigName = () => {\n if (!appGetDefaultConfig()) {\n return `${appTranslateText(\"LBL_CHOOSE_CONFIG\")}`\n } else {\n return `${JSON.parse(appGetDefaultConfig())?.name}`\n }\n }\n\n const getUsernameValue = () => `${appGetUsername() ?? \"\"}`\n const getPasswordValue = () => `${appGetPassword() ?? \"\"}`\n const getUUIDValue = () => `${appGetUUID() ?? \"\"}`\n\n const getUsernamePlaceholder = () => `${appTranslateText(\"LBL_USERNAME\")}`\n const getPassowrdPlaceholder = () => `${appTranslateText(\"LBL_PASSWORD\")}`\n const getUUIDPlaceholder = () => `${appTranslateText(\"LBL_UUID\")}`\n\n const toggleInput = () => {\n if (checkV2ray()) {\n LabelDivUser.style({ display: \"none\" })\n DivUsername.style({ display: \"none\" })\n\n LabelDivPassword.style({ display: \"none\" })\n DivPassword.style({ display: \"none\" })\n\n LabelUUID.removeClass(\"hidden\")\n DivUUID.removeClass(\"hidden\")\n } else {\n LabelDivUser.style({ display: \"block\" })\n DivUsername.style({ display: \"flex\" })\n\n LabelDivPassword.style({ display: \"block\" })\n DivPassword.style({ display: \"flex\" })\n\n LabelUUID.addClass(\"hidden\")\n DivUUID.addClass(\"hidden\")\n }\n }\n const writeInputValue = () => {\n InputUsername.attr({ value: getUsernameValue() })\n InputPassword.attr({ value: getPasswordValue() })\n InputUUID.attr({ value: getUUIDValue() })\n }\n const writeInputPlaceholder = () => {\n InputUsername.attr({ placeholder: getUsernamePlaceholder() })\n InputPassword.attr({ placeholder: getPassowrdPlaceholder() })\n InputUUID.attr({ placeholder: getUUIDPlaceholder() })\n }\n const showInputPasswordValue = () => {\n EyeViewPasswordInput.addClass(\"hidden\")\n EyeNotViewPasswordInput.removeClass(\"hidden\")\n InputPassword.attr({ type: \"text\" })\n }\n const hiddenInputPasswordValue = () => {\n EyeViewPasswordInput.removeClass(\"hidden\")\n EyeNotViewPasswordInput.addClass(\"hidden\")\n InputPassword.attr({ type: \"password\" })\n }\n\n const checkV2ray = () => {\n const data = JSON.parse(appGetDefaultConfig())\n\n if (!appGetDefaultConfig()) {\n return false\n } else if (data?.mode?.toLowerCase()?.startsWith(\"v2ray\")) {\n return true\n } else {\n return false\n }\n }\n\n const getConnectionState = () => {\n const rootStyles = getComputedStyle(document.documentElement)\n\n const defaultColor = \"--default-background-color\"\n const connectedColor = \"--connected-background-color\"\n const connectingColor = \"--connecting-background-color\"\n const errorColor = \"--error-background-color\"\n\n const states = {\n disconnected: () => {\n const gradientColor = rootStyles.getPropertyValue(defaultColor)\n\n document.documentElement.style.setProperty(\n defaultColor,\n \"linear-gradient(135deg,#9f2fff,#0bb1d3,#7f47cb,#00ffff,#7a2cec,#4adfdf,#76fcfc,#7f47cb,#9f2fff,#0bb1d3,#7f47cb,#00ffff,#7a2cec,#4adfdf)\"\n )\n\n return states\n },\n connecting: () => {\n const gradientColor = rootStyles.getPropertyValue(connectingColor)\n\n document.documentElement.style.setProperty(\n defaultColor,\n gradientColor\n )\n\n return states\n },\n connected: () => {\n const gradientColor = rootStyles.getPropertyValue(connectedColor)\n\n document.documentElement.style.setProperty(\n defaultColor,\n gradientColor\n )\n\n return states\n },\n error: () => {\n const gradientColor = rootStyles.getPropertyValue(errorColor)\n\n document.documentElement.style.setProperty(\n defaultColor,\n gradientColor\n )\n\n return states\n },\n }\n\n return states\n }\n\n const connectionState = (state) => {\n const connectionValue = `${state ?? appGetConnectionState()}`\n\n switch (connectionValue) {\n case \"DISCONNECTED\":\n getConnectionState().disconnected()\n break\n case \"CONNECTING\":\n getConnectionState().connecting()\n break\n case \"CONNECTED\":\n getConnectionState().connected()\n break\n case \"STOPPING\":\n getConnectionState().connecting()\n break\n case \"NO_NETWORK\":\n getConnectionState().error()\n break\n case \"AUTH\":\n getConnectionState().connecting()\n break\n case \"AUTH_FAILED\":\n getConnectionState().connecting()\n break\n }\n }\n\n\n const startStopConnection = () => {\n const state = appGetConnectionState()\n\n state !== \"CONNECTED\" ? appStartConnection() : appStopConnection()\n }\n\n const writeLogsRegister = () => {\n const data = JSON.parse(appGetLogs())\n\n let logs = \"\"\n\n data.forEach((item) => {\n logs += `${Object.keys(item)} ${item[Object.keys(item)]} <br>`\n })\n\n LogsTextarea.html(logs)\n document.querySelector(\"section.container-logs section p\").scrollTop =\n document.querySelector(\n \"section.container-logs section p\"\n ).scrollHeight\n }\n\n const writeCarrierList = () => {\n const container = document.querySelector(\"section.carrier-list section\")\n const existingCategories = container.querySelectorAll(\"div\").length\n\n container.innerHTML = \"\"\n\n const data = JSON.parse(appAllConfigs())\n data.sort((a, b) => a.sorter - b.sorter)\n data.forEach((item, index) =>\n item.items.sort((a, b) => a.sorter - b.sorter)\n )\n data.forEach((category) => {\n const div = document.createElement(\"div\")\n const h1 = document.createElement(\"h1\")\n\n h1.innerHTML = category.name\n\n const ul = document.createElement(\"ul\")\n\n category.items.forEach((item) => {\n const li = document.createElement(\"li\")\n\n li.innerHTML = `<img src=\"${item.icon}\" alt=\"icon\" /> <span>${item.name}</span> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-check2\" viewBox=\"0 0 16 16\"><path d=\"M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z\" /></svg>`\n\n li.addEventListener(\"click\", (e) => {\n appSetConfig(item.id)\n hiddenCarrierListContainer()\n document\n .querySelectorAll(\"li\")\n .forEach((item, index) => item.classList.remove(\"active\"))\n li.classList.add(\"active\")\n writeValueOnButtonOfCarrierList(item.name)\n })\n\n ul.appendChild(li)\n })\n\n div.appendChild(h1)\n div.appendChild(ul)\n\n container.appendChild(div)\n })\n }\n const writeValueOnButtonOfCarrierList = (value) =>\n ValueOfCarrierListButton.html(value ?? getConfigName())\n\n const showToastContainer = (value) => {\n Toast.style({ borderColor: \"#200d45\" })\n ToastIcon.style({ borderRight: \"1px solid #200d45\" })\n\n writeToastText(value)\n\n ToastContainer.removeClass(\"misterVpnAnimatedTime\", \"spaceOutDown\")\n ToastContainer.removeClass(\"misterVpnAnimatedTime\", \"spaceInDown\")\n\n setTimeout(() => {\n ToastContainer.addClass(\"misterVpnAnimatedTime\", \"spaceInDown\")\n }, 100)\n\n clearTimeout(timeoutId)\n\n timeoutId = setTimeout(() => hiddenToastContainer(), 5000)\n }\n const showToastContainerWithError = (value) => {\n Toast.style({ borderColor: \"#FF0000\" })\n ToastIcon.style({ borderRight: \"1px solid #FF0000\" })\n\n writeToastText(value)\n\n ToastContainer.removeClass(\"misterVpnAnimatedTime\", \"spaceOutDown\")\n ToastContainer.removeClass(\"misterVpnAnimatedTime\", \"spaceInDown\")\n\n setTimeout(() => {\n ToastContainer.addClass(\"misterVpnAnimatedTime\", \"spaceInDown\")\n }, 100)\n\n clearTimeout(timeoutId)\n timeoutId = setTimeout(() => hiddenToastContainer(), 5000)\n }\n const writeToastText = (text) => {\n ToastText.html(text)\n }\n const hiddenToastContainer = () => {\n ToastContainer.removeClass(\"misterVpnAnimatedTime\", \"spaceInDown\")\n ToastContainer.removeClass(\"misterVpnAnimatedTime\", \"spaceOutDown\")\n ToastContainer.addClass(\"misterVpnAnimatedTime\", \"spaceOutDown\")\n }\n\n const showHomeContainer = () => {\n hiddenAllContainers()\n HomeContainer.addClass(\"active\")\n }\n\n const showCarrierListContainer = () => {\n writeCarrierList()\n hiddenAllContainers()\n CarrierContainer.addClass(\"active\")\n }\n const hiddenCarrierListContainer = () => {\n showHomeContainer()\n }\n\n const showProfileContainer = () => {\n hiddenAllContainers()\n ProfileContainer.addClass(\"active\")\n }\n const hiddenProfileContainer = () => {\n showHomeContainer()\n }\n\n const showToolsContainer = () => {\n hiddenAllContainers()\n ToolsContainer.addClass(\"active\")\n }\n const hiddenToolsContainer = () => {\n showHomeContainer()\n }\n\n const showRegisterContainer = () => {\n hiddenAllContainers()\n RegisterContainer.addClass(\"active\")\n }\n const hiddenRegisterContainer = () => {\n showHomeContainer()\n }\n\n const writeErrorContainer = (model) => {\n const data = JSON.parse(model)\n\n ErrorTitle.html(data.title)\n ErrorDescription.html(data.content)\n\n showErrorContainer()\n }\n const showErrorContainer = () => {\n hiddenAllContainers()\n ErrorContainer.addClass(\"active\")\n }\n const hiddenErrorContainer = () => {\n showHomeContainer()\n }\n\n const showLoadingContainer = () => {\n const data = JSON.parse(appGetDefaultConfig())\n\n if (data?.url_check_user) {\n LoadingContainer.addClass(\"active\")\n }\n }\n const hiddenLoadingContainer = () => {\n LoadingContainer.removeClass(\"active\")\n }\n\n const writeCheckuserContainer = (model) => {\n const data = JSON.parse(model)\n\n CheckuserName.html(`USUÁRIO: ${data.username}`)\n CheckuserRemainingDays.html(`EXPIRA EM: ${data.expiration_date}`)\n CheckuserRemainingDays.html(`RESTA: ${data.expiration_days} DIAS`)\n CheckuserTotalConnection.html(\n `CONEXÕES: ${data.count_connections}/${data.limit_connections}`\n )\n\n if (data.expiration_days < 4) {\n RenewContainer.addClass(\"active\")\n } else {\n RenewContainer.removeClass(\"active\")\n }\n\n showCheckuserContainer()\n }\n const showCheckuserContainer = () => {\n hiddenLoadingContainer()\n CheckuserContainer.addClass(\"active\")\n }\n const hiddenCheckuserContainer = () => {\n CheckuserContainer.removeClass(\"active\")\n }\n\n const showClearDataAppContainer = () => {\n ClearDataContainer.addClass(\"active\")\n }\n const hiddenClearDataAppContainer = () => {\n ClearDataContainer.removeClass(\"active\")\n }\n\n const startHotspot = () => {\n appStartHotspot();\n\n TitleHotspotContainer.removeClass('hotspot-off').addClass('hotspot-on').text(\"ROTEAMENTO LIGADO\");\n ValueOfButtonHotspotContainer.removeClass('hotspot-off').addClass('hotspot-on').text(\"DESLIGAR HOTSPOT\");\n }\n\n const stopHotspot = () => {\n appStopHotspot();\n\n TitleHotspotContainer.removeClass('hotspot-on').addClass('hotspot-off').text(\"ROTEAMENTO DESLIGADO\");\n ValueOfButtonHotspotContainer.removeClass('hotspot-on').addClass('hotspot-off').text(\"LIGAR HOTSPOT\");\n }\n\n const toggleHotspot = () => {\n appGetStatusHotspot() === \"STOPPED\" ? startHotspot() : stopHotspot();\n }\n\n const setStatusHotspot = () => {\n if (appGetStatusHotspot() === \"STOPPED\") {\n TitleHotspotContainer.removeClass('hotspot-on').addClass('hotspot-off').text(\"ROTEAMENTO DESLIGADO\");\n ValueOfButtonHotspotContainer.removeClass('hotspot-on').addClass('hotspot-off').text(\"LIGAR HOTSPOT\");\n } else {\n TitleHotspotContainer.removeClass('hotspot-off').addClass('hotspot-on').text(\"ROTEAMENTO LIGADO\");\n ValueOfButtonHotspotContainer.removeClass('hotspot-off').addClass('hotspot-on').text(\"DESLIGAR HOTSPOT\");\n }\n }\n\n const showHotspotContainer = () => {\n HotspotContainer.addClass(\"active\")\n }\n const hiddenHotspotContainer = () => {\n HotspotContainer.removeClass(\"active\")\n }\n\n const showTermsContainer = () => {\n TermsContainer.addClass(\"active\")\n }\n const hiddenTermsContainer = () => {\n TermsContainer.removeClass(\"active\")\n }\n\n const openRenew = () => {\n appIntoBrowser(\"https://painelrev.cloud/\")\n }\n const openSpeedtest = () => {\n appIntoBrowser(\"https://fast.com\")\n }\n\n const hiddenAllContainers = () => {\n HomeContainer.removeClass(\"active\")\n CarrierContainer.removeClass(\"active\")\n ProfileContainer.removeClass(\"active\")\n ToolsContainer.removeClass(\"active\")\n RegisterContainer.removeClass(\"active\")\n ErrorContainer.removeClass(\"active\")\n }\n\n const allFunctionsExecute = () => {\n toggleInput()\n writeInputValue()\n writeInputPlaceholder()\n writeLogsRegister()\n connectionState()\n setStatusHotspot()\n }\n\n </script>\n\n <!-- AÇÕES -->\n <script>\n HomeHeader.style({\n background: appBackground(),\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n backgroundRepeat: \"no-repeat\",\n })\n LogoHeader.attr({ src: appLogo() })\n\n ConfigVersion.html(`Versão: ${appGetConfigVersion()}`);\n\n HomeButton.on({ click: () => showHomeContainer() })\n LoginButton.on({ click: () => showProfileContainer() })\n ToolsButton.on({ click: () => showToolsContainer() })\n UpdateButton.on({ click: () => AppUpdate() })\n\n BackButtonCarrierContainer.on({\n click: () => hiddenCarrierListContainer(),\n })\n BackProfileContainer.on({ click: () => hiddenProfileContainer() })\n BackToolsContainer.on({ click: () => hiddenToolsContainer() })\n BackRegisterContainer.on({ click: () => hiddenRegisterContainer() })\n BackErrorContainer.on({ click: () => hiddenErrorContainer() })\n\n ButtonOfCarrierList.on({ click: () => showCarrierListContainer() })\n\n ValueOfCarrierListButton.html(getConfigName())\n\n ButtonVpnStartOrStop.on({ click: () => startStopConnection() })\n\n InputUsername.on({ input: (e) => appSetUsername(e.target.value) })\n InputPassword.on({ input: (e) => appSetPassword(e.target.value) })\n InputUUID.on({ input: (e) => appSetUUID(e.target.value) })\n\n EyeViewPasswordInput.on({ click: () => showInputPasswordValue() })\n EyeNotViewPasswordInput.on({ click: () => hiddenInputPasswordValue() })\n\n ButtonSaveCreds.on({ click: () => hiddenProfileContainer() })\n\n ButtonRegister.on({ click: () => showRegisterContainer() })\n ButtonCleanRegisterLogs.on({ click: () => appCleanLogs() })\n\n ButtonOpenHotspotContainer.on({ click: () => showHotspotContainer() })\n BackHotspotContainer.on({ click: () => hiddenHotspotContainer() })\n ButtonStartStopHotspot.on({ click: () => toggleHotspot() })\n\n ButtonOpenClearDataContainer.on({\n click: () => showClearDataAppContainer(),\n })\n BackClearDataContainer.on({ click: () => hiddenClearDataAppContainer() })\n ButtonConfirmClearData.on({ click: () => appClearData() })\n\n BackLoadingContainer.on({ click: () => hiddenLoadingContainer() })\n BackCheckuserContainer.on({ click: () => hiddenCheckuserContainer() })\n\n BackTermsContainer.on({ click: () => hiddenTermsContainer() })\n\n ButtonRenew.on({ click: () => openRenew() })\n\n ButtonOpenSpeedtest.on({ click: () => openSpeedtest() })\n\n ButtonOpenApnConfig.on({ click: () => appApnConfiguration() })\n\n ButtonOpenBatteryOptimization.on({ click: () => appBatteryOptimize() })\n\n ButtonOpenCheckuser.on({ click: () => appStartCheckUser() })\n\n ButtonOpenTerms.on({ click: () => showTermsContainer() })\n\n allFunctionsExecute()\n </script>\n</body>\n\n</html>",
  345. "type": "HTML",
  346. "status": "ACTIVE",
  347. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  348. },
  349. {
  350. "id": 23794,
  351. "label": "ANDROID WEBVIEW (POR SUA CONTA E RISCO)",
  352. "name": "APP_SUPPORT_BUTTON",
  353. "value": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css\">\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css\"\n integrity=\"sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==\"\n crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\">\n <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css\">\n\n <title>@MRSILENT1</title>\n\n <style>\n :root {\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n font-synthesis: none;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n\n --space-status-bar: 10px;\n --space-nav-bar: 33px;\n\n --default-background-color: linear-gradient(135deg,\n #6f0fd4,\n #007a94,\n #5417a0,\n #008686,\n #540fd1,\n #299c9f,\n #005d5d,\n #5417a0,\n #6f0fd4,\n #007a94,\n #5417a0,\n #008686,\n #540fd1,\n #299c9f);\n --connected-background-color: linear-gradient(135deg,\n #05b76d,\n #01ac66,\n #008e52,\n #30704b,\n #00ff00,\n #29ab87,\n #00a86b,\n #2e8b57,\n #3f7046,\n #3f7,\n #008e52,\n #30704b,\n #00ff00,\n #29ab87,\n #00a86b,\n #2e8b57,\n #3f7046,\n #3f7);\n --connecting-background-color: linear-gradient(135deg,\n #ffc823,\n #f4b007,\n #fff14a,\n #eaa700,\n #fc9200,\n #ffcb05,\n #feb308,\n #ecc218,\n #ffc823,\n #f4b007,\n #fff14a,\n #eaa700,\n #fc9200,\n #ffcb05,\n #feb308,\n #ecc218);\n --error-background-color: linear-gradient(135deg,\n #e20807,\n #d40000,\n #9a001a,\n #65100d,\n #e20807,\n #d40000,\n #9a001a,\n #65100d,\n #e20807,\n #d40000,\n #9a001a,\n #65100d,\n #000000,\n #ff0000,\n #9a001a,\n #e20807,\n #65100d);\n }\n\n @keyframes ButtonStartVpnAnimation {\n 0% {\n background-position: 0;\n }\n\n 100% {\n background-position: 300%;\n }\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n *,\n *::after,\n *::before {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html,\n body {\n width: 100%;\n height: 100%;\n }\n\n body {\n background: linear-gradient(to bottom, #200d45, #55058c, #c49fdf);\n padding-bottom: var(--space-nav-bar);\n }\n\n main {\n width: auto;\n height: 89%;\n display: flex;\n position: relative;\n padding: 0 0 0 0;\n overflow: hidden;\n }\n\n section.home {\n width: 100vw;\n min-width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n\n position: absolute;\n top: 0;\n left: 0;\n\n opacity: 0;\n transform: translateX(100%);\n\n transition: opacity 0.3s ease, transform 0.3s ease;\n\n overflow: hidden;\n }\n\n section.home header {\n width: 100%;\n height: 20%;\n max-height: 135px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n padding: var(--space-status-bar) 10px 0 10px;\n\n background-image: url();\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n\n section.home header img {\n width: 80%;\n }\n\n section.home span#version {\n background: #881f9a67;\n font-size: 14px;\n position: absolute;\n bottom: 3%;\n left: 3%;\n color: #ffffff;\n }\n\n section.container-carrier-selector-button {\n width: 100%;\n height: 10%;\n max-height: 60px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n margin: 10% 0 0 0;\n }\n\n section.container-carrier-selector-button button {\n width: 90%;\n height: 70%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n position: relative;\n border: 0px;\n border-radius: 6px;\n background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);\n background-size: 300%;\n animation: 15s infinite ButtonStartVpnAnimation;\n }\n\n section.container-carrier-selector-button button svg {\n color: #ffffff;\n }\n\n section.container-carrier-selector-button button span {\n color: #ffffff;\n font-size: 14px;\n }\n\n section.container-button-start-stop-vpn {\n width: 100%;\n height: auto;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n margin: 20% 0 0 0;\n }\n\n section.container-button-start-stop-vpn button {\n width: 135px;\n height: 135px;\n margin-top: -80px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n position: relative;\n\n border: 0;\n border-radius: 50%;\n\n background: linear-gradient(to top left, #05596a, #4d0a87 85%);\n }\n\n section.container-button-start-stop-vpn button svg {\n width: 50%;\n height: 50%;\n\n color: #ffffff;\n }\n\n section.container-button-start-stop-vpn button::before,\n section.container-button-start-stop-vpn button::after {\n width: calc(100% + 10px);\n height: calc(100% + 10px);\n\n content: \"\";\n\n position: absolute;\n z-index: -1;\n\n border-radius: 50%;\n\n background: var(--default-background-color);\n background-size: 300%;\n\n animation: 8s infinite ButtonStartVpnAnimation;\n }\n\n section.container-button-start-stop-vpn button::after {\n filter: blur(30px);\n }\n\n section.renew-alert {\n width: 100%;\n height: auto;\n\n display: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n margin: auto 0 auto 0;\n }\n\n section.renew-alert.active {\n display: flex;\n }\n\n section.renew-alert button {\n padding: 2.5% 10%;\n\n border: 0;\n border-radius: 60px;\n\n background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);\n background-size: 300%;\n\n animation: 8s infinite ButtonStartVpnAnimation;\n }\n\n section.renew-alert button span {\n color: #ffffff;\n }\n\n section.profile,\n section.carrier-list,\n section.container-tools,\n section.container-logs,\n section.container-error {\n width: 100%;\n min-width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n\n position: absolute;\n top: 0;\n left: 0;\n\n padding: var(--space-status-bar) 0 0 0;\n\n opacity: 0;\n\n transform: translateX(100%);\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n\n section.carrier-list {\n height: 97%;\n }\n\n section.container-tools {\n gap: 1px;\n }\n\n section.loading,\n section.checkuser,\n section.clean-data-app,\n section.hotspot-container,\n section.terms-container {\n width: 100%;\n min-width: 100%;\n height: 100%;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: absolute;\n top: 0;\n left: 0;\n z-index: 999999999;\n\n padding-top: 15%;\n\n background: rgba(0, 0, 0, 0.3);\n\n opacity: 0;\n transform: scale(0);\n transform-origin: center;\n\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n\n section.hotspot-container {\n padding-top: 0;\n }\n\n section.loading.active,\n section.checkuser.active,\n section.clean-data-app.active,\n section.hotspot-container.active,\n section.terms-container.active {\n opacity: 1;\n transform: scale(1);\n }\n\n section.loading section,\n section.checkuser section,\n section.clean-data-app section,\n section.hotspot-container section,\n section.terms-container section {\n width: 80%;\n height: auto;\n min-height: 50%;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n\n border-radius: 10px;\n\n background: #200d45;\n\n overflow: hidden;\n }\n\n section.loading section header,\n section.checkuser section header,\n section.clean-data-app section header,\n section.hotspot-container section header,\n section.terms-container section header {\n width: 100%;\n height: auto;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n position: relative;\n\n padding: 4% 2% 4% 2%;\n\n border-bottom: 2px solid #03142d;\n }\n\n section.loading section header h1,\n section.checkuser section header h1,\n section.clean-data-app section header h1,\n section.hotspot-container section header h1,\n section.terms-container section header h1 {\n margin-left: auto;\n\n color: #ffffff;\n font-size: 0.8rem;\n }\n\n @media (max-width: 280px) {\n section.clean-data-app section header h1 {\n font-size: 0.7rem;\n }\n }\n\n section.loading section header svg,\n section.checkuser section header svg,\n section.clean-data-app section header svg,\n section.hotspot-container section header svg,\n section.terms-container section header svg {\n margin-left: auto;\n\n color: #ffffff;\n }\n\n section.terms-container section p {\n width: 95%;\n height: auto;\n max-height: 350px;\n\n padding: 5% 0;\n\n color: #ffffff;\n text-align: center;\n\n overflow: auto;\n }\n\n section.loading section div.loading {\n width: 150px;\n height: 150px;\n\n margin-top: auto;\n margin-bottom: auto;\n\n border-top: 4px solid #ffffff;\n border-right: 4px solid #ffffff;\n border-bottom: 4px solid #ffffff;\n border-left: 4px solid transparent;\n border-radius: 50%;\n\n background-color: transparent;\n\n animation: spin 1s linear infinite;\n }\n\n section.checkuser section section {\n width: 100%;\n height: auto;\n min-height: 100%;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n margin: auto 0 auto 0;\n padding: 3% 0;\n\n border-radius: 0;\n }\n\n section.checkuser section section div:first-child {\n margin: 0;\n }\n\n section.checkuser section section div {\n width: 90%;\n height: auto;\n\n display: flex;\n align-items: center;\n gap: 10px;\n\n margin: 5% 0 0 0;\n padding: 3% 3%;\n\n border-radius: 10px;\n\n background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);\n background-size: 300%;\n\n animation: 8s infinite ButtonStartVpnAnimation;\n }\n\n section.checkuser section section div svg,\n section.checkuser section section div span {\n color: #ffffff;\n }\n\n section.checkuser section section div span {\n font-size: 0.8rem;\n }\n\n section.clean-data-app section section,\n section.hotspot-container section section {\n width: 100%;\n height: auto;\n min-height: 100%;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n margin: auto 0 auto 0;\n padding: 8% 0;\n\n border-radius: 0;\n }\n\n section.clean-data-app section section svg,\n section.hotspot-container section section svg {\n width: 30%;\n height: auto;\n\n color: #ffff00;\n font-size: 8rem;\n }\n\n section.hotspot-container section section svg {\n width: 20%;\n height: auto;\n\n color: #ffffff;\n }\n\n section.clean-data-app section section h1,\n section.hotspot-container section section h1 {\n color: #ffffff;\n font-size: 1rem;\n }\n\n section.clean-data-app section section p,\n section.hotspot-container section section p {\n margin: 5% 0 8% 0;\n padding: 0 3%;\n\n color: #ffffff;\n text-align: center;\n font-family: Arial, sans-serif;\n }\n\n section.hotspot-container section section p {\n width: 100%;\n height: 10%;\n max-height: 300px;\n\n overflow: auto;\n }\n\n section.clean-data-app section section button,\n section.hotspot-container section section button {\n display: flex;\n align-items: center;\n justify-content: center;\n\n padding: 4% 10%;\n\n border: 0;\n border-radius: 60px;\n\n background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);\n background-size: 300%;\n\n animation: 8s infinite ButtonStartVpnAnimation;\n }\n\n section.clean-data-app section section button span,\n section.hotspot-container section section button span {\n color: #ffffff;\n }\n\n section.profile header,\n section.carrier-list header,\n section.container-tools header,\n section.container-logs header,\n section.container-error header {\n width: 100%;\n height: 10%;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n\n padding: 0 20px 0 20px;\n\n background: #200d45;\n }\n\n section.profile header::before,\n section.profile header::after,\n section.carrier-list header::before,\n section.carrier-list header::after,\n section.container-tools header::before,\n section.container-tools header::after,\n section.container-logs header::before,\n section.container-logs header::after,\n section.container-error header::before,\n section.container-error header::after {\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n\n content: \"\";\n\n position: absolute;\n z-index: -1;\n\n background: linear-gradient(135deg,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf,\n #76fcfc,\n #7f47cb,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf);\n background-size: 300%;\n\n animation: 15s infinite ButtonStartVpnAnimation;\n }\n\n section.profile header::after,\n section.carrier-list header::after,\n section.container-tools header::after,\n section.container-logs header::after,\n section.container-error header::after {\n filter: blur(5px);\n }\n\n section.profile header svg,\n section.carrier-list header svg,\n section.container-tools header svg,\n section.container-logs header svg,\n section.container-error header svg {\n width: 20px;\n height: 20px;\n\n margin: 0 auto 0 0;\n\n fill: url(#grad);\n }\n\n section.profile header h1,\n section.carrier-list header h1,\n section.container-tools header h1,\n section.container-logs header h1,\n section.container-error header h1 {\n margin: 0 auto 0 0;\n\n color: #ffffff;\n font-size: 0.9rem;\n }\n\n section.profile form {\n width: 100%;\n height: auto;\n\n padding: 0px 10px;\n\n display: flex;\n flex-direction: column;\n }\n\n section.profile form fieldset {\n width: 100%;\n height: auto;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n position: relative;\n\n margin: 0% 0px;\n padding: 5px 10px;\n\n border: 0px solid #00ff00;\n border-radius: 5px;\n\n background: #200d45;\n }\n\n section.profile form fieldset::before,\n section.profile form fieldset::after {\n width: calc(100% + 2px);\n height: calc(100% + 17px);\n\n content: \"\";\n\n position: absolute;\n top: -16px;\n right: 0;\n bottom: 0;\n left: -1px;\n z-index: -1;\n\n border-radius: 5px;\n\n background: radial-gradient(circle,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf,\n #76fcfc,\n #7f47cb,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf);\n background-size: 300%;\n\n animation: 20s infinite ButtonStartVpnAnimation;\n }\n\n section.profile form fieldset::after {\n filter: blur(3px);\n }\n\n section.profile form fieldset legend {\n padding: 0px 7px 0px 5px;\n background: #200d45;\n }\n\n section.profile form fieldset legend svg {\n width: auto;\n height: 1.563rem;\n\n fill: url(#grad);\n }\n\n section.profile form fieldset p {\n color: #ffffff;\n font-size: 0.9rem;\n font-style: italic;\n }\n\n section.profile form fieldset:nth-child(2) {\n margin-top: 5%;\n\n padding: 0px 10px 20px 10px;\n }\n\n section.profile form fieldset:nth-child(2)::after,\n section.profile form fieldset:nth-child(2)::before {\n height: calc(100% + 15px);\n top: -14px;\n }\n\n section.profile form fieldset:nth-child(2) legend {\n color: #ffffff;\n }\n\n section.profile form fieldset:nth-child(2) label {\n margin-right: auto;\n color: #ffffff;\n }\n\n section.profile form fieldset:nth-child(2) label.hidden {\n display: none;\n }\n\n section.profile form fieldset:nth-child(2) div {\n width: 100%;\n height: 40px;\n\n display: flex;\n align-items: center;\n\n margin: 0 0 0 auto;\n\n border: 1px solid #ffffff;\n border-radius: 5px;\n\n overflow: hidden;\n }\n\n section.profile form fieldset:nth-child(2) div.hidden {\n display: none;\n }\n\n section.profile form fieldset:nth-child(2) div svg {\n width: 15%;\n max-width: 40px;\n height: 100%;\n max-height: 40px;\n\n padding: 3%;\n\n color: #ffffff;\n }\n\n section.profile form fieldset:nth-child(2) div svg.hidden {\n display: none;\n }\n\n section.profile form fieldset:nth-child(2) div input {\n width: 100%;\n height: 100%;\n\n padding: 0px 5px;\n\n border: 0px;\n border-left: 1px solid #ffffff;\n outline: none;\n\n color: #ffffff;\n\n background: transparent;\n }\n\n section.profile form fieldset:nth-child(2) label[for=\"passworddiv\"] {\n margin-top: 4%;\n }\n\n section.profile form fieldset:nth-child(2) label[for=\"uuiddiv\"] {\n margin-top: 4%;\n }\n\n section.profile form fieldset:nth-child(2) button {\n width: 80%;\n min-width: 200px;\n height: 20%;\n min-height: 30px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n margin: 6% auto 0px auto;\n\n border: 0px;\n border-radius: 20px;\n\n background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);\n background-size: 300%;\n\n animation: 5s infinite ButtonStartVpnAnimation;\n }\n\n section.profile form fieldset:nth-child(2) button svg {\n color: #ffffff;\n\n filter: drop-shadow(1px 1px 2px rgba(72, 79, 87, 0.5));\n }\n\n section.profile form fieldset:nth-child(2) button span {\n color: #ffffff;\n font-family: Arial, sans-serif;\n font-weight: 500;\n\n text-shadow: 1px 1px 2px rgba(72, 79, 87, 0.5);\n }\n\n section.carrier-list section {\n width: 100%;\n height: 90%;\n\n overflow-y: auto;\n }\n\n section.carrier-list section div:first-child {\n margin: 0;\n }\n\n section.carrier-list section div {\n width: 100%;\n height: auto;\n\n display: flex;\n flex-direction: column;\n }\n\n section.carrier-list section div h1 {\n width: 100%;\n height: 50px;\n\n display: flex;\n align-items: center;\n\n padding: 0px 3%;\n\n color: #ffffff;\n font-size: 0.9rem;\n\n background: #200d45;\n }\n\n section.carrier-list section div ul {\n width: 100%;\n height: auto;\n list-style: none;\n }\n\n section.carrier-list section div ul li {\n width: 100%;\n height: 60px;\n\n display: flex;\n align-items: center;\n gap: 5px;\n\n position: relative;\n\n margin: 1% 0;\n padding: 0 2%;\n\n background: #07214b;\n\n color: #ffffff;\n\n /* overflow: hidden; */\n /* REMOVER CASO QUEIRA A BORDA ANIMADA E COLORIDA */\n }\n\n section.carrier-list section div ul li::before,\n section.carrier-list section div ul li::after {\n width: 100%;\n height: calc(100% + 2px);\n\n content: \"\";\n\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n\n background: radial-gradient(circle,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf,\n #76fcfc,\n #7f47cb,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf);\n background-size: 300%;\n\n animation: 15s infinite ButtonStartVpnAnimation;\n }\n\n section.carrier-list section div ul li img {\n width: 30px;\n }\n\n section.carrier-list section div ul li span {\n width: calc(100% - 30px);\n\n white-space: nowrap;\n overflow: auto;\n }\n\n section.carrier-list section div ul li svg {\n width: 30px;\n\n display: none;\n }\n\n section.carrier-list section div ul li.active svg {\n display: block;\n }\n\n section.container-tools section {\n width: 100%;\n height: 89%;\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n\n margin: 0 auto 0 auto;\n padding: 2% 0 0 0;\n\n background: transparent;\n\n overflow: auto;\n }\n\n section.container-tools section button {\n width: 100%;\n height: auto;\n\n display: flex;\n align-items: center;\n gap: 5px;\n\n padding: 10px;\n\n border: 0px solid transparent;\n border-bottom: 1px solid #ddd;\n\n background: transparent;\n }\n\n section.container-tools section button svg:first-child {\n width: 20px;\n height: 100%;\n\n margin: 0 10px 0 0;\n\n color: #ffffff;\n }\n\n section.container-tools section button div {\n max-width: 83%;\n height: auto;\n\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 5px;\n }\n\n section.container-tools section button div h3 {\n color: #ffffff;\n }\n\n section.container-tools section button div p {\n color: #ffffff;\n text-align: left;\n }\n\n section.container-tools section button svg:last-child {\n width: 16px;\n height: 100%;\n\n margin: 0 0 0 auto;\n\n color: #ffffff;\n }\n\n section.container-logs section {\n width: 100%;\n height: 85%;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n }\n\n section.container-logs section p {\n width: 100%;\n height: 90%;\n\n padding: 3% 2% 0 2%;\n outline: none;\n\n border: 0;\n\n color: #ffffff;\n font-family: Arial, sans-serif;\n font-size: 0.7rem;\n\n overflow: auto;\n }\n\n section.container-logs section button {\n width: auto;\n height: auto;\n\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n\n padding: 3% 7%;\n\n position: relative;\n\n border: 0px;\n border-radius: 20px;\n\n background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);\n background-size: 300%;\n\n animation: 8s infinite ButtonStartVpnAnimation;\n }\n\n section.container-logs section button svg {\n color: #ffffff;\n }\n\n section.container-logs section button span {\n color: #ffffff;\n }\n\n section.container-error section {\n width: 100%;\n height: 85%;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n section.container-error section h1 {\n margin: 1% 0 0 0;\n color: #ffffff;\n font-size: 0.9rem;\n }\n\n section.container-error section p {\n margin: 3% 0 0 0;\n padding: 0 3%;\n\n color: #ffffff;\n text-align: center;\n font-size: 0.8rem;\n font-family: Arial, sans-serif;\n overflow: auto;\n }\n\n section.active {\n opacity: 1;\n transform: translateX(0%);\n }\n\n section.container-menu {\n width: 100%;\n height: 10%;\n display: flex;\n align-items: center;\n justify-content: center;\n /*gap: 10px;*/\n position: relative;\n margin: auto 0px 0px 0px;\n padding: 0px 10px;\n background: linear-gradient(to bottom, #4807c9, #7703c5);\n }\n\n section.container-menu::before,\n section.container-menu::after {\n width: calc(100%);\n height: calc(100% + 4px);\n\n content: \"\";\n\n position: absolute;\n left: 0;\n right: 0;\n bottom: -2px;\n z-index: -1;\n\n background: linear-gradient(135deg,\n #6f0fd4,\n #007a94,\n #5417a0,\n #008686,\n #540fd1,\n #299c9f,\n #005d5d,\n #5417a0,\n #6f0fd4,\n #007a94,\n #5417a0,\n #008686,\n #540fd1,\n #299c9f);\n background-size: 300%;\n\n animation: 30s infinite alternate-reverse ButtonStartVpnAnimation;\n }\n\n section.container-menu::after {\n filter: blur(10px);\n }\n\n section.container-menu button {\n flex: 1;\n width: 60px;\n height: 50%;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n\n position: relative;\n z-index: 5;\n\n border: 0px;\n\n background: transparent;\n }\n\n section.container-menu button:nth-child(2) {\n margin-right: 10px;\n }\n\n section.container-menu button:nth-child(3) {\n margin-right: 10px;\n }\n\n section.container-menu button:last-child {\n margin-right: 5px;\n }\n\n section.container-menu button svg {\n color: #ffffff;\n }\n\n section.container-menu button span {\n color: #ffffff;\n text-transform: uppercase;\n font-size: 0.7rem;\n }\n\n section.container-toast {\n width: 100%;\n height: auto;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: absolute;\n left: 0;\n bottom: 2.5%;\n right: 0;\n z-index: 99999999;\n\n padding: 10px 10px;\n\n transform: scale(0);\n }\n\n section.container-toast div.toast {\n width: auto;\n height: auto;\n\n display: flex;\n align-items: center;\n\n position: relative;\n\n padding: 0px 5px 0px 0px;\n\n border: 1px solid transparent;\n border-radius: 10px;\n\n overflow: hidden;\n\n background: #192f62;\n }\n\n section.container-toast div.toast::before,\n section.container-toast div.toast::after {\n width: calc(100% + 5px);\n height: calc(100% + 5px);\n\n content: \"\";\n\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n\n background: radial-gradient(circle,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf,\n #76fcfc,\n #7f47cb,\n #9f2fff,\n #0bb1d3,\n #7f47cb,\n #00ffff,\n #7a2cec,\n #4adfdf);\n background-size: 300%;\n\n animation: 15s infinite ButtonStartVpnAnimation;\n }\n\n section.container-toast div.toast.error {\n border: 1px solid #ff0000;\n }\n\n section.container-toast div.toast div.icon {\n width: auto;\n height: 100%;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n padding: 5px 4px 5px 7px;\n\n overflow: hidden;\n\n background: #152039;\n }\n\n section.container-toast div.toast.error div.icon {\n border-right: 1px solid #ff0000;\n }\n\n section.container-toast div.toast div.icon img {\n width: auto;\n height: 100%;\n min-height: 30px;\n }\n\n section.container-toast div.toast span {\n margin-left: 5px;\n\n color: #ffffff;\n font-family: Arial, sans-serif;\n font-size: 0.8rem;\n font-weight: 300;\n }\n\n @media (max-width: 280px) {\n section.container-menu button {\n flex: 1;\n width: 60px;\n max-width: 60px;\n height: 50%;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n\n position: relative;\n z-index: 5;\n\n border: 0px;\n\n background: transparent;\n }\n\n section.container-menu button:last-child {\n margin-right: 10px;\n }\n\n section.container-menu button span {\n font-size: 0.5rem;\n }\n }\n\n @media only screen and (max-width: 576px) {\n section.container-menu button {\n flex: 1;\n width: 60px;\n max-width: 60px;\n height: 50%;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n\n position: relative;\n z-index: 5;\n\n border: 0px;\n\n background: transparent;\n }\n\n section.container-menu button:last-child {\n margin-right: 10px;\n }\n\n section.container-menu button span {\n font-size: 0.6rem;\n }\n }\n\n .spaceInDown {\n -webkit-animation-name: spaceInDown;\n animation-name: spaceInDown;\n }\n\n @-webkit-keyframes spaceInDown {\n 0% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0.2) translate(0%, 200%);\n }\n\n 100% {\n opacity: 1;\n transform-origin: 50% 100%;\n transform: scale(1) translate(0%, 0%);\n }\n }\n\n @keyframes spaceInDown {\n 0% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0.2) translate(0%, 200%);\n }\n\n 100% {\n opacity: 1;\n transform-origin: 50% 100%;\n transform: scale(1) translate(0%, 0%);\n }\n }\n\n .spaceOutDown {\n -webkit-animation-name: spaceOutDown;\n animation-name: spaceOutDown;\n }\n\n @-webkit-keyframes spaceOutDown {\n 0% {\n opacity: 1;\n transform-origin: 50% 100%;\n transform: scale(1) translate(0%, 0%);\n }\n\n 100% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0.2) translate(0%, 200%);\n }\n }\n\n @keyframes spaceOutDown {\n 0% {\n opacity: 1;\n transform-origin: 50% 100%;\n transform: scale(1) translate(0%, 0%);\n }\n\n 100% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0.2) translate(0%, 200%);\n }\n }\n\n .misterVpnAnimatedTime {\n -webkit-animation-duration: 1s;\n animation-duration: 1s;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n }\n\n @media (print),\n (prefers-reduced-motion) {\n .misterVpnAnimatedTime {\n -webkit-animation: unset !important;\n animation: unset !important;\n transition: none !important;\n }\n }\n\n .flex {\n display: flex;\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .items-center {\n align-items: center;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .mt-4 {\n margin-top: 1rem;\n }\n\n .-top-36 {\n top: -9rem;\n }\n\n .relative {\n position: relative;\n }\n\n .bi {\n font-size: 24px;\n color: #fff;\n margin-bottom: 4px;\n }\n\n\n .flex-col {\n top: 0;\n background: transparent;\n border-radius: 27px;\n width: 100%;\n justify-content: center;\n text-align: center;\n margin-left: auto;\n margin-right: auto;\n }\n\n .icon-text-container {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 700;\n font-size: 1.9rem;\n }\n\n .icon-text-container i {\n color: #FFD700;\n }\n\n @keyframes slideGradient {\n 0% {\n background-position: 100% 0;\n }\n\n 100% {\n background-position: -100% 0;\n }\n }\n\n .gradient-text {\n background: linear-gradient(90deg, #FF8C00, #F0F0F0, #FFD700);\n background-size: 200% auto;\n -webkit-background-clip: text;\n color: transparent;\n animation: slideGradient 5s infinite;\n }\n\n\n .bi-shield-lock-fill {\n font-size: 24px;\n color: #051d40;\n }\n\n .container-carrier-selector-button {\n transform: translateY(-50px);\n }\n\n .icon-text-container {\n transform: translateY(-35px);\n }\n\n .hotspot-on {\n background-color: rgb(0, 142, 19);\n }\n\n .hotspot-off {\n background-color: rgb(147, 0, 0);\n }\n\n.custom-section {\n padding: 10px;\n border: 2px solid transparent;\n border-radius: 5px;\n max-width: 300px;\n margin: 20px auto;\n box-shadow: 0 10px 20px #6f0fd4;\n background: linear-gradient(to bottom, #200d4561, #56058c48, #c49fdf5f);\n position: relative;\n animation: borderAnim 10s linear infinite;\n}\n\n@keyframes borderAnim {\n 0% { border-color: #6f0fd4; }\n 7% { border-color: #007a94; }\n 14% { border-color: #5417a0; }\n 21% { border-color: #008686; }\n 28% { border-color: #540fd1; }\n 35% { border-color: #299c9f; }\n 42% { border-color: #005d5d; }\n 49% { border-color: #5417a0; }\n 56% { border-color: #6f0fd4; }\n 63% { border-color: #007a94; }\n 70% { border-color: #5417a0; }\n 77% { border-color: #008686; }\n 84% { border-color: #540fd1; }\n 91% { border-color: #299c9f; }\n 100% { border-color: #6f0fd4; }\n}\n\n\n\n.custom-section label {\n display: block;\n margin-bottom: 2px;\n font-weight: bold;\n color: #ffffff;\n}\n\n\n.custom-section div {\n position: relative;\n margin-bottom: 12px;\n}\n\n.custom-section svg {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n fill: #ffffff;\n}\n\n.custom-section input {\n width: 100%;\n padding: 10px 15px 10px 35px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 16px;\n outline: none;\n}\n\n.custom-section input:focus {\n border-color: #007BFF;\n box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);\n}\n\n.custom-section input {\n background: #ffffff28;\n color: white;\n}\n\n.custom-section #eye-view,\n.custom-section #eye-not-view {\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n cursor: pointer; \n}\n\n.hidden {\n display: none;\n}\n\nlabel {\n margin-bottom: 1px;\n}\n\n#usernamediv, #passworddiv, #uuiddiv {\n margin-top: 1px; \n}\n\n </style>\n</head>\n\n<body class=\"bg-gradient-to-b from-purple-900 via-purple-700 to-purple-300\">\n <main>\n <section class=\"home active d-flex justify-content-center align-items-center\">\n <div class=\"icon-text-container\">\n <i class=\"bi bi-shield-lock-fill\"></i>\n <span class=\"gradient-text\">MisterVPN Tunnel</span>\n </div>\n <section class=\"container-carrier-selector-button\">\n <button type=\"button\" id=\"carrier-list-button\">\n <span id=\"value-of-carrier-list-button\">SELECIONE UMA CONFIGURAÇÃO</span>\n </button>\n </section>\n\n <section class=\"container-button-start-stop-vpn\">\n <button type=\"button\" title=\"Iniciar ou Parar conexão VPN\" id=\"start-stop-vpn-button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-power\"\n viewBox=\"0 0 16 16\">\n <path d=\"M7.5 1v7h1V1h-1z\" />\n <path\n 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\" />\n </svg>\n </button>\n </section>\n <section class=\"nd\">\n </section>\n <span id=\"version\">Carregando versão...</span>\n <section class=\"custom-section\">\n \t<h1 style=\"text-align: center; color: white; font-size: 20px; background-color: rgba(0, 0, 0, 0.1); font-weight: bold;\">Suas credenciais</h1><br>\n <label for=\"usernamediv\">Usuário</label>\n\n <div id=\"usernamediv\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-person\"\n viewBox=\"0 0 16 16\">\n <path\n 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\" />\n </svg>\n\n <input id=\"username\" type=\"text\" name=\"username\" placeholder=\"Digite seu login\" />\n </div>\n\n <label for=\"passworddiv\">Senha</label>\n\n <div id=\"passworddiv\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-key\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z\" />\n <path d=\"M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" />\n </svg>\n\n <input id=\"password\" type=\"password\" name=\"password\" placeholder=\"Digite sua senha\" />\n </div>\n\n <label for=\"uuiddiv\" class=\"hidden\"></label>\n\n <div id=\"uuiddiv\" class=\"hidden\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-fingerprint\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M8.06 6.5a.5.5 0 0 1 .5.5v.776a11.5 11.5 0 0 1-.552 3.519l-1.331 4.14a.5.5 0 0 1-.952-.305l1.33-4.141a10.5 10.5 0 0 0 .504-3.213V7a.5.5 0 0 1 .5-.5Z\" />\n <path\n d=\"M6.06 7a2 2 0 1 1 4 0 .5.5 0 1 1-1 0 1 1 0 1 0-2 0v.332c0 .409-.022.816-.066 1.221A.5.5 0 0 1 6 8.447c.04-.37.06-.742.06-1.115V7Zm3.509 1a.5.5 0 0 1 .487.513 11.5 11.5 0 0 1-.587 3.339l-1.266 3.8a.5.5 0 0 1-.949-.317l1.267-3.8a10.5 10.5 0 0 0 .535-3.048A.5.5 0 0 1 9.569 8Zm-3.356 2.115a.5.5 0 0 1 .33.626L5.24 14.939a.5.5 0 1 1-.955-.296l1.303-4.199a.5.5 0 0 1 .625-.329Z\" />\n <path\n d=\"M4.759 5.833A3.501 3.501 0 0 1 11.559 7a.5.5 0 0 1-1 0 2.5 2.5 0 0 0-4.857-.833.5.5 0 1 1-.943-.334Zm.3 1.67a.5.5 0 0 1 .449.546 10.72 10.72 0 0 1-.4 2.031l-1.222 4.072a.5.5 0 1 1-.958-.287L4.15 9.793a9.72 9.72 0 0 0 .363-1.842.5.5 0 0 1 .546-.449Zm6 .647a.5.5 0 0 1 .5.5c0 1.28-.213 2.552-.632 3.762l-1.09 3.145a.5.5 0 0 1-.944-.327l1.089-3.145c.382-1.105.578-2.266.578-3.435a.5.5 0 0 1 .5-.5Z\" />\n <path\n d=\"M3.902 4.222a4.996 4.996 0 0 1 5.202-2.113.5.5 0 0 1-.208.979 3.996 3.996 0 0 0-4.163 1.69.5.5 0 0 1-.831-.556Zm6.72-.955a.5.5 0 0 1 .705-.052A4.99 4.99 0 0 1 13.059 7v1.5a.5.5 0 1 1-1 0V7a3.99 3.99 0 0 0-1.386-3.028.5.5 0 0 1-.051-.705ZM3.68 5.842a.5.5 0 0 1 .422.568c-.029.192-.044.39-.044.59 0 .71-.1 1.417-.298 2.1l-1.14 3.923a.5.5 0 1 1-.96-.279L2.8 8.821A6.531 6.531 0 0 0 3.058 7c0-.25.019-.496.054-.736a.5.5 0 0 1 .568-.422Zm8.882 3.66a.5.5 0 0 1 .456.54c-.084 1-.298 1.986-.64 2.934l-.744 2.068a.5.5 0 0 1-.941-.338l.745-2.07a10.51 10.51 0 0 0 .584-2.678.5.5 0 0 1 .54-.456Z\" />\n <path\n d=\"M4.81 1.37A6.5 6.5 0 0 1 14.56 7a.5.5 0 1 1-1 0 5.5 5.5 0 0 0-8.25-4.765.5.5 0 0 1-.5-.865Zm-.89 1.257a.5.5 0 0 1 .04.706A5.478 5.478 0 0 0 2.56 7a.5.5 0 0 1-1 0c0-1.664.626-3.184 1.655-4.333a.5.5 0 0 1 .706-.04ZM1.915 8.02a.5.5 0 0 1 .346.616l-.779 2.767a.5.5 0 1 1-.962-.27l.778-2.767a.5.5 0 0 1 .617-.346Zm12.15.481a.5.5 0 0 1 .49.51c-.03 1.499-.161 3.025-.727 4.533l-.07.187a.5.5 0 0 1-.936-.351l.07-.187c.506-1.35.634-2.74.663-4.202a.5.5 0 0 1 .51-.49Z\" />\n </svg>\n\n <input id=\"uuid\" type=\"text\" placeholder=\"UUID\" />\n </div>\n </fieldset>\n </form>\n </section>\n\n </section>\n </section>\n\n <section class=\"carrier-list\">\n <header>\n <svg id=\"back-carrier-container\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-arrow-return-left\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z\" />\n </svg>\n\n <h1>SELECIONE UMA OPÇÃO</h1>\n </header>\n <section></section>\n </section>\n\n\n <section class=\"profile\">\n\n <header>\n <svg id=\"renew-alert\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-arrow-return-left\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z\" />\n </svg>\n\n <h1>LOGIN</h1>\n </header>\n\n <!--<form>\n <fieldset>\n <legend>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-person-exclamation\" viewBox=\"0 0 16 16\">\n <path\n d=\"M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm.256 7a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z\" />\n <path\n d=\"M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-3.5-2a.5.5 0 0 0-.5.5v1.5a.5.5 0 0 0 1 0V11a.5.5 0 0 0-.5-.5Zm0 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z\" />\n </svg>\n </legend>\n\n <p>\n Insira suas credenciais nos campos abaixo e clique no botão\n \"Salvar credenciais\". Isso o levará de volta à página inicial do\n aplicativo, onde você poderá se conectar e desfrutar da conexão.\n </p>\n </fieldset>\n\n <fieldset>\n <legend>Informe suas credenciais</legend>\n\n <label for=\"usernamediv\">Nome de usuário</label>\n\n <div id=\"usernamediv\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-person\"\n viewBox=\"0 0 16 16\">\n <path\n 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\" />\n </svg>\n\n <input id=\"username\" type=\"text\" name=\"username\" placeholder=\"Usuário\" />\n </div>\n\n <label for=\"passworddiv\">Senha</label>\n\n <div id=\"passworddiv\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-key\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z\" />\n <path d=\"M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\" />\n </svg>\n\n <input id=\"password\" type=\"password\" name=\"password\" placeholder=\"Senha\" />\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-eye-slash hidden\" id=\"eye-not-view\" viewBox=\"0 0 16 16\">\n <path\n d=\"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z\" />\n <path\n d=\"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z\" />\n <path\n d=\"M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z\" />\n </svg>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-eye\"\n id=\"eye-view\" viewBox=\"0 0 16 16\">\n <path\n 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\" />\n <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\" />\n </svg>\n </div>\n\n <label for=\"uuiddiv\" class=\"hidden\">UUID</label>\n\n <div id=\"uuiddiv\" class=\"hidden\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-fingerprint\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M8.06 6.5a.5.5 0 0 1 .5.5v.776a11.5 11.5 0 0 1-.552 3.519l-1.331 4.14a.5.5 0 0 1-.952-.305l1.33-4.141a10.5 10.5 0 0 0 .504-3.213V7a.5.5 0 0 1 .5-.5Z\" />\n <path\n d=\"M6.06 7a2 2 0 1 1 4 0 .5.5 0 1 1-1 0 1 1 0 1 0-2 0v.332c0 .409-.022.816-.066 1.221A.5.5 0 0 1 6 8.447c.04-.37.06-.742.06-1.115V7Zm3.509 1a.5.5 0 0 1 .487.513 11.5 11.5 0 0 1-.587 3.339l-1.266 3.8a.5.5 0 0 1-.949-.317l1.267-3.8a10.5 10.5 0 0 0 .535-3.048A.5.5 0 0 1 9.569 8Zm-3.356 2.115a.5.5 0 0 1 .33.626L5.24 14.939a.5.5 0 1 1-.955-.296l1.303-4.199a.5.5 0 0 1 .625-.329Z\" />\n <path\n d=\"M4.759 5.833A3.501 3.501 0 0 1 11.559 7a.5.5 0 0 1-1 0 2.5 2.5 0 0 0-4.857-.833.5.5 0 1 1-.943-.334Zm.3 1.67a.5.5 0 0 1 .449.546 10.72 10.72 0 0 1-.4 2.031l-1.222 4.072a.5.5 0 1 1-.958-.287L4.15 9.793a9.72 9.72 0 0 0 .363-1.842.5.5 0 0 1 .546-.449Zm6 .647a.5.5 0 0 1 .5.5c0 1.28-.213 2.552-.632 3.762l-1.09 3.145a.5.5 0 0 1-.944-.327l1.089-3.145c.382-1.105.578-2.266.578-3.435a.5.5 0 0 1 .5-.5Z\" />\n <path\n d=\"M3.902 4.222a4.996 4.996 0 0 1 5.202-2.113.5.5 0 0 1-.208.979 3.996 3.996 0 0 0-4.163 1.69.5.5 0 0 1-.831-.556Zm6.72-.955a.5.5 0 0 1 .705-.052A4.99 4.99 0 0 1 13.059 7v1.5a.5.5 0 1 1-1 0V7a3.99 3.99 0 0 0-1.386-3.028.5.5 0 0 1-.051-.705ZM3.68 5.842a.5.5 0 0 1 .422.568c-.029.192-.044.39-.044.59 0 .71-.1 1.417-.298 2.1l-1.14 3.923a.5.5 0 1 1-.96-.279L2.8 8.821A6.531 6.531 0 0 0 3.058 7c0-.25.019-.496.054-.736a.5.5 0 0 1 .568-.422Zm8.882 3.66a.5.5 0 0 1 .456.54c-.084 1-.298 1.986-.64 2.934l-.744 2.068a.5.5 0 0 1-.941-.338l.745-2.07a10.51 10.51 0 0 0 .584-2.678.5.5 0 0 1 .54-.456Z\" />\n <path\n d=\"M4.81 1.37A6.5 6.5 0 0 1 14.56 7a.5.5 0 1 1-1 0 5.5 5.5 0 0 0-8.25-4.765.5.5 0 0 1-.5-.865Zm-.89 1.257a.5.5 0 0 1 .04.706A5.478 5.478 0 0 0 2.56 7a.5.5 0 0 1-1 0c0-1.664.626-3.184 1.655-4.333a.5.5 0 0 1 .706-.04ZM1.915 8.02a.5.5 0 0 1 .346.616l-.779 2.767a.5.5 0 1 1-.962-.27l.778-2.767a.5.5 0 0 1 .617-.346Zm12.15.481a.5.5 0 0 1 .49.51c-.03 1.499-.161 3.025-.727 4.533l-.07.187a.5.5 0 0 1-.936-.351l.07-.187c.506-1.35.634-2.74.663-4.202a.5.5 0 0 1 .51-.49Z\" />\n </svg>\n\n <input id=\"uuid\" type=\"text\" placeholder=\"UUID\" />\n </div>-->\n\n <button id=\"save-creds\" type=\"button\" title=\"Salvar informações de usuario e senha\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-save\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9.5a1 1 0 0 0-1 1v7.293l2.646-2.647a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L7.5 9.293V2a2 2 0 0 1 2-2H14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h2.5a.5.5 0 0 1 0 1H2z\" />\n </svg>\n\n <span>Salvar credenciais</span>\n </button>\n </fieldset>\n </form>\n </section>\n\n <section class=\"container-tools\">\n <header>\n <svg id=\"back-tools-container\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-arrow-return-left\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z\" />\n </svg>\n\n <h1>FERRAMENTAS</h1>\n </header>\n\n <section>\n <button type=\"button\" id=\"register-button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-list-columns\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M0 .5A.5.5 0 0 1 .5 0h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 0 .5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 2h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 4h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 6h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 8h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z\" />\n </svg>\n\n <div>\n <h3>REGISTRO</h3>\n <p>\n Verifica todos os detalhes do registro de logs ao se conectar, isso e importante para ajudar o fornecedor\n a compreender o erro que se passa.\n </p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"speedtest-tool\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-activity\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z\" />\n </svg>\n\n <div>\n <h3>SPEEDTEST</h3>\n <p>Teste a velocidade da sua conexão.</p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"hotspot-button-tools\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-broadcast\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707zm2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708zm5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708zm2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0z\" />\n </svg>\n\n <div>\n <h3>HOTSPOT</h3>\n <p>\n Aqui você pode compartilar sua conexão VPN usando o roteador do\n seu celular.\n </p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"apn-tool\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-broadcast-pin\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707zm2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708zm5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708zm2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM6 8a2 2 0 1 1 2.5 1.937V15.5a.5.5 0 0 1-1 0V9.937A2 2 0 0 1 6 8z\" />\n </svg>\n\n <div>\n <h3>CONFIGURAR APN</h3>\n <p>Por aqui você sera redirecionado para as configurações de apn de seu aparelho android e fara as edições\n que desejar.</p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"battery-tool\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-battery-charging\" viewBox=\"0 0 16 16\">\n <path\n d=\"M9.585 2.568a.5.5 0 0 1 .226.58L8.677 6.832h1.99a.5.5 0 0 1 .364.843l-5.334 5.667a.5.5 0 0 1-.842-.49L5.99 9.167H4a.5.5 0 0 1-.364-.843l5.333-5.667a.5.5 0 0 1 .616-.09z\" />\n <path d=\"M2 4h4.332l-.94 1H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h2.38l-.308 1H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z\" />\n <path\n d=\"M2 6h2.45L2.908 7.639A1.5 1.5 0 0 0 3.313 10H2V6zm8.595-2-.308 1H12a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H9.276l-.942 1H12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.405z\" />\n <path\n d=\"M12 10h-1.783l1.542-1.639c.097-.103.178-.218.241-.34V10zm0-3.354V6h-.646a1.5 1.5 0 0 1 .646.646zM16 8a1.5 1.5 0 0 1-1.5 1.5v-3A1.5 1.5 0 0 1 16 8z\" />\n </svg>\n\n <div>\n <h3>OTIMIZAÇÃO DE BATERIA</h3>\n <p>\n Aqui você consegue desativar a otimização de bateria que acaba\n encerrando o aplicativo sem a sua permissão!\n </p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"checkuser-tool\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-person-lines-fill\" viewBox=\"0 0 16 16\">\n <path\n d=\"M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z\" />\n </svg>\n\n <div>\n <h3>DETALHES DO LOGIN</h3>\n <p>\n Aqui você consegue visualizar alguns detalhes do seu perfil.\n </p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"button-open-clear-data-app\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-trash\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z\" />\n <path\n d=\"M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z\" />\n </svg>\n\n <div>\n <h3>LIMPAR DADOS</h3>\n <p>\n Aqui você pode fazer a limpeza do cache e dados do aplicativo, lembre-se de ter internet para atualizar o\n aplicativo novamente.\n </p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n\n <button type=\"button\" id=\"button-open-terms-app\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-journal-medical\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M8 4a.5.5 0 0 1 .5.5v.634l.549-.317a.5.5 0 1 1 .5.866L9 6l.549.317a.5.5 0 1 1-.5.866L8.5 6.866V7.5a.5.5 0 0 1-1 0v-.634l-.549.317a.5.5 0 1 1-.5-.866L7 6l-.549-.317a.5.5 0 0 1 .5-.866l.549.317V4.5A.5.5 0 0 1 8 4zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z\" />\n <path\n d=\"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\" />\n <path\n d=\"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\" />\n </svg>\n\n <div>\n <h3>TERMOS DE USO</h3>\n <p>\n Aqui você consegue ler os termos de uso e licença do aplicativo.\n </p>\n </div>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\" />\n </svg>\n </button>\n </section>\n </section>\n\n <section class=\"container-logs\">\n <header>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-arrow-return-left\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z\" />\n </svg>\n\n <h1>REGISTRO</h1>\n </header>\n\n <section>\n <p></p>\n\n <button type=\"button\" id=\"clear-logs\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-trash\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z\" />\n <path\n d=\"M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z\" />\n </svg>\n\n <span>LIMPAR REGISTRO</span>\n </button>\n </section>\n </section>\n\n <!-- <section class=\"loading\">\n <section>\n <header>\n <h1>CARREGANDO INFORMAÇÕES</h1>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x-lg\"\n id=\"loading-container-close\" viewBox=\"0 0 16 16\">\n <path\n d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\" />\n </svg>\n </header>\n\n <div class=\"loading\"></div>\n </section>\n </section>\n\n <section class=\"checkuser\">\n <section>\n <header>\n <h1>DETALHES DO USUÁRIO</h1>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x-lg\"\n id=\"checkuser-close\" viewBox=\"0 0 16 16\">\n <path\n d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\" />\n </svg>\n </header>\n\n <section>\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-person-fill\"\n viewBox=\"0 0 16 16\">\n <path d=\"M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z\" />\n </svg>\n\n <span id=\"checkuser-name\">USUÁRIO: A@MRSILENT1</span>\n </div>\n\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-calendar-fill\" viewBox=\"0 0 16 16\">\n <path\n 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-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z\" />\n </svg>\n\n <span id=\"checkuser-expires\">EXPIRA EM: 25/09/2023</span>\n </div>\n\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-clock-fill\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z\" />\n </svg>\n\n <span id=\"checkuser-remaing-days\">RESTA: 30 DIAS</span>\n </div>\n\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-phone-fill\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"M3 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V2zm6 11a1 1 0 1 0-2 0 1 1 0 0 0 2 0z\" />\n </svg>\n\n <span id=\"checkuser-total-conection\">CONEXÕES: 1/10</span>\n </div>\n </section>\n </section>\n </section>\n--> \n <section class=\"clean-data-app\">\n <section>\n <header>\n <h1>DESEJA CONFIRMAR ESSA AÇÃO ?</h1>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x-lg\"\n id=\"hidden-clear-data-app\" viewBox=\"0 0 16 16\">\n <path\n d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\" />\n </svg>\n </header>\n\n <section>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-exclamation-lg\" viewBox=\"0 0 16 16\">\n <path\n d=\"M7.005 3.1a1 1 0 1 1 1.99 0l-.388 6.35a.61.61 0 0 1-1.214 0L7.005 3.1ZM7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z\" />\n </svg>\n\n <h1>TEM CERTEZA DA AÇÃO ?</h1>\n\n <p>\n Ao efetuar a ação de limpar os dados do aplicativo, será possível\n carregar somente as configurações mais recentes mediante uma\n conexão ativa com a internet.\n </p>\n\n <button type=\"button\" id=\"confirm-clean-data-app\">\n <span>CONFIRMAR</span>\n </button>\n </section>\n </section>\n </section>\n\n <section class=\"hotspot-container\">\n <section>\n <header>\n <h1>ROTEADOR WIFI - HOTSPOT</h1>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x-lg\"\n id=\"hidden-hotspot-container\" viewBox=\"0 0 16 16\">\n <path\n d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\" />\n </svg>\n </header>\n\n <section>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-router-fill\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"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\" />\n <path d=\"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.707Z\" />\n <path\n d=\"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.342ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm1.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z\" />\n <path d=\"M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z\" />\n </svg>\n\n <h1 id=\"title-hotspot\">ROTEAMENTO DESLIGADO</h1>\n\n <p>\n Ao ativar o hotspot com compartilhamento de VPN do seu celular, um\n IP local é gerado no seu dispositivo. Este IP é usado como proxy\n no dispositivo conectado à sua rede Wi-Fi.\n <br />\n <br />\n\n <b>SIGA ESTES PASSOS IMPORTANTES</b>\n\n <br />\n <br />\n 1 - Ligue o roteador do celular primeiro.\n <br /><br />\n 2 - Ative o compartilhamento de VPN.\n <br /><br />\n 3 - Use o botão para controlar o roteador.\n <br /><br />\n 4 - Encontre o segundo IP na barra de notificações.\n <br /><br />\n 5 - Copie o segundo IP e use como proxy no dispositivo conectado à\n rede.\n <br />\n <br />\n\n Lembre-se: O segundo IP é seu proxy. Isso garantirá o correto\n funcionamento do compartilhamento de VPN via hotspot do celular.\n </p>\n\n <button type=\"button\" id=\"enable-hotspot\">\n <span id=\"value-button-hotspot\">LIGAR HOTSPOT</span>\n </button>\n </section>\n </section>\n </section>\n\n <section class=\"terms-container\">\n <section>\n <header>\n <h1>TERMOS DE USO</h1>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x-lg\"\n id=\"hidden-terms-container\" viewBox=\"0 0 16 16\">\n <path\n d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\" />\n </svg>\n </header>\n\n <p>\n Importante: Ao utilizar o nosso aplicativo, é fundamental que você\n esteja ciente e concorde com os seguintes pontos:\n\n <br /><br /><br />\n\n 1° - Nosso suporte está disponível para ajudar clientes que\n enfrentam problemas como dificuldades de conexão, informações\n incorretas, ou se o aplicativo não está instalado corretamente.\n\n <br /><br />\n\n 2° - Não somos responsáveis por questões relacionadas à manutenção\n da sua operadora, quedas na conexão causadas por fatores externos ou\n problemas climáticos que possam afetar a velocidade da sua internet\n através da VPN.\n\n <br /><br />\n\n 3° - Caso haja uma interrupção no serviço devido à operadora, não\n efetuamos reembolsos.\n <br /><br />\n\n 4° - Não nos responsabilizamos por sites e jogos que impeçam o uso\n de VPN.\n\n <br /><br />\n\n 5° - É permitido usar apenas o número de dispositivos estipulado no\n seu contrato com o revendedor autorizado.\n\n <br /><br />\n\n 6° - É estritamente proibido o uso de aplicativos torrent ou P2P,\n pois eles podem prejudicar o desempenho dos nossos servidores.\n\n <br /><br />\n\n 7° - É importante que, independentemente da sua operadora, você faça\n uma recarga a cada 2 meses para garantir um serviço contínuo.\n\n <br /><br />\n\n 8° - Mantenha o aplicativo sempre atualizado, pois as atualizações\n são necessárias para garantir o bom funcionamento do serviço.\n\n <br /><br /><br /><br />\n\n Agradecemos por escolher o nosso aplicativo e desejamos a você uma\n ótima experiência de navegação!<br><br><b>Atenciosamente,\n <br>Equipe MisterVPN.</b>\n </p>\n </section>\n </section>\n\n <section class=\"container-error\">\n <header>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\n class=\"bi bi-arrow-return-left\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z\" />\n </svg>\n\n <h1>ERROR</h1>\n </header>\n\n <section>\n <h1 id=\"error-title\"></h1>\n\n <p id=\"error-log\"></p>\n </section>\n </section>\n\n <section class=\"container-toast misterVpnAnimatedTime\">\n <div class=\"toast\">\n <div class=\"icon\">\n <img\n src=\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Camada_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 255.17 400'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%239f2eff;%7D.cls-3%7Bfill:none;stroke:url(%23Gradiente_sem_nome_253-3);%7D.cls-3,.cls-4%7Bstroke-miterlimit:10;%7D.cls-4%7Bfill:url(%23Gradiente_sem_nome_253);stroke:url(%23Gradiente_sem_nome_253-2);%7D.cls-5%7Bfill:%230ab1d3;%7D%3C/style%3E%3ClinearGradient id='Gradiente_sem_nome_253' x1='76.24' y1='76.85' x2='139.38' y2='76.85' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230bb1d3'/%3E%3Cstop offset='1' stop-color='%239f2fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='Gradiente_sem_nome_253-2' x1='75.93' x2='139.69' xlink:href='%23Gradiente_sem_nome_253'/%3E%3ClinearGradient id='Gradiente_sem_nome_253-3' x1='72.44' y1='201.84' x2='127.55' y2='201.84' xlink:href='%23Gradiente_sem_nome_253'/%3E%3C/defs%3E%3Ccircle class='cls-5' cx='167.12' cy='32.88' r='32.88'/%3E%3Ccircle class='cls-1' cx='42.09' cy='132.11' r='42.09'/%3E%3Ccircle class='cls-2' cx='169.67' cy='314.5' r='85.5'/%3E%3Cline class='cls-4' x1='139.38' y1='51.86' x2='76.24' y2='101.85'/%3E%3Cline class='cls-3' x1='72.84' y1='165.78' x2='127.15' y2='237.9'/%3E%3C/svg%3E\"\n alt=\"Icone do toast\" />\n </div>\n\n <span class=\"text\">Procurando atualizações</span>\n </div>\n </section>\n </main>\n\n <section class=\"container-menu\">\n <button id=\"home\" type=\"button\" title=\"Inicio\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-house\"\n viewBox=\"0 0 16 16\">\n <defs>\n <linearGradient id=\"grad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" stop-color=\"#0bb1d3\" />\n <stop offset=\"100%\" stop-color=\"#9f2fff\" />\n </linearGradient>\n </defs>\n <path\n d=\"M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z\" />\n </svg>\n\n <span>Inicio</span>\n </button>\n\n <!--<button id=\"login\" type=\"button\" title=\"Login\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-person\"\n viewBox=\"0 0 16 16\">\n <path\n 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\" />\n </svg>\n\n <span>LOGIN</span>\n </button>-->\n\n\n\n <button id=\"register-button\" type=\"button\" title=\"Logs\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-list-columns\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\"\n d=\"M0 .5A.5.5 0 0 1 .5 0h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 0 .5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 2h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 4h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 6h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 8h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z\" />\n </svg>\n\n <span>Logs</span>\n </button>\n\n\n <button id=\"tools\" type=\"button\" title=\"Ferramentas\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-nut\"\n viewBox=\"0 0 16 16\">\n <path\n d=\"m11.42 2 3.428 6-3.428 6H4.58L1.152 8 4.58 2h6.84zM4.58 1a1 1 0 0 0-.868.504l-3.428 6a1 1 0 0 0 0 .992l3.428 6A1 1 0 0 0 4.58 15h6.84a1 1 0 0 0 .868-.504l3.429-6a1 1 0 0 0 0-.992l-3.429-6A1 1 0 0 0 11.42 1H4.58z\" />\n <path\n d=\"M6.848 5.933a2.5 2.5 0 1 0 2.5 4.33 2.5 2.5 0 0 0-2.5-4.33zm-1.78 3.915a3.5 3.5 0 1 1 6.061-3.5 3.5 3.5 0 0 1-6.062 3.5z\" />\n </svg>\n\n <span>Ajustes</span>\n </button>\n \n <button id=\"update\" type=\"button\" title=\"Atualizar\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-arrow-clockwise\"\n viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z\" />\n <path d=\"M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z\" />\n </svg>\n\n <span>Atualizar</span>\n </button>\n </section>\n\n <!-- FUNÇÕES DO APP -->\n <script>\n \n const appGetStatusbarHeightSize = () => DtGetStatusBarHeight.execute()\n const appGetNavbarHeightSize = () => DtGetNavigationBarHeight.execute()\n\n const appTranslateText = (label) => DtTranslateText.execute(label)\n const appGetConfigLabel = (label) => DtGetAppConfig.execute(label)\n\n const AppUpdate = () => DtStartAppUpdate.execute()\n\n const appAllConfigs = () => DtGetConfigs.execute()\n const appSetConfig = (id) => DtSetConfig.execute(id)\n const appGetDefaultConfig = () => DtGetDefaultConfig.execute()\n const appGetConfigVersion = () => `${DtGetLocalConfigVersion.execute() ?? \"1.0\"}`;\n\n const appGetUsername = () => DtUsername.get()\n const appSetUsername = (username) => DtUsername.set(username)\n const appGetPassword = () => DtPassword.get()\n const appSetPassword = (password) => DtPassword.set(password)\n const appGetUUID = () => DtUuid.get()\n const appSetUUID = (uuid) => DtUuid.set(uuid)\n\n const appGetConnectionState = () => DtGetVpnState.execute()\n const appStartConnection = () => DtExecuteVpnStart.execute()\n const appStopConnection = () => DtExecuteVpnStop.execute()\n\n const appGetStatusHotspot = () => DtGetStatusHotSpotService.execute()\n const appStartHotspot = () => DtStartHotSpotService.execute()\n const appStopHotspot = () => DtStopHotSpotService.execute()\n\n const appGetLogs = () => DtGetLogs.execute()\n const appCleanLogs = () => DtClearLogs.execute()\n\n const appBatteryOptimize = () => DtIgnoreBatteryOptimizations.execute()\n const appApnConfiguration = () => DtStartApnActivity.execute()\n const appStartCheckUser = () => DtStartCheckUser.execute()\n const appIntoBrowser = (url) => DtStartWebViewActivity.execute(url)\n const appClearData = () => DtCleanApp.execute()\n </script>\n\n <!-- VARIAVEIS LET -->\n <script>\n let timeoutId\n </script>\n\n <!-- DOM WRAPPER -->\n <script>\n const Dom = (selector) => {\n const _elements = document.querySelectorAll(selector)\n\n const wrapper = {\n on(listeners) {\n for (const [event, listener] of Object.entries(listeners)) {\n _elements.forEach((element) => {\n element.addEventListener(event, listener)\n })\n }\n\n return wrapper\n },\n addClass: (...tokens) => {\n _elements.forEach((element) => {\n element.classList.add(...tokens)\n })\n\n return wrapper\n },\n removeClass: (...tokens) => {\n _elements.forEach((element) => {\n element.classList.remove(...tokens)\n })\n\n return wrapper\n },\n toggleClass: (token, force) => {\n _elements.forEach((element) => {\n element.classList.toggle(token, force)\n })\n\n return wrapper\n },\n style(styles) {\n for (const [property, value] of Object.entries(styles)) {\n console.log(value)\n _elements.forEach((element) => {\n element.style[property] = value\n })\n }\n\n return wrapper\n },\n attr(attrs) {\n for (const [name, value] of Object.entries(attrs)) {\n _elements.forEach((element) => element.setAttribute(name, value))\n }\n\n return wrapper\n },\n html(value) {\n _elements.forEach((element) => (element.innerHTML = value))\n return wrapper\n },\n }\n\n return wrapper\n }\n </script>\n\n <!-- AÇÕES EM VARIAVEIS ROOT -->\n <script>\n document.documentElement.style.setProperty(\n \"--space-status-bar\",\n `${appGetStatusbarHeightSize() + 10}px`\n )\n document.documentElement.style.setProperty(\n \"--space-nav-bar\",\n `${appGetNavbarHeightSize() + 10}px`\n )\n </script>\n\n <!-- VARIAVEIS -->\n <script>\n const Body = Dom(\"body\")\n\n const HomeHeader = Dom(\"section.home header\")\n const LogoHeader = Dom(\"#app_logo\")\n\n const HomeContainer = Dom(\"section.home\")\n const CarrierContainer = Dom(\"section.carrier-list\")\n const ProfileContainer = Dom(\"section.profile\")\n const ToolsContainer = Dom(\"section.container-tools\")\n const RegisterContainer = Dom(\"section.container-logs\")\n const ErrorContainer = Dom(\"section.container-error\")\n const LoadingContainer = Dom(\"section.loading\")\n //const CheckuserContainer = Dom(\"section.checkuser\")\n const ClearDataContainer = Dom(\"section.clean-data-app\")\n const HotspotContainer = Dom(\"section.hotspot-container\")\n const TermsContainer = Dom(\"section.terms-container\")\n\n const BackButtonCarrierContainer = Dom(\"#back-carrier-container\")\n const BackProfileContainer = Dom(\"#back-profile-container\")\n const BackToolsContainer = Dom(\"#back-tools-container\")\n const BackRegisterContainer = Dom(\"section.container-logs header svg\")\n const BackErrorContainer = Dom(\"section.container-error header svg\")\n const BackLoadingContainer = Dom(\"#loading-container-close\")\n const BackCheckuserContainer = Dom(\"#checkuser-close\")\n const BackClearDataContainer = Dom(\"#hidden-clear-data-app\")\n const BackHotspotContainer = Dom(\"#hidden-hotspot-container\")\n const BackTermsContainer = Dom(\"#hidden-terms-container\")\n\n const RenewContainer = Dom(\"section.renew-alert\")\n const ButtonRenew = Dom(\"#renew-button\")\n\n const ConfigVersion = Dom(\"#version\")\n\n const ButtonOfCarrierList = Dom(\"#carrier-list-button\")\n const ValueOfCarrierListButton = Dom(\"#value-of-carrier-list-button\")\n\n const ButtonVpnStartOrStop = Dom(\"#start-stop-vpn-button\")\n\n const LabelDivUser = Dom(\"label[for='usernamediv']\")\n const LabelDivPassword = Dom(\"label[for='passworddiv']\")\n const LabelUUID = Dom(\"label[for='uuiddiv']\")\n const DivUsername = Dom(\"#usernamediv\")\n const DivPassword = Dom(\"#passworddiv\")\n const DivUUID = Dom(\"#uuiddiv\")\n const InputUsername = Dom(\"#username\")\n const InputPassword = Dom(\"#password\")\n const InputUUID = Dom(\"#uuid\")\n const EyeViewPasswordInput = Dom(\"#eye-view\")\n const EyeNotViewPasswordInput = Dom(\"#eye-not-view\")\n const ButtonSaveCreds = Dom(\"#save-creds\")\n\n const CheckuserName = Dom(\"#checkuser-name\")\n const CheckuserExpires = Dom(\"#checkuser-expires\")\n const CheckuserRemainingDays = Dom(\"#checkuser-remaing-days\")\n const CheckuserTotalConnection = Dom(\"#checkuser-total-conection\")\n\n const LogsTextarea = Dom(\"section.container-logs section p\")\n\n const ToastContainer = Dom(\"section.container-toast\")\n const Toast = Dom(\"section.container-toast div.toast\")\n const ToastIcon = Dom(\"section.container-toast div.toast div.icon\")\n const ToastText = Dom(\"section.container-toast div.toast span.text\")\n\n const HomeButton = Dom(\"#home\")\n const LoginButton = Dom(\"#login\")\n const ToolsButton = Dom(\"#tools\")\n const UpdateButton = Dom(\"#update\")\n\n const ButtonRegister = Dom(\"#register-button\")\n const ButtonCleanRegisterLogs = Dom(\"#clear-logs\")\n\n const ButtonStartStopHotspot = Dom(\"#enable-hotspot\")\n const ButtonOpenHotspotContainer = Dom(\"#hotspot-button-tools\")\n const TitleHotspotContainer = Dom(\"#title-hotspot\")\n const ValueOfButtonHotspotContainer = Dom(\"#value-button-hotspot\")\n\n const ButtonOpenClearDataContainer = Dom(\"#button-open-clear-data-app\")\n const ButtonConfirmClearData = Dom(\"#confirm-clean-data-app\")\n\n const ButtonOpenSpeedtest = Dom(\"#speedtest-tool\")\n const ButtonOpenApnConfig = Dom(\"#apn-tool\")\n const ButtonOpenBatteryOptimization = Dom(\"#battery-tool\")\n const ButtonOpenCheckuser = Dom(\"#checkuser-tool\")\n const ButtonOpenTerms = Dom(\"#button-open-terms-app\")\n\n const ErrorTitle = Dom(\"#error-title\")\n const ErrorDescription = Dom(\"#error-log\")\n </script>\n\n <!-- FUNÇÕES PARA O APP -->\n <script>\n const dtShowSuccessToastListener = (value) => showToastContainer(value)\n const dtShowErrorToastListener = (value) =>\n showToastContainerWithError(value)\n const dtConfigClickListener = () => {\n toggleInput()\n writeInputValue()\n }\n const dtVpnStateListener = (state) => connectionState(state)\n const dtOnNewLogListener = () => writeLogsRegister()\n const dtMessageErrorListener = (model) => writeErrorContainer(model)\n const dtCheckUserStartedListener = () => showLoadingContainer()\n const dtCheckUserModelListener = (model) => writeCheckuserContainer(model)\n </script>\n\n <!-- FUNÇÕES DO LAYOUT -->\n <script>\n const appLogo = () => {\n const logo = appGetConfigLabel(\"APP_LOGO\")\n\n if (!logo) {\n return \"\"\n } else {\n return `${JSON.parse(logo).value}`\n }\n }\n const appBackground = () => {\n const background_type = appGetConfigLabel(\"APP_BACKGROUND_TYPE\")\n const background_color = appGetConfigLabel(\"APP_BACKGROUND_COLOR\")\n const background_image = appGetConfigLabel(\"APP_BACKGROUND_IMAGE\")\n\n if (!background_type) {\n return \"\"\n } else if (JSON.parse(background_type)?.value === \"COLOR\") {\n return `${JSON.parse(background_color).value}`\n } else {\n return `url(${JSON.parse(background_image).value})`\n }\n }\n\n const getConfigName = () => {\n if (!appGetDefaultConfig()) {\n return `${appTranslateText(\"LBL_CHOOSE_CONFIG\")}`\n } else {\n return `${JSON.parse(appGetDefaultConfig())?.name}`\n }\n }\n\n const getUsernameValue = () => `${appGetUsername() ?? \"\"}`\n const getPasswordValue = () => `${appGetPassword() ?? \"\"}`\n const getUUIDValue = () => `${appGetUUID() ?? \"\"}`\n\n const getUsernamePlaceholder = () => `${appTranslateText(\"LBL_USERNAME\")}`\n const getPassowrdPlaceholder = () => `${appTranslateText(\"LBL_PASSWORD\")}`\n const getUUIDPlaceholder = () => `${appTranslateText(\"LBL_UUID\")}`\n\n const toggleInput = () => {\n if (checkV2ray()) {\n LabelDivUser.style({ display: \"none\" })\n DivUsername.style({ display: \"none\" })\n\n LabelDivPassword.style({ display: \"none\" })\n DivPassword.style({ display: \"none\" })\n\n LabelUUID.removeClass(\"hidden\")\n DivUUID.removeClass(\"hidden\")\n } else {\n LabelDivUser.style({ display: \"block\" })\n DivUsername.style({ display: \"flex\" })\n\n LabelDivPassword.style({ display: \"block\" })\n DivPassword.style({ display: \"flex\" })\n\n LabelUUID.addClass(\"hidden\")\n DivUUID.addClass(\"hidden\")\n }\n }\n const writeInputValue = () => {\n InputUsername.attr({ value: getUsernameValue() })\n InputPassword.attr({ value: getPasswordValue() })\n InputUUID.attr({ value: getUUIDValue() })\n }\n const writeInputPlaceholder = () => {\n InputUsername.attr({ placeholder: getUsernamePlaceholder() })\n InputPassword.attr({ placeholder: getPassowrdPlaceholder() })\n InputUUID.attr({ placeholder: getUUIDPlaceholder() })\n }\n const showInputPasswordValue = () => {\n EyeViewPasswordInput.addClass(\"hidden\")\n EyeNotViewPasswordInput.removeClass(\"hidden\")\n InputPassword.attr({ type: \"text\" })\n }\n const hiddenInputPasswordValue = () => {\n EyeViewPasswordInput.removeClass(\"hidden\")\n EyeNotViewPasswordInput.addClass(\"hidden\")\n InputPassword.attr({ type: \"password\" })\n }\n\n const checkV2ray = () => {\n const data = JSON.parse(appGetDefaultConfig())\n\n if (!appGetDefaultConfig()) {\n return false\n } else if (data?.mode?.toLowerCase()?.startsWith(\"v2ray\")) {\n return true\n } else {\n return false\n }\n }\n\n const getConnectionState = () => {\n const rootStyles = getComputedStyle(document.documentElement)\n\n const defaultColor = \"--default-background-color\"\n const connectedColor = \"--connected-background-color\"\n const connectingColor = \"--connecting-background-color\"\n const errorColor = \"--error-background-color\"\n\n const states = {\n disconnected: () => {\n const gradientColor = rootStyles.getPropertyValue(defaultColor)\n\n document.documentElement.style.setProperty(\n defaultColor,\n \"linear-gradient(135deg,#9f2fff,#0bb1d3,#7f47cb,#00ffff,#7a2cec,#4adfdf,#76fcfc,#7f47cb,#9f2fff,#0bb1d3,#7f47cb,#00ffff,#7a2cec,#4adfdf)\"\n )\n\n return states\n },\n connecting: () => {\n const gradientColor = rootStyles.getPropertyValue(connectingColor)\n\n document.documentElement.style.setProperty(\n defaultColor,\n gradientColor\n )\n\n return states\n },\n connected: () => {\n const gradientColor = rootStyles.getPropertyValue(connectedColor)\n\n document.documentElement.style.setProperty(\n defaultColor,\n gradientColor\n )\n\n return states\n },\n error: () => {\n const gradientColor = rootStyles.getPropertyValue(errorColor)\n\n document.documentElement.style.setProperty(\n defaultColor,\n gradientColor\n )\n\n return states\n },\n }\n\n return states\n }\n\n const connectionState = (state) => {\n const connectionValue = `${state ?? appGetConnectionState()}`\n\n switch (connectionValue) {\n case \"DISCONNECTED\":\n getConnectionState().disconnected()\n break\n case \"CONNECTING\":\n getConnectionState().connecting()\n break\n case \"CONNECTED\":\n getConnectionState().connected()\n break\n case \"STOPPING\":\n getConnectionState().connecting()\n break\n case \"NO_NETWORK\":\n getConnectionState().error()\n break\n case \"AUTH\":\n getConnectionState().connecting()\n break\n case \"AUTH_FAILED\":\n getConnectionState().connecting()\n break\n }\n }\n\n\n const startStopConnection = () => {\n const state = appGetConnectionState()\n\n state !== \"CONNECTED\" ? appStartConnection() : appStopConnection()\n }\n\n const writeLogsRegister = () => {\n const data = JSON.parse(appGetLogs())\n\n let logs = \"\"\n\n data.forEach((item) => {\n logs += `${Object.keys(item)} ${item[Object.keys(item)]} <br>`\n })\n\n LogsTextarea.html(logs)\n document.querySelector(\"section.container-logs section p\").scrollTop =\n document.querySelector(\n \"section.container-logs section p\"\n ).scrollHeight\n }\n\n const writeCarrierList = () => {\n const container = document.querySelector(\"section.carrier-list section\")\n const existingCategories = container.querySelectorAll(\"div\").length\n\n container.innerHTML = \"\"\n\n const data = JSON.parse(appAllConfigs())\n data.sort((a, b) => a.sorter - b.sorter)\n data.forEach((item, index) =>\n item.items.sort((a, b) => a.sorter - b.sorter)\n )\n data.forEach((category) => {\n const div = document.createElement(\"div\")\n const h1 = document.createElement(\"h1\")\n\n h1.innerHTML = category.name\n\n const ul = document.createElement(\"ul\")\n\n category.items.forEach((item) => {\n const li = document.createElement(\"li\")\n\n li.innerHTML = `<img src=\"${item.icon}\" alt=\"icon\" /> <span>${item.name}</span> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-check2\" viewBox=\"0 0 16 16\"><path d=\"M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z\" /></svg>`\n\n li.addEventListener(\"click\", (e) => {\n appSetConfig(item.id)\n hiddenCarrierListContainer()\n document\n .querySelectorAll(\"li\")\n .forEach((item, index) => item.classList.remove(\"active\"))\n li.classList.add(\"active\")\n writeValueOnButtonOfCarrierList(item.name)\n })\n\n ul.appendChild(li)\n })\n\n div.appendChild(h1)\n div.appendChild(ul)\n\n container.appendChild(div)\n })\n }\n const writeValueOnButtonOfCarrierList = (value) =>\n ValueOfCarrierListButton.html(value ?? getConfigName())\n\n const showToastContainer = (value) => {\n Toast.style({ borderColor: \"#200d45\" })\n ToastIcon.style({ borderRight: \"1px solid #200d45\" })\n\n writeToastText(value)\n\n ToastContainer.removeClass(\"misterVpnAnimatedTime\", \"spaceOutDown\")\n ToastContainer.removeClass(\"misterVpnAnimatedTime\", \"spaceInDown\")\n\n setTimeout(() => {\n ToastContainer.addClass(\"misterVpnAnimatedTime\", \"spaceInDown\")\n }, 100)\n\n clearTimeout(timeoutId)\n\n timeoutId = setTimeout(() => hiddenToastContainer(), 5000)\n }\n const showToastContainerWithError = (value) => {\n Toast.style({ borderColor: \"#FF0000\" })\n ToastIcon.style({ borderRight: \"1px solid #FF0000\" })\n\n writeToastText(value)\n\n ToastContainer.removeClass(\"misterVpnAnimatedTime\", \"spaceOutDown\")\n ToastContainer.removeClass(\"misterVpnAnimatedTime\", \"spaceInDown\")\n\n setTimeout(() => {\n ToastContainer.addClass(\"misterVpnAnimatedTime\", \"spaceInDown\")\n }, 100)\n\n clearTimeout(timeoutId)\n timeoutId = setTimeout(() => hiddenToastContainer(), 5000)\n }\n const writeToastText = (text) => {\n ToastText.html(text)\n }\n const hiddenToastContainer = () => {\n ToastContainer.removeClass(\"misterVpnAnimatedTime\", \"spaceInDown\")\n ToastContainer.removeClass(\"misterVpnAnimatedTime\", \"spaceOutDown\")\n ToastContainer.addClass(\"misterVpnAnimatedTime\", \"spaceOutDown\")\n }\n\n const showHomeContainer = () => {\n hiddenAllContainers()\n HomeContainer.addClass(\"active\")\n }\n\n const showCarrierListContainer = () => {\n writeCarrierList()\n hiddenAllContainers()\n CarrierContainer.addClass(\"active\")\n }\n const hiddenCarrierListContainer = () => {\n showHomeContainer()\n }\n\n const showProfileContainer = () => {\n hiddenAllContainers()\n ProfileContainer.addClass(\"active\")\n }\n const hiddenProfileContainer = () => {\n showHomeContainer()\n }\n\n const showToolsContainer = () => {\n hiddenAllContainers()\n ToolsContainer.addClass(\"active\")\n }\n const hiddenToolsContainer = () => {\n showHomeContainer()\n }\n\n const showRegisterContainer = () => {\n hiddenAllContainers()\n RegisterContainer.addClass(\"active\")\n }\n const hiddenRegisterContainer = () => {\n showHomeContainer()\n }\n\n const writeErrorContainer = (model) => {\n const data = JSON.parse(model)\n\n ErrorTitle.html(data.title)\n ErrorDescription.html(data.content)\n\n showErrorContainer()\n }\n const showErrorContainer = () => {\n hiddenAllContainers()\n ErrorContainer.addClass(\"active\")\n }\n const hiddenErrorContainer = () => {\n showHomeContainer()\n }\n\n const showLoadingContainer = () => {\n const data = JSON.parse(appGetDefaultConfig())\n\n if (data?.url_check_user) {\n LoadingContainer.addClass(\"active\")\n }\n }\n const hiddenLoadingContainer = () => {\n LoadingContainer.removeClass(\"active\")\n }\n\n const writeCheckuserContainer = (model) => {\n const data = JSON.parse(model)\n\n CheckuserName.html(`USUÁRIO: ${data.username}`)\n CheckuserRemainingDays.html(`EXPIRA EM: ${data.expiration_date}`)\n CheckuserRemainingDays.html(`RESTA: ${data.expiration_days} DIAS`)\n CheckuserTotalConnection.html(\n `CONEXÕES: ${data.count_connections}/${data.limit_connections}`\n )\n\n if (data.expiration_days < 4) {\n RenewContainer.addClass(\"active\")\n } else {\n RenewContainer.removeClass(\"active\")\n }\n\n showCheckuserContainer()\n }\n const showCheckuserContainer = () => {\n hiddenLoadingContainer()\n CheckuserContainer.addClass(\"active\")\n }\n const hiddenCheckuserContainer = () => {\n CheckuserContainer.removeClass(\"active\")\n }\n\n const showClearDataAppContainer = () => {\n ClearDataContainer.addClass(\"active\")\n }\n const hiddenClearDataAppContainer = () => {\n ClearDataContainer.removeClass(\"active\")\n }\n\n const startHotspot = () => {\n appStartHotspot();\n\n TitleHotspotContainer.removeClass('hotspot-off').addClass('hotspot-on').text(\"ROTEAMENTO LIGADO\");\n ValueOfButtonHotspotContainer.removeClass('hotspot-off').addClass('hotspot-on').text(\"DESLIGAR HOTSPOT\");\n }\n\n const stopHotspot = () => {\n appStopHotspot();\n\n TitleHotspotContainer.removeClass('hotspot-on').addClass('hotspot-off').text(\"ROTEAMENTO DESLIGADO\");\n ValueOfButtonHotspotContainer.removeClass('hotspot-on').addClass('hotspot-off').text(\"LIGAR HOTSPOT\");\n }\n\n const toggleHotspot = () => {\n appGetStatusHotspot() === \"STOPPED\" ? startHotspot() : stopHotspot();\n }\n\n const setStatusHotspot = () => {\n if (appGetStatusHotspot() === \"STOPPED\") {\n TitleHotspotContainer.removeClass('hotspot-on').addClass('hotspot-off').text(\"ROTEAMENTO DESLIGADO\");\n ValueOfButtonHotspotContainer.removeClass('hotspot-on').addClass('hotspot-off').text(\"LIGAR HOTSPOT\");\n } else {\n TitleHotspotContainer.removeClass('hotspot-off').addClass('hotspot-on').text(\"ROTEAMENTO LIGADO\");\n ValueOfButtonHotspotContainer.removeClass('hotspot-off').addClass('hotspot-on').text(\"DESLIGAR HOTSPOT\");\n }\n }\n\n const showHotspotContainer = () => {\n HotspotContainer.addClass(\"active\")\n }\n const hiddenHotspotContainer = () => {\n HotspotContainer.removeClass(\"active\")\n }\n\n const showTermsContainer = () => {\n TermsContainer.addClass(\"active\")\n }\n const hiddenTermsContainer = () => {\n TermsContainer.removeClass(\"active\")\n }\n\n const openRenew = () => {\n appIntoBrowser(\"https://painelrev.cloud/\")\n }\n const openSpeedtest = () => {\n appIntoBrowser(\"https://fast.com\")\n }\n\n const hiddenAllContainers = () => {\n HomeContainer.removeClass(\"active\")\n CarrierContainer.removeClass(\"active\")\n ProfileContainer.removeClass(\"active\")\n ToolsContainer.removeClass(\"active\")\n RegisterContainer.removeClass(\"active\")\n ErrorContainer.removeClass(\"active\")\n }\n\n const allFunctionsExecute = () => {\n toggleInput()\n writeInputValue()\n writeInputPlaceholder()\n writeLogsRegister()\n connectionState()\n setStatusHotspot()\n }\n\n </script>\n\n <!-- AÇÕES -->\n <script>\n HomeHeader.style({\n background: appBackground(),\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n backgroundRepeat: \"no-repeat\",\n })\n LogoHeader.attr({ src: appLogo() })\n\n ConfigVersion.html(`Versão: ${appGetConfigVersion()}`);\n\n HomeButton.on({ click: () => showHomeContainer() })\n LoginButton.on({ click: () => showProfileContainer() })\n ToolsButton.on({ click: () => showToolsContainer() })\n UpdateButton.on({ click: () => AppUpdate() })\n\n BackButtonCarrierContainer.on({\n click: () => hiddenCarrierListContainer(),\n })\n BackProfileContainer.on({ click: () => hiddenProfileContainer() })\n BackToolsContainer.on({ click: () => hiddenToolsContainer() })\n BackRegisterContainer.on({ click: () => hiddenRegisterContainer() })\n BackErrorContainer.on({ click: () => hiddenErrorContainer() })\n\n ButtonOfCarrierList.on({ click: () => showCarrierListContainer() })\n\n ValueOfCarrierListButton.html(getConfigName())\n\n ButtonVpnStartOrStop.on({ click: () => startStopConnection() })\n\n InputUsername.on({ input: (e) => appSetUsername(e.target.value) })\n InputPassword.on({ input: (e) => appSetPassword(e.target.value) })\n InputUUID.on({ input: (e) => appSetUUID(e.target.value) })\n\n EyeViewPasswordInput.on({ click: () => showInputPasswordValue() })\n EyeNotViewPasswordInput.on({ click: () => hiddenInputPasswordValue() })\n\n ButtonSaveCreds.on({ click: () => hiddenProfileContainer() })\n\n ButtonRegister.on({ click: () => showRegisterContainer() })\n ButtonCleanRegisterLogs.on({ click: () => appCleanLogs() })\n\n ButtonOpenHotspotContainer.on({ click: () => showHotspotContainer() })\n BackHotspotContainer.on({ click: () => hiddenHotspotContainer() })\n ButtonStartStopHotspot.on({ click: () => toggleHotspot() })\n\n ButtonOpenClearDataContainer.on({\n click: () => showClearDataAppContainer(),\n })\n BackClearDataContainer.on({ click: () => hiddenClearDataAppContainer() })\n ButtonConfirmClearData.on({ click: () => appClearData() })\n\n BackLoadingContainer.on({ click: () => hiddenLoadingContainer() })\n BackCheckuserContainer.on({ click: () => hiddenCheckuserContainer() })\n\n BackTermsContainer.on({ click: () => hiddenTermsContainer() })\n\n ButtonRenew.on({ click: () => openRenew() })\n\n ButtonOpenSpeedtest.on({ click: () => openSpeedtest() })\n\n ButtonOpenApnConfig.on({ click: () => appApnConfiguration() })\n\n ButtonOpenBatteryOptimization.on({ click: () => appBatteryOptimize() })\n\n ButtonOpenCheckuser.on({ click: () => appStartCheckUser() })\n\n ButtonOpenTerms.on({ click: () => showTermsContainer() })\n\n allFunctionsExecute()\n </script>\n</body>\n\n</html>",
  354. "type": "HTML",
  355. "status": "ACTIVE",
  356. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  357. },
  358. {
  359. "id": 23795,
  360. "label": "PAGINA WEBVIEW (POR SUA CONTA E RISCO)",
  361. "name": "APP_WEB_VIEW",
  362. "value": null,
  363. "type": "HTML",
  364. "status": "ACTIVE",
  365. "user_id": "073ef35f-e362-4c7a-8df7-e072d3ad6920"
  366. }
  367. ]
comments powered by Disqus