MeuHTML

SUBMITTED BY: appcass

DATE: Sept. 13, 2023, 2:13 a.m.

UPDATED: Sept. 13, 2023, 8:02 p.m.

FORMAT: Text only

SIZE: 20.9 kB

History Raw Download

HITS: 934

Report
  1. <!DOCTYPE html>
  2. <html lang="pt-BR">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9. <title>MCASSSADOR</title>
  10. <link rel="stylesheet" href="css.css">
  13. <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
  14. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
  15. integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  16. <script type="text/javascript"
  17. src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
  18. integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
  19. crossorigin="anonymous"></script>
  21. <style>
  22. @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');
  24. * {
  25. margin: 0;
  26. padding: 0;
  27. box-sizing: border-box;
  28. font-family: 'Roboto', sans-serif;
  29. }
  31. body {
  32. height: 100vh;
  33. display: flex;
  34. flex-direction: column;
  35. align-items: center;
  36. justify-content: center;
  37. }
  38. .logo-container {
  39. display: flex;
  40. align-items: center;
  41. justify-content: center;
  42. }
  44. .logo-container img {
  45. /* Tamanho da logo */
  46. width: 250px;
  47. height: 250px;
  48. }
  50. .container {
  51. height: 100%;
  52. display: flex;
  53. flex-direction: column;
  54. justify-content: center;
  55. max-width: 450px;
  56. }
  58. .card2 {
  59. border-radius: 20px;
  60. margin: 10px 50px 0 50px;
  61. background-color: #0000005c;
  62. border: none;
  63. font-size: 20px;
  64. }
  66. .card {
  67. background-color: #0000005c;
  68. }
  73. .btn-light {
  74. background-color: #00000000 !important;
  75. color: #FFF;
  76. border: 1px solid #FFF; /* Adiciona a borda branca */
  77. border-radius: 20px;
  78. outline: none;
  79. margin-top: 5px;
  80. }
  81. .btn-menu {
  82. background-color: #2b2b2b !important;
  83. color: #FFF;
  84. border: 1px solid #FFF; /* Adiciona a borda branca */
  85. border-radius: 20px;
  86. outline: none;
  87. margin: 5px;
  88. }
  89. .modal-content {
  90. background-color: #0000005c;
  91. }
  93. .input-group,
  94. .form-control,
  95. .input-group-text {
  96. background-color: #00000000 !important;
  97. color: #FFF;
  98. border: 1px solid #FFF; /* Adiciona a borda branca */
  99. border-radius: 20px;
  100. outline: none;
  101. }
  102. .input-group-noborder {
  103. background-color: #00000000 !important;
  104. color: #fff;
  105. position:relative;
  106. top:4px ;
  107. padding: 0;
  108. border: none; /* Adiciona a borda branca */
  109. outline: none;
  110. }
  113. .form-control::placeholder {
  114. color: #FFF;
  115. }
  117. .form-control:focus {
  118. color: #FFF;
  119. outline: none;
  120. box-shadow: none;
  121. }
  122. .custom-card {
  123. background-color: #2a2828;
  124. border-radius: 10px;
  125. color: whitesmoke;
  126. padding: 3px;
  127. margin-bottom: 4px;
  128. }
  130. .transparent-btn {
  131. background-color: transparent;
  132. color: white;
  133. border: 2px solid white;
  134. border-radius: 0;
  135. padding: 10px 15px;
  136. cursor: pointer;
  137. }
  138. </style>
  139. </head>
  140. <body>
  143. <div class="container">
  146. <div class="logo-container">
  147. <!--Link da logo-->
  148. <img id="logoImg" alt="logo" width="200" height="200">
  149. </div>
  153. <div class="card border-0 p-2 shadow mb-3">
  156. <div class="input" id="config">
  158. <button type="button" id="configModalButton" class="form-control" data-bs-toggle="modal" data-bs-target="configModal">
  159. <label>Selecione uma Conexão</label>
  160. </button>
  161. </div>
  163. <div class=" mb-2 form-control shadow">
  164. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
  165. class="bi bi-person" viewBox="0 0 16 16">
  166. <path
  167. 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" />
  168. </svg>
  169. <input class="input-group-noborder" type="text" placeholder="usuario" id="user"/>
  170. </div>
  172. <div class="mb-2 form-control shadow">
  173. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-key"
  174. viewBox="0 0 16 16">
  175. <path
  176. 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" />
  177. <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
  178. </svg>
  179. <input class="input-group-noborder"type="text" placeholder="senha" id="password" />
  180. </div>
  183. <div class="d-flex justify-content-between">
  185. <button class="btn btn-light w-100 shadow " onclick="startOrStop();" id="startOrStopButton">INICIAR</button>
  187. <button class="btn btn-light shadow mr-3" id=" " style="margin-left: 3px;" onclick="app.searchUpdate()" >
  188. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
  189. <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"/>
  190. <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"/>
  191. </svg>
  192. </button>
  193. <button class="btn btn-light shadow mr-3" onclick="Android.logsstart();" id="loggerButton" style="margin-left: 3px;">
  194. <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">
  195. <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"/>
  196. <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"/>
  197. </svg>
  198. </button>
  200. </div>
  202. <button onclick="ToolsModal.show()" class="mt-2 form-control shadow">Mais</button>
  206. </div>
  209. <div class="card my-3 w-100 text-center border-0 p-2 shadow fs-5 text-uppercase fw-bold" id="info"></div>
  210. <div id="checkuserDiv" class="text centered-div">
  211. </div>
  212. </div>
  214. </div>
  216. <div class="tool webm modal fade" index="-1" id="ToolsModal">
  217. <div class="modal-dialog modal-dialog-centered" role="document">
  220. <div class="modal-content">
  221. <div class="tool modal-header">
  222. <h5 class="modal-title" style="color:#ffffff;">FERRAMENTAS</h5>
  223. </div>
  226. <button class="btn btn-menu shadow" onclick="Android.abrirapn()">Abrir Apn</button>
  228. <button class="btn btn-menu shadow" onclick="Android.forcarlte()"> forçar 3g/4g/5g</button>
  230. <button class="btn btn-menu shadow" onclick="Android.abrircom('https://t.me/ExemploBot')">Link de contato</button>
  232. <button class="btn btn-menu shadow" onclick="Android.otimizacaodebatery()">Desativar otimização de bateria</button>
  234. <div class="tool modal-footer">
  235. <button type="button" class="btn btn-primary" data-bs-dismiss="modal" style="background-color: var(--btn-modal);">FECHAR</button>
  236. </div>
  237. </div>
  238. </div>
  239. </div>
  240. <div class="modal fade" tabindex="-1" role="dialog" id="servers">
  241. <div class="modal-dialog modal-dialog-centered" role="document">
  242. <div class="modal-content rounded-3 shadow">
  243. <div class="modal-header border-bottom-0 pb-0">
  244. <h1 class="modal-title fs-5 text-white">CONFIGURAÇÕES</h1>
  245. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  246. aria-label="Close"></button>
  247. </div>
  248. <div class="modal-body">
  250. <div class="modal-body">
  251. <h5 class="text-white">Selecione uma conexão:</h5>
  253. <div class="card-columns" id="serverOptions"></div>
  256. <div class="modal fade" aria-hidden="true" id="checkuserModal" tabindex="-1">
  257. <div class="modal-dialog modal-dialog-centered">
  258. <div class="modal-content">
  259. <div class="modal-header">
  260. <h5 class="modal-title">Informações do usuario</h5>
  261. <button type="button" class="close-btn" data-bs-dismiss="modal" aria-label="Close">
  262. <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
  263. class="bi bi-x-lg" viewBox="0 0 16 16">
  264. <path
  265. 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" />
  266. </svg>
  267. </button>
  268. </div>
  269. <div class="modal-body">
  270. <div id="checkuser">Checkuser</div>
  271. </div>
  272. </div>
  273. </div>
  274. </div>
  276. <div class="modal fade" tabindex="-1" role="dialog" id="logs">
  277. <div class="modal-dialog modal-dialog-centered" role="document">
  278. <div class="modal-content rounded-3 shadow">
  279. <div class="modal-header border-bottom-0 pb-0">
  280. <h1 class="modal-title fs-5 text-white">LOGS</h1>
  281. </div>
  282. <div class="modal-body">
  283. <ul id="logList"></ul>
  284. </div>
  285. <div class="modal-footer flex-nowrap p-0">
  286. <button type="button" id="logsClean" onclick="app.clearLogs()" >LIMPAR</button>
  287. <button type="button" id="logsClose" data-bs-dismiss="modal">FECHAR</button>
  288. </div>
  289. </div>
  290. </div>
  291. </div>
  293. <div class="modal fade" aria-hidden="true" id="checkuserModal" tabindex="-1">
  294. <div class="modal-dialog modal-dialog-centered">
  295. <div class="modal-content">
  296. <div class="modal-header">
  297. <h5 class="modal-title">Informações do usuario</h5>
  298. <button type="button" class="close-btn" data-bs-dismiss="modal" aria-label="Close">
  299. <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
  300. class="bi bi-x-lg" viewBox="0 0 16 16">
  301. <path
  302. 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" />
  303. </svg>
  304. </button>
  305. </div>
  306. <div class="modal-body">
  307. <div id="checkuser">Checkuser</div>
  310. </div>
  311. </div>
  315. </div>
  316. </div>
  317. </div>
  319. <script type="text/javascript" src="bootstrap.js"></script>
  324. <script>
  329. const logoImg = document.getElementById("logoImg");
  330. const configModalButton = document.getElementById("configModalButton");
  331. const user = document.getElementById("user");
  332. const pass = document.getElementById("password");
  333. const startOrStopButton = document.getElementById("startOrStopButton");
  334. const updateButton = document.getElementById("updateButton");
  335. const loggerButton = document.getElementById("loggerButton");
  336. const state = document.getElementById("state");
  338. const operadora = document.getElementById("Operadora");
  340. operadora.innerHTML = "Operadora: " + app.getOperadoraEmUso();
  341. // setTema();
  343. const version = document.getElementById("Version");
  345. version.innerHTML = "Versão da config: " + app.getVersion();
  347. function loadLogs() {
  348. var logList = document.getElementById("logList");
  349. var logs = JSON.parse(app.getlogs())
  351. var formattedLogs = '';
  352. logs.forEach(item => {
  353. 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);">';
  354. formattedLogs += item.TIME;
  355. formattedLogs += '</li>';
  356. });
  358. logList.innerHTML = '<ul class="list-group">' + formattedLogs + '</ul>';
  359. }
  365. var modal = new bootstrap.Modal(document.getElementById('configModal'));
  367. const serverOptions = document.getElementById('serverOptions');
  368. var servers = JSON.parse(app.getJsonServers());
  373. f
  374. function createServerCard(server) {
  375. const card = document.createElement('div');
  376. card.classList.add('set-configs');
  377. card.style.backgroundColor = server.ConfigColor;
  380. var configImage = document.createElement('img');
  381. configImage.src = server.ConfigImage;
  383. const cardBody = document.createElement('div');
  384. cardBody.classList.add('card-body');
  386. const cardTitle = document.createElement('h5');
  387. cardTitle.classList.add('card-title');
  389. const configName = document.createElement('span');
  390. configName.textContent = server.ConfigName;
  391. cardTitle.appendChild(configImage);
  392. cardTitle.appendChild(configName);
  395. cardBody.appendChild(cardTitle);
  398. card.appendChild(cardBody);
  400. card.addEventListener('click', function () {
  401. selectServer(server);
  402. });
  404. return card;
  405. }
  408. function selectServer(server) {
  410. configModalButton.value = server.ConfigName;
  411. app.returnConfigId(server.ConfigId);
  413. localStorage.setItem('configSelecionada', JSON.stringify(server));
  415. modal.hide();
  416. }
  419. servers.forEach(function (server) {
  420. const card = createServerCard(server);
  421. serverOptions.appendChild(card);
  422. });
  426. function startOrStop() {
  427. if (user.value != "" && pass.value != "") {
  428. localStorage.setItem('usuario', user.value);
  429. localStorage.setItem('senha', pass.value);
  430. app.setUserAndPass(user.value, pass.value);
  431. }
  433. app.startOrStop();
  436. }
  439. var previousLogs = [];
  441. function checkAndLoadLogs() {
  442. var logs = JSON.parse(app.getlogs());
  444. if (!arraysAreEqual(logs, previousLogs)) {
  445. previousLogs = logs;
  446. loadLogs();
  447. }
  448. }
  452. function arraysAreEqual(arr1, arr2) {
  453. if (arr1.length !== arr2.length) {
  454. return false;
  455. }
  457. for (var i = 0; i < arr1.length; i++) {
  458. if (arr1[i].TIME !== arr2[i].TIME) {
  459. return false;
  460. }
  461. }
  463. return true;
  464. }
  466. async function startCheckuser() {
  467. try {
  468. const dataString = await app.getCheckuserDados();
  470. console.log("CHECKUSER: " + dataString);
  472. if (dataString !== "null") {
  473. const data = JSON.parse(dataString);
  475. var myModal = new bootstrap.Modal(document.getElementById('checkuserModal'));
  476. myModal.show();
  478. const strCheckValidade =
  479. `Usuario: <span style="color: green;">${data.username}</span><br/>
  480. Expira em: <span style="color: green;">${data.expiration_date}</span><br/>
  481. Dias Restantes: <span style="color: green;">${data.expiration_days}</span><br/>
  482. Conectados: <span style="color: green;">${data.count_connection} / ${data.limiter_user}</span>`;
  484. document.getElementById('checkuser').innerHTML = strCheckValidade;
  485. }
  486. } catch (error) {
  487. console.error("Erro ao buscar dados do usuário:", error);
  488. }
  489. }
  491. var previousState = null;
  494. function updateState() {
  495. var currentState = app.getState();
  497. if (currentState !== previousState) {
  499. if (currentState == "Conectado") {
  500. state.innerHTML = "<span style='color: green;'>"+ currentState +"</span>";
  501. startCheckuser();
  502. startOrStopButton.innerText = "Parar VPN"
  503. } else if (currentState == "Iniciando" || currentState == "Autenticando" || currentState == "Conectando") {
  504. state.innerHTML = "<span style='color: orange;'>" + currentState + "</span>";
  505. startOrStopButton.innerText = "Parar VPN"
  506. } else if (currentState == "Reconectando" || currentState == "Desconectado") {
  507. state.innerHTML = "<span style='color: red;'>" + currentState + "</span>";
  508. } else {
  509. state.innerHTML = "<span style='color: orange;'>" + currentState + "</span>";
  510. startOrStopButton.innerText = "Iniciar VPN"
  511. }
  513. previousState = currentState;
  514. }
  516. }
  518. setInterval(function() {
  519. updateState();
  520. checkAndLoadLogs();
  521. }, 0);
  524. logoImg.src = app.getLogoUrl();
  525. document.body.style.backgroundImage = `url('${app.getBackUrl()}')`;
  526. document.body.style.backgroundSize = 'cover';
  527. document.body.style.backgroundRepeat = 'no-repeat';
  528. document.body.style.backgroundPosition = 'center';
  530. document.addEventListener("DOMContentLoaded", function () {
  531. // Verificar se há usuário e senha salvos no localStorage
  532. const usuarioSalvo = localStorage.getItem('usuario');
  533. const senhaSalva = localStorage.getItem('senha');
  535. const configSalva = localStorage.getItem('configSelecionada');
  537. if (configSalva) {
  538. const configSelecionada = JSON.parse(configSalva);
  540. // Atualize a interface do usuário com a configuração salva
  541. configModalButton.value = configSelecionada.ConfigName;
  542. // Você pode fazer outras ações relacionadas à configuração aqui, se necessário
  543. }
  545. if (usuarioSalvo && senhaSalva) {
  546. // Preencher os campos de usuário e senha com os valores salvos
  547. user.value = usuarioSalvo;
  548. pass.value = senhaSalva;
  549. }
  550. });
  552. </script>
  553. </body>
  555. </html>
comments powered by Disqus