Tema Dtunnel Mod 2

SUBMITTED BY: iTechNet4G

DATE: Nov. 8, 2023, 12:22 p.m.

UPDATED: March 18, 2024, 12:56 a.m.

FORMAT: Text only

SIZE: 27.0 kB

History Raw Download

HITS: 640

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"></script>
  12. <style>
  13. @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');
  15. :root {
  17. /*Editar o modal*/
  18. --btn-modal: #0000003f;
  19. --btn-border: 1px solid #09beb586;
  20. --btn-modal-border: 50px;
  21. --modal-shadow: #ffffff;
  22. --modal-bg: #171e2e;
  23. --modal-icon: #fff;
  24. --config-color: #0000003f;
  25. --category-color: #0000003f;
  26. --text-color: #ffffff;
  28. /*Editar Layout*/
  29. --fundo: #ffffff;
  30. --topo: #09beb586;
  31. --icon: #4071FF;
  32. --icon-bg: #E5EAFC;
  33. --config: #F7F7FC;
  34. --box-border: 1px solid #C0C6DE;
  35. --box-bg: transparent;
  36. --box-icon: black;
  37. --info1: #C0C6DE;
  38. --info2: #4071FF;
  39. }
  41. body {
  42. font-family: 'Be Vietnam Pro', sans-serif;
  43. background: var(--fundo);
  44. height: 100vh;
  45. width: 100vw;
  46. justify-content: center;
  47. align-items: center;
  48. }
  50. .container {
  51. display: flex;
  52. flex-direction: row;
  53. justify-content: space-between;
  54. background: var(--topo);
  55. width: 100vw;
  56. padding: 0 auto;
  58. }
  60. button.power-icon {
  61. font-size: 2.5em;
  62. box-shadow: 0 20px 25px 0px #4071ff54, 0 2px 0px 0px #4071ff10;
  63. }
  65. .app-bg-gray-1 {
  66. background: var(--config);
  67. }
  69. .app-bg-gray-2 {
  70. background: var(--icon-bg);
  71. }
  73. .app-bg-gray-3 {
  74. background: #fff;
  75. }
  77. .app-bg-4 {
  78. background: linear-gradient(#13cf8e, #13cf8e, #0098ff, #5995fd);
  79. background-size: 400% 400%;
  80. animation: gradient 5s ease infinite;
  81. }
  83. @keyframes gradient {
  84. 0% {
  85. background-position: 0% 50%;
  86. }
  87. 50% {
  88. background-position: 100% 50%;
  89. }
  90. 100% {
  91. background-position: 0% 50%;
  92. }
  93. }
  95. .app-bg-blue {
  96. background: #4071FF;
  97. }
  99. .app-color-blue {
  100. color: #4071FF;
  101. }
  103. .app-color-gray-1 {
  104. color: #C0C6DE;
  105. }
  107. .app-rounded {
  108. border-bottom-left-radius: 50px;
  109. border-bottom-right-radius: 50px;
  110. }
  112. .status {
  113. font-size: 1em;
  114. }
  116. .put {
  117. border-radius: 60px;
  118. }
  120. .icon {
  121. font-size: 0.8em;
  122. color: var(--box-icon);
  123. }
  125. input {
  126. width: 100%;
  127. background: transparent;
  128. border: none;
  129. outline: none;
  130. color: var(--box-typing);
  131. line-height: 1;
  132. font-weight: 600;
  133. font-size: 1.1rem;
  134. }
  136. .box {
  137. border: var(--box-border);
  138. background: var(--box-bg);
  139. }
  141. .tool {
  142. align-items: center;
  143. justify-content: center;
  144. text-align: center;
  145. }
  147. .tool-bt {
  148. background: var(--btn-modal);
  149. height: 50px;
  150. width: 150px;
  151. border: var(--btn-border);
  152. }
  154. .info {
  155. color: var(--info2);
  156. }
  158. .info1 {
  159. color: var(--info1);
  160. }
  162. .info2 {
  163. color: var(--modal-icon);
  164. }
  166. .info3 {
  167. font-size: 1.2em;
  168. color: var(--icon);
  169. }
  171. .modal {
  172. backdrop-filter: blur(5px);
  173. -webkit-backdrop-filter: blur(5px);
  174. }
  176. .modal-content {
  177. border: none;
  178. background: var(--modal-bg);
  179. box-shadow: 0 5px 10px var(--modal-shadow);
  180. color: var(--text-color);
  181. }
  183. .modal-dialog {
  184. padding: 0 0.5rem;
  185. }
  187. .bg-category {
  188. background: var(--category-color);
  189. }
  191. .bg-config {
  192. background: var(--config-color);
  193. }
  195. .btn{
  196. width: 150px;
  197. background-color: #171e2e;
  198. outline: none;
  199. height: 49px;
  200. border-radius: var(--btn-modal-border);
  201. text-transform: uppercase;
  202. font-weight: 600;
  203. margin: 10px 0;
  204. cursor: pointer;
  205. transition: 0.5s;
  206. border: var(--btn-border);
  207. }
  209. </style>
  210. </head>
  211. <body class="h-screen">
  212. <div class="container px-6 pt-10 pb-44 app-rounded">
  213. <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>
  214. <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>
  215. <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>
  216. </div>
  217. <div class="flex flex-row items-center justify-center -top-32 relative">
  218. <div class="w-56 h-56 app-bg-gray-3 rounded-full items-center justify-center flex">
  219. <div class="w-44 h-44 app-bg-4 rounded-full flex justify-center items-center">
  220. <button class="fa-solid fa-power-off bg-white app-color-blue rounded-full p-10 power-icon" onclick="startStopVpn()"></button>
  221. </div>
  222. </div>
  223. </div>
  224. <div class="flex flex-col -top-36 relative">
  225. <div class="py-3 flex flex-row justify-center items-center">
  226. <span class="app-color-gray-1 mr-2">INSIRA SEU LOGIN</span>
  227. <i class="fa-solid fa-check app-color-gray-1"></i>
  228. </div>
  232. <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">
  233. <i class="icon fa fa-cogs"></i>
  234. <input type="text" placeholder="CONFIG." disabled id="config">
  235. <i class="icon fa fa-angle-double-down"></i>
  236. </div>
  238. <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">
  239. <i class="icon fa fa-user"></i>
  240. <input type="text" placeholder="Nome de usuario" id="username">
  241. </div>
  243. <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">
  244. <i class="icon fa fa-lock"></i>
  245. <input type="text" placeholder="Senha" id="password">
  246. <i class="icon fa fa-eye" onclick="password.type==`text`?password.type = `password`:password.type = `text`"></i>
  247. </div>
  249. <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">
  250. <i class="icon fa fa-lock"></i>
  251. <input type="text" placeholder="V2ray UUID" id="uuid">
  252. <i class="icon fa fa-eye" onclick="uuid.type==`text`?uuid.type = `password`:uuid.type = `text`"></i>
  253. </div>
  255. <div class="flex flex-row items-center justify-center mt-4">
  256. <span class="status app-color-blue font-semibold" id="state">DESCONECTADO</span>
  257. </div>
  259. <div class="flex flex-row items-center justify-center mt-2">
  260. <i class="info1 fa-solid fa-rss app-color-gray-1 mr-2"></i>
  261. <span class="info1 font-semibold text-xs mr-2" id="name">REDE</span>
  262. <span class="info font-semibold text-xs" id="ip">127.0.0.1</span>
  263. </div>
  264. <div class="flex flex-row items-center justify-center mt-1">
  265. <i class="info1 fa-solid fa-user app-color-gray-1 mr-2"></i>
  266. <span class="info font-semibold text-xs" id="total">00</span>
  267. </div>
  268. </div>
  269. </div>
  270. <div class="modal fade" id="configModal">
  271. <div class="modal-dialog modal-dialog-centered" role="document">
  272. <div class="modal-content rounded-3 shadow">
  273. <div class="modal-header border-bottom-0 pb-0">
  274. <h1 class="modal-title fs-5" style="color: var(--text-color);">CONFIGURAÇÕES</h1>
  275. <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
  276. </div>
  277. <div class="modal-body p-1 text-center">
  278. <ul class="list-group bg-transparent overflow-y-auto config-body" style="max-height: 600px;"></ul>
  279. </div>
  280. </div>
  281. </div>
  282. </div>
  283. <div class="modal fade" id="loggerModal">
  284. <div class="modal-dialog modal-dialog-centered" role="document">
  285. <div class="modal-content rounded-3 shadow">
  286. <div class="modal-body p-1 text-center">
  287. <ul class="list-group bg-transparent overflow-y-auto logger-content" style="max-height: 600px;">
  288. </ul>
  289. </div>
  290. <div class="modal-footer flex-nowrap p-0">
  291. <button class="btn btn-primary w-100 clear-logger" style="background-color:var(--btn-modal);">LIMPAR</button>
  292. <button type="button" class="btn btn-primary w-100" data-bs-dismiss="modal" style="background-color: var(--btn-modal);">FECHAR</button>
  294. </div>
  295. </div>
  296. </div>
  297. </div>
  298. <div class="tool webm modal fade" index="-1" id="ToolsModal">
  299. <div class="modal-dialog modal-dialog-centered" role="document">
  302. <div class="modal-content">
  303. <div class="tool modal-header">
  304. <h5 class="modal-title" style="color:#ffffff;">FERRAMENTAS</h5>
  305. </div>
  306. <div class="modal-body">
  307. <button class="tool-bt rounded-2xl text-white" onclick="DtStartCheckUser.execute()"><i class="info2 bi bi-calendar-check mr-2"></i>VALIDADE</button>
  308. </div>
  309. <div class="modal-body">
  310. <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>
  311. <button class="tool-bt rounded-2xl text-white" onclick="DtStartWebViewActivity.execute('https://pluto.tv')"><i class="info2 bi bi-globe mr-2"></i>TV & FILMES</button>
  312. </div>
  313. <div class="modal-body">
  314. <button class="tool-bt rounded-2xl text-white" onclick="DtStartApnActivity.execute()"><i class="info2 bi bi-wifi mr-2"></i>APN</button>
  315. <button class="tool-bt rounded-2xl text-white" onclick="DtIgnoreBatteryOptimizations.execute()"><i class="info2 bi bi-battery-full mr-2"></i>BATERIA</button>
  316. </div>
  317. <div class="modal-body">
  318. <button class="tool-bt rounded-2xl text-white" onclick="DtCleanApp.execute()"><i class="info2 bi bi-trash3 mr-2"></i>LIMPAR</button>
  319. </div>
  320. <div class="tool modal-footer">
  321. <button type="button" class="btn btn-primary" data-bs-dismiss="modal" style="background-color: var(--btn-modal);">FECHAR</button>
  323. </div>
  324. </div>
  325. </div>
  326. </div>
  327. <div class="modal fade" id="checkUserModal" index="1">
  328. <div class="modal-dialog modal-dialog-centered" role="document">
  329. <div class="modal-content rounded-3 shadow">
  330. <div class="modal-header border-bottom-0 pb-0">
  331. <h1 class="modal-title fs-5 chk-title text-light"></h1>
  332. <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
  333. </div>
  334. <div class="modal-body text-center">
  335. <p class="fs-5 mb-0 chk-message text-light"></p>
  336. </div>
  337. </div>
  338. </div>
  339. </div>
  340. <div class="md modal fade" id="speedTestModal">
  341. <div class="md modal-dialog modal-dialog-centered" role="document">
  342. <div class="md modal-content rounded-3 shadow">
  343. <div class="md modal-header border-bottom-0 py-3">
  344. <button class="btn-close btn-close-white" data-bs-dismiss="modal"
  345. aria-label="Close"></button>
  347. </div>
  348. <div class="modal-body ratio rounded-bottom-3" style="height: 600px;">
  349. <div class="spinner d-flex w-100 h-100 align-items-center justify-content-center">
  350. <div class="spinner-border text-light p-5" role="status">
  351. <span class="visually-hidden">Loading...</span>
  352. </div>
  353. </div>
  354. <iframe class="rounded-bottom-3" id="speedFrame"></iframe>
  355. </div>
  356. </div>
  357. </div>
  358. </div>
  359. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"></script>
  360. <script>
  361. Object.defineProperty(String.prototype, 't', {
  362. value: function t() {
  363. return window?.DtTranslateText?.execute('' + this) ?? '' + this
  364. },
  365. writable: true,
  366. configurable: true,
  367. })
  369. const config = document.querySelector('#config')
  370. config.parentElement.onclick = () => showConfigsModal();
  372. const username = document.querySelector('#username')
  373. username.oninput = e => DtUsername.set(e.target.value)
  375. const password = document.querySelector('#password')
  376. password.oninput = e => DtPassword.set(e.target.value)
  378. const uuid = document.querySelector('#uuid')
  379. uuid.oninput = e => DtUuid.set(e.target.value)
  381. const clearLogger = document.querySelector('.clear-logger')
  383. const checkUserModal = new bootstrap.Modal(document.querySelector('#checkUserModal'))
  384. const configModal = new bootstrap.Modal(document.querySelector('#configModal'))
  385. const loggerModal = new bootstrap.Modal(document.querySelector('#loggerModal'))
  386. const ToolsModal = new bootstrap.Modal(document.querySelector('#ToolsModal'))
  387. const speedTestModal = new bootstrap.Modal(document.querySelector('#speedTestModal'))
  390. const dtConfigClickListener = () => {
  391. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{ "auth": {"username": ""} }`)
  392. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  394. config.placeholder = data.name ?? 'Escolha um servidor';
  395. username.parentElement.style.setProperty('display', !data?.auth?.username && !isV2ray ? 'flex' : 'none', 'important')
  396. password.parentElement.style.setProperty('display', !data?.auth?.password && !isV2ray ? 'flex' : 'none', 'important')
  397. uuid.parentElement.style.setProperty('display', !data?.auth?.v2ray_uuid && isV2ray ? 'flex' : 'none', 'important')
  398. }
  400. const startStopVpn = e => {
  401. if (DtGetVpnState.execute() != 'DISCONNECTED') {
  402. DtExecuteVpnStop.execute()
  403. } else {
  404. DtExecuteVpnStart.execute()
  405. }
  406. }
  408. clearLogger.addEventListener('click', () => DtClearLogs.execute())
  410. speedTestModal._element.addEventListener('shown.bs.modal', () => {
  411. const iframe = document.querySelector('#speedFrame');
  412. if (!iframe.src) {
  413. iframe.src = 'http://speedtest.sercomtel.com.br/'
  414. iframe.addEventListener('load', () => {
  415. mp3Modal._element.querySelector('.spinner').classList.add('d-none')
  416. })
  417. }
  418. })
  419. speedTestModal._element.addEventListener('hide.bs.modal', () => {
  420. const iframe = document.querySelector('#speedFrame');
  421. iframe.src = '';
  422. })
  424. const dtVpnStateListener = state => {
  425. const isRunning = state != 'DISCONNECTED';
  426. const status = document.querySelector('#state')
  428. status.innerHTML = ('LBL_STATE_' + state).t()
  430. if (isRunning) {
  431. username.setAttribute('readonly', 'true')
  432. password.setAttribute('readonly', 'true')
  433. status.style.color = '#00ff15'
  434. } else {
  435. username.removeAttribute('readonly')
  436. password.removeAttribute('readonly')
  437. status.style.color = 'RED'
  438. }
  439. }
  441. const dtCheckUserStartedListener = () => {
  442. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{}`)
  443. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  444. if (isV2ray || !data.urlCheckUser) return;
  446. const html = `
  447. <div class="d-flex justify-content-center">
  448. <div class="spinner-border p-4" role="status">
  449. <span class="visually-hidden">Loading...</span>
  450. </div>
  451. </div>
  452. `
  454. checkUserModal._element.querySelector('.chk-title').textContent = 'CHECK USER'
  455. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  456. checkUserModal.show()
  457. }
  459. const dtCheckUserModelListener = model => {
  460. const data = JSON.parse(model ?? `{"username": "test"}`)
  461. const html = `
  462. <div class="d-flex flex-column text-white">
  463. <span>👤Nome de usuario: ${data.username}</span>
  464. <span>📆Expira em: ${data.expiration_date}</span>
  465. <span>📆Dias restantes: ${data.expiration_days}</span>
  466. <span>🚫Conexoes: ${data.count_connections}|${data.limit_connections}</span>
  467. </div>
  468. `
  470. checkUserModal._element.querySelector('.chk-title').textContent = ''
  471. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  472. checkUserModal.show()
  473. }
  475. const showConfigsModal = () => {
  476. const mock = '[{"sorter":6,"color":"#6D08041C","name":"CONFIG","id":1393,"items":[{"mode":"V2RAY - VLESS","sorter":4,"tlsVersion":"TLSv1.2","name":"CONFIG 01","icon":"https://cdn-icons-png.flaticon.com/512/8187/8187143.png","id":11803,"status":"ACTIVE"},{"mode":"SSH_DIRECT","sorter":2,"tlsVersion":"TLSv1.2","name":"CONFIG 02","icon":"https://cdn-icons-png.flaticon.com/512/8187/8187143.png","id":28627,"status":"ACTIVE"},{"mode":"OVPN_PROXY","sorter":23,"tlsVersion":"TLSv1.2","name":"CONFIG 03","icon":"https://cdn-icons-png.flaticon.com/512/8187/8187143.png","id":30001,"status":"ACTIVE"}]},{"sorter":2,"color":"#6D08041C","name":"CONFIG 2","id":1846,"items":[{"mode":"SSH_PROXY","sorter":1,"tlsVersion":"TLSv1.2","name":"CONFIG 01","icon":"https://cdn-icons-png.flaticon.com/512/8187/8187143.png","id":26295,"status":"ACTIVE"}]},{"sorter":4,"color":"#80000000","name":"CONFIG 3","id":3310,"items":[{"mode":"SSH_PROXY","sorter":1,"tlsVersion":"TLSv1.2","name":"CONFIG. TEST","icon":"https://cdn-icons-png.flaticon.com/512/8187/8187143.png","id":29997,"status":"ACTIVE"},{"mode":"OVPN_PROXY","sorter":1,"tlsVersion":"TLSv1.2","name":"CONFIG. TEST 2","icon":"https://cdn-icons-png.flaticon.com/512/8187/8187143.png","id":29998,"status":"ACTIVE"}]}]'
  477. const data = JSON.parse(window?.DtGetConfigs?.execute() || mock)
  479. data.sort((a, b) => a.sorter - b.sorter)
  480. data.forEach(item => item.items.sort((a, b) => a.sorter - b.sorter))
  482. const body = configModal._element.querySelector('.config-body')
  483. body.innerHTML = ''
  485. data.forEach(category => {
  486. const categoryElement = document.createElement('li')
  487. categoryElement.className = 'list-group-item bg-transparent border-0 mb-1 rounded-1 px-1'
  488. categoryElement.style.color = 'var(--text-color)'
  489. categoryElement.innerHTML = `<span class="fw-bold w-100 d-block p-1 rounded-1 mb-1 bg-category">${category.name}</span>`
  491. const configUlElement = document.createElement('ul')
  492. configUlElement.className = 'list-group overflow-y-auto'
  494. category.items.forEach(item => {
  495. const configElement = document.createElement('li')
  496. configElement.className = 'list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1'
  497. configElement.style.color = 'var(--text-color)'
  498. configElement.innerHTML = `
  499. <img src="${item.icon}" width="40" height="40">
  500. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  501. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">${item.name}</span>
  502. <span class="fst-italic fw-bold text-uppercase" style="font-size: 0.7rem;">${item.description || ''}</span>
  503. </div>
  504. <div class="d-flex flex-column ms-2">
  505. <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">${item.mode}</span>
  506. </div>
  507. </li>
  508. `
  509. configElement.addEventListener('click', e => {
  510. window?.DtSetConfig?.execute(item.id)
  511. configModal.hide()
  512. })
  513. configUlElement.appendChild(configElement)
  514. })
  516. categoryElement.appendChild(configUlElement)
  517. body.appendChild(categoryElement)
  518. })
  519. configModal.show()
  520. }
  522. const dtOnNewLogListener = () => {
  523. const mock = [];
  524. for (let i = 0; i < 30; i++) {
  525. mock.push({ 'TIME': 'MESSAGE ' + i })
  526. }
  528. const log = window?.DtGetLogs?.execute() || JSON.stringify(mock)
  529. const data = JSON.parse(log)
  531. let content = '';
  532. data.forEach(item => {
  533. content += '<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);">';
  534. content += Object.keys(item)[0] + " " + item[Object.keys(item)]
  535. content += '</li>';
  536. })
  538. loggerModal._element.querySelector('.logger-content').innerHTML = content;
  539. const listGroup = loggerModal._element.querySelector('.list-group')
  540. listGroup.scrollTo(0, listGroup.scrollHeight)
  541. }
  543. username.value = window?.DtUsername?.get() ?? ''
  544. password.value = window?.DtPassword?.get() ?? ''
  545. uuid.value = window?.DtUuid?.get() ?? ''
  547. dtOnNewLogListener()
  548. dtConfigClickListener()
  549. dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')
  551. </script>
  553. <script>
  554. const config = JSON.parse(DtGetAppConfig.execute());
  555. const urlCheckUser = new URL(config.urlCheckUser);
  556. urlCheckUser.protocol = 'http:';
  558. const createConnection = () => new WebSocket(urlCheckUser);
  559. const startActions = socket => {
  560. socket.send(JSON.stringify({
  561. action: 'all',
  562. data: {}
  563. }));
  564. }
  565. const parseResponseData = data => {
  566. data = JSON.parse(data);
  567. console.log(data)
  569. if (data.total != undefined) {
  570. const total = data.total;
  571. document.getElementById('total').innerHTML = String(total).padStart(2, '0');
  572. }
  573. }
  575. const startSocket = () => {
  576. const socket = createConnection();
  577. socket.onopen = e => startActions(socket);
  578. socket.onmessage = e => parseResponseData(e.data);
  579. }
  581. const setVpnState = state => {
  582. if (state == 'CONNECTED') startSocket();
  583. }
  584. startSocket();
  585. </script>
  586. <script>
  587. class AndroidMock {
  588. static getLocalIP() {
  589. return '192.168.0.1';
  590. }
  592. static getConfig() {
  593. return JSON.stringify({
  594. urlCheckUser: 'URLAQUI'
  595. });
  596. }
  598. static getNetworkName() {
  599. return 'REDE';
  600. }
  602. static openRadioInfo() {
  603. console.log('openRadioInfo');
  604. }
  605. }
  606. </script>
  608. <script>
  609. function showLocalIP(android) {
  610. console.log(android.getNetworkName());
  611. document.getElementById('name').innerHTML = ' ' + android.getNetworkName() + ':';
  612. document.getElementById('ip').innerHTML = android.getLocalIP();
  614. setInterval(() => {
  615. document.getElementById('name').innerHTML =
  616. ' ' + android.getNetworkName() + ':';
  617. document.getElementById('ip').innerHTML = android.getLocalIP();
  618. }, 2000)
  619. }
  621. function showCheckUser(android) {
  622. const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? android.getConfig());
  624. const urlCheckUser = new URL(config.urlCheckUser);
  625. urlCheckUser.protocol = 'ws:';
  626. const socket = new WebSocket(urlCheckUser);
  627. socket.onopen = function (e) {
  628. socket.send(JSON.stringify({
  629. action: 'all',
  630. data: {}
  631. }));
  632. };
  634. socket.onmessage = function (event) {
  635. const data = JSON.parse(event.data);
  636. if (data.total === undefined)
  637. return;
  639. const total = data.total;
  640. document.getElementById('total').innerHTML = ' ' + String(total).padStart(2, '0');
  641. socket.close();
  642. };
  643. }
  647. window.onload = function () {
  648. const android = window.Android || AndroidMock;
  649. showLocalIP(android);
  650. showCheckUser(android);
  651. }
  653. </script>
  654. </body>
  655. </html>
comments powered by Disqus