Tema dt mod

SUBMITTED BY: Buganet

DATE: Aug. 1, 2022, 9:15 p.m.

UPDATED: May 27, 2024, 11:20 a.m.

FORMAT: Text only

SIZE: 32.7 kB

History Raw Download

HITS: 2405

Report
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>ADM ONLINE</title>
  7. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  8. <style>
  9. *{
  10. margin: 0px;
  11. padding: 0px;
  12. box-sizing: border-box;
  13. }
  14. #config-area{
  15. border-radius: 100px;
  16. }
  18. .set-configs {
  19. background-color: #101622;
  20. padding: 10px;
  21. margin-bottom: 5px;
  22. width: 100%;
  23. border-radius: 10px;
  24. }
  26. .set-configs span {
  27. color: #101622;
  28. font-size: large;
  29. }
  30. body,.app{
  31. padding: relative;
  32. height: 100vh;
  33. background-color: #f5f5f5;
  34. flex-direction: column;
  35. justify-content: center;
  36. align-items: center;
  37. }
  38. @media (min-width: 420px) {
  39. body{
  40. width: 360px;
  41. margin: 0px ;
  42. overflow: hidden;
  43. flex-direction: column;
  44. justify-content: center;
  46. }
  47. .container{
  48. width: 360px;
  49. }
  51. }
  52. @media (min-width: 380px) and (max-width: 320px) {
  53. body, .app{
  54. width:100vw;
  55. height: 100vh;
  56. margin: 0;
  57. overflow: hidden;
  58. flex-direction: column;
  59. justify-content: center;
  60. align-items: center;
  62. }
  64. .container{
  65. width: 100%;
  66. }
  67. }
  68. @media (min-width: 380px) and (max-width: 360px) {
  69. body, .app{
  70. width:100vw;
  71. height: 100vh;
  72. margin: 0;
  73. overflow: hidden;
  74. flex-direction: column;
  75. justify-content: center;
  76. align-items: center;
  78. }
  79. .container{
  80. width: 100%;
  81. }
  82. }
  83. .dados{
  84. top: 78%;
  85. background: none;
  86. }
  88. .barSuperior{
  89. width: 100%;
  90. height: 30%;
  91. background-color: #7CDDD7;
  92. display: flex;
  93. position: relative;
  94. justify-content: center;
  95. border-end-end-radius: 28px;
  96. border-end-start-radius: 28px;
  97. z-index: 5;
  98. }
  99. .container{
  100. width: 100% ;
  101. height:40%;
  102. display: flex;
  103. flex-direction: column;
  104. background: none;
  105. justify-content: center;
  106. align-items: center;
  107. position: fixed;
  108. gap: 10px;
  109. top: 45%;
  110. z-index: 2;
  111. }
  112. .selectItens, .Usarname, .Password{
  113. position: relative;
  114. top: -20%;
  115. width: 100%;
  116. height: 45px;
  117. border: 2px solid #999;
  118. border-radius: 7px;
  119. display: flex;
  120. justify-content: space-between;
  121. align-items: center;
  122. }
  123. .ops {
  124. border:2px solid #062931;
  125. background: #101622;
  126. width: 48%;
  127. height: 70px;
  128. display: flex;
  129. justify-content: center;
  130. align-items: center;
  131. color: #ffffff;
  132. text-align: center;
  133. border-radius: 9px;
  134. }
  135. .fi-br-gears{
  136. width: 30px;
  137. height: 30px;
  138. fill: #000;
  139. margin-left: 10px;
  140. }
  141. .fi-rr-angle-double-small-down{
  142. width: 30px;
  143. height: 30px;
  144. fill: #000;
  145. margin-right: 10px;
  146. }
  147. .selectItens button{
  148. width: 85%;
  149. height: 100%;
  150. background: none;
  151. color: #666;
  152. border: none;
  153. text-align: left;
  154. }
  156. .viewItens{
  157. width: 100%;
  158. height: 100%;
  159. background: rgba(0, 0, 0, 0.4);
  160. display: none;
  161. transition: 2s;
  162. top: 0%;
  163. position: fixed;
  164. justify-content: center;
  165. align-items: center;
  166. z-index: 33;
  168. }
  169. .containerViewItens{
  170. width: 90%;
  171. height: 70%;
  172. top: 20%;
  173. background: #171D2B;
  174. border-radius: 10px;
  175. display: flex;
  176. flex-direction: column;
  177. justify-content: center;
  178. align-items: center;
  179. }
  180. .containerBarSuperior{
  181. width: 100%;
  182. height: 30%;
  183. background-color: none;
  184. display: flex;
  185. justify-content: space-between;
  186. align-items: center;
  187. position: absolute;
  188. top: 13%;
  189. z-index: 6;
  190. }
  191. .containerBarSuperior .menu{
  192. width: 35%;
  193. height: 60%;
  194. background-color: #4071F7;
  195. border-radius: 10px;
  196. margin-left: 5%;
  197. }
  198. .containerBarSuperior .Atualizar{
  199. width: 14%;
  200. height: 60%;
  201. background-color: #fff;
  202. border-radius: 12px;
  203. }
  204. .containerBarSuperior .Atualizar svg{
  205. width: 60%;
  206. height: 60%;
  207. fill: #4071F7;
  208. }
  209. .containerBarSuperior .logs svg{
  210. width: 60%;
  211. height: 60%;
  212. fill: #4071F7;
  213. }
  216. .containerBarSuperior .logs{
  217. width: 14%;
  218. height: 60%;
  219. background-color: #fff;
  220. border-radius: 12px;
  221. margin-right: 5%;
  222. }
  223. .ip{
  224. width: 60%;
  225. height: 6%;
  226. background-color: #fff;
  227. border-radius: 12px;
  228. display: flex;
  229. left: 20%;
  230. top: 69%;
  231. justify-content: center;
  232. align-items: center;
  233. position: absolute;
  234. z-index: 6;
  235. }
  236. #ipAddress{
  237. color: blue;
  238. font-size: 14px;
  239. font-weight: 600;
  240. }
  241. .Start{
  242. width: 170px;
  243. height: 170px;
  244. background-color: #ffffff;
  245. border-radius: 50%;
  246. position: absolute;
  247. display: flex;
  248. justify-content: center;
  249. align-items: center;
  250. top: 18%;
  251. left: calc(50% - 85px);
  252. z-index: 12;
  253. }
  254. input{
  255. background: none;
  256. margin-left: -10px;
  257. width: 90%;
  258. height: 100%;
  259. border: none;
  260. outline: none;
  262. }
  263. input::placeholder{
  265. text-align: left;
  266. color: #444;
  267. }
  268. .containerStart{
  269. width: 140px;
  270. height: 140px;
  271. display: flex;
  272. background: linear-gradient(#0FC79E,#0D98ED);
  273. border-radius: 50%;
  274. position: relative;
  275. justify-content: center;
  276. align-items: center;
  277. }
  278. .containerStart span{
  279. position: absolute;
  280. bottom: 0;
  281. top: 130%;
  282. font-size: 14px;
  283. color: #666666;
  284. font-weight: 600;
  285. }
  286. .containerStart .start{
  287. width: 75%;
  288. height: 75%;
  289. background-color: #fff;
  290. border-radius: 50%;
  291. display: flex;
  292. justify-content: center;
  293. align-items: center;
  294. }
  295. .containerStart .start svg{
  296. width: 60%;
  297. height: 60%;
  298. fill: #4071F7;
  299. }
  301. </style>
  302. </head>
  303. <body>
  305. <div class="app">
  306. <div class="barSuperior">
  307. <div class="containerBarSuperior">
  308. <div class="menu" type="button" style="display: flex;justify-content: center; align-items: center; color: #ffffff;">
  309. <div style="position: relative;left: -10%; height: 70%; width: 30%;display: flex; flex-direction: column;align-items: center; justify-content: space-evenly; ">
  310. <div style="position: relative;left:-5%; height: 2px;width: 60%; background-color: #ffffff; border-radius: 2px;"></div>
  311. <div style="position: relative ;left:5%; height: 2px;width: 60%; background-color: #ffffff; border-radius: 2px;">
  312. </div><div style=" position: relative;left: 10%; height: 2px;width: 60%; background-color: #ffffff; border-radius: 2px;"></div>
  313. </div>
  314. Menu</div>
  315. <div class="Atualizar" onclick="app.searchUpdate()" style="display: flex;justify-content: center; align-items: center; color: #ffffff;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="20" height="20">
  316. <g>
  317. <path d="M489.797,256c-10.791-0.141-19.924,7.939-21.099,18.667c-9.959,117.754-113.491,205.138-231.245,195.179 S32.315,356.354,42.275,238.6S155.766,33.462,273.52,43.421c50.983,4.312,98.733,26.75,134.592,63.245h-66.603 c-11.782,0-21.333,9.551-21.333,21.333s9.551,21.333,21.333,21.333h88.384c21.874-0.012,39.604-17.742,39.616-39.616V21.333 C469.509,9.551,459.958,0,448.176,0c-11.782,0-21.333,9.551-21.333,21.333v44.331C321.548-28.425,159.915-19.341,65.826,85.954 s-85.005,266.927,20.29,361.016s266.927,85.005,361.016-20.29c36.575-40.931,59.007-92.547,63.977-147.214 c1.096-11.814-7.593-22.279-19.407-23.375C491.069,256.033,490.434,256.002,489.797,256z"/>
  318. </g></svg></div>
  319. <div class="logs" style="display: flex;justify-content: center; align-items: center; color: #ffffff;" data-bs-toggle="modal"
  320. data-bs-target="#logs" id="logger">
  321. <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 24 24" data-name="Layer 1"><path d="m21 6.243a3.975 3.975 0 0 0 -1.172-2.829l-2.242-2.242a4.022 4.022 0 0 0 -2.828-1.172h-8.758a3 3 0 0 0 -3 3v21h18zm-2.586-1.415a1.923 1.923 0 0 1 .141.172h-2.555v-2.555a1.923 1.923 0 0 1 .172.141zm-13.414 17.172v-19a1 1 0 0 1 1-1h8v5h5v15zm3-13h8v2h-8zm0 4h8v2h-8zm6.018 3.814 1.965.366c-.191 1.047-1.005 2.82-2.848 2.82a3.154 3.154 0 0 1 -1.986-.706c-.314-.223-.424-.294-.662-.294a2.18 2.18 0 0 0 -.916.66l-1.5-1.317a3.749 3.749 0 0 1 2.416-1.343 2.925 2.925 0 0 1 1.821.664 1.235 1.235 0 0 0 .827.336c.623 0 .88-1.173.883-1.186z"/></svg>
  322. </div>
  323. </div>
  324. </div>
  326. <div class="modal fade show" tabindex="-1" role="dialog" id="ToolsModal" style="display: none;">
  327. <div class="modal-dialog modal-dialog-centered" role="document">
  328. <div class="modal-content rounded-3 shadow" style="height: 60%; background-color: #151D2D;">
  329. <div class="modal-header border-bottom-0 pb-0">
  330. <h1 class="modal-title fs-5 text-white">Configurações</h1>
  331. <button style="color: #ffffff; font-size: 30px; background: none; border: none;" type="button" id="closeMenu" >x</button>
  332. </div>
  333. <hr style="background-color: #ffffff; height: 2px;">
  334. <div class="modal-body">
  335. <div style="left: 27.5%; position: relative;" class="ops btn-menu shadow" onclick="startCheckuser()" data-bs-dismiss="modal">Verificar usuario</div><br>
  336. <div class="d-flex justify-content-between mb-2">
  337. <div class="ops btn-menu shadow" onclick="app.openApn()">Abrir Apn</div>
  338. <div class="ops btn-menu shadow" onclick="app.openWebView()">Abrir WebView</div>
  339. </div>
  340. <div class="d-flex justify-content-between mb-2">
  341. <div class="ops btn-menu shadow" onclick="app.openHostShare()">Abrir Roteador</div>
  342. <div class="ops btn-menu shadow" onclick="app.offlineUpdate()">Atualizar via arquivo</div>
  343. </div>
  344. <div class="d-flex justify-content-between mb-2">
  345. <div class="ops btn-menu shadow" onclick="app.restartApp()">Reiniciar aplicativo</div>
  346. </div>
  347. </div>
  348. </div>
  349. </div>
  350. </div>
  352. <div class="ViewLogs">
  353. <div class="modal fade" tabindex="-1" role="dialog" id="logs">
  354. <div class="modal-dialog modal-dialog-centered" role="document">
  355. <div class="modal-content rounded-3 shadow" style="background: #151D2D;">
  356. <div class="modal-header border-bottom-0 pb-0">
  357. <h1 class="modal-title fs-5 text-white">LOGS</h1>
  358. </div>
  359. <div class="modal-body">
  360. <ul style="color: #ffffff;" id="logList"></ul>
  361. </div>
  362. <div class="modal-footer d-flex justify-content-between p-0">
  363. <button type="button" class="buttonModalClose" style="border: 2px solid #062931; color:#fff; background: #101622; border-radius: 15px; width: 20%;" onclick="app.clearLogs()" >LIMPAR</button>
  364. <button type="button" class="buttonModalClose"style="border: 2px solid #062931;background: #101622;color:#fff; border-radius: 15px; width: 20%;" data-bs-dismiss="modal">FECHAR</button>
  365. </div>
  366. </div>
  367. </div>
  368. </div>
  369. </div>
  370. <div class="Start" type="button" onclick="startOrStop();" id="startOrStopButton">
  371. <div class="containerStart">
  372. <div class="start" >
  373. <?xml version="1.0" encoding="UTF-8"?>
  374. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"id='svg' viewBox="0 0 512.292 512.292" style="enable-background:new 0 0 130.292 130.292;" xml:space="preserve" width="20" height="60">
  375. <g>
  376. <path d="M256.061,0L256.061,0c17.673,0,32,14.327,32,32v106.667c0,17.673-14.327,32-32,32l0,0c-17.673,0-32-14.327-32-32V32 C224.061,14.327,238.387,0,256.061,0z"/>
  377. <path d="M330.727,105.387L330.727,105.387c-0.157,10.742,5.259,20.8,14.315,26.581c80.432,49.143,105.796,154.185,56.652,234.616 S247.51,472.38,167.078,423.237S61.282,269.052,110.426,188.62c14.042-22.982,33.324-42.315,56.269-56.418 c9.211-5.781,14.773-15.92,14.699-26.795l0,0c0.049-17.673-14.238-32.039-31.911-32.088c-6.07-0.017-12.02,1.693-17.155,4.931 C22.233,146.634-11.58,291.318,56.803,401.412s213.067,143.907,323.161,75.524s143.907-213.067,75.524-323.161 c-19.035-30.645-44.879-56.489-75.524-75.524c-14.997-9.461-34.824-4.973-44.285,10.024 C332.447,93.397,330.731,99.33,330.727,105.387z"/>
  378. </g>
  379. </svg>
  381. </div>
  382. <span style="top: 115%;">INSIRA SEU LOGIN</span>
  383. </div>
  384. </div>
  386. 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"}]}]'
  387. const data = JSON.parse(window?.DtGetConfigs?.execute() || mock)
  390. <div class="container">
  391. <div class="selectItens">
  392. <?xml version="1.0" encoding="UTF-8"?>
  393. <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="20" height="20" style="margin: 10px;"><path d="M10.57,10.99c.23,.13,.48,.19,.73,.19,.53,0,1.04-.28,1.31-.77,.4-.72,.15-1.64-.58-2.04l-.64-.36c.07-.33,.1-.67,.1-1.02s-.04-.69-.1-1.02l.64-.36c.72-.4,.98-1.32,.58-2.04-.4-.72-1.32-.98-2.04-.58l-.65,.36c-.54-.51-1.2-.89-1.92-1.12v-.76c0-.83-.67-1.5-1.5-1.5s-1.5,.67-1.5,1.5v.76c-.72,.23-1.38,.61-1.92,1.12l-.65-.36c-.72-.4-1.64-.15-2.04,.58-.4,.72-.15,1.64,.58,2.04l.64,.36c-.07,.33-.1,.67-.1,1.02s.04,.69,.1,1.02l-.64,.36c-.72,.4-.98,1.32-.58,2.04,.27,.49,.79,.77,1.31,.77,.25,0,.5-.06,.73-.19l.65-.36c.54,.51,1.2,.89,1.92,1.12v.76c0,.83,.67,1.5,1.5,1.5s1.5-.67,1.5-1.5v-.76c.72-.23,1.38-.61,1.92-1.12l.65,.36Zm-4.07-1.99c-1.1,0-2-.9-2-2s.9-2,2-2,2,.9,2,2-.9,2-2,2Zm16.03,9.37l-.64-.36c.07-.33,.1-.67,.1-1.02s-.04-.69-.1-1.02l.64-.36c.72-.4,.98-1.32,.58-2.04-.4-.72-1.32-.98-2.04-.58l-.65,.36c-.54-.51-1.2-.89-1.92-1.12v-.76c0-.83-.67-1.5-1.5-1.5s-1.5,.67-1.5,1.5v.76c-.72,.23-1.38,.61-1.92,1.12l-.65-.36c-.72-.4-1.64-.15-2.04,.58-.4,.72-.15,1.64,.58,2.04l.64,.36c-.07,.33-.1,.67-.1,1.02s.04,.69,.1,1.02l-.64,.36c-.72,.4-.98,1.32-.58,2.04,.27,.49,.79,.77,1.31,.77,.25,0,.5-.06,.73-.19l.65-.36c.54,.51,1.2,.89,1.92,1.12v.76c0,.83,.67,1.5,1.5,1.5s1.5-.67,1.5-1.5v-.76c.72-.23,1.38-.61,1.92-1.12l.65,.36c.23,.13,.48,.19,.73,.19,.53,0,1.04-.28,1.31-.77,.4-.72,.15-1.64-.58-2.04Zm-5.53,.63c-1.1,0-2-.9-2-2s.9-2,2-2,2,.9,2,2-.9,2-2,2Z"/></svg>
  395. <button style="margin-left: -15px; margin-top: 5px;" class="form-control btn-custom mb-2 config-button" value="Selecione um Servidor" id="configModalButton" data-bs-toggle="modal" data-bs-target="#configModal" >Escolha um servidor</button>
  396. <?xml version="1.0" encoding="UTF-8"?>
  397. <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="20" height="20" style="margin: 5px;"><path d="M12,19c-1.049,0-2.036-.409-2.778-1.151l-3.925-3.875c-.393-.388-.397-1.021-.009-1.414,.387-.394,1.021-.396,1.414-.009l3.929,3.88c.737,.737,2.003,.733,2.731,.004l3.935-3.884c.392-.388,1.023-.385,1.414,.009,.388,.393,.384,1.026-.01,1.414l-3.93,3.88c-.736,.738-1.723,1.146-2.772,1.146Zm.706-5.327l5.999-5.964c.392-.389,.394-1.022,.004-1.414-.39-.393-1.022-.395-1.414-.004l-5.294,5.263L6.705,6.291c-.391-.389-1.024-.386-1.415,.004-.389,.392-.387,1.025,.004,1.415l6.001,5.964c.195,.194,.45,.291,.705,.291s.51-.097,.705-.291Z"/></svg>
  399. </div>
  401. <div class="Usarname">
  402. <?xml version="1.0" encoding="UTF-8"?>
  403. <!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
  404. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512; margin-left:10px ;position:relative" xml:space="preserve" width="20" height="20">
  405. <g>
  406. <circle cx="256" cy="128" r="128"/>
  407. <path d="M256,298.667c-105.99,0.118-191.882,86.01-192,192C64,502.449,73.551,512,85.333,512h341.333 c11.782,0,21.333-9.551,21.333-21.333C447.882,384.677,361.99,298.784,256,298.667z"/>
  408. </g>
  409. </svg>
  411. <input type="text" style="margin-left:5px;" id="username" placeholder="Nome de usuario">
  412. </div>
  414. <div class="Password">
  415. <?xml version="1.0" encoding="UTF-8"?>
  416. <!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
  417. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512; margin-left:10px ;position:relative" xml:space="preserve" width="20" height="20">
  418. <g>
  419. <path d="M405.333,179.712v-30.379C405.333,66.859,338.475,0,256,0S106.667,66.859,106.667,149.333v30.379 c-38.826,16.945-63.944,55.259-64,97.621v128C42.737,464.214,90.452,511.93,149.333,512h213.333 c58.881-0.07,106.596-47.786,106.667-106.667v-128C469.278,234.971,444.159,196.657,405.333,179.712z M277.333,362.667 c0,11.782-9.551,21.333-21.333,21.333c-11.782,0-21.333-9.551-21.333-21.333V320c0-11.782,9.551-21.333,21.333-21.333 c11.782,0,21.333,9.551,21.333,21.333V362.667z M362.667,170.667H149.333v-21.333c0-58.91,47.756-106.667,106.667-106.667 s106.667,47.756,106.667,106.667V170.667z"/>
  420. </g>
  422. </svg>
  424. <input type="password" style="width: 68%; margin-left: -15px;" id="password" placeholder="Password"> <button style="border: none; background: none; margin: 10px;" id="mostrarSenha"><svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="25" height="25"><path d="M23.821,11.181v0C22.943,9.261,19.5,3,12,3S1.057,9.261.179,11.181a1.969,1.969,0,0,0,0,1.64C1.057,14.739,4.5,21,12,21s10.943-6.261,11.821-8.181A1.968,1.968,0,0,0,23.821,11.181ZM12,18a6,6,0,1,1,6-6A6.006,6.006,0,0,1,12,18Z"/><circle cx="12" cy="12" r="4"/></svg></button>
  425. </div>
  428. </div>
  429. <div class="info">
  430. <div class="status"></div>
  431. <div class="ip" style="width:80%;left: 10%; padding: 10px; justify-content: space-between;">
  432. <?xml version="1.0" encoding="UTF-8"?>
  433. <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="30" height="30" style="margin: 10px;" data-name="Layer 1" viewBox="0 0 24 24">
  434. <path d="m20,12h-1c0-3.859-3.14-7-7-7v-1c4.411,0,8,3.589,8,8Zm-5,0h1c0-2.206-1.794-4-4-4v1c1.654,0,3,1.346,3,3ZM12,0v1c6.065,0,11,4.935,11,11h1C24,5.383,18.617,0,12,0Zm-1.713,14.42l6.42,6.42-.354.354c-1.868,1.867-4.321,2.802-6.774,2.802s-4.906-.935-6.774-2.802c-3.735-3.735-3.735-9.812,0-13.548l.354-.354,6.42,6.42,2.067-2.067.707.707-2.067,2.067Zm4.996,6.411L3.169,8.718c-2.998,3.364-2.883,8.543.343,11.77,3.228,3.228,8.405,3.34,11.77.344Z"/>
  435. </svg>
  437. <span>REDE:</span> <span id="ipAddress" style="z-index: 100; width: 90%; height: 100%; display: flexbox;justify-content: center; font-size: 20px; align-items: center; text-align: left; position:relative;margin-left: 5px;"></span>
  440. </div>
  441. <div class="dados" style="margin:10px; position: fixed; width: 82%;left: 10%; font-size: 25px; font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color :red;" >
  442. <div style="height: 35px; margin-top: 15px; width: 60%; position: relative; left: 14%; display: flex; align-items: center; justify-content: center;" id="state">
  443. </div>
  444. </div>
  445. </div>
  446. </body>
  447. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  448. <script>
  449. const senhaInput = document.getElementById("password");
  450. const mostrarSenhaButton = document.getElementById("mostrarSenha");
  452. mostrarSenhaButton.addEventListener("click", function () {
  453. if (senhaInput.type === "password") {
  454. senhaInput.type = "text";
  455. } else {
  456. senhaInput.type = "password";
  457. }
  458. });
  459. function mostrarEnderecoIP() {
  460. var ipAddress = window.app.getIPuser();
  461. document.getElementById("ipAddress").textContent = ipAddress;
  462. }
  465. var intervalId = setInterval(mostrarEnderecoIP, 1000);
  468. setTimeout(function() {
  469. clearInterval(intervalId);
  470. }, 5000);
  472. // Também pode chamar a função uma vez quando a página é carregada inicialmente
  473. window.onload = mostrarEnderecoIP;
  476. const menu = document.querySelector('.menu');
  477. menu.addEventListener('click', function () {
  478. const modal = document.getElementById('ToolsModal');
  479. modal.style.display = 'block';
  480. });
  481. const closeMenu = document.getElementById('closeMenu');
  482. closeMenu.addEventListener('click', function () {
  483. const modal = document.getElementById('ToolsModal');
  484. modal.style.display = 'none';
  485. });
  486. const logoImg = document.getElementById("logoImg");
  487. //const rodapeImg = document.getElementById("rodapeImg");
  488. const configModalButton = document.getElementById("configModalButton");
  489. const user = document.getElementById("username");
  490. const pass = document.getElementById("password");
  491. const startOrStopButton = document.getElementById("startOrStopButton");
  492. const state = document.getElementById("state");
  496. function loadLogs() {
  497. var logList = document.getElementById("logList");
  498. var logs = JSON.parse(app.getlogs())
  500. var formattedLogs = '';
  501. logs.forEach(item => {
  502. 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);">';
  503. formattedLogs += item.TIME;
  504. formattedLogs += '</li>';
  505. });
  507. logList.innerHTML = '<ul class="list-group">' + formattedLogs + '</ul>';
  508. }
  512. var modal = new bootstrap.Modal(document.getElementById('configModal'));
  514. const serverOptions = document.getElementById('serverOptions');
  515. var servers = JSON.parse(app.getJsonServers());
  519. function createServerCard(server) {
  520. const card = document.createElement('div');
  521. card.classList.add('set-configs');
  522. card.style.backgroundColor = "rgba(255,255,255,0.4)";
  525. var configImage = document.createElement('img');
  526. configImage.style.cssText = "width: 30px; height: 30px; margin-right: 10px; border-radius: 50%;";
  527. configImage.src = server.ConfigImage;
  529. const cardBody = document.createElement('div');
  530. cardBody.classList.add('card-body');
  532. const cardTitle = document.createElement('h5');
  533. cardTitle.classList.add('card-title');
  535. const configName = document.createElement('span');
  536. configName.textContent = server.ConfigName;
  537. cardTitle.appendChild(configImage);
  538. cardTitle.appendChild(configName);configModalButton
  541. cardBody.appendChild(cardTitle);
  544. card.appendChild(cardBody);
  546. card.addEventListener('click', function () {
  547. selectServer(server);
  548. });
  550. return card;
  551. }
  554. function selectServer(server) {
  555. configModalButton.value = server.ConfigName;
  556. const configButton = document.getElementById("");
  557. app.returnConfigId(server.ConfigId);
  559. // Define o valor do elemento operadoraatx
  560. const operadoraatxElement = document.getElementById("configModalButton");
  561. operadoraatxElement.style.color = "#000000";
  562. operadoraatxElement.textContent = server.ConfigName;
  564. // Armazena o objeto server no localStorage
  565. localStorage.setItem('configSelecionada', JSON.stringify(server));
  567. modal.hide();
  568. }
  571. servers.forEach(function (server) {
  572. const card = createServerCard(server);
  573. serverOptions.appendChild(card);
  574. });
  578. function startOrStop() {
  579. if (user.value != "" && pass.value != "") {
  580. localStorage.setItem('usuario', user.value);
  581. localStorage.setItem('senha', pass.value);
  582. app.setUserAndPass(user.value, pass.value);
  583. }
  585. app.startOrStop();
  588. }
  591. var previousLogs = [];
  593. function checkAndLoadLogs() {
  594. var logs = JSON.parse(app.getlogs());
  596. if (!arraysAreEqual(logs, previousLogs)) {
  597. previousLogs = logs;
  598. loadLogs();
  599. }
  600. }
  604. function arraysAreEqual(arr1, arr2) {
  605. if (arr1.length !== arr2.length) {
  606. return false;
  607. }
  609. for (var i = 0; i < arr1.length; i++) {
  610. if (arr1[i].TIME !== arr2[i].TIME) {
  611. return false;
  612. }
  613. }
  615. return true;
  616. }
  618. async function startCheckuser() {
  619. try {
  620. const dataString = await app.getCheckuserDados();
  622. console.log("CHECKUSER: " + dataString);
  624. if (dataString !== "null") {
  625. const data = JSON.parse(dataString);
  627. var myModal = new bootstrap.Modal(document.getElementById('checkuserModal'));
  628. myModal.show();
  630. const strCheckValidade =
  631. `<span style="color: white;">Usuario: </span> <span style="color: green;">${data.username}</span><br/>
  632. <span style="color: white;">Expira em: </span><span style="color: green;">${data.expiration_date}</span><br/>
  633. <span style="color: white;">Dias Restantes: </span><span style="color: green;">${data.expiration_days}</span><br/>
  634. <span style="color: white;">Conectados: </span><span style="color: green;">${data.count_connection} / ${data.limiter_user}</span>`;
  636. document.getElementById('checkuser').innerHTML = strCheckValidade;
  637. }
  638. } catch (error) {
  639. console.error("Erro ao buscar dados do usuário:", error);
  640. }
  641. }
  643. var previousState = null;
  645. const start = document.querySelector('#svg');
  646. function updateState() {
  647. var currentState = app.getState();
  649. if (currentState !== previousState) {
  651. if (currentState == "Conectado") {
  652. state.innerHTML = "<span style='color: green;'>"+ currentState +"</span>";
  653. startCheckuser();
  655. start.style.fill = "#01FF2A";
  656. } else if (currentState == "Iniciando" || currentState == "Autenticando" || currentState == "Conectando") {
  657. state.innerHTML = "<span style='color: orange;'>" + currentState + "</span>";
  658. start.style.fill = "#FFB801";
  659. } else if (currentState == "Reconectando" || currentState == "Desconectado") {
  660. state.innerHTML = "<span style='color: red;'>" + currentState + "</span>";
  661. } else {
  662. state.innerHTML = "<span style='color: orange;'>" + currentState + "</span>";
  663. start.style.fill = "#4071F7";
  664. }
  666. previousState = currentState;
  667. }
  669. }
  671. setInterval(function() {
  672. updateState();
  673. checkAndLoadLogs();
  674. }, 0);
  679. document.addEventListener("DOMContentLoaded", function () {
  680. // Verificar se há usuário e senha salvos no localStorage
  681. const usuarioSalvo = localStorage.getItem('usuario');
  682. const senhaSalva = localStorage.getItem('senha');
  684. const configSalva = localStorage.getItem('configSelecionada');
  686. if (configSalva) {
  687. const configSelecionada = JSON.parse(configSalva);
  689. // Atualize a interface do usuário com a configuração salva
  690. configModalButton.value = configSelecionada.ConfigName;
  691. // Você pode fazer outras ações relacionadas à configuração aqui, se necessário
  692. }
  694. if (usuarioSalvo && senhaSalva) {
  695. // Preencher os campos de usuário e senha com os valores salvos
  696. user.value = usuarioSalvo;
  697. pass.value = senhaSalva;
  698. }
  699. });
  702. logoImg.src = app.getLogoUrl();
  704. document.body.style.backgroundImage = `url('${app.getBackUrl()}')`;
  705. document.body.style.backgroundSize = 'cover';
  706. document.body.style.backgroundRepeat = 'no-repeat';
  707. document.body.style.backgroundPosition = 'center';
  710. const selectItens = document.querySelector('.selectItens');
  711. const viewItens = document.querySelector('.viewItens');
  712. selectItens.addEventListener('click',()=>{
  713. viewItens.style.display = 'flex';
  714. })
  715. viewItens.addEventListener('click',()=>{
  716. viewItens.style.display = 'none';
  717. })
  719. </script>
  720. </html>
comments powered by Disqus