<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MCASSSADOR</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo-container {
display: flex;
justify-content: center;
}
.logo-container img {
/* Tamanho da logo */
width: 250px;
height: 250px;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 450px;
}
.card2 {
border-radius: 20px;
margin: 10px 50px 0 50px;
background-color: #0000005c;
border: none;
font-size: 20px;
}
.card {
background-color: #0000005c;
}
.btn-light {
background-color: #00000000 !important;
color: #FFF;
border: 1px solid #FFF; /* Adiciona a borda branca */
border-radius: 20px;
outline: none;
margin-top: 5px;
}
.btn-menu {
background-color: #2b2b2b !important;
color: #FFF;
border: 1px solid #FFF; /* Adiciona a borda branca */
border-radius: 20px;
outline: none;
margin: 5px;
}
.modal-content {
background-color: #0000005c;
}
.input-group,
.form-control,
.input-group-text {
background-color: #00000000 !important;
color: #FFF;
border: 1px solid #FFF; /* Adiciona a borda branca */
border-radius: 20px;
outline: none;
}
.input-group-noborder {
background-color: #00000000 !important;
color: #fff;
position:relative;
top:4px ;
padding: 0;
border: none; /* Adiciona a borda branca */
outline: none;
}
.form-control::placeholder {
color: #FFF;
}
.form-control:focus {
color: #FFF;
outline: none;
box-shadow: none;
}
.custom-card {
background-color: #2a2828;
border-radius: 10px;
color: whitesmoke;
padding: 3px;
margin-bottom: 4px;
}
.transparent-btn {
background-color: transparent;
color: white;
border: 2px solid white;
border-radius: 0;
padding: 10px 15px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="logo-container">
<!--Link da logo-->
<img id="logoImg" alt="logo" width="200" height="200">
</div>
<div class="card border-0 p-2 shadow mb-3">
<div class="input" id="config">
<button type="button" id="configModalButton" class="form-control" data-bs-toggle="modal" data-bs-target="configModal">
<label>Selecione uma Conexão</label>
</button>
</div>
<div class=" mb-2 form-control shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 class="input-group-noborder" type="text" placeholder="usuario" id="user"/>
</div>
<div class="mb-2 form-control shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 class="input-group-noborder"type="text" placeholder="senha" id="password" />
</div>
<div class="d-flex justify-content-between">
<button class="btn btn-light w-100 shadow " onclick="startOrStop();" id="startOrStopButton">INICIAR</button>
<button class="btn btn-light shadow mr-3" id="updateButton" style="margin-left: 3px;" onclick="app.searchUpdate()" >
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
</svg>
</button>
<button class="btn btn-light shadow mr-3" onclick="Android.logsstart();" id="loggerButton" style="margin-left: 3px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-text" viewBox="0 0 16 16">
<path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
<path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
</svg>
</button>
</div>
<button onclick="ToolsModal.show()" class="mt-2 form-control shadow">Mais</button>
</div>
<div class="card my-3 w-100 text-center border-0 p-2 shadow fs-5 text-uppercase fw-bold" id="info"></div>
<div id="checkuserDiv" class="text centered-div">
</div>
</div>
</div>
<div class="tool webm modal fade" index="-1" id="ToolsModal">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="tool modal-header">
<h5 class="modal-title" style="color:#ffffff;">FERRAMENTAS</h5>
</div>
<button class="btn btn-menu shadow" onclick="Android.abrirapn()">Abrir Apn</button>
<button class="btn btn-menu shadow" onclick="Android.forcarlte()"> forçar 3g/4g/5g</button>
<button class="btn btn-menu shadow" onclick="Android.abrircom('https://t.me/ExemploBot')">Link de contato</button>
<button class="btn btn-menu shadow" onclick="Android.otimizacaodebatery()">Desativar otimização de bateria</button>
<div class="tool modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" style="background-color: var(--btn-modal);">FECHAR</button>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="servers">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content rounded-3 shadow">
<div class="modal-header border-bottom-0 pb-0">
<h1 class="modal-title fs-5 text-white">CONFIGURAÇÕES</h1>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body">
<h5 class="text-white">Selecione uma conexão:</h5>
<div class="card-columns" id="serverOptions"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script>
const logoImg = document.getElementById("logoImg");
const configModalButton = document.getElementById("configModalButton");
const user = document.getElementById("user");
const pass = document.getElementById("password");
const startOrStopButton = document.getElementById("startOrStopButton");
const updateButton = document.getElementById("updateButton");
const loggerButton = document.getElementById("loggerButton");
const state = document.getElementById("state");
const operadora = document.getElementById("Operadora");
operadora.innerHTML = "Operadora: " + app.getOperadoraEmUso();
// setTema();
const version = document.getElementById("Version");
version.innerHTML = "Versão da config: " + app.getVersion();
function loadLogs() {
var logList = document.getElementById("logList");
var logs = JSON.parse(app.getlogs())
var formattedLogs = '';
logs.forEach(item => {
formattedLogs += '<li class="list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap" style="font-size: 12px; color: var(--text-color);">';
formattedLogs += item.TIME;
formattedLogs += '</li>';
});
logList.innerHTML = '<ul class="list-group">' + formattedLogs + '</ul>';
}
var modal = new bootstrap.Modal(document.getElementById('configModal'));
const serverOptions = document.getElementById('serverOptions');
var servers = JSON.parse(app.getJsonServers());
function createServerCard(server) {
const card = document.createElement('div');
card.classList.add('set-configs');
card.style.backgroundColor = server.ConfigColor;
var configImage = document.createElement('img');
configImage.src = server.ConfigImage;
const cardBody = document.createElement('div');
cardBody.classList.add('card-body');
const cardTitle = document.createElement('h5');
cardTitle.classList.add('card-title');
const configName = document.createElement('span');
configName.textContent = server.ConfigName;
cardTitle.appendChild(configImage);
cardTitle.appendChild(configName);
cardBody.appendChild(cardTitle);
card.appendChild(cardBody);
card.addEventListener('click', function () {
selectServer(server);
});
return card;
}
function selectServer(server) {
configModalButton.value = server.ConfigName;
app.returnConfigId(server.ConfigId);
localStorage.setItem('configSelecionada', JSON.stringify(server));
modal.hide();
}
servers.forEach(function (server) {
const card = createServerCard(server);
serverOptions.appendChild(card);
});
function startOrStop() {
if (user.value != "" && pass.value != "") {
localStorage.setItem('usuario', user.value);
localStorage.setItem('senha', pass.value);
app.setUserAndPass(user.value, pass.value);
}
app.startOrStop();
}
var previousLogs = [];
function checkAndLoadLogs() {
var logs = JSON.parse(app.getlogs());
if (!arraysAreEqual(logs, previousLogs)) {
previousLogs = logs;
loadLogs();
}
}
function arraysAreEqual(arr1, arr2) {
if (arr1.length !== arr2.length) {
return false;
}
for (var i = 0; i < arr1.length; i++) {
if (arr1[i].TIME !== arr2[i].TIME) {
return false;
}
}
return true;
}
async function startCheckuser() {
try {
const dataString = await app.getCheckuserDados();
console.log("CHECKUSER: " + dataString);
if (dataString !== "null") {
const data = JSON.parse(dataString);
var myModal = new bootstrap.Modal(document.getElementById('checkuserModal'));
myModal.show();
const strCheckValidade =
`Usuario: <span style="color: green;">${data.username}</span><br/>
Expira em: <span style="color: green;">${data.expiration_date}</span><br/>
Dias Restantes: <span style="color: green;">${data.expiration_days}</span><br/>
Conectados: <span style="color: green;">${data.count_connection} / ${data.limiter_user}</span>`;
document.getElementById('checkuser').innerHTML = strCheckValidade;
}
} catch (error) {
console.error("Erro ao buscar dados do usuário:", error);
}
}
var previousState = null;
function updateState() {
var currentState = app.getState();
if (currentState !== previousState) {
if (currentState == "Conectado") {
state.innerHTML = "<span style='color: green;'>"+ currentState +"</span>";
startCheckuser();
startOrStopButton.innerText = "Parar VPN"
} else if (currentState == "Iniciando" || currentState == "Autenticando" || currentState == "Conectando") {
state.innerHTML = "<span style='color: orange;'>" + currentState + "</span>";
startOrStopButton.innerText = "Parar VPN"
} else if (currentState == "Reconectando" || currentState == "Desconectado") {
state.innerHTML = "<span style='color: red;'>" + currentState + "</span>";
} else {
state.innerHTML = "<span style='color: orange;'>" + currentState + "</span>";
startOrStopButton.innerText = "Iniciar VPN"
}
previousState = currentState;
}
}
setInterval(function() {
updateState();
checkAndLoadLogs();
}, 0);
logoImg.src = app.getLogoUrl();
document.body.style.backgroundImage = `url('${app.getBackUrl()}')`;
document.body.style.backgroundSize = 'cover';
document.body.style.backgroundRepeat = 'no-repeat';
document.body.style.backgroundPosition = 'center';
document.addEventListener("DOMContentLoaded", function () {
// Verificar se há usuário e senha salvos no localStorage
const usuarioSalvo = localStorage.getItem('usuario');
const senhaSalva = localStorage.getItem('senha');
const configSalva = localStorage.getItem('configSelecionada');
if (configSalva) {
const configSelecionada = JSON.parse(configSalva);
// Atualize a interface do usuário com a configuração salva
configModalButton.value = configSelecionada.ConfigName;
// Você pode fazer outras ações relacionadas à configuração aqui, se necessário
}
if (usuarioSalvo && senhaSalva) {
// Preencher os campos de usuário e senha com os valores salvos
user.value = usuarioSalvo;
pass.value = senhaSalva;
}
});
</script>
</body>
</html>
