Tema dt mod

SUBMITTED BY: Buganet

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

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

FORMAT: Text only

SIZE: 81.8 kB

History Raw Download

HITS: 2405

Report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Document</title>
  6. <meta charset="UTF-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  9. <style>
  10. :root {
  11. --background-color-main: #171717;
  12. --background-image-main: url('');
  14. --header-container-color: linear-gradient(to right, #f2295b, #712de0);
  15. --background-container-color: #171717;
  17. --border-color: linear-gradient(to right, #f2295b, #712de0);
  18. --border-loading-color: #ffffff;
  20. --text-color: #ffffff;
  21. --text-alert-color: #ff0000;
  23. --icons-color: #ffffff;
  25. --background-buttons-color: linear-gradient(to right, #712de0, #f2295b);
  27. --margem-do-topo-do-modal: 10px;
  28. --margem-do-bottom-do-modal: 10px;
  29. }
  31. * {
  32. margin: 0;
  33. padding: 0;
  34. box-sizing: border-box;
  35. }
  37. html,
  38. body,
  39. main {
  40. width: 100%;
  41. height: 100%;
  42. }
  44. body {
  45. background-color: var(--background-color-main);
  46. background-image: var(--background-image-main);
  47. background-position: center;
  48. background-repeat: no-repeat;
  49. background-size: cover;
  50. }
  52. main {
  53. display: flex;
  54. flex-direction: column;
  55. align-items: center;
  56. gap: 20px;
  58. position: relative;
  60. transition: padding-bottom 0.3s ease 0.2s;
  62. overflow: hidden;
  63. }
  65. .container-logo {
  66. width: 95%;
  67. height: auto;
  69. display: flex;
  70. justify-content: center;
  71. align-items: center;
  73. margin-top: 40px;
  75. padding: 5px 3px;
  76. }
  78. .container-logo img {
  79. width: 50%;
  80. max-width: 300px;
  81. }
  83. .container {
  84. width: 95%;
  85. max-width: 450px;
  86. height: auto;
  88. position: relative;
  90. border-radius: 5px;
  92. background: transparent;
  93. }
  95. .container header {
  96. width: 95%;
  97. height: 45px;
  99. display: flex;
  100. align-items: center;
  101. gap: 10px;
  103. border-top-left-radius: 5px;
  104. border-top-right-radius: 5px;
  106. margin: auto;
  107. padding: 5px 10px;
  109. background: #171717;
  110. }
  112. .container header button:first-child {
  113. visibility: hidden;
  114. }
  116. .container header button {
  117. flex: 1;
  118. height: 100%;
  120. border: 0;
  121. border-radius: 20px;
  123. color: var(--text-color);
  124. font-family: 'Roboto', sans-serif;
  126. background: var(--background-buttons-color);
  127. }
  129. .container form {
  130. width: 100%;
  131. height: calc(100% - 45px);
  133. display: flex;
  134. flex-direction: column;
  135. align-items: center;
  136. gap: 10px;
  138. margin: 10px 0px;
  139. padding: 0px 3px;
  140. }
  142. .container form div {
  143. width: 95%;
  144. height: 45px;
  146. display: flex;
  147. align-items: center;
  149. border-radius: 50px;
  151. padding: 0px 10px;
  153. background: #000;
  154. }
  156. .container form div#uuid-container {
  157. display: none;
  158. }
  160. .container form div svg {
  161. width: 38px;
  162. height: 100%;
  164. display: flex;
  165. justify-content: center;
  166. align-items: center;
  167. align-content: center;
  169. padding: 0px 10px;
  171. border-right: 1px solid var(--border-color);
  173. color: var(--icons-color);
  174. }
  176. .container form div svg path {
  177. transform: scale(1);
  178. }
  180. .container form div input {
  181. width: 100%;
  182. height: 100%;
  184. border: 0;
  185. outline: none;
  187. padding-left: 5px;
  189. color: var(--text-color);
  190. font-family: 'Roboto', sans-serif;
  191. font-size: 1rem;
  193. background: transparent;
  194. }
  196. .container form div input::placeholder {
  197. color: #dddddd;
  198. }
  200. .form-buttons {
  201. width: 100%;
  203. display: flex;
  204. flex-wrap: wrap;
  205. gap: 10px;
  207. margin-top: 10px;
  208. padding: 0px 5px;
  209. }
  211. .form-buttons button {
  212. flex: 1;
  213. height: 45px;
  215. display: flex;
  216. align-items: center;
  217. justify-content: center;
  218. gap: 5px;
  220. border: 0;
  221. border-radius: 20px;
  223. color: var(--text-color);
  224. font-family: 'Roboto', sans-serif;
  226. background: #000;
  227. }
  229. .form-buttons button:last-child {
  230. width: 50%;
  231. flex-basis: 100%;
  233. margin-top: 10px;
  234. }
  236. .menu {
  237. width: 100%;
  238. height: calc(100% - 45px);
  240. position: absolute;
  241. top: 45px;
  242. left: 0;
  243. right: 0;
  244. bottom: 0;
  246. display: flex;
  247. flex-direction: column;
  248. align-items: center;
  249. justify-content: center;
  250. gap: 13px;
  252. padding: 10px 5px;
  254. border-bottom-left-radius: 5px;
  255. border-bottom-right-radius: 5px;
  257. opacity: 0;
  258. transform: perspective(800px) rotateX(90deg) rotateY(0deg);
  259. transform-origin: 100% 100%;
  261. background: #171717;
  262. }
  264. .menu button {
  265. width: 95%;
  266. height: 45px;
  268. display: flex;
  269. align-items: center;
  270. justify-content: center;
  272. border: 0;
  273. border-radius: 17.5px;
  275. background: var(--background-buttons-color);
  276. }
  278. .menu button svg {
  279. color: var(--icons-color);
  281. margin-right: 5px;
  282. }
  284. .menu button span {
  285. color: var(--text-color);
  286. font-family: 'Roboto', sans-serif;
  287. }
  289. .status-vpn {
  290. width: 100%;
  291. height: auto;
  293. padding: 0px 10px;
  294. }
  296. .status-vpn section {
  297. width: 95%;
  298. height: 40px;
  300. display: flex;
  301. align-items: center;
  302. justify-content: center;
  303. gap: 10px;
  305. margin: 0 auto;
  306. padding: 0px 10px;
  308. border-radius: 20px;
  310. background: #000;
  311. }
  313. .status-vpn section svg {
  314. color: #ffffff;
  315. }
  317. .status-vpn section h1 {
  318. color: #ffffff;
  319. font-family: 'Roboto', sans-serif;
  320. font-weight: 400;
  321. font-size: 1rem;
  322. }
  324. .home-menu {
  325. width: 95%;
  326. max-width: 450px;
  327. height: auto;
  329. display: flex;
  330. flex-direction: column;
  331. justify-content: center;
  332. gap: 10px;
  334. position: absolute;
  335. bottom: 20px;
  337. padding: 0px 10px;
  338. }
  340. .home-menu button {
  341. width: auto;
  342. height: 45px;
  344. display: flex;
  345. justify-content: center;
  346. align-items: center;
  347. gap: 5px;
  349. padding: 0px 10px;
  351. border: 0px;
  352. border-radius: 20px;
  354. background: var(--background-buttons-color);
  355. }
  357. .home-menu button svg {
  358. height: 100%;
  359. color: var(--icons-color);
  360. }
  362. .home-menu button span {
  363. color: var(--text-color);
  364. }
  366. .modal-speedtest,
  367. .modal-configs,
  368. .modal-logs,
  369. .modal-alert-clear-data,
  370. .modal-error-alert,
  371. .modal-status-vpn,
  372. .modal-checkuser,
  373. .modal-loading,
  374. .modal-gen-test,
  375. .modal-buy-access,
  376. .modal-call-support {
  377. width: 98%;
  378. max-width: 450px;
  379. height: calc(100% - var(--margem-do-bottom-do-modal) - var(--margem-do-topo-do-modal));
  381. position: absolute;
  382. top: var(--margem-do-topo-do-modal);
  383. left: auto;
  384. right: auto;
  385. bottom: var(--margem-do-bottom-do-modal);
  386. z-index: 2;
  388. display: flex;
  389. flex-direction: column;
  391. border-radius: 5px;
  393. overflow: hidden;
  395. opacity: 0;
  396. transform: scale(0);
  397. transform-origin: center;
  398. transition: all 0.3s ease 0.1s;
  399. }
  401. .show {
  402. opacity: 1;
  403. transform: scale(1);
  404. }
  406. .modal-speedtest header,
  407. .modal-configs header,
  408. .modal-logs header,
  409. .modal-alert-clear-data header,
  410. .modal-error-alert header,
  411. .modal-status-vpn header,
  412. .modal-checkuser header,
  413. .modal-loading header,
  414. .modal-gen-test header,
  415. .modal-buy-access header,
  416. .modal-call-support header {
  417. width: 100%;
  418. height: 40px;
  420. display: flex;
  421. align-items: center;
  423. padding: 0px 10px;
  425. background: var(--header-container-color);
  426. }
  428. .modal-speedtest header svg,
  429. .modal-configs header svg,
  430. .modal-logs header svg,
  431. .modal-alert-clear-data header svg,
  432. .modal-error-alert header svg,
  433. .modal-status-vpn header svg,
  434. .modal-checkuser header svg,
  435. .modal-loading header svg,
  436. .modal-gen-test header svg,
  437. .modal-buy-access header svg,
  438. .modal-call-support header svg {
  439. margin-left: auto;
  441. color: var(--icons-color);
  442. }
  444. .modal-speedtest section,
  445. .modal-configs section,
  446. .modal-logs section,
  447. .modal-alert-clear-data section,
  448. .modal-error-alert section,
  449. .modal-status-vpn section,
  450. .modal-checkuser section,
  451. .modal-loading section,
  452. .modal-gen-test section,
  453. .modal-buy-access section,
  454. .modal-call-support section {
  455. background: var(--background-container-color);
  456. }
  458. .modal-speedtest section,
  459. .modal-gen-test section,
  460. .modal-buy-access section,
  461. .modal-call-support section {
  462. width: 100%;
  463. height: calc(100% - 40px);
  465. position: relative;
  467. display: flex;
  468. justify-content: center;
  469. align-items: center;
  470. }
  472. .modal-logs section,
  473. .modal-checkuser section {
  474. width: 100%;
  475. height: calc(100% - 40px);
  477. position: relative;
  479. display: flex;
  480. flex-direction: column;
  481. align-items: center;
  482. }
  484. .modal-logs section p {
  485. width: 100%;
  486. height: auto;
  487. max-height: calc(100% - 65px);
  489. margin: 10px 0px;
  490. padding: 0px 10px;
  492. overflow-y: auto;
  494. color: var(--text-color);
  495. font-family: 'Roboto', sans-serif;
  496. font-size: 0.7rem;
  497. }
  499. .modal-logs section button {
  500. width: 80%;
  501. height: 45px;
  503. margin-top: auto;
  504. margin-bottom: 5px;
  506. display: flex;
  507. align-items: center;
  508. justify-content: center;
  510. border: 0;
  511. border-radius: 17.5px;
  513. background: var(--background-buttons-color);
  514. }
  516. .modal-logs section button svg {
  517. color: var(--icons-color);
  519. margin-right: 5px;
  520. }
  522. .modal-logs section button span {
  523. color: var(--text-color);
  524. font-family: 'Roboto', sans-serif;
  525. }
  527. .modal-speedtest section iframe,
  528. .modal-gen-test section iframe,
  529. .modal-buy-access section iframe,
  530. .modal-call-support section iframe {
  531. width: 100%;
  532. height: 100%;
  534. border: 0;
  536. overflow: hidden;
  537. }
  539. .modal-checkuser section {
  540. padding: 10px;
  542. justify-content: center;
  543. }
  545. .modal-checkuser section h1 {
  546. width: 100%;
  547. height: 40px;
  549. display: flex;
  550. align-items: center;
  551. justify-content: center;
  553. margin: 20px;
  555. border-bottom: 2px solid var(--background-buttons-color);
  557. color: var(--text-color);
  558. font-family: 'Roboto', sans-serif;
  559. font-weight: 400;
  560. }
  562. .modal-checkuser section div {
  563. width: 100%;
  564. height: 40px;
  566. display: flex;
  567. align-items: center;
  569. margin: 10px 0px;
  571. border-radius: 20px;
  573. background: var(--background-buttons-color);
  575. overflow: hidden;
  576. }
  578. .modal-checkuser section div i {
  579. width: 40px;
  580. height: 40px;
  582. display: flex;
  583. justify-content: center;
  584. align-items: center;
  586. color: var(--icons-color);
  587. }
  589. .modal-checkuser section div span {
  590. width: calc(100% - 40px);
  591. height: 100%;
  593. display: flex;
  594. align-items: center;
  596. color: var(--text-color);
  597. font-family: 'Roboto', sans-serif;
  598. }
  600. .modal-configs section {
  601. width: 100%;
  602. height: calc(100% - 40px);
  604. overflow-y: auto;
  605. }
  607. .modal-configs section div {
  608. width: 100%;
  609. height: auto;
  611. margin-top: 10px;
  613. display: flex;
  614. flex-direction: column;
  615. align-items: center;
  616. }
  618. .modal-configs section div h1.title {
  619. width: 90%;
  620. min-height: 30px;
  622. display: flex;
  623. justify-content: center;
  624. align-items: center;
  626. margin: 10px 0px;
  627. margin-top: 10px;
  629. border-radius: 15px;
  631. color: var(--text-color);
  632. font-family: 'Roboto', sans-serif;
  633. font-size: 0.9rem;
  635. background: var(--background-buttons-color);
  636. }
  638. .modal-configs section div ul {
  639. width: 100%;
  640. height: auto;
  642. margin-top: 5px;
  644. padding: 0px 10px;
  646. border-radius: 15px;
  647. }
  649. .modal-configs section div ul li {
  650. width: 100%;
  651. height: 60px;
  652. min-height: 60px;
  654. display: flex;
  655. align-items: center;
  657. margin: 0px 0px 10px 0px;
  659. padding: 5px;
  660. padding-left: 15px;
  662. border-radius: 30px;
  664. overflow: hidden;
  666. background: #000;
  667. }
  669. .modal-configs section ul li img {
  670. width: 30px;
  671. height: 30px;
  672. }
  674. .modal-configs section ul li div {
  675. width: calc(100% - 40px);
  676. height: 40px;
  678. margin-left: 5px;
  680. display: flex;
  681. flex-direction: column;
  682. align-items: flex-start;
  684. overflow: hidden;
  685. }
  687. .modal-configs section ul li div h1 {
  688. color: var(--text-color);
  689. font-size: 0.7rem;
  690. font-weight: 600;
  691. font-family: 'Roboto', sans-serif;
  692. }
  694. .modal-configs section ul li div p {
  695. color: var(--text-color);
  696. font-family: 'Roboto', sans-serif;
  697. font-size: 0.6rem;
  698. font-weight: 400;
  699. }
  701. .modal-alert-clear-data section,
  702. .modal-error-alert section,
  703. .modal-status-vpn section,
  704. .modal-loading section {
  705. width: 100%;
  706. height: calc(100% - 40px);
  708. display: flex;
  709. flex-direction: column;
  710. align-items: center;
  711. justify-content: center;
  712. }
  714. .modal-alert-clear-data section svg,
  715. .modal-error-alert section svg {
  716. width: 128px;
  717. height: auto;
  719. color: var(--text-alert-color);
  720. }
  722. .modal-alert-clear-data section h1,
  723. .modal-error-alert section h1 {
  724. margin: 10px 0px;
  726. color: var(--text-alert-color);
  727. font-family: 'Roboto', sans-serif;
  728. }
  730. .modal-alert-clear-data section p,
  731. .modal-error-alert section p {
  732. height: 145px;
  733. max-height: 145px;
  735. overflow-y: auto;
  737. margin-bottom: 10px;
  739. padding: 10px;
  741. color: var(--text-color);
  742. font-family: 'Roboto', sans-serif;
  743. font-weight: 300;
  744. }
  746. .modal-error-alert section p {
  747. text-align: center;
  748. }
  750. .modal-alert-clear-data section div {
  751. width: 95%;
  752. height: auto;
  754. margin-top: 10px;
  756. display: flex;
  757. align-items: center;
  758. justify-content: center;
  759. gap: 10px;
  760. }
  762. .modal-alert-clear-data section div button {
  763. width: 150px;
  764. height: 45px;
  766. display: flex;
  767. align-items: center;
  768. justify-content: center;
  770. padding: 0px 5px;
  772. border: 0;
  773. border-radius: 20px;
  775. background: var(--background-buttons-color);
  776. }
  778. .modal-alert-clear-data section div button svg {
  779. width: 16px;
  780. height: auto;
  782. margin-left: 6px;
  784. color: var(--icons-color);
  785. }
  787. .modal-alert-clear-data section div button span {
  788. margin-left: 5px;
  790. color: var(--text-color);
  791. font-family: 'Roboto', sans-serif;
  792. font-size: 0.7rem;
  793. }
  795. .modal-status-vpn section {
  796. position: relative;
  797. }
  799. .modal-status-vpn section div.loading-status,
  800. .modal-loading section div {
  801. width: 70px;
  802. height: 70px;
  804. position: relative;
  806. border: 4px solid var(--border-loading-color);
  807. border-radius: 50%;
  808. border-top: 4px solid transparent;
  810. animation: spin 1s infinite linear;
  811. }
  813. .modal-status-vpn section div.loading-status svg,
  814. .modal-loading section svg {
  815. width: 100%;
  816. height: 100%;
  818. display: flex;
  819. justify-content: center;
  820. align-items: center;
  822. color: var(--icons-color);
  823. padding: 15px;
  825. position: absolute;
  826. top: auto;
  827. left: auto;
  828. right: auto;
  829. bottom: auto;
  831. animation: spin 1s infinite linear reverse;
  832. }
  834. .modal-status-vpn section h1 {
  835. margin-top: 15%;
  837. color: var(--text-color);
  838. font-family: 'Roboto', sans-serif;
  839. }
  841. @keyframes spin {
  842. 0% {
  843. transform: rotate(0deg);
  844. }
  845. 100% {
  846. transform: rotate(360deg);
  847. }
  848. }
  850. .boingInUp {
  851. -webkit-animation-name: boingInUp;
  852. animation-name: boingInUp;
  853. }
  854. @-webkit-keyframes boingInUp {
  855. 0% {
  856. opacity: 0;
  857. transform: perspective(800px) rotateX(-90deg);
  858. transform-origin: 50% 0;
  859. }
  860. 50% {
  861. opacity: 1;
  862. transform: perspective(800px) rotateX(50deg);
  863. transform-origin: 50% 0;
  864. }
  865. to {
  866. opacity: 1;
  867. transform: perspective(800px) rotateX(0deg);
  868. transform-origin: 50% 0;
  869. }
  870. }
  871. @keyframes boingInUp {
  872. 0% {
  873. opacity: 0;
  874. transform: perspective(800px) rotateX(-90deg);
  875. transform-origin: 50% 0;
  876. }
  877. 50% {
  878. opacity: 1;
  879. transform: perspective(800px) rotateX(50deg);
  880. transform-origin: 50% 0;
  881. }
  882. to {
  883. opacity: 1;
  884. transform: perspective(800px) rotateX(0deg);
  885. transform-origin: 50% 0;
  886. }
  887. }
  888. .boingOutDown {
  889. -webkit-animation-name: boingOutDown;
  890. animation-name: boingOutDown;
  891. }
  892. @-webkit-keyframes boingOutDown {
  893. 0% {
  894. opacity: 1;
  895. transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  896. transform-origin: 100% 100%;
  897. }
  898. 20% {
  899. opacity: 1;
  900. transform: perspective(800px) rotateX(0deg) rotateY(10deg);
  901. transform-origin: 100% 100%;
  902. }
  903. 30% {
  904. opacity: 1;
  905. transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  906. transform-origin: 0 100%;
  907. }
  908. 40% {
  909. opacity: 1;
  910. transform: perspective(800px) rotateX(10deg) rotateY(10deg);
  911. transform-origin: 0 100%;
  912. }
  913. to {
  914. opacity: 0;
  915. transform: perspective(800px) rotateX(90deg) rotateY(0deg);
  916. transform-origin: 100% 100%;
  917. }
  918. }
  919. @keyframes boingOutDown {
  920. 0% {
  921. opacity: 1;
  922. transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  923. transform-origin: 100% 100%;
  924. }
  925. 20% {
  926. opacity: 1;
  927. transform: perspective(800px) rotateX(0deg) rotateY(10deg);
  928. transform-origin: 100% 100%;
  929. }
  930. 30% {
  931. opacity: 1;
  932. transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  933. transform-origin: 0 100%;
  934. }
  935. 40% {
  936. opacity: 1;
  937. transform: perspective(800px) rotateX(10deg) rotateY(10deg);
  938. transform-origin: 0 100%;
  939. }
  940. to {
  941. opacity: 0;
  942. transform: perspective(800px) rotateX(90deg) rotateY(0deg);
  943. transform-origin: 100% 100%;
  944. }
  945. }
  946. .magictime {
  947. -webkit-animation-duration: 1s;
  948. animation-duration: 1s;
  949. -webkit-animation-fill-mode: both;
  950. animation-fill-mode: both;
  951. }
  952. @media (prefers-reduced-motion), (print) {
  953. .magictime {
  954. -webkit-animation: unset !important;
  955. animation: unset !important;
  956. transition: none !important;
  957. }
  958. }
  960. @media (max-width: 375px) {
  961. .container form div {
  962. height: 35px;
  963. }
  965. .form-buttons button {
  966. height: 35px;
  967. }
  969. .home-menu button {
  970. height: 35px;
  971. }
  972. }
  973. </style>
  974. </head>
  975. <body>
  976. <main>
  977. <section class="container-logo">
  978. <!-- PARA TROCAR A LOGO É SÓ COLOCAR UM LINK COM A IMAGEM DIRETO NO SRC -->
  979. <img id="app-logo" src="" alt="Logo do app" />
  980. </section>
  982. <section class="container">
  983. <header>
  984. <button>Log-in</button>
  985. <button id="configuracao">Configurações</button>
  986. </header>
  988. <form>
  989. <div id="operadora">
  990. <svg
  991. xmlns="http://www.w3.org/2000/svg"
  992. fill="currentColor"
  993. class="bi bi-ethernet"
  994. viewBox="0 0 16 16"
  995. >
  996. <path
  997. d="M14 13.5v-7a.5.5 0 0 0-.5-.5H12V4.5a.5.5 0 0 0-.5-.5h-1v-.5A.5.5 0 0 0 10 3H6a.5.5 0 0 0-.5.5V4h-1a.5.5 0 0 0-.5.5V6H2.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5ZM3.75 11h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25Zm2 0h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25Zm1.75.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5ZM9.75 11h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25Zm1.75.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-1.5Z"
  998. />
  999. <path
  1000. d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2ZM1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2Z"
  1001. />
  1002. </svg>
  1004. <input
  1005. id="operator-selected"
  1006. type="text"
  1007. placeholder="Escolha sua operadora"
  1008. readonly
  1009. />
  1010. </div>
  1012. <div id="user-container">
  1013. <svg
  1014. xmlns="http://www.w3.org/2000/svg"
  1015. width="16"
  1016. height="16"
  1017. fill="currentColor"
  1018. class="bi bi-person"
  1019. viewBox="0 0 16 16"
  1020. >
  1021. <path
  1022. 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"
  1023. />
  1024. </svg>
  1026. <input id="user" type="text" placeholder="Usuário" />
  1027. </div>
  1029. <div id="password-container">
  1030. <svg
  1031. xmlns="http://www.w3.org/2000/svg"
  1032. width="16"
  1033. height="16"
  1034. fill="currentColor"
  1035. class="bi bi-key"
  1036. viewBox="0 0 16 16"
  1037. >
  1038. <path
  1039. 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"
  1040. />
  1041. <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
  1042. </svg>
  1044. <input id="password" type="password" placeholder="Senha" />
  1045. </div>
  1047. <div id="uuid-container">
  1048. <svg
  1049. xmlns="http://www.w3.org/2000/svg"
  1050. width="16"
  1051. height="16"
  1052. fill="currentColor"
  1053. class="bi bi-fingerprint"
  1054. viewBox="0 0 16 16"
  1055. >
  1056. <path
  1057. 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"
  1058. />
  1059. <path
  1060. 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"
  1061. />
  1062. <path
  1063. 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"
  1064. />
  1065. <path
  1066. 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"
  1067. />
  1068. <path
  1069. 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"
  1070. />
  1071. </svg>
  1073. <input id="uuid" type="password" placeholder="UUID" />
  1074. </div>
  1076. <section class="form-buttons">
  1077. <button id="update-config" type="button" title="Atualizar">
  1078. <svg
  1079. xmlns="http://www.w3.org/2000/svg"
  1080. width="16"
  1081. height="16"
  1082. fill="currentColor"
  1083. class="bi bi-arrow-clockwise"
  1084. viewBox="0 0 16 16"
  1085. >
  1086. <path
  1087. fill-rule="evenodd"
  1088. d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"
  1089. />
  1090. <path
  1091. d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"
  1092. />
  1093. </svg>
  1095. <span>ATUALIZAR</span>
  1096. </button>
  1098. <button id="logs-button" type="button" title="Registro">
  1099. <svg
  1100. xmlns="http://www.w3.org/2000/svg"
  1101. width="16"
  1102. height="16"
  1103. fill="currentColor"
  1104. class="bi bi-journal"
  1105. viewBox="0 0 16 16"
  1106. >
  1107. <path
  1108. d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"
  1109. />
  1110. <path
  1111. d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"
  1112. />
  1113. </svg>
  1115. <span>REGISTRO</span>
  1116. </button>
  1118. <button id="vpn-start" type="button" title="Conectar">
  1119. <svg
  1120. xmlns="http://www.w3.org/2000/svg"
  1121. width="16"
  1122. height="16"
  1123. fill="currentColor"
  1124. class="bi bi-plug"
  1125. viewBox="0 0 16 16"
  1126. >
  1127. <path
  1128. 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"
  1129. />
  1130. </svg>
  1132. <span>CONECTAR</span>
  1133. </button>
  1134. </section>
  1135. </form>
  1137. <section class="menu">
  1138. <button id="battery-optimization">
  1139. <svg
  1140. xmlns="http://www.w3.org/2000/svg"
  1141. width="16"
  1142. height="16"
  1143. fill="currentColor"
  1144. class="bi bi-battery-half"
  1145. viewBox="0 0 16 16"
  1146. >
  1147. <path d="M2 6h5v4H2V6z" />
  1148. <path
  1149. d="M2 4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2zm10 1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h10zm4 3a1.5 1.5 0 0 1-1.5 1.5v-3A1.5 1.5 0 0 1 16 8z"
  1150. />
  1151. </svg>
  1153. <span>OTIMIZAÇÃO DE BATERIA</span>
  1154. </button>
  1156. <button id="apn-configuration">
  1157. <svg
  1158. xmlns="http://www.w3.org/2000/svg"
  1159. width="16"
  1160. height="16"
  1161. fill="currentColor"
  1162. class="bi bi-wrench-adjustable"
  1163. viewBox="0 0 16 16"
  1164. >
  1165. <path
  1166. d="M16 4.5a4.492 4.492 0 0 1-1.703 3.526L13 5l2.959-1.11c.027.2.041.403.041.61Z"
  1167. />
  1168. <path
  1169. d="M11.5 9c.653 0 1.273-.139 1.833-.39L12 5.5 11 3l3.826-1.53A4.5 4.5 0 0 0 7.29 6.092l-6.116 5.096a2.583 2.583 0 1 0 3.638 3.638L9.908 8.71A4.49 4.49 0 0 0 11.5 9Zm-1.292-4.361-.596.893.809-.27a.25.25 0 0 1 .287.377l-.596.893.809-.27.158.475-1.5.5a.25.25 0 0 1-.287-.376l.596-.893-.809.27a.25.25 0 0 1-.287-.377l.596-.893-.809.27-.158-.475 1.5-.5a.25.25 0 0 1 .287.376ZM3 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
  1170. />
  1171. </svg>
  1173. <span>CONFIGURAR APN</span>
  1174. </button>
  1176. <button id="checkuser">
  1177. <svg
  1178. xmlns="http://www.w3.org/2000/svg"
  1179. width="16"
  1180. height="16"
  1181. fill="currentColor"
  1182. class="bi bi-person-lines-fill"
  1183. viewBox="0 0 16 16"
  1184. >
  1185. <path
  1186. d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"
  1187. />
  1188. </svg>
  1190. <span>DETALHES DO USUÁRIO</span>
  1191. </button>
  1193. <button id="speedtest-button">
  1194. <svg
  1195. xmlns="http://www.w3.org/2000/svg"
  1196. width="16"
  1197. height="16"
  1198. fill="currentColor"
  1199. class="bi bi-router"
  1200. viewBox="0 0 16 16"
  1201. >
  1202. <path
  1203. d="M5.525 3.025a3.5 3.5 0 0 1 4.95 0 .5.5 0 1 0 .707-.707 4.5 4.5 0 0 0-6.364 0 .5.5 0 0 0 .707.707Z"
  1204. />
  1205. <path
  1206. d="M6.94 4.44a1.5 1.5 0 0 1 2.12 0 .5.5 0 0 0 .708-.708 2.5 2.5 0 0 0-3.536 0 .5.5 0 0 0 .707.707ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5-.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Zm2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm1.5-.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Zm2 0a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Z"
  1207. />
  1208. <path
  1209. d="M2.974 2.342a.5.5 0 1 0-.948.316L3.806 8H1.5A1.5 1.5 0 0 0 0 9.5v2A1.5 1.5 0 0 0 1.5 13H2a.5.5 0 0 0 .5.5h2A.5.5 0 0 0 5 13h6a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5h.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 14.5 8h-2.306l1.78-5.342a.5.5 0 1 0-.948-.316L11.14 8H4.86L2.974 2.342ZM14.5 9a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h13Z"
  1210. />
  1211. <path d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
  1212. </svg>
  1214. <span>TESTAR REDE</span>
  1215. </button>
  1217. <button id="clean-data-app">
  1218. <svg
  1219. xmlns="http://www.w3.org/2000/svg"
  1220. width="16"
  1221. height="16"
  1222. fill="currentColor"
  1223. class="bi bi-trash"
  1224. viewBox="0 0 16 16"
  1225. >
  1226. <path
  1227. 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"
  1228. />
  1229. <path
  1230. 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"
  1231. />
  1232. </svg>
  1234. <span>LIMPAR DADOS</span>
  1235. </button>
  1236. </section>
  1237. </section>
  1239. <section class="status-vpn">
  1240. <section>
  1241. <svg
  1242. xmlns="http://www.w3.org/2000/svg"
  1243. width="16"
  1244. height="16"
  1245. fill="currentColor"
  1246. class="bi bi-outlet"
  1247. viewBox="0 0 16 16"
  1248. >
  1249. <path
  1250. 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"
  1251. />
  1252. <path
  1253. 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"
  1254. />
  1255. </svg>
  1257. <h1>DESCONECTADO</h1>
  1258. </section>
  1259. </section>
  1261. <section class="home-menu">
  1262. <button id="gen-test">
  1263. <svg
  1264. xmlns="http://www.w3.org/2000/svg"
  1265. width="16"
  1266. height="16"
  1267. fill="currentColor"
  1268. class="bi bi-cloud"
  1269. viewBox="0 0 16 16"
  1270. >
  1271. <path
  1272. 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"
  1273. />
  1274. </svg>
  1276. <span>Gerar Teste Grátis</span>
  1277. </button>
  1279. <button id="buy-access">
  1280. <svg
  1281. xmlns="http://www.w3.org/2000/svg"
  1282. width="16"
  1283. height="16"
  1284. fill="currentColor"
  1285. class="bi bi-wallet2"
  1286. viewBox="0 0 16 16"
  1287. >
  1288. <path
  1289. d="M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499L12.136.326zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484L5.562 3zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z"
  1290. />
  1291. </svg>
  1293. <span>Comprar Acesso</span>
  1294. </button>
  1296. <button id="contact-support">
  1297. <svg
  1298. xmlns="http://www.w3.org/2000/svg"
  1299. width="16"
  1300. height="16"
  1301. fill="currentColor"
  1302. class="bi bi-whatsapp"
  1303. viewBox="0 0 16 16"
  1304. >
  1305. <path
  1306. d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"
  1307. />
  1308. </svg>
  1310. <span>Pedir Suporte</span>
  1311. </button>
  1312. </section>
  1314. <section class="modal-speedtest">
  1315. <header>
  1316. <svg
  1317. xmlns="http://www.w3.org/2000/svg"
  1318. width="16"
  1319. height="16"
  1320. fill="currentColor"
  1321. class="bi bi-x-lg"
  1322. id="close"
  1323. viewBox="0 0 16 16"
  1324. >
  1325. <path
  1326. 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"
  1327. />
  1328. </svg>
  1329. </header>
  1331. <section>
  1332. <div class="loading"></div>
  1333. <iframe title="fast" id="iframe-speedtest"></iframe>
  1334. </section>
  1335. </section>
  1337. <section class="modal-configs">
  1338. <header>
  1339. <svg
  1340. xmlns="http://www.w3.org/2000/svg"
  1341. width="16"
  1342. height="16"
  1343. fill="currentColor"
  1344. class="bi bi-x-lg"
  1345. viewBox="0 0 16 16"
  1346. >
  1347. <path
  1348. 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"
  1349. />
  1350. </svg>
  1351. </header>
  1353. <section>
  1354. <div>
  1355. <h1 class="title">VIVO</h1>
  1357. <ul>
  1358. <li>
  1359. <img src="https://basteon.me/assets/images/app/operadoras/VIVO.png" alt="icon" />
  1361. <div>
  1362. <h1>VIVO 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>
  1363. <p>SERVIDOR: ?? ➜ LATÊNCIA BAIXA</p>
  1364. </div>
  1365. </li>
  1367. <li>
  1368. <img src="https://basteon.me/assets/images/app/operadoras/VIVO.png" alt="icon" />
  1370. <div>
  1371. <h1>VIVO 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>
  1372. <p>SERVIDOR: ?? ➜ LATÊNCIA BAIXA</p>
  1373. </div>
  1374. </li>
  1376. <li>
  1377. <img src="https://basteon.me/assets/images/app/operadoras/VIVO.png" alt="icon" />
  1379. <div>
  1380. <h1>VIVO 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>
  1381. <p>SERVIDOR: ?? ➜ LATÊNCIA BAIXA</p>
  1382. </div>
  1383. </li>
  1384. </ul>
  1385. </div>
  1387. <div>
  1388. <h1 class="title">TIM</h1>
  1390. <ul>
  1391. <li>
  1392. <img src="https://basteon.me/assets/images/app/operadoras/VIVO.png" alt="icon" />
  1394. <div>
  1395. <h1>TIM 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>
  1396. <p>SERVIDOR: ?? ➜ LATÊNCIA BAIXA</p>
  1397. </div>
  1398. </li>
  1400. <li>
  1401. <img src="https://basteon.me/assets/images/app/operadoras/VIVO.png" alt="icon" />
  1403. <div>
  1404. <h1>TIM 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>
  1405. <p>SERVIDOR: ?? ➜ LATÊNCIA BAIXA</p>
  1406. </div>
  1407. </li>
  1409. <li>
  1410. <img src="https://basteon.me/assets/images/app/operadoras/VIVO.png" alt="icon" />
  1412. <div>
  1413. <h1>TIM 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>
  1414. <p>SERVIDOR: ?? ➜ LATÊNCIA BAIXA</p>
  1415. </div>
  1416. </li>
  1417. </ul>
  1418. </div>
  1420. <div>
  1421. <h1 class="title">CLARO</h1>
  1423. <ul>
  1424. <li>
  1425. <img src="https://basteon.me/assets/images/app/operadoras/VIVO.png" alt="icon" />
  1427. <div>
  1428. <h1>CLARO 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>
  1429. <p>SERVIDOR: ?? ➜ LATÊNCIA BAIXA</p>
  1430. </div>
  1431. </li>
  1433. <li>
  1434. <img src="https://basteon.me/assets/images/app/operadoras/VIVO.png" alt="icon" />
  1436. <div>
  1437. <h1>CLARO 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>
  1438. <p>SERVIDOR: ?? ➜ LATÊNCIA BAIXA</p>
  1439. </div>
  1440. </li>
  1442. <li>
  1443. <img src="https://basteon.me/assets/images/app/operadoras/VIVO.png" alt="icon" />
  1445. <div>
  1446. <h1>CLARO 1 ➜ CONFIG 1 ➜ SV01.QFN</h1>
  1447. <p>SERVIDOR: ?? ➜ LATÊNCIA BAIXA</p>
  1448. </div>
  1449. </li>
  1450. </ul>
  1451. </div>
  1452. </section>
  1453. </section>
  1455. <section class="modal-logs">
  1456. <header>
  1457. <svg
  1458. xmlns="http://www.w3.org/2000/svg"
  1459. width="16"
  1460. height="16"
  1461. fill="currentColor"
  1462. class="bi bi-x-lg"
  1463. viewBox="0 0 16 16"
  1464. >
  1465. <path
  1466. 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"
  1467. />
  1468. </svg>
  1469. </header>
  1471. <section>
  1472. <p></p>
  1474. <button class="clear-logs" type="button">
  1475. <svg
  1476. xmlns="http://www.w3.org/2000/svg"
  1477. width="16"
  1478. height="16"
  1479. fill="currentColor"
  1480. class="bi bi-stars"
  1481. viewBox="0 0 16 16"
  1482. >
  1483. <path
  1484. d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"
  1485. />
  1486. </svg>
  1487. <span>Limpar Registro</span>
  1488. </button>
  1489. </section>
  1490. </section>
  1492. <section class="modal-alert-clear-data">
  1493. <header>
  1494. <svg
  1495. xmlns="http://www.w3.org/2000/svg"
  1496. width="16"
  1497. height="16"
  1498. fill="currentColor"
  1499. class="bi bi-x-lg"
  1500. viewBox="0 0 16 16"
  1501. >
  1502. <path
  1503. 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"
  1504. />
  1505. </svg>
  1506. </header>
  1508. <section>
  1509. <svg
  1510. xmlns="http://www.w3.org/2000/svg"
  1511. width="16"
  1512. height="16"
  1513. fill="currentColor"
  1514. class="bi bi-exclamation-triangle"
  1515. viewBox="0 0 16 16"
  1516. >
  1517. <path
  1518. d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"
  1519. />
  1520. <path
  1521. d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"
  1522. />
  1523. </svg>
  1525. <h1>ATENÇÃO</h1>
  1527. <p>
  1528. Ao limpar os dados do aplicativo, o aplicativo será redefinido como se estivesse sendo
  1529. instalado pela primeira vez! Essa ação é irreversível. Será necessário inserir o usuário
  1530. e senha novamente e atualizar o aplicativo para carregar as configurações atuais de
  1531. conexão VPN.
  1532. </p>
  1534. <div>
  1535. <button type="button" id="back-clear-data-button">
  1536. <svg
  1537. xmlns="http://www.w3.org/2000/svg"
  1538. width="16"
  1539. height="16"
  1540. fill="currentColor"
  1541. class="bi bi-caret-left"
  1542. viewBox="0 0 16 16"
  1543. >
  1544. <path
  1545. d="M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z"
  1546. />
  1547. </svg>
  1548. <span>VOLTAR</span>
  1549. </button>
  1551. <button type="button" id="clear-data-button-confirm">
  1552. <svg
  1553. xmlns="http://www.w3.org/2000/svg"
  1554. width="16"
  1555. height="16"
  1556. fill="currentColor"
  1557. class="bi bi-trash"
  1558. viewBox="0 0 16 16"
  1559. >
  1560. <path
  1561. 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"
  1562. />
  1563. <path
  1564. 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"
  1565. />
  1566. </svg>
  1567. <span>LIMPAR DADOS</span>
  1568. </button>
  1569. </div>
  1570. </section>
  1571. </section>
  1573. <section class="modal-error-alert">
  1574. <header>
  1575. <svg
  1576. xmlns="http://www.w3.org/2000/svg"
  1577. width="16"
  1578. height="16"
  1579. fill="currentColor"
  1580. class="bi bi-x-lg"
  1581. viewBox="0 0 16 16"
  1582. >
  1583. <path
  1584. 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"
  1585. />
  1586. </svg>
  1587. </header>
  1589. <section></section>
  1590. </section>
  1592. <section class="modal-status-vpn">
  1593. <header>
  1594. <svg
  1595. xmlns="http://www.w3.org/2000/svg"
  1596. width="16"
  1597. height="16"
  1598. fill="currentColor"
  1599. class="bi bi-x-lg"
  1600. id="close-modal-status-vpn"
  1601. viewBox="0 0 16 16"
  1602. >
  1603. <path
  1604. 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"
  1605. />
  1606. </svg>
  1607. </header>
  1609. <section class="modal-status-content">
  1610. <div class="loading-status">
  1611. <svg
  1612. xmlns="http://www.w3.org/2000/svg"
  1613. width="16"
  1614. height="16"
  1615. fill="currentColor"
  1616. class="bi bi-shield-x"
  1617. viewBox="0 0 16 16"
  1618. >
  1619. <path
  1620. d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"
  1621. />
  1622. <path
  1623. d="M6.146 5.146a.5.5 0 0 1 .708 0L8 6.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 7l1.147 1.146a.5.5 0 0 1-.708.708L8 7.707 6.854 8.854a.5.5 0 1 1-.708-.708L7.293 7 6.146 5.854a.5.5 0 0 1 0-.708z"
  1624. />
  1625. </svg>
  1626. </div>
  1628. <h1 id="modal-status-text">CONECTADO!</h1>
  1629. </section>
  1630. </section>
  1632. <section class="modal-checkuser">
  1633. <header>
  1634. <svg
  1635. xmlns="http://www.w3.org/2000/svg"
  1636. width="16"
  1637. height="16"
  1638. fill="currentColor"
  1639. class="bi bi-x-lg"
  1640. id="close-modal-checkuser"
  1641. viewBox="0 0 16 16"
  1642. >
  1643. <path
  1644. 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"
  1645. />
  1646. </svg>
  1647. </header>
  1649. <section></section>
  1650. </section>
  1652. <section class="modal-loading">
  1653. <header>
  1654. <svg
  1655. xmlns="http://www.w3.org/2000/svg"
  1656. width="16"
  1657. height="16"
  1658. fill="currentColor"
  1659. class="bi bi-x-lg"
  1660. id="close-modal-loading"
  1661. id="close-modal-checkuser"
  1662. viewBox="0 0 16 16"
  1663. >
  1664. <path
  1665. 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"
  1666. />
  1667. </svg>
  1668. </header>
  1670. <section>
  1671. <div>
  1672. <svg
  1673. xmlns="http://www.w3.org/2000/svg"
  1674. width="16"
  1675. height="16"
  1676. fill="currentColor"
  1677. class="bi bi-calendar3"
  1678. viewBox="0 0 16 16"
  1679. >
  1680. <path
  1681. 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"
  1682. />
  1683. <path
  1684. d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
  1685. />
  1686. </svg>
  1687. </div>
  1688. </section>
  1689. </section>
  1690. </main>
  1692. <!-- FUNÇÕES DO APP -->
  1693. <script>
  1694. const dtStatusBarHeight = () => DtGetStatusBarHeight.execute()
  1695. const dtNavbarHeight = () => DtGetNavigationBarHeight.execute()
  1697. const dtAppLogo = () => DtGetAppConfig.execute('APP_LOGO')
  1699. const dtVpnState = () => DtGetVpnState.execute()
  1701. const dtTranslateText = (label) => DtTranslateText.execute(label)
  1703. const dtAllConfigs = () => DtGetConfigs.execute()
  1704. const dtSetConfig = (id) => DtSetConfig.execute(id)
  1705. const dtGetDefaultConfig = () => DtGetDefaultConfig.execute()
  1707. const dtGetLogs = () => DtGetLogs.execute()
  1708. const dtClearLogs = () => DtClearLogs.execute()
  1710. const dtGetUsername = () => DtUsername.get()
  1711. const dtSetUsername = (username) => DtUsername.set(username)
  1712. const dtGetPassword = () => DtPassword.get()
  1713. const dtSetPassword = (password) => DtPassword.set(password)
  1714. const dtGetUUID = () => DtUuid.get()
  1715. const dtSetUUID = (uuid) => DtUuid.set(uuid)
  1717. const dtUpdate = () => DtStartAppUpdate.execute()
  1719. const dtStartVpn = () => DtExecuteVpnStart.execute()
  1720. const dtStopVpn = () => DtExecuteVpnStop.execute()
  1722. const dtBatteryOptimization = () => DtIgnoreBatteryOptimizations.execute()
  1723. const dtApnConfiguration = () => DtStartApnActivity.execute()
  1724. const dtStartCheckUser = () => DtStartCheckUser.execute()
  1725. const dtCleanDataApp = () => DtCleanApp.execute()
  1726. const dtStartWebView = (url) => DtStartWebViewActivity.execute(url)
  1727. const dtOpenBrowser = (url) => DtOpenExternalUrl.execute(url)
  1728. </script>
  1730. <!-- FUNÇÕES PARA O APP -->
  1731. <script>
  1732. const dtOnNewLogListener = () => writeModalContent()
  1733. const dtConfigClickListener = () => writeInputCarrierList()
  1734. const dtCheckUserStartedListener = () => showModalLoading()
  1735. const dtVpnStateListener = (state) => vpnState(state)
  1736. const dtCheckUserModelListener = (model) => writeModalCheckUser(model)
  1738. const dtMessageErrorListener = (model) => writeModalError(model)
  1739. </script>
  1741. <!-- FUNÇÕES DE AJUDA -->
  1742. <script>
  1743. const createSvgIcon = (iconPath, Class = '') => {
  1744. const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  1745. svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
  1746. svg.setAttribute('width', '16')
  1747. svg.setAttribute('height', '16')
  1748. svg.setAttribute('fill', 'currentColor')
  1749. svg.setAttribute('viewBox', '0 0 16 16')
  1750. svg.setAttribute('class', Class)
  1752. const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
  1753. path.setAttribute('d', iconPath)
  1755. svg.appendChild(path)
  1756. return svg
  1757. }
  1759. const createListItem = (iconPath, Class = '', text) => {
  1760. const li = document.createElement('li')
  1761. const svg = createSvgIcon(iconPath, Class)
  1762. const span = document.createElement('span')
  1763. span.setAttribute('class', Class)
  1764. span.innerHTML = text
  1765. li.appendChild(svg)
  1766. li.appendChild(span)
  1767. return li
  1768. }
  1769. </script>
  1771. <!-- FUNÇÕES DO LAYOUT -->
  1772. <script>
  1773. const vpnState = (state) => {
  1774. const stateLabel = state || dtVpnState()
  1776. switch (stateLabel) {
  1777. case 'DISCONNECTED':
  1778. StartStopVPNButton.html(dtTranslateText('LBL_BTN_START'))
  1779. writeModalVpnState(disconnected())
  1780. hiddenModalVpnState()
  1781. writeStatusVpn(disconnected())
  1782. return disconnected()
  1783. case 'CONNECTING':
  1784. StartStopVPNButton.html(dtTranslateText('LBL_BTN_STOP'))
  1785. writeModalVpnState(connecting())
  1786. writeStatusVpn(connecting())
  1787. return connecting()
  1788. case 'CONNECTED':
  1789. StartStopVPNButton.html(dtTranslateText('LBL_BTN_STOP'))
  1790. writeModalVpnState(connected())
  1791. writeStatusVpn(connected())
  1792. return connected()
  1793. case 'STOPPING':
  1794. StartStopVPNButton.html(dtTranslateText('LBL_BTN_STOPPING'))
  1795. writeModalVpnState(stopping())
  1796. writeStatusVpn(stopping())
  1797. return stopping()
  1798. case 'NO_NETWORK':
  1799. StartStopVPNButton.html(dtTranslateText('LBL_BTN_STOP'))
  1800. writeModalVpnState(noNetwork())
  1801. writeStatusVpn(noNetwork())
  1802. return noNetwork()
  1803. case 'AUTH':
  1804. StartStopVPNButton.html(dtTranslateText('LBL_BTN_STOP'))
  1805. writeModalVpnState(auth())
  1806. writeStatusVpn(auth())
  1807. return auth()
  1808. case 'AUTH_FAILED':
  1809. StartStopVPNButton.html(dtTranslateText('LBL_BTN_STOP'))
  1810. writeModalVpnState(authFailed())
  1811. writeStatusVpn(authFailed())
  1812. return authFailed()
  1813. default:
  1814. return 'Não foi possível obter o status da conexão'
  1815. }
  1816. }
  1818. const showConfigMenu = () => {
  1819. const menu = document.querySelector('section.menu')
  1821. if (!menu.className.includes('boingInUp') && !menu.className.includes('boingOutDown')) {
  1822. menu.classList.add('magictime', 'boingInUp')
  1823. HomeMenu.style({ visibility: `hidden` })
  1824. } else if (menu.className.includes('boingInUp')) {
  1825. menu.classList.remove('magictime', 'boingInUp')
  1826. menu.classList.add('magictime', 'boingOutDown')
  1827. HomeMenu.style({ visibility: `visible` })
  1828. } else if (menu.className.includes('boingOutDown')) {
  1829. menu.classList.remove('magictime', 'boingOutDown')
  1830. menu.classList.add('magictime', 'boingInUp')
  1831. HomeMenu.style({ visibility: `hidden` })
  1832. } else {
  1833. console.log('ocorreu um erro')
  1834. }
  1835. }
  1837. const showModalSpeedtest = () => {
  1838. ModalSpeedtest.addClass('show')
  1840. IframeSpeedtest.attr({ src: 'https://fast.com/pt/' })
  1841. }
  1842. const hiddenModalSpeedtest = () => {
  1843. IframeSpeedtest.attr({ src: '' })
  1845. ModalSpeedtest.removeClass('show')
  1846. }
  1848. const writeCarrierList = () => {
  1849. const writeCarrierList = document.querySelector('section.modal-configs section')
  1851. writeCarrierList.innerHTML = ''
  1853. const data = JSON.parse(dtAllConfigs())
  1854. data.sort((a, b) => a.sorter - b.sorter)
  1855. data.forEach((item, index) => item.items.sort((a, b) => a.sorter - b.sorter))
  1856. data.forEach((category) => {
  1857. const div = document.createElement('div')
  1858. const h1 = document.createElement('h1')
  1860. h1.classList.add('title')
  1861. h1.innerHTML = category.name
  1863. const ul = document.createElement('ul')
  1865. category.items.forEach((item) => {
  1866. const li = document.createElement('li')
  1867. li.innerHTML = `<img src="${item.icon}" alt="icon" /><div><h1>${item.name}</h1><p>${
  1868. item.description ?? ''
  1869. }</p></div>`
  1871. li.addEventListener('click', () => {
  1872. dtSetConfig(item.id)
  1874. ModalCarrierList.removeClass('show')
  1875. })
  1877. ul.appendChild(li)
  1878. })
  1880. div.appendChild(h1)
  1881. div.appendChild(ul)
  1883. writeCarrierList.appendChild(div)
  1884. })
  1885. }
  1886. const writeInputCarrierList = () => {
  1887. const data = JSON.parse(dtGetDefaultConfig())
  1889. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray')
  1891. InputCarrierValue.attr({ placeholder: data.name ?? 'Escolha sua operadora' })
  1893. if (!data?.auth?.v2ray_uuid && isV2ray) {
  1894. ContainerInputUser.style({ display: 'none' })
  1895. ContainerInputPassword.style({ display: 'none' })
  1896. ContainerInputUUID.style({ display: 'flex' })
  1897. InputUUIDValue.attr({ value: dtGetUUID() ?? '' })
  1898. } else {
  1899. ContainerInputPassword.style({ display: 'flex' })
  1900. ContainerInputUUID.style({ display: 'none' })
  1901. InputUserValue.attr({ value: dtGetUsername() ?? '' })
  1902. InputPasswordValue.attr({ value: dtGetPassword() ?? '' })
  1903. }
  1904. }
  1905. const showModalCarrierList = () => {
  1906. writeCarrierList()
  1908. ModalCarrierList.addClass('show')
  1909. }
  1910. const hiddenModalCarrierList = () => {
  1911. ModalCarrierList.removeClass('show')
  1912. }
  1914. const writeModalContent = () => {
  1915. const data = JSON.parse(dtGetLogs())
  1917. let content = ''
  1919. data.forEach((item) => {
  1920. content += `${Object.keys(item)} ${item[Object.keys(item)]} <br>`
  1921. })
  1923. ModalLoggerContent.html(content)
  1924. }
  1925. const showModalLogger = () => {
  1926. dtOnNewLogListener()
  1928. const modal = document.querySelector('section.modal-logs')
  1930. if (!modal.className.includes('show')) {
  1931. ModalLogger.addClass('show')
  1932. }
  1933. }
  1934. const hiddenModalLogger = () => {
  1935. ModalLogger.removeClass('show')
  1936. }
  1938. const startStopVpn = () => {
  1939. const state = dtVpnState()
  1941. if (state !== 'CONNECTED') {
  1942. dtStartVpn()
  1943. showModalVpnState()
  1944. } else {
  1945. dtStopVpn()
  1946. }
  1947. }
  1949. const writeStatusVpn = (state) => {
  1950. const icon = state.icon
  1951. const text = `<h1 style="color: ${state.color}">${state.text}</h1>`
  1953. ContentContainerSVpnState.html(icon + text)
  1955. return icon + text
  1956. }
  1958. const writeModalVpnState = (state) => {
  1959. const divIcon = `<div class="loading-status">${state.icon}</div>`
  1960. const titleStatus = `<h1>${state.text}</h1>`
  1962. ContentModalVpnState.html(divIcon + titleStatus)
  1964. return divIcon + titleStatus
  1965. }
  1966. const showModalVpnState = () => {
  1967. const data = JSON.parse(dtGetDefaultConfig())
  1969. if (!data || !dtGetUsername() || !dtGetPassword()) {
  1970. return
  1971. } else {
  1972. ModalVpnState.addClass('show')
  1973. }
  1974. }
  1975. const hiddenModalVpnState = () => {
  1976. ModalVpnState.removeClass('show')
  1977. }
  1979. const showModalLoading = () => {
  1980. if (!JSON.parse(dtGetDefaultConfig())?.urlCheckUser) {
  1981. hiddenModalVpnState()
  1982. } else {
  1983. hiddenModalVpnState()
  1984. ModalLoading.addClass('show')
  1985. }
  1986. }
  1987. const hiddenModalLoading = () => {
  1988. ModalLoading.removeClass('show')
  1989. }
  1991. const writeModalCheckUser = (model) => {
  1992. const data = JSON.parse(model)
  1994. ContentModalCheckUser.html(`
  1995. <h1>DETALHES DO USUÁRIO</h1>
  1997. <div>
  1998. <i class="bi bi-person"></i>
  1999. <span>Nome do usuário: ${data.username}</span>
  2000. </div>
  2002. <div>
  2003. <i class="bi bi-calendar-week"></i>
  2004. <span>Expiração: ${data.expiration_date}</span>
  2005. </div>
  2007. <div>
  2008. <i class="bi bi-hourglass-split"></i>
  2009. <span>Dias restantes: ${data.expiration_days}</span>
  2010. </div>
  2012. <div>
  2013. <i class="bi bi-people"></i>
  2014. <span>Dispositivos: ${data.count_connections}|${data.limit_connections}</span>
  2015. </div>
  2016. `)
  2018. showModalCheckUser()
  2019. }
  2020. const showModalCheckUser = () => {
  2021. hiddenModalLoading()
  2022. ModalCheckUser.addClass('show')
  2023. }
  2024. const hiddenModalCheckUser = () => {
  2025. ModalCheckUser.removeClass('show')
  2026. }
  2028. const showModalAlertClearData = () => {
  2029. ModalAlertClearData.addClass('show')
  2030. }
  2031. const hiddenModalAlertClearData = () => {
  2032. ModalAlertClearData.removeClass('show')
  2033. }
  2035. const writeModalError = (model) => {
  2036. const data = JSON.parse(model)
  2038. const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16"><path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/><path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/></svg>`
  2039. const h1 = `<h1 id="title-error-alert-title">${data.title}</h1>`
  2040. const p = `<p id="title-error-alert-description">${data.content}</p>`
  2042. ContentModalError.html(svg + h1 + p)
  2043. hiddenModalSpeedtest()
  2044. hiddenModalCarrierList()
  2045. hiddenModalLogger()
  2046. hiddenModalVpnState()
  2047. hiddenModalLoading()
  2048. hiddenModalCheckUser()
  2050. showModalError()
  2051. }
  2052. const showModalError = () => {
  2053. ModalError.addClass('show')
  2054. }
  2055. const hiddenModalError = () => {
  2056. ModalError.removeClass('show')
  2057. }
  2059. const getAppLogo = () => {
  2060. const logo = dtAppLogo()
  2062. if (!logo) {
  2063. return false
  2064. } else {
  2065. return JSON.parse(logo).value
  2066. }
  2067. }
  2068. </script>
  2070. <!-- ESTADOS DE CONEXÃO -->
  2071. <script>
  2072. const disconnected = () => {
  2073. const state = {
  2074. 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>`,
  2075. color: '#FFFFFF',
  2076. text: dtTranslateText('LBL_STATE_DISCONNECTED'),
  2077. }
  2079. return state
  2080. }
  2082. const connecting = () => {
  2083. const state = {
  2084. 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>`,
  2085. color: '#FFFF00',
  2086. text: dtTranslateText('LBL_STATE_CONNECTING'),
  2087. }
  2089. return state
  2090. }
  2092. const connected = () => {
  2093. const state = {
  2094. 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>`,
  2095. color: '#00FF00',
  2096. text: dtTranslateText('LBL_STATE_CONNECTED'),
  2097. }
  2099. return state
  2100. }
  2102. const stopping = () => {
  2103. const state = {
  2104. 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>`,
  2105. color: '#FFFF00',
  2106. text: dtTranslateText('LBL_STATE_STOPPING'),
  2107. }
  2109. return state
  2110. }
  2112. const noNetwork = () => {
  2113. const state = {
  2114. 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>`,
  2115. color: '#FF0000',
  2116. text: dtTranslateText('LBL_STATE_NO_NETWORK'),
  2117. }
  2119. return state
  2120. }
  2122. const auth = () => {
  2123. const state = {
  2124. 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>`,
  2125. color: '#FFFF00',
  2126. text: dtTranslateText('LBL_STATE_AUTH'),
  2127. }
  2129. return state
  2130. }
  2132. const authFailed = () => {
  2133. const state = {
  2134. 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>`,
  2135. color: '#FF0000',
  2136. text: dtTranslateText('LBL_STATE_AUTH_FAILED'),
  2137. }
  2139. return state
  2140. }
  2141. </script>
  2143. <!-- DOM WRAPPER -->
  2144. <script>
  2145. const Dom = (selector) => {
  2146. const _elements = document.querySelectorAll(selector)
  2148. const wrapper = {
  2149. on(listeners) {
  2150. for (const [event, listener] of Object.entries(listeners)) {
  2151. _elements.forEach((element) => {
  2152. element.addEventListener(event, listener)
  2153. })
  2154. }
  2156. return wrapper
  2157. },
  2158. addClass: (...tokens) => {
  2159. _elements.forEach((element) => {
  2160. element.classList.add(...tokens)
  2161. })
  2163. return wrapper
  2164. },
  2165. removeClass: (...tokens) => {
  2166. _elements.forEach((element) => {
  2167. element.classList.remove(...tokens)
  2168. })
  2170. return wrapper
  2171. },
  2172. toggleClass: (token, force) => {
  2173. _elements.forEach((element) => {
  2174. element.classList.toggle(token, force)
  2175. })
  2177. return wrapper
  2178. },
  2179. style(styles) {
  2180. for (const [property, value] of Object.entries(styles)) {
  2181. console.log(value)
  2182. _elements.forEach((element) => {
  2183. element.style[property] = value
  2184. })
  2185. }
  2187. return wrapper
  2188. },
  2189. attr(attrs) {
  2190. for (const [name, value] of Object.entries(attrs)) {
  2191. _elements.forEach((element) => element.setAttribute(name, value))
  2192. }
  2194. return wrapper
  2195. },
  2196. html(value) {
  2197. _elements.forEach((element) => (element.innerHTML = value))
  2198. return wrapper
  2199. },
  2200. }
  2202. return wrapper
  2203. }
  2204. </script>
  2206. <!-- VÁRIAVEIS -->
  2207. <script>
  2208. const Main = Dom('main')
  2210. const AppLogo = Dom('#app-logo')
  2212. const ConfigMenu = Dom('#configuracao')
  2213. const ContainerConfigMenu = Dom('section.menu')
  2215. const BatteryOptimizationButton = Dom('#battery-optimization')
  2216. const ApnConfigurationButton = Dom('#apn-configuration')
  2217. const CheckuserButton = Dom('#checkuser')
  2218. const SpeedtestButton = Dom('#speedtest-button')
  2219. const ClearDataAppButton = Dom('#clean-data-app')
  2221. const GenTestButton = Dom('#gen-test')
  2222. const BuyAccessButton = Dom('#buy-access')
  2223. const ContactSupportButton = Dom('#contact-support')
  2225. const ModalSpeedtest = Dom('section.modal-speedtest')
  2226. const CloseModalSpeedtest = Dom('section.modal-speedtest header svg')
  2227. const LoadingSpeedtest = Dom('section.modal-speedtest section div.loading')
  2228. const IframeSpeedtest = Dom('#iframe-speedtest')
  2230. const SelectCarrierButton = Dom('#operadora')
  2231. const ModalCarrierList = Dom('section.modal-configs')
  2232. const CloseModalCarrierList = Dom('section.modal-configs header svg')
  2233. const ModalContentCarrierList = Dom('section.modal-configs section')
  2235. const ContainerInputUser = Dom('#user-container')
  2236. const ContainerInputPassword = Dom('#password-container')
  2237. const ContainerInputUUID = Dom('#uuid-container')
  2239. const InputCarrierValue = Dom('#operadora input')
  2240. const InputUserValue = Dom('#user-container input')
  2241. const InputPasswordValue = Dom('#password-container input')
  2242. const InputUUIDValue = Dom('#uuid-container input')
  2244. const RefreshButton = Dom('#update-config')
  2245. const LoggerButton = Dom('#logs-button')
  2246. const StartStopVPNButton = Dom('#vpn-start')
  2248. const ContainerSVpnState = Dom('section.status-vpn')
  2249. const ContentContainerSVpnState = Dom('section.status-vpn section')
  2251. const ModalVpnState = Dom('section.modal-status-vpn')
  2252. const CloseModalVpnState = Dom('section.modal-status-vpn header svg')
  2253. const ContentModalVpnState = Dom('section.modal-status-vpn section.modal-status-content')
  2255. const ModalLogger = Dom('section.modal-logs')
  2256. const CloseModalLogger = Dom('section.modal-logs header svg')
  2257. const ModalLoggerContent = Dom('section.modal-logs section p')
  2258. const CleanLoggerContent = Dom('section.modal-logs section button')
  2260. const ModalLoading = Dom('section.modal-loading')
  2261. const CloseModalLoading = Dom('section.modal-loading header svg')
  2263. const ModalCheckUser = Dom('section.modal-checkuser')
  2264. const CloseModalCheckUser = Dom('section.modal-checkuser header svg')
  2265. const ContentModalCheckUser = Dom('section.modal-checkuser section')
  2267. const ModalAlertClearData = Dom('section.modal-alert-clear-data')
  2268. const CloseModalAlertClearData = Dom('section.modal-alert-clear-data header svg')
  2269. const BackModalAlertClearData = Dom('#back-clear-data-button')
  2270. const ConfirmModalAlertClearData = Dom('#clear-data-button-confirm')
  2272. const ModalError = Dom('section.modal-error-alert')
  2273. const CloseModalError = Dom('section.modal-error-alert header svg')
  2274. const ContentModalError = Dom('section.modal-error-alert section')
  2276. const HomeMenu = Dom('section.home-menu')
  2277. </script>
  2279. <!-- VARIAVEIS ROOT -->
  2280. <script>
  2281. document.documentElement.style.setProperty(
  2282. '--margem-do-topo-do-modal',
  2283. `${dtStatusBarHeight() + 10}px`
  2284. )
  2286. document.documentElement.style.setProperty(
  2287. '--margem-do-bottom-do-modal',
  2288. `${dtNavbarHeight() + 10}px`
  2289. )
  2290. </script>
  2292. <!-- AÇÕES -->
  2293. <script>
  2294. Main.style({ padding: `${dtStatusBarHeight() + 10}px 0px 0px 0px` })
  2295. HomeMenu.style({ bottom: `${dtNavbarHeight() + 10}px` })
  2297. AppLogo.attr({ src: getAppLogo() })
  2299. ConfigMenu.on({ click: () => showConfigMenu() })
  2301. BatteryOptimizationButton.on({ click: () => dtBatteryOptimization() })
  2302. ApnConfigurationButton.on({ click: () => dtApnConfiguration() })
  2304. SpeedtestButton.on({ click: () => showModalSpeedtest() })
  2305. CloseModalSpeedtest.on({ click: () => hiddenModalSpeedtest() })
  2307. SelectCarrierButton.on({ click: () => showModalCarrierList() })
  2308. CloseModalCarrierList.on({ click: () => hiddenModalCarrierList() })
  2310. InputUserValue.on({ input: (e) => dtSetUsername(e.target.value) })
  2311. InputPasswordValue.on({ input: (e) => dtSetPassword(e.target.value) })
  2312. InputUUIDValue.on({ input: (e) => dtSetUUID(e.target.value) })
  2314. RefreshButton.on({ click: () => dtUpdate() })
  2316. LoggerButton.on({ click: () => showModalLogger() })
  2317. CloseModalLogger.on({ click: () => hiddenModalLogger() })
  2318. CleanLoggerContent.on({ click: () => dtClearLogs() })
  2320. StartStopVPNButton.on({ click: () => startStopVpn() })
  2322. ContentContainerSVpnState.html(vpnState())
  2324. ContentModalVpnState.html(vpnState())
  2325. CloseModalVpnState.on({ click: () => hiddenModalVpnState() })
  2327. CloseModalLoading.on({ click: () => hiddenModalLoading() })
  2329. CloseModalCheckUser.on({ click: () => hiddenModalCheckUser() })
  2331. CheckuserButton.on({ click: () => dtStartCheckUser() })
  2333. ClearDataAppButton.on({ click: () => showModalAlertClearData() })
  2334. CloseModalAlertClearData.on({ click: () => hiddenModalAlertClearData() })
  2335. BackModalAlertClearData.on({ click: () => hiddenModalAlertClearData() })
  2336. ConfirmModalAlertClearData.on({ click: () => dtCleanDataApp() })
  2338. CloseModalError.on({ click: () => hiddenModalError() })
  2340. GenTestButton.on({
  2341. click: () => dtOpenBrowser('https://fusionnet-ilimitada.com/redirecionar-teste/'),
  2342. })
  2344. BuyAccessButton.on({
  2345. click: () => dtOpenBrowser('https://fusionnet-ilimitada.com/escolher-plano/'),
  2346. })
  2348. ContactSupportButton.on({
  2349. click: () =>
  2350. dtOpenBrowser(
  2351. 'https://api.whatsapp.com/send?phone=5594981158898&text=Vim%20Pelo%20App.%20Pode%20me%20ajudar?'
  2352. ),
  2353. })
  2355. writeInputCarrierList()
  2356. </script>
  2357. </body>
  2358. </html>
comments powered by Disqus