BRALFANETLayoutApp

SUBMITTED BY: BRALFANET

DATE: April 26, 2024, 9:56 p.m.

UPDATED: April 26, 2024, 10:46 p.m.

FORMAT: Text only

SIZE: 54.7 kB

History Raw Download

HITS: 512

Report
  1. <html><head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta http-equiv="Expires" content="Tue, 31 Dec 2030 23:59:59 GMT">
  5. <meta http-equiv="Cache-Control" content="public, max-age=31536000">
  6. <meta name="viewport" content="width=device-width,initial-scale=1">
  7. <title>GUARDIAN</title>
  8. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  9. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
  10. <script src="https://cdn.tailwindcss.com"></script>
  12. <style>
  13. @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Outfit:wght@100;200;300;400;500;600;700&display=swap');
  15. :root {
  16. /*Editar o modal*/
  17. --btn-modal: #0000003f;
  18. --btn-border: 1px solid #4071FF;
  19. --btn-modal-border: 50px;
  20. --modal-shadow: #ffffff;
  21. --modal-bg: #171e2e;
  22. --modal-icon: #fff;
  23. --config-color: #0000003f;
  24. --category-color: #0000003f;
  25. --text-color: #ffffff;
  26. /*Editar Layout*/
  27. --fundo: #ffffff;
  28. --topo: #0000008f;
  29. --icon: #4071FF;
  30. --icon-bg: #E5EAFC;
  31. --config: #F7F7FC;
  32. --box-border: 1px solid #C0C6DE;
  33. --box-bg: transparent;
  34. --box-icon: black;
  35. --info1: #C0C6DE;
  36. --info2: #4071FF;
  37. }
  39. body {
  40. font-family: 'Be Vietnam Pro', sans-serif;
  41. background: var(--fundo);
  42. height: 100vh;
  43. width: 100vw;
  44. justify-content: center;
  45. align-items: center;
  46. }
  48. .container {
  49. display: flex;
  50. flex-direction: row;
  51. justify-content: space-between;
  52. background: var(--topo);
  53. width: 100vw;
  54. background: #4071ff;
  55. }
  57. button.power-icon {
  58. background: #ccc;
  59. border-radius: 80px;
  60. display: flex;
  61. -webkit-text-stroke: 3px;
  62. }
  64. .app-bg-gray-1 {
  65. background: var(--config);
  66. }
  68. .app-bg-gray-2 {
  69. background: #ffffff;
  70. box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
  71. box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  72. }
  74. .app-bg-gray-3 {
  75. background: #fff;
  76. }
  78. .app-bg-4 {
  79. background: linear-gradient(-45deg, #4071ff, #2b4089, #0098ff, #5995fd);
  80. background-size: 400% 400%;
  81. animation: gradient 5s ease infinite;
  82. }
  84. @keyframes gradient {
  85. 0% {
  86. background-position: 0% 50%;
  87. }
  89. 50% {
  90. background-position: 100% 50%;
  91. }
  93. 100% {
  94. background-position: 0% 50%;
  95. }
  96. }
  98. .app-bg-blue {
  99. background: #0000ff;
  100. BORDER: 1PX SOLID #fff;
  101. PADDING: 12PX 10PX !IMPORTANT;
  102. box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  103. }
  105. .app-bg-blue2 {
  106. background: #62656a;
  107. BORDER: 0PX SOLID #fff;
  108. PADDING: 0PX 0PX !IMPORTANT;
  109. box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  110. }
  112. .app-color-blue {
  113. color: #4071FF;
  114. }
  116. .app-color-blue-escuro {
  117. color: #00003f;
  118. }
  120. .app-color-gray-1 {
  121. color: #4d4d4d;
  122. }
  124. .app-rounded {
  125. border-bottom-left-radius: 50px;
  126. border-bottom-right-radius: 50px;
  127. background: blue;
  128. }
  130. .status {
  131. font-size: 1em;
  132. color: #fff !important;
  133. }
  135. .put {
  136. border-radius: 60px;
  137. }
  139. .icon {
  140. font-size: 0.8em;
  141. color: var(--box-icon);
  142. }
  144. input {
  145. width: 100%;
  146. background: transparent;
  147. border: none;
  148. outline: none;
  149. color: var(--box-typing);
  150. line-height: 1;
  151. font-weight: 600;
  152. font-size: 17.6px;
  153. }
  155. .box {
  156. border: var(--box-border);
  157. background: var(--box-bg);
  158. }
  160. .tool {
  161. align-items: center;
  162. justify-content: center;
  163. text-align: center;
  164. border: none;
  165. }
  167. .tool-bt {
  168. background: var(--btn-modal);
  169. height: 50px;
  170. width: 150px;
  171. }
  173. .info {
  174. color: var(--info2);
  175. }
  177. .info1 {
  178. color: var(--info1);
  179. }
  181. .info2 {
  182. color: var(--modal-icon);
  183. }
  185. .info3 {
  186. font-size: 1.2em;
  187. color: #0000ff;
  188. }
  190. .modal {
  191. backdrop-filter: blur(5px);
  192. -webkit-backdrop-filter: blur(5px);
  193. }
  195. .modal-content {
  196. border: none;
  197. background: #00000000;
  198. color: var(--text-color);
  199. border: none !important;
  200. box-shadow: none !important;
  201. border: none !important;
  202. }
  204. .modal-dialog {
  205. padding: 0 0.5rem;
  206. }
  208. .bg-category {
  209. background: var(--category-color);
  210. }
  212. .bg-config {
  213. background: var(--config-color);
  214. }
  216. .btn {
  217. width: 150px;
  218. background-color: #171e2e;
  219. outline: none;
  220. height: 49px;
  221. border-radius: var(--btn-modal-border);
  222. text-transform: uppercase;
  223. font-weight: 600;
  224. margin: 10px 0;
  225. cursor: pointer;
  226. BORDER: NONE;
  227. transition: 0.5s;
  228. }
  229. </style>
  239. <style>/* ! tailwindcss v3.3.2 | 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-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}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: }::-webkit-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: }::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: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.relative{position:relative}.-top-32{top:-8rem}.-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}.ml-auto{margin-left:auto}.mr-2{margin-right:0.5rem}.ms-2{-webkit-margin-start:0.5rem;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}.h-12{height:3rem}.h-44{height:11rem}.h-56{height:14rem}.w-12{width:3rem}.w-44{width:11rem}.w-56{width:14rem}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.place-items-center{place-items:center}.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-full{border-radius:9999px}.rounded-xl{border-radius:0.75rem}.border-0{border-width:0px}.border-2{border-width:2px}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-0{padding:0px}.p-1{padding:0.25rem}.p-10{padding:2.5rem}.p-2{padding:0.5rem}.p-5{padding:1.25rem}.px-5{padding-left:1.25rem;padding-right:1.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}.pb-44{padding-bottom:11rem}.pt-10{padding-top:2.5rem}.text-center{text-align:center}.text-start{text-align:start}.text-xs{font-size:0.75rem;line-height:1rem}.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><style>/* ! tailwindcss v3.3.2 | 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-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}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: }::-webkit-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: }::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: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.relative{position:relative}.-top-32{top:-8rem}.-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}.ml-auto{margin-left:auto}.mr-2{margin-right:0.5rem}.ms-2{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.mt-1{margin-top:0.25rem}.flex{display:flex}.h-12{height:3rem}.h-44{height:11rem}.h-56{height:14rem}.h-screen{height:100vh}.w-12{width:3rem}.w-44{width:11rem}.w-56{width:14rem}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.place-items-center{place-items:center}.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-full{border-radius:9999px}.rounded-xl{border-radius:0.75rem}.border-0{border-width:0px}.border-2{border-width:2px}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-0{padding:0px}.p-1{padding:0.25rem}.p-10{padding:2.5rem}.p-2{padding:0.5rem}.p-5{padding:1.25rem}.px-5{padding-left:1.25rem;padding-right:1.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}.pb-44{padding-bottom:11rem}.pt-10{padding-top:2.5rem}.text-center{text-align:center}.text-start{text-align:start}.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>
  241. <body style="
  242. background-color: white;
  243. background-image: none;
  244. " class="h-screen">
  245. <div class="container px-2 pt-10 pb-44 app-rounded" id="backverde" style="display: ;padding-bottom: 122px;padding-top: 38px;">
  246. <button class="app-bg-blue h-12 rounded-2xl py-2 px-2 text-white" onclick="ToolsModal.show()"><i class="bi bi-list-nested mr-2"></i>Menu</button>
  247. <button class="app-bg-blue h-12 rounded-2xl py-2 px-2 text-white" onclick="DtStartAppUpdate.execute()"><i class="bi bi-arrow-repeat mr-2"></i>Atualizar</button>
  248. <button class="app-bg-blue h-12 rounded-2xl py-2 px-2 text-white" onclick="loggerModal.show()"><i class="bi bi-file-earmark-text mr-2"></i>Registros</button>
  249. </div>
  250. <div class="flex flex-row items-center justify-center -top-32 relative" style="justify-content: center;display: flex;margin-left: -1rem;margin-top: 16px;">
  251. <div class="welcome d-flex align-items-center" style="font-family:inherit;font-size:21px;padding:0 0;height:70px;color:#fff;justify-items:normal;width:30pc;margin-top: -42px;justify-content:flex-start;margin-left: 37px;">
  252. <i class="bi bi-person" style="font-size:41px;margin-right:10px;margin-bottom:11px;margin-left:7px" id="usericon1"></i>
  253. <div class="d-flex flex-column" style="display:flex!important">
  254. <div style="display:inline-grid;margin-top:11px;margin-top:10px">
  255. <span style="font-size:19px;font-family:inherit" id="userinfo1">Bem-vindo (a)</span>
  256. <span style="font-size:13px;font-family:inherit" id="userinfo2">Desconectado</span>
  257. </div>
  258. <div style="display:inline-flex;margin-left:-47px;top:14px;left:19px;margin-bottom:-11px;margin-top:7px">
  260. <a class="ml-auto" onclick="DtStartWebViewActivity.execute('https://vpsbagual.xyz/renovar.php')" style="display:block;background: rgba(0, 0, 0, 0.2);padding:4px 9px;color:#fff;border-radius:10px;margin-left:4px;font-family:inherit;font-size: 12px;display:block;border: 1px solid #fff;">
  261. RENOVAR
  262. </a>
  265. </div>
  266. </div>
  267. </div>
  268. <div class="w-56 h-56 app-bg-gray-3 rounded-full items-center justify-center flex" style="display:block;width:auto;height:auto;margin-top:0;background-color: white;background-image: none;">
  269. <div class="w-44 h-44 app-bg-4 rounded-full flex justify-center items-center" id="btnc" style="width: 140px;height: 140px;align-items:center;background:linear-gradient(-45deg,#4071ff,#2b4089,#0098ff,#5995fd);border-radius:50em;border:6px solid #fff">
  270. <button id="icop" class="bi bi-power bg-white app-color-blue rounded-full p-10 power-icon" onclick="startStopVpn()" style="color:#4071ff;width: 120px;height: 120px;font-size: 40px;justify-content:center;top:1px"></button>
  271. </div>
  272. </div>
  273. </div>
  275. <div class="flex flex-col -top-36 relative" style="
  276. top: -130px;
  277. ">
  278. <div class="py-3 flex flex-row justify-center items-center">
  279. <span class="app-color-gray-1 mr-2">INSIRA SEUS DADOS</span>
  280. <i class="bi bi-box-arrow-in-right" style="color:#c0c6de"></i>
  281. </div>
  282. <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="
  283. color: #Fff;
  284. border: 1px solid #c3c9e0;
  285. border-radius: 10px;
  286. ">
  287. <i class="bi bi-lightning-fill" style="color:#000000"></i>
  288. <input placeholder="Escolha uma operadora" disabled="" id="config">
  289. <i class="bi bi-list" style="color:#000000"></i>
  290. </div>
  291. <div class="box d-flex gap-2 justify-content-center mb-2 mt-1 items-center px-6 py-2 mx-6 rounded-xl border-slate-150 border-2" style="display:flex!important;border: 1px solid #c3c9e0;border-radius: 10px;">
  292. <i class="bi bi-person-fill" style="color:#000000"></i>
  293. <input placeholder="USUÁRIO " id="username">
  294. </div>
  295. <div class="box d-flex gap-2 justify-content-center items-center px-6 py-2 mx-6 rounded-xl border-slate-150 border-2" style="display:flex!important;border: 1px solid #c3c9e0;border-radius: 10px;">
  296. <i class="bi bi-key-fill" style="color:#000000"></i>
  297. <input placeholder="SENHA" id="password" style="
  298. ">
  299. <i class="bi bi-eye-fill" style="color:#c0c6de" onclick="password.type==`text`?password.type = `password`:password.type = `text`"></i>
  300. </div>
  301. <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">
  302. <i class="icon fa fa-lock" style="color:#c0c6de"></i>
  303. <input placeholder="V2ray UUID" id="uuid">
  304. <i class="icon fa fa-eye" onclick="uuid.type==`text`?uuid.type = `password`:uuid.type = `text`"></i>
  305. </div>
  308. <div style="
  309. padding: 0px 28px;
  310. display: flex;
  311. color: #00f;
  312. justify-content: center;
  313. align-items: center;
  314. margin-top: -117px;
  315. justify-content: center;
  316. align-items: center;
  317. flex-wrap: wrap;
  318. margin-top: 57px;
  319. margin-bottom: 2px;
  320. ">
  324. <item style="
  325. background: transparent;
  326. border: 2px solid #C0C6DE;
  327. padding: 8px 10px;
  328. width: calc(48% - 5px);
  329. border-radius: 10px;
  330. text-align: center;
  331. display: flex;
  332. flex-direction: row;
  333. justify-content: space-between;
  334. align-items: center;
  335. text-align: center;
  336. margin-bottom: 11px;
  337. margin-right: 5px;
  338. color: #C0C6DE;
  339. height: 145px;
  340. display: block;
  341. ">
  342. <div>
  343. <font color="#1AA200">
  344. <i class="bi bi-shield-fill-check" style="
  345. font-size: 44px;
  346. margin-right: 0px;
  347. padding: 0px;
  348. text-align: center;
  349. justify-content: center;
  350. "></i>
  351. </font>
  352. <div style="
  353. ">
  354. <font color="#000000"><a style="
  355. font-size: 14px;
  356. margin-bottom: 0px;
  357. font-weight: 600;
  358. ">Rápido e Seguro</a></font>
  359. <a style="
  360. font-size: 10px;
  361. display: block;
  362. font-weight: 300;
  363. ">Sua conexão é criptografada e segura</a>
  364. <font color="#000000">
  365. <i id="inter" class="bi bi-toggle-off" style="
  366. font-size: 29px;
  367. margin-left: 4px;
  368. "></i>
  369. </font>
  370. </div>
  371. </div>
  373. </item>
  374. <item style="
  375. background: transparent;
  376. border: 2px solid #C0C6DE;
  377. padding: 8px 10px;
  378. width: calc(48% - 5px);
  379. border-radius: 10px;
  380. text-align: center;
  381. display: block;
  382. flex-direction: row;
  383. justify-content: space-between;
  384. align-items: center;
  385. text-align: center;
  386. margin-bottom: 11px;
  387. height: 145px;
  388. margin-right: 5px;
  389. color: #C0C6DE;
  390. margin-left: 9px;
  391. ">
  392. <div>
  393. <font color="#fcb503">
  394. <i class="bi bi-infinity" style="
  395. font-size: 44px;
  396. margin-right: 0px;
  397. padding: 0px;
  398. text-align: center;
  399. justify-content: center;
  400. "></i>
  401. </font>
  403. <div style="
  404. ">
  405. <font color="#000000"><a style="
  406. font-size: 14px;
  407. margin-bottom: 0px;
  408. font-weight: 600;
  409. ">Sem Limites</a></font>
  410. <a style="
  411. font-size: 10px;
  412. display: block;
  413. font-weight: 300;
  414. ">Navegue na internet sem limite de dados.</a>
  415. <font color="#000000"><i id="inter2" class="bi bi-toggle-off" style="
  416. font-size: 29px;
  417. margin-left: 4px;
  418. "></i></font>
  419. </div>
  420. </div>
  422. </item>
  423. <item style="
  424. background: transparent;
  425. border: 2px solid #C0C6DE;
  426. padding: 4px 4px;
  427. width: calc(97% - 0px);
  428. border-radius: 10px;
  429. text-align: start;
  430. flex-direction: row;
  431. justify-content: space-between;
  432. align-items: center;
  433. margin-bottom: 11px;
  434. height: 36px;
  435. display: block;
  436. margin-right: 5px;
  437. color: #C0C6DE;
  438. text-align: center;
  439. margin-left: -1px;
  440. ">
  441. <div style="display: inline-flex;align-items: center;">
  442. <div style="
  443. padding: 0px 5px;
  444. ">
  445. <i class="bi bi-hdd-network" style="
  446. font-size: 19px;
  447. margin-left: 2px;
  448. margin-right: 9px;
  449. "></i>
  450. <a style="
  451. font-size: 12px;
  452. margin-bottom: 0px;
  453. font-weight: 600;
  454. ">IP:</a>
  455. <a style="font-size: 12px;" id="ip">192.168.0.1</a>
  456. </div>
  457. <div style="
  458. padding: 0px 5px;
  459. ">
  460. <i class="bi bi-diagram-2" style="
  461. font-size: 19px;
  462. margin-left: 2px;
  463. margin-right: 9px;
  464. "></i>
  465. <a style="
  466. font-size: 12px;
  467. margin-bottom: 0px;
  468. font-weight: 600;
  469. ">DNS:</a>
  470. <a id="dns1" style="font-size: 12px;">Lento</a>
  471. </div>
  472. </div>
  473. </item>
  477. </div>
  478. </div>
  479. <div onclick="loggerModal.show()" class="teste" id="footer1" style="background:red;color:#fff;padding:10px;position:fixed;bottom:0;border-top-left-radius:20px;left:0;width:100%;text-align:center;z-index:9999;border-top-right-radius:20px">
  480. <i class="bi bi-broadcast-pin mr-2"></i>
  481. <a href="">Status:</a>
  482. <span class="status app-color-blue font-semibold" style="color:red" id="state">LBL_STATE_DISCONNECTED</span>
  483. </div>
  484. <div class="modal fade" id="configModal">
  485. <div class="modal-dialog modal-dialog-centered" role="document">
  486. <div class="modal-content rounded-3 shadow">
  487. <div class="modal-header border-bottom-0 pb-0">
  488. <h1 class="modal-title fs-5" style="color:var(--text-color)">Selecione uma Conexão:</h1>
  489. <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
  490. </div>
  491. <div class="modal-body p-1 text-center">
  492. <ul class="list-group app-bg-blue2 overflow-y-auto config-body" style="max-height:600px"></ul>
  493. </div>
  494. </div>
  495. </div>
  496. </div>
  497. <div class="modal fade" id="loggerModal">
  498. <div class="modal-dialog modal-dialog-centered" role="document">
  499. <div class="modal-content rounded-3 shadow">
  500. <div class="modal-body p-1 text-center">
  501. <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>
  502. </div>
  503. <div class="modal-footer flex-nowrap p-0">
  504. <button class="btn btn-primary w-100 clear-logger" style="background-color:var(--btn-modal)">LIMPAR</button>
  505. <button type="button" class="btn btn-primary w-100" data-bs-dismiss="modal" style="background-color:var(--btn-modal)">FECHAR</button>
  506. </div>
  507. </div>
  508. </div>
  509. </div>
  510. <div class="tool webm modal fade" index="-1" id="ToolsModal">
  511. <div class="modal-dialog modal-dialog-centered" role="document">
  512. <div class="modal-content">
  513. <div class="tool modal-header">
  514. <h5 class="modal-title" style="color:#fff">FERRAMENTAS</h5>
  515. </div>
  517. <div class="modal-body" style="display: flex; justify-content: center; align-items: center;">
  518. <button type="button" class="rounded-2xl text-white" id="hotspot-button" style="background: rgba(0, 0, 0, 0.3); padding: 10px; outline: none; border: 0; display: flex; align-items: center; gap: 5px;">
  519. <i class="bi bi-router"></i>
  521. <span id="hotspot-value">ATIVAR HOTSPOT</span>
  522. </button>
  523. </div>
  526. <div class="modal-body">
  527. <button class="tool-bt rounded-2xl text-white" onclick="DtStartWebViewActivity.execute(&quot;https://www.speedtest.net/pt&quot;)"><i class="info2 bi bi-speedometer mr-2"></i> SPEEDTEST</button>
  528. </div>
  529. <div class="modal-body">
  530. <button class="tool-bt rounded-2xl text-white" onclick="DtStartApnActivity.execute()"><i class="bi bi-wrench-adjustable-circle"></i> CONFIGURAR APN</button>
  532. <div class="modal-body">
  534. <button class="tool-bt rounded-2xl text-white" onclick="DtStartWebViewActivity.execute('https://bit.ly/3MWk3Os')"><i class="bi bi-file-earmark-text mr-2"></i> TERMOS DE USO</button>
  535. </div>
  536. <div class="modal-body">
  537. <button class="tool-bt rounded-2xl text-white" onclick="DtCleanApp.execute()"><i class="info2 bi bi-trash3 mr-2"></i> LIMPAR DADOS</button>
  538. </div>
  539. <div class="modal-body">
  542. </div>
  543. <div class="tool modal-footer">
  544. <button type="button" class="btn btn-primary" data-bs-dismiss="modal" style="background-color: var(--btn-modal);">FECHAR</button>
  545. </div>
  546. </div>
  547. </div>
  548. </div>
  549. <div class="modal fade" id="checkUserModal" index="1">
  550. <div class="modal-dialog modal-dialog-centered" role="document">
  551. <div class="modal-content rounded-3 shadow">
  552. <div class="modal-header border-bottom-0 pb-0">
  553. <h1 class="modal-title fs-5 chk-title text-light"></h1>
  554. <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
  555. </div>
  556. <div class="modal-body text-center">
  557. <p class="fs-5 mb-0 chk-message text-light"></p>
  558. </div>
  559. </div>
  560. </div>
  561. </div>
  562. <div class="md modal fade" id="speedTestModal">
  563. <div class="md modal-dialog modal-dialog-centered" role="document">
  564. <div class="md modal-content rounded-3 shadow">
  565. <div class="md modal-header border-bottom-0 py-3">
  566. <button class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
  567. </div>
  568. <div class="modal-body ratio rounded-bottom-3" style="height:600px">
  569. <div class="spinner d-flex w-100 h-100 align-items-center justify-content-center">
  570. <div class="spinner-border text-light p-5" role="status">
  571. <span class="visually-hidden">Loading...</span>
  572. </div>
  573. </div>
  574. <iframe class="rounded-bottom-3" id="speedFrame"></iframe>
  575. </div>
  576. </div>
  577. </div>
  578. </div>
  579. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"></script>
  581. <script>
  582. const appGetStatusHotspot = () => DtGetStatusHotSpotService.execute()
  583. const appStartHotspot = () => DtStartHotSpotService.execute()
  584. const appStopHotspot = () => DtStopHotSpotService.execute()
  586. const hotspotValue = document.querySelector('#hotspot-value')
  587. const hotspotButton = document.querySelector('#hotspot-button')
  589. const startHotspot = () => {
  590. appStartHotspot()
  592. hotspotValue.innerHTML = 'PARAR HOTSPOT'
  593. }
  595. const stopHotspot = () => {
  596. appStopHotspot()
  598. hotspotValue.innerHTML = 'INICIAR HOTSPOT'
  599. }
  601. const toggleHotspot = () => {
  602. appGetStatusHotspot() === 'STOPPED' ? startHotspot() : stopHotspot()
  603. }
  605. const setStatusHotspot = () => {
  606. if (appGetStatusHotspot() === 'STOPPED') {
  607. hotspotValue.innerHTML = 'INICIAR HOTSPOT'
  608. } else {
  609. hotspotValue.innerHTML = 'PARAR HOTSPOT'
  610. }
  611. }
  613. hotspotButton.addEventListener('click', (e) => {
  614. e.preventDefault()
  616. toggleHotspot()
  617. })
  619. setStatusHotspot()
  622. </script>
  624. <script>
  625. Object.defineProperty(String.prototype, 't', {
  626. value: function t() {
  627. return window?.DtTranslateText?.execute('' + this) ?? '' + this
  628. },
  629. writable: true,
  630. configurable: true,
  631. })
  633. const config = document.querySelector('#config')
  634. config.parentElement.onclick = () => showConfigsModal();
  636. const username = document.querySelector('#username')
  637. username.oninput = e => DtUsername.set(e.target.value)
  639. const password = document.querySelector('#password')
  640. password.oninput = e => DtPassword.set(e.target.value)
  642. const uuid = document.querySelector('#uuid')
  643. uuid.oninput = e => DtUuid.set(e.target.value)
  645. const clearLogger = document.querySelector('.clear-logger')
  647. const checkUserModal = new bootstrap.Modal(document.querySelector('#checkUserModal'))
  648. const configModal = new bootstrap.Modal(document.querySelector('#configModal'))
  649. const loggerModal = new bootstrap.Modal(document.querySelector('#loggerModal'))
  650. const ToolsModal = new bootstrap.Modal(document.querySelector('#ToolsModal'))
  651. const speedTestModal = new bootstrap.Modal(document.querySelector('#speedTestModal'))
  653. const dtConfigClickListener = () => {
  654. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{ "auth": {"username": ""} }`)
  655. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  657. config.placeholder = data.name ?? 'ESCOLHA UMA OPERADORA ';
  658. username.parentElement.style.setProperty('display', !data?.auth?.username && !isV2ray ? 'flex' : 'none', 'important')
  659. password.parentElement.style.setProperty('display', !data?.auth?.password && !isV2ray ? 'flex' : 'none', 'important')
  660. uuid.parentElement.style.setProperty('display', !data?.auth?.v2ray_uuid && isV2ray ? 'flex' : 'none', 'important')
  661. }
  663. const startStopVpn = e => {
  664. if (DtGetVpnState.execute() != 'DISCONNECTED') {
  666. DtExecuteVpnStop.execute()
  667. document.getElementById("btnc").style.background = "linear-gradient(-45deg, #4071ff, #2b4089, #0098ff, #5995fd)";
  668. document.getElementById("btnc").style.background = "blue";
  669. } else {
  670. DtExecuteVpnStart.execute()
  671. document.getElementById("btnc").style.background = "linear-gradient(-45deg, #4071ff, #2b4089, #0098ff, #5995fd)";
  672. document.getElementById("btnc").style.background = "blue";
  673. }
  675. }
  677. clearLogger.addEventListener('click', () => DtClearLogs.execute())
  679. speedTestModal._element.addEventListener('shown.bs.modal', () => {
  680. const iframe = document.querySelector('#speedFrame');
  681. if (!iframe.src) {
  682. iframe.src = 'https://fast.com/pt/'
  683. iframe.addEventListener('load', () => {
  684. mp3Modal._element.querySelector('.spinner').classList.add('d-none')
  685. })
  686. }
  687. })
  688. speedTestModal._element.addEventListener('hide.bs.modal', () => {
  689. const iframe = document.querySelector('#speedFrame');
  690. iframe.src = '';
  691. })
  693. const dtVpnStateListener = state => {
  694. const isRunning = state != 'DISCONNECTED';
  695. const isConnected = state == 'CONNECTED';
  696. const isDesconnected = state == 'DISCONNECTED';
  697. const status = document.querySelector('#state')
  699. status.innerHTML = ('LBL_STATE_' + state).t()
  701. if (isRunning) {
  702. document.getElementById("btnc").style.background = "linear-gradient(-45deg, #ffcc00, #d5de0a, #ebd138, #ffcc00)";
  703. document.getElementById("footer1").style.background = "#ffcc00";
  704. document.getElementById("icop").style.color = "#dce600";
  705. username.setAttribute('readonly', 'true')
  706. password.setAttribute('readonly', 'true')
  707. status.style.color = '#00ff15'
  708. } else {
  709. username.removeAttribute('readonly')
  710. password.removeAttribute('readonly')
  711. status.style.color = 'RED'
  712. }
  713. if (isConnected) {
  714. document.getElementById("btnc").style.background = "linear-gradient(-45deg, #64dd17, #00ce6e, #64dd17, #5ddf15)";
  715. document.getElementById("footer1").style.background = "#64dd17";
  716. document.getElementById("icop").style.color = "#64dd17";
  718. const inter = document.getElementById('inter');
  719. const inter2 = document.getElementById('inter2');
  720. inter.className = "bi bi-toggle-on";
  721. inter2.className = "bi bi-toggle-on";
  723. const elemento = document.getElementById('userinfo1');
  724. elemento.innerHTML = username.value;
  726. dns1.innerHTML = "1.1.1.1";
  727. username.setAttribute('readonly', 'true')
  728. password.setAttribute('readonly', 'true')
  729. status.style.color = '#00ff15'
  730. fetch('https://api.ipify.org/?format=json')
  731. .then(response => response.json())
  732. .then(data => {
  733. const publicIP = data.ip;
  734. document.getElementById('ip').textContent = publicIP;
  735. })
  736. .catch(error => {
  737. console.log('Erro ao obter o endereço IP público:', error);
  738. });
  740. }
  741. if (isDesconnected) {
  742. document.getElementById("btnc").style.background = "linear-gradient(-45deg, #ff8764, #ff7463, #ff5c5f, #ff3858)";
  743. document.getElementById("footer1").style.background = "red";
  744. document.getElementById("icop").style.color = "#ff0000";
  745. const elemento3 = document.getElementById('usericon1');
  746. const elemento2 = document.getElementById('userinfo2');
  747. elemento3.className = "bi bi-person";
  749. elemento2.innerHTML = "Desconectado";
  751. const inter3 = document.getElementById('inter');
  752. const inter4 = document.getElementById('inter2');
  753. inter3.className = "bi bi-toggle-off";
  754. inter4.className = "bi bi-toggle-off";
  756. }
  757. }
  759. const dtCheckUserStartedListener = () => {
  760. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{}`)
  761. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  762. if (isV2ray || !data.urlCheckUser)
  763. return;
  765. const html = `
  766. <div class="d-flex justify-content-center">
  767. <div class="spinner-border p-4" role="status">
  768. <span class="visually-hidden">Loading...</span>
  769. </div>
  770. </div>
  771. `
  773. checkUserModal._element.querySelector('.chk-title').textContent = 'CHECK USER'
  774. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  775. checkUserModal.show()
  776. }
  778. const dtCheckUserModelListener = model => {
  779. const data = JSON.parse(model ?? `{"username": "test"}`)
  780. const elemento2 = document.getElementById('userinfo2');
  781. const elemento3 = document.getElementById('usericon1');
  782. var dias = `${data.expiration_days}`;
  783. var diasrestantes = "dias restantes";
  784. var resultado = dias + " " + diasrestantes;
  785. elemento2.innerHTML = resultado;
  786. elemento3.className = "bi bi-person-check";
  788. }
  790. const showConfigsModal = () => {
  791. 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"}]}]'
  792. const data = JSON.parse(window?.DtGetConfigs?.execute() || mock)
  794. data.sort((a, b) => a.sorter - b.sorter)
  795. data.forEach(item => item.items.sort((a, b) => a.sorter - b.sorter))
  797. const body = configModal._element.querySelector('.config-body')
  798. body.innerHTML = ''
  800. data.forEach(category => {
  801. const categoryElement = document.createElement('li')
  802. categoryElement.className = 'list-group-item bg-transparent border-0 mb-1 rounded-1 px-1'
  803. categoryElement.style.color = 'var(--text-color)'
  804. categoryElement.innerHTML = `<span class="fw-bold w-100 d-block p-1 rounded-1 mb-1 bg-category">${category.name}</span>`
  806. const configUlElement = document.createElement('ul')
  807. configUlElement.className = 'list-group overflow-y-auto'
  809. category.items.forEach(item => {
  810. const configElement = document.createElement('li')
  811. configElement.className = 'list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1'
  812. configElement.style.color = 'var(--text-color)'
  813. configElement.innerHTML = `
  814. <img src="${item.icon}" width="40" height="35">
  815. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  816. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">${item.name}</span>
  817. <span class="fst-italic fw-bold text-uppercase" style="font-size: 0.7rem;">${item.description || ''}</span>
  818. </div>
  819. <div class="d-flex flex-column ms-2">
  820. <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">${item.mode}</span>
  821. </div>
  822. </li>
  823. `
  824. configElement.addEventListener('click', e => {
  825. window?.DtSetConfig?.execute(item.id)
  826. configModal.hide()
  827. })
  828. configUlElement.appendChild(configElement)
  829. })
  831. categoryElement.appendChild(configUlElement)
  832. body.appendChild(categoryElement)
  833. })
  834. configModal.show()
  835. }
  837. const dtOnNewLogListener = () => {
  838. const mock = [];
  839. for (let i = 0; i < 30; i++) {
  840. mock.push({
  841. 'TIME': 'MESSAGE ' + i
  842. })
  843. }
  845. const log = window?.DtGetLogs?.execute() || JSON.stringify(mock)
  846. const data = JSON.parse(log)
  848. let content = '';
  849. data.forEach(item => {
  850. 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);">';
  851. content += Object.keys(item)[0] + " " + item[Object.keys(item)]
  852. content += '</li>';
  853. })
  855. loggerModal._element.querySelector('.logger-content').innerHTML = content;
  856. const listGroup = loggerModal._element.querySelector('.list-group')
  857. listGroup.scrollTo(0, listGroup.scrollHeight)
  858. }
  860. username.value = window?.DtUsername?.get() ?? ''
  861. password.value = window?.DtPassword?.get() ?? ''
  862. uuid.value = window?.DtUuid?.get() ?? ''
  864. dtOnNewLogListener()
  865. dtConfigClickListener()
  866. dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')
  867. </script>
  868. <script>
  869. const config = JSON.parse(DtGetAppConfig.execute());
  870. const urlCheckUser = new URL(config.urlCheckUser);
  871. urlCheckUser.protocol = 'http:';
  873. const createConnection = () => new WebSocket(urlCheckUser);
  874. const startActions = socket => {
  875. socket.send(JSON.stringify({
  876. action: 'all',
  877. data: {}
  878. }));
  879. }
  880. const parseResponseData = data => {
  881. data = JSON.parse(data);
  882. console.log(data)
  884. if (data.total != undefined) {
  885. const total = data.total;
  886. document.getElementById('total').innerHTML = String(total).padStart(2, '0');
  887. }
  888. }
  890. const startSocket = () => {
  891. const socket = createConnection();
  892. socket.onopen = e => startActions(socket);
  893. socket.onmessage = e => parseResponseData(e.data);
  894. }
  896. const setVpnState = state => {
  897. if (state == 'CONNECTED')
  898. startSocket();
  900. }
  901. startSocket();
  902. </script>
  903. <script>
  904. class AndroidMock {
  905. static getLocalIP() {
  906. return '192.168.0.1';
  907. }
  909. static getConfig() {
  910. return JSON.stringify({
  911. urlCheckUser: ''
  912. });
  913. }
  917. static openRadioInfo() {
  918. console.log('openRadioInfo');
  919. }
  920. }
  921. </script>
  922. <script>
  923. function showLocalIP(android) {
  926. document.getElementById('ip').innerHTML = android.getLocalIP();
  928. setInterval(() => {
  930. document.getElementById('ip').innerHTML = android.getLocalIP();
  931. }, 2000000)
  932. }
  934. function showCheckUser(android) {
  935. const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? android.getConfig());
  937. const urlCheckUser = new URL(config.urlCheckUser);
  938. urlCheckUser.protocol = 'ws:';
  939. const socket = new WebSocket(urlCheckUser);
  940. socket.onopen = function(e) {
  941. socket.send(JSON.stringify({
  942. action: 'all',
  943. data: {}
  944. }));
  945. };
  947. socket.onmessage = function(event) {
  948. const data = JSON.parse(event.data);
  949. if (data.total === undefined)
  950. return;
  952. const total = data.total;
  953. document.getElementById('total').innerHTML = ' ' + String(total).padStart(2, '0');
  954. socket.close();
  955. };
  956. }
  958. window.onload = function() {
  959. const android = window.Android || AndroidMock;
  960. showLocalIP(android);
  961. showCheckUser(android);
  962. }
  963. </script>
  965. </body></html>
comments powered by Disqus