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.8 kB

History Raw Download

HITS: 934

Report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>GUARDIAN</title>
  8. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  9. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
  10. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  11. <script src="https://cdn.tailwindcss.com">
  12. <link rel="stylesheet" href="css.css">
  13. </script>
  14. <style>
  15. @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Outfit:wght@100;200;300;400;500;600;700&display=swap');
  17. :root {
  19. /*Editar o modal*/
  20. --btn-modal: #0000003f;
  21. --btn-border: 1px solid #4071FF;
  22. --btn-modal-border: 50px;
  23. --modal-shadow: #ffffff;
  24. --modal-bg: #171e2e;
  25. --modal-icon: #fff;
  26. --config-color: #0000003f;
  27. --category-color: #0000003f;
  28. --text-color: #ffffff;
  30. /*Editar Layout*/
  31. --fundo: #ffffff;
  32. --topo: #F7F7FC;
  33. --icon: #4071FF;
  34. --icon-bg: #E5EAFC;
  35. --config: #F7F7FC;
  36. --box-border: 1px solid #C0C6DE;
  37. --box-bg: transparent;
  38. --box-icon: black;
  39. --info1: #C0C6DE;
  40. --info2: #4071FF;
  41. }
  43. body {
  44. font-family: 'Be Vietnam Pro', sans-serif;
  45. background: var(--fundo);
  46. height: 100vh;
  47. width: 100vw;
  48. justify-content: center;
  49. align-items: center;
  50. }
  52. .container {
  53. display: flex;
  54. flex-direction: row;
  55. justify-content: space-between;
  56. background: var(--topo);
  57. width: 100vw;
  58. padding: 0 auto;
  60. }
  62. button.power-icon {
  63. font-size: 2.5em;
  64. box-shadow: 0 20px 25px 0px #4071ff54, 0 2px 0px 0px #4071ff10;
  65. }
  67. .app-bg-gray-1 {
  68. background: var(--config);
  69. }
  71. .app-bg-gray-2 {
  72. background: var(--icon-bg);
  73. }
  75. .app-bg-gray-3 {
  76. background: #fff;
  77. }
  79. .app-bg-4 {
  80. background: linear-gradient(-45deg, #13cf8e, #13cf8e, #0098ff, #5995fd);
  81. background-size: 400% 400%;
  82. animation: gradient 5s ease infinite;
  83. }
  85. @keyframes gradient {
  86. 0% {
  87. background-position: 0% 50%;
  88. }
  89. 50% {
  90. background-position: 100% 50%;
  91. }
  92. 100% {
  93. background-position: 0% 50%;
  94. }
  95. }
  97. .app-bg-blue {
  98. background: #4071FF;
  99. }
  101. .app-color-blue {
  102. color: #4071FF;
  103. }
  105. .app-color-gray-1 {
  106. color: #C0C6DE;
  107. }
  109. .app-rounded {
  110. border-bottom-left-radius: 50px;
  111. border-bottom-right-radius: 50px;
  112. }
  114. .status {
  115. font-size: 1em;
  116. }
  118. .put {
  119. border-radius: 60px;
  120. }
  122. .icon {
  123. font-size: 0.8em;
  124. color: var(--box-icon);
  125. }
  127. input {
  128. width: 100%;
  129. background: transparent;
  130. border: none;
  131. outline: none;
  132. color: var(--box-typing);
  133. line-height: 1;
  134. font-weight: 600;
  135. font-size: 1.1rem;
  136. }
  138. .box {
  139. border: var(--box-border);
  140. background: var(--box-bg);
  141. }
  143. .tool {
  144. align-items: center;
  145. justify-content: center;
  146. text-align: center;
  147. }
  149. .tool-bt {
  150. background: var(--btn-modal);
  151. height: 50px;
  152. width: 150px;
  153. border: var(--btn-border);
  154. }
  156. .info {
  157. color: var(--info2);
  158. }
  160. .info1 {
  161. color: var(--info1);
  162. }
  164. .info2 {
  165. color: var(--modal-icon);
  166. }
  168. .info3 {
  169. font-size: 1.2em;
  170. color: var(--icon);
  171. }
  173. .modal {
  174. backdrop-filter: blur(5px);
  175. -webkit-backdrop-filter: blur(5px);
  176. }
  178. .modal-content {
  179. border: none;
  180. background: var(--modal-bg);
  181. box-shadow: 0 5px 10px var(--modal-shadow);
  182. color: var(--text-color);
  183. }
  185. .modal-dialog {
  186. padding: 0 0.5rem;
  187. }
  189. .bg-category {
  190. background: var(--category-color);
  191. }
  193. .bg-config {
  194. background: var(--config-color);
  195. }
  197. .btn{
  198. width: 150px;
  199. background-color: #171e2e;
  200. outline: none;
  201. height: 49px;
  202. border-radius: var(--btn-modal-border);
  203. text-transform: uppercase;
  204. font-weight: 600;
  205. margin: 10px 0;
  206. cursor: pointer;
  207. transition: 0.5s;
  208. border: var(--btn-border);
  209. }
  211. </style>
  212. </head>
  213. <body class="h-screen">
  214. <div class="container px-6 pt-10 pb-44 app-rounded">
  215. <button class="app-bg-blue h-12 rounded-2xl py-2 px-5 text-white" onclick="ToolsModal.show()"><i class="bi bi-list-nested mr-2"></i>Mais</button>
  216. <button class="put w-12 h-12 app-bg-gray-2 rounded-2xl place-items-center p-2" onclick="DtStartAppUpdate.execute()"><i class="info3 bi bi-arrow-repeat"></i></button>
  217. <button class="put w-12 h-12 app-bg-gray-2 rounded-2xl place-items-center p-2" onclick="loggerModal.show()"><i class="info3 bi bi-file-earmark-text"></i></button>
  218. </div>
  219. <div class="flex flex-row items-center justify-center -top-32 relative">
  220. <div class="w-56 h-56 app-bg-gray-3 rounded-full items-center justify-center flex">
  221. <div class="w-44 h-44 app-bg-4 rounded-full flex justify-center items-center">
  222. <button class="fa-solid fa-power-off bg-white app-color-blue rounded-full p-10 power-icon" onclick="startStopVpn()"></button>
  223. </div>
  224. </div>
  225. </div>
  226. <div class="flex flex-col -top-36 relative">
  227. <div class="py-3 flex flex-row justify-center items-center">
  228. <span class="app-color-gray-1 mr-2">INSIRA SEU LOGIN</span>
  229. <i class="fa-solid fa-check app-color-gray-1"></i>
  230. </div>
  234. <div class="box d-flex gap-2 justify-content-center mb-1 mt-1 flex flex-row items-center px-6 py-2.5 mx-6 rounded-xl app-bg-gray-1 border-2">
  235. <i class="icon fa fa-cogs"></i>
  236. <input type="text" placeholder="CONFIG." disabled id="config">
  237. <i class="icon fa fa-angle-double-down"></i>
  238. </div>
  240. <div class="box d-flex gap-2 justify-content-center mb-2 mt-1 items-center px-6 py-2 mx-6 rounded-xl border-slate-150 border-2">
  241. <i class="icon fa fa-user"></i>
  242. <input type="text" placeholder="Nome de usuario" id="username">
  243. </div>
  245. <div class="box d-flex gap-2 justify-content-center items-center px-6 py-2 mx-6 rounded-xl border-slate-150 border-2">
  246. <i class="icon fa fa-lock"></i>
  247. <input type="text" placeholder="Senha" id="password">
  248. <i class="icon fa fa-eye" onclick="password.type==`text`?password.type = `password`:password.type = `text`"></i>
  249. </div>
  251. <div class="d-flex gap-2 justify-content-center mb-2 mt-1 flex flex-row items-center px-6 py-2 mx-6 rounded-xl border-slate-150 border-2">
  252. <i class="icon fa fa-lock"></i>
  253. <input type="text" placeholder="V2ray UUID" id="uuid">
  254. <i class="icon fa fa-eye" onclick="uuid.type==`text`?uuid.type = `password`:uuid.type = `text`"></i>
  255. </div>
  257. <div class="flex flex-row items-center justify-center mt-4">
  258. <span class="status app-color-blue font-semibold" id="state">DESCONECTADO</span>
  259. </div>
  261. <div class="flex flex-row items-center justify-center mt-2">
  262. <i class="info1 fa-solid fa-rss app-color-gray-1 mr-2"></i>
  263. <span class="info1 font-semibold text-xs mr-2" id="name">REDE</span>
  264. <span class="info font-semibold text-xs" id="ip">127.0.0.1</span>
  265. </div>
  266. <div class="flex flex-row items-center justify-center mt-1">
  267. <i class="info1 fa-solid fa-user app-color-gray-1 mr-2"></i>
  268. <span class="info font-semibold text-xs" id="total">00</span>
  269. </div>
  270. </div>
  271. </div>
  272. <div class="modal fade" id="configModal">
  273. <div class="modal-dialog modal-dialog-centered" role="document">
  274. <div class="modal-content rounded-3 shadow">
  275. <div class="modal-header border-bottom-0 pb-0">
  276. <h1 class="modal-title fs-5" style="color: var(--text-color);">CONFIGURAÇÕES</h1>
  277. <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
  278. </div>
  279. <div class="modal-body p-1 text-center">
  280. <ul class="list-group bg-transparent overflow-y-auto config-body" style="max-height: 600px;"></ul>
  281. </div>
  282. </div>
  283. </div>
  284. </div>
  285. <div class="modal fade" id="loggerModal">
  286. <div class="modal-dialog modal-dialog-centered" role="document">
  287. <div class="modal-content rounded-3 shadow">
  288. <div class="modal-body p-1 text-center">
  289. <ul class="list-group bg-transparent overflow-y-auto logger-content" style="max-height: 600px;">
  290. </ul>
  291. </div>
  292. <div class="modal-footer flex-nowrap p-0">
  293. <button class="btn btn-primary w-100 clear-logger" style="background-color:var(--btn-modal);">LIMPAR</button>
  294. <button type="button" class="btn btn-primary w-100" data-bs-dismiss="modal" style="background-color: var(--btn-modal);">FECHAR</button>
  296. </div>
  297. </div>
  298. </div>
  299. </div>
  300. <div class="tool webm modal fade" index="-1" id="ToolsModal">
  301. <div class="modal-dialog modal-dialog-centered" role="document">
  304. <div class="modal-content">
  305. <div class="tool modal-header">
  306. <h5 class="modal-title" style="color:#ffffff;">FERRAMENTAS</h5>
  307. </div>
  308. <div class="modal-body">
  309. <button class="tool-bt rounded-2xl text-white" onclick="DtStartCheckUser.execute()"><i class="info2 bi bi-calendar-check mr-2"></i>VALIDADE</button>
  310. </div>
  311. <div class="modal-body">
  312. <button class="tool-bt rounded-2xl text-white" data-bs-target="#speedTestModal" data-bs-toggle="modal"><i class="info2 bi bi-speedometer mr-2"></i>SPEEDTEST</button>
  313. <button class="tool-bt rounded-2xl text-white" onclick="DtStartWebViewActivity.execute('https://t.me/DTunnelGroup')"><i class="info2 bi bi-globe mr-2"></i>WEBVIEW</button>
  314. </div>
  315. <div class="modal-body">
  316. <button class="tool-bt rounded-2xl text-white" onclick="DtStartApnActivity.execute()"><i class="info2 bi bi-wifi mr-2"></i>APN</button>
  317. <button class="tool-bt rounded-2xl text-white" onclick="DtIgnoreBatteryOptimizations.execute()"><i class="info2 bi bi-battery-full mr-2"></i>BATERIA</button>
  318. </div>
  319. <div class="modal-body">
  320. <button class="tool-bt rounded-2xl text-white" onclick="DtCleanApp.execute()"><i class="info2 bi bi-trash3 mr-2"></i>LIMPAR</button>
  321. </div>
  322. <div class="tool modal-footer">
  323. <button type="button" class="btn btn-primary" data-bs-dismiss="modal" style="background-color: var(--btn-modal);">FECHAR</button>
  325. </div>
  326. </div>
  327. </div>
  328. </div>
  329. <div class="modal fade" id="checkUserModal" index="1">
  330. <div class="modal-dialog modal-dialog-centered" role="document">
  331. <div class="modal-content rounded-3 shadow">
  332. <div class="modal-header border-bottom-0 pb-0">
  333. <h1 class="modal-title fs-5 chk-title text-light"></h1>
  334. <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
  335. </div>
  336. <div class="modal-body text-center">
  337. <p class="fs-5 mb-0 chk-message text-light"></p>
  338. </div>
  339. </div>
  340. </div>
  341. </div>
  342. <div class="md modal fade" id="speedTestModal">
  343. <div class="md modal-dialog modal-dialog-centered" role="document">
  344. <div class="md modal-content rounded-3 shadow">
  345. <div class="md modal-header border-bottom-0 py-3">
  346. <button class="btn-close btn-close-white" data-bs-dismiss="modal"
  347. aria-label="Close"></button>
  349. </div>
  350. <div class="modal-body ratio rounded-bottom-3" style="height: 600px;">
  351. <div class="spinner d-flex w-100 h-100 align-items-center justify-content-center">
  352. <div class="spinner-border text-light p-5" role="status">
  353. <span class="visually-hidden">Loading...</span>
  354. </div>
  355. </div>
  356. <iframe class="rounded-bottom-3" id="speedFrame"></iframe>
  357. </div>
  358. </div>
  359. </div>
  360. </div>
  362. <script type="text/javascript" src="bootstrap.js"></script>
  364. <script>
  366. const logoImg = document.getElementById("logoImg");
  367. const configModalButton = document.getElementById("configModalButton");
  368. const user = document.getElementById("user");
  369. const pass = document.getElementById("password");
  370. const startOrStopButton = document.getElementById("startOrStopButton");
  371. const updateButton = document.getElementById("updateButton");
  372. const loggerButton = document.getElementById("loggerButton");
  373. const state = document.getElementById("state");
  375. const operadora = document.getElementById("Operadora");
  377. operadora.innerHTML = "Operadora: " + app.getOperadoraEmUso();
  378. // setTema();
  380. const version = document.getElementById("Version");
  382. version.innerHTML = "Versão da config: " + app.getVersion();
  384. function loadLogs() {
  385. var logList = document.getElementById("logList");
  386. var logs = JSON.parse(app.getlogs())
  388. var formattedLogs = '';
  389. logs.forEach(item => {
  390. 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);">';
  391. formattedLogs += item.TIME;
  392. formattedLogs += '</li>';
  393. });
  395. logList.innerHTML = '<ul class="list-group">' + formattedLogs + '</ul>';
  396. }
  402. var modal = new bootstrap.Modal(document.getElementById('configModal'));
  404. const serverOptions = document.getElementById('serverOptions');
  405. var servers = JSON.parse(app.getJsonServers());
  409. function createServerCard(server) {
  410. const card = document.createElement('div');
  411. card.classList.add('set-configs');
  412. card.style.backgroundColor = server.ConfigColor;
  415. var configImage = document.createElement('img');
  416. configImage.src = server.ConfigImage;
  418. const cardBody = document.createElement('div');
  419. cardBody.classList.add('card-body');
  421. const cardTitle = document.createElement('h5');
  422. cardTitle.classList.add('card-title');
  424. const configName = document.createElement('span');
  425. configName.textContent = server.ConfigName;
  426. cardTitle.appendChild(configImage);
  427. cardTitle.appendChild(configName);
  430. cardBody.appendChild(cardTitle);
  433. card.appendChild(cardBody);
  435. card.addEventListener('click', function () {
  436. selectServer(server);
  437. });
  439. return card;
  440. }
  443. function selectServer(server) {
  445. configModalButton.value = server.ConfigName;
  446. app.returnConfigId(server.ConfigId);
  448. localStorage.setItem('configSelecionada', JSON.stringify(server));
  450. modal.hide();
  451. }
  454. servers.forEach(function (server) {
  455. const card = createServerCard(server);
  456. serverOptions.appendChild(card);
  457. });
  461. function startOrStop() {
  462. if (user.value != "" && pass.value != "") {
  463. localStorage.setItem('usuario', user.value);
  464. localStorage.setItem('senha', pass.value);
  465. app.setUserAndPass(user.value, pass.value);
  466. }
  468. app.startOrStop();
  471. }
  474. var previousLogs = [];
  476. function checkAndLoadLogs() {
  477. var logs = JSON.parse(app.getlogs());
  479. if (!arraysAreEqual(logs, previousLogs)) {
  480. previousLogs = logs;
  481. loadLogs();
  482. }
  483. }
  487. function arraysAreEqual(arr1, arr2) {
  488. if (arr1.length !== arr2.length) {
  489. return false;
  490. }
  492. for (var i = 0; i < arr1.length; i++) {
  493. if (arr1[i].TIME !== arr2[i].TIME) {
  494. return false;
  495. }
  496. }
  498. return true;
  499. }
  501. async function startCheckuser() {
  502. try {
  503. const dataString = await app.getCheckuserDados();
  505. console.log("CHECKUSER: " + dataString);
  507. if (dataString !== "null") {
  508. const data = JSON.parse(dataString);
  510. var myModal = new bootstrap.Modal(document.getElementById('checkuserModal'));
  511. myModal.show();
  513. const strCheckValidade =
  514. `Usuario: <span style="color: green;">${data.username}</span><br/>
  515. Expira em: <span style="color: green;">${data.expiration_date}</span><br/>
  516. Dias Restantes: <span style="color: green;">${data.expiration_days}</span><br/>
  517. Conectados: <span style="color: green;">${data.count_connection} / ${data.limiter_user}</span>`;
  519. document.getElementById('checkuser').innerHTML = strCheckValidade;
  520. }
  521. } catch (error) {
  522. console.error("Erro ao buscar dados do usuário:", error);
  523. }
  524. }
  526. var previousState = null;
  529. function updateState() {
  530. var currentState = app.getState();
  532. if (currentState !== previousState) {
  534. if (currentState == "Conectado") {
  535. state.innerHTML = "<span style='color: green;'>"+ currentState +"</span>";
  536. startCheckuser();
  537. startOrStopButton.innerText = "Parar VPN"
  538. } else if (currentState == "Iniciando" || currentState == "Autenticando" || currentState == "Conectando") {
  539. state.innerHTML = "<span style='color: orange;'>" + currentState + "</span>";
  540. startOrStopButton.innerText = "Parar VPN"
  541. } else if (currentState == "Reconectando" || currentState == "Desconectado") {
  542. state.innerHTML = "<span style='color: red;'>" + currentState + "</span>";
  543. } else {
  544. state.innerHTML = "<span style='color: orange;'>" + currentState + "</span>";
  545. startOrStopButton.innerText = "Iniciar VPN"
  546. }
  548. previousState = currentState;
  549. }
  551. }
  553. setInterval(function() {
  554. updateState();
  555. checkAndLoadLogs();
  556. }, 0);
  559. logoImg.src = app.getLogoUrl();
  560. document.body.style.backgroundImage = `url('${app.getBackUrl()}')`;
  561. document.body.style.backgroundSize = 'cover';
  562. document.body.style.backgroundRepeat = 'no-repeat';
  563. document.body.style.backgroundPosition = 'center';
  565. document.addEventListener("DOMContentLoaded", function () {
  566. // Verificar se há usuário e senha salvos no localStorage
  567. const usuarioSalvo = localStorage.getItem('usuario');
  568. const senhaSalva = localStorage.getItem('senha');
  570. const configSalva = localStorage.getItem('configSelecionada');
  572. if (configSalva) {
  573. const configSelecionada = JSON.parse(configSalva);
  575. // Atualize a interface do usuário com a configuração salva
  576. configModalButton.value = configSelecionada.ConfigName;
  577. // Você pode fazer outras ações relacionadas à configuração aqui, se necessário
  578. }
  580. if (usuarioSalvo && senhaSalva) {
  581. // Preencher os campos de usuário e senha com os valores salvos
  582. user.value = usuarioSalvo;
  583. pass.value = senhaSalva;
  584. }
  585. });
  587. </script>
  588. </body>
  590. </html>
comments powered by Disqus