<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<title>@blindervpn</title>
<div id="player-container">
<video id="player" controls playsinline></video>
</div>
<!-- Lista de canais -->
<div id="lista-canais"></div>
<!-- FUNĂĂES DO APP -->
<style>
body {
overflow: hidden; /* Impede a rolagem do corpo da pĂĄgina */
}
.canal {
display: inline-block; /* Exibe os canais lado a lado */
text-align: center; /* Centraliza o texto e a imagem */
margin: 10px; /* Espaçamento ao redor dos canais */
margin-left: 20px; /* Aumenta a margem esquerda para empurrar para a direita */
}
.canal img {
width: 100px; /* Largura da logo */
height: auto; /* Altura automåtica para manter a proporção */
cursor: pointer; /* Muda o cursor para indicar que Ă© clicĂĄvel */
}
/* Estilos para o nome do canal */
.nome-canal {
display: block; /* Exibe o nome em uma nova linha */
margin-top: 5px; /* Espaçamento acima do nome */
word-wrap: break-word; /* Quebra a linha se o nome do canal for muito longo */
max-width: 100px; /* Define a largura mĂĄxima para o nome do canal */
}
/* Estilos para o contĂȘiner fixo do player */
#player-container {
position: fixed; /* Fixa o contĂȘiner na tela */
top: 40px; /* DistĂąncia do topo da tela */
left: 0; /* Alinha o contĂȘiner Ă esquerda da tela */
right: 0; /* Alinha o contĂȘiner Ă direita da tela */
z-index: 1000; /* Garante que o contĂȘiner fique acima de outros elementos */
display: none; /* Inicialmente oculto */
/* Adiciona estilos para tela cheia */
:fullscreen {
width: 100%;
height: 100%;
top: 0;
background-color: black;
}
}
#player {
/* Remove a propriedade de aspect-ratio para permitir o ajuste completo Ă tela */
width: 100vw; /* Ajusta a largura para ocupar 100% da largura da tela */
height: 56.25vw; /* Ajusta a altura para manter a proporção de 16:9 */
max-height: 100vh; /* Garante que a altura nĂŁo ultrapasse a altura da tela */
object-fit: cover; /* Garante que o vĂdeo cubra toda a ĂĄrea disponĂvel sem barras pretas */
}
/* Estilos para o vĂdeo em tela cheia apĂłs a rotação */
:fullscreen.rotacionar-video #player {
width: 100vh; /* Ajusta a largura para a altura da tela */
height: 100vw; /* Ajusta a altura para a largura da tela */
object-fit: cover; /* Continua a cobrir toda a ĂĄrea disponĂvel */
transform: rotate(90deg) translateX(-50%);
transform-origin: center center; /* Define a origem da transformação para o centro */
}
.rotacionar-video {
transform: rotate(90deg);
}
/* Estilos para o contĂȘiner da lista de canais */
#lista-canais {
margin-top: 260px;
margin-bottom: 400px; /* Espaço de 80px na parte inferior */
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999;
background-color: #009688;
overflow-y: auto;
max-height: calc(100% - 380px); /* Ajuste a altura måxima para considerar o espaço inferior */
}
</style>
<style>
.gif-container {
display: flex;
justify-content: center;
align-items: start;
height: 20px;
margin-top: 50px;
}
.gif-container img {
max-width: 30%;
height: auto;
}
</style>
<style>
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
--space-status-bar: 10px;
--space-nav-bar: 33px;
--default-background-color: linear-gradient(135deg,
#9f2fff,
#0bb1d3,
#7f47cb,
#00ffff,
#7a2cec,
#4adfdf,
#76fcfc,
#7f47cb,
#9f2fff,
#0bb1d3,
#7f47cb,
#00ffff,
#7a2cec,
#4adfdf);
--connected-background-color: linear-gradient(135deg,
#05b76d,
#01ac66,
#008e52,
#30704b,
#00ff00,
#29ab87,
#00a86b,
#2e8b57,
#3f7046,
#3f7,
#008e52,
#30704b,
#00ff00,
#29ab87,
#00a86b,
#2e8b57,
#3f7046,
#3f7);
--connecting-background-color: linear-gradient(135deg,
#ffc823,
#f4b007,
#fff14a,
#eaa700,
#fc9200,
#ffcb05,
#feb308,
#ecc218,
#ffc823,
#f4b007,
#fff14a,
#eaa700,
#fc9200,
#ffcb05,
#feb308,
#ecc218);
--error-background-color: linear-gradient(135deg,
#e20807,
#d40000,
#9a001a,
#65100d,
#e20807,
#d40000,
#9a001a,
#65100d,
#e20807,
#d40000,
#9a001a,
#65100d,
#000000,
#ff0000,
#9a001a,
#e20807,
#65100d);
}
@keyframes ButtonStartVpnAnimation {
0% {
background-position: 0;
}
100% {
background-position: 300%;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background: red;
padding-bottom: var(--space-nav-bar);
}
main {
width: auto;
height: 89%;
display: flex;
position: relative;
padding: 0 0 0 0;
overflow: hidden;
}
section.home {
width: 100vw;
min-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transform: translateX(100%);
transition: opacity 0.3s ease, transform 0.3s ease;
overflow: hidden;
}
section.home header {
width: 100%;
height: 20%;
max-height: 135px;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-status-bar) 10px 0 10px;
background-image: url();
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
section.home header img {
width: 80%;
}
section.container-carrier-selector-button {
width: 100%;
height: 10%;
max-height: 60px;
display: flex;
justify-content: center;
align-items: center;
margin: 10% 0 0 0;
}
section.container-carrier-selector-button button {
width: 90%;
height: 65%;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
position: relative;
border: 0px;
border-radius: 20px;
background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
background-size: 300%;
animation: 8s infinite ButtonStartVpnAnimation;
}
section.container-carrier-selector-button button svg {
color: #ffffff;
}
section.container-carrier-selector-button button span {
color: #ffffff;
font-size: 12px;
}
section.container-button-start-stop-vpn {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
margin: 20% 0 0 0;
}
section.container-button-start-stop-vpn button {
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: 0;
border-radius: 50%;
background: linear-gradient(to top left, #0bb1d3, #9f2fff 85%);
}
section.container-button-start-stop-vpn button svg {
width: 50%;
height: 50%;
color: #ffffff;
}
section.container-button-start-stop-vpn button::before,
section.container-button-start-stop-vpn button::after {
width: calc(100% + 10px);
height: calc(100% + 10px);
content: "";
position: absolute;
z-index: -1;
border-radius: 50%;
background: var(--default-background-color);
background-size: 300%;
animation: 8s infinite ButtonStartVpnAnimation;
}
section.container-button-start-stop-vpn button::after {
filter: blur(30px);
}
section.container-status-connection,
section.container-version,
section.container-local-ip {
width: 100%;
height: auto;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
margin: auto 0 auto 0;
}
section.container-status-connection.active,
section.container-version.active,
section.container-local-ip.active {
display: flex;
}
section.container-status-connection button,
section.container-version button,
section.container-local-ip button {
padding: 2.5% 10%;
border: 0;
border-radius: 60px;
background: transparent;
background-size: 300%;
animation: 8s infinite ButtonStartVpnAnimation;
}
section.container-status-connection button span,
section.container-version button span,
section.container-local-ip button span {
color: #ffffff;
}
@media only screen and (max-width: 375px) {
section.container-button-start-stop-vpn button {
width: 110px;
height: 110px;
}
section.container-status-connection {
margin-top: 10%;
}
}
@media only screen and (max-width: 280px) {
section.container-button-start-stop-vpn {
margin-top: 15%;
}
section.container-button-start-stop-vpn button {
width: 90px;
height: 90px;
}
section.container-status-connection {
margin-top: 20% !important;
}
}
@media only screen and (max-width: 250px) {
section.container-button-start-stop-vpn {
margin-top: 5%;
}
section.container-button-start-stop-vpn button {
width: 90px;
height: 90px;
}
section.container-status-connection {
margin-top: 10% !important;
}
}
section.profile,
section.carrier-list,
section.container-tools,
section.container-error {
width: 100%;
min-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
position: absolute;
top: 0;
left: 0;
padding: var(--space-status-bar) 0 0 0;
opacity: 0;
transform: translateX(100%);
transition: opacity 0.3s ease, transform 0.3s ease;
}
section.carrier-list {
height: 97%;
}
section.container-tools {
gap: 1px;
}
section.loading,
section.checkuser,
section.clean-data-app,
section.hotspot-container,
section.terms-container,
section.logs-container,
section.renew-alert {
width: 100%;
min-width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
z-index: 99;
padding-top: 15%;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
transform: scale(0);
transform-origin: center;
transition: opacity 0.3s ease, transform 0.3s ease;
}
section.hotspot-container {
padding-top: 0;
}
section.loading.active,
section.checkuser.active,
section.clean-data-app.active,
section.hotspot-container.active,
section.terms-container.active,
section.logs-container.active,
section.renew-alert.active {
opacity: 1;
transform: scale(1);
}
section.loading section,
section.checkuser section,
section.clean-data-app section,
section.hotspot-container section,
section.terms-container section,
section.logs-container section,
section.renew-alert section {
width: 80%;
height: auto;
min-height: 50%;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
background: red;
overflow: hidden;
}
section.renew-alert section {
position: relative;
overflow: initial;
}
section.renew-alert.active section::before,
section.renew-alert.active section::after {
width: calc(100% + 2px);
height: calc(100% + 2px);
content: "";
position: absolute;
left: -1px;
right: 0;
bottom: -1px;
z-index: -1;
border-radius: 10px;
background: linear-gradient(135deg, #9f2fff, #0bb1d3, #7f47cb, #00ffff, #7a2cec, #4adfdf, #76fcfc, #7f47cb, #9f2fff, #0bb1d3, #7f47cb, #00ffff, #7a2cec, #4adfdf);
background-size: 300%;
animation: 4s infinite alternate-reverse ButtonStartVpnAnimation;
}
section.renew-alert section::after {
filter: blur(7px);
}
section.logs-container section {
width: 90%;
min-height: 0;
margin-top: 25%;
padding-bottom: 0.8rem;
}
section.renew-alert section {
width: 90%;
padding-bottom: 1rem;
}
section.loading section header,
section.checkuser section header,
section.clean-data-app section header,
section.hotspot-container section header,
section.terms-container section header,
section.logs-container section header,
section.renew-alert section header {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 4% 2% 4% 2%;
border-bottom: 2px solid #03142d;
}
section.loading section header h1,
section.checkuser section header h1,
section.clean-data-app section header h1,
section.hotspot-container section header h1,
section.terms-container section header h1,
section.logs-container section header h1,
section.renew-alert section header h1 {
margin-left: auto;
color: #ffffff;
font-size: 0.8rem;
}
@media (max-width: 280px) {
section.clean-data-app section header h1 {
font-size: 0.7rem;
}
}
section.loading section header svg,
section.checkuser section header svg,
section.clean-data-app section header svg,
section.hotspot-container section header svg,
section.terms-container section header svg,
section.logs-container section header svg,
section.renew-alert section header svg {
margin-left: auto;
color: #ffffff;
}
section.terms-container section p {
width: 95%;
height: auto;
max-height: 350px;
padding: 5% 0;
color: #ffffff;
text-align: center;
overflow: auto;
}
section.loading section div.loading {
width: 150px;
height: 150px;
margin-top: auto;
margin-bottom: auto;
border-top: 4px solid #ffffff;
border-right: 4px solid #ffffff;
border-bottom: 4px solid #ffffff;
border-left: 4px solid transparent;
border-radius: 50%;
background-color: red;
animation: spin 1s linear infinite;
}
section.checkuser section section {
width: 100%;
height: auto;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: auto 0 auto 0;
padding: 3% 0;
border-radius: 0;
}
section.checkuser section section div:first-child {
margin: 0;
}
section.checkuser section section div {
width: 90%;
height: auto;
display: flex;
align-items: center;
gap: 10px;
margin: 5% 0 0 0;
padding: 3% 3%;
border-radius: 10px;
background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
background-size: 300%;
animation: 8s infinite ButtonStartVpnAnimation;
}
section.checkuser section section div svg,
section.checkuser section section div span {
color: #ffffff;
}
section.checkuser section section div span {
font-size: 0.8rem;
}
section.clean-data-app section section,
section.hotspot-container section section {
width: 100%;
height: auto;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: auto 0 auto 0;
padding: 8% 0;
border-radius: 0;
}
section.clean-data-app section section svg,
section.hotspot-container section section svg {
width: 30%;
height: auto;
color: #ffff00;
font-size: 8rem;
}
section.hotspot-container section section svg {
width: 20%;
height: auto;
color: #ffffff;
}
section.clean-data-app section section h1,
section.hotspot-container section section h1 {
color: #ffffff;
font-size: 1rem;
}
section.clean-data-app section section p,
section.hotspot-container section section p {
margin: 5% 0 8% 0;
padding: 0 3%;
color: #ffffff;
text-align: center;
font-family: Arial, sans-serif;
}
section.hotspot-container section section p {
width: 100%;
height: 10%;
max-height: 300px;
overflow: auto;
}
section.clean-data-app section section button,
section.hotspot-container section section button {
display: flex;
align-items: center;
justify-content: center;
padding: 4% 10%;
border: 0;
border-radius: 60px;
background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
background-size: 300%;
animation: 8s infinite ButtonStartVpnAnimation;
}
section.clean-data-app section section button span,
section.hotspot-container section section button span {
color: #ffffff;
}
section.renew-alert section section {
max-height: 250px;
margin: auto 0 auto 0;
border-radius: 0;
overflow: auto;
&>p {
overflow: hidden;
color: #FFFFFF;
text-align: center;
&>bold {
font-weight: bold;
}
&>italic {
font-style: italic;
text-decoration: underline;
}
}
}
section.logs-container section section {
width: 100%;
height: auto;
max-height: 250px;
padding: 0.4rem 0.4rem 0rem 0.4rem;
margin: 0.4rem 0 0.8rem 0;
border-radius: 0;
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar-thumb {
background: red;
}
&>p {
width: 100%;
height: auto;
color: #FFFFFF;
font-size: 0.8rem;
}
}
section.logs-container section button {
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: auto 0 0 0;
padding: 3% 7%;
position: relative;
border: 0px;
border-radius: 20px;
background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
background-size: 300%;
animation: 8s infinite ButtonStartVpnAnimation;
&>svg {
color: #FFFFFF;
}
&>span {
color: #FFFFFF;
}
}
section.profile header,
section.carrier-list header,
section.container-tools header,
section.container-error header {
width: 100%;
height: 10%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 0 20px 0 20px;
background: black;
}
section.profile header::before,
section.profile header::after,
section.carrier-list header::before,
section.carrier-list header::after,
section.container-tools header::before,
section.container-tools header::after,
section.container-error header::before,
section.container-error header::after {
width: calc(100% + 2px);
height: calc(100% + 2px);
content: "";
position: absolute;
z-index: -1;
background: radial-gradient(circle,
rgba(159, 47, 255, 0.5),
rgba(11, 177, 211, 0.5),
rgba(127, 71, 203, 0.5),
rgba(0, 255, 255, 0.5),
rgba(122, 44, 236, 0.5),
rgba(74, 223, 223, 0.5),
rgba(118, 252, 252, 0.5),
rgba(127, 71, 203, 0.5),
rgba(159, 47, 255, 0.5),
rgba(11, 177, 211, 0.5),
rgba(127, 71, 203, 0.5),
rgba(0, 255, 255, 0.5),
rgba(122, 44, 236, 0.5),
rgba(74, 223, 223, 0.5));
background-size: 300%;
animation: 15s infinite ButtonStartVpnAnimation;
}
section.profile header::after,
section.carrier-list header::after,
section.container-tools header::after,
section.container-error header::after {
filter: blur(5px);
}
section.profile header svg,
section.carrier-list header svg,
section.container-tools header svg,
section.container-error header svg {
width: 20px;
height: 20px;
margin: 0 auto 0 0;
fill: url(#grad);
}
section.profile header h1,
section.carrier-list header h1,
section.container-tools header h1,
section.container-error header h1 {
margin: 0 auto 0 0;
color: #ffffff;
font-size: 0.9rem;
}
section.profile form {
width: 100%;
height: auto;
padding: 0px 10px;
display: flex;
flex-direction: column;
}
section.profile form fieldset {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
margin: 0% 0px;
padding: 5px 10px;
border: 0px solid #00ff00;
border-radius: 5px;
background: black;
}
section.profile form fieldset::before,
section.profile form fieldset::after {
width: calc(100% + 2px);
height: calc(100% + 17px);
content: "";
position: absolute;
top: -16px;
right: 0;
bottom: 0;
left: -1px;
z-index: -1;
border-radius: 5px;
background: radial-gradient(circle,
rgba(159, 47, 255, 0.5),
rgba(11, 177, 211, 0.5),
rgba(127, 71, 203, 0.5),
rgba(0, 255, 255, 0.5),
rgba(122, 44, 236, 0.5),
rgba(74, 223, 223, 0.5),
rgba(118, 252, 252, 0.5),
rgba(127, 71, 203, 0.5),
rgba(159, 47, 255, 0.5),
rgba(11, 177, 211, 0.5),
rgba(127, 71, 203, 0.5),
rgba(0, 255, 255, 0.5),
rgba(122, 44, 236, 0.5),
rgba(74, 223, 223, 0.5));
background-size: 300%;
animation: 20s infinite ButtonStartVpnAnimation;
}
section.profile form fieldset::after {
filter: blur(3px);
}
section.profile form fieldset legend {
padding: 0px 7px 0px 5px;
background: black;
}
section.profile form fieldset legend svg {
width: auto;
height: 1.563rem;
fill: url(#grad);
}
section.profile form fieldset p {
color: #ffffff;
font-size: 0.9rem;
font-style: italic;
}
section.profile form fieldset:nth-child(2) {
margin-top: 5%;
padding: 0px 10px 20px 10px;
}
section.profile form fieldset:nth-child(2)::after,
section.profile form fieldset:nth-child(2)::before {
height: calc(100% + 15px);
top: -14px;
}
section.profile form fieldset:nth-child(2) legend {
color: #ffffff;
}
section.profile form fieldset:nth-child(2) label {
margin-right: auto;
color: #ffffff;
}
section.profile form fieldset:nth-child(2) label.hidden {
display: none;
}
section.profile form fieldset:nth-child(2) div {
width: 100%;
height: 40px;
display: flex;
align-items: center;
margin: 0 0 0 auto;
border: 1px solid #ffffff;
border-radius: 5px;
overflow: hidden;
}
section.profile form fieldset:nth-child(2) div.hidden {
display: none;
}
section.profile form fieldset:nth-child(2) div svg {
width: 15%;
max-width: 40px;
height: 100%;
max-height: 40px;
padding: 3%;
color: #ffffff;
}
section.profile form fieldset:nth-child(2) div svg.hidden {
display: none;
}
section.profile form fieldset:nth-child(2) div input {
width: 100%;
height: 100%;
padding: 0px 5px;
border: 0px;
border-left: 1px solid #ffffff;
outline: none;
color: #ffffff;
background: black;
}
section.profile form fieldset:nth-child(2) label[for="passworddiv"] {
margin-top: 4%;
}
section.profile form fieldset:nth-child(2) label[for="uuiddiv"] {
margin-top: 4%;
}
section.profile form fieldset:nth-child(2) button {
width: 80%;
min-width: 200px;
height: 20%;
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 6% auto 0px auto;
border: 0px;
border-radius: 20px;
background: radial-gradient(circle, #0bb1d3, #9f2fff 85%);
background-size: 300%;
animation: 5s infinite ButtonStartVpnAnimation;
}
section.profile form fieldset:nth-child(2) button svg {
color: #ffffff;
filter: drop-shadow(1px 1px 2px rgba(0, 0, 255, 0.4));
}
section.profile form fieldset:nth-child(2) button span {
color: #ffffff;
font-family: Arial, sans-serif;
font-weight: 500;
text-shadow: 1px 1px 2px rgba(0, 0, 255, 0.4);
}
section.carrier-list section {
width: 100%;
height: 90%;
overflow-y: auto;
}
section.carrier-list section div:first-child {
margin: 0;
}
section.carrier-list section div {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}
section.carrier-list section div h1 {
width: 100%;
height: 50px;
display: flex;
align-items: center;
padding: 0px 3%;
color: #ffffff;
font-size: 0.9rem;
background: black;
}
section.carrier-list section div ul {
width: 100%;
height: auto;
list-style: none;
}
section.carrier-list section div ul li {
width: 100%;
height: 60px;
display: flex;
align-items: center;
gap: 5px;
position: relative;
margin: 1% 0;
padding: 0 2%;
background: #07214b;
color: #ffffff;
/*overflow: hidden; */
/* REMOVER CASO QUEIRA A BORDA ANIMADA E COLORIDA */
}
section.carrier-list section div ul li::before,
section.carrier-list section div ul li::after {
width: 100%;
height: calc(100% + 2px);
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: radial-gradient(circle,
rgba(159, 47, 255, 0.5),
rgba(11, 177, 211, 0.5),
rgba(127, 71, 203, 0.5),
rgba(0, 255, 255, 0.5),
rgba(122, 44, 236, 0.5),
rgba(74, 223, 223, 0.5),
rgba(118, 252, 252, 0.5),
rgba(127, 71, 203, 0.5),
rgba(159, 47, 255, 0.5),
rgba(11, 177, 211, 0.5),
rgba(127, 71, 203, 0.5),
rgba(0, 255, 255, 0.5),
rgba(122, 44, 236, 0.5),
rgba(74, 223, 223, 0.5));
background-size: 300%;
animation: 15s infinite ButtonStartVpnAnimation;
}
section.carrier-list section div ul li img {
width: 30px;
}
section.carrier-list section div ul li span {
width: calc(100% - 30px);
white-space: nowrap;
overflow: auto;
}
section.carrier-list section div ul li svg {
width: 30px;
display: none;
}
section.carrier-list section div ul li.active svg {
display: block;
}
section.container-tools section {
width: 100%;
height: 89%;
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 auto 0 auto;
padding: 2% 0 0 0;
background: transparent;
overflow: auto;
}
section.container-tools section button {
width: 100%;
height: auto;
display: flex;
align-items: center;
gap: 5px;
padding: 10px;
border: 0px solid transparent;
border-bottom: 1px solid #ddd;
background: transparent;
}
section.container-tools section button svg:first-child {
width: 20px;
height: 100%;
margin: 0 10px 0 0;
color: #ffffff;
}
section.container-tools section button div {
max-width: 83%;
height: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
section.container-tools section button div h3 {
color: #ffffff;
}
section.container-tools section button div p {
color: #ffffff;
text-align: left;
}
section.container-tools section button svg:last-child {
width: 16px;
height: 100%;
margin: 0 0 0 auto;
color: #ffffff;
}
section.container-error section {
width: 100%;
height: 85%;
display: flex;
flex-direction: column;
align-items: center;
}
section.container-error section h1 {
margin: 1% 0 0 0;
color: #ffffff;
font-size: 0.9rem;
}
section.container-error section p {
margin: 3% 0 0 0;
padding: 0 3%;
color: #ffffff;
text-align: center;
font-size: 0.8rem;
font-family: Arial, sans-serif;
overflow: auto;
}
section.active {
opacity: 1;
transform: translateX(0%);
}
section.container-menu {
width: 100%;
height: 10%;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
margin: 21px 0px 0px 0px;
padding: 0px 10px;
background-color: blue; //aqui
}
section.container-menu button {
flex: 1;
width: 60px;
height: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
position: relative;
z-index: 5;
border: 0px;
background: blue;
}
section.container-menu button:nth-child(2) {
margin-right: 10px;
}
section.container-menu button:nth-child(3) {
margin-right: 10px;
}
section.container-menu button:last-child {
margin-right: 5px;
}
section.container-menu button svg {
color: #ffffff;
}
section.container-menu button span {
color: #ffffff;
text-transform: uppercase;
font-size: 0.7rem;
}
section.container-toast {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
bottom: 2.5%;
right: 0;
z-index: 99999999;
padding: 10px 10px;
transform: scale(0);
}
section.container-toast div.toast {
width: auto;
height: auto;
display: flex;
align-items: center;
position: relative;
padding: 0px 5px 0px 0px;
border: 1px solid red;
border-radius: 10px;
background: #152039;
}
section.container-toast div.toast::before,
section.container-toast div.toast::after {
width: calc(100% + 10px);
height: calc(100% + 10px);
content: "";
position: absolute;
top: -5px;
left: -5px;
z-index: -1;
border-radius: 10px;
background: radial-gradient(circle,
rgba(159, 47, 255, 0.5),
rgba(11, 177, 211, 0.5),
rgba(127, 71, 203, 0.5),
rgba(0, 255, 255, 0.5),
rgba(122, 44, 236, 0.5),
rgba(74, 223, 223, 0.5),
rgba(118, 252, 252, 0.5),
rgba(127, 71, 203, 0.5),
rgba(159, 47, 255, 0.5),
rgba(11, 177, 211, 0.5),
rgba(127, 71, 203, 0.5),
rgba(0, 255, 255, 0.5),
rgba(122, 44, 236, 0.5),
rgba(74, 223, 223, 0.5));
background-size: 300%;
animation: 15s infinite ButtonStartVpnAnimation;
}
section.container-toast div.toast::after {
filter: blur(5px);
}
section.container-toast div.toast.error {
border: 1px solid #ff0000;
}
section.container-toast div.toast div.icon {
width: auto;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 4px 5px 7px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
overflow: hidden;
background: #152039;
}
section.container-toast div.toast.error div.icon {
border-right: 1px solid #ff0000;
}
section.container-toast div.toast div.icon img {
width: auto;
height: 100%;
min-height: 30px;
}
section.container-toast div.toast span {
margin-left: 5px;
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 0.8rem;
font-weight: 300;
}
@media (max-width: 280px) {
section.container-menu button {
flex: 1;
width: 60px;
max-width: 60px;
height: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
position: relative;
z-index: 5;
border: 0px;
background: transparent;
}
section.container-menu button:last-child {
margin-right: 10px;
}
section.container-menu button span {
font-size: 0.5rem;
}
}
@media only screen and (max-width: 576px) {
section.container-menu button {
flex: 1;
width: 60px;
max-width: 60px;
height: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
position: relative;
z-index: 5;
border: 0px;
background: transparent; //aqui
}
section.container-menu button:last-child {
margin-right: 10px;
}
section.container-menu button span {
font-size: 0.5rem;
}
}
.spaceInDown {
-webkit-animation-name: spaceInDown;
animation-name: spaceInDown;
}
@-webkit-keyframes spaceInDown {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0.2) translate(0%, 200%);
}
100% {
opacity: 1;
transform-origin: 50% 100%;
transform: scale(1) translate(0%, 0%);
}
}
@keyframes spaceInDown {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0.2) translate(0%, 200%);
}
100% {
opacity: 1;
transform-origin: 50% 100%;
transform: scale(1) translate(0%, 0%);
}
}
.spaceOutDown {
-webkit-animation-name: spaceOutDown;
animation-name: spaceOutDown;
}
@-webkit-keyframes spaceOutDown {
0% {
opacity: 1;
transform-origin: 50% 100%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0.2) translate(0%, 200%);
}
}
@keyframes spaceOutDown {
0% {
opacity: 1;
transform-origin: 50% 100%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0.2) translate(0%, 200%);
}
}
.masterSshAnimatedTime {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@media (print),
(prefers-reduced-motion) {
.masterSshAnimatedTime {
-webkit-animation: unset !important;
animation: unset !important;
transition: none !important;
}
}
</style>
</head>
<body>
<main>
<section class="home active">
<div class="gif-container">
<img id="gif-image" src="" alt="">
</div>
<section class="container-local-ip active" style="margin-top: 150px;">
<button type="button">
<span id="local-ip-value">Localizando IP...</span>
</button>
</section>
<section class="container-button-start-stop-vpn">
<button type="button" title="Iniciar ou Parar conexĂŁo VPN" id="start-stop-vpn-button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-power"
viewBox="0 0 16 16">
<path d="M7.5 1v7h1V1h-1z" />
<path
d="M3 8.812a4.999 4.999 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812z" />
</svg>
</button>
</section>
<section class="container-status-connection active">
<button type="button">
<span id="state-value">LBL_STATE_DISCONNECTED</span>
</button>
</section>
<section class="container-carrier-selector-button">
<button type="button" id="carrier-list-button">
<span id="value-of-carrier-list-button">SELECIONE UMA CONFIGURAĂĂO</span>
</button>
</section>
</section>
<section class="carrier-list">
<header>
<svg id="back-carrier-container" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-arrow-return-left" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
</svg>
<h1>SELECIONE UMA OPĂĂO</h1>
</header>
<section></section>
</section>
<section class="profile">
<header>
<svg id="back-profile-container" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-arrow-return-left" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
</svg>
<h1>PERFIL</h1>
</header>
<form>
<fieldset>
<legend>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-person-exclamation" 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 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" />
<path
d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-3.5-2a.5.5 0 0 0-.5.5v1.5a.5.5 0 0 0 1 0V11a.5.5 0 0 0-.5-.5Zm0 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z" />
</svg>
</legend>
<p>
Insira suas credenciais nos campos abaixo e clique no botĂŁo
"Salvar credenciais". Isso o levarĂĄ de volta Ă pĂĄgina inicial do
aplicativo, onde vocĂȘ poderĂĄ se conectar e desfrutar da conexĂŁo.
</p>
</fieldset>
<fieldset>
<legend>Informe suas credenciais</legend>
<label for="usernamediv">Nome de usuĂĄrio</label>
<div id="usernamediv">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person"
viewBox="0 0 16 16">
<path
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" />
</svg>
<input id="username" type="text" name="username" placeholder="UsuĂĄrio" value="Blinder" />
</div>
<label for="passworddiv">Senha</label>
<div id="passworddiv">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key"
viewBox="0 0 16 16">
<path
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" />
<path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
</svg>
<input id="password" type="password" name="password" placeholder="Senha" value="Blinder"/>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-eye-slash hidden" id="eye-not-view" viewBox="0 0 16 16">
<path
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" />
<path
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" />
<path
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" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
id="eye-view" viewBox="0 0 16 16">
<path
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" />
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
</svg>
</div>
<label for="uuiddiv" class="hidden">UUID</label>
<div id="uuiddiv" class="hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fingerprint"
viewBox="0 0 16 16">
<path
d="M8.06 6.5a.5.5 0 0 1 .5.5v.776a11.5 11.5 0 0 1-.552 3.519l-1.331 4.14a.5.5 0 0 1-.952-.305l1.33-4.141a10.5 10.5 0 0 0 .504-3.213V7a.5.5 0 0 1 .5-.5Z" />
<path
d="M6.06 7a2 2 0 1 1 4 0 .5.5 0 1 1-1 0 1 1 0 1 0-2 0v.332c0 .409-.022.816-.066 1.221A.5.5 0 0 1 6 8.447c.04-.37.06-.742.06-1.115V7Zm3.509 1a.5.5 0 0 1 .487.513 11.5 11.5 0 0 1-.587 3.339l-1.266 3.8a.5.5 0 0 1-.949-.317l1.267-3.8a10.5 10.5 0 0 0 .535-3.048A.5.5 0 0 1 9.569 8Zm-3.356 2.115a.5.5 0 0 1 .33.626L5.24 14.939a.5.5 0 1 1-.955-.296l1.303-4.199a.5.5 0 0 1 .625-.329Z" />
<path
d="M4.759 5.833A3.501 3.501 0 0 1 11.559 7a.5.5 0 0 1-1 0 2.5 2.5 0 0 0-4.857-.833.5.5 0 1 1-.943-.334Zm.3 1.67a.5.5 0 0 1 .449.546 10.72 10.72 0 0 1-.4 2.031l-1.222 4.072a.5.5 0 1 1-.958-.287L4.15 9.793a9.72 9.72 0 0 0 .363-1.842.5.5 0 0 1 .546-.449Zm6 .647a.5.5 0 0 1 .5.5c0 1.28-.213 2.552-.632 3.762l-1.09 3.145a.5.5 0 0 1-.944-.327l1.089-3.145c.382-1.105.578-2.266.578-3.435a.5.5 0 0 1 .5-.5Z" />
<path
d="M3.902 4.222a4.996 4.996 0 0 1 5.202-2.113.5.5 0 0 1-.208.979 3.996 3.996 0 0 0-4.163 1.69.5.5 0 0 1-.831-.556Zm6.72-.955a.5.5 0 0 1 .705-.052A4.99 4.99 0 0 1 13.059 7v1.5a.5.5 0 1 1-1 0V7a3.99 3.99 0 0 0-1.386-3.028.5.5 0 0 1-.051-.705ZM3.68 5.842a.5.5 0 0 1 .422.568c-.029.192-.044.39-.044.59 0 .71-.1 1.417-.298 2.1l-1.14 3.923a.5.5 0 1 1-.96-.279L2.8 8.821A6.531 6.531 0 0 0 3.058 7c0-.25.019-.496.054-.736a.5.5 0 0 1 .568-.422Zm8.882 3.66a.5.5 0 0 1 .456.54c-.084 1-.298 1.986-.64 2.934l-.744 2.068a.5.5 0 0 1-.941-.338l.745-2.07a10.51 10.51 0 0 0 .584-2.678.5.5 0 0 1 .54-.456Z" />
<path
d="M4.81 1.37A6.5 6.5 0 0 1 14.56 7a.5.5 0 1 1-1 0 5.5 5.5 0 0 0-8.25-4.765.5.5 0 0 1-.5-.865Zm-.89 1.257a.5.5 0 0 1 .04.706A5.478 5.478 0 0 0 2.56 7a.5.5 0 0 1-1 0c0-1.664.626-3.184 1.655-4.333a.5.5 0 0 1 .706-.04ZM1.915 8.02a.5.5 0 0 1 .346.616l-.779 2.767a.5.5 0 1 1-.962-.27l.778-2.767a.5.5 0 0 1 .617-.346Zm12.15.481a.5.5 0 0 1 .49.51c-.03 1.499-.161 3.025-.727 4.533l-.07.187a.5.5 0 0 1-.936-.351l.07-.187c.506-1.35.634-2.74.663-4.202a.5.5 0 0 1 .51-.49Z" />
</svg>
<input id="uuid" type="text" placeholder="UUID" />
</div>
<button id="save-creds" type="button" title="Salvar informaçÔes de usuario e senha">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-save"
viewBox="0 0 16 16">
<path
d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9.5a1 1 0 0 0-1 1v7.293l2.646-2.647a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L7.5 9.293V2a2 2 0 0 1 2-2H14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h2.5a.5.5 0 0 1 0 1H2z" />
</svg>
<span>Salvar credenciais</span>
</button>
</fieldset>
</form>
</section>
<section class="container-tools">
<header>
<svg id="back-tools-container" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-arrow-return-left" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
</svg>
<h1>FERRAMENTAS</h1>
</header>
<section>
<button type="button" id="register-button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-columns"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M0 .5A.5.5 0 0 1 .5 0h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 0 .5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 2h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 4h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 6h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2A.5.5 0 0 1 .5 8h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Zm-13 2a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5Zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z" />
</svg>
<div>
<h3>REGISTRO</h3>
<p>
Verifica todos os detalhes do que acontece ao abrir e conectar
no app.
</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
<button type="button" id="speedtest-tool">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-activity"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z" />
</svg>
<div>
<h3>SPEEDTEST</h3>
<p>Teste a velocidade da sua conexĂŁo</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
<button type="button" id="hotspot-button-tools">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-broadcast"
viewBox="0 0 16 16">
<path
d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707zm2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708zm5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708zm2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0z" />
</svg>
<div>
<h3>HOTSPOT</h3>
<p>
Aqui vocĂȘ pode compartilar sua conexĂŁo VPN usando o roteador do
seu celular.
</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
<button type="button" id="apn-tool">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-broadcast-pin"
viewBox="0 0 16 16">
<path
d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707zm2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708zm5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708zm2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM6 8a2 2 0 1 1 2.5 1.937V15.5a.5.5 0 0 1-1 0V9.937A2 2 0 0 1 6 8z" />
</svg>
<div>
<h3>CONFIGURAR APN</h3>
<p>Aqui vocĂȘ pode fazer ajustes no APN</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
<button type="button" id="battery-tool">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-battery-charging" viewBox="0 0 16 16">
<path
d="M9.585 2.568a.5.5 0 0 1 .226.58L8.677 6.832h1.99a.5.5 0 0 1 .364.843l-5.334 5.667a.5.5 0 0 1-.842-.49L5.99 9.167H4a.5.5 0 0 1-.364-.843l5.333-5.667a.5.5 0 0 1 .616-.09z" />
<path d="M2 4h4.332l-.94 1H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h2.38l-.308 1H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" />
<path
d="M2 6h2.45L2.908 7.639A1.5 1.5 0 0 0 3.313 10H2V6zm8.595-2-.308 1H12a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H9.276l-.942 1H12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.405z" />
<path
d="M12 10h-1.783l1.542-1.639c.097-.103.178-.218.241-.34V10zm0-3.354V6h-.646a1.5 1.5 0 0 1 .646.646zM16 8a1.5 1.5 0 0 1-1.5 1.5v-3A1.5 1.5 0 0 1 16 8z" />
</svg>
<div>
<h3>OTIMIZAĂĂO DE BATERIA</h3>
<p>
Aqui vocĂȘ consegue desativar a otimização de bateria que acaba
encerrando o aplicativo sem a sua permissĂŁo!
</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
<button type="button" id="checkuser-tool">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-person-lines-fill" viewBox="0 0 16 16">
<path
d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z" />
</svg>
<div>
<h3>DETALHES DO LOGIN</h3>
<p>
Aqui vocĂȘ consegue visualizar alguns detalhes do seu perfil.
</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
<button type="button" id="button-open-clear-data-app">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash"
viewBox="0 0 16 16">
<path
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" />
<path
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" />
</svg>
<div>
<h3>LIMPAR DADOS</h3>
<p>
Aqui vocĂȘ pode fazer a limpeza do cache e dados do aplicativo.
</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
<button type="button" id="button-open-terms-app">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-journal-medical" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M8 4a.5.5 0 0 1 .5.5v.634l.549-.317a.5.5 0 1 1 .5.866L9 6l.549.317a.5.5 0 1 1-.5.866L8.5 6.866V7.5a.5.5 0 0 1-1 0v-.634l-.549.317a.5.5 0 1 1-.5-.866L7 6l-.549-.317a.5.5 0 0 1 .5-.866l.549.317V4.5A.5.5 0 0 1 8 4zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z" />
<path
d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z" />
<path
d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z" />
</svg>
<div>
<h3>TERMOS DE USO</h3>
<p>
Aqui vocĂȘ consegue ler os termos de uso e licença do aplicativo.
</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
</section>
</section>
<section class="logs-container">
<section>
<header>
<h1>REGISTRO</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
id="register-logs-close" viewBox="0 0 16 16">
<path
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" />
</svg>
</header>
<section>
<p></p>
</section>
<button type="button" id="clear-logs">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash"
viewBox="0 0 16 16">
<path
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" />
<path
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" />
</svg>
<span>LIMPAR REGISTRO</span>
</button>
</section>
</section>
<section class="loading">
<section>
<header>
<h1>CARREGANDO INFORMAĂĂES</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
id="loading-container-close" viewBox="0 0 16 16">
<path
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" />
</svg>
</header>
<div class="loading"></div>
</section>
</section>
<section class="checkuser">
<section>
<header>
<h1>DETALHES DO USUĂRIO</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
id="checkuser-close" viewBox="0 0 16 16">
<path
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" />
</svg>
</header>
<section>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill"
viewBox="0 0 16 16">
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
</svg>
<span id="checkuser-name">USUĂRIO: ALEX</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-calendar-fill" viewBox="0 0 16 16">
<path
d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z" />
</svg>
<span id="checkuser-expires">EXPIRA EM: 25/09/2023</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock-fill"
viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
</svg>
<span id="checkuser-remaing-days">RESTA: 30 DIAS</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone-fill"
viewBox="0 0 16 16">
<path
d="M3 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V2zm6 11a1 1 0 1 0-2 0 1 1 0 0 0 2 0z" />
</svg>
<span id="checkuser-total-conection">CONEXĂES: 1/10</span>
</div>
</section>
</section>
</section>
<section class="renew-alert">
<section>
<header>
<h1>RENOVE SEU ACESSO</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
id="renew-alert-close" viewBox="0 0 16 16">
<path
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" />
</svg>
</header>
<section>
<p>
<bold id="renew-username">Caro usuĂĄrio</bold>
<br /><br />
<italic>Seu perĂodo de acesso estĂĄ chegando ao fim! Para continuar utilizando nossos serviços, entre em
contato para fazer a renovação.</italic>
<br /><br />
Atenciosamente, <bold>MASTER SSH</bold>
</p>
</section>
</section>
</section>
<section class="clean-data-app">
<section>
<header>
<h1>DESEJA CONFIRMAR ESSA AĂĂO ?</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
id="hidden-clear-data-app" viewBox="0 0 16 16">
<path
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" />
</svg>
</header>
<section>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-exclamation-lg" viewBox="0 0 16 16">
<path
d="M7.005 3.1a1 1 0 1 1 1.99 0l-.388 6.35a.61.61 0 0 1-1.214 0L7.005 3.1ZM7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z" />
</svg>
<h1>TEM CERTEZA DA AĂĂO ?</h1>
<p>
Ao efetuar a ação de limpar os dados do aplicativo, serĂĄ possĂvel
carregar somente as configuraçÔes mais recentes mediante uma
conexĂŁo ativa com a internet.
</p>
<button type="button" id="confirm-clean-data-app">
<span>CONFIRMAR</span>
</button>
</section>
</section>
</section>
<section class="hotspot-container">
<section>
<header>
<h1>ROTEADOR WIFI - HOTSPOT</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
id="hidden-hotspot-container" viewBox="0 0 16 16">
<path
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" />
</svg>
</header>
<section>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-router-fill"
viewBox="0 0 16 16">
<path
d="M5.525 3.025a3.5 3.5 0 0 1 4.95 0 .5.5 0 1 0 .707-.707 4.5 4.5 0 0 0-6.364 0 .5.5 0 0 0 .707.707Z" />
<path d="M6.94 4.44a1.5 1.5 0 0 1 2.12 0 .5.5 0 0 0 .708-.708 2.5 2.5 0 0 0-3.536 0 .5.5 0 0 0 .707.707Z" />
<path
d="M2.974 2.342a.5.5 0 1 0-.948.316L3.806 8H1.5A1.5 1.5 0 0 0 0 9.5v2A1.5 1.5 0 0 0 1.5 13H2a.5.5 0 0 0 .5.5h2A.5.5 0 0 0 5 13h6a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5h.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 14.5 8h-2.306l1.78-5.342a.5.5 0 1 0-.948-.316L11.14 8H4.86L2.974 2.342ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm1.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z" />
<path d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
</svg>
<h1 id="title-hotspot">ROTEAMENTO DESLIGADO</h1>
<p>
Ao ativar o hotspot com compartilhamento de VPN do seu celular, um
IP local Ă© gerado no seu dispositivo. Este IP Ă© usado como proxy
no dispositivo conectado Ă sua rede Wi-Fi.
<br />
<br />
<b>SIGA ESTES PASSOS IMPORTANTES</b>
<br />
<br />
1 - Ligue o roteador do celular primeiro.
<br /><br />
2 - Ative o compartilhamento de VPN.
<br /><br />
3 - Use o botĂŁo para controlar o roteador.
<br /><br />
4 - Encontre o segundo IP na barra de notificaçÔes.
<br /><br />
5 - Copie o segundo IP e use como proxy no dispositivo conectado Ă
rede.
<br />
<br />
Lembre-se: O segundo IP Ă© seu proxy. Isso garantirĂĄ o correto
funcionamento do compartilhamento de VPN via hotspot do celular.
</p>
<button type="button" id="enable-hotspot">
<span id="value-button-hotspot">LIGAR HOTSPOT</span>
</button>
</section>
</section>
</section>
<section class="terms-container">
<section>
<header>
<h1>TERMOS DE USO</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
id="hidden-terms-container" viewBox="0 0 16 16">
<path
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" />
</svg>
</header>
<p>
Importante: Ao utilizar o nosso aplicativo, Ă© fundamental que vocĂȘ
esteja ciente e concorde com os seguintes pontos:
<br /><br /><br />
1° - Nosso suporte estĂĄ disponĂvel para ajudar clientes que
enfrentam problemas como dificuldades de conexão, informaçÔes
incorretas, ou se o aplicativo nĂŁo estĂĄ instalado corretamente.
<br /><br />
2° - Não somos responsåveis por questÔes relacionadas à manutenção
da sua operadora, quedas na conexĂŁo causadas por fatores externos ou
problemas climĂĄticos que possam afetar a velocidade da sua internet
através da VPN.
<br /><br />
3° - Caso haja uma interrupção no serviço devido à operadora, não
efetuamos reembolsos. No entanto, os dias em que o serviço ficar
indisponĂvel serĂŁo compensados quando a situação se normalizar,
visto que hå custos associados à manutenção dos servidores.
<br /><br />
4° - Não nos responsabilizamos por sites e jogos que impeçam o uso
da nossa VPN.
<br /><br />
5° - Ă permitido usar apenas o nĂșmero de dispositivos estipulado no
seu contrato com o revendedor autorizado.
<br /><br />
6° - à estritamente proibido o uso de aplicativos torrent ou P2P,
pois eles podem prejudicar o desempenho dos nossos servidores.
<br /><br />
7° - Ă importante que, independentemente da sua operadora, vocĂȘ faça
uma recarga a cada 2 meses para garantir um serviço contĂnuo.
<br /><br />
8° - Mantenha o aplicativo sempre atualizado, pois as atualizaçÔes
são necessårias para garantir o bom funcionamento do serviço.
<br /><br /><br /><br />
Agradecemos por escolher o nosso aplicativo e desejamos a vocĂȘ uma
Ăłtima experiĂȘncia de navegação!
</p>
</section>
</section>
<section class="container-error">
<header>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-arrow-return-left" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
</svg>
<h1>ERROR</h1>
</header>
<section>
<h1 id="error-title"></h1>
<p id="error-log"></p>
</section>
</section>
<section class="container-toast masterSshAnimatedTime">
<div class="toast">
<div class="icon">
<img
src="data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Camada_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 255.17 400'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%239f2eff;%7D.cls-3%7Bfill:none;stroke:url(%23Gradiente_sem_nome_253-3);%7D.cls-3,.cls-4%7Bstroke-miterlimit:10;%7D.cls-4%7Bfill:url(%23Gradiente_sem_nome_253);stroke:url(%23Gradiente_sem_nome_253-2);%7D.cls-5%7Bfill:%230ab1d3;%7D%3C/style%3E%3ClinearGradient id='Gradiente_sem_nome_253' x1='76.24' y1='76.85' x2='139.38' y2='76.85' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230bb1d3'/%3E%3Cstop offset='1' stop-color='%239f2fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='Gradiente_sem_nome_253-2' x1='75.93' x2='139.69' xlink:href='%23Gradiente_sem_nome_253'/%3E%3ClinearGradient id='Gradiente_sem_nome_253-3' x1='72.44' y1='201.84' x2='127.55' y2='201.84' xlink:href='%23Gradiente_sem_nome_253'/%3E%3C/defs%3E%3Ccircle class='cls-5' cx='167.12' cy='32.88' r='32.88'/%3E%3Ccircle class='cls-1' cx='42.09' cy='132.11' r='42.09'/%3E%3Ccircle class='cls-2' cx='169.67' cy='314.5' r='85.5'/%3E%3Cline class='cls-4' x1='139.38' y1='51.86' x2='76.24' y2='101.85'/%3E%3Cline class='cls-3' x1='72.84' y1='165.78' x2='127.15' y2='237.9'/%3E%3C/svg%3E"
alt="Icone do toast" />
</div>
<span class="text">Procurando atualizaçÔes</span>
</div>
</section>
</main>
<section class="container-menu">
<button id="home" type="button" title="Inicio">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house"
viewBox="0 0 16 16">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#0bb1d3" />
<stop offset="100%" stop-color="#9f2fff" />
</linearGradient>
</defs>
<path
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" />
</svg>
<span>Inicio</span>
</button>
<button id="login" type="button" title="Login" onclick="mostrarConteudo()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tv"
viewBox="0 0 16 16">
<path d="M2.5 3.5A.5.5 0 0 1 3 3h10a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-7Z"/>
<path d="M3 12.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-1Z"/>
</svg>
<span>TV</span>
</button>
<button id="tools" type="button" title="Ferramentas">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-nut"
viewBox="0 0 16 16">
<path
d="m11.42 2 3.428 6-3.428 6H4.58L1.152 8 4.58 2h6.84zM4.58 1a1 1 0 0 0-.868.504l-3.428 6a1 1 0 0 0 0 .992l3.428 6A1 1 0 0 0 4.58 15h6.84a1 1 0 0 0 .868-.504l3.429-6a1 1 0 0 0 0-.992l-3.429-6A1 1 0 0 0 11.42 1H4.58z" />
<path
d="M6.848 5.933a2.5 2.5 0 1 0 2.5 4.33 2.5 2.5 0 0 0-2.5-4.33zm-1.78 3.915a3.5 3.5 0 1 1 6.061-3.5 3.5 3.5 0 0 1-6.062 3.5z" />
</svg>
<span>Ferramentas</span>
</button>
<button id="contact-button" type="button" title="Contato via WhatsApp" onclick="window.open('https://api.whatsapp.com/send?phone=71999105628')" style="color: white;">
<i class="fab fa-whatsapp" style="font-size: 14px;"></i>
<span>WhatsApp</span>
</button>
<script>
// Substitua 'url_da_sua_lista.m3u' pela URL da sua lista IPTV
const urlDaListaIPTV = 'https://i.mjh.nz/PlutoTV/br.m3u8';
// Canais adicionados manualmente
const canaisAdicionais = [
{
"logo": "https://imgur.com/waZJG1M.png",
"stream": "https://cdn-3.nxplay.com.br/GLOBO_SP_TK/index.m3u8",
"name": "GLOBO"
},
{
"logo": "https://imgur.com/KO1v3pS.png",
"stream": "https://d2dxmktgc9qcf7.cloudfront.net/out/v1/a7c2cd7ccd84420aa496b5d4cfd9ae79/hlsOutput_2.m3u8",
"name": "SBT"
},
{
"logo": "https://imgur.com/lyQ1v9M.png",
"stream": "https://cdn.jmvstream.com/w/LVW-10842/LVW10842_513N26MDBL/chunklist.m3u8?ManoTV",
"name": "RECORD"
},
{
"logo": "https://imgur.com/xYGjfh8.png",
"stream": "https://cdn-3.nxplay.com.br/BAND_HD_PFZ_NX/tracks-v1a1/mono.m3u8?ManoTV",
"name": "BAND"
},
{
"logo": "https://imgur.com/EgKx2J1.png",
"stream": "https://cdn.jmvstream.com/w/AVJ-15235/playlist/chunklist.m3u8",
"name": "REDE TV!"
},
{
"logo": "https://imgur.com/vSKVrvH.png",
"stream": "https://cc-7pakstinpyajo.akamaized.net/playlist720lp.m3u8",
"name": "NEW BRASIL"
},
{
"logo": "https://i.imgur.com/CkoAvYH.png",
"stream": "https://cdn-2.nxplay.com.br/ESPN/tracks-v1a1/mono.m3u8",
"name": "ESPN"
},
{
"logo": "https://i.imgur.com/ZAHnoPh.png",
"stream": "https://cdn-3.nxplay.com.br/ESPN_2/index.m3u8",
"name": "ESPN 2"
}
];
document.addEventListener('DOMContentLoaded', function() {
// Oculta o player e a lista de canais ao carregar a pĂĄgina
ocultarConteudo();
// Adiciona um ouvinte de eventos para os botĂ”es especĂficos
var botaoLogin = document.getElementById('login');
var botaoFerramentas = document.getElementById('tools');
var botaoInicio = document.getElementById('home'); // BotĂŁo home adicionado
botaoLogin.addEventListener('click', function() {
mostrarConteudo();
mostrarToast(); // Chama a função para mostrar o toast
});
botaoFerramentas.addEventListener('click', ocultarConteudo);
botaoInicio.addEventListener('click', ocultarConteudo); // Evento de clique para ocultar o conteĂșdo
// Chama a função de atualização ao carregar a pågina
atualizarListaCanais();
// Adiciona a função para alternar tela cheia com duplo toque
alternarTelaCheiaComDuploToque(document.getElementById('player-container'));
});
// Função para mostrar o conteĂșdo
function mostrarConteudo() {
var playerContainer = document.getElementById('player-container');
var listaCanais = document.getElementById('lista-canais');
var corpo = document.body;
playerContainer.style.display = 'block';
corpo.classList.add('no-scroll'); // Desativa a rolagem da pĂĄgina
fetch(urlDaListaIPTV)
.then(response => response.text())
.then(data => {
processarListaIPTV(data);
listaCanais.style.display = 'block';
});
}
// Função para ocultar o conteĂșdo
function ocultarConteudo() {
var playerContainer = document.getElementById('player-container');
var listaCanais = document.getElementById('lista-canais');
playerContainer.style.display = 'none';
listaCanais.style.display = 'none';
document.body.classList.remove('no-scroll');
}
// Função para processar a lista IPTV e criar os elementos HTML para cada canal
function processarListaIPTV(data) {
const linhas = data.split('\n');
let htmlCanais = '';
// Processa canais adicionais primeiro
canaisAdicionais.forEach(canal => {
htmlCanais += criarElementoCanal(canal.logo, canal.stream, canal.name);
});
// Processa a lista IPTV
for (let i = 0; i < linhas.length; i++) {
if (linhas[i].startsWith('#EXTINF:-1')) {
const partes = linhas[i].split(',');
const nomeCanal = partes[1];
const logoMatch = /tvg-logo="([^"]+)"/.exec(linhas[i]);
const logo = logoMatch ? logoMatch[1] : 'default_logo.png';
const urlCanal = linhas[i + 1].trim();
htmlCanais += criarElementoCanal(logo, urlCanal, nomeCanal);
}
}
document.getElementById('lista-canais').innerHTML = htmlCanais;
recuperarUltimoCanal(); // Adiciona a chamada para recuperar o Ășltimo canal aqui
}
// Função para criar o elemento HTML do canal
function criarElementoCanal(logo, stream, name) {
return `
<div class="canal" onclick="reproduzirCanal('${stream}')">
<img src="${logo}" alt="${name}" />
<span class="nome-canal">${name}</span>
</div>
`;
}
// Função para alternar tela cheia com duplo toque e rotacionar o vĂdeo
function alternarTelaCheiaComDuploToque(elemento) {
let ultimoToque = 0;
elemento.addEventListener('touchstart', function(evento) {
const tempoAtual = new Date().getTime();
const tempoDesdeUltimoToque = tempoAtual - ultimoToque;
if (tempoDesdeUltimoToque < 300 && tempoDesdeUltimoToque > 0) {
// Detectou um toque duplo
if (!document.fullscreenElement) {
// Ativa tela cheia se nĂŁo estiver em tela cheia
if (elemento.requestFullscreen) {
elemento.requestFullscreen();
} else if (elemento.webkitRequestFullscreen) { /* Safari */
elemento.webkitRequestFullscreen();
} else if (elemento.msRequestFullscreen) { /* IE11 */
elemento.msRequestFullscreen();
}
} else {
// Sai de tela cheia se estiver em tela cheia
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
}
ultimoToque = tempoAtual;
});
// Adiciona ouvintes de eventos para mudanças de tela cheia
document.addEventListener('fullscreenchange', aplicarRotacao, false);
document.addEventListener('webkitfullscreenchange', aplicarRotacao, false);
document.addEventListener('msfullscreenchange', aplicarRotacao, false);
}
function aplicarRotacao() {
var playerContainer = document.getElementById('player-container');
if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
// Aplica a rotação ao contĂȘiner do player
playerContainer.classList.add('rotacionar-video');
} else {
// Remove a rotação do contĂȘiner do player
playerContainer.classList.remove('rotacionar-video');
}
}
// Função para reproduzir o canal selecionado com o elemento <video>
function reproduzirCanal(urlCanal) {
var videoElement = document.getElementById('player');
videoElement.src = urlCanal;
videoElement.play();
// Salva o canal atual como o Ășltimo canal assistido
localStorage.setItem('ultimoCanal', urlCanal);
}
// Função para recuperar e reproduzir o Ășltimo canal assistido
function recuperarUltimoCanal() {
const ultimoCanal = localStorage.getItem('ultimoCanal');
if (ultimoCanal) {
reproduzirCanal(ultimoCanal);
}
}
function mostrarToast() {
const toastContainer = document.createElement('div');
toastContainer.style.position = 'fixed';
toastContainer.style.top = '30px'; // Ajustado para aparecer no topo
toastContainer.style.left = '50%';
toastContainer.style.transform = 'translateX(-50%)';
toastContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
toastContainer.style.color = 'white';
toastContainer.style.padding = '10px';
toastContainer.style.borderRadius = '5px';
toastContainer.style.zIndex = '1000';
toastContainer.innerText = 'Para tela cheia, dĂȘ dois toques sobre o vĂdeo';
document.body.appendChild(toastContainer);
// Remover o toast apĂłs 4 segundos
setTimeout(() => {
document.body.removeChild(toastContainer);
}, 4000);
}
// Função para verificar e atualizar a lista de canais
function atualizarListaCanais() {
const listaCanaisCache = localStorage.getItem('listaCanais');
const ultimaAtualizacao = localStorage.getItem('ultimaAtualizacao');
const agora = new Date().getTime();
// Verifica se a lista estĂĄ em cache e se passaram menos de 24 horas desde a Ășltima atualização
if (listaCanaisCache && ultimaAtualizacao && agora - ultimaAtualizacao < 86400000) {
processarListaIPTV(listaCanaisCache);
} else {
// Carrega a lista IPTV e exibe os canais
fetch(urlDaListaIPTV)
.then(response => response.text())
.then(data => {
localStorage.setItem('listaCanais', data);
localStorage.setItem('ultimaAtualizacao', agora.toString());
processarListaIPTV(data);
});
}
}
</script>
<script>
// Função para alternar o vĂdeo para tela cheia
function alternarTelaCheia() {
var playerContainer = document.getElementById('player-container');
if (!document.fullscreenElement) {
if (playerContainer.requestFullscreen) {
playerContainer.requestFullscreen();
} else if (playerContainer.webkitRequestFullscreen) { /* Safari */
playerContainer.webkitRequestFullscreen();
} else if (playerContainer.msRequestFullscreen) { /* IE11 */
playerContainer.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
}
// Adiciona um ouvinte de eventos para alternar o vĂdeo para tela cheia ao dar dois toques
var videoElement = document.getElementById('player');
videoElement.addEventListener('touchstart', function(event) {
// Implementação de detecção de toque duplo
// ...
alternarTelaCheia(); // Chama a função para alternar o vĂdeo para tela cheia
});
</script>
<script>
const appGetStatusbarHeightSize = () => DtGetStatusBarHeight.execute()
const appGetNavbarHeightSize = () => DtGetNavigationBarHeight.execute()
const appTranslateText = (label) => DtTranslateText.execute(label)
const appGetConfigLabel = (label) => DtGetAppConfig.execute(label)
const appGetCarrierName = () => `${Android.getNetworkName()}`
const appGetLocalIp = () => `${Android.getLocalIP()}`
const AppUpdate = () => DtStartAppUpdate.execute()
const appAllConfigs = () => DtGetConfigs.execute()
const appSetConfig = (id) => DtSetConfig.execute(id)
const appGetDefaultConfig = () => DtGetDefaultConfig.execute()
const appGetConfigVersion = () =>
`${DtGetLocalConfigVersion.execute() ?? "1.0"}`
const appGetUsername = () => DtUsername.get()
const appSetUsername = (username) => DtUsername.set(username)
const appGetPassword = () => DtPassword.get()
const appSetPassword = (password) => DtPassword.set(password)
const appGetUUID = () => DtUuid.get()
const appSetUUID = (uuid) => DtUuid.set(uuid)
const appGetConnectionState = () => DtGetVpnState.execute()
const appStartConnection = () => DtExecuteVpnStart.execute()
const appStopConnection = () => DtExecuteVpnStop.execute()
const appGetStatusHotspot = () => DtGetStatusHotSpotService.execute()
const appStartHotspot = () => DtStartHotSpotService.execute()
const appStopHotspot = () => DtStopHotSpotService.execute()
const appGetLogs = () => DtGetLogs.execute()
const appCleanLogs = () => DtClearLogs.execute()
const appBatteryOptimize = () => DtIgnoreBatteryOptimizations.execute()
const appApnConfiguration = () => DtStartApnActivity.execute()
const appStartCheckUser = () => DtStartCheckUser.execute()
const appIntoBrowser = (url) => DtStartWebViewActivity.execute(url)
const appClearData = () => DtCleanApp.execute()
</script>
<script>
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function initShuffle() {
const gifContainerURLs = [
'https://i.gifer.com/Z6W2.gif',
'https://i.gifer.com/4SHX.gif',
'https://i.gifer.com/ZIb4.gif',
'https://i.gifer.com/6ka.gif',
'https://i.gifer.com/IXNp.gif',
'https://i.gifer.com/ZJFD.gif',
'https://i.gifer.com/tuJ.gif',
'https://i.gifer.com/3nR6.gif',
'https://i.gifer.com/bgh.gif',
'https://i.gifer.com/XOsX.gif',
'https://i.gifer.com/3pKc.gif',
'https://i.gifer.com/6mz.gif',
'https://i.gifer.com/WS2c.gif',
'https://i.gifer.com/hdt.gif',
'https://i.gifer.com/3F3F.gif',
'https://i.gifer.com/XDZW.gif',
'https://i.gifer.com/XiPu.gif',
'https://i.gifer.com/xy.gif',
'https://i.gifer.com/3IU0.gif',
'https://i.gifer.com/YTup.gif',
'https://i.gifer.com/4FB4.gif',
'https://i.gifer.com/Y8HD.gif',
'https://i.gifer.com/XwI4.gif',
'https://i.gifer.com/4Jnt.gif',
'https://i.gifer.com/ZdPP.gif',
'https://i.gifer.com/WMDv.gif',
'https://i.gifer.com/2ull.gif',
'https://i.gifer.com/3sjq.gif',
'https://i.gifer.com/y5.gif',
'https://i.gifer.com/VIjf.gif',
'https://i.gifer.com/7VA.gif',
'https://i.gifer.com/2vDa.gif',
'https://i.gifer.com/4OKl.gif',
'https://i.gifer.com/xz.gif',
'https://i.gifer.com/Dtk.gif',
'https://i.gifer.com/4EAw.gif',
'https://i.gifer.com/PZs.gif',
'https://i.gifer.com/Yv30.gif',
'https://i.gifer.com/4m3s.gif',
'https://i.gifer.com/Oanl.gif',
'https://i.gifer.com/X5NZ.gif',
'https://i.gifer.com/2eSh.gif',
'https://i.gifer.com/6ov.gif',
'https://i.gifer.com/WG8Q.gif',
'https://i.gifer.com/Yg6L.gif',
'https://i.gifer.com/ZbHT.gif',
'https://i.gifer.com/Ysrm.gif',
'https://i.gifer.com/41we.gif',
'https://i.gifer.com/YTqY.gif',
'https://i.gifer.com/3AlV.gif',
'https://i.gifer.com/6kk.gif',
'https://i.gifer.com/7V9.gif',
'https://i.gifer.com/WXfH.gif',
'https://i.gifer.com/Z6W9.gif',
'https://i.gifer.com/zRz.gif',
'https://i.gifer.com/47tj.gif',
'https://i.gifer.com/WiCE.gif',
'https://i.gifer.com/YtyM.gif',
'https://i.gifer.com/19y9.gif',
'https://i.gifer.com/XwI3.gif',
'https://i.gifer.com/tIH.gif',
'https://i.gifer.com/1fLh.gif',
'https://i.gifer.com/3BBF.gif',
'https://i.gifer.com/1z9C.gif',
'https://i.gifer.com/42xT.gif',
'https://i.gifer.com/5RTM.gif',
'https://i.gifer.com/3hQC.gif',
'https://i.gifer.com/JUd.gif',
'https://i.gifer.com/2zGr.gif',
'https://i.gifer.com/Pan.gif',
'https://i.gifer.com/1AYl.gif',
'https://i.gifer.com/ZSj2.gif',
'https://i.gifer.com/XqyP.gif',
'https://i.gifer.com/XrH3.gif',
'https://i.gifer.com/6mx.gif',
'https://i.gifer.com/6K8M.gif',
'https://i.gifer.com/Z16t.gif',
'https://i.gifer.com/YIge.gif',
'https://i.gifer.com/1Khd.gif'
];
if (!localStorage.getItem('shuffledGifContainerURLs')) {
shuffleArray(gifContainerURLs);
localStorage.setItem('shuffledGifContainerURLs', JSON.stringify(gifContainerURLs));
}
}
function changeGifContainerImage() {
let shuffledGifContainerURLs = JSON.parse(localStorage.getItem('shuffledGifContainerURLs'));
let currentIndex = parseInt(localStorage.getItem('currentIndex')) || 0;
const newGifContainerURL = shuffledGifContainerURLs[currentIndex];
document.getElementById('gif-image').src = newGifContainerURL;
currentIndex = (currentIndex + 1) % shuffledGifContainerURLs.length;
localStorage.setItem('currentIndex', currentIndex.toString());
}
document.addEventListener('DOMContentLoaded', function() {
initShuffle();
changeGifContainerImage();
});
</script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const containerMenu = document.querySelector('section.container-menu');
const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
containerMenu.style.backgroundColor = randomColor;
});
</script>
<!-- VARIAVEIS LET -->
<script>
let timeoutId
</script>
<!-- DOM WRAPPER -->
<script>
const Dom = (selector) => {
const _elements = document.querySelectorAll(selector)
const wrapper = {
on(listeners) {
for (const [event, listener] of Object.entries(listeners)) {
_elements.forEach((element) => {
element.addEventListener(event, listener)
})
}
return wrapper
},
addClass: (...tokens) => {
_elements.forEach((element) => {
element.classList.add(...tokens)
})
return wrapper
},
removeClass: (...tokens) => {
_elements.forEach((element) => {
element.classList.remove(...tokens)
})
return wrapper
},
toggleClass: (token, force) => {
_elements.forEach((element) => {
element.classList.toggle(token, force)
})
return wrapper
},
style(styles) {
for (const [property, value] of Object.entries(styles)) {
console.log(value)
_elements.forEach((element) => {
element.style[property] = value
})
}
return wrapper
},
attr(attrs) {
for (const [name, value] of Object.entries(attrs)) {
_elements.forEach((element) => element.setAttribute(name, value))
}
return wrapper
},
html(value) {
_elements.forEach((element) => (element.innerHTML = value))
return wrapper
},
}
return wrapper
}
</script>
<script>
function gerarCorAleatoria() {
return '#' + Math.floor(Math.random()*16777215).toString(16);
}
function mudarCorDeFundo() {
document.body.style.background = gerarCorAleatoria();
}
window.onload = mudarCorDeFundo;
</script>
<!-- AĂĂES EM VARIAVEIS ROOT -->
<script>
document.documentElement.style.setProperty(
"--space-status-bar",
`${appGetStatusbarHeightSize() + 10}px`
)
document.documentElement.style.setProperty(
"--space-nav-bar",
`${appGetNavbarHeightSize() + 10}px`
)
</script>
<!-- VARIAVEIS -->
<script>
const Body = Dom("body")
const HomeHeader = Dom("section.home header")
const LogoHeader = Dom("#app_logo")
const HomeContainer = Dom("section.home")
const CarrierContainer = Dom("section.carrier-list")
const ProfileContainer = Dom("section.profile")
const ToolsContainer = Dom("section.container-tools")
const RegisterContainer = Dom("section.logs-container")
const ErrorContainer = Dom("section.container-error")
const LoadingContainer = Dom("section.loading")
const CheckuserContainer = Dom("section.checkuser")
const ClearDataContainer = Dom("section.clean-data-app")
const HotspotContainer = Dom("section.hotspot-container")
const TermsContainer = Dom("section.terms-container")
const RenewContainer = Dom("section.renew-alert")
const BackButtonCarrierContainer = Dom("#back-carrier-container")
const BackProfileContainer = Dom("#back-profile-container")
const BackToolsContainer = Dom("#back-tools-container")
const BackRegisterContainer = Dom("#register-logs-close")
const BackErrorContainer = Dom("section.container-error header svg")
const BackLoadingContainer = Dom("#loading-container-close")
const BackCheckuserContainer = Dom("#checkuser-close")
const BackClearDataContainer = Dom("#hidden-clear-data-app")
const BackHotspotContainer = Dom("#hidden-hotspot-container")
const BackTermsContainer = Dom("#hidden-terms-container")
const BackRenewContainer = Dom("#renew-alert-close")
const RenewUsername = Dom("#renew-username")
const ButtonOfCarrierList = Dom("#carrier-list-button")
const ValueOfCarrierListButton = Dom("#value-of-carrier-list-button")
const ButtonVpnStartOrStop = Dom("#start-stop-vpn-button")
const StatesConnectionValue = Dom("#state-value")
const LocalIpValue = Dom('#local-ip-value')
const ConfigVersion = Dom("#version")
const LabelDivUser = Dom("label[for='usernamediv']")
const LabelDivPassword = Dom("label[for='passworddiv']")
const LabelUUID = Dom("label[for='uuiddiv']")
const DivUsername = Dom("#usernamediv")
const DivPassword = Dom("#passworddiv")
const DivUUID = Dom("#uuiddiv")
const InputUsername = Dom("#username")
const InputPassword = Dom("#password")
const InputUUID = Dom("#uuid")
const EyeViewPasswordInput = Dom("#eye-view")
const EyeNotViewPasswordInput = Dom("#eye-not-view")
const ButtonSaveCreds = Dom("#save-creds")
const CheckuserName = Dom("#checkuser-name")
const CheckuserExpires = Dom("#checkuser-expires")
const CheckuserRemainingDays = Dom("#checkuser-remaing-days")
const CheckuserTotalConnection = Dom("#checkuser-total-conection")
const RegisterLogsText = Dom("section.logs-container section section p")
const ToastContainer = Dom("section.container-toast")
const Toast = Dom("section.container-toast div.toast")
const ToastIcon = Dom("section.container-toast div.toast div.icon")
const ToastText = Dom("section.container-toast div.toast span.text")
const HomeButton = Dom("#home")
const LoginButton = Dom("#login")
const ToolsButton = Dom("#tools")
const UpdateButton = Dom("#update")
const ButtonRegister = Dom("#register-button")
const ButtonCleanRegisterLogs = Dom("#clear-logs")
const ButtonStartStopHotspot = Dom("#enable-hotspot")
const ButtonOpenHotspotContainer = Dom("#hotspot-button-tools")
const TitleHotspotContainer = Dom("#title-hotspot")
const ValueOfButtonHotspotContainer = Dom("#value-button-hotspot")
const ButtonOpenClearDataContainer = Dom("#button-open-clear-data-app")
const ButtonConfirmClearData = Dom("#confirm-clean-data-app")
const ButtonOpenSpeedtest = Dom("#speedtest-tool")
const ButtonOpenApnConfig = Dom("#apn-tool")
const ButtonOpenBatteryOptimization = Dom("#battery-tool")
const ButtonOpenCheckuser = Dom("#checkuser-tool")
const ButtonOpenTerms = Dom("#button-open-terms-app")
const ErrorTitle = Dom("#error-title")
const ErrorDescription = Dom("#error-log")
</script>
<!-- FUNĂĂES DO LAYOUT -->
<script>
const appLogo = () => {
const logo = appGetConfigLabel("APP_LOGO")
if (!logo) {
return ""
} else {
return `${JSON.parse(logo).value}`
}
}
const appBackground = () => {
const background_type = appGetConfigLabel("APP_BACKGROUND_TYPE")
const background_color = appGetConfigLabel("APP_BACKGROUND_COLOR")
const background_image = appGetConfigLabel("APP_BACKGROUND_IMAGE")
if (!background_type) {
return ""
} else if (JSON.parse(background_type)?.value === "COLOR") {
return `${JSON.parse(background_color).value}`
} else {
return `url(${JSON.parse(background_image).value})`
}
}
const getConfigName = () => {
if (!appGetDefaultConfig()) {
return `${appTranslateText("LBL_CHOOSE_CONFIG")}`
} else {
return `${JSON.parse(appGetDefaultConfig())?.name}`
}
}
const getUsernameValue = () => `${appGetUsername() ?? ""}`
const getPasswordValue = () => `${appGetPassword() ?? ""}`
const getUUIDValue = () => `${appGetUUID() ?? ""}`
const getUsernamePlaceholder = () => `${appTranslateText("LBL_USERNAME")}`
const getPassowrdPlaceholder = () => `${appTranslateText("LBL_PASSWORD")}`
const getUUIDPlaceholder = () => `${appTranslateText("LBL_UUID")}`
const toggleInput = () => {
if (checkV2ray()) {
LabelDivUser.style({ display: "none" })
DivUsername.style({ display: "none" })
LabelDivPassword.style({ display: "none" })
DivPassword.style({ display: "none" })
LabelUUID.removeClass("hidden")
DivUUID.removeClass("hidden")
} else {
LabelDivUser.style({ display: "block" })
DivUsername.style({ display: "flex" })
LabelDivPassword.style({ display: "block" })
DivPassword.style({ display: "flex" })
LabelUUID.addClass("hidden")
DivUUID.addClass("hidden")
}
}
const showInputPasswordValue = () => {
EyeViewPasswordInput.addClass("hidden")
EyeNotViewPasswordInput.removeClass("hidden")
InputPassword.attr({ type: "text" })
}
const hiddenInputPasswordValue = () => {
EyeViewPasswordInput.removeClass("hidden")
EyeNotViewPasswordInput.addClass("hidden")
InputPassword.attr({ type: "password" })
}
const checkV2ray = () => {
const data = JSON.parse(appGetDefaultConfig())
if (!appGetDefaultConfig()) {
return false
} else if (data?.mode?.toLowerCase()?.startsWith("v2ray")) {
return true
} else {
return false
}
}
const getConnectionState = () => {
const rootStyles = getComputedStyle(document.documentElement)
const defaultColor = "--default-background-color"
const connectedColor = "--connected-background-color"
const connectingColor = "--connecting-background-color"
const errorColor = "--error-background-color"
const states = {
disconnected: () => {
const gradientColor = rootStyles.getPropertyValue(defaultColor)
document.documentElement.style.setProperty(
defaultColor,
"linear-gradient(135deg,#9f2fff,#0bb1d3,#7f47cb,#00ffff,#7a2cec,#4adfdf,#76fcfc,#7f47cb,#9f2fff,#0bb1d3,#7f47cb,#00ffff,#7a2cec,#4adfdf)"
)
return states
},
connecting: () => {
const gradientColor = rootStyles.getPropertyValue(connectingColor)
document.documentElement.style.setProperty(
defaultColor,
gradientColor
)
return states
},
connected: () => {
const gradientColor = rootStyles.getPropertyValue(connectedColor)
document.documentElement.style.setProperty(
defaultColor,
gradientColor
)
return states
},
error: () => {
const gradientColor = rootStyles.getPropertyValue(errorColor)
document.documentElement.style.setProperty(
defaultColor,
gradientColor
)
return states
},
}
return states
}
const connectionState = (state) => {
const connectionValue = `${state || appGetConnectionState()}`
switch (connectionValue) {
case "DISCONNECTED":
getConnectionState().disconnected()
StatesConnectionValue.html(appTranslateText('LBL_STATE_DISCONNECTED'))
break
case "CONNECTING":
showRegisterContainer()
getConnectionState().connecting()
StatesConnectionValue.html(appTranslateText('LBL_STATE_CONNECTING'))
break
case "CONNECTED":
getConnectionState().connected()
StatesConnectionValue.html(appTranslateText('LBL_STATE_CONNECTED'))
break
case "STOPPING":
getConnectionState().connecting()
StatesConnectionValue.html(appTranslateText('LBL_STATE_STOPPING'))
break
case "NO_NETWORK":
getConnectionState().error()
StatesConnectionValue.html(appTranslateText('LBL_STATE_NO_NETWORK'))
break
case "AUTH":
getConnectionState().connecting()
StatesConnectionValue.html(appTranslateText('LBL_STATE_AUTH'))
break
case "AUTH_FAILED":
getConnectionState().connecting()
StatesConnectionValue.html(appTranslateText('LBL_STATE_AUTH_FAILED'))
break
}
}
const startStopConnection = () => {
const state = appGetConnectionState()
if (appGetDefaultConfig()) {
state !== "CONNECTED" ? appStartConnection() : appStopConnection()
} else {
showCarrierListContainer()
}
}
const writeLogsRegister = () => {
const data = JSON.parse(appGetLogs())
let logs = ""
data.forEach((item) => {
logs += `${Object.keys(item)} ${item[Object.keys(item)]} <br>`
})
RegisterLogsText.html(logs)
document.querySelector("section.logs-container.active section section").scrollTop =
document.querySelector(
"section.logs-container.active section section p"
).scrollHeight
}
const writeCarrierList = () => {
const container = document.querySelector("section.carrier-list section")
const existingCategories = container.querySelectorAll("div").length
container.innerHTML = ""
const data = JSON.parse(appAllConfigs())
data.sort((a, b) => a.sorter - b.sorter)
data.forEach((item, index) =>
item.items.sort((a, b) => a.sorter - b.sorter)
)
data.forEach((category) => {
const div = document.createElement("div")
const h1 = document.createElement("h1")
h1.innerHTML = category.name
const ul = document.createElement("ul")
category.items.forEach((item) => {
const li = document.createElement("li")
li.innerHTML = `<img src="${item.icon}" alt="icon" /> <span>${item.name}</span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" /></svg>`
li.addEventListener("click", (e) => {
appSetConfig(item.id)
hiddenCarrierListContainer()
document
.querySelectorAll("li")
.forEach((item, index) => item.classList.remove("active"))
li.classList.add("active")
writeValueOnButtonOfCarrierList(item.name)
})
ul.appendChild(li)
})
div.appendChild(h1)
div.appendChild(ul)
container.appendChild(div)
})
}
const writeValueOnButtonOfCarrierList = (value) =>
ValueOfCarrierListButton.html(value ?? getConfigName())
const showToastContainer = (value) => {
Toast.style({ borderColor: "red, rgba(0, 0, 0, 0.5)" })
ToastIcon.style({ borderRight: "1px solid red" })
writeToastText(value)
ToastContainer.removeClass("masterSshAnimatedTime", "spaceOutDown")
ToastContainer.removeClass("masterSshAnimatedTime", "spaceInDown")
setTimeout(() => {
ToastContainer.addClass("masterSshAnimatedTime", "spaceInDown")
}, 100)
clearTimeout(timeoutId)
timeoutId = setTimeout(() => hiddenToastContainer(), 6000)
}
const showToastContainerWithError = (value) => {
Toast.style({ borderColor: "#FF0000" })
ToastIcon.style({ borderRight: "1px solid #FF0000" })
writeToastText(value)
ToastContainer.removeClass("masterSshAnimatedTime", "spaceOutDown")
ToastContainer.removeClass("masterSshAnimatedTime", "spaceInDown")
setTimeout(() => {
ToastContainer.addClass("masterSshAnimatedTime", "spaceInDown")
}, 100)
clearTimeout(timeoutId)
timeoutId = setTimeout(() => hiddenToastContainer(), 6000)
}
const writeToastText = (text) => {
ToastText.html(text)
}
const hiddenToastContainer = () => {
ToastContainer.removeClass("masterSshAnimatedTime", "spaceInDown")
ToastContainer.removeClass("masterSshAnimatedTime", "spaceOutDown")
ToastContainer.addClass("masterSshAnimatedTime", "spaceOutDown")
}
const showHomeContainer = () => {
hiddenAllContainers()
HomeContainer.addClass("active")
}
const showCarrierListContainer = () => {
writeCarrierList()
hiddenAllContainers()
CarrierContainer.addClass("active")
}
const hiddenCarrierListContainer = () => {
showHomeContainer()
}
const showProfileContainer = () => {
hiddenAllContainers()
ProfileContainer.addClass("active")
}
const hiddenProfileContainer = () => {
showHomeContainer()
}
const showToolsContainer = () => {
hiddenAllContainers()
ToolsContainer.addClass("active")
}
const hiddenToolsContainer = () => {
showHomeContainer()
}
const showRegisterContainer = () => {
RegisterContainer.addClass("active")
}
const hiddenRegisterContainer = () => {
RegisterContainer.removeClass('active')
}
const writeErrorContainer = (model) => {
const data = JSON.parse(model)
ErrorTitle.html(data.title)
ErrorDescription.html(data.content)
showErrorContainer()
}
const showErrorContainer = () => {
hiddenAllContainers()
ErrorContainer.addClass("active")
}
const hiddenErrorContainer = () => {
showHomeContainer()
}
const showLoadingContainer = () => {
const data = JSON.parse(appGetDefaultConfig())
if (data?.url_check_user) {
LoadingContainer.addClass("active")
}
hiddenRegisterContainer()
}
const hiddenLoadingContainer = () => {
LoadingContainer.removeClass("active")
}
const showRenewContainer = () => {
RenewContainer.addClass('active')
}
const hiddenRenewContainer = () => {
RenewContainer.removeClass('active')
}
const writeCheckuserContainer = (model) => {
const data = JSON.parse(model)
CheckuserName.html(`USUĂRIO: ${data.username}`)
CheckuserExpires.html(`EXPIRA EM: ${data.expiration_date}`)
CheckuserRemainingDays.html(`RESTA: ${data.expiration_days} DIAS`)
CheckuserTotalConnection.html(
`CONEXĂES: ${data.count_connections}/${data.limit_connections}`
)
if (data.expiration_days <= 5) {
RenewUsername.html(`Caro ${data.username}`)
showRenewContainer()
} else {
hiddenRenewContainer()
}
showCheckuserContainer()
}
const showCheckuserContainer = () => {
hiddenLoadingContainer()
CheckuserContainer.addClass("active")
}
const hiddenCheckuserContainer = () => {
CheckuserContainer.removeClass("active")
}
const showClearDataAppContainer = () => {
ClearDataContainer.addClass("active")
}
const hiddenClearDataAppContainer = () => {
ClearDataContainer.removeClass("active")
}
const writeLocalIpValue = () => {
LocalIpValue.html(`${appGetCarrierName()}: ${appGetLocalIp()}`)
}
const startHotspot = () => {
appStartHotspot()
TitleHotspotContainer.html("ROTEAMENTO LIGADO")
ValueOfButtonHotspotContainer.html("DESLIGAR HOTSPOT")
}
const stopHotspot = () => {
appStopHotspot()
TitleHotspotContainer.html("ROTEAMENTO DESLIGADO")
ValueOfButtonHotspotContainer.html("LIGAR HOTSPOT")
}
const toggleHotspot = () => {
appGetStatusHotspot() === "STOPPED" ? startHotspot() : stopHotspot()
}
const setStatusHotspot = () => {
if (appGetStatusHotspot() === "STOPPED") {
TitleHotspotContainer.html("ROTEAMENTO DESLIGADO")
ValueOfButtonHotspotContainer.html("LIGAR HOTSPOT")
} else {
TitleHotspotContainer.html("ROTEAMENTO LIGADO")
ValueOfButtonHotspotContainer.html("DESLIGAR HOTSPOT")
}
}
const showHotspotContainer = () => {
HotspotContainer.addClass("active")
}
const hiddenHotspotContainer = () => {
HotspotContainer.removeClass("active")
}
const showTermsContainer = () => {
TermsContainer.addClass("active")
}
const hiddenTermsContainer = () => {
TermsContainer.removeClass("active")
}
const openSpeedtest = () => {
appIntoBrowser("https://fast.com")
}
const hiddenAllContainers = () => {
HomeContainer.removeClass("active")
CarrierContainer.removeClass("active")
ProfileContainer.removeClass("active")
ToolsContainer.removeClass("active")
RegisterContainer.removeClass("active")
ErrorContainer.removeClass("active")
}
const setLoopFunctionsExecute = () => {
setInterval(() => {
writeLocalIpValue()
ConfigVersion.html(`VERSĂO: ${appGetConfigVersion()}`)
}, 200)
}
const allFunctionsExecute = () => {
connectionState()
toggleInput()
writeLogsRegister()
setStatusHotspot()
}
</script>
<!-- FUNĂĂES PARA O APP -->
<script>
const dtShowSuccessToastListener = (value) => showToastContainer(value)
const dtShowErrorToastListener = (value) =>
showToastContainerWithError(value)
const dtConfigClickListener = () => {
toggleInput()
InputUsername.attr({ value: getUsernameValue() })
InputPassword.attr({ value: getPasswordValue() })
InputUUID.attr({ value: getUUIDValue() })
}
const dtVpnStateListener = (state) => connectionState(state)
const dtOnNewLogListener = () => writeLogsRegister()
const dtMessageErrorListener = (model) => writeErrorContainer(model)
const dtCheckUserStartedListener = () => showLoadingContainer()
const dtCheckUserModelListener = (model) => writeCheckuserContainer(model)
</script>
<!-- AĂĂES -->
<script>
HomeHeader.style({
background: appBackground(),
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
})
LogoHeader.attr({ src: appLogo() })
ConfigVersion.html(`VERSĂO: ${appGetConfigVersion()}`)
HomeButton.on({ click: () => showHomeContainer() })
ToolsButton.on({ click: () => showToolsContainer() })
UpdateButton.on({ click: () => AppUpdate() })
BackButtonCarrierContainer.on({
click: () => hiddenCarrierListContainer(),
})
BackProfileContainer.on({ click: () => hiddenProfileContainer() })
BackToolsContainer.on({ click: () => hiddenToolsContainer() })
BackRegisterContainer.on({ click: () => hiddenRegisterContainer() })
BackErrorContainer.on({ click: () => hiddenErrorContainer() })
ButtonOfCarrierList.on({ click: () => showCarrierListContainer() })
ValueOfCarrierListButton.html(getConfigName())
ButtonVpnStartOrStop.on({ click: () => startStopConnection() })
InputUsername.attr({ value: getUsernameValue() })
InputPassword.attr({ value: getPasswordValue() })
InputUUID.attr({ value: getUUIDValue() })
InputUsername.attr({ placeholder: getUsernamePlaceholder() })
InputPassword.attr({ placeholder: getPassowrdPlaceholder() })
InputUUID.attr({ placeholder: getUUIDPlaceholder() })
InputUsername.on({ input: (e) => appSetUsername(e.target.value) })
InputPassword.on({ input: (e) => appSetPassword(e.target.value) })
InputUUID.on({ input: (e) => appSetUUID(e.target.value) })
EyeViewPasswordInput.on({ click: () => showInputPasswordValue() })
EyeNotViewPasswordInput.on({ click: () => hiddenInputPasswordValue() })
ButtonSaveCreds.on({ click: () => hiddenProfileContainer() })
ButtonRegister.on({ click: () => showRegisterContainer() })
ButtonCleanRegisterLogs.on({ click: () => appCleanLogs() })
ButtonOpenHotspotContainer.on({ click: () => showHotspotContainer() })
BackHotspotContainer.on({ click: () => hiddenHotspotContainer() })
ButtonStartStopHotspot.on({ click: () => toggleHotspot() })
ButtonOpenClearDataContainer.on({
click: () => showClearDataAppContainer(),
})
BackClearDataContainer.on({ click: () => hiddenClearDataAppContainer() })
ButtonConfirmClearData.on({ click: () => appClearData() })
BackLoadingContainer.on({ click: () => hiddenLoadingContainer() })
BackCheckuserContainer.on({ click: () => hiddenCheckuserContainer() })
BackRenewContainer.on({ click: () => hiddenRenewContainer() })
BackTermsContainer.on({ click: () => hiddenTermsContainer() })
ButtonOpenSpeedtest.on({ click: () => openSpeedtest() })
ButtonOpenApnConfig.on({ click: () => appApnConfiguration() })
ButtonOpenBatteryOptimization.on({ click: () => appBatteryOptimize() })
ButtonOpenCheckuser.on({ click: () => appStartCheckUser() })
ButtonOpenTerms.on({ click: () => showTermsContainer() })
setLoopFunctionsExecute()
allFunctionsExecute()
</script>
<div id="player-container">
<video id="player" controls playsinline></video>
</div>
<!-- Lista de canais -->
<div id="lista-canais"></div>
</body>
</html>