TEMA Dtunnel

SUBMITTED BY: Siniclrj

DATE: Aug. 17, 2023, 8:24 p.m.

UPDATED: June 20, 2024, 5:57 p.m.

FORMAT: Text only

SIZE: 103.0 kB

History Raw Download

HITS: 986

Report
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <title>5777879193 - @PoggVpn</title>
  10. <style>
  11. :root {
  12. font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  13. line-height: 1.5;
  14. font-weight: 400;
  16. font-synthesis: none;
  17. text-rendering: optimizeLegibility;
  18. -webkit-font-smoothing: antialiased;
  19. -moz-osx-font-smoothing: grayscale;
  20. text-size-adjust: 100%;
  21. -webkit-text-size-adjust: 100%;
  23. /*-------->MENU<--------*/
  25. /*IMAGEM DE FUNDO PRINCIPAL*/
  26. --imagem-de-fundo: url('https://bafkreighln2izjgvidrzifz2qrk2hk5ww7gt4m7kw3ffd3tfzoknr7hdyu.ipfs.w3s.link');
  28. /*CONTAINER DE STATUS VPN*/
  29. --cor-de-fundo-do-container-de-status-da-vpn: rgba(161, 42, 246, 0.1);
  30. --cor-do-icone-do-container-de-status-da-vpn: rgba(255, 255, 255, 1);
  31. --cor-do-texto-do-container-de-status-da-vpn: rgba(255, 255, 255, 1);
  33. /*CONTAINER DE SELECIONAR OPERADORA*/
  34. --cor-de-fundo-do-campo-de-selecionar-operadora: rgba(161, 42, 246, 0.5);
  35. --borda-do-container-de-selecionar-operadora: rgba(68, 60, 119, 1);
  36. --cor-do-icone-de-chip-do-campo-de-selecionar-operadora: rgba(255, 255, 255, 1);
  37. --cor-do-texto-do-campo-de-selecionar-operadora: rgba(255, 255, 255, 1);
  39. /*CONTAINER PRINCIPAL*/
  40. --cor-de-fundo-do-container-principal: rgba(161, 42, 246, 0.5);
  41. --borda-do-container-principal: rgba(68, 60, 119, 1);
  43. --borda-do-header-do-container-principal: rgba(68, 60, 119, 1);
  45. --cor-de-fundo-dos-input-do-container-principal: rgba(187, 127, 243, 0.2);
  46. --cor-da-borda-dos-input-do-container-principal: rgba(68, 60, 119, 1);
  47. --cor-dos-icones-dos-input-do-container-principal: rgba(255, 255, 255, 1);
  48. --cor-do-texto-dos-input-do-container-principal: rgba(255, 255, 255, 1);
  49. --cor-do-texto-dos-input-do-container-principal-quando-nao-ta-selecionado: rgba(
  50. 255,
  51. 255,
  52. 255,
  53. 1
  54. );
  56. --cor-de-fundo-do-botao-do-container-principal: rgba(187, 127, 243, 0.2);
  57. --cor-da-borda-do-botao-do-container-principal: rgba(68, 60, 119, 1);
  58. --cor-do-icone-do-botao-do-container-principal: rgba(255, 255, 255, 1);
  59. --cor-do-texto-do-botao-do-container-principal: rgba(255, 255, 255, 1);
  61. /*CONTAINER DOS CONTROLES*/
  62. --cor-de-fundo-do-container-de-controles: rgba(161, 42, 246, 0.5);
  63. --cor-da-borda-do-container-de-controles: rgba(68, 60, 119, 1);
  65. --cor-de-fundo-do-botao-do-container-de-controles: rgba(104, 3, 202, 1);
  66. --cor-da-borda-do-botao-do-container-de-controles: rgba(68, 60, 119, 1);
  67. --cor-do-icone-do-botao-do-container-de-controles: rgba(255, 255, 255, 1);
  69. --cor-de-fundo-do-botao-do-meio-do-container-de-controles: rgba(68, 60, 119, 1);
  70. --cor-da-borda-do-botao-do-meio-do-container-de-controles: rgba(161, 42, 246, 0.5);
  72. /* CONTAINER DAS CONFIGURAÇÕES */
  73. --cor-de-fundo-do-container-da-lista-de-configuracoes: rgba(161, 42, 246, 0.4);
  74. --cor-da-borda-do-container-da-lista-de-configuracoes: rgba(68, 60, 119, 0.5);
  76. --cor-de-fundo-do-header-do-container-da-lista-de-configuracoes: rgba(187, 127, 243, 1);
  77. --cor-do-icone-de-fechar-do-header-do-container-da-lista-de-configuracoes: rgba(
  78. 255,
  79. 255,
  80. 255,
  81. 1
  82. );
  84. --cor-de-fundo-do-container-da-lista-de-categorias-de-configuracoes: transparent;
  86. --cor-de-fundo-da-categoria: transparent;
  87. --cor-de-fundo-do-header-da-categoria: rgba(187, 127, 243, 1);
  88. --cor-da-borda-do-header-da-categoria: rgba(127, 71, 203, 1);
  89. --cor-do-text-do-header-da-categoria: rgba(255, 255, 255, 1);
  90. --cor-do-icone-do-header-da-categoria: rgba(255, 255, 255, 1);
  92. --cor-de-fundo-da-lista-de-configuracoes: transparent;
  93. --cor-de-fundo-do-item-da-configuracao: rgba(187, 127, 243, 1);
  94. --cor-do-texto-do-titulo-do-item-da-configuracao: rgba(255, 255, 255, 1);
  95. --cor-do-texto-da-descricao-do-item-da-configuracao: rgba(255, 255, 255, 1);
  96. --cor-do-modo-da-conexao-do-item-da-configuracao: rgba(255, 255, 255, 1);
  98. /* CHECKUSER PRINCIPAL */
  99. --cor-de-fundo-do-container-do-checkuser-principal: rgba(161, 42, 246, 0.8);
  100. --cor-de-fundo-do-header-do-container-do-checkuser-principal: rgba(187, 127, 243, 1);
  101. --cor-do-icone-do-header-do-container-do-checkuser-principal: rgba(255, 255, 255, 1);
  103. --cor-da-borda-do-icone-de-sucesso: rgba(255, 255, 255, 1);
  104. --cor-do-icone-de-sucesso: rgba(255, 255, 255, 1);
  106. --cor-de-fundo-da-lista-de-dados-de-login: transparent;
  107. --cor-de-fundo-dos-dados-de-login: rgba(187, 127, 243, 1);
  108. --cor-dos-icones-dos-dados-de-login: rgba(255, 255, 255, 1);
  109. --cor-dos-textos-dos-dados-de-login: rgba(255, 255, 255, 1);
  111. /* CONTAINER DE CARREGAMENTO */
  112. --cor-de-fundo-do-container-de-carregamento: rgba(161, 42, 246, 0.8);
  113. --cor-de-fundo-do-header-do-container-de-carregamento: rgba(187, 127, 243, 1);
  114. --cor-do-icone-do-header-do-container-de-carregamento: rgba(255, 255, 255, 1);
  116. /* CONTAINER DE PERFIL DO USUÁRIO */
  117. --cor-de-fundo-do-container-do-perfil-do-usuario: rgba(161, 42, 246, 0.8);
  118. --cor-de-fundo-do-header-do-container-do-perfil-do-usuario: transparent;
  119. --cor-da-borda-do-header-do-container-do-perfil-do-usuario: rgba(187, 127, 243, 1);
  121. --cor-de-fundo-da-lista-do-container-do-perfil-do-usuario: transparent;
  122. --cor-de-fundo-dos-items-do-container-do-perfil-do-usuario: rgba(187, 127, 243, 1);
  123. --cor-de-fundo-dos-icones-do-container-do-perfil-do-usuario: rgba(187, 127, 243, 1);
  125. --cor-da-borda-de-nao-ver-o-usuario-do-container-do-perfil-do-usuario: rgba(
  126. 255,
  127. 255,
  128. 255,
  129. 1
  130. );
  131. --cor-do-icone-de-dentro-do-close-do-container-do-perfil-do-usuario: rgba(255, 255, 255, 1);
  132. --cor-do-titulo-de-nao-ver-o-usuario-do-container-do-perfil-do-usuario: rgba(
  133. 255,
  134. 255,
  135. 255,
  136. 1
  137. );
  138. --cor-da-descricao-de-nao-ver-o-usuario-do-container-do-perfil-do-usuario: rgba(
  139. 255,
  140. 255,
  141. 255,
  142. 1
  143. );
  145. --cor-de-fundo-dos-termos-do-container-do-perfil-do-usuario: rgba(11, 26, 59, 0.5);
  147. /* CONTAINER DE FERRAMENTAS */
  148. --cor-da-borda-do-titulo-do-container-de-ferramentas: rgba(255, 255, 255, 1);
  149. --cor-do-texto-do-titulo-do-container-de-ferramentas: rgba(255, 255, 255, 1);
  151. --cor-da-borda-dos-botoes-do-container-de-ferramentas: #cc60ff;
  152. --cor-de-fundo-dos-botoes-do-container-de-ferramentas: rgba(161, 42, 246, 0.5);
  153. --cor-da-sombra-dos-botoes-do-container-de-ferramentas: rgba(0, 0, 0, 0.25);
  154. --cor-dos-icones-dos-botoes-do-container-de-ferramentas: rgba(255, 255, 255, 1);
  155. --cor-dos-textos-dos-botoes-do-container-de-ferramentas: rgba(255, 255, 255, 1);
  157. /* MODAL SPEEDTEST */
  158. --cor-do-header-do-modal-do-speedtest: rgba(187, 127, 243, 1);
  159. --cor-de-fundo-do-modal-do-speedtest: rgba(187, 127, 243, 1);
  160. --cor-do-icone-do-header-do-modal-do-speedtest: rgba(255, 255, 255, 1);
  162. /* MODAL ERROR */
  163. --cor-do-header-do-modal-de-error: rgba(158, 36, 36, 0.8);
  164. --cor-de-fundo-do-modal-de-error: rgba(53, 46, 57, 0.9);
  165. --cor-do-icone-do-header-do-modal-de-error: rgba(255, 255, 255, 1);
  167. /* MODAL LOGS */
  168. --cor-do-header-do-modal-de-logs: rgba(187, 127, 243, 1);
  169. --cor-de-fundo-do-modal-de-logs: rgba(53, 46, 57, 0.9);
  170. --cor-do-texto-do-registro-do-modal-de-logs: rgba(255, 255, 255, 1);
  171. }
  173. * {
  174. margin: 0;
  175. padding: 0;
  177. box-sizing: border-box;
  178. }
  180. html,
  181. body,
  182. main {
  183. width: 100%;
  184. height: 100%;
  185. }
  187. body {
  188. background: var(--imagem-de-fundo);
  189. background-repeat: no-repeat;
  190. background-position: center;
  191. background-size: cover;
  192. }
  194. main {
  195. max-width: 500px;
  197. display: flex;
  198. flex-direction: column;
  199. align-items: center;
  200. gap: 10px;
  202. margin: auto;
  204. position: relative;
  206. overflow: hidden;
  207. }
  209. main section.vpnStatus {
  210. width: auto;
  211. height: 40px;
  213. display: flex;
  214. justify-content: center;
  215. align-items: center;
  216. gap: 5px;
  218. margin-top: 5%;
  219. padding: 0px 10px;
  221. border-radius: 20px;
  223. background-color: var(--cor-de-fundo-do-container-de-status-da-vpn);
  224. }
  226. main section.vpnStatus svg {
  227. color: var(--cor-do-icone-do-container-de-status-da-vpn);
  228. }
  230. main section.vpnStatus span {
  231. color: var(--cor-do-texto-do-container-de-status-da-vpn);
  232. }
  234. section.local-ip {
  235. width: auto;
  236. height: 40px;
  238. display: flex;
  239. justify-content: center;
  240. align-items: center;
  241. gap: 5px;
  243. margin-top: 5%;
  244. padding: 0px 10px;
  246. border-radius: 20px;
  248. background-color: var(--cor-de-fundo-do-container-de-status-da-vpn);
  249. }
  251. section.local-ip svg {
  252. color: var(--cor-do-icone-do-container-de-status-da-vpn);
  253. }
  255. section.local-ip span {
  256. text-align: center;
  257. color: var(--cor-do-texto-do-container-de-status-da-vpn);
  258. }
  260. main section.home {
  261. width: 100%;
  262. max-width: 500px;
  263. height: auto;
  265. display: flex;
  266. flex-direction: column;
  267. align-items: center;
  268. gap: 10px;
  270. position: relative;
  272. padding: 0px 10px;
  273. }
  275. main section.home header {
  276. width: 100%;
  277. height: auto;
  279. display: flex;
  280. justify-content: center;
  281. align-items: center;
  282. }
  284. main section.home header img.logo {
  285. width: 60%;
  286. max-width: 100px;
  287. height: auto;
  288. }
  290. main section.home div.carrierSelector {
  291. width: 100%;
  292. height: 50px;
  294. display: flex;
  295. align-items: center;
  296. justify-content: center;
  297. gap: 20px;
  299. padding: 0px 10px;
  301. border: 1px solid var(--borda-do-container-de-selecionar-operadora);
  302. border-radius: 10px;
  304. overflow: hidden;
  306. background-color: var(--cor-de-fundo-do-campo-de-selecionar-operadora);
  307. }
  309. main section.home div.carrierSelector svg {
  310. width: 20px;
  311. height: 20px;
  313. color: var(--cor-do-icone-de-chip-do-campo-de-selecionar-operadora);
  314. }
  316. main section.home div.carrierSelector span {
  317. width: 100%;
  318. max-width: 100%;
  319. height: 100%;
  320. max-height: 100%;
  322. display: flex;
  323. justify-content: center;
  324. align-items: center;
  326. color: var(--cor-do-texto-do-campo-de-selecionar-operadora);
  328. overflow: none;
  329. }
  331. main section.home div.container {
  332. width: 100%;
  333. height: 200px;
  335. display: flex;
  336. flex-direction: column;
  337. align-items: center;
  338. justify-content: center;
  340. border: 1px solid var(--borda-do-container-principal);
  341. border-radius: 10px;
  343. background: var(--cor-de-fundo-do-container-principal);
  344. }
  346. main section.home div.container header {
  347. width: 100%;
  348. height: 50px;
  350. display: flex;
  351. align-items: center;
  353. padding: 0px 5px;
  355. border-bottom: 1px solid var(--borda-do-header-do-container-principal);
  357. overflow: hidden;
  358. }
  360. main section.home div.container form {
  361. width: 100%;
  362. height: auto;
  364. display: flex;
  365. flex-direction: column;
  366. align-items: center;
  367. gap: 10px;
  369. padding: 10px;
  370. }
  372. main section.home div.container form div {
  373. width: 90%;
  374. height: 40px;
  376. display: flex;
  377. align-items: center;
  379. position: relative;
  381. padding: 0px 0px 0px 5px;
  383. border-radius: 20px;
  384. border: 1px solid var(--cor-da-borda-dos-input-do-container-principal);
  386. overflow: hidden;
  388. background-color: var(--cor-de-fundo-dos-input-do-container-principal);
  389. }
  391. main section.home div.container form div svg {
  392. width: 40px;
  393. height: 40px;
  395. padding: 10px;
  397. color: var(--cor-dos-icones-dos-input-do-container-principal);
  398. }
  400. main section.home div.container form div input {
  401. width: calc(100% - 40px);
  402. height: 100%;
  404. border: 0;
  405. outline: none;
  407. color: var(--cor-do-texto-dos-input-do-container-principal);
  409. background-color: transparent;
  410. }
  412. main section.home div.container form div svg.eye {
  413. position: absolute;
  414. right: 0;
  415. }
  417. .eye-none {
  418. display: none;
  419. }
  420. .eye-block {
  421. display: block;
  422. }
  424. main section.home div.container form div input::placeholder {
  425. color: var(--cor-do-texto-dos-input-do-container-principal-quando-nao-ta-selecionado);
  426. }
  428. main section.home div.container form div.buttons {
  429. height: 40px;
  431. display: flex;
  432. justify-content: center;
  433. align-items: center;
  434. gap: 10px;
  436. border: 0;
  437. padding-left: 3px;
  439. background: transparent;
  440. }
  442. main section.home div.container form div button#startStopVpn {
  443. flex: 1;
  444. height: 40px;
  446. display: flex;
  447. align-items: center;
  448. justify-content: center;
  449. gap: 10px;
  451. padding: 10px;
  453. border: 1px solid var(--cor-da-borda-do-botao-do-container-principal);
  454. border-radius: 20px;
  456. background: var(--cor-de-fundo-do-botao-do-container-principal);
  457. }
  459. main section.home div.container form div button#buttonLogs {
  460. width: 40px;
  461. height: 40px;
  463. display: flex;
  464. justify-content: center;
  465. align-items: center;
  467. border: 1px solid var(--cor-da-borda-do-botao-do-container-principal);
  468. border-radius: 50%;
  470. background: var(--cor-de-fundo-do-botao-do-container-principal);
  471. }
  473. main section.home div.container form button svg {
  474. color: var(--cor-do-icone-do-botao-do-container-principal);
  475. }
  477. main section.home div.container form button span {
  478. color: var(--cor-do-texto-do-botao-do-container-principal);
  479. }
  481. main section.controls {
  482. width: 90%;
  483. height: 50px;
  485. display: flex;
  486. align-items: center;
  487. gap: 15px;
  489. position: absolute;
  490. bottom: 10px;
  491. z-index: 999;
  493. padding: 0px 10px;
  495. border: 1px solid var(--cor-da-borda-do-container-de-controles);
  496. border-radius: 25px;
  498. background: var(--cor-de-fundo-do-container-de-controles);
  499. }
  501. main section.controls button {
  502. width: 40px;
  503. height: 40px;
  505. display: flex;
  506. align-items: center;
  507. justify-content: center;
  509. border: 0px solid var(--cor-da-borda-do-botao-do-container-de-controles);
  510. border-radius: 50%;
  512. background: var(--cor-de-fundo-do-botao-do-container-de-controles);
  513. }
  515. main section.controls button:nth-child(2) {
  516. margin-right: auto;
  517. }
  519. main section.controls button svg {
  520. color: var(--cor-do-icone-do-botao-do-container-de-controles);
  521. }
  523. main section.controls button#backToHome {
  524. width: 60px;
  525. height: 60px;
  527. margin-left: auto;
  528. margin-right: auto;
  530. position: absolute;
  531. top: -50%;
  532. left: 0;
  533. right: 0;
  535. border: 1px solid var(--cor-da-borda-do-botao-do-meio-do-container-de-controles);
  537. background: var(--cor-de-fundo-do-botao-do-meio-do-container-de-controles);
  538. }
  540. main section.controls button#backToHome::before {
  541. width: 60px;
  542. height: 60px;
  544. content: '';
  546. position: absolute;
  547. top: -6px;
  548. left: -6px;
  549. right: 0;
  550. bottom: 0px;
  551. z-index: 2;
  553. margin-left: auto;
  554. margin-right: auto;
  556. border: 5px solid var(--cor-da-borda-do-botao-do-meio-do-container-de-controles);
  557. border-radius: 50%;
  558. }
  560. main section.listOfCarriers {
  561. width: calc(100% - 10px);
  562. height: 70%;
  564. display: flex;
  565. flex-direction: column;
  566. align-items: center;
  568. position: absolute;
  569. top: 13%;
  571. border: 1px solid var(--cor-da-borda-do-container-da-lista-de-configuracoes);
  572. border-radius: 10px;
  574. overflow-y: auto;
  576. opacity: 0;
  577. transform: scale(0);
  578. transform-origin: center;
  579. transition: all 0.3s ease 0.1s;
  581. background: var(--cor-de-fundo-do-container-da-lista-de-configuracoes);
  582. backdrop-filter: blur(10px);
  583. }
  585. main section.listOfCarriers.active {
  586. opacity: 1;
  587. transform: scale(1);
  588. }
  590. main section.listOfCarriers .header-list {
  591. width: 100%;
  592. height: 50px;
  594. display: flex;
  595. align-items: center;
  597. padding: 10px;
  599. border: 1px solid var();
  601. background: var(--cor-de-fundo-do-header-do-container-da-lista-de-configuracoes);
  602. }
  604. main section.listOfCarriers header svg.bi-x-lg {
  605. margin: 0px 0px 0px auto;
  607. color: var(--cor-do-icone-de-fechar-do-header-do-container-da-lista-de-configuracoes);
  608. }
  610. main section.listOfCarriers section.list-container {
  611. width: 100%;
  612. height: 100%;
  614. display: flex;
  615. flex-direction: column;
  616. gap: 20px;
  618. margin: 10px 0px;
  619. padding: 0px 10px;
  621. overflow-y: auto;
  623. background: var(--cor-de-fundo-do-container-da-lista-de-categorias-de-configuracoes);
  624. }
  626. main section.listOfCarriers section.list-container div.category {
  627. width: 100%;
  628. height: auto;
  630. display: flex;
  631. flex-direction: column;
  632. gap: 10px;
  634. border-radius: 5px;
  636. background: var(--cor-de-fundo-da-categoria);
  637. }
  639. main section.listOfCarriers section.list-container div.category header {
  640. width: 100%;
  641. height: 50px;
  642. min-height: 50px;
  644. display: flex;
  645. justify-content: space-between;
  646. align-items: center;
  648. padding: 0px 5px;
  650. border-bottom: 1px solid var(--cor-da-borda-do-header-da-categoria);
  651. border-radius: 5px;
  653. background: var(--cor-de-fundo-do-header-da-categoria);
  654. }
  656. main section.listOfCarriers section.list-container div.category header h1 {
  657. color: var(--cor-do-text-do-header-da-categoria);
  658. font-weight: 400;
  659. font-size: 1rem;
  660. }
  662. main section.listOfCarriers section.list-container div.category header svg {
  663. color: var(--cor-do-icone-do-header-da-categoria);
  664. transition: all 0.3s ease 0.3s;
  665. }
  667. main section.listOfCarriers section.list-container div.category ul.configs {
  668. width: 100%;
  669. max-height: 0px;
  671. display: flex;
  672. flex-direction: column;
  673. gap: 10px;
  675. overflow-y: auto;
  676. overflow-x: hidden;
  678. background: var(--cor-de-fundo-da-lista-de-configuracoes);
  680. transition: all 0.3s ease 0.3s;
  681. }
  683. main section.listOfCarriers section.list-container div.category ul.configs li {
  684. width: 100%;
  685. height: 60px;
  687. display: flex;
  688. align-items: center;
  689. gap: 3px;
  691. padding: 5px;
  693. border-radius: 5px;
  695. background: var(--cor-de-fundo-do-item-da-configuracao);
  696. }
  698. main section.listOfCarriers section.list-container div.category ul.configs li div.logo {
  699. width: auto;
  700. height: 100%;
  702. display: flex;
  703. justify-content: center;
  704. align-items: center;
  705. }
  707. main section.listOfCarriers section.list-container div.category ul.configs li div.logo img {
  708. width: 40px;
  709. height: auto;
  710. }
  712. main
  713. section.listOfCarriers
  714. section.list-container
  715. div.category
  716. ul.configs
  717. li
  718. div.description {
  719. width: 150px;
  720. height: 100%;
  722. display: flex;
  723. flex-direction: column;
  724. align-items: center;
  725. justify-content: center;
  726. justify-items: center;
  727. align-content: center;
  729. overflow: hidden;
  730. }
  732. main
  733. section.listOfCarriers
  734. section.list-container
  735. div.category
  736. ul.configs
  737. li
  738. div.description
  739. h1 {
  740. width: 100%;
  741. height: 30px;
  743. display: flex;
  744. justify-content: center;
  746. color: var(--cor-do-texto-do-titulo-do-item-da-configuracao);
  747. font-size: 0.6rem;
  748. font-weight: 400;
  750. white-space: nowrap;
  751. overflow: hidden;
  752. text-overflow: ellipsis;
  753. }
  755. main
  756. section.listOfCarriers
  757. section.list-container
  758. div.category
  759. ul.configs
  760. li
  761. div.description
  762. p {
  763. width: 100%;
  764. height: 30px;
  766. display: flex;
  767. justify-content: flex-end;
  768. align-items: end;
  770. color: var(--cor-do-texto-da-descricao-do-item-da-configuracao);
  771. font-size: 0.6rem;
  773. white-space: nowrap;
  774. overflow: hidden;
  775. text-overflow: ellipsis;
  776. }
  778. main section.listOfCarriers section.list-container div.category ul.configs li div.mode {
  779. width: 50px;
  780. height: 100%;
  782. margin-left: auto;
  784. display: flex;
  785. justify-content: flex-end;
  786. align-items: end;
  787. }
  789. main section.listOfCarriers section.list-container div.category ul.configs li div.mode p {
  790. color: var(--cor-do-modo-da-conexao-do-item-da-configuracao);
  791. font-size: 0.6rem;
  792. }
  794. section.main-checkuser {
  795. width: 95%;
  796. height: 70%;
  798. position: absolute;
  799. top: 8%;
  801. margin: auto;
  803. border-radius: 5px;
  805. overflow: hidden;
  807. background: var(--cor-de-fundo-do-container-do-checkuser-principal);
  809. opacity: 0;
  810. transform: scale(0);
  811. transform-origin: center;
  812. transition: all 0.3s ease 0.1s;
  813. }
  815. section.main-checkuser.show {
  816. opacity: 1;
  817. transform: scale(1);
  818. }
  820. @media (min-width: 320px) {
  821. section.main-checkuser {
  822. height: 55%;
  824. top: 50%;
  825. bottom: 50%;
  826. }
  827. }
  829. section.main-checkuser header {
  830. width: 100%;
  831. height: 10%;
  832. max-height: 50px;
  834. display: flex;
  835. align-items: center;
  836. justify-content: flex-end;
  838. padding: 10px;
  840. background: var(--cor-de-fundo-do-header-do-container-do-checkuser-principal);
  841. }
  843. section.main-checkuser header svg {
  844. color: var(--cor-do-icone-do-header-do-container-do-checkuser-principal);
  845. }
  847. section.main-checkuser section.container-content-checkuser {
  848. width: 100%;
  849. height: 100%;
  851. display: flex;
  852. flex-direction: column;
  853. align-items: center;
  854. }
  856. section.main-checkuser section.container-content-checkuser div.connected-success {
  857. width: 50%;
  858. max-width: 100px;
  859. height: 50%;
  860. max-height: 100px;
  862. display: flex;
  863. justify-content: center;
  864. align-items: center;
  866. margin-top: 20px;
  867. margin-bottom: 20px;
  869. border: 1px solid var(--cor-da-borda-do-icone-de-sucesso);
  870. border-radius: 50%;
  872. animation: pulse 1s infinite;
  873. }
  875. section.main-checkuser section.container-content-checkuser div.connected-success svg {
  876. width: 50%;
  877. height: 50%;
  879. color: var(--cor-do-icone-de-sucesso);
  880. }
  882. @keyframes pulse {
  883. 0% {
  884. box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
  885. }
  886. 70% {
  887. box-shadow: 0 0 0 20px rgba(0, 255, 0, 0);
  888. }
  889. 100% {
  890. box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
  891. }
  892. }
  894. section.main-checkuser section.container-content-checkuser ul {
  895. width: 100%;
  896. height: auto;
  898. display: flex;
  899. flex-direction: column;
  900. justify-content: center;
  901. align-items: center;
  903. gap: 10px;
  905. padding: 0px 10px;
  907. list-style: none;
  908. }
  910. section.main-checkuser section.container-content-checkuser ul li {
  911. width: 100%;
  912. height: 50px;
  914. display: flex;
  915. align-items: center;
  917. padding: 0px 10px;
  919. border-radius: 5px;
  921. background: var(--cor-de-fundo-dos-dados-de-login);
  922. }
  924. section.main-checkuser section.container-content-checkuser ul li svg {
  925. margin-right: 10px;
  927. color: var(--cor-dos-icones-dos-dados-de-login);
  928. }
  930. section.main-checkuser section.container-content-checkuser ul li span {
  931. color: var(--cor-dos-textos-dos-dados-de-login);
  932. }
  934. section.loading {
  935. width: 95%;
  936. height: auto;
  938. position: absolute;
  939. top: 50%;
  940. left: 0;
  941. right: 0;
  942. transform: translateY(-50%);
  944. margin: auto;
  946. border-radius: 5px;
  948. overflow-x: hidden;
  950. opacity: 0;
  951. transform: scale(0);
  952. transform-origin: center;
  953. transition: all 0.3s ease 0.1s;
  955. background: var(--cor-de-fundo-do-container-de-carregamento);
  956. }
  958. section.loading.show {
  959. opacity: 1;
  960. transform: scale(1);
  961. }
  963. section.loading header {
  964. width: 100%;
  965. height: 10%;
  966. max-height: 50px;
  968. display: flex;
  969. align-items: center;
  970. justify-content: flex-end;
  972. padding: 10px;
  974. background: var(--cor-de-fundo-do-header-do-container-de-carregamento);
  975. }
  977. section.loading header svg {
  978. color: var(--cor-do-icone-do-header-do-container-de-carregamento);
  979. }
  981. section.loading div.loading-container {
  982. width: 100px;
  983. height: 100px;
  985. margin: 30px auto;
  987. border: 4px solid #ffffff;
  988. border-top: 4px solid transparent;
  989. border-radius: 50%;
  991. animation: spin 0.5s linear infinite;
  992. }
  994. @keyframes spin {
  995. 0% {
  996. transform: rotate(0deg);
  997. }
  998. 100% {
  999. transform: rotate(360deg);
  1000. }
  1001. }
  1003. section.profile-checkuser {
  1004. width: 100%;
  1005. height: 100%;
  1007. display: flex;
  1008. flex-direction: column;
  1010. position: absolute;
  1011. top: 0;
  1012. left: 100%;
  1013. right: 0;
  1014. bottom: 0;
  1016. background: var(--imagem-de-fundo);
  1017. background-repeat: no-repeat;
  1018. background-position: center;
  1019. background-size: cover;
  1021. transition: transform 0.5s ease-in-out;
  1022. }
  1024. section.profile-checkuser.show {
  1025. transform: translateX(-100%);
  1026. }
  1028. section.profile-checkuser header,
  1029. section.profile-checkuser section.terms header {
  1030. width: 95%;
  1031. height: 40px;
  1033. display: flex;
  1034. align-items: center;
  1036. margin: 0 auto;
  1038. background: var(--cor-de-fundo-do-header-do-container-do-perfil-do-usuario);
  1039. }
  1041. section.profile-checkuser header h1,
  1042. section.profile-checkuser section.terms header h1 {
  1043. width: 95%;
  1045. color: #ffffff;
  1046. font-weight: 400;
  1047. font-size: 1rem;
  1048. text-align: center;
  1050. margin: 0 auto;
  1052. border-bottom: 4px solid var(--cor-da-borda-do-header-do-container-do-perfil-do-usuario);
  1053. }
  1055. section.profile-checkuser div.not-view-user {
  1056. display: none;
  1057. flex-direction: column;
  1058. align-items: center;
  1059. gap: 15px;
  1061. padding: 15px 10px;
  1062. }
  1064. section.profile-checkuser div.not-view-user.show {
  1065. display: flex;
  1066. }
  1068. section.profile-checkuser div.not-view-user div.circle {
  1069. width: 100px;
  1070. height: 100px;
  1072. display: flex;
  1073. justify-content: center;
  1074. align-items: center;
  1076. border: 2px solid var(--cor-da-borda-de-nao-ver-o-usuario-do-container-do-perfil-do-usuario);
  1077. border-radius: 50%;
  1078. }
  1080. section.profile-checkuser div.not-view-user div.circle svg {
  1081. width: 50%;
  1082. height: 50%;
  1084. color: var(--cor-do-icone-de-dentro-do-close-do-container-do-perfil-do-usuario);
  1085. }
  1087. section.profile-checkuser div.not-view-user h2 {
  1088. width: 100%;
  1090. color: var(--cor-do-titulo-de-nao-ver-o-usuario-do-container-do-perfil-do-usuario);
  1091. text-align: center;
  1092. font-size: 1rem;
  1093. }
  1095. section.profile-checkuser div.not-view-user p {
  1096. color: var(--cor-da-descricao-de-nao-ver-o-usuario-do-container-do-perfil-do-usuario);
  1097. text-align: center;
  1098. font-size: 0.8rem;
  1099. }
  1101. section.profile-checkuser ul {
  1102. width: 100%;
  1103. height: auto;
  1105. display: none;
  1106. flex-direction: column;
  1107. gap: 20px;
  1109. list-style: none;
  1111. padding: 10px;
  1113. background: var(--cor-de-fundo-da-lista-do-container-do-perfil-do-usuario);
  1114. }
  1116. section.profile-checkuser ul.show {
  1117. display: grid;
  1118. }
  1120. section.profile-checkuser ul li {
  1121. width: 95%;
  1122. height: 40px;
  1124. display: grid;
  1125. align-items: center;
  1127. margin: 0px auto;
  1129. position: relative;
  1131. border-radius: 20px;
  1133. background: var(--cor-de-fundo-dos-items-do-container-do-perfil-do-usuario);
  1134. }
  1136. section.profile-checkuser ul li svg {
  1137. width: 50px;
  1138. height: 50px;
  1140. position: absolute;
  1141. left: -10px;
  1143. padding: 10px;
  1145. border-radius: 50%;
  1146. box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  1148. color: #ffffff;
  1150. background: var(--cor-de-fundo-dos-icones-do-container-do-perfil-do-usuario);
  1151. }
  1153. section.profile-checkuser ul li svg.even {
  1154. box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.2);
  1155. position: absolute;
  1156. left: initial;
  1157. right: -10px;
  1158. }
  1160. section.profile-checkuser ul li svg path {
  1161. transform: scale(0.6);
  1162. transform-origin: center;
  1163. }
  1165. section.profile-checkuser ul li span {
  1166. margin-left: 45px;
  1168. color: #ffffff;
  1169. font-size: 0.8rem;
  1170. }
  1172. section.profile-checkuser ul li span.even {
  1173. margin-left: auto;
  1174. margin-right: 45px;
  1175. }
  1177. section.profile-checkuser section.terms {
  1178. display: flex;
  1179. flex-direction: column;
  1181. width: 100%;
  1182. height: auto;
  1183. margin-top: 5%;
  1184. }
  1186. section.profile-checkuser section.terms p {
  1187. width: 95%;
  1188. height: auto;
  1189. max-height: 210px;
  1191. margin: 0 auto;
  1192. padding: 10px;
  1194. border-radius: 5px;
  1196. overflow-y: auto;
  1198. color: #ffffff;
  1199. text-align: center;
  1201. background: var(--cor-de-fundo-dos-termos-do-container-do-perfil-do-usuario);
  1202. }
  1204. @media (min-height: 700px) {
  1205. section.profile-checkuser section.terms p {
  1206. max-height: 350px;
  1207. }
  1208. }
  1210. section.tools {
  1211. width: 100%;
  1212. height: 100%;
  1214. display: flex;
  1215. flex-direction: column;
  1217. position: absolute;
  1218. top: 0;
  1219. left: 100%;
  1220. right: 0;
  1222. background: var(--imagem-de-fundo);
  1223. background-repeat: no-repeat;
  1224. background-position: center;
  1225. background-size: cover;
  1227. transition: transform 0.5s ease-in-out;
  1228. }
  1230. section.tools.show {
  1231. transform: translateX(-100%);
  1232. }
  1234. section.tools header {
  1235. width: 100%;
  1236. height: auto;
  1238. display: flex;
  1239. justify-content: center;
  1240. }
  1242. section.tools header h1 {
  1243. width: 90%;
  1244. height: auto;
  1246. padding: 10px;
  1248. border-bottom: 3px solid var(--cor-da-borda-do-titulo-do-container-de-ferramentas);
  1249. text-shadow: 0px 4px 4px var(--cor-da-sombra-dos-botoes-do-container-de-ferramentas);
  1251. color: var(--cor-do-texto-do-titulo-do-container-de-ferramentas);
  1252. font-weight: bold;
  1253. font-size: 1rem;
  1254. text-align: center;
  1255. }
  1257. section.tools section.container-tools {
  1258. width: 100%;
  1259. height: auto;
  1261. display: flex;
  1262. flex-direction: column;
  1263. gap: 20px;
  1265. margin: 40px 0px 0px 0px;
  1266. padding: 0px 10px;
  1267. }
  1269. section.tools section.container-tools button {
  1270. width: 100%;
  1271. height: 50px;
  1273. display: flex;
  1274. align-items: center;
  1275. gap: 9.5px;
  1277. padding: 0px 16px;
  1279. border: 1px solid var(--cor-da-borda-dos-botoes-do-container-de-ferramentas);
  1280. border-radius: 25px;
  1281. box-shadow: 0px 4px 4px var(--cor-da-sombra-dos-botoes-do-container-de-ferramentas);
  1283. background: var(--cor-de-fundo-dos-botoes-do-container-de-ferramentas);
  1284. }
  1286. section.tools section.container-tools button svg {
  1287. width: 20px;
  1288. height: 20px;
  1290. color: var(--cor-dos-icones-dos-botoes-do-container-de-ferramentas);
  1291. }
  1293. section.tools section.container-tools button span {
  1294. color: var(--cor-dos-textos-dos-botoes-do-container-de-ferramentas);
  1295. }
  1297. section.modal-speedtest,
  1298. section.modal-error-alert {
  1299. width: 95%;
  1300. max-width: 450px;
  1301. height: 50%;
  1303. position: absolute;
  1304. top: 25%;
  1305. transform: translate(-50%, -50%);
  1307. z-index: 2;
  1309. display: flex;
  1310. flex-direction: column;
  1312. border-radius: 5px;
  1314. overflow-x: hidden;
  1316. opacity: 0;
  1317. transform: scale(0);
  1318. transform-origin: center;
  1319. transition: all 0.3s ease 0.1s;
  1320. }
  1322. section.modal-speedtest.show,
  1323. section.modal-error-alert.show,
  1324. section.modal-logs.show {
  1325. opacity: 1;
  1326. transform: scale(1);
  1327. }
  1329. section.modal-speedtest header,
  1330. section.modal-error-alert header {
  1331. width: 100%;
  1332. height: 40px;
  1334. display: flex;
  1335. align-items: center;
  1337. padding: 0px 10px;
  1338. }
  1340. section.modal-speedtest header {
  1341. background-color: var(--cor-do-header-do-modal-do-speedtest);
  1342. }
  1344. section.modal-speedtest header h1,
  1345. section.modal-error-alert header h1 {
  1346. flex: 1;
  1347. display: flex;
  1348. justify-content: center;
  1349. align-items: center;
  1351. color: #ffffff;
  1352. font-family: 'Roboto', sans-serif;
  1353. font-weight: bolder;
  1354. }
  1356. section.modal-speedtest header svg,
  1357. section.modal-error-alert header svg {
  1358. margin-left: auto;
  1360. color: var(--cor-do-icone-do-header-do-modal-do-speedtest);
  1361. }
  1363. section.modal-speedtest section,
  1364. section.modal-error-alert section {
  1365. width: 100%;
  1366. height: calc(100% - 40px);
  1368. position: relative;
  1370. display: flex;
  1371. flex-direction: column;
  1372. justify-content: center;
  1373. align-items: center;
  1374. }
  1376. section.modal-speedtest section {
  1377. background: var(--cor-de-fundo-do-modal-do-speedtest);
  1378. }
  1380. section.modal-speedtest section iframe {
  1381. width: 100%;
  1382. height: 100%;
  1384. border: 0;
  1386. overflow: hidden;
  1387. }
  1389. section.modal-error-alert header {
  1390. background: var(--cor-do-header-do-modal-de-error);
  1391. }
  1393. section.modal-error-alert section {
  1394. background: var(--cor-de-fundo-do-modal-de-error);
  1395. }
  1397. section.modal-error-alert section h1 {
  1398. padding: 0px 10px;
  1399. color: #ffffff;
  1400. }
  1402. section.modal-error-alert section p {
  1403. margin-top: 10px;
  1404. padding: 0px 10px;
  1406. color: #ffffff;
  1407. text-align: center;
  1408. }
  1410. section.modal-logs {
  1411. width: 95%;
  1412. max-width: 450px;
  1413. height: auto;
  1415. position: absolute;
  1416. top: 15%;
  1417. transform: translate(-50%, -50%);
  1419. z-index: 2;
  1421. display: flex;
  1422. flex-direction: column;
  1424. border-radius: 5px;
  1426. overflow-x: hidden;
  1428. opacity: 0;
  1429. transform: scale(0);
  1430. transform-origin: center;
  1431. transition: all 0.3s ease 0.1s;
  1432. }
  1434. section.modal-logs header {
  1435. width: 100%;
  1436. height: 40px;
  1438. display: flex;
  1439. align-items: center;
  1440. justify-content: flex-start;
  1442. padding: 0px 10px;
  1444. background: var(--cor-de-fundo-do-modal-de-logs);
  1445. }
  1447. section.modal-logs header h1 {
  1448. font-size: 14px;
  1449. color: #ffffff;
  1450. }
  1452. section.modal-logs p {
  1453. height: 100%;
  1454. /* min-height: 200px;
  1455. max-height: 400px; */
  1457. padding: 10px;
  1459. font-size: 12px;
  1460. text-align: left;
  1461. color: var(--cor-do-texto-do-registro-do-modal-de-logs);
  1463. overflow-y: auto;
  1465. background: var(--cor-de-fundo-do-modal-de-logs);
  1466. }
  1468. section.modal-logs section {
  1469. width: 100%;
  1470. height: auto;
  1472. display: flex;
  1473. align-items: center;
  1474. justify-content: space-between;
  1476. padding: 10px 10px;
  1478. border-top: 3px solid rgba(161, 161, 161, 1);
  1480. background: var(--cor-de-fundo-do-modal-de-logs);
  1481. }
  1483. section.modal-logs section button {
  1484. width: 45%;
  1485. min-width: 115px;
  1486. height: 40px;
  1488. display: flex;
  1489. align-items: center;
  1490. justify-content: center;
  1492. border: 1px solid rgba(97, 97, 97, 1);
  1493. border-radius: 3px;
  1495. color: #ffffff;
  1497. background: rgba(46, 46, 46, 1);
  1498. }
  1500. section.renew-window {
  1501. width: 100%;
  1502. height: 100%;
  1504. display: flex;
  1505. flex-direction: column;
  1507. position: absolute;
  1508. top: 0;
  1509. left: -100%;
  1510. right: 100%;
  1512. background: var(--imagem-de-fundo);
  1513. background-repeat: no-repeat;
  1514. background-position: center;
  1515. background-size: cover;
  1517. transition: transform 0.5s ease-in-out;
  1518. }
  1520. section.renew-window.show {
  1521. transform: translateX(100%);
  1522. }
  1524. section.renew-window header {
  1525. width: 100%;
  1526. height: auto;
  1528. display: flex;
  1529. justify-content: center;
  1530. }
  1532. section.renew-window header h1 {
  1533. width: 90%;
  1534. height: auto;
  1536. padding: 10px;
  1538. border-bottom: 3px solid var(--cor-da-borda-do-titulo-do-container-de-ferramentas);
  1539. text-shadow: 0px 4px 4px var(--cor-da-sombra-dos-botoes-do-container-de-ferramentas);
  1541. color: var(--cor-do-texto-do-titulo-do-container-de-ferramentas);
  1542. font-weight: bold;
  1543. font-size: 1rem;
  1544. text-align: center;
  1545. }
  1547. section.renew-window section {
  1548. width: 100%;
  1549. height: 100%;
  1551. display: flex;
  1552. justify-content: center;
  1553. align-items: center;
  1554. }
  1556. section.renew-window section div {
  1557. width: 90%;
  1558. height: auto;
  1560. display: flex;
  1561. flex-direction: column;
  1562. align-items: center;
  1564. padding: 10px;
  1565. margin: 0px 0px 40px 0px;
  1567. border: 1px solid rgba(219, 142, 255, 1);
  1568. border-radius: 37px;
  1570. background: rgba(161, 42, 246, 0.5);
  1571. }
  1573. section.renew-window section div h1 {
  1574. color: #ffffff;
  1575. }
  1577. section.renew-window section div p {
  1578. width: 100%;
  1580. display: flex;
  1581. justify-content: center;
  1582. align-items: center;
  1584. margin-top: 15%;
  1586. color: #ffffff;
  1587. text-align: center;
  1588. }
  1589. </style>
  1590. </head>
  1591. <body>
  1592. <main>
  1593. <section class="home">
  1594. <header>
  1595. <img
  1596. class="logo"
  1597. src="https://bafkreihrtmmarih3ke6ho2upycwb7wvsr26pqfc22h53cwizduh37heamy.ipfs.w3s.link"
  1598. alt="logo"
  1599. />
  1600. </header>
  1602. <div class="carrierSelector">
  1603. <svg
  1604. xmlns="http://www.w3.org/2000/svg"
  1605. width="16"
  1606. height="16"
  1607. fill="currentColor"
  1608. class="bi bi-sd-card"
  1609. viewBox="0 0 16 16"
  1610. >
  1611. <path
  1612. d="M6.25 3.5a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0v-2zm2 0a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0v-2zm2 0a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0v-2zm2 0a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0v-2z"
  1613. />
  1614. <path
  1615. fill-rule="evenodd"
  1616. d="M5.914 0H12.5A1.5 1.5 0 0 1 14 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5V3.914c0-.398.158-.78.44-1.06L4.853.439A1.5 1.5 0 0 1 5.914 0zM13 1.5a.5.5 0 0 0-.5-.5H5.914a.5.5 0 0 0-.353.146L3.146 3.561A.5.5 0 0 0 3 3.914V14.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-13z"
  1617. />
  1618. </svg>
  1620. <span>Selecione uma operadora</span>
  1621. </div>
  1623. <div class="container">
  1624. <form>
  1625. <div>
  1626. <svg
  1627. xmlns="http://www.w3.org/2000/svg"
  1628. width="16"
  1629. height="16"
  1630. fill="currentColor"
  1631. class="bi bi-person"
  1632. viewBox="0 0 16 16"
  1633. >
  1634. <path
  1635. 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"
  1636. />
  1637. </svg>
  1639. <input id="inputUser" type="text" placeholder="Usuário" />
  1640. </div>
  1642. <div>
  1643. <svg
  1644. xmlns="http://www.w3.org/2000/svg"
  1645. width="16"
  1646. height="16"
  1647. fill="currentColor"
  1648. class="bi bi-key"
  1649. viewBox="0 0 16 16"
  1650. >
  1651. <path
  1652. 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"
  1653. />
  1654. <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
  1655. </svg>
  1657. <input id="inputPassword" type="password" placeholder="Senha" />
  1659. <svg
  1660. xmlns="http://www.w3.org/2000/svg"
  1661. width="16"
  1662. height="16"
  1663. fill="currentColor"
  1664. class="bi bi-eye-slash eye-hidden"
  1665. viewBox="0 0 16 16"
  1666. >
  1667. <path
  1668. 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"
  1669. />
  1670. <path
  1671. 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"
  1672. />
  1673. <path
  1674. 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"
  1675. />
  1676. </svg>
  1678. <svg
  1679. xmlns="http://www.w3.org/2000/svg"
  1680. width="16"
  1681. height="16"
  1682. fill="currentColor"
  1683. class="bi bi-eye eye-show eye-none"
  1684. viewBox="0 0 16 16"
  1685. >
  1686. <path
  1687. 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"
  1688. />
  1689. <path
  1690. 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"
  1691. />
  1692. </svg>
  1693. </div>
  1695. <div class="buttons">
  1696. <button id="startStopVpn" type="button">
  1697. <span id="startStopVpnButtonValue">Conectar</span>
  1698. </button>
  1700. <button id="buttonLogs" type="button">
  1701. <svg
  1702. xmlns="http://www.w3.org/2000/svg"
  1703. width="16"
  1704. height="16"
  1705. fill="currentColor"
  1706. class="bi bi-file-earmark-text"
  1707. viewBox="0 0 16 16"
  1708. >
  1709. <path
  1710. d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"
  1711. />
  1712. <path
  1713. d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"
  1714. />
  1715. </svg>
  1716. </button>
  1717. </div>
  1718. </form>
  1719. </div>
  1720. </section>
  1722. <section class="vpnStatus">
  1723. <svg
  1724. xmlns="http://www.w3.org/2000/svg"
  1725. width="16"
  1726. height="16"
  1727. fill="currentColor"
  1728. class="bi bi-plug"
  1729. viewBox="0 0 16 16"
  1730. >
  1731. <path
  1732. d="M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0zM5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4H5z"
  1733. />
  1734. </svg>
  1736. <span>Desconectado</span>
  1737. </section>
  1739. <section class="local-ip">
  1740. <span>TIM: 192.168.0.1</span>
  1741. </section>
  1743. <section class="listOfCarriers">
  1744. <header class="header-list">
  1745. <svg
  1746. id="close-modal-configs"
  1747. xmlns="http://www.w3.org/2000/svg"
  1748. width="16"
  1749. height="16"
  1750. fill="currentColor"
  1751. class="bi bi-x-lg"
  1752. viewBox="0 0 16 16"
  1753. >
  1754. <path
  1755. 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"
  1756. />
  1757. </svg>
  1758. </header>
  1760. <section class="list-container"></section>
  1761. </section>
  1763. <section class="loading">
  1764. <header>
  1765. <svg
  1766. xmlns="http://www.w3.org/2000/svg"
  1767. width="16"
  1768. height="16"
  1769. fill="currentColor"
  1770. class="bi bi-x-lg"
  1771. viewBox="0 0 16 16"
  1772. >
  1773. <path
  1774. 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"
  1775. />
  1776. </svg>
  1777. </header>
  1779. <div class="loading-container"></div>
  1780. </section>
  1782. <section class="main-checkuser">
  1783. <header>
  1784. <svg
  1785. xmlns="http://www.w3.org/2000/svg"
  1786. width="16"
  1787. height="16"
  1788. fill="currentColor"
  1789. class="bi bi-x-lg"
  1790. viewBox="0 0 16 16"
  1791. >
  1792. <path
  1793. 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"
  1794. />
  1795. </svg>
  1796. </header>
  1798. <section class="container-content-checkuser">
  1799. <div class="connected-success">
  1800. <svg
  1801. xmlns="http://www.w3.org/2000/svg"
  1802. width="16"
  1803. height="16"
  1804. fill="currentColor"
  1805. class="bi bi-check2"
  1806. viewBox="0 0 16 16"
  1807. >
  1808. <path
  1809. 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"
  1810. />
  1811. </svg>
  1812. </div>
  1814. <ul></ul>
  1815. </section>
  1816. </section>
  1818. <section class="profile-checkuser">
  1819. <header>
  1820. <h1>INFORMAÇÕES DO PERFIL</h1>
  1821. </header>
  1823. <div id="not-profile-user" class="not-view-user">
  1824. <div class="circle">
  1825. <svg
  1826. xmlns="http://www.w3.org/2000/svg"
  1827. width="16"
  1828. height="16"
  1829. fill="currentColor"
  1830. class="bi bi-x-lg"
  1831. viewBox="0 0 16 16"
  1832. >
  1833. <path
  1834. 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"
  1835. />
  1836. </svg>
  1837. </div>
  1839. <h2>NÃO FOI POSSÍVEL CARREGAR AS INFORMAÇÕES DO PERFIL</h2>
  1840. <p>Tente conectar o seu usuário antes de verificar as informações do seu perfil</p>
  1841. </div>
  1843. <ul id="list-profile">
  1844. <li>
  1845. <svg
  1846. xmlns="http://www.w3.org/2000/svg"
  1847. width="16"
  1848. height="16"
  1849. fill="currentColor"
  1850. class="bi bi-person"
  1851. viewBox="0 0 16 16"
  1852. >
  1853. <path
  1854. 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"
  1855. />
  1856. </svg>
  1858. <span>NOME DE USUÁRIO: fulano</span>
  1859. </li>
  1861. <li>
  1862. <svg
  1863. xmlns="http://www.w3.org/2000/svg"
  1864. width="16"
  1865. height="16"
  1866. fill="currentColor"
  1867. class="bi bi-calendar3-week even"
  1868. viewBox="0 0 16 16"
  1869. >
  1870. <path
  1871. d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"
  1872. />
  1873. <path
  1874. d="M12 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-5 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm2-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-5 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
  1875. />
  1876. </svg>
  1878. <span class="even">EXPIRAÇÃO: dd/mm/aaaa</span>
  1879. </li>
  1881. <li>
  1882. <svg
  1883. xmlns="http://www.w3.org/2000/svg"
  1884. width="16"
  1885. height="16"
  1886. fill="currentColor"
  1887. class="bi bi-hourglass-split"
  1888. viewBox="0 0 16 16"
  1889. >
  1890. <path
  1891. d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"
  1892. />
  1893. </svg>
  1895. <span>DIAS RESTANTES: 99</span>
  1896. </li>
  1898. <li>
  1899. <svg
  1900. xmlns="http://www.w3.org/2000/svg"
  1901. width="16"
  1902. height="16"
  1903. fill="currentColor"
  1904. class="bi bi-phone-flip even"
  1905. viewBox="0 0 16 16"
  1906. >
  1907. <path
  1908. fill-rule="evenodd"
  1909. d="M11 1H5a1 1 0 0 0-1 1v6a.5.5 0 0 1-1 0V2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a.5.5 0 0 1-1 0V2a1 1 0 0 0-1-1Zm1 13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a.5.5 0 0 0-1 0v2a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2a.5.5 0 0 0-1 0v2ZM1.713 7.954a.5.5 0 1 0-.419-.908c-.347.16-.654.348-.882.57C.184 7.842 0 8.139 0 8.5c0 .546.408.94.823 1.201.44.278 1.043.51 1.745.696C3.978 10.773 5.898 11 8 11c.099 0 .197 0 .294-.002l-1.148 1.148a.5.5 0 0 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 1 0-.708.708l1.145 1.144L8 10c-2.04 0-3.87-.221-5.174-.569-.656-.175-1.151-.374-1.47-.575C1.012 8.639 1 8.506 1 8.5c0-.003 0-.059.112-.17.115-.112.31-.242.6-.376Zm12.993-.908a.5.5 0 0 0-.419.908c.292.134.486.264.6.377.113.11.113.166.113.169 0 .003 0 .065-.13.187-.132.122-.352.26-.677.4-.645.28-1.596.523-2.763.687a.5.5 0 0 0 .14.99c1.212-.17 2.26-.43 3.02-.758.38-.164.713-.357.96-.587.246-.229.45-.537.45-.919 0-.362-.184-.66-.412-.883-.228-.223-.535-.411-.882-.571ZM7.5 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1Z"
  1910. />
  1911. </svg>
  1913. <span class="even">CONECTADOS: 01/03</span>
  1914. </li>
  1915. </ul>
  1917. <section class="terms">
  1918. <header>
  1919. <h1>TERMOS DE USO</h1>
  1920. </header>
  1922. <p>
  1923. Ao comprar o acesso você aceita todos os nossos termos!
  1924. <br />
  1925. --------------------------------------------------------------
  1926. <br />
  1927. <br />
  1928. 1- Todo e qualquer conteúdo acessado através do aplicativo é de responsabilidade do
  1929. usuário! caso o usuário aproveitar-se de nosso vpn para cometer qualquer ato ilegal,
  1930. será de total responsabilidade do usuário!
  1931. <br />
  1932. <br />
  1933. 2- Em casos de falha na conexão entre em contato com ovendedor que lhe forneceu o acesso
  1934. ao aplicativo!
  1935. <br />
  1936. <br />
  1937. 3- NÃO realizamos a prática de REEMBOLSO, então realize o teste grátis antes de comprar!
  1938. <br />
  1939. <br />
  1940. 4- Caso ocorra queda no sinal da operadora os dias offline serão adicionados de bônus.
  1941. Peça esses dias ao seu vendedor! (Somente quedas geral, quedas de forma especifica, não
  1942. nos responsabilizamos!)
  1943. <br />
  1944. <br />
  1945. 5- Caso houver alguma falhas de conexão por negligencia do usuário em não saber
  1946. configurar o aplicativo ou falha na rede móvel do usuário não disponibilizamos dias
  1947. bônus para estes casos. Porém disponibilizamos suporte especializado para ajudar a
  1948. solucionar esses problemas. Então em caso de falha de conexão entre em contato com seu
  1949. vendedor!
  1950. <br />
  1951. <br />
  1952. 6- Método de pagamento é pré-pago, ou seja você paga para usar. Caso desejar cancelar
  1953. basta não renovar no próximo mês, que seu login será deletado automaticamente. Não temos
  1954. termo de fidelidade em nossos serviços!
  1955. <br />
  1956. <br />
  1957. 7- Não temos vínculos algum com a operadora do seu chip. Vendemos apenas a conexão SSH,
  1958. que pode te liberar internet ilimitada através da conexão realizada no aplicativo!
  1959. <br />
  1960. <br />
  1961. 8- Nosso produto é a conexão SSH, não vendemos internet, caso a operadora que você está
  1962. utilizando não estiver conectando, você pode utilizar outra opção de operadora para
  1963. realizar a conexão!
  1964. <br />
  1965. <br />
  1966. 9- Ao utilizar nossa vpn você navegara de forma anônima na internet, dito isso você
  1967. concorda em não acessar qualquer conteúdo ilegal ou não permitidos em seu estado!
  1968. Atenciosamente Pogg corporation
  1969. <br />
  1970. --------------------------------------------------------------
  1971. </p>
  1972. </section>
  1973. </section>
  1975. <section class="tools">
  1976. <header>
  1977. <h1>FERRAMENTAS</h1>
  1978. </header>
  1980. <section class="container-tools">
  1981. <button id="config-apn">
  1982. <svg
  1983. xmlns="http://www.w3.org/2000/svg"
  1984. width="16"
  1985. height="16"
  1986. fill="currentColor"
  1987. class="bi bi-tools"
  1988. viewBox="0 0 16 16"
  1989. >
  1990. <path
  1991. d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0Zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708ZM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11Z"
  1992. />
  1993. </svg>
  1994. <span>CONFIGURAR APN</span>
  1995. </button>
  1997. <button id="battery-optimization">
  1998. <svg
  1999. xmlns="http://www.w3.org/2000/svg"
  2000. width="16"
  2001. height="16"
  2002. fill="currentColor"
  2003. class="bi bi-battery-half"
  2004. viewBox="0 0 16 16"
  2005. >
  2006. <path d="M2 6h5v4H2V6z" />
  2007. <path
  2008. d="M2 4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2zm10 1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h10zm4 3a1.5 1.5 0 0 1-1.5 1.5v-3A1.5 1.5 0 0 1 16 8z"
  2009. />
  2010. </svg>
  2011. <span> OTIMIZAÇÃO DE BATERIA </span>
  2012. </button>
  2014. <button id="speedtest">
  2015. <svg
  2016. xmlns="http://www.w3.org/2000/svg"
  2017. width="16"
  2018. height="16"
  2019. fill="currentColor"
  2020. class="bi bi-speedometer2"
  2021. viewBox="0 0 16 16"
  2022. >
  2023. <path
  2024. d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"
  2025. />
  2026. <path
  2027. fill-rule="evenodd"
  2028. d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"
  2029. />
  2030. </svg>
  2031. <span> SPEED TESTE </span>
  2032. </button>
  2034. <button id="clean-data-app">
  2035. <svg
  2036. xmlns="http://www.w3.org/2000/svg"
  2037. width="16"
  2038. height="16"
  2039. fill="currentColor"
  2040. class="bi bi-trash"
  2041. viewBox="0 0 16 16"
  2042. >
  2043. <path
  2044. 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"
  2045. />
  2046. <path
  2047. 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"
  2048. />
  2049. </svg>
  2050. <span>RESETAR/LIMPAR APP</span>
  2051. </button>
  2052. </section>
  2053. </section>
  2055. <section class="renew-window">
  2056. <header>
  2057. <h1>RENOVAR USUARIO</h1>
  2058. </header>
  2060. <section>
  2061. <div>
  2062. <h1>ATUALMENTE NÃO DISPONIVEL</h1>
  2064. <p>
  2065. ESTA FUNÇÃO SERVIRÁ PARA VOCÊ RENOVAR SEU LOGIN DE FORMA AUTOMATICA E TUDO DENTRO DO
  2066. APP!
  2067. </p>
  2068. </div>
  2069. </section>
  2070. </section>
  2072. <section class="modal-speedtest">
  2073. <header>
  2074. <h1>SPEED TESTE</h1>
  2075. <svg
  2076. xmlns="http://www.w3.org/2000/svg"
  2077. width="16"
  2078. height="16"
  2079. fill="currentColor"
  2080. class="bi bi-x-lg"
  2081. viewBox="0 0 16 16"
  2082. >
  2083. <path
  2084. 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"
  2085. />
  2086. </svg>
  2087. </header>
  2089. <section>
  2090. <iframe src=""></iframe>
  2091. </section>
  2092. </section>
  2094. <section class="modal-error-alert">
  2095. <header>
  2096. <h1>ERROR</h1>
  2098. <svg
  2099. xmlns="http://www.w3.org/2000/svg"
  2100. width="16"
  2101. height="16"
  2102. fill="currentColor"
  2103. class="bi bi-x-lg"
  2104. viewBox="0 0 16 16"
  2105. >
  2106. <path
  2107. d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"
  2108. />
  2109. </svg>
  2110. </header>
  2112. <section>
  2113. <h1>TITULO DO ERRO</h1>
  2114. <p></p>
  2115. </section>
  2116. </section>
  2118. <section class="modal-logs">
  2119. <header>
  2120. <h1>REGISTRO</h1>
  2121. </header>
  2123. <p></p>
  2125. <section>
  2126. <button id="clean-data-logs">LIMPAR</button>
  2127. <button id="hidden-modal-logs">FECHAR</button>
  2128. </section>
  2129. </section>
  2131. <section class="controls">
  2132. <button id="refresh-button" type="button" title="Atualizar as configurações do app">
  2133. <svg
  2134. xmlns="http://www.w3.org/2000/svg"
  2135. width="16"
  2136. height="16"
  2137. fill="currentColor"
  2138. class="bi bi-arrow-clockwise"
  2139. viewBox="0 0 16 16"
  2140. >
  2141. <path
  2142. fill-rule="evenodd"
  2143. d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"
  2144. />
  2145. <path
  2146. d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"
  2147. />
  2148. </svg>
  2149. </button>
  2151. <button id="renew" type="button" title="Renovar pagamento">
  2152. <svg
  2153. xmlns="http://www.w3.org/2000/svg"
  2154. width="16"
  2155. height="16"
  2156. fill="currentColor"
  2157. class="bi bi-cash-coin"
  2158. viewBox="0 0 16 16"
  2159. >
  2160. <path
  2161. fill-rule="evenodd"
  2162. d="M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"
  2163. />
  2164. <path
  2165. d="M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1h-.003zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195l.054.012z"
  2166. />
  2167. <path
  2168. d="M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083c.058-.344.145-.678.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1H1z"
  2169. />
  2170. <path d="M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 5.982 5.982 0 0 1 3.13-1.567z" />
  2171. </svg>
  2172. </button>
  2174. <button id="backToHome" type="button" title="Voltar para a página inicial">
  2175. <svg
  2176. xmlns="http://www.w3.org/2000/svg"
  2177. width="16"
  2178. height="16"
  2179. fill="currentColor"
  2180. class="bi bi-house"
  2181. viewBox="0 0 16 16"
  2182. >
  2183. <path
  2184. 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"
  2185. />
  2186. </svg>
  2187. </button>
  2189. <button id="utilitys" type="button" title="utilidades">
  2190. <svg
  2191. xmlns="http://www.w3.org/2000/svg"
  2192. width="16"
  2193. height="16"
  2194. fill="currentColor"
  2195. class="bi bi-gear"
  2196. viewBox="0 0 16 16"
  2197. >
  2198. <path
  2199. d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"
  2200. />
  2201. <path
  2202. d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"
  2203. />
  2204. </svg>
  2205. </button>
  2207. <button id="profile-button" type="button" title="Detalhes do usuário">
  2208. <svg
  2209. xmlns="http://www.w3.org/2000/svg"
  2210. width="16"
  2211. height="16"
  2212. fill="currentColor"
  2213. class="bi bi-person"
  2214. viewBox="0 0 16 16"
  2215. >
  2216. <path
  2217. 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"
  2218. />
  2219. </svg>
  2220. </button>
  2221. </section>
  2222. </main>
  2224. <!-- VARIAVEIS DE CONSULTA -->
  2225. <script>
  2226. let dataCheckuser
  2227. let zIndexContainers
  2228. </script>
  2230. <!-- FUNÇÕES DO APP -->
  2231. <script>
  2232. const dtStatusBarHeight = () => DtGetStatusBarHeight.execute()
  2233. const dtNavHeight = () => DtGetNavigationBarHeight.execute()
  2235. const dtGetLogs = () => DtGetLogs.execute()
  2236. const dtClearLogs = () => DtClearLogs.execute()
  2238. const dtVpnState = () => DtGetVpnState.execute()
  2240. const dtTranslateText = (label) => DtTranslateText.execute(label)
  2242. const dtStartVpn = () => DtExecuteVpnStart.execute()
  2243. const dtStopVpn = () => DtExecuteVpnStop.execute()
  2245. const dtUpdate = () => DtStartAppUpdate.execute()
  2247. const dtAllConfigs = () => DtGetConfigs.execute()
  2248. const dtSetConfig = (id) => DtSetConfig.execute(id)
  2249. const dtGetDefaultConfig = () => DtGetDefaultConfig.execute()
  2251. const dtGetUsername = () => DtUsername.get()
  2252. const dtSetUsername = (username) => DtUsername.set(username)
  2253. const dtGetPassword = () => DtPassword.get()
  2254. const dtSetPassword = (password) => DtPassword.set(password)
  2256. const dtApnConfig = () => DtStartApnActivity.execute()
  2257. const dtBatteryOptimization = () => DtIgnoreBatteryOptimizations.execute()
  2258. const dtCleanApp = () => DtCleanApp.execute()
  2260. const dtGetNetworkName = () => Android.getNetworkName()
  2261. const dtGetNetworkLocalIp = () => Android.getLocalIP()
  2262. </script>
  2264. <!-- FUNÇÕES PARA O APP -->
  2265. <script>
  2266. const dtVpnStateListener = (state) => {
  2267. const stateVpn = vpnState(state)
  2269. vpnStatus.html(stateVpn)
  2270. }
  2272. const dtOnNewLogListener = () => writeModalLogger()
  2274. const dtConfigClickListener = () => {
  2275. const user = dtGetUsername()
  2276. const pass = dtGetPassword()
  2277. const value = areaCarrierSelector()
  2279. CarrierTextValue.html(value)
  2281. inputUser.attr({ placeholder: inputUserPlaceholder(), value: inputUserValue() })
  2282. inputPassword.attr({ placeholder: inputPasswordPlaceholder(), value: inputPasswordValue() })
  2283. }
  2285. const dtCheckUserModelListener = (model) => {
  2286. dataCheckuser = model
  2288. writeMainCheckuser(dataCheckuser)
  2289. writeProfileCheckuser(dataCheckuser)
  2291. loadingContainer.toggleClass('show')
  2293. mainCheckuser.addClass('show')
  2294. }
  2296. const dtCheckUserStartedListener = () => {
  2297. loadingContainer.addClass('show')
  2298. }
  2300. const dtMessageErrorListener = (model) => writeModalError(model)
  2301. </script>
  2303. <!-- HELPERS -->
  2304. <script>
  2305. const createSvgIcon = (iconPath, Class = '') => {
  2306. const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  2307. svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
  2308. svg.setAttribute('width', '16')
  2309. svg.setAttribute('height', '16')
  2310. svg.setAttribute('fill', 'currentColor')
  2311. svg.setAttribute('viewBox', '0 0 16 16')
  2312. svg.setAttribute('class', Class)
  2314. const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
  2315. path.setAttribute('d', iconPath)
  2317. svg.appendChild(path)
  2318. return svg
  2319. }
  2321. const createListItem = (iconPath, Class = '', text) => {
  2322. const li = document.createElement('li')
  2323. const svg = createSvgIcon(iconPath, Class)
  2324. const span = document.createElement('span')
  2325. span.setAttribute('class', Class)
  2326. span.innerHTML = text
  2327. li.appendChild(svg)
  2328. li.appendChild(span)
  2329. return li
  2330. }
  2331. </script>
  2333. <!-- FUNÇÕES DO LAYOUT -->
  2334. <script>
  2335. const vpnState = (state) => {
  2336. const stateLabel = state || dtVpnState()
  2338. switch (stateLabel) {
  2339. case 'DISCONNECTED':
  2340. writeStartStopVpnButton(dtTranslateText('LBL_BTN_START'))
  2341. return disconnected()
  2342. case 'CONNECTING':
  2343. writeStartStopVpnButton(dtTranslateText('LBL_BTN_STOP'))
  2344. return connecting()
  2345. case 'CONNECTED':
  2346. writeStartStopVpnButton(dtTranslateText('LBL_BTN_STOP'))
  2347. return connected()
  2348. case 'STOPPING':
  2349. writeStartStopVpnButton(dtTranslateText('LBL_BTN_STOPPING'))
  2350. return stopping()
  2351. case 'NO_NETWORK':
  2352. writeStartStopVpnButton(dtTranslateText('LBL_BTN_STOP'))
  2353. return noNetwork()
  2354. case 'AUTH':
  2355. writeStartStopVpnButton(dtTranslateText('LBL_BTN_STOP'))
  2356. return auth()
  2357. case 'AUTH_FAILED':
  2358. writeStartStopVpnButton(dtTranslateText('LBL_BTN_STOP'))
  2359. return authFailed()
  2360. default:
  2361. return 'Não foi possível obter o status da conexão'
  2362. }
  2363. }
  2365. const writeNetworkStatus = () => {
  2366. let span = '<span>Localizando rede...</span>'
  2368. setInterval(() => {
  2369. if (dtGetNetworkName() && dtGetNetworkLocalIp()) {
  2370. const carrierName = `${dtGetNetworkName()}`
  2371. const localIP = `${dtGetNetworkLocalIp()}`
  2373. span = `<span>${carrierName}: ${localIP}</span>`
  2375. networkStatus.html(span)
  2376. } else {
  2377. span = `<span>Não foi possível carregar informações da rede</span>`
  2378. }
  2379. }, 500)
  2381. return span
  2382. }
  2384. const allConfigs = () => {
  2385. const ListContainer = document.querySelector('section.list-container')
  2386. ListContainer.innerHTML = ''
  2388. const configs = JSON.parse(dtAllConfigs())
  2389. configs.sort((a, b) => a.sorter - b.sorter)
  2390. configs.forEach((item) => item.items.sort((a, b) => a.sorter - b.sorter))
  2392. configs.forEach((category) => {
  2393. const defaultColor = category.color
  2394. const categoryColor = `#${defaultColor.substr(3)}${defaultColor.substr(1, 2)}`
  2396. document.documentElement.style.setProperty(
  2397. '--cor-de-fundo-do-header-da-categoria',
  2398. categoryColor
  2399. )
  2400. document.documentElement.style.setProperty(
  2401. '--cor-de-fundo-do-item-da-configuracao',
  2402. categoryColor
  2403. )
  2405. const div = document.createElement('div')
  2406. const header = document.createElement('header')
  2407. const h1 = document.createElement('h1')
  2408. const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  2409. const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
  2410. const ul = document.createElement('ul')
  2412. div.classList.add('category')
  2413. ul.classList.add('configs')
  2415. h1.textContent = category.name
  2417. svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
  2418. svg.setAttribute('width', '16')
  2419. svg.setAttribute('height', '16')
  2420. svg.setAttribute('fill', 'currentColor')
  2421. svg.setAttribute('class', 'bi bi-caret-right')
  2422. svg.setAttribute('viewBox', '0 0 16 16')
  2424. path.setAttribute(
  2425. 'd',
  2426. 'M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753'
  2427. )
  2429. svg.appendChild(path)
  2430. header.appendChild(h1)
  2431. header.appendChild(svg)
  2432. div.appendChild(header)
  2434. category.items.forEach((item) => {
  2435. const li = document.createElement('li')
  2436. const img = document.createElement('img')
  2437. const h1Item = document.createElement('h1')
  2438. const pItem = document.createElement('p')
  2439. const pMode = document.createElement('p')
  2440. const divLogo = document.createElement('div')
  2441. const divDescription = document.createElement('div')
  2442. const divMode = document.createElement('div')
  2444. divLogo.classList.add('logo')
  2445. divDescription.classList.add('description')
  2446. divMode.classList.add('mode')
  2448. h1Item.textContent = item.name
  2449. pItem.textContent = item.description
  2450. pMode.textContent = item.mode
  2452. img.setAttribute('src', item.icon)
  2454. divLogo.appendChild(img)
  2455. divDescription.appendChild(h1Item)
  2456. divDescription.appendChild(pItem)
  2457. divMode.appendChild(pMode)
  2459. li.appendChild(divLogo)
  2460. li.appendChild(divDescription)
  2461. li.appendChild(divMode)
  2463. ul.appendChild(li)
  2464. div.appendChild(ul)
  2466. li.addEventListener('click', () => {
  2467. dtSetConfig(item.id)
  2468. listOfCarriers.toggleClass('active')
  2469. })
  2470. })
  2472. header.addEventListener('click', () => {
  2473. if (ul.offsetHeight <= 0) {
  2474. ul.style.maxHeight = `${ul.scrollHeight}px`
  2475. svg.style.transform = 'rotate(90deg)'
  2476. } else {
  2477. ul.style.maxHeight = '0px'
  2478. svg.style.transform = 'rotate(0deg)'
  2479. }
  2480. })
  2482. ListContainer.appendChild(div)
  2483. })
  2484. }
  2486. const showPassword = () => {
  2487. const inputPassword = document.querySelector('#inputPassword')
  2489. if (inputPassword.type === 'password') {
  2490. inputPassword.type = 'text'
  2491. eyeHidden.toggleClass('.eye-none').style({ display: 'none' })
  2492. eyeShow.style({ display: 'block' })
  2493. } else {
  2494. inputPassword.type = 'password'
  2495. eyeShow.toggleClass('.eye-none').style({ display: 'none' })
  2496. eyeHidden.toggleClass('.eye-none').style({ display: 'block' })
  2497. }
  2498. }
  2500. const startStopVpn = () => {
  2501. const state = dtVpnState()
  2503. state === 'CONNECTED' ? dtStopVpn() : dtStartVpn()
  2504. }
  2506. const writeStartStopVpnButton = (status) => {
  2507. buttonStartStopVpnValue.html(status)
  2508. }
  2510. const writeMainCheckuser = (model) => {
  2511. const data = JSON.parse(model)
  2513. const ul = document.querySelector(
  2514. 'section.main-checkuser section.container-content-checkuser ul'
  2515. )
  2517. const username = createListItem(
  2518. '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',
  2519. '',
  2520. `NOME DE USUÁRIO: ${data.username}`
  2521. )
  2523. const expiration = createListItem(
  2524. 'M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/><path d="M12 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-5 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm2-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-5 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
  2525. '',
  2526. `EXPIRAÇÃO: ${data.expiration_date}`
  2527. )
  2529. const remainingDays = createListItem(
  2530. 'M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z',
  2531. '',
  2532. `DIAS RESTANTES: ${data.expiration_days}`
  2533. )
  2535. const connecteds = createListItem(
  2536. 'M11 1H5a1 1 0 0 0-1 1v6a.5.5 0 0 1-1 0V2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a.5.5 0 0 1-1 0V2a1 1 0 0 0-1-1Zm1 13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a.5.5 0 0 0-1 0v2a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2a.5.5 0 0 0-1 0v2ZM1.713 7.954a.5.5 0 1 0-.419-.908c-.347.16-.654.348-.882.57C.184 7.842 0 8.139 0 8.5c0 .546.408.94.823 1.201.44.278 1.043.51 1.745.696C3.978 10.773 5.898 11 8 11c.099 0 .197 0 .294-.002l-1.148 1.148a.5.5 0 0 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 1 0-.708.708l1.145 1.144L8 10c-2.04 0-3.87-.221-5.174-.569-.656-.175-1.151-.374-1.47-.575C1.012 8.639 1 8.506 1 8.5c0-.003 0-.059.112-.17.115-.112.31-.242.6-.376Zm12.993-.908a.5.5 0 0 0-.419.908c.292.134.486.264.6.377.113.11.113.166.113.169 0 .003 0 .065-.13.187-.132.122-.352.26-.677.4-.645.28-1.596.523-2.763.687a.5.5 0 0 0 .14.99c1.212-.17 2.26-.43 3.02-.758.38-.164.713-.357.96-.587.246-.229.45-.537.45-.919 0-.362-.184-.66-.412-.883-.228-.223-.535-.411-.882-.571ZM7.5 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1Z',
  2537. '',
  2538. `CONECTADOS: ${data.count_connections}/${data.limit_connections}`
  2539. )
  2541. ul.innerHTML =
  2542. username.outerHTML + expiration.outerHTML + remainingDays.outerHTML + connecteds.outerHTML
  2543. }
  2545. const showProfile = (model) => {
  2546. hiddenAll()
  2547. const data = model
  2549. const main = document.querySelector('section.profile-checkuser')
  2550. const zIndexMain = window.getComputedStyle(main).getPropertyValue('z-index')
  2552. if (data !== undefined) {
  2553. notViewUser.removeClass('show')
  2554. viewUser.addClass('show')
  2555. mainProfile.addClass('show')
  2556. } else {
  2557. viewUser.removeClass('show')
  2558. notViewUser.addClass('show')
  2559. mainProfile.addClass('show')
  2560. }
  2561. }
  2562. const hiddenProfile = () => {
  2563. mainProfile.removeClass('show')
  2564. mainProfile.style({ 'z-index': 0 })
  2565. }
  2567. const writeProfileCheckuser = (model) => {
  2568. const data = JSON.parse(model)
  2570. const username = createListItem(
  2571. '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',
  2572. '',
  2573. `NOME DE USUÁRIO: ${data.username}`
  2574. )
  2576. const expiration = createListItem(
  2577. 'M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/><path d="M12 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-5 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm2-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-5 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
  2578. 'even',
  2579. `EXPIRAÇÃO: ${data.expiration_date}`
  2580. )
  2582. const remainingDays = createListItem(
  2583. 'M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z',
  2584. '',
  2585. `DIAS RESTANTES: ${data.expiration_days}`
  2586. )
  2588. const connecteds = createListItem(
  2589. 'M11 1H5a1 1 0 0 0-1 1v6a.5.5 0 0 1-1 0V2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a.5.5 0 0 1-1 0V2a1 1 0 0 0-1-1Zm1 13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a.5.5 0 0 0-1 0v2a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2a.5.5 0 0 0-1 0v2ZM1.713 7.954a.5.5 0 1 0-.419-.908c-.347.16-.654.348-.882.57C.184 7.842 0 8.139 0 8.5c0 .546.408.94.823 1.201.44.278 1.043.51 1.745.696C3.978 10.773 5.898 11 8 11c.099 0 .197 0 .294-.002l-1.148 1.148a.5.5 0 0 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 1 0-.708.708l1.145 1.144L8 10c-2.04 0-3.87-.221-5.174-.569-.656-.175-1.151-.374-1.47-.575C1.012 8.639 1 8.506 1 8.5c0-.003 0-.059.112-.17.115-.112.31-.242.6-.376Zm12.993-.908a.5.5 0 0 0-.419.908c.292.134.486.264.6.377.113.11.113.166.113.169 0 .003 0 .065-.13.187-.132.122-.352.26-.677.4-.645.28-1.596.523-2.763.687a.5.5 0 0 0 .14.99c1.212-.17 2.26-.43 3.02-.758.38-.164.713-.357.96-.587.246-.229.45-.537.45-.919 0-.362-.184-.66-.412-.883-.228-.223-.535-.411-.882-.571ZM7.5 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1Z',
  2590. 'even',
  2591. `CONECTADOS: ${data.count_connections}/${data.limit_connections}`
  2592. )
  2594. viewUser.html(
  2595. username.outerHTML + expiration.outerHTML + remainingDays.outerHTML + connecteds.outerHTML
  2596. )
  2597. }
  2599. const hiddenLoadContainer = () => {
  2600. loadingContainer.removeClass('show')
  2601. }
  2603. const showMainTools = () => {
  2604. hiddenAll()
  2605. MainTools.style({ 'z-index': 1 })
  2606. MainTools.addClass('show')
  2607. }
  2608. const hiddenMainTools = () => {
  2609. MainTools.style({ 'z-index': 0 })
  2610. MainTools.removeClass('show')
  2611. }
  2613. const showModalSpeedtest = () => {
  2614. ModalSpeedtest.addClass('show')
  2615. IframeModalSpeedtest.attr({ src: 'https://fiber.google.com/speedtest/' })
  2616. }
  2617. const hiddenModalSpeedtest = () => {
  2618. ModalSpeedtest.removeClass('show')
  2619. IframeModalSpeedtest.attr({ src: '' })
  2620. }
  2622. const writeModalError = (model) => {
  2623. const data = JSON.parse(model)
  2625. const h1 = `<h1>${data.title}</h1>`
  2626. const p = `<p>${data.content}</p>`
  2628. ContentModalError.html(h1 + p)
  2630. hiddenAll()
  2631. showModalError()
  2632. }
  2633. const showModalError = () => {
  2634. ModalError.addClass('show')
  2635. }
  2636. const hiddenModalError = () => {
  2637. ModalError.removeClass('show')
  2638. }
  2640. const writeModalLogger = () => {
  2641. const data = JSON.parse(dtGetLogs())
  2642. const p = document.querySelector('section.modal-logs p')
  2644. let content = ''
  2646. data.forEach((item) => {
  2647. content += `${Object.keys(item)} ${item[Object.keys(item)]} <br>`
  2648. })
  2650. ModalLoggerContent.html(content)
  2651. p.scrollTop = p.scrollHeight
  2653. return content
  2654. }
  2655. const showModalLogger = () => {
  2656. ModalLogger.addClass('show')
  2657. }
  2658. const hiddenModalRegister = () => {
  2659. ModalLogger.removeClass('show')
  2660. }
  2662. const showRenew = () => {
  2663. hiddenAll()
  2664. MainRenew.addClass('show')
  2665. }
  2666. const hiddenRenew = () => {
  2667. MainRenew.removeClass('show')
  2668. }
  2670. const hiddenAll = () => {
  2671. hiddenProfile()
  2672. hiddenMainTools()
  2673. hiddenModalSpeedtest()
  2674. hiddenModalError()
  2675. hiddenModalRegister()
  2676. hiddenRenew()
  2677. }
  2678. </script>
  2680. <!-- ESTADOS DE CONEXÃO -->
  2681. <script>
  2682. const disconnected = () => {
  2683. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-outlet" viewBox="0 0 16 16"><path d="M3.34 2.994c.275-.338.68-.494 1.074-.494h7.172c.393 0 .798.156 1.074.494.578.708 1.84 2.534 1.84 5.006 0 2.472-1.262 4.297-1.84 5.006-.276.338-.68.494-1.074.494H4.414c-.394 0-.799-.156-1.074-.494C2.762 12.297 1.5 10.472 1.5 8c0-2.472 1.262-4.297 1.84-5.006zm1.074.506a.376.376 0 0 0-.299.126C3.599 4.259 2.5 5.863 2.5 8c0 2.137 1.099 3.74 1.615 4.374.06.073.163.126.3.126h7.17c.137 0 .24-.053.3-.126.516-.633 1.615-2.237 1.615-4.374 0-2.137-1.099-3.74-1.615-4.374a.376.376 0 0 0-.3-.126h-7.17z"/><path d="M6 5.5a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zM7 10v1h2v-1a1 1 0 0 0-2 0z"/></svg>`
  2684. const text = `<span>${dtTranslateText('LBL_STATE_DISCONNECTED')}</span>`
  2686. return icon + text
  2687. }
  2689. const connecting = () => {
  2690. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plug" viewBox="0 0 16 16"><path d="M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0zM5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4H5z"/></svg>`
  2691. const text = `<span>${dtTranslateText('LBL_STATE_CONNECTING')}</span>`
  2693. return icon + text
  2694. }
  2696. const connected = () => {
  2697. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plugin" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/></svg>`
  2698. const text = `<span>${dtTranslateText('LBL_STATE_CONNECTED')}</span>`
  2700. return icon + text
  2701. }
  2703. const stopping = () => {
  2704. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stop" viewBox="0 0 16 16"><path d="M3.5 5A1.5 1.5 0 0 1 5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5zM5 4.5a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5V5a.5.5 0 0 0-.5-.5H5z"/></svg>`
  2705. const text = `<span>${dtTranslateText('LBL_STATE_STOPPING')}</span>`
  2707. return icon + text
  2708. }
  2710. const noNetwork = () => {
  2711. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wifi-off" viewBox="0 0 16 16"><path d="M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z"/></svg>`
  2712. const text = `<span>${dtTranslateText('LBL_STATE_NO_NETWORK')}</span>`
  2714. return icon + text
  2715. }
  2717. const auth = () => {
  2718. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-lock" viewBox="0 0 16 16"><path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 5.996V14H3s-1 0-1-1 1-4 6-4c.564 0 1.077.038 1.544.107a4.524 4.524 0 0 0-.803.918A10.46 10.46 0 0 0 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h5ZM9 13a1 1 0 0 1 1-1v-1a2 2 0 1 1 4 0v1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2Zm3-3a1 1 0 0 0-1 1v1h2v-1a1 1 0 0 0-1-1Z"/></svg>`
  2719. const text = `<span>${dtTranslateText('LBL_STATE_AUTH')}</span>`
  2721. return icon + text
  2722. }
  2724. const authFailed = () => {
  2725. const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-slash" viewBox="0 0 16 16"><path d="M13.879 10.414a2.501 2.501 0 0 0-3.465 3.465l3.465-3.465Zm.707.707-3.465 3.465a2.501 2.501 0 0 0 3.465-3.465Zm-4.56-1.096a3.5 3.5 0 1 1 4.949 4.95 3.5 3.5 0 0 1-4.95-4.95ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm.256 7a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"/></svg>`
  2726. const text = `<span>${dtTranslateText('LBL_STATE_AUTH_FAILED')}</span>`
  2728. return icon + text
  2729. }
  2730. </script>
  2732. <!-- VALOR DE EXIBIÇÃO DO CAMPO DE SELECIONAR OPERADORA -->
  2733. <script>
  2734. const areaCarrierSelector = () => {
  2735. const data = dtGetDefaultConfig()
  2737. if (data !== undefined) {
  2738. return JSON.parse(data).name
  2739. } else {
  2740. return dtTranslateText('LBL_CHOOSE_CONFIG')
  2741. }
  2742. }
  2743. </script>
  2745. <!-- VALOR DE EXIBIÇÃO DO INPUT USUÁRIO DO USUÁRIO -->
  2746. <script>
  2747. const inputUserPlaceholder = () => dtTranslateText('LBL_USERNAME')
  2748. const inputUserValue = () => {
  2749. if (dtGetUsername()) {
  2750. return dtGetUsername()
  2751. } else {
  2752. return ''
  2753. }
  2754. }
  2755. </script>
  2757. <!-- VALOR DE EXIBIÇÃO DO INPUT DA SENHA DO USUÁRIO -->
  2758. <script>
  2759. const inputPasswordPlaceholder = () => dtTranslateText('LBL_PASSWORD')
  2760. const inputPasswordValue = () => {
  2761. if (dtGetPassword()) {
  2762. return dtGetPassword()
  2763. } else {
  2764. return ''
  2765. }
  2766. }
  2767. </script>
  2769. <!-- DOM WRAPPER -->
  2770. <script>
  2771. const Dom = (selector) => {
  2772. const _elements = document.querySelectorAll(selector)
  2774. const wrapper = {
  2775. on(listeners) {
  2776. for (const [event, listener] of Object.entries(listeners)) {
  2777. _elements.forEach((element) => {
  2778. element.addEventListener(event, listener)
  2779. })
  2780. }
  2782. return wrapper
  2783. },
  2784. addClass: (...tokens) => {
  2785. _elements.forEach((element) => {
  2786. element.classList.add(...tokens)
  2787. })
  2789. return wrapper
  2790. },
  2791. removeClass: (...tokens) => {
  2792. _elements.forEach((element) => {
  2793. element.classList.remove(...tokens)
  2794. })
  2796. return wrapper
  2797. },
  2798. toggleClass: (token, force) => {
  2799. _elements.forEach((element) => {
  2800. element.classList.toggle(token, force)
  2801. })
  2803. return wrapper
  2804. },
  2805. style(styles) {
  2806. for (const [property, value] of Object.entries(styles)) {
  2807. console.log(value)
  2808. _elements.forEach((element) => {
  2809. element.style[property] = value
  2810. })
  2811. }
  2813. return wrapper
  2814. },
  2815. attr(attrs) {
  2816. for (const [name, value] of Object.entries(attrs)) {
  2817. _elements.forEach((element) => element.setAttribute(name, value))
  2818. }
  2820. return wrapper
  2821. },
  2822. html(value) {
  2823. _elements.forEach((element) => (element.innerHTML = value))
  2824. return wrapper
  2825. },
  2826. }
  2828. return wrapper
  2829. }
  2830. </script>
  2832. <!-- VÁRIAVIES -->
  2833. <script>
  2834. const main = Dom('main')
  2836. const vpnStatus = Dom('section.vpnStatus')
  2838. const networkStatus = Dom('section.local-ip')
  2840. const carrierSelector = Dom('div.carrierSelector')
  2841. const listOfCarriers = Dom('section.listOfCarriers')
  2842. const closeModalCarriers = Dom('#close-modal-configs')
  2843. const CarrierCategoryContainer = Dom('section.list-container')
  2844. const CarrierTextValue = Dom('div.carrierSelector span')
  2846. const buttonControl = Dom('section.controls')
  2847. const refreshButton = Dom('#refresh-button')
  2848. const renewButton = Dom('#renew')
  2849. const backToHome = Dom('#backToHome')
  2850. const ToolsButton = Dom('#utilitys')
  2851. const profileButton = Dom('#profile-button')
  2853. const inputUser = Dom('#inputUser')
  2854. const inputPassword = Dom('#inputPassword')
  2856. const buttonStartStopVpn = Dom('#startStopVpn')
  2857. const buttonLogs = Dom('#buttonLogs')
  2858. const buttonStartStopVpnValue = Dom('#startStopVpnButtonValue')
  2860. const mainCheckuser = Dom('section.main-checkuser')
  2861. const mainCheckuserClose = Dom('section.main-checkuser header svg')
  2862. const mainCheckuserContent = Dom('section.main-checkuser section.container-content-checkuser')
  2864. const loadingContainer = Dom('section.loading')
  2865. const loadingContainerClose = Dom('section.loading header svg')
  2867. const mainProfile = Dom('section.profile-checkuser')
  2868. const notViewUser = Dom('#not-profile-user')
  2869. const viewUser = Dom('#list-profile')
  2871. const MainTools = Dom('section.tools')
  2872. const ConfigApnButton = Dom('#config-apn')
  2873. const BatteryOptimizeButton = Dom('#battery-optimization')
  2874. const SpeedtestButton = Dom('#speedtest')
  2875. const ClearDataAppButton = Dom('#clean-data-app')
  2877. const MainRenew = Dom('section.renew-window')
  2879. const ModalSpeedtest = Dom('section.modal-speedtest')
  2880. const CloseModalSpeedtest = Dom('section.modal-speedtest header svg')
  2881. const IframeModalSpeedtest = Dom('section.modal-speedtest section iframe')
  2883. const ModalError = Dom('section.modal-error-alert')
  2884. const CloseModalError = Dom('section.modal-error-alert header svg')
  2885. const ContentModalError = Dom('section.modal-error-alert section')
  2887. const ModalLogger = Dom('section.modal-logs')
  2888. const CloseModalLogger = Dom('#hidden-modal-logs')
  2889. const ModalLoggerContent = Dom('section.modal-logs p')
  2890. const CleanLoggerContent = Dom('#clean-data-logs')
  2892. const eyeHidden = Dom('svg.eye-hidden')
  2893. const eyeShow = Dom('svg.eye-show')
  2894. </script>
  2896. <!-- AÇÕES -->
  2897. <script>
  2898. main.style({ padding: `${dtStatusBarHeight() + 100}px 0px 0px 0px` })
  2899. mainProfile.style({
  2900. padding: `${dtStatusBarHeight() + 10}px 0px ${dtNavHeight() + 90}px 0px`,
  2901. })
  2903. MainTools.style({ padding: `${dtStatusBarHeight() + 10}px 0px ${dtNavHeight() + 90}px 0px` })
  2905. MainRenew.style({ padding: `${dtStatusBarHeight() + 10}px 0px ${dtNavHeight() + 90}px 0px` })
  2907. ModalLogger.style({
  2908. top: `${dtStatusBarHeight() + 95}px`,
  2909. bottom: `${dtNavHeight() + 95}px`,
  2910. })
  2912. vpnStatus.html(vpnState())
  2913. networkStatus.html(writeNetworkStatus())
  2915. carrierSelector.on({
  2916. click: () => {
  2917. allConfigs()
  2918. listOfCarriers.toggleClass('active')
  2919. },
  2920. })
  2921. closeModalCarriers.on({ click: () => listOfCarriers.toggleClass('active') })
  2922. CarrierTextValue.html(areaCarrierSelector())
  2924. inputUser.on({ input: (e) => dtSetUsername(e.target.value) })
  2925. inputPassword.on({ input: (e) => dtSetPassword(e.target.value) })
  2926. eyeHidden.on({ click: () => showPassword() })
  2927. eyeShow.on({ click: () => showPassword() })
  2929. inputUser.attr({ placeholder: inputUserPlaceholder(), value: inputUserValue() })
  2930. inputPassword.attr({ placeholder: inputPasswordPlaceholder(), value: inputPasswordValue() })
  2932. buttonControl.style({ bottom: `${dtNavHeight() + 10}px` })
  2933. refreshButton.on({ click: () => dtUpdate() })
  2934. renewButton.on({ click: () => showRenew() })
  2935. backToHome.on({
  2936. click: () => {
  2937. hiddenAll()
  2938. },
  2939. })
  2940. ToolsButton.on({ click: () => showMainTools() })
  2941. profileButton.on({ click: () => showProfile(dataCheckuser) })
  2943. buttonStartStopVpn.on({ click: () => startStopVpn() })
  2944. buttonLogs.on({ click: () => showModalLogger() })
  2946. loadingContainerClose.on({ click: () => hiddenLoadContainer() })
  2948. mainCheckuserClose.on({ click: () => mainCheckuser.toggleClass('show') })
  2950. ConfigApnButton.on({ click: () => dtApnConfig() })
  2951. BatteryOptimizeButton.on({ click: () => dtBatteryOptimization() })
  2952. SpeedtestButton.on({ click: () => showModalSpeedtest() })
  2953. CloseModalSpeedtest.on({ click: () => hiddenModalSpeedtest() })
  2954. ClearDataAppButton.on({ click: () => dtCleanApp() })
  2956. CloseModalError.on({ click: () => hiddenModalError() })
  2958. ModalLoggerContent.html(writeModalLogger())
  2959. CleanLoggerContent.on({ click: () => dtClearLogs() })
  2960. CloseModalLogger.on({ click: () => hiddenModalRegister() })
  2961. </script>
  2962. </body>
  2963. </html>
comments powered by Disqus