Layout4.2.5

SUBMITTED BY: hyperloko21

DATE: Nov. 5, 2022, 1:18 a.m.

UPDATED: March 18, 2024, 7:48 p.m.

FORMAT: Text only

SIZE: 70.0 kB

History Raw Download

HITS: 717

Report
  1. <!DOCTYPE html>
  2. <html class="w-full h-full" lang="pt-BR">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>780890715 - @RagnarVps | @alexdsgmoura</title>
  9. <style>
  10. *,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-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:initial}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:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-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}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}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}*,::backdrop,:after,:before{--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:#3b82f680;--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: }.absolute{position:absolute}.relative{position:relative}.bottom-1{bottom:.25rem}.left-1\/2{left:50%}.right-1{right:.25rem}.top-1{top:.25rem}.top-1\/2{top:50%}.my-3{margin-top:.75rem;margin-bottom:.75rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.ml-auto{margin-left:auto}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-5{margin-top:1.25rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-1\/5{height:20%}.h-10{height:2.5rem}.h-12{height:3rem}.h-2\/3{height:66.666667%}.h-2\/4{height:50%}.h-20{height:5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[100\%\]{height:100%}.h-\[40px\]{height:40px}.h-\[90\%\]{height:90%}.h-\[calc\(100\%-160px\)\]{height:calc(100% - 160px)}.h-auto{height:auto}.h-full{height:100%}.max-h-8{max-height:2rem}.max-h-\[10\%\]{max-height:10%}.max-h-\[66\.666667\%\]{max-height:66.666667%}.min-h-\[40px\]{min-height:40px}.w-10{width:2.5rem}.w-11\/12{width:91.666667%}.w-14{width:3.5rem}.w-2\/4{width:50%}.w-20{width:5rem}.w-4{width:1rem}.w-4\/5{width:80%}.w-5{width:1.25rem}.w-5\/6{width:83.333333%}.w-6{width:1.5rem}.w-8{width:2rem}.w-\[40px\]{width:40px}.w-\[calc\(100\%-30px\)\]{width:calc(100% - 30px)}.w-\[calc\(100\%-40px\)\]{width:calc(100% - 40px)}.w-auto{width:auto}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-full{--tw-translate-x:-100%}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.scale-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-0{--tw-scale-x:0;--tw-scale-y:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-none{cursor:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-items-center{justify-items:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-5{gap:1.25rem}.overflow-auto{overflow:auto}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-\[\#01010342\]{border-color:#01010342}.border-\[\#767881\]{--tw-border-opacity:1;border-color:rgb(118 120 129/var(--tw-border-opacity))}.bg-\[\#070610\]{--tw-bg-opacity:1;background-color:rgb(7 6 16/var(--tw-bg-opacity))}.bg-\[\#0a0c17ab\]{background-color:#0a0c17ab}.bg-\[\#0c0d18e0\]{background-color:#0c0d18e0}.bg-\[\#121c28\]{--tw-bg-opacity:1;background-color:rgb(18 28 40/var(--tw-bg-opacity))}.bg-\[\#14141489\]{background-color:#14141489}.bg-\[\#414cb8\]{--tw-bg-opacity:1;background-color:rgb(65 76 184/var(--tw-bg-opacity))}.bg-\[\#575e81\]{--tw-bg-opacity:1;background-color:rgb(87 94 129/var(--tw-bg-opacity))}.bg-red-900{--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#0a0c17ab\]{--tw-gradient-from:#0a0c17ab var(--tw-gradient-from-position);--tw-gradient-to:#0a0c1700 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.stroke-\[\#FFFFFF\],.stroke-white{stroke:#fff}.p-2{padding:.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-\[10\%\]{padding-left:10%;padding-right:10%}.px-\[10px\]{padding-left:10px;padding-right:10px}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.pb-\[30px\]{padding-bottom:30px}.pl-1{padding-left:.25rem}.pr-6{padding-right:1.5rem}.pt-\[10px\]{padding-top:10px}.text-center{text-align:center}.text-\[0\.5rem\]{font-size:.5rem}.text-\[0\.65rem\]{font-size:.65rem}.text-\[0\.6rem\]{font-size:.6rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.leading-7{line-height:1.75rem}.text-\[\#11c9ff\]{--tw-text-opacity:1;color:rgb(17 201 255/var(--tw-text-opacity))}.text-\[\#767881\]{--tw-text-opacity:1;color:rgb(118 120 129/var(--tw-text-opacity))}.text-\[\#7d7f81\]{--tw-text-opacity:1;color:rgb(125 127 129/var(--tw-text-opacity))}.text-\[\#FF0000\]{--tw-text-opacity:1;color:rgb(255 0 0/var(--tw-text-opacity))}.text-\[\#FFFFFF\],.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-\[0px_0px_10px_0px_rgba\(18\2c 22\2c 34\2c 1\)\]{--tw-shadow:0px 0px 10px 0px #121622;--tw-shadow-colored:0px 0px 10px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid #0000;outline-offset:2px}.transition-\[max-height\]{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-1000{transition-duration:1s}@media (max-width:300px){.max-\[300px\]\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:280px){.min-\[280px\]\:text-sm{font-size:.875rem;line-height:1.25rem}.min-\[280px\]\:text-xs{font-size:.75rem;line-height:1rem}}
  11. </style>
  12. </head>
  14. <body class="w-full h-full">
  15. <main class="w-full h-full flex flex-col relative">
  16. <section class="w-full h-full flex flex-col px-[10px] pt-[10px] pb-[30px] overflow-hidden" id="container-home">
  17. <section class="flex justify-between items-center relative">
  18. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF] w-8 h-8" id="open-menu" viewBox="0 0 16 16">
  19. <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5" />
  20. </svg>
  22. <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
  23. <span class="text-[#FFFFFF] min-[280px]:text-xs text-sm" id="carrier-details">AG SSH BRAZIL </span>
  24. </div>
  26. <div>
  27. <span class="text-[#FFFFFF] min-[280px]:text-xs text-sm" id="vpn-status">Inativo</span>
  28. </div>
  29. </section>
  31. <section class="w-full h-1/5 flex justify-center">
  32. <img class="w-4/5" id="app-logo" src="https://s13.gifyu.com/images/S05Y3.gif" alt="logo" />
  33. </section>
  35. <section class="w-full h-[40px] flex justify-between items-center gap-2 mt-2.5">
  36. <button class="w-[calc(100%-40px)] h-full flex items-center justify-between gap-1 px-1 rounded-md cursor-none outline-none bg-[#070610]" id="button-of-list-carrier" type="button" title="Selecionar Configuração">
  37. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-6 h-6 text-[#FFFFFF]" viewBox="0 0 16 16">
  38. <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6" />
  39. </svg>
  41. <span class="w-full text-[#FFFFFF] text-xs truncate" id="value-of-carrier">ESCOLHA UMA CONFIGURAÇÃO</span>
  43. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF] w-5 h-5" viewBox="0 0 16 16">
  44. <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
  45. </svg>
  46. </button>
  48. <button class="w-[40px] h-full flex items-center justify-center rounded-md cursor-none outline-none bg-[#070610]" id="button-open-checkuser" type="button" title="checkuser">
  49. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF]" viewBox="0 0 16 16">
  50. <path d="M4.684 11.523v-2.3h2.261v-.61H4.684V6.801h2.464v-.61H4v5.332zm3.296 0h.676V8.98c0-.554.227-1.007.953-1.007.125 0 .258.004.329.015v-.613a1.806 1.806 0 0 0-.254-.02c-.582 0-.891.32-1.012.567h-.02v-.504H7.98v4.105zm2.805-5.093c0 .238.192.425.43.425a.428.428 0 1 0 0-.855.426.426 0 0 0-.43.43m.094 5.093h.672V7.418h-.672z" />
  51. <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
  52. </svg>
  53. </button>
  54. </section>
  56. <section class="w-full h-auto flex flex-col items-center gap-3 mt-2.5 py-2.5 bg-[#14141489] rounded-md">
  57. <h1 class="text-[#7d7f81] text-lg font-medium">Dados de Acesso</h1>
  59. <div class="w-11/12 h-9 overflow-hidden border border-[#01010342] rounded-md bg-gradient-to-r from-[#0a0c17ab] to-transparent" id="container-input-username">
  60. <input class="w-full h-full pl-1 outline-none text-[#FFFFFF] bg-transparent" id="input-username" type="text" placeholder="Usuário" />
  61. </div>
  63. <div class="w-11/12 h-9 flex items-center relative overflow-hidden border border-[#01010342] rounded-md bg-gradient-to-r from-[#0a0c17ab] to-transparent" id="container-input-password">
  64. <input class="w-[calc(100%-30px)] h-full pl-1 outline-none text-[#FFFFFF] bg-transparent" id="input-password" type="password" placeholder="Senha" />
  66. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 absolute right-1 text-[#FFFFFF]" id="eye-view-password" viewBox="0 0 16 16">
  67. <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
  68. <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
  69. </svg>
  71. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 absolute right-1 text-[#FFFFFF] hidden" id="eye-not-view-password" viewBox="0 0 16 16">
  72. <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486z" />
  73. <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />
  74. <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708" />
  75. </svg>
  76. </div>
  78. <div class="w-11/12 h-9 hidden items-center relative overflow-hidden border border-[#01010342] rounded-md bg-gradient-to-r from-[#0a0c17ab] to-transparent" id="container-input-uuid">
  79. <input class="w-[calc(100%-30px)] h-full pl-1 outline-none text-[#FFFFFF] bg-transparent" id="input-uuid" type="password" placeholder="UUID" />
  81. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 absolute right-1 text-[#FFFFFF]" id="eye-view-uuid" viewBox="0 0 16 16">
  82. <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
  83. <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
  84. </svg>
  86. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 absolute right-1 text-[#FFFFFF] hidden" id="eye-not-view-uuid" viewBox="0 0 16 16">
  87. <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486z" />
  88. <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />
  89. <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708" />
  90. </svg>
  91. </div>
  93. <button class="w-11/12 h-9 rounded-md shadow-[0px_0px_10px_0px_rgba(18,22,34,1)] bg-[#0a0c17ab] cursor-none" id="button-vpn-start-stop" type="button" title="conectar ou desconectar vpn">
  94. <span class="text-sm font-medium text-[#FFFFFF]" id="status-button-vpn">Conectar</span>
  95. </button>
  96. </section>
  98. <section class="w-full h-auto grid grid-cols-2 justify-items-center mt-auto py-2.5">
  99. <span class="text-[#FFFFFF]">Download</span>
  101. <span class="text-[#FFFFFF]">Upload</span>
  103. <span class="text-[#FFFFFF]" id="download-value">0 B/s</span>
  105. <span class="text-[#FFFFFF]" id="upload-value">0 B/s</span>
  106. </section>
  108. <section class="w-full h-10 flex items-center justify-center gap-2 mt-auto rounded-md bg-[#070610]" id="button-logs">
  109. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF] w-4 h-4" viewBox="0 0 16 16">
  110. <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5" />
  111. <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z" />
  112. </svg>
  114. <span class="text-[#FFFFFF] text-sm font-medium">V 1.2 REGISTRO </span>
  115. </section>
  116. </section>
  118. <section class="w-5/6 h-full flex flex-col items-center absolute transition-all bg-[#0c0d18e0] -translate-x-full" id="container-menu">
  119. <section class="w-full h-10 flex justify-between items-center px-1">
  120. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="ml-auto text-[#FFFFFF] w-8 h-8" id="hidden-menu" viewBox="0 0 16 16">
  121. <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5" />
  122. </svg>
  123. </section>
  125. <section class="w-full h-20 flex justify-center items-center mt-5">
  126. <div class="w-20 h-20 flex justify-center items-center rounded-full bg-[#575e81]">
  127. <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-2/4 stroke-[#FFFFFF]">
  128. <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
  129. </svg>
  130. </div>
  131. </section>
  133. <section class="w-full h-10 flex items-center justify-center">
  134. <span class="text-[#767881] text-sm font-medium px-[10%] border-b border-[#767881]" id="expires-date-user-in-menu">Expira em: 24/12/2023</span>
  135. </section>
  137. <section class="w-full h-[calc(100%-160px)] flex flex-col mt-5 px-2">
  138. <nav class="w-11/12 h-5 flex items-center gap-3" class="w-11/12 h-5 flex items-center gap-1" id="nav-checkuser">
  139. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF] w-5 h-5" viewBox="0 0 16 16">
  140. <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
  141. </svg>
  143. <span class="text-[#FFFFFF] font-medium">Informações do perfil</span>
  144. </nav>
  146. <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-whatsapp">
  147. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF]" viewBox="0 0 16 16">
  148. <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z" />
  149. </svg>
  151. <span class="text-[#FFFFFF] font-medium">Whatsapp</span>
  152. </nav>
  154. <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-telegram">
  155. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF]" viewBox="0 0 16 16">
  156. <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09" />
  157. </svg>
  159. <span class="text-[#FFFFFF] font-medium">Suporte</span>
  160. </nav>
  162. <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-renew">
  163. <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="stroke-[#FFFFFF] w-5 h-5">
  164. <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
  165. </svg>
  167. <span class="text-[#FFFFFF] font-medium">Renovar</span>
  168. </nav>
  170. <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-test">
  171. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF] w-5 h-5" viewBox="0 0 16 16">
  172. <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07A7.001 7.001 0 0 0 8 16a7 7 0 0 0 5.29-11.584.531.531 0 0 0 .013-.012l.354-.354.353.354a.5.5 0 1 0 .707-.707l-1.414-1.415a.5.5 0 1 0-.707.707l.354.354-.354.354a.717.717 0 0 0-.012.012A6.973 6.973 0 0 0 9 2.071V1h.5a.5.5 0 0 0 0-1zm2 5.6V9a.5.5 0 0 1-.5.5H4.5a.5.5 0 0 1 0-1h3V5.6a.5.5 0 1 1 1 0" />
  173. </svg>
  175. <span class="text-[#FFFFFF] font-medium">Gerar teste</span>
  176. </nav>
  178. <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-update">
  179. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF] w-5 h-5" viewBox="0 0 16 16">
  180. <path d="M11.473 9a4.5 4.5 0 0 0-8.72-.99A3 3 0 0 0 3 14h8.5a2.5 2.5 0 1 0-.027-5" />
  181. <path d="M14.544 9.772a3.506 3.506 0 0 0-2.225-1.676 5.502 5.502 0 0 0-6.337-4.002 4.002 4.002 0 0 1 7.392.91 2.5 2.5 0 0 1 1.17 4.769z" />
  182. </svg>
  184. <span class="text-[#FFFFFF] font-medium">Verificar atualizações</span>
  185. </nav>
  187. <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-terms">
  188. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF] w-5 h-5" viewBox="0 0 16 16">
  189. <path d="M8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783" />
  190. </svg>
  192. <span class="text-[#FFFFFF] font-medium">Termos de uso</span>
  193. </nav>
  195. <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-hotspot">
  196. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF] w-5 h-5" viewBox="0 0 16 16">
  197. <path d="M5.525 3.025a3.5 3.5 0 0 1 4.95 0 .5.5 0 1 0 .707-.707 4.5 4.5 0 0 0-6.364 0 .5.5 0 0 0 .707.707Z" />
  198. <path d="M6.94 4.44a1.5 1.5 0 0 1 2.12 0 .5.5 0 0 0 .708-.708 2.5 2.5 0 0 0-3.536 0 .5.5 0 0 0 .707.707Z" />
  199. <path d="M2.974 2.342a.5.5 0 1 0-.948.316L3.806 8H1.5A1.5 1.5 0 0 0 0 9.5v2A1.5 1.5 0 0 0 1.5 13H2a.5.5 0 0 0 .5.5h2A.5.5 0 0 0 5 13h6a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5h.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 14.5 8h-2.306l1.78-5.342a.5.5 0 1 0-.948-.316L11.14 8H4.86L2.974 2.342ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m4.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m1.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0" />
  200. <path d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0" />
  201. </svg>
  203. <span class="text-[#FFFFFF] font-medium">ROTEAR VPN </span>
  204. </nav>
  206. <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-access-point">
  207. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF] w-5 h-5" viewBox="0 0 16 16">
  208. <path d="M16 4.5a4.492 4.492 0 0 1-1.703 3.526L13 5l2.959-1.11c.027.2.041.403.041.61" />
  209. <path d="M11.5 9c.653 0 1.273-.139 1.833-.39L12 5.5 11 3l3.826-1.53A4.5 4.5 0 0 0 7.29 6.092l-6.116 5.096a2.583 2.583 0 1 0 3.638 3.638L9.908 8.71A4.49 4.49 0 0 0 11.5 9m-1.292-4.361-.596.893.809-.27a.25.25 0 0 1 .287.377l-.596.893.809-.27.158.475-1.5.5a.25.25 0 0 1-.287-.376l.596-.893-.809.27a.25.25 0 0 1-.287-.377l.596-.893-.809.27-.158-.475 1.5-.5a.25.25 0 0 1 .287.376M3 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2" />
  210. </svg>
  212. <span class="text-[#FFFFFF] font-medium">Ajustes de APN</span>
  213. </nav>
  215. <nav class="w-11/12 h-5 flex items-center gap-3 mt-8" id="nav-app-clean-data">
  216. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-[#FFFFFF] w-5 h-5" viewBox="0 0 16 16">
  217. <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
  218. </svg>
  220. <span class="text-[#FFFFFF] font-medium">Limpar dados</span>
  221. </nav>
  222. </section>
  223. </section>
  225. <section class="w-full h-full flex flex-col items-center justify-center absolute transition-all scale-0 bg-[#0c0d18e0]" id="container-terms">
  226. <section class="w-11/12 h-2/3 flex flex-col relative rounded-md bg-[#121c28]">
  227. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="absolute top-1 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-[#FF0000] w-20 h-20" viewBox="0 0 16 16">
  228. <path d="M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353L11.46.146zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2" />
  229. </svg>
  231. <h1 class="w-full mt-14 text-[#FF0000] text-center text-lg font-medium">TERMOS DE USO</h1>
  233. <section class="w-full h-full mt-3 mb-3 px-3 overflow-auto text-center">
  234. <p class="text-[#FFFFFF]">A AGSSHBR envidará esforços razoáveis para garantir a disponibilidade contínua de nossos serviços de VPN. No entanto, o Cliente reconhece que, devido à natureza da Internet e de outros fatores que estão além do nosso controle, não podemos garantir que os serviços de VPN estarão livres de interrupções ou quedas de conexão. O Cliente entende e concorda que quedas de conexão ou interrupções podem ocorrer devido a circunstâncias imprevistas, manutenção de rotina, atualizações de software, eventos de força maior ou outras situações semelhantes. A AGSSHBR não assume qualquer responsabilidade por perdas, danos ou inconveniências que o Cliente possa sofrer como resultado de quedas de conexão ou interrupções nos serviços de VPN. O Cliente concorda em isentar a AGSSHBR de qualquer responsabilidade relacionada a tais eventos.</p>
  235. </section>
  237. <section class="w-full h-auto flex items-center justify-center my-3">
  238. <button class="w-2/4 h-9 rounded-md cursor-none bg-[#414cb8]" id="close-terms-container" type="button">
  239. <span class="text-[#FFFFFF]">CONCORDO</span>
  240. </button>
  241. </section>
  242. </section>
  243. </section>
  245. <section class="w-full h-full flex flex-col items-center justify-center absolute transition-all scale-0 bg-[#0c0d18e0]" id="container-hotspot">
  246. <section class="w-11/12 h-auto flex flex-col relative rounded-md bg-[#121c28]">
  247. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="absolute top-1 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-[#11c9ff] w-20 h-20" viewBox="0 0 16 16">
  248. <path d="M5.525 3.025a3.5 3.5 0 0 1 4.95 0 .5.5 0 1 0 .707-.707 4.5 4.5 0 0 0-6.364 0 .5.5 0 0 0 .707.707Z" />
  249. <path d="M6.94 4.44a1.5 1.5 0 0 1 2.12 0 .5.5 0 0 0 .708-.708 2.5 2.5 0 0 0-3.536 0 .5.5 0 0 0 .707.707Z" />
  250. <path d="M2.974 2.342a.5.5 0 1 0-.948.316L3.806 8H1.5A1.5 1.5 0 0 0 0 9.5v2A1.5 1.5 0 0 0 1.5 13H2a.5.5 0 0 0 .5.5h2A.5.5 0 0 0 5 13h6a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5h.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 14.5 8h-2.306l1.78-5.342a.5.5 0 1 0-.948-.316L11.14 8H4.86L2.974 2.342ZM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m4.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m1.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0" />
  251. <path d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0" />
  252. </svg>
  254. <h1 class="w-full mt-14 text-[#11c9ff] text-center text-lg font-medium">ROTEAMENTO POR PROXY</h1>
  256. <section class="w-full h-full mt-3 mb-3 px-3 overflow-auto text-center">
  257. <p class="text-[#FFFFFF]">Essa função serve para rotear para outros dispositivos o hotspot, caso queira ativar ou precise desativar é só apertar no botão a baixo.</p>
  258. </section>
  260. <section class="w-full h-auto flex items-center justify-center gap-5 my-3">
  261. <button class="w-auto h-9 px-2 rounded-md cursor-none bg-[#414cb8]" id="button-hotspot" type="button">
  262. <span class="text-[#FFFFFF]" id="value-of-button-hotspot">ATIVAR HOTSPOT</span>
  263. </button>
  265. <button class="w-auto h-9 px-2 rounded-md cursor-none bg-red-900" id="close-hotspot-container" type="button">
  266. <span class="text-[#FFFFFF]">FECHAR</span>
  267. </button>
  268. </section>
  269. </section>
  270. </section>
  272. <section class="w-full h-full flex flex-col items-center justify-center absolute transition-all scale-0 bg-[#0c0d18e0]" id="container-configs">
  273. <section class="w-11/12 max-h-[66.666667%] flex flex-col relative rounded-md bg-[#121c28]">
  274. <header class="w-full min-h-[40px] max-h-[10%] flex items-center mb-2 border-b border-[#01010342] rounded-t-md">
  275. <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 stroke-white" id="hidden-container-configs">
  276. <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
  277. </svg>
  279. <h1 class="flex-1 pr-6 text-white text-center text-sm font-medium">CONFIGURAÇÕES</h1>
  280. </header>
  282. <section class="w-full h-[90%] overflow-auto px-1 mb-1 rounded-md">
  283. <section class="w-full h-auto flex flex-col gap-2" id="area-carrier-list">
  284. <div class="flex items-center">
  285. <input class="peer hidden" type="radio" name="config" id="tim-premium-cf" />
  286. <label class="w-full max-h-8 p-2 border border-[#01010342] rounded-md transition-[max-height] duration-1000 overflow-hidden" for="tim-premium-cf">
  287. <header class="w-full h-3 flex items-center justify-center p-2">
  288. <h1 class="text-xs font-medium text-white truncate">VIVO PREMIUM ACF</h1>
  289. </header>
  291. <ul class="w-full h-auto flex flex-col gap-2 mt-3 overflow-hidden">
  292. <li class="w-full h-12 flex items-center gap-2 px-1 rounded-md overflow-hidden bg-[#0c0d18e0]">
  293. <div class="w-10 h-[100%] flex items-center">
  294. <img src="https://i.ibb.co/TkC0rCH/DT7ixvcjh0.png" alt="icon" />
  295. </div>
  297. <div class="flex-1 flex flex-col gap-1 truncate">
  298. <h1 class="text-white text-xs truncate">TIM 1 ➜ CONFIG 1 ➜ SV01.OCI (COPY)</h1>
  300. <span class="text-white text-[0.65rem] truncate">SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA </span>
  301. </div>
  303. <div class="w-14 h-[100%] flex gap-1 items-end truncate">
  304. <span class="text-white text-[0.5rem] leading-7 truncate">OVPN_SSL_PROXY</span>
  305. </div>
  306. </li>
  308. <li class="w-full h-12 flex items-center gap-2 px-1 rounded-md overflow-hidden bg-[#0c0d18e0]">
  309. <div class="w-10 h-[100%] flex items-center">
  310. <img src="https://i.ibb.co/TkC0rCH/DT7ixvcjh0.png" alt="icon" />
  311. </div>
  313. <div class="flex-1 flex flex-col gap-1 truncate">
  314. <h1 class="text-white text-xs truncate">TIM 1 ➜ CONFIG 1 ➜ SV01.OCI (COPY)</h1>
  316. <span class="text-white text-[0.65rem] truncate">SERVIDOR: 🇧🇷 ➜ LATÊNCIA BAIXA </span>
  317. </div>
  319. <div class="w-14 h-[100%] relative truncate">
  320. <span class="text-white text-[0.6rem] truncate absolute bottom-1 right-1">SSH_PROXY</span>
  321. </div>
  322. </li>
  323. </ul>
  324. </label>
  325. </div>
  327. <div class="flex items-center">
  328. <input class="peer hidden" type="radio" name="config" id="vivo-premium-cf" />
  329. <label class="w-full max-h-8 p-2 border border-[#01010342] rounded-md transition-[max-height] duration-1000 overflow-hidden" for="vivo-premium-cf">
  330. <header class="w-full h-3 flex items-center justify-center p-2">
  331. <h1 class="text-sm text-white truncate">TIM PREMIUM ACF</h1>
  332. </header>
  334. <section class="w-full h-auto"></section>
  335. </label>
  336. </div>
  337. </section>
  338. </section>
  339. </section>
  340. </section>
  341. </main>
  343. <!-- FUNÇÕES DO APP -->
  344. <script>
  345. function appGetStatusbarHeightSize() {
  346. if (window?.DtGetStatusBarHeight?.execute && typeof window?.DtGetStatusBarHeight.execute === "function") {
  347. return DtGetStatusBarHeight.execute();
  348. }
  350. return 0;
  351. }
  353. function appGetNavbarHeightSize() {
  354. if (window?.DtGetNavigationBarHeight?.execute && typeof window?.DtGetNavigationBarHeight?.execute === "function") {
  355. return DtGetNavigationBarHeight.execute();
  356. }
  358. return 0;
  359. }
  361. function appTranslateText(label) {
  362. if (window?.DtTranslateText?.execute && typeof window?.DtTranslateText?.execute === "function") {
  363. return DtTranslateText.execute(label);
  364. }
  366. return null;
  367. }
  369. function appGetConfigLabel(label) {
  370. if (window?.DtGetAppConfig?.execute && typeof window?.DtGetAppConfig?.execute === "function") {
  371. return DtGetAppConfig.execute(label);
  372. }
  374. return null;
  375. }
  377. function appGetCarrierName() {
  378. if (window?.Android?.getNetworkName && typeof window?.Android?.getNetworkName === "function") {
  379. return Android.getNetworkName();
  380. }
  382. return null;
  383. }
  385. function appGetLocalIp() {
  386. if (window?.Android?.getLocalIP && typeof window?.Android.getLocalIP === "function") {
  387. return Android.getLocalIP();
  388. }
  390. return null;
  391. }
  393. function appGetConfigVersion() {
  394. if (window?.DtGetLocalConfigVersion?.execute && typeof window?.DtGetLocalConfigVersion?.execute === "function") {
  395. return DtGetLocalConfigVersion.execute();
  396. }
  398. return null;
  399. }
  401. function appOpenDialogConfig() {
  402. if (window?.DtExecuteDialogConfig?.execute && typeof window?.DtExecuteDialogConfig?.execute === "function") {
  403. return DtExecuteDialogConfig.execute();
  404. }
  406. return null;
  407. }
  409. function appGetDefaultConfig() {
  410. if (window?.DtGetDefaultConfig?.execute && typeof window?.DtGetDefaultConfig?.execute) {
  411. return DtGetDefaultConfig.execute();
  412. }
  414. return null;
  415. }
  417. function appGetAllConfigs() {
  418. if (window?.DtGetConfigs?.execute && typeof window?.DtGetConfigs?.execute === "function") {
  419. return JSON.parse(DtGetConfigs.execute());
  420. }
  422. return null;
  423. }
  425. function appSetConfig(id) {
  426. if (window?.DtSetConfig?.execute && typeof window?.DtSetConfig?.execute === "function") {
  427. window?.DtSetConfig?.execute(id);
  428. }
  430. return null;
  431. }
  433. function appOpenDialogDialogs() {
  434. if (window?.DtShowLoggerDialog?.execute && typeof window?.DtShowLoggerDialog?.execute === "function") {
  435. return window?.DtShowLoggerDialog.execute();
  436. }
  438. return null;
  439. }
  441. function appGetUsername() {
  442. if (window?.DtUsername && typeof window?.DtUsername.get === "function") {
  443. return DtUsername.get();
  444. }
  446. return "";
  447. }
  449. function appGetPassword() {
  450. if (window?.DtPassword && typeof window?.DtPassword?.get === "function") {
  451. return DtPassword.get();
  452. }
  454. return "";
  455. }
  457. function appGetUUID() {
  458. if (window?.DtUuid?.get && typeof window?.DtUuid.get === "function") {
  459. return DtUuid.get();
  460. }
  462. return "";
  463. }
  465. function appSetUsername(username) {
  466. if (window?.DtUsername?.set && typeof window?.DtUsername?.set === "function") {
  467. return window.DtUsername.set(username);
  468. }
  470. return null;
  471. }
  473. function appSetPassword(password) {
  474. if (window?.DtPassword?.set && typeof window?.DtPassword?.set === "function") {
  475. return window.DtPassword.set(password);
  476. }
  478. return null;
  479. }
  481. function appSetUUID(UUID) {
  482. if (window?.DtUuid.set && typeof window?.DtUuid?.set === "function") {
  483. return window.DtUuid.set(UUID);
  484. }
  486. return null;
  487. }
  489. function appGetConnectionState() {
  490. if (window?.DtGetVpnState?.execute && typeof window?.DtGetVpnState?.execute === "function") {
  491. return DtGetVpnState.execute();
  492. }
  494. return null;
  495. }
  497. function appStartConnection() {
  498. if (window?.DtExecuteVpnStart?.execute && typeof window?.DtExecuteVpnStart?.execute === "function") {
  499. return DtExecuteVpnStart.execute();
  500. }
  502. return null;
  503. }
  505. function appStopConnection() {
  506. if (window?.DtExecuteVpnStop?.execute && typeof window?.DtExecuteVpnStop?.execute === "function") {
  507. return DtExecuteVpnStop.execute();
  508. }
  510. return null;
  511. }
  513. function appGetDownloadBytes() {
  514. if (window?.DtGetNetworkDownloadBytes?.execute && typeof window?.DtGetNetworkDownloadBytes?.execute === "function") {
  515. return window?.DtGetNetworkDownloadBytes?.execute();
  516. }
  518. return "0 B/s";
  519. }
  521. function appGetUploadBytes() {
  522. if (window?.DtGetNetworkUploadBytes?.execute && typeof window?.DtGetNetworkUploadBytes?.execute === "function") {
  523. return Number(window?.DtGetNetworkUploadBytes?.execute());
  524. }
  526. return "0 B/s";
  527. }
  529. function appGetStatusHotspot() {
  530. if (window?.DtGetStatusHotSpotService?.execute && typeof window?.DtGetStatusHotSpotService?.execute === "function") {
  531. return window?.DtGetStatusHotSpotService.execute();
  532. }
  534. return null;
  535. }
  537. function appStartHotspot() {
  538. if (window?.DtStartHotSpotService?.execute && typeof window?.DtStartHotSpotService?.execute === "function") {
  539. return window.DtStartHotSpotService.execute();
  540. }
  542. return null;
  543. }
  545. function appStopHotspot() {
  546. if (window?.DtStopHotSpotService?.execute && typeof window?.DtStopHotSpotService?.execute === "function") {
  547. return window?.DtStopHotSpotService.execute();
  548. }
  550. return null;
  551. }
  553. function AppUpdate() {
  554. if (window?.DtStartAppUpdate?.execute && typeof window?.DtStartAppUpdate?.execute === "function") {
  555. return window.DtStartAppUpdate.execute();
  556. }
  558. return null;
  559. }
  561. function appIntoBrowser(url) {
  562. if (window?.DtStartWebViewActivity?.execute && typeof window?.DtStartWebViewActivity?.execute === "function") {
  563. return DtStartWebViewActivity.execute(url);
  564. }
  566. window.open(url, "_blank");
  567. }
  569. function appCheckuser() {
  570. if (window?.DtStartCheckUser?.execute && typeof window?.DtStartCheckUser?.execute === "function") {
  571. return window.DtStartCheckUser.execute();
  572. }
  574. return null;
  575. }
  577. function appApnConfiguration() {
  578. if (window?.DtStartApnActivity?.execute && typeof window?.DtStartApnActivity?.execute == "function") {
  579. return window?.DtStartApnActivity.execute();
  580. }
  582. return null;
  583. }
  585. function appBatteryOptimize() {
  586. if (window?.DtIgnoreBatteryOptimizations?.execute && typeof window?.DtIgnoreBatteryOptimizations?.execute === "function") {
  587. return DtIgnoreBatteryOptimizations.execute();
  588. }
  590. return null;
  591. }
  593. function appClearData() {
  594. if (window?.DtCleanApp?.execute && typeof window?.DtCleanApp?.execute === "function") {
  595. return DtCleanApp.execute();
  596. }
  598. return null;
  599. }
  601. function networkName() {
  602. if (window?.Android?.getNetworkName && typeof window?.Android?.getNetworkName === "function") {
  603. return Android.getNetworkName();
  604. }
  606. return null;
  607. }
  609. function internetProtocol() {
  610. if (window?.Android?.getLocalIP && typeof window?.Android?.getLocalIP === "function") {
  611. return Android.getLocalIP();
  612. }
  614. return null;
  615. }
  616. </script>
  618. <!-- DOM WRAPPER -->
  619. <script>
  620. const Dom = (selector) => {
  621. const _elements = document.querySelectorAll(selector);
  623. const wrapper = {
  624. on(listeners) {
  625. for (const [event, listener] of Object.entries(listeners)) {
  626. _elements.forEach((element) => {
  627. element.addEventListener(event, listener);
  628. });
  629. }
  631. return wrapper;
  632. },
  633. addClass: (...tokens) => {
  634. _elements.forEach((element) => {
  635. element.classList.add(...tokens);
  636. });
  638. return wrapper;
  639. },
  640. removeClass: (...tokens) => {
  641. _elements.forEach((element) => {
  642. element.classList.remove(...tokens);
  643. });
  645. return wrapper;
  646. },
  647. toggleClass: (token, force) => {
  648. _elements.forEach((element) => {
  649. element.classList.toggle(token, force);
  650. });
  652. return wrapper;
  653. },
  654. style(styles) {
  655. for (const [property, value] of Object.entries(styles)) {
  656. _elements.forEach((element) => {
  657. element.style[property] = value;
  658. });
  659. }
  661. return wrapper;
  662. },
  663. attr(attrs) {
  664. for (const [name, value] of Object.entries(attrs)) {
  665. _elements.forEach((element) => element.setAttribute(name, value));
  666. }
  668. return wrapper;
  669. },
  670. html(value) {
  671. _elements.forEach((element) => (element.innerHTML = value));
  672. return wrapper;
  673. },
  674. /**
  675. * @return {Element|null}
  676. */
  677. element() {
  678. return _elements.length > 0 ? _elements[0] : null;
  679. },
  680. allElements: _elements,
  681. };
  683. return wrapper;
  684. };
  685. </script>
  687. <!-- VÁRIAVIES -->
  688. <script>
  689. const body = Dom("body");
  691. const containerHome = Dom("#container-home");
  693. const openMenuButton = Dom("#open-menu");
  694. const carrierDetails = Dom("#carrier-details");
  695. const vpnStatusValue = Dom("#vpn-status");
  697. const appLogo = Dom("#app-logo");
  699. const buttonOfListCarrier = Dom("#button-of-list-carrier");
  700. const valueOnButtonOfCarrierList = Dom("#value-of-carrier");
  701. const buttonOfCheckUser = Dom("#button-open-checkuser");
  703. const containerInputUsername = Dom("#container-input-username");
  704. const containerInputPassword = Dom("#container-input-password");
  705. const containerInputUUID = Dom("#container-input-uuid");
  707. const inputUsername = Dom("#input-username");
  708. const inputPassword = Dom("#input-password");
  709. const inputUUID = Dom("#input-uuid");
  711. const eyeViewPasswordInput = Dom("#eye-view-password");
  712. const eyeNotViewPasswordInput = Dom("#eye-not-view-password");
  714. const eyeViewUUID = Dom("#eye-view-uuid");
  715. const eyeNotViewUUID = Dom("#eye-not-view-uuid");
  717. const buttonStartStopVpn = Dom("#button-vpn-start-stop");
  718. const buttonStartStopValue = Dom("#status-button-vpn");
  720. const downloadValue = Dom("#download-value");
  721. const uploadValue = Dom("#upload-value");
  723. const buttonLogs = Dom("#button-logs");
  725. const containerMenu = Dom("#container-menu");
  726. const hiddenContainerMenuButton = Dom("#hidden-menu");
  728. const expiresDateUserInMenu = Dom("#expires-date-user-in-menu");
  730. const navCheckuser = Dom("#nav-checkuser");
  731. const navWhatsapp = Dom("#nav-whatsapp");
  732. const navTelegram = Dom("#nav-telegram");
  733. const navRenew = Dom("#nav-renew");
  734. const navTest = Dom("#nav-test");
  735. const navUpdate = Dom("#nav-update");
  736. const navTerms = Dom("#nav-terms");
  737. const navHotspot = Dom("#nav-hotspot");
  738. const navAccessPoint = Dom("#nav-access-point");
  739. const navAppCleanData = Dom("#nav-app-clean-data");
  741. const containerTerms = Dom("#container-terms");
  742. const closeContainerTerms = Dom("#close-terms-container");
  744. const containerHotspot = Dom("#container-hotspot");
  745. const closeContainerHotspotButton = Dom("#close-hotspot-container");
  746. const buttonStartOrStopHotspot = Dom("#button-hotspot");
  747. const valueOfButtonHotspot = Dom("#value-of-button-hotspot");
  749. const containerConfigs = Dom("#container-configs");
  750. const closeContainerConfigs = Dom("#hidden-container-configs");
  752. const containerAreaCarrierList = Dom("#area-carrier-list");
  754. const inputsPeer = Dom("input.peer");
  755. const labelsFor = Dom("label[for]");
  756. </script>
  758. <!-- VÁRIAVEIS DO SISTEMA -->
  759. <script>
  760. const currentNetworkDownload = parseFloat(localStorage.getItem("networkDownload") ?? appGetDownloadBytes());
  761. const currentNetworkUpload = parseFloat(localStorage.getItem("networkUpload") ?? appGetUploadBytes());
  762. </script>
  764. <!-- FUNÇÕES -->
  765. <script>
  766. function getAppBackground() {
  767. const background_type = appGetConfigLabel("APP_BACKGROUND_TYPE");
  768. const background_color = appGetConfigLabel("APP_BACKGROUND_COLOR");
  769. const background_image = appGetConfigLabel("APP_BACKGROUND_IMAGE");
  771. if (!background_type) {
  772. return "url('../dist/bg.jpeg')";
  773. }
  775. if (JSON.parse(background_type)?.value === "COLOR") {
  776. return JSON.parse(background_color).value;
  777. }
  779. return `url(${JSON.parse(background_image).value})`;
  780. }
  782. function getAppLogo() {
  783. const logo = appGetConfigLabel("APP_LOGO");
  785. if (!logo) {
  786. return "../dist/logo.png";
  787. }
  789. return JSON.parse(logo)?.value;
  790. }
  792. function getConfigName() {
  793. const config = appGetDefaultConfig();
  795. if (!config) {
  796. return {
  797. name: appTranslateText("LBL_CHOOSE_CONFIG"),
  798. mode: "",
  799. };
  800. }
  802. if (JSON.parse(config)?.name && JSON.parse(config)?.mode) {
  803. return {
  804. name: JSON.parse(config)?.name,
  805. mode: JSON.parse(config)?.mode,
  806. };
  807. }
  809. return {
  810. name: appTranslateText("LBL_CHOOSE_CONFIG"),
  811. mode: "",
  812. };
  813. }
  815. function writeConfigValueOnButton() {
  816. valueOnButtonOfCarrierList.html(getConfigName()?.name);
  817. }
  819. function writeCarrierStatus() {
  820. setInterval(() => {
  821. carrierDetails.html(`${appGetCarrierName()}: ${internetProtocol()}`);
  822. });
  823. }
  825. function connectionState(state) {
  826. const connectionValue = `${state || appGetConnectionState()}`;
  828. switch (connectionValue) {
  829. case "DISCONNECTED":
  830. buttonStartStopValue.html(appTranslateText("LBL_BTN_START"));
  831. vpnStatusValue.html(appTranslateText("LBL_STATE_DISCONNECTED"));
  832. break;
  833. case "CONNECTING":
  834. buttonStartStopValue.html(appTranslateText("LBL_BTN_STOP"));
  835. vpnStatusValue.html(appTranslateText("LBL_STATE_CONNECTING"));
  836. break;
  837. case "CONNECTED":
  838. buttonStartStopValue.html(appTranslateText("LBL_BTN_STOP"));
  839. vpnStatusValue.html(appTranslateText("LBL_STATE_CONNECTED"));
  840. break;
  841. case "STOPPING":
  842. buttonStartStopValue.html(appTranslateText("LBL_BTN_STOPPING"));
  843. vpnStatusValue.html(appTranslateText("LBL_STATE_STOPPING"));
  844. break;
  845. case "NO_NETWORK":
  846. buttonStartStopValue.html(appTranslateText("LBL_BTN_STOP"));
  847. vpnStatusValue.html(appTranslateText("LBL_STATE_NO_NETWORK"));
  848. break;
  849. case "AUTH":
  850. buttonStartStopValue.html(appTranslateText("LBL_BTN_STOP"));
  851. vpnStatusValue.html(appTranslateText("LBL_STATE_AUTH"));
  852. break;
  853. case "AUTH_FAILED":
  854. buttonStartStopValue.html(appTranslateText("LBL_BTN_START"));
  855. vpnStatusValue.html(appTranslateText("LBL_STATE_AUTH_FAILED"));
  856. break;
  857. }
  858. }
  860. function startStopConnection() {
  861. const state = appGetConnectionState();
  862. state !== "CONNECTED" ? appStartConnection() : appStopConnection();
  863. }
  865. function startHotspot() {
  866. appStartHotspot();
  868. valueOfButtonHotspot.html("DESATIVAR HOTSPOT");
  870. return;
  871. }
  873. function stopHotspot() {
  874. appStopHotspot();
  876. valueOfButtonHotspot.html("ATIVAR HOTSPOT");
  878. return;
  879. }
  881. function toggleHotspot() {
  882. appGetStatusHotspot() === "STOPPED" ? startHotspot() : stopHotspot();
  884. return;
  885. }
  887. function setStatusHotspot() {
  888. if (appGetStatusHotspot() === "STOPPED") {
  889. valueOfButtonHotspot.html("ATIVAR HOTSPOT");
  891. return;
  892. } else {
  893. valueOfButtonHotspot.html("DESATIVAR HOTSPOT");
  895. return;
  896. }
  898. return;
  899. }
  901. function showInputPasswordValue() {
  902. eyeViewPasswordInput.addClass("hidden");
  903. eyeNotViewPasswordInput.removeClass("hidden");
  904. inputPassword.attr({ type: "text" });
  905. }
  906. function hiddenInputPasswordValue() {
  907. eyeViewPasswordInput.removeClass("hidden");
  908. eyeNotViewPasswordInput.addClass("hidden");
  909. inputPassword.attr({ type: "password" });
  910. }
  912. function showInputUUIDValue() {
  913. eyeViewUUID.addClass("hidden");
  914. eyeNotViewUUID.removeClass("hidden");
  915. inputUUID.attr({ type: "text" });
  916. }
  917. function hiddenInputUUIDValue() {
  918. eyeViewUUID.removeClass("hidden");
  919. eyeNotViewUUID.addClass("hidden");
  920. inputUUID.attr({ type: "password" });
  921. }
  923. function showContainerMenu() {
  924. containerMenu.removeClass("-translate-x-full");
  926. return;
  927. }
  928. function hiddenContainerMenu() {
  929. containerMenu.addClass("-translate-x-full");
  931. return;
  932. }
  934. function showContainerTerms() {
  935. containerTerms.removeClass("scale-0");
  937. return;
  938. }
  939. function hiddenContainerTerms() {
  940. containerTerms.addClass("scale-0");
  942. return;
  943. }
  945. function showContainerHotspot() {
  946. containerHotspot.removeClass("scale-0");
  948. return;
  949. }
  950. function hiddenContainerHotspot() {
  951. containerHotspot.addClass("scale-0");
  953. return;
  954. }
  956. function writeCarrierList() {
  957. const data = appGetAllConfigs();
  959. if (data) {
  960. containerAreaCarrierList.html("");
  962. data.sort((a, b) => a.sorter - b.sorter);
  964. data.forEach((item, index) => item.items.sort((a, b) => a.sorter - b.sorter));
  966. const labels = [];
  967. let selectedLabel = null;
  969. data.forEach((category) => {
  970. const div = document.createElement("div");
  971. const input = document.createElement("input");
  972. const label = document.createElement("label");
  973. const header = document.createElement("header");
  974. const h1 = document.createElement("h1");
  975. const ul = document.createElement("ul");
  977. div.classList.add("flex", "items-center");
  978. input.classList.add("hidden");
  979. label.classList.add("w-full", "max-h-8", "p-2", "border", "border-[#01010342]", "rounded-md", "transition-[max-height]", "duration-1000", "overflow-hidden");
  980. header.classList.add("w-full", "h-3", "flex", "items-center", "justify-center", "p-2");
  981. h1.classList.add("text-xs", "font-medium", "text-white", "truncate");
  982. ul.classList.add("w-full", "h-auto", "flex", "flex-col", "gap-2", "mt-3", "overflow-hidden");
  984. input.type = "radio";
  985. input.name = "config";
  986. input.id = category.name.trim();
  987. label.htmlFor = category.name.trim();
  989. h1.textContent = category.name;
  991. category.items.forEach((item) => {
  992. const li = document.createElement("li");
  993. const liDivLeft = document.createElement("div");
  994. const carrierIcon = document.createElement("img");
  995. const liDivCenter = document.createElement("div");
  996. const configTitle = document.createElement("h1");
  997. const configDescription = document.createElement("span");
  998. const liDivRight = document.createElement("div");
  999. const configType = document.createElement("span");
  1001. li.classList.add("w-full", "h-12", "flex", "items-center", "gap-2", "px-1", "rounded-md", "overflow-hidden", "bg-[#0c0d18e0]");
  1002. liDivLeft.classList.add("w-10", "h-[100%]", "flex", "items-center");
  1003. liDivCenter.classList.add("flex-1", "flex", "flex-col", "gap-1", "truncate");
  1004. configTitle.classList.add("text-white", "text-xs", "truncate");
  1005. configDescription.classList.add("text-white", "text-[0.65rem]", "truncate");
  1006. liDivRight.classList.add("w-14", "h-[100%]", "flex", "items-end", "truncate");
  1007. configType.classList.add("text-white", "text-[0.5rem]", "leading-7", "truncate");
  1009. carrierIcon.src = item.icon;
  1010. carrierIcon.alt = item.name;
  1012. configTitle.textContent = item.name;
  1013. configDescription.textContent = item.description;
  1015. configType.textContent = item.mode;
  1017. liDivLeft.appendChild(carrierIcon);
  1019. liDivCenter.appendChild(configTitle);
  1020. liDivCenter.appendChild(configDescription);
  1022. liDivRight.appendChild(configType);
  1024. li.appendChild(liDivLeft);
  1025. li.appendChild(liDivCenter);
  1026. li.appendChild(liDivRight);
  1028. li.addEventListener("click", () => {
  1029. appSetConfig(item.id);
  1030. hiddenContainerConfigs();
  1031. });
  1033. ul.appendChild(li);
  1034. });
  1036. header.appendChild(h1);
  1038. label.appendChild(header);
  1039. label.appendChild(ul);
  1041. input.addEventListener("change", () => {
  1042. if (input.checked) {
  1043. labels.forEach((otherLabel) => {
  1044. if (otherLabel !== label) {
  1045. otherLabel.style.maxHeight = "32px";
  1046. }
  1047. });
  1049. label.style.maxHeight = label.scrollHeight + "px";
  1051. selectedLabel = label;
  1052. }
  1053. });
  1055. labels.push(label);
  1057. div.appendChild(input);
  1058. div.appendChild(label);
  1060. containerAreaCarrierList.element().appendChild(div);
  1061. });
  1062. }
  1063. }
  1064. function showContainerConfigs() {
  1065. writeCarrierList();
  1066. containerConfigs.removeClass("scale-0");
  1068. return;
  1069. }
  1070. function hiddenContainerConfigs() {
  1071. containerConfigs.addClass("scale-0");
  1073. return;
  1074. }
  1076. function checkV2ray() {
  1077. const data = JSON.parse(appGetDefaultConfig());
  1079. if (!data) {
  1080. return false;
  1081. }
  1083. if (data.mode?.toLowerCase().startsWith("v2ray")) {
  1084. if (data.auth?.v2ray_uuid) {
  1085. return "exists v2ray config";
  1086. }
  1087. return true;
  1088. }
  1090. return false;
  1091. }
  1093. function toggleInput() {
  1094. const v2rayUUID = checkV2ray();
  1096. if (v2rayUUID === "exists v2ray config") {
  1097. containerInputUsername.addClass("hidden");
  1098. containerInputPassword.addClass("hidden");
  1099. containerInputUUID.addClass("hidden");
  1100. } else if (v2rayUUID) {
  1101. containerInputUsername.addClass("hidden");
  1102. containerInputPassword.addClass("hidden");
  1103. containerInputUUID.removeClass("hidden");
  1104. containerInputUUID.addClass("flex");
  1105. } else {
  1106. containerInputUsername.removeClass("hidden");
  1107. containerInputPassword.removeClass("hidden");
  1108. containerInputUUID.addClass("flex");
  1109. containerInputUUID.addClass("hidden");
  1110. }
  1111. }
  1113. function formatBytes(bytes) {
  1114. const sizes = ["B/s", "KB/s", "MB/s", "GB/s", "TB/s"];
  1116. if (bytes === 0) return "0 B/s";
  1118. const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
  1120. return (bytes / Math.pow(1024, i)).toPrecision(3) + " " + sizes[i];
  1121. }
  1123. function updateNetworkStats() {
  1124. setInterval(() => {
  1125. const newNetworkDownload = appGetDownloadBytes();
  1126. const newNetworkUpload = appGetUploadBytes();
  1128. downloadValue.html(formatBytes(newNetworkDownload - currentNetworkDownload));
  1129. uploadValue.html(formatBytes(newNetworkUpload - currentNetworkUpload));
  1131. localStorage.setItem("networkDownload", formatBytes(newNetworkDownload - currentNetworkDownload));
  1132. localStorage.setItem("networkUpload", formatBytes(newNetworkUpload - currentNetworkUpload));
  1133. }, 500);
  1134. }
  1136. function getExpirationDateOfUser() {
  1137. const expirationDate = localStorage.getItem("expirationDate");
  1139. if (expirationDate) {
  1140. expiresDateUserInMenu.style({ display: "block" });
  1142. return `Expira em: ${expirationDate}`;
  1143. }
  1145. expiresDateUserInMenu.style({ display: "none" });
  1147. return "";
  1148. }
  1150. function toggleLabelHeight(inputId) {
  1151. const input = document.getElementById(inputId);
  1152. const label = document.querySelector(`label[for="${inputId}"]`);
  1154. if (input.checked) {
  1155. // Se o input estiver selecionado, ajuste a altura máxima do label
  1156. label.style.maxHeight = label.scrollHeight + "px";
  1157. } else {
  1158. // Se o input não estiver selecionado, redefina a altura máxima
  1159. label.style.maxHeight = "32px";
  1160. }
  1161. }
  1163. function toggleMoreInputs() {
  1164. const data = JSON.parse(appGetDefaultConfig());
  1166. if (!data) return null;
  1168. containerInputUsername.removeClass("hidden");
  1169. containerInputPassword.removeClass("hidden");
  1170. containerInputUUID.addClass("hidden");
  1172. if (data?.auth?.username) {
  1173. containerInputUsername.addClass("hidden");
  1174. }
  1176. if (data?.auth?.password) {
  1177. containerInputPassword.addClass("hidden");
  1178. }
  1180. if (!data?.auth?.username) {
  1181. containerInputUsername.removeClass("hidden");
  1182. }
  1184. if (!data?.auth?.password) {
  1185. containerInputPassword.removeClass("hidden");
  1186. }
  1188. if (data.mode?.toLowerCase().startsWith("v2ray")) {
  1189. if (data?.auth?.v2ray_uuid) {
  1190. containerInputUUID.addClass("hidden");
  1191. containerInputUsername.addClass("hidden");
  1192. containerInputPassword.addClass("hidden");
  1193. }
  1195. if (!data?.auth?.v2ray_uuid) {
  1196. containerInputUUID.removeClass("hidden");
  1197. containerInputUsername.addClass("hidden");
  1198. containerInputPassword.addClass("hidden");
  1199. }
  1200. }
  1201. }
  1202. </script>
  1204. <!-- AÇÕES -->
  1205. <script>
  1206. body.style({
  1207. background: getAppBackground(),
  1208. backgroundSize: "cover",
  1209. backgroundPosition: "center",
  1210. backgroundRepeat: "no-repeat",
  1211. });
  1213. containerHome.style({
  1214. padding: `${appGetStatusbarHeightSize() + 10}px 10px ${appGetNavbarHeightSize() + 10}px 10px`,
  1215. });
  1217. appLogo.attr({ src: getAppLogo() });
  1219. appLogo.on({ click: () => AppUpdate() });
  1221. buttonOfListCarrier.on({ click: () => showContainerConfigs() });
  1222. valueOnButtonOfCarrierList.html(getConfigName()?.name);
  1223. closeContainerConfigs.on({ click: () => hiddenContainerConfigs() });
  1225. buttonOfCheckUser.on({ click: () => appCheckuser() });
  1227. inputUsername.attr({ placeholder: appTranslateText("LBL_USERNAME") });
  1228. inputPassword.attr({ placeholder: appTranslateText("LBL_PASSWORD") });
  1229. inputUUID.attr({ placeholder: appTranslateText("LBL_UUID") });
  1231. inputUsername.attr({ value: appGetUsername() });
  1232. inputPassword.attr({ value: appGetPassword() });
  1233. inputUUID.attr({ value: appGetUUID() });
  1235. inputUsername.on({ input: (e) => appSetUsername(e.target.value) });
  1236. inputPassword.on({ input: (e) => appSetPassword(e.target.value) });
  1237. inputUUID.on({ input: (e) => appSetUUID(e.target.value) });
  1239. eyeViewPasswordInput.on({ click: () => showInputPasswordValue() });
  1240. eyeNotViewPasswordInput.on({ click: () => hiddenInputPasswordValue() });
  1242. eyeViewUUID.on({ click: () => showInputUUIDValue() });
  1243. eyeNotViewUUID.on({ click: () => hiddenInputUUIDValue() });
  1245. buttonStartStopVpn.on({ click: () => startStopConnection() });
  1247. buttonLogs.on({ click: () => appOpenDialogDialogs() });
  1249. containerMenu.style({
  1250. padding: `${appGetStatusbarHeightSize() + 10}px 10px ${appGetNavbarHeightSize() + 10}px 10px`,
  1251. });
  1253. openMenuButton.on({ click: () => showContainerMenu() });
  1255. hiddenContainerMenuButton.on({ click: () => hiddenContainerMenu() });
  1257. expiresDateUserInMenu.html(getExpirationDateOfUser());
  1259. navCheckuser.on({ click: () => appCheckuser() });
  1261. navWhatsapp.on({ click: () => appIntoBrowser("https://wa.me/15996311570") });
  1263. navTelegram.on({ click: () => appIntoBrowser("https://t.me/wesley898") });
  1265. navRenew.on({ click: () => appIntoBrowser("https://t.me/agvendasbr_bot") });
  1267. navTest.on({ click: () => appIntoBrowser("https://t.me/agvendasbr_bot") });
  1269. navUpdate.on({ click: () => AppUpdate() });
  1271. navTerms.on({ click: () => showContainerTerms() });
  1272. closeContainerTerms.on({ click: () => hiddenContainerTerms() });
  1274. navHotspot.on({ click: () => showContainerHotspot() });
  1275. buttonStartOrStopHotspot.on({ click: () => toggleHotspot() });
  1276. closeContainerHotspotButton.on({ click: () => hiddenContainerHotspot() });
  1278. navAccessPoint.on({ click: () => appApnConfiguration() });
  1280. navAppCleanData.on({ click: () => appClearData() });
  1282. connectionState();
  1283. setStatusHotspot();
  1284. updateNetworkStats();
  1285. toggleMoreInputs();
  1286. writeCarrierStatus();
  1287. </script>
  1289. <!-- FUNÇÕES PARA O APP -->
  1290. <script>
  1291. function dtConfigClickListener() {
  1292. writeConfigValueOnButton();
  1294. toggleMoreInputs();
  1296. inputUsername.attr({ value: appGetUsername() });
  1297. inputPassword.attr({ value: appGetPassword() });
  1298. inputUUID.attr({ value: appGetUUID() });
  1299. }
  1301. function dtVpnStateListener(state) {
  1302. connectionState(state);
  1303. }
  1305. const dtCheckUserModelListener = (model) => {
  1306. const data = JSON.parse(model);
  1308. expiresDateUserInMenu.html(`Expira em: ${data.expiration_date}`);
  1310. expiresDateUserInMenu.style({ display: "block" });
  1312. localStorage.setItem("expirationDate", data.expiration_date);
  1313. };
  1314. </script>
  1315. </body>
  1316. </html>
comments powered by Disqus