Tema online

SUBMITTED BY: anbach

DATE: Nov. 20, 2023, 2:32 a.m.

UPDATED: March 7, 2024, 1:59 a.m.

FORMAT: Text only

SIZE: 53.6 kB

History Raw Download

HITS: 7111

Report
  1. <!DOCTYPE html>
  2. <html lang="pt-BR">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9. <title>PicaPau</title>
  11. <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
  12. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
  13. integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  14. <script type="text/javascript"
  15. src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
  16. integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
  17. crossorigin="anonymous"></script>
  18. <link rel='stylesheet'
  19. href='https://cdn-uicons.flaticon.com/2.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css'>
  21. <style>
  22. @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
  24. :root {
  25. /*------------------------------------------------------------------------EDITE SOMENTE AQUI INICIAL-----------------------------------------------------------------------------*/
  31. /* -------------- LOGO -----------------------------------*/
  33. --logo-img-url: url( );
  35. --logotamanho: 30%;
  36. /* Cria uma sombra na LOGO */
  38. /*
  39. --shadow1-offset-x: -5px;
  40. --shadow1-offset-y: 8px;
  41. --shadow1-blur: 3px;
  42. --shadow1-color: black;
  43. */
  44. /*------------------------------------------------------------------------*/
  51. --background-img: url(https://i.imgur.com/GBgCHyH.jpg);
  53. /* Defina o texto desejado */
  54. --textonovo: ismael Net ;
  55. --tamanhotexto: 80px;
  56. --cortexto: #ffffff;
  58. /* Valor padrão para o desfoque do vidro */
  59. --blur-amount2: 5px;
  60. --vidro-color: rgba(0, 0, 0, 0.158);
  62. /* Cria uma sombra no Vidro */
  64. /*
  65. --shadow-offset-x: -5px;
  66. --shadow-offset-y: 8px;
  67. --shadow-blur: 3px;
  68. --shadow-color: black;
  69. */
  72. /*------------------------------------------------------------------------*/
  75. /*Cores Dos Botao de iniciar*/
  76. --cor-gradiente-nav-inicial: #f1292912;
  77. --cor-gradiente-nav-final: #ff7f0017;
  78. --cor-icon-config: #ffffff;
  80. /*------------------------------------------------------------------------*/
  81. /*Cores Dos Botao de conectar*/
  82. --cor-gradiente-btstart-incial: #f1292912;
  83. --cor-gradiente-btstart-final: #ff7f0017;
  85. /*------------------------------------------------------------------------*/
  86. /*Cores Dos icones e TexTo*/
  87. --text-color: #ffffff;
  88. --icon-color: #FFFFFF;
  89. /*------------------------------------------------------------------------*/
  90. /*Cores Dos config*/
  91. --cor-text-config: #e70000;
  92. --cor-gradiente-config-incial: #f1292912;
  93. --cor-gradiente-config-final: #ff7f0017;
  95. /*------------------------------------------------------------------------EDITE SOMENTE AQUI FINALLLL-----------------------------------------------------------------------------*/
  98. --input-border-radius: 5px;
  99. --input-background-color: #0a091a55;
  101. --card-border-radius: 5px;
  102. --card-background-color: #0b092868;
  104. --btn-background-color: #0a091a55;
  105. --btn-border-radius: 15px;
  107. --modal-background-color: #0b092868;
  110. }
  112. * {
  113. margin: 0;
  114. padding: 0;
  115. box-sizing: border-box;
  116. font-family: 'Roboto', sans-serif;
  117. }
  119. body {
  120. height: 100vh;
  121. display: flex;
  122. flex-direction: column;
  123. align-items: center;
  124. justify-content: center;
  125. background-repeat: no-repeat;
  126. background-size: cover;
  127. background-color: var(--cor-background);
  129. color: #fff;
  130. font-family: 'Lato', sans-serif;
  131. }
  135. * {
  136. box-sizing: border-box;
  137. }
  139. h1 {
  140. font-size: 60px;
  141. margin: -80px 0 40px;
  142. }
  144. .year {
  145. font-size: 100px;
  146. z-index: 0;
  147. opacity: 0.2;
  148. position: absolute;
  149. bottom: 28px;
  150. left: 50%;
  151. transform: translateX(-50%);
  152. }
  155. .countdown {
  156. display: -webkit-inline-box;
  157. position: absolute;
  158. top: 135px;
  159. margin-top: -23px;
  160. transform: scale(2);
  161. }
  162. .time {
  163. display: flex;
  164. flex-direction: column;
  165. align-items: center;
  166. justify-content: center;
  167. margin: 15px;
  168. }
  170. .time h2 {
  171. margin: 0 0 5px;
  172. }
  174. @media (max-width: 500px) {
  175. h1 {
  176. font-size: 45px;
  177. }
  179. .time {
  180. margin: 5px;
  181. }
  183. .time h2 {
  184. font-size: 12px;
  185. margin: 0;
  186. }
  188. .time small {
  189. font-size: 10px;
  190. }
  191. }
  196. /*Feliz Natal*/
  198. a {
  199. text-decoration: none;
  200. }
  202. .message {
  203. font-family: 'Mountains of Christmas', cursive;
  204. font-size: var(--tamanhotexto);
  205. text-align: center;
  206. position: absolute;
  207. color: var(--cortexto);
  208. margin: 0px;
  209. top: 50px;
  210. height: 60px;
  211. }
  212. /*LOADING SPACE*/
  214. .contain {
  215. animation-delay: 4s;
  216. z-index: 1000;
  217. position: fixed;
  218. top: 0;
  219. left: 0;
  220. bottom: 0;
  221. right: 0;
  222. display: -webkit-box;
  223. display: -ms-flexbox;
  224. display: flex;
  225. -ms-flex-flow: row nowrap;
  226. flex-flow: row nowrap;
  227. -webkit-box-pack: center;
  228. -ms-flex-pack: center;
  229. justify-content: center;
  230. -webkit-box-align: center;
  231. -ms-flex-align: center;
  232. align-items: center;
  234. background: #25a7d7;
  235. background: -webkit-linear-gradient(#25a7d7, #2962FF);
  236. background: linear-gradient(#25a7d7, #25a7d7);
  237. }
  239. .icon {
  240. width: 100px;
  241. height: 100px;
  242. margin: 0 5px;
  243. }
  245. /*Animation*/
  246. .icon:nth-child(2) img {
  247. -webkit-animation-delay: 0.2s;
  248. animation-delay: 0.2s
  249. }
  251. .icon:nth-child(3) img {
  252. -webkit-animation-delay: 0.3s;
  253. animation-delay: 0.3s
  254. }
  256. .icon:nth-child(4) img {
  257. -webkit-animation-delay: 0.4s;
  258. animation-delay: 0.4s
  259. }
  261. .icon img {
  262. -webkit-animation: anim 2s ease infinite;
  263. animation: anim 2s ease infinite;
  264. -webkit-transform: scale(0, 0) rotateZ(180deg);
  265. transform: scale(0, 0) rotateZ(180deg);
  266. }
  268. @-webkit-keyframes anim {
  269. 0% {
  270. -webkit-transform: scale(0, 0) rotateZ(-90deg);
  271. transform: scale(0, 0) rotateZ(-90deg);
  272. opacity: 0
  273. }
  275. 30% {
  276. -webkit-transform: scale(1, 1) rotateZ(0deg);
  277. transform: scale(1, 1) rotateZ(0deg);
  278. opacity: 1
  279. }
  281. 50% {
  282. -webkit-transform: scale(1, 1) rotateZ(0deg);
  283. transform: scale(1, 1) rotateZ(0deg);
  284. opacity: 1
  285. }
  287. 80% {
  288. -webkit-transform: scale(0, 0) rotateZ(90deg);
  289. transform: scale(0, 0) rotateZ(90deg);
  290. opacity: 0
  291. }
  292. }
  294. @keyframes anim {
  295. 0% {
  296. -webkit-transform: scale(0, 0) rotateZ(-90deg);
  297. transform: scale(0, 0) rotateZ(-90deg);
  298. opacity: 0
  299. }
  301. 30% {
  302. -webkit-transform: scale(1, 1) rotateZ(0deg);
  303. transform: scale(1, 1) rotateZ(0deg);
  304. opacity: 1
  305. }
  307. 50% {
  308. -webkit-transform: scale(1, 1) rotateZ(0deg);
  309. transform: scale(1, 1) rotateZ(0deg);
  310. opacity: 1
  311. }
  313. 80% {
  314. -webkit-transform: scale(0, 0) rotateZ(90deg);
  315. transform: scale(0, 0) rotateZ(90deg);
  316. opacity: 0
  317. }
  318. }
  320. .container {
  321. height: 100%;
  322. display: flex;
  323. flex-direction: column;
  324. justify-content: center;
  325. align-items: center;
  326. max-width: 465px;
  327. background: var(--background-img);
  328. background-position: center;
  329. background-repeat: no-repeat;
  330. background-size: cover;
  331. }
  333. .text_config {
  334. color: var(--cor-text-config) !important;
  335. }
  337. .logo {
  338. width: var(--logotamanho);
  339. display: block;
  340. margin-top: 0px;
  341. margin-bottom: 15px;
  342. margin-left: auto;
  343. margin-right: auto;
  344. content: var(--logo-img-url);
  345. filter: drop-shadow(var(--shadow1-offset-x) var(--shadow1-offset-y) var(--shadow1-blur) var(--shadow1-color));
  346. }
  349. .card {
  350. backdrop-filter: blur(var(--blur-amount2));
  351. background: var(--vidro-color);
  352. border-radius: 20px;
  353. border: 1px solid #1e1e1e !important;
  354. box-shadow: -8px 12px 20px 0 rgb(13 15 18 / 63%) !important;
  355. padding: 15px !important;
  356. max-width: 450px;
  357. height: auto;
  358. position: relative;
  359. filter: drop-shadow(var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color));
  360. }
  362. .btn-dark {
  363. border: none;
  364. background: linear-gradient(var(--cor-gradiente-btstart-incial), var(--cor-gradiente-btstart-final));
  365. border-radius: 15px;
  366. --bs-btn-hover-bg: #4b8d4b18 !important;
  367. --bs-btn-hover-border-color: #47593f2f !important;
  368. }
  370. .modal-content {
  371. background-color: transparent;
  372. backdrop-filter: blur(25px);
  373. }
  375. .tool {
  376. align-items: center;
  377. justify-content: center;
  378. text-align: center;
  379. }
  381. .tool-bt {
  382. background: linear-gradient(var(--cor-gradiente-config-incial), var(--cor-gradiente-config-final));
  383. border-radius: 20px;
  384. color: var(--cor-text-config) !important;
  385. height: 35px;
  386. width: 100%;
  387. border: var(--btn-border);
  388. }
  390. .input-group,
  391. .form-control,
  392. .input-group-text {
  393. background: #0808083f;
  394. color: var(--icon-color);
  395. border: none;
  396. border-radius: 15px;
  397. outline: none;
  398. }
  400. .form-control::placeholder {
  401. color: var(--text-color);
  402. }
  404. .form-control:focus {
  405. color: var(--text-color);
  406. outline: none;
  407. box-shadow: none;
  408. }
  410. .input-group-text {
  411. padding-right: 0;
  412. }
  415. .fs-5 {
  416. font-size: 1rem !important;
  417. }
  419. nav {
  421. background: linear-gradient(var(--cor-gradiente-nav-inicial), var(--cor-gradiente-nav-final));
  422. border-radius: 20px;
  423. font-size: 0;
  424. width: 100%;
  425. max-width: 450px;
  426. height: auto;
  427. position: sticky;
  428. margin-top: 20px;
  429. margin-bottom: 10px;
  430. display: flex;
  431. justify-content: space-around;
  432. align-items: center;
  433. }
  435. nav span {
  436. line-height: 45px;
  437. height: 100%;
  438. position: relative;
  439. z-index: 1;
  440. text-decoration: none;
  441. text-align: center;
  442. color: white !important;
  443. cursor: alias;
  444. }
  446. nav span svg {
  447. fill: var(--cor-icon-config);
  449. }
  451. nav .animation {
  452. position: absolute;
  453. height: 100%;
  454. top: 0;
  455. z-index: 0;
  456. transition: all .5s ease 0s;
  457. border-radius: 8px;
  458. }
  460. a:nth-child(1) {
  461. width: 30%;
  462. }
  464. a:nth-child(2) {
  465. width: 30%;
  466. }
  468. a:nth-child(3) {
  469. width: 40%;
  470. }
  472. nav .start-home,
  473. a:nth-child(1):hover~.animation {
  474. width: 30%;
  475. left: 0;
  476. background-color: #1212123f;
  477. border-radius: 20px;
  478. }
  480. nav .start-about,
  481. a:nth-child(2):hover~.animation {
  482. width: 30%;
  483. ;
  484. left: 30%;
  485. background-color: #1212123f;
  486. border-radius: 20px;
  487. }
  489. nav .start-blog,
  490. a:nth-child(3):hover~.animation {
  491. width: 40%;
  492. left: 60%;
  493. background-color: #1212123f;
  494. border-radius: 20px;
  495. }
  497. body {
  498. font-size: 12px;
  499. font-family: sans-serif;
  500. background: color #1212123f;
  501. }
  503. @media (min-width: 768px) {
  505. .container,
  506. .container-md,
  507. .container-sm {
  508. max-width: 100%;
  509. }
  510. }
  512. .rede {
  513. color: #ff0000;
  514. }
  516. .iplocal {
  517. color: #ffffff;
  518. }
  520. .containerlocal {
  521. background: #0808083f;
  522. border-radius: 20px;
  523. border: 1px solid #1e1e1e !important;
  524. padding: 15px !important;
  525. width: 95%;
  526. max-width: 450px;
  527. height: initial;
  528. position: absolute;
  529. margin-top: 700px;
  530. margin-bottom: -66px;
  531. }
  534. .hidden {
  535. display: none;
  536. }
  537. </style>
  538. </head>
  540. <body>
  543. <div class="containerlocal">
  544. <span class="font-semibold text-xs mr-2"
  545. style="color: #28FF55;"">📢 IP Local da sua operadora:</span><span class=" rede font-semibold text-xs mr-2"
  546. id="name">REDE</span> <span class="iplocal font-semibold text-xs" id="ip">127.0.0.1</span>
  547. </div>
  549. <div class="container">
  552. <div id="year" class="year"></div>
  554. <div id="countdown" class="countdown">
  556. <div class="time">
  558. <h2 id=" "></h2>
  560. <small></small>
  562. </div>
  564. <div class="time">
  566. <h2 id=" "></h2>
  568. <small></small>
  569. </div>
  571. <div class="time">
  573. <h2 id=" "></h2>
  575. <small></small>
  577. </div>
  579. <div class="time">
  581. <h2 id=" "></h2>
  583. <small></small>
  585. </div>
  588. </div>
  592. <script>
  593. const nextYearContainer = document.getElementById('year');
  594. const daysContainer = document.getElementById('days');
  595. const housContainer = document.getElementById('hours');
  596. const minutesContainer = document.getElementById('minutes');
  597. const secondsContainer = document.getElementById('seconds');
  598. const loading = document.getElementById('loading');
  599. const countdown = document.getElementById('countdown');
  601. const nextYear = new Date().getFullYear() + 1;
  602. const newYearTime = new Date(`January 01 ${nextYear} 00:00:00`);
  604. nextYearContainer.textContent = nextYear;
  606. const getTimeUnit = unit => unit < 10 ? '0' + unit : unit;
  607. <div class="time">
  609. <h2 id=" ">00</h2>
  611. <small>segundos</small>
  613. </div>
  616. </div>
  618. <img src="./img/spinner.gif" alt="Carregando..." id="loading" class="loading" />
  620. <script>
  621. const nextYearContainer = document.getElementById('year');
  622. const daysContainer = document.getElementById('days');
  623. const housContainer = document.getElementById('hours');
  624. const minutesContainer = document.getElementById('minutes');
  625. const secondsContainer = document.getElementById('seconds');
  626. const loading = document.getElementById('loading');
  627. const countdown = document.getElementById('countdown');
  629. const nextYear = new Date().getFullYear() + 1;
  630. const newYearTime = new Date(`January 01 ${nextYear} 00:00:00`);
  632. nextYearContainer.textContent = nextYear;
  634. const getTimeUnit = unit => unit < 10 ? '0' + unit : unit;
  636. const insertCountdownValues = ({ days, hours, minutes, seconds }) => {
  637. daysContainer.textContent = getTimeUnit(days);
  638. housContainer.textContent = getTimeUnit(hours)
  639. minutesContainer.textContent = getTimeUnit(minutes)
  640. secondsContainer.textContent = getTimeUnit(seconds)
  641. }
  643. const updateCountdown = () => {
  644. const currentTime = new Date();
  645. const difference = newYearTime - currentTime;
  646. const days = Math.floor(difference / 1000 / 60 / 60 / 24);
  647. const hours = Math.floor(difference / 1000 / 60 / 60) % 24;
  648. const minutes = Math.floor(difference / 1000 / 60) % 60;
  649. const seconds = Math.floor(difference / 1000) % 60;
  651. insertCountdownValues({ days, hours, minutes, seconds });
  653. }
  655. const handleCountdownDisplay = () => {
  656. loading.remove();
  657. countdown.style.display = 'flex';
  658. }
  660. setTimeout(handleCountdownDisplay, 1000)
  662. setInterval(updateCountdown, 1000);
  663. const insertCountdownValues = ({ days, hours, minutes, seconds }) => {
  664. daysContainer.textContent = getTimeUnit(days);
  665. housContainer.textContent = getTimeUnit(hours)
  666. minutesContainer.textContent = getTimeUnit(minutes)
  667. secondsContainer.textContent = getTimeUnit(seconds)
  668. }
  670. const updateCountdown = () => {
  671. const currentTime = new Date();
  672. const difference = newYearTime - currentTime;
  673. const days = Math.floor(difference / 1000 / 60 / 60 / 24);
  674. const hours = Math.floor(difference / 1000 / 60 / 60) % 24;
  675. const minutes = Math.floor(difference / 1000 / 60) % 60;
  676. const seconds = Math.floor(difference / 1000) % 60;
  678. insertCountdownValues({ days, hours, minutes, seconds });
  680. }
  682. const handleCountdownDisplay = () => {
  683. loading.remove();
  684. countdown.style.display = 'flex';
  685. }
  687. setTimeout(handleCountdownDisplay, 1000)
  689. setInterval(updateCountdown, 1000);
  691. </script>
  694. <div class="message" id="mensagem">Texto original aqui.</div>
  695. <script>
  696. document.getElementById('mensagem').textContent = getComputedStyle(document.documentElement).getPropertyValue('--textonovo');
  697. </script>
  698. <div class="card border-0 p-2 shadow mb-3 w-100">
  700. <img class="logo">
  701. <script>
  702. document.documentElement.style.setProperty('--logo-img-url',);
  703. </script>
  706. <div class="input-group mb-2 shadow" id="config-area">
  707. <input class="form-control" type="text" placeholder="CONFIGURAÇÃO" readonly title="configurações"
  708. id="config" style="background-color: #0808083f;" />
  709. <span class="input-group-text me-2">
  710. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
  711. class="bi bi:bar-chart" viewBox="0 0 16 16">
  712. <path
  713. d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z" />
  714. </svg>
  715. </span>
  716. </div>
  717. <div class="input-group input mb-2 shadow">
  718. <span class="input-group-text">
  719. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
  720. class="bi bi:file-person" viewBox="0 0 16 16">
  721. <path
  722. d="M12 1a1 1 0 0 1 1 1v10.755S12 11 8 11s-5 1.755-5 1.755V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z" />
  723. <path d="M8 10a3 3 0 1 0 0-6a3 3 0 0 0 0 6z" />
  724. </g>
  725. </svg>
  726. </span>
  727. <input class="form-control" type="text" placeholder="usuario" id="username"
  728. style="background-color: #0808083f;" />
  729. </div>
  730. <div class="input-group input mb-2 shadow">
  731. <span class="input-group-text">
  732. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
  733. class="bi bi:file-earmark-lock" viewBox="0 0 16 16">
  734. <path
  735. d="M10 7v1.076c.54.166 1 .597 1 1.224v2.4c0 .816-.781 1.3-1.5 1.3h-3c-.719 0-1.5-.484-1.5-1.3V9.3c0-.627.46-1.058 1-1.224V7a2 2 0 1 1 4 0zM7 7v1h2V7a1 1 0 0 0-2 0zM6 9.3v2.4c0 .042.02.107.105.175A.637.637 0 0 0 6.5 12h3a.64.64 0 0 0 .395-.125c.085-.068.105-.133.105-.175V9.3c0-.042-.02-.107-.105-.175A.637.637 0 0 0 9.5 9h-3a.637.637 0 0 0-.395.125C6.02 9.193 6 9.258 6 9.3z" />
  736. <path
  737. d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z" />
  738. </g>
  739. </svg>
  740. </span>
  741. <input class="form-control" type="password" placeholder="senha" id="password"
  742. style="background-color: #0808083f;" />
  743. <span class="input-group-text me-2"
  744. onclick="password.type==`text`?password.type = `password`:password.type = `text`">
  745. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
  746. viewBox="0 0 16 16">
  747. <path
  748. d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
  749. <path
  750. d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
  751. </svg>
  752. </span>
  753. </div>
  754. <div class="input-group input mb-2 shadow">
  755. <span class="input-group-text">
  756. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-key"
  757. viewBox="0 0 16 16">
  758. <path
  759. d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z" />
  760. <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
  761. </svg>
  762. </span>
  763. <input class="form-control" type="text" placeholder="V2ray UUID" id="uuid"
  764. style="background: #0808083f;" />
  765. <span class="input-group-text me-2"
  766. onclick="uuid.type==`text`?uuid.type = `password`:uuid.type = `text`">
  767. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
  768. viewBox="0 0 16 16">
  769. <path
  770. d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
  771. <path
  772. d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
  773. </svg>
  774. </span>
  775. </div>
  776. <button class="btn btn-dark w-100 shadow" id="start-stop">INICIAR</button>
  777. <nav>
  779. <span id="sync" onclick="DtStartAppUpdate.execute()" class="fi fi-rr-refresh">
  780. <?xml version="1.0" encoding="UTF-8"?>
  781. <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="24" height="24">
  782. <path
  783. d="M12,2a10.032,10.032,0,0,1,7.122,3H16a1,1,0,0,0-1,1h0a1,1,0,0,0,1,1h4.143A1.858,1.858,0,0,0,22,5.143V1a1,1,0,0,0-1-1h0a1,1,0,0,0-1,1V3.078A11.981,11.981,0,0,0,.05,10.9a1.007,1.007,0,0,0,1,1.1h0a.982.982,0,0,0,.989-.878A10.014,10.014,0,0,1,12,2Z" />
  784. <path
  785. d="M22.951,12a.982.982,0,0,0-.989.878A9.986,9.986,0,0,1,4.878,19H8a1,1,0,0,0,1-1H9a1,1,0,0,0-1-1H3.857A1.856,1.856,0,0,0,2,18.857V23a1,1,0,0,0,1,1H3a1,1,0,0,0,1-1V20.922A11.981,11.981,0,0,0,23.95,13.1a1.007,1.007,0,0,0-1-1.1Z" />
  786. </svg>
  787. </span>
  791. <span id="logger" class="fi fi-rs-clipboard-list">
  792. <?xml version="1.0" encoding="UTF-8"?>
  793. <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="24" height="24">
  795. <path
  796. d="M11,12h6v2h-6v-2ZM21,2V21c0,1.654-1.346,3-3,3H6c-1.654,0-3-1.346-3-3V2h5.171c.413-1.164,1.525-2,2.829-2h2c1.304,0,2.416,.836,2.829,2h5.171Zm-2,2h-5v-1c0-.552-.449-1-1-1h-2c-.551,0-1,.448-1,1v1H5V21c0,.552,.449,1,1,1h12c.551,0,1-.448,1-1V4Zm-8,6h6v-2h-6v2Zm0,8h6v-2h-6v2ZM7,10h2v-2h-2v2Zm0,4h2v-2h-2v2Zm0,4h2v-2h-2v2Z" />
  797. </svg>
  798. </span>
  800. <span aria-hidden="true" onclick="ToolsModal.show()" class="fi fi-rr-settings">
  801. <?xml version="1.0" encoding="UTF-8"?>
  802. <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24"
  803. width="24" height="24">
  804. <path d="M12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z" />
  805. <path
  806. d="M21.294,13.9l-.444-.256a9.1,9.1,0,0,0,0-3.29l.444-.256a3,3,0,1,0-3-5.2l-.445.257A8.977,8.977,0,0,0,15,3.513V3A3,3,0,0,0,9,3v.513A8.977,8.977,0,0,0,6.152,5.159L5.705,4.9a3,3,0,0,0-3,5.2l.444.256a9.1,9.1,0,0,0,0,3.29l-.444.256a3,3,0,1,0,3,5.2l.445-.257A8.977,8.977,0,0,0,9,20.487V21a3,3,0,0,0,6,0v-.513a8.977,8.977,0,0,0,2.848-1.646l.447.258a3,3,0,0,0,3-5.2Zm-2.548-3.776a7.048,7.048,0,0,1,0,3.75,1,1,0,0,0,.464,1.133l1.084.626a1,1,0,0,1-1,1.733l-1.086-.628a1,1,0,0,0-1.215.165,6.984,6.984,0,0,1-3.243,1.875,1,1,0,0,0-.751.969V21a1,1,0,0,1-2,0V19.748a1,1,0,0,0-.751-.969A6.984,6.984,0,0,1,7.006,16.9a1,1,0,0,0-1.215-.165l-1.084.627a1,1,0,1,1-1-1.732l1.084-.626a1,1,0,0,0,.464-1.133,7.048,7.048,0,0,1,0-3.75A1,1,0,0,0,4.79,8.992L3.706,8.366a1,1,0,0,1,1-1.733l1.086.628A1,1,0,0,0,7.006,7.1a6.984,6.984,0,0,1,3.243-1.875A1,1,0,0,0,11,4.252V3a1,1,0,0,1,2,0V4.252a1,1,0,0,0,.751.969A6.984,6.984,0,0,1,16.994,7.1a1,1,0,0,0,1.215.165l1.084-.627a1,1,0,1,1,1,1.732l-1.084.626A1,1,0,0,0,18.746,10.125Z" />
  807. </svg>
  808. </span>
  810. </nav>
  811. </div>
  813. <div class="card my-3 w-100 text-center border-0 p-2 shadow text-light fs-5 text-uppercase fw-bold" id="state"
  814. style="padding: 5px !important; font-size: 15px !important;">
  815. </div>
  816. <div class="modal fade" id="checkUserModal">
  817. <div class="modal-dialog modal-dialog-centered" role="document">
  818. <div class="modal-content rounded-3 shadow">
  819. <div class="modal-header border-bottom-0 pb-0">
  820. <h1 class="modal-title fs-5 chk-title text-light"></h1>
  821. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  822. aria-label="Close"></button>
  823. </div>
  824. <div class="modal-body text-center">
  825. <p class="fs-5 mb-0 chk-message text-light"></p>
  826. </div>
  827. </div>
  828. </div>
  829. </div>
  830. <div class="modal fade" id="errorModal">
  831. <div class="modal-dialog modal-dialog-centered" role="document">
  832. <div class="modal-content rounded-3 shadow">
  833. <div class="modal-header border-bottom-0 pb-0">
  834. <h1 class="modal-title fs-5 err-title text-light"></h1>
  835. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  836. aria-label="Close"></button>
  837. </div>
  838. <div class="modal-body text-center">
  839. <p class="fs-5 mb-0 err-message text-light"></p>
  840. </div>
  841. </div>
  842. </div>
  843. </div>
  844. <div class="modal fade" id="loggerModal">
  845. <div class="modal-dialog modal-dialog-centered" role="document">
  846. <div class="modal-content rounded-3 shadow">
  847. <div class="modal-body p-1 text-center">
  848. <ul class="list-group bg-transparent overflow-y-auto logger-content" style="max-height: 600px;">
  849. </ul>
  850. </div>
  851. <div class="modal-footer flex-nowrap p-0">
  852. <button type="button" class="btn btn-lg btn-dark text-light w-100 clear-logger">LIMPAR</button>
  853. <button type="button" class="btn btn-lg btn-dark text-light w-100"
  854. data-bs-dismiss="modal">FECHAR</button>
  855. </div>
  856. </div>
  857. </div>
  858. </div>
  859. <div class="tool webm modal fade" index="-1" id="ToolsModal">
  860. <div class="modal-dialog modal-dialog-centered" role="document">
  861. <div class="modal-content">
  862. <div class="tool modal-header">
  863. <h5 class="modal-title text_config">Configurações do aplicativo</h5>
  864. </div>
  865. <div class="modal-body">
  866. <button class="tool-bt rounded-2xl text-white" onclick="DtStartApnActivity.execute()"><i
  867. class="info2 bi bi-wifi mr-2"></i>Alterar protocolo de APN</button>
  868. </div>
  869. <div class="modal-body">
  870. <button class="tool-bt rounded-2xl text-white"
  871. onclick="DtIgnoreBatteryOptimizations.execute()"><i
  872. class="info2 bi bi-battery-full mr-2"></i>Otimizar Bateria</button>
  873. </div>
  876. <div class="modal-body">
  877. <button class="tool-bt rounded-2xl text-white" id="btnHotSpot"><i
  878. class="info2 bi bi-trash3 mr-2"></i>Compartilhar Internet</button>
  879. </div>
  881. <div class="modal-body">
  882. <button class="tool-bt rounded-2xl text-white" onclick="DtCleanApp.execute()"><i
  883. class="info2 bi bi-trash3 mr-2"></i>Limpar cachê e dados</button>
  884. </div>
  886. <div class="tool modal-footer">
  887. <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
  888. style="background-color: var(--btn-modal);">FECHAR</button>
  890. </div>
  891. </div>
  892. </div>
  893. </div>
  894. <div class="modal fade" id="configModal">
  895. <div class="modal-dialog modal-dialog-centered" role="document">
  896. <div class="modal-content rounded-3 shadow">
  897. <div class="modal-header border-bottom-0 pb-0">
  898. <h1 class="modal-title fs-5 text-white">CONFIGURAÇÕES</h1>
  899. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  900. aria-label="Close"></button>
  901. </div>
  902. <div class="modal-body p-1 text-center">
  903. <ul class="list-group bg-transparent overflow-y-auto config-body" style="max-height: 600px;">
  904. <li class="list-group-item bg-transparent text-white border-0">
  905. <p>CATEGORIA</p>
  906. <ul class="list-group bg-transparent overflow-y-auto text-start">
  907. <li
  908. class="list-group-item d-flex bg-transparent text-white border-0 border-bottom rounded-0">
  909. <img src="https://cdn-icons-png.flaticon.com/512/3686/3686811.png" width="40"
  910. height="40">
  911. <div class="d-flex flex-column ms-2 w-100">
  912. <span>CONFIG 01</span>
  913. <span>DESC 01</span>
  914. </div>
  915. <div class="d-flex flex-column ms-2 w-100">
  916. <span class="text-end">CONFIG_MODE</span>
  917. </div>
  918. </li>
  919. </ul>
  920. </li>
  921. </ul>
  922. </div>
  923. </div>
  924. </div>
  925. </div>
  926. <div class="modal fade" id="RenovarModal">
  927. <div class="modal-dialog modal-dialog-centered" role="document">
  928. <div class="modal-content rounded-3 shadow">
  929. <div class="modal-header border-bottom-0 py-3">
  930. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  931. aria-label="Close"></button>
  932. </div>
  933. <div class="modal-body ratio rounded-bottom-3" style="height: 600px;">
  934. <div class="spinner d-flex w-100 h-100 align-items-center justify-content-center">
  935. <div class="spinner-border text-light p-5" role="status">
  936. <span class="visually-hidden">Loading...</span>
  937. </div>
  938. </div>
  939. <iframe class="rounded-bottom-3" id="RenovarFrame"></iframe>
  940. </div>
  941. </div>
  942. </div>
  943. </div>
  944. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
  945. <script>
  946. const startHotSpot = () => {
  947. DtStartHotSpotService.execute();
  948. txtbtn.textContent = 'HOTSPOT';
  949. }
  951. const stopHotSpot = () => {
  952. DtStopHotSpotService.execute();
  953. txtbtn.textContent = 'HOTSPOT';
  954. }
  956. const toggleHotSpot = () => {
  957. const hotSpotStatus = window?.DtGetStatusHotSpotService?.execute() ?? 'STOPPED';
  958. hotSpotStatus == 'RUNNING' ? stopHotSpot() : startHotSpot();
  959. }
  961. const btnHotSpot = document.querySelector("#btnHotSpot");
  962. btnHotSpot.addEventListener('click', toggleHotSpot);
  964. const hotSpotStatus = window?.DtGetStatusHotSpotService?.execute() ?? 'STOPPED';
  965. if (hotSpotStatus == 'RUNNING') {
  966. txtbtn.textContent = 'HOTSPOT';
  967. }
  969. </script>
  971. <script>
  972. class AndroidMock {
  973. static getLocalIP() {
  974. return '192.168.0.1';
  975. }
  977. static getConfig() {
  978. return JSON.stringify({
  979. urlCheckUser: 'URLAQUI'
  980. });
  981. }
  983. static getNetworkName() {
  984. return 'REDE';
  985. }
  987. static openRadioInfo() {
  988. console.log('openRadioInfo');
  989. }
  990. }
  991. </script>
  993. <script>
  994. function showLocalIP(android) {
  995. console.log(android.getNetworkName());
  996. document.getElementById('name').innerHTML = ' ' + android.getNetworkName() + ':';
  997. document.getElementById('ip').innerHTML = android.getLocalIP();
  999. setInterval(() => {
  1000. document.getElementById('name').innerHTML =
  1001. ' ' + android.getNetworkName() + ':';
  1002. document.getElementById('ip').innerHTML = android.getLocalIP();
  1003. }, 2000)
  1004. }
  1006. window.onload = function () {
  1007. const android = window.Android || AndroidMock;
  1008. showLocalIP(android);
  1009. }
  1011. function mostrar(id) {
  1012. if (document.getElementById(id).style.display !== "none") {
  1013. document.getElementById(id).style.display = "none";
  1014. return;
  1015. }
  1016. Array.from(document.getElementsByClassName("hidden")).forEach(
  1017. div => (div.style.display = "none")
  1018. );
  1019. document.getElementById(id).style.display = "block";
  1020. }
  1022. </script>
  1024. <script>
  1025. const configArea = document.querySelector('#config-area')
  1026. const config = document.querySelector('#config')
  1027. const username = document.querySelector('#username')
  1028. const password = document.querySelector('#password')
  1029. const uuid = document.querySelector('#uuid')
  1030. const logger = document.querySelector('#logger')
  1032. const networkStatus = document.querySelector('#section.local-ip')
  1034. const startStopVpn = document.querySelector('#start-stop')
  1035. const stateStatus = document.querySelector('#state')
  1037. const loggerModal = new bootstrap.Modal(document.querySelector('#loggerModal'))
  1038. const checkUserModal = new bootstrap.Modal(document.querySelector('#checkUserModal'))
  1039. const errorModal = new bootstrap.Modal(document.querySelector('#errorModal'))
  1040. const configModal = new bootstrap.Modal(document.querySelector('#configModal'))
  1042. const ToolsModal = new bootstrap.Modal(document.querySelector('#ToolsModal'))
  1044. const clearLogger = document.querySelector('.clear-logger')
  1046. const RenovarModal = new bootstrap.Modal(document.querySelector('#RenovarModal'))
  1048. configArea.addEventListener('click', e => showConfigsModal())
  1049. username.addEventListener('input', e => DtUsername.set(e.target.value))
  1050. password.addEventListener('input', e => DtPassword.set(e.target.value))
  1051. uuid.addEventListener('input', e => DtUuid.set(e.target.value))
  1052. logger.addEventListener('click', e => loggerModal.show())
  1054. startStopVpn.addEventListener('click', (e) => {
  1055. if (DtGetVpnState.execute() != 'DISCONNECTED') {
  1056. DtExecuteVpnStop.execute()
  1057. } else {
  1058. DtExecuteVpnStart.execute()
  1059. }
  1060. })
  1061. clearLogger.addEventListener('click', () => DtClearLogs.execute())
  1063. RenovarModal._element.addEventListener('shown.bs.modal', () => {
  1064. const iframe = document.querySelector('#RenovarFrame');
  1065. if (!iframe.src) {
  1066. iframe.src = 'https://painel.plenonet.com.br/renovar.php'
  1067. iframe.addEventListener('load', () => {
  1068. mp3Modal._element.querySelector('.spinner').classList.add('d-none')
  1069. })
  1070. }
  1071. })
  1072. RenovarModal._element.addEventListener('hide.bs.modal', () => {
  1073. const iframe = document.querySelector('#RenovarFrame');
  1074. iframe.src = '';
  1075. })
  1077. Object.defineProperty(String.prototype, 't', {
  1078. value: function t() {
  1079. return window?.DtTranslateText?.execute('' + this) ?? '' + this
  1080. },
  1081. writable: true,
  1082. configurable: true,
  1083. })
  1085. const dtConfigClickListener = () => {
  1086. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{ "auth": {}, "mode": "v2ray" }`)
  1087. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  1088. config.placeholder = data.name ?? 'LBL_CHOOSE_CONFIG'.t()
  1089. username.parentElement.style.display = !data?.auth?.username && !isV2ray ? 'flex' : 'none';
  1090. password.parentElement.style.display = !data?.auth?.password && !isV2ray ? 'flex' : 'none';
  1091. uuid.parentElement.style.display = !data?.auth?.v2ray_uuid && isV2ray ? 'flex' : 'none';
  1092. }
  1094. const dtVpnStateListener = state => {
  1095. const isRunning = state != 'DISCONNECTED';
  1097. stateStatus.innerHTML = ('LBL_STATE_' + state).t()
  1098. startStopVpn.innerHTML = isRunning ? 'LBL_BTN_STOP'.t() : 'LBL_BTN_START'.t()
  1100. if (isRunning) {
  1101. username.setAttribute('readonly', 'true')
  1102. password.setAttribute('readonly', 'true')
  1103. } else {
  1104. username.removeAttribute('readonly')
  1105. password.removeAttribute('readonly')
  1106. }
  1108. if (state == 'CONNECTING') dtShowSuccessToastListener('Conectando...')
  1109. }
  1111. const dtCheckUserStartedListener = () => {
  1112. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{}`)
  1113. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  1114. if (isV2ray) return;
  1115. const html = `
  1116. <div class="d-flex justify-content-center">
  1117. <div class="spinner-border p-5" role="status">
  1118. <span class="visually-hidden">Loading...</span>
  1119. </div>
  1120. </div>
  1121. `
  1123. checkUserModal._element.querySelector('.chk-title').textContent = 'CHECK USER'
  1124. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  1125. checkUserModal.show()
  1126. }
  1128. function isBeforeExpiration(expirationDays, daysBefore) {
  1129. return expirationDays <= daysBefore;
  1130. }
  1132. const dtCheckUserModelListener = model => {
  1133. const data = JSON.parse(model ?? `{"username": "test"}`);
  1135. const html = `
  1136. <div class="d-flex flex-column text-white">
  1137. <span>👤Nome de usuario: ${data.username}</span>
  1138. <span>📆Expira em: ${data.expiration_date}</span>
  1139. <span>📆Dias restantes: ${data.expiration_days}</span>
  1140. <span>🚫Conexoes: ${data.count_connections}|${data.limit_connections}</span>
  1141. ${isBeforeExpiration(data.expiration_days, 3) ? '<span><center>🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨</center><span><span><center>⚠️Faltando 3 dias para o expirar o usuário⚠️</center></span>🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨</span></span>' : ''}
  1142. ${isBeforeExpiration(data.expiration_days, 2) ? '<span><span><span><center>⚠️Faltando 2 dias para o expirar o usuário⚠️</center></span><center>🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨</center></span></span>' : ''}
  1143. ${isBeforeExpiration(data.expiration_days, 1) ? '<span><span><span><center>⚠️Faltando 1 dias para o expirar o usuário⚠️</center></span><center>🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨</center></span></span>' : ''}
  1144. </div>
  1145. `;
  1147. checkUserModal._element.querySelector('.chk-title').textContent = '📆 Olá, ' + data.username.toUpperCase() + '👤';
  1148. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  1149. checkUserModal.show();
  1150. }
  1157. const dtMessageErrorListener = message => {
  1158. const data = JSON.parse(message)
  1159. errorModal._element.querySelector('.err-title').textContent = data.title;
  1160. errorModal._element.querySelector('.err-message').innerHTML = data.content;
  1161. errorModal.show()
  1162. }
  1164. const dtOnNewLogListener = () => {
  1165. const mock = [];
  1166. for (let i = 0; i < 30; i++) {
  1167. mock.push({ 'TIME': 'MESSAGE ' + i })
  1168. }
  1170. const log = window?.DtGetLogs?.execute() || JSON.stringify(mock)
  1171. const data = JSON.parse(log)
  1173. let content = '';
  1174. data.forEach(item => {
  1175. content += '<li class="list-group-item fs-6 bg-transparent text-white p-0 border-0 text-start ms-2 text-wrap">';
  1176. content += Object.keys(item)[0] + " " + item[Object.keys(item)]
  1177. content += '</li>';
  1178. })
  1180. loggerModal._element.querySelector('.logger-content').innerHTML = content;
  1181. const listGroup = loggerModal._element.querySelector('.list-group')
  1182. listGroup.scrollTo(0, listGroup.scrollHeight)
  1183. }
  1185. const dtVpnStartedSuccessListener = () => dtShowSuccessToastListener('Conectado com sucesso')
  1187. const dtVpnStoppedSuccessListener = () => dtShowSuccessToastListener('Desconectado com sucesso')
  1189. const dtShowSuccessToastListener = text => {
  1190. Toastify({
  1191. text: text,
  1192. close: true,
  1193. style: {
  1194. background: 'linear-gradient(to right, #00b09b, #96c93d)',
  1195. marginTop: '35px',
  1196. }
  1197. }).showToast()
  1198. }
  1200. const dtShowErrorToastListener = text => {
  1201. Toastify({
  1202. text: text,
  1203. close: true,
  1204. style: {
  1205. background: 'linear-gradient(to right, #ff5c33, #e69900)',
  1206. marginTop: '35px',
  1207. }
  1208. }).showToast()
  1209. }
  1211. const showConfigsModal = () => {
  1212. 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"}]}]'
  1213. const data = JSON.parse(window?.DtGetConfigs?.execute() || mock)
  1215. data.sort((a, b) => a.sorter - b.sorter)
  1216. data.forEach(item => item.items.sort((a, b) => a.sorter - b.sorter))
  1218. const body = configModal._element.querySelector('.config-body')
  1219. body.innerHTML = ''
  1221. data.forEach(category => {
  1222. const categoryElement = document.createElement('li')
  1223. categoryElement.classList.add('list-group-item', 'bg-transparent', 'text-white', 'border-0', 'mb-1', 'rounded-1', 'px-1')
  1224. categoryElement.innerHTML = `<span class="fw-bold btn-dark w-100 d-block p-1 rounded-1 mb-1">${category.name}</span>`
  1226. const configUlElement = document.createElement('ul')
  1227. configUlElement.classList.add('list-group', 'bg-transparent', 'overflow-y-auto')
  1229. category.items.forEach(item => {
  1230. const configElement = document.createElement('li')
  1231. configElement.classList.add('list-group-item', 'd-flex', 'btn-dark', 'text-white', 'border-0', 'rounded-2', 'px-1', 'py-2', 'mb-1')
  1232. configElement.innerHTML = `
  1233. <img src="${item.icon}" width="40" height="40">
  1234. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  1235. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">${item.name}</span>
  1236. <span class="fst-italic fw-bold" style="font-size: 0.7rem;">${item.description || ''}</span>
  1237. </div>
  1238. <div class="d-flex flex-column ms-2">
  1239. <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">${item.mode}</span>
  1240. </div>
  1241. </li>
  1242. `
  1243. configElement.addEventListener('click', e => {
  1244. window?.DtSetConfig?.execute(item.id)
  1245. configModal.hide()
  1246. })
  1247. configUlElement.appendChild(configElement)
  1248. })
  1250. categoryElement.appendChild(configUlElement)
  1251. body.appendChild(categoryElement)
  1252. })
  1254. configModal.show()
  1255. }
  1257. username.value = window?.DtUsername?.get() ?? ''
  1258. password.value = window?.DtPassword?.get() ?? ''
  1259. uuid.value = window?.DtUuid?.get() ?? ''
  1261. username.placeholder = 'LBL_USERNAME'.t()
  1262. password.placeholder = 'LBL_PASSWORD'.t()
  1263. uuid.placeholder = 'LBL_UUID'.t()
  1265. dtOnNewLogListener()
  1266. dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')
  1267. dtConfigClickListener()
  1269. console.log('ODAIR.Dev!🚀')
  1270. </script>
  1272. </body>
  1274. </html>
comments powered by Disqus