BLINDER TV

SUBMITTED BY: BLINDER

DATE: May 16, 2024, 3:42 a.m.

UPDATED: Aug. 11, 2024, 3:29 a.m.

FORMAT: Text only

SIZE: 119.1 kB

History Raw Download

HITS: 460

Report
  1. <!DOCTYPE html>
  2. <html lang="pt-BR">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
  8. <title>@blindervpn</title>
  9. <div id="player-container">
  10. <video id="player" controls playsinline></video>
  11. </div>
  13. <!-- Lista de canais -->
  14. <div id="lista-canais"></div>
  15. <!-- FUNÇÕES DO APP -->
  17. <style>
  18. body {
  19. overflow: hidden; /* Impede a rolagem do corpo da pĂĄgina */
  20. }
  22. .canal {
  23. display: inline-block; /* Exibe os canais lado a lado */
  24. text-align: center; /* Centraliza o texto e a imagem */
  25. margin: 10px; /* Espaçamento ao redor dos canais */
  26. margin-left: 20px; /* Aumenta a margem esquerda para empurrar para a direita */
  27. }
  29. .canal img {
  30. width: 100px; /* Largura da logo */
  31. height: auto; /* Altura automåtica para manter a proporção */
  32. cursor: pointer; /* Muda o cursor para indicar que Ă© clicĂĄvel */
  33. }
  35. /* Estilos para o nome do canal */
  36. .nome-canal {
  37. display: block; /* Exibe o nome em uma nova linha */
  38. margin-top: 5px; /* Espaçamento acima do nome */
  39. word-wrap: break-word; /* Quebra a linha se o nome do canal for muito longo */
  40. max-width: 100px; /* Define a largura mĂĄxima para o nome do canal */
  41. }
  43. /* Estilos para o contĂȘiner fixo do player */
  44. #player-container {
  45. position: fixed; /* Fixa o contĂȘiner na tela */
  46. top: 40px; /* DistĂąncia do topo da tela */
  47. left: 0; /* Alinha o contĂȘiner Ă  esquerda da tela */
  48. right: 0; /* Alinha o contĂȘiner Ă  direita da tela */
  49. z-index: 1000; /* Garante que o contĂȘiner fique acima de outros elementos */
  50. display: none; /* Inicialmente oculto */
  51. /* Adiciona estilos para tela cheia */
  52. :fullscreen {
  53. width: 100%;
  54. height: 100%;
  55. top: 0;
  56. background-color: black;
  57. }
  58. }
  60. #player {
  61. /* Remove a propriedade de aspect-ratio para permitir o ajuste completo Ă  tela */
  62. width: 100vw; /* Ajusta a largura para ocupar 100% da largura da tela */
  63. height: 56.25vw; /* Ajusta a altura para manter a proporção de 16:9 */
  64. max-height: 100vh; /* Garante que a altura nĂŁo ultrapasse a altura da tela */
  65. object-fit: cover; /* Garante que o vĂ­deo cubra toda a ĂĄrea disponĂ­vel sem barras pretas */
  66. }
  68. /* Estilos para o vídeo em tela cheia após a rotação */
  69. :fullscreen.rotacionar-video #player {
  70. width: 100vh; /* Ajusta a largura para a altura da tela */
  71. height: 100vw; /* Ajusta a altura para a largura da tela */
  72. object-fit: cover; /* Continua a cobrir toda a ĂĄrea disponĂ­vel */
  73. transform: rotate(90deg) translateX(-50%);
  74. transform-origin: center center; /* Define a origem da transformação para o centro */
  75. }
  78. .rotacionar-video {
  79. transform: rotate(90deg);
  80. }
  83. /* Estilos para o contĂȘiner da lista de canais */
  84. #lista-canais {
  85. margin-top: 260px;
  86. margin-bottom: 400px; /* Espaço de 80px na parte inferior */
  87. position: absolute;
  88. top: 0;
  89. left: 0;
  90. right: 0;
  91. z-index: 999;
  92. background-color: #009688;
  93. overflow-y: auto;
  94. max-height: calc(100% - 380px); /* Ajuste a altura måxima para considerar o espaço inferior */
  95. }
  96. </style>
  98. <style>
  99. .gif-container {
  100. display: flex;
  101. justify-content: center;
  102. align-items: start;
  103. height: 20px;
  104. margin-top: 50px;
  105. }
  106. .gif-container img {
  107. max-width: 30%;
  108. height: auto;
  109. }
  110. </style>
  112. <style>
  113. :root {
  114. font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  115. line-height: 1.5;
  116. font-weight: 400;
  117. font-synthesis: none;
  118. text-rendering: optimizeLegibility;
  119. -webkit-font-smoothing: antialiased;
  120. -moz-osx-font-smoothing: grayscale;
  121. text-size-adjust: 100%;
  122. -webkit-text-size-adjust: 100%;
  124. --space-status-bar: 10px;
  125. --space-nav-bar: 33px;
  127. --default-background-color: linear-gradient(135deg,
  128. #9f2fff,
  129. #0bb1d3,
  130. #7f47cb,
  131. #00ffff,
  132. #7a2cec,
  133. #4adfdf,
  134. #76fcfc,
  135. #7f47cb,
  136. #9f2fff,
  137. #0bb1d3,
  138. #7f47cb,
  139. #00ffff,
  140. #7a2cec,
  141. #4adfdf);
  142. --connected-background-color: linear-gradient(135deg,
  143. #05b76d,
  144. #01ac66,
  145. #008e52,
  146. #30704b,
  147. #00ff00,
  148. #29ab87,
  149. #00a86b,
  150. #2e8b57,
  151. #3f7046,
  152. #3f7,
  153. #008e52,
  154. #30704b,
  155. #00ff00,
  156. #29ab87,
  157. #00a86b,
  158. #2e8b57,
  159. #3f7046,
  160. #3f7);
  161. --connecting-background-color: linear-gradient(135deg,
  162. #ffc823,
  163. #f4b007,
  164. #fff14a,
  165. #eaa700,
  166. #fc9200,
  167. #ffcb05,
  168. #feb308,
  169. #ecc218,
  170. #ffc823,
  171. #f4b007,
  172. #fff14a,
  173. #eaa700,
  174. #fc9200,
  175. #ffcb05,
  176. #feb308,
  177. #ecc218);
  178. --error-background-color: linear-gradient(135deg,
  179. #e20807,
  180. #d40000,
  181. #9a001a,
  182. #65100d,
  183. #e20807,
  184. #d40000,
  185. #9a001a,
  186. #65100d,
  187. #e20807,
  188. #d40000,
  189. #9a001a,
  190. #65100d,
  191. #000000,
  192. #ff0000,
  193. #9a001a,
  194. #e20807,
  195. #65100d);
  196. }
  198. @keyframes ButtonStartVpnAnimation {
  199. 0% {
  200. background-position: 0;
  201. }
  203. 100% {
  204. background-position: 300%;
  205. }
  206. }
  208. @keyframes spin {
  209. 0% {
  210. transform: rotate(0deg);
  211. }
  213. 100% {
  214. transform: rotate(360deg);
  215. }
  216. }
  218. *,
  219. *::after,
  220. *::before {
  221. margin: 0;
  222. padding: 0;
  223. box-sizing: border-box;
  224. }
  226. html,
  227. body {
  228. width: 100%;
  229. height: 100%;
  230. }
  232. body {
  233. background: red;
  234. padding-bottom: var(--space-nav-bar);
  235. }
  237. main {
  238. width: auto;
  239. height: 89%;
  241. display: flex;
  243. position: relative;
  245. padding: 0 0 0 0;
  247. overflow: hidden;
  248. }
  250. section.home {
  251. width: 100vw;
  252. min-width: 100%;
  253. height: 100%;
  255. display: flex;
  256. flex-direction: column;
  258. position: absolute;
  259. top: 0;
  260. left: 0;
  262. opacity: 0;
  263. transform: translateX(100%);
  265. transition: opacity 0.3s ease, transform 0.3s ease;
  267. overflow: hidden;
  268. }
  270. section.home header {
  271. width: 100%;
  272. height: 20%;
  273. max-height: 135px;
  275. display: flex;
  276. align-items: center;
  277. justify-content: center;
  279. padding: var(--space-status-bar) 10px 0 10px;
  281. background-image: url();
  282. background-size: cover;
  283. background-position: center;
  284. background-repeat: no-repeat;
  285. }
  287. section.home header img {
  288. width: 80%;
  289. }
  291. section.container-carrier-selector-button {
  292. width: 100%;
  293. height: 10%;
  294. max-height: 60px;
  296. display: flex;
  297. justify-content: center;
  298. align-items: center;
  300. margin: 10% 0 0 0;
  301. }
  303. section.container-carrier-selector-button button {
  304. width: 90%;
  305. height: 65%;
  307. display: flex;
  308. align-items: center;
  309. justify-content: center;
  310. gap: 5px;
  312. position: relative;
  314. border: 0px;
  315. border-radius: 20px;
  317. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  318. background-size: 300%;
  320. animation: 8s infinite ButtonStartVpnAnimation;
  321. }
  323. section.container-carrier-selector-button button svg {
  324. color: #ffffff;
  325. }
  327. section.container-carrier-selector-button button span {
  328. color: #ffffff;
  329. font-size: 12px;
  330. }
  332. section.container-button-start-stop-vpn {
  333. width: 100%;
  334. height: auto;
  336. display: flex;
  337. justify-content: center;
  338. align-items: center;
  340. margin: 20% 0 0 0;
  341. }
  343. section.container-button-start-stop-vpn button {
  344. width: 150px;
  345. height: 150px;
  347. display: flex;
  348. align-items: center;
  349. justify-content: center;
  351. position: relative;
  353. border: 0;
  354. border-radius: 50%;
  356. background: linear-gradient(to top left, #0bb1d3, #9f2fff 85%);
  357. }
  359. section.container-button-start-stop-vpn button svg {
  360. width: 50%;
  361. height: 50%;
  363. color: #ffffff;
  364. }
  366. section.container-button-start-stop-vpn button::before,
  367. section.container-button-start-stop-vpn button::after {
  368. width: calc(100% + 10px);
  369. height: calc(100% + 10px);
  371. content: "";
  373. position: absolute;
  374. z-index: -1;
  376. border-radius: 50%;
  378. background: var(--default-background-color);
  379. background-size: 300%;
  381. animation: 8s infinite ButtonStartVpnAnimation;
  382. }
  384. section.container-button-start-stop-vpn button::after {
  385. filter: blur(30px);
  386. }
  388. section.container-status-connection,
  389. section.container-version,
  390. section.container-local-ip {
  391. width: 100%;
  392. height: auto;
  394. display: none;
  395. flex-direction: column;
  396. align-items: center;
  397. justify-content: center;
  399. margin: auto 0 auto 0;
  400. }
  402. section.container-status-connection.active,
  403. section.container-version.active,
  404. section.container-local-ip.active {
  405. display: flex;
  406. }
  408. section.container-status-connection button,
  409. section.container-version button,
  410. section.container-local-ip button {
  411. padding: 2.5% 10%;
  413. border: 0;
  414. border-radius: 60px;
  416. background: transparent;
  417. background-size: 300%;
  419. animation: 8s infinite ButtonStartVpnAnimation;
  420. }
  422. section.container-status-connection button span,
  423. section.container-version button span,
  424. section.container-local-ip button span {
  425. color: #ffffff;
  426. }
  428. @media only screen and (max-width: 375px) {
  429. section.container-button-start-stop-vpn button {
  430. width: 110px;
  431. height: 110px;
  432. }
  434. section.container-status-connection {
  435. margin-top: 10%;
  436. }
  437. }
  439. @media only screen and (max-width: 280px) {
  440. section.container-button-start-stop-vpn {
  441. margin-top: 15%;
  442. }
  444. section.container-button-start-stop-vpn button {
  445. width: 90px;
  446. height: 90px;
  447. }
  449. section.container-status-connection {
  450. margin-top: 20% !important;
  451. }
  452. }
  454. @media only screen and (max-width: 250px) {
  455. section.container-button-start-stop-vpn {
  456. margin-top: 5%;
  457. }
  459. section.container-button-start-stop-vpn button {
  460. width: 90px;
  461. height: 90px;
  462. }
  464. section.container-status-connection {
  465. margin-top: 10% !important;
  466. }
  467. }
  469. section.profile,
  470. section.carrier-list,
  471. section.container-tools,
  472. section.container-error {
  473. width: 100%;
  474. min-width: 100%;
  475. height: 100%;
  477. display: flex;
  478. flex-direction: column;
  479. gap: 10px;
  481. position: absolute;
  482. top: 0;
  483. left: 0;
  485. padding: var(--space-status-bar) 0 0 0;
  487. opacity: 0;
  489. transform: translateX(100%);
  490. transition: opacity 0.3s ease, transform 0.3s ease;
  491. }
  493. section.carrier-list {
  494. height: 97%;
  495. }
  497. section.container-tools {
  498. gap: 1px;
  499. }
  501. section.loading,
  502. section.checkuser,
  503. section.clean-data-app,
  504. section.hotspot-container,
  505. section.terms-container,
  506. section.logs-container,
  507. section.renew-alert {
  508. width: 100%;
  509. min-width: 100%;
  510. height: 100%;
  512. display: flex;
  513. justify-content: center;
  514. align-items: center;
  516. position: absolute;
  517. top: 0;
  518. left: 0;
  519. z-index: 99;
  521. padding-top: 15%;
  523. background: rgba(0, 0, 0, 0.3);
  525. opacity: 0;
  526. transform: scale(0);
  527. transform-origin: center;
  529. transition: opacity 0.3s ease, transform 0.3s ease;
  530. }
  532. section.hotspot-container {
  533. padding-top: 0;
  534. }
  536. section.loading.active,
  537. section.checkuser.active,
  538. section.clean-data-app.active,
  539. section.hotspot-container.active,
  540. section.terms-container.active,
  541. section.logs-container.active,
  542. section.renew-alert.active {
  543. opacity: 1;
  544. transform: scale(1);
  545. }
  547. section.loading section,
  548. section.checkuser section,
  549. section.clean-data-app section,
  550. section.hotspot-container section,
  551. section.terms-container section,
  552. section.logs-container section,
  553. section.renew-alert section {
  554. width: 80%;
  555. height: auto;
  556. min-height: 50%;
  558. display: flex;
  559. flex-direction: column;
  560. align-items: center;
  562. border-radius: 10px;
  564. background: red;
  566. overflow: hidden;
  567. }
  569. section.renew-alert section {
  570. position: relative;
  572. overflow: initial;
  573. }
  575. section.renew-alert.active section::before,
  576. section.renew-alert.active section::after {
  577. width: calc(100% + 2px);
  578. height: calc(100% + 2px);
  580. content: "";
  581. position: absolute;
  582. left: -1px;
  583. right: 0;
  584. bottom: -1px;
  585. z-index: -1;
  587. border-radius: 10px;
  589. background: linear-gradient(135deg, #9f2fff, #0bb1d3, #7f47cb, #00ffff, #7a2cec, #4adfdf, #76fcfc, #7f47cb, #9f2fff, #0bb1d3, #7f47cb, #00ffff, #7a2cec, #4adfdf);
  590. background-size: 300%;
  591. animation: 4s infinite alternate-reverse ButtonStartVpnAnimation;
  592. }
  594. section.renew-alert section::after {
  595. filter: blur(7px);
  596. }
  598. section.logs-container section {
  599. width: 90%;
  600. min-height: 0;
  602. margin-top: 25%;
  603. padding-bottom: 0.8rem;
  604. }
  606. section.renew-alert section {
  607. width: 90%;
  609. padding-bottom: 1rem;
  610. }
  612. section.loading section header,
  613. section.checkuser section header,
  614. section.clean-data-app section header,
  615. section.hotspot-container section header,
  616. section.terms-container section header,
  617. section.logs-container section header,
  618. section.renew-alert section header {
  619. width: 100%;
  620. height: auto;
  622. display: flex;
  623. align-items: center;
  624. justify-content: center;
  626. position: relative;
  628. padding: 4% 2% 4% 2%;
  630. border-bottom: 2px solid #03142d;
  631. }
  633. section.loading section header h1,
  634. section.checkuser section header h1,
  635. section.clean-data-app section header h1,
  636. section.hotspot-container section header h1,
  637. section.terms-container section header h1,
  638. section.logs-container section header h1,
  639. section.renew-alert section header h1 {
  640. margin-left: auto;
  642. color: #ffffff;
  643. font-size: 0.8rem;
  644. }
  646. @media (max-width: 280px) {
  647. section.clean-data-app section header h1 {
  648. font-size: 0.7rem;
  649. }
  650. }
  652. section.loading section header svg,
  653. section.checkuser section header svg,
  654. section.clean-data-app section header svg,
  655. section.hotspot-container section header svg,
  656. section.terms-container section header svg,
  657. section.logs-container section header svg,
  658. section.renew-alert section header svg {
  659. margin-left: auto;
  661. color: #ffffff;
  662. }
  664. section.terms-container section p {
  665. width: 95%;
  666. height: auto;
  667. max-height: 350px;
  669. padding: 5% 0;
  671. color: #ffffff;
  672. text-align: center;
  674. overflow: auto;
  675. }
  677. section.loading section div.loading {
  678. width: 150px;
  679. height: 150px;
  681. margin-top: auto;
  682. margin-bottom: auto;
  684. border-top: 4px solid #ffffff;
  685. border-right: 4px solid #ffffff;
  686. border-bottom: 4px solid #ffffff;
  687. border-left: 4px solid transparent;
  688. border-radius: 50%;
  690. background-color: red;
  692. animation: spin 1s linear infinite;
  693. }
  695. section.checkuser section section {
  696. width: 100%;
  697. height: auto;
  698. min-height: 100%;
  700. display: flex;
  701. align-items: center;
  702. justify-content: center;
  704. margin: auto 0 auto 0;
  705. padding: 3% 0;
  707. border-radius: 0;
  708. }
  710. section.checkuser section section div:first-child {
  711. margin: 0;
  712. }
  714. section.checkuser section section div {
  715. width: 90%;
  716. height: auto;
  718. display: flex;
  719. align-items: center;
  720. gap: 10px;
  722. margin: 5% 0 0 0;
  723. padding: 3% 3%;
  725. border-radius: 10px;
  727. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  728. background-size: 300%;
  730. animation: 8s infinite ButtonStartVpnAnimation;
  731. }
  733. section.checkuser section section div svg,
  734. section.checkuser section section div span {
  735. color: #ffffff;
  736. }
  738. section.checkuser section section div span {
  739. font-size: 0.8rem;
  740. }
  742. section.clean-data-app section section,
  743. section.hotspot-container section section {
  744. width: 100%;
  745. height: auto;
  746. min-height: 100%;
  748. display: flex;
  749. align-items: center;
  750. justify-content: center;
  752. margin: auto 0 auto 0;
  753. padding: 8% 0;
  755. border-radius: 0;
  756. }
  758. section.clean-data-app section section svg,
  759. section.hotspot-container section section svg {
  760. width: 30%;
  761. height: auto;
  763. color: #ffff00;
  764. font-size: 8rem;
  765. }
  767. section.hotspot-container section section svg {
  768. width: 20%;
  769. height: auto;
  771. color: #ffffff;
  772. }
  774. section.clean-data-app section section h1,
  775. section.hotspot-container section section h1 {
  776. color: #ffffff;
  777. font-size: 1rem;
  778. }
  780. section.clean-data-app section section p,
  781. section.hotspot-container section section p {
  782. margin: 5% 0 8% 0;
  783. padding: 0 3%;
  785. color: #ffffff;
  786. text-align: center;
  787. font-family: Arial, sans-serif;
  788. }
  790. section.hotspot-container section section p {
  791. width: 100%;
  792. height: 10%;
  793. max-height: 300px;
  795. overflow: auto;
  796. }
  798. section.clean-data-app section section button,
  799. section.hotspot-container section section button {
  800. display: flex;
  801. align-items: center;
  802. justify-content: center;
  804. padding: 4% 10%;
  806. border: 0;
  807. border-radius: 60px;
  809. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  810. background-size: 300%;
  812. animation: 8s infinite ButtonStartVpnAnimation;
  813. }
  815. section.clean-data-app section section button span,
  816. section.hotspot-container section section button span {
  817. color: #ffffff;
  818. }
  820. section.renew-alert section section {
  821. max-height: 250px;
  823. margin: auto 0 auto 0;
  824. border-radius: 0;
  826. overflow: auto;
  828. &>p {
  829. overflow: hidden;
  830. color: #FFFFFF;
  831. text-align: center;
  833. &>bold {
  834. font-weight: bold;
  835. }
  837. &>italic {
  838. font-style: italic;
  839. text-decoration: underline;
  840. }
  841. }
  842. }
  844. section.logs-container section section {
  845. width: 100%;
  846. height: auto;
  847. max-height: 250px;
  849. padding: 0.4rem 0.4rem 0rem 0.4rem;
  850. margin: 0.4rem 0 0.8rem 0;
  852. border-radius: 0;
  854. overflow: auto;
  855. scrollbar-width: none;
  856. -ms-overflow-style: none;
  858. ::-webkit-scrollbar {
  859. display: none;
  860. }
  862. ::-webkit-scrollbar-thumb {
  863. background: red;
  864. }
  866. &>p {
  867. width: 100%;
  868. height: auto;
  870. color: #FFFFFF;
  871. font-size: 0.8rem;
  872. }
  873. }
  875. section.logs-container section button {
  876. width: auto;
  877. height: auto;
  879. display: flex;
  880. align-items: center;
  881. justify-content: center;
  882. gap: 8px;
  884. margin: auto 0 0 0;
  885. padding: 3% 7%;
  887. position: relative;
  889. border: 0px;
  890. border-radius: 20px;
  892. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  893. background-size: 300%;
  895. animation: 8s infinite ButtonStartVpnAnimation;
  897. &>svg {
  898. color: #FFFFFF;
  899. }
  901. &>span {
  902. color: #FFFFFF;
  903. }
  904. }
  906. section.profile header,
  907. section.carrier-list header,
  908. section.container-tools header,
  909. section.container-error header {
  910. width: 100%;
  911. height: 10%;
  913. display: flex;
  914. justify-content: center;
  915. align-items: center;
  917. position: relative;
  919. padding: 0 20px 0 20px;
  921. background: black;
  922. }
  924. section.profile header::before,
  925. section.profile header::after,
  926. section.carrier-list header::before,
  927. section.carrier-list header::after,
  928. section.container-tools header::before,
  929. section.container-tools header::after,
  930. section.container-error header::before,
  931. section.container-error header::after {
  932. width: calc(100% + 2px);
  933. height: calc(100% + 2px);
  935. content: "";
  937. position: absolute;
  938. z-index: -1;
  940. background: radial-gradient(circle,
  941. rgba(159, 47, 255, 0.5),
  942. rgba(11, 177, 211, 0.5),
  943. rgba(127, 71, 203, 0.5),
  944. rgba(0, 255, 255, 0.5),
  945. rgba(122, 44, 236, 0.5),
  946. rgba(74, 223, 223, 0.5),
  947. rgba(118, 252, 252, 0.5),
  948. rgba(127, 71, 203, 0.5),
  949. rgba(159, 47, 255, 0.5),
  950. rgba(11, 177, 211, 0.5),
  951. rgba(127, 71, 203, 0.5),
  952. rgba(0, 255, 255, 0.5),
  953. rgba(122, 44, 236, 0.5),
  954. rgba(74, 223, 223, 0.5));
  955. background-size: 300%;
  958. animation: 15s infinite ButtonStartVpnAnimation;
  959. }
  961. section.profile header::after,
  962. section.carrier-list header::after,
  963. section.container-tools header::after,
  964. section.container-error header::after {
  965. filter: blur(5px);
  966. }
  968. section.profile header svg,
  969. section.carrier-list header svg,
  970. section.container-tools header svg,
  971. section.container-error header svg {
  972. width: 20px;
  973. height: 20px;
  975. margin: 0 auto 0 0;
  977. fill: url(#grad);
  978. }
  980. section.profile header h1,
  981. section.carrier-list header h1,
  982. section.container-tools header h1,
  983. section.container-error header h1 {
  984. margin: 0 auto 0 0;
  986. color: #ffffff;
  987. font-size: 0.9rem;
  988. }
  990. section.profile form {
  991. width: 100%;
  992. height: auto;
  994. padding: 0px 10px;
  996. display: flex;
  997. flex-direction: column;
  998. }
  1000. section.profile form fieldset {
  1001. width: 100%;
  1002. height: auto;
  1004. display: flex;
  1005. flex-direction: column;
  1006. align-items: center;
  1007. justify-content: center;
  1009. position: relative;
  1011. margin: 0% 0px;
  1012. padding: 5px 10px;
  1014. border: 0px solid #00ff00;
  1015. border-radius: 5px;
  1017. background: black;
  1018. }
  1020. section.profile form fieldset::before,
  1021. section.profile form fieldset::after {
  1022. width: calc(100% + 2px);
  1023. height: calc(100% + 17px);
  1025. content: "";
  1027. position: absolute;
  1028. top: -16px;
  1029. right: 0;
  1030. bottom: 0;
  1031. left: -1px;
  1032. z-index: -1;
  1034. border-radius: 5px;
  1036. background: radial-gradient(circle,
  1037. rgba(159, 47, 255, 0.5),
  1038. rgba(11, 177, 211, 0.5),
  1039. rgba(127, 71, 203, 0.5),
  1040. rgba(0, 255, 255, 0.5),
  1041. rgba(122, 44, 236, 0.5),
  1042. rgba(74, 223, 223, 0.5),
  1043. rgba(118, 252, 252, 0.5),
  1044. rgba(127, 71, 203, 0.5),
  1045. rgba(159, 47, 255, 0.5),
  1046. rgba(11, 177, 211, 0.5),
  1047. rgba(127, 71, 203, 0.5),
  1048. rgba(0, 255, 255, 0.5),
  1049. rgba(122, 44, 236, 0.5),
  1050. rgba(74, 223, 223, 0.5));
  1051. background-size: 300%;
  1054. animation: 20s infinite ButtonStartVpnAnimation;
  1055. }
  1057. section.profile form fieldset::after {
  1058. filter: blur(3px);
  1059. }
  1061. section.profile form fieldset legend {
  1062. padding: 0px 7px 0px 5px;
  1063. background: black;
  1064. }
  1066. section.profile form fieldset legend svg {
  1067. width: auto;
  1068. height: 1.563rem;
  1070. fill: url(#grad);
  1071. }
  1073. section.profile form fieldset p {
  1074. color: #ffffff;
  1075. font-size: 0.9rem;
  1076. font-style: italic;
  1077. }
  1079. section.profile form fieldset:nth-child(2) {
  1080. margin-top: 5%;
  1082. padding: 0px 10px 20px 10px;
  1083. }
  1085. section.profile form fieldset:nth-child(2)::after,
  1086. section.profile form fieldset:nth-child(2)::before {
  1087. height: calc(100% + 15px);
  1088. top: -14px;
  1089. }
  1091. section.profile form fieldset:nth-child(2) legend {
  1092. color: #ffffff;
  1093. }
  1095. section.profile form fieldset:nth-child(2) label {
  1096. margin-right: auto;
  1097. color: #ffffff;
  1098. }
  1100. section.profile form fieldset:nth-child(2) label.hidden {
  1101. display: none;
  1102. }
  1104. section.profile form fieldset:nth-child(2) div {
  1105. width: 100%;
  1106. height: 40px;
  1108. display: flex;
  1109. align-items: center;
  1111. margin: 0 0 0 auto;
  1113. border: 1px solid #ffffff;
  1114. border-radius: 5px;
  1116. overflow: hidden;
  1117. }
  1119. section.profile form fieldset:nth-child(2) div.hidden {
  1120. display: none;
  1121. }
  1123. section.profile form fieldset:nth-child(2) div svg {
  1124. width: 15%;
  1125. max-width: 40px;
  1126. height: 100%;
  1127. max-height: 40px;
  1129. padding: 3%;
  1131. color: #ffffff;
  1132. }
  1134. section.profile form fieldset:nth-child(2) div svg.hidden {
  1135. display: none;
  1136. }
  1138. section.profile form fieldset:nth-child(2) div input {
  1139. width: 100%;
  1140. height: 100%;
  1142. padding: 0px 5px;
  1144. border: 0px;
  1145. border-left: 1px solid #ffffff;
  1146. outline: none;
  1148. color: #ffffff;
  1150. background: black;
  1151. }
  1153. section.profile form fieldset:nth-child(2) label[for="passworddiv"] {
  1154. margin-top: 4%;
  1155. }
  1157. section.profile form fieldset:nth-child(2) label[for="uuiddiv"] {
  1158. margin-top: 4%;
  1159. }
  1161. section.profile form fieldset:nth-child(2) button {
  1162. width: 80%;
  1163. min-width: 200px;
  1164. height: 20%;
  1165. min-height: 30px;
  1167. display: flex;
  1168. align-items: center;
  1169. justify-content: center;
  1170. gap: 10px;
  1172. margin: 6% auto 0px auto;
  1174. border: 0px;
  1175. border-radius: 20px;
  1177. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  1178. background-size: 300%;
  1180. animation: 5s infinite ButtonStartVpnAnimation;
  1181. }
  1183. section.profile form fieldset:nth-child(2) button svg {
  1184. color: #ffffff;
  1186. filter: drop-shadow(1px 1px 2px rgba(0, 0, 255, 0.4));
  1187. }
  1189. section.profile form fieldset:nth-child(2) button span {
  1190. color: #ffffff;
  1191. font-family: Arial, sans-serif;
  1192. font-weight: 500;
  1194. text-shadow: 1px 1px 2px rgba(0, 0, 255, 0.4);
  1195. }
  1197. section.carrier-list section {
  1198. width: 100%;
  1199. height: 90%;
  1201. overflow-y: auto;
  1202. }
  1204. section.carrier-list section div:first-child {
  1205. margin: 0;
  1206. }
  1208. section.carrier-list section div {
  1209. width: 100%;
  1210. height: auto;
  1212. display: flex;
  1213. flex-direction: column;
  1214. }
  1216. section.carrier-list section div h1 {
  1217. width: 100%;
  1218. height: 50px;
  1220. display: flex;
  1221. align-items: center;
  1223. padding: 0px 3%;
  1225. color: #ffffff;
  1226. font-size: 0.9rem;
  1228. background: black;
  1229. }
  1231. section.carrier-list section div ul {
  1232. width: 100%;
  1233. height: auto;
  1234. list-style: none;
  1235. }
  1237. section.carrier-list section div ul li {
  1238. width: 100%;
  1239. height: 60px;
  1241. display: flex;
  1242. align-items: center;
  1243. gap: 5px;
  1245. position: relative;
  1247. margin: 1% 0;
  1248. padding: 0 2%;
  1250. background: #07214b;
  1252. color: #ffffff;
  1254. /*overflow: hidden; */
  1255. /* REMOVER CASO QUEIRA A BORDA ANIMADA E COLORIDA */
  1256. }
  1258. section.carrier-list section div ul li::before,
  1259. section.carrier-list section div ul li::after {
  1260. width: 100%;
  1261. height: calc(100% + 2px);
  1263. content: "";
  1265. position: absolute;
  1266. top: 0;
  1267. left: 0;
  1268. z-index: -1;
  1270. background: radial-gradient(circle,
  1271. rgba(159, 47, 255, 0.5),
  1272. rgba(11, 177, 211, 0.5),
  1273. rgba(127, 71, 203, 0.5),
  1274. rgba(0, 255, 255, 0.5),
  1275. rgba(122, 44, 236, 0.5),
  1276. rgba(74, 223, 223, 0.5),
  1277. rgba(118, 252, 252, 0.5),
  1278. rgba(127, 71, 203, 0.5),
  1279. rgba(159, 47, 255, 0.5),
  1280. rgba(11, 177, 211, 0.5),
  1281. rgba(127, 71, 203, 0.5),
  1282. rgba(0, 255, 255, 0.5),
  1283. rgba(122, 44, 236, 0.5),
  1284. rgba(74, 223, 223, 0.5));
  1285. background-size: 300%;
  1288. animation: 15s infinite ButtonStartVpnAnimation;
  1289. }
  1291. section.carrier-list section div ul li img {
  1292. width: 30px;
  1293. }
  1295. section.carrier-list section div ul li span {
  1296. width: calc(100% - 30px);
  1298. white-space: nowrap;
  1299. overflow: auto;
  1300. }
  1302. section.carrier-list section div ul li svg {
  1303. width: 30px;
  1305. display: none;
  1306. }
  1308. section.carrier-list section div ul li.active svg {
  1309. display: block;
  1310. }
  1312. section.container-tools section {
  1313. width: 100%;
  1314. height: 89%;
  1316. display: flex;
  1317. flex-direction: column;
  1318. gap: 10px;
  1320. margin: 0 auto 0 auto;
  1321. padding: 2% 0 0 0;
  1323. background: transparent;
  1325. overflow: auto;
  1326. }
  1328. section.container-tools section button {
  1329. width: 100%;
  1330. height: auto;
  1332. display: flex;
  1333. align-items: center;
  1334. gap: 5px;
  1336. padding: 10px;
  1338. border: 0px solid transparent;
  1339. border-bottom: 1px solid #ddd;
  1341. background: transparent;
  1342. }
  1344. section.container-tools section button svg:first-child {
  1345. width: 20px;
  1346. height: 100%;
  1348. margin: 0 10px 0 0;
  1350. color: #ffffff;
  1351. }
  1353. section.container-tools section button div {
  1354. max-width: 83%;
  1355. height: auto;
  1357. display: flex;
  1358. flex-direction: column;
  1359. align-items: flex-start;
  1360. gap: 5px;
  1361. }
  1363. section.container-tools section button div h3 {
  1364. color: #ffffff;
  1365. }
  1367. section.container-tools section button div p {
  1368. color: #ffffff;
  1369. text-align: left;
  1370. }
  1372. section.container-tools section button svg:last-child {
  1373. width: 16px;
  1374. height: 100%;
  1376. margin: 0 0 0 auto;
  1378. color: #ffffff;
  1379. }
  1381. section.container-error section {
  1382. width: 100%;
  1383. height: 85%;
  1385. display: flex;
  1386. flex-direction: column;
  1387. align-items: center;
  1388. }
  1390. section.container-error section h1 {
  1391. margin: 1% 0 0 0;
  1392. color: #ffffff;
  1393. font-size: 0.9rem;
  1394. }
  1396. section.container-error section p {
  1397. margin: 3% 0 0 0;
  1398. padding: 0 3%;
  1400. color: #ffffff;
  1401. text-align: center;
  1402. font-size: 0.8rem;
  1403. font-family: Arial, sans-serif;
  1404. overflow: auto;
  1405. }
  1407. section.active {
  1408. opacity: 1;
  1409. transform: translateX(0%);
  1410. }
  1412. section.container-menu {
  1413. width: 100%;
  1414. height: 10%;
  1415. z-index: 9999;
  1417. display: flex;
  1418. align-items: center;
  1419. justify-content: center;
  1420. gap: 10px;
  1422. position: relative;
  1424. margin: 21px 0px 0px 0px;
  1425. padding: 0px 10px;
  1427. background-color: blue; //aqui
  1428. }
  1434. section.container-menu button {
  1435. flex: 1;
  1436. width: 60px;
  1437. height: 50%;
  1439. display: flex;
  1440. flex-direction: column;
  1441. justify-content: center;
  1442. align-items: center;
  1443. gap: 8px;
  1445. position: relative;
  1446. z-index: 5;
  1448. border: 0px;
  1450. background: blue;
  1451. }
  1453. section.container-menu button:nth-child(2) {
  1454. margin-right: 10px;
  1455. }
  1457. section.container-menu button:nth-child(3) {
  1458. margin-right: 10px;
  1459. }
  1461. section.container-menu button:last-child {
  1462. margin-right: 5px;
  1463. }
  1465. section.container-menu button svg {
  1466. color: #ffffff;
  1467. }
  1469. section.container-menu button span {
  1470. color: #ffffff;
  1471. text-transform: uppercase;
  1472. font-size: 0.7rem;
  1473. }
  1475. section.container-toast {
  1476. width: 100%;
  1477. height: auto;
  1479. display: flex;
  1480. justify-content: center;
  1481. align-items: center;
  1483. position: absolute;
  1484. left: 0;
  1485. bottom: 2.5%;
  1486. right: 0;
  1487. z-index: 99999999;
  1489. padding: 10px 10px;
  1491. transform: scale(0);
  1492. }
  1494. section.container-toast div.toast {
  1495. width: auto;
  1496. height: auto;
  1498. display: flex;
  1499. align-items: center;
  1501. position: relative;
  1503. padding: 0px 5px 0px 0px;
  1505. border: 1px solid red;
  1506. border-radius: 10px;
  1508. background: #152039;
  1509. }
  1511. section.container-toast div.toast::before,
  1512. section.container-toast div.toast::after {
  1513. width: calc(100% + 10px);
  1514. height: calc(100% + 10px);
  1516. content: "";
  1518. position: absolute;
  1519. top: -5px;
  1520. left: -5px;
  1521. z-index: -1;
  1523. border-radius: 10px;
  1525. background: radial-gradient(circle,
  1526. rgba(159, 47, 255, 0.5),
  1527. rgba(11, 177, 211, 0.5),
  1528. rgba(127, 71, 203, 0.5),
  1529. rgba(0, 255, 255, 0.5),
  1530. rgba(122, 44, 236, 0.5),
  1531. rgba(74, 223, 223, 0.5),
  1532. rgba(118, 252, 252, 0.5),
  1533. rgba(127, 71, 203, 0.5),
  1534. rgba(159, 47, 255, 0.5),
  1535. rgba(11, 177, 211, 0.5),
  1536. rgba(127, 71, 203, 0.5),
  1537. rgba(0, 255, 255, 0.5),
  1538. rgba(122, 44, 236, 0.5),
  1539. rgba(74, 223, 223, 0.5));
  1540. background-size: 300%;
  1543. animation: 15s infinite ButtonStartVpnAnimation;
  1544. }
  1546. section.container-toast div.toast::after {
  1547. filter: blur(5px);
  1548. }
  1550. section.container-toast div.toast.error {
  1551. border: 1px solid #ff0000;
  1552. }
  1554. section.container-toast div.toast div.icon {
  1555. width: auto;
  1556. height: 100%;
  1558. display: flex;
  1559. justify-content: center;
  1560. align-items: center;
  1562. padding: 5px 4px 5px 7px;
  1564. border-top-left-radius: 10px;
  1565. border-bottom-left-radius: 10px;
  1567. overflow: hidden;
  1569. background: #152039;
  1570. }
  1572. section.container-toast div.toast.error div.icon {
  1573. border-right: 1px solid #ff0000;
  1574. }
  1576. section.container-toast div.toast div.icon img {
  1577. width: auto;
  1578. height: 100%;
  1579. min-height: 30px;
  1580. }
  1582. section.container-toast div.toast span {
  1583. margin-left: 5px;
  1585. color: #ffffff;
  1586. font-family: Arial, sans-serif;
  1587. font-size: 0.8rem;
  1588. font-weight: 300;
  1589. }
  1591. @media (max-width: 280px) {
  1592. section.container-menu button {
  1593. flex: 1;
  1594. width: 60px;
  1595. max-width: 60px;
  1596. height: 50%;
  1598. display: flex;
  1599. flex-direction: column;
  1600. justify-content: center;
  1601. align-items: center;
  1602. gap: 8px;
  1604. position: relative;
  1605. z-index: 5;
  1607. border: 0px;
  1609. background: transparent;
  1610. }
  1612. section.container-menu button:last-child {
  1613. margin-right: 10px;
  1614. }
  1616. section.container-menu button span {
  1617. font-size: 0.5rem;
  1618. }
  1619. }
  1621. @media only screen and (max-width: 576px) {
  1622. section.container-menu button {
  1623. flex: 1;
  1624. width: 60px;
  1625. max-width: 60px;
  1626. height: 50%;
  1628. display: flex;
  1629. flex-direction: column;
  1630. justify-content: center;
  1631. align-items: center;
  1632. gap: 8px;
  1634. position: relative;
  1635. z-index: 5;
  1637. border: 0px;
  1639. background: transparent; //aqui
  1640. }
  1642. section.container-menu button:last-child {
  1643. margin-right: 10px;
  1644. }
  1646. section.container-menu button span {
  1647. font-size: 0.5rem;
  1648. }
  1649. }
  1651. .spaceInDown {
  1652. -webkit-animation-name: spaceInDown;
  1653. animation-name: spaceInDown;
  1654. }
  1656. @-webkit-keyframes spaceInDown {
  1657. 0% {
  1658. opacity: 0;
  1659. transform-origin: 50% 100%;
  1660. transform: scale(0.2) translate(0%, 200%);
  1661. }
  1663. 100% {
  1664. opacity: 1;
  1665. transform-origin: 50% 100%;
  1666. transform: scale(1) translate(0%, 0%);
  1667. }
  1668. }
  1670. @keyframes spaceInDown {
  1671. 0% {
  1672. opacity: 0;
  1673. transform-origin: 50% 100%;
  1674. transform: scale(0.2) translate(0%, 200%);
  1675. }
  1677. 100% {
  1678. opacity: 1;
  1679. transform-origin: 50% 100%;
  1680. transform: scale(1) translate(0%, 0%);
  1681. }
  1682. }
  1684. .spaceOutDown {
  1685. -webkit-animation-name: spaceOutDown;
  1686. animation-name: spaceOutDown;
  1687. }
  1689. @-webkit-keyframes spaceOutDown {
  1690. 0% {
  1691. opacity: 1;
  1692. transform-origin: 50% 100%;
  1693. transform: scale(1) translate(0%, 0%);
  1694. }
  1696. 100% {
  1697. opacity: 0;
  1698. transform-origin: 50% 100%;
  1699. transform: scale(0.2) translate(0%, 200%);
  1700. }
  1701. }
  1703. @keyframes spaceOutDown {
  1704. 0% {
  1705. opacity: 1;
  1706. transform-origin: 50% 100%;
  1707. transform: scale(1) translate(0%, 0%);
  1708. }
  1710. 100% {
  1711. opacity: 0;
  1712. transform-origin: 50% 100%;
  1713. transform: scale(0.2) translate(0%, 200%);
  1714. }
  1715. }
  1717. .masterSshAnimatedTime {
  1718. -webkit-animation-duration: 1s;
  1719. animation-duration: 1s;
  1720. -webkit-animation-fill-mode: both;
  1721. animation-fill-mode: both;
  1722. }
  1724. @media (print),
  1725. (prefers-reduced-motion) {
  1726. .masterSshAnimatedTime {
  1727. -webkit-animation: unset !important;
  1728. animation: unset !important;
  1729. transition: none !important;
  1730. }
  1731. }
  1732. </style>
  1733. </head>
  1735. <body>
  1736. <main>
  1737. <section class="home active">
  1742. <div class="gif-container">
  1743. <img id="gif-image" src="" alt="">
  1744. </div>
  1747. <section class="container-local-ip active" style="margin-top: 150px;">
  1748. <button type="button">
  1749. <span id="local-ip-value">Localizando IP...</span>
  1750. </button>
  1751. </section>
  1755. <section class="container-button-start-stop-vpn">
  1756. <button type="button" title="Iniciar ou Parar conexĂŁo VPN" id="start-stop-vpn-button">
  1757. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-power"
  1758. viewBox="0 0 16 16">
  1759. <path d="M7.5 1v7h1V1h-1z" />
  1760. <path
  1761. 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" />
  1762. </svg>
  1763. </button>
  1764. </section>
  1768. <section class="container-status-connection active">
  1769. <button type="button">
  1770. <span id="state-value">LBL_STATE_DISCONNECTED</span>
  1771. </button>
  1772. </section>
  1774. <section class="container-carrier-selector-button">
  1775. <button type="button" id="carrier-list-button">
  1776. <span id="value-of-carrier-list-button">SELECIONE UMA CONFIGURAÇÃO</span>
  1777. </button>
  1778. </section>
  1783. </section>
  1785. <section class="carrier-list">
  1786. <header>
  1787. <svg id="back-carrier-container" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1788. class="bi bi-arrow-return-left" viewBox="0 0 16 16">
  1789. <path fill-rule="evenodd"
  1790. 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" />
  1791. </svg>
  1793. <h1>SELECIONE UMA OPÇÃO</h1>
  1794. </header>
  1796. <section></section>
  1797. </section>
  1799. <section class="profile">
  1800. <header>
  1801. <svg id="back-profile-container" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1802. class="bi bi-arrow-return-left" viewBox="0 0 16 16">
  1803. <path fill-rule="evenodd"
  1804. 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" />
  1805. </svg>
  1807. <h1>PERFIL</h1>
  1808. </header>
  1810. <form>
  1811. <fieldset>
  1812. <legend>
  1813. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1814. class="bi bi-person-exclamation" viewBox="0 0 16 16">
  1815. <path
  1816. 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" />
  1817. <path
  1818. 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" />
  1819. </svg>
  1820. </legend>
  1822. <p>
  1823. Insira suas credenciais nos campos abaixo e clique no botĂŁo
  1824. "Salvar credenciais". Isso o levarĂĄ de volta Ă  pĂĄgina inicial do
  1825. aplicativo, onde vocĂȘ poderĂĄ se conectar e desfrutar da conexĂŁo.
  1826. </p>
  1827. </fieldset>
  1829. <fieldset>
  1830. <legend>Informe suas credenciais</legend>
  1832. <label for="usernamediv">Nome de usuĂĄrio</label>
  1834. <div id="usernamediv">
  1835. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person"
  1836. viewBox="0 0 16 16">
  1837. <path
  1838. 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" />
  1839. </svg>
  1841. <input id="username" type="text" name="username" placeholder="UsuĂĄrio" value="Blinder" />
  1842. </div>
  1844. <label for="passworddiv">Senha</label>
  1846. <div id="passworddiv">
  1847. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key"
  1848. viewBox="0 0 16 16">
  1849. <path
  1850. 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" />
  1851. <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
  1852. </svg>
  1854. <input id="password" type="password" name="password" placeholder="Senha" value="Blinder"/>
  1856. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1857. class="bi bi-eye-slash hidden" id="eye-not-view" viewBox="0 0 16 16">
  1858. <path
  1859. 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" />
  1860. <path
  1861. 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" />
  1862. <path
  1863. 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" />
  1864. </svg>
  1866. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
  1867. id="eye-view" viewBox="0 0 16 16">
  1868. <path
  1869. 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" />
  1870. <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" />
  1871. </svg>
  1872. </div>
  1874. <label for="uuiddiv" class="hidden">UUID</label>
  1876. <div id="uuiddiv" class="hidden">
  1877. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fingerprint"
  1878. viewBox="0 0 16 16">
  1879. <path
  1880. 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" />
  1881. <path
  1882. 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" />
  1883. <path
  1884. 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" />
  1885. <path
  1886. 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" />
  1887. <path
  1888. 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" />
  1889. </svg>
  1891. <input id="uuid" type="text" placeholder="UUID" />
  1892. </div>
  1894. <button id="save-creds" type="button" title="Salvar informaçÔes de usuario e senha">
  1895. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-save"
  1896. viewBox="0 0 16 16">
  1897. <path
  1898. 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" />
  1899. </svg>
  1901. <span>Salvar credenciais</span>
  1902. </button>
  1903. </fieldset>
  1904. </form>
  1905. </section>
  1907. <section class="container-tools">
  1908. <header>
  1909. <svg id="back-tools-container" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1910. class="bi bi-arrow-return-left" viewBox="0 0 16 16">
  1911. <path fill-rule="evenodd"
  1912. 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" />
  1913. </svg>
  1915. <h1>FERRAMENTAS</h1>
  1916. </header>
  1918. <section>
  1919. <button type="button" id="register-button">
  1920. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-columns"
  1921. viewBox="0 0 16 16">
  1922. <path fill-rule="evenodd"
  1923. 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" />
  1924. </svg>
  1926. <div>
  1927. <h3>REGISTRO</h3>
  1928. <p>
  1929. Verifica todos os detalhes do que acontece ao abrir e conectar
  1930. no app.
  1931. </p>
  1932. </div>
  1934. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1935. viewBox="0 0 16 16">
  1936. <path fill-rule="evenodd"
  1937. 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" />
  1938. </svg>
  1939. </button>
  1941. <button type="button" id="speedtest-tool">
  1942. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-activity"
  1943. viewBox="0 0 16 16">
  1944. <path fill-rule="evenodd"
  1945. 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" />
  1946. </svg>
  1948. <div>
  1949. <h3>SPEEDTEST</h3>
  1950. <p>Teste a velocidade da sua conexĂŁo</p>
  1951. </div>
  1953. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1954. viewBox="0 0 16 16">
  1955. <path fill-rule="evenodd"
  1956. 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" />
  1957. </svg>
  1958. </button>
  1960. <button type="button" id="hotspot-button-tools">
  1961. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-broadcast"
  1962. viewBox="0 0 16 16">
  1963. <path
  1964. 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" />
  1965. </svg>
  1967. <div>
  1968. <h3>HOTSPOT</h3>
  1969. <p>
  1970. Aqui vocĂȘ pode compartilar sua conexĂŁo VPN usando o roteador do
  1971. seu celular.
  1972. </p>
  1973. </div>
  1975. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1976. viewBox="0 0 16 16">
  1977. <path fill-rule="evenodd"
  1978. 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" />
  1979. </svg>
  1980. </button>
  1982. <button type="button" id="apn-tool">
  1983. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-broadcast-pin"
  1984. viewBox="0 0 16 16">
  1985. <path
  1986. 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" />
  1987. </svg>
  1989. <div>
  1990. <h3>CONFIGURAR APN</h3>
  1991. <p>Aqui vocĂȘ pode fazer ajustes no APN</p>
  1992. </div>
  1994. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1995. viewBox="0 0 16 16">
  1996. <path fill-rule="evenodd"
  1997. 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" />
  1998. </svg>
  1999. </button>
  2001. <button type="button" id="battery-tool">
  2002. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  2003. class="bi bi-battery-charging" viewBox="0 0 16 16">
  2004. <path
  2005. 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" />
  2006. <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" />
  2007. <path
  2008. 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" />
  2009. <path
  2010. 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" />
  2011. </svg>
  2013. <div>
  2014. <h3>OTIMIZAÇÃO DE BATERIA</h3>
  2015. <p>
  2016. Aqui vocĂȘ consegue desativar a otimização de bateria que acaba
  2017. encerrando o aplicativo sem a sua permissĂŁo!
  2018. </p>
  2019. </div>
  2021. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  2022. viewBox="0 0 16 16">
  2023. <path fill-rule="evenodd"
  2024. 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" />
  2025. </svg>
  2026. </button>
  2028. <button type="button" id="checkuser-tool">
  2029. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  2030. class="bi bi-person-lines-fill" viewBox="0 0 16 16">
  2031. <path
  2032. 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" />
  2033. </svg>
  2035. <div>
  2036. <h3>DETALHES DO LOGIN</h3>
  2037. <p>
  2038. Aqui vocĂȘ consegue visualizar alguns detalhes do seu perfil.
  2039. </p>
  2040. </div>
  2042. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  2043. viewBox="0 0 16 16">
  2044. <path fill-rule="evenodd"
  2045. 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" />
  2046. </svg>
  2047. </button>
  2049. <button type="button" id="button-open-clear-data-app">
  2050. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash"
  2051. viewBox="0 0 16 16">
  2052. <path
  2053. 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" />
  2054. <path
  2055. 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" />
  2056. </svg>
  2058. <div>
  2059. <h3>LIMPAR DADOS</h3>
  2060. <p>
  2061. Aqui vocĂȘ pode fazer a limpeza do cache e dados do aplicativo.
  2062. </p>
  2063. </div>
  2065. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  2066. viewBox="0 0 16 16">
  2067. <path fill-rule="evenodd"
  2068. 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" />
  2069. </svg>
  2070. </button>
  2072. <button type="button" id="button-open-terms-app">
  2073. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  2074. class="bi bi-journal-medical" viewBox="0 0 16 16">
  2075. <path fill-rule="evenodd"
  2076. 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" />
  2077. <path
  2078. 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" />
  2079. <path
  2080. 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" />
  2081. </svg>
  2083. <div>
  2084. <h3>TERMOS DE USO</h3>
  2085. <p>
  2086. Aqui vocĂȘ consegue ler os termos de uso e licença do aplicativo.
  2087. </p>
  2088. </div>
  2090. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  2091. viewBox="0 0 16 16">
  2092. <path fill-rule="evenodd"
  2093. 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" />
  2094. </svg>
  2095. </button>
  2096. </section>
  2097. </section>
  2099. <section class="logs-container">
  2100. <section>
  2101. <header>
  2102. <h1>REGISTRO</h1>
  2104. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2105. id="register-logs-close" viewBox="0 0 16 16">
  2106. <path
  2107. 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" />
  2108. </svg>
  2109. </header>
  2111. <section>
  2112. <p></p>
  2113. </section>
  2115. <button type="button" id="clear-logs">
  2116. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash"
  2117. viewBox="0 0 16 16">
  2118. <path
  2119. 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" />
  2120. <path
  2121. 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" />
  2122. </svg>
  2124. <span>LIMPAR REGISTRO</span>
  2125. </button>
  2126. </section>
  2127. </section>
  2129. <section class="loading">
  2130. <section>
  2131. <header>
  2132. <h1>CARREGANDO INFORMAÇÕES</h1>
  2134. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2135. id="loading-container-close" viewBox="0 0 16 16">
  2136. <path
  2137. 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" />
  2138. </svg>
  2139. </header>
  2141. <div class="loading"></div>
  2142. </section>
  2143. </section>
  2145. <section class="checkuser">
  2146. <section>
  2147. <header>
  2148. <h1>DETALHES DO USUÁRIO</h1>
  2150. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2151. id="checkuser-close" viewBox="0 0 16 16">
  2152. <path
  2153. 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" />
  2154. </svg>
  2155. </header>
  2157. <section>
  2158. <div>
  2159. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill"
  2160. viewBox="0 0 16 16">
  2161. <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" />
  2162. </svg>
  2164. <span id="checkuser-name">USUÁRIO: ALEX</span>
  2165. </div>
  2167. <div>
  2168. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  2169. class="bi bi-calendar-fill" viewBox="0 0 16 16">
  2170. <path
  2171. 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" />
  2172. </svg>
  2174. <span id="checkuser-expires">EXPIRA EM: 25/09/2023</span>
  2175. </div>
  2177. <div>
  2178. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock-fill"
  2179. viewBox="0 0 16 16">
  2180. <path
  2181. 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" />
  2182. </svg>
  2184. <span id="checkuser-remaing-days">RESTA: 30 DIAS</span>
  2185. </div>
  2187. <div>
  2188. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone-fill"
  2189. viewBox="0 0 16 16">
  2190. <path
  2191. 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" />
  2192. </svg>
  2194. <span id="checkuser-total-conection">CONEXÕES: 1/10</span>
  2195. </div>
  2196. </section>
  2197. </section>
  2198. </section>
  2200. <section class="renew-alert">
  2201. <section>
  2202. <header>
  2203. <h1>RENOVE SEU ACESSO</h1>
  2205. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2206. id="renew-alert-close" viewBox="0 0 16 16">
  2207. <path
  2208. 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" />
  2209. </svg>
  2210. </header>
  2212. <section>
  2213. <p>
  2214. <bold id="renew-username">Caro usuĂĄrio</bold>
  2215. <br /><br />
  2217. <italic>Seu período de acesso estå chegando ao fim! Para continuar utilizando nossos serviços, entre em
  2218. contato para fazer a renovação.</italic>
  2219. <br /><br />
  2221. Atenciosamente, <bold>MASTER SSH</bold>
  2222. </p>
  2223. </section>
  2224. </section>
  2225. </section>
  2227. <section class="clean-data-app">
  2228. <section>
  2229. <header>
  2230. <h1>DESEJA CONFIRMAR ESSA AÇÃO ?</h1>
  2232. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2233. id="hidden-clear-data-app" viewBox="0 0 16 16">
  2234. <path
  2235. 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" />
  2236. </svg>
  2237. </header>
  2239. <section>
  2240. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  2241. class="bi bi-exclamation-lg" viewBox="0 0 16 16">
  2242. <path
  2243. 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" />
  2244. </svg>
  2246. <h1>TEM CERTEZA DA AÇÃO ?</h1>
  2248. <p>
  2249. Ao efetuar a ação de limpar os dados do aplicativo, serå possível
  2250. carregar somente as configuraçÔes mais recentes mediante uma
  2251. conexĂŁo ativa com a internet.
  2252. </p>
  2254. <button type="button" id="confirm-clean-data-app">
  2255. <span>CONFIRMAR</span>
  2256. </button>
  2257. </section>
  2258. </section>
  2259. </section>
  2261. <section class="hotspot-container">
  2262. <section>
  2263. <header>
  2264. <h1>ROTEADOR WIFI - HOTSPOT</h1>
  2266. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2267. id="hidden-hotspot-container" viewBox="0 0 16 16">
  2268. <path
  2269. 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" />
  2270. </svg>
  2271. </header>
  2273. <section>
  2274. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-router-fill"
  2275. viewBox="0 0 16 16">
  2276. <path
  2277. 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" />
  2278. <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" />
  2279. <path
  2280. 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" />
  2281. <path d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
  2282. </svg>
  2284. <h1 id="title-hotspot">ROTEAMENTO DESLIGADO</h1>
  2286. <p>
  2287. Ao ativar o hotspot com compartilhamento de VPN do seu celular, um
  2288. IP local Ă© gerado no seu dispositivo. Este IP Ă© usado como proxy
  2289. no dispositivo conectado Ă  sua rede Wi-Fi.
  2290. <br />
  2291. <br />
  2293. <b>SIGA ESTES PASSOS IMPORTANTES</b>
  2295. <br />
  2296. <br />
  2297. 1 - Ligue o roteador do celular primeiro.
  2298. <br /><br />
  2299. 2 - Ative o compartilhamento de VPN.
  2300. <br /><br />
  2301. 3 - Use o botĂŁo para controlar o roteador.
  2302. <br /><br />
  2303. 4 - Encontre o segundo IP na barra de notificaçÔes.
  2304. <br /><br />
  2305. 5 - Copie o segundo IP e use como proxy no dispositivo conectado Ă 
  2306. rede.
  2307. <br />
  2308. <br />
  2310. Lembre-se: O segundo IP Ă© seu proxy. Isso garantirĂĄ o correto
  2311. funcionamento do compartilhamento de VPN via hotspot do celular.
  2312. </p>
  2314. <button type="button" id="enable-hotspot">
  2315. <span id="value-button-hotspot">LIGAR HOTSPOT</span>
  2316. </button>
  2317. </section>
  2318. </section>
  2319. </section>
  2321. <section class="terms-container">
  2322. <section>
  2323. <header>
  2324. <h1>TERMOS DE USO</h1>
  2326. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  2327. id="hidden-terms-container" viewBox="0 0 16 16">
  2328. <path
  2329. 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" />
  2330. </svg>
  2331. </header>
  2333. <p>
  2334. Importante: Ao utilizar o nosso aplicativo, Ă© fundamental que vocĂȘ
  2335. esteja ciente e concorde com os seguintes pontos:
  2337. <br /><br /><br />
  2339. 1° - Nosso suporte estå disponível para ajudar clientes que
  2340. enfrentam problemas como dificuldades de conexão, informaçÔes
  2341. incorretas, ou se o aplicativo nĂŁo estĂĄ instalado corretamente.
  2343. <br /><br />
  2345. 2° - Não somos responsåveis por questÔes relacionadas à manutenção
  2346. da sua operadora, quedas na conexĂŁo causadas por fatores externos ou
  2347. problemas climĂĄticos que possam afetar a velocidade da sua internet
  2348. através da VPN.
  2350. <br /><br />
  2352. 3° - Caso haja uma interrupção no serviço devido à operadora, não
  2353. efetuamos reembolsos. No entanto, os dias em que o serviço ficar
  2354. indisponível serão compensados quando a situação se normalizar,
  2355. visto que hå custos associados à manutenção dos servidores.
  2357. <br /><br />
  2359. 4° - Não nos responsabilizamos por sites e jogos que impeçam o uso
  2360. da nossa VPN.
  2362. <br /><br />
  2364. 5° - É permitido usar apenas o nĂșmero de dispositivos estipulado no
  2365. seu contrato com o revendedor autorizado.
  2367. <br /><br />
  2369. 6° - É estritamente proibido o uso de aplicativos torrent ou P2P,
  2370. pois eles podem prejudicar o desempenho dos nossos servidores.
  2372. <br /><br />
  2374. 7° - É importante que, independentemente da sua operadora, vocĂȘ faça
  2375. uma recarga a cada 2 meses para garantir um serviço contínuo.
  2377. <br /><br />
  2379. 8° - Mantenha o aplicativo sempre atualizado, pois as atualizaçÔes
  2380. são necessårias para garantir o bom funcionamento do serviço.
  2382. <br /><br /><br /><br />
  2384. Agradecemos por escolher o nosso aplicativo e desejamos a vocĂȘ uma
  2385. Ăłtima experiĂȘncia de navegação!
  2386. </p>
  2387. </section>
  2388. </section>
  2390. <section class="container-error">
  2391. <header>
  2392. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  2393. class="bi bi-arrow-return-left" viewBox="0 0 16 16">
  2394. <path fill-rule="evenodd"
  2395. 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" />
  2396. </svg>
  2398. <h1>ERROR</h1>
  2399. </header>
  2401. <section>
  2402. <h1 id="error-title"></h1>
  2404. <p id="error-log"></p>
  2405. </section>
  2406. </section>
  2408. <section class="container-toast masterSshAnimatedTime">
  2409. <div class="toast">
  2410. <div class="icon">
  2411. <img
  2412. 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"
  2413. alt="Icone do toast" />
  2414. </div>
  2416. <span class="text">Procurando atualizaçÔes</span>
  2417. </div>
  2418. </section>
  2419. </main>
  2421. <section class="container-menu">
  2422. <button id="home" type="button" title="Inicio">
  2423. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house"
  2424. viewBox="0 0 16 16">
  2425. <defs>
  2426. <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
  2427. <stop offset="0%" stop-color="#0bb1d3" />
  2428. <stop offset="100%" stop-color="#9f2fff" />
  2429. </linearGradient>
  2430. </defs>
  2431. <path
  2432. 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" />
  2433. </svg>
  2435. <span>Inicio</span>
  2436. </button>
  2438. <button id="login" type="button" title="Login" onclick="mostrarConteudo()">
  2439. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tv"
  2440. viewBox="0 0 16 16">
  2441. <path d="M2.5 3.5A.5.5 0 0 1 3 3h10a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-7Z"/>
  2442. <path d="M3 12.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-1Z"/>
  2443. </svg>
  2444. <span>TV</span>
  2445. </button>
  2447. <button id="tools" type="button" title="Ferramentas">
  2448. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-nut"
  2449. viewBox="0 0 16 16">
  2450. <path
  2451. 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" />
  2452. <path
  2453. 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" />
  2454. </svg>
  2456. <span>Ferramentas</span>
  2457. </button>
  2459. <button id="contact-button" type="button" title="Contato via WhatsApp" onclick="window.open('https://api.whatsapp.com/send?phone=71999105628')" style="color: white;">
  2460. <i class="fab fa-whatsapp" style="font-size: 14px;"></i>
  2461. <span>WhatsApp</span>
  2462. </button>
  2466. <script>
  2467. // Substitua 'url_da_sua_lista.m3u' pela URL da sua lista IPTV
  2468. const urlDaListaIPTV = 'https://i.mjh.nz/PlutoTV/br.m3u8';
  2470. // Canais adicionados manualmente
  2471. const canaisAdicionais = [
  2472. {
  2473. "logo": "https://imgur.com/waZJG1M.png",
  2474. "stream": "https://cdn-3.nxplay.com.br/GLOBO_SP_TK/index.m3u8",
  2475. "name": "GLOBO"
  2476. },
  2477. {
  2478. "logo": "https://imgur.com/KO1v3pS.png",
  2479. "stream": "https://d2dxmktgc9qcf7.cloudfront.net/out/v1/a7c2cd7ccd84420aa496b5d4cfd9ae79/hlsOutput_2.m3u8",
  2480. "name": "SBT"
  2481. },
  2482. {
  2483. "logo": "https://imgur.com/lyQ1v9M.png",
  2484. "stream": "https://cdn.jmvstream.com/w/LVW-10842/LVW10842_513N26MDBL/chunklist.m3u8?ManoTV",
  2485. "name": "RECORD"
  2486. },
  2487. {
  2488. "logo": "https://imgur.com/xYGjfh8.png",
  2489. "stream": "https://cdn-3.nxplay.com.br/BAND_HD_PFZ_NX/tracks-v1a1/mono.m3u8?ManoTV",
  2490. "name": "BAND"
  2491. },
  2492. {
  2493. "logo": "https://imgur.com/EgKx2J1.png",
  2494. "stream": "https://cdn.jmvstream.com/w/AVJ-15235/playlist/chunklist.m3u8",
  2495. "name": "REDE TV!"
  2496. },
  2497. {
  2498. "logo": "https://imgur.com/vSKVrvH.png",
  2499. "stream": "https://cc-7pakstinpyajo.akamaized.net/playlist720lp.m3u8",
  2500. "name": "NEW BRASIL"
  2501. },
  2502. {
  2503. "logo": "https://i.imgur.com/CkoAvYH.png",
  2504. "stream": "https://cdn-2.nxplay.com.br/ESPN/tracks-v1a1/mono.m3u8",
  2505. "name": "ESPN"
  2506. },
  2507. {
  2508. "logo": "https://i.imgur.com/ZAHnoPh.png",
  2509. "stream": "https://cdn-3.nxplay.com.br/ESPN_2/index.m3u8",
  2510. "name": "ESPN 2"
  2511. }
  2512. ];
  2513. document.addEventListener('DOMContentLoaded', function() {
  2514. // Oculta o player e a lista de canais ao carregar a pĂĄgina
  2515. ocultarConteudo();
  2517. // Adiciona um ouvinte de eventos para os botÔes específicos
  2518. var botaoLogin = document.getElementById('login');
  2519. var botaoFerramentas = document.getElementById('tools');
  2520. var botaoInicio = document.getElementById('home'); // BotĂŁo home adicionado
  2522. botaoLogin.addEventListener('click', function() {
  2523. mostrarConteudo();
  2524. mostrarToast(); // Chama a função para mostrar o toast
  2525. });
  2526. botaoFerramentas.addEventListener('click', ocultarConteudo);
  2527. botaoInicio.addEventListener('click', ocultarConteudo); // Evento de clique para ocultar o conteĂșdo
  2529. // Chama a função de atualização ao carregar a pågina
  2530. atualizarListaCanais();
  2532. // Adiciona a função para alternar tela cheia com duplo toque
  2533. alternarTelaCheiaComDuploToque(document.getElementById('player-container'));
  2534. });
  2536. // Função para mostrar o conteĂșdo
  2537. function mostrarConteudo() {
  2538. var playerContainer = document.getElementById('player-container');
  2539. var listaCanais = document.getElementById('lista-canais');
  2540. var corpo = document.body;
  2542. playerContainer.style.display = 'block';
  2543. corpo.classList.add('no-scroll'); // Desativa a rolagem da pĂĄgina
  2544. fetch(urlDaListaIPTV)
  2545. .then(response => response.text())
  2546. .then(data => {
  2547. processarListaIPTV(data);
  2548. listaCanais.style.display = 'block';
  2549. });
  2550. }
  2552. // Função para ocultar o conteĂșdo
  2553. function ocultarConteudo() {
  2554. var playerContainer = document.getElementById('player-container');
  2555. var listaCanais = document.getElementById('lista-canais');
  2556. playerContainer.style.display = 'none';
  2557. listaCanais.style.display = 'none';
  2558. document.body.classList.remove('no-scroll');
  2559. }
  2561. // Função para processar a lista IPTV e criar os elementos HTML para cada canal
  2562. function processarListaIPTV(data) {
  2563. const linhas = data.split('\n');
  2564. let htmlCanais = '';
  2566. // Processa canais adicionais primeiro
  2567. canaisAdicionais.forEach(canal => {
  2568. htmlCanais += criarElementoCanal(canal.logo, canal.stream, canal.name);
  2569. });
  2571. // Processa a lista IPTV
  2572. for (let i = 0; i < linhas.length; i++) {
  2573. if (linhas[i].startsWith('#EXTINF:-1')) {
  2574. const partes = linhas[i].split(',');
  2575. const nomeCanal = partes[1];
  2576. const logoMatch = /tvg-logo="([^"]+)"/.exec(linhas[i]);
  2577. const logo = logoMatch ? logoMatch[1] : 'default_logo.png';
  2578. const urlCanal = linhas[i + 1].trim();
  2580. htmlCanais += criarElementoCanal(logo, urlCanal, nomeCanal);
  2581. }
  2582. }
  2584. document.getElementById('lista-canais').innerHTML = htmlCanais;
  2586. recuperarUltimoCanal(); // Adiciona a chamada para recuperar o Ășltimo canal aqui
  2587. }
  2589. // Função para criar o elemento HTML do canal
  2590. function criarElementoCanal(logo, stream, name) {
  2591. return `
  2592. <div class="canal" onclick="reproduzirCanal('${stream}')">
  2593. <img src="${logo}" alt="${name}" />
  2594. <span class="nome-canal">${name}</span>
  2595. </div>
  2596. `;
  2597. }
  2599. // Função para alternar tela cheia com duplo toque e rotacionar o vídeo
  2600. function alternarTelaCheiaComDuploToque(elemento) {
  2601. let ultimoToque = 0;
  2602. elemento.addEventListener('touchstart', function(evento) {
  2603. const tempoAtual = new Date().getTime();
  2604. const tempoDesdeUltimoToque = tempoAtual - ultimoToque;
  2605. if (tempoDesdeUltimoToque < 300 && tempoDesdeUltimoToque > 0) {
  2606. // Detectou um toque duplo
  2607. if (!document.fullscreenElement) {
  2608. // Ativa tela cheia se nĂŁo estiver em tela cheia
  2609. if (elemento.requestFullscreen) {
  2610. elemento.requestFullscreen();
  2611. } else if (elemento.webkitRequestFullscreen) { /* Safari */
  2612. elemento.webkitRequestFullscreen();
  2613. } else if (elemento.msRequestFullscreen) { /* IE11 */
  2614. elemento.msRequestFullscreen();
  2615. }
  2616. } else {
  2617. // Sai de tela cheia se estiver em tela cheia
  2618. if (document.exitFullscreen) {
  2619. document.exitFullscreen();
  2620. } else if (document.webkitExitFullscreen) { /* Safari */
  2621. document.webkitExitFullscreen();
  2622. } else if (document.msExitFullscreen) { /* IE11 */
  2623. document.msExitFullscreen();
  2624. }
  2625. }
  2626. }
  2627. ultimoToque = tempoAtual;
  2628. });
  2630. // Adiciona ouvintes de eventos para mudanças de tela cheia
  2631. document.addEventListener('fullscreenchange', aplicarRotacao, false);
  2632. document.addEventListener('webkitfullscreenchange', aplicarRotacao, false);
  2633. document.addEventListener('msfullscreenchange', aplicarRotacao, false);
  2634. }
  2636. function aplicarRotacao() {
  2637. var playerContainer = document.getElementById('player-container');
  2638. if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
  2639. // Aplica a rotação ao contĂȘiner do player
  2640. playerContainer.classList.add('rotacionar-video');
  2641. } else {
  2642. // Remove a rotação do contĂȘiner do player
  2643. playerContainer.classList.remove('rotacionar-video');
  2644. }
  2645. }
  2648. // Função para reproduzir o canal selecionado com o elemento <video>
  2649. function reproduzirCanal(urlCanal) {
  2650. var videoElement = document.getElementById('player');
  2651. videoElement.src = urlCanal;
  2652. videoElement.play();
  2654. // Salva o canal atual como o Ășltimo canal assistido
  2655. localStorage.setItem('ultimoCanal', urlCanal);
  2656. }
  2658. // Função para recuperar e reproduzir o Ășltimo canal assistido
  2659. function recuperarUltimoCanal() {
  2660. const ultimoCanal = localStorage.getItem('ultimoCanal');
  2661. if (ultimoCanal) {
  2662. reproduzirCanal(ultimoCanal);
  2663. }
  2664. }
  2666. function mostrarToast() {
  2667. const toastContainer = document.createElement('div');
  2668. toastContainer.style.position = 'fixed';
  2669. toastContainer.style.top = '30px'; // Ajustado para aparecer no topo
  2670. toastContainer.style.left = '50%';
  2671. toastContainer.style.transform = 'translateX(-50%)';
  2672. toastContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
  2673. toastContainer.style.color = 'white';
  2674. toastContainer.style.padding = '10px';
  2675. toastContainer.style.borderRadius = '5px';
  2676. toastContainer.style.zIndex = '1000';
  2677. toastContainer.innerText = 'Para tela cheia, dĂȘ dois toques sobre o vĂ­deo';
  2678. document.body.appendChild(toastContainer);
  2680. // Remover o toast apĂłs 4 segundos
  2681. setTimeout(() => {
  2682. document.body.removeChild(toastContainer);
  2683. }, 4000);
  2684. }
  2686. // Função para verificar e atualizar a lista de canais
  2687. function atualizarListaCanais() {
  2688. const listaCanaisCache = localStorage.getItem('listaCanais');
  2689. const ultimaAtualizacao = localStorage.getItem('ultimaAtualizacao');
  2690. const agora = new Date().getTime();
  2692. // Verifica se a lista estĂĄ em cache e se passaram menos de 24 horas desde a Ășltima atualização
  2693. if (listaCanaisCache && ultimaAtualizacao && agora - ultimaAtualizacao < 86400000) {
  2694. processarListaIPTV(listaCanaisCache);
  2695. } else {
  2696. // Carrega a lista IPTV e exibe os canais
  2697. fetch(urlDaListaIPTV)
  2698. .then(response => response.text())
  2699. .then(data => {
  2700. localStorage.setItem('listaCanais', data);
  2701. localStorage.setItem('ultimaAtualizacao', agora.toString());
  2702. processarListaIPTV(data);
  2703. });
  2704. }
  2705. }
  2707. </script>
  2709. <script>
  2711. // Função para alternar o vídeo para tela cheia
  2712. function alternarTelaCheia() {
  2713. var playerContainer = document.getElementById('player-container');
  2714. if (!document.fullscreenElement) {
  2715. if (playerContainer.requestFullscreen) {
  2716. playerContainer.requestFullscreen();
  2717. } else if (playerContainer.webkitRequestFullscreen) { /* Safari */
  2718. playerContainer.webkitRequestFullscreen();
  2719. } else if (playerContainer.msRequestFullscreen) { /* IE11 */
  2720. playerContainer.msRequestFullscreen();
  2721. }
  2722. } else {
  2723. if (document.exitFullscreen) {
  2724. document.exitFullscreen();
  2725. } else if (document.webkitExitFullscreen) { /* Safari */
  2726. document.webkitExitFullscreen();
  2727. } else if (document.msExitFullscreen) { /* IE11 */
  2728. document.msExitFullscreen();
  2729. }
  2730. }
  2731. }
  2733. // Adiciona um ouvinte de eventos para alternar o vĂ­deo para tela cheia ao dar dois toques
  2734. var videoElement = document.getElementById('player');
  2735. videoElement.addEventListener('touchstart', function(event) {
  2736. // Implementação de detecção de toque duplo
  2737. // ...
  2738. alternarTelaCheia(); // Chama a função para alternar o vídeo para tela cheia
  2739. });
  2740. </script>
  2741. <script>
  2742. const appGetStatusbarHeightSize = () => DtGetStatusBarHeight.execute()
  2743. const appGetNavbarHeightSize = () => DtGetNavigationBarHeight.execute()
  2745. const appTranslateText = (label) => DtTranslateText.execute(label)
  2746. const appGetConfigLabel = (label) => DtGetAppConfig.execute(label)
  2748. const appGetCarrierName = () => `${Android.getNetworkName()}`
  2749. const appGetLocalIp = () => `${Android.getLocalIP()}`
  2751. const AppUpdate = () => DtStartAppUpdate.execute()
  2753. const appAllConfigs = () => DtGetConfigs.execute()
  2754. const appSetConfig = (id) => DtSetConfig.execute(id)
  2755. const appGetDefaultConfig = () => DtGetDefaultConfig.execute()
  2756. const appGetConfigVersion = () =>
  2757. `${DtGetLocalConfigVersion.execute() ?? "1.0"}`
  2759. const appGetUsername = () => DtUsername.get()
  2760. const appSetUsername = (username) => DtUsername.set(username)
  2761. const appGetPassword = () => DtPassword.get()
  2762. const appSetPassword = (password) => DtPassword.set(password)
  2763. const appGetUUID = () => DtUuid.get()
  2764. const appSetUUID = (uuid) => DtUuid.set(uuid)
  2766. const appGetConnectionState = () => DtGetVpnState.execute()
  2767. const appStartConnection = () => DtExecuteVpnStart.execute()
  2768. const appStopConnection = () => DtExecuteVpnStop.execute()
  2770. const appGetStatusHotspot = () => DtGetStatusHotSpotService.execute()
  2771. const appStartHotspot = () => DtStartHotSpotService.execute()
  2772. const appStopHotspot = () => DtStopHotSpotService.execute()
  2774. const appGetLogs = () => DtGetLogs.execute()
  2775. const appCleanLogs = () => DtClearLogs.execute()
  2777. const appBatteryOptimize = () => DtIgnoreBatteryOptimizations.execute()
  2778. const appApnConfiguration = () => DtStartApnActivity.execute()
  2779. const appStartCheckUser = () => DtStartCheckUser.execute()
  2780. const appIntoBrowser = (url) => DtStartWebViewActivity.execute(url)
  2781. const appClearData = () => DtCleanApp.execute()
  2782. </script>
  2785. <script>
  2786. function shuffleArray(array) {
  2787. for (let i = array.length - 1; i > 0; i--) {
  2788. const j = Math.floor(Math.random() * (i + 1));
  2789. [array[i], array[j]] = [array[j], array[i]];
  2790. }
  2791. }
  2793. function initShuffle() {
  2794. const gifContainerURLs = [
  2795. 'https://i.gifer.com/Z6W2.gif',
  2796. 'https://i.gifer.com/4SHX.gif',
  2797. 'https://i.gifer.com/ZIb4.gif',
  2798. 'https://i.gifer.com/6ka.gif',
  2799. 'https://i.gifer.com/IXNp.gif',
  2800. 'https://i.gifer.com/ZJFD.gif',
  2801. 'https://i.gifer.com/tuJ.gif',
  2802. 'https://i.gifer.com/3nR6.gif',
  2803. 'https://i.gifer.com/bgh.gif',
  2804. 'https://i.gifer.com/XOsX.gif',
  2805. 'https://i.gifer.com/3pKc.gif',
  2806. 'https://i.gifer.com/6mz.gif',
  2807. 'https://i.gifer.com/WS2c.gif',
  2808. 'https://i.gifer.com/hdt.gif',
  2809. 'https://i.gifer.com/3F3F.gif',
  2810. 'https://i.gifer.com/XDZW.gif',
  2811. 'https://i.gifer.com/XiPu.gif',
  2812. 'https://i.gifer.com/xy.gif',
  2813. 'https://i.gifer.com/3IU0.gif',
  2814. 'https://i.gifer.com/YTup.gif',
  2815. 'https://i.gifer.com/4FB4.gif',
  2816. 'https://i.gifer.com/Y8HD.gif',
  2817. 'https://i.gifer.com/XwI4.gif',
  2818. 'https://i.gifer.com/4Jnt.gif',
  2819. 'https://i.gifer.com/ZdPP.gif',
  2820. 'https://i.gifer.com/WMDv.gif',
  2821. 'https://i.gifer.com/2ull.gif',
  2822. 'https://i.gifer.com/3sjq.gif',
  2823. 'https://i.gifer.com/y5.gif',
  2824. 'https://i.gifer.com/VIjf.gif',
  2825. 'https://i.gifer.com/7VA.gif',
  2826. 'https://i.gifer.com/2vDa.gif',
  2827. 'https://i.gifer.com/4OKl.gif',
  2828. 'https://i.gifer.com/xz.gif',
  2829. 'https://i.gifer.com/Dtk.gif',
  2830. 'https://i.gifer.com/4EAw.gif',
  2831. 'https://i.gifer.com/PZs.gif',
  2832. 'https://i.gifer.com/Yv30.gif',
  2833. 'https://i.gifer.com/4m3s.gif',
  2834. 'https://i.gifer.com/Oanl.gif',
  2835. 'https://i.gifer.com/X5NZ.gif',
  2836. 'https://i.gifer.com/2eSh.gif',
  2837. 'https://i.gifer.com/6ov.gif',
  2838. 'https://i.gifer.com/WG8Q.gif',
  2839. 'https://i.gifer.com/Yg6L.gif',
  2840. 'https://i.gifer.com/ZbHT.gif',
  2841. 'https://i.gifer.com/Ysrm.gif',
  2842. 'https://i.gifer.com/41we.gif',
  2843. 'https://i.gifer.com/YTqY.gif',
  2844. 'https://i.gifer.com/3AlV.gif',
  2845. 'https://i.gifer.com/6kk.gif',
  2846. 'https://i.gifer.com/7V9.gif',
  2847. 'https://i.gifer.com/WXfH.gif',
  2848. 'https://i.gifer.com/Z6W9.gif',
  2849. 'https://i.gifer.com/zRz.gif',
  2850. 'https://i.gifer.com/47tj.gif',
  2851. 'https://i.gifer.com/WiCE.gif',
  2852. 'https://i.gifer.com/YtyM.gif',
  2853. 'https://i.gifer.com/19y9.gif',
  2854. 'https://i.gifer.com/XwI3.gif',
  2855. 'https://i.gifer.com/tIH.gif',
  2856. 'https://i.gifer.com/1fLh.gif',
  2857. 'https://i.gifer.com/3BBF.gif',
  2858. 'https://i.gifer.com/1z9C.gif',
  2859. 'https://i.gifer.com/42xT.gif',
  2860. 'https://i.gifer.com/5RTM.gif',
  2861. 'https://i.gifer.com/3hQC.gif',
  2862. 'https://i.gifer.com/JUd.gif',
  2863. 'https://i.gifer.com/2zGr.gif',
  2864. 'https://i.gifer.com/Pan.gif',
  2865. 'https://i.gifer.com/1AYl.gif',
  2866. 'https://i.gifer.com/ZSj2.gif',
  2867. 'https://i.gifer.com/XqyP.gif',
  2868. 'https://i.gifer.com/XrH3.gif',
  2869. 'https://i.gifer.com/6mx.gif',
  2870. 'https://i.gifer.com/6K8M.gif',
  2871. 'https://i.gifer.com/Z16t.gif',
  2872. 'https://i.gifer.com/YIge.gif',
  2873. 'https://i.gifer.com/1Khd.gif'
  2874. ];
  2878. if (!localStorage.getItem('shuffledGifContainerURLs')) {
  2879. shuffleArray(gifContainerURLs);
  2880. localStorage.setItem('shuffledGifContainerURLs', JSON.stringify(gifContainerURLs));
  2881. }
  2882. }
  2884. function changeGifContainerImage() {
  2885. let shuffledGifContainerURLs = JSON.parse(localStorage.getItem('shuffledGifContainerURLs'));
  2886. let currentIndex = parseInt(localStorage.getItem('currentIndex')) || 0;
  2888. const newGifContainerURL = shuffledGifContainerURLs[currentIndex];
  2889. document.getElementById('gif-image').src = newGifContainerURL;
  2891. currentIndex = (currentIndex + 1) % shuffledGifContainerURLs.length;
  2892. localStorage.setItem('currentIndex', currentIndex.toString());
  2893. }
  2895. document.addEventListener('DOMContentLoaded', function() {
  2896. initShuffle();
  2897. changeGifContainerImage();
  2898. });
  2899. </script>
  2902. <script>
  2903. document.addEventListener('DOMContentLoaded', (event) => {
  2904. const containerMenu = document.querySelector('section.container-menu');
  2905. const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
  2906. containerMenu.style.backgroundColor = randomColor;
  2907. });
  2908. </script>
  2910. <!-- VARIAVEIS LET -->
  2911. <script>
  2912. let timeoutId
  2913. </script>
  2915. <!-- DOM WRAPPER -->
  2916. <script>
  2917. const Dom = (selector) => {
  2918. const _elements = document.querySelectorAll(selector)
  2920. const wrapper = {
  2921. on(listeners) {
  2922. for (const [event, listener] of Object.entries(listeners)) {
  2923. _elements.forEach((element) => {
  2924. element.addEventListener(event, listener)
  2925. })
  2926. }
  2928. return wrapper
  2929. },
  2930. addClass: (...tokens) => {
  2931. _elements.forEach((element) => {
  2932. element.classList.add(...tokens)
  2933. })
  2935. return wrapper
  2936. },
  2937. removeClass: (...tokens) => {
  2938. _elements.forEach((element) => {
  2939. element.classList.remove(...tokens)
  2940. })
  2942. return wrapper
  2943. },
  2944. toggleClass: (token, force) => {
  2945. _elements.forEach((element) => {
  2946. element.classList.toggle(token, force)
  2947. })
  2949. return wrapper
  2950. },
  2951. style(styles) {
  2952. for (const [property, value] of Object.entries(styles)) {
  2953. console.log(value)
  2954. _elements.forEach((element) => {
  2955. element.style[property] = value
  2956. })
  2957. }
  2959. return wrapper
  2960. },
  2961. attr(attrs) {
  2962. for (const [name, value] of Object.entries(attrs)) {
  2963. _elements.forEach((element) => element.setAttribute(name, value))
  2964. }
  2966. return wrapper
  2967. },
  2968. html(value) {
  2969. _elements.forEach((element) => (element.innerHTML = value))
  2970. return wrapper
  2971. },
  2972. }
  2974. return wrapper
  2975. }
  2976. </script>
  2977. <script>
  2978. function gerarCorAleatoria() {
  2979. return '#' + Math.floor(Math.random()*16777215).toString(16);
  2980. }
  2982. function mudarCorDeFundo() {
  2983. document.body.style.background = gerarCorAleatoria();
  2984. }
  2986. window.onload = mudarCorDeFundo;
  2987. </script>
  2989. <!-- AÇÕES EM VARIAVEIS ROOT -->
  2990. <script>
  2991. document.documentElement.style.setProperty(
  2992. "--space-status-bar",
  2993. `${appGetStatusbarHeightSize() + 10}px`
  2994. )
  2995. document.documentElement.style.setProperty(
  2996. "--space-nav-bar",
  2997. `${appGetNavbarHeightSize() + 10}px`
  2998. )
  2999. </script>
  3001. <!-- VARIAVEIS -->
  3002. <script>
  3003. const Body = Dom("body")
  3005. const HomeHeader = Dom("section.home header")
  3006. const LogoHeader = Dom("#app_logo")
  3008. const HomeContainer = Dom("section.home")
  3009. const CarrierContainer = Dom("section.carrier-list")
  3010. const ProfileContainer = Dom("section.profile")
  3011. const ToolsContainer = Dom("section.container-tools")
  3012. const RegisterContainer = Dom("section.logs-container")
  3013. const ErrorContainer = Dom("section.container-error")
  3014. const LoadingContainer = Dom("section.loading")
  3015. const CheckuserContainer = Dom("section.checkuser")
  3016. const ClearDataContainer = Dom("section.clean-data-app")
  3017. const HotspotContainer = Dom("section.hotspot-container")
  3018. const TermsContainer = Dom("section.terms-container")
  3019. const RenewContainer = Dom("section.renew-alert")
  3021. const BackButtonCarrierContainer = Dom("#back-carrier-container")
  3022. const BackProfileContainer = Dom("#back-profile-container")
  3023. const BackToolsContainer = Dom("#back-tools-container")
  3024. const BackRegisterContainer = Dom("#register-logs-close")
  3025. const BackErrorContainer = Dom("section.container-error header svg")
  3026. const BackLoadingContainer = Dom("#loading-container-close")
  3027. const BackCheckuserContainer = Dom("#checkuser-close")
  3028. const BackClearDataContainer = Dom("#hidden-clear-data-app")
  3029. const BackHotspotContainer = Dom("#hidden-hotspot-container")
  3030. const BackTermsContainer = Dom("#hidden-terms-container")
  3031. const BackRenewContainer = Dom("#renew-alert-close")
  3033. const RenewUsername = Dom("#renew-username")
  3035. const ButtonOfCarrierList = Dom("#carrier-list-button")
  3036. const ValueOfCarrierListButton = Dom("#value-of-carrier-list-button")
  3038. const ButtonVpnStartOrStop = Dom("#start-stop-vpn-button")
  3040. const StatesConnectionValue = Dom("#state-value")
  3041. const LocalIpValue = Dom('#local-ip-value')
  3042. const ConfigVersion = Dom("#version")
  3044. const LabelDivUser = Dom("label[for='usernamediv']")
  3045. const LabelDivPassword = Dom("label[for='passworddiv']")
  3046. const LabelUUID = Dom("label[for='uuiddiv']")
  3047. const DivUsername = Dom("#usernamediv")
  3048. const DivPassword = Dom("#passworddiv")
  3049. const DivUUID = Dom("#uuiddiv")
  3050. const InputUsername = Dom("#username")
  3051. const InputPassword = Dom("#password")
  3052. const InputUUID = Dom("#uuid")
  3053. const EyeViewPasswordInput = Dom("#eye-view")
  3054. const EyeNotViewPasswordInput = Dom("#eye-not-view")
  3055. const ButtonSaveCreds = Dom("#save-creds")
  3057. const CheckuserName = Dom("#checkuser-name")
  3058. const CheckuserExpires = Dom("#checkuser-expires")
  3059. const CheckuserRemainingDays = Dom("#checkuser-remaing-days")
  3060. const CheckuserTotalConnection = Dom("#checkuser-total-conection")
  3062. const RegisterLogsText = Dom("section.logs-container section section p")
  3064. const ToastContainer = Dom("section.container-toast")
  3065. const Toast = Dom("section.container-toast div.toast")
  3066. const ToastIcon = Dom("section.container-toast div.toast div.icon")
  3067. const ToastText = Dom("section.container-toast div.toast span.text")
  3069. const HomeButton = Dom("#home")
  3070. const LoginButton = Dom("#login")
  3071. const ToolsButton = Dom("#tools")
  3072. const UpdateButton = Dom("#update")
  3074. const ButtonRegister = Dom("#register-button")
  3075. const ButtonCleanRegisterLogs = Dom("#clear-logs")
  3077. const ButtonStartStopHotspot = Dom("#enable-hotspot")
  3078. const ButtonOpenHotspotContainer = Dom("#hotspot-button-tools")
  3079. const TitleHotspotContainer = Dom("#title-hotspot")
  3080. const ValueOfButtonHotspotContainer = Dom("#value-button-hotspot")
  3082. const ButtonOpenClearDataContainer = Dom("#button-open-clear-data-app")
  3083. const ButtonConfirmClearData = Dom("#confirm-clean-data-app")
  3085. const ButtonOpenSpeedtest = Dom("#speedtest-tool")
  3086. const ButtonOpenApnConfig = Dom("#apn-tool")
  3087. const ButtonOpenBatteryOptimization = Dom("#battery-tool")
  3088. const ButtonOpenCheckuser = Dom("#checkuser-tool")
  3089. const ButtonOpenTerms = Dom("#button-open-terms-app")
  3091. const ErrorTitle = Dom("#error-title")
  3092. const ErrorDescription = Dom("#error-log")
  3093. </script>
  3095. <!-- FUNÇÕES DO LAYOUT -->
  3096. <script>
  3097. const appLogo = () => {
  3098. const logo = appGetConfigLabel("APP_LOGO")
  3100. if (!logo) {
  3101. return ""
  3102. } else {
  3103. return `${JSON.parse(logo).value}`
  3104. }
  3105. }
  3106. const appBackground = () => {
  3107. const background_type = appGetConfigLabel("APP_BACKGROUND_TYPE")
  3108. const background_color = appGetConfigLabel("APP_BACKGROUND_COLOR")
  3109. const background_image = appGetConfigLabel("APP_BACKGROUND_IMAGE")
  3111. if (!background_type) {
  3112. return ""
  3113. } else if (JSON.parse(background_type)?.value === "COLOR") {
  3114. return `${JSON.parse(background_color).value}`
  3115. } else {
  3116. return `url(${JSON.parse(background_image).value})`
  3117. }
  3118. }
  3120. const getConfigName = () => {
  3121. if (!appGetDefaultConfig()) {
  3122. return `${appTranslateText("LBL_CHOOSE_CONFIG")}`
  3123. } else {
  3124. return `${JSON.parse(appGetDefaultConfig())?.name}`
  3125. }
  3126. }
  3128. const getUsernameValue = () => `${appGetUsername() ?? ""}`
  3129. const getPasswordValue = () => `${appGetPassword() ?? ""}`
  3130. const getUUIDValue = () => `${appGetUUID() ?? ""}`
  3132. const getUsernamePlaceholder = () => `${appTranslateText("LBL_USERNAME")}`
  3133. const getPassowrdPlaceholder = () => `${appTranslateText("LBL_PASSWORD")}`
  3134. const getUUIDPlaceholder = () => `${appTranslateText("LBL_UUID")}`
  3136. const toggleInput = () => {
  3137. if (checkV2ray()) {
  3138. LabelDivUser.style({ display: "none" })
  3139. DivUsername.style({ display: "none" })
  3141. LabelDivPassword.style({ display: "none" })
  3142. DivPassword.style({ display: "none" })
  3144. LabelUUID.removeClass("hidden")
  3145. DivUUID.removeClass("hidden")
  3146. } else {
  3147. LabelDivUser.style({ display: "block" })
  3148. DivUsername.style({ display: "flex" })
  3150. LabelDivPassword.style({ display: "block" })
  3151. DivPassword.style({ display: "flex" })
  3153. LabelUUID.addClass("hidden")
  3154. DivUUID.addClass("hidden")
  3155. }
  3156. }
  3157. const showInputPasswordValue = () => {
  3158. EyeViewPasswordInput.addClass("hidden")
  3159. EyeNotViewPasswordInput.removeClass("hidden")
  3160. InputPassword.attr({ type: "text" })
  3161. }
  3162. const hiddenInputPasswordValue = () => {
  3163. EyeViewPasswordInput.removeClass("hidden")
  3164. EyeNotViewPasswordInput.addClass("hidden")
  3165. InputPassword.attr({ type: "password" })
  3166. }
  3168. const checkV2ray = () => {
  3169. const data = JSON.parse(appGetDefaultConfig())
  3171. if (!appGetDefaultConfig()) {
  3172. return false
  3173. } else if (data?.mode?.toLowerCase()?.startsWith("v2ray")) {
  3174. return true
  3175. } else {
  3176. return false
  3177. }
  3178. }
  3180. const getConnectionState = () => {
  3181. const rootStyles = getComputedStyle(document.documentElement)
  3183. const defaultColor = "--default-background-color"
  3184. const connectedColor = "--connected-background-color"
  3185. const connectingColor = "--connecting-background-color"
  3186. const errorColor = "--error-background-color"
  3188. const states = {
  3189. disconnected: () => {
  3190. const gradientColor = rootStyles.getPropertyValue(defaultColor)
  3192. document.documentElement.style.setProperty(
  3193. defaultColor,
  3194. "linear-gradient(135deg,#9f2fff,#0bb1d3,#7f47cb,#00ffff,#7a2cec,#4adfdf,#76fcfc,#7f47cb,#9f2fff,#0bb1d3,#7f47cb,#00ffff,#7a2cec,#4adfdf)"
  3195. )
  3197. return states
  3198. },
  3199. connecting: () => {
  3200. const gradientColor = rootStyles.getPropertyValue(connectingColor)
  3202. document.documentElement.style.setProperty(
  3203. defaultColor,
  3204. gradientColor
  3205. )
  3207. return states
  3208. },
  3209. connected: () => {
  3210. const gradientColor = rootStyles.getPropertyValue(connectedColor)
  3212. document.documentElement.style.setProperty(
  3213. defaultColor,
  3214. gradientColor
  3215. )
  3217. return states
  3218. },
  3219. error: () => {
  3220. const gradientColor = rootStyles.getPropertyValue(errorColor)
  3222. document.documentElement.style.setProperty(
  3223. defaultColor,
  3224. gradientColor
  3225. )
  3227. return states
  3228. },
  3229. }
  3231. return states
  3232. }
  3234. const connectionState = (state) => {
  3235. const connectionValue = `${state || appGetConnectionState()}`
  3237. switch (connectionValue) {
  3238. case "DISCONNECTED":
  3239. getConnectionState().disconnected()
  3240. StatesConnectionValue.html(appTranslateText('LBL_STATE_DISCONNECTED'))
  3241. break
  3242. case "CONNECTING":
  3243. showRegisterContainer()
  3244. getConnectionState().connecting()
  3245. StatesConnectionValue.html(appTranslateText('LBL_STATE_CONNECTING'))
  3246. break
  3247. case "CONNECTED":
  3248. getConnectionState().connected()
  3249. StatesConnectionValue.html(appTranslateText('LBL_STATE_CONNECTED'))
  3250. break
  3251. case "STOPPING":
  3252. getConnectionState().connecting()
  3253. StatesConnectionValue.html(appTranslateText('LBL_STATE_STOPPING'))
  3254. break
  3255. case "NO_NETWORK":
  3256. getConnectionState().error()
  3257. StatesConnectionValue.html(appTranslateText('LBL_STATE_NO_NETWORK'))
  3258. break
  3259. case "AUTH":
  3260. getConnectionState().connecting()
  3261. StatesConnectionValue.html(appTranslateText('LBL_STATE_AUTH'))
  3262. break
  3263. case "AUTH_FAILED":
  3264. getConnectionState().connecting()
  3265. StatesConnectionValue.html(appTranslateText('LBL_STATE_AUTH_FAILED'))
  3266. break
  3267. }
  3268. }
  3270. const startStopConnection = () => {
  3271. const state = appGetConnectionState()
  3273. if (appGetDefaultConfig()) {
  3274. state !== "CONNECTED" ? appStartConnection() : appStopConnection()
  3275. } else {
  3276. showCarrierListContainer()
  3277. }
  3278. }
  3281. const writeLogsRegister = () => {
  3282. const data = JSON.parse(appGetLogs())
  3284. let logs = ""
  3286. data.forEach((item) => {
  3287. logs += `${Object.keys(item)} ${item[Object.keys(item)]} <br>`
  3288. })
  3290. RegisterLogsText.html(logs)
  3292. document.querySelector("section.logs-container.active section section").scrollTop =
  3293. document.querySelector(
  3294. "section.logs-container.active section section p"
  3295. ).scrollHeight
  3296. }
  3298. const writeCarrierList = () => {
  3299. const container = document.querySelector("section.carrier-list section")
  3300. const existingCategories = container.querySelectorAll("div").length
  3302. container.innerHTML = ""
  3304. const data = JSON.parse(appAllConfigs())
  3305. data.sort((a, b) => a.sorter - b.sorter)
  3306. data.forEach((item, index) =>
  3307. item.items.sort((a, b) => a.sorter - b.sorter)
  3308. )
  3309. data.forEach((category) => {
  3310. const div = document.createElement("div")
  3311. const h1 = document.createElement("h1")
  3313. h1.innerHTML = category.name
  3315. const ul = document.createElement("ul")
  3317. category.items.forEach((item) => {
  3318. const li = document.createElement("li")
  3320. 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>`
  3322. li.addEventListener("click", (e) => {
  3323. appSetConfig(item.id)
  3324. hiddenCarrierListContainer()
  3325. document
  3326. .querySelectorAll("li")
  3327. .forEach((item, index) => item.classList.remove("active"))
  3328. li.classList.add("active")
  3329. writeValueOnButtonOfCarrierList(item.name)
  3330. })
  3332. ul.appendChild(li)
  3333. })
  3335. div.appendChild(h1)
  3336. div.appendChild(ul)
  3338. container.appendChild(div)
  3339. })
  3340. }
  3341. const writeValueOnButtonOfCarrierList = (value) =>
  3342. ValueOfCarrierListButton.html(value ?? getConfigName())
  3344. const showToastContainer = (value) => {
  3345. Toast.style({ borderColor: "red, rgba(0, 0, 0, 0.5)" })
  3346. ToastIcon.style({ borderRight: "1px solid red" })
  3348. writeToastText(value)
  3350. ToastContainer.removeClass("masterSshAnimatedTime", "spaceOutDown")
  3351. ToastContainer.removeClass("masterSshAnimatedTime", "spaceInDown")
  3353. setTimeout(() => {
  3354. ToastContainer.addClass("masterSshAnimatedTime", "spaceInDown")
  3355. }, 100)
  3357. clearTimeout(timeoutId)
  3359. timeoutId = setTimeout(() => hiddenToastContainer(), 6000)
  3360. }
  3361. const showToastContainerWithError = (value) => {
  3362. Toast.style({ borderColor: "#FF0000" })
  3363. ToastIcon.style({ borderRight: "1px solid #FF0000" })
  3365. writeToastText(value)
  3367. ToastContainer.removeClass("masterSshAnimatedTime", "spaceOutDown")
  3368. ToastContainer.removeClass("masterSshAnimatedTime", "spaceInDown")
  3370. setTimeout(() => {
  3371. ToastContainer.addClass("masterSshAnimatedTime", "spaceInDown")
  3372. }, 100)
  3374. clearTimeout(timeoutId)
  3375. timeoutId = setTimeout(() => hiddenToastContainer(), 6000)
  3376. }
  3377. const writeToastText = (text) => {
  3378. ToastText.html(text)
  3379. }
  3380. const hiddenToastContainer = () => {
  3381. ToastContainer.removeClass("masterSshAnimatedTime", "spaceInDown")
  3382. ToastContainer.removeClass("masterSshAnimatedTime", "spaceOutDown")
  3383. ToastContainer.addClass("masterSshAnimatedTime", "spaceOutDown")
  3384. }
  3386. const showHomeContainer = () => {
  3387. hiddenAllContainers()
  3388. HomeContainer.addClass("active")
  3389. }
  3391. const showCarrierListContainer = () => {
  3392. writeCarrierList()
  3393. hiddenAllContainers()
  3394. CarrierContainer.addClass("active")
  3395. }
  3396. const hiddenCarrierListContainer = () => {
  3397. showHomeContainer()
  3398. }
  3400. const showProfileContainer = () => {
  3401. hiddenAllContainers()
  3402. ProfileContainer.addClass("active")
  3403. }
  3404. const hiddenProfileContainer = () => {
  3405. showHomeContainer()
  3406. }
  3408. const showToolsContainer = () => {
  3409. hiddenAllContainers()
  3410. ToolsContainer.addClass("active")
  3411. }
  3412. const hiddenToolsContainer = () => {
  3413. showHomeContainer()
  3414. }
  3416. const showRegisterContainer = () => {
  3417. RegisterContainer.addClass("active")
  3418. }
  3419. const hiddenRegisterContainer = () => {
  3420. RegisterContainer.removeClass('active')
  3421. }
  3423. const writeErrorContainer = (model) => {
  3424. const data = JSON.parse(model)
  3426. ErrorTitle.html(data.title)
  3427. ErrorDescription.html(data.content)
  3429. showErrorContainer()
  3430. }
  3431. const showErrorContainer = () => {
  3432. hiddenAllContainers()
  3433. ErrorContainer.addClass("active")
  3434. }
  3435. const hiddenErrorContainer = () => {
  3436. showHomeContainer()
  3437. }
  3439. const showLoadingContainer = () => {
  3440. const data = JSON.parse(appGetDefaultConfig())
  3442. if (data?.url_check_user) {
  3443. LoadingContainer.addClass("active")
  3444. }
  3446. hiddenRegisterContainer()
  3447. }
  3448. const hiddenLoadingContainer = () => {
  3449. LoadingContainer.removeClass("active")
  3450. }
  3452. const showRenewContainer = () => {
  3453. RenewContainer.addClass('active')
  3454. }
  3455. const hiddenRenewContainer = () => {
  3456. RenewContainer.removeClass('active')
  3457. }
  3459. const writeCheckuserContainer = (model) => {
  3460. const data = JSON.parse(model)
  3462. CheckuserName.html(`USUÁRIO: ${data.username}`)
  3463. CheckuserExpires.html(`EXPIRA EM: ${data.expiration_date}`)
  3464. CheckuserRemainingDays.html(`RESTA: ${data.expiration_days} DIAS`)
  3465. CheckuserTotalConnection.html(
  3466. `CONEXÕES: ${data.count_connections}/${data.limit_connections}`
  3467. )
  3469. if (data.expiration_days <= 5) {
  3470. RenewUsername.html(`Caro ${data.username}`)
  3471. showRenewContainer()
  3472. } else {
  3473. hiddenRenewContainer()
  3474. }
  3476. showCheckuserContainer()
  3477. }
  3478. const showCheckuserContainer = () => {
  3479. hiddenLoadingContainer()
  3480. CheckuserContainer.addClass("active")
  3481. }
  3482. const hiddenCheckuserContainer = () => {
  3483. CheckuserContainer.removeClass("active")
  3484. }
  3486. const showClearDataAppContainer = () => {
  3487. ClearDataContainer.addClass("active")
  3488. }
  3489. const hiddenClearDataAppContainer = () => {
  3490. ClearDataContainer.removeClass("active")
  3491. }
  3493. const writeLocalIpValue = () => {
  3494. LocalIpValue.html(`${appGetCarrierName()}: ${appGetLocalIp()}`)
  3495. }
  3497. const startHotspot = () => {
  3498. appStartHotspot()
  3500. TitleHotspotContainer.html("ROTEAMENTO LIGADO")
  3501. ValueOfButtonHotspotContainer.html("DESLIGAR HOTSPOT")
  3502. }
  3503. const stopHotspot = () => {
  3504. appStopHotspot()
  3506. TitleHotspotContainer.html("ROTEAMENTO DESLIGADO")
  3507. ValueOfButtonHotspotContainer.html("LIGAR HOTSPOT")
  3508. }
  3509. const toggleHotspot = () => {
  3510. appGetStatusHotspot() === "STOPPED" ? startHotspot() : stopHotspot()
  3511. }
  3512. const setStatusHotspot = () => {
  3513. if (appGetStatusHotspot() === "STOPPED") {
  3514. TitleHotspotContainer.html("ROTEAMENTO DESLIGADO")
  3515. ValueOfButtonHotspotContainer.html("LIGAR HOTSPOT")
  3516. } else {
  3517. TitleHotspotContainer.html("ROTEAMENTO LIGADO")
  3518. ValueOfButtonHotspotContainer.html("DESLIGAR HOTSPOT")
  3519. }
  3520. }
  3521. const showHotspotContainer = () => {
  3522. HotspotContainer.addClass("active")
  3523. }
  3524. const hiddenHotspotContainer = () => {
  3525. HotspotContainer.removeClass("active")
  3526. }
  3528. const showTermsContainer = () => {
  3529. TermsContainer.addClass("active")
  3530. }
  3531. const hiddenTermsContainer = () => {
  3532. TermsContainer.removeClass("active")
  3533. }
  3535. const openSpeedtest = () => {
  3536. appIntoBrowser("https://fast.com")
  3537. }
  3539. const hiddenAllContainers = () => {
  3540. HomeContainer.removeClass("active")
  3541. CarrierContainer.removeClass("active")
  3542. ProfileContainer.removeClass("active")
  3543. ToolsContainer.removeClass("active")
  3544. RegisterContainer.removeClass("active")
  3545. ErrorContainer.removeClass("active")
  3546. }
  3548. const setLoopFunctionsExecute = () => {
  3549. setInterval(() => {
  3550. writeLocalIpValue()
  3552. ConfigVersion.html(`VERSÃO: ${appGetConfigVersion()}`)
  3553. }, 200)
  3554. }
  3556. const allFunctionsExecute = () => {
  3557. connectionState()
  3558. toggleInput()
  3559. writeLogsRegister()
  3560. setStatusHotspot()
  3561. }
  3562. </script>
  3564. <!-- FUNÇÕES PARA O APP -->
  3565. <script>
  3566. const dtShowSuccessToastListener = (value) => showToastContainer(value)
  3567. const dtShowErrorToastListener = (value) =>
  3568. showToastContainerWithError(value)
  3569. const dtConfigClickListener = () => {
  3570. toggleInput()
  3572. InputUsername.attr({ value: getUsernameValue() })
  3573. InputPassword.attr({ value: getPasswordValue() })
  3574. InputUUID.attr({ value: getUUIDValue() })
  3575. }
  3576. const dtVpnStateListener = (state) => connectionState(state)
  3577. const dtOnNewLogListener = () => writeLogsRegister()
  3578. const dtMessageErrorListener = (model) => writeErrorContainer(model)
  3579. const dtCheckUserStartedListener = () => showLoadingContainer()
  3580. const dtCheckUserModelListener = (model) => writeCheckuserContainer(model)
  3581. </script>
  3583. <!-- AÇÕES -->
  3584. <script>
  3585. HomeHeader.style({
  3586. background: appBackground(),
  3587. backgroundSize: "cover",
  3588. backgroundPosition: "center",
  3589. backgroundRepeat: "no-repeat",
  3590. })
  3591. LogoHeader.attr({ src: appLogo() })
  3593. ConfigVersion.html(`VERSÃO: ${appGetConfigVersion()}`)
  3595. HomeButton.on({ click: () => showHomeContainer() })
  3596. ToolsButton.on({ click: () => showToolsContainer() })
  3597. UpdateButton.on({ click: () => AppUpdate() })
  3599. BackButtonCarrierContainer.on({
  3600. click: () => hiddenCarrierListContainer(),
  3601. })
  3602. BackProfileContainer.on({ click: () => hiddenProfileContainer() })
  3603. BackToolsContainer.on({ click: () => hiddenToolsContainer() })
  3604. BackRegisterContainer.on({ click: () => hiddenRegisterContainer() })
  3605. BackErrorContainer.on({ click: () => hiddenErrorContainer() })
  3607. ButtonOfCarrierList.on({ click: () => showCarrierListContainer() })
  3609. ValueOfCarrierListButton.html(getConfigName())
  3611. ButtonVpnStartOrStop.on({ click: () => startStopConnection() })
  3613. InputUsername.attr({ value: getUsernameValue() })
  3614. InputPassword.attr({ value: getPasswordValue() })
  3615. InputUUID.attr({ value: getUUIDValue() })
  3617. InputUsername.attr({ placeholder: getUsernamePlaceholder() })
  3618. InputPassword.attr({ placeholder: getPassowrdPlaceholder() })
  3619. InputUUID.attr({ placeholder: getUUIDPlaceholder() })
  3621. InputUsername.on({ input: (e) => appSetUsername(e.target.value) })
  3622. InputPassword.on({ input: (e) => appSetPassword(e.target.value) })
  3623. InputUUID.on({ input: (e) => appSetUUID(e.target.value) })
  3625. EyeViewPasswordInput.on({ click: () => showInputPasswordValue() })
  3626. EyeNotViewPasswordInput.on({ click: () => hiddenInputPasswordValue() })
  3628. ButtonSaveCreds.on({ click: () => hiddenProfileContainer() })
  3630. ButtonRegister.on({ click: () => showRegisterContainer() })
  3631. ButtonCleanRegisterLogs.on({ click: () => appCleanLogs() })
  3633. ButtonOpenHotspotContainer.on({ click: () => showHotspotContainer() })
  3634. BackHotspotContainer.on({ click: () => hiddenHotspotContainer() })
  3635. ButtonStartStopHotspot.on({ click: () => toggleHotspot() })
  3637. ButtonOpenClearDataContainer.on({
  3638. click: () => showClearDataAppContainer(),
  3639. })
  3640. BackClearDataContainer.on({ click: () => hiddenClearDataAppContainer() })
  3641. ButtonConfirmClearData.on({ click: () => appClearData() })
  3643. BackLoadingContainer.on({ click: () => hiddenLoadingContainer() })
  3644. BackCheckuserContainer.on({ click: () => hiddenCheckuserContainer() })
  3645. BackRenewContainer.on({ click: () => hiddenRenewContainer() })
  3647. BackTermsContainer.on({ click: () => hiddenTermsContainer() })
  3649. ButtonOpenSpeedtest.on({ click: () => openSpeedtest() })
  3651. ButtonOpenApnConfig.on({ click: () => appApnConfiguration() })
  3653. ButtonOpenBatteryOptimization.on({ click: () => appBatteryOptimize() })
  3655. ButtonOpenCheckuser.on({ click: () => appStartCheckUser() })
  3657. ButtonOpenTerms.on({ click: () => showTermsContainer() })
  3659. setLoopFunctionsExecute()
  3661. allFunctionsExecute()
  3662. </script>
  3663. <div id="player-container">
  3664. <video id="player" controls playsinline></video>
  3665. </div>
  3667. <!-- Lista de canais -->
  3668. <div id="lista-canais"></div>
  3669. </body>
  3671. </html>
comments powered by Disqus