Tema dt mod

SUBMITTED BY: Buganet

DATE: Aug. 1, 2022, 9:15 p.m.

UPDATED: May 27, 2024, 11:20 a.m.

FORMAT: Text only

SIZE: 52.4 kB

History Raw Download

HITS: 2405

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(https://i.ibb.co/TmY8kj2/5a1cede541bb76-5518196215118453492692.png);
  36. /* Cria uma sombra na LOGO */
  37. /*
  38. --shadow1-offset-x: -5px;
  39. --shadow1-offset-y: 8px;
  40. --shadow1-blur: 3px;
  41. --shadow1-color: black;
  42. /*
  44. /*------------------------------------------------------------------------*/
  47. /*-------------------fundo-----------------------------*/
  51. --background-img: url(https://i.ibb.co/K9vFWrG/547255-adapted-1080x2340.jpg);
  55. /*Quadrados Coloridos*/
  57. /*
  59. --cor1: #009c3b;
  60. --cor2: #ffdf00 ;
  61. --cor3: #002776 ;
  62. --cor4: #ffffff00;
  64. /*
  66. /* Valor padrão para o desfoque dos quadrados */
  67. --blur-amount: 15px;
  68. /*------------------------------------------------------------------------*/
  71. /*Ondas Coloridas*/
  73. --onda1:#009c3b ;
  74. --onda2: #ffdf00;
  75. --onda3: #002776;
  76. /*--cor-background: #000000;*/
  78. /*------------------------------------------------------------------------*/
  85. /* Valor padrão para o desfoque do vidro */
  86. --blur-amount2: 5px;
  87. --vidro-color: rgba(0, 0, 0, 0.158);
  89. /* Cria uma sombra no Vidro */
  91. /*
  92. --shadow-offset-x: -5px;
  93. --shadow-offset-y: 8px;
  94. --shadow-blur: 3px;
  95. --shadow-color: black;
  97. */
  99. /*------------------------------------------------------------------------*/
  102. /*Cores Dos Botao de iniciar*/
  103. --cor-gradiente-nav-inicial: #009c3c44;
  104. --cor-gradiente-nav-final: #ffdd0050;
  105. --cor-icon-config: #ffffff;
  107. /*------------------------------------------------------------------------*/
  108. /*Cores Dos Botao de conectar*/
  109. --cor-gradiente-btstart-incial: #009c3c44;
  110. --cor-gradiente-btstart-final: #ffdd0050;
  112. /*------------------------------------------------------------------------*/
  113. /*Cores Dos icones e TexTo*/
  114. --text-color: #ffffff;
  115. --icon-color: #ffffff;
  116. /*------------------------------------------------------------------------*/
  117. /*Cores Dos config*/
  118. --cor-text-config: #ffffff;
  119. --cor-gradiente-config-incial: #009c3c44;
  120. --cor-gradiente-config-final: #ffdd0050;
  122. /*------------------------------------------------------------------------EDITE SOMENTE AQUI FINALLLL-----------------------------------------------------------------------------*/
  125. --input-border-radius: 5px;
  126. --input-background-color: #0a091a55;
  128. --card-border-radius: 5px;
  129. --card-background-color: #0b092868;
  131. --btn-background-color: #0a091a55;
  132. --btn-border-radius: 15px;
  134. --modal-background-color: #0b092868;
  137. }
  139. * {
  140. margin: 0;
  141. padding: 0;
  142. box-sizing: border-box;
  143. font-family: 'Roboto', sans-serif;
  144. }
  146. body {
  147. height: 100vh;
  148. display: flex;
  149. flex-direction: column;
  150. align-items: center;
  151. justify-content: center;
  152. background-repeat: no-repeat;
  153. background-size: cover;
  154. background-color: var(--cor-background);
  155. }
  158. .circles {
  159. position: absolute;
  160. top: 0;
  161. left: 0;
  162. width: 100%;
  163. height: 100%;
  164. overflow: hidden;
  165. }
  167. .circles li {
  168. position: absolute;
  169. display: block;
  170. list-style: none;
  171. width: 20px;
  172. height: 20px;
  173. background-color: var(--cor1);
  174. background-image: linear-gradient(225deg, var(--cor2) 10%, var(--cor3) 50%, var(--cor4) 100%);
  175. backdrop-filter: blur(15px);
  176. animation: animate 5s linear infinite;
  177. bottom: -150px;
  178. }
  180. .circles li:nth-child(1) {
  181. left: 25%;
  182. width: 80px;
  183. height: 80px;
  184. animation-delay: 0s;
  185. }
  187. .circles li:nth-child(2) {
  188. left: 10%;
  189. width: 20px;
  190. height: 20px;
  191. animation-delay: 2s;
  192. animation-duration: 12s;
  193. }
  195. .circles li:nth-child(3) {
  196. left: 70%;
  197. width: 20px;
  198. height: 20px;
  199. animation-delay: 4s;
  200. }
  202. .circles li:nth-child(4) {
  203. left: 40%;
  204. width: 60px;
  205. height: 60px;
  206. animation-delay: 0s;
  207. animation-duration: 18s;
  208. }
  210. .circles li:nth-child(5) {
  211. left: 65%;
  212. width: 20px;
  213. height: 20px;
  214. animation-delay: 0s;
  215. }
  217. .circles li:nth-child(6) {
  218. left: 75%;
  219. width: 110px;
  220. height: 110px;
  221. animation-delay: 3s;
  222. }
  224. .circles li:nth-child(7) {
  225. left: 35%;
  226. width: 150px;
  227. height: 150px;
  228. animation-delay: 7s;
  229. }
  231. .circles li:nth-child(8) {
  232. left: 50%;
  233. width: 25px;
  234. height: 25px;
  235. animation-delay: 15s;
  236. animation-duration: 45s;
  237. }
  239. .circles li:nth-child(9) {
  240. left: 20%;
  241. width: 15px;
  242. height: 15px;
  243. animation-delay: 2s;
  244. animation-duration: 35s;
  245. }
  247. .circles li:nth-child(10) {
  248. left: 85%;
  249. width: 150px;
  250. height: 150px;
  251. animation-delay: 0s;
  252. animation-duration: 11s;
  253. }
  255. @keyframes animate {
  257. 0% {
  258. transform: translateY(0) rotate(0deg);
  259. opacity: 1;
  260. border-radius: 0;
  261. }
  263. 100% {
  264. transform: translateY(-1000px) rotate(720deg);
  265. opacity: 0;
  266. border-radius: 50%;
  267. }
  269. }
  271. /*waves****************************/
  274. .box {
  275. position: fixed;
  276. top: 0;
  277. transform: rotate(80deg);
  278. left: 0;
  279. }
  281. .wave {
  282. position: fixed;
  283. top: 0;
  284. left: 0;
  285. opacity: 0.9;
  286. position: absolute;
  287. top: 3%;
  288. left: 10%;
  289. background: var(--onda3);
  290. width: 1000px;
  291. height: 1000px;
  292. margin-left: -50px;
  293. margin-top: -200px;
  294. transform-origin: 50% 48%;
  295. border-radius: 43%;
  296. animation: drift 7000ms infinite linear;
  297. }
  299. .wave.-three {
  300. animation: drift 7500ms infinite linear;
  301. position: fixed;
  302. opacity: 0.9;
  303. background-color: var(--onda1);
  304. }
  306. .wave.-two {
  307. animation: drift 5500ms infinite linear;
  308. opacity: 0.9;
  309. background: var(--onda2);
  310. position: fixed;
  311. }
  313. .box:after {
  314. content: '';
  315. display: block;
  316. left: 0;
  317. top: 0;
  318. width: 100%;
  319. height: 100%;
  320. z-index: 11;
  321. transform: translate3d(0, 0, 0);
  322. }
  324. @keyframes drift {
  325. from {
  326. transform: rotate(0deg);
  327. }
  329. from {
  330. transform: rotate(360deg);
  331. }
  332. }
  334. /*LOADING SPACE*/
  336. .contain {
  337. animation-delay: 4s;
  338. z-index: 1000;
  339. position: fixed;
  340. top: 0;
  341. left: 0;
  342. bottom: 0;
  343. right: 0;
  344. display: -webkit-box;
  345. display: -ms-flexbox;
  346. display: flex;
  347. -ms-flex-flow: row nowrap;
  348. flex-flow: row nowrap;
  349. -webkit-box-pack: center;
  350. -ms-flex-pack: center;
  351. justify-content: center;
  352. -webkit-box-align: center;
  353. -ms-flex-align: center;
  354. align-items: center;
  356. background: #25a7d7;
  357. background: -webkit-linear-gradient(#25a7d7, #2962FF);
  358. background: linear-gradient(#25a7d7, #25a7d7);
  359. }
  361. .icon {
  362. width: 100px;
  363. height: 100px;
  364. margin: 0 5px;
  365. }
  367. /*Animation*/
  368. .icon:nth-child(2) img {
  369. -webkit-animation-delay: 0.2s;
  370. animation-delay: 0.2s
  371. }
  373. .icon:nth-child(3) img {
  374. -webkit-animation-delay: 0.3s;
  375. animation-delay: 0.3s
  376. }
  378. .icon:nth-child(4) img {
  379. -webkit-animation-delay: 0.4s;
  380. animation-delay: 0.4s
  381. }
  383. .icon img {
  384. -webkit-animation: anim 2s ease infinite;
  385. animation: anim 2s ease infinite;
  386. -webkit-transform: scale(0, 0) rotateZ(180deg);
  387. transform: scale(0, 0) rotateZ(180deg);
  388. }
  390. @-webkit-keyframes anim {
  391. 0% {
  392. -webkit-transform: scale(0, 0) rotateZ(-90deg);
  393. transform: scale(0, 0) rotateZ(-90deg);
  394. opacity: 0
  395. }
  397. 30% {
  398. -webkit-transform: scale(1, 1) rotateZ(0deg);
  399. transform: scale(1, 1) rotateZ(0deg);
  400. opacity: 1
  401. }
  403. 50% {
  404. -webkit-transform: scale(1, 1) rotateZ(0deg);
  405. transform: scale(1, 1) rotateZ(0deg);
  406. opacity: 1
  407. }
  409. 80% {
  410. -webkit-transform: scale(0, 0) rotateZ(90deg);
  411. transform: scale(0, 0) rotateZ(90deg);
  412. opacity: 0
  413. }
  414. }
  416. @keyframes anim {
  417. 0% {
  418. -webkit-transform: scale(0, 0) rotateZ(-90deg);
  419. transform: scale(0, 0) rotateZ(-90deg);
  420. opacity: 0
  421. }
  423. 30% {
  424. -webkit-transform: scale(1, 1) rotateZ(0deg);
  425. transform: scale(1, 1) rotateZ(0deg);
  426. opacity: 1
  427. }
  429. 50% {
  430. -webkit-transform: scale(1, 1) rotateZ(0deg);
  431. transform: scale(1, 1) rotateZ(0deg);
  432. opacity: 1
  433. }
  435. 80% {
  436. -webkit-transform: scale(0, 0) rotateZ(90deg);
  437. transform: scale(0, 0) rotateZ(90deg);
  438. opacity: 0
  439. }
  440. }
  442. .container {
  443. height: 100%;
  444. display: flex;
  445. flex-direction: column;
  446. justify-content: center;
  447. align-items: center;
  448. max-width: 465px;
  449. background: var(--background-img);
  450. background-position: center;
  451. background-repeat: no-repeat;
  452. background-size: cover;
  453. }
  455. .text_config {
  456. color: var(--cor-text-config) !important;
  457. }
  459. .logo {
  460. width: 100%;
  461. display: block;
  462. margin-top: 0px;
  463. margin-bottom: 15px;
  464. margin-left: auto;
  465. margin-right: auto;
  466. content: var(--logo-img-url);
  467. filter: drop-shadow(var(--shadow1-offset-x) var(--shadow1-offset-y) var(--shadow1-blur) var(--shadow1-color));
  468. }
  471. .card {
  472. backdrop-filter: blur(var(--blur-amount2));
  473. background: var(--vidro-color);
  474. border-radius: 20px;
  475. border: 1px solid #1e1e1e !important;
  476. box-shadow: -8px 12px 20px 0 rgb(13 15 18 / 63%) !important;
  477. padding: 15px !important;
  478. max-width: 450px;
  479. height: auto;
  480. position: relative;
  481. filter: drop-shadow(var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color));
  482. }
  484. .btn-dark {
  485. border: none;
  486. background: linear-gradient(var(--cor-gradiente-btstart-incial), var(--cor-gradiente-btstart-final));
  487. border-radius: 15px;
  488. --bs-btn-hover-bg: #4b8d4b18 !important;
  489. --bs-btn-hover-border-color: #47593f2f !important;
  490. }
  492. .modal-content {
  493. background-color: transparent;
  494. backdrop-filter: blur(25px);
  495. }
  497. .tool {
  498. align-items: center;
  499. justify-content: center;
  500. text-align: center;
  501. }
  503. .tool-bt {
  504. background: linear-gradient(var(--cor-gradiente-config-incial), var(--cor-gradiente-config-final));
  505. border-radius: 20px;
  506. color: var(--cor-text-config) !important;
  507. height: 35px;
  508. width: 100%;
  509. border: var(--btn-border);
  510. }
  512. .input-group,
  513. .form-control,
  514. .input-group-text {
  515. background: #0808083f;
  516. color: var(--icon-color);
  517. border: none;
  518. border-radius: 15px;
  519. outline: none;
  520. }
  522. .form-control::placeholder {
  523. color: var(--text-color);
  524. }
  526. .form-control:focus {
  527. color: var(--text-color);
  528. outline: none;
  529. box-shadow: none;
  530. }
  532. .input-group-text {
  533. padding-right: 0;
  534. }
  537. .fs-5 {
  538. font-size: 1rem !important;
  539. }
  541. nav {
  543. background: linear-gradient(var(--cor-gradiente-nav-inicial), var(--cor-gradiente-nav-final));
  544. border-radius: 20px;
  545. font-size: 0;
  546. width: 100%;
  547. max-width: 450px;
  548. height: auto;
  549. position: sticky;
  550. margin-top: 20px;
  551. margin-bottom: 10px;
  552. display: flex;
  553. justify-content: space-around;
  554. align-items: center;
  555. }
  557. nav span {
  558. line-height: 45px;
  559. height: 100%;
  560. position: relative;
  561. z-index: 1;
  562. text-decoration: none;
  563. text-align: center;
  564. color: white !important;
  565. cursor: alias;
  566. }
  568. nav span svg {
  569. fill: var(--cor-icon-config);
  571. }
  573. nav .animation {
  574. position: absolute;
  575. height: 100%;
  576. top: 0;
  577. z-index: 0;
  578. transition: all .5s ease 0s;
  579. border-radius: 8px;
  580. }
  582. a:nth-child(1) {
  583. width: 30%;
  584. }
  586. a:nth-child(2) {
  587. width: 30%;
  588. }
  590. a:nth-child(3) {
  591. width: 40%;
  592. }
  594. nav .start-home,
  595. a:nth-child(1):hover~.animation {
  596. width: 30%;
  597. left: 0;
  598. background-color: #1212123f;
  599. border-radius: 20px;
  600. }
  602. nav .start-about,
  603. a:nth-child(2):hover~.animation {
  604. width: 30%;
  605. ;
  606. left: 30%;
  607. background-color: #1212123f;
  608. border-radius: 20px;
  609. }
  611. nav .start-blog,
  612. a:nth-child(3):hover~.animation {
  613. width: 40%;
  614. left: 60%;
  615. background-color: #1212123f;
  616. border-radius: 20px;
  617. }
  619. body {
  620. font-size: 12px;
  621. font-family: sans-serif;
  622. background: color #1212123f;
  623. }
  625. @media (min-width: 768px) {
  627. .container,
  628. .container-md,
  629. .container-sm {
  630. max-width: 100%;
  631. }
  632. }
  634. .rede {
  635. color: #ff0000;
  636. }
  638. .iplocal {
  639. color: #ffffff;
  640. }
  642. .containerlocal {
  643. background: #0808083f;
  644. border-radius: 20px;
  645. border: 1px solid #1e1e1e !important;
  646. padding: 15px !important;
  647. width: 95%;
  648. max-width: 450px;
  649. height: initial;
  650. position: absolute;
  651. margin-top: 700px;
  652. margin-bottom: -66px;
  653. }
  656. .hidden {
  657. display: none;
  658. }
  659. </style>
  660. </head>
  662. <body>
  663. <ul class="circles">
  664. <li></li>
  665. <li></li>
  666. <li></li>
  667. <li></li>
  668. <li></li>
  669. <li></li>
  670. <li></li>
  671. <li></li>
  672. <li></li>
  673. <li></li>
  674. </ul>
  675. <div class='box'>
  676. <div class='wave -one'></div>
  677. <div class='wave -two'></div>
  678. <div class='wave -three'></div>
  679. </div>
  681. <div class="containerlocal">
  682. <span class="font-semibold text-xs mr-2"
  683. style="color: #ffffff;"">📢 IP Local da sua operadora:</span><span class=" rede font-semibold text-xs mr-2"
  684. id="name">REDE</span> <span class="iplocal font-semibold text-xs" id="ip">127.0.0.1</span>
  685. </div>
  687. <div class="container">
  688. <div class="card border-0 p-2 shadow mb-3 w-100">
  690. <img class="logo">
  691. <script>
  692. document.documentElement.style.setProperty('--logo-img-url',);
  693. </script>
  696. <div class="input-group mb-2 shadow" id="config-area">
  697. <input class="form-control" type="text" placeholder="CONFIGURAÇÃO" readonly title="configurações"
  698. id="config" style="background-color: #0808083f;" />
  699. <span class="input-group-text me-2">
  700. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
  701. class="bi bi:bar-chart" viewBox="0 0 16 16">
  702. <path
  703. 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" />
  704. </svg>
  705. </span>
  706. </div>
  707. <div class="input-group input mb-2 shadow">
  708. <span class="input-group-text">
  709. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
  710. class="bi bi:file-person" viewBox="0 0 16 16">
  711. <path
  712. 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" />
  713. <path d="M8 10a3 3 0 1 0 0-6a3 3 0 0 0 0 6z" />
  714. </g>
  715. </svg>
  716. </span>
  717. <input class="form-control" type="text" placeholder="usuario" id="username"
  718. style="background-color: #0808083f;" />
  719. </div>
  720. <div class="input-group input mb-2 shadow">
  721. <span class="input-group-text">
  722. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
  723. class="bi bi:file-earmark-lock" viewBox="0 0 16 16">
  724. <path
  725. 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" />
  726. <path
  727. 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" />
  728. </g>
  729. </svg>
  730. </span>
  731. <input class="form-control" type="password" placeholder="senha" id="password"
  732. style="background-color: #0808083f;" />
  733. <span class="input-group-text me-2"
  734. onclick="password.type==`text`?password.type = `password`:password.type = `text`">
  735. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
  736. viewBox="0 0 16 16">
  737. <path
  738. 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" />
  739. <path
  740. 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" />
  741. </svg>
  742. </span>
  743. </div>
  744. <div class="input-group input mb-2 shadow">
  745. <span class="input-group-text">
  746. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-key"
  747. viewBox="0 0 16 16">
  748. <path
  749. 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" />
  750. <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
  751. </svg>
  752. </span>
  753. <input class="form-control" type="text" placeholder="V2ray UUID" id="uuid"
  754. style="background: #0808083f;" />
  755. <span class="input-group-text me-2"
  756. onclick="uuid.type==`text`?uuid.type = `password`:uuid.type = `text`">
  757. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
  758. viewBox="0 0 16 16">
  759. <path
  760. 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" />
  761. <path
  762. 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" />
  763. </svg>
  764. </span>
  765. </div>
  766. <button class="btn btn-dark w-100 shadow" id="start-stop">INICIAR</button>
  767. <nav>
  769. <span id="sync" onclick="DtStartAppUpdate.execute()" class="fi fi-rr-refresh">
  770. <?xml version="1.0" encoding="UTF-8"?>
  771. <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="24" height="24">
  772. <path
  773. 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" />
  774. <path
  775. 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" />
  776. </svg>
  777. </span>
  781. <span id="logger" class="fi fi-rs-clipboard-list">
  782. <?xml version="1.0" encoding="UTF-8"?>
  783. <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="24" height="24">
  785. <path
  786. 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" />
  787. </svg>
  788. </span>
  790. <span aria-hidden="true" onclick="ToolsModal.show()" class="fi fi-rr-settings">
  791. <?xml version="1.0" encoding="UTF-8"?>
  792. <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24"
  793. width="24" height="24">
  794. <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" />
  795. <path
  796. 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" />
  797. </svg>
  798. </span>
  800. </nav>
  801. </div>
  803. <div class="card my-3 w-100 text-center border-0 p-2 shadow text-light fs-5 text-uppercase fw-bold" id="state"
  804. style="padding: 5px !important; font-size: 15px !important;">
  805. </div>
  806. <div class="modal fade" id="checkUserModal">
  807. <div class="modal-dialog modal-dialog-centered" role="document">
  808. <div class="modal-content rounded-3 shadow">
  809. <div class="modal-header border-bottom-0 pb-0">
  810. <h1 class="modal-title fs-5 chk-title text-light"></h1>
  811. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  812. aria-label="Close"></button>
  813. </div>
  814. <div class="modal-body text-center">
  815. <p class="fs-5 mb-0 chk-message text-light"></p>
  816. </div>
  817. </div>
  818. </div>
  819. </div>
  820. <div class="modal fade" id="errorModal">
  821. <div class="modal-dialog modal-dialog-centered" role="document">
  822. <div class="modal-content rounded-3 shadow">
  823. <div class="modal-header border-bottom-0 pb-0">
  824. <h1 class="modal-title fs-5 err-title text-light"></h1>
  825. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  826. aria-label="Close"></button>
  827. </div>
  828. <div class="modal-body text-center">
  829. <p class="fs-5 mb-0 err-message text-light"></p>
  830. </div>
  831. </div>
  832. </div>
  833. </div>
  834. <div class="modal fade" id="loggerModal">
  835. <div class="modal-dialog modal-dialog-centered" role="document">
  836. <div class="modal-content rounded-3 shadow">
  837. <div class="modal-body p-1 text-center">
  838. <ul class="list-group bg-transparent overflow-y-auto logger-content" style="max-height: 600px;">
  839. </ul>
  840. </div>
  841. <div class="modal-footer flex-nowrap p-0">
  842. <button type="button" class="btn btn-lg btn-dark text-light w-100 clear-logger">LIMPAR</button>
  843. <button type="button" class="btn btn-lg btn-dark text-light w-100"
  844. data-bs-dismiss="modal">FECHAR</button>
  845. </div>
  846. </div>
  847. </div>
  848. </div>
  849. <div class="tool webm modal fade" index="-1" id="ToolsModal">
  850. <div class="modal-dialog modal-dialog-centered" role="document">
  851. <div class="modal-content">
  852. <div class="tool modal-header">
  853. <h5 class="modal-title text_config">Configurações do aplicativo</h5>
  854. </div>
  855. <div class="modal-body">
  856. <button class="tool-bt rounded-2xl text-white" onclick="DtStartApnActivity.execute()"><i
  857. class="info2 bi bi-wifi mr-2"></i>Alterar protocolo de APN</button>
  858. </div>
  859. <div class="modal-body">
  860. <button class="tool-bt rounded-2xl text-white"
  861. onclick="DtIgnoreBatteryOptimizations.execute()"><i
  862. class="info2 bi bi-battery-full mr-2"></i>Otimizar Bateria</button>
  863. </div>
  866. <div class="modal-body">
  867. <button class="tool-bt rounded-2xl text-white" id="btnHotSpot"><i
  868. class="info2 bi bi-trash3 mr-2"></i>Compartilhar Internet</button>
  869. </div>
  871. <div class="modal-body">
  872. <button class="tool-bt rounded-2xl text-white" onclick="DtCleanApp.execute()"><i
  873. class="info2 bi bi-trash3 mr-2"></i>Limpar cachê e dados</button>
  874. </div>
  876. <div class="tool modal-footer">
  877. <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
  878. style="background-color: var(--btn-modal);">FECHAR</button>
  880. </div>
  881. </div>
  882. </div>
  883. </div>
  884. <div class="modal fade" id="configModal">
  885. <div class="modal-dialog modal-dialog-centered" role="document">
  886. <div class="modal-content rounded-3 shadow">
  887. <div class="modal-header border-bottom-0 pb-0">
  888. <h1 class="modal-title fs-5 text-white">CONFIGURAÇÕES</h1>
  889. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  890. aria-label="Close"></button>
  891. </div>
  892. <div class="modal-body p-1 text-center">
  893. <ul class="list-group bg-transparent overflow-y-auto config-body" style="max-height: 600px;">
  894. <li class="list-group-item bg-transparent text-white border-0">
  895. <p>CATEGORIA</p>
  896. <ul class="list-group bg-transparent overflow-y-auto text-start">
  897. <li
  898. class="list-group-item d-flex bg-transparent text-white border-0 border-bottom rounded-0">
  899. <img src="https://cdn-icons-png.flaticon.com/512/3686/3686811.png" width="40"
  900. height="40">
  901. <div class="d-flex flex-column ms-2 w-100">
  902. <span>CONFIG 01</span>
  903. <span>DESC 01</span>
  904. </div>
  905. <div class="d-flex flex-column ms-2 w-100">
  906. <span class="text-end">CONFIG_MODE</span>
  907. </div>
  908. </li>
  909. </ul>
  910. </li>
  911. </ul>
  912. </div>
  913. </div>
  914. </div>
  915. </div>
  916. <div class="modal fade" id="RenovarModal">
  917. <div class="modal-dialog modal-dialog-centered" role="document">
  918. <div class="modal-content rounded-3 shadow">
  919. <div class="modal-header border-bottom-0 py-3">
  920. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  921. aria-label="Close"></button>
  922. </div>
  923. <div class="modal-body ratio rounded-bottom-3" style="height: 600px;">
  924. <div class="spinner d-flex w-100 h-100 align-items-center justify-content-center">
  925. <div class="spinner-border text-light p-5" role="status">
  926. <span class="visually-hidden">Loading...</span>
  927. </div>
  928. </div>
  929. <iframe class="rounded-bottom-3" id="RenovarFrame"></iframe>
  930. </div>
  931. </div>
  932. </div>
  933. </div>
  934. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
  935. <script>
  936. const startHotSpot = () => {
  937. DtStartHotSpotService.execute();
  938. txtbtn.textContent = 'HOTSPOT';
  939. }
  941. const stopHotSpot = () => {
  942. DtStopHotSpotService.execute();
  943. txtbtn.textContent = 'HOTSPOT';
  944. }
  946. const toggleHotSpot = () => {
  947. const hotSpotStatus = window?.DtGetStatusHotSpotService?.execute() ?? 'STOPPED';
  948. hotSpotStatus == 'RUNNING' ? stopHotSpot() : startHotSpot();
  949. }
  951. const btnHotSpot = document.querySelector("#btnHotSpot");
  952. btnHotSpot.addEventListener('click', toggleHotSpot);
  954. const hotSpotStatus = window?.DtGetStatusHotSpotService?.execute() ?? 'STOPPED';
  955. if (hotSpotStatus == 'RUNNING') {
  956. txtbtn.textContent = 'HOTSPOT';
  957. }
  959. </script>
  961. <script>
  962. class AndroidMock {
  963. static getLocalIP() {
  964. return '192.168.0.1';
  965. }
  967. static getConfig() {
  968. return JSON.stringify({
  969. urlCheckUser: 'URLAQUI'
  970. });
  971. }
  973. static getNetworkName() {
  974. return 'REDE';
  975. }
  977. static openRadioInfo() {
  978. console.log('openRadioInfo');
  979. }
  980. }
  981. </script>
  983. <script>
  984. function showLocalIP(android) {
  985. console.log(android.getNetworkName());
  986. document.getElementById('name').innerHTML = ' ' + android.getNetworkName() + ':';
  987. document.getElementById('ip').innerHTML = android.getLocalIP();
  989. setInterval(() => {
  990. document.getElementById('name').innerHTML =
  991. ' ' + android.getNetworkName() + ':';
  992. document.getElementById('ip').innerHTML = android.getLocalIP();
  993. }, 2000)
  994. }
  996. window.onload = function () {
  997. const android = window.Android || AndroidMock;
  998. showLocalIP(android);
  999. }
  1001. function mostrar(id) {
  1002. if (document.getElementById(id).style.display !== "none") {
  1003. document.getElementById(id).style.display = "none";
  1004. return;
  1005. }
  1006. Array.from(document.getElementsByClassName("hidden")).forEach(
  1007. div => (div.style.display = "none")
  1008. );
  1009. document.getElementById(id).style.display = "block";
  1010. }
  1012. </script>
  1014. <script>
  1015. const configArea = document.querySelector('#config-area')
  1016. const config = document.querySelector('#config')
  1017. const username = document.querySelector('#username')
  1018. const password = document.querySelector('#password')
  1019. const uuid = document.querySelector('#uuid')
  1020. const logger = document.querySelector('#logger')
  1022. const networkStatus = document.querySelector('#section.local-ip')
  1024. const startStopVpn = document.querySelector('#start-stop')
  1025. const stateStatus = document.querySelector('#state')
  1027. const loggerModal = new bootstrap.Modal(document.querySelector('#loggerModal'))
  1028. const checkUserModal = new bootstrap.Modal(document.querySelector('#checkUserModal'))
  1029. const errorModal = new bootstrap.Modal(document.querySelector('#errorModal'))
  1030. const configModal = new bootstrap.Modal(document.querySelector('#configModal'))
  1032. const ToolsModal = new bootstrap.Modal(document.querySelector('#ToolsModal'))
  1034. const clearLogger = document.querySelector('.clear-logger')
  1036. const RenovarModal = new bootstrap.Modal(document.querySelector('#RenovarModal'))
  1038. configArea.addEventListener('click', e => showConfigsModal())
  1039. username.addEventListener('input', e => DtUsername.set(e.target.value))
  1040. password.addEventListener('input', e => DtPassword.set(e.target.value))
  1041. uuid.addEventListener('input', e => DtUuid.set(e.target.value))
  1042. logger.addEventListener('click', e => loggerModal.show())
  1044. startStopVpn.addEventListener('click', (e) => {
  1045. if (DtGetVpnState.execute() != 'DISCONNECTED') {
  1046. DtExecuteVpnStop.execute()
  1047. } else {
  1048. DtExecuteVpnStart.execute()
  1049. }
  1050. })
  1051. clearLogger.addEventListener('click', () => DtClearLogs.execute())
  1053. RenovarModal._element.addEventListener('shown.bs.modal', () => {
  1054. const iframe = document.querySelector('#RenovarFrame');
  1055. if (!iframe.src) {
  1056. iframe.src = 'https://painel.plenonet.com.br/renovar.php'
  1057. iframe.addEventListener('load', () => {
  1058. mp3Modal._element.querySelector('.spinner').classList.add('d-none')
  1059. })
  1060. }
  1061. })
  1062. RenovarModal._element.addEventListener('hide.bs.modal', () => {
  1063. const iframe = document.querySelector('#RenovarFrame');
  1064. iframe.src = '';
  1065. })
  1067. Object.defineProperty(String.prototype, 't', {
  1068. value: function t() {
  1069. return window?.DtTranslateText?.execute('' + this) ?? '' + this
  1070. },
  1071. writable: true,
  1072. configurable: true,
  1073. })
  1075. const dtConfigClickListener = () => {
  1076. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{ "auth": {}, "mode": "v2ray" }`)
  1077. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  1078. config.placeholder = data.name ?? 'LBL_CHOOSE_CONFIG'.t()
  1079. username.parentElement.style.display = !data?.auth?.username && !isV2ray ? 'flex' : 'none';
  1080. password.parentElement.style.display = !data?.auth?.password && !isV2ray ? 'flex' : 'none';
  1081. uuid.parentElement.style.display = !data?.auth?.v2ray_uuid && isV2ray ? 'flex' : 'none';
  1082. }
  1084. const dtVpnStateListener = state => {
  1085. const isRunning = state != 'DISCONNECTED';
  1087. stateStatus.innerHTML = ('LBL_STATE_' + state).t()
  1088. startStopVpn.innerHTML = isRunning ? 'LBL_BTN_STOP'.t() : 'LBL_BTN_START'.t()
  1090. if (isRunning) {
  1091. username.setAttribute('readonly', 'true')
  1092. password.setAttribute('readonly', 'true')
  1093. } else {
  1094. username.removeAttribute('readonly')
  1095. password.removeAttribute('readonly')
  1096. }
  1098. if (state == 'CONNECTING') dtShowSuccessToastListener('Conectando...')
  1099. }
  1101. const dtCheckUserStartedListener = () => {
  1102. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{}`)
  1103. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  1104. if (isV2ray) return;
  1105. const html = `
  1106. <div class="d-flex justify-content-center">
  1107. <div class="spinner-border p-5" role="status">
  1108. <span class="visually-hidden">Loading...</span>
  1109. </div>
  1110. </div>
  1111. `
  1113. checkUserModal._element.querySelector('.chk-title').textContent = 'CHECK USER'
  1114. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  1115. checkUserModal.show()
  1116. }
  1118. function isBeforeExpiration(expirationDays, daysBefore) {
  1119. return expirationDays <= daysBefore;
  1120. }
  1122. const dtCheckUserModelListener = model => {
  1123. const data = JSON.parse(model ?? `{"username": "test"}`);
  1125. const html = `
  1126. <div class="d-flex flex-column text-white">
  1127. <span>👤Nome de usuario: ${data.username}</span>
  1128. <span>📆Expira em: ${data.expiration_date}</span>
  1129. <span>📆Dias restantes: ${data.expiration_days}</span>
  1130. <span>🚫Conexoes: ${data.count_connections}|${data.limit_connections}</span>
  1131. ${isBeforeExpiration(data.expiration_days, 3) ? '<span><center>🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨</center><span><span><center>⚠️Faltando 3 dias para o expirar o usuário⚠️</center></span>🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨</span></span>' : ''}
  1132. ${isBeforeExpiration(data.expiration_days, 2) ? '<span><span><span><center>⚠️Faltando 2 dias para o expirar o usuário⚠️</center></span><center>🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨</center></span></span>' : ''}
  1133. ${isBeforeExpiration(data.expiration_days, 1) ? '<span><span><span><center>⚠️Faltando 1 dias para o expirar o usuário⚠️</center></span><center>🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨</center></span></span>' : ''}
  1134. </div>
  1135. `;
  1137. checkUserModal._element.querySelector('.chk-title').textContent = '📆 Olá, ' + data.username.toUpperCase() + '👤';
  1138. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  1139. checkUserModal.show();
  1140. }
  1147. const dtMessageErrorListener = message => {
  1148. const data = JSON.parse(message)
  1149. errorModal._element.querySelector('.err-title').textContent = data.title;
  1150. errorModal._element.querySelector('.err-message').innerHTML = data.content;
  1151. errorModal.show()
  1152. }
  1154. const dtOnNewLogListener = () => {
  1155. const mock = [];
  1156. for (let i = 0; i < 30; i++) {
  1157. mock.push({ 'TIME': 'MESSAGE ' + i })
  1158. }
  1160. const log = window?.DtGetLogs?.execute() || JSON.stringify(mock)
  1161. const data = JSON.parse(log)
  1163. let content = '';
  1164. data.forEach(item => {
  1165. content += '<li class="list-group-item fs-6 bg-transparent text-white p-0 border-0 text-start ms-2 text-wrap">';
  1166. content += Object.keys(item)[0] + " " + item[Object.keys(item)]
  1167. content += '</li>';
  1168. })
  1170. loggerModal._element.querySelector('.logger-content').innerHTML = content;
  1171. const listGroup = loggerModal._element.querySelector('.list-group')
  1172. listGroup.scrollTo(0, listGroup.scrollHeight)
  1173. }
  1175. const dtVpnStartedSuccessListener = () => dtShowSuccessToastListener('Conectado com sucesso')
  1177. const dtVpnStoppedSuccessListener = () => dtShowSuccessToastListener('Desconectado com sucesso')
  1179. const dtShowSuccessToastListener = text => {
  1180. Toastify({
  1181. text: text,
  1182. close: true,
  1183. style: {
  1184. background: 'linear-gradient(to right, #00b09b, #96c93d)',
  1185. marginTop: '35px',
  1186. }
  1187. }).showToast()
  1188. }
  1190. const dtShowErrorToastListener = text => {
  1191. Toastify({
  1192. text: text,
  1193. close: true,
  1194. style: {
  1195. background: 'linear-gradient(to right, #ff5c33, #e69900)',
  1196. marginTop: '35px',
  1197. }
  1198. }).showToast()
  1199. }
  1201. const showConfigsModal = () => {
  1202. 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"}]}]'
  1203. const data = JSON.parse(window?.DtGetConfigs?.execute() || mock)
  1205. data.sort((a, b) => a.sorter - b.sorter)
  1206. data.forEach(item => item.items.sort((a, b) => a.sorter - b.sorter))
  1208. const body = configModal._element.querySelector('.config-body')
  1209. body.innerHTML = ''
  1211. data.forEach(category => {
  1212. const categoryElement = document.createElement('li')
  1213. categoryElement.classList.add('list-group-item', 'bg-transparent', 'text-white', 'border-0', 'mb-1', 'rounded-1', 'px-1')
  1214. categoryElement.innerHTML = `<span class="fw-bold btn-dark w-100 d-block p-1 rounded-1 mb-1">${category.name}</span>`
  1216. const configUlElement = document.createElement('ul')
  1217. configUlElement.classList.add('list-group', 'bg-transparent', 'overflow-y-auto')
  1219. category.items.forEach(item => {
  1220. const configElement = document.createElement('li')
  1221. configElement.classList.add('list-group-item', 'd-flex', 'btn-dark', 'text-white', 'border-0', 'rounded-2', 'px-1', 'py-2', 'mb-1')
  1222. configElement.innerHTML = `
  1223. <img src="${item.icon}" width="40" height="40">
  1224. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  1225. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">${item.name}</span>
  1226. <span class="fst-italic fw-bold" style="font-size: 0.7rem;">${item.description || ''}</span>
  1227. </div>
  1228. <div class="d-flex flex-column ms-2">
  1229. <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">${item.mode}</span>
  1230. </div>
  1231. </li>
  1232. `
  1233. configElement.addEventListener('click', e => {
  1234. window?.DtSetConfig?.execute(item.id)
  1235. configModal.hide()
  1236. })
  1237. configUlElement.appendChild(configElement)
  1238. })
  1240. categoryElement.appendChild(configUlElement)
  1241. body.appendChild(categoryElement)
  1242. })
  1244. configModal.show()
  1245. }
  1247. username.value = window?.DtUsername?.get() ?? ''
  1248. password.value = window?.DtPassword?.get() ?? ''
  1249. uuid.value = window?.DtUuid?.get() ?? ''
  1251. username.placeholder = 'LBL_USERNAME'.t()
  1252. password.placeholder = 'LBL_PASSWORD'.t()
  1253. uuid.placeholder = 'LBL_UUID'.t()
  1255. dtOnNewLogListener()
  1256. dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')
  1257. dtConfigClickListener()
  1259. console.log('ODAIR.Dev!🚀')
  1260. </script>
  1262. </body>
  1264. </html>
comments powered by Disqus