Untitled

SUBMITTED BY: Lucasalmeid

DATE: Nov. 2, 2023, 5:42 a.m.

UPDATED: Nov. 2, 2023, 6:43 a.m.

FORMAT: Text only

SIZE: 87.8 kB

History Raw Download

HITS: 488

Report
  1. <html lang="en" style="
  2. "><head>
  3. <meta charset="UTF-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>RIBLLU</title>
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  8. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
  9. <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">
  10. <script src="https://cdn.tailwindcss.com"></script>
  11. <style>
  12. @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');
  14. :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;
  27. /*Editar Layout*/
  28. --fundo: #ffffff;
  29. --topo: #F7F7FC;
  30. --icon: #4071FF;
  31. --icon-bg: #E5EAFC;
  32. --config: #F7F7FC;
  33. --box-border: 1px solid #C0C6DE;
  34. --box-bg: transparent;
  35. --box-icon: black;
  36. --info1: #C0C6DE;
  37. --info2: #4071FF;
  38. }
  40. body {
  41. font-family: 'Be Vietnam Pro', sans-serif;
  42. background: var(--fundo);
  43. height: 100vh;
  44. width: 100vw;
  45. justify-content: center;
  46. align-items: center;
  47. }
  49. .container {
  50. display: flex;
  51. flex-direction: row;
  52. justify-content: space-between;
  53. background: var(--topo);
  54. width: 100vw;
  55. padding: 0 auto;
  57. }
  59. button.power-icon {
  60. font-size: 2.5em;
  61. box-shadow: 0 20px 25px 0px #4071ff54, 0 2px 0px 0px #4071ff10;
  62. }
  64. .app-bg-gray-1 {
  65. background: var(--config);
  66. }
  68. .app-bg-gray-2 {
  69. background: var(--icon-bg);
  70. }
  72. .app-bg-gray-3 {
  73. background: #fff;
  74. }
  76. .app-bg-4 {
  77. background: linear-gradient(-45deg, #13cf8e, #13cf8e, #0098ff, #5995fd);
  78. background-size: 400% 400%;
  79. animation: gradient 5s ease infinite;
  80. }
  82. @keyframes gradient {
  83. 0% {
  84. background-position: 0% 50%;
  85. }
  86. 50% {
  87. background-position: 100% 50%;
  88. }
  89. 100% {
  90. background-position: 0% 50%;
  91. }
  92. }
  94. .app-bg-blue {
  95. background: #4071FF;
  96. }
  98. .app-color-blue {
  99. color: #4071FF;
  100. }
  102. .app-color-gray-1 {
  103. color: #C0C6DE;
  104. }
  106. .app-rounded {
  107. border-bottom-left-radius: 50px;
  108. border-bottom-right-radius: 50px;
  109. }
  111. .status {
  112. font-size: 1em;
  113. }
  115. .put {
  116. border-radius: 60px;
  117. }
  119. .icon {
  120. font-size: 0.8em;
  121. color: var(--box-icon);
  122. }
  124. input {
  125. width: 100%;
  126. background: transparent;
  127. border: none;
  128. outline: none;
  129. color: var(--box-typing);
  130. line-height: 1;
  131. font-weight: 600;
  132. font-size: 1.1rem;
  133. }
  135. .box {
  136. border: var(--box-border);
  137. background: var(--box-bg);
  138. }
  140. .tool {
  141. align-items: center;
  142. justify-content: center;
  143. text-align: center;
  144. }
  146. .tool-bt {
  147. background: var(--btn-modal);
  148. height: 50px;
  149. width: 150px;
  150. border: var(--btn-border);
  151. }
  153. .info {
  154. color: var(--info2);
  155. }
  157. .info1 {
  158. color: var(--info1);
  159. }
  161. .info2 {
  162. color: var(--modal-icon);
  163. }
  165. .info3 {
  166. font-size: 1.2em;
  167. color: var(--icon);
  168. }
  170. .modal {
  171. backdrop-filter: blur(5px);
  172. -webkit-backdrop-filter: blur(5px);
  173. }
  175. .modal-content {
  176. border: none;
  177. background: var(--modal-bg);
  178. box-shadow: 0 5px 10px var(--modal-shadow);
  179. color: var(--text-color);
  180. }
  182. .modal-dialog {
  183. padding: 0 0.5rem;
  184. }
  186. .bg-category {
  187. background: var(--category-color);
  188. }
  190. .bg-config {
  191. background: var(--config-color);
  192. }
  194. .btn{
  195. width: 150px;
  196. background-color: #171e2e;
  197. outline: none;
  198. height: 49px;
  199. border-radius: var(--btn-modal-border);
  200. text-transform: uppercase;
  201. font-weight: 600;
  202. margin: 10px 0;
  203. cursor: pointer;
  204. transition: 0.5s;
  205. border: var(--btn-border);
  206. }
  208. </style>
  209. <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-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}.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.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-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}.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.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-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}.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.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-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}.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.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-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}.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.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-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}.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.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-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}.px-1{padding-left:0.25rem;padding-right:0.25rem}.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>
  210. <body class="h-screen" style="font-size: 16px; background: rgb(35, 35, 35); font-family: sans-serif; height: 95%;">
  212. <div class="icon-container" style="
  213. font-size: 33px;
  214. background: none;
  215. color: #ccc;
  216. margin-top: 27px;
  217. "><!-- Button to open the popup -->
  220. <!-- Popup -->
  221. <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;">
  222. <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);">
  223. <div style="
  224. text-align: center;
  225. "><i class="bi bi-box-arrow-in-right" style="
  226. font-size: 67px;
  227. "></i></div><h2 style="
  228. text-align: center;
  229. font-size: 24px;
  230. ">Login</h2><p style="
  231. font-size: 15px;
  232. text-align: center;
  233. margin-bottom: 26px;
  234. ">Digite seu login e senha abaixo, certifique-se de não digitar errado.</p>
  235. <form id="loginForm" style="display: flex !important; flex-direction: column;">
  236. <label for="username" style="margin-bottom: 5px;font-size: 23px;">Login:</label>
  237. <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;">
  239. <label for="password" style="margin-bottom: 5px;font-size: 23px;">Senha:</label>
  240. <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;">
  242. <button id="closePopupBtn" style="padding: 5px;cursor: pointer;border-radius: 20px;background: #1d1d1d;">Fechar</button>
  243. </form>
  245. </div>
  246. </div>
  252. <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;">
  254. <i class="bi bi-list icon-left" style="color: #fff;font-size: 33px;padding: 5px 5px;"></i>
  255. </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;">
  256. <p style="margin: 0;margin-right: 5px;font-size: 14px;">Atualizar</p>
  257. <i class="bi bi-arrow-down-circle-fill" style="color: #fff;font-size: 30px;padding: 5px 5px;"></i>
  258. </div>
  260. </div><div style="display: flex;align-items: center;justify-content: center;background-color: none;border-radius: 68px;width: 90%;margin: 0 auto;padding: 10px;">
  261. <i class="bi bi-person-circle" style="font-size: 40px; color: #fff; margin-right: 10px;"></i>
  262. <div>
  263. <p id="user-name" style="color: #fff;margin: 5px 0;font-size: 18px;font-family: sans-serif;font-weight: 600;">Bem Vindo(a)</p>
  264. <p id="dias-rest" style="color: #fff;margin: 5px 0;margin-top: -8px;font-weight: 300;font-size: 13px;font-style: initial;">conecte-se primeiro</p>
  265. </div>
  266. <button id="btnrenovar" onclick="DtStartWebViewActivity.execute('https://painelssh.ribllu.com')" 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;">
  267. <i class="bi bi-cash" style="font-size: 20px; margin-right: 5px;"></i>
  268. Renovar
  269. </button>
  270. <button id="openPopupBtn" style="margin-left: auto;background-color: #007bff;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;">
  271. <i class="bi bi-door-open" style="font-size: 20px; margin-right: 5px;"></i>
  272. Login
  273. </button>
  274. <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;">
  276. <i onclick="loggerModal.show()" class="bi bi-file-earmark-text" style="color: #fff;font-size: 21px;padding: 5px 5px;padding: 9px 12px;"></i>
  277. </div>
  278. </div>
  279. <div onclick="startStopVpn()" style="display: flex;justify-content: center;align-items: center;height: auto;margin-top: 6px;background-color: transparent;margin-bottom: 33px;">
  280. <div class="btn-conectar" style="
  281. border: 10px solid #00000017;
  282. ">
  283. <i class="bi bi-lightning" style="font-size: 57px;text-shadow: 1px 1px #0000002b;color: #fff!important;"></i>
  284. <div class="pulse"></div>
  285. </div>
  287. </div>
  289. <div class="flex flex-row items-center justify-center mt-4" style="
  290. letter-spacing: 0px;
  291. margin-bottom: 0;
  292. font-weight: 400!important;
  293. ">
  294. <span class="status app-color-blue font-semibold" id="state" style="color: red;margin-bottom: 0px;font-weight: 400;">LBL_STATE_DISCONNECTED</span>
  295. </div>
  302. <div class="flex flex-row items-center justify-center mt-4" style="letter-spacing: 0px;font-weight: 400!important;color: #ccc;Z-INDEX: 1;">
  303. <span class="download" style="display: flex;flex-direction: column;align-items: center;background: #343434;width: 100px;border-radius: 13px;padding: 10px 0px;box-shadow: rgb(0 0 0 / 5%) 0px 3px 8px;">
  304. <i class="bi bi-cloud-download" style="font-size: 24px;color: #fff;margin-bottom: 4px;"></i>
  305. <span style="margin: 0;" id="networkDownload">0 B</span>
  306. <p style="margin: 0;font-weight: 600;">Download</p>
  307. </span>
  308. <span class="upload" style="
  309. display: flex;
  310. flex-direction: column;
  311. align-items: center;
  312. background: #343434;
  313. width: 100px;
  314. border-radius: 13px;
  315. padding: 10px 0px;
  316. JUSTIFY-CONTENT: space-between;
  317. margin-left: 15px;
  318. Z-INDEX: 1;
  319. box-shadow: rgb(0 0 0 / 5%) 0px 3px 8px;
  320. ">
  321. <i class="bi bi-cloud-upload" style="font-size: 24px;color: #fff;margin-bottom: 4px;"></i>
  322. <span style="margin: 0;" id="networkUpload">0 B</span>
  323. <p style="margin: 0;font-weight: 600;">Upload</p>
  324. </span>
  325. </div>
  329. <div style="
  330. top: 0;
  331. background: #ccc;
  332. border-radius: 10px;
  333. margin-bottom: 0px!important;
  334. background: transparent;
  335. border-radius: 27px;
  336. width: 100%;
  337. justify-content: center;
  338. text-align: center;
  339. margin-left: auto;
  340. margin-right: auto;
  341. " class="flex flex-col -top-36 relative">
  354. <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;">
  355. <i class="icon fa fa-lock"></i>
  356. <input type="text" placeholder="V2ray UUID" id="uuid">
  357. <i class="icon fa fa-eye" onclick="uuid.type==`text`?uuid.type = `password`:uuid.type = `text`"></i>
  358. </div>
  362. <div class="flex flex-row items-center justify-center mt-2" style="
  363. margin-top: 0;
  364. margin-top: -1px;
  365. width: 100%;
  366. ">
  367. <div id="btnHotSpot" style="display: flex;align-items: center;MARGIN-RIGHT: 0;justify-content: center;background-color: #343434;border-radius: 12px;width: auto;height: 45px;color: #fff;padding: 18px 51PX;width: auto;margin-bottom: 18px;font-size: 14px;">
  369. <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="
  370. margin-left: 14px;
  371. font-size: 21px;
  372. "></i>
  376. </div>
  379. </div>
  380. <div style="
  381. display: flex;
  382. justify-content: center;
  383. "><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="
  384. color: #ccc;
  385. margin-bottom: 35px;
  386. border-radius: 57px;
  387. font-size: 18px;
  388. width: auto;
  389. display: list-item;
  390. width: auto;
  391. margin-top: 8px!important;
  392. margin-top: 13px!important;
  393. box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  394. border: 1px solid #545454;
  395. bottom: 60px;
  396. justify-content: center!important;
  397. ">
  398. <i class="icon fa fa-cogs" style="
  399. color: #ccc;
  400. "></i>
  401. <input type="text" placeholder="Escolha um servidor" disabled="" id="config" style="
  402. text-align: center;
  403. ">
  404. <i class="icon fa fa-angle-double-down" style="
  405. color: #ccc;
  406. "></i>
  407. </div></div>
  410. </div>
  414. <div class="modal fade" id="configModal" style="display: none;" aria-hidden="true">
  415. <div class="modal-dialog modal-dialog-centered" role="document">
  416. <div class="modal-content rounded-3 shadow" style="
  417. background: #2f2f2f;
  418. ">
  419. <div class="modal-header border-bottom-0 pb-0">
  420. <h1 class="modal-title fs-5" style="color: var(--text-color);font-weight: 600;">CONFIGURAÇÕES</h1>
  421. <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
  422. </div>
  423. <div class="modal-body p-1 text-center">
  424. <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);">
  425. <img src="https://cdn-icons-png.flaticon.com/512/8187/8187143.png" width="40" height="40">
  426. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  427. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">CONFIG 01</span>
  428. <span class="fst-italic fw-bold text-uppercase" style="font-size: 0.7rem;"></span>
  429. </div>
  430. <div class="d-flex flex-column ms-2">
  431. <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">SSH_PROXY</span>
  432. </div>
  434. </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);">
  435. <img src="https://cdn-icons-png.flaticon.com/512/8187/8187143.png" width="40" height="40">
  436. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  437. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">CONFIG. TEST</span>
  438. <span class="fst-italic fw-bold text-uppercase" style="font-size: 0.7rem;"></span>
  439. </div>
  440. <div class="d-flex flex-column ms-2">
  441. <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">SSH_PROXY</span>
  442. </div>
  444. </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);">
  445. <img src="https://cdn-icons-png.flaticon.com/512/8187/8187143.png" width="40" height="40">
  446. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  447. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">CONFIG. TEST 2</span>
  448. <span class="fst-italic fw-bold text-uppercase" style="font-size: 0.7rem;"></span>
  449. </div>
  450. <div class="d-flex flex-column ms-2">
  451. <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">OVPN_PROXY</span>
  452. </div>
  454. </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);">
  455. <img src="https://cdn-icons-png.flaticon.com/512/8187/8187143.png" width="40" height="40">
  456. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  457. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">CONFIG 02</span>
  458. <span class="fst-italic fw-bold text-uppercase" style="font-size: 0.7rem;"></span>
  459. </div>
  460. <div class="d-flex flex-column ms-2">
  461. <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">SSH_DIRECT</span>
  462. </div>
  464. </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);">
  465. <img src="https://cdn-icons-png.flaticon.com/512/8187/8187143.png" width="40" height="40">
  466. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  467. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">CONFIG 01</span>
  468. <span class="fst-italic fw-bold text-uppercase" style="font-size: 0.7rem;"></span>
  469. </div>
  470. <div class="d-flex flex-column ms-2">
  471. <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">V2RAY - VLESS</span>
  472. </div>
  474. </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);">
  475. <img src="https://cdn-icons-png.flaticon.com/512/8187/8187143.png" width="40" height="40">
  476. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  477. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">CONFIG 03</span>
  478. <span class="fst-italic fw-bold text-uppercase" style="font-size: 0.7rem;"></span>
  479. </div>
  480. <div class="d-flex flex-column ms-2">
  481. <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">OVPN_PROXY</span>
  482. </div>
  484. </li></ul></li></ul>
  485. </div>
  486. </div>
  487. </div>
  488. </div>
  489. <div class="modal fade" id="loggerModal" style="display: none;" aria-hidden="true">
  490. <div class="modal-dialog modal-dialog-centered" role="document" style="
  491. BORDER-RADIUS: 11PX;
  492. ">
  493. <div class="modal-content rounded-3 shadow" style="
  494. BACKGROUND: #1f1f1f;
  495. ">
  496. <div class="modal-body p-1 text-center">
  497. <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>
  498. </div>
  499. <div class="modal-footer flex-nowrap p-0">
  500. <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>
  501. <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>
  503. </div>
  504. </div>
  505. </div>
  506. </div>
  507. <div class="tool webm modal fade" index="-1" id="ToolsModal" style="display: none;" aria-hidden="true">
  508. <div class="modal-dialog modal-dialog-centered" role="document">
  511. <div class="modal-content" style="
  512. background: #1f1f1f;
  513. box-shadow: none;
  514. ">
  515. <div class="tool modal-header" style="
  516. border: none;
  517. font-size: 24px;
  518. ">
  519. <h5 class="modal-title" style="color:#ffffff;">FERRAMENTAS</h5>
  520. </div>
  521. <div class="modal-body" style="
  522. border: none;
  523. ">
  524. <button class="tool-bt rounded-2xl text-white" onclick="DtStartCheckUser.execute()" style="
  525. border: none;
  526. display: none;
  527. "><i class="info2 bi bi-calendar-check mr-2"></i>VALIDADE</button>
  528. </div>
  529. <div class="modal-body">
  530. <button class="tool-bt rounded-2xl text-white" data-bs-target="#speedTestModal" data-bs-toggle="modal" style="
  531. border: none;
  532. "><i class="info2 bi bi-speedometer mr-2"></i>SPEEDTEST</button>
  533. <button class="tool-bt rounded-2xl text-white" onclick="DtStartWebViewActivity.execute('https://t.me/ribllu')" style="
  534. border: none;
  535. "><i class="info2 bi bi-globe mr-2"></i>SUPORTE</button>
  536. </div>
  537. <div class="modal-body">
  538. <button class="tool-bt rounded-2xl text-white" onclick="DtStartApnActivity.execute()" style="
  539. border: none;
  540. "><i class="info2 bi bi-wifi mr-2"></i>APN</button>
  541. <button class="tool-bt rounded-2xl text-white" onclick="DtIgnoreBatteryOptimizations.execute()" style="
  542. border: none;
  543. "><i class="info2 bi bi-battery-full mr-2"></i>BATERIA</button>
  544. </div>
  545. <div class="modal-body">
  546. <button class="tool-bt rounded-2xl text-white" onclick="DtCleanApp.execute()" style="
  547. border: none;
  548. "><i class="info2 bi bi-trash3 mr-2"></i>LIMPAR</button>
  549. </div>
  550. <div class="tool modal-footer" style="
  551. border-top: 1px solid #323131;
  552. ">
  553. <button type="button" class="btn btn-primary" data-bs-dismiss="modal" style="background-color: var(--btn-modal);border: none;">FECHAR</button>
  555. </div>
  556. </div>
  557. </div>
  558. </div>
  559. <div class="modal fade" id="checkUserModal" index="1">
  560. <div class="modal-dialog modal-dialog-centered" role="document">
  561. <div class="modal-content rounded-3 shadow">
  562. <div class="modal-header border-bottom-0 pb-0">
  563. <h1 class="modal-title fs-5 chk-title text-light"></h1>
  564. <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
  565. </div>
  566. <div class="modal-body text-center">
  567. <p class="fs-5 mb-0 chk-message text-light"></p>
  568. </div>
  569. </div>
  570. </div>
  571. </div>
  572. <div class="md modal fade" id="speedTestModal">
  573. <div class="md modal-dialog modal-dialog-centered" role="document">
  574. <div class="md modal-content rounded-3 shadow">
  575. <div class="md modal-header border-bottom-0 py-3">
  576. <button class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
  578. </div>
  579. <div class="modal-body ratio rounded-bottom-3" style="height: 600px;">
  580. <div class="spinner d-flex w-100 h-100 align-items-center justify-content-center">
  581. <div class="spinner-border text-light p-5" role="status">
  582. <span class="visually-hidden">Loading...</span>
  583. </div>
  584. </div>
  585. <iframe class="rounded-bottom-3" id="speedFrame"></iframe>
  586. </div>
  587. </div>
  588. </div>
  589. </div>
  590. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"></script>
  591. <script>
  592. Object.defineProperty(String.prototype, 't', {
  593. value: function t() {
  594. return window?.DtTranslateText?.execute('' + this) ?? '' + this
  595. },
  596. writable: true,
  597. configurable: true,
  598. })
  600. const config = document.querySelector('#config')
  601. config.parentElement.onclick = () => showConfigsModal();
  603. const username = document.querySelector('#username')
  604. username.oninput = e => DtUsername.set(e.target.value)
  606. const password = document.querySelector('#password')
  607. password.oninput = e => DtPassword.set(e.target.value)
  609. const uuid = document.querySelector('#uuid')
  610. uuid.oninput = e => DtUuid.set(e.target.value)
  612. const clearLogger = document.querySelector('.clear-logger')
  614. const checkUserModal = new bootstrap.Modal(document.querySelector('#checkUserModal'))
  615. const configModal = new bootstrap.Modal(document.querySelector('#configModal'))
  616. const loggerModal = new bootstrap.Modal(document.querySelector('#loggerModal'))
  617. const ToolsModal = new bootstrap.Modal(document.querySelector('#ToolsModal'))
  618. const speedTestModal = new bootstrap.Modal(document.querySelector('#speedTestModal'))
  621. const dtConfigClickListener = () => {
  622. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{ "auth": {"username": ""} }`)
  623. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  625. config.placeholder = data.name ?? 'Escolha um servidor';
  626. username.parentElement.style.setProperty('display', !data?.auth?.username && !isV2ray ? 'flex' : 'none', 'important')
  627. password.parentElement.style.setProperty('display', !data?.auth?.password && !isV2ray ? 'flex' : 'none', 'important')
  628. uuid.parentElement.style.setProperty('display', !data?.auth?.v2ray_uuid && isV2ray ? 'flex' : 'none', 'important')
  629. }
  631. const startStopVpn = e => {
  632. if (DtGetVpnState.execute() != 'DISCONNECTED') {
  633. DtExecuteVpnStop.execute()
  634. } else {
  635. DtExecuteVpnStart.execute()
  636. }
  637. }
  639. clearLogger.addEventListener('click', () => DtClearLogs.execute())
  641. speedTestModal._element.addEventListener('shown.bs.modal', () => {
  642. const iframe = document.querySelector('#speedFrame');
  643. if (!iframe.src) {
  644. iframe.src = 'http://speedtest.sercomtel.com.br/'
  645. iframe.addEventListener('load', () => {
  646. mp3Modal._element.querySelector('.spinner').classList.add('d-none')
  647. })
  648. }
  649. })
  650. speedTestModal._element.addEventListener('hide.bs.modal', () => {
  651. const iframe = document.querySelector('#speedFrame');
  652. iframe.src = '';
  653. })
  655. const dtVpnStateListener = state => {
  656. const isConectado= state === 'CONNECTED';
  657. const isDesconectado= state === 'DISCONNECTED';
  658. const isRunning = state != 'DISCONNECTED';
  659. const status = document.querySelector('#state')
  661. status.innerHTML = ('LBL_STATE_' + state).t()
  663. if (isRunning) {
  664. username.setAttribute('readonly', 'true')
  665. password.setAttribute('readonly', 'true')
  666. status.style.color = '#00ff15'
  667. } else {
  668. username.removeAttribute('readonly')
  669. password.removeAttribute('readonly')
  670. status.style.color = 'RED'
  671. }
  675. if (isDesconectado) {
  676. document.getElementById("dias-rest").innerHTML = "conecte-se primeiro"
  677. document.getElementById("user-name").innerHTML = "Bem Vindo(a)"
  678. document.getElementById("openPopupBtn").style.display = "flex";
  679. document.getElementById("btnrenovar").style.display = "none";
  680. }
  681. if (isConectado) {
  682. document.getElementById("user-name").innerHTML = username.value
  683. document.getElementById("openPopupBtn").style.display = "none";
  684. document.getElementById("btnrenovar").style.display = "flex";
  687. }
  689. }
  691. const dtCheckUserStartedListener = () => {
  692. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{}`)
  693. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  694. if (isV2ray || !data.urlCheckUser) return;
  696. const html = `
  697. <div class="d-flex justify-content-center">
  698. <div class="spinner-border p-4" role="status">
  699. <span class="visually-hidden">Loading...</span>
  700. </div>
  701. </div>
  702. `
  704. checkUserModal._element.querySelector('.chk-title').textContent = 'CHECK USER'
  705. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  706. checkUserModal.show()
  707. }
  709. const dtCheckUserModelListener = model => {
  710. const data = JSON.parse(model ?? `{"username": "test"}`)
  711. const html = `${data.expiration_days} dias restantes`
  712. document.getElementById("dias-rest").innerHTML = html
  714. }
  716. const showConfigsModal = () => {
  717. 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"}]}]'
  718. const data = JSON.parse(window?.DtGetConfigs?.execute() || mock)
  720. data.sort((a, b) => a.sorter - b.sorter)
  721. data.forEach(item => item.items.sort((a, b) => a.sorter - b.sorter))
  723. const body = configModal._element.querySelector('.config-body')
  724. body.innerHTML = ''
  726. data.forEach(category => {
  727. const categoryElement = document.createElement('li')
  728. categoryElement.className = 'list-group-item bg-transparent border-0 mb-1 rounded-1 px-1'
  729. categoryElement.style.color = 'var(--text-color)'
  730. categoryElement.innerHTML = `<span class="fw-bold w-100 d-block p-1 rounded-1 mb-1 bg-category">${category.name}</span>`
  732. const configUlElement = document.createElement('ul')
  733. configUlElement.className = 'list-group overflow-y-auto'
  735. category.items.forEach(item => {
  736. const configElement = document.createElement('li')
  737. configElement.className = 'list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1'
  738. configElement.style.color = 'var(--text-color)'
  739. configElement.innerHTML = `
  740. <img src="${item.icon}" width="40" height="40">
  741. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  742. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">${item.name}</span>
  743. <span class="fst-italic fw-bold text-uppercase" style="font-size: 0.7rem;">${item.description || ''}</span>
  744. </div>
  745. <div class="d-flex flex-column ms-2">
  746. <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">${item.mode}</span>
  747. </div>
  748. </li>
  749. `
  750. configElement.addEventListener('click', e => {
  751. window?.DtSetConfig?.execute(item.id)
  752. configModal.hide()
  753. })
  754. configUlElement.appendChild(configElement)
  755. })
  757. categoryElement.appendChild(configUlElement)
  758. body.appendChild(categoryElement)
  759. })
  760. configModal.show()
  761. }
  763. const dtOnNewLogListener = () => {
  764. const mock = [];
  765. for (let i = 0; i < 30; i++) {
  766. mock.push({ 'TIME': 'MESSAGE ' + i })
  767. }
  769. const log = window?.DtGetLogs?.execute() || JSON.stringify(mock)
  770. const data = JSON.parse(log)
  772. let content = '';
  773. data.forEach(item => {
  774. 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);">';
  775. content += Object.keys(item)[0] + " " + item[Object.keys(item)]
  776. content += '</li>';
  777. })
  779. loggerModal._element.querySelector('.logger-content').innerHTML = content;
  780. const listGroup = loggerModal._element.querySelector('.list-group')
  781. listGroup.scrollTo(0, listGroup.scrollHeight)
  782. }
  784. username.value = window?.DtUsername?.get() ?? ''
  785. password.value = window?.DtPassword?.get() ?? ''
  786. uuid.value = window?.DtUuid?.get() ?? ''
  788. dtOnNewLogListener()
  789. dtConfigClickListener()
  790. dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')
  792. </script>
  795. <script>
  796. class AndroidMock {
  797. static getLocalIP() {
  798. return '192.168.0.1';
  799. }
  801. static getConfig() {
  802. return JSON.stringify({
  803. urlCheckUser: 'URLAQUI'
  804. });
  805. }
  807. static getNetworkName() {
  808. return 'REDE';
  809. }
  811. static openRadioInfo() {
  812. console.log('openRadioInfo');
  813. }
  814. }
  815. </script>
  817. <script>
  818. function showLocalIP(android) {
  819. console.log(android.getNetworkName());
  820. document.getElementById('name').innerHTML = ' ' + android.getNetworkName() + ':';
  821. document.getElementById('ip').innerHTML = android.getLocalIP();
  823. setInterval(() => {
  824. document.getElementById('name').innerHTML =
  825. ' ' + android.getNetworkName() + ':';
  826. document.getElementById('ip').innerHTML = android.getLocalIP();
  827. }, 2000)
  828. }
  833. window.onload = function () {
  834. const android = window.Android || AndroidMock;
  835. showLocalIP(android);
  836. showCheckUser(android);
  837. }
  839. </script>
  841. <script>
  842. const openPopupBtn = document.getElementById("openPopupBtn");
  843. const closePopupBtn = document.getElementById("closePopupBtn");
  844. const loginPopup = document.getElementById("loginPopup");
  846. openPopupBtn.addEventListener("click", () => {
  847. loginPopup.style.display = "flex";
  848. });
  850. closePopupBtn.addEventListener("click", () => {
  851. loginPopup.style.display = "none";
  852. });
  854. // Close the popup if the user clicks outside of it
  855. window.addEventListener("click", (event) => {
  856. if (event.target === loginPopup) {
  857. loginPopup.style.display = "none";
  858. }
  859. });
  861. // Prevent the default form submission behavior and add your login logic here
  862. const loginForm = document.getElementById("loginForm");
  863. loginForm.addEventListener("submit", (event) => {
  864. event.preventDefault();
  865. // Add your login logic here
  866. });
  867. </script><style> .icon-container {
  868. display: flex;
  869. justify-content: space-between;
  870. align-items: center;
  871. background-color: #ccc;
  872. border-radius: 68px;
  873. width: 90%;
  874. margin: 0 auto;
  875. padding: 10px;
  876. }
  878. .bi {
  879. font-size: 40px;
  880. color: #fff;
  881. }
  883. .icon-left {
  884. order: 1; /* Posiciona o ícone à esquerda */
  885. }
  887. .icon-right {
  888. order: 2; /* Posiciona o ícone à direita */
  889. }
  890. @keyframes pulseAnimation {
  891. 0% {
  892. transform: scale(1);
  893. opacity: 0.7;
  894. }
  895. 100% {
  896. transform: scale(2);
  897. opacity: 0;
  898. }
  899. }
  901. .btn-conectar {
  902. position: relative;
  903. display: flex;
  904. align-items: center;
  905. justify-content: center;
  906. background-color: #007bff;
  907. border-radius: 50%;
  908. width: 160px;
  909. height: 160px;
  910. cursor: pointer;
  911. box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  912. }
  914. .pulse {
  915. position: absolute;
  916. width: 100%;
  917. height: 100%;
  918. background-color: #0061ca5c;
  919. border-radius: 50%;
  920. animation: pulseAnimation 2s infinite;
  921. pointer-events: none;
  922. }.bi {
  923. font-size: 17px;
  924. color: #fff;
  925. }
  927. </style>
  928. <script>
  929. const startHotSpot = () => {
  930. DtStartHotSpotService.execute();
  931. document.getElementById("togglehot").className = "bi bi-toggle-on";
  933. }
  935. const stopHotSpot = () => {
  936. DtStopHotSpotService.execute();
  937. document.getElementById("togglehot").className = "bi bi-toggle-off";
  938. }
  940. const toggleHotSpot = () => {
  941. const hotSpotStatus = window?.DtGetStatusHotSpotService?.execute() ?? 'STOPPED';
  942. hotSpotStatus == 'RUNNING' ? stopHotSpot() : startHotSpot();
  943. }
  945. const btnHotSpot = document.querySelector("#btnHotSpot");
  946. btnHotSpot.addEventListener('click', toggleHotSpot);
  951. const formatBytes = bytes => {
  952. const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
  953. if (bytes === 0) return '0 B';
  954. const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
  955. return (bytes / Math.pow(1024, i)).toPrecision(3) + ' ' + sizes[i];
  956. }
  958. const currentNetworkDownload = window?.DtGetNetworkDownloadBytes?.execute() ?? 0
  959. const currentNetworkUpload = window?.DtGetNetworkUploadBytes?.execute() ?? 0
  961. setInterval(() => {
  962. const networkDownload = document.querySelector('#networkDownload');
  963. const networkUpload = document.querySelector('#networkUpload');
  965. const newNetworkDownload = window?.DtGetNetworkDownloadBytes?.execute() ?? 0;
  966. const newNetworkUpload = window?.DtGetNetworkUploadBytes?.execute() ?? 0;
  968. networkDownload.innerHTML = formatBytes(newNetworkDownload - currentNetworkDownload);
  969. networkUpload.innerHTML = formatBytes(newNetworkUpload - currentNetworkUpload);
  971. }, 1000)
  975. const setVpnState = state => {
  976. if (state == 'CONNECTED') startSocket();
  977. }
  978. startSocket();
  979. </script>
  980. </body></html>
comments powered by Disqus