Tema Dtunnel Mod 3

SUBMITTED BY: iTechNet4G

DATE: July 17, 2023, 7:50 p.m.

UPDATED: Nov. 27, 2023, 1:56 a.m.

FORMAT: Text only

SIZE: 112.7 kB

History Raw Download

HITS: 485

Report
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <title>5777879193 - @PoggVpn</title>
  10. <style>
  11. :root {
  12. font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  13. line-height: 1.5;
  14. font-weight: 400;
  16. font-synthesis: none;
  17. text-rendering: optimizeLegibility;
  18. -webkit-font-smoothing: antialiased;
  19. -moz-osx-font-smoothing: grayscale;
  20. text-size-adjust: 100%;
  21. -webkit-text-size-adjust: 100%;
  23. /*-------->MENU<--------*/
  25. /*IMAGEM DE FUNDO PRINCIPAL*/
  26. --imagem-de-fundo: url("https://i.ibb.co/gTFm7PJ/images-8.jpg");
  28. /*CONTAINER DE STATUS VPN*/
  29. --cor-de-fundo-do-container-de-status-da-vpn: rgba(161, 42, 246, 0.1);
  30. --cor-do-icone-do-container-de-status-da-vpn: rgba(255, 255, 255, 1);
  31. --cor-do-texto-do-container-de-status-da-vpn: rgba(255, 255, 255, 1);
  33. /*CONTAINER DE SELECIONAR OPERADORA*/
  34. --cor-de-fundo-do-campo-de-selecionar-operadora: rgba(
  35. 161,
  36. 42,
  37. 246,
  38. 0.5
  39. );
  40. --borda-do-container-de-selecionar-operadora: rgba(68, 60, 119, 1);
  41. --cor-do-icone-de-chip-do-campo-de-selecionar-operadora: rgba(
  42. 255,
  43. 255,
  44. 255,
  45. 1
  46. );
  47. --cor-do-texto-do-campo-de-selecionar-operadora: rgba(255, 255, 255, 1);
  49. /*CONTAINER PRINCIPAL*/
  50. --cor-de-fundo-do-container-principal: rgba(161, 42, 246, 0.5);
  51. --borda-do-container-principal: rgba(68, 60, 119, 1);
  53. --borda-do-header-do-container-principal: rgba(68, 60, 119, 1);
  55. --cor-de-fundo-dos-input-do-container-principal: rgba(
  56. 187,
  57. 127,
  58. 243,
  59. 0.2
  60. );
  61. --cor-da-borda-dos-input-do-container-principal: rgba(68, 60, 119, 1);
  62. --cor-dos-icones-dos-input-do-container-principal: rgba(
  63. 255,
  64. 255,
  65. 255,
  66. 1
  67. );
  68. --cor-do-texto-dos-input-do-container-principal: rgba(255, 255, 255, 1);
  69. --cor-do-texto-dos-input-do-container-principal-quando-nao-ta-selecionado: rgba(
  70. 255,
  71. 255,
  72. 255,
  73. 1
  74. );
  76. --cor-de-fundo-do-botao-do-container-principal: rgba(
  77. 187,
  78. 127,
  79. 243,
  80. 0.2
  81. );
  82. --cor-da-borda-do-botao-do-container-principal: rgba(68, 60, 119, 1);
  83. --cor-do-icone-do-botao-do-container-principal: rgba(255, 255, 255, 1);
  84. --cor-do-texto-do-botao-do-container-principal: rgba(255, 255, 255, 1);
  86. /*CONTAINER DOS CONTROLES*/
  87. --cor-de-fundo-do-container-de-controles: rgba(161, 42, 246, 0.5);
  88. --cor-da-borda-do-container-de-controles: rgba(68, 60, 119, 1);
  90. --cor-de-fundo-do-botao-do-container-de-controles: rgba(104, 3, 202, 1);
  91. --cor-da-borda-do-botao-do-container-de-controles: rgba(68, 60, 119, 1);
  92. --cor-do-icone-do-botao-do-container-de-controles: rgba(
  93. 255,
  94. 255,
  95. 255,
  96. 1
  97. );
  99. --cor-de-fundo-do-botao-do-meio-do-container-de-controles: rgba(
  100. 68,
  101. 60,
  102. 119,
  103. 1
  104. );
  105. --cor-da-borda-do-botao-do-meio-do-container-de-controles: rgba(
  106. 161,
  107. 42,
  108. 246,
  109. 0.5
  110. );
  112. /* CONTAINER DAS CONFIGURAÇÕES */
  113. --cor-de-fundo-do-container-da-lista-de-configuracoes: rgba(
  114. 161,
  115. 42,
  116. 246,
  117. 0.4
  118. );
  119. --cor-da-borda-do-container-da-lista-de-configuracoes: rgba(
  120. 68,
  121. 60,
  122. 119,
  123. 0.5
  124. );
  126. --cor-de-fundo-do-header-do-container-da-lista-de-configuracoes: rgba(
  127. 187,
  128. 127,
  129. 243,
  130. 1
  131. );
  132. --cor-do-icone-de-fechar-do-header-do-container-da-lista-de-configuracoes: rgba(
  133. 255,
  134. 255,
  135. 255,
  136. 1
  137. );
  139. --cor-de-fundo-do-container-da-lista-de-categorias-de-configuracoes: transparent;
  141. --cor-de-fundo-da-categoria: transparent;
  142. --cor-de-fundo-do-header-da-categoria: rgba(187, 127, 243, 1);
  143. --cor-da-borda-do-header-da-categoria: rgba(127, 71, 203, 1);
  144. --cor-do-text-do-header-da-categoria: rgba(255, 255, 255, 1);
  145. --cor-do-icone-do-header-da-categoria: rgba(255, 255, 255, 1);
  147. --cor-de-fundo-da-lista-de-configuracoes: transparent;
  148. --cor-de-fundo-do-item-da-configuracao: rgba(187, 127, 243, 1);
  149. --cor-do-texto-do-titulo-do-item-da-configuracao: rgba(
  150. 255,
  151. 255,
  152. 255,
  153. 1
  154. );
  155. --cor-do-texto-da-descricao-do-item-da-configuracao: rgba(
  156. 255,
  157. 255,
  158. 255,
  159. 1
  160. );
  161. --cor-do-modo-da-conexao-do-item-da-configuracao: rgba(
  162. 255,
  163. 255,
  164. 255,
  165. 1
  166. );
  168. /* CHECKUSER PRINCIPAL */
  169. --cor-de-fundo-do-container-do-checkuser-principal: rgba(
  170. 161,
  171. 42,
  172. 246,
  173. 0.8
  174. );
  175. --cor-de-fundo-do-header-do-container-do-checkuser-principal: rgba(
  176. 187,
  177. 127,
  178. 243,
  179. 1
  180. );
  181. --cor-do-icone-do-header-do-container-do-checkuser-principal: rgba(
  182. 255,
  183. 255,
  184. 255,
  185. 1
  186. );
  188. --cor-da-borda-do-icone-de-sucesso: rgba(255, 255, 255, 1);
  189. --cor-do-icone-de-sucesso: rgba(255, 255, 255, 1);
  191. --cor-de-fundo-da-lista-de-dados-de-login: transparent;
  192. --cor-de-fundo-dos-dados-de-login: rgba(187, 127, 243, 1);
  193. --cor-dos-icones-dos-dados-de-login: rgba(255, 255, 255, 1);
  194. --cor-dos-textos-dos-dados-de-login: rgba(255, 255, 255, 1);
  196. /* CONTAINER DE CARREGAMENTO */
  197. --cor-de-fundo-do-container-de-carregamento: rgba(161, 42, 246, 0.8);
  198. --cor-de-fundo-do-header-do-container-de-carregamento: rgba(
  199. 187,
  200. 127,
  201. 243,
  202. 1
  203. );
  204. --cor-do-icone-do-header-do-container-de-carregamento: rgba(
  205. 255,
  206. 255,
  207. 255,
  208. 1
  209. );
  211. /* CONTAINER DE PERFIL DO USUÁRIO */
  212. --cor-de-fundo-do-container-do-perfil-do-usuario: rgba(
  213. 161,
  214. 42,
  215. 246,
  216. 0.8
  217. );
  218. --cor-de-fundo-do-header-do-container-do-perfil-do-usuario: transparent;
  219. --cor-da-borda-do-header-do-container-do-perfil-do-usuario: rgba(
  220. 187,
  221. 127,
  222. 243,
  223. 1
  224. );
  226. --cor-de-fundo-da-lista-do-container-do-perfil-do-usuario: transparent;
  227. --cor-de-fundo-dos-items-do-container-do-perfil-do-usuario: rgba(
  228. 187,
  229. 127,
  230. 243,
  231. 1
  232. );
  233. --cor-de-fundo-dos-icones-do-container-do-perfil-do-usuario: rgba(
  234. 187,
  235. 127,
  236. 243,
  237. 1
  238. );
  240. --cor-da-borda-de-nao-ver-o-usuario-do-container-do-perfil-do-usuario: rgba(
  241. 255,
  242. 255,
  243. 255,
  244. 1
  245. );
  246. --cor-do-icone-de-dentro-do-close-do-container-do-perfil-do-usuario: rgba(
  247. 255,
  248. 255,
  249. 255,
  250. 1
  251. );
  252. --cor-do-titulo-de-nao-ver-o-usuario-do-container-do-perfil-do-usuario: rgba(
  253. 255,
  254. 255,
  255. 255,
  256. 1
  257. );
  258. --cor-da-descricao-de-nao-ver-o-usuario-do-container-do-perfil-do-usuario: rgba(
  259. 255,
  260. 255,
  261. 255,
  262. 1
  263. );
  265. --cor-de-fundo-dos-termos-do-container-do-perfil-do-usuario: rgba(
  266. 11,
  267. 26,
  268. 59,
  269. 0.5
  270. );
  272. /* CONTAINER DE FERRAMENTAS */
  273. --cor-da-borda-do-titulo-do-container-de-ferramentas: rgba(
  274. 255,
  275. 255,
  276. 255,
  277. 1
  278. );
  279. --cor-do-texto-do-titulo-do-container-de-ferramentas: rgba(
  280. 255,
  281. 255,
  282. 255,
  283. 1
  284. );
  286. --cor-da-borda-dos-botoes-do-container-de-ferramentas: #cc60ff;
  287. --cor-de-fundo-dos-botoes-do-container-de-ferramentas: rgba(
  288. 161,
  289. 42,
  290. 246,
  291. 0.5
  292. );
  293. --cor-da-sombra-dos-botoes-do-container-de-ferramentas: rgba(
  294. 0,
  295. 0,
  296. 0,
  297. 0.25
  298. );
  299. --cor-dos-icones-dos-botoes-do-container-de-ferramentas: rgba(
  300. 255,
  301. 255,
  302. 255,
  303. 1
  304. );
  305. --cor-dos-textos-dos-botoes-do-container-de-ferramentas: rgba(
  306. 255,
  307. 255,
  308. 255,
  309. 1
  310. );
  312. /* MODAL SPEEDTEST */
  313. --cor-do-header-do-modal-do-speedtest: rgba(187, 127, 243, 1);
  314. --cor-de-fundo-do-modal-do-speedtest: rgba(187, 127, 243, 1);
  315. --cor-do-icone-do-header-do-modal-do-speedtest: rgba(255, 255, 255, 1);
  317. /* MODAL ERROR */
  318. --cor-do-header-do-modal-de-error: rgba(158, 36, 36, 0.8);
  319. --cor-de-fundo-do-modal-de-error: rgba(53, 46, 57, 0.9);
  320. --cor-do-icone-do-header-do-modal-de-error: rgba(255, 255, 255, 1);
  322. /* MODAL LOGS */
  323. --cor-do-header-do-modal-de-logs: rgba(187, 127, 243, 1);
  324. --cor-de-fundo-do-modal-de-logs: rgba(53, 46, 57, 0.9);
  325. --cor-do-texto-do-registro-do-modal-de-logs: rgba(255, 255, 255, 1);
  326. }
  328. * {
  329. margin: 0;
  330. padding: 0;
  332. box-sizing: border-box;
  333. }
  335. html,
  336. body,
  337. main {
  338. width: 100%;
  339. height: 100%;
  340. }
  342. body {
  343. background: var(--imagem-de-fundo);
  344. background-repeat: no-repeat;
  345. background-position: center;
  346. background-size: cover;
  347. }
  349. main {
  350. max-width: 500px;
  352. display: flex;
  353. flex-direction: column;
  354. align-items: center;
  355. gap: 10px;
  357. margin: auto;
  359. position: relative;
  361. overflow: hidden;
  362. }
  364. main section.vpnStatus {
  365. width: auto;
  366. height: 40px;
  368. display: flex;
  369. justify-content: center;
  370. align-items: center;
  371. gap: 5px;
  373. margin-top: 5%;
  374. padding: 0px 10px;
  376. border-radius: 20px;
  378. background: var(--cor-de-fundo-do-container-de-status-da-vpn);
  379. }
  381. main section.vpnStatus svg {
  382. color: var(--cor-do-icone-do-container-de-status-da-vpn);
  383. }
  385. main section.vpnStatus span {
  386. color: var(--cor-do-texto-do-container-de-status-da-vpn);
  387. }
  389. section.local-ip {
  390. width: auto;
  391. height: 40px;
  393. display: flex;
  394. justify-content: center;
  395. align-items: center;
  396. gap: 5px;
  398. margin-top: 5%;
  399. padding: 0px 10px;
  401. border-radius: 20px;
  403. background: var(--cor-de-fundo-do-container-de-status-da-vpn);
  404. }
  406. section.local-ip svg {
  407. color: var(--cor-do-icone-do-container-de-status-da-vpn);
  408. }
  410. section.local-ip span {
  411. text-align: center;
  412. color: var(--cor-do-texto-do-container-de-status-da-vpn);
  413. }
  415. main section.home {
  416. width: 100%;
  417. max-width: 500px;
  418. height: auto;
  420. display: flex;
  421. flex-direction: column;
  422. align-items: center;
  423. gap: 10px;
  425. position: relative;
  427. padding: 0px 10px;
  428. }
  430. main section.home header {
  431. width: 100%;
  432. height: auto;
  434. display: flex;
  435. justify-content: center;
  436. align-items: center;
  437. }
  439. main section.home header img.logo {
  440. width: 60%;
  441. max-width: 100px;
  442. height: auto;
  443. }
  445. main section.home div.carrierSelector {
  446. width: 100%;
  447. height: 50px;
  449. display: flex;
  450. align-items: center;
  451. justify-content: center;
  452. gap: 20px;
  454. padding: 0px 10px;
  456. border: 1px solid var(--borda-do-container-de-selecionar-operadora);
  457. border-radius: 10px;
  459. overflow: hidden;
  461. background: var(--cor-de-fundo-do-campo-de-selecionar-operadora);
  462. }
  464. main section.home div.carrierSelector svg {
  465. width: 20px;
  466. height: 20px;
  468. color: var(--cor-do-icone-de-chip-do-campo-de-selecionar-operadora);
  469. }
  471. main section.home div.carrierSelector span {
  472. width: 100%;
  473. max-width: 100%;
  474. height: 100%;
  475. max-height: 100%;
  477. display: flex;
  478. justify-content: center;
  479. align-items: center;
  481. color: var(--cor-do-texto-do-campo-de-selecionar-operadora);
  483. overflow: none;
  484. }
  486. main section.home div.container {
  487. width: 100%;
  488. height: auto;
  489. min-height: 200px;
  490. max-height: 240px;
  492. display: flex;
  493. flex-direction: column;
  494. align-items: center;
  495. justify-content: center;
  497. border: 1px solid var(--borda-do-container-principal);
  498. border-radius: 10px;
  500. background: var(--cor-de-fundo-do-container-principal);
  501. }
  503. main section.home div.container header {
  504. width: 100%;
  505. height: 50px;
  507. display: flex;
  508. align-items: center;
  510. padding: 0px 5px;
  512. border-bottom: 1px solid var(--borda-do-header-do-container-principal);
  514. overflow: hidden;
  515. }
  517. main section.home div.container form {
  518. width: 100%;
  519. height: auto;
  521. display: flex;
  522. flex-direction: column;
  523. align-items: center;
  524. gap: 10px;
  526. padding: 10px;
  527. }
  529. main section.home div.container form div {
  530. width: 90%;
  531. height: 40px;
  533. display: flex;
  534. align-items: center;
  536. position: relative;
  538. padding: 0px 0px 0px 5px;
  540. border-radius: 20px;
  541. border: 1px solid var(--cor-da-borda-dos-input-do-container-principal);
  543. overflow: hidden;
  545. background: var(--cor-de-fundo-dos-input-do-container-principal);
  546. }
  548. main section.home div.container form div#container-uuid-input {
  549. display: none;
  550. }
  552. main section.home div.container form div svg {
  553. width: 40px;
  554. height: 40px;
  556. padding: 10px;
  558. color: var(--cor-dos-icones-dos-input-do-container-principal);
  559. }
  561. main section.home div.container form div input {
  562. width: calc(100% - 40px);
  563. height: 100%;
  565. border: 0;
  566. outline: none;
  568. color: var(--cor-do-texto-dos-input-do-container-principal);
  570. background: transparent;
  571. }
  573. main section.home div.container form div svg.eye {
  574. position: absolute;
  575. right: 0;
  576. }
  578. .eye-none {
  579. display: none;
  580. }
  581. .eye-block {
  582. display: block;
  583. }
  585. main section.home div.container form div input::placeholder {
  586. color: var(
  587. --cor-do-texto-dos-input-do-container-principal-quando-nao-ta-selecionado
  588. );
  589. }
  591. main section.home div.container form div.buttons {
  592. height: 40px;
  594. display: flex;
  595. justify-content: center;
  596. align-items: center;
  597. gap: 10px;
  599. border: 0;
  600. padding-left: 3px;
  602. background: transparent;
  603. }
  605. main section.home div.container form div button#startStopVpn {
  606. flex: 1;
  607. height: 40px;
  609. display: flex;
  610. align-items: center;
  611. justify-content: center;
  612. gap: 10px;
  614. padding: 10px;
  616. border: 1px solid var(--cor-da-borda-do-botao-do-container-principal);
  617. border-radius: 20px;
  619. background: var(--cor-de-fundo-do-botao-do-container-principal);
  620. }
  622. main section.home div.container form div button#buttonLogs {
  623. width: 40px;
  624. height: 40px;
  626. display: flex;
  627. justify-content: center;
  628. align-items: center;
  630. border: 1px solid var(--cor-da-borda-do-botao-do-container-principal);
  631. border-radius: 50%;
  633. background: var(--cor-de-fundo-do-botao-do-container-principal);
  634. }
  636. main section.home div.container form button svg {
  637. color: var(--cor-do-icone-do-botao-do-container-principal);
  638. }
  640. main section.home div.container form button span {
  641. color: var(--cor-do-texto-do-botao-do-container-principal);
  642. }
  644. main section.controls {
  645. width: 90%;
  646. height: 50px;
  648. display: flex;
  649. align-items: center;
  650. gap: 15px;
  652. position: absolute;
  653. bottom: 10px;
  654. z-index: 999;
  656. padding: 0px 10px;
  658. border: 1px solid var(--cor-da-borda-do-container-de-controles);
  659. border-radius: 25px;
  661. background: var(--cor-de-fundo-do-container-de-controles);
  662. }
  664. main section.controls button {
  665. width: 40px;
  666. height: 40px;
  668. display: flex;
  669. align-items: center;
  670. justify-content: center;
  672. border: 0px solid var(--cor-da-borda-do-botao-do-container-de-controles);
  673. border-radius: 50%;
  675. background: var(--cor-de-fundo-do-botao-do-container-de-controles);
  676. }
  678. main section.controls button:nth-child(2) {
  679. margin-right: auto;
  680. }
  682. main section.controls button svg {
  683. color: var(--cor-do-icone-do-botao-do-container-de-controles);
  684. }
  686. main section.controls button#backToHome {
  687. width: 60px;
  688. height: 60px;
  690. margin-left: auto;
  691. margin-right: auto;
  693. position: absolute;
  694. top: -50%;
  695. left: 0;
  696. right: 0;
  698. border: 1px solid
  699. var(--cor-da-borda-do-botao-do-meio-do-container-de-controles);
  701. background: var(
  702. --cor-de-fundo-do-botao-do-meio-do-container-de-controles
  703. );
  704. }
  706. main section.controls button#backToHome::before {
  707. width: 60px;
  708. height: 60px;
  710. content: "";
  712. position: absolute;
  713. top: -6px;
  714. left: -6px;
  715. right: 0;
  716. bottom: 0px;
  717. z-index: 2;
  719. margin-left: auto;
  720. margin-right: auto;
  722. border: 5px solid
  723. var(--cor-da-borda-do-botao-do-meio-do-container-de-controles);
  724. border-radius: 50%;
  725. }
  727. main section.listOfCarriers {
  728. width: calc(100% - 10px);
  729. height: 70%;
  731. display: flex;
  732. flex-direction: column;
  733. align-items: center;
  735. position: absolute;
  736. top: 13%;
  738. border: 1px solid
  739. var(--cor-da-borda-do-container-da-lista-de-configuracoes);
  740. border-radius: 10px;
  742. overflow-y: auto;
  744. opacity: 0;
  745. transform: scale(0);
  746. transform-origin: center;
  747. transition: all 0.3s ease 0.1s;
  749. background: var(--cor-de-fundo-do-container-da-lista-de-configuracoes);
  750. backdrop-filter: blur(10px);
  751. }
  753. main section.listOfCarriers.active {
  754. opacity: 1;
  755. transform: scale(1);
  756. }
  758. main section.listOfCarriers .header-list {
  759. width: 100%;
  760. height: 50px;
  762. display: flex;
  763. align-items: center;
  765. padding: 10px;
  767. border: 1px solid var();
  769. background: var(
  770. --cor-de-fundo-do-header-do-container-da-lista-de-configuracoes
  771. );
  772. }
  774. main section.listOfCarriers header svg.bi-x-lg {
  775. margin: 0px 0px 0px auto;
  777. color: var(
  778. --cor-do-icone-de-fechar-do-header-do-container-da-lista-de-configuracoes
  779. );
  780. }
  782. main section.listOfCarriers section.list-container {
  783. width: 100%;
  784. height: 100%;
  786. display: flex;
  787. flex-direction: column;
  788. gap: 20px;
  790. margin: 10px 0px;
  791. padding: 0px 10px;
  793. overflow-y: auto;
  795. background: var(
  796. --cor-de-fundo-do-container-da-lista-de-categorias-de-configuracoes
  797. );
  798. }
  800. main section.listOfCarriers section.list-container div.category {
  801. width: 100%;
  802. height: auto;
  804. display: flex;
  805. flex-direction: column;
  806. gap: 10px;
  808. border-radius: 5px;
  810. background: var(--cor-de-fundo-da-categoria);
  811. }
  813. main section.listOfCarriers section.list-container div.category header {
  814. width: 100%;
  815. height: 50px;
  816. min-height: 50px;
  818. display: flex;
  819. justify-content: space-between;
  820. align-items: center;
  822. padding: 0px 5px;
  824. border-bottom: 1px solid var(--cor-da-borda-do-header-da-categoria);
  825. border-radius: 5px;
  827. background: var(--cor-de-fundo-do-header-da-categoria);
  828. }
  830. main
  831. section.listOfCarriers
  832. section.list-container
  833. div.category
  834. header
  835. h1 {
  836. color: var(--cor-do-text-do-header-da-categoria);
  837. font-weight: 400;
  838. font-size: 1rem;
  839. }
  841. main
  842. section.listOfCarriers
  843. section.list-container
  844. div.category
  845. header
  846. svg {
  847. color: var(--cor-do-icone-do-header-da-categoria);
  848. transition: all 0.3s ease 0.3s;
  849. }
  851. main
  852. section.listOfCarriers
  853. section.list-container
  854. div.category
  855. ul.configs {
  856. width: 100%;
  857. max-height: 0px;
  859. display: flex;
  860. flex-direction: column;
  861. gap: 10px;
  863. overflow-y: auto;
  864. overflow-x: hidden;
  866. background: var(--cor-de-fundo-da-lista-de-configuracoes);
  868. transition: all 0.3s ease 0.3s;
  869. }
  871. main
  872. section.listOfCarriers
  873. section.list-container
  874. div.category
  875. ul.configs
  876. li {
  877. width: 100%;
  878. height: 60px;
  880. display: flex;
  881. align-items: center;
  882. gap: 3px;
  884. padding: 5px;
  886. border-radius: 5px;
  888. background: var(--cor-de-fundo-do-item-da-configuracao);
  889. }
  891. main
  892. section.listOfCarriers
  893. section.list-container
  894. div.category
  895. ul.configs
  896. li
  897. div.logo {
  898. width: auto;
  899. height: 100%;
  901. display: flex;
  902. justify-content: center;
  903. align-items: center;
  904. }
  906. main
  907. section.listOfCarriers
  908. section.list-container
  909. div.category
  910. ul.configs
  911. li
  912. div.logo
  913. img {
  914. width: 40px;
  915. height: auto;
  916. }
  918. main
  919. section.listOfCarriers
  920. section.list-container
  921. div.category
  922. ul.configs
  923. li
  924. div.description {
  925. width: 150px;
  926. height: 100%;
  928. display: flex;
  929. flex-direction: column;
  930. align-items: center;
  931. justify-content: center;
  932. justify-items: center;
  933. align-content: center;
  935. overflow: hidden;
  936. }
  938. main
  939. section.listOfCarriers
  940. section.list-container
  941. div.category
  942. ul.configs
  943. li
  944. div.description
  945. h1 {
  946. width: 100%;
  947. height: 30px;
  949. display: flex;
  950. justify-content: center;
  952. color: var(--cor-do-texto-do-titulo-do-item-da-configuracao);
  953. font-size: 0.6rem;
  954. font-weight: 400;
  956. white-space: nowrap;
  957. overflow: hidden;
  958. text-overflow: ellipsis;
  959. }
  961. main
  962. section.listOfCarriers
  963. section.list-container
  964. div.category
  965. ul.configs
  966. li
  967. div.description
  968. p {
  969. width: 100%;
  970. height: 30px;
  972. display: flex;
  973. justify-content: flex-end;
  974. align-items: end;
  976. color: var(--cor-do-texto-da-descricao-do-item-da-configuracao);
  977. font-size: 0.6rem;
  979. white-space: nowrap;
  980. overflow: hidden;
  981. text-overflow: ellipsis;
  982. }
  984. main
  985. section.listOfCarriers
  986. section.list-container
  987. div.category
  988. ul.configs
  989. li
  990. div.mode {
  991. width: 50px;
  992. height: 100%;
  994. margin-left: auto;
  996. display: flex;
  997. justify-content: flex-end;
  998. align-items: end;
  999. }
  1001. main
  1002. section.listOfCarriers
  1003. section.list-container
  1004. div.category
  1005. ul.configs
  1006. li
  1007. div.mode
  1008. p {
  1009. color: var(--cor-do-modo-da-conexao-do-item-da-configuracao);
  1010. font-size: 0.6rem;
  1011. }
  1013. section.main-checkuser {
  1014. width: 95%;
  1015. height: 70%;
  1017. position: absolute;
  1018. top: 8%;
  1020. margin: auto;
  1022. border-radius: 5px;
  1024. overflow: hidden;
  1026. background: var(--cor-de-fundo-do-container-do-checkuser-principal);
  1028. opacity: 0;
  1029. transform: scale(0);
  1030. transform-origin: center;
  1031. transition: all 0.3s ease 0.1s;
  1032. }
  1034. section.main-checkuser.show {
  1035. opacity: 1;
  1036. transform: scale(1);
  1037. }
  1039. @media (min-width: 320px) {
  1040. section.main-checkuser {
  1041. height: 55%;
  1043. top: 50%;
  1044. bottom: 50%;
  1045. }
  1046. }
  1048. section.main-checkuser header {
  1049. width: 100%;
  1050. height: 10%;
  1051. max-height: 50px;
  1053. display: flex;
  1054. align-items: center;
  1055. justify-content: flex-end;
  1057. padding: 10px;
  1059. background: var(
  1060. --cor-de-fundo-do-header-do-container-do-checkuser-principal
  1061. );
  1062. }
  1064. section.main-checkuser header svg {
  1065. color: var(
  1066. --cor-do-icone-do-header-do-container-do-checkuser-principal
  1067. );
  1068. }
  1070. section.main-checkuser section.container-content-checkuser {
  1071. width: 100%;
  1072. height: 100%;
  1074. display: flex;
  1075. flex-direction: column;
  1076. align-items: center;
  1077. }
  1079. section.main-checkuser
  1080. section.container-content-checkuser
  1081. div.connected-success {
  1082. width: 50%;
  1083. max-width: 100px;
  1084. height: 50%;
  1085. max-height: 100px;
  1087. display: flex;
  1088. justify-content: center;
  1089. align-items: center;
  1091. margin-top: 20px;
  1092. margin-bottom: 20px;
  1094. border: 1px solid var(--cor-da-borda-do-icone-de-sucesso);
  1095. border-radius: 50%;
  1097. animation: pulse 1s infinite;
  1098. }
  1100. section.main-checkuser
  1101. section.container-content-checkuser
  1102. div.connected-success
  1103. svg {
  1104. width: 50%;
  1105. height: 50%;
  1107. color: var(--cor-do-icone-de-sucesso);
  1108. }
  1110. @keyframes pulse {
  1111. 0% {
  1112. box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
  1113. }
  1114. 70% {
  1115. box-shadow: 0 0 0 20px rgba(0, 255, 0, 0);
  1116. }
  1117. 100% {
  1118. box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
  1119. }
  1120. }
  1122. section.main-checkuser section.container-content-checkuser ul {
  1123. width: 100%;
  1124. height: auto;
  1126. display: flex;
  1127. flex-direction: column;
  1128. justify-content: center;
  1129. align-items: center;
  1131. gap: 10px;
  1133. padding: 0px 10px;
  1135. list-style: none;
  1136. }
  1138. section.main-checkuser section.container-content-checkuser ul li {
  1139. width: 100%;
  1140. height: 50px;
  1142. display: flex;
  1143. align-items: center;
  1145. padding: 0px 10px;
  1147. border-radius: 5px;
  1149. background: var(--cor-de-fundo-dos-dados-de-login);
  1150. }
  1152. section.main-checkuser section.container-content-checkuser ul li svg {
  1153. margin-right: 10px;
  1155. color: var(--cor-dos-icones-dos-dados-de-login);
  1156. }
  1158. section.main-checkuser section.container-content-checkuser ul li span {
  1159. color: var(--cor-dos-textos-dos-dados-de-login);
  1160. }
  1162. section.loading {
  1163. width: 95%;
  1164. height: auto;
  1166. position: absolute;
  1167. top: 50%;
  1168. left: 0;
  1169. right: 0;
  1170. transform: translateY(-50%);
  1172. margin: auto;
  1174. border-radius: 5px;
  1176. overflow-x: hidden;
  1178. opacity: 0;
  1179. transform: scale(0);
  1180. transform-origin: center;
  1181. transition: all 0.3s ease 0.1s;
  1183. background: var(--cor-de-fundo-do-container-de-carregamento);
  1184. }
  1186. section.loading.show {
  1187. opacity: 1;
  1188. transform: scale(1);
  1189. }
  1191. section.loading header {
  1192. width: 100%;
  1193. height: 10%;
  1194. max-height: 50px;
  1196. display: flex;
  1197. align-items: center;
  1198. justify-content: flex-end;
  1200. padding: 10px;
  1202. background: var(--cor-de-fundo-do-header-do-container-de-carregamento);
  1203. }
  1205. section.loading header svg {
  1206. color: var(--cor-do-icone-do-header-do-container-de-carregamento);
  1207. }
  1209. section.loading div.loading-container {
  1210. width: 100px;
  1211. height: 100px;
  1213. margin: 30px auto;
  1215. border: 4px solid #ffffff;
  1216. border-top: 4px solid transparent;
  1217. border-radius: 50%;
  1219. animation: spin 0.5s linear infinite;
  1220. }
  1222. @keyframes spin {
  1223. 0% {
  1224. transform: rotate(0deg);
  1225. }
  1226. 100% {
  1227. transform: rotate(360deg);
  1228. }
  1229. }
  1231. section.profile-checkuser {
  1232. width: 100%;
  1233. height: 100%;
  1235. display: flex;
  1236. flex-direction: column;
  1238. position: absolute;
  1239. top: 0;
  1240. left: 100%;
  1241. right: 0;
  1242. bottom: 0;
  1244. background: var(--imagem-de-fundo);
  1245. background-repeat: no-repeat;
  1246. background-position: center;
  1247. background-size: cover;
  1249. transition: transform 0.5s ease-in-out;
  1250. }
  1252. section.profile-checkuser.show {
  1253. transform: translateX(-100%);
  1254. }
  1256. section.profile-checkuser header,
  1257. section.profile-checkuser section.terms header {
  1258. width: 95%;
  1259. height: 40px;
  1261. display: flex;
  1262. align-items: center;
  1264. margin: 0 auto;
  1266. background: var(
  1267. --cor-de-fundo-do-header-do-container-do-perfil-do-usuario
  1268. );
  1269. }
  1271. section.profile-checkuser header h1,
  1272. section.profile-checkuser section.terms header h1 {
  1273. width: 95%;
  1275. color: #ffffff;
  1276. font-weight: 400;
  1277. font-size: 1rem;
  1278. text-align: center;
  1280. margin: 0 auto;
  1282. border-bottom: 4px solid
  1283. var(--cor-da-borda-do-header-do-container-do-perfil-do-usuario);
  1284. }
  1286. section.profile-checkuser div.not-view-user {
  1287. display: none;
  1288. flex-direction: column;
  1289. align-items: center;
  1290. gap: 15px;
  1292. padding: 15px 10px;
  1293. }
  1295. section.profile-checkuser div.not-view-user.show {
  1296. display: flex;
  1297. }
  1299. section.profile-checkuser div.not-view-user div.circle {
  1300. width: 100px;
  1301. height: 100px;
  1303. display: flex;
  1304. justify-content: center;
  1305. align-items: center;
  1307. border: 2px solid
  1308. var(
  1309. --cor-da-borda-de-nao-ver-o-usuario-do-container-do-perfil-do-usuario
  1310. );
  1311. border-radius: 50%;
  1312. }
  1314. section.profile-checkuser div.not-view-user div.circle svg {
  1315. width: 50%;
  1316. height: 50%;
  1318. color: var(
  1319. --cor-do-icone-de-dentro-do-close-do-container-do-perfil-do-usuario
  1320. );
  1321. }
  1323. section.profile-checkuser div.not-view-user h2 {
  1324. width: 100%;
  1326. color: var(
  1327. --cor-do-titulo-de-nao-ver-o-usuario-do-container-do-perfil-do-usuario
  1328. );
  1329. text-align: center;
  1330. font-size: 1rem;
  1331. }
  1333. section.profile-checkuser div.not-view-user p {
  1334. color: var(
  1335. --cor-da-descricao-de-nao-ver-o-usuario-do-container-do-perfil-do-usuario
  1336. );
  1337. text-align: center;
  1338. font-size: 0.8rem;
  1339. }
  1341. section.profile-checkuser ul {
  1342. width: 100%;
  1343. height: auto;
  1345. display: none;
  1346. flex-direction: column;
  1347. gap: 20px;
  1349. list-style: none;
  1351. padding: 10px;
  1353. background: var(
  1354. --cor-de-fundo-da-lista-do-container-do-perfil-do-usuario
  1355. );
  1356. }
  1358. section.profile-checkuser ul.show {
  1359. display: grid;
  1360. }
  1362. section.profile-checkuser ul li {
  1363. width: 95%;
  1364. height: 40px;
  1366. display: grid;
  1367. align-items: center;
  1369. margin: 0px auto;
  1371. position: relative;
  1373. border-radius: 20px;
  1375. background: var(
  1376. --cor-de-fundo-dos-items-do-container-do-perfil-do-usuario
  1377. );
  1378. }
  1380. section.profile-checkuser ul li svg {
  1381. width: 50px;
  1382. height: 50px;
  1384. position: absolute;
  1385. left: -10px;
  1387. padding: 10px;
  1389. border-radius: 50%;
  1390. box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  1392. color: #ffffff;
  1394. background: var(
  1395. --cor-de-fundo-dos-icones-do-container-do-perfil-do-usuario
  1396. );
  1397. }
  1399. section.profile-checkuser ul li svg.even {
  1400. box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.2);
  1401. position: absolute;
  1402. left: initial;
  1403. right: -10px;
  1404. }
  1406. section.profile-checkuser ul li svg path {
  1407. transform: scale(0.6);
  1408. transform-origin: center;
  1409. }
  1411. section.profile-checkuser ul li span {
  1412. margin-left: 45px;
  1414. color: #ffffff;
  1415. font-size: 0.8rem;
  1416. }
  1418. section.profile-checkuser ul li span.even {
  1419. margin-left: auto;
  1420. margin-right: 45px;
  1421. }
  1423. section.profile-checkuser section.terms {
  1424. display: flex;
  1425. flex-direction: column;
  1427. width: 100%;
  1428. height: auto;
  1429. margin-top: 5%;
  1430. }
  1432. section.profile-checkuser section.terms p {
  1433. width: 95%;
  1434. height: auto;
  1435. max-height: 210px;
  1437. margin: 0 auto;
  1438. padding: 10px;
  1440. border-radius: 5px;
  1442. overflow-y: auto;
  1444. color: #ffffff;
  1445. text-align: center;
  1447. background: var(
  1448. --cor-de-fundo-dos-termos-do-container-do-perfil-do-usuario
  1449. );
  1450. }
  1452. @media (min-height: 700px) {
  1453. section.profile-checkuser section.terms p {
  1454. max-height: 350px;
  1455. }
  1456. }
  1458. section.tools {
  1459. width: 100%;
  1460. height: 100%;
  1462. display: flex;
  1463. flex-direction: column;
  1465. position: absolute;
  1466. top: 0;
  1467. left: 100%;
  1468. right: 0;
  1470. background: var(--imagem-de-fundo);
  1471. background-repeat: no-repeat;
  1472. background-position: center;
  1473. background-size: cover;
  1475. transition: transform 0.5s ease-in-out;
  1476. }
  1478. section.tools.show {
  1479. transform: translateX(-100%);
  1480. }
  1482. section.tools header {
  1483. width: 100%;
  1484. height: auto;
  1486. display: flex;
  1487. justify-content: center;
  1488. }
  1490. section.tools header h1 {
  1491. width: 90%;
  1492. height: auto;
  1494. padding: 10px;
  1496. border-bottom: 3px solid
  1497. var(--cor-da-borda-do-titulo-do-container-de-ferramentas);
  1498. text-shadow: 0px 4px 4px
  1499. var(--cor-da-sombra-dos-botoes-do-container-de-ferramentas);
  1501. color: var(--cor-do-texto-do-titulo-do-container-de-ferramentas);
  1502. font-weight: bold;
  1503. font-size: 1rem;
  1504. text-align: center;
  1505. }
  1507. section.tools section.container-tools {
  1508. width: 100%;
  1509. height: auto;
  1511. display: flex;
  1512. flex-direction: column;
  1513. gap: 20px;
  1515. margin: 40px 0px 0px 0px;
  1516. padding: 0px 10px;
  1517. }
  1519. section.tools section.container-tools button {
  1520. width: 100%;
  1521. height: 50px;
  1523. display: flex;
  1524. align-items: center;
  1525. gap: 9.5px;
  1527. padding: 0px 16px;
  1529. border: 1px solid
  1530. var(--cor-da-borda-dos-botoes-do-container-de-ferramentas);
  1531. border-radius: 25px;
  1532. box-shadow: 0px 4px 4px
  1533. var(--cor-da-sombra-dos-botoes-do-container-de-ferramentas);
  1535. background: var(--cor-de-fundo-dos-botoes-do-container-de-ferramentas);
  1536. }
  1538. section.tools section.container-tools button svg {
  1539. width: 20px;
  1540. height: 20px;
  1542. color: var(--cor-dos-icones-dos-botoes-do-container-de-ferramentas);
  1543. }
  1545. section.tools section.container-tools button span {
  1546. color: var(--cor-dos-textos-dos-botoes-do-container-de-ferramentas);
  1547. }
  1549. section.modal-speedtest,
  1550. section.modal-error-alert {
  1551. width: 95%;
  1552. max-width: 450px;
  1553. height: 50%;
  1555. position: absolute;
  1556. top: 25%;
  1557. transform: translate(-50%, -50%);
  1559. z-index: 2;
  1561. display: flex;
  1562. flex-direction: column;
  1564. border-radius: 5px;
  1566. overflow-x: hidden;
  1568. opacity: 0;
  1569. transform: scale(0);
  1570. transform-origin: center;
  1571. transition: all 0.3s ease 0.1s;
  1572. }
  1574. section.modal-speedtest.show,
  1575. section.modal-error-alert.show,
  1576. section.modal-logs.show {
  1577. opacity: 1;
  1578. transform: scale(1);
  1579. }
  1581. section.modal-speedtest header,
  1582. section.modal-error-alert header {
  1583. width: 100%;
  1584. height: 40px;
  1586. display: flex;
  1587. align-items: center;
  1589. padding: 0px 10px;
  1590. }
  1592. section.modal-speedtest header {
  1593. background: var(--cor-do-header-do-modal-do-speedtest);
  1594. }
  1596. section.modal-speedtest header h1,
  1597. section.modal-error-alert header h1 {
  1598. flex: 1;
  1599. display: flex;
  1600. justify-content: center;
  1601. align-items: center;
  1603. color: #ffffff;
  1604. font-family: "Roboto", sans-serif;
  1605. font-weight: bolder;
  1606. }
  1608. section.modal-speedtest header svg,
  1609. section.modal-error-alert header svg {
  1610. margin-left: auto;
  1612. color: var(--cor-do-icone-do-header-do-modal-do-speedtest);
  1613. }
  1615. section.modal-speedtest section,
  1616. section.modal-error-alert section {
  1617. width: 100%;
  1618. height: calc(100% - 40px);
  1620. position: relative;
  1622. display: flex;
  1623. flex-direction: column;
  1624. justify-content: center;
  1625. align-items: center;
  1626. }
  1628. section.modal-speedtest section {
  1629. background: var(--cor-de-fundo-do-modal-do-speedtest);
  1630. }
  1632. section.modal-speedtest section iframe {
  1633. width: 100%;
  1634. height: 100%;
  1636. border: 0;
  1638. overflow: hidden;
  1639. }
  1641. section.modal-error-alert header {
  1642. background: var(--cor-do-header-do-modal-de-error);
  1643. }
  1645. section.modal-error-alert section {
  1646. background: var(--cor-de-fundo-do-modal-de-error);
  1647. }
  1649. section.modal-error-alert section h1 {
  1650. padding: 0px 10px;
  1651. color: #ffffff;
  1652. }
  1654. section.modal-error-alert section p {
  1655. margin-top: 10px;
  1656. padding: 0px 10px;
  1658. color: #ffffff;
  1659. text-align: center;
  1660. }
  1662. section.modal-logs {
  1663. width: 95%;
  1664. max-width: 450px;
  1665. height: auto;
  1667. position: absolute;
  1668. top: 15%;
  1669. transform: translate(-50%, -50%);
  1671. z-index: 2;
  1673. display: flex;
  1674. flex-direction: column;
  1676. border-radius: 5px;
  1678. overflow-x: hidden;
  1680. opacity: 0;
  1681. transform: scale(0);
  1682. transform-origin: center;
  1683. transition: all 0.3s ease 0.1s;
  1684. }
  1686. section.modal-logs header {
  1687. width: 100%;
  1688. height: 40px;
  1690. display: flex;
  1691. align-items: center;
  1692. justify-content: flex-start;
  1694. padding: 0px 10px;
  1696. background: var(--cor-de-fundo-do-modal-de-logs);
  1697. }
  1699. section.modal-logs header h1 {
  1700. font-size: 14px;
  1701. color: #ffffff;
  1702. }
  1704. section.modal-logs p {
  1705. height: 100%;
  1706. /* min-height: 200px;
  1707. max-height: 400px; */
  1709. padding: 10px;
  1711. font-size: 12px;
  1712. text-align: left;
  1713. color: var(--cor-do-texto-do-registro-do-modal-de-logs);
  1715. overflow-y: auto;
  1717. background: var(--cor-de-fundo-do-modal-de-logs);
  1718. }
  1720. section.modal-logs section {
  1721. width: 100%;
  1722. height: auto;
  1724. display: flex;
  1725. align-items: center;
  1726. justify-content: space-between;
  1728. padding: 10px 10px;
  1730. border-top: 3px solid rgba(161, 161, 161, 1);
  1732. background: var(--cor-de-fundo-do-modal-de-logs);
  1733. }
  1735. section.modal-logs section button {
  1736. width: 45%;
  1737. min-width: 115px;
  1738. height: 40px;
  1740. display: flex;
  1741. align-items: center;
  1742. justify-content: center;
  1744. border: 1px solid rgba(97, 97, 97, 1);
  1745. border-radius: 3px;
  1747. color: #ffffff;
  1749. background: rgba(46, 46, 46, 1);
  1750. }
  1752. section.renew-window {
  1753. width: 100%;
  1754. height: 100%;
  1756. display: flex;
  1757. flex-direction: column;
  1759. position: absolute;
  1760. top: 0;
  1761. left: -100%;
  1762. right: 100%;
  1764. background: var(--imagem-de-fundo);
  1765. background-repeat: no-repeat;
  1766. background-position: center;
  1767. background-size: cover;
  1769. transition: transform 0.5s ease-in-out;
  1770. }
  1772. section.renew-window.show {
  1773. transform: translateX(100%);
  1774. }
  1776. section.renew-window header {
  1777. width: 100%;
  1778. height: auto;
  1780. display: flex;
  1781. justify-content: center;
  1782. }
  1784. section.renew-window header h1 {
  1785. width: 90%;
  1786. height: auto;
  1788. padding: 10px;
  1790. border-bottom: 3px solid
  1791. var(--cor-da-borda-do-titulo-do-container-de-ferramentas);
  1792. text-shadow: 0px 4px 4px
  1793. var(--cor-da-sombra-dos-botoes-do-container-de-ferramentas);
  1795. color: var(--cor-do-texto-do-titulo-do-container-de-ferramentas);
  1796. font-weight: bold;
  1797. font-size: 1rem;
  1798. text-align: center;
  1799. }
  1801. section.renew-window section {
  1802. width: 100%;
  1803. height: 100%;
  1805. display: flex;
  1806. justify-content: center;
  1807. align-items: center;
  1808. }
  1810. section.renew-window section div {
  1811. width: 90%;
  1812. height: auto;
  1814. display: flex;
  1815. flex-direction: column;
  1816. align-items: center;
  1818. padding: 10px;
  1819. margin: 0px 0px 40px 0px;
  1821. border: 1px solid rgba(219, 142, 255, 1);
  1822. border-radius: 37px;
  1824. background: rgba(161, 42, 246, 0.5);
  1825. }
  1827. section.renew-window section div h1 {
  1828. color: #ffffff;
  1829. }
  1831. section.renew-window section div p {
  1832. width: 100%;
  1834. display: flex;
  1835. justify-content: center;
  1836. align-items: center;
  1838. margin-top: 15%;
  1840. color: #ffffff;
  1841. text-align: center;
  1842. }
  1843. </style>
  1844. </head>
  1845. <body>
  1846. <main>
  1847. <section class="home">
  1848. <header>
  1849. <img
  1850. class="logo"
  1851. src="https://i.ibb.co/Qkd7xzR/IMG-20230708-213237.png"
  1852. alt="logo"
  1853. />
  1854. </header>
  1856. <div class="carrierSelector">
  1857. <svg
  1858. xmlns="http://www.w3.org/2000/svg"
  1859. width="14"
  1860. height="14"
  1861. fill="currentColor"
  1862. class="bi bi-sd-card"
  1863. viewBox="0 0 14 14"
  1864. >
  1865. <path
  1866. d="M6.25 3.5a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0v-2zm2 0a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0v-2zm2 0a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0v-2zm2 0a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0v-2z"
  1867. />
  1868. <path
  1869. fill-rule="evenodd"
  1870. d="M5.914 0H12.5A1.5 1.5 0 0 1 14 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5V3.914c0-.398.158-.78.44-1.06L4.853.439A1.5 1.5 0 0 1 5.914 0zM13 1.5a.5.5 0 0 0-.5-.5H5.914a.5.5 0 0 0-.353.146L3.146 3.561A.5.5 0 0 0 3 3.914V14.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-13z"
  1871. />
  1872. </svg>
  1874. <span>Selecione uma operadora</span>
  1875. </div>
  1877. <div class="container">
  1878. <form>
  1879. <div id="container-user-input">
  1880. <svg
  1881. xmlns="http://www.w3.org/2000/svg"
  1882. width="16"
  1883. height="16"
  1884. fill="currentColor"
  1885. class="bi bi-person"
  1886. viewBox="0 0 16 16"
  1887. >
  1888. <path
  1889. 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"
  1890. />
  1891. </svg>
  1893. <input id="inputUser" type="text" placeholder="Usuário" />
  1894. </div>
  1896. <div id="container-password-input">
  1897. <svg
  1898. xmlns="http://www.w3.org/2000/svg"
  1899. width="16"
  1900. height="16"
  1901. fill="currentColor"
  1902. class="bi bi-key"
  1903. viewBox="0 0 16 16"
  1904. >
  1905. <path
  1906. 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"
  1907. />
  1908. <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
  1909. </svg>
  1911. <input id="inputPassword" type="password" placeholder="Senha" />
  1913. <svg
  1914. xmlns="http://www.w3.org/2000/svg"
  1915. width="16"
  1916. height="16"
  1917. fill="currentColor"
  1918. class="bi bi-eye-slash eye-hidden"
  1919. viewBox="0 0 16 16"
  1920. >
  1921. <path
  1922. 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"
  1923. />
  1924. <path
  1925. 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"
  1926. />
  1927. <path
  1928. 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"
  1929. />
  1930. </svg>
  1932. <svg
  1933. xmlns="http://www.w3.org/2000/svg"
  1934. width="16"
  1935. height="16"
  1936. fill="currentColor"
  1937. class="bi bi-eye eye-show eye-none"
  1938. viewBox="0 0 16 16"
  1939. >
  1940. <path
  1941. 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"
  1942. />
  1943. <path
  1944. 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"
  1945. />
  1946. </svg>
  1947. </div>
  1949. <div id="container-uuid-input">
  1950. <svg
  1951. xmlns="http://www.w3.org/2000/svg"
  1952. width="16"
  1953. height="16"
  1954. fill="currentColor"
  1955. class="bi bi-fingerprint"
  1956. viewBox="0 0 16 16"
  1957. >
  1958. <path
  1959. 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"
  1960. />
  1961. <path
  1962. 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"
  1963. />
  1964. <path
  1965. 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"
  1966. />
  1967. <path
  1968. 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"
  1969. />
  1970. <path
  1971. 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"
  1972. />
  1973. </svg>
  1975. <input type="password" placeholder="UUID" id="uuid-input" />
  1976. </div>
  1978. <div class="buttons">
  1979. <button id="startStopVpn" type="button">
  1980. <span id="startStopVpnButtonValue">Conectar</span>
  1981. </button>
  1983. <button id="buttonLogs" type="button">
  1984. <svg
  1985. xmlns="http://www.w3.org/2000/svg"
  1986. width="16"
  1987. height="16"
  1988. fill="currentColor"
  1989. class="bi bi-file-earmark-text"
  1990. viewBox="0 0 16 16"
  1991. >
  1992. <path
  1993. d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 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-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"
  1994. />
  1995. <path
  1996. d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"
  1997. />
  1998. </svg>
  1999. </button>
  2000. </div>
  2001. </form>
  2002. </div>
  2003. </section>
  2005. <section class="vpnStatus">
  2006. <svg
  2007. xmlns="http://www.w3.org/2000/svg"
  2008. width="16"
  2009. height="16"
  2010. fill="currentColor"
  2011. class="bi bi-plug"
  2012. viewBox="0 0 16 16"
  2013. >
  2014. <path
  2015. d="M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0zM5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4H5z"
  2016. />
  2017. </svg>
  2019. <span>Desconectado</span>
  2020. </section>
  2022. <section class="local-ip">
  2023. <span>TIM: 192.168.0.1</span>
  2024. </section>
  2026. <section class="listOfCarriers">
  2027. <header class="header-list">
  2028. <svg
  2029. id="close-modal-configs"
  2030. xmlns="http://www.w3.org/2000/svg"
  2031. width="16"
  2032. height="16"
  2033. fill="currentColor"
  2034. class="bi bi-x-lg"
  2035. viewBox="0 0 16 16"
  2036. >
  2037. <path
  2038. 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"
  2039. />
  2040. </svg>
  2041. </header>
  2043. <section class="list-container"></section>
  2044. </section>
  2046. <section class="loading">
  2047. <header>
  2048. <svg
  2049. xmlns="http://www.w3.org/2000/svg"
  2050. width="16"
  2051. height="16"
  2052. fill="currentColor"
  2053. class="bi bi-x-lg"
  2054. viewBox="0 0 16 16"
  2055. >
  2056. <path
  2057. 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"
  2058. />
  2059. </svg>
  2060. </header>
  2062. <div class="loading-container"></div>
  2063. </section>
  2065. <section class="main-checkuser">
  2066. <header>
  2067. <svg
  2068. xmlns="http://www.w3.org/2000/svg"
  2069. width="16"
  2070. height="16"
  2071. fill="currentColor"
  2072. class="bi bi-x-lg"
  2073. viewBox="0 0 16 16"
  2074. >
  2075. <path
  2076. 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"
  2077. />
  2078. </svg>
  2079. </header>
  2081. <section class="container-content-checkuser">
  2082. <div class="connected-success">
  2083. <svg
  2084. xmlns="http://www.w3.org/2000/svg"
  2085. width="16"
  2086. height="16"
  2087. fill="currentColor"
  2088. class="bi bi-check2"
  2089. viewBox="0 0 16 16"
  2090. >
  2091. <path
  2092. 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"
  2093. />
  2094. </svg>
  2095. </div>
  2097. <ul></ul>
  2098. </section>
  2099. </section>
  2101. <section class="profile-checkuser">
  2102. <header>
  2103. <h1>INFORMAÇÕES DO PERFIL</h1>
  2104. </header>
  2106. <div id="not-profile-user" class="not-view-user">
  2107. <div class="circle">
  2108. <svg
  2109. xmlns="http://www.w3.org/2000/svg"
  2110. width="16"
  2111. height="16"
  2112. fill="currentColor"
  2113. class="bi bi-x-lg"
  2114. viewBox="0 0 16 16"
  2115. >
  2116. <path
  2117. 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"
  2118. />
  2119. </svg>
  2120. </div>
  2122. <h2>NÃO FOI POSSÍVEL CARREGAR AS INFORMAÇÕES DO PERFIL</h2>
  2123. <p>
  2124. Tente conectar o seu usuário antes de verificar as informações do
  2125. seu perfil
  2126. </p>
  2127. </div>
  2129. <ul id="list-profile">
  2130. <li>
  2131. <svg
  2132. xmlns="http://www.w3.org/2000/svg"
  2133. width="16"
  2134. height="16"
  2135. fill="currentColor"
  2136. class="bi bi-person"
  2137. viewBox="0 0 16 16"
  2138. >
  2139. <path
  2140. 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"
  2141. />
  2142. </svg>
  2144. <span>NOME DE USUÁRIO: fulano</span>
  2145. </li>
  2147. <li>
  2148. <svg
  2149. xmlns="http://www.w3.org/2000/svg"
  2150. width="16"
  2151. height="16"
  2152. fill="currentColor"
  2153. class="bi bi-calendar3-week even"
  2154. viewBox="0 0 16 16"
  2155. >
  2156. <path
  2157. d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"
  2158. />
  2159. <path
  2160. d="M12 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-5 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm2-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-5 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
  2161. />
  2162. </svg>
  2164. <span class="even">EXPIRAÇÃO: dd/mm/aaaa</span>
  2165. </li>
  2167. <li>
  2168. <svg
  2169. xmlns="http://www.w3.org/2000/svg"
  2170. width="16"
  2171. height="16"
  2172. fill="currentColor"
  2173. class="bi bi-hourglass-split"
  2174. viewBox="0 0 16 16"
  2175. >
  2176. <path
  2177. d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"
  2178. />
  2179. </svg>
  2181. <span>DIAS RESTANTES: 99</span>
  2182. </li>
  2184. <li>
  2185. <svg
  2186. xmlns="http://www.w3.org/2000/svg"
  2187. width="16"
  2188. height="16"
  2189. fill="currentColor"
  2190. class="bi bi-phone-flip even"
  2191. viewBox="0 0 16 16"
  2192. >
  2193. <path
  2194. fill-rule="evenodd"
  2195. d="M11 1H5a1 1 0 0 0-1 1v6a.5.5 0 0 1-1 0V2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a.5.5 0 0 1-1 0V2a1 1 0 0 0-1-1Zm1 13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a.5.5 0 0 0-1 0v2a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2a.5.5 0 0 0-1 0v2ZM1.713 7.954a.5.5 0 1 0-.419-.908c-.347.16-.654.348-.882.57C.184 7.842 0 8.139 0 8.5c0 .546.408.94.823 1.201.44.278 1.043.51 1.745.696C3.978 10.773 5.898 11 8 11c.099 0 .197 0 .294-.002l-1.148 1.148a.5.5 0 0 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 1 0-.708.708l1.145 1.144L8 10c-2.04 0-3.87-.221-5.174-.569-.656-.175-1.151-.374-1.47-.575C1.012 8.639 1 8.506 1 8.5c0-.003 0-.059.112-.17.115-.112.31-.242.6-.376Zm12.993-.908a.5.5 0 0 0-.419.908c.292.134.486.264.6.377.113.11.113.166.113.169 0 .003 0 .065-.13.187-.132.122-.352.26-.677.4-.645.28-1.596.523-2.763.687a.5.5 0 0 0 .14.99c1.212-.17 2.26-.43 3.02-.758.38-.164.713-.357.96-.587.246-.229.45-.537.45-.919 0-.362-.184-.66-.412-.883-.228-.223-.535-.411-.882-.571ZM7.5 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1Z"
  2196. />
  2197. </svg>
  2199. <span class="even">CONECTADOS: 01/03</span>
  2200. </li>
  2201. </ul>
  2203. <section class="terms">
  2204. <header>
  2205. <h1>TERMOS DE USO</h1>
  2206. </header>
  2208. <p>
  2209. Ao comprar o acesso você aceita todos os nossos termos!
  2210. <br />
  2211. --------------------------------------------------------------
  2212. <br />
  2213. <br />
  2214. 1- Todo e qualquer conteúdo acessado através do aplicativo é de
  2215. responsabilidade do usuário! caso o usuário aproveitar-se de nosso
  2216. vpn para cometer qualquer ato ilegal, será de total responsabilidade
  2217. do usuário!
  2218. <br />
  2219. <br />
  2220. 2- Em casos de falha na conexão entre em contato com ovendedor que
  2221. lhe forneceu o acesso ao aplicativo!
  2222. <br />
  2223. <br />
  2224. 3- NÃO realizamos a prática de REEMBOLSO, então realize o teste
  2225. grátis antes de comprar!
  2226. <br />
  2227. <br />
  2228. 4- Caso ocorra queda no sinal da operadora os dias offline serão
  2229. adicionados de bônus. Peça esses dias ao seu vendedor! (Somente
  2230. quedas geral, quedas de forma especifica, não nos
  2231. responsabilizamos!)
  2232. <br />
  2233. <br />
  2234. 5- Caso houver alguma falhas de conexão por negligencia do usuário
  2235. em não saber configurar o aplicativo ou falha na rede móvel do
  2236. usuário não disponibilizamos dias bônus para estes casos. Porém
  2237. disponibilizamos suporte especializado para ajudar a solucionar
  2238. esses problemas. Então em caso de falha de conexão entre em contato
  2239. com seu vendedor!
  2240. <br />
  2241. <br />
  2242. 6- Método de pagamento é pré-pago, ou seja você paga para usar. Caso
  2243. desejar cancelar basta não renovar no próximo mês, que seu login
  2244. será deletado automaticamente. Não temos termo de fidelidade em
  2245. nossos serviços!
  2246. <br />
  2247. <br />
  2248. 7- Não temos vínculos algum com a operadora do seu chip. Vendemos
  2249. apenas a conexão SSH, que pode te liberar internet ilimitada através
  2250. da conexão realizada no aplicativo!
  2251. <br />
  2252. <br />
  2253. 8- Nosso produto é a conexão SSH, não vendemos internet, caso a
  2254. operadora que você está utilizando não estiver conectando, você pode
  2255. utilizar outra opção de operadora para realizar a conexão!
  2256. <br />
  2257. <br />
  2258. 9- Ao utilizar nossa vpn você navegara de forma anônima na internet,
  2259. dito isso você concorda em não acessar qualquer conteúdo ilegal ou
  2260. não permitidos em seu estado! Atenciosamente ITechNet_VPN
  2261. <br />
  2262. --------------------------------------------------------------
  2263. </p>
  2264. </section>
  2265. </section>
  2267. <section class="tools">
  2268. <header>
  2269. <h1>FERRAMENTAS</h1>
  2270. </header>
  2272. <section class="container-tools">
  2273. <button id="config-apn">
  2274. <svg
  2275. xmlns="http://www.w3.org/2000/svg"
  2276. width="16"
  2277. height="16"
  2278. fill="currentColor"
  2279. class="bi bi-tools"
  2280. viewBox="0 0 16 16"
  2281. >
  2282. <path
  2283. d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0Zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708ZM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11Z"
  2284. />
  2285. </svg>
  2286. <span>CONFIGURAR APN</span>
  2287. </button>
  2289. <button id="battery-optimization">
  2290. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
  2291. <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
  2292. </svg>
  2293. <span> ASSISTIR YOUTUBE</span>
  2294. </button>
  2296. <button id="speedtest">
  2297. <svg
  2298. xmlns="http://www.w3.org/2000/svg"
  2299. width="16"
  2300. height="16"
  2301. fill="currentColor"
  2302. class="bi bi-speedometer2"
  2303. viewBox="0 0 16 16"
  2304. >
  2305. <path
  2306. d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"
  2307. />
  2308. <path
  2309. fill-rule="evenodd"
  2310. d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"
  2311. />
  2312. </svg>
  2313. <span> SPEED TESTE </span>
  2314. </button>
  2316. <button id="clean-data-app">
  2317. <svg
  2318. xmlns="http://www.w3.org/2000/svg"
  2319. width="16"
  2320. height="16"
  2321. fill="currentColor"
  2322. class="bi bi-trash"
  2323. viewBox="0 0 16 16"
  2324. >
  2325. <path
  2326. 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"
  2327. />
  2328. <path
  2329. 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"
  2330. />
  2331. </svg>
  2332. <span>RESETAR/LIMPAR APP</span>
  2333. </button>
  2335. <button id="renew_acess">
  2336. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-fullscreen" viewBox="0 0 16 16">
  2337. <path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707zm4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707zm0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707zm-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707z"/>
  2338. </svg>
  2339. <span>ACESSAR PAINEL WEB</span>
  2340. </button>
  2341. </section>
  2342. </section>
  2344. <section class="renew-window">
  2345. <header>
  2346. <h1>⚠️INFORMAÇÕES IMPORTANTES⚠️</h1>
  2347. </header>
  2349. <section>
  2350. <div>
  2351. <h1>⚠️⚠️⚠️⚠️⚠️⚠️⚠️</h1>
  2353. <p>
  2354. ✅ MANTENHA SEU APLICATIVO SEMPRE ATUALIZADO PARA NÃO FICAR SEM INTERNET, DUVIDAS CHAMAR SEU VENDENDOR! ✅<br><br>⛔ PROIBIDO USAR TORRENT ⛔<br><br>⛔ PROIBIDO COMPARTILHAR OU ROTEAR A INTERNET 🌏<br><br>⏳ AGUARDE DE 5 A 15 SEGUNDOS EM CADA UMA CONEXÃO ATÉ CONECTAR ⏳<br><br>📲 USE ILIMITADO PARA NAVEGAR NO FACEBOOK, INSTAGRAM, YOUTUBE, TIK TOK, JOGOS ONLINE E ENTRE OUTRAS COISAS 🌏<br><br>📝 MANTENHA SUA INTERNET EM DIA PARA NÃO FICAR SEM ACESSO ✅<br><br>🥳 ITechNet_VPN CONECTANDO VOCÊ AO MUNDO A 5 ANOS 🔥<br>
  2355. </p>
  2356. </div>
  2357. </section>
  2358. </section>
  2360. <section class="modal-speedtest">
  2361. <header>
  2362. <h1>SPEED TESTE</h1>
  2363. <svg
  2364. xmlns="http://www.w3.org/2000/svg"
  2365. width="16"
  2366. height="16"
  2367. fill="currentColor"
  2368. class="bi bi-x-lg"
  2369. viewBox="0 0 16 16"
  2370. >
  2371. <path
  2372. 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"
  2373. />
  2374. </svg>
  2375. </header>
  2377. <section>
  2378. <iframe src=""></iframe>
  2379. </section>
  2380. </section>
  2382. <section class="modal-error-alert">
  2383. <header>
  2384. <h1>ERROR</h1>
  2386. <svg
  2387. xmlns="http://www.w3.org/2000/svg"
  2388. width="16"
  2389. height="16"
  2390. fill="currentColor"
  2391. class="bi bi-x-lg"
  2392. viewBox="0 0 16 16"
  2393. >
  2394. <path
  2395. 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"
  2396. />
  2397. </svg>
  2398. </header>
  2400. <section>
  2401. <h1>TITULO DO ERRO</h1>
  2402. <p></p>
  2403. </section>
  2404. </section>
  2406. <section class="modal-logs">
  2407. <header>
  2408. <h1>REGISTRO - É NECESSÁRIO AGUARDAR ALGUNS SEGUNDOS PARA CONECTAR</h1><br>
  2409. </header><br>
  2411. <p></p>
  2413. <section>
  2414. <button id="clean-data-logs">LIMPAR</button>
  2415. <button id="hidden-modal-logs">FECHAR</button>
  2416. </section>
  2417. </section>
  2419. <section class="controls">
  2420. <button
  2421. id="refresh-button"
  2422. type="button"
  2423. title="Atualizar as configurações do app"
  2424. >
  2425. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-arrow-down" viewBox="0 0 16 16">
  2426. <path fill-rule="evenodd" d="M7.646 10.854a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 9.293V5.5a.5.5 0 0 0-1 0v3.793L6.354 8.146a.5.5 0 1 0-.708.708l2 2z"/>
  2427. <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>
  2428. </svg>
  2429. </button>
  2431. <button id="renew" type="button" title="Renovar pagamento">
  2432. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
  2433. <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
  2434. </svg>
  2435. </button>
  2437. <button
  2438. id="backToHome"
  2439. type="button"
  2440. title="Voltar para a página inicial"
  2441. >
  2442. <svg
  2443. xmlns="http://www.w3.org/2000/svg"
  2444. width="16"
  2445. height="16"
  2446. fill="currentColor"
  2447. class="bi bi-house"
  2448. viewBox="0 0 16 16"
  2449. >
  2450. <path
  2451. 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"
  2452. />
  2453. </svg>
  2454. </button>
  2456. <button id="utilitys" type="button" title="utilidades">
  2457. <svg
  2458. xmlns="http://www.w3.org/2000/svg"
  2459. width="16"
  2460. height="16"
  2461. fill="currentColor"
  2462. class="bi bi-gear"
  2463. viewBox="0 0 16 16"
  2464. >
  2465. <path
  2466. d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"
  2467. />
  2468. <path
  2469. d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"
  2470. />
  2471. </svg>
  2472. </button>
  2474. <button id="profile-button" type="button" title="Detalhes do usuário">
  2475. <svg
  2476. xmlns="http://www.w3.org/2000/svg"
  2477. width="16"
  2478. height="16"
  2479. fill="currentColor"
  2480. class="bi bi-person"
  2481. viewBox="0 0 16 16"
  2482. >
  2483. <path
  2484. 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"
  2485. />
  2486. </svg>
  2487. </button>
  2488. </section>
  2489. </main>
  2491. <!-- VARIAVEIS DE CONSULTA -->
  2492. <script>
  2493. let dataCheckuser
  2494. let zIndexContainers
  2495. </script>
  2497. <!-- FUNÇÕES DO APP -->
  2498. <script>
  2499. const dtStatusBarHeight = () => DtGetStatusBarHeight.execute()
  2500. const dtNavHeight = () => DtGetNavigationBarHeight.execute()
  2502. const dtGetLogs = () => DtGetLogs.execute()
  2503. const dtClearLogs = () => DtClearLogs.execute()
  2505. const dtVpnState = () => DtGetVpnState.execute()
  2507. const dtTranslateText = (label) => DtTranslateText.execute(label)
  2509. const dtStartVpn = () => DtExecuteVpnStart.execute()
  2510. const dtStopVpn = () => DtExecuteVpnStop.execute()
  2512. const dtUpdate = () => DtStartAppUpdate.execute()
  2514. const dtAllConfigs = () => DtGetConfigs.execute()
  2515. const dtSetConfig = (id) => DtSetConfig.execute(id)
  2516. const dtGetDefaultConfig = () => DtGetDefaultConfig.execute()
  2518. const dtGetUsername = () => DtUsername.get()
  2519. const dtSetUsername = (username) => DtUsername.set(username)
  2520. const dtGetPassword = () => DtPassword.get()
  2521. const dtSetPassword = (password) => DtPassword.set(password)
  2522. const dtGetUUID = () => DtUuid.get()
  2523. const dtSetUUID = (uuid) => DtUuid.set(uuid)
  2525. const dtApnConfig = () => DtStartApnActivity.execute()
  2526. const dtBatteryOptimization = () => DtIgnoreBatteryOptimizations.execute()
  2527. const dtCleanApp = () => DtCleanApp.execute()
  2529. const dtGetNetworkName = () => Android.getNetworkName()
  2530. const dtGetNetworkLocalIp = () => Android.getLocalIP()
  2531. </script>
  2533. <!-- FUNÇÕES PARA O APP -->
  2534. <script>
  2535. const dtVpnStateListener = (state) => {
  2536. const stateVpn = vpnState(state)
  2538. vpnStatus.html(stateVpn)
  2539. }
  2541. const dtOnNewLogListener = () => writeModalLogger()
  2543. const dtConfigClickListener = () => {
  2544. const user = dtGetUsername()
  2545. const pass = dtGetPassword()
  2546. const value = areaCarrierSelector()
  2548. CarrierTextValue.html(value)
  2550. inputUser.attr({
  2551. placeholder: inputUserPlaceholder(),
  2552. value: inputUserValue(),
  2553. })
  2554. inputPassword.attr({
  2555. placeholder: inputPasswordPlaceholder(),
  2556. value: inputPasswordValue(),
  2557. })
  2558. inputUUID.attr({
  2559. value: inputUUIDValue(),
  2560. placeholder: inputUUIDPlaceholder(),
  2561. })
  2563. toggleInput()
  2564. }
  2566. const dtCheckUserModelListener = (model) => {
  2567. dataCheckuser = model
  2569. writeMainCheckuser(dataCheckuser)
  2570. writeProfileCheckuser(dataCheckuser)
  2572. loadingContainer.toggleClass("show")
  2574. mainCheckuser.addClass("show")
  2575. }
  2577. const dtCheckUserStartedListener = () => {
  2578. loadingContainer.addClass("show")
  2579. }
  2581. const dtMessageErrorListener = (model) => writeModalError(model)
  2582. </script>
  2584. <!-- HELPERS -->
  2585. <script>
  2586. const createSvgIcon = (iconPath, Class = "") => {
  2587. const svg = document.createElementNS(
  2588. "http://www.w3.org/2000/svg",
  2589. "svg"
  2590. )
  2591. svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  2592. svg.setAttribute("width", "16")
  2593. svg.setAttribute("height", "16")
  2594. svg.setAttribute("fill", "currentColor")
  2595. svg.setAttribute("viewBox", "0 0 16 16")
  2596. svg.setAttribute("class", Class)
  2598. const path = document.createElementNS(
  2599. "http://www.w3.org/2000/svg",
  2600. "path"
  2601. )
  2602. path.setAttribute("d", iconPath)
  2604. svg.appendChild(path)
  2605. return svg
  2606. }
  2608. const createListItem = (iconPath, Class = "", text) => {
  2609. const li = document.createElement("li")
  2610. const svg = createSvgIcon(iconPath, Class)
  2611. const span = document.createElement("span")
  2612. span.setAttribute("class", Class)
  2613. span.innerHTML = text
  2614. li.appendChild(svg)
  2615. li.appendChild(span)
  2616. return li
  2617. }
  2618. </script>
  2620. <!-- FUNÇÕES DO LAYOUT -->
  2621. <script>
  2622. const vpnState = (state) => {
  2623. const stateLabel = state || dtVpnState()
  2625. switch (stateLabel) {
  2626. case "DISCONNECTED":
  2627. writeStartStopVpnButton(dtTranslateText("LBL_BTN_START"))
  2628. return disconnected()
  2629. case "CONNECTING":
  2630. writeStartStopVpnButton(dtTranslateText("LBL_BTN_STOP"))
  2631. return connecting()
  2632. case "CONNECTED":
  2633. writeStartStopVpnButton(dtTranslateText("LBL_BTN_STOP"))
  2634. return connected()
  2635. case "STOPPING":
  2636. writeStartStopVpnButton(dtTranslateText("LBL_BTN_STOPPING"))
  2637. return stopping()
  2638. case "NO_NETWORK":
  2639. writeStartStopVpnButton(dtTranslateText("LBL_BTN_STOP"))
  2640. return noNetwork()
  2641. case "AUTH":
  2642. writeStartStopVpnButton(dtTranslateText("LBL_BTN_STOP"))
  2643. return auth()
  2644. case "AUTH_FAILED":
  2645. writeStartStopVpnButton(dtTranslateText("LBL_BTN_STOP"))
  2646. return authFailed()
  2647. default:
  2648. return "Não foi possível obter o status da conexão"
  2649. }
  2650. }
  2652. const writeNetworkStatus = () => {
  2653. let span = "<span>Localizando rede...</span>"
  2655. setInterval(() => {
  2656. if (dtGetNetworkName() && dtGetNetworkLocalIp()) {
  2657. const carrierName = `${dtGetNetworkName()}`
  2658. const localIP = `${dtGetNetworkLocalIp()}`
  2660. span = `<span>${carrierName}: ${localIP}</span>`
  2662. networkStatus.html(span)
  2663. } else {
  2664. span = `<span>Não foi possível carregar informações da rede</span>`
  2665. }
  2666. }, 500)
  2668. return span
  2669. }
  2671. const allConfigs = () => {
  2672. const ListContainer = document.querySelector("section.list-container")
  2673. ListContainer.innerHTML = ""
  2675. const configs = JSON.parse(dtAllConfigs())
  2676. configs.sort((a, b) => a.sorter - b.sorter)
  2677. configs.forEach((item) =>
  2678. item.items.sort((a, b) => a.sorter - b.sorter)
  2679. )
  2681. configs.forEach((category) => {
  2682. const defaultColor = category.color
  2683. const categoryColor = `#${defaultColor.substr(
  2684. 3
  2685. )}${defaultColor.substr(1, 2)}`
  2687. document.documentElement.style.setProperty(
  2688. "--cor-de-fundo-do-header-da-categoria",
  2689. categoryColor
  2690. )
  2691. document.documentElement.style.setProperty(
  2692. "--cor-de-fundo-do-item-da-configuracao",
  2693. categoryColor
  2694. )
  2696. const div = document.createElement("div")
  2697. const header = document.createElement("header")
  2698. const h1 = document.createElement("h1")
  2699. const svg = document.createElementNS(
  2700. "http://www.w3.org/2000/svg",
  2701. "svg"
  2702. )
  2703. const path = document.createElementNS(
  2704. "http://www.w3.org/2000/svg",
  2705. "path"
  2706. )
  2707. const ul = document.createElement("ul")
  2709. div.classList.add("category")
  2710. ul.classList.add("configs")
  2712. h1.textContent = category.name
  2714. svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  2715. svg.setAttribute("width", "16")
  2716. svg.setAttribute("height", "16")
  2717. svg.setAttribute("fill", "currentColor")
  2718. svg.setAttribute("class", "bi bi-caret-right")
  2719. svg.setAttribute("viewBox", "0 0 16 16")
  2721. path.setAttribute(
  2722. "d",
  2723. "M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753"
  2724. )
  2726. svg.appendChild(path)
  2727. header.appendChild(h1)
  2728. header.appendChild(svg)
  2729. div.appendChild(header)
  2731. category.items.forEach((item) => {
  2732. const li = document.createElement("li")
  2733. const img = document.createElement("img")
  2734. const h1Item = document.createElement("h1")
  2735. const pItem = document.createElement("p")
  2736. const pMode = document.createElement("p")
  2737. const divLogo = document.createElement("div")
  2738. const divDescription = document.createElement("div")
  2739. const divMode = document.createElement("div")
  2741. divLogo.classList.add("logo")
  2742. divDescription.classList.add("description")
  2743. divMode.classList.add("mode")
  2745. h1Item.textContent = item.name
  2746. pItem.textContent = item.description
  2747. pMode.textContent = item.mode
  2749. img.setAttribute("src", item.icon)
  2751. divLogo.appendChild(img)
  2752. divDescription.appendChild(h1Item)
  2753. divDescription.appendChild(pItem)
  2754. divMode.appendChild(pMode)
  2756. li.appendChild(divLogo)
  2757. li.appendChild(divDescription)
  2758. li.appendChild(divMode)
  2760. ul.appendChild(li)
  2761. div.appendChild(ul)
  2763. li.addEventListener("click", () => {
  2764. dtSetConfig(item.id)
  2765. listOfCarriers.toggleClass("active")
  2766. })
  2767. })
  2769. header.addEventListener("click", () => {
  2770. if (ul.offsetHeight <= 0) {
  2771. ul.style.maxHeight = `${ul.scrollHeight}px`
  2772. svg.style.transform = "rotate(90deg)"
  2773. } else {
  2774. ul.style.maxHeight = "0px"
  2775. svg.style.transform = "rotate(0deg)"
  2776. }
  2777. })
  2779. ListContainer.appendChild(div)
  2780. })
  2781. }
  2783. const showPassword = () => {
  2784. const inputPassword = document.querySelector("#inputPassword")
  2786. if (inputPassword.type === "password") {
  2787. inputPassword.type = "text"
  2788. eyeHidden.toggleClass(".eye-none").style({ display: "none" })
  2789. eyeShow.style({ display: "block" })
  2790. } else {
  2791. inputPassword.type = "password"
  2792. eyeShow.toggleClass(".eye-none").style({ display: "none" })
  2793. eyeHidden.toggleClass(".eye-none").style({ display: "block" })
  2794. }
  2795. }
  2797. const startStopVpn = () => {
  2798. const state = dtVpnState()
  2800. state === "CONNECTED" ? dtStopVpn() : dtStartVpn()
  2801. }
  2803. const writeStartStopVpnButton = (status) => {
  2804. buttonStartStopVpnValue.html(status)
  2805. }
  2807. const writeMainCheckuser = (model) => {
  2808. const data = JSON.parse(model)
  2810. const ul = document.querySelector(
  2811. "section.main-checkuser section.container-content-checkuser ul"
  2812. )
  2814. const username = createListItem(
  2815. "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",
  2816. "",
  2817. `NOME DE USUÁRIO: ${data.username}`
  2818. )
  2820. const expiration = createListItem(
  2821. 'M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/><path d="M12 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-5 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm2-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-5 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
  2822. "",
  2823. `EXPIRAÇÃO: ${data.expiration_date}`
  2824. )
  2826. const remainingDays = createListItem(
  2827. "M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z",
  2828. "",
  2829. `DIAS RESTANTES: ${data.expiration_days}`
  2830. )
  2832. const connecteds = createListItem(
  2833. "M11 1H5a1 1 0 0 0-1 1v6a.5.5 0 0 1-1 0V2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a.5.5 0 0 1-1 0V2a1 1 0 0 0-1-1Zm1 13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a.5.5 0 0 0-1 0v2a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2a.5.5 0 0 0-1 0v2ZM1.713 7.954a.5.5 0 1 0-.419-.908c-.347.16-.654.348-.882.57C.184 7.842 0 8.139 0 8.5c0 .546.408.94.823 1.201.44.278 1.043.51 1.745.696C3.978 10.773 5.898 11 8 11c.099 0 .197 0 .294-.002l-1.148 1.148a.5.5 0 0 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 1 0-.708.708l1.145 1.144L8 10c-2.04 0-3.87-.221-5.174-.569-.656-.175-1.151-.374-1.47-.575C1.012 8.639 1 8.506 1 8.5c0-.003 0-.059.112-.17.115-.112.31-.242.6-.376Zm12.993-.908a.5.5 0 0 0-.419.908c.292.134.486.264.6.377.113.11.113.166.113.169 0 .003 0 .065-.13.187-.132.122-.352.26-.677.4-.645.28-1.596.523-2.763.687a.5.5 0 0 0 .14.99c1.212-.17 2.26-.43 3.02-.758.38-.164.713-.357.96-.587.246-.229.45-.537.45-.919 0-.362-.184-.66-.412-.883-.228-.223-.535-.411-.882-.571ZM7.5 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1Z",
  2834. "",
  2835. `CONECTADOS: ${data.count_connections}/${data.limit_connections}`
  2836. )
  2838. ul.innerHTML =
  2839. username.outerHTML +
  2840. expiration.outerHTML +
  2841. remainingDays.outerHTML +
  2842. connecteds.outerHTML
  2843. }
  2845. const showProfile = (model) => {
  2846. hiddenAll()
  2847. const data = model
  2849. const main = document.querySelector("section.profile-checkuser")
  2850. const zIndexMain = window
  2851. .getComputedStyle(main)
  2852. .getPropertyValue("z-index")
  2854. if (data !== undefined) {
  2855. notViewUser.removeClass("show")
  2856. viewUser.addClass("show")
  2857. mainProfile.addClass("show")
  2858. } else {
  2859. viewUser.removeClass("show")
  2860. notViewUser.addClass("show")
  2861. mainProfile.addClass("show")
  2862. }
  2863. }
  2864. const hiddenProfile = () => {
  2865. mainProfile.removeClass("show")
  2866. mainProfile.style({ "z-index": 0 })
  2867. }
  2869. const writeProfileCheckuser = (model) => {
  2870. const data = JSON.parse(model)
  2872. const username = createListItem(
  2873. "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",
  2874. "",
  2875. `NOME DE USUÁRIO: ${data.username}`
  2876. )
  2878. const expiration = createListItem(
  2879. 'M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/><path d="M12 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-5 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm2-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-5 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
  2880. "even",
  2881. `EXPIRAÇÃO: ${data.expiration_date}`
  2882. )
  2884. const remainingDays = createListItem(
  2885. "M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z",
  2886. "",
  2887. `DIAS RESTANTES: ${data.expiration_days}`
  2888. )
  2890. const connecteds = createListItem(
  2891. "M11 1H5a1 1 0 0 0-1 1v6a.5.5 0 0 1-1 0V2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a.5.5 0 0 1-1 0V2a1 1 0 0 0-1-1Zm1 13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a.5.5 0 0 0-1 0v2a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2a.5.5 0 0 0-1 0v2ZM1.713 7.954a.5.5 0 1 0-.419-.908c-.347.16-.654.348-.882.57C.184 7.842 0 8.139 0 8.5c0 .546.408.94.823 1.201.44.278 1.043.51 1.745.696C3.978 10.773 5.898 11 8 11c.099 0 .197 0 .294-.002l-1.148 1.148a.5.5 0 0 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 1 0-.708.708l1.145 1.144L8 10c-2.04 0-3.87-.221-5.174-.569-.656-.175-1.151-.374-1.47-.575C1.012 8.639 1 8.506 1 8.5c0-.003 0-.059.112-.17.115-.112.31-.242.6-.376Zm12.993-.908a.5.5 0 0 0-.419.908c.292.134.486.264.6.377.113.11.113.166.113.169 0 .003 0 .065-.13.187-.132.122-.352.26-.677.4-.645.28-1.596.523-2.763.687a.5.5 0 0 0 .14.99c1.212-.17 2.26-.43 3.02-.758.38-.164.713-.357.96-.587.246-.229.45-.537.45-.919 0-.362-.184-.66-.412-.883-.228-.223-.535-.411-.882-.571ZM7.5 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1Z",
  2892. "even",
  2893. `CONECTADOS: ${data.count_connections}/${data.limit_connections}`
  2894. )
  2896. viewUser.html(
  2897. username.outerHTML +
  2898. expiration.outerHTML +
  2899. remainingDays.outerHTML +
  2900. connecteds.outerHTML
  2901. )
  2902. }
  2904. const hiddenLoadContainer = () => {
  2905. loadingContainer.removeClass("show")
  2906. }
  2908. const showMainTools = () => {
  2909. hiddenAll()
  2910. MainTools.style({ "z-index": 1 })
  2911. MainTools.addClass("show")
  2912. }
  2913. const hiddenMainTools = () => {
  2914. MainTools.style({ "z-index": 0 })
  2915. MainTools.removeClass("show")
  2916. }
  2918. const showModalSpeedtest = () => {
  2919. ModalSpeedtest.addClass("show")
  2920. IframeModalSpeedtest.attr({ src: "https://fast.com/pt/" })
  2921. }
  2922. const hiddenModalSpeedtest = () => {
  2923. ModalSpeedtest.removeClass("show")
  2924. IframeModalSpeedtest.attr({ src: "" })
  2925. }
  2927. const writeModalError = (model) => {
  2928. const data = JSON.parse(model)
  2930. const h1 = `<h1>${data.title}</h1>`
  2931. const p = `<p>${data.content}</p>`
  2933. ContentModalError.html(h1 + p)
  2935. hiddenAll()
  2936. showModalError()
  2937. }
  2938. const showModalError = () => {
  2939. ModalError.addClass("show")
  2940. }
  2941. const hiddenModalError = () => {
  2942. ModalError.removeClass("show")
  2943. }
  2945. const writeModalLogger = () => {
  2946. const data = JSON.parse(dtGetLogs())
  2947. const p = document.querySelector("section.modal-logs p")
  2949. let content = ""
  2951. data.forEach((item) => {
  2952. content += `${Object.keys(item)} ${item[Object.keys(item)]} <br>`
  2953. })
  2955. ModalLoggerContent.html(content)
  2956. p.scrollTop = p.scrollHeight
  2958. return content
  2959. }
  2960. const showModalLogger = () => {
  2961. ModalLogger.addClass("show")
  2962. }
  2963. const hiddenModalRegister = () => {
  2964. ModalLogger.removeClass("show")
  2965. }
  2967. const showRenew = () => {
  2968. hiddenAll()
  2969. MainRenew.addClass("show")
  2970. }
  2971. const hiddenRenew = () => {
  2972. MainRenew.removeClass("show")
  2973. }
  2975. const hiddenAll = () => {
  2976. hiddenProfile()
  2977. hiddenMainTools()
  2978. hiddenModalSpeedtest()
  2979. hiddenModalError()
  2980. hiddenModalRegister()
  2981. hiddenRenew()
  2982. }
  2983. </script>
  2985. <!-- ESTADOS DE CONEXÃO -->
  2986. <script>
  2987. const disconnected = () => {
  2988. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-outlet" viewBox="0 0 16 16"><path d="M3.34 2.994c.275-.338.68-.494 1.074-.494h7.172c.393 0 .798.156 1.074.494.578.708 1.84 2.534 1.84 5.006 0 2.472-1.262 4.297-1.84 5.006-.276.338-.68.494-1.074.494H4.414c-.394 0-.799-.156-1.074-.494C2.762 12.297 1.5 10.472 1.5 8c0-2.472 1.262-4.297 1.84-5.006zm1.074.506a.376.376 0 0 0-.299.126C3.599 4.259 2.5 5.863 2.5 8c0 2.137 1.099 3.74 1.615 4.374.06.073.163.126.3.126h7.17c.137 0 .24-.053.3-.126.516-.633 1.615-2.237 1.615-4.374 0-2.137-1.099-3.74-1.615-4.374a.376.376 0 0 0-.3-.126h-7.17z"/><path d="M6 5.5a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zM7 10v1h2v-1a1 1 0 0 0-2 0z"/></svg>`
  2989. const text = `<span>${dtTranslateText("LBL_STATE_DISCONNECTED")}</span>`
  2991. return icon + text
  2992. }
  2994. const connecting = () => {
  2995. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plug" viewBox="0 0 16 16"><path d="M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0zM5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4H5z"/></svg>`
  2996. const text = `<span>${dtTranslateText("LBL_STATE_CONNECTING")}</span>`
  2998. return icon + text
  2999. }
  3001. const connected = () => {
  3002. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plugin" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/></svg>`
  3003. const text = `<span>${dtTranslateText("LBL_STATE_CONNECTED")}</span>`
  3005. return icon + text
  3006. }
  3008. const stopping = () => {
  3009. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stop" viewBox="0 0 16 16"><path d="M3.5 5A1.5 1.5 0 0 1 5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5zM5 4.5a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5V5a.5.5 0 0 0-.5-.5H5z"/></svg>`
  3010. const text = `<span>${dtTranslateText("LBL_STATE_STOPPING")}</span>`
  3012. return icon + text
  3013. }
  3015. const noNetwork = () => {
  3016. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wifi-off" viewBox="0 0 16 16"><path d="M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z"/></svg>`
  3017. const text = `<span>${dtTranslateText("LBL_STATE_NO_NETWORK")}</span>`
  3019. return icon + text
  3020. }
  3022. const auth = () => {
  3023. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-lock" viewBox="0 0 16 16"><path 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 4Zm0 5.996V14H3s-1 0-1-1 1-4 6-4c.564 0 1.077.038 1.544.107a4.524 4.524 0 0 0-.803.918A10.46 10.46 0 0 0 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h5ZM9 13a1 1 0 0 1 1-1v-1a2 2 0 1 1 4 0v1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2Zm3-3a1 1 0 0 0-1 1v1h2v-1a1 1 0 0 0-1-1Z"/></svg>`
  3024. const text = `<span>${dtTranslateText("LBL_STATE_AUTH")}</span>`
  3026. return icon + text
  3027. }
  3029. const authFailed = () => {
  3030. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-slash" viewBox="0 0 16 16"><path d="M13.879 10.414a2.501 2.501 0 0 0-3.465 3.465l3.465-3.465Zm.707.707-3.465 3.465a2.501 2.501 0 0 0 3.465-3.465Zm-4.56-1.096a3.5 3.5 0 1 1 4.949 4.95 3.5 3.5 0 0 1-4.95-4.95ZM11 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"/></svg>`
  3031. const text = `<span>${dtTranslateText("LBL_STATE_AUTH_FAILED")}</span>`
  3033. return icon + text
  3034. }
  3035. </script>
  3037. <!-- VALOR DE EXIBIÇÃO DO CAMPO DE SELECIONAR OPERADORA -->
  3038. <script>
  3039. const areaCarrierSelector = () => {
  3040. const data = dtGetDefaultConfig()
  3042. if (data !== undefined) {
  3043. return JSON.parse(data).name
  3044. } else {
  3045. return dtTranslateText("LBL_CHOOSE_CONFIG")
  3046. }
  3047. }
  3048. </script>
  3050. <!-- VALOR DE EXIBIÇÃO DO INPUT USUÁRIO DO USUÁRIO -->
  3051. <script>
  3052. const inputUserPlaceholder = () => dtTranslateText("LBL_USERNAME")
  3053. const inputUserValue = () => {
  3054. if (dtGetUsername()) {
  3055. return dtGetUsername()
  3056. } else {
  3057. return ""
  3058. }
  3059. }
  3060. </script>
  3062. <!-- VALOR DE EXIBIÇÃO DO INPUT DA SENHA DO USUÁRIO -->
  3063. <script>
  3064. const inputPasswordPlaceholder = () => dtTranslateText("LBL_PASSWORD")
  3065. const inputPasswordValue = () => {
  3066. if (dtGetPassword()) {
  3067. return dtGetPassword()
  3068. } else {
  3069. return ""
  3070. }
  3071. }
  3072. </script>
  3074. <!-- VALOR DE EXIBIÇÃO DO INPUT DA SENHA DO USUÁRIO -->
  3075. <script>
  3076. const inputUUIDPlaceholder = () => dtTranslateText("LBL_UUID")
  3077. const inputUUIDValue = () => {
  3078. if (dtGetUUID()) {
  3079. return dtGetUUID()
  3080. } else {
  3081. return ""
  3082. }
  3083. }
  3084. </script>
  3086. <!-- DOM WRAPPER -->
  3087. <script>
  3088. const Dom = (selector) => {
  3089. const _elements = document.querySelectorAll(selector)
  3091. const wrapper = {
  3092. on(listeners) {
  3093. for (const [event, listener] of Object.entries(listeners)) {
  3094. _elements.forEach((element) => {
  3095. element.addEventListener(event, listener)
  3096. })
  3097. }
  3099. return wrapper
  3100. },
  3101. addClass: (...tokens) => {
  3102. _elements.forEach((element) => {
  3103. element.classList.add(...tokens)
  3104. })
  3106. return wrapper
  3107. },
  3108. removeClass: (...tokens) => {
  3109. _elements.forEach((element) => {
  3110. element.classList.remove(...tokens)
  3111. })
  3113. return wrapper
  3114. },
  3115. toggleClass: (token, force) => {
  3116. _elements.forEach((element) => {
  3117. element.classList.toggle(token, force)
  3118. })
  3120. return wrapper
  3121. },
  3122. style(styles) {
  3123. for (const [property, value] of Object.entries(styles)) {
  3124. console.log(value)
  3125. _elements.forEach((element) => {
  3126. element.style[property] = value
  3127. })
  3128. }
  3130. return wrapper
  3131. },
  3132. attr(attrs) {
  3133. for (const [name, value] of Object.entries(attrs)) {
  3134. _elements.forEach((element) => element.setAttribute(name, value))
  3135. }
  3137. return wrapper
  3138. },
  3139. html(value) {
  3140. _elements.forEach((element) => (element.innerHTML = value))
  3141. return wrapper
  3142. },
  3143. }
  3145. return wrapper
  3146. }
  3147. </script>
  3149. <!-- VÁRIAVIES -->
  3150. <script>
  3151. const main = Dom("main")
  3153. const vpnStatus = Dom("section.vpnStatus")
  3155. const networkStatus = Dom("section.local-ip")
  3157. const carrierSelector = Dom("div.carrierSelector")
  3158. const listOfCarriers = Dom("section.listOfCarriers")
  3159. const closeModalCarriers = Dom("#close-modal-configs")
  3160. const CarrierCategoryContainer = Dom("section.list-container")
  3161. const CarrierTextValue = Dom("div.carrierSelector span")
  3163. const buttonControl = Dom("section.controls")
  3164. const refreshButton = Dom("#refresh-button")
  3165. const renewButton = Dom("#renew")
  3166. const backToHome = Dom("#backToHome")
  3167. const ToolsButton = Dom("#utilitys")
  3168. const profileButton = Dom("#profile-button")
  3170. const ContainerInputUser = Dom("#container-user-input")
  3171. const ContainerInputPassword = Dom("#container-password-input")
  3172. const ContainerInputUUID = Dom("#container-uuid-input")
  3174. const inputUser = Dom("#inputUser")
  3175. const inputPassword = Dom("#inputPassword")
  3176. const inputUUID = Dom("#uuid-input")
  3178. const buttonStartStopVpn = Dom("#startStopVpn")
  3179. const buttonLogs = Dom("#buttonLogs")
  3180. const buttonStartStopVpnValue = Dom("#startStopVpnButtonValue")
  3182. const mainCheckuser = Dom("section.main-checkuser")
  3183. const mainCheckuserClose = Dom("section.main-checkuser header svg")
  3184. const mainCheckuserContent = Dom(
  3185. "section.main-checkuser section.container-content-checkuser"
  3186. )
  3188. const loadingContainer = Dom("section.loading")
  3189. const loadingContainerClose = Dom("section.loading header svg")
  3191. const mainProfile = Dom("section.profile-checkuser")
  3192. const notViewUser = Dom("#not-profile-user")
  3193. const viewUser = Dom("#list-profile")
  3195. const MainTools = Dom("section.tools")
  3196. const ConfigApnButton = Dom("#config-apn")
  3197. const BatteryOptimizeButton = Dom("#battery-optimization")
  3198. const SpeedtestButton = Dom("#speedtest")
  3199. const ClearDataAppButton = Dom("#clean-data-app")
  3201. const MainRenew = Dom("section.renew-window")
  3203. const ModalSpeedtest = Dom("section.modal-speedtest")
  3204. const CloseModalSpeedtest = Dom("section.modal-speedtest header svg")
  3205. const IframeModalSpeedtest = Dom("section.modal-speedtest section iframe")
  3207. const ModalError = Dom("section.modal-error-alert")
  3208. const CloseModalError = Dom("section.modal-error-alert header svg")
  3209. const ContentModalError = Dom("section.modal-error-alert section")
  3211. const ModalLogger = Dom("section.modal-logs")
  3212. const CloseModalLogger = Dom("#hidden-modal-logs")
  3213. const ModalLoggerContent = Dom("section.modal-logs p")
  3214. const CleanLoggerContent = Dom("#clean-data-logs")
  3216. const eyeHidden = Dom("svg.eye-hidden")
  3217. const eyeShow = Dom("svg.eye-show")
  3219. const ButtonRenew = Dom("#renew_acess")
  3220. </script>
  3222. <!-- AÇÕES -->
  3223. <script>
  3224. main.style({ padding: `${dtStatusBarHeight() + 100}px 0px 0px 0px` })
  3225. mainProfile.style({
  3226. padding: `${dtStatusBarHeight() + 10}px 0px ${
  3227. dtNavHeight() + 90
  3228. }px 0px`,
  3229. })
  3231. MainTools.style({
  3232. padding: `${dtStatusBarHeight() + 10}px 0px ${
  3233. dtNavHeight() + 90
  3234. }px 0px`,
  3235. })
  3237. MainRenew.style({
  3238. padding: `${dtStatusBarHeight() + 10}px 0px ${
  3239. dtNavHeight() + 90
  3240. }px 0px`,
  3241. })
  3243. ModalLogger.style({
  3244. top: `${dtStatusBarHeight() + 95}px`,
  3245. bottom: `${dtNavHeight() + 95}px`,
  3246. })
  3248. vpnStatus.html(vpnState())
  3249. networkStatus.html(writeNetworkStatus())
  3251. carrierSelector.on({
  3252. click: () => {
  3253. allConfigs()
  3254. listOfCarriers.toggleClass("active")
  3255. },
  3256. })
  3257. closeModalCarriers.on({
  3258. click: () => listOfCarriers.toggleClass("active"),
  3259. })
  3260. CarrierTextValue.html(areaCarrierSelector())
  3262. inputUser.on({ input: (e) => dtSetUsername(e.target.value) })
  3263. inputPassword.on({ input: (e) => dtSetPassword(e.target.value) })
  3264. inputUUID.on({ input: (e) => dtSetUUID(e.target.value) })
  3265. eyeHidden.on({ click: () => showPassword() })
  3266. eyeShow.on({ click: () => showPassword() })
  3268. inputUser.attr({
  3269. placeholder: inputUserPlaceholder(),
  3270. value: inputUserValue(),
  3271. })
  3272. inputPassword.attr({
  3273. placeholder: inputPasswordPlaceholder(),
  3274. value: inputPasswordValue(),
  3275. })
  3276. inputUUID.attr({
  3277. value: inputUUIDValue(),
  3278. placeholder: inputUUIDPlaceholder(),
  3279. })
  3281. buttonControl.style({ bottom: `${dtNavHeight() + 10}px` })
  3282. refreshButton.on({ click: () => dtUpdate() })
  3283. renewButton.on({ click: () => showRenew() })
  3284. backToHome.on({
  3285. click: () => {
  3286. hiddenAll()
  3287. },
  3288. })
  3289. ToolsButton.on({ click: () => showMainTools() })
  3290. profileButton.on({ click: () => showProfile(dataCheckuser) })
  3292. buttonStartStopVpn.on({ click: () => startStopVpn() })
  3293. buttonLogs.on({ click: () => showModalLogger() })
  3295. loadingContainerClose.on({ click: () => hiddenLoadContainer() })
  3297. mainCheckuserClose.on({ click: () => mainCheckuser.toggleClass("show") })
  3299. ConfigApnButton.on({ click: () => dtApnConfig() })
  3300. BatteryOptimizeButton.on({ click: () => DtStartWebViewActivity.execute('http://youtube.com')})
  3301. SpeedtestButton.on({ click: () => showModalSpeedtest() })
  3302. CloseModalSpeedtest.on({ click: () => hiddenModalSpeedtest() })
  3303. ClearDataAppButton.on({ click: () => dtCleanApp() })
  3305. ButtonRenew.on({click: () => DtStartWebViewActivity.execute('https://painel.space/renovar.php')})
  3307. CloseModalError.on({ click: () => hiddenModalError() })
  3309. ModalLoggerContent.html(writeModalLogger())
  3310. CleanLoggerContent.on({ click: () => dtClearLogs() })
  3311. CloseModalLogger.on({ click: () => hiddenModalRegister() })
  3313. const checkV2ray = () => {
  3314. const data = JSON.parse(dtGetDefaultConfig())
  3316. const isV2ray = data?.mode?.toLowerCase()?.startsWith("v2ray")
  3318. if (!dtGetDefaultConfig()) {
  3319. return false
  3320. } else if (isV2ray && data?.auth?.v2ray_uuid) {
  3321. return "have_uuid"
  3322. } else if (isV2ray && !data?.auth?.v2ray_uuid) {
  3323. return "not_have_uuid"
  3324. } else {
  3325. return false
  3326. }
  3327. }
  3329. const toggleInput = () => {
  3330. if (checkV2ray() === "not_have_uuid") {
  3331. ContainerInputUser.style({ display: "none" })
  3333. ContainerInputPassword.style({ display: "none" })
  3335. ContainerInputUUID.style({ display: "flex" })
  3336. } else if (checkV2ray() === "have_uuid") {
  3337. ContainerInputUser.style({ display: "none" })
  3339. ContainerInputPassword.style({ display: "none" })
  3341. ContainerInputUUID.style({ display: "none" })
  3342. } else {
  3343. ContainerInputUser.style({ display: "flex" })
  3345. ContainerInputPassword.style({ display: "flex" })
  3347. ContainerInputUUID.style({ display: "none" })
  3348. }
  3349. }
  3351. toggleInput()
  3352. </script>
  3353. </body>
  3354. </html>
comments powered by Disqus