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

HITS: 352

  1. <!DOCTYPE html>
  2. <html lang="pt-BR">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
  7. <title>@blindervpn</title>
  8. <div id="player-container">
  9. <video id="player" controls playsinline></video>
  10. </div>
  11. <!-- Lista de canais -->
  12. <div id="lista-canais"></div>
  13. <!-- FUNÇÕES DO APP -->
  14. <style>
  15. body {
  16. overflow: hidden; /* Impede a rolagem do corpo da pĂĄgina */
  17. }
  18. .canal {
  19. display: inline-block; /* Exibe os canais lado a lado */
  20. text-align: center; /* Centraliza o texto e a imagem */
  21. margin: 10px; /* Espaçamento ao redor dos canais */
  22. margin-left: 20px; /* Aumenta a margem esquerda para empurrar para a direita */
  23. }
  24. .canal img {
  25. width: 100px; /* Largura da logo */
  26. height: auto; /* Altura automåtica para manter a proporção */
  27. cursor: pointer; /* Muda o cursor para indicar que Ă© clicĂĄvel */
  28. }
  29. /* Estilos para o nome do canal */
  30. .nome-canal {
  31. display: block; /* Exibe o nome em uma nova linha */
  32. margin-top: 5px; /* Espaçamento acima do nome */
  33. word-wrap: break-word; /* Quebra a linha se o nome do canal for muito longo */
  34. max-width: 100px; /* Define a largura mĂĄxima para o nome do canal */
  35. }
  36. /* Estilos para o contĂȘiner fixo do player */
  37. #player-container {
  38. position: fixed; /* Fixa o contĂȘiner na tela */
  39. top: 40px; /* DistĂąncia do topo da tela */
  40. left: 0; /* Alinha o contĂȘiner Ă  esquerda da tela */
  41. right: 0; /* Alinha o contĂȘiner Ă  direita da tela */
  42. z-index: 1000; /* Garante que o contĂȘiner fique acima de outros elementos */
  43. display: none; /* Inicialmente oculto */
  44. /* Adiciona estilos para tela cheia */
  45. :fullscreen {
  46. width: 100%;
  47. height: 100%;
  48. top: 0;
  49. background-color: black;
  50. }
  51. }
  52. #player {
  53. /* Remove a propriedade de aspect-ratio para permitir o ajuste completo Ă  tela */
  54. width: 100vw; /* Ajusta a largura para ocupar 100% da largura da tela */
  55. height: 56.25vw; /* Ajusta a altura para manter a proporção de 16:9 */
  56. max-height: 100vh; /* Garante que a altura nĂŁo ultrapasse a altura da tela */
  57. object-fit: cover; /* Garante que o vĂ­deo cubra toda a ĂĄrea disponĂ­vel sem barras pretas */
  58. }
  59. /* Estilos para o vídeo em tela cheia após a rotação */
  60. :fullscreen.rotacionar-video #player {
  61. width: 100vh; /* Ajusta a largura para a altura da tela */
  62. height: 100vw; /* Ajusta a altura para a largura da tela */
  63. object-fit: cover; /* Continua a cobrir toda a ĂĄrea disponĂ­vel */
  64. transform: rotate(90deg) translateX(-50%);
  65. transform-origin: center center; /* Define a origem da transformação para o centro */
  66. }
  67. .rotacionar-video {
  68. transform: rotate(90deg);
  69. }
  70. /* Estilos para o contĂȘiner da lista de canais */
  71. #lista-canais {
  72. margin-top: 260px;
  73. margin-bottom: 400px; /* Espaço de 80px na parte inferior */
  74. position: absolute;
  75. top: 0;
  76. left: 0;
  77. right: 0;
  78. z-index: 999;
  79. background-color: #009688;
  80. overflow-y: auto;
  81. max-height: calc(100% - 380px); /* Ajuste a altura måxima para considerar o espaço inferior */
  82. }
  83. </style>
  84. <style>
  85. .gif-container {
  86. display: flex;
  87. justify-content: center;
  88. align-items: start;
  89. height: 20px;
  90. margin-top: 50px;
  91. }
  92. .gif-container img {
  93. max-width: 30%;
  94. height: auto;
  95. }
  96. </style>
  97. <style>
  98. :root {
  99. font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  100. line-height: 1.5;
  101. font-weight: 400;
  102. font-synthesis: none;
  103. text-rendering: optimizeLegibility;
  104. -webkit-font-smoothing: antialiased;
  105. -moz-osx-font-smoothing: grayscale;
  106. text-size-adjust: 100%;
  107. -webkit-text-size-adjust: 100%;
  108. --space-status-bar: 10px;
  109. --space-nav-bar: 33px;
  110. --default-background-color: linear-gradient(135deg,
  111. #9f2fff,
  112. #0bb1d3,
  113. #7f47cb,
  114. #00ffff,
  115. #7a2cec,
  116. #4adfdf,
  117. #76fcfc,
  118. #7f47cb,
  119. #9f2fff,
  120. #0bb1d3,
  121. #7f47cb,
  122. #00ffff,
  123. #7a2cec,
  124. #4adfdf);
  125. --connected-background-color: linear-gradient(135deg,
  126. #05b76d,
  127. #01ac66,
  128. #008e52,
  129. #30704b,
  130. #00ff00,
  131. #29ab87,
  132. #00a86b,
  133. #2e8b57,
  134. #3f7046,
  135. #3f7,
  136. #008e52,
  137. #30704b,
  138. #00ff00,
  139. #29ab87,
  140. #00a86b,
  141. #2e8b57,
  142. #3f7046,
  143. #3f7);
  144. --connecting-background-color: linear-gradient(135deg,
  145. #ffc823,
  146. #f4b007,
  147. #fff14a,
  148. #eaa700,
  149. #fc9200,
  150. #ffcb05,
  151. #feb308,
  152. #ecc218,
  153. #ffc823,
  154. #f4b007,
  155. #fff14a,
  156. #eaa700,
  157. #fc9200,
  158. #ffcb05,
  159. #feb308,
  160. #ecc218);
  161. --error-background-color: linear-gradient(135deg,
  162. #e20807,
  163. #d40000,
  164. #9a001a,
  165. #65100d,
  166. #e20807,
  167. #d40000,
  168. #9a001a,
  169. #65100d,
  170. #e20807,
  171. #d40000,
  172. #9a001a,
  173. #65100d,
  174. #000000,
  175. #ff0000,
  176. #9a001a,
  177. #e20807,
  178. #65100d);
  179. }
  180. @keyframes ButtonStartVpnAnimation {
  181. 0% {
  182. background-position: 0;
  183. }
  184. 100% {
  185. background-position: 300%;
  186. }
  187. }
  188. @keyframes spin {
  189. 0% {
  190. transform: rotate(0deg);
  191. }
  192. 100% {
  193. transform: rotate(360deg);
  194. }
  195. }
  196. *,
  197. *::after,
  198. *::before {
  199. margin: 0;
  200. padding: 0;
  201. box-sizing: border-box;
  202. }
  203. html,
  204. body {
  205. width: 100%;
  206. height: 100%;
  207. }
  208. body {
  209. background: red;
  210. padding-bottom: var(--space-nav-bar);
  211. }
  212. main {
  213. width: auto;
  214. height: 89%;
  215. display: flex;
  216. position: relative;
  217. padding: 0 0 0 0;
  218. overflow: hidden;
  219. }
  220. section.home {
  221. width: 100vw;
  222. min-width: 100%;
  223. height: 100%;
  224. display: flex;
  225. flex-direction: column;
  226. position: absolute;
  227. top: 0;
  228. left: 0;
  229. opacity: 0;
  230. transform: translateX(100%);
  231. transition: opacity 0.3s ease, transform 0.3s ease;
  232. overflow: hidden;
  233. }
  234. section.home header {
  235. width: 100%;
  236. height: 20%;
  237. max-height: 135px;
  238. display: flex;
  239. align-items: center;
  240. justify-content: center;
  241. padding: var(--space-status-bar) 10px 0 10px;
  242. background-image: url();
  243. background-size: cover;
  244. background-position: center;
  245. background-repeat: no-repeat;
  246. }
  247. section.home header img {
  248. width: 80%;
  249. }
  250. section.container-carrier-selector-button {
  251. width: 100%;
  252. height: 10%;
  253. max-height: 60px;
  254. display: flex;
  255. justify-content: center;
  256. align-items: center;
  257. margin: 10% 0 0 0;
  258. }
  259. section.container-carrier-selector-button button {
  260. width: 90%;
  261. height: 65%;
  262. display: flex;
  263. align-items: center;
  264. justify-content: center;
  265. gap: 5px;
  266. position: relative;
  267. border: 0px;
  268. border-radius: 20px;
  269. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  270. background-size: 300%;
  271. animation: 8s infinite ButtonStartVpnAnimation;
  272. }
  273. section.container-carrier-selector-button button svg {
  274. color: #ffffff;
  275. }
  276. section.container-carrier-selector-button button span {
  277. color: #ffffff;
  278. font-size: 12px;
  279. }
  280. section.container-button-start-stop-vpn {
  281. width: 100%;
  282. height: auto;
  283. display: flex;
  284. justify-content: center;
  285. align-items: center;
  286. margin: 20% 0 0 0;
  287. }
  288. section.container-button-start-stop-vpn button {
  289. width: 150px;
  290. height: 150px;
  291. display: flex;
  292. align-items: center;
  293. justify-content: center;
  294. position: relative;
  295. border: 0;
  296. border-radius: 50%;
  297. background: linear-gradient(to top left, #0bb1d3, #9f2fff 85%);
  298. }
  299. section.container-button-start-stop-vpn button svg {
  300. width: 50%;
  301. height: 50%;
  302. color: #ffffff;
  303. }
  304. section.container-button-start-stop-vpn button::before,
  305. section.container-button-start-stop-vpn button::after {
  306. width: calc(100% + 10px);
  307. height: calc(100% + 10px);
  308. content: "";
  309. position: absolute;
  310. z-index: -1;
  311. border-radius: 50%;
  312. background: var(--default-background-color);
  313. background-size: 300%;
  314. animation: 8s infinite ButtonStartVpnAnimation;
  315. }
  316. section.container-button-start-stop-vpn button::after {
  317. filter: blur(30px);
  318. }
  319. section.container-status-connection,
  320. section.container-version,
  321. section.container-local-ip {
  322. width: 100%;
  323. height: auto;
  324. display: none;
  325. flex-direction: column;
  326. align-items: center;
  327. justify-content: center;
  328. margin: auto 0 auto 0;
  329. }
  330. section.container-status-connection.active,
  331. section.container-version.active,
  332. section.container-local-ip.active {
  333. display: flex;
  334. }
  335. section.container-status-connection button,
  336. section.container-version button,
  337. section.container-local-ip button {
  338. padding: 2.5% 10%;
  339. border: 0;
  340. border-radius: 60px;
  341. background: transparent;
  342. background-size: 300%;
  343. animation: 8s infinite ButtonStartVpnAnimation;
  344. }
  345. section.container-status-connection button span,
  346. section.container-version button span,
  347. section.container-local-ip button span {
  348. color: #ffffff;
  349. }
  350. @media only screen and (max-width: 375px) {
  351. section.container-button-start-stop-vpn button {
  352. width: 110px;
  353. height: 110px;
  354. }
  355. section.container-status-connection {
  356. margin-top: 10%;
  357. }
  358. }
  359. @media only screen and (max-width: 280px) {
  360. section.container-button-start-stop-vpn {
  361. margin-top: 15%;
  362. }
  363. section.container-button-start-stop-vpn button {
  364. width: 90px;
  365. height: 90px;
  366. }
  367. section.container-status-connection {
  368. margin-top: 20% !important;
  369. }
  370. }
  371. @media only screen and (max-width: 250px) {
  372. section.container-button-start-stop-vpn {
  373. margin-top: 5%;
  374. }
  375. section.container-button-start-stop-vpn button {
  376. width: 90px;
  377. height: 90px;
  378. }
  379. section.container-status-connection {
  380. margin-top: 10% !important;
  381. }
  382. }
  383. section.profile,
  384. section.carrier-list,
  385. section.container-tools,
  386. section.container-error {
  387. width: 100%;
  388. min-width: 100%;
  389. height: 100%;
  390. display: flex;
  391. flex-direction: column;
  392. gap: 10px;
  393. position: absolute;
  394. top: 0;
  395. left: 0;
  396. padding: var(--space-status-bar) 0 0 0;
  397. opacity: 0;
  398. transform: translateX(100%);
  399. transition: opacity 0.3s ease, transform 0.3s ease;
  400. }
  401. section.carrier-list {
  402. height: 97%;
  403. }
  404. section.container-tools {
  405. gap: 1px;
  406. }
  407. section.loading,
  408. section.checkuser,
  409. section.clean-data-app,
  410. section.hotspot-container,
  411. section.terms-container,
  412. section.logs-container,
  413. section.renew-alert {
  414. width: 100%;
  415. min-width: 100%;
  416. height: 100%;
  417. display: flex;
  418. justify-content: center;
  419. align-items: center;
  420. position: absolute;
  421. top: 0;
  422. left: 0;
  423. z-index: 99;
  424. padding-top: 15%;
  425. background: rgba(0, 0, 0, 0.3);
  426. opacity: 0;
  427. transform: scale(0);
  428. transform-origin: center;
  429. transition: opacity 0.3s ease, transform 0.3s ease;
  430. }
  431. section.hotspot-container {
  432. padding-top: 0;
  433. }
  434. section.loading.active,
  435. section.checkuser.active,
  436. section.clean-data-app.active,
  437. section.hotspot-container.active,
  438. section.terms-container.active,
  439. section.logs-container.active,
  440. section.renew-alert.active {
  441. opacity: 1;
  442. transform: scale(1);
  443. }
  444. section.loading section,
  445. section.checkuser section,
  446. section.clean-data-app section,
  447. section.hotspot-container section,
  448. section.terms-container section,
  449. section.logs-container section,
  450. section.renew-alert section {
  451. width: 80%;
  452. height: auto;
  453. min-height: 50%;
  454. display: flex;
  455. flex-direction: column;
  456. align-items: center;
  457. border-radius: 10px;
  458. background: red;
  459. overflow: hidden;
  460. }
  461. section.renew-alert section {
  462. position: relative;
  463. overflow: initial;
  464. }
  465. section.renew-alert.active section::before,
  466. section.renew-alert.active section::after {
  467. width: calc(100% + 2px);
  468. height: calc(100% + 2px);
  469. content: "";
  470. position: absolute;
  471. left: -1px;
  472. right: 0;
  473. bottom: -1px;
  474. z-index: -1;
  475. border-radius: 10px;
  476. background: linear-gradient(135deg, #9f2fff, #0bb1d3, #7f47cb, #00ffff, #7a2cec, #4adfdf, #76fcfc, #7f47cb, #9f2fff, #0bb1d3, #7f47cb, #00ffff, #7a2cec, #4adfdf);
  477. background-size: 300%;
  478. animation: 4s infinite alternate-reverse ButtonStartVpnAnimation;
  479. }
  480. section.renew-alert section::after {
  481. filter: blur(7px);
  482. }
  483. section.logs-container section {
  484. width: 90%;
  485. min-height: 0;
  486. margin-top: 25%;
  487. padding-bottom: 0.8rem;
  488. }
  489. section.renew-alert section {
  490. width: 90%;
  491. padding-bottom: 1rem;
  492. }
  493. section.loading section header,
  494. section.checkuser section header,
  495. section.clean-data-app section header,
  496. section.hotspot-container section header,
  497. section.terms-container section header,
  498. section.logs-container section header,
  499. section.renew-alert section header {
  500. width: 100%;
  501. height: auto;
  502. display: flex;
  503. align-items: center;
  504. justify-content: center;
  505. position: relative;
  506. padding: 4% 2% 4% 2%;
  507. border-bottom: 2px solid #03142d;
  508. }
  509. section.loading section header h1,
  510. section.checkuser section header h1,
  511. section.clean-data-app section header h1,
  512. section.hotspot-container section header h1,
  513. section.terms-container section header h1,
  514. section.logs-container section header h1,
  515. section.renew-alert section header h1 {
  516. margin-left: auto;
  517. color: #ffffff;
  518. font-size: 0.8rem;
  519. }
  520. @media (max-width: 280px) {
  521. section.clean-data-app section header h1 {
  522. font-size: 0.7rem;
  523. }
  524. }
  525. section.loading section header svg,
  526. section.checkuser section header svg,
  527. section.clean-data-app section header svg,
  528. section.hotspot-container section header svg,
  529. section.terms-container section header svg,
  530. section.logs-container section header svg,
  531. section.renew-alert section header svg {
  532. margin-left: auto;
  533. color: #ffffff;
  534. }
  535. section.terms-container section p {
  536. width: 95%;
  537. height: auto;
  538. max-height: 350px;
  539. padding: 5% 0;
  540. color: #ffffff;
  541. text-align: center;
  542. overflow: auto;
  543. }
  544. section.loading section div.loading {
  545. width: 150px;
  546. height: 150px;
  547. margin-top: auto;
  548. margin-bottom: auto;
  549. border-top: 4px solid #ffffff;
  550. border-right: 4px solid #ffffff;
  551. border-bottom: 4px solid #ffffff;
  552. border-left: 4px solid transparent;
  553. border-radius: 50%;
  554. background-color: red;
  555. animation: spin 1s linear infinite;
  556. }
  557. section.checkuser section section {
  558. width: 100%;
  559. height: auto;
  560. min-height: 100%;
  561. display: flex;
  562. align-items: center;
  563. justify-content: center;
  564. margin: auto 0 auto 0;
  565. padding: 3% 0;
  566. border-radius: 0;
  567. }
  568. section.checkuser section section div:first-child {
  569. margin: 0;
  570. }
  571. section.checkuser section section div {
  572. width: 90%;
  573. height: auto;
  574. display: flex;
  575. align-items: center;
  576. gap: 10px;
  577. margin: 5% 0 0 0;
  578. padding: 3% 3%;
  579. border-radius: 10px;
  580. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  581. background-size: 300%;
  582. animation: 8s infinite ButtonStartVpnAnimation;
  583. }
  584. section.checkuser section section div svg,
  585. section.checkuser section section div span {
  586. color: #ffffff;
  587. }
  588. section.checkuser section section div span {
  589. font-size: 0.8rem;
  590. }
  591. section.clean-data-app section section,
  592. section.hotspot-container section section {
  593. width: 100%;
  594. height: auto;
  595. min-height: 100%;
  596. display: flex;
  597. align-items: center;
  598. justify-content: center;
  599. margin: auto 0 auto 0;
  600. padding: 8% 0;
  601. border-radius: 0;
  602. }
  603. section.clean-data-app section section svg,
  604. section.hotspot-container section section svg {
  605. width: 30%;
  606. height: auto;
  607. color: #ffff00;
  608. font-size: 8rem;
  609. }
  610. section.hotspot-container section section svg {
  611. width: 20%;
  612. height: auto;
  613. color: #ffffff;
  614. }
  615. section.clean-data-app section section h1,
  616. section.hotspot-container section section h1 {
  617. color: #ffffff;
  618. font-size: 1rem;
  619. }
  620. section.clean-data-app section section p,
  621. section.hotspot-container section section p {
  622. margin: 5% 0 8% 0;
  623. padding: 0 3%;
  624. color: #ffffff;
  625. text-align: center;
  626. font-family: Arial, sans-serif;
  627. }
  628. section.hotspot-container section section p {
  629. width: 100%;
  630. height: 10%;
  631. max-height: 300px;
  632. overflow: auto;
  633. }
  634. section.clean-data-app section section button,
  635. section.hotspot-container section section button {
  636. display: flex;
  637. align-items: center;
  638. justify-content: center;
  639. padding: 4% 10%;
  640. border: 0;
  641. border-radius: 60px;
  642. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  643. background-size: 300%;
  644. animation: 8s infinite ButtonStartVpnAnimation;
  645. }
  646. section.clean-data-app section section button span,
  647. section.hotspot-container section section button span {
  648. color: #ffffff;
  649. }
  650. section.renew-alert section section {
  651. max-height: 250px;
  652. margin: auto 0 auto 0;
  653. border-radius: 0;
  654. overflow: auto;
  655. &>p {
  656. overflow: hidden;
  657. color: #FFFFFF;
  658. text-align: center;
  659. &>bold {
  660. font-weight: bold;
  661. }
  662. &>italic {
  663. font-style: italic;
  664. text-decoration: underline;
  665. }
  666. }
  667. }
  668. section.logs-container section section {
  669. width: 100%;
  670. height: auto;
  671. max-height: 250px;
  672. padding: 0.4rem 0.4rem 0rem 0.4rem;
  673. margin: 0.4rem 0 0.8rem 0;
  674. border-radius: 0;
  675. overflow: auto;
  676. scrollbar-width: none;
  677. -ms-overflow-style: none;
  678. ::-webkit-scrollbar {
  679. display: none;
  680. }
  681. ::-webkit-scrollbar-thumb {
  682. background: red;
  683. }
  684. &>p {
  685. width: 100%;
  686. height: auto;
  687. color: #FFFFFF;
  688. font-size: 0.8rem;
  689. }
  690. }
  691. section.logs-container section button {
  692. width: auto;
  693. height: auto;
  694. display: flex;
  695. align-items: center;
  696. justify-content: center;
  697. gap: 8px;
  698. margin: auto 0 0 0;
  699. padding: 3% 7%;
  700. position: relative;
  701. border: 0px;
  702. border-radius: 20px;
  703. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  704. background-size: 300%;
  705. animation: 8s infinite ButtonStartVpnAnimation;
  706. &>svg {
  707. color: #FFFFFF;
  708. }
  709. &>span {
  710. color: #FFFFFF;
  711. }
  712. }
  713. section.profile header,
  714. section.carrier-list header,
  715. section.container-tools header,
  716. section.container-error header {
  717. width: 100%;
  718. height: 10%;
  719. display: flex;
  720. justify-content: center;
  721. align-items: center;
  722. position: relative;
  723. padding: 0 20px 0 20px;
  724. background: black;
  725. }
  726. section.profile header::before,
  727. section.profile header::after,
  728. section.carrier-list header::before,
  729. section.carrier-list header::after,
  730. section.container-tools header::before,
  731. section.container-tools header::after,
  732. section.container-error header::before,
  733. section.container-error header::after {
  734. width: calc(100% + 2px);
  735. height: calc(100% + 2px);
  736. content: "";
  737. position: absolute;
  738. z-index: -1;
  739. background: radial-gradient(circle,
  740. rgba(159, 47, 255, 0.5),
  741. rgba(11, 177, 211, 0.5),
  742. rgba(127, 71, 203, 0.5),
  743. rgba(0, 255, 255, 0.5),
  744. rgba(122, 44, 236, 0.5),
  745. rgba(74, 223, 223, 0.5),
  746. rgba(118, 252, 252, 0.5),
  747. rgba(127, 71, 203, 0.5),
  748. rgba(159, 47, 255, 0.5),
  749. rgba(11, 177, 211, 0.5),
  750. rgba(127, 71, 203, 0.5),
  751. rgba(0, 255, 255, 0.5),
  752. rgba(122, 44, 236, 0.5),
  753. rgba(74, 223, 223, 0.5));
  754. background-size: 300%;
  755. animation: 15s infinite ButtonStartVpnAnimation;
  756. }
  757. section.profile header::after,
  758. section.carrier-list header::after,
  759. section.container-tools header::after,
  760. section.container-error header::after {
  761. filter: blur(5px);
  762. }
  763. section.profile header svg,
  764. section.carrier-list header svg,
  765. section.container-tools header svg,
  766. section.container-error header svg {
  767. width: 20px;
  768. height: 20px;
  769. margin: 0 auto 0 0;
  770. fill: url(#grad);
  771. }
  772. section.profile header h1,
  773. section.carrier-list header h1,
  774. section.container-tools header h1,
  775. section.container-error header h1 {
  776. margin: 0 auto 0 0;
  777. color: #ffffff;
  778. font-size: 0.9rem;
  779. }
  780. section.profile form {
  781. width: 100%;
  782. height: auto;
  783. padding: 0px 10px;
  784. display: flex;
  785. flex-direction: column;
  786. }
  787. section.profile form fieldset {
  788. width: 100%;
  789. height: auto;
  790. display: flex;
  791. flex-direction: column;
  792. align-items: center;
  793. justify-content: center;
  794. position: relative;
  795. margin: 0% 0px;
  796. padding: 5px 10px;
  797. border: 0px solid #00ff00;
  798. border-radius: 5px;
  799. background: black;
  800. }
  801. section.profile form fieldset::before,
  802. section.profile form fieldset::after {
  803. width: calc(100% + 2px);
  804. height: calc(100% + 17px);
  805. content: "";
  806. position: absolute;
  807. top: -16px;
  808. right: 0;
  809. bottom: 0;
  810. left: -1px;
  811. z-index: -1;
  812. border-radius: 5px;
  813. background: radial-gradient(circle,
  814. rgba(159, 47, 255, 0.5),
  815. rgba(11, 177, 211, 0.5),
  816. rgba(127, 71, 203, 0.5),
  817. rgba(0, 255, 255, 0.5),
  818. rgba(122, 44, 236, 0.5),
  819. rgba(74, 223, 223, 0.5),
  820. rgba(118, 252, 252, 0.5),
  821. rgba(127, 71, 203, 0.5),
  822. rgba(159, 47, 255, 0.5),
  823. rgba(11, 177, 211, 0.5),
  824. rgba(127, 71, 203, 0.5),
  825. rgba(0, 255, 255, 0.5),
  826. rgba(122, 44, 236, 0.5),
  827. rgba(74, 223, 223, 0.5));
  828. background-size: 300%;
  829. animation: 20s infinite ButtonStartVpnAnimation;
  830. }
  831. section.profile form fieldset::after {
  832. filter: blur(3px);
  833. }
  834. section.profile form fieldset legend {
  835. padding: 0px 7px 0px 5px;
  836. background: black;
  837. }
  838. section.profile form fieldset legend svg {
  839. width: auto;
  840. height: 1.563rem;
  841. fill: url(#grad);
  842. }
  843. section.profile form fieldset p {
  844. color: #ffffff;
  845. font-size: 0.9rem;
  846. font-style: italic;
  847. }
  848. section.profile form fieldset:nth-child(2) {
  849. margin-top: 5%;
  850. padding: 0px 10px 20px 10px;
  851. }
  852. section.profile form fieldset:nth-child(2)::after,
  853. section.profile form fieldset:nth-child(2)::before {
  854. height: calc(100% + 15px);
  855. top: -14px;
  856. }
  857. section.profile form fieldset:nth-child(2) legend {
  858. color: #ffffff;
  859. }
  860. section.profile form fieldset:nth-child(2) label {
  861. margin-right: auto;
  862. color: #ffffff;
  863. }
  864. section.profile form fieldset:nth-child(2) label.hidden {
  865. display: none;
  866. }
  867. section.profile form fieldset:nth-child(2) div {
  868. width: 100%;
  869. height: 40px;
  870. display: flex;
  871. align-items: center;
  872. margin: 0 0 0 auto;
  873. border: 1px solid #ffffff;
  874. border-radius: 5px;
  875. overflow: hidden;
  876. }
  877. section.profile form fieldset:nth-child(2) div.hidden {
  878. display: none;
  879. }
  880. section.profile form fieldset:nth-child(2) div svg {
  881. width: 15%;
  882. max-width: 40px;
  883. height: 100%;
  884. max-height: 40px;
  885. padding: 3%;
  886. color: #ffffff;
  887. }
  888. section.profile form fieldset:nth-child(2) div svg.hidden {
  889. display: none;
  890. }
  891. section.profile form fieldset:nth-child(2) div input {
  892. width: 100%;
  893. height: 100%;
  894. padding: 0px 5px;
  895. border: 0px;
  896. border-left: 1px solid #ffffff;
  897. outline: none;
  898. color: #ffffff;
  899. background: black;
  900. }
  901. section.profile form fieldset:nth-child(2) label[for="passworddiv"] {
  902. margin-top: 4%;
  903. }
  904. section.profile form fieldset:nth-child(2) label[for="uuiddiv"] {
  905. margin-top: 4%;
  906. }
  907. section.profile form fieldset:nth-child(2) button {
  908. width: 80%;
  909. min-width: 200px;
  910. height: 20%;
  911. min-height: 30px;
  912. display: flex;
  913. align-items: center;
  914. justify-content: center;
  915. gap: 10px;
  916. margin: 6% auto 0px auto;
  917. border: 0px;
  918. border-radius: 20px;
  919. background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
  920. background-size: 300%;
  921. animation: 5s infinite ButtonStartVpnAnimation;
  922. }
  923. section.profile form fieldset:nth-child(2) button svg {
  924. color: #ffffff;
  925. filter: drop-shadow(1px 1px 2px rgba(0, 0, 255, 0.4));
  926. }
  927. section.profile form fieldset:nth-child(2) button span {
  928. color: #ffffff;
  929. font-family: Arial, sans-serif;
  930. font-weight: 500;
  931. text-shadow: 1px 1px 2px rgba(0, 0, 255, 0.4);
  932. }
  933. section.carrier-list section {
  934. width: 100%;
  935. height: 90%;
  936. overflow-y: auto;
  937. }
  938. section.carrier-list section div:first-child {
  939. margin: 0;
  940. }
  941. section.carrier-list section div {
  942. width: 100%;
  943. height: auto;
  944. display: flex;
  945. flex-direction: column;
  946. }
  947. section.carrier-list section div h1 {
  948. width: 100%;
  949. height: 50px;
  950. display: flex;
  951. align-items: center;
  952. padding: 0px 3%;
  953. color: #ffffff;
  954. font-size: 0.9rem;
  955. background: black;
  956. }
  957. section.carrier-list section div ul {
  958. width: 100%;
  959. height: auto;
  960. list-style: none;
  961. }
  962. section.carrier-list section div ul li {
  963. width: 100%;
  964. height: 60px;
  965. display: flex;
  966. align-items: center;
  967. gap: 5px;
  968. position: relative;
  969. margin: 1% 0;
  970. padding: 0 2%;
  971. background: #07214b;
  972. color: #ffffff;
  973. /*overflow: hidden; */
  974. /* REMOVER CASO QUEIRA A BORDA ANIMADA E COLORIDA */
  975. }
  976. section.carrier-list section div ul li::before,
  977. section.carrier-list section div ul li::after {
  978. width: 100%;
  979. height: calc(100% + 2px);
  980. content: "";
  981. position: absolute;
  982. top: 0;
  983. left: 0;
  984. z-index: -1;
  985. background: radial-gradient(circle,
  986. rgba(159, 47, 255, 0.5),
  987. rgba(11, 177, 211, 0.5),
  988. rgba(127, 71, 203, 0.5),
  989. rgba(0, 255, 255, 0.5),
  990. rgba(122, 44, 236, 0.5),
  991. rgba(74, 223, 223, 0.5),
  992. rgba(118, 252, 252, 0.5),
  993. rgba(127, 71, 203, 0.5),
  994. rgba(159, 47, 255, 0.5),
  995. rgba(11, 177, 211, 0.5),
  996. rgba(127, 71, 203, 0.5),
  997. rgba(0, 255, 255, 0.5),
  998. rgba(122, 44, 236, 0.5),
  999. rgba(74, 223, 223, 0.5));
  1000. background-size: 300%;
  1001. animation: 15s infinite ButtonStartVpnAnimation;
  1002. }
  1003. section.carrier-list section div ul li img {
  1004. width: 30px;
  1005. }
  1006. section.carrier-list section div ul li span {
  1007. width: calc(100% - 30px);
  1008. white-space: nowrap;
  1009. overflow: auto;
  1010. }
  1011. section.carrier-list section div ul li svg {
  1012. width: 30px;
  1013. display: none;
  1014. }
  1015. section.carrier-list section div ul li.active svg {
  1016. display: block;
  1017. }
  1018. section.container-tools section {
  1019. width: 100%;
  1020. height: 89%;
  1021. display: flex;
  1022. flex-direction: column;
  1023. gap: 10px;
  1024. margin: 0 auto 0 auto;
  1025. padding: 2% 0 0 0;
  1026. background: transparent;
  1027. overflow: auto;
  1028. }
  1029. section.container-tools section button {
  1030. width: 100%;
  1031. height: auto;
  1032. display: flex;
  1033. align-items: center;
  1034. gap: 5px;
  1035. padding: 10px;
  1036. border: 0px solid transparent;
  1037. border-bottom: 1px solid #ddd;
  1038. background: transparent;
  1039. }
  1040. section.container-tools section button svg:first-child {
  1041. width: 20px;
  1042. height: 100%;
  1043. margin: 0 10px 0 0;
  1044. color: #ffffff;
  1045. }
  1046. section.container-tools section button div {
  1047. max-width: 83%;
  1048. height: auto;
  1049. display: flex;
  1050. flex-direction: column;
  1051. align-items: flex-start;
  1052. gap: 5px;
  1053. }
  1054. section.container-tools section button div h3 {
  1055. color: #ffffff;
  1056. }
  1057. section.container-tools section button div p {
  1058. color: #ffffff;
  1059. text-align: left;
  1060. }
  1061. section.container-tools section button svg:last-child {
  1062. width: 16px;
  1063. height: 100%;
  1064. margin: 0 0 0 auto;
  1065. color: #ffffff;
  1066. }
  1067. section.container-error section {
  1068. width: 100%;
  1069. height: 85%;
  1070. display: flex;
  1071. flex-direction: column;
  1072. align-items: center;
  1073. }
  1074. section.container-error section h1 {
  1075. margin: 1% 0 0 0;
  1076. color: #ffffff;
  1077. font-size: 0.9rem;
  1078. }
  1079. section.container-error section p {
  1080. margin: 3% 0 0 0;
  1081. padding: 0 3%;
  1082. color: #ffffff;
  1083. text-align: center;
  1084. font-size: 0.8rem;
  1085. font-family: Arial, sans-serif;
  1086. overflow: auto;
  1087. }
  1088. section.active {
  1089. opacity: 1;
  1090. transform: translateX(0%);
  1091. }
  1092. section.container-menu {
  1093. width: 100%;
  1094. height: 10%;
  1095. z-index: 9999;
  1096. display: flex;
  1097. align-items: center;
  1098. justify-content: center;
  1099. gap: 10px;
  1100. position: relative;
  1101. margin: 21px 0px 0px 0px;
  1102. padding: 0px 10px;
  1103. background-color: blue; //aqui
  1104. }
  1105. section.container-menu button {
  1106. flex: 1;
  1107. width: 60px;
  1108. height: 50%;
  1109. display: flex;
  1110. flex-direction: column;
  1111. justify-content: center;
  1112. align-items: center;
  1113. gap: 8px;
  1114. position: relative;
  1115. z-index: 5;
  1116. border: 0px;
  1117. background: blue;
  1118. }
  1119. section.container-menu button:nth-child(2) {
  1120. margin-right: 10px;
  1121. }
  1122. section.container-menu button:nth-child(3) {
  1123. margin-right: 10px;
  1124. }
  1125. section.container-menu button:last-child {
  1126. margin-right: 5px;
  1127. }
  1128. section.container-menu button svg {
  1129. color: #ffffff;
  1130. }
  1131. section.container-menu button span {
  1132. color: #ffffff;
  1133. text-transform: uppercase;
  1134. font-size: 0.7rem;
  1135. }
  1136. section.container-toast {
  1137. width: 100%;
  1138. height: auto;
  1139. display: flex;
  1140. justify-content: center;
  1141. align-items: center;
  1142. position: absolute;
  1143. left: 0;
  1144. bottom: 2.5%;
  1145. right: 0;
  1146. z-index: 99999999;
  1147. padding: 10px 10px;
  1148. transform: scale(0);
  1149. }
  1150. section.container-toast div.toast {
  1151. width: auto;
  1152. height: auto;
  1153. display: flex;
  1154. align-items: center;
  1155. position: relative;
  1156. padding: 0px 5px 0px 0px;
  1157. border: 1px solid red;
  1158. border-radius: 10px;
  1159. background: #152039;
  1160. }
  1161. section.container-toast div.toast::before,
  1162. section.container-toast div.toast::after {
  1163. width: calc(100% + 10px);
  1164. height: calc(100% + 10px);
  1165. content: "";
  1166. position: absolute;
  1167. top: -5px;
  1168. left: -5px;
  1169. z-index: -1;
  1170. border-radius: 10px;
  1171. background: radial-gradient(circle,
  1172. rgba(159, 47, 255, 0.5),
  1173. rgba(11, 177, 211, 0.5),
  1174. rgba(127, 71, 203, 0.5),
  1175. rgba(0, 255, 255, 0.5),
  1176. rgba(122, 44, 236, 0.5),
  1177. rgba(74, 223, 223, 0.5),
  1178. rgba(118, 252, 252, 0.5),
  1179. rgba(127, 71, 203, 0.5),
  1180. rgba(159, 47, 255, 0.5),
  1181. rgba(11, 177, 211, 0.5),
  1182. rgba(127, 71, 203, 0.5),
  1183. rgba(0, 255, 255, 0.5),
  1184. rgba(122, 44, 236, 0.5),
  1185. rgba(74, 223, 223, 0.5));
  1186. background-size: 300%;
  1187. animation: 15s infinite ButtonStartVpnAnimation;
  1188. }
  1189. section.container-toast div.toast::after {
  1190. filter: blur(5px);
  1191. }
  1192. section.container-toast div.toast.error {
  1193. border: 1px solid #ff0000;
  1194. }
  1195. section.container-toast div.toast div.icon {
  1196. width: auto;
  1197. height: 100%;
  1198. display: flex;
  1199. justify-content: center;
  1200. align-items: center;
  1201. padding: 5px 4px 5px 7px;
  1202. border-top-left-radius: 10px;
  1203. border-bottom-left-radius: 10px;
  1204. overflow: hidden;
  1205. background: #152039;
  1206. }
  1207. section.container-toast div.toast.error div.icon {
  1208. border-right: 1px solid #ff0000;
  1209. }
  1210. section.container-toast div.toast div.icon img {
  1211. width: auto;
  1212. height: 100%;
  1213. min-height: 30px;
  1214. }
  1215. section.container-toast div.toast span {
  1216. margin-left: 5px;
  1217. color: #ffffff;
  1218. font-family: Arial, sans-serif;
  1219. font-size: 0.8rem;
  1220. font-weight: 300;
  1221. }
  1222. @media (max-width: 280px) {
  1223. section.container-menu button {
  1224. flex: 1;
  1225. width: 60px;
  1226. max-width: 60px;
  1227. height: 50%;
  1228. display: flex;
  1229. flex-direction: column;
  1230. justify-content: center;
  1231. align-items: center;
  1232. gap: 8px;
  1233. position: relative;
  1234. z-index: 5;
  1235. border: 0px;
  1236. background: transparent;
  1237. }
  1238. section.container-menu button:last-child {
  1239. margin-right: 10px;
  1240. }
  1241. section.container-menu button span {
  1242. font-size: 0.5rem;
  1243. }
  1244. }
  1245. @media only screen and (max-width: 576px) {
  1246. section.container-menu button {
  1247. flex: 1;
  1248. width: 60px;
  1249. max-width: 60px;
  1250. height: 50%;
  1251. display: flex;
  1252. flex-direction: column;
  1253. justify-content: center;
  1254. align-items: center;
  1255. gap: 8px;
  1256. position: relative;
  1257. z-index: 5;
  1258. border: 0px;
  1259. background: transparent; //aqui
  1260. }
  1261. section.container-menu button:last-child {
  1262. margin-right: 10px;
  1263. }
  1264. section.container-menu button span {
  1265. font-size: 0.5rem;
  1266. }
  1267. }
  1268. .spaceInDown {
  1269. -webkit-animation-name: spaceInDown;
  1270. animation-name: spaceInDown;
  1271. }
  1272. @-webkit-keyframes spaceInDown {
  1273. 0% {
  1274. opacity: 0;
  1275. transform-origin: 50% 100%;
  1276. transform: scale(0.2) translate(0%, 200%);
  1277. }
  1278. 100% {
  1279. opacity: 1;
  1280. transform-origin: 50% 100%;
  1281. transform: scale(1) translate(0%, 0%);
  1282. }
  1283. }
  1284. @keyframes spaceInDown {
  1285. 0% {
  1286. opacity: 0;
  1287. transform-origin: 50% 100%;
  1288. transform: scale(0.2) translate(0%, 200%);
  1289. }
  1290. 100% {
  1291. opacity: 1;
  1292. transform-origin: 50% 100%;
  1293. transform: scale(1) translate(0%, 0%);
  1294. }
  1295. }
  1296. .spaceOutDown {
  1297. -webkit-animation-name: spaceOutDown;
  1298. animation-name: spaceOutDown;
  1299. }
  1300. @-webkit-keyframes spaceOutDown {
  1301. 0% {
  1302. opacity: 1;
  1303. transform-origin: 50% 100%;
  1304. transform: scale(1) translate(0%, 0%);
  1305. }
  1306. 100% {
  1307. opacity: 0;
  1308. transform-origin: 50% 100%;
  1309. transform: scale(0.2) translate(0%, 200%);
  1310. }
  1311. }
  1312. @keyframes spaceOutDown {
  1313. 0% {
  1314. opacity: 1;
  1315. transform-origin: 50% 100%;
  1316. transform: scale(1) translate(0%, 0%);
  1317. }
  1318. 100% {
  1319. opacity: 0;
  1320. transform-origin: 50% 100%;
  1321. transform: scale(0.2) translate(0%, 200%);
  1322. }
  1323. }
  1324. .masterSshAnimatedTime {
  1325. -webkit-animation-duration: 1s;
  1326. animation-duration: 1s;
  1327. -webkit-animation-fill-mode: both;
  1328. animation-fill-mode: both;
  1329. }
  1330. @media (print),
  1331. (prefers-reduced-motion) {
  1332. .masterSshAnimatedTime {
  1333. -webkit-animation: unset !important;
  1334. animation: unset !important;
  1335. transition: none !important;
  1336. }
  1337. }
  1338. </style>
  1339. </head>
  1340. <body>
  1341. <main>
  1342. <section class="home active">
  1343. <div class="gif-container">
  1344. <img id="gif-image" src="" alt="">
  1345. </div>
  1346. <section class="container-local-ip active" style="margin-top: 150px;">
  1347. <button type="button">
  1348. <span id="local-ip-value">Localizando IP...</span>
  1349. </button>
  1350. </section>
  1351. <section class="container-button-start-stop-vpn">
  1352. <button type="button" title="Iniciar ou Parar conexĂŁo VPN" id="start-stop-vpn-button">
  1353. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-power"
  1354. viewBox="0 0 16 16">
  1355. <path d="M7.5 1v7h1V1h-1z" />
  1356. <path
  1357. 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" />
  1358. </svg>
  1359. </button>
  1360. </section>
  1361. <section class="container-status-connection active">
  1362. <button type="button">
  1363. <span id="state-value">LBL_STATE_DISCONNECTED</span>
  1364. </button>
  1365. </section>
  1366. <section class="container-carrier-selector-button">
  1367. <button type="button" id="carrier-list-button">
  1368. <span id="value-of-carrier-list-button">SELECIONE UMA CONFIGURAÇÃO</span>
  1369. </button>
  1370. </section>
  1371. </section>
  1372. <section class="carrier-list">
  1373. <header>
  1374. <svg id="back-carrier-container" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1375. class="bi bi-arrow-return-left" viewBox="0 0 16 16">
  1376. <path fill-rule="evenodd"
  1377. 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" />
  1378. </svg>
  1379. <h1>SELECIONE UMA OPÇÃO</h1>
  1380. </header>
  1381. <section></section>
  1382. </section>
  1383. <section class="profile">
  1384. <header>
  1385. <svg id="back-profile-container" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1386. class="bi bi-arrow-return-left" viewBox="0 0 16 16">
  1387. <path fill-rule="evenodd"
  1388. 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" />
  1389. </svg>
  1390. <h1>PERFIL</h1>
  1391. </header>
  1392. <form>
  1393. <fieldset>
  1394. <legend>
  1395. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1396. class="bi bi-person-exclamation" viewBox="0 0 16 16">
  1397. <path
  1398. 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" />
  1399. <path
  1400. 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" />
  1401. </svg>
  1402. </legend>
  1403. <p>
  1404. Insira suas credenciais nos campos abaixo e clique no botĂŁo
  1405. "Salvar credenciais". Isso o levarĂĄ de volta Ă  pĂĄgina inicial do
  1406. aplicativo, onde vocĂȘ poderĂĄ se conectar e desfrutar da conexĂŁo.
  1407. </p>
  1408. </fieldset>
  1409. <fieldset>
  1410. <legend>Informe suas credenciais</legend>
  1411. <label for="usernamediv">Nome de usuĂĄrio</label>
  1412. <div id="usernamediv">
  1413. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person"
  1414. viewBox="0 0 16 16">
  1415. <path
  1416. 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" />
  1417. </svg>
  1418. <input id="username" type="text" name="username" placeholder="UsuĂĄrio" value="Blinder" />
  1419. </div>
  1420. <label for="passworddiv">Senha</label>
  1421. <div id="passworddiv">
  1422. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key"
  1423. viewBox="0 0 16 16">
  1424. <path
  1425. 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" />
  1426. <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
  1427. </svg>
  1428. <input id="password" type="password" name="password" placeholder="Senha" value="Blinder"/>
  1429. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1430. class="bi bi-eye-slash hidden" id="eye-not-view" viewBox="0 0 16 16">
  1431. <path
  1432. 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" />
  1433. <path
  1434. 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" />
  1435. <path
  1436. 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" />
  1437. </svg>
  1438. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
  1439. id="eye-view" viewBox="0 0 16 16">
  1440. <path
  1441. 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" />
  1442. <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" />
  1443. </svg>
  1444. </div>
  1445. <label for="uuiddiv" class="hidden">UUID</label>
  1446. <div id="uuiddiv" class="hidden">
  1447. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fingerprint"
  1448. viewBox="0 0 16 16">
  1449. <path
  1450. 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" />
  1451. <path
  1452. 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" />
  1453. <path
  1454. 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" />
  1455. <path
  1456. 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" />
  1457. <path
  1458. 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" />
  1459. </svg>
  1460. <input id="uuid" type="text" placeholder="UUID" />
  1461. </div>
  1462. <button id="save-creds" type="button" title="Salvar informaçÔes de usuario e senha">
  1463. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-save"
  1464. viewBox="0 0 16 16">
  1465. <path
  1466. 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" />
  1467. </svg>
  1468. <span>Salvar credenciais</span>
  1469. </button>
  1470. </fieldset>
  1471. </form>
  1472. </section>
  1473. <section class="container-tools">
  1474. <header>
  1475. <svg id="back-tools-container" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1476. class="bi bi-arrow-return-left" viewBox="0 0 16 16">
  1477. <path fill-rule="evenodd"
  1478. 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" />
  1479. </svg>
  1480. <h1>FERRAMENTAS</h1>
  1481. </header>
  1482. <section>
  1483. <button type="button" id="register-button">
  1484. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-columns"
  1485. viewBox="0 0 16 16">
  1486. <path fill-rule="evenodd"
  1487. 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" />
  1488. </svg>
  1489. <div>
  1490. <h3>REGISTRO</h3>
  1491. <p>
  1492. Verifica todos os detalhes do que acontece ao abrir e conectar
  1493. no app.
  1494. </p>
  1495. </div>
  1496. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1497. viewBox="0 0 16 16">
  1498. <path fill-rule="evenodd"
  1499. 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" />
  1500. </svg>
  1501. </button>
  1502. <button type="button" id="speedtest-tool">
  1503. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-activity"
  1504. viewBox="0 0 16 16">
  1505. <path fill-rule="evenodd"
  1506. 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" />
  1507. </svg>
  1508. <div>
  1509. <h3>SPEEDTEST</h3>
  1510. <p>Teste a velocidade da sua conexĂŁo</p>
  1511. </div>
  1512. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1513. viewBox="0 0 16 16">
  1514. <path fill-rule="evenodd"
  1515. 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" />
  1516. </svg>
  1517. </button>
  1518. <button type="button" id="hotspot-button-tools">
  1519. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-broadcast"
  1520. viewBox="0 0 16 16">
  1521. <path
  1522. 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" />
  1523. </svg>
  1524. <div>
  1525. <h3>HOTSPOT</h3>
  1526. <p>
  1527. Aqui vocĂȘ pode compartilar sua conexĂŁo VPN usando o roteador do
  1528. seu celular.
  1529. </p>
  1530. </div>
  1531. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1532. viewBox="0 0 16 16">
  1533. <path fill-rule="evenodd"
  1534. 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" />
  1535. </svg>
  1536. </button>
  1537. <button type="button" id="apn-tool">
  1538. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-broadcast-pin"
  1539. viewBox="0 0 16 16">
  1540. <path
  1541. 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" />
  1542. </svg>
  1543. <div>
  1544. <h3>CONFIGURAR APN</h3>
  1545. <p>Aqui vocĂȘ pode fazer ajustes no APN</p>
  1546. </div>
  1547. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1548. viewBox="0 0 16 16">
  1549. <path fill-rule="evenodd"
  1550. 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" />
  1551. </svg>
  1552. </button>
  1553. <button type="button" id="battery-tool">
  1554. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1555. class="bi bi-battery-charging" viewBox="0 0 16 16">
  1556. <path
  1557. 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" />
  1558. <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" />
  1559. <path
  1560. 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" />
  1561. <path
  1562. 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" />
  1563. </svg>
  1564. <div>
  1565. <h3>OTIMIZAÇÃO DE BATERIA</h3>
  1566. <p>
  1567. Aqui vocĂȘ consegue desativar a otimização de bateria que acaba
  1568. encerrando o aplicativo sem a sua permissĂŁo!
  1569. </p>
  1570. </div>
  1571. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1572. viewBox="0 0 16 16">
  1573. <path fill-rule="evenodd"
  1574. 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" />
  1575. </svg>
  1576. </button>
  1577. <button type="button" id="checkuser-tool">
  1578. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1579. class="bi bi-person-lines-fill" viewBox="0 0 16 16">
  1580. <path
  1581. 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" />
  1582. </svg>
  1583. <div>
  1584. <h3>DETALHES DO LOGIN</h3>
  1585. <p>
  1586. Aqui vocĂȘ consegue visualizar alguns detalhes do seu perfil.
  1587. </p>
  1588. </div>
  1589. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1590. viewBox="0 0 16 16">
  1591. <path fill-rule="evenodd"
  1592. 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" />
  1593. </svg>
  1594. </button>
  1595. <button type="button" id="button-open-clear-data-app">
  1596. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash"
  1597. viewBox="0 0 16 16">
  1598. <path
  1599. 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" />
  1600. <path
  1601. 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" />
  1602. </svg>
  1603. <div>
  1604. <h3>LIMPAR DADOS</h3>
  1605. <p>
  1606. Aqui vocĂȘ pode fazer a limpeza do cache e dados do aplicativo.
  1607. </p>
  1608. </div>
  1609. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1610. viewBox="0 0 16 16">
  1611. <path fill-rule="evenodd"
  1612. 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" />
  1613. </svg>
  1614. </button>
  1615. <button type="button" id="button-open-terms-app">
  1616. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1617. class="bi bi-journal-medical" viewBox="0 0 16 16">
  1618. <path fill-rule="evenodd"
  1619. 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" />
  1620. <path
  1621. 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" />
  1622. <path
  1623. 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" />
  1624. </svg>
  1625. <div>
  1626. <h3>TERMOS DE USO</h3>
  1627. <p>
  1628. Aqui vocĂȘ consegue ler os termos de uso e licença do aplicativo.
  1629. </p>
  1630. </div>
  1631. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
  1632. viewBox="0 0 16 16">
  1633. <path fill-rule="evenodd"
  1634. 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" />
  1635. </svg>
  1636. </button>
  1637. </section>
  1638. </section>
  1639. <section class="logs-container">
  1640. <section>
  1641. <header>
  1642. <h1>REGISTRO</h1>
  1643. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  1644. id="register-logs-close" viewBox="0 0 16 16">
  1645. <path
  1646. 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" />
  1647. </svg>
  1648. </header>
  1649. <section>
  1650. <p></p>
  1651. </section>
  1652. <button type="button" id="clear-logs">
  1653. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash"
  1654. viewBox="0 0 16 16">
  1655. <path
  1656. 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" />
  1657. <path
  1658. 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" />
  1659. </svg>
  1660. <span>LIMPAR REGISTRO</span>
  1661. </button>
  1662. </section>
  1663. </section>
  1664. <section class="loading">
  1665. <section>
  1666. <header>
  1667. <h1>CARREGANDO INFORMAÇÕES</h1>
  1668. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  1669. id="loading-container-close" viewBox="0 0 16 16">
  1670. <path
  1671. 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" />
  1672. </svg>
  1673. </header>
  1674. <div class="loading"></div>
  1675. </section>
  1676. </section>
  1677. <section class="checkuser">
  1678. <section>
  1679. <header>
  1680. <h1>DETALHES DO USUÁRIO</h1>
  1681. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  1682. id="checkuser-close" viewBox="0 0 16 16">
  1683. <path
  1684. 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" />
  1685. </svg>
  1686. </header>
  1687. <section>
  1688. <div>
  1689. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill"
  1690. viewBox="0 0 16 16">
  1691. <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" />
  1692. </svg>
  1693. <span id="checkuser-name">USUÁRIO: ALEX</span>
  1694. </div>
  1695. <div>
  1696. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1697. class="bi bi-calendar-fill" viewBox="0 0 16 16">
  1698. <path
  1699. 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" />
  1700. </svg>
  1701. <span id="checkuser-expires">EXPIRA EM: 25/09/2023</span>
  1702. </div>
  1703. <div>
  1704. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock-fill"
  1705. viewBox="0 0 16 16">
  1706. <path
  1707. 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" />
  1708. </svg>
  1709. <span id="checkuser-remaing-days">RESTA: 30 DIAS</span>
  1710. </div>
  1711. <div>
  1712. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone-fill"
  1713. viewBox="0 0 16 16">
  1714. <path
  1715. 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" />
  1716. </svg>
  1717. <span id="checkuser-total-conection">CONEXÕES: 1/10</span>
  1718. </div>
  1719. </section>
  1720. </section>
  1721. </section>
  1722. <section class="renew-alert">
  1723. <section>
  1724. <header>
  1725. <h1>RENOVE SEU ACESSO</h1>
  1726. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  1727. id="renew-alert-close" viewBox="0 0 16 16">
  1728. <path
  1729. 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" />
  1730. </svg>
  1731. </header>
  1732. <section>
  1733. <p>
  1734. <bold id="renew-username">Caro usuĂĄrio</bold>
  1735. <br /><br />
  1736. <italic>Seu período de acesso estå chegando ao fim! Para continuar utilizando nossos serviços, entre em
  1737. contato para fazer a renovação.</italic>
  1738. <br /><br />
  1739. Atenciosamente, <bold>MASTER SSH</bold>
  1740. </p>
  1741. </section>
  1742. </section>
  1743. </section>
  1744. <section class="clean-data-app">
  1745. <section>
  1746. <header>
  1747. <h1>DESEJA CONFIRMAR ESSA AÇÃO ?</h1>
  1748. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  1749. id="hidden-clear-data-app" viewBox="0 0 16 16">
  1750. <path
  1751. 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" />
  1752. </svg>
  1753. </header>
  1754. <section>
  1755. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1756. class="bi bi-exclamation-lg" viewBox="0 0 16 16">
  1757. <path
  1758. 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" />
  1759. </svg>
  1760. <h1>TEM CERTEZA DA AÇÃO ?</h1>
  1761. <p>
  1762. Ao efetuar a ação de limpar os dados do aplicativo, serå possível
  1763. carregar somente as configuraçÔes mais recentes mediante uma
  1764. conexĂŁo ativa com a internet.
  1765. </p>
  1766. <button type="button" id="confirm-clean-data-app">
  1767. <span>CONFIRMAR</span>
  1768. </button>
  1769. </section>
  1770. </section>
  1771. </section>
  1772. <section class="hotspot-container">
  1773. <section>
  1774. <header>
  1775. <h1>ROTEADOR WIFI - HOTSPOT</h1>
  1776. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  1777. id="hidden-hotspot-container" viewBox="0 0 16 16">
  1778. <path
  1779. 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" />
  1780. </svg>
  1781. </header>
  1782. <section>
  1783. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-router-fill"
  1784. viewBox="0 0 16 16">
  1785. <path
  1786. 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" />
  1787. <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" />
  1788. <path
  1789. 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" />
  1790. <path d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
  1791. </svg>
  1792. <h1 id="title-hotspot">ROTEAMENTO DESLIGADO</h1>
  1793. <p>
  1794. Ao ativar o hotspot com compartilhamento de VPN do seu celular, um
  1795. IP local Ă© gerado no seu dispositivo. Este IP Ă© usado como proxy
  1796. no dispositivo conectado Ă  sua rede Wi-Fi.
  1797. <br />
  1798. <br />
  1799. <b>SIGA ESTES PASSOS IMPORTANTES</b>
  1800. <br />
  1801. <br />
  1802. 1 - Ligue o roteador do celular primeiro.
  1803. <br /><br />
  1804. 2 - Ative o compartilhamento de VPN.
  1805. <br /><br />
  1806. 3 - Use o botĂŁo para controlar o roteador.
  1807. <br /><br />
  1808. 4 - Encontre o segundo IP na barra de notificaçÔes.
  1809. <br /><br />
  1810. 5 - Copie o segundo IP e use como proxy no dispositivo conectado Ă 
  1811. rede.
  1812. <br />
  1813. <br />
  1814. Lembre-se: O segundo IP Ă© seu proxy. Isso garantirĂĄ o correto
  1815. funcionamento do compartilhamento de VPN via hotspot do celular.
  1816. </p>
  1817. <button type="button" id="enable-hotspot">
  1818. <span id="value-button-hotspot">LIGAR HOTSPOT</span>
  1819. </button>
  1820. </section>
  1821. </section>
  1822. </section>
  1823. <section class="terms-container">
  1824. <section>
  1825. <header>
  1826. <h1>TERMOS DE USO</h1>
  1827. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
  1828. id="hidden-terms-container" viewBox="0 0 16 16">
  1829. <path
  1830. 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" />
  1831. </svg>
  1832. </header>
  1833. <p>
  1834. Importante: Ao utilizar o nosso aplicativo, Ă© fundamental que vocĂȘ
  1835. esteja ciente e concorde com os seguintes pontos:
  1836. <br /><br /><br />
  1837. 1° - Nosso suporte estå disponível para ajudar clientes que
  1838. enfrentam problemas como dificuldades de conexão, informaçÔes
  1839. incorretas, ou se o aplicativo nĂŁo estĂĄ instalado corretamente.
  1840. <br /><br />
  1841. 2° - Não somos responsåveis por questÔes relacionadas à manutenção
  1842. da sua operadora, quedas na conexĂŁo causadas por fatores externos ou
  1843. problemas climĂĄticos que possam afetar a velocidade da sua internet
  1844. através da VPN.
  1845. <br /><br />
  1846. 3° - Caso haja uma interrupção no serviço devido à operadora, não
  1847. efetuamos reembolsos. No entanto, os dias em que o serviço ficar
  1848. indisponível serão compensados quando a situação se normalizar,
  1849. visto que hå custos associados à manutenção dos servidores.
  1850. <br /><br />
  1851. 4° - Não nos responsabilizamos por sites e jogos que impeçam o uso
  1852. da nossa VPN.
  1853. <br /><br />
  1854. 5° - É permitido usar apenas o nĂșmero de dispositivos estipulado no
  1855. seu contrato com o revendedor autorizado.
  1856. <br /><br />
  1857. 6° - É estritamente proibido o uso de aplicativos torrent ou P2P,
  1858. pois eles podem prejudicar o desempenho dos nossos servidores.
  1859. <br /><br />
  1860. 7° - É importante que, independentemente da sua operadora, vocĂȘ faça
  1861. uma recarga a cada 2 meses para garantir um serviço contínuo.
  1862. <br /><br />
  1863. 8° - Mantenha o aplicativo sempre atualizado, pois as atualizaçÔes
  1864. são necessårias para garantir o bom funcionamento do serviço.
  1865. <br /><br /><br /><br />
  1866. Agradecemos por escolher o nosso aplicativo e desejamos a vocĂȘ uma
  1867. Ăłtima experiĂȘncia de navegação!
  1868. </p>
  1869. </section>
  1870. </section>
  1871. <section class="container-error">
  1872. <header>
  1873. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  1874. class="bi bi-arrow-return-left" viewBox="0 0 16 16">
  1875. <path fill-rule="evenodd"
  1876. 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" />
  1877. </svg>
  1878. <h1>ERROR</h1>
  1879. </header>
  1880. <section>
  1881. <h1 id="error-title"></h1>
  1882. <p id="error-log"></p>
  1883. </section>
  1884. </section>
  1885. <section class="container-toast masterSshAnimatedTime">
  1886. <div class="toast">
  1887. <div class="icon">
  1888. <img
  1889. 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"
  1890. alt="Icone do toast" />
  1891. </div>
  1892. <span class="text">Procurando atualizaçÔes</span>
  1893. </div>
  1894. </section>
  1895. </main>
  1896. <section class="container-menu">
  1897. <button id="home" type="button" title="Inicio">
  1898. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house"
  1899. viewBox="0 0 16 16">
  1900. <defs>
  1901. <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
  1902. <stop offset="0%" stop-color="#0bb1d3" />
  1903. <stop offset="100%" stop-color="#9f2fff" />
  1904. </linearGradient>
  1905. </defs>
  1906. <path
  1907. 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" />
  1908. </svg>
  1909. <span>Inicio</span>
  1910. </button>
  1911. <button id="login" type="button" title="Login" onclick="mostrarConteudo()">
  1912. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tv"
  1913. viewBox="0 0 16 16">
  1914. <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"/>
  1915. <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"/>
  1916. </svg>
  1917. <span>TV</span>
  1918. </button>
  1919. <button id="tools" type="button" title="Ferramentas">
  1920. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-nut"
  1921. viewBox="0 0 16 16">
  1922. <path
  1923. 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" />
  1924. <path
  1925. 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" />
  1926. </svg>
  1927. <span>Ferramentas</span>
  1928. </button>
  1929. <button id="contact-button" type="button" title="Contato via WhatsApp" onclick="window.open('https://api.whatsapp.com/send?phone=71999105628')" style="color: white;">
  1930. <i class="fab fa-whatsapp" style="font-size: 14px;"></i>
  1931. <span>WhatsApp</span>
  1932. </button>
  1933. <script>
  1934. // Substitua 'url_da_sua_lista.m3u' pela URL da sua lista IPTV
  1935. const urlDaListaIPTV = 'https://i.mjh.nz/PlutoTV/br.m3u8';
  1936. // Canais adicionados manualmente
  1937. const canaisAdicionais = [
  1938. {
  1939. "logo": "https://imgur.com/waZJG1M.png",
  1940. "stream": "https://cdn-3.nxplay.com.br/GLOBO_SP_TK/index.m3u8",
  1941. "name": "GLOBO"
  1942. },
  1943. {
  1944. "logo": "https://imgur.com/KO1v3pS.png",
  1945. "stream": "https://d2dxmktgc9qcf7.cloudfront.net/out/v1/a7c2cd7ccd84420aa496b5d4cfd9ae79/hlsOutput_2.m3u8",
  1946. "name": "SBT"
  1947. },
  1948. {
  1949. "logo": "https://imgur.com/lyQ1v9M.png",
  1950. "stream": "https://cdn.jmvstream.com/w/LVW-10842/LVW10842_513N26MDBL/chunklist.m3u8?ManoTV",
  1951. "name": "RECORD"
  1952. },
  1953. {
  1954. "logo": "https://imgur.com/xYGjfh8.png",
  1955. "stream": "https://cdn-3.nxplay.com.br/BAND_HD_PFZ_NX/tracks-v1a1/mono.m3u8?ManoTV",
  1956. "name": "BAND"
  1957. },
  1958. {
  1959. "logo": "https://imgur.com/EgKx2J1.png",
  1960. "stream": "https://cdn.jmvstream.com/w/AVJ-15235/playlist/chunklist.m3u8",
  1961. "name": "REDE TV!"
  1962. },
  1963. {
  1964. "logo": "https://imgur.com/vSKVrvH.png",
  1965. "stream": "https://cc-7pakstinpyajo.akamaized.net/playlist720lp.m3u8",
  1966. "name": "NEW BRASIL"
  1967. },
  1968. {
  1969. "logo": "https://i.imgur.com/CkoAvYH.png",
  1970. "stream": "https://cdn-2.nxplay.com.br/ESPN/tracks-v1a1/mono.m3u8",
  1971. "name": "ESPN"
  1972. },
  1973. {
  1974. "logo": "https://i.imgur.com/ZAHnoPh.png",
  1975. "stream": "https://cdn-3.nxplay.com.br/ESPN_2/index.m3u8",
  1976. "name": "ESPN 2"
  1977. }
  1978. ];
  1979. document.addEventListener('DOMContentLoaded', function() {
  1980. // Oculta o player e a lista de canais ao carregar a pĂĄgina
  1981. ocultarConteudo();
  1982. // Adiciona um ouvinte de eventos para os botÔes específicos
  1983. var botaoLogin = document.getElementById('login');
  1984. var botaoFerramentas = document.getElementById('tools');
  1985. var botaoInicio = document.getElementById('home'); // BotĂŁo home adicionado
  1986. botaoLogin.addEventListener('click', function() {
  1987. mostrarConteudo();
  1988. mostrarToast(); // Chama a função para mostrar o toast
  1989. });
  1990. botaoFerramentas.addEventListener('click', ocultarConteudo);
  1991. botaoInicio.addEventListener('click', ocultarConteudo); // Evento de clique para ocultar o conteĂșdo
  1992. // Chama a função de atualização ao carregar a pågina
  1993. atualizarListaCanais();
  1994. // Adiciona a função para alternar tela cheia com duplo toque
  1995. alternarTelaCheiaComDuploToque(document.getElementById('player-container'));
  1996. });
  1997. // Função para mostrar o conteĂșdo
  1998. function mostrarConteudo() {
  1999. var playerContainer = document.getElementById('player-container');
  2000. var listaCanais = document.getElementById('lista-canais');
  2001. var corpo = document.body;
  2002. playerContainer.style.display = 'block';
  2003. corpo.classList.add('no-scroll'); // Desativa a rolagem da pĂĄgina
  2004. fetch(urlDaListaIPTV)
  2005. .then(response => response.text())
  2006. .then(data => {
  2007. processarListaIPTV(data);
  2008. listaCanais.style.display = 'block';
  2009. });
  2010. }
  2011. // Função para ocultar o conteĂșdo
  2012. function ocultarConteudo() {
  2013. var playerContainer = document.getElementById('player-container');
  2014. var listaCanais = document.getElementById('lista-canais');
  2015. playerContainer.style.display = 'none';
  2016. listaCanais.style.display = 'none';
  2017. document.body.classList.remove('no-scroll');
  2018. }
  2019. // Função para processar a lista IPTV e criar os elementos HTML para cada canal
  2020. function processarListaIPTV(data) {
  2021. const linhas = data.split('\n');
  2022. let htmlCanais = '';
  2023. // Processa canais adicionais primeiro
  2024. canaisAdicionais.forEach(canal => {
  2025. htmlCanais += criarElementoCanal(canal.logo, canal.stream, canal.name);
  2026. });
  2027. // Processa a lista IPTV
  2028. for (let i = 0; i < linhas.length; i++) {
  2029. if (linhas[i].startsWith('#EXTINF:-1')) {
  2030. const partes = linhas[i].split(',');
  2031. const nomeCanal = partes[1];
  2032. const logoMatch = /tvg-logo="([^"]+)"/.exec(linhas[i]);
  2033. const logo = logoMatch ? logoMatch[1] : 'default_logo.png';
  2034. const urlCanal = linhas[i + 1].trim();
  2035. htmlCanais += criarElementoCanal(logo, urlCanal, nomeCanal);
  2036. }
  2037. }
  2038. document.getElementById('lista-canais').innerHTML = htmlCanais;
  2039. recuperarUltimoCanal(); // Adiciona a chamada para recuperar o Ășltimo canal aqui
  2040. }
  2041. // Função para criar o elemento HTML do canal
  2042. function criarElementoCanal(logo, stream, name) {
  2043. return `
  2044. <div class="canal" onclick="reproduzirCanal('${stream}')">
  2045. <img src="${logo}" alt="${name}" />
  2046. <span class="nome-canal">${name}</span>
  2047. </div>
  2048. `;
  2049. }
  2050. // Função para alternar tela cheia com duplo toque e rotacionar o vídeo
  2051. function alternarTelaCheiaComDuploToque(elemento) {
  2052. let ultimoToque = 0;
  2053. elemento.addEventListener('touchstart', function(evento) {
  2054. const tempoAtual = new Date().getTime();
  2055. const tempoDesdeUltimoToque = tempoAtual - ultimoToque;
  2056. if (tempoDesdeUltimoToque < 300 && tempoDesdeUltimoToque > 0) {
  2057. // Detectou um toque duplo
  2058. if (!document.fullscreenElement) {
  2059. // Ativa tela cheia se nĂŁo estiver em tela cheia
  2060. if (elemento.requestFullscreen) {
  2061. elemento.requestFullscreen();
  2062. } else if (elemento.webkitRequestFullscreen) { /* Safari */
  2063. elemento.webkitRequestFullscreen();
  2064. } else if (elemento.msRequestFullscreen) { /* IE11 */
  2065. elemento.msRequestFullscreen();
  2066. }
  2067. } else {
  2068. // Sai de tela cheia se estiver em tela cheia
  2069. if (document.exitFullscreen) {
  2070. document.exitFullscreen();
  2071. } else if (document.webkitExitFullscreen) { /* Safari */
  2072. document.webkitExitFullscreen();
  2073. } else if (document.msExitFullscreen) { /* IE11 */
  2074. document.msExitFullscreen();
  2075. }
  2076. }
  2077. }
  2078. ultimoToque = tempoAtual;
  2079. });
  2080. // Adiciona ouvintes de eventos para mudanças de tela cheia
  2081. document.addEventListener('fullscreenchange', aplicarRotacao, false);
  2082. document.addEventListener('webkitfullscreenchange', aplicarRotacao, false);
  2083. document.addEventListener('msfullscreenchange', aplicarRotacao, false);
  2084. }
  2085. function aplicarRotacao() {
  2086. var playerContainer = document.getElementById('player-container');
  2087. if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
  2088. // Aplica a rotação ao contĂȘiner do player
  2089. playerContainer.classList.add('rotacionar-video');
  2090. } else {
  2091. // Remove a rotação do contĂȘiner do player
  2092. playerContainer.classList.remove('rotacionar-video');
  2093. }
  2094. }
  2095. // Função para reproduzir o canal selecionado com o elemento <video>
  2096. function reproduzirCanal(urlCanal) {
  2097. var videoElement = document.getElementById('player');
  2098. videoElement.src = urlCanal;
  2099. videoElement.play();
  2100. // Salva o canal atual como o Ășltimo canal assistido
  2101. localStorage.setItem('ultimoCanal', urlCanal);
  2102. }
  2103. // Função para recuperar e reproduzir o Ășltimo canal assistido
  2104. function recuperarUltimoCanal() {
  2105. const ultimoCanal = localStorage.getItem('ultimoCanal');
  2106. if (ultimoCanal) {
  2107. reproduzirCanal(ultimoCanal);
  2108. }
  2109. }
  2110. function mostrarToast() {
  2111. const toastContainer = document.createElement('div');
  2112. toastContainer.style.position = 'fixed';
  2113. toastContainer.style.top = '30px'; // Ajustado para aparecer no topo
  2114. toastContainer.style.left = '50%';
  2115. toastContainer.style.transform = 'translateX(-50%)';
  2116. toastContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
  2117. toastContainer.style.color = 'white';
  2118. toastContainer.style.padding = '10px';
  2119. toastContainer.style.borderRadius = '5px';
  2120. toastContainer.style.zIndex = '1000';
  2121. toastContainer.innerText = 'Para tela cheia, dĂȘ dois toques sobre o vĂ­deo';
  2122. document.body.appendChild(toastContainer);
  2123. // Remover o toast apĂłs 4 segundos
  2124. setTimeout(() => {
  2125. document.body.removeChild(toastContainer);
  2126. }, 4000);
  2127. }
  2128. // Função para verificar e atualizar a lista de canais
  2129. function atualizarListaCanais() {
  2130. const listaCanaisCache = localStorage.getItem('listaCanais');
  2131. const ultimaAtualizacao = localStorage.getItem('ultimaAtualizacao');
  2132. const agora = new Date().getTime();
  2133. // Verifica se a lista estĂĄ em cache e se passaram menos de 24 horas desde a Ășltima atualização
  2134. if (listaCanaisCache && ultimaAtualizacao && agora - ultimaAtualizacao < 86400000) {
  2135. processarListaIPTV(listaCanaisCache);
  2136. } else {
  2137. // Carrega a lista IPTV e exibe os canais
  2138. fetch(urlDaListaIPTV)
  2139. .then(response => response.text())
  2140. .then(data => {
  2141. localStorage.setItem('listaCanais', data);
  2142. localStorage.setItem('ultimaAtualizacao', agora.toString());
  2143. processarListaIPTV(data);
  2144. });
  2145. }
  2146. }
  2147. </script>
  2148. <script>
  2149. // Função para alternar o vídeo para tela cheia
  2150. function alternarTelaCheia() {
  2151. var playerContainer = document.getElementById('player-container');
  2152. if (!document.fullscreenElement) {
  2153. if (playerContainer.requestFullscreen) {
  2154. playerContainer.requestFullscreen();
  2155. } else if (playerContainer.webkitRequestFullscreen) { /* Safari */
  2156. playerContainer.webkitRequestFullscreen();
  2157. } else if (playerContainer.msRequestFullscreen) { /* IE11 */
  2158. playerContainer.msRequestFullscreen();
  2159. }
  2160. } else {
  2161. if (document.exitFullscreen) {
  2162. document.exitFullscreen();
  2163. } else if (document.webkitExitFullscreen) { /* Safari */
  2164. document.webkitExitFullscreen();
  2165. } else if (document.msExitFullscreen) { /* IE11 */
  2166. document.msExitFullscreen();
  2167. }
  2168. }
  2169. }
  2170. // Adiciona um ouvinte de eventos para alternar o vĂ­deo para tela cheia ao dar dois toques
  2171. var videoElement = document.getElementById('player');
  2172. videoElement.addEventListener('touchstart', function(event) {
  2173. // Implementação de detecção de toque duplo
  2174. // ...
  2175. alternarTelaCheia(); // Chama a função para alternar o vídeo para tela cheia
  2176. });
  2177. </script>
  2178. <script>
  2179. const appGetStatusbarHeightSize = () => DtGetStatusBarHeight.execute()
  2180. const appGetNavbarHeightSize = () => DtGetNavigationBarHeight.execute()
  2181. const appTranslateText = (label) => DtTranslateText.execute(label)
  2182. const appGetConfigLabel = (label) => DtGetAppConfig.execute(label)
  2183. const appGetCarrierName = () => `${Android.getNetworkName()}`
  2184. const appGetLocalIp = () => `${Android.getLocalIP()}`
  2185. const AppUpdate = () => DtStartAppUpdate.execute()
  2186. const appAllConfigs = () => DtGetConfigs.execute()
  2187. const appSetConfig = (id) => DtSetConfig.execute(id)
  2188. const appGetDefaultConfig = () => DtGetDefaultConfig.execute()
  2189. const appGetConfigVersion = () =>
  2190. `${DtGetLocalConfigVersion.execute() ?? "1.0"}`
  2191. const appGetUsername = () => DtUsername.get()
  2192. const appSetUsername = (username) => DtUsername.set(username)
  2193. const appGetPassword = () => DtPassword.get()
  2194. const appSetPassword = (password) => DtPassword.set(password)
  2195. const appGetUUID = () => DtUuid.get()
  2196. const appSetUUID = (uuid) => DtUuid.set(uuid)
  2197. const appGetConnectionState = () => DtGetVpnState.execute()
  2198. const appStartConnection = () => DtExecuteVpnStart.execute()
  2199. const appStopConnection = () => DtExecuteVpnStop.execute()
  2200. const appGetStatusHotspot = () => DtGetStatusHotSpotService.execute()
  2201. const appStartHotspot = () => DtStartHotSpotService.execute()
  2202. const appStopHotspot = () => DtStopHotSpotService.execute()
  2203. const appGetLogs = () => DtGetLogs.execute()
  2204. const appCleanLogs = () => DtClearLogs.execute()
  2205. const appBatteryOptimize = () => DtIgnoreBatteryOptimizations.execute()
  2206. const appApnConfiguration = () => DtStartApnActivity.execute()
  2207. const appStartCheckUser = () => DtStartCheckUser.execute()
  2208. const appIntoBrowser = (url) => DtStartWebViewActivity.execute(url)
  2209. const appClearData = () => DtCleanApp.execute()
  2210. </script>
  2211. <script>
  2212. function shuffleArray(array) {
  2213. for (let i = array.length - 1; i > 0; i--) {
  2214. const j = Math.floor(Math.random() * (i + 1));
  2215. [array[i], array[j]] = [array[j], array[i]];
  2216. }
  2217. }
  2218. function initShuffle() {
  2219. const gifContainerURLs = [
  2220. 'https://i.gifer.com/Z6W2.gif',
  2221. 'https://i.gifer.com/4SHX.gif',
  2222. 'https://i.gifer.com/ZIb4.gif',
  2223. 'https://i.gifer.com/6ka.gif',
  2224. 'https://i.gifer.com/IXNp.gif',
  2225. 'https://i.gifer.com/ZJFD.gif',
  2226. 'https://i.gifer.com/tuJ.gif',
  2227. 'https://i.gifer.com/3nR6.gif',
  2228. 'https://i.gifer.com/bgh.gif',
  2229. 'https://i.gifer.com/XOsX.gif',
  2230. 'https://i.gifer.com/3pKc.gif',
  2231. 'https://i.gifer.com/6mz.gif',
  2232. 'https://i.gifer.com/WS2c.gif',
  2233. 'https://i.gifer.com/hdt.gif',
  2234. 'https://i.gifer.com/3F3F.gif',
  2235. 'https://i.gifer.com/XDZW.gif',
  2236. 'https://i.gifer.com/XiPu.gif',
  2237. 'https://i.gifer.com/xy.gif',
  2238. 'https://i.gifer.com/3IU0.gif',
  2239. 'https://i.gifer.com/YTup.gif',
  2240. 'https://i.gifer.com/4FB4.gif',
  2241. 'https://i.gifer.com/Y8HD.gif',
  2242. 'https://i.gifer.com/XwI4.gif',
  2243. 'https://i.gifer.com/4Jnt.gif',
  2244. 'https://i.gifer.com/ZdPP.gif',
  2245. 'https://i.gifer.com/WMDv.gif',
  2246. 'https://i.gifer.com/2ull.gif',
  2247. 'https://i.gifer.com/3sjq.gif',
  2248. 'https://i.gifer.com/y5.gif',
  2249. 'https://i.gifer.com/VIjf.gif',
  2250. 'https://i.gifer.com/7VA.gif',
  2251. 'https://i.gifer.com/2vDa.gif',
  2252. 'https://i.gifer.com/4OKl.gif',
  2253. 'https://i.gifer.com/xz.gif',
  2254. 'https://i.gifer.com/Dtk.gif',
  2255. 'https://i.gifer.com/4EAw.gif',
  2256. 'https://i.gifer.com/PZs.gif',
  2257. 'https://i.gifer.com/Yv30.gif',
  2258. 'https://i.gifer.com/4m3s.gif',
  2259. 'https://i.gifer.com/Oanl.gif',
  2260. 'https://i.gifer.com/X5NZ.gif',
  2261. 'https://i.gifer.com/2eSh.gif',
  2262. 'https://i.gifer.com/6ov.gif',
  2263. 'https://i.gifer.com/WG8Q.gif',
  2264. 'https://i.gifer.com/Yg6L.gif',
  2265. 'https://i.gifer.com/ZbHT.gif',
  2266. 'https://i.gifer.com/Ysrm.gif',
  2267. 'https://i.gifer.com/41we.gif',
  2268. 'https://i.gifer.com/YTqY.gif',
  2269. 'https://i.gifer.com/3AlV.gif',
  2270. 'https://i.gifer.com/6kk.gif',
  2271. 'https://i.gifer.com/7V9.gif',
  2272. 'https://i.gifer.com/WXfH.gif',
  2273. 'https://i.gifer.com/Z6W9.gif',
  2274. 'https://i.gifer.com/zRz.gif',
  2275. 'https://i.gifer.com/47tj.gif',
  2276. 'https://i.gifer.com/WiCE.gif',
  2277. 'https://i.gifer.com/YtyM.gif',
  2278. 'https://i.gifer.com/19y9.gif',
  2279. 'https://i.gifer.com/XwI3.gif',
  2280. 'https://i.gifer.com/tIH.gif',
  2281. 'https://i.gifer.com/1fLh.gif',
  2282. 'https://i.gifer.com/3BBF.gif',
  2283. 'https://i.gifer.com/1z9C.gif',
  2284. 'https://i.gifer.com/42xT.gif',
  2285. 'https://i.gifer.com/5RTM.gif',
  2286. 'https://i.gifer.com/3hQC.gif',
  2287. 'https://i.gifer.com/JUd.gif',
  2288. 'https://i.gifer.com/2zGr.gif',
  2289. 'https://i.gifer.com/Pan.gif',
  2290. 'https://i.gifer.com/1AYl.gif',
  2291. 'https://i.gifer.com/ZSj2.gif',
  2292. 'https://i.gifer.com/XqyP.gif',
  2293. 'https://i.gifer.com/XrH3.gif',
  2294. 'https://i.gifer.com/6mx.gif',
  2295. 'https://i.gifer.com/6K8M.gif',
  2296. 'https://i.gifer.com/Z16t.gif',
  2297. 'https://i.gifer.com/YIge.gif',
  2298. 'https://i.gifer.com/1Khd.gif'
  2299. ];
  2300. if (!localStorage.getItem('shuffledGifContainerURLs')) {
  2301. shuffleArray(gifContainerURLs);
  2302. localStorage.setItem('shuffledGifContainerURLs', JSON.stringify(gifContainerURLs));
  2303. }
  2304. }
  2305. function changeGifContainerImage() {
  2306. let shuffledGifContainerURLs = JSON.parse(localStorage.getItem('shuffledGifContainerURLs'));
  2307. let currentIndex = parseInt(localStorage.getItem('currentIndex')) || 0;
  2308. const newGifContainerURL = shuffledGifContainerURLs[currentIndex];
  2309. document.getElementById('gif-image').src = newGifContainerURL;
  2310. currentIndex = (currentIndex + 1) % shuffledGifContainerURLs.length;
  2311. localStorage.setItem('currentIndex', currentIndex.toString());
  2312. }
  2313. document.addEventListener('DOMContentLoaded', function() {
  2314. initShuffle();
  2315. changeGifContainerImage();
  2316. });
  2317. </script>
  2318. <script>
  2319. document.addEventListener('DOMContentLoaded', (event) => {
  2320. const containerMenu = document.querySelector('section.container-menu');
  2321. const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
  2322. containerMenu.style.backgroundColor = randomColor;
  2323. });
  2324. </script>
  2325. <!-- VARIAVEIS LET -->
  2326. <script>
  2327. let timeoutId
  2328. </script>
  2329. <!-- DOM WRAPPER -->
  2330. <script>
  2331. const Dom = (selector) => {
  2332. const _elements = document.querySelectorAll(selector)
  2333. const wrapper = {
  2334. on(listeners) {
  2335. for (const [event, listener] of Object.entries(listeners)) {
  2336. _elements.forEach((element) => {
  2337. element.addEventListener(event, listener)
  2338. })
  2339. }
  2340. return wrapper
  2341. },
  2342. addClass: (...tokens) => {
  2343. _elements.forEach((element) => {
  2344. element.classList.add(...tokens)
  2345. })
  2346. return wrapper
  2347. },
  2348. removeClass: (...tokens) => {
  2349. _elements.forEach((element) => {
  2350. element.classList.remove(...tokens)
  2351. })
  2352. return wrapper
  2353. },
  2354. toggleClass: (token, force) => {
  2355. _elements.forEach((element) => {
  2356. element.classList.toggle(token, force)
  2357. })
  2358. return wrapper
  2359. },
  2360. style(styles) {
  2361. for (const [property, value] of Object.entries(styles)) {
  2362. console.log(value)
  2363. _elements.forEach((element) => {
  2364. element.style[property] = value
  2365. })
  2366. }
  2367. return wrapper
  2368. },
  2369. attr(attrs) {
  2370. for (const [name, value] of Object.entries(attrs)) {
  2371. _elements.forEach((element) => element.setAttribute(name, value))
  2372. }
  2373. return wrapper
  2374. },
  2375. html(value) {
  2376. _elements.forEach((element) => (element.innerHTML = value))
  2377. return wrapper
  2378. },
  2379. }
  2380. return wrapper
  2381. }
  2382. </script>
  2383. <script>
  2384. function gerarCorAleatoria() {
  2385. return '#' + Math.floor(Math.random()*16777215).toString(16);
  2386. }
  2387. function mudarCorDeFundo() {
  2388. document.body.style.background = gerarCorAleatoria();
  2389. }
  2390. window.onload = mudarCorDeFundo;
  2391. </script>
  2392. <!-- AÇÕES EM VARIAVEIS ROOT -->
  2393. <script>
  2394. document.documentElement.style.setProperty(
  2395. "--space-status-bar",
  2396. `${appGetStatusbarHeightSize() + 10}px`
  2397. )
  2398. document.documentElement.style.setProperty(
  2399. "--space-nav-bar",
  2400. `${appGetNavbarHeightSize() + 10}px`
  2401. )
  2402. </script>
  2403. <!-- VARIAVEIS -->
  2404. <script>
  2405. const Body = Dom("body")
  2406. const HomeHeader = Dom("section.home header")
  2407. const LogoHeader = Dom("#app_logo")
  2408. const HomeContainer = Dom("section.home")
  2409. const CarrierContainer = Dom("section.carrier-list")
  2410. const ProfileContainer = Dom("section.profile")
  2411. const ToolsContainer = Dom("section.container-tools")
  2412. const RegisterContainer = Dom("section.logs-container")
  2413. const ErrorContainer = Dom("section.container-error")
  2414. const LoadingContainer = Dom("section.loading")
  2415. const CheckuserContainer = Dom("section.checkuser")
  2416. const ClearDataContainer = Dom("section.clean-data-app")
  2417. const HotspotContainer = Dom("section.hotspot-container")
  2418. const TermsContainer = Dom("section.terms-container")
  2419. const RenewContainer = Dom("section.renew-alert")
  2420. const BackButtonCarrierContainer = Dom("#back-carrier-container")
  2421. const BackProfileContainer = Dom("#back-profile-container")
  2422. const BackToolsContainer = Dom("#back-tools-container")
  2423. const BackRegisterContainer = Dom("#register-logs-close")
  2424. const BackErrorContainer = Dom("section.container-error header svg")
  2425. const BackLoadingContainer = Dom("#loading-container-close")
  2426. const BackCheckuserContainer = Dom("#checkuser-close")
  2427. const BackClearDataContainer = Dom("#hidden-clear-data-app")
  2428. const BackHotspotContainer = Dom("#hidden-hotspot-container")
  2429. const BackTermsContainer = Dom("#hidden-terms-container")
  2430. const BackRenewContainer = Dom("#renew-alert-close")
  2431. const RenewUsername = Dom("#renew-username")
  2432. const ButtonOfCarrierList = Dom("#carrier-list-button")
  2433. const ValueOfCarrierListButton = Dom("#value-of-carrier-list-button")
  2434. const ButtonVpnStartOrStop = Dom("#start-stop-vpn-button")
  2435. const StatesConnectionValue = Dom("#state-value")
  2436. const LocalIpValue = Dom('#local-ip-value')
  2437. const ConfigVersion = Dom("#version")
  2438. const LabelDivUser = Dom("label[for='usernamediv']")
  2439. const LabelDivPassword = Dom("label[for='passworddiv']")
  2440. const LabelUUID = Dom("label[for='uuiddiv']")
  2441. const DivUsername = Dom("#usernamediv")
  2442. const DivPassword = Dom("#passworddiv")
  2443. const DivUUID = Dom("#uuiddiv")
  2444. const InputUsername = Dom("#username")
  2445. const InputPassword = Dom("#password")
  2446. const InputUUID = Dom("#uuid")
  2447. const EyeViewPasswordInput = Dom("#eye-view")
  2448. const EyeNotViewPasswordInput = Dom("#eye-not-view")
  2449. const ButtonSaveCreds = Dom("#save-creds")
  2450. const CheckuserName = Dom("#checkuser-name")
  2451. const CheckuserExpires = Dom("#checkuser-expires")
  2452. const CheckuserRemainingDays = Dom("#checkuser-remaing-days")
  2453. const CheckuserTotalConnection = Dom("#checkuser-total-conection")
  2454. const RegisterLogsText = Dom("section.logs-container section section p")
  2455. const ToastContainer = Dom("section.container-toast")
  2456. const Toast = Dom("section.container-toast div.toast")
  2457. const ToastIcon = Dom("section.container-toast div.toast div.icon")
  2458. const ToastText = Dom("section.container-toast div.toast span.text")
  2459. const HomeButton = Dom("#home")
  2460. const LoginButton = Dom("#login")
  2461. const ToolsButton = Dom("#tools")
  2462. const UpdateButton = Dom("#update")
  2463. const ButtonRegister = Dom("#register-button")
  2464. const ButtonCleanRegisterLogs = Dom("#clear-logs")
  2465. const ButtonStartStopHotspot = Dom("#enable-hotspot")
  2466. const ButtonOpenHotspotContainer = Dom("#hotspot-button-tools")
  2467. const TitleHotspotContainer = Dom("#title-hotspot")
  2468. const ValueOfButtonHotspotContainer = Dom("#value-button-hotspot")
  2469. const ButtonOpenClearDataContainer = Dom("#button-open-clear-data-app")
  2470. const ButtonConfirmClearData = Dom("#confirm-clean-data-app")
  2471. const ButtonOpenSpeedtest = Dom("#speedtest-tool")
  2472. const ButtonOpenApnConfig = Dom("#apn-tool")
  2473. const ButtonOpenBatteryOptimization = Dom("#battery-tool")
  2474. const ButtonOpenCheckuser = Dom("#checkuser-tool")
  2475. const ButtonOpenTerms = Dom("#button-open-terms-app")
  2476. const ErrorTitle = Dom("#error-title")
  2477. const ErrorDescription = Dom("#error-log")
  2478. </script>
  2479. <!-- FUNÇÕES DO LAYOUT -->
  2480. <script>
  2481. const appLogo = () => {
  2482. const logo = appGetConfigLabel("APP_LOGO")
  2483. if (!logo) {
  2484. return ""
  2485. } else {
  2486. return `${JSON.parse(logo).value}`
  2487. }
  2488. }
  2489. const appBackground = () => {
  2490. const background_type = appGetConfigLabel("APP_BACKGROUND_TYPE")
  2491. const background_color = appGetConfigLabel("APP_BACKGROUND_COLOR")
  2492. const background_image = appGetConfigLabel("APP_BACKGROUND_IMAGE")
  2493. if (!background_type) {
  2494. return ""
  2495. } else if (JSON.parse(background_type)?.value === "COLOR") {
  2496. return `${JSON.parse(background_color).value}`
  2497. } else {
  2498. return `url(${JSON.parse(background_image).value})`
  2499. }
  2500. }
  2501. const getConfigName = () => {
  2502. if (!appGetDefaultConfig()) {
  2503. return `${appTranslateText("LBL_CHOOSE_CONFIG")}`
  2504. } else {
  2505. return `${JSON.parse(appGetDefaultConfig())?.name}`
  2506. }
  2507. }
  2508. const getUsernameValue = () => `${appGetUsername() ?? ""}`
  2509. const getPasswordValue = () => `${appGetPassword() ?? ""}`
  2510. const getUUIDValue = () => `${appGetUUID() ?? ""}`
  2511. const getUsernamePlaceholder = () => `${appTranslateText("LBL_USERNAME")}`
  2512. const getPassowrdPlaceholder = () => `${appTranslateText("LBL_PASSWORD")}`
  2513. const getUUIDPlaceholder = () => `${appTranslateText("LBL_UUID")}`
  2514. const toggleInput = () => {
  2515. if (checkV2ray()) {
  2516. LabelDivUser.style({ display: "none" })
  2517. DivUsername.style({ display: "none" })
  2518. LabelDivPassword.style({ display: "none" })
  2519. DivPassword.style({ display: "none" })
  2520. LabelUUID.removeClass("hidden")
  2521. DivUUID.removeClass("hidden")
  2522. } else {
  2523. LabelDivUser.style({ display: "block" })
  2524. DivUsername.style({ display: "flex" })
  2525. LabelDivPassword.style({ display: "block" })
  2526. DivPassword.style({ display: "flex" })
  2527. LabelUUID.addClass("hidden")
  2528. DivUUID.addClass("hidden")
  2529. }
  2530. }
  2531. const showInputPasswordValue = () => {
  2532. EyeViewPasswordInput.addClass("hidden")
  2533. EyeNotViewPasswordInput.removeClass("hidden")
  2534. InputPassword.attr({ type: "text" })
  2535. }
  2536. const hiddenInputPasswordValue = () => {
  2537. EyeViewPasswordInput.removeClass("hidden")
  2538. EyeNotViewPasswordInput.addClass("hidden")
  2539. InputPassword.attr({ type: "password" })
  2540. }
  2541. const checkV2ray = () => {
  2542. const data = JSON.parse(appGetDefaultConfig())
  2543. if (!appGetDefaultConfig()) {
  2544. return false
  2545. } else if (data?.mode?.toLowerCase()?.startsWith("v2ray")) {
  2546. return true
  2547. } else {
  2548. return false
  2549. }
  2550. }
  2551. const getConnectionState = () => {
  2552. const rootStyles = getComputedStyle(document.documentElement)
  2553. const defaultColor = "--default-background-color"
  2554. const connectedColor = "--connected-background-color"
  2555. const connectingColor = "--connecting-background-color"
  2556. const errorColor = "--error-background-color"
  2557. const states = {
  2558. disconnected: () => {
  2559. const gradientColor = rootStyles.getPropertyValue(defaultColor)
  2560. document.documentElement.style.setProperty(
  2561. defaultColor,
  2562. "linear-gradient(135deg,#9f2fff,#0bb1d3,#7f47cb,#00ffff,#7a2cec,#4adfdf,#76fcfc,#7f47cb,#9f2fff,#0bb1d3,#7f47cb,#00ffff,#7a2cec,#4adfdf)"
  2563. )
  2564. return states
  2565. },
  2566. connecting: () => {
  2567. const gradientColor = rootStyles.getPropertyValue(connectingColor)
  2568. document.documentElement.style.setProperty(
  2569. defaultColor,
  2570. gradientColor
  2571. )
  2572. return states
  2573. },
  2574. connected: () => {
  2575. const gradientColor = rootStyles.getPropertyValue(connectedColor)
  2576. document.documentElement.style.setProperty(
  2577. defaultColor,
  2578. gradientColor
  2579. )
  2580. return states
  2581. },
  2582. error: () => {
  2583. const gradientColor = rootStyles.getPropertyValue(errorColor)
  2584. document.documentElement.style.setProperty(
  2585. defaultColor,
  2586. gradientColor
  2587. )
  2588. return states
  2589. },
  2590. }
  2591. return states
  2592. }
  2593. const connectionState = (state) => {
  2594. const connectionValue = `${state || appGetConnectionState()}`
  2595. switch (connectionValue) {
  2596. case "DISCONNECTED":
  2597. getConnectionState().disconnected()
  2598. StatesConnectionValue.html(appTranslateText('LBL_STATE_DISCONNECTED'))
  2599. break
  2600. case "CONNECTING":
  2601. showRegisterContainer()
  2602. getConnectionState().connecting()
  2603. StatesConnectionValue.html(appTranslateText('LBL_STATE_CONNECTING'))
  2604. break
  2605. case "CONNECTED":
  2606. getConnectionState().connected()
  2607. StatesConnectionValue.html(appTranslateText('LBL_STATE_CONNECTED'))
  2608. break
  2609. case "STOPPING":
  2610. getConnectionState().connecting()
  2611. StatesConnectionValue.html(appTranslateText('LBL_STATE_STOPPING'))
  2612. break
  2613. case "NO_NETWORK":
  2614. getConnectionState().error()
  2615. StatesConnectionValue.html(appTranslateText('LBL_STATE_NO_NETWORK'))
  2616. break
  2617. case "AUTH":
  2618. getConnectionState().connecting()
  2619. StatesConnectionValue.html(appTranslateText('LBL_STATE_AUTH'))
  2620. break
  2621. case "AUTH_FAILED":
  2622. getConnectionState().connecting()
  2623. StatesConnectionValue.html(appTranslateText('LBL_STATE_AUTH_FAILED'))
  2624. break
  2625. }
  2626. }
  2627. const startStopConnection = () => {
  2628. const state = appGetConnectionState()
  2629. if (appGetDefaultConfig()) {
  2630. state !== "CONNECTED" ? appStartConnection() : appStopConnection()
  2631. } else {
  2632. showCarrierListContainer()
  2633. }
  2634. }
  2635. const writeLogsRegister = () => {
  2636. const data = JSON.parse(appGetLogs())
  2637. let logs = ""
  2638. data.forEach((item) => {
  2639. logs += `${Object.keys(item)} ${item[Object.keys(item)]} <br>`
  2640. })
  2641. RegisterLogsText.html(logs)
  2642. document.querySelector("section.logs-container.active section section").scrollTop =
  2643. document.querySelector(
  2644. "section.logs-container.active section section p"
  2645. ).scrollHeight
  2646. }
  2647. const writeCarrierList = () => {
  2648. const container = document.querySelector("section.carrier-list section")
  2649. const existingCategories = container.querySelectorAll("div").length
  2650. container.innerHTML = ""
  2651. const data = JSON.parse(appAllConfigs())
  2652. data.sort((a, b) => a.sorter - b.sorter)
  2653. data.forEach((item, index) =>
  2654. item.items.sort((a, b) => a.sorter - b.sorter)
  2655. )
  2656. data.forEach((category) => {
  2657. const div = document.createElement("div")
  2658. const h1 = document.createElement("h1")
  2659. h1.innerHTML = category.name
  2660. const ul = document.createElement("ul")
  2661. category.items.forEach((item) => {
  2662. const li = document.createElement("li")
  2663. 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>`
  2664. li.addEventListener("click", (e) => {
  2665. appSetConfig(item.id)
  2666. hiddenCarrierListContainer()
  2667. document
  2668. .querySelectorAll("li")
  2669. .forEach((item, index) => item.classList.remove("active"))
  2670. li.classList.add("active")
  2671. writeValueOnButtonOfCarrierList(item.name)
  2672. })
  2673. ul.appendChild(li)
  2674. })
  2675. div.appendChild(h1)
  2676. div.appendChild(ul)
  2677. container.appendChild(div)
  2678. })
  2679. }
  2680. const writeValueOnButtonOfCarrierList = (value) =>
  2681. ValueOfCarrierListButton.html(value ?? getConfigName())
  2682. const showToastContainer = (value) => {
  2683. Toast.style({ borderColor: "red, rgba(0, 0, 0, 0.5)" })
  2684. ToastIcon.style({ borderRight: "1px solid red" })
  2685. writeToastText(value)
  2686. ToastContainer.removeClass("masterSshAnimatedTime", "spaceOutDown")
  2687. ToastContainer.removeClass("masterSshAnimatedTime", "spaceInDown")
  2688. setTimeout(() => {
  2689. ToastContainer.addClass("masterSshAnimatedTime", "spaceInDown")
  2690. }, 100)
  2691. clearTimeout(timeoutId)
  2692. timeoutId = setTimeout(() => hiddenToastContainer(), 6000)
  2693. }
  2694. const showToastContainerWithError = (value) => {
  2695. Toast.style({ borderColor: "#FF0000" })
  2696. ToastIcon.style({ borderRight: "1px solid #FF0000" })
  2697. writeToastText(value)
  2698. ToastContainer.removeClass("masterSshAnimatedTime", "spaceOutDown")
  2699. ToastContainer.removeClass("masterSshAnimatedTime", "spaceInDown")
  2700. setTimeout(() => {
  2701. ToastContainer.addClass("masterSshAnimatedTime", "spaceInDown")
  2702. }, 100)
  2703. clearTimeout(timeoutId)
  2704. timeoutId = setTimeout(() => hiddenToastContainer(), 6000)
  2705. }
  2706. const writeToastText = (text) => {
  2707. ToastText.html(text)
  2708. }
  2709. const hiddenToastContainer = () => {
  2710. ToastContainer.removeClass("masterSshAnimatedTime", "spaceInDown")
  2711. ToastContainer.removeClass("masterSshAnimatedTime", "spaceOutDown")
  2712. ToastContainer.addClass("masterSshAnimatedTime", "spaceOutDown")
  2713. }
  2714. const showHomeContainer = () => {
  2715. hiddenAllContainers()
  2716. HomeContainer.addClass("active")
  2717. }
  2718. const showCarrierListContainer = () => {
  2719. writeCarrierList()
  2720. hiddenAllContainers()
  2721. CarrierContainer.addClass("active")
  2722. }
  2723. const hiddenCarrierListContainer = () => {
  2724. showHomeContainer()
  2725. }
  2726. const showProfileContainer = () => {
  2727. hiddenAllContainers()
  2728. ProfileContainer.addClass("active")
  2729. }
  2730. const hiddenProfileContainer = () => {
  2731. showHomeContainer()
  2732. }
  2733. const showToolsContainer = () => {
  2734. hiddenAllContainers()
  2735. ToolsContainer.addClass("active")
  2736. }
  2737. const hiddenToolsContainer = () => {
  2738. showHomeContainer()
  2739. }
  2740. const showRegisterContainer = () => {
  2741. RegisterContainer.addClass("active")
  2742. }
  2743. const hiddenRegisterContainer = () => {
  2744. RegisterContainer.removeClass('active')
  2745. }
  2746. const writeErrorContainer = (model) => {
  2747. const data = JSON.parse(model)
  2748. ErrorTitle.html(data.title)
  2749. ErrorDescription.html(data.content)
  2750. showErrorContainer()
  2751. }
  2752. const showErrorContainer = () => {
  2753. hiddenAllContainers()
  2754. ErrorContainer.addClass("active")
  2755. }
  2756. const hiddenErrorContainer = () => {
  2757. showHomeContainer()
  2758. }
  2759. const showLoadingContainer = () => {
  2760. const data = JSON.parse(appGetDefaultConfig())
  2761. if (data?.url_check_user) {
  2762. LoadingContainer.addClass("active")
  2763. }
  2764. hiddenRegisterContainer()
  2765. }
  2766. const hiddenLoadingContainer = () => {
  2767. LoadingContainer.removeClass("active")
  2768. }
  2769. const showRenewContainer = () => {
  2770. RenewContainer.addClass('active')
  2771. }
  2772. const hiddenRenewContainer = () => {
  2773. RenewContainer.removeClass('active')
  2774. }
  2775. const writeCheckuserContainer = (model) => {
  2776. const data = JSON.parse(model)
  2777. CheckuserName.html(`USUÁRIO: ${data.username}`)
  2778. CheckuserExpires.html(`EXPIRA EM: ${data.expiration_date}`)
  2779. CheckuserRemainingDays.html(`RESTA: ${data.expiration_days} DIAS`)
  2780. CheckuserTotalConnection.html(
  2781. `CONEXÕES: ${data.count_connections}/${data.limit_connections}`
  2782. )
  2783. if (data.expiration_days <= 5) {
  2784. RenewUsername.html(`Caro ${data.username}`)
  2785. showRenewContainer()
  2786. } else {
  2787. hiddenRenewContainer()
  2788. }
  2789. showCheckuserContainer()
  2790. }
  2791. const showCheckuserContainer = () => {
  2792. hiddenLoadingContainer()
  2793. CheckuserContainer.addClass("active")
  2794. }
  2795. const hiddenCheckuserContainer = () => {
  2796. CheckuserContainer.removeClass("active")
  2797. }
  2798. const showClearDataAppContainer = () => {
  2799. ClearDataContainer.addClass("active")
  2800. }
  2801. const hiddenClearDataAppContainer = () => {
  2802. ClearDataContainer.removeClass("active")
  2803. }
  2804. const writeLocalIpValue = () => {
  2805. LocalIpValue.html(`${appGetCarrierName()}: ${appGetLocalIp()}`)
  2806. }
  2807. const startHotspot = () => {
  2808. appStartHotspot()
  2809. TitleHotspotContainer.html("ROTEAMENTO LIGADO")
  2810. ValueOfButtonHotspotContainer.html("DESLIGAR HOTSPOT")
  2811. }
  2812. const stopHotspot = () => {
  2813. appStopHotspot()
  2814. TitleHotspotContainer.html("ROTEAMENTO DESLIGADO")
  2815. ValueOfButtonHotspotContainer.html("LIGAR HOTSPOT")
  2816. }
  2817. const toggleHotspot = () => {
  2818. appGetStatusHotspot() === "STOPPED" ? startHotspot() : stopHotspot()
  2819. }
  2820. const setStatusHotspot = () => {
  2821. if (appGetStatusHotspot() === "STOPPED") {
  2822. TitleHotspotContainer.html("ROTEAMENTO DESLIGADO")
  2823. ValueOfButtonHotspotContainer.html("LIGAR HOTSPOT")
  2824. } else {
  2825. TitleHotspotContainer.html("ROTEAMENTO LIGADO")
  2826. ValueOfButtonHotspotContainer.html("DESLIGAR HOTSPOT")
  2827. }
  2828. }
  2829. const showHotspotContainer = () => {
  2830. HotspotContainer.addClass("active")
  2831. }
  2832. const hiddenHotspotContainer = () => {
  2833. HotspotContainer.removeClass("active")
  2834. }
  2835. const showTermsContainer = () => {
  2836. TermsContainer.addClass("active")
  2837. }
  2838. const hiddenTermsContainer = () => {
  2839. TermsContainer.removeClass("active")
  2840. }
  2841. const openSpeedtest = () => {
  2842. appIntoBrowser("https://fast.com")
  2843. }
  2844. const hiddenAllContainers = () => {
  2845. HomeContainer.removeClass("active")
  2846. CarrierContainer.removeClass("active")
  2847. ProfileContainer.removeClass("active")
  2848. ToolsContainer.removeClass("active")
  2849. RegisterContainer.removeClass("active")
  2850. ErrorContainer.removeClass("active")
  2851. }
  2852. const setLoopFunctionsExecute = () => {
  2853. setInterval(() => {
  2854. writeLocalIpValue()
  2855. ConfigVersion.html(`VERSÃO: ${appGetConfigVersion()}`)
  2856. }, 200)
  2857. }
  2858. const allFunctionsExecute = () => {
  2859. connectionState()
  2860. toggleInput()
  2861. writeLogsRegister()
  2862. setStatusHotspot()
  2863. }
  2864. </script>
  2865. <!-- FUNÇÕES PARA O APP -->
  2866. <script>
  2867. const dtShowSuccessToastListener = (value) => showToastContainer(value)
  2868. const dtShowErrorToastListener = (value) =>
  2869. showToastContainerWithError(value)
  2870. const dtConfigClickListener = () => {
  2871. toggleInput()
  2872. InputUsername.attr({ value: getUsernameValue() })
  2873. InputPassword.attr({ value: getPasswordValue() })
  2874. InputUUID.attr({ value: getUUIDValue() })
  2875. }
  2876. const dtVpnStateListener = (state) => connectionState(state)
  2877. const dtOnNewLogListener = () => writeLogsRegister()
  2878. const dtMessageErrorListener = (model) => writeErrorContainer(model)
  2879. const dtCheckUserStartedListener = () => showLoadingContainer()
  2880. const dtCheckUserModelListener = (model) => writeCheckuserContainer(model)
  2881. </script>
  2882. <!-- AÇÕES -->
  2883. <script>
  2884. HomeHeader.style({
  2885. background: appBackground(),
  2886. backgroundSize: "cover",
  2887. backgroundPosition: "center",
  2888. backgroundRepeat: "no-repeat",
  2889. })
  2890. LogoHeader.attr({ src: appLogo() })
  2891. ConfigVersion.html(`VERSÃO: ${appGetConfigVersion()}`)
  2892. HomeButton.on({ click: () => showHomeContainer() })
  2893. ToolsButton.on({ click: () => showToolsContainer() })
  2894. UpdateButton.on({ click: () => AppUpdate() })
  2895. BackButtonCarrierContainer.on({
  2896. click: () => hiddenCarrierListContainer(),
  2897. })
  2898. BackProfileContainer.on({ click: () => hiddenProfileContainer() })
  2899. BackToolsContainer.on({ click: () => hiddenToolsContainer() })
  2900. BackRegisterContainer.on({ click: () => hiddenRegisterContainer() })
  2901. BackErrorContainer.on({ click: () => hiddenErrorContainer() })
  2902. ButtonOfCarrierList.on({ click: () => showCarrierListContainer() })
  2903. ValueOfCarrierListButton.html(getConfigName())
  2904. ButtonVpnStartOrStop.on({ click: () => startStopConnection() })
  2905. InputUsername.attr({ value: getUsernameValue() })
  2906. InputPassword.attr({ value: getPasswordValue() })
  2907. InputUUID.attr({ value: getUUIDValue() })
  2908. InputUsername.attr({ placeholder: getUsernamePlaceholder() })
  2909. InputPassword.attr({ placeholder: getPassowrdPlaceholder() })
  2910. InputUUID.attr({ placeholder: getUUIDPlaceholder() })
  2911. InputUsername.on({ input: (e) => appSetUsername(e.target.value) })
  2912. InputPassword.on({ input: (e) => appSetPassword(e.target.value) })
  2913. InputUUID.on({ input: (e) => appSetUUID(e.target.value) })
  2914. EyeViewPasswordInput.on({ click: () => showInputPasswordValue() })
  2915. EyeNotViewPasswordInput.on({ click: () => hiddenInputPasswordValue() })
  2916. ButtonSaveCreds.on({ click: () => hiddenProfileContainer() })
  2917. ButtonRegister.on({ click: () => showRegisterContainer() })
  2918. ButtonCleanRegisterLogs.on({ click: () => appCleanLogs() })
  2919. ButtonOpenHotspotContainer.on({ click: () => showHotspotContainer() })
  2920. BackHotspotContainer.on({ click: () => hiddenHotspotContainer() })
  2921. ButtonStartStopHotspot.on({ click: () => toggleHotspot() })
  2922. ButtonOpenClearDataContainer.on({
  2923. click: () => showClearDataAppContainer(),
  2924. })
  2925. BackClearDataContainer.on({ click: () => hiddenClearDataAppContainer() })
  2926. ButtonConfirmClearData.on({ click: () => appClearData() })
  2927. BackLoadingContainer.on({ click: () => hiddenLoadingContainer() })
  2928. BackCheckuserContainer.on({ click: () => hiddenCheckuserContainer() })
  2929. BackRenewContainer.on({ click: () => hiddenRenewContainer() })
  2930. BackTermsContainer.on({ click: () => hiddenTermsContainer() })
  2931. ButtonOpenSpeedtest.on({ click: () => openSpeedtest() })
  2932. ButtonOpenApnConfig.on({ click: () => appApnConfiguration() })
  2933. ButtonOpenBatteryOptimization.on({ click: () => appBatteryOptimize() })
  2934. ButtonOpenCheckuser.on({ click: () => appStartCheckUser() })
  2935. ButtonOpenTerms.on({ click: () => showTermsContainer() })
  2936. setLoopFunctionsExecute()
  2937. allFunctionsExecute()
  2938. </script>
  2939. <div id="player-container">
  2940. <video id="player" controls playsinline></video>
  2941. </div>
  2942. <!-- Lista de canais -->
  2943. <div id="lista-canais"></div>
  2944. </body>
  2945. </html>

comments powered by Disqus