TEMA

SUBMITTED BY: VINIMODDER

DATE: April 30, 2024, 10:10 p.m.

FORMAT: Text only

SIZE: 101.1 kB

Raw Download

HITS: 323

Report
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <title>213259300 - @FredBarbosa</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;
  15. font-synthesis: none;
  16. text-rendering: optimizeLegibility;
  17. -webkit-font-smoothing: antialiased;
  18. -moz-osx-font-smoothing: grayscale;
  19. text-size-adjust: 100%;
  20. -webkit-text-size-adjust: 100%;
  22. --space-status-bar: 10px;
  23. --space-nav-bar: 33px;
  25. --default-background-color: linear-gradient(135deg,
  26. #9f2fff,
  27. #0bb1d3,
  28. #7f47cb,
  29. #00ffff,
  30. #7a2cec,
  31. #4adfdf,
  32. #76fcfc,
  33. #7f47cb,
  34. #9f2fff,
  35. #0bb1d3,
  36. #7f47cb,
  37. #00ffff,
  38. #7a2cec,
  39. #4adfdf);
  40. --connected-background-color: linear-gradient(135deg,
  41. #05b76d,
  42. #01ac66,
  43. #008e52,
  44. #30704b,
  45. #00ff00,
  46. #29ab87,
  47. #00a86b,
  48. #2e8b57,
  49. #3f7046,
  50. #3f7,
  51. #008e52,
  52. #30704b,
  53. #00ff00,
  54. #29ab87,
  55. #00a86b,
  56. #2e8b57,
  57. #3f7046,
  58. #3f7);
  59. --connecting-background-color: linear-gradient(135deg,
  60. #ffc823,
  61. #f4b007,
  62. #fff14a,
  63. #eaa700,
  64. #fc9200,
  65. #ffcb05,
  66. #feb308,
  67. #ecc218,
  68. #ffc823,
  69. #f4b007,
  70. #fff14a,
  71. #eaa700,
  72. #fc9200,
  73. #ffcb05,
  74. #feb308,
  75. #ecc218);
  76. --error-background-color: linear-gradient(135deg,
  77. #e20807,
  78. #d40000,
  79. #9a001a,
  80. #65100d,
  81. #e20807,
  82. #d40000,
  83. #9a001a,
  84. #65100d,
  85. #e20807,
  86. #d40000,
  87. #9a001a,
  88. #65100d,
  89. #000000,
  90. #ff0000,
  91. #9a001a,
  92. #e20807,
  93. #65100d);
  94. }
  96. @keyframes ButtonStartVpnAnimation {
  97. 0% {
  98. background-position: 0;
  99. }
  101. 100% {
  102. background-position: 300%;
  103. }
  104. }
  106. @keyframes spin {
  107. 0% {
  108. transform: rotate(0deg);
  109. }
  111. 100% {
  112. transform: rotate(360deg);
  113. }
  114. }
  116. *,
  117. *::after,
  118. *::before {
  119. margin: 0;
  120. padding: 0;
  121. box-sizing: border-box;
  122. }
  124. html,
  125. body {
  126. width: 100%;
  127. height: 100%;
  128. }
  130. body {
  131. background: #051d40;
  132. padding-bottom: var(--space-nav-bar);
  133. }
  135. main {
  136. width: auto;
  137. height: 89%;
  139. display: flex;
  141. position: relative;
  143. padding: 0 0 0 0;
  145. overflow: hidden;
  146. }
  148. section.home {
  149. width: 100vw;
  150. min-width: 100%;
  151. height: 100%;
  153. display: flex;
  154. flex-direction: column;
  156. position: absolute;
  157. top: 0;
  158. left: 0;
  160. opacity: 0;
  161. transform: translateX(100%);
  163. transition: opacity 0.3s ease, transform 0.3s ease;
  165. overflow: hidden;
  166. }
  168. section.home header {
  169. width: 100%;
  170. height: 20%;
  171. max-height: 135px;
  173. display: flex;
  174. align-items: center;
  175. justify-content: center;
  177. padding: var(--space-status-bar) 10px 0 10px;
  179. background-image: url();
  180. background-size: cover;
  181. background-position: center;
  182. background-repeat: no-repeat;
  183. }
  185. section.home header img {
  186. width: 80%;
  187. }
  189. section.container-carrier-selector-button {
  190. width: 100%;
  191. height: 10%;
  192. max-height: 60px;
  194. display: flex;
  195. justify-content: center;
  196. align-items: center;
  198. margin: 10% 0 0 0;
  199. }
  201. section.container-carrier-selector-button button {
  202. width: 90%;
  203. height: 65%;
  205. display: flex;
  206. align-items: center;
  207. justify-content: center;
  208. gap: 5px;
  210. position: relative;
  212. border: 0px;
  213. border-radius: 20px;
  215. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  216. background-size: 300%;
  218. animation: 8s infinite ButtonStartVpnAnimation;
  219. }
  221. section.container-carrier-selector-button button svg {
  222. color: #ffffff;
  223. }
  225. section.container-carrier-selector-button button span {
  226. color: #ffffff;
  227. font-size: 12px;
  228. }
  230. section.container-button-start-stop-vpn {
  231. width: 100%;
  232. height: auto;
  234. display: flex;
  235. justify-content: center;
  236. align-items: center;
  238. margin: 20% 0 0 0;
  239. }
  241. section.container-button-start-stop-vpn button {
  242. width: 150px;
  243. height: 150px;
  245. display: flex;
  246. align-items: center;
  247. justify-content: center;
  249. position: relative;
  251. border: 0;
  252. border-radius: 50%;
  254. background: linear-gradient(to top left, #0bb1d3, #9f2fff 85%);
  255. }
  257. section.container-button-start-stop-vpn button svg {
  258. width: 50%;
  259. height: 50%;
  261. color: #ffffff;
  262. }
  264. section.container-button-start-stop-vpn button::before,
  265. section.container-button-start-stop-vpn button::after {
  266. width: calc(100% + 10px);
  267. height: calc(100% + 10px);
  269. content: "";
  271. position: absolute;
  272. z-index: -1;
  274. border-radius: 50%;
  276. background: var(--default-background-color);
  277. background-size: 300%;
  279. animation: 8s infinite ButtonStartVpnAnimation;
  280. }
  282. section.container-button-start-stop-vpn button::after {
  283. filter: blur(30px);
  284. }
  286. section.container-status-connection,
  287. section.container-version,
  288. section.container-local-ip {
  289. width: 100%;
  290. height: auto;
  292. display: none;
  293. flex-direction: column;
  294. align-items: center;
  295. justify-content: center;
  297. margin: auto 0 auto 0;
  298. }
  300. section.container-status-connection.active,
  301. section.container-version.active,
  302. section.container-local-ip.active {
  303. display: flex;
  304. }
  306. section.container-status-connection button,
  307. section.container-version button,
  308. section.container-local-ip button {
  309. padding: 2.5% 10%;
  311. border: 0;
  312. border-radius: 60px;
  314. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  315. background-size: 300%;
  317. animation: 8s infinite ButtonStartVpnAnimation;
  318. }
  320. section.container-status-connection button span,
  321. section.container-version button span,
  322. section.container-local-ip button span {
  323. color: #ffffff;
  324. }
  326. @media only screen and (max-width: 375px) {
  327. section.container-button-start-stop-vpn button {
  328. width: 110px;
  329. height: 110px;
  330. }
  332. section.container-status-connection {
  333. margin-top: 10%;
  334. }
  335. }
  337. @media only screen and (max-width: 280px) {
  338. section.container-button-start-stop-vpn {
  339. margin-top: 15%;
  340. }
  342. section.container-button-start-stop-vpn button {
  343. width: 90px;
  344. height: 90px;
  345. }
  347. section.container-status-connection {
  348. margin-top: 20% !important;
  349. }
  350. }
  352. @media only screen and (max-width: 250px) {
  353. section.container-button-start-stop-vpn {
  354. margin-top: 5%;
  355. }
  357. section.container-button-start-stop-vpn button {
  358. width: 90px;
  359. height: 90px;
  360. }
  362. section.container-status-connection {
  363. margin-top: 10% !important;
  364. }
  365. }
  367. section.profile,
  368. section.carrier-list,
  369. section.container-tools,
  370. section.container-error {
  371. width: 100%;
  372. min-width: 100%;
  373. height: 100%;
  375. display: flex;
  376. flex-direction: column;
  377. gap: 10px;
  379. position: absolute;
  380. top: 0;
  381. left: 0;
  383. padding: var(--space-status-bar) 0 0 0;
  385. opacity: 0;
  387. transform: translateX(100%);
  388. transition: opacity 0.3s ease, transform 0.3s ease;
  389. }
  391. section.carrier-list {
  392. height: 97%;
  393. }
  395. section.container-tools {
  396. gap: 1px;
  397. }
  399. section.loading,
  400. section.checkuser,
  401. section.clean-data-app,
  402. section.hotspot-container,
  403. section.terms-container,
  404. section.logs-container,
  405. section.renew-alert {
  406. width: 100%;
  407. min-width: 100%;
  408. height: 100%;
  410. display: flex;
  411. justify-content: center;
  412. align-items: center;
  414. position: absolute;
  415. top: 0;
  416. left: 0;
  417. z-index: 999999999;
  419. padding-top: 15%;
  421. background: rgba(0, 0, 0, 0.3);
  423. opacity: 0;
  424. transform: scale(0);
  425. transform-origin: center;
  427. transition: opacity 0.3s ease, transform 0.3s ease;
  428. }
  430. section.hotspot-container {
  431. padding-top: 0;
  432. }
  434. section.loading.active,
  435. section.checkuser.active,
  436. section.clean-data-app.active,
  437. section.hotspot-container.active,
  438. section.terms-container.active,
  439. section.logs-container.active,
  440. section.renew-alert.active {
  441. opacity: 1;
  442. transform: scale(1);
  443. }
  445. section.loading section,
  446. section.checkuser section,
  447. section.clean-data-app section,
  448. section.hotspot-container section,
  449. section.terms-container section,
  450. section.logs-container section,
  451. section.renew-alert section {
  452. width: 80%;
  453. height: auto;
  454. min-height: 50%;
  456. display: flex;
  457. flex-direction: column;
  458. align-items: center;
  460. border-radius: 10px;
  462. background: #051d40;
  464. overflow: hidden;
  465. }
  467. section.renew-alert section {
  468. position: relative;
  470. overflow: initial;
  471. }
  473. section.renew-alert.active section::before,
  474. section.renew-alert.active section::after {
  475. width: calc(100% + 2px);
  476. height: calc(100% + 2px);
  478. content: "";
  479. position: absolute;
  480. left: -1px;
  481. right: 0;
  482. bottom: -1px;
  483. z-index: -1;
  485. border-radius: 10px;
  487. background: linear-gradient(135deg, #9f2fff, #0bb1d3, #7f47cb, #00ffff, #7a2cec, #4adfdf, #76fcfc, #7f47cb, #9f2fff, #0bb1d3, #7f47cb, #00ffff, #7a2cec, #4adfdf);
  488. background-size: 300%;
  489. animation: 4s infinite alternate-reverse ButtonStartVpnAnimation;
  490. }
  492. section.renew-alert section::after {
  493. filter: blur(7px);
  494. }
  496. section.logs-container section {
  497. width: 90%;
  498. min-height: 0;
  500. margin-top: 25%;
  501. padding-bottom: 0.8rem;
  502. }
  504. section.renew-alert section {
  505. width: 90%;
  507. padding-bottom: 1rem;
  508. }
  510. section.loading section header,
  511. section.checkuser section header,
  512. section.clean-data-app section header,
  513. section.hotspot-container section header,
  514. section.terms-container section header,
  515. section.logs-container section header,
  516. section.renew-alert section header {
  517. width: 100%;
  518. height: auto;
  520. display: flex;
  521. align-items: center;
  522. justify-content: center;
  524. position: relative;
  526. padding: 4% 2% 4% 2%;
  528. border-bottom: 2px solid #03142d;
  529. }
  531. section.loading section header h1,
  532. section.checkuser section header h1,
  533. section.clean-data-app section header h1,
  534. section.hotspot-container section header h1,
  535. section.terms-container section header h1,
  536. section.logs-container section header h1,
  537. section.renew-alert section header h1 {
  538. margin-left: auto;
  540. color: #ffffff;
  541. font-size: 0.8rem;
  542. }
  544. @media (max-width: 280px) {
  545. section.clean-data-app section header h1 {
  546. font-size: 0.7rem;
  547. }
  548. }
  550. section.loading section header svg,
  551. section.checkuser section header svg,
  552. section.clean-data-app section header svg,
  553. section.hotspot-container section header svg,
  554. section.terms-container section header svg,
  555. section.logs-container section header svg,
  556. section.renew-alert section header svg {
  557. margin-left: auto;
  559. color: #ffffff;
  560. }
  562. section.terms-container section p {
  563. width: 95%;
  564. height: auto;
  565. max-height: 350px;
  567. padding: 5% 0;
  569. color: #ffffff;
  570. text-align: center;
  572. overflow: auto;
  573. }
  575. section.loading section div.loading {
  576. width: 150px;
  577. height: 150px;
  579. margin-top: auto;
  580. margin-bottom: auto;
  582. border-top: 4px solid #ffffff;
  583. border-right: 4px solid #ffffff;
  584. border-bottom: 4px solid #ffffff;
  585. border-left: 4px solid transparent;
  586. border-radius: 50%;
  588. background-color: transparent;
  590. animation: spin 1s linear infinite;
  591. }
  593. section.checkuser section section {
  594. width: 100%;
  595. height: auto;
  596. min-height: 100%;
  598. display: flex;
  599. align-items: center;
  600. justify-content: center;
  602. margin: auto 0 auto 0;
  603. padding: 3% 0;
  605. border-radius: 0;
  606. }
  608. section.checkuser section section div:first-child {
  609. margin: 0;
  610. }
  612. section.checkuser section section div {
  613. width: 90%;
  614. height: auto;
  616. display: flex;
  617. align-items: center;
  618. gap: 10px;
  620. margin: 5% 0 0 0;
  621. padding: 3% 3%;
  623. border-radius: 10px;
  625. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  626. background-size: 300%;
  628. animation: 8s infinite ButtonStartVpnAnimation;
  629. }
  631. section.checkuser section section div svg,
  632. section.checkuser section section div span {
  633. color: #ffffff;
  634. }
  636. section.checkuser section section div span {
  637. font-size: 0.8rem;
  638. }
  640. section.clean-data-app section section,
  641. section.hotspot-container section section {
  642. width: 100%;
  643. height: auto;
  644. min-height: 100%;
  646. display: flex;
  647. align-items: center;
  648. justify-content: center;
  650. margin: auto 0 auto 0;
  651. padding: 8% 0;
  653. border-radius: 0;
  654. }
  656. section.clean-data-app section section svg,
  657. section.hotspot-container section section svg {
  658. width: 30%;
  659. height: auto;
  661. color: #ffff00;
  662. font-size: 8rem;
  663. }
  665. section.hotspot-container section section svg {
  666. width: 20%;
  667. height: auto;
  669. color: #ffffff;
  670. }
  672. section.clean-data-app section section h1,
  673. section.hotspot-container section section h1 {
  674. color: #ffffff;
  675. font-size: 1rem;
  676. }
  678. section.clean-data-app section section p,
  679. section.hotspot-container section section p {
  680. margin: 5% 0 8% 0;
  681. padding: 0 3%;
  683. color: #ffffff;
  684. text-align: center;
  685. font-family: Arial, sans-serif;
  686. }
  688. section.hotspot-container section section p {
  689. width: 100%;
  690. height: 10%;
  691. max-height: 300px;
  693. overflow: auto;
  694. }
  696. section.clean-data-app section section button,
  697. section.hotspot-container section section button {
  698. display: flex;
  699. align-items: center;
  700. justify-content: center;
  702. padding: 4% 10%;
  704. border: 0;
  705. border-radius: 60px;
  707. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  708. background-size: 300%;
  710. animation: 8s infinite ButtonStartVpnAnimation;
  711. }
  713. section.clean-data-app section section button span,
  714. section.hotspot-container section section button span {
  715. color: #ffffff;
  716. }
  718. section.renew-alert section section {
  719. max-height: 250px;
  721. margin: auto 0 auto 0;
  722. border-radius: 0;
  724. overflow: auto;
  726. &>p {
  727. overflow: hidden;
  728. color: #FFFFFF;
  729. text-align: center;
  731. &>bold {
  732. font-weight: bold;
  733. }
  735. &>italic {
  736. font-style: italic;
  737. text-decoration: underline;
  738. }
  739. }
  740. }
  742. section.logs-container section section {
  743. width: 100%;
  744. height: auto;
  745. max-height: 250px;
  747. padding: 0.4rem 0.4rem 0rem 0.4rem;
  748. margin: 0.4rem 0 0.8rem 0;
  750. border-radius: 0;
  752. overflow: auto;
  753. scrollbar-width: none;
  754. -ms-overflow-style: none;
  756. ::-webkit-scrollbar {
  757. display: none;
  758. }
  760. ::-webkit-scrollbar-thumb {
  761. background: transparent;
  762. }
  764. &>p {
  765. width: 100%;
  766. height: auto;
  768. color: #FFFFFF;
  769. font-size: 0.8rem;
  770. }
  771. }
  773. section.logs-container section button {
  774. width: auto;
  775. height: auto;
  777. display: flex;
  778. align-items: center;
  779. justify-content: center;
  780. gap: 8px;
  782. margin: auto 0 0 0;
  783. padding: 3% 7%;
  785. position: relative;
  787. border: 0px;
  788. border-radius: 20px;
  790. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  791. background-size: 300%;
  793. animation: 8s infinite ButtonStartVpnAnimation;
  795. &>svg {
  796. color: #FFFFFF;
  797. }
  799. &>span {
  800. color: #FFFFFF;
  801. }
  802. }
  804. section.profile header,
  805. section.carrier-list header,
  806. section.container-tools header,
  807. section.container-error header {
  808. width: 100%;
  809. height: 10%;
  811. display: flex;
  812. justify-content: center;
  813. align-items: center;
  815. position: relative;
  817. padding: 0 20px 0 20px;
  819. background: #051d40;
  820. }
  822. section.profile header::before,
  823. section.profile header::after,
  824. section.carrier-list header::before,
  825. section.carrier-list header::after,
  826. section.container-tools header::before,
  827. section.container-tools header::after,
  828. section.container-error header::before,
  829. section.container-error header::after {
  830. width: calc(100% + 2px);
  831. height: calc(100% + 2px);
  833. content: "";
  835. position: absolute;
  836. z-index: -1;
  838. background: linear-gradient(135deg,
  839. #9f2fff,
  840. #0bb1d3,
  841. #7f47cb,
  842. #00ffff,
  843. #7a2cec,
  844. #4adfdf,
  845. #76fcfc,
  846. #7f47cb,
  847. #9f2fff,
  848. #0bb1d3,
  849. #7f47cb,
  850. #00ffff,
  851. #7a2cec,
  852. #4adfdf);
  853. background-size: 300%;
  855. animation: 15s infinite ButtonStartVpnAnimation;
  856. }
  858. section.profile header::after,
  859. section.carrier-list header::after,
  860. section.container-tools header::after,
  861. section.container-error header::after {
  862. filter: blur(5px);
  863. }
  865. section.profile header svg,
  866. section.carrier-list header svg,
  867. section.container-tools header svg,
  868. section.container-error header svg {
  869. width: 20px;
  870. height: 20px;
  872. margin: 0 auto 0 0;
  874. fill: url(#grad);
  875. }
  877. section.profile header h1,
  878. section.carrier-list header h1,
  879. section.container-tools header h1,
  880. section.container-error header h1 {
  881. margin: 0 auto 0 0;
  883. color: #ffffff;
  884. font-size: 0.9rem;
  885. }
  887. section.profile form {
  888. width: 100%;
  889. height: auto;
  891. padding: 0px 10px;
  893. display: flex;
  894. flex-direction: column;
  895. }
  897. section.profile form fieldset {
  898. width: 100%;
  899. height: auto;
  901. display: flex;
  902. flex-direction: column;
  903. align-items: center;
  904. justify-content: center;
  906. position: relative;
  908. margin: 0% 0px;
  909. padding: 5px 10px;
  911. border: 0px solid #00ff00;
  912. border-radius: 5px;
  914. background: #051d40;
  915. }
  917. section.profile form fieldset::before,
  918. section.profile form fieldset::after {
  919. width: calc(100% + 2px);
  920. height: calc(100% + 17px);
  922. content: "";
  924. position: absolute;
  925. top: -16px;
  926. right: 0;
  927. bottom: 0;
  928. left: -1px;
  929. z-index: -1;
  931. border-radius: 5px;
  933. background: radial-gradient(circle,
  934. #9f2fff,
  935. #0bb1d3,
  936. #7f47cb,
  937. #00ffff,
  938. #7a2cec,
  939. #4adfdf,
  940. #76fcfc,
  941. #7f47cb,
  942. #9f2fff,
  943. #0bb1d3,
  944. #7f47cb,
  945. #00ffff,
  946. #7a2cec,
  947. #4adfdf);
  948. background-size: 300%;
  950. animation: 20s infinite ButtonStartVpnAnimation;
  951. }
  953. section.profile form fieldset::after {
  954. filter: blur(3px);
  955. }
  957. section.profile form fieldset legend {
  958. padding: 0px 7px 0px 5px;
  959. background: #051d40;
  960. }
  962. section.profile form fieldset legend svg {
  963. width: auto;
  964. height: 1.563rem;
  966. fill: url(#grad);
  967. }
  969. section.profile form fieldset p {
  970. color: #ffffff;
  971. font-size: 0.9rem;
  972. font-style: italic;
  973. }
  975. section.profile form fieldset:nth-child(2) {
  976. margin-top: 5%;
  978. padding: 0px 10px 20px 10px;
  979. }
  981. section.profile form fieldset:nth-child(2)::after,
  982. section.profile form fieldset:nth-child(2)::before {
  983. height: calc(100% + 15px);
  984. top: -14px;
  985. }
  987. section.profile form fieldset:nth-child(2) legend {
  988. color: #ffffff;
  989. }
  991. section.profile form fieldset:nth-child(2) label {
  992. margin-right: auto;
  993. color: #ffffff;
  994. }
  996. section.profile form fieldset:nth-child(2) label.hidden {
  997. display: none;
  998. }
  1000. section.profile form fieldset:nth-child(2) div {
  1001. width: 100%;
  1002. height: 40px;
  1004. display: flex;
  1005. align-items: center;
  1007. margin: 0 0 0 auto;
  1009. border: 1px solid #ffffff;
  1010. border-radius: 5px;
  1012. overflow: hidden;
  1013. }
  1015. section.profile form fieldset:nth-child(2) div.hidden {
  1016. display: none;
  1017. }
  1019. section.profile form fieldset:nth-child(2) div svg {
  1020. width: 15%;
  1021. max-width: 40px;
  1022. height: 100%;
  1023. max-height: 40px;
  1025. padding: 3%;
  1027. color: #ffffff;
  1028. }
  1030. section.profile form fieldset:nth-child(2) div svg.hidden {
  1031. display: none;
  1032. }
  1034. section.profile form fieldset:nth-child(2) div input {
  1035. width: 100%;
  1036. height: 100%;
  1038. padding: 0px 5px;
  1040. border: 0px;
  1041. border-left: 1px solid #ffffff;
  1042. outline: none;
  1044. color: #ffffff;
  1046. background: transparent;
  1047. }
  1049. section.profile form fieldset:nth-child(2) label[for="passworddiv"] {
  1050. margin-top: 4%;
  1051. }
  1053. section.profile form fieldset:nth-child(2) label[for="uuiddiv"] {
  1054. margin-top: 4%;
  1055. }
  1057. section.profile form fieldset:nth-child(2) button {
  1058. width: 80%;
  1059. min-width: 200px;
  1060. height: 20%;
  1061. min-height: 30px;
  1063. display: flex;
  1064. align-items: center;
  1065. justify-content: center;
  1066. gap: 10px;
  1068. margin: 6% auto 0px auto;
  1070. border: 0px;
  1071. border-radius: 20px;
  1073. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  1074. background-size: 300%;
  1076. animation: 5s infinite ButtonStartVpnAnimation;
  1077. }
  1079. section.profile form fieldset:nth-child(2) button svg {
  1080. color: #ffffff;
  1082. filter: drop-shadow(1px 1px 2px rgba(72, 79, 87, 0.5));
  1083. }
  1085. section.profile form fieldset:nth-child(2) button span {
  1086. color: #ffffff;
  1087. font-family: Arial, sans-serif;
  1088. font-weight: 500;
  1090. text-shadow: 1px 1px 2px rgba(72, 79, 87, 0.5);
  1091. }
  1093. section.carrier-list section {
  1094. width: 100%;
  1095. height: 90%;
  1097. overflow-y: auto;
  1098. }
  1100. section.carrier-list section div:first-child {
  1101. margin: 0;
  1102. }
  1104. section.carrier-list section div {
  1105. width: 100%;
  1106. height: auto;
  1108. display: flex;
  1109. flex-direction: column;
  1110. }
  1112. section.carrier-list section div h1 {
  1113. width: 100%;
  1114. height: 50px;
  1116. display: flex;
  1117. align-items: center;
  1119. padding: 0px 3%;
  1121. color: #ffffff;
  1122. font-size: 0.9rem;
  1124. background: #051d40;
  1125. }
  1127. section.carrier-list section div ul {
  1128. width: 100%;
  1129. height: auto;
  1130. list-style: none;
  1131. }
  1133. section.carrier-list section div ul li {
  1134. width: 100%;
  1135. height: 60px;
  1137. display: flex;
  1138. align-items: center;
  1139. gap: 5px;
  1141. position: relative;
  1143. margin: 1% 0;
  1144. padding: 0 2%;
  1146. background: #07214b;
  1148. color: #ffffff;
  1150. /* overflow: hidden; */
  1151. /* REMOVER CASO QUEIRA A BORDA ANIMADA E COLORIDA */
  1152. }
  1154. section.carrier-list section div ul li::before,
  1155. section.carrier-list section div ul li::after {
  1156. width: 100%;
  1157. height: calc(100% + 2px);
  1159. content: "";
  1161. position: absolute;
  1162. top: 0;
  1163. left: 0;
  1164. z-index: -1;
  1166. background: radial-gradient(circle,
  1167. #9f2fff,
  1168. #0bb1d3,
  1169. #7f47cb,
  1170. #00ffff,
  1171. #7a2cec,
  1172. #4adfdf,
  1173. #76fcfc,
  1174. #7f47cb,
  1175. #9f2fff,
  1176. #0bb1d3,
  1177. #7f47cb,
  1178. #00ffff,
  1179. #7a2cec,
  1180. #4adfdf);
  1181. background-size: 300%;
  1183. animation: 15s infinite ButtonStartVpnAnimation;
  1184. }
  1186. section.carrier-list section div ul li img {
  1187. width: 30px;
  1188. }
  1190. section.carrier-list section div ul li span {
  1191. width: calc(100% - 30px);
  1193. white-space: nowrap;
  1194. overflow: auto;
  1195. }
  1197. section.carrier-list section div ul li svg {
  1198. width: 30px;
  1200. display: none;
  1201. }
  1203. section.carrier-list section div ul li.active svg {
  1204. display: block;
  1205. }
  1207. section.container-tools section {
  1208. width: 100%;
  1209. height: 89%;
  1211. display: flex;
  1212. flex-direction: column;
  1213. gap: 10px;
  1215. margin: 0 auto 0 auto;
  1216. padding: 2% 0 0 0;
  1218. background: transparent;
  1220. overflow: auto;
  1221. }
  1223. section.container-tools section button {
  1224. width: 100%;
  1225. height: auto;
  1227. display: flex;
  1228. align-items: center;
  1229. gap: 5px;
  1231. padding: 10px;
  1233. border: 0px solid transparent;
  1234. border-bottom: 1px solid #ddd;
  1236. background: transparent;
  1237. }
  1239. section.container-tools section button svg:first-child {
  1240. width: 20px;
  1241. height: 100%;
  1243. margin: 0 10px 0 0;
  1245. color: #ffffff;
  1246. }
  1248. section.container-tools section button div {
  1249. max-width: 83%;
  1250. height: auto;
  1252. display: flex;
  1253. flex-direction: column;
  1254. align-items: flex-start;
  1255. gap: 5px;
  1256. }
  1258. section.container-tools section button div h3 {
  1259. color: #ffffff;
  1260. }
  1262. section.container-tools section button div p {
  1263. color: #ffffff;
  1264. text-align: left;
  1265. }
  1267. section.container-tools section button svg:last-child {
  1268. width: 16px;
  1269. height: 100%;
  1271. margin: 0 0 0 auto;
  1273. color: #ffffff;
  1274. }
  1276. section.container-error section {
  1277. width: 100%;
  1278. height: 85%;
  1280. display: flex;
  1281. flex-direction: column;
  1282. align-items: center;
  1283. }
  1285. section.container-error section h1 {
  1286. margin: 1% 0 0 0;
  1287. color: #ffffff;
  1288. font-size: 0.9rem;
  1289. }
  1291. section.container-error section p {
  1292. margin: 3% 0 0 0;
  1293. padding: 0 3%;
  1295. color: #ffffff;
  1296. text-align: center;
  1297. font-size: 0.8rem;
  1298. font-family: Arial, sans-serif;
  1299. overflow: auto;
  1300. }
  1302. section.active {
  1303. opacity: 1;
  1304. transform: translateX(0%);
  1305. }
  1307. section.container-menu {
  1308. width: 100%;
  1309. height: 10%;
  1311. display: flex;
  1312. align-items: center;
  1313. justify-content: center;
  1314. gap: 10px;
  1316. position: relative;
  1318. margin: auto 0px 0px 0px;
  1319. padding: 0px 10px;
  1321. background-color: #051d40;
  1322. }
  1324. section.container-menu::before,
  1325. section.container-menu::after {
  1326. width: calc(100%);
  1327. height: calc(100% + 4px);
  1329. content: "";
  1331. position: absolute;
  1332. left: 0;
  1333. right: 0;
  1334. bottom: -2px;
  1335. z-index: -1;
  1337. background: linear-gradient(135deg,
  1338. #9f2fff,
  1339. #0bb1d3,
  1340. #7f47cb,
  1341. #00ffff,
  1342. #7a2cec,
  1343. #4adfdf,
  1344. #76fcfc,
  1345. #7f47cb,
  1346. #9f2fff,
  1347. #0bb1d3,
  1348. #7f47cb,
  1349. #00ffff,
  1350. #7a2cec,
  1351. #4adfdf);
  1352. background-size: 300%;
  1354. animation: 4s infinite alternate-reverse ButtonStartVpnAnimation;
  1355. }
  1357. section.container-menu::after {
  1358. filter: blur(10px);
  1359. }
  1361. section.container-menu button {
  1362. flex: 1;
  1363. width: 60px;
  1364. height: 50%;
  1366. display: flex;
  1367. flex-direction: column;
  1368. justify-content: center;
  1369. align-items: center;
  1370. gap: 8px;
  1372. position: relative;
  1373. z-index: 5;
  1375. border: 0px;
  1377. background: transparent;
  1378. }
  1380. section.container-menu button:nth-child(2) {
  1381. margin-right: 10px;
  1382. }
  1384. section.container-menu button:nth-child(3) {
  1385. margin-right: 10px;
  1386. }
  1388. section.container-menu button:last-child {
  1389. margin-right: 5px;
  1390. }
  1392. section.container-menu button svg {
  1393. color: #ffffff;
  1394. }
  1396. section.container-menu button span {
  1397. color: #ffffff;
  1398. text-transform: uppercase;
  1399. font-size: 0.7rem;
  1400. }
  1402. section.container-toast {
  1403. width: 100%;
  1404. height: auto;
  1406. display: flex;
  1407. justify-content: center;
  1408. align-items: center;
  1410. position: absolute;
  1411. left: 0;
  1412. bottom: 2.5%;
  1413. right: 0;
  1414. z-index: 99999999;
  1416. padding: 10px 10px;
  1418. transform: scale(0);
  1419. }
  1421. section.container-toast div.toast {
  1422. width: auto;
  1423. height: auto;
  1425. display: flex;
  1426. align-items: center;
  1428. position: relative;
  1430. padding: 0px 5px 0px 0px;
  1432. border: 1px solid transparent;
  1433. border-radius: 10px;
  1435. background: #152039;
  1436. }
  1438. section.container-toast div.toast::before,
  1439. section.container-toast div.toast::after {
  1440. width: calc(100% + 10px);
  1441. height: calc(100% + 10px);
  1443. content: "";
  1445. position: absolute;
  1446. top: -5px;
  1447. left: -5px;
  1448. z-index: -1;
  1450. border-radius: 10px;
  1452. background: radial-gradient(circle,
  1453. #9f2fff,
  1454. #0bb1d3,
  1455. #7f47cb,
  1456. #00ffff,
  1457. #7a2cec,
  1458. #4adfdf,
  1459. #76fcfc,
  1460. #7f47cb,
  1461. #9f2fff,
  1462. #0bb1d3,
  1463. #7f47cb,
  1464. #00ffff,
  1465. #7a2cec,
  1466. #4adfdf);
  1467. background-size: 300%;
  1469. animation: 15s infinite ButtonStartVpnAnimation;
  1470. }
  1472. section.container-toast div.toast::after {
  1473. filter: blur(5px);
  1474. }
  1476. section.container-toast div.toast.error {
  1477. border: 1px solid #ff0000;
  1478. }
  1480. section.container-toast div.toast div.icon {
  1481. width: auto;
  1482. height: 100%;
  1484. display: flex;
  1485. justify-content: center;
  1486. align-items: center;
  1488. padding: 5px 4px 5px 7px;
  1490. border-top-left-radius: 10px;
  1491. border-bottom-left-radius: 10px;
  1493. overflow: hidden;
  1495. background: #152039;
  1496. }
  1498. section.container-toast div.toast.error div.icon {
  1499. border-right: 1px solid #ff0000;
  1500. }
  1502. section.container-toast div.toast div.icon img {
  1503. width: auto;
  1504. height: 100%;
  1505. min-height: 30px;
  1506. }
  1508. section.container-toast div.toast span {
  1509. margin-left: 5px;
  1511. color: #ffffff;
  1512. font-family: Arial, sans-serif;
  1513. font-size: 0.8rem;
  1514. font-weight: 300;
  1515. }
  1517. @media (max-width: 280px) {
  1518. section.container-menu button {
  1519. flex: 1;
  1520. width: 60px;
  1521. max-width: 60px;
  1522. height: 50%;
  1524. display: flex;
  1525. flex-direction: column;
  1526. justify-content: center;
  1527. align-items: center;
  1528. gap: 8px;
  1530. position: relative;
  1531. z-index: 5;
  1533. border: 0px;
  1535. background: transparent;
  1536. }
  1538. section.container-menu button:last-child {
  1539. margin-right: 10px;
  1540. }
  1542. section.container-menu button span {
  1543. font-size: 0.5rem;
  1544. }
  1545. }
  1547. @media only screen and (max-width: 576px) {
  1548. section.container-menu button {
  1549. flex: 1;
  1550. width: 60px;
  1551. max-width: 60px;
  1552. height: 50%;
  1554. display: flex;
  1555. flex-direction: column;
  1556. justify-content: center;
  1557. align-items: center;
  1558. gap: 8px;
  1560. position: relative;
  1561. z-index: 5;
  1563. border: 0px;
  1565. background: transparent;
  1566. }
  1568. section.container-menu button:last-child {
  1569. margin-right: 10px;
  1570. }
  1572. section.container-menu button span {
  1573. font-size: 0.5rem;
  1574. }
  1575. }
  1577. .spaceInDown {
  1578. -webkit-animation-name: spaceInDown;
  1579. animation-name: spaceInDown;
  1580. }
  1582. @-webkit-keyframes spaceInDown {
  1583. 0% {
  1584. opacity: 0;
  1585. transform-origin: 50% 100%;
  1586. transform: scale(0.2) translate(0%, 200%);
  1587. }
  1589. 100% {
  1590. opacity: 1;
  1591. transform-origin: 50% 100%;
  1592. transform: scale(1) translate(0%, 0%);
  1593. }
  1594. }
  1596. @keyframes spaceInDown {
  1597. 0% {
  1598. opacity: 0;
  1599. transform-origin: 50% 100%;
  1600. transform: scale(0.2) translate(0%, 200%);
  1601. }
  1603. 100% {
  1604. opacity: 1;
  1605. transform-origin: 50% 100%;
  1606. transform: scale(1) translate(0%, 0%);
  1607. }
  1608. }
  1610. .spaceOutDown {
  1611. -webkit-animation-name: spaceOutDown;
  1612. animation-name: spaceOutDown;
  1613. }
  1615. @-webkit-keyframes spaceOutDown {
  1616. 0% {
  1617. opacity: 1;
  1618. transform-origin: 50% 100%;
  1619. transform: scale(1) translate(0%, 0%);
  1620. }
  1622. 100% {
  1623. opacity: 0;
  1624. transform-origin: 50% 100%;
  1625. transform: scale(0.2) translate(0%, 200%);
  1626. }
  1627. }
  1629. @keyframes spaceOutDown {
  1630. 0% {
  1631. opacity: 1;
  1632. transform-origin: 50% 100%;
  1633. transform: scale(1) translate(0%, 0%);
  1634. }
  1636. 100% {
  1637. opacity: 0;
  1638. transform-origin: 50% 100%;
  1639. transform: scale(0.2) translate(0%, 200%);
  1640. }
  1641. }
  1643. .masterSshAnimatedTime {
  1644. -webkit-animation-duration: 1s;
  1645. animation-duration: 1s;
  1646. -webkit-animation-fill-mode: both;
  1647. animation-fill-mode: both;
  1648. }
  1650. @media (print),
  1651. (prefers-reduced-motion) {
  1652. .masterSshAnimatedTime {
  1653. -webkit-animation: unset !important;
  1654. animation: unset !important;
  1655. transition: none !important;
  1656. }
  1657. }
  1658. </style>
  1659. </head>
  1661. <body>
  1662. <main>
  1663. <section class="home active">
  1664. <header>
  1665. <img src="https://svgshare.com/i/w8x.svg" alt="LOGO DO APP" id="app_logo" />
  1666. </header>
  1668. <section class="container-carrier-selector-button">
  1669. <button type="button" id="carrier-list-button">
  1670. <span id="value-of-carrier-list-button">SELECIONE UMA CONFIGURAÇÃO</span>
  1671. </button>
  1672. </section>
  1674. <section class="container-button-start-stop-vpn">
  1675. <button type="button" title="Iniciar ou Parar conexão VPN" id="start-stop-vpn-button">
  1676. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-power"
  1677. viewBox="0 0 16 16">
  1678. <path d="M7.5 1v7h1V1h-1z" />
  1679. <path
  1680. d="M3 8.812a4.999 4.999 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812z" />
  1681. </svg>
  1682. </button>
  1683. </section>
  1685. <section class="container-status-connection active">
  1686. <button type="button">
  1687. <span id="state-value">LBL_STATE_DISCONNECTED</span>
  1688. </button>
  1689. </section>
  1691. <section class="container-local-ip active">
  1692. <button type="button">
  1693. <span id="local-ip-value">Localizando IP...</span>
  1694. </button>
  1695. </section>
  1697. <section class="container-version active">
  1698. <button type="button">
  1699. <span id="version">Carregando versão...</span>
  1700. </button>
  1701. </section>
  1702. </section>
  1704. <section class="carrier-list">
  1705. <header>
  1706. <svg id="back-carrier-container" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1707. class="bi bi-arrow-return-left" viewBox="0 0 16 16">
  1708. <path fill-rule="evenodd"
  1709. d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
  1710. </svg>
  1712. <h1>SELECIONE UMA OPÇÃO</h1>
  1713. </header>
  1715. <section></section>
  1716. </section>
  1718. <section class="profile">
  1719. <header>
  1720. <svg id="back-profile-container" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1721. class="bi bi-arrow-return-left" viewBox="0 0 16 16">
  1722. <path fill-rule="evenodd"
  1723. d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
  1724. </svg>
  1726. <h1>PERFIL</h1>
  1727. </header>
  1729. <form>
  1730. <fieldset>
  1731. <legend>
  1732. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1733. class="bi bi-person-exclamation" viewBox="0 0 16 16">
  1734. <path
  1735. d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm.256 7a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z" />
  1736. <path
  1737. d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-3.5-2a.5.5 0 0 0-.5.5v1.5a.5.5 0 0 0 1 0V11a.5.5 0 0 0-.5-.5Zm0 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z" />
  1738. </svg>
  1739. </legend>
  1741. <p>
  1742. Insira suas credenciais nos campos abaixo e clique no botão
  1743. "Salvar credenciais". Isso o levará de volta à página inicial do
  1744. aplicativo, onde você poderá se conectar e desfrutar da conexão.
  1745. </p>
  1746. </fieldset>
  1748. <fieldset>
  1749. <legend>Informe suas credenciais</legend>
  1751. <label for="usernamediv">Nome de usuário</label>
  1753. <div id="usernamediv">
  1754. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person"
  1755. viewBox="0 0 16 16">
  1756. <path
  1757. 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" />
  1758. </svg>
  1760. <input id="username" type="text" name="username" placeholder="Usuário" />
  1761. </div>
  1763. <label for="passworddiv">Senha</label>
  1765. <div id="passworddiv">
  1766. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key"
  1767. viewBox="0 0 16 16">
  1768. <path
  1769. 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" />
  1770. <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
  1771. </svg>
  1773. <input id="password" type="password" name="password" placeholder="Senha" />
  1775. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1776. class="bi bi-eye-slash hidden" id="eye-not-view" viewBox="0 0 16 16">
  1777. <path
  1778. 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" />
  1779. <path
  1780. 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" />
  1781. <path
  1782. 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" />
  1783. </svg>
  1785. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
  1786. id="eye-view" viewBox="0 0 16 16">
  1787. <path
  1788. 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" />
  1789. <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
  1790. </svg>
  1791. </div>
  1793. <label for="uuiddiv" class="hidden">UUID</label>
  1795. <div id="uuiddiv" class="hidden">
  1796. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fingerprint"
  1797. viewBox="0 0 16 16">
  1798. <path
  1799. 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" />
  1800. <path
  1801. 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" />
  1802. <path
  1803. 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" />
  1804. <path
  1805. 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" />
  1806. <path
  1807. 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" />
  1808. </svg>
  1810. <input id="uuid" type="text" placeholder="UUID" />
  1811. </div>
  1813. <button id="save-creds" type="button" title="Salvar informações de usuario e senha">
  1814. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-save"
  1815. viewBox="0 0 16 16">
  1816. <path
  1817. d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9.5a1 1 0 0 0-1 1v7.293l2.646-2.647a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L7.5 9.293V2a2 2 0 0 1 2-2H14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h2.5a.5.5 0 0 1 0 1H2z" />
  1818. </svg>
  1820. <span>Salvar credenciais</span>
  1821. </button>
  1822. </fieldset>
  1823. </form>
  1824. </section>
  1826. <section class="container-tools">
  1827. <header>
  1828. <svg id="back-tools-container" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1829. class="bi bi-arrow-return-left" viewBox="0 0 16 16">
  1830. <path fill-rule="evenodd"
  1831. d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
  1832. </svg>
  1834. <h1>FERRAMENTAS</h1>
  1835. </header>
  1837. <section>
  1838. <button type="button" id="register-button">
  1839. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-columns"
  1840. viewBox="0 0 16 16">
  1841. <path fill-rule="evenodd"
  1842. d="M0 .5A.5.5 0 0 1 .5 0h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 0 .5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 2h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 4h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 6h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 8h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z" />
  1843. </svg>
  1845. <div>
  1846. <h3>REGISTRO</h3>
  1847. <p>
  1848. Verifica todos os detalhes do que acontece ao abrir e conectar
  1849. no app.
  1850. </p>
  1851. </div>
  1853. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1854. viewBox="0 0 16 16">
  1855. <path fill-rule="evenodd"
  1856. d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
  1857. </svg>
  1858. </button>
  1860. <button type="button" id="speedtest-tool">
  1861. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-activity"
  1862. viewBox="0 0 16 16">
  1863. <path fill-rule="evenodd"
  1864. d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z" />
  1865. </svg>
  1867. <div>
  1868. <h3>SPEEDTEST</h3>
  1869. <p>Teste a velocidade da sua conexão</p>
  1870. </div>
  1872. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1873. viewBox="0 0 16 16">
  1874. <path fill-rule="evenodd"
  1875. d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
  1876. </svg>
  1877. </button>
  1879. <button type="button" id="hotspot-button-tools">
  1880. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-broadcast"
  1881. viewBox="0 0 16 16">
  1882. <path
  1883. d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707zm2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708zm5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708zm2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0z" />
  1884. </svg>
  1886. <div>
  1887. <h3>HOTSPOT</h3>
  1888. <p>
  1889. Aqui você pode compartilar sua conexão VPN usando o roteador do
  1890. seu celular.
  1891. </p>
  1892. </div>
  1894. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1895. viewBox="0 0 16 16">
  1896. <path fill-rule="evenodd"
  1897. d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
  1898. </svg>
  1899. </button>
  1901. <button type="button" id="apn-tool">
  1902. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-broadcast-pin"
  1903. viewBox="0 0 16 16">
  1904. <path
  1905. d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707zm2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708zm5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708zm2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM6 8a2 2 0 1 1 2.5 1.937V15.5a.5.5 0 0 1-1 0V9.937A2 2 0 0 1 6 8z" />
  1906. </svg>
  1908. <div>
  1909. <h3>CONFIGURAR APN</h3>
  1910. <p>Aqui você pode fazer ajustes no APN</p>
  1911. </div>
  1913. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1914. viewBox="0 0 16 16">
  1915. <path fill-rule="evenodd"
  1916. d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
  1917. </svg>
  1918. </button>
  1920. <button type="button" id="battery-tool">
  1921. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1922. class="bi bi-battery-charging" viewBox="0 0 16 16">
  1923. <path
  1924. d="M9.585 2.568a.5.5 0 0 1 .226.58L8.677 6.832h1.99a.5.5 0 0 1 .364.843l-5.334 5.667a.5.5 0 0 1-.842-.49L5.99 9.167H4a.5.5 0 0 1-.364-.843l5.333-5.667a.5.5 0 0 1 .616-.09z" />
  1925. <path d="M2 4h4.332l-.94 1H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h2.38l-.308 1H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" />
  1926. <path
  1927. d="M2 6h2.45L2.908 7.639A1.5 1.5 0 0 0 3.313 10H2V6zm8.595-2-.308 1H12a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H9.276l-.942 1H12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.405z" />
  1928. <path
  1929. d="M12 10h-1.783l1.542-1.639c.097-.103.178-.218.241-.34V10zm0-3.354V6h-.646a1.5 1.5 0 0 1 .646.646zM16 8a1.5 1.5 0 0 1-1.5 1.5v-3A1.5 1.5 0 0 1 16 8z" />
  1930. </svg>
  1932. <div>
  1933. <h3>OTIMIZAÇÃO DE BATERIA</h3>
  1934. <p>
  1935. Aqui você consegue desativar a otimização de bateria que acaba
  1936. encerrando o aplicativo sem a sua permissão!
  1937. </p>
  1938. </div>
  1940. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1941. viewBox="0 0 16 16">
  1942. <path fill-rule="evenodd"
  1943. d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
  1944. </svg>
  1945. </button>
  1947. <button type="button" id="checkuser-tool">
  1948. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1949. class="bi bi-person-lines-fill" viewBox="0 0 16 16">
  1950. <path
  1951. 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" />
  1952. </svg>
  1954. <div>
  1955. <h3>DETALHES DO LOGIN</h3>
  1956. <p>
  1957. Aqui você consegue visualizar alguns detalhes do seu perfil.
  1958. </p>
  1959. </div>
  1961. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1962. viewBox="0 0 16 16">
  1963. <path fill-rule="evenodd"
  1964. d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
  1965. </svg>
  1966. </button>
  1968. <button type="button" id="button-open-clear-data-app">
  1969. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash"
  1970. viewBox="0 0 16 16">
  1971. <path
  1972. 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" />
  1973. <path
  1974. 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" />
  1975. </svg>
  1977. <div>
  1978. <h3>LIMPAR DADOS</h3>
  1979. <p>
  1980. Aqui você pode fazer a limpeza do cache e dados do aplicativo.
  1981. </p>
  1982. </div>
  1984. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1985. viewBox="0 0 16 16">
  1986. <path fill-rule="evenodd"
  1987. d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
  1988. </svg>
  1989. </button>
  1991. <button type="button" id="button-open-terms-app">
  1992. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1993. class="bi bi-journal-medical" viewBox="0 0 16 16">
  1994. <path fill-rule="evenodd"
  1995. d="M8 4a.5.5 0 0 1 .5.5v.634l.549-.317a.5.5 0 1 1 .5.866L9 6l.549.317a.5.5 0 1 1-.5.866L8.5 6.866V7.5a.5.5 0 0 1-1 0v-.634l-.549.317a.5.5 0 1 1-.5-.866L7 6l-.549-.317a.5.5 0 0 1 .5-.866l.549.317V4.5A.5.5 0 0 1 8 4zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z" />
  1996. <path
  1997. 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" />
  1998. <path
  1999. 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" />
  2000. </svg>
  2002. <div>
  2003. <h3>TERMOS DE USO</h3>
  2004. <p>
  2005. Aqui você consegue ler os termos de uso e licença do aplicativo.
  2006. </p>
  2007. </div>
  2009. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  2010. viewBox="0 0 16 16">
  2011. <path fill-rule="evenodd"
  2012. d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
  2013. </svg>
  2014. </button>
  2015. </section>
  2016. </section>
  2018. <section class="logs-container">
  2019. <section>
  2020. <header>
  2021. <h1>REGISTRO</h1>
  2023. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2024. id="register-logs-close" viewBox="0 0 16 16">
  2025. <path
  2026. 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" />
  2027. </svg>
  2028. </header>
  2030. <section>
  2031. <p></p>
  2032. </section>
  2034. <button type="button" id="clear-logs">
  2035. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash"
  2036. viewBox="0 0 16 16">
  2037. <path
  2038. 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" />
  2039. <path
  2040. 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" />
  2041. </svg>
  2043. <span>LIMPAR REGISTRO</span>
  2044. </button>
  2045. </section>
  2046. </section>
  2048. <section class="loading">
  2049. <section>
  2050. <header>
  2051. <h1>CARREGANDO INFORMAÇÕES</h1>
  2053. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2054. id="loading-container-close" viewBox="0 0 16 16">
  2055. <path
  2056. 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" />
  2057. </svg>
  2058. </header>
  2060. <div class="loading"></div>
  2061. </section>
  2062. </section>
  2064. <section class="checkuser">
  2065. <section>
  2066. <header>
  2067. <h1>DETALHES DO USUÁRIO</h1>
  2069. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2070. id="checkuser-close" viewBox="0 0 16 16">
  2071. <path
  2072. 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" />
  2073. </svg>
  2074. </header>
  2076. <section>
  2077. <div>
  2078. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill"
  2079. viewBox="0 0 16 16">
  2080. <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
  2081. </svg>
  2083. <span id="checkuser-name">USUÁRIO: ALEX</span>
  2084. </div>
  2086. <div>
  2087. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  2088. class="bi bi-calendar-fill" viewBox="0 0 16 16">
  2089. <path
  2090. d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z" />
  2091. </svg>
  2093. <span id="checkuser-expires">EXPIRA EM: 25/09/2023</span>
  2094. </div>
  2096. <div>
  2097. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock-fill"
  2098. viewBox="0 0 16 16">
  2099. <path
  2100. d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
  2101. </svg>
  2103. <span id="checkuser-remaing-days">RESTA: 30 DIAS</span>
  2104. </div>
  2106. <div>
  2107. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone-fill"
  2108. viewBox="0 0 16 16">
  2109. <path
  2110. d="M3 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V2zm6 11a1 1 0 1 0-2 0 1 1 0 0 0 2 0z" />
  2111. </svg>
  2113. <span id="checkuser-total-conection">CONEXÕES: 1/10</span>
  2114. </div>
  2115. </section>
  2116. </section>
  2117. </section>
  2119. <section class="renew-alert">
  2120. <section>
  2121. <header>
  2122. <h1>RENOVE SEU ACESSO</h1>
  2124. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2125. id="renew-alert-close" viewBox="0 0 16 16">
  2126. <path
  2127. 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" />
  2128. </svg>
  2129. </header>
  2131. <section>
  2132. <p>
  2133. <bold id="renew-username">Caro usuário</bold>
  2134. <br /><br />
  2136. <italic>Seu período de acesso está chegando ao fim! Para continuar utilizando nossos serviços, entre em
  2137. contato para fazer a renovação.</italic>
  2138. <br /><br />
  2140. Atenciosamente, <bold>MASTER SSH</bold>
  2141. </p>
  2142. </section>
  2143. </section>
  2144. </section>
  2146. <section class="clean-data-app">
  2147. <section>
  2148. <header>
  2149. <h1>DESEJA CONFIRMAR ESSA AÇÃO ?</h1>
  2151. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2152. id="hidden-clear-data-app" viewBox="0 0 16 16">
  2153. <path
  2154. 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" />
  2155. </svg>
  2156. </header>
  2158. <section>
  2159. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  2160. class="bi bi-exclamation-lg" viewBox="0 0 16 16">
  2161. <path
  2162. d="M7.005 3.1a1 1 0 1 1 1.99 0l-.388 6.35a.61.61 0 0 1-1.214 0L7.005 3.1ZM7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z" />
  2163. </svg>
  2165. <h1>TEM CERTEZA DA AÇÃO ?</h1>
  2167. <p>
  2168. Ao efetuar a ação de limpar os dados do aplicativo, será possível
  2169. carregar somente as configurações mais recentes mediante uma
  2170. conexão ativa com a internet.
  2171. </p>
  2173. <button type="button" id="confirm-clean-data-app">
  2174. <span>CONFIRMAR</span>
  2175. </button>
  2176. </section>
  2177. </section>
  2178. </section>
  2180. <section class="hotspot-container">
  2181. <section>
  2182. <header>
  2183. <h1>ROTEADOR WIFI - HOTSPOT</h1>
  2185. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2186. id="hidden-hotspot-container" viewBox="0 0 16 16">
  2187. <path
  2188. 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" />
  2189. </svg>
  2190. </header>
  2192. <section>
  2193. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-router-fill"
  2194. viewBox="0 0 16 16">
  2195. <path
  2196. 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" />
  2197. <path d="M6.94 4.44a1.5 1.5 0 0 1 2.12 0 .5.5 0 0 0 .708-.708 2.5 2.5 0 0 0-3.536 0 .5.5 0 0 0 .707.707Z" />
  2198. <path
  2199. d="M2.974 2.342a.5.5 0 1 0-.948.316L3.806 8H1.5A1.5 1.5 0 0 0 0 9.5v2A1.5 1.5 0 0 0 1.5 13H2a.5.5 0 0 0 .5.5h2A.5.5 0 0 0 5 13h6a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5h.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 14.5 8h-2.306l1.78-5.342a.5.5 0 1 0-.948-.316L11.14 8H4.86L2.974 2.342ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm1.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z" />
  2200. <path d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
  2201. </svg>
  2203. <h1 id="title-hotspot">ROTEAMENTO DESLIGADO</h1>
  2205. <p>
  2206. Ao ativar o hotspot com compartilhamento de VPN do seu celular, um
  2207. IP local é gerado no seu dispositivo. Este IP é usado como proxy
  2208. no dispositivo conectado à sua rede Wi-Fi.
  2209. <br />
  2210. <br />
  2212. <b>SIGA ESTES PASSOS IMPORTANTES</b>
  2214. <br />
  2215. <br />
  2216. 1 - Ligue o roteador do celular primeiro.
  2217. <br /><br />
  2218. 2 - Ative o compartilhamento de VPN.
  2219. <br /><br />
  2220. 3 - Use o botão para controlar o roteador.
  2221. <br /><br />
  2222. 4 - Encontre o segundo IP na barra de notificações.
  2223. <br /><br />
  2224. 5 - Copie o segundo IP e use como proxy no dispositivo conectado à
  2225. rede.
  2226. <br />
  2227. <br />
  2229. Lembre-se: O segundo IP é seu proxy. Isso garantirá o correto
  2230. funcionamento do compartilhamento de VPN via hotspot do celular.
  2231. </p>
  2233. <button type="button" id="enable-hotspot">
  2234. <span id="value-button-hotspot">LIGAR HOTSPOT</span>
  2235. </button>
  2236. </section>
  2237. </section>
  2238. </section>
  2240. <section class="terms-container">
  2241. <section>
  2242. <header>
  2243. <h1>TERMOS DE USO</h1>
  2245. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2246. id="hidden-terms-container" viewBox="0 0 16 16">
  2247. <path
  2248. 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" />
  2249. </svg>
  2250. </header>
  2252. <p>
  2253. Importante: Ao utilizar o nosso aplicativo, é fundamental que você
  2254. esteja ciente e concorde com os seguintes pontos:
  2256. <br /><br /><br />
  2258. 1° - Nosso suporte está disponível para ajudar clientes que
  2259. enfrentam problemas como dificuldades de conexão, informações
  2260. incorretas, ou se o aplicativo não está instalado corretamente.
  2262. <br /><br />
  2264. 2° - Não somos responsáveis por questões relacionadas à manutenção
  2265. da sua operadora, quedas na conexão causadas por fatores externos ou
  2266. problemas climáticos que possam afetar a velocidade da sua internet
  2267. através da VPN.
  2269. <br /><br />
  2271. 3° - Caso haja uma interrupção no serviço devido à operadora, não
  2272. efetuamos reembolsos. No entanto, os dias em que o serviço ficar
  2273. indisponível serão compensados quando a situação se normalizar,
  2274. visto que há custos associados à manutenção dos servidores.
  2276. <br /><br />
  2278. 4° - Não nos responsabilizamos por sites e jogos que impeçam o uso
  2279. da nossa VPN.
  2281. <br /><br />
  2283. 5° - É permitido usar apenas o número de dispositivos estipulado no
  2284. seu contrato com o revendedor autorizado.
  2286. <br /><br />
  2288. 6° - É estritamente proibido o uso de aplicativos torrent ou P2P,
  2289. pois eles podem prejudicar o desempenho dos nossos servidores.
  2291. <br /><br />
  2293. 7° - É importante que, independentemente da sua operadora, você faça
  2294. uma recarga a cada 2 meses para garantir um serviço contínuo.
  2296. <br /><br />
  2298. 8° - Mantenha o aplicativo sempre atualizado, pois as atualizações
  2299. são necessárias para garantir o bom funcionamento do serviço.
  2301. <br /><br /><br /><br />
  2303. Agradecemos por escolher o nosso aplicativo e desejamos a você uma
  2304. ótima experiência de navegação!
  2305. </p>
  2306. </section>
  2307. </section>
  2309. <section class="container-error">
  2310. <header>
  2311. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  2312. class="bi bi-arrow-return-left" viewBox="0 0 16 16">
  2313. <path fill-rule="evenodd"
  2314. d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
  2315. </svg>
  2317. <h1>ERROR</h1>
  2318. </header>
  2320. <section>
  2321. <h1 id="error-title"></h1>
  2323. <p id="error-log"></p>
  2324. </section>
  2325. </section>
  2327. <section class="container-toast masterSshAnimatedTime">
  2328. <div class="toast">
  2329. <div class="icon">
  2330. <img
  2331. src="data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Camada_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 255.17 400'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%239f2eff;%7D.cls-3%7Bfill:none;stroke:url(%23Gradiente_sem_nome_253-3);%7D.cls-3,.cls-4%7Bstroke-miterlimit:10;%7D.cls-4%7Bfill:url(%23Gradiente_sem_nome_253);stroke:url(%23Gradiente_sem_nome_253-2);%7D.cls-5%7Bfill:%230ab1d3;%7D%3C/style%3E%3ClinearGradient id='Gradiente_sem_nome_253' x1='76.24' y1='76.85' x2='139.38' y2='76.85' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230bb1d3'/%3E%3Cstop offset='1' stop-color='%239f2fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='Gradiente_sem_nome_253-2' x1='75.93' x2='139.69' xlink:href='%23Gradiente_sem_nome_253'/%3E%3ClinearGradient id='Gradiente_sem_nome_253-3' x1='72.44' y1='201.84' x2='127.55' y2='201.84' xlink:href='%23Gradiente_sem_nome_253'/%3E%3C/defs%3E%3Ccircle class='cls-5' cx='167.12' cy='32.88' r='32.88'/%3E%3Ccircle class='cls-1' cx='42.09' cy='132.11' r='42.09'/%3E%3Ccircle class='cls-2' cx='169.67' cy='314.5' r='85.5'/%3E%3Cline class='cls-4' x1='139.38' y1='51.86' x2='76.24' y2='101.85'/%3E%3Cline class='cls-3' x1='72.84' y1='165.78' x2='127.15' y2='237.9'/%3E%3C/svg%3E"
  2332. alt="Icone do toast" />
  2333. </div>
  2335. <span class="text">Procurando atualizações</span>
  2336. </div>
  2337. </section>
  2338. </main>
  2340. <section class="container-menu">
  2341. <button id="home" type="button" title="Inicio">
  2342. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house"
  2343. viewBox="0 0 16 16">
  2344. <defs>
  2345. <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
  2346. <stop offset="0%" stop-color="#0bb1d3" />
  2347. <stop offset="100%" stop-color="#9f2fff" />
  2348. </linearGradient>
  2349. </defs>
  2350. <path
  2351. 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" />
  2352. </svg>
  2354. <span>Inicio</span>
  2355. </button>
  2357. <button id="login" type="button" title="Login">
  2358. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person"
  2359. viewBox="0 0 16 16">
  2360. <path
  2361. 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" />
  2362. </svg>
  2364. <span>Perfil</span>
  2365. </button>
  2367. <button id="tools" type="button" title="Ferramentas">
  2368. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-nut"
  2369. viewBox="0 0 16 16">
  2370. <path
  2371. d="m11.42 2 3.428 6-3.428 6H4.58L1.152 8 4.58 2h6.84zM4.58 1a1 1 0 0 0-.868.504l-3.428 6a1 1 0 0 0 0 .992l3.428 6A1 1 0 0 0 4.58 15h6.84a1 1 0 0 0 .868-.504l3.429-6a1 1 0 0 0 0-.992l-3.429-6A1 1 0 0 0 11.42 1H4.58z" />
  2372. <path
  2373. d="M6.848 5.933a2.5 2.5 0 1 0 2.5 4.33 2.5 2.5 0 0 0-2.5-4.33zm-1.78 3.915a3.5 3.5 0 1 1 6.061-3.5 3.5 3.5 0 0 1-6.062 3.5z" />
  2374. </svg>
  2376. <span>Ferramentas</span>
  2377. </button>
  2379. <button id="update" type="button" title="Atualizar">
  2380. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise"
  2381. viewBox="0 0 16 16">
  2382. <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
  2383. <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
  2384. </svg>
  2386. <span>Atualizar</span>
  2387. </button>
  2388. </section>
  2390. <!-- FUNÇÕES DO APP -->
  2391. <script>
  2392. const appGetStatusbarHeightSize = () => DtGetStatusBarHeight.execute()
  2393. const appGetNavbarHeightSize = () => DtGetNavigationBarHeight.execute()
  2395. const appTranslateText = (label) => DtTranslateText.execute(label)
  2396. const appGetConfigLabel = (label) => DtGetAppConfig.execute(label)
  2398. const appGetCarrierName = () => `${Android.getNetworkName()}`
  2399. const appGetLocalIp = () => `${Android.getLocalIP()}`
  2401. const AppUpdate = () => DtStartAppUpdate.execute()
  2403. const appAllConfigs = () => DtGetConfigs.execute()
  2404. const appSetConfig = (id) => DtSetConfig.execute(id)
  2405. const appGetDefaultConfig = () => DtGetDefaultConfig.execute()
  2406. const appGetConfigVersion = () =>
  2407. `${DtGetLocalConfigVersion.execute() ?? "1.0"}`
  2409. const appGetUsername = () => DtUsername.get()
  2410. const appSetUsername = (username) => DtUsername.set(username)
  2411. const appGetPassword = () => DtPassword.get()
  2412. const appSetPassword = (password) => DtPassword.set(password)
  2413. const appGetUUID = () => DtUuid.get()
  2414. const appSetUUID = (uuid) => DtUuid.set(uuid)
  2416. const appGetConnectionState = () => DtGetVpnState.execute()
  2417. const appStartConnection = () => DtExecuteVpnStart.execute()
  2418. const appStopConnection = () => DtExecuteVpnStop.execute()
  2420. const appGetStatusHotspot = () => DtGetStatusHotSpotService.execute()
  2421. const appStartHotspot = () => DtStartHotSpotService.execute()
  2422. const appStopHotspot = () => DtStopHotSpotService.execute()
  2424. const appGetLogs = () => DtGetLogs.execute()
  2425. const appCleanLogs = () => DtClearLogs.execute()
  2427. const appBatteryOptimize = () => DtIgnoreBatteryOptimizations.execute()
  2428. const appApnConfiguration = () => DtStartApnActivity.execute()
  2429. const appStartCheckUser = () => DtStartCheckUser.execute()
  2430. const appIntoBrowser = (url) => DtStartWebViewActivity.execute(url)
  2431. const appClearData = () => DtCleanApp.execute()
  2432. </script>
  2434. <!-- VARIAVEIS LET -->
  2435. <script>
  2436. let timeoutId
  2437. </script>
  2439. <!-- DOM WRAPPER -->
  2440. <script>
  2441. const Dom = (selector) => {
  2442. const _elements = document.querySelectorAll(selector)
  2444. const wrapper = {
  2445. on(listeners) {
  2446. for (const [event, listener] of Object.entries(listeners)) {
  2447. _elements.forEach((element) => {
  2448. element.addEventListener(event, listener)
  2449. })
  2450. }
  2452. return wrapper
  2453. },
  2454. addClass: (...tokens) => {
  2455. _elements.forEach((element) => {
  2456. element.classList.add(...tokens)
  2457. })
  2459. return wrapper
  2460. },
  2461. removeClass: (...tokens) => {
  2462. _elements.forEach((element) => {
  2463. element.classList.remove(...tokens)
  2464. })
  2466. return wrapper
  2467. },
  2468. toggleClass: (token, force) => {
  2469. _elements.forEach((element) => {
  2470. element.classList.toggle(token, force)
  2471. })
  2473. return wrapper
  2474. },
  2475. style(styles) {
  2476. for (const [property, value] of Object.entries(styles)) {
  2477. console.log(value)
  2478. _elements.forEach((element) => {
  2479. element.style[property] = value
  2480. })
  2481. }
  2483. return wrapper
  2484. },
  2485. attr(attrs) {
  2486. for (const [name, value] of Object.entries(attrs)) {
  2487. _elements.forEach((element) => element.setAttribute(name, value))
  2488. }
  2490. return wrapper
  2491. },
  2492. html(value) {
  2493. _elements.forEach((element) => (element.innerHTML = value))
  2494. return wrapper
  2495. },
  2496. }
  2498. return wrapper
  2499. }
  2500. </script>
  2502. <!-- AÇÕES EM VARIAVEIS ROOT -->
  2503. <script>
  2504. document.documentElement.style.setProperty(
  2505. "--space-status-bar",
  2506. `${appGetStatusbarHeightSize() + 10}px`
  2507. )
  2508. document.documentElement.style.setProperty(
  2509. "--space-nav-bar",
  2510. `${appGetNavbarHeightSize() + 10}px`
  2511. )
  2512. </script>
  2514. <!-- VARIAVEIS -->
  2515. <script>
  2516. const Body = Dom("body")
  2518. const HomeHeader = Dom("section.home header")
  2519. const LogoHeader = Dom("#app_logo")
  2521. const HomeContainer = Dom("section.home")
  2522. const CarrierContainer = Dom("section.carrier-list")
  2523. const ProfileContainer = Dom("section.profile")
  2524. const ToolsContainer = Dom("section.container-tools")
  2525. const RegisterContainer = Dom("section.logs-container")
  2526. const ErrorContainer = Dom("section.container-error")
  2527. const LoadingContainer = Dom("section.loading")
  2528. const CheckuserContainer = Dom("section.checkuser")
  2529. const ClearDataContainer = Dom("section.clean-data-app")
  2530. const HotspotContainer = Dom("section.hotspot-container")
  2531. const TermsContainer = Dom("section.terms-container")
  2532. const RenewContainer = Dom("section.renew-alert")
  2534. const BackButtonCarrierContainer = Dom("#back-carrier-container")
  2535. const BackProfileContainer = Dom("#back-profile-container")
  2536. const BackToolsContainer = Dom("#back-tools-container")
  2537. const BackRegisterContainer = Dom("#register-logs-close")
  2538. const BackErrorContainer = Dom("section.container-error header svg")
  2539. const BackLoadingContainer = Dom("#loading-container-close")
  2540. const BackCheckuserContainer = Dom("#checkuser-close")
  2541. const BackClearDataContainer = Dom("#hidden-clear-data-app")
  2542. const BackHotspotContainer = Dom("#hidden-hotspot-container")
  2543. const BackTermsContainer = Dom("#hidden-terms-container")
  2544. const BackRenewContainer = Dom("#renew-alert-close")
  2546. const RenewUsername = Dom("#renew-username")
  2548. const ButtonOfCarrierList = Dom("#carrier-list-button")
  2549. const ValueOfCarrierListButton = Dom("#value-of-carrier-list-button")
  2551. const ButtonVpnStartOrStop = Dom("#start-stop-vpn-button")
  2553. const StatesConnectionValue = Dom("#state-value")
  2554. const LocalIpValue = Dom('#local-ip-value')
  2555. const ConfigVersion = Dom("#version")
  2557. const LabelDivUser = Dom("label[for='usernamediv']")
  2558. const LabelDivPassword = Dom("label[for='passworddiv']")
  2559. const LabelUUID = Dom("label[for='uuiddiv']")
  2560. const DivUsername = Dom("#usernamediv")
  2561. const DivPassword = Dom("#passworddiv")
  2562. const DivUUID = Dom("#uuiddiv")
  2563. const InputUsername = Dom("#username")
  2564. const InputPassword = Dom("#password")
  2565. const InputUUID = Dom("#uuid")
  2566. const EyeViewPasswordInput = Dom("#eye-view")
  2567. const EyeNotViewPasswordInput = Dom("#eye-not-view")
  2568. const ButtonSaveCreds = Dom("#save-creds")
  2570. const CheckuserName = Dom("#checkuser-name")
  2571. const CheckuserExpires = Dom("#checkuser-expires")
  2572. const CheckuserRemainingDays = Dom("#checkuser-remaing-days")
  2573. const CheckuserTotalConnection = Dom("#checkuser-total-conection")
  2575. const RegisterLogsText = Dom("section.logs-container section section p")
  2577. const ToastContainer = Dom("section.container-toast")
  2578. const Toast = Dom("section.container-toast div.toast")
  2579. const ToastIcon = Dom("section.container-toast div.toast div.icon")
  2580. const ToastText = Dom("section.container-toast div.toast span.text")
  2582. const HomeButton = Dom("#home")
  2583. const LoginButton = Dom("#login")
  2584. const ToolsButton = Dom("#tools")
  2585. const UpdateButton = Dom("#update")
  2587. const ButtonRegister = Dom("#register-button")
  2588. const ButtonCleanRegisterLogs = Dom("#clear-logs")
  2590. const ButtonStartStopHotspot = Dom("#enable-hotspot")
  2591. const ButtonOpenHotspotContainer = Dom("#hotspot-button-tools")
  2592. const TitleHotspotContainer = Dom("#title-hotspot")
  2593. const ValueOfButtonHotspotContainer = Dom("#value-button-hotspot")
  2595. const ButtonOpenClearDataContainer = Dom("#button-open-clear-data-app")
  2596. const ButtonConfirmClearData = Dom("#confirm-clean-data-app")
  2598. const ButtonOpenSpeedtest = Dom("#speedtest-tool")
  2599. const ButtonOpenApnConfig = Dom("#apn-tool")
  2600. const ButtonOpenBatteryOptimization = Dom("#battery-tool")
  2601. const ButtonOpenCheckuser = Dom("#checkuser-tool")
  2602. const ButtonOpenTerms = Dom("#button-open-terms-app")
  2604. const ErrorTitle = Dom("#error-title")
  2605. const ErrorDescription = Dom("#error-log")
  2606. </script>
  2608. <!-- FUNÇÕES DO LAYOUT -->
  2609. <script>
  2610. const appLogo = () => {
  2611. const logo = appGetConfigLabel("APP_LOGO")
  2613. if (!logo) {
  2614. return ""
  2615. } else {
  2616. return `${JSON.parse(logo).value}`
  2617. }
  2618. }
  2619. const appBackground = () => {
  2620. const background_type = appGetConfigLabel("APP_BACKGROUND_TYPE")
  2621. const background_color = appGetConfigLabel("APP_BACKGROUND_COLOR")
  2622. const background_image = appGetConfigLabel("APP_BACKGROUND_IMAGE")
  2624. if (!background_type) {
  2625. return ""
  2626. } else if (JSON.parse(background_type)?.value === "COLOR") {
  2627. return `${JSON.parse(background_color).value}`
  2628. } else {
  2629. return `url(${JSON.parse(background_image).value})`
  2630. }
  2631. }
  2633. const getConfigName = () => {
  2634. if (!appGetDefaultConfig()) {
  2635. return `${appTranslateText("LBL_CHOOSE_CONFIG")}`
  2636. } else {
  2637. return `${JSON.parse(appGetDefaultConfig())?.name}`
  2638. }
  2639. }
  2641. const getUsernameValue = () => `${appGetUsername() ?? ""}`
  2642. const getPasswordValue = () => `${appGetPassword() ?? ""}`
  2643. const getUUIDValue = () => `${appGetUUID() ?? ""}`
  2645. const getUsernamePlaceholder = () => `${appTranslateText("LBL_USERNAME")}`
  2646. const getPassowrdPlaceholder = () => `${appTranslateText("LBL_PASSWORD")}`
  2647. const getUUIDPlaceholder = () => `${appTranslateText("LBL_UUID")}`
  2649. const toggleInput = () => {
  2650. if (checkV2ray()) {
  2651. LabelDivUser.style({ display: "none" })
  2652. DivUsername.style({ display: "none" })
  2654. LabelDivPassword.style({ display: "none" })
  2655. DivPassword.style({ display: "none" })
  2657. LabelUUID.removeClass("hidden")
  2658. DivUUID.removeClass("hidden")
  2659. } else {
  2660. LabelDivUser.style({ display: "block" })
  2661. DivUsername.style({ display: "flex" })
  2663. LabelDivPassword.style({ display: "block" })
  2664. DivPassword.style({ display: "flex" })
  2666. LabelUUID.addClass("hidden")
  2667. DivUUID.addClass("hidden")
  2668. }
  2669. }
  2670. const showInputPasswordValue = () => {
  2671. EyeViewPasswordInput.addClass("hidden")
  2672. EyeNotViewPasswordInput.removeClass("hidden")
  2673. InputPassword.attr({ type: "text" })
  2674. }
  2675. const hiddenInputPasswordValue = () => {
  2676. EyeViewPasswordInput.removeClass("hidden")
  2677. EyeNotViewPasswordInput.addClass("hidden")
  2678. InputPassword.attr({ type: "password" })
  2679. }
  2681. const checkV2ray = () => {
  2682. const data = JSON.parse(appGetDefaultConfig())
  2684. if (!appGetDefaultConfig()) {
  2685. return false
  2686. } else if (data?.mode?.toLowerCase()?.startsWith("v2ray")) {
  2687. return true
  2688. } else {
  2689. return false
  2690. }
  2691. }
  2693. const getConnectionState = () => {
  2694. const rootStyles = getComputedStyle(document.documentElement)
  2696. const defaultColor = "--default-background-color"
  2697. const connectedColor = "--connected-background-color"
  2698. const connectingColor = "--connecting-background-color"
  2699. const errorColor = "--error-background-color"
  2701. const states = {
  2702. disconnected: () => {
  2703. const gradientColor = rootStyles.getPropertyValue(defaultColor)
  2705. document.documentElement.style.setProperty(
  2706. defaultColor,
  2707. "linear-gradient(135deg,#9f2fff,#0bb1d3,#7f47cb,#00ffff,#7a2cec,#4adfdf,#76fcfc,#7f47cb,#9f2fff,#0bb1d3,#7f47cb,#00ffff,#7a2cec,#4adfdf)"
  2708. )
  2710. return states
  2711. },
  2712. connecting: () => {
  2713. const gradientColor = rootStyles.getPropertyValue(connectingColor)
  2715. document.documentElement.style.setProperty(
  2716. defaultColor,
  2717. gradientColor
  2718. )
  2720. return states
  2721. },
  2722. connected: () => {
  2723. const gradientColor = rootStyles.getPropertyValue(connectedColor)
  2725. document.documentElement.style.setProperty(
  2726. defaultColor,
  2727. gradientColor
  2728. )
  2730. return states
  2731. },
  2732. error: () => {
  2733. const gradientColor = rootStyles.getPropertyValue(errorColor)
  2735. document.documentElement.style.setProperty(
  2736. defaultColor,
  2737. gradientColor
  2738. )
  2740. return states
  2741. },
  2742. }
  2744. return states
  2745. }
  2747. const connectionState = (state) => {
  2748. const connectionValue = `${state || appGetConnectionState()}`
  2750. switch (connectionValue) {
  2751. case "DISCONNECTED":
  2752. getConnectionState().disconnected()
  2753. StatesConnectionValue.html(appTranslateText('LBL_STATE_DISCONNECTED'))
  2754. break
  2755. case "CONNECTING":
  2756. showRegisterContainer()
  2757. getConnectionState().connecting()
  2758. StatesConnectionValue.html(appTranslateText('LBL_STATE_CONNECTING'))
  2759. break
  2760. case "CONNECTED":
  2761. getConnectionState().connected()
  2762. StatesConnectionValue.html(appTranslateText('LBL_STATE_CONNECTED'))
  2763. break
  2764. case "STOPPING":
  2765. getConnectionState().connecting()
  2766. StatesConnectionValue.html(appTranslateText('LBL_STATE_STOPPING'))
  2767. break
  2768. case "NO_NETWORK":
  2769. getConnectionState().error()
  2770. StatesConnectionValue.html(appTranslateText('LBL_STATE_NO_NETWORK'))
  2771. break
  2772. case "AUTH":
  2773. getConnectionState().connecting()
  2774. StatesConnectionValue.html(appTranslateText('LBL_STATE_AUTH'))
  2775. break
  2776. case "AUTH_FAILED":
  2777. getConnectionState().connecting()
  2778. StatesConnectionValue.html(appTranslateText('LBL_STATE_AUTH_FAILED'))
  2779. break
  2780. }
  2781. }
  2783. const startStopConnection = () => {
  2784. const state = appGetConnectionState()
  2786. if (getUsernameValue().length >= 3 && getPasswordValue().length >= 3) {
  2788. if (appGetDefaultConfig()) {
  2789. state !== "CONNECTED" ? appStartConnection() : appStopConnection()
  2790. } else {
  2791. showCarrierListContainer()
  2792. }
  2793. } else {
  2794. showProfileContainer()
  2795. }
  2796. }
  2798. const writeLogsRegister = () => {
  2799. const data = JSON.parse(appGetLogs())
  2801. let logs = ""
  2803. data.forEach((item) => {
  2804. logs += `${Object.keys(item)} ${item[Object.keys(item)]} <br>`
  2805. })
  2807. RegisterLogsText.html(logs)
  2809. document.querySelector("section.logs-container.active section section").scrollTop =
  2810. document.querySelector(
  2811. "section.logs-container.active section section p"
  2812. ).scrollHeight
  2813. }
  2815. const writeCarrierList = () => {
  2816. const container = document.querySelector("section.carrier-list section")
  2817. const existingCategories = container.querySelectorAll("div").length
  2819. container.innerHTML = ""
  2821. const data = JSON.parse(appAllConfigs())
  2822. data.sort((a, b) => a.sorter - b.sorter)
  2823. data.forEach((item, index) =>
  2824. item.items.sort((a, b) => a.sorter - b.sorter)
  2825. )
  2826. data.forEach((category) => {
  2827. const div = document.createElement("div")
  2828. const h1 = document.createElement("h1")
  2830. h1.innerHTML = category.name
  2832. const ul = document.createElement("ul")
  2834. category.items.forEach((item) => {
  2835. const li = document.createElement("li")
  2837. li.innerHTML = `<img src="${item.icon}" alt="icon" /> <span>${item.name}</span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" /></svg>`
  2839. li.addEventListener("click", (e) => {
  2840. appSetConfig(item.id)
  2841. hiddenCarrierListContainer()
  2842. document
  2843. .querySelectorAll("li")
  2844. .forEach((item, index) => item.classList.remove("active"))
  2845. li.classList.add("active")
  2846. writeValueOnButtonOfCarrierList(item.name)
  2847. })
  2849. ul.appendChild(li)
  2850. })
  2852. div.appendChild(h1)
  2853. div.appendChild(ul)
  2855. container.appendChild(div)
  2856. })
  2857. }
  2858. const writeValueOnButtonOfCarrierList = (value) =>
  2859. ValueOfCarrierListButton.html(value ?? getConfigName())
  2861. const showToastContainer = (value) => {
  2862. Toast.style({ borderColor: "#051d40" })
  2863. ToastIcon.style({ borderRight: "1px solid #051d40" })
  2865. writeToastText(value)
  2867. ToastContainer.removeClass("masterSshAnimatedTime", "spaceOutDown")
  2868. ToastContainer.removeClass("masterSshAnimatedTime", "spaceInDown")
  2870. setTimeout(() => {
  2871. ToastContainer.addClass("masterSshAnimatedTime", "spaceInDown")
  2872. }, 100)
  2874. clearTimeout(timeoutId)
  2876. timeoutId = setTimeout(() => hiddenToastContainer(), 6000)
  2877. }
  2878. const showToastContainerWithError = (value) => {
  2879. Toast.style({ borderColor: "#FF0000" })
  2880. ToastIcon.style({ borderRight: "1px solid #FF0000" })
  2882. writeToastText(value)
  2884. ToastContainer.removeClass("masterSshAnimatedTime", "spaceOutDown")
  2885. ToastContainer.removeClass("masterSshAnimatedTime", "spaceInDown")
  2887. setTimeout(() => {
  2888. ToastContainer.addClass("masterSshAnimatedTime", "spaceInDown")
  2889. }, 100)
  2891. clearTimeout(timeoutId)
  2892. timeoutId = setTimeout(() => hiddenToastContainer(), 6000)
  2893. }
  2894. const writeToastText = (text) => {
  2895. ToastText.html(text)
  2896. }
  2897. const hiddenToastContainer = () => {
  2898. ToastContainer.removeClass("masterSshAnimatedTime", "spaceInDown")
  2899. ToastContainer.removeClass("masterSshAnimatedTime", "spaceOutDown")
  2900. ToastContainer.addClass("masterSshAnimatedTime", "spaceOutDown")
  2901. }
  2903. const showHomeContainer = () => {
  2904. hiddenAllContainers()
  2905. HomeContainer.addClass("active")
  2906. }
  2908. const showCarrierListContainer = () => {
  2909. writeCarrierList()
  2910. hiddenAllContainers()
  2911. CarrierContainer.addClass("active")
  2912. }
  2913. const hiddenCarrierListContainer = () => {
  2914. showHomeContainer()
  2915. }
  2917. const showProfileContainer = () => {
  2918. hiddenAllContainers()
  2919. ProfileContainer.addClass("active")
  2920. }
  2921. const hiddenProfileContainer = () => {
  2922. showHomeContainer()
  2923. }
  2925. const showToolsContainer = () => {
  2926. hiddenAllContainers()
  2927. ToolsContainer.addClass("active")
  2928. }
  2929. const hiddenToolsContainer = () => {
  2930. showHomeContainer()
  2931. }
  2933. const showRegisterContainer = () => {
  2934. RegisterContainer.addClass("active")
  2935. }
  2936. const hiddenRegisterContainer = () => {
  2937. RegisterContainer.removeClass('active')
  2938. }
  2940. const writeErrorContainer = (model) => {
  2941. const data = JSON.parse(model)
  2943. ErrorTitle.html(data.title)
  2944. ErrorDescription.html(data.content)
  2946. showErrorContainer()
  2947. }
  2948. const showErrorContainer = () => {
  2949. hiddenAllContainers()
  2950. ErrorContainer.addClass("active")
  2951. }
  2952. const hiddenErrorContainer = () => {
  2953. showHomeContainer()
  2954. }
  2956. const showLoadingContainer = () => {
  2957. const data = JSON.parse(appGetDefaultConfig())
  2959. if (data?.url_check_user) {
  2960. LoadingContainer.addClass("active")
  2961. }
  2963. hiddenRegisterContainer()
  2964. }
  2965. const hiddenLoadingContainer = () => {
  2966. LoadingContainer.removeClass("active")
  2967. }
  2969. const showRenewContainer = () => {
  2970. RenewContainer.addClass('active')
  2971. }
  2972. const hiddenRenewContainer = () => {
  2973. RenewContainer.removeClass('active')
  2974. }
  2976. const writeCheckuserContainer = (model) => {
  2977. const data = JSON.parse(model)
  2979. CheckuserName.html(`USUÁRIO: ${data.username}`)
  2980. CheckuserExpires.html(`EXPIRA EM: ${data.expiration_date}`)
  2981. CheckuserRemainingDays.html(`RESTA: ${data.expiration_days} DIAS`)
  2982. CheckuserTotalConnection.html(
  2983. `CONEXÕES: ${data.count_connections}/${data.limit_connections}`
  2984. )
  2986. if (data.expiration_days <= 5) {
  2987. RenewUsername.html(`Caro ${data.username}`)
  2988. showRenewContainer()
  2989. } else {
  2990. hiddenRenewContainer()
  2991. }
  2993. showCheckuserContainer()
  2994. }
  2995. const showCheckuserContainer = () => {
  2996. hiddenLoadingContainer()
  2997. CheckuserContainer.addClass("active")
  2998. }
  2999. const hiddenCheckuserContainer = () => {
  3000. CheckuserContainer.removeClass("active")
  3001. }
  3003. const showClearDataAppContainer = () => {
  3004. ClearDataContainer.addClass("active")
  3005. }
  3006. const hiddenClearDataAppContainer = () => {
  3007. ClearDataContainer.removeClass("active")
  3008. }
  3010. const writeLocalIpValue = () => {
  3011. LocalIpValue.html(`${appGetCarrierName()}: ${appGetLocalIp()}`)
  3012. }
  3014. const startHotspot = () => {
  3015. appStartHotspot()
  3017. TitleHotspotContainer.html("ROTEAMENTO LIGADO")
  3018. ValueOfButtonHotspotContainer.html("DESLIGAR HOTSPOT")
  3019. }
  3020. const stopHotspot = () => {
  3021. appStopHotspot()
  3023. TitleHotspotContainer.html("ROTEAMENTO DESLIGADO")
  3024. ValueOfButtonHotspotContainer.html("LIGAR HOTSPOT")
  3025. }
  3026. const toggleHotspot = () => {
  3027. appGetStatusHotspot() === "STOPPED" ? startHotspot() : stopHotspot()
  3028. }
  3029. const setStatusHotspot = () => {
  3030. if (appGetStatusHotspot() === "STOPPED") {
  3031. TitleHotspotContainer.html("ROTEAMENTO DESLIGADO")
  3032. ValueOfButtonHotspotContainer.html("LIGAR HOTSPOT")
  3033. } else {
  3034. TitleHotspotContainer.html("ROTEAMENTO LIGADO")
  3035. ValueOfButtonHotspotContainer.html("DESLIGAR HOTSPOT")
  3036. }
  3037. }
  3038. const showHotspotContainer = () => {
  3039. HotspotContainer.addClass("active")
  3040. }
  3041. const hiddenHotspotContainer = () => {
  3042. HotspotContainer.removeClass("active")
  3043. }
  3045. const showTermsContainer = () => {
  3046. TermsContainer.addClass("active")
  3047. }
  3048. const hiddenTermsContainer = () => {
  3049. TermsContainer.removeClass("active")
  3050. }
  3052. const openSpeedtest = () => {
  3053. appIntoBrowser("https://fast.com")
  3054. }
  3056. const hiddenAllContainers = () => {
  3057. HomeContainer.removeClass("active")
  3058. CarrierContainer.removeClass("active")
  3059. ProfileContainer.removeClass("active")
  3060. ToolsContainer.removeClass("active")
  3061. RegisterContainer.removeClass("active")
  3062. ErrorContainer.removeClass("active")
  3063. }
  3065. const setLoopFunctionsExecute = () => {
  3066. setInterval(() => {
  3067. writeLocalIpValue()
  3069. ConfigVersion.html(`VERSÃO: ${appGetConfigVersion()}`)
  3070. }, 200)
  3071. }
  3073. const allFunctionsExecute = () => {
  3074. connectionState()
  3075. toggleInput()
  3076. writeLogsRegister()
  3077. setStatusHotspot()
  3078. }
  3079. </script>
  3081. <!-- FUNÇÕES PARA O APP -->
  3082. <script>
  3083. const dtShowSuccessToastListener = (value) => showToastContainer(value)
  3084. const dtShowErrorToastListener = (value) =>
  3085. showToastContainerWithError(value)
  3086. const dtConfigClickListener = () => {
  3087. toggleInput()
  3089. InputUsername.attr({ value: getUsernameValue() })
  3090. InputPassword.attr({ value: getPasswordValue() })
  3091. InputUUID.attr({ value: getUUIDValue() })
  3092. }
  3093. const dtVpnStateListener = (state) => connectionState(state)
  3094. const dtOnNewLogListener = () => writeLogsRegister()
  3095. const dtMessageErrorListener = (model) => writeErrorContainer(model)
  3096. const dtCheckUserStartedListener = () => showLoadingContainer()
  3097. const dtCheckUserModelListener = (model) => writeCheckuserContainer(model)
  3098. </script>
  3100. <!-- AÇÕES -->
  3101. <script>
  3102. HomeHeader.style({
  3103. background: appBackground(),
  3104. backgroundSize: "cover",
  3105. backgroundPosition: "center",
  3106. backgroundRepeat: "no-repeat",
  3107. })
  3108. LogoHeader.attr({ src: appLogo() })
  3110. ConfigVersion.html(`VERSÃO: ${appGetConfigVersion()}`)
  3112. HomeButton.on({ click: () => showHomeContainer() })
  3113. LoginButton.on({ click: () => showProfileContainer() })
  3114. ToolsButton.on({ click: () => showToolsContainer() })
  3115. UpdateButton.on({ click: () => AppUpdate() })
  3117. BackButtonCarrierContainer.on({
  3118. click: () => hiddenCarrierListContainer(),
  3119. })
  3120. BackProfileContainer.on({ click: () => hiddenProfileContainer() })
  3121. BackToolsContainer.on({ click: () => hiddenToolsContainer() })
  3122. BackRegisterContainer.on({ click: () => hiddenRegisterContainer() })
  3123. BackErrorContainer.on({ click: () => hiddenErrorContainer() })
  3125. ButtonOfCarrierList.on({ click: () => showCarrierListContainer() })
  3127. ValueOfCarrierListButton.html(getConfigName())
  3129. ButtonVpnStartOrStop.on({ click: () => startStopConnection() })
  3131. InputUsername.attr({ value: getUsernameValue() })
  3132. InputPassword.attr({ value: getPasswordValue() })
  3133. InputUUID.attr({ value: getUUIDValue() })
  3135. InputUsername.attr({ placeholder: getUsernamePlaceholder() })
  3136. InputPassword.attr({ placeholder: getPassowrdPlaceholder() })
  3137. InputUUID.attr({ placeholder: getUUIDPlaceholder() })
  3139. InputUsername.on({ input: (e) => appSetUsername(e.target.value) })
  3140. InputPassword.on({ input: (e) => appSetPassword(e.target.value) })
  3141. InputUUID.on({ input: (e) => appSetUUID(e.target.value) })
  3143. EyeViewPasswordInput.on({ click: () => showInputPasswordValue() })
  3144. EyeNotViewPasswordInput.on({ click: () => hiddenInputPasswordValue() })
  3146. ButtonSaveCreds.on({ click: () => hiddenProfileContainer() })
  3148. ButtonRegister.on({ click: () => showRegisterContainer() })
  3149. ButtonCleanRegisterLogs.on({ click: () => appCleanLogs() })
  3151. ButtonOpenHotspotContainer.on({ click: () => showHotspotContainer() })
  3152. BackHotspotContainer.on({ click: () => hiddenHotspotContainer() })
  3153. ButtonStartStopHotspot.on({ click: () => toggleHotspot() })
  3155. ButtonOpenClearDataContainer.on({
  3156. click: () => showClearDataAppContainer(),
  3157. })
  3158. BackClearDataContainer.on({ click: () => hiddenClearDataAppContainer() })
  3159. ButtonConfirmClearData.on({ click: () => appClearData() })
  3161. BackLoadingContainer.on({ click: () => hiddenLoadingContainer() })
  3162. BackCheckuserContainer.on({ click: () => hiddenCheckuserContainer() })
  3163. BackRenewContainer.on({ click: () => hiddenRenewContainer() })
  3165. BackTermsContainer.on({ click: () => hiddenTermsContainer() })
  3167. ButtonOpenSpeedtest.on({ click: () => openSpeedtest() })
  3169. ButtonOpenApnConfig.on({ click: () => appApnConfiguration() })
  3171. ButtonOpenBatteryOptimization.on({ click: () => appBatteryOptimize() })
  3173. ButtonOpenCheckuser.on({ click: () => appStartCheckUser() })
  3175. ButtonOpenTerms.on({ click: () => showTermsContainer() })
  3177. setLoopFunctionsExecute()
  3179. allFunctionsExecute()
  3180. </script>
  3181. </body>
  3183. </html>
comments powered by Disqus