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.6 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" />
  8. <title>RTunnel</title>
  9. <link rel="stylesheet" href="css.css">
  10. <style>
  12. * {
  13. margin: 0;
  14. padding: 0;
  15. box-sizing: border-box;
  16. font-family: 'Roboto', sans-serif;
  17. }
  19. body {
  20. height: 100vh;
  21. display: flex;
  22. flex-direction: column;
  23. align-items: center;
  24. justify-content: center;
  25. }
  27. .container {
  28. display: flex;
  29. flex-direction: column;
  30. align-items: center;
  31. justify-content: center;
  32. background-color: #0f0f0f6c;
  33. border-radius: 15px;
  34. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  35. padding: 8px;
  36. width: 370px;
  37. margin: 10px;
  38. }
  40. .container-logo {
  41. display: flex;
  42. flex-direction: column;
  43. align-items: center;
  44. justify-content: center;
  45. padding: 8px;
  46. width: 370px;
  47. margin-top: -90px;
  48. }
  50. .flag {
  51. display: flex;
  52. flex-direction: column;
  53. align-items: center;
  54. justify-content: center;
  55. padding: 8px;
  56. width: 35px;
  57. height: 35px;
  58. }
  60. .form {
  61. display: flex;
  62. flex-direction: column;
  63. align-items: center;
  64. margin: 10px;
  65. }
  67. .input {
  68. margin: 1px;
  69. width: 100%;
  70. }
  72. input,
  73. select {
  74. width: 100%;
  75. padding: 15px;
  76. margin-bottom: 1px;
  77. border-radius: 10px;
  78. border: 2px solid #1319ce1a;
  79. background-color: #0f0f0f6c;
  80. color: #cbbfdf;
  81. outline: none;
  82. }
  84. input::placeholder {
  85. color: #cbbfdf;
  86. }
  88. input:-webkit-autofill,
  89. input:-webkit-autofill:hover,
  90. input:-webkit-autofill:focus,
  91. input:-webkit-autofill:active {
  92. -webkit-box-shadow: 0 0 0 30px #0f0f0f inset !important;
  93. -webkit-text-fill-color: #cbbfdf !important;
  94. }
  96. #startOrStopButton {
  97. padding: 15px;
  98. width: 100%;
  99. border: 1px solid;
  100. margin-right: 5px;
  101. margin-top: 2px;
  102. border-radius: 10px;
  103. background-color: #0f0f0f96;
  104. color: #cbbfdf;
  105. font-size: 16px;
  106. cursor: pointer;
  107. transition: background-color 0.3s ease;
  108. }
  110. #updateButton {
  111. width: auto;
  112. padding: 15px;
  113. border: 1px solid;
  114. margin-top: 2px;
  115. border-radius: 10px;
  116. background-color: #0f0f0f96;
  117. color: #cbbfdf;
  118. cursor: pointer;
  119. transition: background-color 0.3s ease;
  120. }
  122. #startOrStopButton:hover,
  124. #updateButton:hover {
  125. background-color: #0f0f0f96;
  126. }
  128. #loggerButton {
  129. width: auto;
  130. padding: 15px;
  131. border: 1px solid;
  132. margin-top: 2px;
  133. border-radius: 10px;
  134. background-color: #0f0f0f96;
  135. color: #cbbfdf;
  136. cursor: pointer;
  137. transition: background-color 0.3s ease;
  138. }
  141. #configModalButton {
  142. padding: 15px;
  143. border: 1px solid;
  144. margin-top: 2px;
  145. border-radius: 10px;
  146. background-color: #0f0f0f96;
  147. color: #cbbfdf;
  148. }
  150. #logsClose {
  151. padding: 15px;
  152. border: 2px solid;
  153. margin-top: 2px;
  154. border-radius: 10px;
  155. background-color: #0f0f0f96;
  156. color: #cbbfdf;
  157. }
  158. #logsClean {
  159. padding: 15px;
  160. border: 2px solid;
  161. margin-top: 2px;
  162. border-radius: 10px;
  163. background-color: #0f0f0f96;
  164. color: #cbbfdf;
  165. }
  166. .state {
  167. margin-top: 10px;
  168. text-align: center;
  169. border: 2px solid;
  170. padding: 8px 16px;
  171. border-radius: 15px;
  172. color: #962430;
  173. font-weight: bold;
  174. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  175. }
  177. .modal-header {
  178. border: none;
  179. }
  181. .modal-content {
  182. background-color: #0f0f0fab;
  183. color: hsl(263, 33%, 81%);
  184. }
  186. .close-btn {
  187. color: #cbbfdf;
  188. background-color: #ffffff00;
  189. border: none;
  190. }
  192. .set-configs {
  193. background-color: #1d1d1db7;
  194. padding: 10px;
  195. margin-bottom: 5px;
  196. width: 100%;
  197. border-radius: 10px;
  198. }
  199. .set-configs span {
  200. color: #cbbfdf;
  201. font-size: large;
  202. }
  204. .set-configs img {
  205. margin-right: 5px;
  206. width: 40px;
  207. height: 40px;
  208. }
  209. #Operadora {
  210. color: white;
  211. }
  212. #Version {
  213. color: white;
  214. }
  215. </style>
  216. </head>
  218. <body>
  219. <div class="container-logo">
  220. <img id="logoImg" alt="logo" width="200" height="200">
  221. </div>
  222. <div id="Operadora"> Aqui</div>
  223. <div id="Version"> Aqui</div>
  226. <div class="form">
  227. <div class="container">
  228. <div class="input" id="config"></div>
  230. <input type="button" value="Selecione uma configuração" id="configModalButton" data-bs-toggle="modal" data-bs-target="#configModal">
  232. <div style="display: flex;">
  233. <input type="text" style="margin-right: 1px;" placeholder="Usuário" id="user" />
  234. <input type="text" style="margin-left: 1px;" placeholder="Senha" id="password" />
  235. </div>
  236. <div style="display: flex;">
  237. <button id="startOrStopButton" onclick="startOrStop()">INICIAR VPN</button>
  240. <button id="updateButton" onclick="app.searchUpdate()">
  241. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  242. class="bi bi-arrow-repeat" viewBox="0 0 16 16">
  243. <path
  244. 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" />
  245. <path fill-rule="evenodd"
  246. 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" />
  247. </svg>
  248. </button>
  249. <button data-bs-toggle="modal"
  250. data-bs-target="#logs" id="loggerButton"
  251. style="margin-left: 3px;">
  252. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
  253. class="bi bi-file-earmark-text" viewBox="0 0 16 16">
  254. <path
  255. 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" />
  256. <path
  257. 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" />
  258. </svg>
  259. </button>
  260. </div>
  261. </div>
  262. </div>
  263. </div>
  264. <div class="container state" id="state">Você está desconectado !</div>
  268. <div class="modal fade" aria-hidden="true" id="configModal" tabindex="-1">
  269. <div class="modal-dialog modal-dialog-centered">
  270. <div class="modal-content">
  271. <div class="modal-header">
  272. <h5 class="modal-title" style="align-items: center;">Servidores: </h5>
  273. <button type="button" class="close-btn" data-bs-dismiss="modal" aria-label="Close">
  274. <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
  275. class="bi bi-x-lg" viewBox="0 0 16 16">
  276. <path
  277. 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" />
  278. </svg>
  279. </button>
  280. </div>
  281. <div class="modal-body">
  282. <div id="serverOptions"></div>
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  288. <div class="modal fade" aria-hidden="true" id="checkuserModal" tabindex="-1">
  289. <div class="modal-dialog modal-dialog-centered">
  290. <div class="modal-content">
  291. <div class="modal-header">
  292. <h5 class="modal-title">Informações do usuario</h5>
  293. <button type="button" class="close-btn" data-bs-dismiss="modal" aria-label="Close">
  294. <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
  295. class="bi bi-x-lg" viewBox="0 0 16 16">
  296. <path
  297. 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" />
  298. </svg>
  299. </button>
  300. </div>
  301. <div class="modal-body">
  302. <div id="checkuser">Checkuser</div>
  303. </div>
  304. </div>
  305. </div>
  306. </div>
  308. <div class="modal fade" tabindex="-1" role="dialog" id="logs">
  309. <div class="modal-dialog modal-dialog-centered" role="document">
  310. <div class="modal-content rounded-3 shadow">
  311. <div class="modal-header border-bottom-0 pb-0">
  312. <h1 class="modal-title fs-5 text-white">LOGS</h1>
  313. </div>
  314. <div class="modal-body">
  315. <ul id="logList"></ul>
  316. </div>
  317. <div class="modal-footer flex-nowrap p-0">
  318. <button type="button" id="logsClean" onclick="app.clearLogs()" >LIMPAR</button>
  319. <button type="button" id="logsClose" data-bs-dismiss="modal">FECHAR</button>
  320. </div>
  321. </div>
  322. </div>
  323. </div>
  325. <div class="modal fade" aria-hidden="true" id="checkuserModal" tabindex="-1">
  326. <div class="modal-dialog modal-dialog-centered">
  327. <div class="modal-content">
  328. <div class="modal-header">
  329. <h5 class="modal-title">Informações do usuario</h5>
  330. <button type="button" class="close-btn" data-bs-dismiss="modal" aria-label="Close">
  331. <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
  332. class="bi bi-x-lg" viewBox="0 0 16 16">
  333. <path
  334. 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" />
  335. </svg>
  336. </button>
  337. </div>
  338. <div class="modal-body">
  339. <div id="checkuser">Checkuser</div>
  340. </div>
  341. </div>
  342. </div>
  343. </div>
  347. <script type="text/javascript" src="bootstrap.js"></script>
  349. <script>
  351. const logoImg = document.getElementById("logoImg");
  352. const configModalButton = document.getElementById("configModalButton");
  353. const user = document.getElementById("user");
  354. const pass = document.getElementById("password");
  355. const startOrStopButton = document.getElementById("startOrStopButton");
  356. const updateButton = document.getElementById("updateButton");
  357. const loggerButton = document.getElementById("loggerButton");
  358. const state = document.getElementById("state");
  360. const operadora = document.getElementById("Operadora");
  362. operadora.innerHTML = "Operadora: " + app.getOperadoraEmUso();
  363. // setTema();
  365. const version = document.getElementById("Version");
  367. version.innerHTML = "Versão da config: " + app.getVersion();
  369. function loadLogs() {
  370. var logList = document.getElementById("logList");
  371. var logs = JSON.parse(app.getlogs())
  373. var formattedLogs = '';
  374. logs.forEach(item => {
  375. 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);">';
  376. formattedLogs += item.TIME;
  377. formattedLogs += '</li>';
  378. });
  380. logList.innerHTML = '<ul class="list-group">' + formattedLogs + '</ul>';
  381. }
  387. var modal = new bootstrap.Modal(document.getElementById('configModal'));
  389. const serverOptions = document.getElementById('serverOptions');
  390. var servers = JSON.parse(app.getJsonServers());
  394. function createServerCard(server) {
  395. const card = document.createElement('div');
  396. card.classList.add('set-configs');
  397. card.style.backgroundColor = server.ConfigColor;
  400. var configImage = document.createElement('img');
  401. configImage.src = server.ConfigImage;
  403. const cardBody = document.createElement('div');
  404. cardBody.classList.add('card-body');
  406. const cardTitle = document.createElement('h5');
  407. cardTitle.classList.add('card-title');
  409. const configName = document.createElement('span');
  410. configName.textContent = server.ConfigName;
  411. cardTitle.appendChild(configImage);
  412. cardTitle.appendChild(configName);
  415. cardBody.appendChild(cardTitle);
  418. card.appendChild(cardBody);
  420. card.addEventListener('click', function () {
  421. selectServer(server);
  422. });
  424. return card;
  425. }
  428. function selectServer(server) {
  430. configModalButton.value = server.ConfigName;
  431. app.returnConfigId(server.ConfigId);
  433. localStorage.setItem('configSelecionada', JSON.stringify(server));
  435. modal.hide();
  436. }
  439. servers.forEach(function (server) {
  440. const card = createServerCard(server);
  441. serverOptions.appendChild(card);
  442. });
  446. function startOrStop() {
  447. if (user.value != "" && pass.value != "") {
  448. localStorage.setItem('usuario', user.value);
  449. localStorage.setItem('senha', pass.value);
  450. app.setUserAndPass(user.value, pass.value);
  451. }
  453. app.startOrStop();
  456. }
  459. var previousLogs = [];
  461. function checkAndLoadLogs() {
  462. var logs = JSON.parse(app.getlogs());
  464. if (!arraysAreEqual(logs, previousLogs)) {
  465. previousLogs = logs;
  466. loadLogs();
  467. }
  468. }
  472. function arraysAreEqual(arr1, arr2) {
  473. if (arr1.length !== arr2.length) {
  474. return false;
  475. }
  477. for (var i = 0; i < arr1.length; i++) {
  478. if (arr1[i].TIME !== arr2[i].TIME) {
  479. return false;
  480. }
  481. }
  483. return true;
  484. }
  486. async function startCheckuser() {
  487. try {
  488. const dataString = await app.getCheckuserDados();
  490. console.log("CHECKUSER: " + dataString);
  492. if (dataString !== "null") {
  493. const data = JSON.parse(dataString);
  495. var myModal = new bootstrap.Modal(document.getElementById('checkuserModal'));
  496. myModal.show();
  498. const strCheckValidade =
  499. `Usuario: <span style="color: green;">${data.username}</span><br/>
  500. Expira em: <span style="color: green;">${data.expiration_date}</span><br/>
  501. Dias Restantes: <span style="color: green;">${data.expiration_days}</span><br/>
  502. Conectados: <span style="color: green;">${data.count_connection} / ${data.limiter_user}</span>`;
  504. document.getElementById('checkuser').innerHTML = strCheckValidade;
  505. }
  506. } catch (error) {
  507. console.error("Erro ao buscar dados do usuário:", error);
  508. }
  509. }
  511. var previousState = null;
  514. function updateState() {
  515. var currentState = app.getState();
  517. if (currentState !== previousState) {
  519. if (currentState == "Conectado") {
  520. state.innerHTML = "<span style='color: green;'>"+ currentState +"</span>";
  521. startCheckuser();
  522. startOrStopButton.innerText = "Parar VPN"
  523. } else if (currentState == "Iniciando" || currentState == "Autenticando" || currentState == "Conectando") {
  524. state.innerHTML = "<span style='color: orange;'>" + currentState + "</span>";
  525. startOrStopButton.innerText = "Parar VPN"
  526. } else if (currentState == "Reconectando" || currentState == "Desconectado") {
  527. state.innerHTML = "<span style='color: red;'>" + currentState + "</span>";
  528. } else {
  529. state.innerHTML = "<span style='color: orange;'>" + currentState + "</span>";
  530. startOrStopButton.innerText = "Iniciar VPN"
  531. }
  533. previousState = currentState;
  534. }
  536. }
  538. setInterval(function() {
  539. updateState();
  540. checkAndLoadLogs();
  541. }, 0);
  544. logoImg.src = app.getLogoUrl();
  545. document.body.style.backgroundImage = `url('${app.getBackUrl()}')`;
  546. document.body.style.backgroundSize = 'cover';
  547. document.body.style.backgroundRepeat = 'no-repeat';
  548. document.body.style.backgroundPosition = 'center';
  550. document.addEventListener("DOMContentLoaded", function () {
  551. // Verificar se há usuário e senha salvos no localStorage
  552. const usuarioSalvo = localStorage.getItem('usuario');
  553. const senhaSalva = localStorage.getItem('senha');
  555. const configSalva = localStorage.getItem('configSelecionada');
  557. if (configSalva) {
  558. const configSelecionada = JSON.parse(configSalva);
  560. // Atualize a interface do usuário com a configuração salva
  561. configModalButton.value = configSelecionada.ConfigName;
  562. // Você pode fazer outras ações relacionadas à configuração aqui, se necessário
  563. }
  565. if (usuarioSalvo && senhaSalva) {
  566. // Preencher os campos de usuário e senha com os valores salvos
  567. user.value = usuarioSalvo;
  568. pass.value = senhaSalva;
  569. }
  570. });
  572. </script>
  573. </body>
  575. </html>
comments powered by Disqus