Layout DT

SUBMITTED BY: terrorxdroid

DATE: March 27, 2024, 5:31 p.m.

UPDATED: Oct. 2, 2024, 8:18 p.m.

FORMAT: Text only

SIZE: 33.2 kB

History Raw Download

HITS: 593

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>DTunnel</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. :root {
  23. --background-img: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(255,0,0,1) 100%);
  24. --logo-img-url: url(https://plenonet.com.br/assets/images/plenonet-512512px-2-512x512.webp);
  26. --input-border-radius: 5px;
  27. --input-background-color: #0a091a55;
  29. --card-border-radius: 5px;
  30. --card-background-color: #0b092868;
  32. --btn-background-color: #0a091a55;
  33. --btn-border-radius: 5px;
  35. --modal-background-color: #0b092868;
  37. --text-color: #ffffff;
  38. --icon-color: #FFFFFF;
  39. }
  41. * {
  42. margin: 0;
  43. padding: 0;
  44. box-sizing: border-box;
  45. font-family: 'Roboto', sans-serif;
  46. }
  48. body {
  49. height: 100vh;
  50. display: flex;
  51. flex-direction: column;
  52. align-items: center;
  53. justify-content: center;
  54. background-repeat: no-repeat;
  55. background-size: cover;
  56. }
  58. .container {
  59. height: 100%;
  60. display: flex;
  61. flex-direction: column;
  62. justify-content: center;
  63. align-items: center;
  64. max-width: 465px;
  65. background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(255,0,0,1) 100%);
  66. }
  68. .logo {
  69. width: 100%;
  70. margin-bottom: 10px;
  71. }
  73. .card {
  74. background: #080808;
  75. border-radius: 20px;
  76. border: 1px solid #1e1e1e !important;
  77. box-shadow: -8px 12px 20px 0 rgb(13 15 18 / 63%) !important;
  78. padding: 15px !important;
  79. max-width: 450px;
  80. height: auto;
  81. position: relative;
  82. }
  84. .btn-dark {
  85. border: none;
  86. background: linear-gradient( to top right, #ff0000, #121212 );
  87. border-radius: 15px;
  88. }
  90. .modal-content {
  91. background-color: transparent;
  92. backdrop-filter: blur(25px);
  93. }
  95. .tool {
  96. align-items: center;
  97. justify-content: center;
  98. text-align: center;
  99. }
  101. .tool-bt {
  102. background: linear-gradient( to top right, #ff0000, #121212 );
  103. border-radius: 20px;
  104. color: #ffffff !important;
  105. height: 35px;
  106. width: 100%;
  107. border: var(--btn-border);
  108. }
  110. .input-group, .form-control, .input-group-text {
  111. background: #080808;
  112. color: var(--icon-color);
  113. border: none;
  114. border-radius: 15px;
  115. outline: none;
  116. }
  118. .form-control::placeholder {
  119. color: var(--text-color);
  120. }
  122. .form-control:focus {
  123. color: var(--text-color);
  124. outline: none;
  125. box-shadow: none;
  126. }
  128. .input-group-text {
  129. padding-right: 0;
  130. }
  133. .fs-5 {
  134. font-size: 1rem!important;
  135. }
  137. nav {
  138. background: linear-gradient( to top right, #ff0000, #121212 );
  139. border-radius: 20px;
  140. font-size: 0;
  141. width: 100%;
  142. max-width: 450px;
  143. height: auto;
  144. position: relative;
  145. margin-top: 20px;
  146. margin-bottom: 10px;
  147. }
  149. nav a {
  150. line-height: 35px;
  151. height: 100%;
  152. font-size: 15px;
  153. display: inline-block;
  154. position: relative;
  155. z-index: 1;
  156. text-decoration: none;
  157. text-align: center;
  158. color: white !important;
  159. cursor: pointer;
  160. }
  161. nav .animation {
  162. position: absolute;
  163. height: 100%;
  164. top: 0;
  165. z-index: 0;
  166. transition: all .5s ease 0s;
  167. border-radius: 8px;
  168. }
  169. a:nth-child(1) {
  170. width: 30%;
  171. }
  172. a:nth-child(2) {
  173. width: 30%;
  174. }
  175. a:nth-child(3) {
  176. width: 40%;
  177. }
  179. nav .start-home, a:nth-child(1):hover~.animation {
  180. width: 30%;
  181. left: 0;
  182. background-color: #121212;
  183. border-radius: 20px;
  184. }
  185. nav .start-about, a:nth-child(2):hover~.animation {
  186. width: 30%;;
  187. left: 30%;
  188. background-color: #121212;
  189. border-radius: 20px;
  190. }
  191. nav .start-blog, a:nth-child(3):hover~.animation {
  192. width: 40%;
  193. left: 60%;
  194. background-color: #121212;
  195. border-radius: 20px;
  196. }
  198. body {
  199. font-size: 12px;
  200. font-family: sans-serif;
  201. background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(255,0,0,1) 100%);
  202. }
  204. @media (min-width: 768px) {
  205. .container, .container-md, .container-sm {
  206. max-width: 100%;
  207. }
  208. }
  210. .rede {
  211. color: #ff0000;
  212. }
  214. .iplocal {
  215. color: #ffffff;
  216. }
  218. .containerlocal {
  219. background: #080808;
  220. border-radius: 20px;
  221. border: 1px solid #1e1e1e !important;
  222. padding: 15px !important;
  223. width: 95%;
  224. max-width: 450px;
  225. height: auto;
  226. position: relative;
  227. margin-top: 50px;
  228. margin-bottom: -70px;
  229. }
  231. .hidden {
  232. display: none;
  233. }
  235. </style>
  236. </head>
  238. <body>
  239. <div class="containerlocal">
  240. <span class="font-semibold text-xs mr-2" style="color: #ffffff;"">📢 IP Local da sua operadora:</span><span class="rede font-semibold text-xs mr-2" id="name">REDE</span> <span class="iplocal font-semibold text-xs" id="ip">127.0.0.1</span>
  241. </div>
  243. <div class="container">
  244. <div class="card border-0 p-2 shadow mb-3 w-100">
  245. <span style="color:#ffffff;font-size: 18px;border-radius: 15px;padding: 0px 0px 0px 5px;margin-bottom: 10px;display: block !important;text-align: start;">Plenonet - Versão: 1.6.7</span>
  246. <img class="logo" src="https://i.ibb.co/z2nx6bF/DT01hvn4ps.png">
  247. <div class="input-group mb-2 shadow" id="config-area">
  248. <input class="form-control" type="text" placeholder="CONFIGURAÇÃO" readonly title="configurações"
  249. id="config" style="background-color: #080808;" />
  250. <span class="input-group-text me-2">
  251. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
  252. class="bi bi:bar-chart" viewBox="0 0 16 16">
  253. <path
  254. d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/></svg>
  255. </span>
  256. </div>
  257. <div class="input-group input mb-2 shadow">
  258. <span class="input-group-text">
  259. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
  260. class="bi bi:file-person" viewBox="0 0 16 16">
  261. <path
  262. d="M12 1a1 1 0 0 1 1 1v10.755S12 11 8 11s-5 1.755-5 1.755V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"/><path d="M8 10a3 3 0 1 0 0-6a3 3 0 0 0 0 6z"/></g></svg>
  263. </span>
  264. <input class="form-control" type="text" placeholder="usuario" id="username" style="background-color: #080808;" />
  265. </div>
  266. <div class="input-group input mb-2 shadow">
  267. <span class="input-group-text">
  268. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi:file-earmark-lock"
  269. viewBox="0 0 16 16">
  270. <path
  271. d="M10 7v1.076c.54.166 1 .597 1 1.224v2.4c0 .816-.781 1.3-1.5 1.3h-3c-.719 0-1.5-.484-1.5-1.3V9.3c0-.627.46-1.058 1-1.224V7a2 2 0 1 1 4 0zM7 7v1h2V7a1 1 0 0 0-2 0zM6 9.3v2.4c0 .042.02.107.105.175A.637.637 0 0 0 6.5 12h3a.64.64 0 0 0 .395-.125c.085-.068.105-.133.105-.175V9.3c0-.042-.02-.107-.105-.175A.637.637 0 0 0 9.5 9h-3a.637.637 0 0 0-.395.125C6.02 9.193 6 9.258 6 9.3z"/><path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.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.5v2z"/></g></svg>
  272. </span>
  273. <input class="form-control" type="password" placeholder="senha" id="password" style="background-color: #080808;" />
  274. <span class="input-group-text me-2"
  275. onclick="password.type==`text`?password.type = `password`:password.type = `text`">
  276. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
  277. viewBox="0 0 16 16">
  278. <path
  279. d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
  280. <path
  281. d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
  282. </svg>
  283. </span>
  284. </div>
  285. <div class="input-group input mb-2 shadow">
  286. <span class="input-group-text">
  287. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-key"
  288. viewBox="0 0 16 16">
  289. <path
  290. 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" />
  291. <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
  292. </svg>
  293. </span>
  294. <input class="form-control" type="text" placeholder="V2ray UUID" id="uuid" style="background: #080808;" />
  295. <span class="input-group-text me-2"
  296. onclick="uuid.type==`text`?uuid.type = `password`:uuid.type = `text`">
  297. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
  298. viewBox="0 0 16 16">
  299. <path
  300. d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
  301. <path
  302. d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
  303. </svg>
  304. </span>
  305. </div>
  306. <button class="btn btn-dark w-100 shadow" id="start-stop">INICIAR</button>
  307. <nav>
  308. <a id="sync" onclick="DtStartAppUpdate.execute()">Atualizar</a>
  309. <a id="logger">Registro</a>
  310. <a onclick="ToolsModal.show()">Ajustes</a>
  311. <div class="animation start-home"></div>
  312. </nav>
  313. </div>
  315. <div class="card my-3 w-100 text-center border-0 p-2 shadow text-light fs-5 text-uppercase fw-bold" id="state" style="padding: 5px !important; font-size: 15px !important;">
  316. </div>
  317. <p style="color: #5e9ca0;"><span style="color: #ffffff; font-size: 17px;">Plenonet - Conex&otilde;es @2020-2024</span></p>
  318. </div>
  319. </div>
  320. <div class="modal fade" id="checkUserModal">
  321. <div class="modal-dialog modal-dialog-centered" role="document">
  322. <div class="modal-content rounded-3 shadow">
  323. <div class="modal-header border-bottom-0 pb-0">
  324. <h1 class="modal-title fs-5 chk-title text-light"></h1>
  325. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  326. aria-label="Close"></button>
  327. </div>
  328. <div class="modal-body text-center">
  329. <p class="fs-5 mb-0 chk-message text-light"></p>
  330. </div>
  331. </div>
  332. </div>
  333. </div>
  334. <div class="modal fade" id="errorModal">
  335. <div class="modal-dialog modal-dialog-centered" role="document">
  336. <div class="modal-content rounded-3 shadow">
  337. <div class="modal-header border-bottom-0 pb-0">
  338. <h1 class="modal-title fs-5 err-title text-light"></h1>
  339. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  340. aria-label="Close"></button>
  341. </div>
  342. <div class="modal-body text-center">
  343. <p class="fs-5 mb-0 err-message text-light"></p>
  344. </div>
  345. </div>
  346. </div>
  347. </div>
  348. <div class="modal fade" id="loggerModal">
  349. <div class="modal-dialog modal-dialog-centered" role="document">
  350. <div class="modal-content rounded-3 shadow">
  351. <div class="modal-body p-1 text-center">
  352. <ul class="list-group bg-transparent overflow-y-auto logger-content" style="max-height: 600px;">
  353. </ul>
  354. </div>
  355. <div class="modal-footer flex-nowrap p-0">
  356. <button type="button" class="btn btn-lg btn-dark text-light w-100 clear-logger">LIMPAR</button>
  357. <button type="button" class="btn btn-lg btn-dark text-light w-100"
  358. data-bs-dismiss="modal">FECHAR</button>
  359. </div>
  360. </div>
  361. </div>
  362. </div>
  363. <div class="tool webm modal fade" index="-1" id="ToolsModal">
  364. <div class="modal-dialog modal-dialog-centered" role="document">
  365. <div class="modal-content">
  366. <div class="tool modal-header">
  367. <h5 class="modal-title" style="color:#ffffff;">Configurações do aplicativo</h5>
  368. </div>
  369. <div class="modal-body">
  370. <button class="tool-bt rounded-2xl text-white" onclick="DtStartWebViewActivity.execute('https://painel.plenonet.com.br/renovar.php')"><i class="info2 bi bi-globe mr-2"></i>Renovar meu Plano</button>
  371. </div>
  372. <div class="modal-body">
  373. <button class="tool-bt rounded-2xl text-white" onclick="DtStartWebViewActivity.execute('https://docs.plenonet.com.br/instalacao-e-conexao/tutoriais-plenonet')"><i class="info2 bi bi-globe mr-2"></i>Acessar turoriais</button>
  374. </div>
  375. <div class="modal-body">
  376. <button class="tool-bt rounded-2xl text-white" onclick="DtStartApnActivity.execute()"><i class="info2 bi bi-wifi mr-2"></i>Alterar protocolo de APN</button>
  377. </div>
  378. <div class="modal-body">
  379. <button class="tool-bt rounded-2xl text-white" onclick="DtIgnoreBatteryOptimizations.execute()"><i class="info2 bi bi-battery-full mr-2"></i>Otimizar Bateria</button>
  380. </div>
  381. <div class="modal-body">
  382. <button class="tool-bt rounded-2xl text-white" onclick="DtCleanApp.execute()"><i class="info2 bi bi-trash3 mr-2"></i>Limpar cachê e dados</button>
  383. </div>
  384. <div class="modal-body">
  385. <button class="tool-bt rounded-2xl text-white" onclick="DtStartWebViewActivity.execute('https://docs.plenonet.com.br/termos-de-uso/termos-de-uso-do-aplicativo')"><i class="info2 bi bi-globe mr-2"></i>Termos de uso do aplicativo</button>
  386. </div>
  387. <div class="tool modal-footer">
  388. <button type="button" class="btn btn-primary" data-bs-dismiss="modal" style="background-color: var(--btn-modal);">FECHAR</button>
  390. </div>
  391. </div>
  392. </div>
  393. </div>
  394. <div class="modal fade" id="configModal">
  395. <div class="modal-dialog modal-dialog-centered" role="document">
  396. <div class="modal-content rounded-3 shadow">
  397. <div class="modal-header border-bottom-0 pb-0">
  398. <h1 class="modal-title fs-5 text-white">CONFIGURAÇÕES</h1>
  399. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  400. aria-label="Close"></button>
  401. </div>
  402. <div class="modal-body p-1 text-center">
  403. <ul class="list-group bg-transparent overflow-y-auto config-body" style="max-height: 600px;">
  404. <li class="list-group-item bg-transparent text-white border-0">
  405. <p>CATEGORIA</p>
  406. <ul class="list-group bg-transparent overflow-y-auto text-start">
  407. <li
  408. class="list-group-item d-flex bg-transparent text-white border-0 border-bottom rounded-0">
  409. <img src="https://cdn-icons-png.flaticon.com/512/3686/3686811.png" width="40"
  410. height="40">
  411. <div class="d-flex flex-column ms-2 w-100">
  412. <span>CONFIG 01</span>
  413. <span>DESC 01</span>
  414. </div>
  415. <div class="d-flex flex-column ms-2 w-100">
  416. <span class="text-end">CONFIG_MODE</span>
  417. </div>
  418. </li>
  419. </ul>
  420. </li>
  421. </ul>
  422. </div>
  423. </div>
  424. </div>
  425. </div>
  426. <div class="modal fade" id="RenovarModal">
  427. <div class="modal-dialog modal-dialog-centered" role="document">
  428. <div class="modal-content rounded-3 shadow">
  429. <div class="modal-header border-bottom-0 py-3">
  430. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  431. aria-label="Close"></button>
  432. </div>
  433. <div class="modal-body ratio rounded-bottom-3" style="height: 600px;">
  434. <div class="spinner d-flex w-100 h-100 align-items-center justify-content-center">
  435. <div class="spinner-border text-light p-5" role="status">
  436. <span class="visually-hidden">Loading...</span>
  437. </div>
  438. </div>
  439. <iframe class="rounded-bottom-3" id="RenovarFrame"></iframe>
  440. </div>
  441. </div>
  442. </div>
  443. </div>
  444. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
  446. <script>
  447. class AndroidMock {
  448. static getLocalIP() {
  449. return '192.168.0.1';
  450. }
  452. static getConfig() {
  453. return JSON.stringify({
  454. urlCheckUser: 'URLAQUI'
  455. });
  456. }
  458. static getNetworkName() {
  459. return 'REDE';
  460. }
  462. static openRadioInfo() {
  463. console.log('openRadioInfo');
  464. }
  465. }
  466. </script>
  468. <script>
  469. function showLocalIP(android) {
  470. console.log(android.getNetworkName());
  471. document.getElementById('name').innerHTML = ' ' + android.getNetworkName() + ':';
  472. document.getElementById('ip').innerHTML = android.getLocalIP();
  474. setInterval(() => {
  475. document.getElementById('name').innerHTML =
  476. ' ' + android.getNetworkName() + ':';
  477. document.getElementById('ip').innerHTML = android.getLocalIP();
  478. }, 2000)
  479. }
  481. window.onload = function () {
  482. const android = window.Android || AndroidMock;
  483. showLocalIP(android);
  484. }
  486. function mostrar(id) {
  487. if (document.getElementById(id).style.display !== "none") {
  488. document.getElementById(id).style.display = "none";
  489. return;
  490. }
  491. Array.from(document.getElementsByClassName("hidden")).forEach(
  492. div => (div.style.display = "none")
  493. );
  494. document.getElementById(id).style.display = "block";
  495. }
  497. </script>
  499. <script>
  500. const configArea = document.querySelector('#config-area')
  501. const config = document.querySelector('#config')
  502. const username = document.querySelector('#username')
  503. const password = document.querySelector('#password')
  504. const uuid = document.querySelector('#uuid')
  505. const logger = document.querySelector('#logger')
  507. const networkStatus = document.querySelector('#section.local-ip')
  509. const startStopVpn = document.querySelector('#start-stop')
  510. const stateStatus = document.querySelector('#state')
  512. const loggerModal = new bootstrap.Modal(document.querySelector('#loggerModal'))
  513. const checkUserModal = new bootstrap.Modal(document.querySelector('#checkUserModal'))
  514. const errorModal = new bootstrap.Modal(document.querySelector('#errorModal'))
  515. const configModal = new bootstrap.Modal(document.querySelector('#configModal'))
  517. const ToolsModal = new bootstrap.Modal(document.querySelector('#ToolsModal'))
  519. const clearLogger = document.querySelector('.clear-logger')
  521. const RenovarModal = new bootstrap.Modal(document.querySelector('#RenovarModal'))
  523. configArea.addEventListener('click', e => showConfigsModal())
  524. username.addEventListener('input', e => DtUsername.set(e.target.value))
  525. password.addEventListener('input', e => DtPassword.set(e.target.value))
  526. uuid.addEventListener('input', e => DtUuid.set(e.target.value))
  527. logger.addEventListener('click', e => loggerModal.show())
  529. startStopVpn.addEventListener('click', (e) => {
  530. if (DtGetVpnState.execute() != 'DISCONNECTED') {
  531. DtExecuteVpnStop.execute()
  532. } else {
  533. DtExecuteVpnStart.execute()
  534. }
  535. })
  536. clearLogger.addEventListener('click', () => DtClearLogs.execute())
  538. RenovarModal._element.addEventListener('shown.bs.modal', () => {
  539. const iframe = document.querySelector('#RenovarFrame');
  540. if (!iframe.src) {
  541. iframe.src = 'https://painel.plenonet.com.br/renovar.php'
  542. iframe.addEventListener('load', () => {
  543. mp3Modal._element.querySelector('.spinner').classList.add('d-none')
  544. })
  545. }
  546. })
  547. RenovarModal._element.addEventListener('hide.bs.modal', () => {
  548. const iframe = document.querySelector('#RenovarFrame');
  549. iframe.src = '';
  550. })
  552. Object.defineProperty(String.prototype, 't', {
  553. value: function t() {
  554. return window?.DtTranslateText?.execute('' + this) ?? '' + this
  555. },
  556. writable: true,
  557. configurable: true,
  558. })
  560. const dtConfigClickListener = () => {
  561. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{ "auth": {}, "mode": "v2ray" }`)
  562. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  563. config.placeholder = data.name ?? 'LBL_CHOOSE_CONFIG'.t()
  564. username.parentElement.style.display = !data?.auth?.username && !isV2ray ? 'flex' : 'none';
  565. password.parentElement.style.display = !data?.auth?.password && !isV2ray ? 'flex' : 'none';
  566. uuid.parentElement.style.display = !data?.auth?.v2ray_uuid && isV2ray ? 'flex' : 'none';
  567. }
  569. const dtVpnStateListener = state => {
  570. const isRunning = state != 'DISCONNECTED';
  572. stateStatus.innerHTML = ('LBL_STATE_' + state).t()
  573. startStopVpn.innerHTML = isRunning ? 'LBL_BTN_STOP'.t() : 'LBL_BTN_START'.t()
  575. if (isRunning) {
  576. username.setAttribute('readonly', 'true')
  577. password.setAttribute('readonly', 'true')
  578. } else {
  579. username.removeAttribute('readonly')
  580. password.removeAttribute('readonly')
  581. }
  583. if (state == 'CONNECTING') dtShowSuccessToastListener('Conectando...')
  584. }
  586. const dtCheckUserStartedListener = () => {
  587. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{}`)
  588. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  589. if (isV2ray) return;
  590. const html = `
  591. <div class="d-flex justify-content-center">
  592. <div class="spinner-border p-5" role="status">
  593. <span class="visually-hidden">Loading...</span>
  594. </div>
  595. </div>
  596. `
  598. checkUserModal._element.querySelector('.chk-title').textContent = 'CHECK USER'
  599. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  600. checkUserModal.show()
  601. }
  603. const dtCheckUserModelListener = model => {
  604. const data = JSON.parse(model ?? `{"username": "test"}`)
  605. const html = `
  606. <div class="d-flex flex-column text-white">
  607. <span>👤Nome de usuario: ${data.username}</span>
  608. <span>📆Expira em: ${data.expiration_date}</span>
  609. <span>📆Dias restantes: ${data.expiration_days}</span>
  610. <span>🚫Conexoes: ${data.count_connections}|${data.limit_connections}</span>
  611. </div>
  612. `
  614. checkUserModal._element.querySelector('.chk-title').textContent = '📆 Olá, ' + data.username.toUpperCase() + '👤'
  615. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  616. checkUserModal.show()
  617. }
  619. const dtMessageErrorListener = message => {
  620. const data = JSON.parse(message)
  621. errorModal._element.querySelector('.err-title').textContent = data.title;
  622. errorModal._element.querySelector('.err-message').innerHTML = data.content;
  623. errorModal.show()
  624. }
  626. const dtOnNewLogListener = () => {
  627. const mock = [];
  628. for (let i = 0; i < 30; i++) {
  629. mock.push({ 'TIME': 'MESSAGE ' + i })
  630. }
  632. const log = window?.DtGetLogs?.execute() || JSON.stringify(mock)
  633. const data = JSON.parse(log)
  635. let content = '';
  636. data.forEach(item => {
  637. content += '<li class="list-group-item fs-6 bg-transparent text-white p-0 border-0 text-start ms-2 text-wrap">';
  638. content += Object.keys(item)[0] + " " + item[Object.keys(item)]
  639. content += '</li>';
  640. })
  642. loggerModal._element.querySelector('.logger-content').innerHTML = content;
  643. const listGroup = loggerModal._element.querySelector('.list-group')
  644. listGroup.scrollTo(0, listGroup.scrollHeight)
  645. }
  647. const dtVpnStartedSuccessListener = () => dtShowSuccessToastListener('Conectado com sucesso')
  649. const dtVpnStoppedSuccessListener = () => dtShowSuccessToastListener('Desconectado com sucesso')
  651. const dtShowSuccessToastListener = text => {
  652. Toastify({
  653. text: text,
  654. close: true,
  655. style: {
  656. background: 'linear-gradient(to right, #00b09b, #96c93d)',
  657. marginTop: '35px',
  658. }
  659. }).showToast()
  660. }
  662. const dtShowErrorToastListener = text => {
  663. Toastify({
  664. text: text,
  665. close: true,
  666. style: {
  667. background: 'linear-gradient(to right, #ff5c33, #e69900)',
  668. marginTop: '35px',
  669. }
  670. }).showToast()
  671. }
  673. const showConfigsModal = () => {
  674. 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"}]}]'
  675. const data = JSON.parse(window?.DtGetConfigs?.execute() || mock)
  677. data.sort((a, b) => a.sorter - b.sorter)
  678. data.forEach(item => item.items.sort((a, b) => a.sorter - b.sorter))
  680. const body = configModal._element.querySelector('.config-body')
  681. body.innerHTML = ''
  683. data.forEach(category => {
  684. const categoryElement = document.createElement('li')
  685. categoryElement.classList.add('list-group-item', 'bg-transparent', 'text-white', 'border-0', 'mb-1', 'rounded-1', 'px-1')
  686. categoryElement.innerHTML = `<span class="fw-bold btn-dark w-100 d-block p-1 rounded-1 mb-1">${category.name}</span>`
  688. const configUlElement = document.createElement('ul')
  689. configUlElement.classList.add('list-group', 'bg-transparent', 'overflow-y-auto')
  691. category.items.forEach(item => {
  692. const configElement = document.createElement('li')
  693. configElement.classList.add('list-group-item', 'd-flex', 'btn-dark', 'text-white', 'border-0', 'rounded-2', 'px-1', 'py-2', 'mb-1')
  694. configElement.innerHTML = `
  695. <img src="${item.icon}" width="40" height="40">
  696. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  697. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">${item.name}</span>
  698. <span class="fst-italic fw-bold" style="font-size: 0.7rem;">${item.description || ''}</span>
  699. </div>
  700. <div class="d-flex flex-column ms-2">
  701. <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">${item.mode}</span>
  702. </div>
  703. </li>
  704. `
  705. configElement.addEventListener('click', e => {
  706. window?.DtSetConfig?.execute(item.id)
  707. configModal.hide()
  708. })
  709. configUlElement.appendChild(configElement)
  710. })
  712. categoryElement.appendChild(configUlElement)
  713. body.appendChild(categoryElement)
  714. })
  716. configModal.show()
  717. }
  719. username.value = window?.DtUsername?.get() ?? ''
  720. password.value = window?.DtPassword?.get() ?? ''
  721. uuid.value = window?.DtUuid?.get() ?? ''
  723. username.placeholder = 'LBL_USERNAME'.t()
  724. password.placeholder = 'LBL_PASSWORD'.t()
  725. uuid.placeholder = 'LBL_UUID'.t()
  727. dtOnNewLogListener()
  728. dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')
  729. dtConfigClickListener()
  731. console.log('Pleno Layouts!🚀')
  732. </script>
  734. </body>
  735. </html>
comments powered by Disqus