MeuHTML

SUBMITTED BY: appcass

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

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

FORMAT: Text only

SIZE: 19.2 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>
  11. <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
  12. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
  13. integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  14. <script type="text/javascript"
  15. src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
  16. integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
  17. crossorigin="anonymous"></script>
  19. <style>
  20. @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');
  22. * {
  23. margin: 0;
  24. padding: 0;
  25. box-sizing: border-box;
  26. font-family: 'Roboto', sans-serif;
  27. }
  29. body {
  30. height: 100vh;
  31. display: flex;
  32. flex-direction: column;
  33. align-items: center;
  34. justify-content: center;
  35. }
  36. .logo-container {
  37. display: flex;
  38. justify-content: center;
  39. }
  41. .logo-container img {
  42. /* Tamanho da logo */
  43. width: 250px;
  44. height: 250px;
  45. }
  47. .container {
  48. height: 100%;
  49. display: flex;
  50. flex-direction: column;
  51. justify-content: center;
  52. max-width: 450px;
  53. }
  55. .card2 {
  56. border-radius: 20px;
  57. margin: 10px 50px 0 50px;
  58. background-color: #0000005c;
  59. border: none;
  60. font-size: 20px;
  61. }
  63. .card {
  64. background-color: #0000005c;
  65. }
  70. .btn-light {
  71. background-color: #00000000 !important;
  72. color: #FFF;
  73. border: 1px solid #FFF; /* Adiciona a borda branca */
  74. border-radius: 20px;
  75. outline: none;
  76. margin-top: 5px;
  77. }
  78. .btn-menu {
  79. background-color: #2b2b2b !important;
  80. color: #FFF;
  81. border: 1px solid #FFF; /* Adiciona a borda branca */
  82. border-radius: 20px;
  83. outline: none;
  84. margin: 5px;
  85. }
  86. .modal-content {
  87. background-color: #0000005c;
  88. }
  90. .input-group,
  91. .form-control,
  92. .input-group-text {
  93. background-color: #00000000 !important;
  94. color: #FFF;
  95. border: 1px solid #FFF; /* Adiciona a borda branca */
  96. border-radius: 20px;
  97. outline: none;
  98. }
  99. .input-group-noborder {
  100. background-color: #00000000 !important;
  101. color: #fff;
  102. position:relative;
  103. top:4px ;
  104. padding: 0;
  105. border: none; /* Adiciona a borda branca */
  106. outline: none;
  107. }
  110. .form-control::placeholder {
  111. color: #FFF;
  112. }
  114. .form-control:focus {
  115. color: #FFF;
  116. outline: none;
  117. box-shadow: none;
  118. }
  119. .custom-card {
  120. background-color: #2a2828;
  121. border-radius: 10px;
  122. color: whitesmoke;
  123. padding: 3px;
  124. margin-bottom: 4px;
  125. }
  127. .transparent-btn {
  128. background-color: transparent;
  129. color: white;
  130. border: 2px solid white;
  131. border-radius: 0;
  132. padding: 10px 15px;
  133. cursor: pointer;
  134. }
  135. </style>
  136. </head>
  137. <body>
  141. <div class="container">
  144. <div class="logo-container">
  145. <!--Link da logo-->
  146. <img id="logoImg" alt="logo" width="200" height="200">
  154. </div>
  155. <div class="card border-0 p-2 shadow mb-3">
  158. <div class="input" id="config">
  160. <button type="button" id="configModalButton" class="form-control" data-bs-toggle="modal" data-bs-target="configModal">
  161. <label>Selecione uma Conexão</label>
  162. </button>
  163. </div>
  165. <div class=" mb-2 form-control shadow">
  166. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
  167. class="bi bi-person" viewBox="0 0 16 16">
  168. <path
  169. 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" />
  170. </svg>
  171. <input class="input-group-noborder" type="text" placeholder="usuario" id="user"/>
  172. </div>
  174. <div class="mb-2 form-control shadow">
  175. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-key"
  176. viewBox="0 0 16 16">
  177. <path
  178. 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" />
  179. <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
  180. </svg>
  181. <input class="input-group-noborder"type="text" placeholder="senha" id="password" />
  182. </div>
  185. <div class="d-flex justify-content-between">
  187. <button class="btn btn-light w-100 shadow " onclick="startOrStop();" id="startOrStopButton">INICIAR</button>
  189. <button class="btn btn-light shadow mr-3" id="updateButton" style="margin-left: 3px;" onclick="app.searchUpdate()" >
  190. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
  191. <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"/>
  192. <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"/>
  193. </svg>
  194. </button>
  195. <button class="btn btn-light shadow mr-3" onclick="Android.logsstart();" id="loggerButton" style="margin-left: 3px;">
  196. <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">
  197. <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"/>
  198. <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"/>
  199. </svg>
  200. </button>
  202. </div>
  204. <button onclick="ToolsModal.show()" class="mt-2 form-control shadow">Mais</button>
  208. </div>
  211. <div class="card my-3 w-100 text-center border-0 p-2 shadow fs-5 text-uppercase fw-bold" id="info"></div>
  212. <div id="checkuserDiv" class="text centered-div">
  213. </div>
  214. </div>
  216. </div>
  218. <div class="tool webm modal fade" index="-1" id="ToolsModal">
  219. <div class="modal-dialog modal-dialog-centered" role="document">
  222. <div class="modal-content">
  223. <div class="tool modal-header">
  224. <h5 class="modal-title" style="color:#ffffff;">FERRAMENTAS</h5>
  225. </div>
  228. <button class="btn btn-menu shadow" onclick="Android.abrirapn()">Abrir Apn</button>
  230. <button class="btn btn-menu shadow" onclick="Android.forcarlte()"> forçar 3g/4g/5g</button>
  232. <button class="btn btn-menu shadow" onclick="Android.abrircom('https://t.me/ExemploBot')">Link de contato</button>
  234. <button class="btn btn-menu shadow" onclick="Android.otimizacaodebatery()">Desativar otimização de bateria</button>
  236. <div class="tool modal-footer">
  237. <button type="button" class="btn btn-primary" data-bs-dismiss="modal" style="background-color: var(--btn-modal);">FECHAR</button>
  238. </div>
  239. </div>
  240. </div>
  241. </div>
  242. <div class="modal fade" tabindex="-1" role="dialog" id="servers">
  243. <div class="modal-dialog modal-dialog-centered" role="document">
  244. <div class="modal-content rounded-3 shadow">
  245. <div class="modal-header border-bottom-0 pb-0">
  246. <h1 class="modal-title fs-5 text-white">CONFIGURAÇÕES</h1>
  247. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  248. aria-label="Close"></button>
  249. </div>
  250. <div class="modal-body">
  252. <div class="modal-body">
  253. <h5 class="text-white">Selecione uma conexão:</h5>
  255. <div class="card-columns" id="serverOptions"></div>
  258. </div>
  261. </div>
  262. </div>
  263. </div>
  265. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
  266. <script>
  271. const logoImg = document.getElementById("logoImg");
  272. const configModalButton = document.getElementById("configModalButton");
  273. const user = document.getElementById("user");
  274. const pass = document.getElementById("password");
  275. const startOrStopButton = document.getElementById("startOrStopButton");
  276. const updateButton = document.getElementById("updateButton");
  277. const loggerButton = document.getElementById("loggerButton");
  278. const state = document.getElementById("state");
  280. const operadora = document.getElementById("Operadora");
  282. operadora.innerHTML = "Operadora: " + app.getOperadoraEmUso();
  283. // setTema();
  285. const version = document.getElementById("Version");
  287. version.innerHTML = "Versão da config: " + app.getVersion();
  289. function loadLogs() {
  290. var logList = document.getElementById("logList");
  291. var logs = JSON.parse(app.getlogs())
  293. var formattedLogs = '';
  294. logs.forEach(item => {
  295. 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);">';
  296. formattedLogs += item.TIME;
  297. formattedLogs += '</li>';
  298. });
  300. logList.innerHTML = '<ul class="list-group">' + formattedLogs + '</ul>';
  301. }
  308. const ToolsModal = new bootstrap.Modal(document.querySelector('#ToolsModal'))
  310. function getBackgroundImage() {
  311. return Android.linkDaImagem();
  312. }
  317. function consultaValidade() {
  320. fetch(checkuserUrl)
  321. .then(response => response.json())
  322. .then(data => {
  324. setTimeout(() => {
  326. // Formatação da data
  327. const dataParts = data.expira_em.split('/');
  328. const dataFormatada = `${dataParts[0]}/${dataParts[1]}/${dataParts[2]}`;
  330. // Montagem da string para exibição
  331. const strCheckValidade =
  332. `Usuario: <span style="color: green;">${data.usuario}</span><br/>
  333. Expira em: <span style="color: green;">${dataFormatada}</span><br/>
  334. Dias Restantes: <span style="color: green;">${data.dias_restantes}</span><br/>
  335. Conectados: <span style="color: green;">${data.conectados} / ${data.limite}</span>`;
  337. // Injeção da string na div
  338. checkuserDiv.innerHTML = strCheckValidade;
  339. }, "2000");
  342. })
  343. .catch(err => {
  344. // Imprimindo o erro no console
  345. console.log(err);
  346. });
  351. }
  359. // Função para salvar a configuração selecionada
  360. function saveSelectedConfig(server) {
  361. localStorage.setItem('selectedConfig', JSON.stringify(server));
  362. }
  364. // Função para obter a configuração selecionada armazenada
  365. function getSelectedConfig() {
  366. var selectedConfig = localStorage.getItem('selectedConfig');
  367. if (selectedConfig) {
  368. return JSON.parse(selectedConfig);
  369. }
  370. return null;
  371. }
  373. // Função para configurar a configuração selecionada
  374. function setupSelectedConfig() {
  375. var selectedConfig = getSelectedConfig();
  376. if (selectedConfig) {
  377. // Configurar a configuração selecionada como desejado
  378. // Exemplo: selecionar o servidor correspondente na interface
  379. selectServer(selectedConfig);
  380. }
  381. }
  385. // Função para salvar o usuário e a senha
  386. function saveUserAndPass() {
  387. var user = document.getElementById('username');
  388. var pass = document.getElementById('password');
  390. var userData = {
  391. username: user.value,
  392. password: pass.value
  393. };
  394. localStorage.setItem('userData', JSON.stringify(userData));
  395. }
  397. // Função para recuperar o usuário e a senha salvos
  398. function getUserAndPass() {
  399. var userData = localStorage.getItem('userData');
  400. if (userData) {
  401. return JSON.parse(userData);
  402. }
  403. return null;
  404. }
  406. // Função para configurar o usuário e a senha nos campos de entrada
  407. function setupUserAndPass() {
  408. var user = document.getElementById('username');
  409. var pass = document.getElementById('password');
  411. var userData = getUserAndPass();
  412. if (userData) {
  413. user.value = userData.username;
  414. pass.value = userData.password;
  415. }
  416. }
  421. function createServerCard(server) {
  422. var card = document.createElement('div');
  423. card.classList.add('custom-card');
  424. var cardBody = document.createElement('div');
  425. cardBody.classList.add('card-body');
  427. var cardTitle = document.createElement('h5');
  428. cardTitle.classList.add('card-title');
  430. var configImage = document.createElement('img');
  431. configImage.src = Android.aestotext(server.FLAG); // Substitua 'URL_DA_IMAGEM' pelo URL correto da imagem
  432. configImage.alt = 'Config Image';
  433. configImage.classList.add('config-image');
  434. configImage.style.width = '50px'; // Defina o tamanho da largura desejada
  435. configImage.style.height = '50px'; // Defina o tamanho da altura desejada
  436. configImage.style.marginRight = '10px';
  437. cardTitle.appendChild(configImage);
  439. var configName = document.createElement('span');
  440. configName.textContent = Android.aestotext(server.Name);
  441. cardTitle.appendChild(configName);
  443. var cardText = document.createElement('p');
  444. cardText.classList.add('card-text');
  445. cardText.textContent = server.Description;
  447. cardBody.addEventListener('click', function() {
  448. selectServer(server);
  449. saveSelectedConfig(server);
  450. });
  452. cardBody.appendChild(cardTitle);
  453. cardBody.appendChild(cardText);
  454. card.appendChild(cardBody);
  455. serverOptions.appendChild(card);
  456. }
  458. function selectServer(server) {
  459. var serverData = {
  460. servername: Android.aestotext(server.Name),
  461. serverip: server.ServerIP,
  462. checkuser: server.URLCheckuser,
  463. serverport: server.ServerPort,
  464. sslport: server.SSLPort,
  465. proxyip: server.ProxyIP,
  466. proxyport: server.ProxyPort,
  467. payload: server.Payload,
  468. sni: server.SNI,
  469. dnso: server.DnsO,
  470. dnst: server.DnsT,
  471. udp: server.UdpPort,
  472. type: server.TunnelType
  473. };
  475. var btn = document.getElementById('btnmodal');
  476. btn.textContent = serverData.servername;
  478. modal.hide();
  481. checkuserUrl = Android.aestotext(serverData.checkuser) + user.value;
  484. Android.setconfig(serverData.serverip, serverData.serverport, serverData.payload, serverData.proxyip, serverData.proxyport, serverData.sslport, serverData.sni,serverData.dnso, serverData.dnst, serverData.udp, serverData.type);
  485. }
  489. servers.forEach(function(server) {
  490. createServerCard(server);
  491. });
  495. function Connect() {
  497. saveUserAndPass();
  498. Android.usernm(user.value);
  499. Android.passw(pass.value);
  500. Android.connect_vpn();
  501. }
  503. function Update() {
  505. Android.ConfigUpdate();
  506. }
  508. function updateButtonStatus() {
  509. var status = Android.connection_status();
  510. if (status == "CONECTADO") {
  511. consultaValidade();
  512. }
  514. var buttonConfig = {
  515. AUTENTICANDO: { color: "yellow", text: "PARAR" },
  516. CONECTADO: { color: "#00f000", text: "PARAR" },
  517. PARANDO: { color: "red", text: "PARANDO" },
  518. CONECTANDO: { color: "red", text: "PARAR" },
  519. RECONECTANDO: { color: "red", text: "PARAR" },
  520. DESCONECTADO: { color: "red", text: "CONECTAR" }
  521. };
  522. var config = buttonConfig[status] || { color: "", text: "" };
  523. button_connect.textContent = config.text;
  525. if(status == "CONECTADO"){
  526. consultaValidade();
  527. }
  530. info.style.color = config.color;
  531. info.textContent = status;
  533. }
  535. updateButtonStatus();
  538. // Função para configurar a configuração selecionada ao iniciar o app
  539. function setupApp() {
  540. setupUserAndPass();
  541. setupSelectedConfig();
  543. setInterval(updateButtonStatus, 1);
  545. }
  547. // Evento DOMContentLoaded para chamar a função setupApp() quando o corpo do documento é carregado
  548. document.addEventListener('DOMContentLoaded', function() {
  549. setupApp();
  550. });
  553. </script>
  554. </body>
  556. </html>
comments powered by Disqus