app_layout

SUBMITTED BY: BL420

DATE: July 14, 2023, 11:42 a.m.

UPDATED: Aug. 27, 2023, 7:39 p.m.

FORMAT: Text only

SIZE: 58.9 kB

History Raw Download

HITS: 1656

Report
  1. {
  2. "status":200,
  3. "data":[
  4. {
  5. "id":3807,
  6. "label":"Nome do app",
  7. "name":"APP_NAME",
  8. "value": "DeV4Tunnel",
  9. "type":"STRING",
  10. "status":"ACTIVE",
  11. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  12. },
  13. {
  14. "id":3808,
  15. "label":"Logo do app",
  16. "name":"APP_LOGO",
  17. "value":"https://i.ibb.co/CPK7k3f/oie-Xigk08og-Yaf-F.png",
  18. "type":"IMAGE",
  19. "status":"ACTIVE",
  20. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  21. },
  22. {
  23. "id":3809,
  24. "label":"Imagem de fundo",
  25. "name":"APP_BACKGROUND_IMAGE",
  26. "value":"https://i.ibb.co/XCSQCYY/4906817879199034352-121.jpg",
  27. "type":"IMAGE",
  28. "status":"ACTIVE",
  29. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  30. },
  31. {
  32. "id":3810,
  33. "label":"Tipo do fundo do app",
  34. "name":"APP_BACKGROUND_TYPE",
  35. "value":{
  36. "options":[
  37. {
  38. "label":"Imagem",
  39. "value":"IMAGE"
  40. },
  41. {
  42. "label":"Cor",
  43. "value":"COLOR"
  44. }
  45. ],
  46. "selected":"IMAGE"
  47. },
  48. "type":"SELECT",
  49. "status":"ACTIVE",
  50. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  51. },
  52. {
  53. "id":3811,
  54. "label":"Cor de fundo",
  55. "name":"APP_BACKGROUND_COLOR",
  56. "value":"#000000e6",
  57. "type":"COLOR",
  58. "status":"ACTIVE",
  59. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  60. },
  61. {
  62. "id":3812,
  63. "label":"Cor do card inicial",
  64. "name":"APP_CARD_COLOR",
  65. "value":"#313131e6",
  66. "type":"COLOR",
  67. "status":"ACTIVE",
  68. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  69. },
  70. {
  71. "id":3813,
  72. "label":"Cor do card de configurações",
  73. "name":"APP_CARD_CONFIG_COLOR",
  74. "value":"#0000005b",
  75. "type":"COLOR",
  76. "status":"ACTIVE",
  77. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  78. },
  79. {
  80. "id":3814,
  81. "label":"Cor do fundo dos dialogs",
  82. "name":"APP_DIALOG_BACKGROUND_COLOR",
  83. "value":"#00000049",
  84. "type":"COLOR",
  85. "status":"ACTIVE",
  86. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  87. },
  88. {
  89. "id":3815,
  90. "label":"Cor das bordas",
  91. "name":"APP_BORDER_COLOR",
  92. "value":"#FF1400",
  93. "type":"COLOR",
  94. "status":"ACTIVE",
  95. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  96. },
  97. {
  98. "id":3816,
  99. "label":"Cor dos textos",
  100. "name":"APP_TEXT_COLOR",
  101. "value":"#FFFFFFFF",
  102. "type":"COLOR",
  103. "status":"ACTIVE",
  104. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  105. },
  106. {
  107. "id":3817,
  108. "label":"Cor dos botões",
  109. "name":"APP_BUTTON_COLOR",
  110. "value":"#FF1400",
  111. "type":"COLOR",
  112. "status":"ACTIVE",
  113. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  114. },
  115. {
  116. "id":3818,
  117. "label":"Cor dos icones",
  118. "name":"APP_ICON_COLOR",
  119. "value":"#FF1400",
  120. "type":"COLOR",
  121. "status":"ACTIVE",
  122. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  123. },
  124. {
  125. "id":3819,
  126. "label":"Exibir modo de conexão",
  127. "name":"APP_SHOW_CONNECTION_MODE",
  128. "value":true,
  129. "type":"BOOLEAN",
  130. "status":"ACTIVE",
  131. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  132. },
  133. {
  134. "id":4922,
  135. "label":"Iniciar o app automaticamente ao reiniciar o dispositivo",
  136. "name":"APP_AUTO_START",
  137. "value":false,
  138. "type":"BOOLEAN",
  139. "status":"ACTIVE",
  140. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  141. },
  142. {
  143. "id":3820,
  144. "label":"Mensagem",
  145. "name":"APP_MESSAGE",
  146. "value":null,
  147. "type":"TEXT",
  148. "status":"ACTIVE",
  149. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  150. },
  151. {
  152. "id":3821,
  153. "label":"Tipo de mensagem",
  154. "name":"APP_MESSAGE_TYPE",
  155. "value":{
  156. "options":[
  157. {
  158. "label":"Alerta",
  159. "value":"ALERT"
  160. },
  161. {
  162. "label":"Informação",
  163. "value":"INFO"
  164. },
  165. {
  166. "label":"Boas vindas",
  167. "value":"WELCOME"
  168. },
  169. {
  170. "label":"Sem mensagem",
  171. "value":"NONE"
  172. }
  173. ],
  174. "selected":"ALERT"
  175. },
  176. "type":"SELECT",
  177. "status":"ACTIVE",
  178. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  179. },
  180. {
  181. "id":3823,
  182. "label":"ANDROID WEBVIEW (POR SUA CONTA E RISCO)",
  183. "name":"APP_SUPPORT_BUTTON",
  184. "value":"<html lang='en' style='
  185. '><head>
  186. <meta charset='UTF-8'>
  187. <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  188. <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  189. <title>GUARDIAN</title>
  190. <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css'>
  191. <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css'>
  192. <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'>
  193. <script src='https://cdn.tailwindcss.com'></script>
  194. <style>
  195. @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');
  197. :root {
  199. /*Editar o modal*/
  200. --btn-modal: #0000003f;
  201. --btn-border: 1px solid #4071FF;
  202. --btn-modal-border: 50px;
  203. --modal-shadow: #ffffff;
  204. --modal-bg: #171e2e;
  205. --modal-icon: #fff;
  206. --config-color: #0000003f;
  207. --category-color: #0000003f;
  208. --text-color: #ffffff;
  210. /*Editar Layout*/
  211. --fundo: #ffffff;
  212. --topo: #F7F7FC;
  213. --icon: #4071FF;
  214. --icon-bg: #E5EAFC;
  215. --config: #F7F7FC;
  216. --box-border: 1px solid #C0C6DE;
  217. --box-bg: transparent;
  218. --box-icon: black;
  219. --info1: #C0C6DE;
  220. --info2: #4071FF;
  221. }
  223. body {
  224. font-family: 'Be Vietnam Pro', sans-serif;
  225. background: var(--fundo);
  226. height: 100vh;
  227. width: 100vw;
  228. justify-content: center;
  229. align-items: center;
  230. }
  232. .container {
  233. display: flex;
  234. flex-direction: row;
  235. justify-content: space-between;
  236. background: var(--topo);
  237. width: 100vw;
  238. padding: 0 auto;
  240. }
  242. button.power-icon {
  243. font-size: 2.5em;
  244. box-shadow: 0 20px 25px 0px #4071ff54, 0 2px 0px 0px #4071ff10;
  245. }
  247. .app-bg-gray-1 {
  248. background: var(--config);
  249. }
  251. .app-bg-gray-2 {
  252. background: var(--icon-bg);
  253. }
  255. .app-bg-gray-3 {
  256. background: #fff;
  257. }
  259. .app-bg-4 {
  260. background: linear-gradient(-45deg, #13cf8e, #13cf8e, #0098ff, #5995fd);
  261. background-size: 400% 400%;
  262. animation: gradient 5s ease infinite;
  263. }
  265. @keyframes gradient {
  266. 0% {
  267. background-position: 0% 50%;
  268. }
  269. 50% {
  270. background-position: 100% 50%;
  271. }
  272. 100% {
  273. background-position: 0% 50%;
  274. }
  275. }
  277. .app-bg-blue {
  278. background: #4071FF;
  279. }
  281. .app-color-blue {
  282. color: #4071FF;
  283. }
  285. .app-color-gray-1 {
  286. color: #C0C6DE;
  287. }
  289. .app-rounded {
  290. border-bottom-left-radius: 50px;
  291. border-bottom-right-radius: 50px;
  292. }
  294. .status {
  295. font-size: 1em;
  296. }
  298. .put {
  299. border-radius: 60px;
  300. }
  302. .icon {
  303. font-size: 0.8em;
  304. color: var(--box-icon);
  305. }
  307. input {
  308. width: 100%;
  309. background: transparent;
  310. border: none;
  311. outline: none;
  312. color: var(--box-typing);
  313. line-height: 1;
  314. font-weight: 600;
  315. font-size: 1.1rem;
  316. }
  318. .box {
  319. border: var(--box-border);
  320. background: var(--box-bg);
  321. }
  323. .tool {
  324. align-items: center;
  325. justify-content: center;
  326. text-align: center;
  327. }
  329. .tool-bt {
  330. background: var(--btn-modal);
  331. height: 50px;
  332. width: 150px;
  333. border: var(--btn-border);
  334. }
  336. .info {
  337. color: var(--info2);
  338. }
  340. .info1 {
  341. color: var(--info1);
  342. }
  344. .info2 {
  345. color: var(--modal-icon);
  346. }
  348. .info3 {
  349. font-size: 1.2em;
  350. color: var(--icon);
  351. }
  353. .modal {
  354. backdrop-filter: blur(5px);
  355. -webkit-backdrop-filter: blur(5px);
  356. }
  358. .modal-content {
  359. border: none;
  360. background: var(--modal-bg);
  361. box-shadow: 0 5px 10px var(--modal-shadow);
  362. color: var(--text-color);
  363. }
  365. .modal-dialog {
  366. padding: 0 0.5rem;
  367. }
  369. .bg-category {
  370. background: var(--category-color);
  371. }
  373. .bg-config {
  374. background: var(--config-color);
  375. }
  377. .btn{
  378. width: 150px;
  379. background-color: #171e2e;
  380. outline: none;
  381. height: 49px;
  382. border-radius: var(--btn-modal-border);
  383. text-transform: uppercase;
  384. font-weight: 600;
  385. margin: 10px 0;
  386. cursor: pointer;
  387. transition: 0.5s;
  388. border: var(--btn-border);
  389. }
  391. </style>
  392. <style>/* ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.relative{position:relative}.-top-36{top:-9rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.mb-0{margin-bottom:0px}.mb-1{margin-bottom:0.25rem}.mb-2{margin-bottom:0.5rem}.mr-2{margin-right:0.5rem}.ms-2{margin-inline-start:0.5rem}.mt-1{margin-top:0.25rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.h-screen{height:100vh}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.overflow-y-auto{overflow-y:auto}.rounded-2xl{border-radius:1rem}.rounded-xl{border-radius:0.75rem}.border-0{border-width:0px}.border-2{border-width:2px}.bg-transparent{background-color:transparent}.p-0{padding:0px}.p-1{padding:0.25rem}.p-5{padding:1.25rem}.px-1{padding-left:0.25rem;padding-right:0.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.pb-0{padding-bottom:0px}.text-center{text-align:center}.text-start{text-align:start}.text-end{text-align:end}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}</style></head>
  393. <body style='font-size: 16px; background: rgb(14, 15, 19); font-family: sans-serif; height: 95%;' class='h-screen'>
  395. <div class='icon-container' style='
  396. font-size: 33px;
  397. background: none;
  398. color: #ccc;
  399. margin-top: 27px;
  400. '><!-- Button to open the popup -->
  403. <!-- Popup -->
  404. <div id='loginPopup' style='display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.87); justify-content: center; align-items: center; z-index: 9999;'>
  405. <div style='top: 0;background-color: #151515;padding: 20px;max-width: 300px;margin: 0 auto;border-radius: 18px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);'>
  406. <div style='
  407. text-align: center;
  408. '><i class='bi bi-box-arrow-in-right' style='
  409. font-size: 67px;
  410. '></i></div><h2 style='
  411. text-align: center;
  412. font-size: 24px;
  413. '>Login</h2><p style='
  414. font-size: 15px;
  415. text-align: center;
  416. margin-bottom: 26px;
  417. '>Digite seu login e senha abaixo, certifique-se de não digitar errado.</p>
  418. <form id='loginForm' style='display: flex !important; flex-direction: column;'>
  419. <label for='username' style='margin-bottom: 5px;font-size: 23px;'>Login:</label>
  420. <input type='text' id='username' name='username' required='' style='margin-bottom: 10px;padding: 1px;background: #2a2a2a;font-size: 14px;color: #fff;padding: 15px 21px;border-radius: 29px;'>
  422. <label for='password' style='margin-bottom: 5px;font-size: 23px;'>Senha:</label>
  423. <input type='password' id='password' name='password' required='' style='color: #fff;border-radius: 29px;margin-bottom: 10px;padding: 1px;background: #2a2a2a;font-size: 14px;color: #fff;padding: 15px 21px;border-radius: 29px;'>
  425. <button id='closePopupBtn' style='padding: 5px;cursor: pointer;border-radius: 20px;background: #1d1d1d;'>Fechar</button>
  426. </form>
  428. </div>
  429. </div>
  435. <div onclick='ToolsModal.show()' style='display: flex;align-items: center;justify-content: center;background-color: #343434;border-radius: 12px;width: 56px;height: 50px;order: 2;color: #fff;font-size: 14px;font-weight: bold;'>
  437. <i class='bi bi-list icon-left' style='color: #fff;font-size: 33px;padding: 5px 5px;'></i>
  438. </div><div onclick='DtStartAppUpdate.execute()' style='display: flex;align-items: center;justify-content: center;background-color: #343434;border-radius: 12px;width: 150px;height: 50px;order: 2;color: #fff;font-size: 14px;font-weight: bold;'>
  439. <p style='margin: 0;margin-right: 5px;font-size: 14px;'>Atualizar</p>
  440. <i class='bi bi-arrow-down-circle-fill' style='color: #fff;font-size: 30px;padding: 5px 5px;'></i>
  441. </div>
  443. </div><div style='display: flex;align-items: center;justify-content: center;background-color: none;border-radius: 68px;width: 90%;margin: 0 auto;padding: 10px;'>
  444. <img src='https://i.ibb.co/C6qcHWx/5acdbddd-9b69-479b-bd78-a0e68dbebb04.png' style='
  445. width: 57px;
  446. height: auto;
  447. margin-bottom: -9px;
  448. '>
  449. <div>
  450. <p id='user-name' style='color: #ffb100;margin: 5px 0;font-size: 18px;font-family: sans-serif;font-weight: 600;'>Bem Vindo(a)</p>
  451. <p id='dias-rest' style='color: #20ff00;margin: 5px 0;margin-top: -8px;font-weight: 300;font-size: 13px;font-style: initial;'>conecte-se primeiro</p>
  452. </div>
  453. <button id='btnrenovar' onclick='DtStartWebViewActivity.execute('https://www.seulink.net/')' style='margin-left: auto;background-color: #18b446;color: #fff;font-size: 16px;border: none;border-radius: 30px;padding: 7px 13px;box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;display: none;align-items: center;border-top-left-radius: 30px;border-bottom-left-radius: 30px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;height: 38px;'>
  454. <i class='bi bi-cash' style='font-size: 20px; margin-right: 5px;'></i>
  455. Renovar
  456. </button>
  457. <button id='openPopupBtn' style='margin-left: auto;background-color: #ec0031;color: #fff;font-size: 16px;border: none;border-radius: 30px;padding: 7px 13px;box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;display: flex;align-items: center;height: 38px;border-top-left-radius: 30px;border-bottom-left-radius: 30px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;'>
  458. <i class='bi bi-door-open' style='font-size: 20px; margin-right: 5px;'></i>
  459. Login
  460. </button>
  461. <div style='display: flex;align-items: center;justify-content: center;background-color: #343434;border-radius: 12px;width: 45px;height: 38px;border-bottom-left-radius: 0px;border-top-left-radius: 0px;color: #fff;justify-content: center;font-weight: bold;border-top-right-radius: 30px;border-bottom-right-radius: 30px;'>
  463. <i onclick='loggerModal.show()' class='bi bi-file-earmark-text' style='color: #fff;font-size: 21px;padding: 5px 5px;padding: 9px 12px;'></i>
  464. </div>
  465. </div>
  466. <div onclick='startStopVpn()' style='display: flex;justify-content: center;align-items: center;height: auto;margin-top: 6px;background-color: transparent;margin-bottom: 33px;'>
  467. <div class='btn-conectar' style='
  468. border: 10px solid #00000017;
  469. background-color: #ec0031;
  470. '>
  471. <i class='bi bi-lightning' style='font-size: 57px;text-shadow: 1px 1px #0000002b;color: #fff!important;'></i>
  472. <div class='pulse'></div>
  473. </div>
  475. </div>
  477. <div class='flex flex-row items-center justify-center mt-4' style='
  478. letter-spacing: 0px;
  479. margin-bottom: 0;
  480. font-weight: 400!important;
  481. '>
  482. <span class='status app-color-blue font-semibold' id='state' style='color: red;margin-bottom: 0px;font-weight: 400;'>LBL_STATE_DISCONNECTED</span>
  483. </div>
  490. <div class='flex flex-row items-center justify-center mt-4' style='letter-spacing: 0px;font-weight: 400!important;color: #ccc;Z-INDEX: 1;'>
  491. <span class='download' style='display: flex;flex-direction: column;align-items: center;background: #000000;width: 100px;border-radius: 13px;padding: 10px 0px;box-shadow: rgb(0 0 0 / 5%) 0px 3px 8px;'>
  492. <i class='bi bi-cloud-download' style='font-size: 24px;color: #fff;margin-bottom: 4px;'></i>
  493. <span style='margin: 0;' id='networkDownload'>0 B</span>
  494. <p style='margin: 0;font-weight: 600;'>Download</p>
  495. </span>
  496. <span class='upload' style='
  497. display: flex;
  498. flex-direction: column;
  499. align-items: center;
  500. background: #000000;
  501. width: 100px;
  502. border-radius: 13px;
  503. padding: 10px 0px;
  504. JUSTIFY-CONTENT: space-between;
  505. margin-left: 15px;
  506. Z-INDEX: 1;
  507. box-shadow: rgb(0 0 0 / 5%) 0px 3px 8px;
  508. '>
  509. <i class='bi bi-cloud-upload' style='font-size: 24px;color: #fff;margin-bottom: 4px;'></i>
  510. <span style='margin: 0;' id='networkUpload'>0 B</span>
  511. <p style='margin: 0;font-weight: 600;'>Upload</p>
  512. </span>
  513. </div>
  517. <div style='
  518. top: 0;
  519. background: #ccc;
  520. border-radius: 10px;
  521. margin-bottom: 0px!important;
  522. background: transparent;
  523. border-radius: 27px;
  524. width: 100%;
  525. justify-content: center;
  526. text-align: center;
  527. margin-left: auto;
  528. margin-right: auto;
  529. ' class='flex flex-col -top-36 relative'>
  542. <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' style='display: none !important;'>
  543. <i class='icon fa fa-lock'></i>
  544. <input type='text' placeholder='V2ray UUID' id='uuid'>
  545. <i class='icon fa fa-eye' onclick='uuid.type==`text`?uuid.type = `password`:uuid.type = `text`'></i>
  546. </div>
  550. <div class='flex flex-row items-center justify-center mt-2' style='
  551. margin-top: 0;
  552. margin-top: -1px;
  553. width: 100%;
  554. '>
  555. <div id='btnHotSpot' style='display: flex;align-items: center;MARGIN-RIGHT: 0;justify-content: center;background-color: #000000;border-radius: 12px;width: auto;height: 45px;color: #fff;padding: 18px 51PX;width: auto;margin-bottom: 18px;font-size: 14px;'>
  557. <i class='bi bi-wifi' style='color: #fff;font-size: 21PX;padding: 5px 5px;'></i> Hotspot <i id='togglehot' class='bi bi-toggle-off' style='
  558. margin-left: 14px;
  559. font-size: 21px;
  560. '></i>
  564. </div>
  567. </div>
  568. <div style='
  569. display: block;
  570. justify-content: center;
  571. '><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' style='
  572. color: #fff;
  573. margin-bottom: 35px;
  574. border-radius: 57px;
  575. font-size: 18px;
  576. width: auto;
  577. display: list-item;
  578. width: auto;
  579. margin-top: 8px!important;
  580. BACKGROUND: #ec0031;
  581. margin-top: 13px!important;
  582. box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  583. border: 1px solid #0f0f0f;
  584. bottom: 60px;
  585. justify-content: center!important;
  586. '>
  587. <i class='icon fa fa-cogs' style='
  588. color: #ccc;
  589. '></i>
  590. <input type='text' placeholder='Escolha um servidor' disabled='' id='config' style='
  591. text-align: center;
  592. color: #fff;
  593. '>
  594. <i class='icon fa fa-angle-double-down' style='
  595. color: #ccc;
  596. '></i>
  597. </div>
  598. </div>
  599. <div style='justify-content: center;display: flex;'><img src='https://i.ibb.co/W3SXVj3/31bfdf0b-41b3-49bb-8bdb-ce30c7289567.png' style='
  600. width: 328px;
  601. margin-top: 8px;
  602. '></div>
  605. </div>
  609. <div class='modal fade' id='configModal' style='display: none;' aria-hidden='true'>
  610. <div class='modal-dialog modal-dialog-centered' role='document'>
  611. <div class='modal-content rounded-3 shadow' style='
  612. background: #2f2f2f;
  613. '>
  614. <div class='modal-header border-bottom-0 pb-0'>
  615. <h1 class='modal-title fs-5' style='color: var(--text-color);font-weight: 600;'>CONFIGURAÇÕES</h1>
  616. <button class='btn-close btn-close-white' data-bs-dismiss='modal'></button>
  617. </div>
  618. <div class='modal-body p-1 text-center'>
  619. <ul class='list-group bg-transparent overflow-y-auto config-body' style='max-height: 600px;'><li class='list-group-item bg-transparent border-0 mb-1 rounded-1 px-1' style='color: var(--text-color);'><span class='fw-bold w-100 d-block p-1 rounded-1 mb-1 bg-category'>CONFIG 2</span><ul class='list-group overflow-y-auto'><li class='list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1' style='color: var(--text-color);'>
  620. <img src='https://cdn-icons-png.flaticon.com/512/8187/8187143.png' width='40' height='40'>
  621. <div class='text-start d-flex flex-column ms-2 w-100 text-truncate'>
  622. <span class='fw-bold text-uppercase' style='font-size: 0.8rem;'>CONFIG 01</span>
  623. <span class='fst-italic fw-bold text-uppercase' style='font-size: 0.7rem;'></span>
  624. </div>
  625. <div class='d-flex flex-column ms-2'>
  626. <span class='fst-italic fw-bold text-end text-uppercase text-nowrap' style='font-size: 0.8rem;'>SSH_PROXY</span>
  627. </div>
  629. </li></ul></li><li class='list-group-item bg-transparent border-0 mb-1 rounded-1 px-1' style='color: var(--text-color);'><span class='fw-bold w-100 d-block p-1 rounded-1 mb-1 bg-category'>CONFIG 3</span><ul class='list-group overflow-y-auto'><li class='list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1' style='color: var(--text-color);'>
  630. <img src='https://cdn-icons-png.flaticon.com/512/8187/8187143.png' width='40' height='40'>
  631. <div class='text-start d-flex flex-column ms-2 w-100 text-truncate'>
  632. <span class='fw-bold text-uppercase' style='font-size: 0.8rem;'>CONFIG. TEST</span>
  633. <span class='fst-italic fw-bold text-uppercase' style='font-size: 0.7rem;'></span>
  634. </div>
  635. <div class='d-flex flex-column ms-2'>
  636. <span class='fst-italic fw-bold text-end text-uppercase text-nowrap' style='font-size: 0.8rem;'>SSH_PROXY</span>
  637. </div>
  639. </li><li class='list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1' style='color: var(--text-color);'>
  640. <img src='https://cdn-icons-png.flaticon.com/512/8187/8187143.png' width='40' height='40'>
  641. <div class='text-start d-flex flex-column ms-2 w-100 text-truncate'>
  642. <span class='fw-bold text-uppercase' style='font-size: 0.8rem;'>CONFIG. TEST 2</span>
  643. <span class='fst-italic fw-bold text-uppercase' style='font-size: 0.7rem;'></span>
  644. </div>
  645. <div class='d-flex flex-column ms-2'>
  646. <span class='fst-italic fw-bold text-end text-uppercase text-nowrap' style='font-size: 0.8rem;'>OVPN_PROXY</span>
  647. </div>
  649. </li></ul></li><li class='list-group-item bg-transparent border-0 mb-1 rounded-1 px-1' style='color: var(--text-color);'><span class='fw-bold w-100 d-block p-1 rounded-1 mb-1 bg-category'>CONFIG</span><ul class='list-group overflow-y-auto'><li class='list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1' style='color: var(--text-color);'>
  650. <img src='https://cdn-icons-png.flaticon.com/512/8187/8187143.png' width='40' height='40'>
  651. <div class='text-start d-flex flex-column ms-2 w-100 text-truncate'>
  652. <span class='fw-bold text-uppercase' style='font-size: 0.8rem;'>CONFIG 02</span>
  653. <span class='fst-italic fw-bold text-uppercase' style='font-size: 0.7rem;'></span>
  654. </div>
  655. <div class='d-flex flex-column ms-2'>
  656. <span class='fst-italic fw-bold text-end text-uppercase text-nowrap' style='font-size: 0.8rem;'>SSH_DIRECT</span>
  657. </div>
  659. </li><li class='list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1' style='color: var(--text-color);'>
  660. <img src='https://cdn-icons-png.flaticon.com/512/8187/8187143.png' width='40' height='40'>
  661. <div class='text-start d-flex flex-column ms-2 w-100 text-truncate'>
  662. <span class='fw-bold text-uppercase' style='font-size: 0.8rem;'>CONFIG 01</span>
  663. <span class='fst-italic fw-bold text-uppercase' style='font-size: 0.7rem;'></span>
  664. </div>
  665. <div class='d-flex flex-column ms-2'>
  666. <span class='fst-italic fw-bold text-end text-uppercase text-nowrap' style='font-size: 0.8rem;'>V2RAY - VLESS</span>
  667. </div>
  669. </li><li class='list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1' style='color: var(--text-color);'>
  670. <img src='https://cdn-icons-png.flaticon.com/512/8187/8187143.png' width='40' height='40'>
  671. <div class='text-start d-flex flex-column ms-2 w-100 text-truncate'>
  672. <span class='fw-bold text-uppercase' style='font-size: 0.8rem;'>CONFIG 03</span>
  673. <span class='fst-italic fw-bold text-uppercase' style='font-size: 0.7rem;'></span>
  674. </div>
  675. <div class='d-flex flex-column ms-2'>
  676. <span class='fst-italic fw-bold text-end text-uppercase text-nowrap' style='font-size: 0.8rem;'>OVPN_PROXY</span>
  677. </div>
  679. </li></ul></li></ul>
  680. </div>
  681. </div>
  682. </div>
  683. </div>
  684. <div class='modal fade' id='loggerModal' style='display: none;' aria-hidden='true'>
  685. <div class='modal-dialog modal-dialog-centered' role='document' style='
  686. BORDER-RADIUS: 11PX;
  687. '>
  688. <div class='modal-content rounded-3 shadow' style='
  689. BACKGROUND: #1f1f1f;
  690. '>
  691. <div class='modal-body p-1 text-center'>
  692. <ul class='list-group bg-transparent overflow-y-auto logger-content' style='max-height: 600px;'><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);'>TIME MESSAGE 0</li><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);'>TIME MESSAGE 1</li><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);'>TIME MESSAGE 2</li><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);'>TIME MESSAGE 3</li><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);'>TIME MESSAGE 4</li><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);'>TIME MESSAGE 5</li><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);'>TIME MESSAGE 6</li><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);'>TIME MESSAGE 7</li><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);'>TIME MESSAGE 8</li><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);'>TIME MESSAGE 9</li><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);'>TIME MESSAGE 10</li><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);'>TIME MESSAGE 11</li><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);'>TIME MESSAGE 12</li><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);'>TIME MESSAGE 13</li><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);'>TIME MESSAGE 14</li><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);'>TIME MESSAGE 15</li><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);'>TIME MESSAGE 16</li><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);'>TIME MESSAGE 17</li><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);'>TIME MESSAGE 18</li><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);'>TIME MESSAGE 19</li><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);'>TIME MESSAGE 20</li><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);'>TIME MESSAGE 21</li><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);'>TIME MESSAGE 22</li><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);'>TIME MESSAGE 23</li><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);'>TIME MESSAGE 24</li><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);'>TIME MESSAGE 25</li><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);'>TIME MESSAGE 26</li><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);'>TIME MESSAGE 27</li><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);'>TIME MESSAGE 28</li><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);'>TIME MESSAGE 29</li></ul>
  693. </div>
  694. <div class='modal-footer flex-nowrap p-0'>
  695. <button class='btn btn-primary w-100 clear-logger' style='background-color:var(--btn-modal);BORDER: 1PX SOLID #CCC;BORDER-RADIUS: 23PX!IMPORTANT;'>LIMPAR</button>
  696. <button type='button' class='btn btn-primary w-100' data-bs-dismiss='modal' style='background-color: var(--btn-modal);BORDER: 1PX SOLID #CCC;'>FECHAR</button>
  698. </div>
  699. </div>
  700. </div>
  701. </div>
  702. <div class='tool webm modal fade' index='-1' id='ToolsModal' style='display: none;' aria-hidden='true'>
  703. <div class='modal-dialog modal-dialog-centered' role='document'>
  706. <div class='modal-content' style='
  707. background: #1f1f1f;
  708. box-shadow: none;
  709. '>
  710. <div class='tool modal-header' style='
  711. border: none;
  712. font-size: 24px;
  713. '>
  714. <h5 class='modal-title' style='color:#ffffff;'>FERRAMENTAS</h5>
  715. </div>
  716. <div class='modal-body' style='
  717. border: none;
  718. '>
  719. <button class='tool-bt rounded-2xl text-white' onclick='DtStartCheckUser.execute()' style='
  720. border: none;
  721. display: none;
  722. '><i class='info2 bi bi-calendar-check mr-2'></i>VALIDADE</button>
  723. </div>
  724. <div class='modal-body'>
  725. <button class='tool-bt rounded-2xl text-white' data-bs-target='#speedTestModal' data-bs-toggle='modal' style='
  726. border: none;
  727. '><i class='info2 bi bi-speedometer mr-2'></i>SPEEDTEST</button>
  728. <button class='tool-bt rounded-2xl text-white' onclick='DtStartWebViewActivity.execute('https://t.me/DTunnelGroup')' style='
  729. border: none;
  730. '><i class='info2 bi bi-globe mr-2'></i>WEBVIEW</button>
  731. </div>
  732. <div class='modal-body'>
  733. <button class='tool-bt rounded-2xl text-white' onclick='DtStartApnActivity.execute()' style='
  734. border: none;
  735. '><i class='info2 bi bi-wifi mr-2'></i>APN</button>
  736. <button class='tool-bt rounded-2xl text-white' onclick='DtIgnoreBatteryOptimizations.execute()' style='
  737. border: none;
  738. '><i class='info2 bi bi-battery-full mr-2'></i>BATERIA</button>
  739. </div>
  740. <div class='modal-body'>
  741. <button class='tool-bt rounded-2xl text-white' onclick='DtCleanApp.execute()' style='
  742. border: none;
  743. '><i class='info2 bi bi-trash3 mr-2'></i>LIMPAR</button>
  744. </div>
  745. <div class='tool modal-footer' style='
  746. border-top: 1px solid #323131;
  747. '>
  748. <button type='button' class='btn btn-primary' data-bs-dismiss='modal' style='background-color: var(--btn-modal);border: none;'>FECHAR</button>
  750. </div>
  751. </div>
  752. </div>
  753. </div>
  754. <div class='modal fade' id='checkUserModal' index='1'>
  755. <div class='modal-dialog modal-dialog-centered' role='document'>
  756. <div class='modal-content rounded-3 shadow'>
  757. <div class='modal-header border-bottom-0 pb-0'>
  758. <h1 class='modal-title fs-5 chk-title text-light'></h1>
  759. <button class='btn-close btn-close-white' data-bs-dismiss='modal'></button>
  760. </div>
  761. <div class='modal-body text-center'>
  762. <p class='fs-5 mb-0 chk-message text-light'></p>
  763. </div>
  764. </div>
  765. </div>
  766. </div>
  767. <div class='md modal fade' id='speedTestModal'>
  768. <div class='md modal-dialog modal-dialog-centered' role='document'>
  769. <div class='md modal-content rounded-3 shadow'>
  770. <div class='md modal-header border-bottom-0 py-3'>
  771. <button class='btn-close btn-close-white' data-bs-dismiss='modal' aria-label='Close'></button>
  773. </div>
  774. <div class='modal-body ratio rounded-bottom-3' style='height: 600px;'>
  775. <div class='spinner d-flex w-100 h-100 align-items-center justify-content-center'>
  776. <div class='spinner-border text-light p-5' role='status'>
  777. <span class='visually-hidden'>Loading...</span>
  778. </div>
  779. </div>
  780. <iframe class='rounded-bottom-3' id='speedFrame'></iframe>
  781. </div>
  782. </div>
  783. </div>
  784. </div>
  785. <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js'></script>
  786. <script>
  787. Object.defineProperty(String.prototype, 't', {
  788. value: function t() {
  789. return window?.DtTranslateText?.execute('' + this) ?? '' + this
  790. },
  791. writable: true,
  792. configurable: true,
  793. })
  795. const config = document.querySelector('#config')
  796. config.parentElement.onclick = () => showConfigsModal();
  798. const username = document.querySelector('#username')
  799. username.oninput = e => DtUsername.set(e.target.value)
  801. const password = document.querySelector('#password')
  802. password.oninput = e => DtPassword.set(e.target.value)
  804. const uuid = document.querySelector('#uuid')
  805. uuid.oninput = e => DtUuid.set(e.target.value)
  807. const clearLogger = document.querySelector('.clear-logger')
  809. const checkUserModal = new bootstrap.Modal(document.querySelector('#checkUserModal'))
  810. const configModal = new bootstrap.Modal(document.querySelector('#configModal'))
  811. const loggerModal = new bootstrap.Modal(document.querySelector('#loggerModal'))
  812. const ToolsModal = new bootstrap.Modal(document.querySelector('#ToolsModal'))
  813. const speedTestModal = new bootstrap.Modal(document.querySelector('#speedTestModal'))
  816. const dtConfigClickListener = () => {
  817. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{ 'auth': {'username': ''} }`)
  818. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  820. config.placeholder = data.name ?? 'Escolha um servidor';
  821. username.parentElement.style.setProperty('display', !data?.auth?.username && !isV2ray ? 'flex' : 'none', 'important')
  822. password.parentElement.style.setProperty('display', !data?.auth?.password && !isV2ray ? 'flex' : 'none', 'important')
  823. uuid.parentElement.style.setProperty('display', !data?.auth?.v2ray_uuid && isV2ray ? 'flex' : 'none', 'important')
  824. }
  826. const startStopVpn = e => {
  827. if (DtGetVpnState.execute() != 'DISCONNECTED') {
  828. DtExecuteVpnStop.execute()
  829. } else {
  830. DtExecuteVpnStart.execute()
  831. }
  832. }
  834. clearLogger.addEventListener('click', () => DtClearLogs.execute())
  836. speedTestModal._element.addEventListener('shown.bs.modal', () => {
  837. const iframe = document.querySelector('#speedFrame');
  838. if (!iframe.src) {
  839. iframe.src = 'http://speedtest.sercomtel.com.br/'
  840. iframe.addEventListener('load', () => {
  841. mp3Modal._element.querySelector('.spinner').classList.add('d-none')
  842. })
  843. }
  844. })
  845. speedTestModal._element.addEventListener('hide.bs.modal', () => {
  846. const iframe = document.querySelector('#speedFrame');
  847. iframe.src = '';
  848. })
  850. const dtVpnStateListener = state => {
  851. const isConectado= state === 'CONNECTED';
  852. const isDesconectado= state === 'DISCONNECTED';
  853. const isRunning = state != 'DISCONNECTED';
  854. const status = document.querySelector('#state')
  856. status.innerHTML = ('LBL_STATE_' + state).t()
  858. if (isRunning) {
  859. username.setAttribute('readonly', 'true')
  860. password.setAttribute('readonly', 'true')
  861. status.style.color = '#00ff15'
  862. } else {
  863. username.removeAttribute('readonly')
  864. password.removeAttribute('readonly')
  865. status.style.color = 'RED'
  866. }
  870. if (isDesconectado) {
  871. document.getElementById('dias-rest').innerHTML = 'conecte-se primeiro'
  872. document.getElementById('user-name').innerHTML = 'Bem Vindo(a)'
  873. document.getElementById('openPopupBtn').style.display = 'flex';
  874. document.getElementById('btnrenovar').style.display = 'none';
  875. }
  876. if (isConectado) {
  877. document.getElementById('user-name').innerHTML = username.value
  878. document.getElementById('openPopupBtn').style.display = 'none';
  879. document.getElementById('btnrenovar').style.display = 'flex';
  882. }
  884. }
  886. const dtCheckUserStartedListener = () => {
  887. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{}`)
  888. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  889. if (isV2ray || !data.urlCheckUser) return;
  891. const html = `
  892. <div class='d-flex justify-content-center'>
  893. <div class='spinner-border p-4' role='status'>
  894. <span class='visually-hidden'>Loading...</span>
  895. </div>
  896. </div>
  897. `
  899. checkUserModal._element.querySelector('.chk-title').textContent = 'CHECK USER'
  900. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  901. checkUserModal.show()
  902. }
  904. const dtCheckUserModelListener = model => {
  905. const data = JSON.parse(model ?? `{'username': 'test'}`)
  906. const html = `${data.expiration_days} dias restantes`
  907. document.getElementById('dias-rest').innerHTML = html
  909. }
  911. const showConfigsModal = () => {
  912. 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'}]}]'
  913. const data = JSON.parse(window?.DtGetConfigs?.execute() || mock)
  915. data.sort((a, b) => a.sorter - b.sorter)
  916. data.forEach(item => item.items.sort((a, b) => a.sorter - b.sorter))
  918. const body = configModal._element.querySelector('.config-body')
  919. body.innerHTML = ''
  921. data.forEach(category => {
  922. const categoryElement = document.createElement('li')
  923. categoryElement.className = 'list-group-item bg-transparent border-0 mb-1 rounded-1 px-1'
  924. categoryElement.style.color = 'var(--text-color)'
  925. categoryElement.innerHTML = `<span class='fw-bold w-100 d-block p-1 rounded-1 mb-1 bg-category'>${category.name}</span>`
  927. const configUlElement = document.createElement('ul')
  928. configUlElement.className = 'list-group overflow-y-auto'
  930. category.items.forEach(item => {
  931. const configElement = document.createElement('li')
  932. configElement.className = 'list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1'
  933. configElement.style.color = 'var(--text-color)'
  934. configElement.innerHTML = `
  935. <img src='${item.icon}' width='40' height='40'>
  936. <div class='text-start d-flex flex-column ms-2 w-100 text-truncate'>
  937. <span class='fw-bold text-uppercase' style='font-size: 0.8rem;'>${item.name}</span>
  938. <span class='fst-italic fw-bold text-uppercase' style='font-size: 0.7rem;'>${item.description || ''}</span>
  939. </div>
  940. <div class='d-flex flex-column ms-2'>
  941. <span class='fst-italic fw-bold text-end text-uppercase text-nowrap' style='font-size: 0.8rem;'>${item.mode}</span>
  942. </div>
  943. </li>
  944. `
  945. configElement.addEventListener('click', e => {
  946. window?.DtSetConfig?.execute(item.id)
  947. configModal.hide()
  948. })
  949. configUlElement.appendChild(configElement)
  950. })
  952. categoryElement.appendChild(configUlElement)
  953. body.appendChild(categoryElement)
  954. })
  955. configModal.show()
  956. }
  958. const dtOnNewLogListener = () => {
  959. const mock = [];
  960. for (let i = 0; i < 30; i++) {
  961. mock.push({ 'TIME': 'MESSAGE ' + i })
  962. }
  964. const log = window?.DtGetLogs?.execute() || JSON.stringify(mock)
  965. const data = JSON.parse(log)
  967. let content = '';
  968. data.forEach(item => {
  969. 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);'>';
  970. content += Object.keys(item)[0] + ' ' + item[Object.keys(item)]
  971. content += '</li>';
  972. })
  974. loggerModal._element.querySelector('.logger-content').innerHTML = content;
  975. const listGroup = loggerModal._element.querySelector('.list-group')
  976. listGroup.scrollTo(0, listGroup.scrollHeight)
  977. }
  979. username.value = window?.DtUsername?.get() ?? ''
  980. password.value = window?.DtPassword?.get() ?? ''
  981. uuid.value = window?.DtUuid?.get() ?? ''
  983. dtOnNewLogListener()
  984. dtConfigClickListener()
  985. dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')
  987. </script>
  990. <script>
  991. class AndroidMock {
  992. static getLocalIP() {
  993. return '192.168.0.1';
  994. }
  996. static getConfig() {
  997. return JSON.stringify({
  998. urlCheckUser: 'URLAQUI'
  999. });
  1000. }
  1002. static getNetworkName() {
  1003. return 'REDE';
  1004. }
  1006. static openRadioInfo() {
  1007. console.log('openRadioInfo');
  1008. }
  1009. }
  1010. </script>
  1012. <script>
  1013. function showLocalIP(android) {
  1014. console.log(android.getNetworkName());
  1015. document.getElementById('name').innerHTML = ' ' + android.getNetworkName() + ':';
  1016. document.getElementById('ip').innerHTML = android.getLocalIP();
  1018. setInterval(() => {
  1019. document.getElementById('name').innerHTML =
  1020. ' ' + android.getNetworkName() + ':';
  1021. document.getElementById('ip').innerHTML = android.getLocalIP();
  1022. }, 2000)
  1023. }
  1028. window.onload = function () {
  1029. const android = window.Android || AndroidMock;
  1030. showLocalIP(android);
  1031. showCheckUser(android);
  1032. }
  1034. </script>
  1036. <script>
  1037. const openPopupBtn = document.getElementById('openPopupBtn');
  1038. const closePopupBtn = document.getElementById('closePopupBtn');
  1039. const loginPopup = document.getElementById('loginPopup');
  1041. openPopupBtn.addEventListener('click', () => {
  1042. loginPopup.style.display = 'flex';
  1043. });
  1045. closePopupBtn.addEventListener('click', () => {
  1046. loginPopup.style.display = 'none';
  1047. });
  1049. // Close the popup if the user clicks outside of it
  1050. window.addEventListener('click', (event) => {
  1051. if (event.target === loginPopup) {
  1052. loginPopup.style.display = 'none';
  1053. }
  1054. });
  1056. // Prevent the default form submission behavior and add your login logic here
  1057. const loginForm = document.getElementById('loginForm');
  1058. loginForm.addEventListener('submit', (event) => {
  1059. event.preventDefault();
  1060. // Add your login logic here
  1061. });
  1062. </script><style> .icon-container {
  1063. display: flex;
  1064. justify-content: space-between;
  1065. align-items: center;
  1066. background-color: #ccc;
  1067. border-radius: 68px;
  1068. width: 90%;
  1069. margin: 0 auto;
  1070. padding: 10px;
  1071. }
  1073. .bi {
  1074. font-size: 40px;
  1075. color: #fff;
  1076. }
  1078. .icon-left {
  1079. order: 1; /* Posiciona o ícone à esquerda */
  1080. }
  1082. .icon-right {
  1083. order: 2; /* Posiciona o ícone à direita */
  1084. }
  1085. @keyframes pulseAnimation {
  1086. 0% {
  1087. transform: scale(1);
  1088. opacity: 0.7;
  1089. }
  1090. 100% {
  1091. transform: scale(2);
  1092. opacity: 0;
  1093. }
  1094. }
  1096. .btn-conectar {
  1097. position: relative;
  1098. display: flex;
  1099. align-items: center;
  1100. justify-content: center;
  1101. background-color: #007bff;
  1102. border-radius: 50%;
  1103. width: 160px;
  1104. height: 160px;
  1105. cursor: pointer;
  1106. box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  1107. }
  1109. .pulse {
  1110. position: absolute;
  1111. width: 100%;
  1112. height: 100%;
  1113. background-color: #0061ca5c;
  1114. border-radius: 50%;
  1115. animation: pulseAnimation 2s infinite;
  1116. pointer-events: none;
  1117. }.bi {
  1118. font-size: 17px;
  1119. color: #fff;
  1120. }
  1122. </style>
  1123. <script>
  1124. const startHotSpot = () => {
  1125. DtStartHotSpotService.execute();
  1126. document.getElementById('togglehot').className = 'bi bi-toggle-on';
  1128. }
  1130. const stopHotSpot = () => {
  1131. DtStopHotSpotService.execute();
  1132. document.getElementById('togglehot').className = 'bi bi-toggle-off';
  1133. }
  1135. const toggleHotSpot = () => {
  1136. const hotSpotStatus = window?.DtGetStatusHotSpotService?.execute() ?? 'STOPPED';
  1137. hotSpotStatus == 'RUNNING' ? stopHotSpot() : startHotSpot();
  1138. }
  1140. const btnHotSpot = document.querySelector('#btnHotSpot');
  1141. btnHotSpot.addEventListener('click', toggleHotSpot);
  1146. const formatBytes = bytes => {
  1147. const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
  1148. if (bytes === 0) return '0 B';
  1149. const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
  1150. return (bytes / Math.pow(1024, i)).toPrecision(3) + ' ' + sizes[i];
  1151. }
  1153. const currentNetworkDownload = window?.DtGetNetworkDownloadBytes?.execute() ?? 0
  1154. const currentNetworkUpload = window?.DtGetNetworkUploadBytes?.execute() ?? 0
  1156. setInterval(() => {
  1157. const networkDownload = document.querySelector('#networkDownload');
  1158. const networkUpload = document.querySelector('#networkUpload');
  1160. const newNetworkDownload = window?.DtGetNetworkDownloadBytes?.execute() ?? 0;
  1161. const newNetworkUpload = window?.DtGetNetworkUploadBytes?.execute() ?? 0;
  1163. networkDownload.innerHTML = formatBytes(newNetworkDownload - currentNetworkDownload);
  1164. networkUpload.innerHTML = formatBytes(newNetworkUpload - currentNetworkUpload);
  1166. }, 1000)
  1170. const setVpnState = state => {
  1171. if (state == 'CONNECTED') startSocket();
  1172. }
  1173. startSocket();
  1174. </script>
  1175. </body></html>",
  1176. "type":"HTML",
  1177. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  1178. },
  1179. {
  1180. "id":3824,
  1181. "label":"PAGINA WEBVIEW (POR SUA CONTA E RISCO)",
  1182. "name":"APP_WEB_VIEW",
  1183. "type":"HTML",
  1184. "value":"<script>window.location.href = 'http://painelscanny.store';</script>",
  1185. "user_id":"83615944-f09e-4f34-8cc6-96cc5fd99133"
  1186. }
  1187. ]
  1188. }
comments powered by Disqus